@import 'breakpoints.css';

html,body {height:100%;}
body {font-family: 'Saira', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; color: #191919;}
h1 {font-size: 70px; margin: 0 0 0.4em; font-weight: 400; line-height: 1.2; color: #feb900; font-family: 'Teko', sans-serif; text-transform: uppercase; line-height: 0.95;}
h1 span {font-size: 40px; color: #fff;}
h2 {font-size: 50px; margin: 0 0 0.6em; font-weight: 400; line-height: 1.2; color: #feb900; font-family: 'Teko', sans-serif; text-transform: uppercase;}
h3 {font-size: 30px; margin: 0 0 0.8em; font-weight: 400; line-height: 1.2; color: #000; font-family: 'Teko', sans-serif; text-transform: uppercase;}
h4 {font-size: 24px; margin: 0 0 0.4em; font-family: 'Teko', sans-serif; text-transform: uppercase;}
strong {font-weight: 700;}
img {max-width: 100%;}
p, ul {margin-bottom: 1em;}
ul li {margin-bottom: 0.25em; list-style-type: none; position:relative;}
ul li:before {position: absolute; display:block; width: 7px; height: 7px; left: -20px; top: .85rem; content:''; background: #000; border-radius: 2px;}
.mr-3 {margin-right: .75rem;}
.m-0 {margin:0;}

.container-fluid {max-width: 1170px;}
.nav-tabs > li > a, .btn {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}

.navbar-brand {display: block; float: none; height: auto; margin: 20px 0 60px;}
.navbar-brand > img {margin: 0 auto; max-width: 187px; width: 187px;}
.nav-tabs {border: none; font-family: 'Teko', sans-serif; text-transform: uppercase; border-top: 1px solid #3b3b3b;}
.nav-tabs > li {float: none; margin:0; font-size: 24px; border-bottom: 1px solid #3b3b3b;}
.nav-tabs > li > a {border:none !important; display:block; border-radius:0; margin-right:0;}
.nav-tabs > li > a:focus {background: none;}
.nav-tabs > li.active > a {background: none !important; color: #feb900 !important;}

#menu-toggle {position: fixed; left: 0; top:0; z-index:1000; height: 45px; width: 45px; padding-top: 8px; background: #191919; color: #feb900; font-size: 21px; border: none; text-align: center; border-radius:0 0 4px 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
#menu-toggle.open {left: 250px;}

.btn {position:relative; margin-top: 20px; font-family: 'Teko', sans-serif; text-transform: uppercase; border-radius: 4px; border:0; box-shadow: none !important; color: #191919 !important;}
.btn-lg {padding: 10px 40px 5px 20px; font-size: 28px;}
.btn.btn-primary, .btn.btn-primary:focus {background: #feb900;}
.btn.btn-secondary, .btn.btn-secondary:focus {background: #25ccdb;}
.btn.btn-primary:hover, .btn.btn-secondary:hover {background: #fff;}
.btn.btn-default, .btn.btn-default:focus {background: #fff;}
.btn.btn-default:hover {background: #e4a600;}
.btn.btn-default:after, .btn.btn-primary:after, .btn.btn-secondary:after {display: block; width: 7px; height: 18px; position: absolute; background: url('../img/arrow.svg') 50% 50% no-repeat; right: 20px; top: 50%; margin-top: -9px; content:'';}

.carousel.fade {opacity: 1; position:relative; background: #191919;}
.carousel.fade .item {-moz-transition: opacity ease-in-out 1s; -o-transition: opacity ease-in-out 1s; -webkit-transition: opacity ease-in-out 1s; transition: opacity ease-in-out 1s; left: 0 !important; opacity: 0; top:0; position:absolute; width: 100%; display:block !important; z-index:1;}      
.carousel.fade .item:first-child {top:auto; position:relative;}
.carousel.fade .item.active {opacity: 1; -moz-transition: opacity ease-in-out 1s; -o-transition: opacity ease-in-out 1s; -webkit-transition: opacity ease-in-out 1s; transition: opacity ease-in-out 1s; z-index:2;}
.carousel-content {position: absolute; left:0; top:0; right:0; bottom:0; padding-top: 90px; z-index: 10; color: #fff; font-size: 20px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.5+20,0+100 */
    background: -moz-linear-gradient(left, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 20%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 20%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 20%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */}
.carousel .item-01 {background: url('../img/theme-01.jpg') 50% 50% no-repeat;}
.carousel .item-02 {background: url('../img/theme-02.jpg') 50% 50% no-repeat;}
.carousel .item-03 {background: url('../img/theme-03.jpg') 50% 50% no-repeat;}
.carousel .item {height: 700px; background-size: cover;}

.section {padding: 60px 0 50px;}
.section-offer {padding-bottom: 20px; background-image: url('../img/dotted.png'); background-position: 50% 50%;}
.section-offer h2, .section-offer h4 {color: #fff;}
.section-offer .title {padding-bottom: 0.5em; border-bottom: 1px solid;}
.section-offer .title strong {display: block; width: 46px; height: 46px; margin-bottom: 25px; background: #000; color: #fff; border-radius: 4px; text-align: center; line-height: 50px; font-weight: 400;}
.section-offer .well {position:relative; margin-top: 60px; padding: 30px 35px 30px 130px; border:0; box-shadow: none; color: #191919;}
.section-offer .well:before {position: absolute; display: block; width: 62px; height: 62px; left: 35px; top: 35px; content: 'i'; border-radius:4px; text-align: center; border: 2px solid #fff; color: #fff; font-size: 50px; line-height: 60px;}
.section-offer .well p {margin:0;}
#vyrobky {background-color: #25ccdb; color: #06484e;}
#vyrobky .well {background: #21b7c5;}
#vyrobky .title {border-color: #21b7c5;}
#vyrobky .btn.btn-default:hover {background: #21b7c5;}
#sluzby {background-color: #feb900; color: #553e00;}
#sluzby .well {background: #e4a600;}
#sluzby .title {border-color: #e4a600;}


.gallery-item {width: 33.33%; float:left;}

#o-nas {background: url('../img/dotted.png') 50% 50% #fff;}
#o-nas h2 {margin-bottom: 0.2em;}
#o-nas img {border-radius: 4px; margin-bottom: 40px;}

#kontakt {background: #000; color: #8f8f8f; padding-bottom: 0;}
#kontakt h2 {color: #fff;}
#kontakt h3 {color: #feb900;}
#kontakt a {color: #fff;}
#kontakt strong {color: #fff;}
#kontakt img {display: block; margin-bottom: 25px; background: #feb900; border-radius:4px; }
.embed-responsive {margin-top: 40px; border-radius: 4px; background: #fff; -webkit-filter: grayscale(100%); filter: grayscale(100%);}
#kontakt .copyright {margin: 20px 0; font-size: 13px; color: #676767;}
#kontakt .copyright a {color: #676767;}


/* RESPONSIVE */

@media (min-width: 992px) and (max-width: 1200px) {
    
}

@media (min-width: 1300px) {
    .carousel-box {padding-right: 25%;}
}
 
@media (max-width: 992px) {
    h1 {font-size: 50px;}
    h1 {font-size: 40px;}
    .carousel-content {padding-top: 60px; font-size: 18px;}
    .carousel .item {height: 560px;}
    .gallery-item {width: 50%; float:left;}
}

@media (max-width: 768px) {

}

@media (max-width: 575px) {
    h1 {font-size: 35px;}
    h2 {font-size: 30px;}
    h3 {font-size: 27px;}
    .navbar-brand {margin-bottom: 30px;}
    .section {padding: 40px 0 30px;}
    .carousel-content {padding-top: 60px; font-size: 16px;} 
    .carousel .item {height: 600px;}
    #sluzby .well {padding: 100px 20px 20px;}
    #sluzby .well:before {left: 20px; top: 20px;}  
}