#spinner { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url(../images/preloader.gif) 50% 50% no-repeat #293158; } /*-----------------------------------------------------------------*/ /* 01. CSS RESET /*-----------------------------------------------------------------*/ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, a { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: 0px; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } .left { float: left; } .right { float: right; } .clearfix:after { content:""; display:block; clear:both; visibility:hidden; font-size:0; height:0; } html { min-height: 100%; margin: 0; padding: 0; } img { height:auto; max-width: 100%; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; } /*-----------------------------------------------------------------*/ /* 02. Global Styles /*-----------------------------------------------------------------*/ body { color: #868686; font-family: 'Arimo', sans-serif; font-weight: 400; font-size: 15px; line-height: 2em; } .container { width: 940px; margin: 0 auto; } .columns-container { width: 960px; margin: 0 auto; } section { padding-top: 60px; position: relative; border-bottom: 1px solid #DCDCDC; } h2 { color: #293158; font-size: 45px; line-height: 45px; font-weight: 400; margin-bottom: 15px; text-align: center; } h3 { color: #595959; font-size: 29px; margin-top: 25px; } section > .container > p { font-size: 17px; line-height: 30px; text-align: center; margin-top: 20px; } .placeholder{ color: #b7b7b7!important; } ::-moz-selection { background: #536270; color: #fff; text-shadow: none; } ::selection { background: #536270; color: #fff; text-shadow: none; } /*-------- 02.a. Columns --------*/ .half { width: 48%; margin: 0 1%; } .third { width: 31.3333333333333%; margin: 0 1%; } .fourth { width: 23%; margin: 0 1%; } .fifth { width: 18%; margin: 0 1%; } /*-------- 02.b. Buttons --------*/ .button { font-size: 15px; font-weight: 600; padding: 20px 25px; color: #FFF; text-transform: uppercase; background: #D8D6D7; text-decoration: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .button.green { background: #84C63E; border: 1px solid #A2DE49; } .button.green:hover { background: #293158; color:#ffffff; } .button.blue { background: #293158; border: 1px solid #B7DAF3; color: #B7DAF3; } .button.blue:hover { background: #B7DAF3; /* 3D4954; */ border: 1px solid #293158; color: #293158; } .price-table:hover > .button.green-hover { background: #76BB2C; } .price-table:hover > .button.blue-hover { background: #293158; /*3D4954;*/ } .orange { color: #76BA2F; font-weight:lighter; } .pic{ margin:0; } .pic a{ text-indent:-99999px; } /*-----------------------------------------------------------------*/ /* 03. Header /*-----------------------------------------------------------------*/ body > header { width: 100%; position: fixed; top : 0px; z-index: 999; background: #fff; -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.2); -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2); box-shadow: 0 1px 1px rgba(0,0,0,0.2); opacity: .9; filter: alpha(opacity = 90); } /*-------- 03.a. Logo --------*/ #logo h1 { display: none; } /*-------- 03.b. Menu --------*/ .main-menu-select{ display: none; } nav ul { list-style: none; float:right; margin-top: 26px; } nav ul li { float: left; font-size: 15px; color: #293158; /* #999898 */ margin: 0 15px; } nav ul li:last-child { margin-right: 0; } nav ul li a { text-decoration: none; color: inherit; } nav ul li a:hover { color: #56b647; /*#333333;*/ } nav ul li.highlight { background: #293158; padding: 2px 15px; margin: 0; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; border: 2px solid #B7DAF3; color: #FFFFFF; cursor: pointer; position: relative; top: -4px; } nav ul li.highlight:hover { background: #A2DE49; border: 2px solid #84C63E; } nav ul li.highlight a { color: #FFFFFF; } /*-----------------------------------------------------------------*/ /* 04. Slider /*-----------------------------------------------------------------*/ #slider { border: 0px; padding: 0px; height: 785px; } #slider h2 { color: #fff; } .flexslider:before { display: block; content: ""; position: absolute; z-index: 1; top: 0px; left: 0px; height: 100%; width: 100%; background: url('../images/slider-inner-shadow.png') no-repeat center bottom; } .slides:before { display: block; content: ""; position: absolute; z-index: 2; top: 0px; left: 0px; height: 100%; width: 100%; background: url('../images/bg-overlay-pattern.png'); opacity: .4; filter: alpha(opacity = 40); } .slide { position: relative; top: 0px; left: 0px; } .slide img { height: 100% !important; width: 1920px !important; max-width: 1920px; background: #888; position: relative; left:-960px; margin-left:50%; } .slide-caption { color: #FFFFFF; position: absolute; top:266px; width: 500px; z-index: 99; background-color: rgba(0,0,0,0.18); box-shadow: 0px 0px 80px 80px rgba(0,0,0,0.18); } .slide .slide-caption h2 { font-size: 50px; margin-bottom: 31px; text-shadow:0px 1px #000000; text-align:left; } .slide .slide-caption p { font-size: 21px; line-height: 24px; margin-bottom: 54px; text-shadow:0px 1px #000000; } .slide .slide-caption .button-underline { border-bottom: 3px solid #76BB2C; color: #FFFFFF; font-size: 15px; font-weight: 600; margin-left: 20px; padding: 16px 0 1px; text-decoration: none; /*text-shadow: none;*/ text-transform: uppercase; text-shadow: 0 0px 5px #000000; } #slider:after { display:block; content: ""; background: url('../images/slider-outer-shadow.png') no-repeat center bottom; height: 25px; width: 100%; } /*-----------------------------------------------------------------*/ /* 05. Services /*-----------------------------------------------------------------*/ #services { background: url('../images/features-bg.png') no-repeat center bottom; -moz-box-shadow: 0 1px 1px #C2C2C2; -webkit-box-shadow: 0 1px 1px #C2C2C2; box-shadow: 0 1px 1px #C2C2C2; padding-bottom: 280px; } #services .fourth { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: 20px 0px; float:left; text-align: center; margin-top: 55px; } #services .fourth:hover { -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.13), 0 0 0 1px #D8D8D8 inset; -moz-box-shadow: 0 0 12px rgba(0, 0, 0, 0.13), 0 0 0 1px #D8D8D8 inset; box-shadow: 0 0 12px rgba(0, 0, 0, 0.13), 0 0 0 1px #D8D8D8 inset; transition: all 0.2s linear 0s; } #services .fourth p { margin-top: 20px; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 18px; } /*-----------------------------------------------------------------*/ /* 06. about us /*-----------------------------------------------------------------*/ #aboutus { text-align: center; background: -moz-linear-gradient(135deg, rgba(255,255,255,0) 22%, rgba(255,255,255,0) 39%, rgba(255,255,255,0.65) 75%, rgba(255,255,255,1) 94%), url('../images/collaborate-bg.jpg') repeat 0 0; background: -webkit-gradient(linear, left bottom, right top, color-stop(22%,rgba(255,255,255,0)), color-stop(39%,rgba(255,255,255,0)), color-stop(75%,rgba(255,255,255,0.65)), color-stop(94%,rgba(255,255,255,1))), url('../images/collaborate-bg.jpg') repeat 0 0; background: -webkit-linear-gradient(135deg, rgba(255,255,255,0) 22%,rgba(255,255,255,0) 39%,rgba(255,255,255,0.65) 75%,rgba(255,255,255,1) 94%), url('../images/collaborate-bg.jpg') repeat 0 0; background: -o-linear-gradient(135deg, rgba(255,255,255,0) 22%,rgba(255,255,255,0) 39%,rgba(255,255,255,0.65) 75%,rgba(255,255,255,1) 94%), url('../images/collaborate-bg.jpg') repeat 0 0; background: -ms-linear-gradient(135deg, rgba(255,255,255,0) 22%,rgba(255,255,255,0) 39%,rgba(255,255,255,0.65) 75%,rgba(255,255,255,1) 94%), url('../images/collaborate-bg.jpg') repeat 0 0; background: linear-gradient(135deg, rgba(255,255,255,0) 22%,rgba(255,255,255,0) 39%,rgba(255,255,255,0.65) 75%,rgba(255,255,255,1) 94%), url('../images/collaborate-bg.jpg') repeat 0 0; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); } #aboutus p { margin-bottom: 45px; } #aboutus img { margin-top: 75px; } /*-----------------------------------------------------------------*/ /* 07. work /*-----------------------------------------------------------------*/ #work { padding-top: 51px; /* 212px; */ /* background: url('../images/get-in-touch.png') no-repeat center top; */ } .price-table { border: 1px solid #D8D8D8; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin-top: 60px; margin-bottom: 60px; padding: 5px 5px 35px; text-align: center; } .table-title { background: #D8D7D7; color: #A09F9F; font-size: 17px; line-height: 40px; font-weight: 700; margin-top: 0; padding: 15px; text-transform: uppercase; } .price-table.green:hover .table-title { background: #A2DE49; color: #FFFFFF; transition: all 0.2s linear 0s; } .price-table.blue:hover .table-title { background: #293158; /* 506171;*/ color: #FFFFFF; transition: all 0.2s linear 0s; } .table-price { display: block; font-size: 60px; line-height: 65px; margin: 20px 0 0; } .table-price.green { color: #76BA2F; } .table-price.blue { color: #293158; /*506171;*/ } .table-price span { font-weight: 700; } .table-price small { font-weight: 700; font-size: 20px; position: relative; text-transform: uppercase; top: -13px; } .price-table p { color: #989898; font-size: 14px; line-height: 30px; margin-top: 0px; padding: 0 60px 40px; } /*-----------------------------------------------------------------*/ /* 08. Call to action /*-----------------------------------------------------------------*/ #call-to-action { background: #F5F5F5; padding: 40px 0px; } #call-to-action p { font-size: 30px; line-height: 42px; margin-top: 5px; margin-left: 20px; } #call-to-action .button { margin-right: 20px; } /*-----------------------------------------------------------------*/ /* 08a. jobs /*-----------------------------------------------------------------*/ #jobs { padding-top: 50px; /* 212px */; padding-bottom: 10px; /* 100px;*/ border-bottom: none; } #jobs .subtitles0 { font-size: 18px; font-weight:bold; font-family: inherit; color: #67a327; } #jobs .subtitles1 { font-size: 16px; font-weight:bold; font-family: inherit; color: #67a327; } #jobs .subtitles2 { font-size: 14px; font-weight:bold; font-family: inherit; color: #67a327; } #jobs form .input3, select, #jobs form .textarea2 { border: 1px solid #D8D8D8; width: 50%; padding: 10px; margin-bottom: 10px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; color: #555555; font-size: 14px; font-family: inherit; height: 40px; line-height: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #jobs form .input2 { border: 1px solid #D8D8D8; width: 100%; padding: 10px; margin-bottom: 10px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; color: #555555; font-size: 14px; font-family: inherit; height: 40px; line-height: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #jobs form .textarea2 { height: 75px; vertical-align: top; } .select { color: #BCBCBC; } select:active select:hover { color: #555555; } #jobs p { margin-bottom: 25px; } /*-----------------------------------------------------------------*/ /* 09. contact us /*-----------------------------------------------------------------*/ #contactus { padding-top: 20px; /* 212px */; /* background: url("../images/get-in-touch.png") no-repeat center top; */ padding-bottom: 50px; /* 10px;*/ border-bottom: none; } #contactus #contact { margin-top: 80px; } /*-------- 09.a. coverage --------*/ #coverage { padding-top: 1px; /* 212px */; /* background: url("../images/get-in-touch.png") no-repeat center top; */ padding-bottom: 50px; /* 100px;*/ border-bottom: none; /* margin-top: 1px; */ } /*-------- 09.b. Contact Info --------*/ #company-details { background: #293158; /* F5F5F5; */ border: 1px solid #B7DAF3; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; font-size: 20px; line-height: 42px; margin-bottom: 10px; padding: 30px 35px; color: #B7DAF3; } #company-details strong { font-weight: 700; } #company-details p { font-size: 18px; line-height: 42px; } #company-details p a { color: #A2DE49; /* A2DE49; */ } /*-------- 09.c. Social Buttons --------*/ .social-buttons a { width: 49%; text-align: center; margin-bottom: 20px; height: 55px; padding-top: 15px; } .social-buttons a.facebook { background: #D8D6D7 url('../images/facebook.png') no-repeat 5px 7px; } .social-buttons a.twitter { background: #D8D6D7 url('../images/twitter.png') no-repeat 5px 7px; } .social-buttons a.facebook:hover { background-color: #3B5997; } .social-buttons a.twitter:hover { background-color: #00C0FF; } /*-------- 09.d. Contact Form --------*/ .text{ border: 1px solid #293158; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 40px; width: 15%; color: #293158; } #contactus form .input, #contactus form .textarea { border: 1px solid #293158; /* D8D8D8;*/ width: 100%; padding: 10px; margin-bottom: 10px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; color: #293158; /*#555555;*/ font-size: 14px; font-family: inherit; height: 40px; line-height: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ::-webkit-input-placeholder { /* Edge */ color: #B7DAF3; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #B7DAF3; } ::placeholder { color: #B7DAF3; } #contactus form .textarea { height: 175px; vertical-align: top; } .captcha{ border: 1px solid #D8D8D8; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; position: relative; padding: 10px 0 11px 0; margin-bottom: 10px; } #recaptcha_image span a{ text-decoration: none; color:#aaa; } #recaptcha_image span:hover a{ color:#76bb2c; } #recaptcha_image span a#recaptcha_audio_play_again{ position: absolute; top: 8px; left: 8px; } #recaptcha_image span a#recaptcha_audio_download{ position: absolute; top: 38px; left: 8px; } .captcha .recaptcha_reload, .captcha .recaptcha_only_if_image, .captcha .recaptcha_only_if_audio, .captcha .recaptcha_help{ position: absolute; right: 8px; } .captcha .recaptcha_reload{ top: 0; } .captcha .recaptcha_only_if_image, .captcha .recaptcha_only_if_audio{ top: 23px; } .captcha .recaptcha_only_if_image{ right: 7px !important; } .captcha .recaptcha_help{ top: 46px; } button#contact-submit { border: 0px; margin-bottom:10px; } .submit_note{ clear:both; } .alert-warning, .alert-success{ display:block; padding:15px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; text-align:center; } .alert-warning{ background:#fb7973; color:#fff; } .alert-success{ background:#76bb2c; color:#fff; } /*-----------------------------------------------------------------*/ /* 10. Footer /*-----------------------------------------------------------------*/ footer { background: #F5F5F5; font-size: 15px; margin-top: 0px; padding: 23px 0 20px; color: #acabab; } footer p { margin-top: 0px; } footer a { color: #acabab; text-decoration: none; } footer a:hover { text-decoration: underline; } footer .right { text-align: right; } footer .footer-links a { padding: 0 10px; border-right: 1px solid #acabab; } footer .footer-links a:last-child{ padding-right: 0; border-right: none; } footer .footer-links a:first-child{ padding-left: 0; } .red { font-weight:bold; color: #ff0000; } .blue { font-weight:bold; color: #0000ff; } .arrow { border: solid white; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; } .arrup { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); } #scroll_up { background: rgba(132,198,62,.35); /* 41,49,88,.35 */ display: none; z-index: 299; position: fixed; width: 40px; height: 40px; font-size: 20px; line-height: 36px; text-align: center; color: #fff; top: auto; left: auto; right: 30px; bottom: 20px; cursor: pointer; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; transition: background-color .2s linear; -webkit-transition: background-color .2s linear; -o-transition: background-color .2s linear } #scroll_up i { color: #fff } #scroll_up:hover { background: #84C63E; opacity: 0.9; }