@font-face {
    font-family: 'geomanist';
    src: url('/webfonts/geomanist-bold-webfont.woff2') format('woff2'), url('/webfonts/geomanist-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'geomanist';
    src: url('/webfonts/geomanist-medium-webfont.woff2') format('woff2'), url('/webfonts/geomanist-medium-webfont.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'geomanist';
    src: url('/webfonts/geomanist-book-webfont.woff2') format('woff2'), url('/webfonts/geomanist-book-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'geomanist';
    src: url('/webfonts/geomanist-regular-webfont.woff2') format('woff2'), url('/webfonts/geomanist-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}


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

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

h1, h2, h3{font-family: 'geomanist', system-ui, sans-serif;}


.fontbxes .col-4{padding: 30px 15px;}
.fontbxes .col-6{padding: 30px 15px;}
.fontbxes {margin: 0 -15px;}
.fontbxes table{width: 100%;}
.fontbxes table tr{height: 50px;}
.fontbxes table td{ }
.fontbxes h1{height: 50px; font-size: 20pt;}
.fontbxes .main{font-size: 100pt; height: 200px;}

.geomanist *{ font-family: 'geomanist', system-ui, sans-serif;}
.geomanistbold *{  font-family: 'geomanist', system-ui, sans-serif;font-weight: 600;}
.opensans *{  font-family: 'opensans', sans-serif; font-weight: 400;}

.btn{
    cursor: pointer;
    width: auto;
    border-color: #17244E;
    background: #17244E;
    color: #fff;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 1;
    cursor: pointer;
    padding: 9px 16px;
    overflow: visible; font-weight: bold;
    background-size: 100% 0;
    border-radius: 50px; margin: 0 20px 20px 0;
    transition: all .15s ease-out;
    text-align: center;
    font-size: .9375em;
    border-color: transparent;
}
.btn:hover{    color: white;
    text-decoration: none;
    outline: none;
    box-shadow: 20px 20px 50px #101e4114;
    background: #3FA0C2;}

.btn span{opacity: .7;  font-weight: normal;}
.btn.btn2{
    border-color: white;
    background: white;
    color: #17244E;
}
.btn.btn2:hover{    color: white;
    text-decoration: none;
    outline: none;
    box-shadow: 20px 20px 50px #101e4114;
    background: #3FA0C2;}
.clear{clear:both;}

.cnt{max-width: 1200px; margin: 100px auto;}
.overcnt{max-width: 1600px; padding: 100px 0; margin: 100px auto; background: #F5FAFD;}
.overcnt .cnt{margin: 0 auto;}

.colorpickers{}
.colorpickers .col-2{    margin-right: 40px;}
.colorpickers .color{width: 60px; height: 60px; border-radius: 50%; border-style: solid; border-width: 2px; border-color: white; }
.colorpickers strong{margin-top: 10px; display: block;}
.colorpickers .imgnote{padding: 10px 5px 10px 0; position: relative; opacity: 1;}
.colorpickers input{background: none;border: none;padding: 6px 6px 6px 6px;margin: -6px 0;display: inline-block;    width: 110px; border-radius: 3px; }
.colorpickers input:focus{outline: none; }
.colorpickers .copy{

    width: auto;
    border-color: #F5FAFD;
    background: #17244E;
    color: #fff;
    text-decoration: none;
    vertical-align: middle;
    z-index: 1;
    cursor: pointer;
    padding: 9px 16px;
    overflow: visible;
    background-size: 100% 0;
    border-radius: 50px;
    display: block;
    position: absolute;
    right: 20px;
    top: 0;
    transition: all .15s ease-out;
    text-align: center;
    font-size: .9375em;

    border-width: 1px;
    border-style: solid;
}
.colorpickers .copy:hover{
    color: white;
    text-decoration: none;
    outline: none;
    box-shadow: 20px 20px 50px #101e4114;
    background: #3FA0C2;

}


.domains{width:100%; border-collapse: collapse;}
.domains tr td{border-style: solid;  border-color:white; padding: 10px 0; border-width: 1px 0;}
.domains tr.first{opacity: .6; font-weight: bold;}
.domains a{color:black; }
.domains a:hover{text-decoration: underline;}

.hp .boxin{padding: 250px 200px;}
.hp .boxin img{max-width: 400px; display: inline-block;}
.boxin{padding: 160px 140px; text-align: center; position: relative;}
.col-3 .boxin{padding: 60px 40px; text-align: center; position: relative;}
.col-3 .boxin.sq{padding: 40px 40px; text-align: center; position: relative;}
.boxin img{max-width: 100%; display: block;}
.hp .cnt{padding: 160px 0; margin: 0 auto;}
.hp h1{text-align: left; font-size: 48pt; margin: 0;}
.hp h2{text-align: left; font-size: 22pt; margin: 0;}
.boxin.nopad{padding: 0 !important;;}
.boxin.nopad .boxin{padding: 60px 40px;}
.boxin.nopad .imgnote{text-align: left;}

.boxin .btns{position: absolute; bottom: 20px;
    right: 20px;}
.boxin.boxtext{text-align: left; padding: 20px 40px;}
.boxin.nopad  .btns {bottom: 60px;}
.boxin .btns a{
    cursor: pointer;
    width: auto;
    border-color: #F5FAFD;
    background: #17244E;
    color: #fff;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 1;
    cursor: pointer;
    padding: 9px 16px;
    overflow: visible;
    background-size: 100% 0;
    border-radius: 50px; margin: 0 0 0 15px;
    transition: all .15s ease-out;
    text-align: center;
    font-size: .9375em;

    border-width: 1px;
    border-style: solid;
    opacity: 0;
}
.boxin:hover .btns a{opacity: 1;}
.boxin .btns a:hover{  color: white;
    text-decoration: none;
    outline: none;
    box-shadow: 20px 20px 50px #101e4114;
    background: #3FA0C2;}

.icon{width: 40px; height: 40px; border-radius: 50%;padding: 9px; text-align: center; color:white; font-size: 12pt; margin: 10px 0 5px 0;}
.icon.red{background: #da7474;}
.icon.green{background: #74c774;}
.imgnote{padding: 5px 0; display: block; font-size: 10pt; opacity: .7;}

.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%; }

.row{clear: both;}

.bottominfo{font-size: 8pt; opacity: 0.8;}
.bottominfo a{color:black;}

@media screen and (max-width: 1020px) {
    .itemslist{  grid-template-columns: repeat(3, 1fr); }


    .hp .cnt{padding: 160px 15px; margin: 0 auto;}
    .hp h1{text-align: left; font-size: 36pt; margin: 0;}
    .hp h2{text-align: left; font-size: 18pt; margin: 0;}

    .cnt {
        padding: 15px;
        margin: 50px auto;
    }

}
@media screen and (max-width: 720px) {
    .itemslist{  grid-template-columns: repeat(2, 1fr); }

    .mapoverlay .content .vysledky .box{  width: 100%; }




    .colorpickers .color{margin-top:40px; }

    #page{padding-right: 0; transition: all 200ms ease-in-out; overflow: hidden; }
    .map{   height: 100%; width: 100%; position: relative;}

    .sidebar{position:absolute; lef :0; right: 0; width: 100%;     z-index: 99;
        overflow: scroll; background: white; }

    #page.hidesidebar{ padding-right: 0;}
    #page.hidesidebar .sidebar{display:none;}


    .hp .boxin {
        padding: 100px 100px;
    }

    .boxin {
        padding: 60px 40px;
    }

}

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

    .itemslist{  grid-template-columns: repeat(1, 1fr); }
}

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


    .col-4 {  width: 100%;  }
    .col-6, .col-5, .col-7 {  width: 100%;  float: none;  }
    .col-6 .list-box{ margin: 0 0 15px 0; }
    .col-2, .col-3 {  width: 100%;    }


    .foot .col-6{width: 50%; float:left;}
}


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


}

@media screen and (max-width: 340px) {
    .col-2, .col-3 {  width: 100%;   }
    .col-1{  width: 50%;    }

}