body {font-family: 'Open Sans', sans-serif; font-size: 18px; font-weight:300; color: #58595b;}
h2 {font-size: 48px; color: #0a0a0a; margin-bottom: 0.6em; font-weight:400;}
h3 {font-size: 36px; color: #0a0a0a; font-weight: 300; margin-bottom: 0.5em;}
b, strong {font-weight:700;}
section ul li {background: url(../img/bg-li.svg) no-repeat 0 6px; padding-left:10px;}

#navbar {background: #000;}
.navbar {border-radius:0; background: transparent; border: none; height: 150px;}
.navbar.smaller {background: #000; height: 90px;}
.navbar-brand {margin-left:5px !important; height: auto;}
.navbar-brand img {height: 120px;}
.navbar.smaller .navbar-brand img {height: 60px;}
.navbar-header {width: 100%;}
.navbar-toggle, .navbar-toggle:focus {display: block; background: #000 !important; border: none; margin-top: 27px;}
.navbar-toggle:hover {background:#2cb19a !important;}
.navbar-brand, .navbar-brand img, .navbar-toggle, .navbar {-webkit-transition: all .25s ease-out; -moz-transition: all .25s ease-out; -o-transition: all .25s ease-out; transition: all .25s ease-out;}
.navbar-toggle .icon-bar {height: 3px; border-radius:0;}
.navbar-collapse.collapse {display: none !important;}
#navbar .nav-tabs {border:none; padding-top: 80px;}
#navbar .nav-tabs li {float:none;}
#navbar .nav-tabs a {border:none; padding: 7px 20px 7px 40px; border-radius:0; color: #fff; background: none !important;}
#navbar .nav-tabs a:hover, #navbar .nav-tabs .active a {color: #2db199;}
.navbar-content {padding: 40px 30px 10px; font-size: 14px; color: #fff;}

#carousel1 .item img {width: 100%;}
.carousel-caption {bottom: 4%; font-size: 3.5vw; line-height: 1.2;}
.carousel-caption h1 {font-size: 3.5vw; font-weight:300;}
.carousel-caption span {font-size: 5.5vw;}
.controls {position: absolute; top: 50%; width:100%; }
.carousel-control {background:none !important; width: 50px; height: 50px; opacity:1 !important; margin-top: -20px;}
.carousel-control.left {margin-left: 20px;}
.carousel-control.right {margin-right: 20px;}

section {padding: 100px 0;}
section img {max-width: 100%;}
#narozen {font-size: 24px; padding-bottom:0; background: url(../img/narozen.jpg) no-repeat 50% 0 #fff; background-size: 100% auto;}
#narozen p {margin: 2.5em 0;}
#narozen .dash {font-size:28px;}
#kdo-jsem {margin-top: 300px !important; padding-top: 100px !important; padding-bottom:250px; background: url(../img/kdo-jsem.png) no-repeat right bottom; font-size: 24px;}
#kdo-jsem img {margin-top: 200px;}
#mlady {color: #fffdfd; background: #191919; position: relative;}
#mlady h3 {color: #fffdfd; margin-bottom: 100px;}
#mlady .col-md-12 {padding: 0 40px; position: static;}
#mlady .item {padding: 0px 30px; text-align: center;}
.block {position: relative; width: 100%; border: 3px solid #ddba54; border-radius: 20px; font-weight: 400; font-size: 16px;}
.block:before {content: ""; display: block; padding-top: 100%;}
.block p {position:  absolute; top: 0; left: 0; bottom: 0; right: 0; padding: 0 20px;}
.block p img {display:block; margin: 20px auto 10px;}
.block-green {border-color: #2cb19a;}
.block-purple {border-color: #8772a8;}
.block-blue {border-color: #4d81b0;}
.block-red {border-color: #d34650;}
#xeelo-v-praxi .carousel-control img, #vylepseni .carousel-control img {height: 30px;}
#vlastnosti .col-md-4 {min-height: 250px; margin-top: 100px; border-left: 2px dashed #acadac; padding: 80px 30px 0; font-weight: 400;}
#vlastnosti .col-md-4:last-of-type {border-right: 2px dashed #acadac;}
.dash {font-weight: 800; font-size: 24px; color: #31b099; line-height: 1px;}
.dash.front {display:block; float:left; margin-top: -1em; color: #5287b8; line-height:1.5;}
#co-dokazu {padding-bottom: 200px; background: url(../img/co-dokazu.jpg) no-repeat 50% bottom #616161; background-size: cover;}
#co-dokazu h2 {color: #fff; margin-bottom: 80px;}
#co-dokazu .blocks {padding: 0 30px; color: #000;}
#co-dokazu .col-md-4 {padding: 0 30px; text-align: center;}
#masterdata {padding-top: 500px; font-weight: 400; background: url(../img/masterdata.jpg) no-repeat right 0 #ecf8f6; background-size: contain; line-height: 1.6; position: relative;}
#masterdata .title {position: absolute; top: -60px; display:block; width:100%; color: #000; font-weight:600; font-size: 24px;}
#transakcnidata {padding-bottom: 500px; background: url(../img/transakcnidata.jpg) no-repeat 50% bottom #fdfbf5; background-size: 100% auto; font-weight:400; line-height: 1.6;}
#dokumenty {padding-bottom: 0; background: url(../img/dokumenty.jpg) no-repeat 0 bottom #e4e5ed; background-size: contain; font-weight:400; line-height: 1.6;}
#dokumenty img {margin-top: 50px; max-width: 100%;}
#xeelo-v-praxi p {font-size: 24px; margin: 2em 0 4em;}
#xeelo-v-praxi h3, #motto h3 {color: #000; margin-bottom:1em;}
#xeelo-v-praxi .carousel {background: url(../img/xeelo-tv.jpg) no-repeat 50% top; background-size: contain; height: 780px; color: #c6c6c6;}
#xeelo-v-praxi .carousel-inner {width: 710px; margin: 0 auto;}
#xeelo-v-praxi .carousel p {margin-top: 180px;}
#xeelo-v-praxi .carousel-control {margin-top: -150px;}
#motto {position: relative; padding-top: 200px; padding-bottom: 700px; background: url(../img/vylepseni.jpg) no-repeat 50% 50% #616161; background-size: cover;}
#vylepseni {position:absolute; left:0; right:0; bottom:0; background: rgba(0,0,0,0.74); padding: 40px 0; color: #fff; font-size: 24px;}
#vyzkousejte-me {font-size: 24px;}
.mrgn {padding-top: 100px;}
#vyzkousejte-me .block {border-radius: 10px; padding:0;}
#vyzkousejte-me .block p {padding:0; margin:0;}
#vyzkousejte-me .block img {width: 100%; height: 100%; margin:0;}
.try-link {font-size: 18px; font-weight: 400;}
.try-link.blue {color: #5287b8;}
.try-link.green {color: #2db199;}
.try-link.yellow {color: #ddba54;}
#tvurci {background: url(../img/tvurci.jpg) no-repeat 50% bottom #efeeee; background-size: cover; color: #58595b;}
#tvurci img {max-width: 100%; display: block; margin: 60px auto 40px;}
#tvurci .link {margin-top: 2em;}
#tvurci .link a {font-weight:400; color: #ed332b; text-decoration: underline;}
#kolik-stojim {padding-top: 350px; color: #fff; background: url(../img/kolik-stojim.jpg) no-repeat 50% top #989fa5; background-size: cover;}
#kolik-stojim .col-md-7 {font-size: 24px;}
#kolik-stojim .col-md-5 {font-weight:400;}
#kolik-stojim .col-md-5 p {margin-bottom: 1.2em;}
#newsletter {padding:0; background: #e3ecf4; font-weight:400;}
#newsletter .container {padding-top: 100px; padding-bottom: 80px; background: url(../img/newsletter.png) repeat-y right top;}
.form-group {font-size: 14px;}
.form-group label {font-weight: 700;}
#kontaktujte-nas {padding:0;}
#kontaktujte-nas h2 {padding: 120px 30px 80px; margin:0; font-weight:300; font-size: 30px; background: #2cb19a; color: #fff;}
#kontaktujte-nas h2 a {color: #fff;}
#kontaktujte-nas #collapseForm {padding: 80px 0; background: #cdece7;}
#map {border: none; width:100%; height:540px;}
#kontakt {background: #191919; padding-bottom: 80px; margin-top: -6px; color: #fff;}
#kontakt h2 {font-size: 30px; color: #2db199;}
#kontakt h3, .navbar-content h3 {margin-top: 140px; color: #2db199; font-weight:400;}
.navbar-content h3 {font-size: 18px; margin-top: 2.5em;}
#kontakt img {width: 150px; height: auto; margin: -60px 0 2.5em 0; display: block;}
#kontakt ul {font-size: 14px; padding:0 0 0 45px; list-style-type:none;}
#kontakt .title {padding-left: 45px;}
#kontakt a {color: #fff;}
#scrollup {width:23px; height:47px; opacity: 0.7; position:fixed; bottom: 20px; right:15px; left: auto; display:none; text-indent:-9999px; overflow: hidden; -webkit-transition: all .25s ease-out; -moz-transition: all .25s ease-out; -o-transition: all .25s ease-out; transition: all .25s ease-out;}
#scrollup a {display:block; width:23px; height:47px; background:url(../img/scrollup.svg) 50% 50% no-repeat #2cb19a; border-radius: 4px; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -ms-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s;}
#scrollup a:hover {opacity: 1;}
.toggle-button:focus {text-decoration: none;}
.toggle-button em {font-style:normal; display:none;}
.toggle-button.closeit span {display:none;}
.toggle-button.closeit em {display:inline;}

input[type="text"], input[type="email"], textarea.form-control {border:none; box-shadow: none; height: 44px; border-radius: 8px;}
form .btn-default, form .btn-default:focus {background: #000; height: 44px; padding-left: 20px; padding-right:20px; border-radius: 8px; border:none; color: #ceece7; font-weight:600; font-size:18px;}
form .btn-default:hover {background: #2cb19a; color: #fff;}
#kontaktujte-nas .btn-default {margin-top: 50px; background: #404041;}
#vyzkousejte-me .btn-default {color: #fff;}
#newsletter .btn-default {color: #e3ecf4;}
.InputLabeled {padding-left: 65px;}
.InputName {background: url(../img/form-name.svg) no-repeat left 50% #fff;}
.InputCompany {background: url(../img/form-company.svg) no-repeat left 50% #fff;}
.InputEmail {background: url(../img/form-email.svg) no-repeat left 50% #fff;}
.InputMobile {background: url(../img/form-mobile.svg) no-repeat left 50% #fff;}
.InputSkype {background: url(../img/form-skype.svg) no-repeat left 50% #fff;}
.InputCaptcha {background: url(../img/form-captcha.svg) no-repeat left 50% #fff;}
textarea.form-control {padding-top: 15px; height: 150px;}
#vyzkousejte-me form {padding-top: 100px;}
#vyzkousejte-me input[type="text"], #vyzkousejte-me input[type="email"], #vyzkousejte-me textarea.form-control {border: 2px solid #CEEAE6;}
.radio-inline {padding: 0 30px 50px 40px;}




/* RESPONZE */
@media (min-width: 992px) and (max-width: 1200px) {
    #kdo-jsem {margin-top: 100px !important;}
    #mlady .col-md-12 {padding: 0;}    
    #mlady .block p {font-size: 14px;}     
    #mlady .block img {height:60px;}
    #co-dokazu .col-md-4 {padding: 0 20px;}
    #masterdata {padding-bottom: 100px; background-size: 66%;}
    #transakcnidata {padding-bottom: 250px;}
    #dokumenty {padding-bottom: 50px; background-size: 60%;}
}
 
@media (max-width: 992px) { 
    body, .try-link, .navbar-content h3, form .btn-default, form .btn-default:focus {font-size: 15px;}
    #narozen, #kdo-jsem, #masterdata .title, #xeelo-v-praxi p, #vylepseni, #vyzkousejte-me, #kolik-stojim .col-md-7 {font-size: 20px;}
    #kdo-jsem {margin-top: 0 !important;}
    #kdo-jsem img {margin-top: 0;}
    #mlady .col-md-12 {padding: 0 10px;} 
    #mlady .item {padding: 0px 8px; }   
    #mlady .block p {font-size: 13px; padding: 0 10px;}     
    #mlady .block img {height:55px;}
    #co-dokazu .block {margin-bottom: 30px;}
    #vlastnosti .col-md-4 {border-top: 2px dashed #acadac; border-left: none; padding: 50px 30px 20px; margin: 2em 30px 0; min-height: auto;}
    #vlastnosti .col-md-4:last-of-type {border-bottom: 2px dashed #acadac; border-right: none;}
    #masterdata {padding-top: 100px; background-size: 56%;}
    #transakcnidata {padding-bottom: 450px;}
    #dokumenty {padding-bottom: 500px;}
    #xeelo-v-praxi .carousel-inner {width: 570px; }
    #xeelo-v-praxi .carousel p {margin-top: 120px;}
    #xeelo-v-praxi .carousel {height: 620px;}
    #vylepseni .item {padding: 0 40px;}
    #kolik-stojim {padding-top: 250px;}
    #kontakt .col-md-4 {padding-bottom: 20px;}
    #kontakt h3 {margin-top:25px;}
    .navbar { height: 90px;}
    .navbar .container {padding-right:0;}
    .navbar-header {width: auto;}
    .navbar-brand img {height: 60px;}
    h2 {font-size: 40px;}
    h3 {font-size: 29px;}
    #vylepseni {font-size: 18px;}
    #carousel1 .carousel-control {width: 30px; height:30px;}
    #carousel1 .carousel-control img {height:25px;}
}

@media (max-width: 768px) {
    body, .try-link, .navbar-content h3, #kontakt ul, form .btn-default, form .btn-default:focus {font-size: 12px;}
    #narozen, #kdo-jsem, #masterdata .title, #xeelo-v-praxi p, #vylepseni, #vyzkousejte-me, #kolik-stojim .col-md-7 {font-size: 15px;}
    #mlady .item {padding: 0px 10px; }
    #mlady .block p {font-size: 14px;}   
    .block {max-width:300px; margin: 0 auto;}
    #masterdata {padding-top: 98%; background-size: contain;}
    #masterdata .title {margin-bottom: 80px;}
    #transakcnidata {padding-bottom: 300px;}
    #dokumenty {padding-bottom: 360px;}
    #xeelo-v-praxi .carousel-inner {width: 69%;}
    #xeelo-v-praxi .carousel p {margin-top: 35%; font-size: 20px;}
    #xeelo-v-praxi .carousel {height: 550px;}
    #xeelo-v-praxi .carousel-control {margin-top: 14%;}
    #xeelo-v-praxi .col-md-10 p {margin-top: 22%;}
    .owl-controls {top: auto; bottom: 30px; left: 25px; right: 25px;}  
    #kolik-stojim {padding-top: 300px; padding-bottom: 200px;}
    #vylepseni {font-size: 16px;} 
    h2 {font-size: 30px;}
    h3 {font-size: 23px;}   
}

@media (max-width: 740px) {
    #xeelo-v-praxi .carousel-inner {width: 71%;}
    #xeelo-v-praxi .carousel p {font-size: 16px;}
}

@media (max-width: 670px) {
    #xeelo-v-praxi .carousel-inner {width: 79%;}
    #xeelo-v-praxi .carousel p {margin-top: 21%;}
    #xeelo-v-praxi .col-md-10 p {margin-top: 16%;}  
}