//tyrkys 0099b0

html,body{margin:0;padding:0;}
body{ text-align:center; font-size:15px; font-family: 'Open Sans', sans-serif; color:white; overflow-x: hidden;}

img{border:0}
form{margin:0;}
p{margin:10px 0 10px 0;padding:0;}
a:link, a:visited {color:white;text-decoration:none;}
a:hover {color:#DDD;text-decoration:underline;}

hr {background: transparent; border: none; border-top: 1px solid rgb(179, 179, 179); display: inline-block;width: 100%;margin: 15px auto;}

h2, h3, h4 {margin: 5px 0px 5px; padding: 0px; font-family: 'Open Sans'; font-weight: 400;  }

input {width:90%}

.main-color {color: #8f8f8f; background: #8f8f8f;}
.topstripe {width:100%; height:3.4em;display:inline-block; background:white}

/* SEO H1 */
.web-title {float: left; position:fixed;left: -100%;margin: 0px;font-size: 1px; }

/* dano */
.blok-inner-in-text h2:before {content:""; width:0.7em; height:0.7em; display:inline-block; margin-right:0.5em}

.menu-btn {color: black; width: 50px; height: 50px; left:227px; top: 20px; position: absolute; display: block; cursor: pointer;}
.menu-btn span {color: #0069B3; font-size: 50px;height: 50px;width: 50px;text-align: center; line-height:50px}
.menu-btn-hide {display: none;}
.Xmenu-btn:before {color: #0069B3; content:"EMNU";font-size: 12px;position: absolute;top: -6px;left: 0px;right: 0px; text-align: center;}



/* TOP */
.top-blok {position: relative; z-index: 1; height:50vh}
.top-blok-head {position: absolute; width: 1200px; left: 0px; right: 0px; top: 0px; margin: auto; z-index: 9;}
.top-blok-head-logo {width: 80px;height: 65px; margin: 10px 24px; display: block; background-size: auto 100%; background-position: center; background-repeat: no-repeat; position: relative;}

.top-slogan {position:relative; width:300px; height:auto; float:none; clear:both; text-transform:uppercase; line-height:1em; margin-top:2em; color:white; text-align:center }
.top-slogan .line1 {font-size:4em; font-weight:100; display:inline; float:none; }
.top-slogan .line2 {font-size:2em; font-weight:600; display:inline; float:none}
.top-slogan .line3 {font-size:1.8em; font-weight:100; display:inline; float:none}
.logo-shell {width:25%; max-width:120px; height:80px; display:block; border:1em solid white; background:white url(../images/design/logo_clickbeetle_rgb.png) center center no-repeat; background-size: contain; float:left}
.logo-shell img {width:auto; height:100%}


/* TOP MENU */
.top-blok-head-menu {position: relative; width: 80%; height: 50px; top: 0px; display:block; float:left; background:none}
.top-blok-head-menu-btn {width:100%; height: 100%; display: block; }
.top-blok-head-menu-btn-title {width: auto; height: 44px; position: absolute; left: 0px; top: 0px; color:black; background:rgb(247,158,38); padding:3px 40px; font-size:1.4em }



.top-blok-head-menu-in {position: absolute; right:0px; top: 0px; background: white; width:100%;  }
.top-blok-head-menu-in {opacity: 1; }
.top-blok-head-menu-in-item {}
.top-blok-head-menu-in-item:last-child {border-bottom: none;}
.top-blok-head-menu-in-item:hover {background: rgba(255,255,255,0.3);}
.top-blok-head-menu-in-item div a {padding: 10px 2.25em; color: #0099b0; display: block; white-space: nowrap; text-align: left; text-transform: none; font-size:1.4em; float:left; }
.top-blok-head-menu-in-item div a:hover { text-decoration: none; background:#0099b0; color:#fff; transition: background 0.5s;}                                                                                                               

.top-blok-head-menu-btn {background-color: rgba(0,0,0, 0);}
.top-blok-head-menu:hover .top-blok-head-menu-btn {cursor: pointer;}
/**.top-blok-head-menu:hover .top-blok-head-menu-in {opacity: 1;}**/

.blue-stripe {background-color:rgba(255,255,255,0.7); background:url(../images/design/bluestripe.png) center 100%; height:15em; z-index:2; position:relative; bottom:10em; display:block; width:100%; }
.white {color:white!important}


.home-bg {
 
position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; background-size: cover; height:auto; }


.web-lang-menu {position: relative; left: 1em; top: 0.5em; width:30%; margin-bottom:2em }
.web-lang-menu a {color: white; width: 140px; text-align: left; padding: 5px 0px; display: block; text-transform: uppercase; font-size: 0.8em; float:left}

.web-lang-menu a.sk:after {content:'Slovensky'; background:url(/images/design/flagsk.png) 0px 1px no-repeat; padding-left:30px; margin-right:20px; float:left }
.web-lang-menu a.en:after {content:'English'; background:url(/images/design/flaguk.png) 0px 1px no-repeat; padding-left:30px; margin-right:20px; float:left }
.web-lang-menu a.de:after {content:'Deutsch'; background:url(/images/design/flagde.png) 0px 1px no-repeat; padding-left:30px; margin-right:20px; float:left }


.web-lang-menu-space {}
.lang-actual {position: relavite; top: 4px; left: 0px; pointer-events: none; font-weight: 600;}





/* TOP BANNERS */
.top-banners {width: 100%; background: rgba(0,0,0,0.6); position: relative; height: 19vh; overflow: hidden;}
.top-banners-in {width: 1200px; margin: 0px auto 0px; display: block; height:206px; overflow:hidden}


.top-banners-item {float: left; width: 19.9%; margin-right: 1px; cursor: pointer;position:relative}
.top-banners-item:hover {cursor:hand}
.top-banners-item:last-child {margin-right: 0px;}
.top-banners-item h2 {font-size: 1.3vh; font-family: 'Sanchez'; color: white; font-weight: 400; text-transform: uppercase; position:absolute; bottom:0%; left:0px; padding:0.5em 1em; background:rgba(0,0,0,0.6); margin:0}
.top-banners-item-img {width: 100%; height: 19vh; background: rgba(255,255,255,0.1);}
.top-banners-item-img {background-size: cover !important; background-position: center !important;}
.top-banners-item-logo {width: 100%; height: 80px; position: relative; opacity: 0.2;}
.top-banners-item-logo img {max-width: 50%; max-height: 50%; width: auto; height: auto; margin: auto; left: 0px; right: 0px; top: 0px; bottom: 0px; position: absolute;}






/* MIDDLE */
.middle-blok , .middle-blok-img , .middle-blok-text {height: auto;}
.middle-blok {width: 100%; display: inline-block; position: relative; box-shadow: 0px 5px 40px -20px rgb(255, 255, 255);z-index: 1;position: relative;}
.middle-blok-img , .middle-blok-text {width: 0%; position: relative; display: block; overflow: hidden;}
.middle-blok-text {width: 100%; position: relative; display: block; overflow: hidden;}
.middle-blok-img {background-size: cover !important; background-position: center !important; background-repeat:no-repeat!important}
.middle-blok-text-in {width: 1000px; text-align: left; margin: 25px auto; margin-top: 70px;}
.no-margin {0 auto}


.m-left .middle-blok-img {float: right; }
.m-right .middle-blok-img {float: left;}

.m-left .middle-blok-text-ikony {float: right; padding-left: 200px;}
.m-right .middle-blok-text-ikony {float: left; padding-right: 200px;}

.m-left .middle-blok-text {float: left; }
.m-right .middle-blok-text {float: right;}

.m-left .middle-blok-text .middle-blok-text-in {}
.m-right .middle-blok-text .middle-blok-text-in {float: left;}




.middle-blok-text-ikony {width: 165px; margin: 40px 40px 20px;}
.middle-blok-text-ikony div {height: 50px; width: 50px; margin: 2.5px; background: url(../images/design/ikony.png); background-size: auto 50px !important; float: left;}
.ii-1 {background-position: 0px 0px !important;}
.ii-2 {background-position: 102px 0px !important;}
.ii-3 {background-position: 50.5px 0px !important;}
.middle-blok-text-ikony div:hover {opacity: 0.7; cursor: pointer;}
.middle-blok-text-ikony div a {display: block; width: 100%; height: 100%;}

.m-left .pocet-1 {margin-right: -70px;}
.m-left .pocet-2 {margin-right: -15px;}



.middle-blok-text-in-logo {width: 320px; height: 90px; position: relative; margin-bottom: 15px;}
.middle-blok-text-in-logo img {max-width: 85%; max-height: 70%; width: auto; height: auto; margin: auto; left: 0px; top: 0px; bottom: 0px; position: absolute;}
.middle-blok-text-in-text {width: 100%; color: black; text-align: justify; font-size: 1.2em;}
.middle-blok-text-in b {font-size: 23px; font-family: 'font'; color: white; text-transform: uppercase; margin-top: 20px; display: block; cursor: pointer; letter-spacing: 0.5px;}




/* MORE */
.sub-show-more {width: 580px; margin: 70px 50px; height: 480px; text-align: justify;}
.m-left .sub-show-more {float: right;}
.m-right .sub-show-more {float: left;}



.sub-show-more h3 {margin: 5px 0px 25px; padding: 0px; font-size: 30px; font-family: 'font'; color: white; font-weight: 400; text-transform: uppercase;}

.sub-show-more-imgs-title {position: relative; width: 94%; padding-left: 6%; background: url(../images/design/ikony-foto.png); background-size: auto 80% !important; background-position: left center !important; background-repeat: no-repeat; display: inline-block; font-family: 'font'; font-size: 25px; margin-top: 4%;}
.sub-show-more-imgs {width: 100%; display: inline-block; margin-top: 2%;}
.sub-show-more-imgs img {width: 22.5%; width:100%; margin-right: 3% ;margin-bottom: 0; float: left;}
.sub-show-more-imgs a:nth-child(1) {display:block}
.sub-show-more-imgs a:nth-child(4n+4) img {margin-right: 0px;}
.Uzky {max-height:500px}
.Uuzky {max-height:350px}
.siroky {height:auto}
.wide {width:100%; background:#7d979b; color:white}
.wide h3 {color:white}

.maincontent {position:relative; top:-10em}
.maincontent h2 {text-align:center; color:#0099b0; font-weight:600}

.Biela  {color: #333; background-color:#243538 }
.azuro {background-color:#98eefb; padding:0.3em 1em; border-radius:5px; border:1px solid #243538; color:#243538}
.center {margin:0 auto; display:block; width:120px; text-align:center; display:flex}
a.azuro {color:#243538}

.half-left {width:99%; max-width:500px; float:right; text-align:left; padding-top:70px }
.half-right {width:99%; max-width:500px; float:left; text-align:left; padding-top:70px }
.hr-pic {background:url(/images/design/komponent.png) no-repeat 100% 100%}


.half-left h2, 
.half-right h2 {color:white}

.right-half {width:50%; float:left}
.half-left-color {background:#0099b0 url(/images/design/chrobak.png) no-repeat; background-size:50% auto;display:block; width:50%; float:left; text-align:right}
.half-right-color {display:block; width:50%; float:right; text-align:left}



/* MMIDDLE SUBS */
.middle-blok-subs {position: absolute; width: 100%;height: 100%; margin: auto; right: 0px; left: 0px;}
.middle-blok-subs-x {width: 25px; height: 25px; padding: 20px; position: absolute; top: 0px; cursor: pointer; opacity: 0.7; transform-origin: center center !important; -webkit-transform-origin: center center !important;}
.middle-blok-subs-x:hover {opacity: 1; transform: rotate(90deg); -webkit-transform: rotate(90deg);}
.middle-blok-subs-x img {width: 100%; height: 100%;}

.middle-blok-subs-in {width: 500px; text-align: left; margin: 60px 50px; height: 510px;}
.m-left .middle-blok-text .middle-blok-subs-in {float: right;}
.m-right .middle-blok-text .middle-blok-subs-in {float: left;}
.subs-form {width: 100%; display: inline-block; margin-top: 25px;}
.middle-blok-subs-in-item {float: left; width: 48%; margin-right: 4%; cursor: pointer;}
.middle-blok-subs-in-item:nth-child(2n+2) {margin-right: 0px;}
.middle-blok-subs-in-item:hover {opacity: 0.9;}
.middle-blok-subs-in-item-img {width: 100%; height: 115px; background-size: cover !important; background-position: center !important; position: relative;}
.middle-blok-subs-in-item-img:before {background: rgba(255,255,255,0.05); left: 0px; right: 0px; top: 0px; bottom: 0px; position: absolute; content: ""; }
.middle-blok-subs-in-item h4 {margin: 5px 0px 25px; padding: 0px; font-size: 18px; font-family: 'font'; color: white; font-weight: 400; text-transform: uppercase;}



.middle-blok-subs-in-content {display: none; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 3;}
.middle-blok-subs-in-content-in {width: 500px; height: 480px; text-align: left; margin: 70px 50px; }
.m-left .middle-blok-text .middle-blok-subs-in-content-in {float: right;}
.m-right .middle-blok-text .middle-blok-subs-in-content-in {float: left;}



.middle-blok-subs-in-content-in h4 {margin: 5px 0px 25px; padding: 0px; font-size: 35px; font-family: 'font'; color: white; font-weight: 400; text-transform: uppercase;}
.middle-blok-subs-in-content-in-text {color: white; text-align: justify; width: 96%;}
.middle-blok-subs-in-content-in-imgs {width: 100%; display: inline-block; margin-top: 3%;}
.middle-blok-subs-in-content-in-imgs div {height: 100px; width: 22%; margin-right: 3% ;margin-bottom: 3%; float: left; position: relative; overflow: hidden;}
.middle-blok-subs-in-content-in-imgs img {width: auto;position: absolute;height: auto;max-width: 150%;max-height: 120%;margin: auto;top: 0px;bottom: 0px;left: 0px;right: 0px;}
.middle-blok-subs-in-content-in-imgs i {font-size: 40px; text-shadow: 5px 5px 8px black; width: 40px;height: 40px;left: 0px; right: 0px; top: 0px; bottom: 0px; position: absolute; margin: auto;}


.shell-img {display:block-inline; width:11%; height:24%; float:left; margin:0 1% 1% 0; position:relative }
_.shell-img:nth-child(1) {display:none}
.shell-img a {float:none; }

.shell-img a:hover>.subtitle {background:rgba(247,158,38,1); color:black; text-decoration:none; }
.shell-img a:hover {text-decoration:none!important}
.subtitle {background:rgba(0,0,0,0.7); float:none; clear:both; text-align:left; font-size:0.8em; line-height:0.9em;  position:absolute; bottom:0%; left:0px ; padding:0.5em; height:2em; width:91%; overflow:hidden }




.m-right .middle-blok-text .middle-blok-subs {left: -230%;}
.m-right .middle-blok-subs-x {left: 0px;}
.m-left .middle-blok-text .middle-blok-subs {right: -230%;}
.m-left .middle-blok-subs-x {right: 0px;}
.sub-active {left: 0px !important; right: 0px !important;}



.odkaz {display: inline-block;transform: skew(-20deg);-moz-transform: skew(-20deg);-webkit-transform: skew(-20deg);white-space: nowrap;position: relative;outline: medium none;overflow: visible;cursor: pointer; border: 1px solid white !important; margin-left: 7px; margin-bottom: 16px;}
.odkaz span {font-size: 13px; position: relative;padding: 7px 10px;text-decoration: none;text-align: center;white-space: nowrap;text-transform: uppercase;display: inline-block;transform: skew(20deg);color:white;-ms-transform: skew(20deg);-webkit-transform: skew(20deg);}
.odkaz:hover {background: white;}
.odkaz span:hover {color: rgb(169, 29, 52);}


.Zelená {background: #dfdfdf !important;}
.Červená {background: #000000 !important;}

.Červená p,
.Červená td {color:white; font-size:0.9em}

.Červená h3 {color:rgb(247,158,38); font-size:0.9em!important}
.Červená .text-on-right {width:100%}
.Červená .middle-blok-text-in h2 {display:none}
.Červená .middle-blok-text-in table {width:100%}

                                      
.hneda {color: #333; background-color: #e8e2d4;}
.middle-blok-text h2, 
.middle-blok-text h3, 
.middle-blok-text h4 {margin: 5px 0px 5px; padding: 0px; }
.maincontent h3 {text-align:center; color:silver; font-size:22px; font-weight:300; margin-bottom:1em}
.middle-blok-text h4 {display:block; padding:0.2em 1em; background:rgb(247,158,38); font-size:1em; text-transform:none; width:auto}
.Xmiddle-blok-text h2:before {width:0.7em; height:0.7em; content:""; background:rgb(247,158,38); display:inline-block; margin-right:0.5em; line-height:1.1em}
}
.Biela a:link, .Biela a:visited {color:rgb(51, 51, 51);text-decoration:none; border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
.Biela a:hover {color:rgb(30, 30, 30);text-decoration:underline;}




.custom-pages {width: 100%; display: inline-block; background-color:#7d979b;}
.custom-pages-in {width: 1000px; margin: 35px auto; display: block;text-align:center}


.custom-pages-in table {width: 100%; vertical-align: top;}
.custom-pages-in table h3 {text-align:left; margin-bottom:0}
.custom-pages-in table td {vertical-align: top; text-align: left;}
.custom-pages-in-title {margin: 5px 0px 5px; padding: 0px; font-size:1.2em;  text-align:left; }
.Xcustom-pages-in-title:before {width:0.7em; height:0.7em; content:""; background:rgb(247,158,38); display:inline-block; margin-right:0.5em; line-height:1.1em}
}







.item-video {width: 97%; height: 256px;}
.item-video iframe {pointer-events: none;}




.mapka {width: 100%; height: 400px; border-top: 5px solid #e8e2d4; box-shadow: 0px 5px 40px -20px rgb(0, 0, 0); z-index: 1; position: relative; background:black}
#map {width: 100%; height: 100%;}


.anchor {width: 100%; display: inline-block;}


/*  WEB  SLIDER  */
#home-swiper {width: 100%; height: 75vh; background: #414042; }

#home-swiper .swiper-container {overflow: visible !important;}
.swiper-container {width:100%; max-width: 1600px; height: 100%; margin: auto;}
.swiper-slide {text-align: center;font-size: 18px;display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center; max-height:550px; overflow:hidden}
.swiper-slide img {height:auto; width:100%; margin:0 auto}
.swiper-slide h2 {background-color:rgba(255,255,255,0.7); color:#0099b0; position:absolute; top:10vh; left:30vw; padding:1vw; border-left:10px solid #0099b0; font-size:1.8vw; font-weight:bold }
.movedown h2 {top:5vh; left:70%}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {color:#0099b0}
#home-swiper .swiper-container .swiper-slide {background-size: cover !important; background-position: center !important;}
#home-swiper .swiper-container .swiper-slide {filter: grayscale(65%); -webkit-filter: grayscale(65%); opacity: 0.7; transition: filter 0.4s, opacity 0.4s; -webkit-transition: filter 0.4s, opacity 0.4s; transition-delay: 0.2s; -webkit-transition-delay: 0.2s;}
#home-swiper .swiper-container .swiper-slide-active {opacity: 1; filter: grayscale(0%); -webkit-filter: grayscale(0%); /*box-shadow: 0px 0px 60px -20px black; z-index: 1;*/}
#home-swiper .swiper-container .swiper-slide .test {position: absolute; height: 100%; width: 100%; font-size: 30px; color: white;}

.swipe-control {position:absolute; top:100px; left:100px; z-index:99}
.swipe-prev {position:absolute; top:50%; left:5%; z-index:29}
.swipe-next {position:absolute; top:50%; right:5%; z-index:29}

.videowrapper{
  width: 100%;
  position:relative;
  height: auto;
}

.home-swiper-red {width: 70%; height: 230px; bottom: 0px; position: absolute; background: RGB(169, 29, 52);  right: -20%; z-index: 9; transform: skew(-15deg); -ms-transform: skew(-51deg); -webkit-transform: skew(-15deg); pointer-events: none;}

.slider-extra {position: absolute; width: 1200px; bottom: 0px; left: 0px;right: 0px;margin: auto;height: 0px; z-index: 9;}

.slider-extra-div {display: none; position: absolute; right: 0px; bottom: 40px; width: 550px; color: white; text-align: justify; text-shadow: 2px 2px 4px black;}
.slider-extra-div h2 {margin: 5px 0px 25px; padding: 0px; font-size: 36px; font-family: 'font'; color: white; font-weight: 400; text-transform: uppercase; text-align: right;}
.slider-extra-div-logo {width: 220px;height: 70px;margin: 10px 0px; margin-left: 330px; display: block;background-size: 100% auto;background-position: center;background-repeat: no-repeat;position: relative;}




.swiper-pagination-bullet {width: 10px !important;height: 10px !important;}
.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {bottom: -20px !important;}
.swiper-pagination-bullet-active {background: rgb(130, 130, 130) !important;}






/*  FOOTER  */
.web-footer {padding: 10px; height: auto; background: rgba(0, 0, 0, 1); color: white; font-size: 11px; width:100%; margin:0 auto; text-align:center; display:block}
.web-footer a {color: #c5c5c5; font-weight: 600;}



.web-small-footer {background: rgba(0, 0, 0, 0.1); width: 100%;}
.web-small-footer-inner {padding: 50px; width: 100%; max-width: 1100px; margin: auto; display: inline-block;}
.web-small-footer-in {width: 100%; display: inline-block;}
.web-small-footer-in ul {display:flex; display:-webkit-flex; flex-wrap:wrap; -webkit-flex-wrap:wrap; justify-content:center; -webkit-justify-content:center; margin: 0px; padding: 0px; list-style: none;}
.web-small-footer-in ul li {width:25%;height:150px;position: relative;}
.web-small-footer-in ul li img {position: absolute; width: auto; height: auto; max-width: 90%; max-height: 90%; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;}



/*  GLOBAL CSS  */
.transition {transition: all 0.3s; -webkit-transition: all 0.3s;}
.transitioon {transition: all 0.6s; -webkit-transition: all 0.6s;}


.pointer {cursor: pointer;}
.pointer:hover {opacity:0.8;}

.no-select {-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: -moz-none;-o-user-select: none;user-select: none;-webkit-tap-highlight-color: rgba(0,0,0,0);}



#to-top {display: none;padding: 1px 7px 5px 7px;font-size: 30px;background-color: #0099b0;color: white;position: fixed;right: 25px;bottom: 25px;z-index: 99;}




/*  POP  BOX  */
#pop-shadow {position: fixed; height: 100vh; width: 100vw; top: 0px; left: 0px; background: rgba(0,0,0,0.45); z-index: 99; cursor: pointer; display: none;}
#pop-box {position: fixed; top: 25vh; left: 0px; right: 0px; margin: auto; background: rgba(255,255,255,0.9); z-index: 100; display: none;}
#pop-box {text-align: left; padding: 0px; letter-spacing: 0.5px; line-height: 18px;}
#pop-box div {width: 96%; padding: 2%;}
#pop-box img {width: 100%; height: auto; margin: auto;}
#pop-box p {padding: 0px !important; margin: 0px !important;}
#pop-box h2 {color: #1585b7; padding: 0px 0px 0px 0px;width: auto;font-family: 'Merriweather', serif;font-size: 3em; letter-spacing: 0px;}
#pop-box h3 {color: #1585b7; padding: 0px 0px 0px 0px;width: auto;font-family: 'Merriweather', serif;font-size: 2em; border: none;}
#pop-box:before {top: -40px; right: -40px;position: absolute;content: "";background: transparent url("/images/close.png") no-repeat;height: 35px;width: 35px;background-position: center center;background-size: 100% 100%;opacity: 0.4;transition: all 0.3s;-webkit-transition: all 0.3s;pointer-events: none;}
.pop-box:before {opacity: 1 !important; transform: rotate(90deg);}

.boxik {width:24.8%; margin:0; float:left; padding:0%; border:1px solid silver; min-height:285px; background:white; z-index:-10; text-align:left; }
.boxik:hover {box-shadow: 10px 10px 40px -10px rgb(0, 0, 0); transition: box-shadow 0.5s; z-index:999; }
.boxik  h3 {font-weight:bold; font-size:0.8em; color:#0099b0; font-family: 'Open Sans'}
.boxik ul li {font-size:0.7em}
.b1 {background:white url(/images/design/bg1.jpg) no-repeat center bottom; border-right:none}
.b2 {background:white url(/images/design/bg2.jpg) no-repeat center bottom; border-right:none}
.b3 {background:white url(/images/design/bg3.jpg) no-repeat center bottom; border-right:none}
.b4 {background:white url(/images/design/bg4.jpg) no-repeat center bottom; }
.b5 {background:white url(/images/design/bg5.jpg) no-repeat center bottom; border:none; border-left:1px solid silver}

.b6 {background:white url(/images/design/bg6.jpg) no-repeat center bottom; border:none; border-left:1px solid silver; border-right:1px solid silver}
.b7 {background:white url(/images/design/bg7.jpg) no-repeat center bottom; border:none; border-right:1px solid silver}
.b8 {background:white url(/images/design/bg8.jpg) no-repeat center bottom; border:none; border-right:1px solid silver}
.b9 {background:white url(/images/design/bg9.jpg) no-repeat center bottom; border-right:none}
.b10 {background:white url(/images/design/bg10.jpg) no-repeat center bottom; border-right:none}
.b11 {background:white url(/images/design/bg11.jpg) no-repeat center bottom; border-right:none}
.b12 {background:white url(/images/design/bg12.jpg) no-repeat center bottom; border-right:1px solid silver}

.graywide {background:#7d979b url(/images/design/bgomielanie.jpg) no-repeat right center; width:100%; border:none; height:160px; min-height:110px; margin-bottom:1em}
.graywide h3 {float:left; color:white; padding:0 0.5em; font-size:1.2em; float:none; text-align:left }
.graywide ul {display:block; float:left}


.swiper-container {
  width: 100%;
  max-height: 100%;
}


/*  MOBIL  */
@media screen and (max-width: 1000px) {

.maincontent {top:0}

#home-swiper {height: 130vw;}
.top-blok-head-logo {width: 40vw;height: 13vw;margin: 2vw 2vw 2vw 9vw;}

.top-blok-head {width: 100%;}
.web-lang-menu {right: 5px; top: 14px;}
.top-blok-head-menu {top: 14px; right: 60px; width: 54px; height: 42px;}
.top-blok-head-menu-btn-title {width: 32px; height: auto;}


.home-swiper-red {height: 31vw; width: 80%; bottom: -1px;}
.xblue-stripe {background-size:auto 200%; height:15vw; bottom:0; background-position:center center; position:relative }

.slider-extra {width: 100vw;}
.slider-extra-div {width: 55vw; right: 2vw; bottom: 1vw; font-size: 2.5vw; line-height: 2.5vw;}
.slider-extra-div h2 {display: none;}
.slider-extra-div-logo {width: 50%; height: 7vw; margin: 0px 0px; margin-left: 50%;}



.top-banners {height: auto;}
.top-banners-in {width: 100%; margin: 0px auto; display:inline-block; height:51vw;}
.top-banners-item {float: left; margin: 0px 1% 0px 0px; width: 32%;}
.top-banners-item:first-child {margin-left: 1%;}
.top-banners-item-img {height: 25vw;}
.top-banners-item h2 {font-size: 11.5px; margin-top: 18px; letter-spacing: -0.2px;}
.top-banners-item:last-child {margin-right: auto;}



.middle-blok {box-shadow: 0px 5px 40px -15px rgb(0, 0, 0);}
.middle-blok, .middle-blok-text {height: auto; height: auto;}

.m-left .middle-blok-img, .m-right .middle-blok-img {float: none;}
.middle-blok-img {height: 55vw; width: 96vw; position: absolute; left: 0px; right: 0px; top: 2vw; z-index: 1; margin: auto;}


.m-left .middle-blok-text, .m-right .middle-blok-text {float: none; width: 100%; padding-top: 15vw; padding-bottom:24vw}

.m-left .middle-blok-text .middle-blok-text-in, .m-right .middle-blok-text .middle-blok-text-in {float: none;}
.middle-blok-text-in {width: 96%; margin: auto; float: none; margin-bottom: 15vw;}
.middle-blok-text-in-logo {width: 55vw;height: 15vw; margin-bottom: 0px; margin-top: -10px;}
.middle-blok-text-in b {font-size: 20px;}


.middle-blok-subs {width: 96vw; padding: 2vw; top: 0px; z-index: 3;}
.middle-blok-subs-x {z-index: 9; top: -4px;}
.m-right .middle-blok-subs-x {left: auto; right: 0px;}

.sub-show-more {width: 98vw; margin: 0px; height: 96%;}
.m-left .sub-show-more, .m-right .sub-show-more {float: none;}
.middle-blok-subs-in-item-img {height: 30vw;}
.middle-blok-subs-in-item h4 {font-size: 16px; margin: 1px 0px 15px;}
.sub-show-more h3 {font-size: 30px; margin: 7px 0px 25px;}



.middle-blok-subs-in-content {width: 96vw; padding: 2vw; top: 0px; z-index: 3;}
.middle-blok-subs-in-content-in {width: 98vw; margin: 0px; height: 96%;}
.m-left .middle-blok-text .middle-blok-subs-in-content-in, .m-right .middle-blok-text .middle-blok-subs-in-content-in {float: none;}
.middle-blok-subs-in-content-in-text {width: 100%;}
.middle-blok-subs-in-content-in h4 {font-size: 24px;margin: 9px 0px 25px;}
.middle-blok-subs-in-content-in-imgs {width: 103%;}
.middle-blok-subs-in-content-in-imgs div {height: 17vw;}
.sub-show-more-imgs-title {font-size: 20px; padding-left: 25px;}




.mCSB_inside > .mCSB_container {margin-right: 22px !important;}





.custom-pages-in {width: 96%;}
.custom-pages-in table {display: block;}
.custom-pages-in table td {display: block; width: 100% !important;}


#to-top {right: 5px; bottom: 5px; font-size: 18px;}

/* doplnky Daniel */
.middle-blok-text-in-text li {text-align:left}

.top-slogan {width:55%; float:right; margin-top:3vw; right:5% }
.top-slogan span {float:none; clear:both; display:block}
.top-slogan .line1 {font-size:9vw;float:none; clear:both; display:block}
.top-slogan .line2 {font-size:4.5vw; margin:0; float:none; clear:both; display:block; white-space: nowrap;  }
.top-slogan .line3 {font-size:3.8vw; margin:0; float:none; clear:both; display:block; white-space: nowrap; }

.top-blok-head-logo {width:34%; float:left}

.text-on-right {width:95%; padding:0 1em}

.top-blok-head-logo {height:20vw; float:left}
.web-lang-menu {width:100%; float:left}

.top-blok-head-menu {position:absolute; left:0; top:50px; width:100%; display:none}
.top-blok-head-menu-btn-title {width:auto; }
.top-blok-head-menu-in {top:53px}
.top-blok-head-menu-in-item {float:none; width:100%; clear:both}
.top-blok-head-menu-in-item div a {display:inline-block; width:100%; padding:5% 2.5%}
.top-banners-item:nth-child(4) {margin-left:1%}

.menu-hide {top: 100px; opacity: 0; transform: scale(1,0); transform-origin: top center ;}
.menu-force {top: 0px; opacity: 1; display:block; z-index:999; position:absolute;}

.menu-btn {right: 20px; top: 5px; left: auto; color: #0099b0;}
.menu-btn span {color: #0099b0;}
.menu-btn:before {color: #0099b0; font-size: 10px;}
.menu-btn-hide {display: block;}

.shell-img {width:32%; height:32%; }
.shell-img .subtitle {width:94%; padding:2% 3%; font-size:2vw;height:4vw}

.boxik {width:90%; margin:0 auto; float:none; clear:both; border:1px solid silver; border-bottom:none; background-position:100% 100%; height:200px }
.graywide {height:55vw; background-image:none}

.half-left-color {float:none; clear:both; width:100%; display:inline-block; padding-top: 10vw; padding-bottom: 14vw;}
.half-right-color {float:none; clear:both; width:100%; display:inline-block; padding-top: 10vw; padding-bottom: 14vw;}

.top-blok {max-height:45vh; padding:0; overflow:hidden }
.swiper-slide img { min-height:55vh; width:auto}

.swiper-slide h2 {top:10vh; left:30vw; padding:1vw; font-size:4vw; font-weight:bold;  }


video {
  margin-left: calc((100vw - (100vh * 1.7))/2);
  margin-right: calc((100vw - (100vh * 1.7))/2);
  min-height: 60vh;
  max-width: 100vw;
  top:0px;
}

}

/* seo optimalization */
.move-up {top:-100px; position:relative}
.display-none, .dnone {display:none}
.ecf4f4 {background-color:#ecf4f4}
.pt0 {padding-top:0}
.container-tweek {width:80%; float:right; margin:0 auto}
.bg-white {background: white}
.w100 {width: 100%;}
.w33 {width: 33%;}
.h30 {height:30vw}