/* Theme Name: Twenty Sixteen Child Theme URI: Description: Child theme for the Twenty Sixteen theme Author: the WordPress team Author URI: Template: twentysixteen Version: 1.3 */ /* Generated by Orbisius Child Theme Creator (http://club.orbisius.com/products/wordpress-plugins/orbisius-child-theme-creator/) on Sat, 17 Dec 2016 04:07:34 +0000 */ /* The plugin now uses the recommended approach for loading the css files.*/ h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, ul, li { margin:0; padding:0; border:0; outline:0; font-size:100%; font-weight:normal; vertical-align:baseline; background:transparent; list-style:none; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; } html, body { width:100%; height:100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: 'Open Sans', sans-serif; font-size:14px; font-weight:400; line-height:24px; color:#343434; padding:0; margin:0; text-size-adjust: none; -webkit-text-size-adjust:none; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .cf:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .cf { display: block; } a { color:#bbbbbb; text-decoration:none; outline:none; display:inline-block; -webkit-transition:all 0.3s ease-in; -moz-transition:all 0.3s ease-in; -o-transition:all 0.3s ease-in; transition:all 0.3s ease-in; } a:hover { color:#FF9933; } img { display:inline-block; max-width:100%; } p { margin-bottom:20px; } p:last-child { margin-bottom:0; } b, strong { font-weight:700; } .text-center { text-align:center; } .project-detail-slider .owl-theme .owl-controls.clickable .owl-buttons div, .project-detail-slider .owl-theme .owl-controls.clickable .owl-buttons div:before { -webkit-transition:all 0.3s ease-in; -moz-transition:all 0.3s ease-in; -o-transition:all 0.3s ease-in; transition:all 0.3s ease-in; } input, textarea, select, button { outline:none; } label { font-size:14px; color:#bbbbbb; font-weight:600; margin-bottom:10px; text-transform:uppercase; display:block; } .text-field { background:none; border:0; border-bottom:1px solid #444444; font-family: 'Open Sans', sans-serif; font-size:15px; font-weight:400; color:#666; padding:0 0 10px 0; display:block; width:100%; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; } textarea.text-field { height:100px; resize:none; font-family: 'Open Sans', sans-serif; } .text-field:focus { border-bottom:1px solid #FF9933; } .border-btn { border:2px solid #FF9933; padding:10px 30px; display:inline-block; font-family: 'Open Sans', sans-serif; font-weight:600; text-transform:uppercase; font-size:18px; color:#FF9933; background:none; cursor:pointer; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; } .border-btn:hover { background:#FF9933; color:#fff; } header { background:#FF9933; position:fixed; left:0; top:0; width:85px; height:100%; z-index:6; -webkit-box-shadow: 3px 0px 15px -5px rgba(0,0,0,0.1); -moz-box-shadow: 3px 0px 15px -5px rgba(0,0,0,0.1); box-shadow: 3px 0px 15px -5px rgba(0,0,0,0.1); } .menu-btn { width:26px; margin:30px auto 0 auto; } .menu-btn a { text-align:center; display:block; } .bar1, .bar2, .bar3 { width:26px; height:4px; background:#333; margin:3px 0; transition:0.4s; } .menu-btn a:hover .bar1, .menu-btn a:hover .bar2, .menu-btn a:hover .bar3, .active .bar1, .active .bar2, .active .bar3 { background:#ffffff; } .active .bar1 { -webkit-transform: rotate(-45deg) translate(-1px, 6px); -moz-transform: rotate(-45deg) translate(-1px, 6px); -o-transform: rotate(-45deg) translate(-1px, 6px); -ms-transform: rotate(-45deg) translate(-1px, 6px); transform: rotate(-45deg) translate(-1px, 6px); } .active .bar2 { opacity: 0; } .active .bar3 { -webkit-transform: rotate(45deg) translate(-4px, -9px); -moz-transform: rotate(45deg) translate(-4px, -9px); -o-transform: rotate(45deg) translate(-4px, -9px); -ms-transform: rotate(45deg) translate(-4px, -9px); transform: rotate(45deg) translate(-4px, -9px); } .menu-overlay { background:rgba(0, 0, 0, .7); position:fixed; top:0; left:0; width:100%; height:0; z-index:3; opacity:0; visibility:hidden; -webkit-transition:all 0.3s ease-in; -moz-transition:all 0.3s ease-in; -o-transition:all 0.3s ease-in; transition:all 0.3s ease-in; } .menu-overlay.active { opacity:1; visibility:visible; height:100%; } .main-menu { position:fixed; z-index:4; padding:0 85px; text-align:center; width:100%; height:60px; margin-top:-30px; top:40%; left:0; opacity:0; visibility:hidden; -webkit-transition:all 0.5s ease-in; -moz-transition:all 0.5s ease-in; -o-transition:all 0.5s ease-in; transition:all 0.5s ease-in; } .main-menu.active { opacity:1; visibility:visible; top:50%; } .main-menu li { padding:0 30px; position:relative; display:inline-block; } .main-menu li:after { position:absolute; content:""; right:0; top:0; width:2px; height:100%; background:#d4d4d4; -webkit-transform:rotate(18deg); -moz-transform:rotate(18deg); -o-transform:rotate(18deg); -ms-transform:rotate(18deg); -moz-transform: rotate(18deg); } .main-menu li:last-child:after { display:none; } .main-menu li a { position:relative; /*font-family: 'Courgette', cursive;*/ font-size:28px; color:#d4d4d4; text-transform:uppercase; letter-spacing:2px; } .main-menu li a:hover { color:#FF9933; } .main-menu li a:after { position:absolute; content:""; left:0; bottom:-15px; width:0; height:3px; background:#FF9933; -webkit-transition:all 0.3s ease-in; -moz-transition:all 0.3s ease-in; -o-transition:all 0.3s ease-in; transition:all 0.3s ease-in; } .main-menu li a:hover:after { width:100%; } .logo { position:absolute; width:85px; height:344px; margin-top:-172px; top:50%; left:0; text-align:center; } .logo img { width:100%; } .logo img.mobile { display:none; } .get-in-touch { width:170px; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:3px; padding-bottom:35px; position:absolute; bottom:0; left:27px; -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform:rotate(-90deg); -ms-transform:rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform-origin: left top 0; -o-transform-origin: left top 0; -webkit-transform-origin: left top 0; transform-origin: left top 0; } .get-in-touch a { color:#333333; } .get-in-touch a:before { content:""; position:absolute; bottom:34px; left:-35px; background:url(images/map-icon.png) left top no-repeat; width:17px; height:27px; display:inline-block; -webkit-transition:all 0.3s ease-in; -moz-transition:all 0.3s ease-in; -o-transition:all 0.3s ease-in; transition:all 0.3s ease-in; -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); -ms-transform:rotate(90deg); transform: rotate(90deg); } .get-in-touch a:hover:before { background:url(images/map-icon.png) left bottom no-repeat; } .get-in-touch a:hover { color:#fff; } .content-outer { width:100%; height:100%; /*padding-bottom:65px;*/ } .home-page .content-outer { padding-bottom:0; } .page-bg { position:fixed; width:100%; height:100%; background-color:#FF9933; background-repeat:no-repeat; background-position:left bottom; background-size:cover; } #content-wrapper { background:#333333; padding:80px 40px 120px 125px; position:relative; z-index:1; color:#bbbbbb; } /*#content-wrapper:after { position:absolute; z-index:-1; content:""; left:50%; bottom:-10px; margin-left:-675px; width:1350px; height:196px; background:url(images/logo-bg.png) center bottom no-repeat; }*/ #container { height:100%; overflow:auto; width:100%; } .l-size { margin:0 auto; width:1000px; } .home-slider { } .home-slider .owl-carousel .item { background-repeat:no-repeat; background-position:left bottom; background-size:cover; } .home-slider .owl-controls { display:none !important; } h1 { /*font-family: 'Courgette', cursive;*/ font-size:46px; font-weight:400; text-align:center; color:#FF9933; text-transform:uppercase; margin-bottom:40px; letter-spacing:2px; } h5 { font-family: 'Open Sans', sans-serif; font-size:14px; font-weight:400; color:#343434; margin-bottom:10px; } .sub-title { margin-bottom:40px; text-align:center; } .two-columns { float:left; width:50%; padding:0 30px 0 0; } .two-columns:nth-child(2n+2) { padding:0 0 0 30px; } .three-columns { float:left; width:33.33%; padding:0 30px 0 0; } .three-columns:nth-child(3n+3) { padding:0 0 0 30px; } .project-slider .item { padding:0 20px; } .project-slider .project-box { margin-bottom:40px; } .project-slider .project-box:last-child { margin-bottom:0; } .project-box a { display:block; } .project-box:hover { -webkit-box-shadow: 0px 0px 19px -5px rgba(0,0,0,0.5); -moz-box-shadow: 0px 0px 19px -5px rgba(0,0,0,0.5); box-shadow: 0px 0px 19px -5px rgba(0,0,0,0.5); } .project-box a * { -webkit-transition:all 0.3s ease-in; -moz-transition:all 0.3s ease-in; -o-transition:all 0.3s ease-in; transition:all 0.3s ease-in; } .project-box img { display:block; width:100%; height:inherit; } .project-box a .project-detail { background:#1f1f1f; padding:12px 15px; } .project-box a .project-name { float:left; margin-bottom:0; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#ffffff; } .project-box a .project-category { float:right; margin-bottom:0; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:#FF9933; } .project-box a:hover .project-detail { background:#FF9933; } .project-box a:hover .project-name { color:#fff; } .project-box a:hover .project-category { color:#343434; } .project-detail-slider { /*background:#1f1f1f; margin-bottom:50px;*/ } .project-detail-slider img { display:inline-block; } .project-detail-slider .owl-controls { /*display:none !important;*/ } /* .project-detail-slider .owl-theme .owl-controls { margin-top:0; position: absolute; top:50%; width: 100%; } .project-detail-slider .owl-theme .owl-controls .owl-buttons div { opacity:1; margin:-21px 0 0 0; background:transparent; width:42px; height:42px; font-size:0; position:absolute; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; } .project-detail-slider .owl-theme .owl-controls .owl-buttons { position:relative; } .project-detail-slider .owl-theme .owl-controls .owl-buttons div.owl-next { right:0; } .project-detail-slider .owl-theme .owl-controls .owl-buttons div.owl-prev { left:0; } .project-detail-slider .owl-theme .owl-controls .owl-buttons div.owl-prev:before, .project-detail-slider .owl-theme .owl-controls .owl-buttons div.owl-next:before { position: absolute; top:0; left:0; font-family: 'FontAwesome'; width:100%; height:100%; line-height:42px; text-align:center; font-size:36px; font-weight:700; color:#FF9933; text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.7); } .project-detail-slider .owl-theme .owl-controls .owl-buttons div.owl-prev:before { content:"\f104"; } .project-detail-slider .owl-theme .owl-controls .owl-buttons div.owl-next:before { content:"\f105"; } .project-detail-slider .owl-theme .owl-controls.clickable .owl-buttons div:hover { /*border-color:#ffffff; background:rgba(255,153,51,1);*/ } .project-detail-slider .owl-theme .owl-controls.clickable .owl-buttons div:hover:before { color:#ffffff; } */ .project-detail-slider .thumb { padding:15px 10px; } .project-detail-slider .thumb .item { padding:0 7px; } .project-detail-slider .thumb .item img { width:100%; border:2px solid #cfcfcf; padding:3px; background:#fff; cursor:pointer; -webkit-transition:all 0.3s ease-in; -moz-transition:all 0.3s ease-in; -o-transition:all 0.3s ease-in; transition:all 0.3s ease-in; } .project-detail-slider .thumb .item:hover img, .project-detail-slider .thumb .owl-item.synced .item img { border:2px solid #FF9933; } .testimonial-slider { } .testimonial-slider .owl-item { padding:10px; } .testimonial-box { padding:20px; position:relative; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+44,f5f5f5+100 */ background: #444444; /* Old browsers */ background: -moz-linear-gradient(top, #444444 44%, #444444 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #444444 44%,#444444 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #444444 44%,#444444 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#444444 ',GradientType=0 ); /* IE6-9 */ -webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.1); -moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.1); box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.1); } .testimonial-box:after { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(245, 245, 245, 0); border-top-color: #444444; border-width: 15px; margin-left: -15px; } .testimonial-box .author { text-transform:uppercase; font-weight:700; color:#fff; } .testimonial-box .author span { display:block; font-size:12px; font-weight:400; color:#FF9933; } .author-img { width:80px; height:80px; margin:25px auto 0 auto; } .author-img img { -webkit-box-shadow:0px 0px 5px 1px rgba(0,0,0,0.6); -moz-box-shadow:0px 0px 5px 1px rgba(0,0,0,0.6); box-shadow:0px 0px 5px 1px rgba(0,0,0,0.6); -webkit-border-radius:80px; -moz-border-radius:80px; border-radius:80px; } .client-list { font-size:0; margin:0 0 0 -3%; } .client-list li { display:inline-block; width:22%; margin:3% 0 0 3%; } .client-list li a { display:block; } .client-list li:hover { /*-webkit-box-shadow: 0px 0px 19px -5px rgba(0,0,0,0.5); -moz-box-shadow: 0px 0px 19px -5px rgba(0,0,0,0.5); box-shadow: 0px 0px 19px -5px rgba(0,0,0,0.5); */} .client-list li a * { -webkit-transition:all 0.3s ease-in; -moz-transition:all 0.3s ease-in; -o-transition:all 0.3s ease-in; transition:all 0.3s ease-in; } .client-list li img { display:block; width:100%; border:1px solid #fef3e8; } .client-list li:hover a img { -webkit-filter: grayscale(0%); -webkit-transition: .5s ease-in-out; -moz-filter: grayscale(0%); -moz-transition: .5s ease-in-out; -o-filter: grayscale(0%); -o-transition: .5s ease-in-out; filter: grayscale(0%); } .client-list li a img { -webkit-filter: grayscale(100%); -webkit-transition: .5s ease-in-out; -moz-filter: grayscale(100%); -moz-transition: .5s ease-in-out; -o-filter: grayscale(100%); -o-transition: .5s ease-in-out; filter: grayscale(100%); } .client-list li a .detail { margin-bottom:0; background:#f5f5f5; padding:8px 15px; } .client-list li a .name { margin-bottom:0; font-weight:700; text-transform:uppercase; color:#FF9933; line-height:20px; } .client-list li a .category { margin-bottom:0; font-size:13px; font-weight:600; color:#343434; line-height:18px; } .client-list li a:hover .detail { background:#FF9933; } .client-list li a:hover .name { color:#fff; } .client-list li a:hover .category { color:#343434; } .getin-touch-block { background:#fafafa; border:1px solid #f1f1f1; padding:50px; } .form-list li { float:left; width:50%; padding:0 20px; margin-bottom:30px; } .form-list li.button { text-align:center; margin:0; } .form-list li.full-width { width:100%; } .form-list li br { display:none; } .light-box { width:900px; padding:20px; } footer { background:#333333; position:absolute; z-index:2; left:0; bottom:0; text-align:right; width:100%; padding:25px 30px 25px 125px; color:#fff; font-size:12px; line-height:16px; letter-spacing:3px; } .home-page footer { background:none; } footer:after { content:""; position:absolute; z-index:-1; left:0; bottom:0; width:100%; height:85px; background:url(images/footer-shadow.png) 0 0 repeat; } footer .copy { display:inline-block; margin-right:20px; padding-right:20px; border-right:1px solid #fff; vertical-align:top; } footer .social-icon { display:inline-block; vertical-align:top; } footer .social-icon li { display:inline-block; vertical-align:middle; margin:0 3px; } footer .social-icon li a { color:#fff; } footer .social-icon li a:hover { color:#FF9933; } footer .social-icon li a .fa { display:block; width:15px; height:15px; line-height:15px; text-align:center; font-size:15px; } /*footer .social-icon li a { display:block; width:15px; height:15px; }*/ footer .social-icon li a.twitter { background:url(images/twitter-icon.png) center center no-repeat; } footer .social-icon li a.facebook { background:url(images/facebook-icon.png) center center no-repeat; } .project-info .left-part { float:left; width:30%; padding-right:20px; } .project-info .right-part { float:left; width:70%; padding-left:20px; } .wpcf7-not-valid-tip,.wpcf7-validation-errors{ color:#FF0000 !important; font-size:12px; } .screen-reader-response{ display:none; } .wpcf7-response-output.wpcf7-mail-sent-ok { font-size: 16px; font-weight: bold; padding: 0 0 25px 0; text-align: center; } .wpcf7-response-output.wpcf7-validation-errors { font-size: 16px; font-weight: bold; padding: 0 0 25px 0; text-align: center; } .fancybox-skin { background:#333333 !important; color:#bbbbbb !important; } /* .back-arrow { text-align:center; margin-top:20px; } .back-arrow a { border:2px solid #FF9933; padding:8px 15px; display:inline-block; font-family: 'Open Sans', sans-serif; font-weight:600; text-transform:uppercase; font-size:16px; color:#FF9933; background:none; cursor:pointer; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; } .back-arrow a:before { content:"\f104"; font-family: 'FontAwesome'; margin-right:10px; } .back-arrow a:hover { background:#FF9933; color:#fff; } */ /** NEW CSS **/ .project-detail .owl-controls { position:absolute; top:0; left:0; margin:0; width:100%; height:100%; } .project-detail .owl-carousel .item { text-align:center; } .project-detail .owl-controls .owl-pagination { display:none; } .project-detail .owl-controls .owl-buttons div { padding:0; margin:0; overflow:hidden; background:none; overflow:hidden; text-indent:-99999px; } .project-detail .owl-controls .owl-buttons .owl-prev { position:absolute; top:0; left:0; width:50%; height:100%; cursor: url(images/arrow-left.png), auto; } .project-detail .owl-controls .owl-buttons .owl-next { position:absolute; top:0; right:0; width:50%; height:100%; cursor: url(images/arrow-right.png), auto; } .projects h1 { position:absolute; width:100%; left:0; top:30px; z-index:1; margin:0; font-size:35px; line-height:46px; } .projects .project-detail .owl-carousel .item { /*height:600px; padding-top:50px;*/ padding:100px 0 150px 0; } .projects .project-detail .owl-carousel .item img { max-height:100%; max-width:100%; } .projects .info-btn { text-align:center; display:inline-block; position:relative; margin:0 20px 0 0; /*bottom:80px; position:absolute; z-index:1; left:50%; margin-left:-100px;*/ } .projects .info-btn a { width:24px; height:24px; display:block; position:relative; border:1px solid #FF9933; color:#FF9933; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; } .projects .info-btn a:before { position:relative; content:"\f129"; font-family: 'FontAwesome'; left:0; width:100%; line-height:24px; display:block; top:0; } .projects .info-btn a:hover { background:#FF9933; color:#fff; } .projects #content-wrapper { padding-top:0; padding-bottom:0; } .projects .back-arrow { display:inline-block; /*position:absolute; bottom:80px; width:200px; left:50%; z-index:1; margin-left:-50px;*/ } .projects .back-arrow a { border:1px solid #FF9933; padding:5px 10px; display:inline-block; font-weight:600; text-transform:uppercase; font-size:15px; color:#FF9933; background:none; cursor:pointer; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; } .projects .back-arrow a:before { content:"\f104"; font-family: 'FontAwesome'; margin-right:10px; } .projects .back-arrow a:hover { background:#FF9933; color:#fff; } .projects .project-content { position:fixed; left:50%; bottom:-100%; margin-left:-500px; width:1000px; padding:50px; background:#000; color:#fff; z-index:10; -webkit-transition:all 800ms cubic-bezier(0.77, 0, 0.175, 1);transition:all 800ms cubic-bezier(0.77, 0, 0.175, 1); } .projects .project-content.open { bottom:25%; z-index:999999; color:#7c7c7c; } .projects .project-content .close { position:absolute; width:32px; height:32px; display:block; top:0; right:0; text-align:center; color:#FF9933; } .projects .project-content .close:before { position:absolute; content:"\f00d"; font-family: 'FontAwesome'; font-size:18px; top:0; left:0; width:100%; height:100%; line-height:32px; } .projects .project-content .close:hover { background:#FF9933; color:#ffffff; } .projects .bottom { position:absolute; left:0; bottom:80px; width:100%; text-align:center; z-index:1; padding:10px 0; } .light-box h1, .projects .light-box h1 { position:relative; top:0; margin-bottom:20px; } @media screen and (max-width:1480px) { .project-box a .project-name, .project-box a .project-category { letter-spacing:1px; } } @media screen and (max-width:1280px) { .l-size { width:100%; } #content-wrapper:after { background-size:60% auto; } .project-box a .project-name, .project-box a .project-category { letter-spacing:3px; } } @media screen and (max-width:1024px) { header { width:100%; height:auto; } .main-menu { padding:0 20px; } .logo { margin:0; width:100%; height:auto; top:12px; left:0; } .logo img { width:250px; } .logo img.mobile { display:block; } .logo img.desktop { display:none; } .menu-btn { float:left; margin:20px; position:relative; z-index:1; } .get-in-touch { width:17px; height:27px; padding:0; margin:19px 20px 0 0; position:relative; z-index:1; bottom:inherit; left:inherit; float:right; overflow:hidden; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform: rotate(0deg); } .get-in-touch a { background:url(images/map-icon.png) left top no-repeat; width:17px; height:27px; text-indent:-9999px; } .get-in-touch a:hover { background:url(images/map-icon.png) left bottom no-repeat; } .get-in-touch a:before { display:none; } #content-wrapper { padding:100px 25px 85px 25px; } .project-slider .project-box { margin-bottom:20px; } .project-slider .item { padding:0 10px;} .project-box a .project-detail { padding:10px; } .project-box a .project-name { width:100%; letter-spacing:1px; } .project-box a .project-category { width:100%; letter-spacing:1px; } .getin-touch-block { padding:30px; } .light-box { width:680px; } } @media screen and (orientation: landscape) and (max-width: 1023px) { header { width:100%; height:auto; } .logo { margin:0; width:100%; height:auto; top:12px; left:0; } .logo img { width:230px; } .logo img.mobile { display:block; } .logo img.desktop { display:none; } .menu-btn { float:left; margin:20px; position:relative; z-index:1; } .get-in-touch { width:17px; height:27px; padding:0; margin:19px 20px 0 0; position:relative; z-index:1; bottom:inherit; left:inherit; float:right; overflow:hidden; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform: rotate(0deg); } .get-in-touch a { background:url(images/map-icon.png) left top no-repeat; width:17px; height:27px; text-indent:-9999px; } .get-in-touch a:hover { background:url(images/map-icon.png) left bottom no-repeat; } .get-in-touch a:before { display:none; } .home-slider .owl-carousel .item { background-position:left 50px; background-size:contain; } .home-slider .owl-carousel .owl-wrapper { background-color:#000; } } @media screen and (max-width:979px) { .client-list li { width:30%; } } @media screen and (max-width:767px) { .logo { top:14px; } .logo img { width:170px; } .menu-btn { margin:15px; } .get-in-touch { margin:14px 15px 0 0; } .content-outer { padding-bottom:63px; } .projects .content-outer { padding-bottom:0; } .projects .project-detail-slider { margin-bottom:0; } .projects .bottom { bottom:50px; } .main-menu li a { font-size:24px; } h1 { font-size:36px; margin-bottom:30px; } .two-columns, .two-columns:nth-child(2n+2) { width:100%; padding:0 0 20px 0; } .three-columns, .three-columns:nth-child(3n+3) { width:100%; padding:0 0 20px 0; } .mCSB_scrollTools { width:10px; } .sub-title { margin-bottom:20px; } .project-detail-slider { margin-bottom:30px; } .form-list li { width:100%; padding:0; } footer { padding:10px 55px 10px 55px; text-align:center; } footer .copy { display:block; letter-spacing:0; padding:0 0 5px 0; margin:0; border-right:0; } footer .social-icon { display:block; } .light-box { width:550px; } .home-slider .owl-carousel .item { background-position:left 50px; background-size:contain; } .home-slider .owl-carousel .owl-wrapper { background-color:#000; } .project-info .left-part { width:100%; padding:0 0 20px 0; } .project-info .right-part { width:100%; padding:0; } .projects h1 { top:60px; letter-spacing:0; font-size:30px; } .projects .project-detail .owl-carousel .item { padding:110px 0; } .about-img img { width:50%; } } @media screen and (max-width:567px) { .main-menu { height:140px; margin-top:-70px; } .main-menu li { display:block; padding:10px 0; } .main-menu li:after { display:none; } .main-menu li a { font-size:20px; } .main-menu li a:after { bottom:-8px; } #content-wrapper { padding:90px 25px 25px 25px; } h1 { font-size:30px; margin-bottom:20px; } .project-detail-slider .thumb { padding:10px; } .project-detail-slider .thumb .item { padding:0 5px; } .getin-touch-block { padding:20px; } .text-field { font-size:16px; padding:0 0 15px 0; } .form-list li { margin-bottom:15px; } .getin-touch-light-box.light-box { width:90%; } .light-box { width:100%; padding:0; } .client-list li { width:47%; } .border-btn { padding:5px 15px; font-size:16px; } .projects h1 { font-size:25px; } } @media screen and (max-width:479px) { .client-list { margin-left:0; text-align:center; } .client-list li { width:250px; margin:20px auto 0 auto; } .about-img img { width:70%; } } @media screen and (max-width:400px) { .projects .bottom { bottom:80px; } }