/*----------------------------------------*/

/* Utilities & Base Classes

/*----------------------------------------*/
/* YS: Fix for jumpy Reveal Box */
body.is-reveal-open {
    overflow: visible;
}

.reveal-overlay {
    overflow-y: hidden;
}

/*#confirmation-modal {
    width: 70%;
    background: #083466;
    color: #efefef;
    position: absolute !important;
    top: 30% !important;
    z-index: 100;
    visibility: hidden;
    margin: 0 auto;
    text-align: center;
    padding: 20px 20px;
    text-align: center;
    left: 0;
    right: 0;
}
.close-button {
    position: absolute;
    right: 5px;
    top: 5px;
} */

#contactModal {
    padding: 0 !important;
}
body{
    font-size:16px;
}

.list-unstyled {
    list-style: none !important;
}

.text-centered {
    text-align: center;
}
.vertical-horizontal-center {
    position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wave-medium-width {
    width: 120px;
    max-width: 90%;
}
.prenav-bluebar {
    height: 20px;
    background: #083466;
    width: 100%;
}

p {
    font-family: 'Proxima Nova Alt Regular';
    color: #083466;
    font-size: 1rem;
}
h1 {
    font-family: 'Proxima Nova Semibold';
    font-size: 2rem;
}
h3 {
    font-family: 'Proxima Nova Semibold';
    font-size: 1.4rem;
    color: #083466;
}
h5 {
    font-family: 'Proxima Nova Scosfthin';
    font-size: 1.2rem;
    color: #083466;
}
h6 {
    font-family: 'Proxima Nova Semibold';
    font-size: 1.2rem;
    color: #083466;
}
button.green-action-button {
    background: #00aa7e;
    color: #fff;
    padding: 16px 24px;
    font-family: "Proxima Nova Semibold";
    border-radius: 0 !important;
    cursor: pointer;
}

button.green-action-button:hover {
    background: #31cea5;
}

ul li {
    list-style: none;
}

.mini-separator {
    border-bottom: solid 1px #083466;
    width: 80px;
    margin: 1.25rem 0;
}
/*----------------------------------------*/

/* Specific Classes

/*----------------------------------------*/
.main-header-content {
    width: 100%;    
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

ul.main-nav {
    text-align: center;
}
nav.main-header {
    border-bottom: solid 1px #e5e5e5
}
.main-nav > li {
    border-right: solid 1px #e5e5e5;
}
.main-nav > li:last-child {
    border-right: none;
}

.main-nav > li.green-nav {
    background:  #00aa7e;
}

.logo-nav img {
    width: auto;
    max-width: 100%;
    height: 85px;
}
.main-nav > li.green-nav > a {
    color: #fff;
}
ul.main-nav {
    font-size: 0;
}
.bottom-blue-part {
    height: 50px;
    background: #083466;
    width: 100%;
}
.hero-content-container .white-part {
    background: #fff;
    padding: 20px 16px 0;
}
.hero-content-container .contact-button {
    padding: 25px 56px;
    background: #00aa7e;
    border-radius: 0 !important;
    color: #fff;
    margin-bottom: -100px;
    font-family: "Proxima Nova Semibold";
    cursor: pointer;
}
.hero-content-container .contact-button:hover {
    background: #31cea5;
}

.hero-large {
    background: url("../img/mainherobgsmaller.jpg");
    background-size: cover !important;
    background-position: center center !important;
}

.hero-content-container {
    max-width: 100%;
    width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.hero-content-container p {
    margin-top: 1rem;
    font-size: 0.8rem;
    margin-bottom: 2rem;
}
.hero-content-container h3 {
    margin-bottom: 0;   
}
.why-choose-us .circles-column {
    width: 30%;
    display: inline-block;
    text-align: center;
}

.why-choose-us .circles-container {
    overflow: hidden;
width: 1100px;
text-align: center;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}

.why-choose-us .circle-left {
    margin-right: 15px;
}

.why-choose-us .circle-right {
    margin-left: 15px;
} 
.circles {
    position: relative;
    width: 200px;
height: 200px;
margin-left: auto;
margin-right: auto;
border-radius: 50%;
border: solid 1px #083466;
}

section {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.circles h2 {
    font-family: 'Proxima Nova';
    font-size: 2rem;
    line-height: 2rem;
}
.why-choose-us {
}

.why-choose-us p.main-slogan {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.6rem;
}

.quality-products {
    
}

.section-title {
    margin-bottom: 1.6rem;
}
.section-title h3 {
    margin-bottom: 0;
}

.applications-industries {
    background: #e5ebf1;
}

.services {
    background: url(./../img/servicebg.jpg);
    background-size: cover;
    position: relative;
    background-position: center center;
}
.services h3 {
    color: #fff;
}

.services .service-image {
    position: absolute;
    bottom: 0;
    width: 450px;
}

.services .list-icon {
    width: 20%;
    float: left;
}
.services .list-content {
    width: 75%;
    float: left;
}
.services .list-content h5, .services .list-content p {
    color: #fff;
}

footer {
    background: #021f40;
    padding-bottom: 6rem;
    padding-top: 4rem;
}
footer p {
    margin-top: 1rem;
}

footer h5, footer h3, footer, footer p {
    color: #fff !important;
}

footer .list-icon {
    width: 20%;
    float: left;
}
footer .list-content {
    width: 75%;
    float: left;
}
footer li {
    float: left;
    width: 100%;
}
footer .list-icon img {
    width: 20px;
    max-width: 100%;
}


@media only screen and (min-width: 767px){
    .main-header-content {
        height: 85px;
    }
    .hero-large .row {
        padding-top: 140px;
        padding-bottom: 140px;
    }

}

@media only screen and (min-width: 1280px){
    .main-header-content {
        max-width: 1180px;
    }
    
    .main-nav>li {
        display: inline-block;
        padding-right: 40px;
        padding-left: 40px;
    }
    
    .main-nav>li>a, .main-nav>li>span {
        color: #2d383f;
        line-height: 85px;
        display: block;
        font-size: 1rem;
    }

}

@media only screen and (max-width: 767px){
    .why-choose-us .circles-column {
        width: 100%;
        margin-bottom: 15px;
    }
    .circles-column.circle-left, .circles-column.circle-right {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .carousel-row {
        margin-bottom: 15px;
    }

    /* YS: only to handle case because of the image of engineer down there */
    .services {
        padding-bottom: 0;
    }
    .services .service-image {
        position: relative;
        bottom: 0;
    }
}

/*-----------------------------------------*/

/* Aboutus.php 

/*------------------------------------------*/
.about-us-hero {
    background-image: url("../img/aboutushero.jpg");
}

.timeline-history {
    background: url("../img/wavewhitebg.jpg");
    background-size: cover;
}

.map-locations {
    background: url("../img/mapgreen.jpg");
    background-size: cover;
    background-position: center center;
    padding-top: 10rem;
    padding-bottom: 10rem;
}
.map-modal {
    background: #fff;
    width: 400px;
    max-width: 100%;
    padding-top: 2rem;
    margin-left: auto;
    margin-right: auto;
}

.timeline-container {
    width: 50%;
    overflow: hidden;
}

.timeline-container .circle-timeline {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    border: solid 2px #021f40; 
    margin: 0 auto;
}

.line-timeline:after {
    content:"";
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 2px solid #021f40;
    transform: translate(-50%);
}

.line-timeline {
    width: 50px;
    height: 100px;
    position:relative;
    text-align:center;
    margin: 0 auto;
}

.timeline-years {
    width: 18%;
    float: left;
    text-align: center;
    min-width: 70px;
}

.timeline-content {
    width: 80%;
    float: left;
}

.timeline-align-right {
    float: right;
    position: relative;
    right: 58px;
}
.timeline-align-left {
    float: left;
    text-align: right;
    position: relative;
left: 58px;
}

.timeline-align-left .mini-separator {
    margin-left: auto !important;
}
.photo-profile {
    text-align: center;
}
.content-profile {
    width: 80%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-top: 12px;
}
.photo-profile img {
    text-align: center;
    width: 80%;
    border: solid 1px #d7d7d7;
}
/*-----------------------------------------*/

/* Products.php 

/*------------------------------------------*/

.all-products-hero {
    background: url(./../img/allproductsbg.jpg);
    background-size: cover;
    position: relative;
}
.all-products-hero .row {
    padding-top: 100px;
}
.all-products-hero img.various-products {
    position: absolute;
    bottom: -60px;
}
.all-products-hero .hero-content-container h1 {
    color: #fff;
}

.all-products-hero .hero-content-container h3 {
    color: #fff;
}

.all-products-hero .hero-content-container .contact-button {
    margin-bottom: 0;
margin-top: 40px;
}

section.grey-product-section {
    background: #e5ebf5;
}

.products-overview {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.all-products-main-content {
    padding-top: 6rem;
    padding-bottom: 5rem;
}

.all-products-main-content .columns img {
    border: solid 1px #9c9c9c;
    margin-bottom: 1rem;
}

.all-products-main-content .columns h3, .all-products-main-content .columns p {
    text-align: left !important;
}

.product-specifications {
    background: #00aa7e;
}

/*-----------------------------------------*/

/* Contact Modal 

/*------------------------------------------*/

#contact-form .green-action-button {
    position: relative;
    top: 20px;
    padding-left: 36px;
    padding-right: 36px;
}
.reveal-overlay .reveal {
    border: 0 !important;
}
.modal-content-container {
    padding-top: 15px;
    padding-left: 12px;
    padding-right: 12px;
}

label {
    font-family: 'Proxima Nova Alt Regular';
    padding-bottom: 8px;
}

#contact-form h1 {
    margin: 0;
}
/*----------------------------------------*/

/* Font Face Classes

/*----------------------------------------*/

@font-face {
    font-family: 'proxima_nova_altblack';
    src: url('../fonts/Mark Simonson - Proxima Nova Alt Black-webfont.eot');
    src: url('../fonts/Mark Simonson - Proxima Nova Alt Black-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Mark Simonson - Proxima Nova Alt Black-webfont.woff2') format('woff2'),
         url('../fonts/Mark Simonson - Proxima Nova Alt Black-webfont.woff') format('woff'),
         url('../fonts/Mark Simonson - Proxima Nova Alt Black-webfont.ttf') format('truetype'),
         url('../fonts/Mark Simonson - Proxima Nova Alt Black-webfont.svg#proxima_nova_altblack') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'proxima_nova_altbold';
    src: url('../fonts/Mark Simonson - Proxima Nova Alt Bold-webfont.eot');
    src: url('../fonts/Mark Simonson - Proxima Nova Alt Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Mark Simonson - Proxima Nova Alt Bold-webfont.woff2') format('woff2'),
         url('../fonts/Mark Simonson - Proxima Nova Alt Bold-webfont.woff') format('woff'),
         url('../fonts/Mark Simonson - Proxima Nova Alt Bold-webfont.ttf') format('truetype'),
         url('../fonts/Mark Simonson - Proxima Nova Alt Bold-webfont.svg#proxima_nova_altbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Proxima Nova Alt Regular';
    src: url('../fonts/Mark Simonson - Proxima Nova Alt Regular-webfont.eot');
    src: url('../fonts/Mark Simonson - Proxima Nova Alt Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Mark Simonson - Proxima Nova Alt Regular-webfont.woff2') format('woff2'),
         url('../fonts/Mark Simonson - Proxima Nova Alt Regular-webfont.woff') format('woff'),
         url('../fonts/Mark Simonson - Proxima Nova Alt Regular-webfont.ttf') format('truetype'),
         url('../fonts/Mark Simonson - Proxima Nova Alt Regular-webfont.svg#proxima_nova_altregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 4, 2015 */



@font-face {
    font-family: 'Proxima Nova Scosfthin';
    src: url('../fonts/Mark Simonson - Proxima Nova ScOsf Thin-webfont.eot');
    src: url('../fonts/Mark Simonson - Proxima Nova ScOsf Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Mark Simonson - Proxima Nova ScOsf Thin-webfont.woff2') format('woff2'),
         url('../fonts/Mark Simonson - Proxima Nova ScOsf Thin-webfont.woff') format('woff'),
         url('../fonts/Mark Simonson - Proxima Nova ScOsf Thin-webfont.ttf') format('truetype'),
         url('../fonts/Mark Simonson - Proxima Nova ScOsf Thin-webfont.svg#proxima_nova_scosfthin') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'Proxima Nova Semibold';
    src: url('../fonts/Mark Simonson - Proxima Nova Semibold-webfont.eot');
    src: url('../fonts/Mark Simonson - Proxima Nova Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Mark Simonson - Proxima Nova Semibold-webfont.woff2') format('woff2'),
         url('../fonts/Mark Simonson - Proxima Nova Semibold-webfont.woff') format('woff'),
         url('../fonts/Mark Simonson - Proxima Nova Semibold-webfont.ttf') format('truetype'),
         url('../fonts/Mark Simonson - Proxima Nova Semibold-webfont.svg#proxima_nova_ltsemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'proxima_nova_ltthin';
    src: url('../fonts/Mark Simonson - Proxima Nova Thin-webfont.eot');
    src: url('../fonts/Mark Simonson - Proxima Nova Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Mark Simonson - Proxima Nova Thin-webfont.woff2') format('woff2'),
         url('../fonts/Mark Simonson - Proxima Nova Thin-webfont.woff') format('woff'),
         url('../fonts/Mark Simonson - Proxima Nova Thin-webfont.ttf') format('truetype'),
         url('../fonts/Mark Simonson - Proxima Nova Thin-webfont.svg#proxima_nova_ltthin') format('svg');
    font-weight: normal;
    font-style: normal;

}