#slide-1, #slide-2 {line-height:1.4;} .page_content p {margin-bottom:10px; line-height:1.4;} img.wwdo {max-height:70px; max-width:70px;} #contact-details p {font-size:18px !important;} ul.mobile_menu_ul {position:fixed; background-color:#ccc; width:100%; top:78px; padding:0; margin:0; z-index:9999999999; display:none;} ul.mobile_menu_ul li {display:block; border-bottom:1px #666 solid;} ul.mobile_menu_ul li a {display:block; padding-top:10px; padding-bottom:10px; padding-left:20px;} .mobile-nav-container {cursor:pointer;} .div_slide2 { width:30%; } @media screen and (max-width: 800px) { .div_slide2 { width:80%; } } /* Theme Name: Metropolitan Version: 2.0 Author: MagnaThemes Support: info@magna-themes.com TABLE OF CONTENTS: 1. RESET CSS 2. GENERAL 3. HOME VARIATIONS 4. PORTFOLIO 5. SERVICES 6. ABOUT 7. TESTIMONIALS 8. CONTACT 9. RESPONSIVE STYLES ( for Mobile Phones and Tablets ) */ /*=====================================================================================*/ /* 1. RESET CSS */ /*=====================================================================================*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { width: 100%; height: 100%; padding-top: 78px; font-weight: normal; line-height: 1; font-family: 'Raleway', sans-serif; font-size: 15px; color: #333333; letter-spacing: 1px; overflow-x: hidden;} a { cursor: pointer; text-decoration: none; color: #990000; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } .clear { clear: both; } /*=====================================================================================*/ /* 2. GENERAL */ /*=====================================================================================*/ /*-- Typography --*/ h1, h2, h3, h4, h5, h6 { font-weight: normal; font-family: 'Open Sans', sans-serif; } h1 { font-size: 36px; margin-bottom: 30px; } h2 { font-size: 27px; margin-bottom: 27px; } h3 { font-size: 24px; margin-bottom: 24px; } h4 { font-size: 20px; margin-bottom: 20px; } h5 { font-size: 18px; margin-bottom: 20px; } h6 { font-size: 16px; margin-bottom: 20px; } span.red { color: #FF0000; } blockquote { margin: 40px 0px; padding-left: 20px; line-height: 170%; border-left: 4px solid #333; font-size: 13px; font-style: italic; } code { display: inline-block; line-height: 170%; margin-bottom: 45px; padding: 30px; background: #FEFEFE; border-left: 3px solid #999; color: #666; white-space: normal; } small { font-size: smaller; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } dl { margin: 0 20px; } dt { font-weight: bold; } dd { margin: 0 0 20px; } ol, ul { margin: 16px 0; padding: 0 0 0 40px; } address { font-style: italic; margin: 0 0 24px; } table { width: 100%; margin-bottom: 40px; border: 1px solid #E4E4E4; border-collapse: separate; border-spacing: 0; } th { padding: 10px 20px; border-left: 1px solid #E4E4E4; text-align: left; font-size: 14px; } td { padding: 10px 15px; border-left: 1px solid #E4E4E4; border-top: 1px dotted #E4E4E4; text-align: left; font-size: 13px; } table th:first-child, table td:first-child { border-left: 0px; } fieldset { margin-bottom: 50px; padding: 30px; border: 1px solid #E4E4E4; } legend { padding: 0px 10px; font-size: 12px; } label { font-size: 13px; } input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="url"], input[type="search"], input[type="file"] { width: 250px; margin-bottom: 20px; padding: 8px 10px; border: 1px solid #E4E4E4; font-size: 13px; font-family: 'Open Sans', sans-serif; color: #666; } textarea { width: 250px; margin-bottom: 20px; padding: 8px 10px; border: 1px solid #E4E4E4; font-size: 13px; font-family: 'Open Sans', sans-serif; color: #666; } select { min-width: 150px; margin-bottom: 20px; padding: 8px 10px; border: 1px solid #E4E4E4; font-family: 'Open Sans', sans-serif; color: #666; } input[type="submit"], input[type="button"], input[type="reset"] { margin-right: 10px; padding: 8px 17px; background: #333; font-family: 'Open Sans', sans-serif; color: #FFF; font-size: 13px; border: 0px; cursor: pointer; } .loading { height: 200px; background: url('images/loading.gif') center center no-repeat; } /*-- Images --*/ .center-image { display: block; margin: 0 auto; margin-bottom: 20px; } /*-- Grid System --*/ .full { width: 100%; } .one_half, .one_half_last { width: 46%; margin-right: 8%; } .one_third, .one_third_last { width: 30%; margin-right: 5%; } .two_third, .two_third_last { width: 65%; margin-right: 5%; } .one_fourth, .one_fourth_last { width: 22%; margin-right: 4%; } .two_fourth, .two_fourth_last { width: 48%; margin-right: 4%; } .three_fourth, .three_fourth_last { width: 74%; margin-right: 4%; } .one_fifth, .one_fifth_last { width: 16%; margin-right: 4%; } .two_fifth, .two_fifth_last { width: 36%; margin-right: 4%; } .three_fifth, .three_fifth_last { width: 56%; margin-right: 4%; } .four_fifth, .four_fifth_last { width: 76%; margin-right: 4%; } .one_half, .one_third, .two_third, .one_fourth, .two_fourth, .three_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .two_sixth, .three_sixth, .four_sixth, .five_sixth, .one_half_last, .one_third_last, .two_third_last, .one_fourth_last, .two_fourth_last, .three_fourth_last, .one_fifth_last, .two_fifth_last, .three_fifth_last, .four_fifth_last { float: left; margin-bottom: 60px; } .full { margin-bottom: 60px; } .one_half_last, .one_third_last, .two_third_last, .one_fourth_last, .two_fourth_last, .three_fourth_last, .one_fifth_last, .two_fifth_last, .three_fifth_last, .four_fifth_last { margin-right: 0%; } .full img, .one_half img, .one_third img, .two_third img, .one_fourth img, .two_fourth img, .three_fourth img, .one_fifth img, .two_fifth img, .three_fifth img, .four_fifth img, .one_sixth img, .two_sixth img, .three_sixth img, .four_sixth img, .five_sixth img, .one_half_last img, .one_third_last img, .two_third_last img, .one_fourth_last img, .two_fourth_last img, .three_fourth_last img, .one_fifth_last img, .two_fifth_last img, .three_fifth_last img, .four_fifth_last img { max-width: 100%; height: auto; display: block; } .full p, .one_half p, .one_third p, .two_third p, .one_fourth p, .two_fourth p, .three_fourth p, .one_fifth p, .two_fifth p, .three_fifth p, .four_fifth p, .one_sixth p, .two_sixth p, .three_sixth p, .four_sixth p, .five_sixth p, .one_half_last p, .one_third_last p, .two_third_last p, .one_fourth_last p, .two_fourth_last p, .three_fourth_last p, .one_fifth_last p, .two_fifth_last p, .three_fifth_last p, .four_fifth_last p { line-height: 170%; } /*-- List styles --*/ ul.add li, li.add, ul.remove li, li.remove, ul.check li, li.check, ul.speech li , li.speech, ul.attention li, li.attention, ul.settings li, li.settings, ul.user li, li.user, ul.telephone li, li.telephone, ul.locked li, li.locked, ul.mail li, li.mail, ul.undo li, li.undo, ul.redo li, li.redo { padding-left: 27px; line-height: 28px; font-size: 14px; } ul.add li, li.add { background: url('images/lists/add.png') 0px 7px no-repeat; } ul.remove li, li.remove { background: url('images/lists/remove.png') 0px 7px no-repeat; } ul.check li, li.check { background: url('images/lists/check.png') 0px 7px no-repeat; } ul.speech li , li.speech { background: url('images/lists/comment.png') 0px 7px no-repeat; } ul.attention li, li.attention { background: url('images/lists/attention.png') 0px 7px no-repeat; } ul.settings li, li.settings { background: url('images/lists/settings.png') 0px 7px no-repeat; } ul.user li, li.user { background: url('images/lists/user.png') 0px 7px no-repeat; } ul.telephone li, li.telephone { background: url('images/lists/telephone.png') 0px 7px no-repeat; } ul.locked li, li.locked { background: url('images/lists/locked.png') 0px 7px no-repeat; } ul.mail li, li.mail { background: url('images/lists/mail.png') 0px 7px no-repeat; } ul.undo li, li.undo { background: url('images/lists/undo.png') 0px 7px no-repeat; } ul.redo li, li.redo { background: url('images/lists/redo.png') 0px 7px no-repeat; } /*-- ToolTips --*/ #tiptip_holder { display: none; position: absolute; top: 0; left: 0; z-index: 99999; } #tiptip_holder.tip_top { padding-bottom: 5px; } #tiptip_holder.tip_bottom { padding-top: 5px; } #tiptip_holder.tip_right { padding-left: 5px; } #tiptip_holder.tip_left { padding-right: 5px; } #tiptip_content { font-size: 11px; color: #fff; text-shadow: 0 0 2px #000; padding: 4px 8px; border: 1px solid rgba(255,255,255,0.25); background-color: rgb(25,25,25); background-color: rgba(25,25,25,0.92); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000)); border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; box-shadow: 0 0 3px #555; -webkit-box-shadow: 0 0 3px #555; -moz-box-shadow: 0 0 3px #555; } #tiptip_arrow, #tiptip_arrow_inner { position: absolute; border-color: transparent; border-style: solid; border-width: 6px; height: 0; width: 0; } #tiptip_holder.tip_top #tiptip_arrow { border-top-color: #fff; border-top-color: rgba(255,255,255,0.35); } #tiptip_holder.tip_bottom #tiptip_arrow { border-bottom-color: #fff; border-bottom-color: rgba(255,255,255,0.35); } #tiptip_holder.tip_right #tiptip_arrow { border-right-color: #fff; border-right-color: rgba(255,255,255,0.35); } #tiptip_holder.tip_left #tiptip_arrow { border-left-color: #fff; border-left-color: rgba(255,255,255,0.35); } #tiptip_holder.tip_top #tiptip_arrow_inner { margin-top: -7px; margin-left: -6px; border-top-color: rgb(25,25,25); border-top-color: rgba(25,25,25,0.92); } #tiptip_holder.tip_bottom #tiptip_arrow_inner { margin-top: -5px; margin-left: -6px; border-bottom-color: rgb(25,25,25); border-bottom-color: rgba(25,25,25,0.92); } #tiptip_holder.tip_right #tiptip_arrow_inner { margin-top: -6px; margin-left: -5px; border-right-color: rgb(25,25,25); border-right-color: rgba(25,25,25,0.92); } #tiptip_holder.tip_left #tiptip_arrow_inner { margin-top: -6px; margin-left: -7px; border-left-color: rgb(25,25,25); border-left-color: rgba(25,25,25,0.92); } @media screen and (-webkit-min-device-pixel-ratio:0) { #tiptip_content { padding: 4px 8px 5px 8px; background-color: rgba(45,45,45,0.88); } #tiptip_holder.tip_bottom #tiptip_arrow_inner { border-bottom-color: rgba(45,45,45,0.88); } #tiptip_holder.tip_top #tiptip_arrow_inner { border-top-color: rgba(20,20,20,0.92); } } /*-- Swipebox --*/ #swipebox-overlay img { border: none!important; } #swipebox-overlay { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000000001 !important; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; user-select: none; } #swipebox-slider { height: 100%; left: 0; top: 0; width: 100%; white-space: nowrap; position: absolute; display: none; } #swipebox-slider .slide { background: url("img/loader.gif") no-repeat center center; height: 100%; width: 100%; line-height: 1px; text-align: center; display: inline-block; } #swipebox-slider .slide:before { content: ""; display: inline-block; height: 50%; width: 1px; margin-right: -1px; } #swipebox-slider .slide img, #swipebox-slider .slide .swipebox-video-container { display: inline-block; max-height: 100%; max-width: 100%; margin: 0; padding: 0; width: auto; height: auto; vertical-align: middle; } #swipebox-slider .slide .swipebox-video-container { background:none; max-width: 1140px; max-height: 100%; width: 100%; padding:5%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } #swipebox-slider .slide .swipebox-video-container .swipebox-video{ width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; position: relative; } #swipebox-slider .slide .swipebox-video-container .swipebox-video iframe{ width: 100%!important; height: 100%!important; position: absolute; top: 0; left: 0; } #swipebox-action, #swipebox-caption { position: absolute; left: 0; z-index: 999; height: 50px; width: 100%; } #swipebox-action { bottom: -50px; } #swipebox-action.visible-bars { bottom: 0; } #swipebox-action.force-visible-bars { bottom: 0!important; } #swipebox-caption { top: -50px; text-align: center; } #swipebox-caption.visible-bars { top: 0; } #swipebox-caption.force-visible-bars { top: 0!important; } #swipebox-action #swipebox-prev, #swipebox-action #swipebox-next, #swipebox-action #swipebox-close { border: none!important; text-decoration: none!important; cursor: pointer; position: absolute; width: 50px; height: 50px; line-height: 50px; top: 0; font-family: 'Quicksand', sans-serif; font-weight: 300; font-size: 30px; color: #000; } #swipebox-action #swipebox-close { left: 40px; } #swipebox-action #swipebox-prev { right: 100px; } #swipebox-action #swipebox-next { right: 40px; } #swipebox-action #swipebox-prev.disabled, #swipebox-action #swipebox-next.disabled { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30); opacity: 0.3; } #swipebox-slider.rightSpring { -moz-animation: rightSpring 0.3s; -webkit-animation: rightSpring 0.3s; } #swipebox-slider.leftSpring { -moz-animation: leftSpring 0.3s; -webkit-animation: leftSpring 0.3s; } @-moz-keyframes rightSpring { 0% { margin-left: 0px; } 50% { margin-left: -30px; } 100% { margin-left: 0px; } } @-moz-keyframes leftSpring { 0% { margin-left: 0px; } 50% { margin-left: 30px; } 100% { margin-left: 0px; } } @-webkit-keyframes rightSpring { 0% { margin-left: 0px; } 50% { margin-left: -30px; } 100% { margin-left: 0px; } } @-webkit-keyframes leftSpring { 0% { margin-left: 0px; } 50% { margin-left: 30px; } 100% { margin-left: 0px; } } @media screen and (max-width: 800px) { #swipebox-action #swipebox-prev { right: 60px; } #swipebox-action #swipebox-next { right: 0; } } /* Skin */ #swipebox-overlay { background: #FFF; } #swipebox-action, #swipebox-caption { background-color: #FFF; opacity: 0.95; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=95); } #swipebox-action { border-top: 1px solid #E4E4E4; } #swipebox-caption { font-family: 'Open Sans', sans-serif; color: black!important; font-size: 15px; font-weight: 300; line-height: 50px; border-bottom: 1px solid #E4E4E4; } /*-- Preloader --*/ #pre-loader { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000000003; background: #FFF url('images/loading4.gif') center center no-repeat; background-size: 110px 110px; } /*-- Custom sections --*/ .custom-section { padding: 80px 0px; } .content960 { width: 960px; margin: 0 auto; } /*-- Separators --*/ .separator { height: 1px; margin: 40px 0px; background: #666; } .separator2 { margin-bottom: 40px; border-bottom: 1px solid #666; } .separator2 h3 { font-size: 35px; font-weight: 300; } /*-- Copyright --*/ #copyright { padding: 23px 0px; text-align: center; background: #FFF; font-size: 12px; } /*-- Quotes --*/ .quote { width: 720px; margin: 0 auto; padding: 40px 0px; text-align: center; } .quote .quote-content { margin-bottom: 30px; line-height: 150%; font-size: 26px; font-family: 'Open Sans', sans-serif; font-weight: 300; } .quote .quote-author { font-size: 16px; } /*-- Section titles --*/ .section-title { padding-bottom: 50px; text-align: center; } .section-title div.helper { float: left; position: relative; left: 50%; } .section-title div.helper ul { margin: 0; padding: 0; float: left; position: relative; left: -50%; } .section-title div.helper ul li h3 { font-size: 30px; font-family: 'Open Sans', sans-serif; font-weight: 300; color: #000; } .section-title div.helper ul li.bottom-line { width: 85%; margin: 0 auto; padding-bottom: 0px; border-bottom: 2px solid #f26522; } /*-- Content elements --*/ .text-content { width: 800px; margin: 0 auto; margin-bottom: 50px; line-height: 170%; } .text-content p {margin-bottom:10px;} .text-content img { max-width: 100%; height: auto; } /*-- Header --*/ #header { position: fixed; top: 0; left: 0; z-index: 1000000000; width: 100%; height: 78px; line-height: 83px; background: #FFF; border-bottom: 1px solid #000; } #header_content { width: 1200px; margin: 0 auto; } /* Logo */ #logo { width: 300px; float: left; text-align: left; line-height: 1; } #logo img { max-width: 100%; height: auto; } /* Navigation */ #navigation { width: 700px; float: right; } #navigation nav { float: right; } #navigation nav a { float: left; margin-left: 34px; font-family: 'Lato', sans-serif; font-size: 12px; font-weight: bold; color: #000; } .mobile-nav-container { display: none; } /*=====================================================================================*/ /* 3. HOME VARIATIONS */ /*=====================================================================================*/ /*-- Home 1 --*/ #home { background: #000; } #intro h1 { margin: 0 auto; font-size: 38px; font-weight: 300; color: #FFF;} /*-- Home 2 --*/ #home-image-bg #intro { background: url('images/overlay40.png'); } /*-- Home 3 --*/ #slider-wrapper { height: 500px; border-bottom: 1px solid #000; } #home-slider, #home-slidertop { width: 100%; height: 500px; margin: 0; padding: 0; position: relative; zoom: 1; } #home-slider a:active {outline: none;} .home-slides, #home-slidertop a:active {outline: none;} .home-slides, .home-control-nav, .home-direction-nav {margin: 0; padding: 0; list-style: none;} #home-slider .home-slides > li, #home-slidertop .home-slides > li {display: none;} #home-slider .home-slides img, #home-slidertop .home-slides img {max-width: 80%;} .image-slide { height: 500px; } .home-pauseplay span {text-transform: capitalize;} html[xmlns] .home-slides {display: block;} * html .home-slides {height: 1%;} .no-js .home-slides > li:first-child {display: block;} #home-slider .home-slides, #home-slidertop .home-slides {zoom: 1;} #home-slider .home-slides > li, #home-slidertop .home-slides > li {position: relative;} .home-caption { width: 100%; height: 40px; line-height: 40px; position: absolute; left: 0%; bottom: 80px; text-align: center; } .home-caption span { display: inline-block; padding: 16px 25px; background: url('images/overlay80.png'); font-size: 40px; color: #FFF; font-family: 'Open Sans', sans-serif; font-weight: 300; border-radius:10px;} .home-direction-nav li a { width: 60px; height: 60px; line-height: 60px; position: absolute; top: 40%; z-index: 100000; border: 1px solid #CCC; font-family: 'Quicksand', sans-serif; font-weight: 300; font-size: 30px; text-align: center; color: #CCC; } #home-slider .home-direction-nav li .home-next, #home-slidertop .home-direction-nav li .home-next { right: 20px; } #home-slider .home-direction-nav li .home-prev, #home-slidertop .home-direction-nav li .home-prev { left: 20px; } .home-direction-nav li .disabled {opacity: 0.3; filter:alpha(opacity=30); cursor: default;} .home-control-nav {width: 100%; position: absolute; bottom: 5px; text-align: center;} .home-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;} .home-control-nav li:first-child {margin: 0;} .home-control-nav li a {width: 13px; height: 13px; display: block; background: #272727; cursor: pointer; text-indent: -9999px;} .home-control-nav li a:hover, .flex-control-nav li a.active { width: 11px; height: 11px; border: 1px solid #272727; background: #FFF; } /*-- Home 4 --*/ #home-youtube { padding-bottom: 60px; background: #000; } #home-youtube #intro { padding: 40px 0px; } #home-video { width: 1180px; margin: 0 auto; } #home-video iframe { width: 100%; } /*=====================================================================================*/ /* 4. PORTFOLIO */ /*=====================================================================================*/ #portfolio { padding-top: 50px; } #portfolio .section-title div.helper ul li.bottom-line { border-bottom: 0px; } #portfolio .section-title h3 { margin: 0; } /*-- Portfolio Grid --*/ #portfolio-items {} #portfolio-items ul { margin: 0; padding: 0; } #portfolio-items ul li { float: left; width: 33.33%; position: relative; } #portfolio-items ul li .portfolio-thumb {} #portfolio-items ul li .portfolio-thumb img { max-width: 100%; height: auto; display: block; } #portfolio-items ul li .portfolio-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('images/overlay40.png'); } #portfolio-items ul li:hover .portfolio-overlay { display: block; background: url('images/overlay80.png'); } #portfolio-items ul li .portfolio-overlay div { position: absolute; top: 7px; right: 7px; bottom: 7px; left: 7px; border: 1px solid #CCC; } #portfolio-items ul li .portfolio-overlay h3 { padding-top: 28%; font-size: 22px; font-weight: 300; text-align: center; color: #FFF; } #portfolio-items ul li .portfolio-overlay p { font-size: 12px; color: #CCC; text-align: center; } /*-- Portfolio Item ( ajax loaded ) --*/ #portfolioitem-holder { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000000001; background: #FFF; overflow-y: scroll; overflow-x: hidden; } #portfolio-loader { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000000002; background: #FFF url('images/loading4.gif') center center no-repeat; background-size: 110px 110px; } #portfolio-item { display: none; width: 960px; margin: 0 auto; padding-top: 40px; } .portfolio-close { margin-bottom: 30px; text-align: center; } .portfolio-close a { display: inline-block; padding: 18px 26px; font-size: 15px; font-family: 'Open Sans', sans-serif; font-weight: 300; border: 1px solid #E4E4E4; color: #CCC; } .portfolio-close a:hover { border: 1px solid #333; color: #333; } .portfolio-title { margin-bottom: 40px; padding-top: 20px; font-size: 40px; font-weight: 300; line-height: 140%; text-align: center; } .portfolio-content { } /* Image list */ .portfolio-images { margin-bottom: 40px; text-align: center; } .portfolio-images img { max-width: 100%; height: auto; margin-bottom: 10px; } /* Gallery */ .portfolio-gallery { margin-bottom: 40px; } .portfolio-gallery a { display: block; width: 50%; float: left; } .portfolio-gallery a img { display: block; width: 100%; height: auto; } /* video */ #portfolio-video { margin-bottom: 40px; } #portfolio-video iframe { width: 100%; } /* soundcloud */ #portfolio-soundcloud { margin-bottom: 40px; } #portfolio-soundcloud iframe { width: 100%; } /* slider */ #portfolio-slider{ width: 960px; margin: 0; padding: 0; margin-bottom: 40px; position: relative; zoom: 1;} #portfolio-slider a:active {outline: none;} .slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;} #portfolio-slider .slides > li { display: none; position: relative; } #portfolio-slider .slides img { max-width: 100%; display: block; } html[xmlns] .slides {display: block;} * html .slides {height: 1%;} .no-js .slides > li:first-child {display: block;} #portfolio-slider .slides {zoom: 1;} #portfolio-slider .flex-direction-nav li a { width: 60px; height: 60px; line-height: 60px; position: absolute; top: 40%; z-index: 100000; border: 1px solid #CCC; font-family: 'Quicksand', sans-serif; font-weight: 300; font-size: 30px; text-align: center; color: #CCC; } #portfolio-slider .flex-direction-nav li .flex-next { right: 20px; } #portfolio-slider .flex-direction-nav li .flex-prev { left: 20px; } #portfolio-slider .flex-direction-nav li .disabled {opacity: 0.3; filter:alpha(opacity=30); cursor: default;} /*=====================================================================================*/ /* 5. SERVICES */ /*=====================================================================================*/ #service-items .open-service h3 {text-transform:uppercase;} #services { padding-top: 70px; background: #000; } #services .section-title h3 { color: #FFF; } #services-intro { width: 800px; margin: 0 auto; padding-bottom: 60px; line-height: 170%; font-size: 13px; color: #B3B3B3; text-align: center; } #service-items { width: 960px; margin: 0 auto; padding-bottom: 70px; } .service { width: 318px; float: left; margin-left: -1px; margin-bottom: -1px; padding-bottom: 90px; border: 1px solid #414040; } .service-icon { height: 175px; line-height: 220px; padding-top: 50px; text-align: center; } .service h3 { font-size: 14px; font-weight: 300; text-align: center; color: #EEE; } .service:hover { background: #FFF; } .service:hover h3 { color: #666; } #services .quote { padding-top: 0; color: #CCC; } /*-- Ajax loaded item --*/ #serivceitem-holder { display: none; } #service-loader { display: none; width: 100%; height: 150px; background: url('images/loading.gif') center center no-repeat; } #service-item { position: relative; width: 800px; margin: 0 auto; padding-bottom: 60px; } .service-content { line-height: 170%; font-size: 15px; color: #CCC;} .service-content p {margin-bottom:10px;} .service-content img { max-width: 100%; height: auto; } .service-content h3.service-title { margin-bottom: 20px; font-size: 25px; font-weight: 300; } .close-service { margin-bottom: 30px; text-align: center; } .close-service a { display: inline-block; padding: 10px 16px; font-size: 13px; font-family: 'Open Sans', sans-serif; font-weight: 300; border: 1px solid #CCC; color: #CCC; } /*=====================================================================================*/ /* 6. ABOUT */ /*=====================================================================================*/ #about { padding-top: 80px; } #about .text-content { margin-bottom: 110px; } /*-- Team --*/ #team-carousel, #video-carousel { width: 1180px; margin: 0 auto; margin-bottom: 100px; position: relative; zoom: 1; } .carousel-viewport { margin-bottom: 30px; } .member { width: 278px; border: 1px solid #CCC; } .member-image { width: 278px; height: 278px; position: relative; border-bottom: 1px solid #CCC; } .member-image img { width: 278px; height: 278px; } .member-image .member-icons { display: none; position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px 0px; background: transparent url('images/white_overlay90.png'); } .member-image:hover .member-icons { display: block; } .member-info { padding-top: 30px; text-align: center; } .member-info h3 { margin-bottom: 16px; font-size: 20px; font-family: 'Raleway', sans-serif; } .member-info p.position { margin-bottom: 35px; font-size: 13px; color: #999; } .member-info p.member-more a { display: block; width: 100%; padding: 10px 0px; border-top: 1px solid #CCC; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 12px; color: #666; } .member-info p.member-more a:hover { background: #EEE; color: #000; } #team-carousel a:active, #video-carousel a:active {outline: none;} .slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;} #team-carousel .carousel-slider, #video-carousel .carousel-slider { margin: 0; padding: 0; } #team-carousel .carousel-slider > li, #video-carousel .carousel-slider > li { margin-right: 20px; } #team-carousel .carousel-slider img, #video-carousel .carousel-slider img {max-width: 100%; display: block;} .carousel-pauseplay span {text-transform: capitalize;} .carousel-slider:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; margin-right: 80px; } html[xmlns] .carousel-slider {display: block;} * html .carousel-slider {height: 1%;} .no-js .carousel-slider > li:first-child {display: block;} #team-carousel .carousel-slider, #video-carousel .carousel-slider {zoom: 1;} #team-carousel .carousel-slider > li, #video-carousel .carousel-slider > li {position: relative;} .carousel-caption {width: 100%; height: 40px; line-height: 40px; position: absolute; left: 0%; bottom: 0%; background: #000; color: #FFF; font-size: 14px; font-family: 'Raleway', sans-serif; text-align: center; } #team-carousel:hover .carousel-direction-nav li .next, #video-carousel:hover .carousel-direction-nav li .next { right: 0px; } #team-carousel:hover .carousel-direction-nav li .prev, #video-carousel:hover .carousel-direction-nav li .prev { left: 0px; } .carousel-direction-nav li .disabled {opacity: 0.3; filter:alpha(opacity=30); cursor: default;} .carousel-direction-nav { display: block; position: relative; width: 90px; height: 42px; margin: 0 auto; padding: 0; } .carousel-direction-nav a { display: block; position: absolute; top: 0; width: 38px; height: 40px; line-height: 40px; font-family: 'Quicksand', sans-serif; font-size: 18px; color: #999; border: 1px solid #CCC; text-align: center; } .carousel-direction-nav a.carousel-next { right: 0; } .carousel-direction-nav a.carousel-prev { left: 0; } /* Social icons */ .member-icons .icons_container {} .member-icons .icons { position: relative; float: left; left: 50%; } .member-icons .icons ul { position: relative; float: left; left: -50%; margin: 0; padding: 0; } .member-icons .icons ul li { float: left; margin: 5px 5px; } .member-icons .icons ul li a { display: block; width: 40px; height: 40px; border: 1px solid #CCC; } .member-icons a.phone { background: url('images/social_icons2/phone.png') center center no-repeat; } .member-icons a.fb { background: url('images/social_icons2/fb.png') center center no-repeat; } .member-icons a.dribbble { background: url('images/social_icons2/dribbble.png') center center no-repeat; } .member-icons a.twitter { background: url('images/social_icons2/twitter.png') center center no-repeat; } .member-icons a.tumblr { background: url('images/social_icons2/tumblr.png') center center no-repeat; } .member-icons a.vimeo { background: url('images/social_icons2/vimeo.png') center center no-repeat; } .member-icons a.skype { background: url('images/social_icons2/skype.png') center center no-repeat; } .member-icons a.googleplus { background: url('images/social_icons2/gplus.png') center center no-repeat; } .member-icons a.instagram { background: url('images/social_icons2/instagram.png') center center no-repeat; } .member-icons a.linkedin { background: url('images/social_icons2/linked.png') center center no-repeat; } .member-icons a.pinterest { background: url('images/social_icons2/pinterest.png') center center no-repeat; } .member-icons a.rss { background: url('images/social_icons2/rss.png') center center no-repeat; } .member-icons a.youtube { background: url('images/social_icons2/youtube.png') center center no-repeat; } .member-icons a.deviantart { background: url('images/social_icons2/deviantart.png') center center no-repeat; } .member-icons a.phone:hover { background: #16a085 url('images/social_icons2/hover_state/phone.png') center center no-repeat; } .member-icons a.fb:hover { background: #3B5998 url('images/social_icons2/hover_state/fb.png') center center no-repeat; } .member-icons a.dribbble:hover { background: #EC6197 url('images/social_icons2/hover_state/dribbble.png') center center no-repeat; } .member-icons a.twitter:hover { background: #4099FF url('images/social_icons2/hover_state/twitter.png') center center no-repeat; } .member-icons a.tumblr:hover { background: #4099FF url('images/social_icons2/hover_state/tumblr.png') center center no-repeat; } .member-icons a.vimeo:hover { background: #8FB852 url('images/social_icons2/hover_state/vimeo.png') center center no-repeat; } .member-icons a.skype:hover { background: #50DBF9 url('images/social_icons2/hover_state/skype.png') center center no-repeat; } .member-icons a.googleplus:hover { background: #EFC94C url('images/social_icons2/hover_state/gplus.png') center center no-repeat; } .member-icons a.instagram:hover { background: #000000 url('images/social_icons2/hover_state/instagram.png') center center no-repeat; } .member-icons a.linkedin:hover { background: #0181AE url('images/social_icons2/hover_state/linked.png') center center no-repeat; } .member-icons a.pinterest:hover { background: #CB2027 url('images/social_icons2/hover_state/pinterest.png') center center no-repeat; } .member-icons a.rss:hover { background: #FF6200 url('images/social_icons2/hover_state/rss.png') center center no-repeat; } .member-icons a.deviantart:hover { background: #44564B url('images/social_icons2/hover_state/deviantart.png') center center no-repeat; } /*-- Member page ( ajax loaded ) --*/ #member-holder, #video-holder { display: none; margin-bottom: 40px; } #member-loader, #video-loader { display: none; width: 100%; height: 200px; background: #FFF url('images/loading4.gif') center center no-repeat; background-size: 55px 55px; } #member-page, #video-page { width: 800px; margin: 0 auto; } #member-page .text-content, #video-page .text-content { margin-bottom: 30px; } #close-member, #close-video { margin-bottom: 30px; text-align: center; } #close-member a, #close-video a { display: inline-block; padding: 10px 16px; font-size: 13px; font-family: 'Open Sans', sans-serif; font-weight: 300; border: 1px solid #E4E4E4; color: #CCC; } #close-member a:hover, #close-video a:hover { border: 1px solid #333; color: #333; } #member-avatar { width: 280px; margin: 0 auto; margin-bottom: 40px; } #member-avatar img { width: 280px; height: auto; display: block; } #member-name { margin-bottom: 30px; } #member-name h3 { margin-bottom: 0px; font-size: 35px; font-weight: 300; text-align: center; } /*=====================================================================================*/ /* 7. TESTIMONIALS */ /*=====================================================================================*/ #testimonials { padding-bottom: 70px; background-color: #F0F0F0; border-top: 2px solid #E9E9E9; border-bottom: 2px solid #E9E9E9; background-image: images/fullbg .jpg; background-image: url(../images/fullbg.jpg); } #testimonials-circle { width: 70px; height: 70px; margin: 0 auto; margin-top: -37px; margin-bottom: 70px; border: 2px solid #E9E9E9; background: #FFF url('images/testimonial-top.png') center center no-repeat; border-radius: 37px; -moz-border-radius: 37px; -webkit-border-radius: 37px; } #testimonials-slider { width: 800px; margin: 0; padding: 0; margin: 0 auto; margin-bottom: 40px; font-size: 15px; text-align: center; color: #666; position: relative; zoom: 1; } #testimonial-controls { position: relative; z-index: 1000; } .testimonial-content { margin-bottom: 35px; line-height: 170%; } .testimonial-content {text-shadow: 1px 1px 0 #000; color: #FFF;} .testimonial-image { width: 100px; height: 100px; margin: 35px auto; border: 2px solid #F7F7F7; border-radius: 52px; -webkit-border-radius: 52px; -moz-border-radius: 52px; } .testimonial-image img { width: 100px; height: 100px; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; } .testimonial-author { font-weight: bold; font-style: italic; } #testimonials-slider a:active {outline: none;} .testimonial-slides, .testimonials-control-nav, .testimonials-direction-nav {margin: 0; padding: 0; list-style: none;} #testimonials-slider .testimonial-slides > li {display: none;} #testimonials-slider .testimonial-slides img {max-width: 100%; display: block;} .flex-pauseplay span {text-transform: capitalize;} html[xmlns] .testimonial-slides {display: block;} * html .testimonial-slides {height: 1%;} .no-js .testimonial-slides > li:first-child {display: block;} #testimonials-slider .testimonial-slides {zoom: 1;} #testimonials-slider .testimonial-slides > li {position: relative;} .testimonials-direction-nav li .disabled {opacity: 0.3; filter:alpha(opacity=30); cursor: default;} .testimonials-direction-nav { display: block; position: relative; width: 90px; height: 42px; margin: 0 auto; padding: 0; } .testimonials-direction-nav a { display: block; position: absolute; top: 0; width: 38px; height: 40px; line-height: 40px; font-family: 'Quicksand', sans-serif; font-size: 18px; color: #999; border: 1px solid #CCC; text-align: center; } .testimonials-direction-nav a.testimonials-next { right: 0; } .testimonials-direction-nav a.testimonials-prev { left: 0; } /*=====================================================================================*/ /* 8. CONTACT */ /*=====================================================================================*/ #contact, #content5 { padding-top: 80px; } #content5 { padding-bottom: 80px; } /*-- Contact info --*/ #contact-info { width: 700px; margin: 0 auto; margin-bottom: 40px; text-align: center; line-height: 170%; } #google-map { width: 100%; position: relative; border-top: 1px solid #CCC; } #google-map iframe { display: block; width: 100%; } #no-drag { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; background: transparent; } /*-- Contact form --*/ #contact-form { width: 760px; margin: 0 auto; margin-bottom: 70px; } #contact-form input[type="text"] { float: left; width: 338px; height: 60px; line-height: 62px; margin: 0; margin-bottom: 20px; margin-right: 20px; padding: 0px; padding-left: 20px; } #contact-form input#form-subject {width:720px;} #contact-form input[type="text"]#form-subject { margin-right: 0px; } #contact-form input[type="text"], #contact-form textarea { font-size: 13px; border: 1px solid #E4E4E4; border-bottom: 2px solid #E4E4E4; font-family: 'Raleway', sans-serif; -webkit-appearance: none; } #contact-form textarea { width: 700px; height: 200px; line-height: 170%; padding: 20px; padding-top: 22px; } #contact-form button { display: block; width: 100%; height: 58px; line-height: 60px; margin: 0; padding: 0; border: 0; text-align: center; font-size: 16px; color: #FFF; font-family: 'Raleway', sans-serif; background: #000; cursor: pointer; } p#required { padding-top: 20px; font-size: 11px; text-align: center; } #contact-loading { width: 100%; height: 200px; background: url('images/loading4.gif') center center no-repeat; background-size: 55px 55px; } div#result { width: 65%; margin: 0 auto; margin-bottom: 35px; } .contact-error { padding: 20px; background: #FF9393; border: 1px solid #990000; color: #4A0000; text-align: center; } .contact-success { padding: 20px; background: #D0F993 url('images/success.png') 20px 25px no-repeat; border: 1px solid #003300; color: #003300; text-align: center; } /*-- Contact details --*/ #contact-details { overflow: hidden; padding: 80px 0px; background: #F1F1F1; } #contact-icons { float: left; position: relative; left: 50%; } #contact-icons ul { float: left; position: relative; left: -50%; margin: 0; padding: 0; } #contact-icons ul li { float: left; width: 300px; margin: 0 50px; text-align: center; font-size: 13px; } #contact-icons ul li .contact-icon { width: 80px; height: 80px; margin: 0 auto; margin-bottom: 30px; border: 1px solid #666; border-radius: 42px; } .address-icon { background: url('images/address.png') center center no-repeat; } .phone-icon { background: url('images/phone.png') center center no-repeat; } .email-icon { background: url('images/email.png') center center no-repeat; } /*-- Social --*/ #social { padding-top: 80px; padding-bottom: 100px; background: #000; border-top: 2px solid #333; } #social .section-title h3 { color: #FFF; } #social-container { width: 800px; margin: 0 auto; overflow-x: hidden; } #social-icons { position: relative; float: left; left: 50%; } #social-icons ul { position: relative; float: left; left: -50%; margin: 0; padding: 0; } #social-icons ul li { float: left; margin: 15px; } #social-icons ul li a { display: block; width: 68px; height: 68px; border: 2px solid #666; border-radius: 36px; } #social-icons a.fb { background: url('images/social_icons/fb.png') center center no-repeat; } #social-icons a.yelp { background: url('images/social_icons/yelp.png') center center no-repeat; } #social-icons a.dribbble { background: url('images/social_icons/dribbble.png') center center no-repeat; } #social-icons a.twitter { background: url('images/social_icons/twitter.png') center center no-repeat; } #social-icons a.tumblr { background: url('images/social_icons/tumblr.png') center center no-repeat; } #social-icons a.vimeo { background: url('images/social_icons/vimeo.png') center center no-repeat; } #social-icons a.skype { background: url('images/social_icons/skype.png') center center no-repeat; } #social-icons a.googleplus { background: url('images/social_icons/google.png') center center no-repeat; } #social-icons a.instagram { background: url('images/social_icons/instagram.png') center center no-repeat; } #social-icons a.linkedin { background: url('images/social_icons/linked.png') center center no-repeat; } #social-icons a.pinterest { background: url('images/social_icons/pinterest.png') center center no-repeat; } #social-icons a.rss { background: url('images/social_icons/rss.png') center center no-repeat; } #social-icons a.youtubelink { background: url('images/social_icons/youtube.png') center center no-repeat; } #social-icons a.youtubelink:hover { background: url('images/social_icons/YT_hover.png') center center no-repeat; } #social-icons a.deviantart { background: url('images/social_icons/deviantart.png') center center no-repeat; } #social-icons a.soundcloud { background: url('images/social_icons/soundcloud.png') center center no-repeat; } #social-icons a.fb:hover { background: url('images/social_icons/fb_hover.png') center center no-repeat; } #social-icons a.yelp:hover { background: url('images/social_icons/yelp_hover.png') center center no-repeat; } #social-icons a.dribbble:hover { background: url('images/social_icons/dribbble_hover.png') center center no-repeat; } #social-icons a.twitter:hover { background: url('images/social_icons/twitter_hover.png') center center no-repeat; } #social-icons a.tumblr:hover { background: url('images/social_icons/tumblr_hover.png') center center no-repeat; } #social-icons a.vimeo:hover { background: url('images/social_icons/vimeo_hover.png') center center no-repeat; } #social-icons a.skype:hover { background: url('images/social_icons/skype_hover.png') center center no-repeat; } #social-icons a.googleplus:hover { background: url('images/social_icons/google_hover.png') center center no-repeat; } #social-icons a.instagram:hover { background: url('images/social_icons/instagram_hover.png') center center no-repeat; } #social-icons a.linkedin:hover { background: url('images/social_icons/linked_hover.png') center center no-repeat; } #social-icons a.pinterest:hover { background: url('images/social_icons/pinterest_hover.png') center center no-repeat; } #social-icons a.rss:hover { background: url('images/social_icons/rss_hover.png') center center no-repeat; } #social-icons a.deviantart:hover { background: url('images/social_icons/deviantart_hover.png') center center no-repeat; } #social-icons a.soundcloud:hover { background: url('images/social_icons/soundcloud_hover.png') center center no-repeat; } /*=====================================================================================*/ /* 9. RESPONSIVE STYLES */ /*=====================================================================================*/ /*--- 27 inch iMach ---*/ @media screen and (min-width: 2560px) and (max-width: 2560px) { /*- Intro -*/ #slider-wrapper { height: 650px; } #home-slider, #home-slidertop { height: 650px; } .image-slide { height: 650px; } } /*--- Screen => 1480px ( Full HD monitors ) ---*/ @media screen and (min-width: 1480px) { /*- Intro -*/ #slider-wrapper { height: 600px; } #home-slider, #home-slidertop { height: 600px; } .image-slide { height: 600px; } } /*--- Screen <= 1200px ---*/ @media screen and (min-width: 961px) and (max-width: 1200px) { /*- General -*/ #header_content { width: 960px; } #logo { width: 260px; } #navigation { width: 700px; } /*- Home -*/ #intro h1 { width: 960px; } #home-video { width: 960px; } #slider-wrapper { height: 500px; } #home-slider, #home-slidertop { height: 500px; } .image-slide { height: 500px; } /*- Team -*/ #team-carousel, #video-carousel { width: 900px; } /*- Contact -*/ #contact-icons ul li { width: 200px; } } /*--- Screen <= 960px ( Tablets portrait view )---*/ @media screen and (max-width: 960px) { /*- General -*/ #header_content { width: 700px; overflow: hidden; } #logo { width: 260px; } #navigation { width: 440px; } #navigation nav { display: none; } .mobile-nav-container { display: block; float: right; width: 43px; height: 78px; background: url('images/mobile-menu.png') right center no-repeat; } .mobile-nav-container select { border: 0px; visibility: invisible; -webkit-appearance: none; background: transparent; font-size: 0px; } .text-content { width: 700px; } .content960 { width: 700px; } .section-title { overflow: hidden; } /*- Home -*/ #intro h1 { width: 700px; } #home-video { width: 700px; } #slider-wrapper { height: 320px; } #home-slider, #home-slidertop { height: 320px; } .image-slide { height: 320px; } /*- Portfolio -*/ #portfolio-items ul li { width: 50%; } #portfolio-item { width: 700px; } #portfolio-slider{ width: 700px; } /*- Services -*/ #services-intro { width: 600px; } #service-items { width: 690px; } .service { width: 228px; } #service-item { width: 600px; } .quote { width: 600px; } /*- Team -*/ #team-carousel, #video-carousel { width: 600px; } #member-page, #video-page { width: 700px; overflow-x: hidden; } /*- Testimonials -*/ #testimonials-slider { width: 700px; } /*- Contact -*/ #contact-form { width: 700px; } #contact-form input[type="text"], #contact-form input#form-subject { width: 198px; } #contact-form textarea { width: 658px; } #contact-icons ul li { width: 160px; margin: 0 20px; } /*- Social -*/ #social-container { width: 700px; } } /*--- Screen <= 700px ( iPhone5 landscape view )---*/ @media screen and (max-width: 700px) { /*- General -*/ #header_content { width: 520px; overflow: hidden; } #logo { width: 200px; } #navigation { width: 300px; } .text-content { width: 520px; } .content960 { width: 520px; } .one_fourth, .one_fourth_last { width: 100%; margin-right: 0; } .two_fourth, .two_fourth_last { width: 100%; margin-right: 0; } .three_fourth, .three_fourth_last { width: 100%; margin-right: 0; } .one_fifth, .one_fifth_last { width: 100%; margin-right: 0; } .two_fifth, .two_fifth_last { width: 100%; margin-right: 0; } .three_fifth, .three_fifth_last { width: 100%; margin-right: 0; } .four_fifth, .four_fifth_last { width: 100%; margin-right: 0; } /*- Home -*/ #intro h1 { width: 520px; font-size: 28px; } #home-video { width: 520px; } #slider-wrapper { height: 240px; } #home-slider, #home-slidertop { height: 240px; } .image-slide { height: 240px; } .home-direction-nav li a { display: none; } .home-caption { height: 25px; line-height: 26px; bottom: 20px; } .home-caption span { padding: 8px 14px; font-size: 15px; } /*- Portfolio -*/ #portfolio-items ul li .portfolio-overlay h3 { margin-bottom: 16px; padding-top: 26%; font-size: 18px; } #portfolio-item { width: 520px; } .portfolio-title { font-size: 30px; } #portfolio-slider{ width: 520px; } #portfolio-slider .flex-direction-nav li a { display: none; } /*- Services -*/ #services-intro { width: 500px; } #service-items { width: 500px; } .service { width: 248px; } #service-item { width: 500px; } .quote { width: 400px; } /*- Team -*/ #team-carousel, #video-carousel { width: 520px; } .member { width: 248px; } .member-image { width: 248px; height: 248px; } .member-image img { width: 248px; height: 248px; } #member-page, #video-page { width: 520px; } #member-name h3 { font-size: 25px; } /*- Testimonials -*/ #testimonials-slider { width: 520px; } /*- Contact -*/ #contact-info { width: 520px; } #contact-form { width: 520px; } #contact-form input[type="text"], #contact-form input#form-subject { width: 498px; float: none; margin: 0; margin-bottom: 20px; } #contact-form textarea { width: 478px; } #contact-icons { float: none; left: auto; } #contact-icons ul { float: none; left: auto; } #contact-icons ul li { float: none; width: 100%; margin: 0; margin-bottom: 60px; font-size: 12px; } /*- Social -*/ #social-container { width: 520px; overflow: hidden; } } /*--- Screen <= 500px ( iPhone 3 & 4 ( and many more devices... ) landscape view )---*/ @media screen and (max-width: 500px) { /*- General -*/ #header_content { width: 420px; } #navigation { width: 200px; } .text-content { width: 420px; } .content960 { width: 420px; } .one_half, .one_half_last { width: 100%; margin-right: 0%; } .one_third, .one_third_last { width: 100%; margin-right: 0%; } .two_third, .two_third_last { width: 100%; margin-right: 0%; } /*- Home -*/ #intro h1 { width: 420px; font-size: 25px; } #home-video { width: 420px; } #slider-wrapper { height: 200px; } #home-slider, #home-slidertop { height: 200px; } .image-slide { height: 200px; } /*- Portfolio -*/ #portfolio-items ul li .portfolio-overlay h3 { margin-bottom: 16px; padding-top: 24%; font-size: 18px; } #portfolio-item { width: 420px; } .portfolio-title { font-size: 26px; } #portfolio-slider{ width: 420px; } /*- Services -*/ #services-intro { width: 400px; } #service-items { width: 400px; } .service { width: 198px; } #service-item { width: 400px; } .quote { width: 350px; } .quote .quote-content { font-size: 22px; } .quote .quote-author { font-size: 13px; } /*- Team -*/ #team-carousel, #video-carousel { width: 420px; } .member { width: 198px; } .member-image { width: 198px; height: 198px; } .member-image img { width: 198px; height: 198px; } #member-page, #video-page { width: 420px; } /*- Testimonials -*/ #testimonials-slider { width: 420px; } /*- Contact -*/ #contact-info { width: 420px; font-size: 13px; } #contact-form { width: 420px; } #contact-form input[type="text"], #contact-form input#form-subject { width: 398px; } #contact-form textarea { width: 378px; } #contact-icons ul li { margin-bottom: 40px; } /*- Social -*/ #social-container { width: 420px; } } /*--- Screen <= 600px ( iPhone 6 ( and many more devices... ) portrait view )---*/ @media screen and (max-width: 600px) { /*- General -*/ #header_content { width: 100%; } #navigation { width: 100px; } .mobile-nav-container{margin-right: 10px;} .text-content { width: 100%; } .content960 { width: 100%; } /*- Home -*/ #intro h1 { width: 100%; font-size: 25px; } #home-video { width: 100%; } #slider-wrapper { height: 130px; } #home-slider, #home-slidertop { height: 130px; } .image-slide { height: 130px; } /*- Portfolio -*/ #portfolio-items ul li { width: 100%; } #portfolio-items ul li .portfolio-overlay h3 { padding-top: 26%; } #portfolio-item { width: 100%; } .portfolio-title { font-size: 22px; } #portfolio-slider{ width: 100%; } /*- Services -*/ #services-intro { width: 100%; } #service-items { width: 100%; } .service { width: 98%; } #service-item { width: 100%; } .quote { width: 85%; } .quote .quote-content { font-size: 18px; } .quote .quote-author { font-size: 12px; } /*- Team -*/ #team-carousel, #video-carousel { width: 280px; } .member { width: 278px; } .member-image { width: 278px; height: 278px; } .member-image img { width: 278px; height: 278px; } #member-page, #video-page { width: 300px; } #member-name h3 { font-size: 20px; } /*- Testimonials -*/ #testimonials-slider { width: 300px; } /*- Contact -*/ #contact-info { width: 300px; } #contact-form { width: 300px; } #contact-form input[type="text"], #contact-form input#form-subject { width: 278px; } #contact-form textarea { width: 258px; } /*- Social -*/ #social-container { width: 292px; } #social-icons { position: relative; float: none; left: auto; } #social-icons ul { position: relative; float: none; left: auto; margin: 0; padding: 0; } #social-icons ul li { margin: 10px; } } /*--- Screen <= 360px ( iPhone 3 & 4 &5 ( and many more devices... ) portrait )---*/ @media screen and (max-width: 360px) { /*- General -*/ #header_content { width: 100%; } #navigation { width: 100px; } .mobile-nav-container{margin-right: 10px;} .text-content { width: 100%; } .content960 { width: 100%; } /*- Home -*/ #intro h1 { width: 100%; font-size: 25px; } #home-video { width: 100%; } #slider-wrapper { height: 130px; } #home-slider, #home-slidertop { height: 130px; } .image-slide { height: 130px; } /*- Portfolio -*/ #portfolio-items ul li { width: 100%; } #portfolio-items ul li .portfolio-overlay h3 { padding-top: 26%; } #portfolio-item { width: 100%; } .portfolio-title { font-size: 22px; } #portfolio-slider{ width: 100%; } /*- Services -*/ #services-intro { width: 100%; } #service-items { width: 100%; } .service { width: 98%; } #service-item { width: 100%; } .quote { width: 85%; } .quote .quote-content { font-size: 18px; } .quote .quote-author { font-size: 12px; } /*- Team -*/ #team-carousel, #video-carousel { width: 280px; } .member { width: 278px; } .member-image { width: 278px; height: 278px; } .member-image img { width: 278px; height: 278px; } #member-page, #video-page { width: 300px; } #member-name h3 { font-size: 20px; } /*- Testimonials -*/ #testimonials-slider { width: 300px; } /*- Contact -*/ #contact-info { width: 300px; } #contact-form { width: 300px; } #contact-form input[type="text"], #contact-form input#form-subject { width: 278px; } #contact-form textarea { width: 258px; } /*- Social -*/ #social-container { width: 292px; } #social-icons { position: relative; float: none; left: auto; } #social-icons ul { position: relative; float: none; left: auto; margin: 0; padding: 0; } #social-icons ul li { margin: 10px; } } /*--- Styles for High Resolution Screens ---*/ @media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { .mobile-nav-container { background: url('images/mobile-menu.png') right center no-repeat; background-size: 43px 27px; } #testimonials-circle { background: #FFF url('images/testimonial-top@2X.png') center center no-repeat; background-size: 28px 22px; } .address-icon { background: url('images/address@2X.png') center center no-repeat; background-size: 35px 30px; } .phone-icon { background: url('images/phone@2X.png') center center no-repeat; background-size: 18px 29px; } .email-icon { background: url('images/email@2X.png') center center no-repeat; background-size: 28px 18px; } /*- Custom list styles -*/ ul.add li, li.add { background: url('images/lists/add@2X.png') 0px 7px no-repeat; background-size: 14px 14px; } ul.remove li, li.remove { background: url('images/lists/remove@2X.png') 0px 7px no-repeat; background-size: 14px 14px; } ul.check li, li.check { background: url('images/lists/check@2X.png') 0px 7px no-repeat; background-size: 14px 14px; } ul.speech li , li.speech { background: url('images/lists/comment@2X.png') 0px 7px no-repeat; background-size: 14px 14px; } ul.attention li, li.attention { background: url('images/lists/attention@2X.png') 0px 7px no-repeat; background-size: 14px 14px; } ul.settings li, li.settings { background: url('images/lists/settings@2X.png') 0px 7px no-repeat; background-size: 14px 14px; } ul.user li, li.user { background: url('images/lists/user@2X.png') 0px 7px no-repeat; background-size: 14px 14px; } ul.telephone li, li.telephone { background: url('images/lists/telephone@2X.png') 0px 7px no-repeat; background-size: 14px 14px; } ul.locked li, li.locked { background: url('images/lists/locked@2X.png') 0px 7px no-repeat; background-size: 14px 14px; } ul.mail li, li.mail { background: url('images/lists/mail@2X.png') 0px 7px no-repeat; background-size: 14px 14px; } ul.undo li, li.undo { background: url('images/lists/undo@2X.png') 0px 7px no-repeat; background-size: 14px 14px; } ul.redo li, li.redo { background: url('images/lists/redo@2X.png') 0px 7px no-repeat; background-size: 14px 14px; } /*-- Social icons --*/ .member-icons a.phone { background: url('images/social_icons2/phone@2X.png') center center no-repeat; background-size: 25px 17px; } .member-icons a.fb { background: url('images/social_icons2/fb@2X.png') center center no-repeat; background-size: 10px 16px; } .member-icons a.dribbble { background: url('images/social_icons2/dribbble@2X.png') center center no-repeat; background-size: 16px 16px; } .member-icons a.twitter { background: url('images/social_icons2/twitter@2X.png') center center no-repeat; background-size: 21px 16px; } .member-icons a.tumblr { background: url('images/social_icons2/tumblr.png') center center no-repeat; background-size: 15px 16px; } .member-icons a.vimeo { background: url('images/social_icons2/vimeo@2X.png') center center no-repeat; background-size: 18px 16px; } .member-icons a.skype { background: url('images/social_icons2/skype@2X.png') center center no-repeat; background-size: 16px 16px; } .member-icons a.googleplus { background: url('images/social_icons2/gplus@2X.png') center center no-repeat; background-size: 16px 16px; } .member-icons a.instagram { background: url('images/social_icons2/instagram@2X.png') center center no-repeat; background-size: 16px 16px; } .member-icons a.linkedin { background: url('images/social_icons2/linked@2X.png') center center no-repeat; background-size: 16px 16px; } .member-icons a.pinterest { background: url('images/social_icons2/pinterest@2X.png') center center no-repeat; background-size: 16px 16px; } .member-icons a.rss { background: url('images/social_icons2/rss@2X.png') center center no-repeat; background-size: 16px 16px; } .member-icons a.youtube { background: url('images/social_icons2/youtube@2X.png') center center no-repeat; background-size: 16px 15px; } .member-icons a.deviantart { background: url('images/social_icons2/deviantart@2X.png') center center no-repeat; background-size: 14px 6px; } .member-icons a.soundcloud { background: url('images/social_icons2/soundcloud.png') center center no-repeat; background-size: 16px 8px; } /* Hover state */ .member-icons a.phone:hover { background: #16a085 url('images/social_icons2/hover_state/phone@2X.png') center center no-repeat; background-size: 25px 17px; } .member-icons a.fb:hover { background: #3B5998 url('images/social_icons2/hover_state/fb@2X.png') center center no-repeat; background-size: 10px 16px; } .member-icons a.dribbble:hover { background: #EC6197 url('images/social_icons2/hover_state/dribbble@2X.png') center center no-repeat; background-size: 16px 16px; } .member-icons a.twitter:hover { background: #4099FF url('images/social_icons2/hover_state/twitter@2X.png') center center no-repeat; background-size: 21px 16px; } .member-icons a.tumblr { background: url('images/social_icon2s/tumblr.png') center center no-repeat; background-size: 15px 16px; } .member-icons a.vimeo:hover { background: #8FB852 url('images/social_icons2/hover_state/vimeo@2X.png') center center no-repeat; background-size: 18px 16px; } .member-icons a.skype:hover { background: #50DBF9 url('images/social_icons2/hover_state/skype@2X.png') center center no-repeat; background-size: 16px 16px; } .member-icons a.googleplus:hover { background: #EFC94C url('images/social_icons2/hover_state/gplus@2X.png') center center no-repeat; background-size: 16px 16px; } .member-icons a.instagram:hover { background: #000000 url('images/social_icons2/hover_state/instagram@2X.png') center center no-repeat; background-size: 16px 16px; } .member-icons a.linkedin:hover { background: #0181AE url('images/social_icons2/hover_state/linked@2X.png') center center no-repeat; background-size: 16px 16px; } .member-icons a.pinterest:hover { background: #CB2027 url('images/social_icons2/hover_state/pinterest@2X.png') center center no-repeat; background-size: 16px 16px; } .member-icons a.rss:hover { background: #FF6200 url('images/social_icons2/hover_state/rss@2X.png') center center no-repeat; background-size: 16px 16px; } .member-icons a.deviantart:hover { background: #44564B url('images/social_icons2/hover_state/deviantart@2X.png') center center no-repeat; background-size: 14px 6px; } .member-icons a.soundcloud { background: #FF5500 url('images/social_icons2/soundcloud.png') center center no-repeat; background-size: 16px 8px; } /*-- Social icons ( footer ) --*/ #social-icons a.fb { background: url('images/social_icons/fb@2X.png') center center no-repeat; background-size: 71px 71px; } #social-icons a.dribbble { background: url('images/social_icons/dribbble@2X.png') center center no-repeat; background-size: 71px 71px; } #social-icons a.twitter { background: url('images/social_icons/twitter@2X.png') center center no-repeat; background-size: 71px 71px; } #social-icons a.tumblr { background: url('images/social_icons/tumblr@2X.png') center center no-repeat; background-size: 71px 71px; } #social-icons a.vimeo { background: url('images/social_icons/vimeo@2X.png') center center no-repeat; background-size: 71px 71px; } #social-icons a.skype { background: url('images/social_icons/skype@2X.png') center center no-repeat; background-size: 71px 71px; } #social-icons a.googleplus { background: url('images/social_icons/google@2X.png') center center no-repeat; background-size: 71px 71px; } #social-icons a.instagram { background: url('images/social_icons/instagram@2X.png') center center no-repeat; background-size: 71px 71px; } #social-icons a.linkedin { background: url('images/social_icons/linked@2X.png') center center no-repeat; background-size: 71px 71px; } #social-icons a.pinterest { background: url('images/social_icons/pinterest@2X.png') center center no-repeat; background-size: 71px 71px; } #social-icons a.rss { background: url('images/social_icons/rss@2X.png') center center no-repeat; background-size: 71px 71px; } #social-icons a.youtube { background: url('images/social_icons/youtube@2X.png') center center no-repeat; background-size: 71px 71px; } #social-icons a.deviantart { background: url('images/social_icons/deviantart@2X.png') center center no-repeat; background-size: 71px 71px; } #social-icons a.soundcloud { background: url('images/social_icons/deviantart@2X.png') center center no-repeat; background-size: 71px 71px; } #social-icons a.fb:hover { background: url('images/social_icons/fb_hover@2X.png') center center no-repeat; background-size: 71px 71px; } #social-icons a.dribbble:hover { background: url('images/social_icons/dribbble_hover@2X.png') center center no-repeat; background-size: 71px 71px; } #social-icons a.twitter:hover { background: url('images/social_icons/twitter_hover@2X.png') center center no-repeat; background-size: 71px 71px; } #social-icons a.tumblr:hover { background: url('images/social_icons/tumblr_hover@2X.png') center center no-repeat; background-size: 71px 71px; } #social-icons a.vimeo:hover { background: url('images/social_icons/vimeo_hover@2X.png') center center no-repeat; background-size: 71px 71px; } #social-icons a.skype:hover { background: url('images/social_icons/skype_hover@2X.png') center center no-repeat; background-size: 71px 71px; } #social-icons a.googleplus:hover { background: url('images/social_icons/google_hover@2X.png') center center no-repeat; background-size: 71px 71px; } #social-icons a.instagram:hover { background: url('images/social_icons/instagram_hover@2X.png') center center no-repeat; background-size: 71px 71px; } #social-icons a.linkedin:hover { background: url('images/social_icons/linked_hover@2X.png') center center no-repeat; background-size: 71px 71px; } #social-icons a.pinterest:hover { background: url('images/social_icons/pinterest_hover@2X.png') center center no-repeat; background-size: 71px 71px; } #social-icons a.rss:hover { background: url('images/social_icons/rss_hover@2X.png') center center no-repeat; background-size: 71px 71px; } #social-icons a.deviantart:hover { background: url('images/social_icons/deviantart_hover@2X.png') center center no-repeat; background-size: 71px 71px; } #social-icons a.soundcloud:hover { background: url('images/social_icons/deviantart_hover@2X.png') center center no-repeat; background-size: 71px 71px; } } /*new style*/ @media screen and (max-width: 960px){ #contact-form input[type="text"], #contact-form input#form-subject { width: 318px; margin-right: 0px;} #form-name,#form-phone{margin-right:20px !important;} } #content5 table, #content5 table td { border:0; } @media screen and (max-width: 960px) { #intro h1 { width: 700px; } #home-video { width: 700px; } #slider-wrapper { height: 500px; } #home-slidertop { height: 500px; } .image-slide { height: 500px; background-size: cover !important;} } .image-slide { font-family: 'Open Sans', sans-serif; background-size: cover !important; background-repeat:no-repeat !important; background-position:center -100px !important; height:600px !important; } #slider-wrapper { height:600px !important; } .h-slide1 { color:#fff; width:100%; margin:0 auto; padding-top:50px; padding-left:200px; height:100%; } .h-slide2 { color:#fff; width:100%; margin:0 auto; text-align:left !important; padding-top:50px; padding-left:200px; height:100%; } @media screen and (min-width: 1751px) and (max-width: 5000px) { .h-slide1 h2, .h-slide2 h2 { font-size:50px !important; } .h-slide1 > p, .h-slide2 > p { font-size:35px !important; } .h-slide1, .h-slide2 { padding-left:240px; } } @media screen and (min-width: 1201px) and (max-width: 1750px) { .h-slide1 h2, .h-slide2 h2 { font-size:50px !important; } } @media screen and (min-width: 1201px) and (max-width: 1500px) { .h-slide1, .h-slide2 { padding-left:200px; } } @media screen and (min-width: 961px) and (max-width: 1400px) { .h-slide1 > p, .h-slide2 > p { font-size:24px !important; } .h-slide1, .h-slide2 { padding-left:180px; } } @media screen and (min-width: 641px) and (max-width: 1200px) { .h-slide1 h2, .h-slide2 h2 { font-size:40px !important; } .h-slide1 > p, .h-slide2 > p { font-size:24px !important; width:80%; } .image-slide { background-position:center center !important; } .h-slide1, .h-slide2 { padding-left:150px; width:100%; background-position:-100px top !important; } } @media screen and (min-width: 641px) and (max-width: 1000px) { .h-slide1, .h-slide2 { padding-left:50px; } } @media screen and (min-width: 641px) and (max-width: 800px) { .image-slide { background-position:-150px 0 !important; } } @media screen and (min-width: 320px) and (max-width: 640px) { .h-slide1 h2, .h-slide2 h2 { font-size:32px !important; } .h-slide1 > p, .h-slide2 > p { font-size:20px !important; width:90%; } .image-slide { background-position:-150px 0 !important; } .h-slide1, .h-slide2 { padding-left:25px; width:100%; background-position:-190px top !important; } } @media screen and (min-width: 799px) and (max-width: 900px) { .h-slide1 h2, .h-slide2 h2 { font-size:32px !important; } .h-slide1 > p, .h-slide2 > p { font-size:20px !important; } } @media screen and (min-width: 320px) and (max-width: 900px) { .home-direction-nav li a { width: 50px; height: 50px; line-height: 50px; position: absolute; top: 42%; z-index: 100000; border: 1px solid #CCC; font-family: 'Quicksand', sans-serif; font-weight: 300; font-size: 20px; text-align: center; color: #CCC; } } #colorbox { margin-top:20px !important; }