/* =================================================================== */ /* /* KREO v1.0 Main Stylesheet /* url: styleshout.com /* 10-12-2015 /* /* TOC: /* 01. =webfonts and iconfonts /* 02. =document setup /* 03. =preloader /* 04. =forms /* 05. =theme common styles /* 06. =header styles /* 07. =hero section /* 08. =portfolio styles /* 09. =services /* 10. =about /* 11. =testimonials /* 12. =contact /* 13. =footer /* /* =================================================================== */ /** /* 01. =webfonts and iconfonts /* =================================================================== */ @import url("fonts.css"); @import url("font-awesome/css/font-awesome.min.css"); /** /* 02. =document setup /* =================================================================== */ /* Body ---------------------------------------------------------------------- */ html, body { height: 100%; } body { background: #fff; font: 14px/26px 'Heebo', sans-serif; font-weight: normal; color: #dedfdf; } /* links ---------------------------------------------------------------------- */ a, a:visited { outline: none; color: white; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } a:hover, a:focus { color: #825A31; } /* Typography --------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { ffont-family: 'Montserrat', sans-serif; color: #FFFFFF; font-style: normal; text-rendering: optimizeLegibility; margin: 18px 0 15px; font-weight: 700; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } h1 { font-size: 30px; line-height: 36px; margin-top: 0; letter-spacing: -1px; } h2 { font-size: 24px; line-height: 30px; } h3 { font-size: 20px; line-height: 30px; } h4 { font-size: 17px; line-height: 30px; } h5 { font-size: 14px; line-height: 30px; margin-top: 15px; text-transform: uppercase; letter-spacing: 1px; } h6 { font-size: 13px; line-height: 30px; margin-top: 15px; text-transform: uppercase; letter-spacing: 1px; } p { margin: 15px 0 15px 0; } p img { margin: 0; } p.lead { font: 20px/36px "Heebo", serif; color: #fff; } em { font: 16px/30px "merriweather-italic", serif; font-style: normal; } strong, b { font: 16px/30px "merriweather-bold", serif; font-weight: normal; } small { font-size: 11px; line-height: inherit; } blockquote { margin: 18px 0px; padding-left: 40px; position: relative; } blockquote:before { content: "\201C"; opacity: 0.45; font-size: 80px; line-height: 0px; margin: 0; font-family: arial, sans-serif; position: absolute; top: 30px; left: 0; } blockquote p { font-family: georgia, serif; font-style: italic; padding: 0; font-size: 18px; line-height: 30px; } blockquote cite { display: block; font-size: 12px; font-style: normal; line-height: 18px; } blockquote cite:before { content: "\2014 \0020"; } blockquote cite a, blockquote cite a:visited { color: #707273; border: none; } abbr { font-family: "merriweather-bold", serif; font-variant: small-caps; text-transform: lowercase; letter-spacing: .5px; color: #707273; } pre, code { font-family: Consolas, "Andale Mono", Courier, "Courier New", monospace; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } code { padding: 3px; background: #ECF0F1; color: #707273; border-radius: 3px; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } mark { background: #FFF49B; color: #000; } hr { border: solid #707273; border-width: 1px 0 0; clear: both; margin: 23px 0 12px; height: 0; } /* Lists --------------------------------------------------------------------- */ ul, ol { margin-top: 15px; margin-bottom: 15px; } ul { list-style: disc; margin-left: 17px; } dl { margin: 0 0 15px 0; } dt { margin: 0; color: #825A31; } dd { margin: 0 0 0 20px; } /* Floated image --------------------------------------------------------------------- */ img.pull-right { margin: 12px 0px 0px 18px; } img.pull-left { margin: 12px 18px 0px 0px; } /* Style Placeholder Text --------------------------------------------------------------------- */ ::-webkit-input-placeholder { color: #fff; } :-moz-placeholder { /* Firefox 18- */ color: #fff; } ::-moz-placeholder { /* Firefox 19+ */ color: #fff; } :-ms-input-placeholder { color: #fff; } .placeholder { color: #fff !important; } /* block grids default paddings --------------------------------------------------------------------- */ .bgrid { padding: 0 20px; } @media only screen and (max-width:1024px) { .bgrid { padding: 0 18px; } } @media only screen and (max-width:768px) { .bgrid { padding: 0 15px; } } @media only screen and (max-width:600px) { .bgrid { padding: 0 10px; } } @media only screen and (max-width:400px) { .bgrid { padding: 0; } } /* /* 03. =Preloader /* =================================================================== */ #preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #0F1215; z-index: 9999999; height: 100%; width: 100%; } .no-js #preloader, .oldie #preloader { display: none; } #loader { position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; margin-left: -25px; margin-top: -25px; background-color: #825A31; -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes sk-rotateplane { 0% { -webkit-transform: perspective(120px); } 50% { -webkit-transform: perspective(120px) rotateY(180deg); } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); } } @keyframes sk-rotateplane { 0% { -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100% { -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } /* /* 04. =forms /* =================================================================== */ form { margin-bottom: 30px; } fieldset { margin: 0 0 30px 0; padding: 0; border: none; } input, button { -webkit-font-smoothing: antialiased; } input[type="text"], input[type="password"], input[type="email"], textarea, select { display: block; padding: 18px 20px; margin: 0 0 12px 0; border: 0; outline: none; vertical-align: middle; color: #a3a4a6; font-family: "Montserrat", sans-serif; font-size: 15px; line-height: 24px; border-radius: 3px; max-width: 100%; background: rgba(255, 255, 255, 0.2); -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } textarea { min-height: 170px; } ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #fff; } ::-moz-placeholder { /* Firefox 19+ */ color: #fff; } :-ms-input-placeholder { /* IE 10+ */ color: #fff; } :-moz-placeholder { /* Firefox 18- */ color: #fff; } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, select:focus, textarea:focus { color: #fff; } .button, .button:visited, button, input[type="submit"], input[type="reset"], input[type="button"] { display: inline-block; font: 16px/30px "Montserrat", sans-serif; padding: 9px 16px; margin: 0 3px 6px 0; background: #f5f5f5; color: #fff; text-decoration: none; cursor: pointer; height: auto; text-align: center; border: none; -webkit-appearance: none; -webkit-font-smoothing: inherit; border-radius: 3px; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover { color: #FFFFFF; background: #825A31; } label, legend { font: 15px/30px "Montserrat", sans-serif; margin: 12px 0; color: #252525; display: block; } label span, legend span { color: #575859; font: 16px/30px "Montserrat", sans-serif; } input[type="checkbox"], input[type="radio"] { font-size: 15px; color: #575859; } input[type="checkbox"] { display: inline; } /** /* 05. =theme common styles /* =================================================================== */ /* hr */ hr { border: solid #dedfdf; border-width: 3px 0 0; width: 100px; margin: 11px 0 30px; height: 0; clear: both; text-align: left; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } /* for css animations */ .show { filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; zoom: 1; } /* sections */ .section-head h1 { font: 30px/50px "Montserrat", sans-serif; text-transform: uppercase; letter-spacing: 2.5px; color: #FFFFFF; margin-bottom: 30px; margin-top: 18px; } .section-head h1 span { color: #825A31; position: relative; left: 3px; } .section-head p { font: 20px/36px "Heebo", serif; width: 95%; } .section-head:hover h1 + hr { border-color: #825A31; width: 120px; text-align: left; } @media only screen and (max-width:768px) { .section-head { text-align: center; } .section-head p { font: 18px/36px "Heebo", serif; width: auto; } .section-head h1 + hr { margin-left: auto; margin-right: auto; } } @media only screen and (max-width:600px) { .section-head p { font: 17px/33px "Heebo", serif; width: auto; } } @media only screen and (max-width:400px) { .section-head [class*="column"] { padding: 0; } } /** /* 06. =header styles /* =================================================================== */ header { height: 50px; width: 100%; position: fixed; left: 0; top: 0; z-index: 600; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } header.opaque { background: #f5f5f5; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } /* header logo */ header .logo { float: left; width: auto; margin-left: 30px; margin-right: 30px; z-index: 600; /* add position relative since z-index only applies to elements that have been given an explicit position */ position: relative; } header .logo a { display: block; margin: 0; padding: 0; border: none; font: 0/0 a; text-shadow: none; color: transparent; width: 120px; height: 50px; background: url("../images/logoK@2x.png") no-repeat center; background-size: 120px 27px; } header.opaque .logo a {background: url("../images/logoW@2x.png") no-repeat center; background-size: 120px 27px;} /* header social */ header .header-social { font-size: 20px; font-weight: normal; line-height: 66px; margin-top: 0; margin-left: 30px; padding-left: 36px; border-left: 1px solid rgba(150, 150, 150, 0.2); float: right; position: relative; top: -1px; } header .header-social li { display: inline-block; margin-right: 15px; } header .header-social li a { color: #FFFFFF; } header.opaque .header-social li a {color:#424242} header .header-social li a:hover { color: #825A31; } header.opaque .header-social li a:hover { color: #825A31; } /* media queries: /* header/header components */ @media only screen and (max-width:880px) { header .header-social { display: none; } } @media only screen and (max-width:768px) { header { background: rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } header .row { width: 100%; } header .logo { margin-left: -15px; } } /* primary navigation --------------------------------------------------------------------- */ #nav-wrap, #nav-wrap ul, #nav-wrap li, #nav-wrap a { margin: 0; padding: 0; } /* nav-wrap */ #nav-wrap { font: 13px "Montserrat", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; float: right; } /* hide toggle button */ #nav-wrap > a { display: none; } ul#nav { min-height: 50px; display: inline-block; width: auto; /* left align the menu */ text-align: left; } ul#nav li { position: relative; list-style: none; display: inline-block; height: 50px; } /* Links */ ul#nav li a { /* 14px padding top + 14px padding bottom + 38px line-height = 66px */ display: block; padding: 6px 12px; line-height: 38px; text-decoration: none; text-align: left; color: #FFFFFF; position: relative; -moz-transition: color 0.2s ease-in-out; -o-transition: color 0.2s ease-in-out; -webkit-transition: color 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } header.opaque ul#nav li a {color: #424242;} ul#nav li a:hover { color: #b97530; } ul#nav li a:active { background-color: transparent !important; } ul#nav li.current a { color: #b97530; } header.opaque ul#nav li.current a {color: #825A31;} ul#nav li.current a:after { position: absolute; left: 50%; bottom: 10px; width: 40px; height: 2px; margin-left: -23px; background-color: white; content: '\0020'; display: block; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } header.opaque ul#nav li.current a:after {background-color: #825A31;} /* mobile navigation --------------------------------------------------------------------- */ @media only screen and (max-width:768px) { #nav-wrap { z-index: 700; display: block; width: 100%; float: none; position: absolute; top: 0; right: 0; } /* mobile-btn and toggle-btn */ #nav-wrap > a { border: none; color: #FFFFFF; height: 30px; min-width: 30px; font-size: 12px; text-align: left; float: right; display: block; padding: 0; position: relative; top: 12px; right: 6px; } #nav-wrap > a:hover .menu-icon { /*background: #FFFFFF;*/ } #nav-wrap .menu-icon { display: inline-block; width: 24px; height: 3px; margin-top: -3px; position: absolute; right: 8px; top: 50%; bottom: auto; left: auto; background: #825A31; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; font: 0/0 a; text-shadow: none; color: transparent; } #nav-wrap .menu-icon:before, #nav-wrap .menu-icon:after { content: ''; width: 100%; height: 100%; position: absolute; background-color: inherit; left: 0; } #nav-wrap .menu-icon:before { bottom: 8px; } #nav-wrap .menu-icon:after { top: 8px; } /* dropdown nav */ #nav-wrap ul#nav { background: #1c212a; padding: 54px 45px 60px 45px; margin: 0; height: auto; display: none; clear: both; width: 100%; float: none; position: absolute; top: 66px; right: 0; } #nav-wrap ul#nav > li { display: block; float: none; height: auto; text-align: left; border-bottom: 1px dotted rgba(200, 200, 200, 0.1); padding: 6px 0; } #nav-wrap ul#nav > li:first-child { border-top: 1px dotted rgba(200, 200, 200, 0.1); } #nav-wrap ul#nav li a { display: block; width: auto; padding: 0; color: #cacbcb; padding: 12px 0; line-height: 16px; border: none; } #nav-wrap ul#nav li a:hover { color: #FFFFFF; } #nav-wrap ul#nav li.current > a { background: none; color: #825A31; } #nav-wrap ul#nav li.current > a:after { display: none; } #nav-wrap a.mobile-btn { display: none; } .js #nav-wrap a#toggle-btn { display: block; } /* if js is disabled */ .no-js #nav-wrap:not(:target) > a:first-of-type, .no-js #nav-wrap:target > a:last-of-type { display: block; } .no-js #nav-wrap:target ul#nav { display: block; } } /* make sure the menu is visible on larger screens --------------------------------------------------------------------- */ @media only screen and (min-width:769px) { #nav-wrap ul#nav { display: block !important; } } /* /* 07. =hero section /* =================================================================== */ #hero { height:100vh; width: 100%; text-align: left; position: relative; border-bottom: 1px solid #15191d; } .heroslide1 { background:url(../images/bgslide.jpg) no-repeat center; /*background-color: #825A31; background-blend-mode: multiply;*/ -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; } .heroslide2 { background: url(../images/slide1.jpg) no-repeat center; /*background-color: #825A31; background-blend-mode: multiply; */ -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; } .heroslide3 { background:url(../images/slide2.jpg) no-repeat center; /*background-color: #825A31; background-blend-mode: multiply;*/ -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; } .heroslide4 { background:url(../images/slide3.jpg) no-repeat center; /*background-color: #825A31; background-blend-mode: multiply;*/ -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; } .heroslide5 { background:url(../images/slide4.jpg) no-repeat center; /*background-color: #825A31; background-blend-mode: multiply;*/ -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; } .hero-content { position: relative; height: 100vh; } /* hero slider */ .slidertable {display: table; height: 100vh;} .slidertablecell {display: table-cell; vertical-align: middle;} #hero-slider .slidertable {width: 100%;} #hero-slider { margin: 0; } #hero-slider .slides .flex-caption { margin: 0 0 0 30px; } #hero-slider .slides .flex-caption h1 { font: 49px/1.3 "Montserrat", sans-serif; font-weight: 700; padding-bottom: 24px; color: white; text-shadow: 0 1px 20px rgba(0, 0, 0, 0.6); position: relative; /* for css animations */ filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; zoom: 1; } #hero-slider .slides .flex-caption h1::after { display: block; background-color: #825A31; width: 100px; height: 3px; content: '\0020'; position: absolute; left: 0; bottom: 0; } #hero-slider .slides .flex-caption h3 { font: 18px/1.9 "Heebo", sans-serif; color: rgba(255, 255, 255, 0.7); text-shadow: 0 1px 15px rgba(0, 0, 0, 0.7); width: 70%; margin-top: 24px; /* for css animations */ filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; zoom: 1; } #hero-slider .slides .flex-caption h1 span, #hero-slider .slides .flex-caption h1 a { display: inline-block; border-bottom: 1px solid rgba(255, 255, 255, 0.3); } /* for oldIE - IE9 */ .oldie #hero-slider .slides .flex-caption h1 { filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; zoom: 1; } .oldie #hero-slider .slides .flex-caption h3 { filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; zoom: 1; } /* media queries: /* #hero / .hero-contert / #hero-slider */ @media only screen and (max-width:1200px) { #hero-slider .slides .flex-caption h1 { font: 44px/1.3 "Montserrat", sans-serif; } } @media only screen and (max-width:1024px) { .hero-content { padding-bottom: 90px; } #hero-slider { text-align: center; margin: 0; } #hero-slider .slides .flex-caption { margin: 0 auto; max-width: 550px; width: 90%; } #hero-slider .slides .flex-caption h1 { font: 43px/1.3 "Montserrat", sans-serif; } #hero-slider .slides .flex-caption h1::after { margin-left: -50px; left: 50%; } #hero-slider .slides .flex-caption h3 { font: 16px/1.9 "Heebo", sans-serif; width: 80%; margin-left: auto; margin-right: auto; } } @media only screen and (max-width:768px) { #hero { min-height: auto; } .hero-content { padding-bottom: 72px; } #hero-slider { margin: 0 } #hero-slider .slides .flex-caption { margin: 0 40px 0; width: auto; } #hero-slider .slides .flex-caption h1 { font: 41px/1.3 "Montserrat", sans-serif; } #hero-slider .slides .flex-caption h3 { font: 16px/1.9 "Heebo", sans-serif; width: 85%; } } @media only screen and (max-width:600px) { .hero-content { padding-bottom: 72px; } #hero-slider { margin: 0; } #hero-slider .slides .flex-caption { margin: 0 35px 0; width: auto; } #hero-slider .slides .flex-caption h1 { font: 39px/1.3 "Montserrat", sans-serif; } #hero-slider .slides .flex-caption h3 { font: 15px/1.9 "Heebo", sans-serif; width: 90%; } } @media only screen and (max-width:480px) { .hero-content { padding-bottom: 72px; } #hero-slider { margin: 0px 0 0px; } #hero-slider .slides .flex-caption { margin: 0 20px 0; width: auto; } #hero-slider .slides .flex-caption h1 { font: 36px/1.3 "Montserrat", sans-serif; } #hero-slider .slides .flex-caption h3 { width: auto; } } @media only screen and (max-width:400px) { .hero-content { padding-bottom: 54px; } #hero-slider { margin: 0px 0 0px; } #hero-slider .slides .flex-caption { margin: 0; } } /* control nav */ #hero .flex-control-nav { text-align: left; display: block; position: absolute; bottom: 150px; left: 43%; z-index: 500; margin-left: -21.5%; } #hero .flex-control-nav li { margin: 0 6px; display: inline-block; zoom: 1; } #hero .flex-control-paging li a { width: 12px; height: 12px; display: block; cursor: pointer; text-indent: -9999px; border-radius: 50%; background: #FFFFFF; } #hero .flex-control-paging li a:hover { background: #c8c8c8; } #hero .flex-control-paging li a.flex-active { background: #825A31; cursor: default; } /* media queries - .flex-control-nav */ @media only screen and (max-width:1024px) { #hero .flex-control-nav { text-align: center; left: 0; } } /* more link */ #hero #more { position: absolute; left: 50%; bottom: -27px; margin-left: 250px; } #hero #more a { font: 12px/54px "Montserrat", sans-serif; text-align: center; text-transform: uppercase; letter-spacing: 2px; text-decoration: none; display: block; height: 54px; width: 200px; border-radius: 3px; background: #e64e04; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); color: #FFFFFF; -moz-transition: all 0.4s ease-on-out; -o-transition: all 0.4s ease-on-out; -webkit-transition: all 0.4s ease-on-out; -ms-transition: all 0.4s ease-on-out; transition: all 0.4s ease-on-out; } #hero #more a:hover { background: #825A31; color: #000000; } #hero #more a i { margin-left: 6px; position: relative; right: -5px; } /* media queries - #more */ @media only screen and (max-width:1024px) { #hero #more { margin-left: -100px; } } /** /* 08. =portfolio styles /* =================================================================== */ #portfolio { background: #111417; padding-top: 120px; border-bottom: 1px solid #15191d; } #portfolio .row.items { max-width: 1260px; margin-top: 24px; } /* media queries - portfolio */ @media only screen and (max-width:1300px) { #portfolio .row.items { width: 100%; padding: 0; } #portfolio .row.items .columns { padding: 0; } } /* portfolio content */ #portfolio-wrapper { margin-top: 36px; } #portfolio-wrapper:before, #portfolio-wrapper:after { content: ""; display: table; } #portfolio-wrapper:after { clear: both; } #portfolio-wrapper .bgrid { padding: 0; } .folio-item .item-wrap { background: #111417; overflow: hidden; position: relative; } .folio-item .item-wrap a { display: block; cursor: pointer; position: relative; } /* overlay */ .folio-item .item-wrap .overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; zoom: 1; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; -webkit-transition: opacity 0.5s ease-in-out; -ms-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .folio-item .item-wrap .link-icon { display: block; height: 30px; width: 30px; margin-left: -15px; margin-top: -15px; font-size: 14px; line-height: 30px; text-align: center; color: #FFFFFF; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; zoom: 1; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; -webkit-transition: opacity 0.5s ease-in-out; -ms-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; position: absolute; top: 50%; left: 50%; } .folio-item .item-wrap img { vertical-align: bottom; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .folio-item .portfolio-item-meta { width: 100%; text-align: center; position: absolute; top: 20%; left: -100px; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; zoom: 1; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .folio-item .portfolio-item-meta h5 { font: 14px/21px "Montserrat", sans-serif; letter-spacing: 2px; color: white; margin: 0; } .folio-item .portfolio-item-meta p { font: 14px/18px "raleway-semibold", sans-serif; color: #8A8A8A; margin: 0; } /* on hover */ .folio-item:hover .overlay, .folio-item:hover .link-icon, .folio-item:hover .portfolio-item-meta { filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; zoom: 1; } .folio-item:hover .portfolio-item-meta { left: 0; } .folio-item:hover .item-wrap img { -moz-transform: scale(1.1); -o-transform: scale(1.1); -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } /* media queries - .portfolio-item-meta */ @media only screen and (max-width:500px) { .folio-item .portfolio-item-meta { top: 16%; } .folio-item .portfolio-item-meta h5 { font: 13px/21px "Montserrat", sans-serif; letter-spacing: 1px; } .folio-item .portfolio-item-meta p { font: 13px/18px "raleway-semibold", sans-serif; } } @media only screen and (max-width:400px) { .folio-item .portfolio-item-meta { top: 12%; } .folio-item .portfolio-item-meta h5 { font: 11px/18px "Montserrat", sans-serif; letter-spacing: 1px; } .folio-item .portfolio-item-meta p { font: 11px/16px "raleway-semibold", sans-serif; } } /* Popup Modal /* ------------------------------------------------------------------ */ .popup-modal { max-width: 550px; background: #FFFFFF; position: relative; margin: 0 auto; } .popup-modal .media { position: relative; } .popup-modal img { vertical-align: bottom; } /* description */ .popup-modal .description-box { padding: 6px 36px 30px; } .popup-modal .description-box h4 { font: 15px/24px "Montserrat", sans-serif; color: #000000; } .popup-modal .description-box p { font: 14px/24px "merriweather-regular", serif; color: #A1A1A1; margin-bottom: 12px; } /* categories */ .popup-modal .categories { font: 11px/18px "Montserrat", sans-serif; text-transform: uppercase; letter-spacing: 1px; display: block; text-align: left; color: rgba(0, 0, 0, 0.5); } /* link box */ .popup-modal .link-box { width: 100%; overflow: hidden; background: #000000; } .popup-modal .link-box a { font: 12px/60px "Montserrat", sans-serif; color: #FFFFFF; text-transform: uppercase; letter-spacing: 3px; cursor: pointer; display: block; text-align: center; float: left; width: 50%; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .popup-modal .link-box a:first-child { border-right: 1px solid rgba(200, 200, 200, 0.1); } .popup-modal .link-box a:hover { background: #825A31; color: #000000; border: none; } /* media queries - popup-modal */ @media only screen and (max-width:600px) { .popup-modal { width: auto; margin: 0 20px; } } /* transition effect for modal popup /* ------------------------------------------------------------------ */ /* overlay at start */ .mfp-fade.mfp-bg { filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; zoom: 1; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } /* overlay animate in */ .mfp-fade.mfp-bg.mfp-ready { filter: alpha(opacity=80); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; opacity: 0.8; zoom: 1; } /* overlay animate out */ .mfp-fade.mfp-bg.mfp-removing { filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; zoom: 1; } /* content at start */ .mfp-fade.mfp-wrap .mfp-content { filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; zoom: 1; -moz-transform: translateY(-100%); -o-transform: translateY(-100%); -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } /* content animate in */ .mfp-fade.mfp-wrap.mfp-ready .mfp-content { filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; zoom: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } /* content animate out */ .mfp-fade.mfp-wrap.mfp-removing .mfp-content { filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; zoom: 1; -moz-transform: translateY(-100%); -o-transform: translateY(-100%); -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } /* /* 09. =services /* =================================================================== */ .service-list { margin: 18px -2px 0; } .service-list .bgrid { padding: 0 22px 6px; } .service-list .bgrid { -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; border-radius: 5px; } .service-list .bgrid:hover { background: rgba(0, 0, 0, 0.1); } @media only screen and (max-width:600px) { .service-list .bgrid:hover { background: inherit; } } /* media queries: /* #services / .service-list */ @media only screen and (max-width:1024px) { .service-list { margin: 18px 0 0; } .service-list .bgrid { padding: 0 18px 6px; } } @media only screen and (max-width:768px) { .service-list .bgrid { padding: 0 15px 6px; } } @media only screen and (max-width:600px) { .service-list .bgrid { padding: 0 10px 6px; } } @media only screen and (max-width:400px) { .service-list .bgrid { padding: 0 0 6px; } } /* /* 10. =about /* =================================================================== */ /* process -------------------------------------------------------------- */ .process { margin-top: 12px; } .process .bgrid { -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; border-radius: 5px; } .process .bgrid:hover { background: rgba(0, 0, 0, 0.1); } @media only screen and (max-width:600px) { .process .bgrid:hover { background: inherit; } } /* team members -------------------------------------------------------------- */ #about .team { margin-top: 30px; } #team-wrapper { margin: 0 auto; } #team-wrapper .member { margin-bottom: 24px; margin-top: 12px; } #team-wrapper .member h3 { line-height: 24px; margin-bottom: 0; } #team-wrapper .member span { position: relative; font-size: 13px; line-height: 15px; color: #FFFFFF; } #team-wrapper .member-pic { position: relative; line-height: 1; overflow: hidden; background: #FFFFFF; } #team-wrapper .member-pic img { vertical-align: bottom; } #team-wrapper .mask { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: rgba(253, 197, 1, 0.5); filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; zoom: 1; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; -webkit-transition: opacity 0.5s ease-in-out; -ms-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } #team-wrapper .member:hover .mask { filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; zoom: 1; } #team-wrapper .member-social { font-size: 16px; font-weight: normal; line-height: 18px; color: #969696; margin: 0; padding: 0; } #team-wrapper .member-social li { display: inline-block; margin-right: 15px; } #team-wrapper .member-social li a { color: #FFFFFF; } /* media queries: /* .team / #team-wrapper */ @media only screen and (max-width:1024px) { #team-wrapper .member-social li { margin-right: 10px; } } @media only screen and (max-width:768px) { #team-wrapper .member p { font-size: 14px; line-height: 27px; } } @media only screen and (max-width:600px) { #team-wrapper .member-pic { width: 80px; height: 80px; float: left; margin-right: 30px; position: relative; top: 6px; } #team-wrapper .member-pic .mask { display: none; } #team-wrapper .member-name + p { clear: both; margin-top: 30px; } #team-wrapper .member p { font-size: 16px; line-height: 30px; } } /* Call To Action ------------------------------------------------------------------ */ #call-to-action { margin-top: 30px; padding-top: 36px; text-align: center; } #call-to-action h2, #call-to-action p { margin-left: auto; margin-right: auto; width: 80%; } #call-to-action p { font: 20px/36px "Heebo", serif; color: #707273; width: 75%; } #call-to-action .section-ads { padding-top: 36px; border-top: 1px dotted rgba(150, 150, 150, 0.1); } #call-to-action h2 { font: 30px/36px "Montserrat", sans-serif; color: #FFFFFF; letter-spacing: -0.5px; margin-bottom: 24px; } #call-to-action h2 span { color: #825A31; } #call-to-action h2 a, #call-to-action span { color: #FFFFFF; } #call-to-action h2 span { color: #ffd900; } #call-to-action .action a { font: 15px/60px "Montserrat", sans-serif; color: #FFFFFF; text-transform: uppercase; letter-spacing: 2px; height: 60px; display: block; padding: 0 30px; max-width: 400px; width: 100%; background: #e64e04; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); margin: 24px auto 0; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } #call-to-action .action a:hover { background: #825A31; color: #000000; } /* media queries - #call-to-action */ @media only screen and (max-width:600px) { #call-to-action h2, #call-to-action p { width: 85%; } #call-to-action h2 { font: 28px/36px "Montserrat", sans-serif; } #call-to-action p { font: 18px/33px "Heebo", serif; width: 80%; } } @media only screen and (max-width:400px) { #call-to-action h2, #call-to-action p { width: auto; } #call-to-action h2 { font: 26px/36px "Montserrat", sans-serif; } #call-to-action p { font: 16px/30px "Heebo", serif; } } /** /* 11. =testimonials /* =================================================================== */ #testimonials { background: #e4b101; padding-top: 90px; padding-bottom: 112px; position: relative; min-height: 198px; width: 100%; overflow: hidden; text-align: center; } #testimonials .flex-container { width: 80%; max-width: 850px; margin: 0 auto; } #testimonial-slider { margin: 0 0 30px 0px; padding-left: 0; position: relative; } #testimonial-slider p { font: 27px/1.9 "merriweather-regular", sans-serif; color: #FFFFFF; padding: 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); } #testimonial-slider .testimonial-author { display: block; font: 16px/24px "Montserrat", sans-serif; letter-spacing: 2px; text-transform: uppercase; margin-top: 24px; color: #FFFFFF; } #testimonial-slider .testimonial-author img { width: 72px; height: 72px; margin-right: 10px; display: inline-block; border-radius: 50%; border: 6px solid white; vertical-align: middle; } #testimonial-slider .testimonial-author .author-info { display: inline-block; vertical-align: middle; text-align: left; } #testimonial-slider .testimonial-author .author-info span { display: block; font: 14px/18px "Montserrat", sans-serif; letter-spacing: 0; text-transform: none; color: rgba(0, 0, 0, 0.6); } /* control nav */ #testimonials .flex-control-nav { width: 100%; text-align: center; display: block; position: absolute; bottom: -72px; } #testimonials .flex-control-nav li { margin: 0 6px; display: inline-block; zoom: 1; } #testimonials .flex-control-paging li a { width: 12px; height: 12px; display: block; background: white; cursor: pointer; text-indent: -9999px; border-radius: 20px; } #testimonials .flex-control-paging li a:hover { background: #CCC; background: rgba(0, 0, 0, 0.5); } #testimonials .flex-control-paging li a.flex-active { background: #fff; background: black; cursor: default; } /* media queries: /* #testimonials / #testimonial-slider */ @media only screen and (max-width:1024px) { #testimonials .flex-container { max-width: 700px; } #testimonial-slider p { font: 25px/1.9 "merriweather-regular", sans-serif; } } @media only screen and (max-width:768px) { #testimonials .flex-container { width: 90%; } #testimonial-slider p { font: 22px/1.9 "merriweather-regular", sans-serif; } } @media only screen and (max-width:600px) { #testimonials .flex-container { width: 95%; } #testimonial-slider p { font: 20px/1.9 "merriweather-regular", sans-serif; } #testimonial-slider .testimonial-author { font: 14px/24px "Montserrat" sans-serif; } #testimonial-slider .testimonial-author img { width: 60px; height: 60px; border: 6px solid white; } #testimonial-slider .testimonial-author .author-info span { font: 12px/18px "Montserrat", sans-serif; } } @media only screen and (max-width:400px) { #testimonials .flex-container { width: auto; } #testimonial-slider p { font: 18px/1.9 "merriweather-regular", sans-serif; } } /** /* 12. =contact /* =================================================================== */ #contact { padding-top: 120px; padding-bottom: 138px; overflow: hidden; border-bottom: 1px solid #15191d; background:url(../images/contact.jpg) 0 0 no-repeat; background-size: cover; width: 100%; background-color: #825A31; background-blend-mode: multiply; } #contact h1 {text-align: left;; color: #fff; font-weight: 400; font-size: 30px; font-family: "Montserrat", sans-serif; letter-spacing: 1px; margin-bottom: 25px; position: relative; padding-bottom: 10px;} /*#contact h1:after {position: absolute; content: ""; width: 80px; bottom: 0; background: #fff; height: 2px; left: 0;}*/ #contact h3 { font: 18px/36px "Montserrat", sans-serif; color: #825A31; padding: 0; margin-bottom: 6px; font-weight: 700; } #contact .left { padding-right: 35px; } #contact .right { padding-left: 35px; position: relative; top: -6px; } /* media queries: /* #contact / .left .right */ @media only screen and (max-width:1024px) { #contact .left { padding-right: 30px; } #contact .right { padding-left: 30px; } } @media only screen and (max-width:768px) { #contact .left, #contact .right { width: 100%; padding: 0 15px; } #contact .right p.lead { font: 18px/36px "Heebo", serif; } } @media only screen and (max-width:600px) { #contact .left, #contact .right { padding: 0 10px; } #contact .right p.lead { font: 17px/33px "Heebo", serif; } } @media only screen and (max-width:400px) { #contact .left, #contact .right { padding: 0; } } /* contact form */ #contact form { margin-top: 12px; margin-bottom: 30px; } #contact form div { position: relative; } #contact form div:before, #contact form div:after { content: ""; display: table; } #contact form div:after { clear: both; } #contact form div label { font: 11px/24px "Montserrat", sans-serif; position: absolute; bottom: 3px; right: 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; padding: 0 20px; color: #e64e04; } input[type="text"], input[type="password"], input[type="email"], #contact textarea, #contact select { margin-bottom: 45px; width: 100%; } #contact button.submitform { font: 15px/30px "Montserrat", sans-serif; text-transform: uppercase; letter-spacing: 2px; height: 60px; display: inline-block; padding: 15px 30px; font-weight: 700; width: 100%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); color: #000; } #message-warning, #message-success { display: none; background: #0F1215; border-radius: 3px; padding: 24px; margin-bottom: 36px; width: 100%; font-size: 20px; line-height: 40px; } #message-warning { color: #e64e04; } #message-success { color: #FFFFFF; } #message-warning i, #message-success i { margin-right: 10px; } /* form loader */ #submit-loader { display: none; position: relative; left: 0; top: 18px; width: 100%; text-align: center; } #submit-loader .text-loader { display: none; font: 14px/30px "Montserrat", sans-serif; color: #FFFFFF; letter-spacing: 3px; text-transform: uppercase; } .oldie #submit-loader .s-loader { display: none; } .oldie #submit-loader .text-loader { display: block; } /* loader animation ------------------------------------------- */ .s-loader { margin: 12px auto 30px; width: 70px; text-align: center; -moz-transform: translateX(2.5px); -o-transform: translateX(2.5px); -webkit-transform: translateX(2.5px); -ms-transform: translateX(2.5px); transform: translateX(2.5px); } .s-loader > div { width: 12px; height: 12px; background-color: #FFFFFF; border-radius: 100%; display: inline-block; margin-right: 5px; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; } .s-loader .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .s-loader .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% { -moz-transform: scale(0); -o-transform: scale(0); -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } 40% { -moz-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @keyframes sk-bouncedelay { 0%, 80%, 100% { -moz-transform: scale(0); -o-transform: scale(0); -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } 40% { -moz-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } /** /* 13. =footer /* =================================================================== */ footer { padding-top: 60px; padding-bottom: 24px; position: relative; color: rgba(255, 255, 255, 0.15); background: #f5f5f5; } footer .content { margin-bottom: 12px; } footer a, footer a:visited { color: #a3a4a6; } footer a:hover, footer a:focus { color: #825A31; } footer hr { margin-left: auto; margin-right: auto; margin-bottom: 30px; max-width: 400px; width: 80%; border-top: 1px solid rgba(150, 150, 150, 0.1); } footer .info { width: 90%; max-width: 600px; margin: 42px auto 36px; text-align: center; clear: both; } footer .footer-logo { width: 100px; height: 23px; background: url("../images/logoW@2x.png") no-repeat center; background-size: 100px 23px; margin: 0 auto 21px; display: block; filter: alpha(opacity=10); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; opacity: 1; zoom: 1; } /* copyright */ footer .copyright { clear: both; margin: 15px 0; padding: 24px 18px 6px 18px; font: 14px/24px "Heebo", sans-serif; letter-spacing: .5px; text-align: center; color: #606062; } footer .copyright li { display: inline-block; padding: 0 5px; } /* social links */ footer .social-links { margin: 30px auto 42px auto; padding: 0; font-size: 38px; text-align: center; } footer .social-links li { display: inline-block; margin: 0; padding: 0; margin-left: 32px; } footer .social-links li a { color: rgba(0, 0, 0, 0.4); } footer .social-links li a:hover { color: rgba(130, 90, 49, 1); } footer .social-links li:first-child { margin-left: 0; } footer p {color: #606062;} /* media queries - .social-links */ @media only screen and (max-width:600px) { footer .social-links { font-size: 32px; } footer .social-links li { margin-left: 18px; } } @media only screen and (max-width:450px) { footer .social-links { font-size: 28px; } footer .social-links li { margin-left: 14px; } } @media only screen and (max-width:400px) { footer .social-links { font-size: 25px; } footer .social-links li { margin-left: 12px; } } @media only screen and (max-width:350px) { footer .social-links { font-size: 22px; } footer .social-links li { margin-left: 10px; } } /* go to top button ------------------------------------------------------------------ */ #go-top { position: absolute; top: -21px; left: 50%; z-index: 600; } #go-top a { text-decoration: none; border: 0 none; display: block; height: 54px; width: 200px; margin-left: -100px; background: #636363; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); color: #FFFFFF; text-align: center; border-radius: 3px; font: 12px/54px "Montserrat", sans-serif; text-transform: uppercase; letter-spacing: 2px; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #go-top a:hover { background: #825A31; color: #fff; } #go-top a i { margin-left: 6px; position: relative; right: -5px; } .service-list .morelink {font-size: 14px; display: block; color: #A9ABAE;} .borardofadv {margin:0px;} .borardofadv strong {color: #fff; font-size: 18px; font-weight: bold; display: block;; border-bottom: solid 2px #d0d0d0; padding-bottom: 5px; margin-bottom: 5px;} #about h3.open-close {background-color: rgba(173,110,28,0.5); margin: 0 0 15px 0; padding:10px 20px; position: relative; cursor: pointer;} #about h3.open-close:after {font-family: 'FontAwesome'; content:"\f067"; position: absolute; right: 20px; top: 8px;} #about h3.open-close.current:after {font-family: 'FontAwesome'; content:"\f068"; position: absolute; right: 20px; top: 8px; color: #fff;} #about h3.open-close a {color: #b8b8b8;} #about h3.open-close.current {background-color: #ad6e1c;} #about h3.open-close.current a {color: #fff;} #about h3.open-close.current a:hover {color: #fff;} .flrightbox {float: right; width: 50%;} .flleftbox {float: left; width: 50%;} .orignsection {height: 100vh; background: #fff; height: calc(100vh - 0px);} .orightcontent {display: table-cell; vertical-align: middle; text-align: center; width: 100%;} .orignsection .bgrid, .orignsection .columns {padding: 0px;} .orignleft {height: 100vh; display: table; background:url(../images/origin.jpg) 0 0 no-repeat; background-size: cover; width: 100%;} .orignright {height: 100vh; display: table; background:url(../images/texture.png) 100% 100% no-repeat; width: 100%;} .origntext1 {text-align: center;; color: #fff; font-size: 16px; font-family: "Montserrat", sans-serif; letter-spacing: 1px; margin-bottom: 10px;} .origntext2 {text-align: center;; color: #fff; font-size: 30px; font-family: "Montserrat", sans-serif; letter-spacing: 1px; margin-bottom: 10px; font-weight: 700;} .origntext3 {text-align: center;; color: #fff; font-size: 16px; font-style: italic;} .orghncontnetright {text-align: left; padding: 0 300px 0 100px;} .orghncontnetright h3 {color: #825A31; font-size: 30px; margin: 0 0 20px 0; font-weight: 400;} .orghncontnetright h2 {color: #825A31; font-size: 40px; margin: 0 0 30px 0; font-weight: 400;} .orghncontnetright p {color: #606062;} .aboutsection {height: 100vh; background: #fff; height: calc(100vh - 0px);} .aboutcontent {display: table-cell; vertical-align: middle; text-align: center; width: 100%;} .aboutsection .bgrid, .aboutsection .columns {padding: 0px;} .aboutleft {height: 100vh; display: table; background:url(../images/about-yestu.jpg) 0 0 no-repeat; background-size: cover; width: 100%;} .aboutright {height: 100vh; display: table; background:url(../images/texture-left.png) 0 100% no-repeat; width: 100%;} .abouttext1 {text-align: center;; color: #fff; font-size: 16px; font-family: "Montserrat", sans-serif; letter-spacing: 1px; margin-bottom: 10px;} .abouttext2 {text-align: center;; color: #fff; font-size: 30px; font-family: "Montserrat", sans-serif; letter-spacing: 1px; margin-bottom: 10px; font-weight: 700;} .abouttext3 {text-align: center;; color: #fff; font-size: 16px; font-style: italic;} .aboutcontnetright {text-align: left; padding: 0 100px 0 250px;} .aboutcontnetright h3 {color: #825A31; font-size: 30px; margin: 0 0 20px 0; font-weight: 400;} .aboutcontnetright h2 {color: #825A31; font-size: 40px; margin: 0 0 30px 0; font-weight: 400;} .aboutcontnetright p {color: #606062;} .servicessection {height: 100vh; background: #fff;} .servicescontent {display: table-cell; vertical-align: middle; text-align: center; width: 100%;} .servicessection .bgrid, .servicessection .columns {padding: 0px;} .servicesleft {height: 100vh; display: table; background:url(../images/bg2.jpg) 0 0 no-repeat; background-size: cover; width: 100%;} .servicesright {height: 100vh; display: table; background:#fff url(../images/texture.png) 100% 100% no-repeat; width: 100%;} .servicestitle {text-align: center;; color: #fff; font-size: 30px; font-family: "Montserrat", sans-serif; letter-spacing: 1px; margin-bottom: 25px; position: relative; padding-bottom: 10px; font-weight: 400;} .servicestitle:after {position: absolute; content: ""; width: 100px; margin: 0 auto; bottom: 0; background: #fff; height: 2px; left: 50%; margin-left: -50px; } .servicesblog1 {text-align: center;; color: #fff; font-size: 20px; font-family: "Montserrat", sans-serif; letter-spacing: 1px; margin-bottom: 20px;} .servicescontnetright {text-align: left; padding:0 200px 0 100px; position: relative;} .servicescontnetright h3 {color: #825A31; font-size: 24px; margin:0 0 10px 0; font-weight: 400;} .servicesrelative {position: relative; height: 90vh; padding-top: 120px;} .servicescontnetright p {color: #606062; margin:4px 0; font-size: 14px; position: relative; padding-left: 5px;} .servicescontnetright p:before {position: relative; width: 10px; display: inline-block; left:0; top: -1px; content: "\f0da"; font-family: 'FontAwesome'; font-size: 14px; color: #b5b5b5;} .servicesboxset {border-bottom: solid 1px #eee; padding-bottom: 15px; margin-bottom: 15px;} .servicescontnetright .flex-direction-nav {position: absolute; top: 30px; right: 0px; } .servicescontnetright .flex-direction-nav li {display: inline-block; margin: 0 10px;} .servicescontnetright .flex-direction-nav .flex-prev {color: #cfcfcf; display: block; position: relative; padding: 0 0 0 20px; font-size: 0px;} .servicescontnetright .flex-direction-nav .flex-prev:before {color: #cfcfcf; content: "\f104"; font-family: 'FontAwesome'; position: absolute;; top: 0; left:0; font-size: 40px;} .servicescontnetright .flex-direction-nav .flex-next {color: #cfcfcf; display: block; position: relative; padding: 0 0 0 20px; font-size: 0px;} .servicescontnetright .flex-direction-nav .flex-next:before {color: #cfcfcf; content: "\f105"; font-family: 'FontAwesome'; position: absolute;; top: 0; left:0; font-size: 40px;} .servicescontnetright .flex-direction-nav .flex-next:hover:before, .servicescontnetright .flex-direction-nav .flex-prev:hover:before {color: #cba67f;} .servicescontnetright .flex-control-nav {margin:0; text-align: left; position: absolute; bottom: 0; left: 0;} .servicescontnetright .flex-control-nav li {margin:0 5px; display: inline-block;} .servicescontnetright .flex-control-nav li a {font-size: 0px; width: 10px; height: 10px; display: block; background: #e9e9e9; cursor: pointer; border-radius: 50%;} .servicescontnetright .flex-control-nav li a.flex-active {background: #cba67f; } .flexslider .slides > li .servicesboxset:last-child {border-bottom: 0px;} .whowearesection {height: 100vh; background: #fff;} .whowearecontent {display: table-cell; vertical-align: middle; text-align: center; width: 100%;} .whowearesection .bgrid, .whowearesection .columns {padding: 0px;} .whoweareleft {height: 100vh; display: table; background:url(../images/technical-advisory.jpg) 0 0 no-repeat; background-size: cover; width: 100%;} .whoweareright {height: 100vh; display: table; vertical-align: top; background:url(../images/texture-left.png) 0 100% no-repeat; width: 100%;} .whowearetitle {text-align: center;; color: #fff; font-size: 30px; font-weight: 400; font-family: "Montserrat", sans-serif; letter-spacing: 1px; margin-bottom: 25px; position: relative; padding-bottom: 10px;} .whowearetitle:after {position: absolute; content: ""; width: 80px; bottom: 0; background: #fff; height: 2px; left: 50%; margin-left: -40px;} .whowearetextbox {text-align: center; width: 100%;} .whowearecontnetright {text-align: left; padding: 0 100px 0 250px; color: #606062;} .whowearecontnetright h3 {color: #825A31; font-size: 30px; margin: 0 0 20px 0; font-weight: 400;} .whowearecontnetright h2 {color: #825A31; font-size: 40px; margin: 0 0 30px 0; font-weight: 400;} .whowearecontnetright p {color: #606062;} .advisoryboardbox {margin:0; padding:60px 0 0 0; height: 65vh; position: relative;} .advisorytextbox {height: 20vh; padding-top: 100px; display: table-header-group;} .advisoryboardbox h3 {font-size: 24px;} .advisoryscrollbox {max-height: 350px; min-height: 350px; height: 350px; max-width: 100% } .nicescroll-cursors {width: 100%!important;} .advibox {margin:0 0 25px 0; padding:0 0 25px 0; border-bottom: solid 2px #eee; line-height: 24px; width: 90%;} .adviname {font-weight: 700; margin: 0 0 0px 0; font-size: 16px;} .advidesig {font-size: 12px; margin:0 0 10px 0; color: #727376; line-height: 18px;} .advidetail {margin:0px; font-size: 14px;} .flexslider .slides > li .advibox:last-child {border-bottom: 0px;} .whowearecontnetright .flex-direction-nav {position: absolute; top: 10px; right: 0px; } .whowearecontnetright .flex-direction-nav li {display: inline-block; margin: 0 10px;} .whowearecontnetright .flex-direction-nav .flex-prev {color: #cfcfcf; display: block; position: relative; padding: 0 0 0 20px; font-size: 0px;} .whowearecontnetright .flex-direction-nav .flex-prev:before {color: #cfcfcf; content: "\f104"; font-family: 'FontAwesome'; position: absolute;; top: 0; left:0; font-size: 40px;} .whowearecontnetright .flex-direction-nav .flex-next {color: #cfcfcf; display: block; position: relative; padding: 0 0 0 20px; font-size: 0px;} .whowearecontnetright .flex-direction-nav .flex-next:before {color: #cfcfcf; content: "\f105"; font-family: 'FontAwesome'; position: absolute;; top: 0; left:0; font-size: 40px;} .whowearecontnetright .flex-direction-nav .flex-next:hover:before, .whowearecontnetright .flex-direction-nav .flex-prev:hover:before {color: #cba67f;} .whowearecontnetright .flex-control-nav {margin:0; text-align: center; position: absolute; bottom: 0; left: 0;} .whowearecontnetright .flex-control-nav li {margin:0 5px; display: inline-block;} .whowearecontnetright .flex-control-nav li a {font-size: 0px; width: 10px; height: 10px; display: block; background: #e9e9e9; cursor: pointer; border-radius: 50%;} .whowearecontnetright .flex-control-nav li a.flex-active {background: #cba67f;} .clientsection {height: 100vh; background: #fff; height: calc(100vh - 0px);} .clientcontent {display: table-cell; vertical-align: middle; text-align: center; width: 100%;} .clientsection .bgrid, .clientsection .columns {padding: 0px;} .clientleft {height: 100vh; display: table; background:url(../images/client.jpg) 0 0 no-repeat; background-size: cover; width: 100%;} .clientright {height: 100vh; display: table; background:url(../images/texture.png) 100% 100% no-repeat; width: 100%;} .clienttext1 {text-align: center;; color: #fff; font-size: 16px; font-family: "Montserrat", sans-serif; letter-spacing: 1px; margin-bottom: 10px;} .clienttext2 {text-align: center;; color: #fff; font-size: 30px; font-family: "Montserrat", sans-serif; letter-spacing: 1px; margin-bottom: 10px; font-weight: 700;} .clienttext3 {text-align: center;; color: #fff; font-size: 16px; font-style: italic;} .clientcontnetright {text-align: left; padding: 0 100px 0 100px;} .clientcontnetright h3 {color: #825A31; font-size: 30px; margin: 0 0 20px 0; font-weight: 400;} .clientcontnetright h2 {color: #825A31; font-size: 40px; margin: 0 0 30px 0; font-weight: 400;} .mailto a {font-size: 20px; color: #fff;} .mailto a:hover {font-size: 20px; color: #cbcbcb; text-decoration: underline;} .mapbuttonbox {padding:10px 0 15px 0;} .mapbuttonbox .mapbutton {padding: 12px 22px; border-radius: 3px; background: rgba(255,255,255,0.2); color: #f1f1f1; letter-spacing: 2px; font: 13px/30px "Montserrat", sans-serif; font-weight: 700;} .mapbuttonbox .mapbutton:hover, .mapbuttonbox .mapbutton:focus {background: #825A31; color: #fff;} header #nav-wrap .menu-icon {background: #fff;} header.opaque #nav-wrap .menu-icon {background: #825A31;} #contact p {color: #fff;} @media (min-width: 1601px) and (max-width: 1800px) { #hero-slider .slides .flex-caption h1 {font-size: 40px!important;} .orghncontnetright {padding: 0 150px 0 100px;} .orghncontnetright h2 {font-size: 36px;} .servicescontnetright {padding: 0 150px 0 100px;} .servicescontnetright h3 {font-size: 20px;} .servicescontnetright p {margin: 10px 0; font-size: 14px; line-height: 24px;} .servicesboxset {padding-bottom: 5px;} .servicescontnetright .flex-direction-nav {top:10px;} .whowearecontnetright {padding: 0 150px 0 100px;} .aboutcontnetright {padding: 0 150px 0 100px;} .aboutcontnetright h2 {font-size: 36px;} .clientcontnetright {padding: 0 150px 0 100px;} .clientcontnetright h3 {font-size: 24px;} .advisorytextbox {padding-top: 0px;} .advisoryscrollbox {min-height: 300px; max-height: 300px;} .whowearecontnetright h3 {font-size: 24px;} .servicesrelative {min-height: 90vh; padding-top: 80px;} } @media (min-width: 1024px) and (max-width: 1600px) { #hero-slider .slides .flex-caption h1 {font-size: 40px!important;} .orghncontnetright {padding: 0 100px 0 50px;} .orghncontnetright h2 {font-size: 30px;} .servicescontnetright {padding: 0 50px 0 100px;} .servicescontnetright h3 {font-size: 20px;} .servicescontnetright p {margin: 4px 0; font-size: 14px; line-height: 22px;} .servicesboxset {padding-bottom: 5px;} .servicescontnetright .flex-direction-nav {top:70px;} .whowearecontnetright {padding: 0 100px 0 50px;} .advisorytextbox {} .advisoryscrollbox {max-height: 250px; min-height: 250px; height: 250px; max-width: 100% } .whowearecontnetright h3 {font-size: 24px;} .servicesrelative {min-height: 100vh; padding-top: 90px;} .aboutcontnetright {padding: 0 50px 0 100px;} .aboutcontnetright h2 {font-size: 30px;} .clientcontnetright {padding: 0px 100px 0 50px;} .clientcontnetright h3 {font-size: 24px;} .clientcontnetright img {width: 100%;} .advisoryboardbox {height: 73vh;} .servicescontnetright .flex-direction-nav {position: absolute; top: 20px; right: 0px; } .servicesscroll {height: 430px;} .servicesrelative {min-height: inherit; height: 90vh;} } @media (min-width: 801px) and (max-width: 1100px) { body {background: #fff;} .orignright {background-size: 150px;} .orghncontnetright {padding: 20px;} .orghncontnetright h3 {font-size: 18px; margin-bottom: 0;} .orghncontnetright h2 {font-size: 24px; margin-bottom: 10px;} .orghncontnetright p {font-size: 14px; line-height: 22px;} .servicestitle {font-size: 24px;} .servicesblog1 {font-size: 18px;} .servicescontnetright {padding: 20px;} .servicesright {background-size: 150px;} .servicescontnetright h3 {font-size: 18px; line-height: 24px; margin-bottom:0;} .servicescontnetright p {font-size: 14px; line-height: 22px;} .servicesboxset {border-bottom: solid 1px #ccc; padding-bottom: 0px; margin-bottom: 10px;} .whowearetextbox {border-radius: 0px;} .whowearetitle {font-size: 24px; margin-bottom: 10px;} .whowearetextbox p {font-size: 14px; line-height: 22px;} .whoweareright {background-size: 150px;} .whowearecontnetright {padding: 20px;} .aboutcontnetright {padding: 20px;} .aboutcontnetright h2 {font-size: 24px; margin-bottom: 10px;} .clientcontnetright {padding: 20px;} .clientcontnetright h3 {font-size: 24px; margin-bottom: 10px;} .advisorytextbox {padding-top: 20px;} .whowearecontnetright h3 {font-size: 24px; margin-bottom: 10px;} .whowearecontnetright p {font-size: 14px; line-height: 22px;} .whowearecontnetright .advisoryboardbox h3 {font-size: 20px;} #contact {padding-top: 30px;} #contact h1 {font-size: 24px; margin-bottom: 10px;} input[type="text"], input[type="password"], input[type="email"], #contact textarea, #contact select {margin-bottom: 15px;} input[type="text"], input[type="password"], input[type="email"], textarea, select {padding: 10px 10px;} #contact .right p.lead {color: #fff;} #contact h3 {color: #ce9d6a;} footer p {font-size: 14px; line-height: 22px;} } @media (min-width: 250px) and (max-width: 800px) { body {background: #fff; overflow-x: hidden;} header { background: rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } header .logo a {background-size: 90px 20px; background-position: left;} header.opaque .logo a {background-size: 90px 20px; background-position: left;} .flleftbox, .flrightbox {width: 100%; display: block; clear: both;} .orignright {background-size: 150px;} .orghncontnetright {padding: 50px 20px 35px;} .orghncontnetright h3 {font-size: 18px; margin-bottom: 0;} .orghncontnetright h2 {font-size: 24px; margin-bottom: 10px;} .orghncontnetright p {font-size: 14px; line-height: 22px;} .servicestitle {font-size: 24px;} .servicesblog1 {font-size: 18px;} .servicescontnetright {padding: 20px;} .servicesright {background-size: 150px;} .servicescontnetright h3 {font-size: 18px; line-height: 24px; margin-bottom:20px;} .servicescontnetright p {font-size: 14px; line-height: 24px; margin: 7px 0;} .servicesboxset {border-bottom: solid 1px #ebebeb; padding-bottom: 20px; margin-bottom: 30px;} .whowearetextbox {border-radius: 0px;} .servicesright .servicescontent {vertical-align: top;} .servicesrelative {padding-top: 50px; vertical-align: top; padding-bottom: 30px;} .servicescontnetright .flex-direction-nav {top:0;} .servicescontnetright .flex-control-nav {bottom: 10px;} .whowearetitle {font-size: 24px; margin-bottom: 10px;} .whowearetextbox p {font-size: 14px; line-height: 22px;} .whoweareright {background-size: 150px;} .whowearecontnetright {padding: 50px 20px 35px;} .aboutcontnetright {padding: 50px 20px 35px;} .aboutcontnetright h2 {font-size: 24px; margin-bottom: 10px;} .clientcontnetright {padding: 50px 20px 35px} .clientcontnetright h3 {font-size: 24px; margin-bottom: 10px;} .advisorytextbox {padding-top: 20px;} .whowearecontnetright h3 {font-size: 24px; margin-bottom: 10px;} .whowearecontnetright p {font-size: 14px; line-height: 22px;} .whowearecontnetright .advisoryboardbox h3 {font-size: 20px;} #contact {padding-top: 50px;} #contact h1 {font-size: 24px; margin-bottom: 10px;} input[type="text"], input[type="password"], input[type="email"], #contact textarea, #contact select {margin-bottom: 15px;} input[type="text"], input[type="password"], input[type="email"], textarea, select {padding: 10px 10px;} #contact {padding-bottom: 50px;} #contact .right p.lead {color: #fff;} #contact h3 {color: #ce9d6a;} footer {padding-top: 20px;} footer p {font-size: 14px; line-height: 22px;} footer .copyright {padding-top: 0px; padding-bottom: 2px;} footer .info {margin: 42px auto 22px;} #hero-slider .slides .flex-caption h1 {font: 30px/1.3 "Montserrat", sans-serif;} #contact button.submitform {font: 15px/10px "Montserrat", sans-serif; height: 50px; font-weight: 700;} .heroslide3.mobileslider3 {background:url(../images/mobile-slide2.jpg) no-repeat center; background-size: cover;} .mapbuttonbox .mapbutton {padding:8px 15px;} #go-top a {width: 150px; height: 40px; font: 12px/40px "Montserrat", sans-serif; margin-left: -75px;} .mailto a {font-size: 16px;} .advisoryboardbox {height: 100%; padding-bottom: 70px;} .whowearecontnetright .flex-control-nav {bottom: 10px;} .servicesrelative {height: 100%;} #hero {margin-bottom: 3px;} #hero .flex-control-nav {display: none;} .whowearecontnetright .flex-control-nav li a {width: 8px; height: 8px;} .servicescontnetright .flex-control-nav li a {width: 8px; height: 8px;} .heroslide1 {background-position: 60% 0;} .heroslide4 {background-position: 100% 0;} .heroslide5 {background-position: 30% 0;} .orignsection {height: auto;} .aboutsection {height: auto;} .servicessection {height: auto;} .whowearesection {height: auto;} .clientsection {height: auto;} .orignleft {display: block; height: 100%; padding: 150px 0; text-align: center;} .orightcontent {display: block;} .orignright {display: block; height: 100%;} .servicescontent {display: block; vertical-align: middle; text-align: center; width: 100%;} .servicesleft {height: 100%; display: block; padding: 120px 0; background:url(../images/bg2.jpg) 0 0 no-repeat; background-size: cover; width: 100%;} .servicesright {height: 100%; display: block; background-size: 150px;} .whowearecontent {display: block; vertical-align: middle; text-align: center; width: 100%;} .whoweareleft {height: 100%; display: block; padding: 180px 0; background:url(../images/technical-advisory.jpg) 0 0 no-repeat; background-size: cover; width: 100%;} .whoweareright {height: 100%; display: block; vertical-align: top; background:url(../images/texture.png) 100% 100% no-repeat; background-size: 150px;} .aboutleft {height: 100%; display: block; padding: 200px 20px; background:url(../images/about-yestu.jpg) 0 0 no-repeat; background-size: cover; width: 100%;} .aboutright {height: 100%; display: block; background-size: 150px; background:url(../images/texture.png) 100% 100% no-repeat; background-size: 150px;} .aboutcontent {display: block;; height: 100%;} .clientleft {display: block; height: 100%; padding:200px 0; text-align: center;} .clientright {display: block; height: 100%; background-size: 150px;} .clientcontent {display: block;} } @media only screen and (min-device-width : 250px) and (max-device-width : 800px) and (orientation : landscape) { .heroslide3.mobileslider3 {background:url(../images/slide2.jpg) no-repeat center; background-size: cover;} .heroslide5 {background-position: 0 50%;} .orignleft {padding: 200px 0;} .servicesleft {padding: 150px 0; background-position: 100% 50%;} .whoweareleft {padding: 230px 0;} .aboutleft {padding: 200px 0; background-position: 100% 20%;} .clientleft {padding: 200px 0; background-position: 100% 50%;} .heroslide1 {background-position: 50% 50%;} }