@import url('https://fonts.googleapis.com/css?family=Courgette');
@font-face {
font-family: 'Gabriola';
font-style: normal;
font-weight: normal;
src: local('Gabriola'), url('gabriola.woff') format('woff');
}

body{background:#DCE1DF;color:#231F20;padding-top: 100px;font-size: 1.6em;position: relative;}
a{color:#518371;text-decoration: underline;}
a:hover{color:#000}

header{background:#74A28C;overflow: auto;height: 100px;padding:15px 0;position: fixed;top: 0;left: 0;right: 0;z-index:100}
header.affix{box-shadow:0 0 8px rgba(0,0,0,.3)}
header h1{margin: 0;float: left;}
header h1 a{display: block;text-indent: -999em;width: 200px;height:70px;background:url(img/logo.png) no-repeat;background-size: 100%}
header nav{float: right;margin: 0;}
header nav ul{margin: 10px 0 0;padding: 0;list-style: none;}
header .nav > li{display: inline-block}
header .nav > li > a,
header .nav > li > a:active,
header .nav > li > a:focus{isplay: block;height: 50px;line-height: 50px;text-transform: uppercase;text-decoration: none;padding:0 15px;font-size: 1.2em;font-weight: bold;border-radius: 5px;color:#231F20;background:none;outline:none}
header .nav > li > a:hover,
header .nav > li.active > a{background:#44916C;text-decoration: none;color:#231F20}


.subtitle{background:#74A28C;height: 60px;font-family:Courgette, cursive;}
.subtitle p{margin: 0;text-align: center;font-size: 1.5em;padding:0}
.subtitle p span{font-weight: bold;font-size: 1.5em;position: relative;top:6px;padding:0 5px}


.cover{position: relative;text-align: center;background:url(img/cover-off.png) no-repeat 50% 0/auto 100%, linear-gradient(#74A28C, #74A28C 82px, transparent 0, transparent);height:500px;margin-bottom: 50px;}
.cover::after{display: block;content:"";background:url(img/cover-on.png) no-repeat 50% 0/auto 100%;position: absolute;top: 0;left:0;right: 0;bottom: 0;opacity:0;transition:opacity .2s}
.cover:hover::after{opacity:1}

#videomodal .modal-content{background:#000;}
#videomodal .modal-header{padding:5px 15px;border-bottom:0;color:#fff;}


.title{text-align: center;font-size:2.2em;margin:0 0 1em;position: relative;top:-41px;font-family:Courgette, cursive;background:linear-gradient(#787375, #787375 2px, transparent, transparent 0) 0 21px}
.title span{background:#A5BEB2;position: relative;top:1px;padding: 0 35px;border-radius: 100px/15px;margin:0 -10px}
.title::before,
.title::after{content:"";width: 50px;height: 28px;display: inline-block;background:url(img/plugs.png) no-repeat 0 0;position: relative;top:3px;z-index:10}
.title::before{background-position: 100% 0}

article{background:#A5BEB2;padding:20px 0 100px}
article:nth-of-type(even){background:#DCE1DF}


.bozp-diagram{display: block;margin:2em auto;width: 100%;max-width:500px}
.text-offset{padding-top: 7em;}
.text-offset-bottom{padding-bottom: 7em;}
.info{font-size: 1.45em;font-family:Gabriola, serif;}


#referencie h3{text-align: center;}
.references{text-align: center;}
.references img{display: inline-block;max-width:400px;margin:2em}
.references img.uk{max-width:150px;}

.revizie-diagram{margin-top: -93px;width: 100%;}

.contact .photo{border-radius:5px;max-width:220px;float: right;border:2px solid #787375}
.contact .text{float: left;font-size: 1.1em;padding-top: 1em;}
.contact .fb-box{text-align: right;}
.contact iframe{border:2px solid #787375 !important;border-radius:5px;overflow: hidden;width: 100% !important;height:220px !important}
.contact .row:nth-child(2){margin-top: 2em;}
.contact .icon{display: inline-block;text-indent: -999em;overflow: hidden;width: 20px;height: 20px;margin-right: 5px;vertical-align: middle;background:url(img/contact-icons.png) no-repeat 0 0 / 100%}
.contact .icon.mail{background-position:0 0}
.contact .icon.tel{background-position:0 100%;position: relative;top:-1px}

.formular{float: right}


footer{clear: both;text-align: center;font-size: .8em;}


/* Custom breakpoint */
@media (max-width: 1010px) {
    header nav ul{margin-top: 15px;}
    header .nav > li > a,
    header .nav > li > a:active,
    header .nav > li > a:focus,
    header .nav > li > a:hover,
    header .nav > li.active > a{font-size: 1em;padding:0 10px;height: 40px;line-height: 40px;}

    .subtitle p{font-size: 1.1em;padding:0 10px}
    .subtitle p span{top:4px}
}


/* Tablets */
@media (max-width: 991px) {
    .text-offset{padding-top: 0;}
    .text-offset-bottom{padding-bottom: 0;}
    article{padding-bottom: 50px;}
    .info{font-size: 1.3em;}
    .cover{height:350px;background:url(img/cover-off.png) no-repeat 50% 0/auto 100%, linear-gradient(#74A28C, #74A28C 58px, transparent 0, transparent)}
}


/* Phones */
@media (max-width: 767px) {
    body{padding-top: 50px;}
    header{height: 50px;padding: 10px 0;overflow: hidden;}
    header h1 a{height: 30px;width: 86px;}
    article{padding: 0 0 50px;}

    .title{top:-21px;}
    .info, .contact .text{font-size: .9em;}

    .subtitle{height: auto;}
    .subtitle p{font-size: .8em;}
    .subtitle p span{top:2px}
    .cover{height:200px;background:url(img/cover-on.png) no-repeat 50% 0/auto 100%, linear-gradient(#74A28C, #74A28C 35px, transparent 0, transparent)}
    .cover::after{display: none;}

    .revizie-diagram{margin-top: -73px;}
    #referencie h3{margin-top: 0;}
    .references img{width: 100%;margin:1em 0;}
    .references img.uk{width:50%;max-width:100%;}
    .contact .photo{max-width:150px}

    .navbar-toggle{display: block;border-color:#231F20;margin-top: 0;}
    .navbar-toggle .icon-bar{background:#231F20}
    .navbar-collapse{box-shadow:0 5px 5px rgba(0,0,0,.1);border-top:0;position: fixed;top: 50px;left: 0;right: 0;background:#74A28C}
    header nav ul{margin: 0;}
    header .nav > li{display: block;}
    header .nav > li > a{border-radius:0}

}