div,span.body,input,li,ul,textarea,a,form {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}

html { height: 100%; min-height:100%;   font-family:  'Quicksand', sans-serif;background: white;
}
body {min-height:100%;
    margin: 0;
    background-size: cover;
    background-attachment: fixed;
}

input{padding: 15px 15px; background: white;border: none; border-radius: 5px;   display: inline-block; font-size: 14pt; font-weight: bold;text-align: left; color:black;transition: all 300ms ease-in-out; }
input:focus{outline: none; background:#ffffff; }


.content{    margin: 0 auto 0px auto; padding:0 30px; max-width: 1360px; color:black;    position: relative;}

h1{font-size: 80px; color: #0961a9; text-align: center;     margin: 40px 0 0 0;}
h2{font-size: 50px;   margin: 20px 0;  color: #0961a9; }
h3{font-size: 35px; }
p{font-size: 20px; color: #4c6a83;  font-weight: bold; margin: 0 0 20px 0;}
p a{ color: #0961a9;}
p.main{font-size: 50px; text-align: center; max-width: 1280px; margin: 0 auto; font-weight: bold;}
p.cntr{text-align: center; line-height: 60px;}
p.main.frb{max-width: 750px;}
a{color:black;}

.topmarg{    height: 96px;width: 100%;background: white;}
.head{height: 96px;background: rgba(255, 255, 255, 0.9);position: fixed;width: 100%;top: 0;backdrop-filter: blur(10px);  -webkit-backdrop-filter:blur(10px);z-index: 999;}
.head .logo{}
.head .logo img{height: 96px; float: left;}
.head .logo h1{    color: #d2202b;font-size: 30px;float: left;margin: 0;padding: 19px 10px;line-height: 23pt;}
.head .logo h1 strong{color: #0961a9;display: block;}
.head .phonetop{ float:left; position: relative; z-index: 100;}
.head .phonetop img{max-height: 30px;     margin: 0 0 -9px 0;}
.head .phonetop a{    display: inline-block;padding: 30px 12px; font-size: 20px; font-weight: bold; text-decoration: none; color: #0961a9; float:left;}
.head .menu{}
.head .menu ul{ padding: 0 50px 0 100px;  margin: 0;  text-align: right;width: 100%;display: block;position: absolute;}
.head .menu ul li{    display: inline-block;padding: 30px 12px;}
.head .menu ul li a{font-size: 20px; font-weight: bold; text-decoration: none; color: #0961a9}
.head .menu ul li .btn{margin: -10px 0;}
.head  .fb{float:right;padding: 30px 30px; position: relative; z-index: 9999;}
.head  .fb img{height: 30px;}


.cocistime{background-image: url(/img/new/bg-grain-repeat.jpg); background-repeat: repeat; padding: 40px 0; margin: 60px 0;}
.cocistime p{padding: 0 25px 0 0;}
.cocistime .povrchy{padding: 0 10px;}
.cocistime .povrchy .col-3{padding: 10px;}
.cocistime .povrchy p{text-align: center; padding: 0;}
.cocistime .povrchy img{max-width: 100%;}
.cocistime .mista{}
.cocistime .mista .col-2{padding: 0 10px;}
.cocistime .mista p{text-align: left; padding: 0;}
.cocistime .mista img{max-width: 100%;}


.postup{}
.postup h2{text-align: center;}
.postup p{text-align: center;}

.jakfungujeme {margin: 0 -20px;}
.jakfungujeme .col-4{padding: 10px 20px;}
.jakfungujeme p{text-align: left; padding: 10px 0;}
.jakfungujeme img{max-width: 100%;     width: 100%;}




.reference{background-image: url(/img/new/bg-grain-repeat.jpg); background-repeat: repeat; padding: 40px 0 200px 0; margin: 60px 0;}
.reference h2{text-align: center;}
.reference .changebox{padding: 0 40px 0px 40px;position: relative;}
.reference .changebox .arrowleft{position: absolute;top: 50%; left: 0; z-index: 200; cursor: pointer;}
.reference .changebox .arrowleft img{width: 80px;}
.reference .changebox .arrowright{position: absolute;top: 50%; right: 0;  z-index: 200; cursor: pointer;}
.reference .changebox .arrowright img{width: 80px;}
.reference .changebox .slide{position: relative;}
.reference .changebox .slide img{max-width: 100%;}
.reference .changebox .slide .referencebox{  position: absolute; top: 65%; width: 50%; padding: 40px; left: 50%;}
.reference .changebox .slide .referencebox .referenceboxin{ background: white; width: 100%;  padding: 40px 40px 20px 40px; }
.reference .changebox .slide .referencebox p{}
.reference .changebox .slide .referencebox p img{    height: 25px;
    margin: 0 0 -5px 0;   }
.reference .changebox .dots{    width: 100%;
    text-align: center;
    padding: 0 120px 0 0; position: absolute;
    bottom: -40px;}
.reference .changebox .dots .dot{width: 12px; cursor: pointer;
    height: 12px;
    border-radius: 50%;
    background: #a7c6dc;
    margin: 5px;
    display: inline-block;}
.reference .changebox .dots .dot.active{    background: #0063a5;}

.logohref{

    position: relative;
    z-index: 999;
    display: block;
}
#cenik img{max-width: 100%;}
#kontakt img{max-width: 100%;}

.formular{background-image: url(/img/new/bg-grain-repeat.jpg); background-repeat: repeat; padding: 40px 0 40px 0; margin: 40px 0 0 0;}
.formular form{max-width: 75%;}
.formular form .sm{font-size: 15px; margin: 0;}
.formular form .sm a{color: #4c6a83;}
.formular form input, .formular form textarea{ width: 100%; font-family:  'Quicksand', sans-serif; padding: 10px 15px; border-style: solid; border-width: 1px; border-color: #bacbd9;
border-radius: 0; margin: 0 0 10px 0; font-size: 20px; font-weight: bold;}
.formular form button{border: none;}


.footer{background-image: url(/img/new/bg-pata.jpg); background-size: cover; background-position: center;  background-repeat: no-repeat; padding: 280px 0 60px 0; }
.footer h2{text-align: center; color:white;}
.footer a{color:white !important;}
.footer .rady{padding: 0 40px 200px 40px;}
.footer .rady .col-4{padding: 20px;}
.footer .rady .col-4 img{max-width: 200px; margin: 0 0 20px 0;}
.footer .rady .col-4 p{color:white;}
.footer .bottommenu{text-align: right;}
.footer .bottommenu a{color:white; display: inline-block; padding: 0 0 0 50px;}
.footer .bottommenu img{max-height: 35px; margin: 0 0 -10px 0}

.btn{margin: 20px 0;display: inline;transition: opacity 200ms ease-in-out;border-radius: 40px;background: #d2202b;color: white;padding: 10px 20px;font-size: 20px;font-weight: bold;text-decoration: none;}
.btn.btnR{background: #d2202b;  color:white;}
.btn.btnG{background: #489735;  color:white;}
.btn.btnS{background: white; border-style:solid; border-width: 1px; border-color: black; font-size: 20px;  color:black;}
.btn:hover{opacity: .7;}

#kookiecheck__reviewsettings{margin-top: 50px; clear: both; display: block;}
#kookiecheck__reviewsettings a{color:white; opacity: .8; font-size: 9pt;}



.row{  display: flex;max-width: 900px; margin: 50px auto;}
.row .col-6.text{    padding: 0 10px;}
.row .col-6.text h3{margin: 20px 0 0 0; text-align: left;}
.row .col-6.image {    text-align: center; }

.rev {display: flex; flex-direction: row;}
.rev .col-6.text{order: 1;}
.rev .col-6.image {order: 2; }

.row .col-6.image  img{max-width: 300px; width: 100%;}

.menuicon{display:none;}

.clear{clear:both;}




.imgheader {width: 100%; max-width: 1360px;}


.foot a{display: inline-block; padding-right: 10px;}

video{max-width: 100%;}

.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11 {min-height:1px; float: left;  position: relative;}
.col-1:after,.col-2:after,.col-3:after,.col-4:after,.col-5:after,.col-6:after,.col-7:after,.col-8:after,.col-9:after,.col-10:after,.col-11:after{ content: " "; clear: both; display: block; }

.col-1 { width: 8.333333333333332%; }
.col-2 { width: 16.666666666666664%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33333333333333%; }
.col-5 { width: 41.66666666666667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.333333333333336%; }
.col-8 { width: 66.66666666666666%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33333333333334%; }
.col-11 { width: 91.66666666666666%; }
.col-12 { width: 100%; }


.menu.on{display: block !important;
    background: red;
    position: absolute;
    top: 96px;
    right: 0;
    height: 1000px;
    width: 100%;
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter: blur(10px);
    z-index: 0;}
.menu.on ul{padding: 0;}
.menu.on li{display: block !important;}


@media screen and (max-width: 1100px) {
    .phonetop {display: none;}
}
@media screen and (max-width: 900px) {

    .menuicon{display: block;
        position: absolute;
        top: 15px;
        font-size: 25px;
        background: #e8e8e8;
        border-radius: 40px;
        width: 60px;
        height: 60px;
        text-align: center;
        right: 20px;
        padding: 15px 0;}
    .head .menu .fhd{display:none;}
    .head .menu ul{
        padding: 30px;
    }
    .head .menu ul li {
        display: inline-block;
        padding: 10px 12px;
    }
    h1{font-size: 40px; }
    h2{font-size: 30px; }
    h3{font-size: 24px; text-align: center;}
    p.main{text-align: center; font-size: 22px;}

   .col-6{width: 100%;  }
   .jakfungujeme .col-4{width: 100%;      width: 100%;
       max-width: 400px;
       float: none;
       margin: 0 auto;}
   .jakfungujeme .col-4 img{max-width: 400px;}
   .mista .col-2{width: 33.3333%; padding-bottom: 30px;}
   .mista .col-2 p{height:30px;}

    .rev {display: flex; flex-direction: column;}

   .cocistime .rev .col-6.image {
       order: 1;
   }
    .cocistime .rev .col-6.text {
            order: 2;
        }

   #reference .content{padding: 0 20px;}
   #reference .arrowright{margin: -20px 0 0 0; top: 100px;}
   #reference .arrowright img{width: 40px;}
    #reference .arrowleft{margin: -20px 0 0 0;  top: 100px;}
   #reference .arrowleft img{width:40px;}
    .reference .changebox{padding: 0 20px;}
    .reference .changebox .slide .referencebox {
        position: relative;
        top: 90%;
        width: 100%;
        max-width: 500px;
        margin: -40px auto 0 auto;
        padding: 0;
        left: 0;
    }
    .reference .changebox .dots {
        width: 100%;
        text-align: center;
        padding: 0 40px 0 0;
        position: absolute;
        bottom: -35px;
    }
    .reference .changebox .slide .referencebox .referenceboxin {
        padding: 20px 20px 2px 20px;
    }


    .reference {
        padding: 40px 0 40px 0;
        margin: 60px 0;
    }

    .formular form{max-width: 100%; text-align: center;}
    .formular h2{text-align: center;}
    .formular p{text-align: center;}

    .footer{background-size: cover; background-position: center;padding: 40px 0 40px 0;}
    .footer .rady{padding: 0 0px 40px 0px;}
    .footer .rady .col-4{width: 100%; text-align: center;}
    .footer .rady .col-4 img{width: 100px;}
    .footer .bottommenu a{padding: 10px; font-size: 12px;}

    .rozc .col-3{width: 50%;  }
}

@media screen and (max-width: 600px) {


.povrchy{}

    h1{}

    p{font-size: 12px;}
    p.main{font-size: 18px;  }
    p.cntr{text-align: center; line-height: 30px;}


    .rozc .col-3{width: 100%;  }


}