* { box-sizing: border-box; }

body { font-family: 'Roboto', sans-serif; line-height: 1.6; color: #222222; font-size: 14px; font-weight: 300;}

body, h1, h2, h3, ul, ol, p, hr { margin: 0; }
ul { padding: 0; list-style: none url();}
ol { padding: 0 0 0 0px; list-style: none;}
ol li {counter-increment: item;}
ol li:before {
   margin-right: 10px;
   content: counter(item);
   background: #007ac3;
   border-radius: 50%;
   color: #fff;
   width: 24px;
   text-align: center;
   display: inline-block;
   font-weight: bold;
 }
a { text-decoration: none; color: inherit; -webkit-transition: background .5s ease-out; -moz-transition: background .5s ease-out; -o-transition: background .5s ease-out; transition: background .5s ease-out;}
a:hover {-webkit-transition: background .5s ease-out; -moz-transition: background .5s ease-out; -o-transition: background .5s ease-out; transition: background .5s ease-out;}
img { max-width: 100%; max-height: 100%; }
a img { display: block; }
hr { width: 100%; height: 2px; float: left; border: 0; }

.full-frame, .container, .row { width: 100%; float: left; }

.main-frame {width: 1200px; margin: 0px auto;}

.flexbox {display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex;}

/* tinymce */
.svetle-modra {color: #43b4f8;}
/* tinymce */

.mainBorderRadius {-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
.mainBorderRadiusTR {-webkit-border-top-right-radius: 3px; -moz-border-top-right-radius: 3px; border-top-right-radius: 3px;}
.mainBorderRadiusBR {-webkit-border-bottom-right-radius: 3px; -moz-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;}

.btn {padding: 10px 60px; border: 2px solid; font-weight: 300; font-size: 14px; display: inline-block;}
.btn.btn-blue {border-color: #007ac3; color: #007ac3;}
.btn.btn-blue:hover {background-color: #007ac3; color: #fff;}

/* Hlavicka */
HEADER {width: 100%; height: auto; background-color: #007ac3; color: #fff;}
HEADER.shadow {-webkit-box-shadow: 0px 6px 17px -1px rgba(204,204,204,1); -moz-box-shadow: 0px 6px 17px -1px rgba(204,204,204,1); box-shadow: 0px 6px 17px -1px rgba(204,204,204,1);}
HEADER .inner {width: 100%; height: 40px; float: left; justify-content: flex-end;}
HEADER .inner .left {display: none; width: 40%; float: left;}
HEADER .inner .right {width: 60%; float: left; justify-content: flex-end; align-items: center;}
HEADER .inner .right .phone {margin-right: 90px;}
HEADER .inner .right .doba {padding-left: 30px; background-image: url('/images/icon-clock.png'); background-position: left center; background-repeat: no-repeat;}


/* Menu */
#menu-line {position: absolute; top: 20px; left: 0; width: 100%; z-index: 10}
#menu-line .inner {justify-content: space-between;}
NAV {}
NAV UL {width: 100%; height: auto; align-items: flex-end;}
NAV UL LI {position: relative; height: auto;}
NAV UL LI {background: none;}
NAV UL LI:after {content: '/'; position: absolute; width: 4px; height: auto; padding-top: 30px; right: 0; top: 0; color: #fff; font-size: 14px; font-weight: 400; line-height: 1;}
NAV UL LI:last-child:after {content: '';}
NAV UL LI A {height: auto; font-size: 14px; font-weight: 400; display: block; padding: 30px 20px 3px 20px; text-transform: uppercase; color: #fff; line-height: 1; transition: none;}
NAV UL LI:last-child A {padding-right: 0;}
NAV UL LI A:HOVER, NAV UL LI A.active {text-decoration: underline; background-image: url('/images/menu-hover.png'); background-position: center top; background-repeat: no-repeat; transition: none;}
NAV UL LI:last-child {margin-right: 0;}
NAV UL LI A.arrow-down {background-image: url('/images/icon-arrow-down.png'); background-position: right center; background-repeat: no-repeat;}

UL.submenu {display: none; position: absolute; left: 0; top: 100%; width: auto; background-color: rgb(172, 177, 183, 0.7); color: #fff;}
UL.submenu LI {width: 100%; margin: 0;}
UL.submenu LI A {width: auto; white-space: nowrap; border-bottom: 1px solid #fff;}
UL.submenu LI A:HOVER {border-color: #fff; background-color: rgb(172, 177, 183);}

#hamburger {display: none;}


/* Text na úvodní straně */
#homepage-text {width: 100%; float: left; margin: 60px 0;}
#homepage-text .inner {width: 100%; float: left; align-items: center;}
#homepage-text .inner H1 {width: 33.333%; font-size: 35px; font-weight: 300; text-transform: uppercase;}
#homepage-text .inner .text {width: 66.666%; }
#homepage-text .inner .text P {padding: 10px 0;}
#homepage-text .inner .text P SPAN.uvodni-text-btn A {display: inline-block; margin: 10px 0; padding: 10px 50px; border: 2px solid #dcdddc; font-size: 20px; font-weight: 300; color: #555555;}
#homepage-text .inner .text P SPAN.uvodni-text-btn {padding: 0; border: 0; margin: 0;}
#homepage-text .inner .text UL LI {position: relative; padding: 2px 0 2px 16px;}
#homepage-text .inner .text UL LI::before {position: absolute; content: '■'; left: 0; top: 5px; width: 100%; height: 100%; width: 10px; font-size: 12px; color: #007ac3; line-height: 1;}


/* Hlavní text */
MAIN {width: 100%; float: left; padding: 30px 0 30px; font-size: 14px; color: #212121; font-weight: 300;}
MAIN .inner {width: 100%; float: left;}
MAIN .inner H1 {padding: 10px 0 20px; margin: 0; font-size: 40px; color: #212121; text-transform: uppercase; font-weight: 300; line-height: 1;}
MAIN .inner H2 {padding: 10px 0 20px; margin: 0; font-size: 28px; color: #212121; text-transform: normal; font-weight: 400; line-height: 1;}
MAIN .inner UL LI {position: relative; padding: 2px 0 2px 16px;}
MAIN .inner UL LI::before {position: absolute; content: '■'; left: 0; top: 5px; width: 100%; height: 100%; width: 10px; font-size: 12px; color: #007ac3; line-height: 1;}

MAIN .inner .text-left {width: 50%; float: left;}
MAIN .inner .map {width: 50%; padding: 0px 0px 0px 30px; min-height: 300px; float: left;}

MAIN .inner .product-frame {width: 100%; float: left; margin-top: 30px;}
MAIN .inner .product-frame .main-photo {width: 50%; float: left; padding: 0 30px 0 0;}
MAIN .inner .product-frame .text {width: 50%; float: left; padding: 0 0 0 30px;}
MAIN .inner .product-frame .text H1 {padding: 0 0 10px 0; line-height: 1;}
MAIN .inner .product-frame .text P {padding: 10px 0;}
MAIN .inner .product-frame .text .btn-back {margin-top: 30px;}

MAIN .inner .inner P IMG {padding: 10px;}

MAIN TABLE {border-collapse: collapse;}
MAIN TABLE TR TH {padding: 3px 8px; border: 1px solid #212121; background-color: #007ac3; color: #fff;}
MAIN TABLE TR TD {padding: 3px 8px; border: 1px solid #212121;}

/* Navigace */
#navigation {width: 100%; height: auto; float: left; text-align: left; list-style: none; background-color: #f4f3f3; color: #4d4d4d; font-size: 13px; font-weight: 300;}
#navigation .divider::after {content: ' / '; position: relative; margin: 0 10px;}
#navigation UL {height: 46px; align-items: center;}
#navigation UL LI {background: none;}
#navigation UL LI A {color: inherit;}
#navigation UL LI A:HOVER {color: inherit;}

/* HP - Dlaždice */
#dlazdice {width: 100%; height: auto; float: left; margin-top: -35px; position: relative; z-index: 20;}
#dlazdice .inner {width: 100%; height: auto; float: left; justify-content: center;}
#dlazdice .inner .item {position: relative; width: 33.33333%; padding: 170px 10px 100px 10px; background-color: #43b4f8; color: #fff; background-position: center top 45px; background-repeat: no-repeat;}
#dlazdice .inner .item:nth-child(2) {background-color: #007ac3;}
#dlazdice .inner .item H2 {width: 100%; padding: 10px 0; font-size: 25px; font-weight: 300; text-align: center; text-transform: uppercase;}
#dlazdice .inner .item .perex {width: 100%; text-align: center; font-size: 14px;}
#dlazdice .inner .item .vice {opacity: 0; visibility: hidden; transition: visibility 0s, opacity 0.3s linear; position: absolute; bottom: 45px; left: 0; width: 100%; text-align: center; font-size: 14px; text-transform: uppercase;}
#dlazdice .inner .item:hover .vice {visibility: visible; opacity: 1;}
#dlazdice .inner .item:nth-child(1) {background-image: url('/images/myci_centrum.png');}
#dlazdice .inner .item:nth-child(2) {background-image: url('/images/cerpaci_stanice.png');}
#dlazdice .inner .item:nth-child(3) {background-image: url('/images/prodejna.png');}
#dlazdice .inner .item:hover {background-size: 95px auto; transition: background-size 2s ease-in;
-moz-transition: background-size 2s ease-in;
-ms-transition: background-size 2s ease-in;
-o-transition: background-size 2s ease-in;
-webkit-transition: background-size 2s ease-in;}

/* HP - Partneři */
#partneri {width: 100%; height: auto; float: left; background-color: #f5f5f5; padding: 45px 0;}
#partneri .inner {width: 100%; height: auto; float: left; justify-content: space-between;}
#partneri .inner H2 {width: auto; padding: 0; margin: 0 100px 0 0; font-size: 35px; font-weight: 300; text-align: center; text-transform: uppercase; color: #343333;}
#partneri .inner A {padding: 0 20px 0 0; margin-left: 10px; border: 2px solid #dcdddc; text-align: right; justify-content: flex-end; align-items: center; font-size: 20px; font-weight: 300; background-repeat: no-repeat;}
#partneri .inner A:HOVER {color: #007ac3; border-color: #6aafd9;}
#partneri .inner .mwd {flex: 1; background-image: url('/images/mwd-logo.png'); background-position: left 60px center;}
#partneri .inner .zlaty-lev {flex: 1; background-image: url('/images/zlaty-lev-logo.png'); background-position: left 60px center;}
#partneri .inner .bibik {flex: 1; background-image: url('/images/bibik-logo.png'); background-position: left 15px center;}

/* HP - News */
#news {width: 100%; height: auto; float: left; padding: 90px 0 90px 0; color: #525252; background-image: url('/images/hp-news-bg.jpg'); background-repeat: no-repeat; background-position: center center; background-attachment: fixed;}
#news .inner {width: 100%; height: auto; float: left;}
#news .inner .item {position: relative; width: 33.33333%; border-right: 1px solid #bebfbb; background-color: #fff;}
#news .inner .item IMG {display: block;}
#news .inner .item:nth-child(3n) {border: 0;}
#news .inner .item:hover {background-color: #007ac3; color: #fff;}
#news .inner .item.text {padding: 0 30px 70px 30px;}
#news .inner .item .name {padding: 30px 0 0 0; font-size: 25px; font-weight: 400; text-transform: uppercase;}
#news .inner .item .perex {padding: 10px 0 0 0; font-size: 14px; font-weight: 300; line-height: 1.3;}
#news .inner .item .vice {position: absolute; left: 30px; bottom: 30px;}
#news .inner .item .play {position: absolute; left: 0; top: 0; width: 100%; height: 100%; justify-content: center; align-items: center; background-image: url('/images/icon-video-play.png'); background-position: center center; background-repeat: no-repeat;}

/* Mini Slider (pruh) na ostatních stránkách mimo IntroPage */
#mini-slider {width: 100%; height: 135px; background-position: center center; background-size: cover;}
#mini-slider .filter {width:100%; height:100%; background-color: rgba(0,0,0,0.4);}

/* Seznam Mycích linek */
#linky {width: 100%; height: auto; float: left; padding: 45px 0 0 0;}
#linky .inner {width: 100%; height: auto; float: left; flex-wrap: wrap;}
#linky .inner .item {width: 19%; height: auto; float: left; margin: 0 1.25% 15px 0; border: 2px solid #dcdddc;}
#linky .inner .item:nth-child(5n) {margin-right: 0;}
#linky .inner .item:hover {color: #fff; background-color: #007ac3; border-color: #007ac3;}
#linky .inner .item .photo {flex: 0 0 100px; min-height: 100px; margin: -2px 0 -2px -2px;}
#linky .inner .item .text {padding-left: 15px; flex: 1; align-items: center;}

/* Patička */
FOOTER {padding: 60px 0; background-color: #212121; color: #fff;}
FOOTER A:HOVER {text-decoration: underline;}
FOOTER .inner {justify-content: space-between;}
FOOTER .inner .item {width: 33.3333%;}
FOOTER .inner .item A {text-transform: uppercase;}
FOOTER .inner .item.links {justify-content: space-between;}
FOOTER .inner .item.right {text-align: right;}

FOOTER .company {width: 100%; margin-top: 60px; text-align: right;}