/*            BASIC PAGE SETUP & FONTS                */
/* -------------------------------------------------- */
body {
    color: #1c1c1c;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    background: #ffffff;
    font-family: 'Calibri', 'Trebuchet MS', sans-serif;
    overflow-x: hidden;
    }

body, html {
    height: 100%;
    }

/* --- / FONTS / --- */
@font-face {
    font-family: 'Calibri';
    src: url('../fonts/Calibri.woff2') format('woff2'), url('../fonts/Calibri.woff') format('woff');
    font-weight: normal; font-style: normal; font-display: swap;
    }

@font-face {
    font-family: 'Calibri';
    src: url('../fonts/Calibri-Bold.woff2') format('woff2'), url('../fonts/Calibri-Bold.woff') format('woff');
    font-weight: bold; font-style: normal; font-display: swap;
    }

/* --- / HEADER / --- */
#logo { padding: 5px 0px;}

/* -- / NAVIGATION / -- */
#menu {
    width: 100%;
    min-height: 30px;   
    border-color: 0px;     
    background-color: transparent;
    background-image: none;
    }
#menu .nav > li { padding: 1px 0px; margin: 1px 0px; }
#menu .nav > li > a {
    color: #09565f;
    padding: 10px 15px;
    font-size: 15px;
    margin-top: 30px;    
    letter-spacing: 2px;
    background-color: transparent;
    }
    #menu .nav > li > a:last-child { padding: 10px 0px 10px 15px; }
#menu .nav > li > a:hover { color: #2cabe1;}
#menu .nav > li.active > a,
#menu .nav > li.active > a:hover,
#menu .nav > li.active > a:focus {
    color: #2cabe1;
    }
.navbar { margin-bottom: 0px;}
.navbar .navbar-nav {
    float: none;
    display: inline-block; 
    vertical-align: top;
    letter-spacing: 1px;
    }

.navbar .navbar-collapse { text-align: right; }
.navbar-toggle {
    border: 0px #ffffff;    
    padding: 8px 15px 0px 15px;
    margin-top: 0px;
    background-color: transparent;
    }
.navbar-toggle:hover, .navbar-toggle:focus { background-color: transparent; }

@media screen and (max-width: 640px) { 
    .navbar .navbar-nav { width: 100%;} 
    #menu { min-width: 100%; background-color: #2cabe1 }     
    #menu .nav > li > a { font-size: 18px; line-height: 26px; color: #ffffff; text-align: right; margin: 0px; width: 100%; }
    #menu .nav > li > a:hover { color: #ffffff;} 
    #menu .nav > li.active > a, #menu .nav > li.active > a:hover, #menu .nav > li.active > a:focus { color: #ffffff; }
    }

/* --- / FA ICONS / --- */
.fa-bars { color: #ffffff; font-size: 150%; }

/* --- / CONTENT / --- */
.container { max-width: 1200px; margin-top: 80px; margin-bottom: 0px; }
header .container { margin-top: 0px;}
.banner { border-top: 2px solid #ffffff;}
.section_pink .container { margin-top: 0px; }
.section_green .container, .banner_green .container { margin-top: 0px; padding-top: 40px; padding-bottom: 40px; }

footer { background-color: #09565f; padding: 5px; border-top: 2px solid #ffffff;}
footer.space { margin-top: 80px; }

.google-maps {
    position: relative;
    padding-bottom: 0%; /* This is the aspect ratio */
    height: 0;
    overflow: hidden;
    min-height: 433px;
    margin: 0px;
    width: 100%;
    margin: 5px 0px;
    border: 2px solid #ffffff;
    }

    @media screen and (max-width: 640px) { 
        header .container { padding-left: 0px; padding-right: 0px} 
        }

/* --- / COLOUR BLOCKS & SECTIONS / --- */
.headingblock {
    padding: 5px 5px 5px 15px;
    background-color: #539d88;
    margin-top: 5px;
    }
.serviceblock {
    width: 100%;
    margin: 0px 0px 30px 0px;
    padding: 15px 30px 5px 30px;
    background-color: #ffffff;
    }
.section_pink {
    margin-top: 80px;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #f5c5be;
    }
.section_green {
    margin-top:2px;
    padding: 0px;
    background-color: #539d88;
    background-image: url('../images/KTS-services.jpg');
    background-position: right;
    background-repeat: no-repeat;
    background-size: 50%
    }

.contact_bar {
    width: 100%;
    color: #ffffff;
    margin: 2px auto;
    padding: 15px 5px;
    font-size: 18px;
    line-height: 30px;
    font-weight: bold;
    letter-spacing: 1px;
    background-color: #09565f
    }
    .contact_bar .container { margin: 0px auto; }
    .contact_bar .fa-envelope-open { font-size: 100%; vertical-align: middle;}
    .contact_bar .fa-mobile { font-size: 130%; vertical-align: middle;}
    .contact_bar .fa-phone { font-size: 110%; vertical-align: middle;}

.parallax {
    margin: 80px 0px 0px 0px;
    padding: 0px;
    height: auto;
    background-image: url(../images/Jenec-parallax.jpg);
    background-repeat: no-repeat;
    background-position: left;
    background-attachment: fixed;
    }
    .parallax .container {
        clear: both;
        margin: 0px auto;
        padding: 60px 10px;
        position: relative;
        }


/* --- / HEADINGS / --- */
h1, h3 {
    color: #2cabe1;
    margin: 5px 0px 15px 0px;
    padding: 0px;
    font-size: 30px;
    text-align: left;
    line-height: 30px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: bold;
    }
h2 {
    color: #ffffff;
    margin: 5px 0px 15px 0px;
    padding: 0px;
    font-size: 26px;
    text-align: left;
    line-height: 30px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: bold;
    }
h3 {
    color: #2cabe1;
    margin: 5px 0px 15px 0px;
    padding: 0px;
    font-size: 26px;
    text-align: left;
    line-height: 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
    }
h4, h5 {
    color: #09565f;
    margin: 5px 0px 15px 0px;
    padding: 0px;
    font-size: 20px;
    text-align: left;
    line-height: 24px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: bold;
    }
h5 { color: #09565f; }


/* --- / PARAGRAPHS / --- */
p {
    color: #2d2d2d;
    margin: 5px 0px 20px 0px;
    padding: 0px;
    hyphens: auto;
    font-size: 17px;
    text-align: justify;
    line-height: 24px; 
    letter-spacing: 1px;          
    }
    p.border { border-left: 20px solid #2cabe1; padding-left: 20px; }
    .parallax p { color: #ffffff; }
    p.lists { margin-bottom: 0px}

.blocks p { text-align: center; padding: 0px 5px; }
p.logo { text-align: left; margin: 5px 0px; }

footer p {
    color: #ffffff;
    margin: 0px;
    padding: 5px 0px;
    hyphens: auto;
    font-size: 18px;
    text-align: center;
    line-height: 30px;
    }

p.credits {
    color: #a9a9a9;
    margin: 10px auto;
    padding: 0px;
    hyphens: auto;
    font-size: 10px;
    max-width: 1200px;
    text-align: center;
    line-height: normal;
    letter-spacing: 1px;
    }

ul {
    color: #2d2d2d;
    margin: 2px 10px 2px 10px;
    padding: 5px 10px;
    hyphens: auto;
    font-size: 17px;
    text-align: left;
    line-height: 24px; 
    letter-spacing: 1px;   
    }
    .parallax ul { color: #ffffff;}  

li { padding: 3px 5px 3px 8px}

ul.popi {
    color: #2d2d2d;
    text-align: left;
    font-size: 17px;
    letter-spacing: 1px;
}

ul.star {
    color: #ffffff;
    margin: 0px;
    padding: 0px 30px 0px 10px;
    hyphens: auto;
    font-size: 17px;
    text-align: left;
    line-height: 24px;
    list-style-type: none;
    letter-spacing: 1px;
    }
ul.star li, ul.popi li {
    padding: 1px 5px 5px 5px;
    margin: 1px 5px 5px 25px;
    }
ul.star li::before {
    content: "\f005";
    font-family: "FontAwesome";
    padding: 0 10px 0px 0px;
    margin:0 5px 0 -31px;
    }

.btn-default { color: #ffffff; background-color: #09565f; border-color: #09565f; border-radius: 0px; font-size: 16px; letter-spacing: 1px; padding: 10px 30px; float: left; margin-bottom: 20px }
.btn-default:hover { color: #ffffff; background-color: #033b42;}

@media screen and (max-width: 640px) { p.logo { text-align: center; margin: 5px 0px; } }


/* --- / IMAGES / --- */
img {
    width: auto\9; /* ie8 */
    height: auto\9;
    margin: 0px;
    padding: 0px;
    max-width: 100%;
    border-style: none;
    border-color: inherit;
    border-width: 0;
    }

.gallery { border: 4px solid #ffffff; margin: 15px 5px;}

/* --- / COLOURS / --- */
.clr1 { color: #2cabe1; } /* turquoise */
.clr2 { color: #09565f; } /* teal */
.clr3 { color: #1c1c1c; } /* grey */
.clr4 { color: #ffffff; } /* white */

/* --- / LINKS / --- */
a { color: #1c1c1c; text-decoration: none;}
a:hover { color: #2cabe1; text-decoration: none; }
.contact_bar a { color: #ffffff}
footer a { color: #ffffff; }

/* --- / FORMS / --- */
input, textarea, select {
    width: 100%;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 10px 10px;
    font-size: 16px;
    max-width: 100%;
    text-align: left;
    background: transparent;
    line-height: 26px;
    margin-top: 2px;
    letter-spacing: 1px;
    }

select { height: 46px; padding-left: 6px;}

select option {
    padding: 2px 10px;
    font-size: 16px!important;
    color: #1c1c1c;
    line-height: 26px;
    font-family: 'Calibri', Arial, Helvetica, sans-serif!important;
    }

input { height: auto; }

.nomore { display: none !important; }

.submit {
    float: right;
    color: #ffffff;
    height: 40px;
    margin: 2px 0px 0px auto;
    padding: 5px 10px;
    text-align: center;
    }

:-moz-placeholder { color: #d7d7d7; }     
::-moz-placeholder { color: #d7d7d7 !important; opacity: 1 } 
:-ms-input-placeholder { color: #d7d7d7; } 
::-webkit-input-placeholder { color: #d7d7d7; }

form .col-md-6, form .col-md-12 { padding-left: 0px; padding-right: 0px;}

/* --- / ACCORDION / --- */
button.accordion {
    width: 100%;
    color: #2cabe1;
    cursor: pointer;
    border: none;
    padding: 10px 10px;
    outline: none;
    hyphens: auto;
    font-size: 24px;
    transition: 0.4s;
    text-align: left;
    line-height: 26px;
    background-color: #ffffff;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    }

button.accordion.active, button.accordion:hover {
    color: #09565f;
    background-color: #ffffff;
    }

button.accordion:after {
    float: right;
    color: #1c1c1c;
    content: '\002B';
    font-weight: bold;
    margin-left: 5px;
    }

button.accordion.active:after {
    content: "\2212";
    }

div.panel {
    margin: 20px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s ease-out;
    background-color: #ffffff;
    box-shadow: none;
    }

hr.popi {
    width: 100%;
    border: 0;
    height: 0;
    margin: 10px auto 25px auto;
    border-bottom: 1px dashed #a9a9a9; 
    }

/* --- / SCROLL / --- */
.reveal{
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: 1s all ease;
  }
  
  .reveal.active{
    transform: translateY(0);
    opacity: 1;
  }    

/* --- / RESPONSIVE / --- */
@media screen and (max-width: 991px) {
    p { text-align: left;}
    .container { margin-top: 30px; }
    .desktop { display: none}
    }