/* Html & Body Styles */

html,body { margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; }

/* Headlines & Paragraphs */

h2 { font-weight: bold; letter-spacing: 1px; font-size: 20px; text-transform: uppercase; }
p { font-weight: 300; font-size: 14px; }
a:hover { text-decoration: none; }

/* Buttons */

.button { display: table; margin: 20px 0; padding: 15px 30px; text-align: center; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; }
.button.blue { background: #1d2385; color: white; }
.button.blue:hover { background: #181b51; }

/* Bootstrap Custom Styles */

.row-eq-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
.modal-title { color: #1d2385; text-transform: uppercase; font-size: 14px; letter-spacing: 1px; }
.modal-body img { width: 100%; }

/* General Styles */

.anchor { display: block; height: 60px; margin-top: -60px; visibility: hidden; }
.section { padding: 50px; }
.separator { width: 32px; height: 3px; margin: 15px 0 20px; }
.separator.center { margin: 15px auto 20px; }
.separator.blue { background: #1d2385; }
.separator.white { background: #fff; }
.separator.gray { background: #7c7c7c; }
.overflow { overflow: hidden; }

/* Header */

.header { border-bottom: #1d2385 solid 2px; width: 100%; position: fixed; background: white; z-index: 999; }
.header .logo { max-width: 200px; float: left; }
.header .logo img { width: 100%; }
.header .menu { float: right; padding: 20px; }
.header .menu ul { margin: 0; padding: 0; }
.header .menu ul li { list-style: none; display: inline; }
.header .menu ul li a { text-transform: uppercase; letter-spacing: 1px; font-size: 12px; text-align: center; color: #8f8f8f; border: rgba(255,255,255,0) solid thin; margin: 0 10px; padding: 10px; transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; }
.header .menu ul li a:hover { border: #8f8f8f solid thin; }
.header .menu ul li a.active { border: #1d2385 solid thin; color: #1d2385; }

.push { height: 60px; }

/* Master Slider Custom Styles */

img.intro { width: 90%; max-width: 700px; }
.ms-layer.button { background: #1d2385; color: white; text-transform: uppercase; letter-spacing: 1px; padding: 10px 30px; }    
p.ms-layer.subheadline { max-width: 500px; color: white; font-size: 15px; text-align: center; }
p.button { background: #1d2385!important; color: white; padding: 20px 50px; display: table; margin: 10px auto; text-align: center; text-transform: uppercase; }

/* Hero Banner */
main { height: 150vh; overflow-x: hidden; -webkit-perspective: 1px; perspective: 1px; -webkit-perspective-origin: center top; perspective-origin: center top; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
header { height: 80vh; background: url("../../img/slider/01.png"); background-size: cover; background-position: center center; position: relative; vertical-align: top; -webkit-transform-origin: center top; transform-origin: center top; -webkit-transform: translateZ(-1px) scale(2); transform: translateZ(-1px) scale(2); }
header video { position: fixed; width: 100%; left: 50%; top: 50%; transform: translate(-50%,-50%); }
section { min-height: 200vh; background: white; -webkit-transform: translateZ(0); transform: translateZ(0); padding: 10px 0; }
header .content.centered { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center; }
header .content.centered img { width: 100%; }
header .content.centered a { display: table; margin: 10px auto; }

/* Banner Responsive (Home) */

.banner { position: relative; }
.banner img { width: 100%; }
.banner .content { width: 90%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); }
.banner .content h1 { color: white; text-transform: uppercase; }
.banner .content h5 { color: #fff; text-transform: uppercase; }
    
/* About SEMSA*/

.about { background: #f5f5f5; }
.about p { color: #828282; text-align: justify; }
.about .headline { text-align: right; }
.about .headline .separator { float: right; }

/* Services */

.services .thumb { margin-bottom: 15px; }
.services .thumb img { width: 100%; }
.services .thumb iframe { width: 100%; height: 199px; }
.services .title h3 { text-transform: uppercase; font-size: 16px; letter-spacing: 1px; font-weight: bold; padding-left: 15px; border-left: #1d2385 solid 3px; }
.services h4 { font-size: 32px; text-align: center; padding: 80px 0 40px; text-transform: uppercase; font-weight: 700; color: #1d2385; }
.services .description p { text-align: justify; line-height: 18px; color: #242424; }
.services .read-more { color: #1d2385; display: table; margin: 10px 0; display: table; font-size: 12px; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; }
.services .read-more:hover { transform: translateX(10px); -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -ms-transform: translateX(10px); -o-transform: translateX(10px); }

/* More About Semsa & Other Projects */

.more-semsa-bg { color: white; background: url(../../img/background/more-about-semsa.png)center center no-repeat; background-size: cover; }
.more-projects-bg { color: white; background: #303030; }
.more-semsa-bg .read-more, .more-projects-bg .read-more { color: white; font-size: 12px; display: table; margin: 20px 0; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; }
.more-semsa-bg .read-more:hover, .more-projects-bg .read-more:hover { transform: translateX(10px); -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -ms-transform: translateX(10px); -o-transform: translateX(10px); }

/* Do you need help? */

.help { border-bottom: #eaeaea solid thin; }
.help .title img, .help .title h4 { float: left; }
.help .title img { width: 32px; position: relative; margin-top: 3px; }
.help .info { padding-left: 32px; text-align: justify; }

.help .info .read-more { font-size: 12px; color: #1d2385; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out;  }
.help .info .read-more:hover { transform: translateX(10px); -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -ms-transform: translateX(10px); -o-transform: translateX(10px); }

/* Projects */

.projects .thumb { margin-bottom: 15px; }
.projects .thumb img { width: 100%; }
.projects .title h3 { text-transform: uppercase; font-size: 16px; letter-spacing: 1px; font-weight: bold; padding-left: 15px; border-left: #1d2385 solid 3px; }
.projects h4 { text-align: center; padding: 80px 0 40px; text-transform: uppercase; font-weight: 700; color: #1d2385; }
.projects .description p { text-align: justify; line-height: 18px; color: #242424; }
.projects .read-more { color: #1d2385; display: table; margin: 10px 0 50px; display: table; font-size: 12px; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; }
.projects .read-more:hover { transform: translateX(10px); -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -ms-transform: translateX(10px); -o-transform: translateX(10px); }

/* Products */

.products .thumb { margin-bottom: 15px; }
.products .thumb img { width: 100%; }
.products .thumb video { width: 100%; }
.products .title h3 { text-transform: uppercase; font-size: 16px; letter-spacing: 1px; font-weight: bold; padding-left: 15px; border-left: #1d2385 solid 3px; }
.products h4 { text-align: center; padding: 80px 0 40px; text-transform: uppercase; font-weight: 700; color: #1d2385; }
.products .description p { text-align: justify; line-height: 18px; color: #242424; }
.products .read-more { color: #1d2385; display: table; margin: 10px 0; display: table; font-size: 12px; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; }
.products .read-more:hover { transform: translateX(10px); -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -ms-transform: translateX(10px); -o-transform: translateX(10px); }


/* Contact Banner */

.contact-banner { padding: 100px 20px; background: url(../../img/background/contact-banner.png)center center no-repeat; background-size: cover; }
.contact-banner .headline, .contact-banner .subheadline { text-align: right; letter-spacing: 1px;  color: white; text-transform: uppercase; }
.contact-banner .headline { font-weight: bold; font-size: 32px; font-weight: bold; }
.contact-banner .subheadline { font-size: 18px; font-weight: 300; }

/* Our Clients */

.clients img { width: 100%; }

/* Contact Form & Google Map */

.map { padding: 0; margin: 0; }
.map iframe { border: none; width: 100%; height: 600px; }

.form { position: relative; }
.form h2 { color: #1d2385; text-transform: uppercase; font-size: 18px; letter-spacing: 1px; padding: 0 20px 0; }
.form h4 { color: #8f8f8f; font-size: 12px; letter-spacing: 1px; padding: 0 20px 50px; font-weight: 300; }
form { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 90%; }
input, select, textarea { width: 100%; padding: 5px; margin: 10px 0; border: #e5e5e5 solid thin; resize: none; -webkit-appearance:none; appearance:none;  }
textarea { height: 120px; }
input[type="submit"] { background: #1d2385; color: white; padding: 10px 30px; text-align: center; display: table; margin: 10px auto; border: none; outline: none; }

::-webkit-input-placeholder { color:#8f8f8f; font-weight: 300; }
::-moz-placeholder { color:#8f8f8f; font-weight: 300; } 
:-ms-input-placeholder { color:#8f8f8f; font-weight: 300; }
input:-moz-placeholder { color:#8f8f8f; font-weight: 300; }

/* Footer */

footer { background: #262626; color: #7c7c7c; }
footer h6 { text-transform: uppercase; letter-spacing: 1px; font-weight: 300; }
footer a { display: block; color: #7c7c7c; font-size: 12px; line-height: 24px; }
footer a:hover { color: white; }

/* Copyright */

.copyright { background: #0f0f0f; padding: 20px; color: #7c7c7c; font-size: 10px; }
.copyright p, .copyright a { font-size: 9px; letter-spacing: 1px;  }
.copyright a { color: white;  }

/* Media Queries */

@media only screen
    and (max-width: 767px) {
        .about .headline, .about .separator { text-align: center; }
        .about .separator, a.button { display: table; margin: 20px auto; float: none!important; }
        .contact-banner .headline, .contact-banner .subheadline { text-align: center; }
        .row-eq-height { display: -webkit-table; display: -webkit-table; display: -ms-table; display: table; }
        form { position: static; left: 0; top: 0%; transform: translate(0%,0%); }
}