$blekitny: #01afee;
$buttonUczen: rgba(1,175,238,0.7);
$buttonUczenHover: rgb(1,175,238);
$dane-kontaktowe: #999999;
$granatowy: #006699;
$granatowy2: rgb(14,72,135);
$prawie-czarny: #333333;
$szary: #f6f6f6;
$szary-ciemny: #999999;

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin-ext');

a{
    &.no-underline{
        text-decoration: none;
    }
}

body{
    font-family: 'Open Sans', sans-serif;
}

.bold{
    font-weight: bold;
}

.breadcrumb > li + li:before {
    padding: 0 !important;
    content: "" !important;
}

.display-none{
    display: none;
}

#divNaKomunikat{
    .alert{
        margin-top: 20px;
        margin-bottom: 0;
    }
}

#dodaj-nowe-zadanie-zawodowe, #dodaj-nowy-zawod{
    padding-bottom: 20px;
}

footer{
    background-image: url("../img/pasek.png");
    #footer1{
        background-color: $prawie-czarny;
        padding-bottom: 10px;
        .content{
            color: $szary-ciemny;
            text-align: justify;
        }
        .title{
            color: white;
            margin-top: 20px;
            text-align: center;
        }
    }
    #footer2{
        background-color: white;
        background-repeat: repeat-x;
        img{
            &.banner-center{
                display: block;
                margin: auto;
            }
            &.banner-to-left{
                float: left;
            }
            &.banner-to-right{
                float: right;
            }
        }
    }
    #footer3{
        background-color: $prawie-czarny;
        color: $szary-ciemny;
        padding: 16px 0 6px 0;
        p{
            font-size: 12px;
        }
    }
}

form#dodajPodzadanieFormularz, form#dodajZadanieFormularz, form#dodajZadanieZawodoweFormularz, form#dodajZawodFormularz{
    input{
        &[type="submit"], &[name="nazwaZadaniaZawodowego"]{
            margin-top: 10px;
            margin-bottom: 20px;
        }
    }
}

form#dodajPodzadanieFormularz, span.dodajPodzadanie{
    margin-left: 60px;
}

form#dodajZadanieFormularz, span.dodajZadanie{
    margin-left: 30px;
}

form#dodajZawodFormularz{
    margin-bottom: 10px;
}

form.edytujPodzadanieFormularz input, form.edytujZadanieFormularz input, form.edytujZawodFormularz input, form.usunZawodFormularz input{
    margin-bottom: 10px;
}

h1.section-title{
    font-weight: 800;
    &.dash-both{
        &:after, &:before{
            background: $granatowy;
            content: '';
            display: inline-block;
            height: 6px;
            margin-left: 45px;
            margin-right: 45px;
            position: relative;
            top: -10px;
            width: 66px;
        }
    }
    &.dash-right{
        &:after{
            background: $blekitny;
            content: '';
            display: inline-block;
            height: 6px;
            margin-left: 45px;
            position: relative;
            top: -10px;
            width: 66px;
        }
    }
    &.section-subtitle{
        font-size: 24px;
    }
}

i.usuwanie-podzadania, i.usuwanie-podzadania-elementu, .pointer, span.nazwaZadania, span.nazwaZawodu{
    &:hover{
        cursor: pointer;
    }
}

input{
    &.time{
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        color: #555;
    }
}

#kontakt{
    margin-top: 30px;
    .contact-item-container{
        height: 170px;
        padding: 20px 20px;
        text-align: center;
        &.left, &.right{
            color: black;
        }
        &.middle{
            color: white;
            padding-top: 70px;
        }
        i{
            padding-bottom: 20px;
        }
        p{
            font-size: 17px;
        }
    }
    .darkblue{
        background-color: $granatowy2;
    }
    .lightblue{
        background-color: $blekitny;
    }
}

#lista-zawodow{
    margin-bottom: 30px;
    i.fa{
        color: $blekitny;
        &:hover{
            color: $granatowy;
            cursor: pointer;
        }
    }
}

nav ul.nav li{
    margin: 0 10px;
    padding: 8px 0;
    text-transform: uppercase;
}

nav ul.nav>li.active>a{
    background-color: $granatowy !important;
    border-radius: 22px;
    color: white !important;
    font-size: 15px;
    font-weight: 800;
}

nav.navbar-default{
    background-color: transparent;
    border-color: transparent;
}

.no-underline:hover{
    text-decoration: none;
}

.padding-0{
    padding: 0;
}

.padding-left-0{
    padding-left: 0;
}

.padding-right-0{
    padding-right: 0;
}

#pracodawca-menu{
    button.submenu-item.active{
        background-color: $blekitny;
        color: white;
    }
}

#pracodawca-menu, #sekcja1, #sekcja2, #sekcja3, #sekcja4, #tworz-elearning-menu, #uczen-menu, #uczen-sekcja1{
    margin: 20px 0;
    padding: 10px 0;
}

#pracodawca-menu, #tworz-elearning-menu, #uczen-menu{
    background-color: $szary;
}

.read-more{
    background-color: $blekitny !important;
    border-radius: 5px;
    color: white !important;
    font-weight: 800;
}

#sekcja1{
    background-color: $szary;
    margin-top: 20px;
    &1{
        background-clip: content-box;
        background-image: url("../img/diament.png");
        background-position: right bottom;
        background-repeat: no-repeat;
        background-size: 600px;
        height: 554px;
        &tekst{
            line-height: 2.6;
            padding-top: 80px;
            h1{
                &.section-title{
                    margin-bottom: 25px;
                }
            }
        }
    }
}

#sekcja2, #uczen-sekcja1{
    .kolo {
        border-radius: 50%;
        background: $granatowy2;
        height: 154px;
        margin: 0 auto;
        padding: 37px;
        transition: background 0.3s ease;
        width: 154px;
        &:hover{
            background: $blekitny;
        }
        &Podpis{
            color: black;
            font-size: 16px;
            font-weight: 800;
            margin-top: 20px;
        }
    }
    h4{
        &.koloPodpis{
            margin-bottom: 30px;
        }
    }
}
#sekcja3{
    background-color: $szary;
}

.size-15{
    font-size: 15px;
}

span{
    &.divider{
        padding: 0 6px;
    }
    &.nazwaPodzadania{
        margin-left: 60px;
        &:before{
            content: '\f101';
            font-family: FontAwesome;
            margin-right: 10px;
        }
    }
}

span.nazwaZadania{
    margin-left: 30px;
    &:before{
        content: '\f105';
        font-family: FontAwesome;
        margin-right: 10px;
    }
}

#stworzHarmonogramZawod{
    input, select{
        margin-bottom: 10px !important;
    }
}

#top-header{
    // background-color: $szary;
    // margin-bottom: 20px;
    padding: 8px 0;
    div.contact-info{
        padding-top: 23px;
    }
    i{
        color: $blekitny;
        // padding-top: 16px;
    }
    span.contact{
        color: $dane-kontaktowe;
        font-size: 12px;
        margin-right: 20px;
    }
}

#uczen-sekcja1{
    &1{
        .btn{
            background-color: $buttonUczen;
            padding: 6px 30px;
            transition: background 0.3s ease;
            &:hover{
                background-color: $buttonUczenHover;
            }
        }
        .btn-edit{
            margin-right: 10px;
        }
        &tekst{
            line-height: 2.6;
            padding-top: 80px;
            h1{
                &.section-title{
                    margin-bottom: 25px;
                }
            }
        }
    }
    span{
        &.span{
            color: $blekitny;
            text-transform: uppercase;
        }
    }
}

ul{
    &.breadcrumb{
        background-color: transparent;
        margin: 0 auto;
        padding: 0 15px;
        text-align: right;
    }
}

.upper{
    text-transform: uppercase;
}

.w600{
    font-weight: 600;
}
