/* Styles go here */
@font-face {
    font-family: lato;
    src: url(../gfx/Lato-Regular.woff2);
    font-weight:normal;
}
@font-face {
    font-family: lato-l;
    src: url(../gfx/Lato-Light.woff2);
    font-weight:normal;
}
@font-face {
    font-family: lato-b;
    src: url(../gfx/Lato-Bold.woff2);
    font-weight:normal;
}
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(../gfx/gugelajkons.woff) format('woff');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}


/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, main {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*koniec reset*/



/**ffffffffffffffffffffffffffffff*****/
/* Extra small devices (portrait phones, less than 576px)*/
/* No media query since this is the default in Bootstrap*/

    body, html{
        margin:0 auto;
        font-size:17px;
        font-family: lato, sans-serif;
        /*width:100%;*/
        min-height:100vh;
    }

    section, .sekcja{
        padding:45px 5vw 45px 5vw;
        width:auto;
        line-height:1.6;
        text-align:justify;
    }
    section h1{
        text-transform: uppercase;
        width:100%;
        text-align:center;
        margin-bottom:45px;
        font-size:1.5em;
        font-family:lato-l, sans-serif;
        text-transform:uppercase;
    }
    p{
        /*text-indent: 50px;*/
    }
    a,a:visited,a:hover{
        text-decoration:none;
        color:#444;
    }
    #s_oferta_l{ clear:both; }
    
    .tloSzare{
        background-color:#eeeeee;
    }
    .tloBiale{
        background-color:#ffffff;
    }
    
    #s_glowa{
        /*background:url('../gfx/tlo_bakajana_2.jpg') no-repeat center;
        background-attachment:fixed;
        background-size:cover;*/
        padding:0;
        height:100vh;
        line-height:0;
    }
    #s_glowa .tlo{
        background-attachment:fixed;
        background-size:cover;
        height:100%;
        width:100%;
        display:block;
        position:absolute;
        top:0;
        left:0;
        transition: opacity 0.9s ease;
        opacity:0;
    }
    
    #s_glowa .tlo1{
        background:url('../gfx/slider-heidepark.jpg') no-repeat center;
        /*background-attachment:fixed;
        background-size:cover;
        height:100%;
        width:100%;
        display:block;
        position:absolute;
        top:0;
        left:0;*/
        background-attachment: scroll;
        background-size:cover;
    }
    #s_glowa .tlo2{
        background:url('../gfx/slider-sopot.jpg') no-repeat center;
        background-attachment:scroll;
        background-size:cover;
    }
    
    #s_glowa .tlo3{
        background:url('../gfx/slider-poczdam.jpg') no-repeat center;
        background-attachment:scroll;
        background-size:cover;
    }
    
    #s_glowa .tlo4{
        background:url('../gfx/slider-gdansk.jpg') no-repeat center;
        background-attachment:scroll;
        background-size:cover;
    }
    
    #s_glowa .tlo5{
        background:url('../gfx/slider-berlin.jpg') no-repeat center;
        background-attachment:scroll;
        background-size:cover;
    }
    
    
    
    #s_glowa .logo{
        display:block;
        background:url('../gfx/logo_kolor_trans.png') no-repeat center;
        background-size:contain;
        width:30vh;
        height:30vh;
        position:absolute;
        top:15vw;
        left:30px;
    }
    
    #s_glowa .logaGranty{
        display:block;
        width:100%;
        position:absolute;
        /*bottom:0;*/
        left:0px;
    }

    #s_glowa .logaGranty > img, .logaGrantyStopka >img{
        width:100%;
    }
    
    .logaGrantyStopka{
        display:block;
        width:100%;
    }
    
    .widocznosc{ opacity:1 !important; }
    
    .oMnieFoto{
        width:100%;
        /*float:left;*/
        margin:0 0 10px 0;
    }
    .oMnieFoto:after {
        content: '';
        display: block;
        clear: both;
    }
    
    .siatka{
        width:100%;
        display:grid;
        /*justify-content: space-between;*/
        grid-template-columns: repeat(auto-fill,1fr);
        transition:all .5s ease;
        grid-gap:20px;
    }
    .siatka > div{
        box-shadow:0px 1px 1px rgba(0,0,0,0.3);
        border-radius:2px;
        display:block;
        transition:box-shadow 0.3s, transform 0.2s;
        background-color:white;
        color:#222222;
        font-size:1.2em;
        text-align:left;
    }
    /*.siatka > div:hover{
        box-shadow:0px 2px 5px rgba(0,0,0,0.3);
        transform:scale(1.03);
    }*/
    .karta .karta_fota{
        width:100%;
        height:150px;
        background-size:cover;
        background-color:#ddd;
        background-position:center center;
    }
    .karta .karta_txt{
        padding:25px 20px 10px 20px;
        line-height:1;
    }
    .karta h3{
        margin:0;
    }
    .karta .k_nazwa{
        font-family: lato-b, sans-serif;
        text-transform:capitalize;
        text-align:center;
    }
    .karta .k_termin{
        font-family: lato-b, sans-serif;
        color:#888888;
        font-size:.5em;
        text-transform:uppercase;
    }
    .karta .k_cena{
        font-family: lato, sans-serif;
        line-height:2;
        font-size:0.8em;
    }
    .karta .k_btn{
        font-family: lato-b, sans-serif;
        padding:10px;
        transition:background-color .3s;
        display:inline-block;
        width:auto;
        text-transform:uppercase;
        font-size:.55em;
        border-radius:2px;
    }
    .karta .k_btn:hover{
        background-color:#eeeeee;
    }
    .karta .k_btn:nth-child(1){
        margin-left:-10px;
    }
    .karta .k_akcje{
        
    }
    .szkola{
        display:flex;
        justify-content:center;
        align-items: center;
        color:white;
        font-size:1.2em;
        text-shadow:0px 0px 5px rgba(0,0,0,0.9);
    }
    
    #s_stopka{
        background-color:#444444;
        height:60px;
        text-align:center;
        color:#999999;
        font-size:0.5em;
        justify-content:center;
        display:flex;
    }
    
    #fb{
            display:block;
            width:60px;
            height:60px;
            background: url('../gfx/flat1_social_fb.png') no-repeat center;
            background-size:cover;
            transform:scale(0.9);
    }
    #fb:hover{
            transform:scale(1);
    }
    #fb a{
        display:block;
        width:100%;
        height:100%;
    }

    #map { height: 300px; width: 300px; margin-top:-9px; }
    .owijaczMapFB { width:300px; }
    
    .siatkaKontakt{
        width:100%;
        display:grid;
        justify-content: space-around;
        grid-template-columns: repeat(1,auto);
        grid-gap:20px;
    }
    
    input, textarea{
        border:none;
        border-bottom:1px solid #ccc;
        background-color:transparent;
        width:300px;
        font-size:1em;
    }
    textarea{
        border-right:1px solid #ccc !important;
        height:170px;
    }
    button{
        border:none;
        margin-top:20px;
        background-color:transparent;
        padding:10px;
        border-radius:2px;
        cursor:pointer;
        text-transform:uppercase;
        font-family: lato-b, sans-serif;
        transition:background-color .3s;
        outline:none;
        box-shadow:0px 2px 5px rgba(0,0,0,0.3);
    }
    button:hover{
        background-color:#ddd;
    }
    .btnWylaczony{
        cursor: not-allowed;
    }
    .owijaczInput{
        width:300px;
        position:relative;
        margin-top:20px;
    }
    
    .owijaczInput label{
	/*pointer-events:none;*/
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	display:block;
	-ms-transition: top 0.2s, font-size 0.2s;
	-webkit-transition: top 0.2s, font-size 0.2s;
	-moz-transition: top 0.2s, font-size 0.2s;
	transition: top 0.2s, font-size 0.2s;
        color:#999;
    }
    
    .owijaczInput input:focus + label, .owijaczInput input.has-value + label{
        top:125%;
        font-size:0.6em;
    }
    
    .owijaczInput textarea:focus + label, .owijaczInput textarea.has-value + label{
        top:100%;
        font-size:0.6em;
    }
    
    .owijaczInput input:focus, .owijaczInput input.has-value,
    .owijaczInput textarea:focus, .owijaczInput textarea.has-value,
    button:focus{
        outline:0;
    }
        
    .mobileMenu{
        background-color: #444;
        color:white;
        position:fixed;
        top:0;
        right:-200px;
        display:block;
        width:200px;
        height:100vh;
        -webkit-transition: 0.3s;
        transition: 0.3s;
        z-index:999;
        box-shadow:0px 0px 3px rgba(0,0,0,0.8);
    }
    .mobileMenu ul{
        padding:20px;
        position:absolute;
        bottom:20px;
    }
    .mobileMenu li{
        width:160px;
        height:40px;
        display:block;
        margin:20px 0;
        border-radius:2px;
    }
    .mobileMenu li:hover{
        background-color:#555;
    }
    .mobileMenu li label{
        cursor:pointer;
        height:100%;
        width:100%;
        display:flex;
        justify-content:space-around;
        align-items: center;
        font-size:1.2em;
        
    }
    .mobileMenuSwitcher{
        position:fixed;
        padding:0px;
        bottom:10px;
        right:10px;
        -webkit-transition: 0.3s;
        transition: 0.3s;
        display:flex;
        justify-content:space-around;
        align-items: center;
        width:50px;
        height:50px;
        border-radius:50%;
        background-color:#fff;
        color:#444;
        box-shadow:0px 2px 5px rgba(0,0,0,0.3);
    }
    .mobileMenuSwitcher label{
        display:flex;
        justify-content:space-around;
        align-items: center;
        width:100%;
        height:100%;
        -webkit-transition: 0.3s;
        transition: 0.3s;
    }
    
    #mobileMenuSwitch{
        display:none;
    }
    #mobileMenuSwitch:checked + .owijaczMobilny .mobileMenu{
        right:0;
    }
    #mobileMenuSwitch:checked + .owijaczMobilny .mobileMenuSwitcher{
        right:210px;
    }
    #mobileMenuSwitch:checked + .owijaczMobilny .mobileMenuSwitcher label{
        transform:rotate(-180deg);
    }
    
    nav{
        position:fixed;
        top:0;
        right:0;
        width:100%;
        display:grid;
        justify-content: right;
        grid-template-columns: auto auto auto auto auto;
        transition:all .5s ease;
        padding:10px;
        grid-gap:10px;
        z-index:99;
        display:none;
        visibility:hidden;
    }
    nav a{
        padding:10px 15px 7px 15px;
        font-family: lato, sans-serif;
        color:white;
        text-transform:uppercase;
        font-size:1.2em;
        transition:background-color .5s ease, color .5s ease;
        border:1px solid transparent;
        cursor:pointer;
    }
    nav a:hover{
        background-color:rgba(255,255,255,1);
        color:#222222;
        border:1px solid white;
    }
    .gora{/* nav */
        
    }
    .dol{/* nav */
        background-color:white;
        box-shadow:0px 0px 2px rgba(0,0,0,0.4);
        padding:0;
    }
    nav.dol a{
        color:#444444;
    }
    nav.dol a:hover{
        background-color:#eeeeee;
        border:1px solid #eeeeee;
    }

    
/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
    .siatka{
        grid-template-columns: repeat(2,1fr);
    }
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    .siatka{
        grid-template-columns: repeat(3,1fr);
    }
    .siatkaKontakt{
        grid-template-columns: repeat(2,auto);
    }
    
    .oMnieFoto{
        width:50%;
        float:left;
        margin:0 20px 10px 0;
    }

}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .siatka{
        grid-template-columns: repeat(4,1fr);
    }

    .siatka > div:hover{
        box-shadow:0px 2px 5px rgba(0,0,0,0.3);
        transform:scale(1.03);
    }
    
    nav{
        display:grid;
        visibility:visible;
    }
    .mobileMenuSwitcher,.mobileMenu{
        display:none;
        visibility:hidden;
    }
    
    #s_glowa .tlo{
        background-attachment:fixed;
        background-size:cover;
        height:100%;
        width:100%;
        display:block;
        position:absolute;
        top:0;
        left:0;
        transition: opacity 0.9s ease;
        opacity:0;
    }
    
    #s_glowa .tlo1{
        background:url('../gfx/slider-heidepark.jpg') no-repeat center;
        /*background-attachment:fixed;
        background-size:cover;
        height:100%;
        width:100%;
        display:block;
        position:absolute;
        top:0;
        left:0;*/
        background-attachment:fixed;
        background-size:cover;
    }
    #s_glowa .tlo2{
        background:url('../gfx/slider-sopot.jpg') no-repeat center;
        background-attachment:fixed;
        background-size:cover;
    }
    
    #s_glowa .tlo3{
        background:url('../gfx/slider-poczdam.jpg') no-repeat center;
        background-attachment:fixed;
        background-size:cover;
    }
    
    #s_glowa .tlo4{
        background:url('../gfx/slider-gdansk.jpg') no-repeat center;
        background-attachment:fixed;
        background-size:cover;
    }
    
    #s_glowa .tlo5{
        background:url('../gfx/slider-berlin.jpg') no-repeat center;
        background-attachment:fixed;
        background-size:cover;
    }
    
    #s_glowa .logaGranty{
        display:block;
        width:100%;
        position:absolute;
        bottom:0;
        left:0px;
    }
    
    #s_glowa .logo{
        display:block;
        background:url('../gfx/logo_kolor_trans.png') no-repeat center;
        background-size:contain;
        width:30vh;
        height:30vh;
        position:absolute;
        top:30px;
        left:30px;
    }
    
    
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {

    .siatka{
        grid-template-columns: repeat(5,1fr);/* auto-fill */
    }
    
}
/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1500px) {

    .siatka{
        grid-template-columns: repeat(6,1fr);/* auto-fill */
    }
    .oMnieFoto{
        margin:0 20px 50px 0;
    }
    
}