/*Template Name: Pilot - Responsive Landing Page Template Theme URL: http://themeforest.net/user/DSA79/ Description: Pilot - Responsive Landing Page Template Author: DSA79 Author URL: http://themeforest.net/user/DSA79 Version: 1.0.0 Website: www.dsathemes.com Tags: responsive, html5 template, one page, landing, mobile app, company, creative, business, corporate, project */ /* ------------------------------------------ */ /* TABLE OF CONTENTS /* ------------------------------------------ */ /* 01 - General & Basic Styles */ /* 02 - Header & Navigation */ /* 03 - Intro */ /* 04 - Banner_1 */ /* 05 - Features */ /* 06 - Banner_2 */ /* 07 - Newsletter */ /* 08 - Screens */ /* 09 - Banner_3 */ /* 10 - Testimonials Rotator */ /* 11 - Pricing */ /* 12 - Contact */ /* 13 - Footer */ /* 14 - Scroll to Top ; */ /* 15 - Contact Form Response */ /* ========================================================================== 01. GENERAL & BASIC STYLES ========================================================================== */ @font-face { font-family: 'icomoon'; src:url('../fonts/icomoon.eot?-i02vf0'); src:url('../fonts/icomoon.eot?#iefix-i02vf0') format('embedded-opentype'), url('../fonts/icomoon.ttf?-i02vf0') format('truetype'), url('../fonts/icomoon.woff?-i02vf0') format('woff'), url('../fonts/icomoon.svg?-i02vf0#icomoon') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @font-face { font-family: 'Agency FB'; src: url('../fonts/agency_fb.eot'); src: local('agency_fb'), url('../fonts/agency_fb.woff') format('woff'), url('../fonts/agency_fb.ttf') format('truetype'); } /* use this class to attach this font to any element i.e.

Text with this font applied

*/ .fontsforweb_fontid_5118 { font-family: 'Agency FB' !important; } /* Font downloaded from FontsForWeb.com */ /*------------------------------------------*/ /* Preload Animation /*------------------------------------------*/ #preloader { position: fixed; top:0; right:0; bottom:0; left:0; z-index:99999; background-color:#fff; display: table; height: 100%; width: 100%; } .preload_logo_wrapepr { display: table-cell; vertical-align: middle; } #status { position:absolute; top:50%; left:50%; margin:-100px 0 0 -100px; width:200px; height:200px; background-image:url(../img/icons/loader.gif); background-position:center; background-repeat:no-repeat; background-size:125px 125px; } /*------------------------------------------*/ /* Parallax Settings /*------------------------------------------*/ .parallax { background-attachment: fixed !important; background-position: center center; background-repeat: no-repeat; background-size: cover; } #newsletter { background-image: url(../img/parallax_bg/newsletter_bkg.jpg); } #testimonials-rotator { background-image: url(../img/parallax_bg/testimonials_bkg.jpg); } h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 10px; } a { text-decoration: none; -webkit-transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; -ms-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; } a:hover { color: #444; text-decoration: none; } a:focus { color: #f8f8f8; outline: none; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } .btn-theme { background-color: #d5512b; border: 1px solid #bc4726; color: #fff; font-size: 16px; font-family: 'Lato', sans-serif; font-weight: 700; padding: 10px 20px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; } .btn-theme:hover { background-color: #bc4726; border-color: #d5512b; box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px rgba(0, 0, 0, 0.2); } .btn-black { background-color: #444; border: 1px solid #444; color: #fff; font-size: 16px; font-family: 'Lato', sans-serif; font-weight: 700; padding: 10px 20px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; } .btn-black:hover { background-color: #222; border-color: #222; box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px rgba(0, 0, 0, 0.2); } .btn-lg { padding: 12px 24px; font-size: 18px; } .btn:focus { outline: none; } .btn:focus { color: #f8f8f8; text-decoration: none; } .titlebar { margin-bottom: 50px; } .titlebar h2 { font-weight: 900; margin-bottom: 10px; } .titlebar h3, .about_us_desc p { line-height: 26px; font-size: 20px; } .titlebar h3 span { color: #000; } .titlebar p { color: #444; font-size: 17px; font-weight: 300; } /* ========================================================================== 02. HEADER & NAVIGATION ========================================================================== */ .navbar-brand { padding: 10px 15px; } .navbar-brand:hover { color: #fff; } .navbar { margin-bottom: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; padding: 30px 0px; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .navbar-fixed-top { border-bottom: none; } .navbar-nav > li > a { color: #fff; line-height: 50px; font-family: 'Agency FB', arial; font-weight: 900; text-transform: uppercase; display: block; padding: 0 12px; -webkit-transition: all 100ms ease-in-out; -moz-transition: all 100ms ease-in-out; -o-transition: all 100ms ease-in-out; -ms-transition: all 100ms ease-in-out; transition: all 100ms ease-in-out; font-size: 170%; letter-spacing: 1.5px; } .scroll-fixed-navbar { padding: 0px; background-color: #d2512c; } .scroll-fixed-navbar .navbar-nav > li > a, .scroll-fixed-navbar .navbar-brand .black-color { color: #fff; } .navbar-nav > li > a:hover, .navbar-nav > li > a.selected-nav { color: #fff; background-color: transparent; } .scroll-fixed-navbar .navbar-nav > li > a:hover, .scroll-fixed-navbar .navbar-nav > li > a.selected-nav { color: #333; } .navbar-toggle { position: relative; float: right; background-color: none; padding: 10px; margin: 13px 30px 13px 0; border: none; color: #fff; border: 2px solid #fff; } .navbar-toggle .icon-bar { background-color: #fff; } /* ========================================================================== 03. INTRO ========================================================================== */ #intro { width: 100%; height: 100%; position: relative; top: 0px; z-index: 1; display: block; overflow: hidden; padding: 0 !important; } #slides { position: relative; } #slides .scrollable { height: 100%; position: relative; top: 0; left: 0; *zoom: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } #slides .scrollable:after { content: ""; display: table; clear: both; } .intro-content { width: 80%; position: absolute; left: 50%; top: 50%; color: #fff; text-align: center; display: inline-block; padding: 50px; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); z-index: 11; } .intro-content h1 { font-size: 550%; font-weight: 900; line-height: 95%; margin-bottom: 20px; text-shadow: 1px 3px 3px rgba(0, 0, 0, 1); font-family: 'Agency FB', arial; } .intro-content h2 { font-size: 50px; text-shadow: 1px 1px 3px rgba(0, 0, 0, 1); font-size: 550%; font-family: 'Agency FB', arial; } .intro-content h3 { font-size: 200%; font-weight: 400; text-transform: uppercase; margin-top: 0; } .illustration { background: url(../img/company-logo.png) no-repeat; position: absolute; height: 100%; width: 100%; background-size: contain; width: 300px; height: 262px; } .company_logo { background: url('../img/company-logo.png') no-repeat; width: 300px; height: 262px; margin: auto; margin-bottom: 30px; background-size: contain ; } .slides-pagination { width: 100%; position: absolute; bottom: 15%; z-index: 20; text-align: center; } .slides-pagination a { width: 30px; height: 4px; background: #ffffff; color: #1a1a1a; opacity: 0.5; -moz-opacity: 0.5; filter: alpha(opacity=50); display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; margin: 2px; overflow: hidden; text-indent: -100%; } .slides-pagination a:hover, .slides-pagination a.current { opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100); } .scroll-down { width: 100%; color: #fff; font-weight: 600; text-align: center; text-transform: uppercase; position: absolute; bottom: 5%; z-index: 99; } .scroll-down span { background: transparent; width: 44px; height: 44px; text-align: center; cursor: pointer; display: block; margin: 0 auto 10px; border: 2px solid #fff; box-shadow: 0px 0px 0px 0 rgba(10, 10, 10, 0.15); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; -ms-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; } .scroll-down span:hover { background: #d2512c; border-color: #d2512c; box-shadow: 0px 0px 0px 10px rgba(240, 240, 240, 0.3); } .scroll-down span [class*="fa-"] { color: #fff; font-size: 36px; line-height: 40px; } .job_card_wrapper { box-shadow: 0px 2px 4px 0px rgba(29, 37, 46, 0.1); } .job_card_wrapper a { width: 100%; padding: 10px; } .job_card { padding: 20px 20px 30px 20px; border-top: 1px solid #E7E7E7; height: 570px; } .skills { display: block; font-weight: 600; } .job_title, .skills { text-align: center; } .job_title h3, .skills { margin-bottom: 10px; } .description { display: block; text-align: justify; } .current_jobs { padding-bottom: 50px; } .job_types h2, .current_jobs h2, .requirements, .about_us_desc h3 { font-size: 255% !important; font-family: 'Agency FB', arial; font-size: 310%; font-weight: 600; margin-bottom: 30px; } .job_image img { width: 150px; margin: auto; display: block; margin-bottom: 15px; } .job_types p.main_description { color: #444; font-size: 17px; margin-bottom: 30px; font-weight: 400; } .job_types a.btn { margin-bottom: 50px;} /* ========================================================================== 04. BANNER_1 ========================================================================== */ #banner_1 { padding-top: 80px; border-bottom: 1px solid #ddd; } .banner_1_content h3 { color: #d5512b; margin-bottom: 20px; } .banner_1_content p { color: #444; font-size: 18px; font-family: 'Lato', sans-serif; font-weight: 300; margin-bottom: 30px; } .banner_1_content p strong { line-height: 24px; } #banner_1 .img-responsive { display: inline-block; } /* ========================================================================== 05. FEATURES ========================================================================== */ #features { padding-top: 80px; padding-bottom: 40px; background-color: #ecf0f1; border-bottom: 1px solid #ddd; } .feature-box { margin-bottom: 50px; padding-left: 5px; padding-right: 5px; min-height: 120px; } #features h2, .about_us_desc h2 { font-family: 'Agency FB', arial; font-size: 310%; font-weight: 600; margin-bottom: 30px; } .feature-box-icon { background-color: #d5512b; display: block; width: 60px; height: 60px; position: absolute; left: 0px; top: 10px; border-radius: 30px; color: #FFF; line-height: 60px; text-align: center; font-size: 30px; } .block { font-weight: 400; } .service_period { font-size: 15px !important; margin-bottom: 15px !important; } .feature-box-content { padding-left: 70px; } .feature-box-content h4 { font-family: 'Lato', sans-serif; font-weight: 700; } /* ========================================================================== 06. BANNER_2 ========================================================================== */ #banner_2 { padding-top: 100px; } .banner_2_content h3 { color: #d5512b; margin-bottom: 20px; font-size: 21px; } .banner_2_content p { color: #444; font-size: 16px; font-weight: 300; } .list-item { margin-bottom: 20px; } .list-item i { color: #d5512b; margin-right: 8px; font-size: 18px; } .list-item h5 { font-size: 16px; font-weight: 700; } .qualifications { margin-top: 20px; margin-bottom: 20px; } .error { color: #fff; font-size: 16px; font-family: 'Lato', sans-serif; font-weight: 400; padding: 5px; } /* ========================================================================== 08. SCREENS ========================================================================== */ #screens { padding-top: 80px; padding-bottom: 60px; background-color: #ecf0f1; border-bottom: 1px solid #ddd; } #screenshot_1, #screenshot_2, #screenshot_3, #screenshot_4, #screenshot_5, #screenshot_6, #screenshot_7, #screenshot_8 { margin-bottom: 40px; } .hover-details { width: 100%; height: auto; overflow: hidden; position: relative; -moz-transition: all ease 400ms ease-in-out; -webkit-transition: all ease 400ms ease-in-out; -o-transition: all ease 400ms ease-in-out; transition: all ease 400ms ease-in-out; } .hover-details .img-cover { width: 100%; height: 100%; opacity: 0; position: absolute; top: 0; left: 0; background: rgba(10, 10, 10, 0.55); -moz-transition: all ease 400ms ease-in-out; -webkit-transition: all ease 400ms ease-in-out; -o-transition: all ease 400ms ease-in-out; transition: all ease 400ms ease-in-out; } .hover-details > img { width: 100%; height: auto; -moz-transition: all ease 400ms ease-in-out; -webkit-transition: all ease 400ms ease-in-out; -o-transition: all ease 400ms ease-in-out; transition: all ease 400ms ease-in-out; } .image_zoom { width:50px; height:50px; background-image: url(../img/icons/zoom-ico.png); background-repeat: no-repeat; background-position: 50% 50%; background-color: #d5512b; position: absolute; top: -50%; left: 50%; border-radius: 50%; margin-top: -25px; margin-left: -25px; -webkit-transition: all ease 400ms ease-in-out; -moz-transition: all ease 400ms ease-in-out; -ms-transition: all ease 400ms ease-in-out; -o-transition: all ease 400ms ease-in-out; transition: all ease 400ms ease-in-out; } .img-cover h3 { width: 100%; position: absolute; bottom: -28%; color: #f8f8f8; font-size: 16px; font-weight: 700; text-transform: uppercase; text-align: center; padding: 0 10px; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .hover-details:hover > img { transform: scale(1.2); -ms-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -moz-transform: scale(1.2); } .hover-details:hover .image_zoom { top: 45%; } .hover-details:hover .img-cover h3 { bottom: 28%; } .hover-details:hover .img-cover { opacity: 1; } .image_zoom:hover { background-color: #333; } /* ========================================================================== 13. FOOTER ========================================================================== */ #footer { width: 100%; background-color: #333; padding-top: 20px; padding-bottom: 20px; } #footer p { color: #999; font-size: 11px; font-family: 'Lato', sans-serif; text-transform: uppercase; margin-bottom: 0; } #footer a { color: #fff; } #footer .row { margin-bottom: 10px; } #footer p img { display: block; margin: auto; width: 70px;} .footer-socials { display: inline-block; padding-left: 0; margin-bottom: 3px; } .footer-socials li { float: left; width: auto !important; display: inline-block !important; vertical-align: top; clear: none !important; } .foo_social { width: 40px; height: 40px; color: #777; font-size: 18px; line-height: 40px; text-align: center; margin: 0 5px; display: block; text-decoration: none; -webkit-transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; -ms-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; } /*---------------------- Footer Icons Hover -----------------------------*/ .ico-facebook:hover { color: #3b5998;} .ico-twitter:hover { color: #00a9ed;} .ico-google-plus:hover { color: #cd1111;} .ico-linkedin:hover { color: #015886;} .ico-dribbble:hover { color: #d92d84;} .ico-instagram:hover { color: #beb3a8;} .ico-pinterest:hover { color: #ac281a; } .ico-dropbox:hover { color: #008ad2;} .ico-skype:hover { color: #00a9ed; } .ico-youtube:hover { color: #cd1b20;} .ico-tumblr:hover { color: #3a5976;} .ico-vimeo:hover { color: #00adee;} .ico-flickr:hover { color: #d2d2d2; } .ico-github:hover { color: #222;} .ico-renren:hover { color: #364a83;} .ico-vk:hover { color: #3b5998;} .ico-xing:hover { color: #015f5e; } .ico-weibo:hover { color: #be4443;} .ico-rss:hover { color: #ff6600;} /* ========================================================================== 14. SCROLL TO TOP ========================================================================== */ #scrollUp { display: none; width: 50px; height: 50px; position: fixed; bottom: 30px; right: 30px; background-image: url(../img/icons/back-to-top.png); background-repeat: no-repeat; background-position: 50% 48%; background-color:rgba(213, 81, 43, 0.65); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transition: all 250ms linear; -moz-transition: all 250ms linear; transition: all 250ms linear; } #scrollUp:hover { background-color: rgba(188, 71, 38, 0.95); } nav a#pull { display: none; } /* ========================================================================== 15. CONTACT FORM RESPONSE PAGE ========================================================================== */ #about_us { padding-top: 80px; padding-bottom: 80px; border-top: 1px solid #ddd; background: transparent url("../img/pattern.png") repeat scroll 0% 0%; background-repeat: repeat; background-position: center center; overflow: hidden; } .contact_details .input-field label { font-size: 17px; font-weight: 400; top: 0.3rem; } .textarea.materialize-textarea, input { font-size: 14px !important; } input[type=text]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=email]:focus:not([readonly]), input[type=url]:focus:not([readonly]), input[type=time]:focus:not([readonly]), input[type=date]:focus:not([readonly]), input[type=datetime-local]:focus:not([readonly]), input[type=tel]:focus:not([readonly]), input[type=number]:focus:not([readonly]), input[type=search]:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) { border-bottom: 1px solid #FF3A00; box-shadow: 0 1px 0 0 #FF3A00; } input[type=text]:focus:not([readonly])+label, input[type=password]:focus:not([readonly])+label, input[type=email]:focus:not([readonly])+label, input[type=url]:focus:not([readonly])+label, input[type=time]:focus:not([readonly])+label, input[type=date]:focus:not([readonly])+label, input[type=datetime-local]:focus:not([readonly])+label, input[type=tel]:focus:not([readonly])+label, input[type=number]:focus:not([readonly])+label, input[type=search]:focus:not([readonly])+label, textarea.materialize-textarea:focus:not([readonly])+label { color: #FF3A00; } .btn-theme { height: auto; padding: 6px 15px; border: 0; border-radius: 4px; background-color: #E8572E; } .preload_logo { width: 300px; height: 262px; margin: auto; margin-bottom: 122px; } .preloader_progress { height: 3px; /*display: table-row;*/ vertical-align: top; position: relative; z-index: 100000; margin: 0; position: absolute; width: 100%; } .preloader_progress .indeterminate{ background-color: #E36312; } .error { font-size: 13px !important; line-height: 16px; margin-top: -26px; padding: 0px; } #submit { background-color: transparent; border: 0; outline: none; font-size: 16px !important; } #form_response { margin: 50px auto; } #form_response .img-responsive { display: inline-block; } #form_response h1 { font-size: 40px; font-weight: 700; margin-top: 10px; } #form_response p { font-size: 18px; font-family: 'Lato', sans-serif; font-weight: 400; margin-bottom: 20px; } /* ========================================================================== Portfolio ========================================================================== */ .grid { position: relative; margin: 0 auto; max-width: 100%; list-style: none; text-align: center; } .grid figure { position: relative; float: left; overflow: hidden; background: #3085a3; text-align: center; cursor: pointer; height: 335px; } .grid figure img { position: relative; display: block; min-height: 100%; width: 100%; opacity: 1; } .grid figure figcaption { padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .grid figure figcaption::before, .grid figure figcaption::after { pointer-events: none; } .grid figure figcaption, .grid figure figcaption > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 11; } .grid figure figcaption > a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; } .grid figure h2 { color: #d2512c !important; font-size: 30px; font-family: 'Agency FB', arial; } .grid figure h2 span { font-weight: 800; } .grid figure h2, .grid figure p { margin: 0; } .grid figure p { letter-spacing: 1px; font-weight: 300; font-size: 14px; line-height: 18px; } figure.effect-portfolio { background: url('../img/pattern.png'); } figure.effect-portfolio img { height: 370px; } figure.effect-portfolio figcaption { padding: 2em; } figure.effect-portfolio figcaption::before, figure.effect-portfolio figcaption::after { position: absolute; content: ''; opacity: 0; } figure.effect-portfolio figcaption::before { top: 35px; right: 25px; bottom: 35px; left: 25px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: scale(0,1); transform: scale(0,1); -webkit-transform-origin: 0 0; transform-origin: 0 0; } figure.effect-portfolio figcaption::after { top: 25px; right: 35px; bottom: 25px; left: 35px; border-right: 1px solid #fff; border-left: 1px solid #fff; -webkit-transform: scale(1,0); transform: scale(1,0); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } figure.effect-portfolio h2 { padding-top: 26%; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; opacity: 0; } figure.effect-portfolio p { padding:15px; text-transform: none; opacity: 0; -webkit-transform: translate3d(0,-10px,0); transform: translate3d(0,-10px,0); } figure.effect-portfolio img, figure.effect-portfolio h2 { -webkit-transform: translate3d(0,-30px,0); transform: translate3d(0,-30px,0); } figure.effect-portfolio img, figure.effect-portfolio figcaption::before, figure.effect-portfolio figcaption::after, figure.effect-portfolio p { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; } figure.effect-portfolio:hover img { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -webkit-transform: scale(1.15); transform: scale(1.15); } figure.effect-portfolio:hover figcaption::before, figure.effect-portfolio:hover figcaption::after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } figure.effect-portfolio:hover .overlay_slider { background-color: #000; background-image: url('../img/pattern.png'); opacity: 0.7; } figure.effect-portfolio:hover h2, figure.effect-portfolio:hover p { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } figure.effect-portfolio:hover figcaption::after, figure.effect-portfolio:hover h2, figure.effect-portfolio:hover p, figure.effect-portfolio:hover img { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } .nopadding { padding: 0; } .overlay-bg { height: 100%; width: 100%; position: absolute; z-index: 1000; background: url('../img/pattern.png');} .overlay_slider { height: 100%; width: 100%; position: absolute; z-index: 10; background: url('../img/pattern.png'); -webkit-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; } .ui-datepicker td a { text-align: center; } .ui-state-default, .ui-widget-content .ui-state-default { background: #EFEFEF; } .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border: 0; background: #f4a115; color: #FFFFFF; } .ui-widget { font-family: inherit; } .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border: 0; border-radius: 0; } .ui-widget-header { background: #f4a115; color: #FFFFFF; } .slick-prev:before, .slick-next:before { font-family: inherit; } .slick-next { right: -22px; } .icon-move14:before { content: "\e602"; } .icon-move13:before { content: "\e601"; } .icon-smiling36:before { content: "\e600"; } /*========================================================= Fancy Box =========================================================*/ .fancybox-title-float-wrap .child {line-height: 17px; white-space: normal; font-size: 13px !important; border-radius: 0; width: 100%; font-family: 'Lato', sans-serif; font-weight: 400; padding: 20px 10px; color: #D2D2D2; border: 0; position: absolute; bottom: 0px; left: 0 ; } .fancybox-opened .fancybox-title { width: 100%; border: 0; margin-bottom: -6px; } .fancybox-prev { position: fixed; /* change to fixed */ left: 35px; width: 15%; /* width of nav overlay */ } .fancybox-next { position: fixed; /* change to fixed */ right: 35px; width: 15%; /* width of nav overlay */ } .fancybox-close { /*position: fixed; right: 35px;*/ width: 36px; height: 36px; cursor: pointer; z-index: 8040; } .fancybox-prev span { background: url('../img/left_arrow.png') no-repeat ; background-size: 75%; } .fancybox-next span { background: url('../img/right_arrow.png') no-repeat ; background-size: 75%; } .fancybox-nav span { width: 55px; height: 70px; background-position: 0; } .google_map, #map-canvas { height: 500px; width: 100%; } .contact_details { background: #fff; padding-top: 60px; padding-bottom: 60px; } .contact_details h2 { font-family: 'Agency FB', arial; font-size: 310%; margin-bottom: 50px; font-weight: bold; } .contact_details ul li { margin-bottom: 25px; padding-left: 45px; font-size: 16px; line-height: 28px;; } li.address { background: url('../img/location.png') no-repeat; } li.tel { background: url('../img/phone.png') no-repeat; line-height: 35px !important; } li.email { background: url('../img/email.png') no-repeat; line-height: 30px !important; } li.fax { background: url('../img/fax.png') no-repeat; line-height: 35px !important; } li.mobile { background: url('../img/mobile.png') no-repeat; line-height: 35px !important; } .contact_details a { color: #333; } .contact_details a:hover { color: #E8572E; } nav { background-color: inherit; box-shadow: none; } .fancybox-skin .fancybox-title { opacity: 0; position: absolute; height: 100%; width: 100%; opacity: 0; bottom: 0px; right: 0; -webkit-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; transition: all 0.4s ease-in; } .fancybox-title:hover { opacity: 1;} /******************************************** Modal Form *********************************************/ #msform { margin: 30px auto; text-align: center; position: relative; } #msform fieldset:not(:first-of-type) { display: none; } .display_div { display: block !important;} #submit_cv { position: absolute; left: 43%; bottom: -150px; z-index: 200; width: 100px; background: #E8572E;font-weight: bold;color: white; border: 0 none; padding: 10px 5px;} #msform fieldset { position: absolute; width: 100%; } .modal { overflow: hidden; height: 450px; } .modal h2 { font-weight: 600; margin-bottom: 0 !important; } #msform input, #msform textarea { /* padding: 20px 5px; border: 1px solid #ccc; border-radius: 3px;*/ margin-bottom: 10px; width: 100%; box-sizing: border-box; color: #2C3E50; font-size: 17px !important; } #msform .action-button { width: 100px; background: #E8572E; font-weight: bold; color: white; border: 0 none; border-radius: 1px; cursor: pointer; padding: 10px 5px; margin: 10px 5px; } .fs-title { font-size: 15px; text-transform: uppercase; color: #2C3E50; margin-bottom: 10px; } .fs-subtitle { font-weight: normal; font-size: 24px; color: #666; margin-bottom: 20px; } #progressbar { margin-top: 20px;overflow: hidden; /*CSS counters to number the steps*/ counter-reset: step; } #progressbar li { list-style-type: none; background-color: transparent !important; border: 0 !important; background-image: none !important; color: #C7C7C7; text-transform: uppercase; font-size: 9px; width: 16.666%; float: left; position: relative; text-align: center; } #progressbar li:before { content: counter(step); counter-increment: step; width: 20px; line-height: 20px; display: block; font-size: 10px; color: #FFF; border-radius: 50%; margin: 0 auto 5px auto; } #progressbar li:after { content: ''; width: 100%; height: 2px; position: absolute; left: -50%; top: 9px; z-index: -1; /*put it behind the numbers*/ } #progressbar li:first-child:after { content: none; } #progressbar li:before, #progressbar li:after { background: #E2E2E2; } #progressbar li.active:before, #progressbar li.active:after { background: #E8572E; color: white; } #progressbar li span { position: relative; top: 3px;} #progressbar li.active span { color: #E8572E ;} .hidediv { position: absolute; } .job_details { float: left; } .applicant_img { float: right; } #file { width: 45% !important; background: #eee; margin: auto !important; padding: 20px 15px !important; display: block;} .loader_load { margin: auto; display: block; margin-top: 85px; } .spinner-blue-only { border-color: #F13E00; } #thanks { text-align: center; color: #E65700;} #thanks span { font-size: 17px;} #thanks img { width: 100px; margin-bottom: 20px; } .firstfield { margin-left: -30px;} .slick-initialized .slick-slide { outline: none;} .badge-notify { background:red; background: #D20000; position: relative; width: 20px; height: 20px; top: 0px; border-radius: 50%; line-height: 21px !important; font-size: 13px !important; color: #fff !important; min-width: inherit !important; right: 0px !important; padding : 0 0 0 1px !important; } .slick-prev:before, .slick-next:before { color: #272727; } .notice_period ul li { background-color: transparent !important; margin-top: 0 !important; padding: 0 !important; height: auto !important; position: relative !important; display: inline-block; width: 25%; } /*color: #4CAF50*/ /************************************************** Login **************************************************/