/* Theme Name: The House Media 2013 Theme URI: http://www.thehousemedia.com Author: The House Media Author URI: http://www.thehousemedia.com Version: 1.0 */ /*----------------------------------------------------------------------------------- = Table of Contents 1. = Fonts 2. = Body, Typography and some main Elements 3. = Structure 4. = Shortcodes and Widgets 5. = Header styling 6. = Navigation Menu 7. = Footer 8. = Homepage 9. = Services Page 10.= 404 Page 11.= Plan Your Project Page 12.= Work Page 13. = About Page 14. = Case Study Page /*-----------------------------------------------------------------------------------*/ /* 1. = Fonts /*-----------------------------------------------------------------------------------*/ @import url(css/fonts.css); /*-----------------------------------------------------------------------------------*/ /* 2. = Body, Typography and some main Elements /*-----------------------------------------------------------------------------------*/ body { font-size:13px; color:#383A44; font-family:Helvetica, Arial, sans-serif; background-color:#F8F8F8; } h1, h2, h3, h4, h5, h6 { line-height:1.1; margin:0 0 10px 0; font-family:'Cabin Bold', Helvetica, Arial, sans-serif; } h1 { font-size:64px; } h2 { font-size:38px; } h3 { font-size:18px; } h4 { font-size:15px; } h5 { font-size:13px; } h6 { font-size:11px; } p { line-height:1.3; margin:0 0 15px 0; } a, a:visited, a:active { text-decoration:none; color:#383A44; } a:focus, a:hover { text-decoration:none; color:#79B7B4; -webkit-transition: color 0.2s ease-out; -moz-transition: color 0.2s ease-out; -o-transition: color 0.2s ease-out; -ms-transition: color 0.2s ease-out; transition: color 0.2s ease-out; } ::selection { background:#79B7B4; /* Safari */ } ::-moz-selection { background:#79B7B4; /* Firefox */ } ul { margin:0; padding:0; list-style:none; } .fade { -webkit-transition: opacity 0.3s linear; -moz-transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; -ms-transition: opacity 0.3s linear; transition: opacity 0.3s linear; } .mobile-clear { clear:both; height:1px; } .edit-link { padding:15px 0; clear:both; } /*-----------------------------------------------------------------------------------*/ /* 3. = Structure /*-----------------------------------------------------------------------------------*/ .container { width:940px; margin:0 auto; } .column { float:left; } .column-last { margin-right:0; } .one-second { width:459px; margin:0 21px 0 0; } .one-second.column-last { margin-right:0; } .one-third { width:300px; margin:0 20px 0 0; } .one-third.column-last { margin-right:0; } /*-----------------------------------------------------------------------------------*/ /* 4. = Shortcodes and Widgets /*-----------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------*/ /* 5. = Header styling /*-----------------------------------------------------------------------------------*/ #header { height:65px; width:100%; background-color:#F8F8F8; } #header .logo { float:left; margin:22px 0 0 0; -webkit-transition: opacity 0.15s linear; -moz-transition: opacity 0.15s linear; -o-transition: opacity 0.15s linear; -ms-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } #header .logo:hover { opacity:0.6; filter:alpha(opacity=60); } /*-----------------------------------------------------------------------------------*/ /* 6. = Navigation Menu /*-----------------------------------------------------------------------------------*/ #header { position:relative; z-index:10001; } #header #nav { float:right; margin:24px 30px 0 0; } #header #nav li { float:left; padding:0; margin:0; } #header #nav li a { font-family:'Cabin Bold', Helvetica, Arial, sans-serif; letter-spacing:1.6px; font-size:17px; display:block; text-transform:uppercase; line-height:1; } #header #nav li.about { margin-right:34px; } #header #nav li.our-work { margin-right:40px; } #header #nav li.current_page_item a { color:#79B7B4; } #header .contact-button { float:right; padding:20px 39px 19px 19px; background:#79B7B4 url(images/contact-button-plus.png) no-repeat 109px center; height:26px; -webkit-transition: background 0.2s ease-out; -moz-transition: background 0.2s ease-out; -o-transition: background 0.2s ease-out; -ms-transition: background 0.2s ease-out; transition: background 0.2s ease-out; color:#FFF; font-family:'Cabin Bold', Helvetica, Arial, sans-serif; letter-spacing:1.6px; font-size:17px; display:block; text-transform:uppercase; } #header .contact-button:hover { background-color:#8CCAC7; } .contact-info { height:71px; background:url(images/contact-info-bg.png) repeat; position:absolute; z-index:9999; overflow:hidden; width:100%; top:-71px; -o-transition: top .3s ease-in-out; -ms-transition: top .3s ease-in-out; -moz-transition: top .3s ease-in-out; -webkit-transition: top .3s ease-in-out; transition: top .3s ease-in-out; } .contact-info.active { margin-bottom:-65px; top:65px; } .contact-info .phone { float:left; } .contact-info .email { float:right; } .contact-info li .text { font-family:'Cabin Bold', Helvetica, Arial, sans-serif; letter-spacing:1.6px; font-size:17px; text-transform:uppercase; float:left; margin-top:25px; } .contact-info li .phone-number { color:#FFF; float:right; margin-top:16px; display:block; font-family:'Source Sans Pro', Helvetica, Arial, sans-serif; font-weight:600; font-size:26px; padding-left:10px; } .contact-info li a { color:#FFF; float:right; display:block; margin-top:20px; font-family:'Source Sans Pro', Helvetica, Arial, sans-serif; font-weight:600; font-size:23px; padding-left:15px; } .contact-info li a:hover { color:#FFF; text-decoration:underline; } #header .logo { float:left; margin:22px 0 0 0; -webkit-transition: opacity 0.15s linear; -moz-transition: opacity 0.15s linear; -o-transition: opacity 0.15s linear; -ms-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } #header .logo:hover { opacity:0.6; filter:alpha(opacity=60); } #header .mobile-logo { display:none; float:left; margin:22px 0 0 0; -webkit-transition: opacity 0.15s linear; -moz-transition: opacity 0.15s linear; -o-transition: opacity 0.15s linear; -ms-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } #header .mobile-logo:hover { opacity:0.6; filter:alpha(opacity=60); } #fixed-header { height:40px; width:100%; overflow:hidden; position:fixed; top:-40px; left:0; background-color:#383A44; z-index:10000; -webkit-transition: top 0.3s linear; -moz-transition: top 0.3s linear; -o-transition: top 0.3s linear; -ms-transition: top 0.3s linear; transition: top 0.3s linear; } #fixed-header .logo { float:left; margin:11px 0 0 0; -webkit-transition: opacity 0.15s linear; -moz-transition: opacity 0.15s linear; -o-transition: opacity 0.15s linear; -ms-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } #fixed-header .logo:hover { opacity:0.6; filter:alpha(opacity=60); } #fixed-header #nav { margin:13px 28px 0 0; float:right; } #fixed-header #nav li { float:left; padding:0; margin:0; } #fixed-header #nav li a { font-family:'Cabin Bold', Helvetica, Arial, sans-serif; letter-spacing:1.6px; font-size:14px; color:#FFF; display:block; text-transform:uppercase; line-height:1; } #fixed-header #nav li a:hover { color:#79B7B4; } #fixed-header #nav li.current_page_item a { color:#79B7B4; } #fixed-header #nav li.about { margin-right:27px; } #fixed-header #nav li.our-work { margin-right:32px; } #fixed-header .contact-button { float:right; padding:16px 28px 0 13px; margin-right:1px; height:24px; line-height:10px; font-size:14px; background:#79B7B4 url(images/fixed-contact-button-plus.png) no-repeat 87px center; -webkit-transition: background 0.2s ease-out; -moz-transition: background 0.2s ease-out; -o-transition: background 0.2s ease-out; -ms-transition: background 0.2s ease-out; transition: background 0.2s ease-out; color:#FFF; font-family:'Cabin Bold', Helvetica, Arial, sans-serif; letter-spacing:1.6px; display:block; text-transform:uppercase; } #fixed-header .contact-button:hover { background-color:#8CCAC7; } .firefox-fix #fixed-header .contact-button { padding:16px 26px 0 13px; background:#79B7B4 url(images/fixed-contact-button-plus.png) no-repeat 89px 16px; } .fixed-header #fixed-header { top:0; } .fixed-header .contact-info { position:fixed; height:51px; left:0; top:-71px; z-index:100; } .fixed-header .contact-info.active { top:40px; margin-bottom:0; } .fixed-header .contact-info li .text { margin-top:14px; } .fixed-header .contact-info li .phone-number { margin-top:5px; } .fixed-header .contact-info li a { margin-top:9px; } #mobile-nav-container { display:none; float:right; margin-right:2%; position:relative; } #mobile-nav-container .mobile-nav-icon { display:block; width:65px; height:65px; background:#79B7B4 url(images/mobile/mobile-nav-bg.png) no-repeat center center; } #mobile-nav-container select { width:65px; height:65px; position:absolute; top:0; left:0; opacity:0; filter:alpha(opacity=0); } /*-----------------------------------------------------------------------------------*/ /* 7. = Footer /*-----------------------------------------------------------------------------------*/ #footer { border-top:5px solid #616470; padding-top:40px; background-color:#383A44; } #footer .footer-first-column { float:left; margin-right:20px; width:300px; } #footer .footer-first-column h3 { font-size:17px; color:#A9ACB9; text-transform:uppercase; } #footer .footer-first-column h2 { font-family:'Source Sans Pro', Helvetica, Arial, sans-serif; font-weight:600; font-size:38px; color:#FFF; margin:-4px 0 16px 0; } #footer .footer-first-column a { font-family:'Source Sans Pro', Helvetica, Arial, sans-serif; font-weight:600; font-size:21px; color:#FFF; text-transform:uppercase; } #footer .footer-first-column a:hover { color:#79B7B4; } #footer .footer-second-column { float:left; margin:0 20px 0 0; width:380px; min-height:100px; padding-bottom:56px; background:url(images/footer-twitter-icon.png) no-repeat right bottom; } #footer .footer-second-column p { font-family:'Source Sans Pro', Helvetica, Arial, sans-serif; margin:-3px 0 5px 0; font-weight:400; font-size:16px; color:#FFF; font-style:italic; line-height:1.2; } #footer .footer-second-column .time { margin:0 0 15px 0; font-size:14px; color:#79B7B4; font-style:normal; } #footer .footer-second-column p a { color:#79B7B4; } #footer .footer-second-column p a:hover { color:#79B7B4; text-decoration:underline; } #footer .footer-third-column { width:209px; float:right; } #footer .footer-third-column .social-links { margin:0 0 36px 0; } #footer .footer-third-column .social-links li { float:left; margin-right:32px; } #footer .footer-third-column .social-links li a { display:block; width:48px; height:48px; -o-transition: background 0.15s linear; -ms-transition: background 0.15s linear; -moz-transition: background 0.15s linear; -webkit-transition: background 0.15s linear; transition: background 0.15s linear; } #footer .footer-third-column .social-links li.facebook a { background:#616470 url(images/facebook-icon.png) no-repeat center center; } #footer .footer-third-column .social-links li.facebook a:hover { background-color:#415399; } #footer .footer-third-column .social-links li.twitter a { background:#616470 url(images/twitter-icon.png) no-repeat center center; } #footer .footer-third-column .social-links li.twitter a:hover { background-color:#46B4D0; } #footer .footer-third-column .social-links li.linkedin { margin-right:0; } #footer .footer-third-column .social-links li.linkedin a { background:#616470 url(images/linkedin-icon.png) no-repeat center center; } #footer .footer-third-column .social-links li.linkedin a:hover { background-color:#317F98; } #footer .footer-third-column .logo { float:right; margin:0 0 30px 0; -webkit-transition: opacity 0.15s linear; -moz-transition: opacity 0.15s linear; -o-transition: opacity 0.15s linear; -ms-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } #footer .footer-third-column .logo:hover { opacity:0.6; filter:alpha(opacity=60); } #footer .footer-third-column .copyright { text-align:right; font-size:15px; color:#9699A5; font-family:'Source Sans Pro', Helvetica, Arial, sans-serif; } /*-----------------------------------------------------------------------------------*/ /* 8. = Homepage /*-----------------------------------------------------------------------------------*/ .hero-image-container { height:531px; position:relative; } .hero-image-container .loading{ top:50%;left:50%;width:48px;height:48px;margin:-23px 0 0 -23px;z-index:80; position:absolute; } .featured-image-container { position:relative; } .featured-image-container .loading{ top:50%;left:50%;width:48px;height:48px;margin:-23px 0 0 -23px;z-index:80; position:absolute; } .loading .icon, .hero-image-container .loading .shadow{ display:block; position:absolute; width:46px; height:46px; background:url(images/loading.png) no-repeat 0 -48px; -webkit-animation:loading 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite; -webkit-animation:loading 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; -moz-animation:loading 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite; -ms-animation:loading 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite; -o-animation:loading 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite; animation:loading 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite } .loading .icon { top:0; left:0 ;z-index:1 } .loading .shadow { top:2px; left:2px; z-index:0; background-position:0 -92px; } @-webkit-keyframes loading{0%{-webkit-transform:scale(1) rotate(0deg)}50%{-webkit-transform:scale(0.8) rotate(360deg)}100%{-webkit-transform:scale(1) rotate(720deg)}} @-moz-keyframes loading{0%{-moz-transform:scale(1) rotate(0deg)}50%{-moz-transform:scale(0.8) rotate(360deg)}100%{-moz-transform:scale(1) rotate(720deg)}} @-ms-keyframes loading{0%{-ms-transform:scale(1) rotate(0deg)}50%{-ms-transform:scale(0.8) rotate(360deg)}100%{-ms-transform:scale(1) rotate(720deg)}} @-o-keyframes loading{0%{-o-transform:scale(1) rotate(0deg)}50%{-o-transform:scale(0.8) rotate(360deg)}100%{-o-transform:scale(1) rotate(720deg)}} @keyframes loading{0%{transform:scale(1) rotate(0deg)}50%{transform:scale(0.8) rotate(360deg)}100%{transform:scale(1) rotate(720deg)}} .hero-image { width:100%; height:343px; opacity:0; filter:alpha(opacity=0); transform:none !important; text-align:center; overflow:hidden; padding:188px 0 0 0; display:block; border-bottom:5px solid #EAEBED; background-repeat:no-repeat; margin:0 auto; background-clip:border-box; background-color:#383A44; background-origin:padding-box; background-size:cover; background-position:center -10px; position:relative; z-index:50; } .hero-image .hero-text, .hero-image .explore { opacity:1; filter:alpha(opacity=100); } .hero-image .read { opacity:1; filter:alpha(opacity=100); -webkit-transition: opacity 1.2s linear; -moz-transition: opacity 1.2s linear; -o-transition: opacity 1.2s linear; -ms-transition: opacity 1.2s linear; transition: opacity 1.2s linear; } .hero-image .hero-text { width:auto; margin:0 auto; opacity:0; filter:alpha(opacity=0); display:inline-block; } .hero-image .hero-text h3 { font-family:'Source Sans Pro', Helvetica, Arial, sans-serif; font-weight:300; letter-spacing:10.8px; padding:6px 10px 7px 20px; font-size:39px; background-color:#FFF; color:#383A44; margin:0; text-align:center; } .hero-image .hero-text h2 { font-family:'Cabin Bold', Helvetica, Arial, sans-serif; font-size:64px; padding:2px 25px; background-color:#383A44; color:#FFF; margin:0; text-align:center; } .hero-image .explore { text-align:center; opacity:0; filter:alpha(opacity=0); } .hero-image .explore a { margin:0 auto; display:inline-block; height:45px; overflow:hidden; } .hero-image .explore h2 { float:left; text-align:center; overflow:hidden; margin:0; line-height:45px; width:1px; padding:0; background:#79B7B4; color:#FFF; font-size:19px; letter-spacing:2px; font-family:'Cabin Bold', Helvetica, Arial, sans-serif; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .hero-image .explore span { float:left; width:45px; height:45px; background:#79B7B4 url(images/hero-image-plus.png) no-repeat 10px center; display:block; -o-transition: background .5s ease-in-out; -ms-transition: background .5s ease-in-out; -moz-transition: background .5s ease-in-out; -webkit-transition: background .5s ease-in-out; transition: background .5s ease-in-out; } .hero-image .explore a:hover h2 { width:91px; padding:0 9px 0 20px; } .our-latest-work h2 { font-family:'Cabin SemiBold', Helvetica, Arial, sans-serif; font-size:38px; text-align:center; letter-spacing:5px; margin:50px 0; } .work-list { margin:0 0 37px 0; } .work-list .work { margin:0 21px 20px 0; float:left; position:relative; cursor:pointer; width:299px; height:299px; } .work-list .work img { display:block; opacity:1; filter:alpha(opacity=100); } .work-list .work .description { position:absolute; top:0; left:0; opacity:0; filter:alpha(opacity=0); width:233px; height:227px; padding:72px 33px 0 33px; background-color:#79B7B4; text-align:center; } .work-list .work .description h3 { font-family:'Cabin Bold', Helvetica, Arial, sans-serif; font-size:27px; color:#FFF; margin:0 0 18px 0; text-transform:uppercase; } .work-list .work .description p { font-family:'Cabin Medium', Helvetica, Arial, sans-serif; font-size:17px; color:#FFF; margin:0 0 22px 0; } .work-list .work .description .more { font-family:'Cabin Medium', Helvetica, Arial, sans-serif; font-size:17px; color:#FFF; display:inline-block; margin:0 auto; } .work-list .work .description .more .text { float:left; line-height:13px; width:0; height:13px; overflow:hidden; white-space:nowrap; -o-transition: width .5s ease-in-out; -ms-transition: width .5s ease-in-out; -moz-transition: width .5s ease-in-out; -webkit-transition: width .5s ease-in-out; transition: width .5s ease-in-out; } .work-list .work .description .more:hover .text { width:116px; } .work-list .work .description .more .cross { background:url(images/thumb-hover-plus.png) no-repeat; width:13px; height:13px; display:block; float:left; } .work-list .work .description, .work-list .work img { -o-transition: opacity .5s ease-in-out; -ms-transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -webkit-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; } .work-list .work:hover .description { opacity:1; filter:alpha(opacity=100); } .work-list .work:hover img { opacity:0; filter:alpha(opacity=0);} .work-list .last { margin:0 0 20px 0; } .our-latest-work .more-work { margin:0 auto -5px auto; display:block; height:46px; width:100%; text-align:center; background-color:#383A44; overflow:hidden; position:relative; z-index:10; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .our-latest-work .more-work:hover { background-color:#79B7B4; } .our-latest-work .more-work .more-work-container { margin:0 auto; text-align:center; display:inline-block; } .our-latest-work .more-work h3 { float:left; white-space:nowrap; word-break:keep-all; line-height:1; overflow:hidden; width:1px; margin:0; padding:15px 0 0 0; color:#FFF; text-indent:-9999px; font-size:17px; letter-spacing:1px; font-family:'Cabin Bold', Helvetica, Arial, sans-serif; text-align:right; -o-transition: width .3s ease-in-out; -ms-transition: width .3s ease-in-out; -moz-transition: width .3s ease-in-out; -webkit-transition: width .3s ease-in-out; transition: width .3s ease-in-out; } .our-latest-work .more-work:hover h3 { width:163px; text-indent:0; } .our-latest-work .more-work span { margin:0 auto; float:right; width:45px; height:46px; background:url(images/workbar-plus.png) no-repeat 10px center; display:inline-block; } .gray-divider { height:0; border-bottom:5px solid #EAEBED; } .services { padding:50px 0 0 0; text-align:center; } .services h2 { font-family:'Cabin SemiBold', Helvetica, Arial, sans-serif; font-size:38px; letter-spacing:5px; margin:0 0 25px 0; } .services p { font-family:'Source Sans Pro', Helvetica, Arial, sans-serif; letter-spacing:0.6px; font-size:23px; color:#60626E; } .services .services-list { height:575px; background:url(images/services-bg.png) no-repeat center bottom; margin-top:50px; } .services .services-list .service { float:left; text-align:center; } .services .services-list .service h3 { margin:0 0 35px 0; padding-top:38px; text-transform:uppercase; font-size:18px; font-family:'TitilliumText25L', Helvetica, Arial, sans-serif; } .services .services-list .service a span { display:block; width:140px; height:136px; margin:0 auto; background-color:#383A44; background-position:center center; background-repeat:no-repeat; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .services .services-list .service a:hover span { background-color:#79B7B4; } .services .services-list .service a:hover h3 { color:#383A44; } .services .services-list .service-design { width:301px; margin-right:9px; } .services .services-list .service-design a span{ background:#383A44 url(images/services/home-service-design.png) no-repeat center center; } .services .services-list .service-development { width:319px; margin-right:11px; } .services .services-list .service-development a span { background:#383A44 url(images/services/home-service-development.png) no-repeat center center; } .services .services-list .service-media { width:300px; } .services .services-list .service-media a span { background:#383A44 url(images/services/home-service-media.png) no-repeat center center; } .services .services-list .service-app { width:301px; margin-right:9px; } .services .services-list .service-app a span { background:#383A44 url(images/services/home-service-app.png) no-repeat center center; } .services .services-list .service-mobile { width:319px; margin-right:11px; } .services .services-list .service-mobile a span { background:#383A44 url(images/services/home-service-mobile.png) no-repeat center center; } .services .services-list .service-support { width:300px; } .services .services-list .service-support a span { background:#383A44 url(images/services/home-service-support.png) no-repeat center center; } .services .services-list .service-1 { width:301px; margin-right:9px; } .services .services-list .service-2 { width:319px; margin-right:11px; } .services .services-list .service-3 { width:300px; } .services .services-list .service-4 { width:301px; margin-right:9px; } .services .services-list .service-5 { width:319px; margin-right:11px; } .services .services-list .service-6 { width:300px; } .our-process { background-color:#F3F2F2; padding:50px 0 0 0; text-align:center; } .our-process h2 { font-family:'Cabin SemiBold', Helvetica, Arial, sans-serif; font-size:38px; letter-spacing:5px; margin:0 0 25px 0; } .our-process p { font-family:'Source Sans Pro', Helvetica, Arial, sans-serif; letter-spacing:0.6px; font-size:23px; color:#60626E; margin:0 0 19px 0; } .our-process-list { position:relative; height:343px; padding-top:20px; background:url(images/process-bg.png) no-repeat center 28px; } .our-process-list h3 { font-size:20px; cursor:pointer; } .our-process-list #our-process-design { text-align:right; display:inline-block; float:left; margin:17px 0 63px 44px; } .our-process-list #our-process-backend { text-align:right; display:inline-block; float:left; clear:both; margin:0 0 0 -3px; } .our-process-list #our-process-compliance { text-align:left; display:inline-block; float:right; margin:29px 48px 0 0; } .our-process-list #our-process-planning { text-align:left; display:inline-block; float:right; margin:-14px 27px 0 0; } .our-process-list h3 { font-family:'TitilliumText25L', Helvetica, Arial, sans-serif; line-height:1.2; } .our-process-list h3:hover, .our-process-list h3.active { color:#79B7B4; -o-transition: color 0.15s linear; -ms-transition: color 0.15s linear; -moz-transition: color 0.15s linear; -webkit-transition: color 0.15s linear; transition: color 0.15s linear; } .our-process-list a { cursor:default; } .our-process-list .process-1 { position:absolute; z-index:4; top:8px; left:309px; } .our-process-list .process-2 { position:absolute; z-index:3; top:65px; left:291px; } .our-process-list .process-3 { position:absolute; z-index:2; top:106px; left:258px; } .our-process-list .process-4 { position:absolute; z-index:1; top:140px; left:211px; } .our-process-list img { display:block; opacity:0; filter:alpha(opacity=0); -webkit-transition: opacity 0.3s linear; -moz-transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; -ms-transition: opacity 0.3s linear; transition: opacity 0.3s linear; } .our-process-list img.read { opacity:1; filter:alpha(opacity=100); } .our-process-list img.unread { opacity:0.08; filter:alpha(opacity=8); } .mobile-our-process { display:none; } .mobile-our-process img { display:block; margin:0 auto; } .your-project-with-us { background:url(images/your-project-with-us-bg.jpg) repeat-x; height:223px; position:relative; z-index:100; } .your-project-with-us-inner { margin:0 auto; width:550px; height:210px; padding-top:23px; background:url(images/your-project-with-us-inner.png) no-repeat; } .your-project-with-us .your-project-with-us-box { width:330px; height:178px; margin:0 auto; position:relative; left:10px; } .your-project-with-us .plan-box { width:330px; height:42px; display:block; padding-top:136px; background:url(images/plan-box.png) no-repeat; margin:0 auto; } .your-project-with-us .plan-box h2 { font-size:27px; color:#FFF; text-transform:uppercase; letter-spacing:-0.8px; text-align:center; } .your-project-with-us .active-plan-box { position:absolute; left:0; top:0; width:330px; height:111px; z-index:10; display:block; padding-top:67px; background:url(images/plan-active-box.png) no-repeat; margin:0 auto; } .your-project-with-us .active-plan-box h2 { font-size:27px; color:#FFF; margin:0; text-transform:uppercase; letter-spacing:2px; text-align:center; } .your-project-with-us .active-plan-box h3 { font-size:17px; color:#FFF; margin:0; text-transform:uppercase; letter-spacing:1px; text-align:center; } .your-project-with-us .active-plan-box .dark-text { color:#383A44; } .your-project-with-us .plan-box { -webkit-transform: rotateX(0deg) rotateY(0deg); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-transform: rotateX(0deg) rotateY(0deg); -moz-transform-style: preserve-3d; -moz-backface-visibility: hidden; -ms-transform: rotateX(0deg) rotateY(0deg); -ms-transform-style: preserve-3d; -ms-backface-visibility: hidden; transform: rotateX(0deg) rotateY(0deg); transform-style: preserve-3d; backface-visibility: hidden; /* -- transition is the magic sauce for animation -- */ -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .flip .plan-box { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); } .your-project-with-us .active-plan-box { -webkit-transform: rotateY(-180deg); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-transform: rotateY(-180deg); -moz-transform-style: preserve-3d; -moz-backface-visibility: hidden; -ms-transform: rotateY(-180deg); -ms-transform-style: preserve-3d; -ms-backface-visibility: hidden; transform: rotateY(-180deg); transform-style: preserve-3d; backface-visibility: hidden; /* -- transition is the magic sauce for animation -- */ -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .flip .active-plan-box { -webkit-transform: rotateX(0deg) rotateY(0deg); -moz-transform: rotateX(0deg) rotateY(0deg); -ms-transform: rotateX(0deg) rotateY(0deg); transform: rotateX(0deg) rotateY(0deg); } /*-----------------------------------------------------------------------------------*/ /* 9. = Our Work Page /*-----------------------------------------------------------------------------------*/ .featured-image { width:100%; height:144px; padding:73px 0 0 0; opacity:0; filter:alpha(opacity=0); overflow:hidden; border-bottom:5px solid #EAEBED; text-align:center; background-image:url(images/featured-image.jpg); background-repeat:no-repeat; margin:0 auto; background-attachment:fixed; background-clip:border-box; background-origin:padding-box; background-size:cover; } .featured-image h1 { line-height:74px; opacity:0; filter:alpha(opacity=0); color:#FFF; background-color:#383A44; display:inline-block; padding:0 15px; text-transform:uppercase; } .case-study { padding:52px 0; background-color:#EAEBED; } .case-study .icon { width:57px; height:55px; display:block; background:url(images/case-study-icon.jpg) no-repeat; margin:0 auto; } .case-study h2 { font-size:28px; font-family:'Cabin SemiBold',Helvetica,Arial,sans-serif; text-align:center; margin:28px 0 23px 0; } .case-study p { font-family:'Source Sans Pro', Helvetica, Arial, sans-serif; letter-spacing:0.6px; font-size:20px; color:#60626E; text-align:center; margin:0 0 50px 0; } .case-study .work-list { margin-bottom:0; } .case-study .work { margin-bottom:0; } .our-work { padding:46px 0 0 0; } .our-work .icon { width:57px; height:55px; display:block; background:url(images/our-work-icon.jpg) no-repeat; margin:0 auto; } .our-work h2 { font-size:28px; font-family:'Cabin SemiBold',Helvetica,Arial,sans-serif; text-align:center; margin:28px 0 40px 0; } .our-work .work-list { margin-bottom:44px; } .our-work .work { } /*-----------------------------------------------------------------------------------*/ /* 9. = Services Page /*-----------------------------------------------------------------------------------*/ .service-featured-image { border-bottom:5px solid #EAEBED; } .service-box { padding:40px 0 80px 0; } .service-box p { font-family:'Source Sans Pro', Helvetica, Arial, sans-serif; letter-spacing:0.6px; font-size:20px; color:#60626E; margin:0; } .service-box h2 { font-size:28px; line-height:1.2; margin:0 0 22px 0; font-family:'Cabin SemiBold',Helvetica,Arial,sans-serif; letter-spacing:4px; } .service-box .service-thumb { float:left; } .service-box .service-content { float:right; width:460px; margin-top:47px; } .service-box .service-content img { margin:0 0 23px 0; } .service-box-alt { background-color:#EAEBED; } .service-box-alt .service-thumb { float:right; width:445px;} .service-box-alt .service-content { float:left; width:450px; text-align:right; margin-right:45px; } .service-box-design .service-thumb { margin-top:40px; } .service-box-web-development-custom-cms-solutions .service-thumb { margin-top:50px; } .service-box-social-media-apps-management .service-thumb { margin-top:52px; } .service-box-ios-androidapp-development .service-thumb { margin-top:42px; } .service-box-mobile-tabletresponsive-themes .service-thumb { margin-top:18px; } .service-box-wordpress-themes-support .service-thumb { margin-top:38px; } /*-----------------------------------------------------------------------------------*/ /* 10. = 404 Page /*-----------------------------------------------------------------------------------*/ .page404 { width:100%; height:550px; padding:195px 0 0 0; overflow:hidden; background-image:url(images/page404-bg.jpg); background-repeat:no-repeat; margin:0 auto; background-attachment:fixed; background-clip:border-box; background-origin:padding-box; background-size:cover; } .page404 h1 { float:left; padding:0 14px; margin:0; font-family:'Cabin Bold', Helvetica, Arial, sans-serif; font-size:120px; background-color:#79B7B4; color:#FFF; line-height:122px; } .page404 h2 { float:left; margin:48px 0 0 0; padding:0 17px; font-family:'Cabin Bold', Helvetica, Arial, sans-serif; font-size:64px; background-color:#383A44; color:#FFF; line-height:74px; } .page404 h3 { padding:0 2px 0 8px; width:670px; text-align:center; margin:0; display:inline-block; font-family:'Source Sans Pro', Helvetica, Arial, sans-serif; font-weight:300; letter-spacing:9px; font-size:34px; background-color:#FFF; color:#383A44; line-height:57px; } .page404 p { padding:14px 20px; width:640px; background-color:#383A44; color:#FFF; margin:0; font-size:20px; font-family:'Source Sans Pro', Helvetica, Arial, sans-serif; font-style:italic; } .page-thank h3 { width:800px; } .page-thank p { width:750px; padding:14px 30px; } /*-----------------------------------------------------------------------------------*/ /* 11. = Plan Your Project Page /*-----------------------------------------------------------------------------------*/ .plan-your-project-container { text-align:center; padding-top:20px; } .plan-your-project-container p { font-family:'Source Sans Pro', Helvetica, Arial, sans-serif; letter-spacing:0.6px; font-size:20px; color:#60626E; margin:0; } .plan-your-project-container h2 { font-size:28px; line-height:1.2; margin:0; padding:37px 0 32px 0; font-family:'Cabin SemiBold',Helvetica,Arial,sans-serif; letter-spacing:4px; text-transform:uppercase; } .plan-your-project-container form .field { text-align:left; margin:0 0 20px 0; } .plan-your-project-container form h2 { padding:37px 0; } .plan-your-project-container label { text-align:left; margin:0 0 18px 0; font-family:'Source Sans Pro', Helvetica, Arial, sans-serif; line-height:1.1; font-size:16px; font-weight:normal; display:block; } .plan-your-project-container input[type=text] { height:30px; width:920px; margin:0; line-height:30px; background-color:#E1E2E5; border:none; padding:0 10px; font-family:'Source Sans Pro', Helvetica, Arial, sans-serif; font-size:16px; color:#383A44; -o-transition: color 0.15s linear; -ms-transition: color 0.15s linear; -moz-transition: color 0.15s linear; -webkit-transition: color 0.15s linear; transition: color 0.15s linear; } .plan-your-project-container .one-second input[type=text] { width:439px; } .plan-your-project-container .one-third input[type=text] { width:280px; } .plan-your-project-container textarea { height:152px; width:920px; resize:none; margin:0; background-color:#E1E2E5; border:none; padding:5px 10px; font-family:'Source Sans Pro', Helvetica, Arial, sans-serif; font-size:16px; color:#383A44; } .plan-your-project-container .submit { margin:0 auto 46px auto; display:block; height:46px; width:100%; text-align:center; background-color:#383A44; overflow:hidden; position:relative; z-index:10; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .plan-your-project-container .submit:hover { background-color:#79B7B4; } .plan-your-project-container .submit .submit-container { margin:0 auto; text-align:center; display:inline-block; } .plan-your-project-container .submit h3 { float:left; white-space:nowrap; word-break:keep-all; line-height:1; overflow:hidden; width:219px; margin:0; padding:15px 0 5px 0; color:#FFF; text-indent:-9999px; font-size:17px; letter-spacing:1px; font-family:'Cabin Bold', Helvetica, Arial, sans-serif; text-align:right; } .plan-your-project-container .submit span { margin:0 auto; float:right; width:45px; height:46px; background:url(images/workbar-plus.png) no-repeat 10px center; display:inline-block; } .plan-your-project-container input.validate-error, .plan-your-project-container label.validate-error { color:#FF0000; } .plan-your-project-container .recaptchatable #recaptcha_response_field { height:auto; line-height:1; } .plan-your-project-container form .recaptcha-field { margin:0 0 38px 0; } .plan-your-project-container .recaptcha-field label { text-align:center; } .plan-your-project-container .recaptcha-field #recaptcha_area { margin:0 auto; } /*-----------------------------------------------------------------------------------*/ /* 12. = Work Page /*-----------------------------------------------------------------------------------*/ .our-work .work-list .work.disabled { cursor:default; } .our-work .work-list .work.disabled:hover .description { opacity:0; filter:alpha(opacity=0); } .our-work .work-list .work.disabled:hover img { opacity:1; filter:alpha(opacity=100); } .work-detail { height:0; margin:0; overflow:hidden; position:relative; -o-transition: height .4s ease-in-out; -ms-transition: height .4s ease-in-out; -moz-transition: height .4s ease-in-out; -webkit-transition: height .4s ease-in-out; transition: height .4s ease-in-out; } .work-detail.active { height:516px; margin:0 0 25px 0; } .work-detail .container { position:relative; } .work-detail .close { width:20px; height:20px; display:block; background:url(images/icon-close.png) no-repeat; position:absolute; top:39px; right:20px; z-index:100; -o-transition: opacity .4s ease-in-out; -ms-transition: opacity .4s ease-in-out; -moz-transition: opacity .4s ease-in-out; -webkit-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out; } .work-detail .close:hover { opacity:0.5; filter:alpha(opacity=50); } .work-detail .up-arrow { width:25px; height:19px; display:block; background:url(images/work-detail-up-arrow.png) no-repeat; float:left; } .work-detail-left .up-arrow { margin-left:137px; } .work-detail-middle .up-arrow { margin-left:457px; } .work-detail-right .up-arrow { margin-left:777px; } .work-detail-content { background-color:#EAEBED; } .work-detail ul { margin:0; padding:0; list-style:none; } .work-detail ul li { margin:0; padding:0; list-style:none; } .work-detail .work-thumb { float:left; padding:90px 0 0 26px; width:594px; height:426px; background:url(images/mac-bg.png) no-repeat center bottom; } .work-detail .work-thumb .work-slider { width:568px; height:319px; } .work-detail .work-thumb .slides li { display:none; } .work-detail .work-thumb .flex-control-nav { display:none; } .work-detail .work-thumb .flex-direction-nav .prev { background:#383A44 url(images/slider-left-arrow.png) no-repeat 20px center; width:57px; height:57px; display:block; cursor:pointer; text-indent:-9999px; position:absolute; top:230px; left:-92px; z-index:1000; -o-transition: background .3s ease-in-out; -ms-transition: background .3s ease-in-out; -moz-transition: background .3s ease-in-out; -webkit-transition: background .3s ease-in-out; transition: background .3s ease-in-out; } .work-detail .work-thumb .flex-direction-nav .prev:hover { background-color:#79B7B4; } .work-detail .work-thumb .flex-direction-nav .next { background:#383A44 url(images/slider-right-arrow.png) no-repeat 23px center; width:57px; height:57px; display:block; cursor:pointer; text-indent:-9999px; position:absolute; top:230px; right:-92px; z-index:1000; -o-transition: background .3s ease-in-out; -ms-transition: background .3s ease-in-out; -moz-transition: background .3s ease-in-out; -webkit-transition: background .3s ease-in-out; transition: background .3s ease-in-out; } .work-detail .work-thumb .flex-direction-nav .next:hover { background-color:#79B7B4; } .work-detail .work-description { width:273px; float:right; padding-top:123px; } .work-detail .work-description h3 { font-family:'Cabin Bold', Helvetica, Arial, sans-serif; font-size:27px; margin:0 0 20px 0; text-transform:uppercase; } .work-detail .work-description p { font-family:'Cabin Medium', Helvetica, Arial, sans-serif; font-size:17px; margin:0 0 30px 0; letter-spacing:0.5px; } .work-detail .work-services {} .work-detail .work-services li { cursor:pointer; float:left; margin-right:14px; position:relative; display:block; width:37px; height:37px; background:#383A44 url(images/work-description-service.png) no-repeat center center; } .work-detail .work-services li.app { background-image:url(images/services/slider-service-icon-app.jpg); } .work-detail .work-services li.mobile { background-image:url(images/services/slider-service-icon-mobile.jpg); } .work-detail .work-services li.design { background-image:url(images/services/slider-service-icon-design.jpg); } .work-detail .work-services li.development { background-image:url(images/services/slider-service-icon-development.jpg); } .work-detail .work-services li.media { background-image:url(images/services/slider-service-icon-media.jpg); } .work-detail .work-services li.support { background-image:url(images/services/slider-service-icon-support.jpg); } .tooltip { position:absolute; z-index:1030; display:block; padding:5px; font-size:11px; opacity:0; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); visibility:visible; } .tooltip.in { opacity:0.8; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); } .tooltip.top { margin-top:-3px; } .tooltip.right { margin-left:3px; } .tooltip.bottom { margin-top:3px; } .tooltip.bottom-left { margin-top:3px; } .tooltip.left { margin-left:-3px; } .tooltip-inner { max-width:200px; padding:4px 10px; color:#FFF; text-align:center; text-decoration:none; background-color:#383A44; font-family:'Cabin Medium', Helvetica, Arial, sans-serif; font-size:15px; } .tooltip-arrow { position:absolute; width:0; height:0; border-color:transparent; border-style:solid; } .tooltip.top .tooltip-arrow { bottom:0; left:50%; margin-left:-5px; border-top-color:#383A44; border-width:5px 5px 0; } .tooltip.right .tooltip-arrow { top:50%; left:0; margin-top:-5px; border-right-color:#383A44; border-width:5px 5px 5px 0; } .tooltip.left .tooltip-arrow { top:50%; right:0; margin-top:-5px; border-left-color:#383A44; border-width:5px 0 5px 5px; } .tooltip.bottom .tooltip-arrow { top:0; left:50%; margin-left:-5px; border-bottom-color:#383A44; border-width:0 5px 5px; } .tooltip.bottom-left .tooltip-arrow { top:0; left:25%; margin-left:-5px; border-bottom-color:#383A44; border-width:0 5px 5px; } /*-----------------------------------------------------------------------------------*/ /* 13. = About Page /*-----------------------------------------------------------------------------------*/ .about-founded { text-align:center; padding-top:48px; } .about-founded h2 { font-family:'Cabin Bold', Helvetica, Arial, sans-serif; font-size:28px; letter-spacing:4px; margin:0 0 17px 0; text-transform:uppercase; } .about-founded p { font-family:'Source Sans Pro', Helvetica, Arial, sans-serif; letter-spacing:0; font-size:20px; color:#60626E; margin:0 0 25px 0; } .about-founded .about-founded-box-container { padding-bottom:59px; background:url(images/about/about-middle-divider.jpg) repeat-y center bottom; } .about-founded span { background-image:url(images/about/icon-founded.png); } .about-founded img { display:block; margin:0 auto; } .icon-box { width:57px; height:55px; background-color:#383A44; background-position:center center; background-repeat:no-repeat; display:block; margin:0 auto; } .about-features { text-align:center; padding-top:132px; background:url(images/about/about-features-bg.png) no-repeat center top; } .about-features br { display:none; } .about-features h2 br { display:block; } .about-features .finished-project { float:left; width:440px; background:#F8F8F8; } .about-features .finished-project img { margin:0 auto 70px auto; } .about-features .finished-project .icon-box { background-image:url(images/about/icon-finished-projects.png); margin:0 0 29px 200px; } .about-features h2 { font-family:'Cabin Bold', Helvetica, Arial, sans-serif; font-size:28px; letter-spacing:4px; margin:0 0 42px 0; line-height:1.3; text-align:center; text-transform:uppercase; } .about-features p { font-family:'Source Sans Pro', Helvetica, Arial, sans-serif; letter-spacing:0.3px; font-size:20px; color:#60626E; margin:0 0 68px 0; line-height:1.2; } .about-features p a { color:#79b7b4; } .about-features p a:hover { text-decoration:underline; } .about-features .team-something { float:right; width:440px; background:#F8F8F8; } .about-features .team-something img { margin:10px auto 73px auto; } .about-features .team-something .icon-box { background-image:url(images/about/icon-team-something.png); margin:0 0 29px 193px; } .how-create-project { text-align:center; background:url(images/about/how-create-project-bg.png) no-repeat center 190px; } .how-create-project .top-icon { background-image:url(images/about/icon-create-project.png); margin-bottom:57px; } .how-create-project h2 { font-family:'Cabin Bold', Helvetica, Arial, sans-serif; font-size:28px; letter-spacing:4px; margin:0 0 65px 0; line-height:1.3; text-transform:uppercase; } .how-create-project p { font-family:'Source Sans Pro', Helvetica, Arial, sans-serif; letter-spacing:0; font-size:20px; color:#60626E; margin:0 0 78px 0; line-height:1.2; } .how-create-project .how-create-project-caption br { display:none; } .how-create-project .top-step-list { margin:0 auto 74px auto; width:900px; } .how-create-project .top-step-list p { display:none; } .how-create-project .bottom-step-list { margin:0 auto; width:900px; padding-bottom:84px;} .how-create-project .bottom-step-list p { display:none; } .how-create-project .step { float:left; cursor:pointer; } .how-create-project .step .icon-box { float:left; margin:0 20px 0 0; } .how-create-project .step:hover .icon-box { background-color:#79B7B4; } .how-create-project .step h3 { float:left; width:103px; margin:0; letter-spacing:1px; text-align:left; line-height:1.2; font-family:'Cabin Bold', Helvetica, Arial, sans-serif; font-size:15px; color:#383A44; text-transform:uppercase; } .how-create-project .step:hover h3 { color:#79B7B4; } .how-create-project .step-text { background-color:#383A44; height:111px; margin:0 0 76px 0; position:relative; } .how-create-project .step-text h2 { color:#FFF; width:940px; margin:0; position:absolute; top:21px; opacity:0; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); font-size:26px; font-weight:300; font-family:'Source Sans Pro', Helvetica, Arial, sans-serif; -o-transition: opacity .4s ease-in-out; -ms-transition: opacity .4s ease-in-out; -moz-transition: opacity .4s ease-in-out; -webkit-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out; } .how-create-project .step-text .active { opacity:1; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); } #step-discuss .icon-box { background-image:url(images/about/icon-step-discuss.png); } #step-goals .icon-box { background-image:url(images/about/icon-step-goals.png); } #step-pallete .icon-box { background-image:url(images/about/icon-step-pallete.png); } #step-structure .icon-box { background-image:url(images/about/icon-step-structure.png); } #step-design .icon-box { background-image:url(images/about/icon-step-design.png); } #step-launched .icon-box { background-image:url(images/about/icon-step-launched.png); } #step-security .icon-box { background-image:url(images/about/icon-step-security.png); } #step-testing .icon-box { background-image:url(images/about/icon-step-testing.png); } #step-functions .icon-box { background-image:url(images/about/icon-step-functions.png); } #step-develop .icon-box { background-image:url(images/about/icon-step-develop.png); } .about-testimonial { background-color:#F3F2F2; text-align:center; padding:50px 0 50px 0; } .about-testimonial h2 { font-family:'Cabin Bold', Helvetica, Arial, sans-serif; font-size:28px; letter-spacing:4px; margin:0 0 25px 0; line-height:1.3; text-transform:uppercase; } .about-testimonial .testimonial-divider { width:77px; height:2px; display:block; margin:0 auto 42px auto; background-color:#383A44; } .about-testimonial p { font-size:25px; color:#5E606A; letter-spacing:2px; font-family:'Proxima Nova Light It', Helvetica, Arial, sans-serif; margin:0 0 25px 0; } .about-testimonial .name { font-family:'Cabin Bold', Helvetica, Arial, sans-serif; color:#5E606A; margin:0; font-size:15px; font-style:normal; font-weight:normal; text-transform:uppercase; } .case-study-content .about-testimonial { background-color:#F3F2F2; text-align:center; padding:50px 0 50px 0; } .case-study-content .about-testimonial h2 { font-family:'Cabin Bold', Helvetica, Arial, sans-serif; font-size:28px; letter-spacing:4px; margin:0 0 25px 0; line-height:1.3; text-transform:uppercase; } .case-study-content .about-testimonial .testimonial-divider { width:77px; height:2px; display:block; margin:0 auto 42px auto; background-color:#383A44; } .case-study-content .about-testimonial p { font-size:25px; color:#5E606A; letter-spacing:2px; font-family:'Proxima Nova Light It', Helvetica, Arial, sans-serif; margin:0 0 25px 0; } .case-study-content .about-testimonial .name { font-family:'Cabin Bold', Helvetica, Arial, sans-serif; color:#5E606A; margin:0; font-size:15px; font-style:normal; font-weight:normal; text-transform:uppercase; } .founded-slider { margin:0 auto; width:484px; height:283px; } .founded-slider .flex-control-nav { display:none; } .founded-slider .flex-direction-nav { display:none; } .founded-slider .slides li { display:none; } /*-----------------------------------------------------------------------------------*/ /* 14. = Case Study Page /*-----------------------------------------------------------------------------------*/ .case-study-featured-image { border-bottom:5px solid #EAEBED; height:366px; padding-top:165px; background-image:url(images/featured-image-case-study.jpg); text-align:center; } .case-study-featured-image h1 { color:#FFF; background-color:#79B7B4; margin:0 auto; opacity:0; filter:alpha(opacity=0); } .case-study-featured-image p { line-height:50px; color:#383A44; display:inline-block; opacity:0; filter:alpha(opacity=0); padding:0 10px; line-height:53px; background-color:#FFF; font-family:'Source Sans Pro', Helvetica, Arial, sans-serif; letter-spacing:0.6px; font-weight:300; font-size:39px; margin:0 auto; } .case-study-featured-image p:first-child { padding:3px 10px 0 10px; } .case-study-featured-image p:last-child { padding:0 10px 7px 10px; } .case-study-featured-image .explore a { margin:0 auto; display:inline-block; height:45px; text-align:center; } .case-study-featured-image .explore a h2 { float:left; text-align:center; overflow:hidden; margin:0; line-height:45px; width:1px; background:#79B7B4; color:#FFF; font-size:19px; letter-spacing:2px; font-family:'Cabin Bold', Helvetica, Arial, sans-serif; width:107px; padding:0 0 0 11px; } .case-study-featured-image .explore span { float:left; width:45px; height:45px; background:#79B7B4 url(images/hero-image-plus.png) no-repeat 10px center; display:block; } .case-study-content { text-align:center; } .case-study-content h2 { font-family:'Cabin Bold', Helvetica, Arial, sans-serif; font-size:28px; letter-spacing:4px; color:#383A44; margin:0 0 31px 0; line-height:1.3; text-transform:uppercase; } .case-study-content h3 { font-family:'TitilliumText25L', Helvetica, Arial, sans-serif; font-size:22px; letter-spacing:2px; color:#383A44; margin:0 0 45px 0; line-height:1.3; text-transform:uppercase; } .case-study-content p { font-family:'Source Sans Pro', Helvetica, Arial, sans-serif; letter-spacing:0.7px; font-size:23px; color:#60626E; margin:0 0 47px 0; line-height:1.3; } .case-study-content .column { float:left; width:266px; padding:0 10px; margin-right:40px; text-align:center; } .case-study-content .column-last { margin-right:0; } .case-study-content .column p { font-family:'Source Sans Pro', Helvetica, Arial, sans-serif; letter-spacing:0.8px; font-size:18px; color:#FFF; margin:0 0 11px 0; line-height:1.2; font-weight:300; } .case-study-content .column img { margin:0 auto 26px auto; } .case-study-content .column .thumbnail { height:90px; } .case-study-content .column h3 { margin:0 0 26px 0; font-size:20px; } .case-study-content .white-box { background-color:#F8F8F8; padding:47px 0 50px 0; } .case-study-content .gray-box { background-color:#F3F2F2; padding:47px 0 50px 0; } .case-study-content .green-box { background-color:#79B7B4; padding:47px 0 50px 0; } .case-study-content .green-box p { color:#FFF; } .case-study-content .green-box .column { float:left; width:266px; padding:0 10px; margin-right:40px; text-align:center; } .case-study-content .green-box .column-last { margin-right:0; } .case-study-content .green-box .column p { font-family:'Source Sans Pro', Helvetica, Arial, sans-serif; letter-spacing:0.8px; font-size:18px; color:#FFF; margin:0 0 11px 0; line-height:1.2; font-weight:300; } .case-study-content .green-box .column img { margin:0 auto 26px auto; } .case-study-content .white-box .column { margin-bottom:38px; } .case-study-content .white-box .column p { color:#60626E; } .case-study-content .white-box .column .thumbnail { height:210px; } .case-study-content .brand-box h3.first { margin:0; } .case-study-content .wireframes-box { padding:47px 0 0 0; } .case-study-content .wireframes-box img { display:block; } .case-study-content .wireframes-black-box { background-color:#383A44; padding:22px 0 17px 0; } .case-study-content .wireframes-black-box h1 { font-size:32px; color:#FFF; margin:0; } .case-study-content .design-box { padding:47px 0 60px 0; } .case-study-content .design-box h3 { } .case-study-content .design-box span { display:block; margin:45px 0; font-family:'Source Sans Pro', Helvetica, Arial, sans-serif; letter-spacing:0.8px; font-size:18px; color:#60626E; line-height:1.2; } .case-study-content .case-study-slider-container { width:757px; height:427px; position:relative; padding:33px 35px 169px 35px; margin:0 auto; background:url(images/case-study/case-study-slider-bg.png) no-repeat; } .case-study-content .case-study-slider { width:757px; height:427px; } .case-study-content .case-study-slider .slides li { display:none; } .case-study-content .case-study-slider .flex-control-nav { display:none; } .case-study-content .case-study-slider .flex-direction-nav .prev { background:#383A44 url(images/slider-left-arrow.png) no-repeat 20px center; width:57px; height:57px; display:block; cursor:pointer; text-indent:-9999px; position:absolute; top:230px; left:-56px; z-index:1000; -o-transition: background .3s ease-in-out; -ms-transition: background .3s ease-in-out; -moz-transition: background .3s ease-in-out; -webkit-transition: background .3s ease-in-out; transition: background .3s ease-in-out; } .case-study-content .case-study-slider .flex-direction-nav .prev:hover { background-color:#79B7B4; } .case-study-content .case-study-slider .flex-direction-nav .next { background:#383A44 url(images/slider-right-arrow.png) no-repeat 23px center; width:57px; height:57px; display:block; cursor:pointer; text-indent:-9999px; position:absolute; top:230px; right:-56px; z-index:1000; -o-transition: background .3s ease-in-out; -ms-transition: background .3s ease-in-out; -moz-transition: background .3s ease-in-out; -webkit-transition: background .3s ease-in-out; transition: background .3s ease-in-out; } .case-study-content .case-study-slider .flex-direction-nav .next:hover { background-color:#79B7B4; } .case-study-content .front-end-box { padding:47px 0 1px 0; } .case-study-content .front-end-box ul { margin:0 0 40px 0; } .case-study-content .front-end-box li { float:left; width:240px; padding:0 0 0 73px; text-align:left; margin:0 0 35px 0; } .case-study-content .front-end-box li.code-line { background:url(images/case-study/case-sutdy-icon-code-line.png) no-repeat left center; } .case-study-content .front-end-box li.launch-brief { background:url(images/case-study/case-sutdy-icon-launch-brief.png) no-repeat left center; } .case-study-content .front-end-box li.brief { background:url(images/case-study/case-sutdy-icon-brief.png) no-repeat left center; } .case-study-content .front-end-box li.bug { background:url(images/case-study/case-sutdy-icon-bug.png) no-repeat left center; } .case-study-content .front-end-box li.page { background:url(images/case-study/case-sutdy-icon-page.png) no-repeat left center; } .case-study-content .front-end-box li.java { background:url(images/case-study/case-sutdy-icon-java.png) no-repeat left center; } .case-study-content .front-end-box li h2 { font-family:'Cabin Bold', Helvetica, Arial, sans-serif; font-size:26px; font-weight:700; margin:0; } .case-study-content .front-end-box li h3 { font-family:'Cabin Medium', Helvetica, Arial, sans-serif; font-size:18px; margin:0; letter-spacing:2px; } .case-study-content .front-end-box .column p { font-family:'Source Sans Pro', Helvetica, Arial, sans-serif; font-weight:400; letter-spacing:0.8px; font-size:18px; color:#60626E; line-height:1.2; margin:0; } .case-study-content .front-end-box .column { width:460px; float:left; margin:0; padding:0; text-align:left; } .case-study-content .front-end-box .column-last { width:460px; float:right; } .case-study-content .black-box { background-color:#383A44; text-align:left; } .case-study-content .black-box .container { width:440px; position:relative; padding:43px 0 20px 500px; } .case-study-content .black-box h2 { color:#FFF; margin:0 0 22px 0; } .case-study-content .black-box h3 { color:#FFF; font-size:23px; font-family:'Source Sans Pro', Helvetica, Arial, sans-serif; line-height:1.2; text-transform:capitalize; margin:0 0 25px 0; } .case-study-content .black-box h3 a { color:#79B7B4; letter-spacing:0.5; } .case-study-content .black-box h3 a:hover { text-decoration:underline; } .case-study-content .black-box p { color:#FFF; font-size:18px; margin:0 0 25px 0; } .case-study-content .black-box img { position:absolute; bottom:0; left:0; z-index:100; }