/* Theme Name: We Are One Theme URI: http://weareone.hypomedia.net Author: Vezilka.org Author URI: http://vezilka.org Description: Festival website Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready Text Domain: ananke This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ /*------------------------------------------------------------------ [Table of contents] 0) #Reset & Basics 1) #Panel 2) #PAGE LOAD 3) #Navigation 4) #Home 5) #About 6) #Team 7) #Separator 1 8) #Work 9) #Projects 10) #Separator 2 11) #Services 12) #Logos 13) #Blog 14) #Contact 15) #google_map 16) #Blog page 17) #Blog single 18) #footer 19) #Media Queries -------------------------------------------------------------------*/ /* #Reset & Basics ================================================== */ .container {max-width: 100%;} .container .column, .container .columns {max-width: 100% !important;} .wp-caption {max-width: 100%;} .wp-caption-text{} .sticky {} .gallery-caption{} .bypostauthor{} .alignright {} .alignleft{} .aligncenter {} img.aligncenter { margin-left: auto; margin-right: auto !important; display: block; clear: both; margin-top: 5px; width: auto !important; } .aligncenter { margin-left: auto; margin-right: auto; display: block; clear: both; } img.alignleft { margin: 5px 20px 20px 0; float: left; width: auto !important; } .alignleft { margin: 5px 10px 20px 0; float: left; } img.alignright { margin: 5px 0 20px 20px; float: right; width: auto !important; } .alignright { margin: 5px 0 20px 20px; float: right; } .transparent { z-index:1; display:block; padding:100px 0; position:relative; } pre, img {max-width: 100%;} table, th, td { border: 1px solid rgba(0, 0, 0, 0.1); } table { border-collapse: separate; border-spacing: 0; border-width: 1px 0 0 1px; margin-bottom: 24px; width: 100%; } caption, th, td { font-weight: normal; text-align: left; padding: 5px 10px; } th { border-width: 0 1px 1px 0; font-weight: bold; } td { border-width: 0 1px 1px 0; } dl { margin-bottom: 24px; } dt { font-weight: bold; } dd { margin-bottom: 24px; } address { font-style: italic; margin-bottom: 24px; } cite { color: #1a1a1a; font-weight: bold; } /* #Panel ================================================== */ #switch { background: #fff; position: fixed; display: none; top: 126px; z-index: 99999; width:200px; margin-left: -100px; border-radius: 0 5px 5px 0; font-family: 'Sansa-Pro-Normal'; -webkit-box-shadow: 0px 0px 4px 0px rgba(51, 51, 51, 0.2); box-shadow: 0px 0px 4px 0px rgba(51, 51, 51, 0.2);} #switch p {margin-bottom: 10px; padding-bottom: 15px; padding-top: 5px; border-bottom:#ededed 1px solid; } #switch ul li {text-transform:uppercase;margin-bottom:0;font-size:12px; display:inline-block;} #show { z-index: 99999; margin-left:0px; position:fixed;left:0; top:20%; background: rgba(40,40,40,.8); border-radius:0 3px 3px 0; margin-top:10px; padding: 20px 5px ; cursor: pointer; } #hide {cursor:pointer;line-height:13px;margin-bottom:0px;font-size: 12px;margin-bottom: 0px;} #setting { height: 50px; background-image: url('images/option_panel.png'); background-repeat:no-repeat; background-size:20px 50px; width: 20px; } .wrap_pattern,.switchlayout {margin-bottom:10px;} .wrap_pattern p {margin-bottom: 5px!important;} .content-switcher{ padding: 16px; overflow: hidden; } .content-switcher .m-btn{padding: 5px 10px; font-size: 12px; min-width: 70px; } .button.small.color.switch {font-size: 12px;text-transform: none;width: 40px;margin: 5px 0px; font-weight: normal; font-family: 'Open Sans'; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3) !important; letter-spacing: 0;} #hide { position:absolute; background-color:#fff; height:30px; width:30px; top:7px; right:7px; border-radius: 0 5px 0px 0; } #hide img { height:30px; width:30px; opacity:0.3; transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s; -o-transition:all 0.3s ease 0s; } #hide img:hover { opacity:0.7; } #switch .button { border-radius: 2px; cursor: pointer; display: inline-block; margin-left:5px; margin-top:5px; height: 15px; padding: 5px; width: 15px; color:#000; } #switch p { margin:5px 0; } .styled-select select { background:#f5f5f5; border:#ededed 1px solid; width: 270px; padding: 5px; font-size: 13px; line-height: 1; outline:none; border-radius: 3px; height: 34px; -webkit-appearance: none; margin:10px 0; } .home-options { position:relative; width:100%; margin-top:10px; text-align:center; margin:0 auto; } .home-options a{ background:#f5f5f5; border:#ededed 1px solid; font-size: 13px; padding: 5px 30px; line-height:40px; outline:none; text-align:center; color:#000; } .home-options a:hover{ background:#f1f1f1; } /* #PAGE LOAD */ body.royal_loader { background: none; visibility: hidden; } #royal_preloader { font-family: Arial; font-size: 12px; visibility: visible; position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 9999999999; -webkit-transition: opacity 0.2s linear 0.8s; -moz-transition: opacity 0.2s linear 0.8s; -ms-transition: opacity 0.2s linear 0.8s; -o-transition: opacity 0.2s linear 0.8s; transition: opacity 0.2s linear 0.8s; } #royal_preloader.complete { opacity: 0; } #royal_preloader .background { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background-color: #000000; -webkit-transition: background 0.5s linear; -moz-transition: background 0.5s linear; -ms-transition: background 0.5s linear; -o-transition: background 0.5s linear; transition: background 0.5s linear; } #royal_preloader.number .name { position: absolute; top: 20%; left: 0px; right: 0px; text-transform: uppercase; color: #EEEEEE; text-align: center; opacity: 0; -webkit-transition: -webkit-transform 0.3s linear; -moz-transition: -moz-transform 0.3s linear; -ms-transition: -ms-transform 0.3s linear; -o-transition: -o-transform 0.3s linear; transition: transform 0.3s linear; -webkit-animation: fly 0.3s; -moz-animation: fly 0.3s; -ms-animation: fly 0.3s; -o-animation: fly 0.3s; animation: fly 0.3s; } #royal_preloader.number .percentage { color: #FFFFFF; font-family: Impact, Arial; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); text-align: center; margin: -90px 0px 0px -90px; background-image: url('images/loader.gif'); background-repeat: no-repeat; background-position: 50% 0; padding-top: 80px; width: 180px; position: absolute; font-size: 50px; top: 50%; left: 50%; -webkit-transition: all 0.3s linear 0.5s; -moz-transition: all 0.3s linear 0.5s; -ms-transition: all 0.3s linear 0.5s; -o-transition: all 0.3s linear 0.5s; transition: all 0.3s linear 0.5s; } #royal_preloader.text .loader { position: absolute; font-family: 'Sansa-Pro-Normal'; text-shadow: 0 0 15px rgba(0,0,0,0.3); text-transform:uppercase; top: 50%; left: 50%; height: 40px; line-height: 40px; margin-top: -20px; letter-spacing: 3px; font-size: 36px; white-space: nowrap; } #royal_preloader.text .loader div { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0%; background-color: #000000; opacity: 0.7; filter: alpha(opacity=70); -webkit-transition: left 0.3s linear; -moz-transition: left 0.3s linear; -ms-transition: left 0.3s linear; -o-transition: left 0.3s linear; transition: left 0.3s linear; } #royal_preloader.logo .loader { width: 80px; height: 80px; position: absolute; left: 50%; top: 50%; margin: -40px 0px 0px -40px; overflow: hidden; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; border-radius: 100%; } #royal_preloader.logo .loader div { position: absolute; bottom: 0%; left: 0px; right: 0px; height: 100%; opacity: 0.7; filter: alpha(opacity=70); -webkit-transition: bottom 0.3s linear; -moz-transition: bottom 0.3s linear; -ms-transition: bottom 0.3s linear; -o-transition: bottom 0.3s linear; transition: bottom 0.3s linear; } #royal_preloader.logo .percentage { position: absolute; width: 80px; height: 40px; line-height: 40px; top: 50%; left: 50%; margin: 40px 0px 0px -40px; color: #072E77; text-align: center; font-family: Arial; font-size: 12px; font-weight: bold; } @-webkit-keyframes fly { 0% { opacity: 0; top: 50%; } 20% {opacity: 1; top: 40%; } 100% { opacity: 0; top: 20%;} } @-moz-keyframes fly { 0% { opacity: 0; top: 50%; } 20% {opacity: 1; top: 40%; } 100% { opacity: 0; top: 20%;} } @-ms-keyframes fly { 0% { opacity: 0; top: 50%; } 20% {opacity: 1; top: 40%; } 100% { opacity: 0; top: 20%;} } @-o-keyframes fly { 0% { opacity: 0; top: 50%; } 20% {opacity: 1; top: 40%; } 100% { opacity: 0; top: 20%;} } @keyframes fly { 0% { opacity: 0; top: 50%; } 20% {opacity: 1; top: 40%; } 100% { opacity: 0; top: 20%;} } /* #Navigation ================================================== */ #menu-wrap{ position: fixed; padding-bottom:10px; width:100%; z-index:500; top:0; left:0; } .logged-in.admin-bar #menu-wrap{ top: 32px; } .menu-back{ background:rgba(60,60,60,.9); } .cbp-af-header { -webkit-transition : all 0.5s ease-out; -moz-transition : all 0.5s ease-out; -o-transition :all 0.5s ease-out; transition : all 0.5s ease-out; } .cbp-af-header.cbp-af-header-shrink { background:rgba(60,60,60,.9); } .cbp-af-header.cbp-af-header-shrink .logo{ width:116px; height:60px; background:url('images/logo.png') no-repeat center center; background-size:116px 60px; -webkit-transition : all 0.5s ease-out; -moz-transition : all 0.5s ease-out; -o-transition :all 0.5s ease-out; transition : all 0.5s ease-out; } .cbp-af-header.cbp-af-header-shrink ul.slimmenu { margin-top:1px; margin-bottom:0; -webkit-transition : all 0.5s ease-out; -moz-transition : all 0.5s ease-out; -o-transition :all 0.5s ease-out; transition : all 0.5s ease-out; } .cbp-af-header.cbp-af-header-shrink ul.slimmenu li:first-child { background:none; } .cbp-af-header.cbp-af-header-shrink ul.slimmenu li ul li:first-child { background:none; } ul.slimmenu li ul li a { color: #000; } ul.slimmenu li ul li a:hover { } ul.slimmenu li ul li { background:none; padding-left:0; } ul.slimmenu li ul { background:rgba(250,250,250,.95); box-shadow: 0 0 15px rgba(0,0,0,0.1); } .logo{ position:absolute; width:146px; height:80px; z-index:10000; left:10px; top:10px; background:url('images/logo.png') no-repeat center center; background-size: 146px 80px; } .menu-collapser { position: relative; width: 100%; height: 48px; line-height: 48px; font-size: 16px; padding: 0 8px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box } .collapse-button { position: absolute; right: 8px; top: 50%; width: 40px; background-image: linear-gradient(to bottom, #151515, #040404); background-repeat: repeat-x; border-style: solid; border-width: 1px; color: #000; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.075); padding: 7px 10px; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); cursor: pointer; font-size: 14px; text-align: center; transform: translate(0, -50%); -o-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box } .collapse-button:hover, .collapse-button:focus { background-image: none; background-color: #040404; color: #FFF; } .collapse-button .icon-bar { background-color: #fff; border-radius: 1px 1px 1px 1px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); display: block; height: 2px; width: 18px; margin: 2px 0; } ul.slimmenu { padding-top:10px; padding-right:10px; text-align:right; margin-top:13px; margin-bottom:10px; } ul.slimmenu li { position: relative; display: inline-block; background:url('images/line2.png') 0 14px no-repeat; background-size:15px 10px; padding-left:20px; } ul.slimmenu > li {} ul.slimmenu > li:first-child { border-left: 0 } ul.slimmenu > li:last-child { margin-right: 0 } ul.slimmenu li a { display: block; color: #fff; padding: 10px 0px; cursor:pointer; margin: 0px 14px; font-family: 'Sansa-Pro-Normal', 'Lato', sans-serif; font-weight:300; text-transform:uppercase; border-bottom:1px solid rgba(0,0,0,0); font-size: 12px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } ul.slimmenu li a:hover { text-decoration: none; } ul.slimmenu li:first-child { background:none; } ul.slimmenu li .sub-collapser { position: absolute; right: 0; top: 0; width: 48px; height: 100%; z-index: 999; cursor: pointer; } ul.slimmenu li .sub-collapser:before { display:none; } ul.slimmenu li .sub-collapser > i { display:none; } ul.slimmenu li ul { margin: 0; list-style-type: none; } ul.slimmenu li ul a{ font-size:10px; } ul.slimmenu li ul li:first-child { background:none; } ul.slimmenu li ul li { background:none; padding-left:0; display: block; } ul.slimmenu li > ul { display: none; position: absolute; text-align:left; left: 0; top: 100%; z-index: 999; width: 150%; } ul.slimmenu li > ul > li ul { display: none; position: absolute; left: 100%; top: 0; z-index: 999; width: 100%; } ul.slimmenu li:hover > ul, ul.slimmenu li > ul li:hover > li ul {display: block;} ul.slimmenu.collapsed { padding:0; margin:0; } ul.slimmenu.collapsed li { display: block; width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } ul.slimmenu.collapsed li a { display: block; border-bottom: 1px solid rgba(0, 0, 0, 0); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box } ul.slimmenu.collapsed li .sub-collapser { height: 40px; } ul.slimmenu.collapsed li > ul { display: none; position: static; } .menu-wrap ul.slimmenu li.dropdown {position: relative;} .menu-wrap .dropdown-menu { width: 150px; position: absolute; top: 100%; left: 0px; display: none; z-index:1000; background-color: rgba(255, 255, 255, 0.97); /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ5JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjk3Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC44Ii8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.97) 49%, rgba(255,255,255,0.8) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(49%,rgba(255,255,255,0.97)), color-stop(100%,rgba(255,255,255,0.8))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.97) 49%,rgba(255,255,255,0.8) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.97) 49%,rgba(255,255,255,0.8) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.97) 49%,rgba(255,255,255,0.8) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0.97) 49%,rgba(255,255,255,0.8) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ccffffff',GradientType=0 ); /* IE6-8 */ } .menu-wrap ul.slimmenu li.dropdown:hover .dropdown-menu {display: block;} .menu-wrap .dropdown-menu li { display: block; position: static; } .menu-wrap .dropdown-menu li a {padding: 5px;} .tipper { height: 1px; left: -99999px; position: absolute; pointer-events: none; top: -99999px; width: 1px;z-index:100000; } .tipper .tipper-content { background: rgba(0, 0, 0, 0.95);box-shadow: 0 0 25px rgba(0,0,0,0.5);text-transform:uppercase; border-radius: 3px; color: #fff; display: block; float: left; font-family: 'Lato', sans-serif; font-size: 10px; margin: 0; padding: 6px 20px; position: relative; white-space: nowrap; } .tipper .tipper-caret { background: url('images/tipper-icon.png') no-repeat; display: block; height: 11px; position: absolute; width: 100%; } .tipper.right .tipper-content { box-shadow: 1px 0 3px rgba(0, 0, 0, 0.25); } .tipper.right .tipper-caret { background-position: left center; left: -5px; top: 0; } .tipper.left .tipper-content { box-shadow: -1px 0 3px rgba(0, 0, 0, 0.25); } .tipper.left .tipper-caret { background-position: right center; right: -5px; top: 0; } .tipper.top .tipper-caret, .tipper.bottom .tipper-caret { display: block; float: none; height: 5px; width: 12px;margin-left:-6px; } .tipper.top .tipper-content { box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.25); } .tipper.top .tipper-caret { background-position: center bottom; bottom: -5px; left: 0; text-align:center;} .tipper.bottom .tipper-content { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } .tipper.bottom .tipper-caret { background-position: center top; top: -5px; left: 0; } /* #Home ================================================== */ #home{ position: relative; margin: 0 auto; width: 100%; overflow:hidden; z-index:2; } .big-text { position: absolute; left:0; top:50%; margin-top:-25px; width:100%; font-family: 'P22Lindum'; text-shadow: 0 0 15px rgba(0,0,0,0.6); text-transform:uppercase; text-align:center; font-size: 60px; line-height:60px; z-index: 200; } .big-text span{ padding-top:15px; padding-bottom:25px; border-top:1px solid #fff; border-bottom:1px solid #fff; } .small-text { position: absolute; left:0; top:50%; margin-top:70px; width:100%; color:#fff; font-family: 'Satisfy', cursive; text-shadow: 0 0 5px rgba(0,0,0,0.1); text-align:center; font-size: 20px; line-height:20px; font-weight: 100; z-index: 200; } .small-text a { position: relative; display: inline-block; outline: none; text-align:left; color: #E39E5F; text-decoration: none; text-shadow: 0 0 1px rgba(255,255,255,0.3); font-size: 20px; } .small-text a:hover, .small-text a:focus { outline: none; } .cl-effect-5 a { overflow: hidden; text-align:center; padding-left:5px; padding-right:5px; } .cl-effect-5 a span { position: relative; display: inline-block; text-align:left; padding-top:10px; padding-bottom:10px; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; } .cl-effect-5 a span::before { position: absolute; top: 100%; padding-top:10px; padding-bottom:10px; content: attr(data-hover); text-align:left; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .cl-effect-5 a:hover span, .cl-effect-5 a:focus span { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); } .flippy ul{ position: relative; } .flippy ul > * { position: absolute; opacity: 0; width:100%; top:-100px; } .flippy ul > *:first-child { opacity: 1; top: 0; } .social-top{ position:absolute; left:0; width:100%; top:50%; margin-top:130px; z-index:1002; height:30px; text-align:center; } .list-social li { padding:0; list-style: none; text-align:center; width:30px; display: inline-block; background: rgba(0,0,0,.3); cursor:pointer; margin-right:2px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .list-social li.icon-soc a { font-family: 'FontAwesome'; font-size: 15px; line-height: 30px; width:30px; opacity:1; margin:0; padding:0; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .list-social li:hover{ } .list-social li:hover.icon-soc a{ opacity:.6; } .just_pattern { background: url(images/pattern.png); position: absolute; opacity: 0.8; left: 0px; top: 0px; right:0; bottom:0; width: 100%; height: 100%; z-index: 0; } .scroll-btn { position: absolute; font-family: 'Sansa-Pro-Normal'; font-size: 10px; color:#fff; text-align:center; text-transform:uppercase; bottom:30px; left:50%; margin-left:-30px; -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out; -ms-transition: all .35s ease-in-out; -o-transition: all .35s ease-in-out; transition: all .35s ease-in-out; width: 60px; height:40px; background:url('images/arrow-down.png') no-repeat center bottom; background-size:30px 16px; z-index: 3900; opacity:.8; } .scroll-btn { -webkit-animation: arrows 3.8s infinite; -webkit-animation-delay: 1s; animation: arrows 3.8s infinite; animation-delay: 1s; } @keyframes arrows { 0% { bottom:30px; } 10% { bottom:40px; } 20% { bottom:30px; } 30% { bottom:40px; } 40% { bottom:20px; } 50% { bottom:40px; } 60% { bottom:30px; } 70% { bottom:40px; } 80% { bottom:20px; } 90% { bottom:40px; } 100% { bottom:30px; } } @-webkit-keyframes arrows { 0% { bottom:30px; } 10% { bottom:40px; } 20% { bottom:30px; } 30% { bottom:40px; } 40% { bottom:20px; } 50% { bottom:40px; } 60% { bottom:30px; } 70% { bottom:40px; } 80% { bottom:20px; } 90% { bottom:40px; } 100% { bottom:30px; } } /* #About ================================================== */ #about{ position: relative; background:#fff; margin: 0 auto; width: 100%; overflow:hidden; padding-top:60px; z-index:2; } .header-text{ position: relative; width: 100%; z-index:2; padding-bottom:50px; } .header-text h1{ position: absolute; top: 0; left: 0; width: 100%; text-align:center; z-index:200; } .header-text p{ padding-top:60px; text-align:center; opacity:.6; text-transform:none; z-index:200; } .header-shadow-text{ position: absolute; top: 0; left: 0; margin-top:-20px; width: 100%; font-family: 'P22Lindum'; text-transform:uppercase; text-align:center; font-size: 70px; line-height:70px; color:rgba(60,60,60,.08); z-index:1; } #about-what-we-do{ position: relative; margin: 0 auto; width: 100%; overflow:hidden; z-index:2; padding-bottom:60px; } .about-what-we-do h5{ position:relative; display:inline-block; padding-left:15px; text-align:left; padding-bottom:25px; } .about-what-we-do p{ text-align:left; } .icon-left1{ position:relative; display:inline-block; font-family: 'FontAwesome'; line-height:32px; font-size:22px; text-align:left; z-index:6; width:22px; height:32px; } .video-sections { position: relative; width: 100%; overflow:hidden; background:#f2f2f2; z-index:2; } .video-section-1 { position: relative; width: 40%; min-height:450px; display:inline-block; float:left; overflow:hidden; z-index:2; background: no-repeat center center; background-size: cover; } .video-section-2 { position: relative; width: 55%; min-height:450px; display:inline-block; float:left; text-align:justify; overflow:hidden; z-index:2; } .video-section-2 h5{ text-align:left; padding-bottom:25px; } .padding-top-video-sec2{ padding-top:30px; } .video-section-2 p{ text-align:justify; } .video-section-2 p:last-child{ padding-bottom:0; } .video-section-2 .clear{ padding-bottom:10px; } #video_background { position: absolute; bottom: 0; left: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -1000; overflow: hidden; } .text-over-video { position: absolute; bottom: 30px; left: 30px; z-index: 100; overflow: hidden; font-family: 'P22Lindum'; text-shadow: 0 0 15px rgba(0,0,0,0.2); text-transform:uppercase; padding-top:15px; padding-bottom:20px; border-top:1px solid #fff; border-bottom:1px solid #fff; text-align:left; font-size: 17px; line-height:17px; } /* #Team ================================================== */ #team{ position: relative; margin: 0 auto; width: 100%; overflow:hidden; background:#fff; padding-top:60px; padding-bottom:60px; z-index:2; } .team-wrap{ position: relative; margin: 0 auto; width: 100%; overflow:hidden; background:#f2f2f2; padding-bottom:20px; z-index:2; } .team-wrap img{ width: 100%; height:auto; display:block; -webkit-box-shadow: 0 8px 6px -6px rgba(60,60,60,.3); -moz-box-shadow: 0 8px 6px -6px rgba(60,60,60,.3); box-shadow: 0 8px 6px -6px rgba(60,60,60,.3); } .team-wrap h5{ padding-top:20px; text-align:center; } .team-wrap p{ padding-bottom:20px; text-align:center; text-transform:uppercase; font-family: 'Lato', sans-serif; font-weight:400; font-size:10px; line-height:10px; padding-top:7px; } .team-line{ position: relative; margin: 0 auto; text-align:center; height:1px; width:50px; margin-bottom:20px; } .social-team{ position:relative; margin:0 auto; width:100%; height:16px; text-align:center; } .team-social li { padding:0; list-style: none; text-align:center; width:24px; display: inline-block; cursor:pointer; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .social-team-posts{ height:48px; } .team-social-posts li { width:48px; } .team-social li.icon-team a { font-family: 'FontAwesome'; font-size: 16px; line-height: 16px; color:#404040; width:24px; opacity:1; margin:0; padding:0; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .team-social li:hover{ } .team-social li:hover.icon-team a{ } /* #Separator 1 ================================================== */ #sep1 *, #sep1 *:after, #sep1 *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #sep1 .clearfix:before, #sep1 .clearfix:after { content: ''; display: table; } #sep1 .clearfix:after { clear: both; } #sep1{ position: relative; margin: 0 auto; width: 100%; overflow:hidden; } .parallax { background: repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { .parallax { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 959px) { .parallax { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .slideshow { position: relative; z-index:20; } .slideshow ol.slides { list-style: none; padding: 0; margin: 0; position: relative; height: 500px; width: 100%; overflow: hidden; background:rgba(61,54,45,.8); } .no-js .slides { height: auto; } .slideshow ol.slides > li { width: 100%; height: 100%; position: absolute; visibility: hidden; -webkit-perspective: 1600px; perspective: 1600px; } .no-js .slides > li { position: relative; visibility: visible; } .slideshow > nav { position:absolute; width:100%; text-align: center; margin-top: -50px; z-index:200; } .slideshow > nav span { display: inline-block; width: 60px; height: 7px; border:1px solid #fff; cursor: pointer; margin: 0 3px; -webkit-transition: background-color 0.2s; transition: background-color 0.2s; } .slideshow > nav span:hover { background-color: #2B2620; } .description { width: 40%; left:10%; padding: 2em 4em; position: relative; z-index: 1000; opacity: 0; } .no-js .description { opacity: 1; } .description h4 { text-align:left; margin-top:150px; padding-bottom:30px; color: #fff; } .description p { text-align:left; color: #fff; } .tiltview { position: absolute; left: 50%; width: 40%; top: 50%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateY(-50%) rotateX(60deg) rotateZ(35deg); transform: translateY(-50%) rotateX(60deg) rotateZ(35deg); } .tiltview a { outline: 1px solid transparent; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .tiltview a, .tiltview a img { max-width: 100%; display: block; margin: 0 auto; } .tiltview a:first-child { margin-bottom: 30px; } .tiltview.row a { width: 48%; width: calc(50% - 15px); margin: 0; } .tiltview.row a:nth-child(2) { left: 50%; left: calc(50% + 15px); position: absolute; top: 0; } /* Show/Hide */ .slideshow .slides > li.current, .slideshow .slides > li.show { visibility: visible; } .description { -webkit-transition: opacity 0.75s; transition: opacity 0.75s; -webkit-box-sizing: border-box; box-sizing: border-box; } .current .description, .show .description { opacity: 1; } .hide .description { opacity: 0; } .parallax-home, .pattern-home { background: repeat; background-size: cover; position: absolute; top: -500px; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } .pattern-home{ background-size: inherit; } /* Individual effects */ /* Move Up, Move Down, Slide Up, Slide Down, Slide Left, Slide Right */ /* For each effect we'll define the incoming and outgoing animation */ /***********************/ /* Move up */ /***********************/ .hide[data-effect-out="moveUpOut"] .tiltview a { -webkit-animation: moveUpOut 1.5s both; animation: moveUpOut 1.5s both; } .hide[data-effect-out="moveUpOut"] .tiltview a:nth-child(2) { -webkit-animation-delay: 0.25s; animation-delay: 0.25s; } @-webkit-keyframes moveUpOut { 25% { -webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); -webkit-transform: translateZ(-30px); } 100% { -webkit-transform: translateZ(3000px); } } @keyframes moveUpOut { 25% { animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); transform: translateZ(-30px); } 100% { transform: translateZ(3000px); } } .show[data-effect-in="moveUpIn"] .tiltview a { -webkit-animation: moveUpIn 1.5s 0.5s both; animation: moveUpIn 1.5s 0.5s both; } .show[data-effect-in="moveUpIn"] .tiltview a:nth-child(2) { -webkit-animation-delay: 0.75s; animation-delay: 0.75s; } @-webkit-keyframes moveUpIn { 0% { -webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); -webkit-transform: translateZ(-3000px); } 75% { -webkit-transform: translateZ(30px); } 100% { -webkit-transform: translateZ(0); } } @keyframes moveUpIn { 0% { animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); transform: translateZ(-3000px); } 75% { transform: translateZ(30px); } 100% { transform: translateZ(0); } } /***********************/ /* Move down */ /***********************/ .hide[data-effect-out="moveDownOut"] .tiltview a { -webkit-animation: moveDownOut 1.5s both; animation: moveDownOut 1.5s both; } .hide[data-effect-out="moveDownOut"] .tiltview a:nth-child(2) { -webkit-animation-delay: 0.25s; animation-delay: 0.25s; } @-webkit-keyframes moveDownOut { 25% { -webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); -webkit-transform: translateZ(30px); } 100% { -webkit-transform: translateZ(-3000px); } } @keyframes moveDownOut { 25% { animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); transform: translateZ(30px); } 100% { transform: translateZ(-3000px); } } .show[data-effect-in="moveDownIn"] .tiltview a { -webkit-animation: moveDownIn 1.5s 0.5s both; animation: moveDownIn 1.5s 0.5s both; } .show[data-effect-in="moveDownIn"] .tiltview a:nth-child(2) { -webkit-animation-delay: 0.75s; animation-delay: 0.75s; } @-webkit-keyframes moveDownIn { 0% { -webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); -webkit-transform: translateZ(3000px); } 75% { -webkit-transform: translateZ(-30px); } 100% { -webkit-transform: translateZ(0); } } @keyframes moveDownIn { 0% { animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); transform: translateZ(3000px); } 75% { transform: translateZ(-30px); } 100% { transform: translateZ(0); } } /***********************/ /* Slide up */ /***********************/ .hide[data-effect-out="slideUpOut"] .tiltview a { -webkit-animation: slideUpOut 1.5s both; animation: slideUpOut 1.5s both; } .hide[data-effect-out="slideUpOut"] .tiltview a:nth-child(2) { -webkit-animation-delay: 0.25s; animation-delay: 0.25s; } @-webkit-keyframes slideUpOut { 25% { -webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); -webkit-transform: translateY(30px); } 100% { -webkit-transform: translateY(-3000px); } } @keyframes slideUpOut { 25% { animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); transform: translateY(30px); } 100% { transform: translateY(-3000px); } } .show[data-effect-in="slideUpIn"] .tiltview a { -webkit-animation: slideUpIn 1.5s 0.5s both; animation: slideUpIn 1.5s 0.5s both; } .show[data-effect-in="slideUpIn"] .tiltview a:nth-child(2) { -webkit-animation-delay: 0.75s; animation-delay: 0.75s; } @-webkit-keyframes slideUpIn { 0% { -webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); -webkit-transform: translateY(3000px); } 75% { -webkit-transform: translateY(-30px); } 100% { -webkit-transform: translateY(0); } } @keyframes slideUpIn { 0% { animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); transform: translateY(3000px); } 75% { transform: translateY(-30px); } 100% { transform: translateY(0); } } /***********************/ /* Slide down */ /***********************/ .hide[data-effect-out="slideDownOut"] .tiltview a { -webkit-animation: slideDownOut 1.5s both; animation: slideDownOut 1.5s both; } .hide[data-effect-out="slideDownOut"] .tiltview.row a:nth-child(2), .hide[data-effect-out="slideDownOut"] .tiltview.col a:first-child { -webkit-animation-delay: 0.25s; animation-delay: 0.25s; } @-webkit-keyframes slideDownOut { 25% { -webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); -webkit-transform: translateY(-30px); } 100% { -webkit-transform: translateY(3000px); } } @keyframes slideDownOut { 25% { animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); transform: translateY(-30px); } 100% { transform: translateY(3000px); } } .show[data-effect-in="slideDownIn"] .tiltview a { -webkit-animation: slideDownIn 1.5s 0.5s both; animation: slideDownIn 1.5s 0.5s both; } .show[data-effect-in="slideDownIn"] .tiltview.row a:nth-child(2), .show[data-effect-in="slideDownIn"] .tiltview.col a:first-child { -webkit-animation-delay: 0.75s; animation-delay: 0.75s; } @-webkit-keyframes slideDownIn { 0% { -webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); -webkit-transform: translateY(-3000px); } 75% { -webkit-transform: translateY(30px); } 100% { -webkit-transform: translateY(0); } } @keyframes slideDownIn { 0% { animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); transform: translateY(-3000px); } 75% { transform: translateY(30px); } 100% { transform: translateY(0); } } /***********************/ /* Slide left */ /***********************/ .hide[data-effect-out="slideLeftOut"] .tiltview a { -webkit-animation: slideLeftOut 1.5s both; animation: slideLeftOut 1.5s both; } .hide[data-effect-out="slideLeftOut"] .tiltview a:nth-child(2) { -webkit-animation-delay: 0.25s; animation-delay: 0.25s; } @-webkit-keyframes slideLeftOut { 25% { -webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); -webkit-transform: translateX(30px); } 100% { -webkit-transform: translateX(-5000px); } } @keyframes slideLeftOut { 25% { animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); transform: translateX(30px); } 100% { transform: translateX(-5000px); } } .show[data-effect-in="slideLeftIn"] .tiltview a { -webkit-animation: slideLeftIn 1.5s 0.5s both; animation: slideLeftIn 1.5s 0.5s both; } .show[data-effect-in="slideLeftIn"] .tiltview a:nth-child(2) { -webkit-animation-delay: 0.75s; animation-delay: 0.75s; } @-webkit-keyframes slideLeftIn { 0% { -webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); -webkit-transform: translateX(3000px); } 75% { -webkit-transform: translateX(-30px); } 100% { -webkit-transform: translateX(0); } } @keyframes slideLeftIn { 0% { animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); transform: translateX(3000px); } 75% { transform: translateX(-30px); } 100% { transform: translateX(0); } } /***********************/ /* Slide right */ /***********************/ .hide[data-effect-out="slideRightOut"] .tiltview a { -webkit-animation: slideRightOut 1.5s both; animation: slideRightOut 1.5s both; } .hide[data-effect-out="slideRightOut"] .tiltview.col a:nth-child(2), .hide[data-effect-out="slideRightOut"] .tiltview.row a:first-child { -webkit-animation-delay: 0.25s; animation-delay: 0.25s; } @-webkit-keyframes slideRightOut { 25% { -webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); -webkit-transform: translateX(-30px); } 100% { -webkit-transform: translateX(3000px); } } @keyframes slideRightOut { 25% { animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); transform: translateX(-30px); } 100% { transform: translateX(3000px); } } .show[data-effect-in="slideRightIn"] .tiltview a { -webkit-animation: slideRightIn 1.5s 0.5s both; animation: slideRightIn 1.5s 0.5s both; } .show[data-effect-in="slideRightIn"] .tiltview.col a:nth-child(2), .show[data-effect-in="slideRightIn"] .tiltview.row a:first-child { -webkit-animation-delay: 0.75s; animation-delay: 0.75s; } @-webkit-keyframes slideRightIn { 0% { -webkit-animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); -webkit-transform: translateX(-5000px); } 75% { -webkit-transform: translateX(30px); } 100% { -webkit-transform: translateX(0); } } @keyframes slideRightIn { 0% { animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); transform: translateX(-5000px); } 75% { transform: translateX(30px); } 100% { transform: translateX(0); } } /* Fallback for no 3D Transforms and no preserve-3d */ .no-csstransformspreserve3d .show .tiltview a, .no-csstransformspreserve3d .hide .tiltview a, .no-csstransforms3d .show .tiltview a, .no-csstransforms3d .hide .tiltview a { -webkit-animation: none !important; animation: none !important; } .no-csstransforms3d .tiltview.col { top: -50%; } .no-csstransforms3d .tiltview.row { top: 20px; } /* Some media queries */ @media screen and (max-width: 65.3125em) { .description, .tiltview { width: 100%; } .description{ left: 0; background:rgba(0,0,0,.6); } .tiltview { left: 0; opacity: .3; pointer-events: none; } } @media screen and (max-width: 33.75em) { .description { } .slideshow > nav span { width: 20px; height: 10px; margin: 0 10px; } } @media screen and (max-width: 24em) { .slideshow .slides { height: 320px; } .description h4 { margin-top:0; } .description { padding: 1.4em; } .no-csstransforms3d .tiltview.col, .no-csstransforms3d .tiltview.row { top: 0; } } /* #Work ================================================== */ #work{ position: relative; margin: 0 auto; width: 100%; overflow:hidden; padding-top:60px; z-index:2; } .portfolio-wrap{ position: relative; width: 100%; overflow:hidden; } .portfolio-box{ position: relative; width: 25%; overflow:hidden; display:inline-block; float:left; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; margin-left:-1px; -webkit-transform:translateX(1px); -moz-transform:translateX(1px); -ms-transform:translateX(1px); -o-transform:translateX(1px); transform:translateX(1px); } .portfolio-box img{ width: 100%; height:auto; display:block; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .portfolio-box:hover img{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .portfolio-box .mask{ position:absolute; background:rgba(255,255,255,.7) url('images/cross.png') no-repeat center center; top:0; left:0; width: 100%; height:100%; display:block; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .portfolio-box:hover .mask{ -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .portfolio-box h4{ position:absolute; bottom:20px; right:-100px; padding-right:15px; z-index:100; font-family: 'Lato', sans-serif; font-weight:700; text-transform:uppercase; font-size: 12px; background:#2B2620; line-height:12px; padding-top:15px; padding-bottom:15px; padding-left:15px; opacity:0; box-shadow: 1px 1px 1px rgba(0,0,0,0.1), -7px 0 5px -3px rgba(0,0,0,0.5), inset 0 0 5px rgba(0,0,0,0.04); -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .portfolio-box:hover h4{ right:63px; opacity:1; -webkit-transition-delay:100ms; -moz-transition-delay:100ms; -o-transition-delay:100ms; -ms-transition-delay:100ms; transition-delay:100ms; } .portfolio-box .fancybox-button{ position:absolute; bottom:20px; font-family: 'FontAwesome'; right:-120px; height:42px; width:42px; z-index:102; font-size: 22px; text-align:center; background:#2B2620; line-height:42px; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .portfolio-box:hover .fancybox-button{ right:20px; opacity:1; -webkit-transition-delay:150ms; -moz-transition-delay:150ms; -o-transition-delay:150ms; -ms-transition-delay:150ms; transition-delay:150ms; } .portfolio-box .fancybox-button:hover{ font-size: 28px; color:#fff; } #portfolio-filter { position:relative; width:100%; text-align: center; } #filter { position:relative; width:100%; } #filter li { display: inline-block; } #filter li a { position: relative; display: inline-block; font-family: 'Lato', sans-serif; font-weight:400; font-size: 12px; outline: none; color: #706e6e; text-decoration: none; text-transform: uppercase; text-shadow: 0 0 1px rgba(255,255,255,0.3); margin-left:8px; margin-right:8px; margin-bottom:20px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } #filter li a:after { content:'::::'; font-family: 'Lato', sans-serif; font-weight:400; font-size: 12px; color: #706e6e; padding-left:20px; opacity:.5; } #filter li:last-child a:after { display:none; } #filter li a:hover { color: #bdb3b3; } .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; transition-duration: 0.6s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: top, left, opacity; transition-property: transform, opacity; } .link-work{ text-align:center; } .link-work h6{ text-align:center; padding-bottom:10px; } .link-work a { position: relative; font-family: 'Satisfy', cursive; display: inline-block; outline: none; text-align:center; text-decoration: none; text-shadow: 0 0 1px rgba(255,255,255,0.3); font-size: 18px; margin-top:5px; } .link-work a:hover, .link-work a:focus { outline: none; } .link-work .cl-effect-5 a { overflow: hidden; text-align:center; text-align:center; } .link-work .cl-effect-5 a span { position: relative; display: inline-block; text-align:center; padding-top:10px; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; } .link-work .cl-effect-5 a span::before { position: absolute; top: 100%; padding-top:10px; color:#101010; content: attr(data-hover); text-align:center; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .link-work .cl-effect-5 a:hover span, .link-work .cl-effect-5 a:focus span { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); text-align:center; } .view-live{ font-size: 15px; padding: 7px 60px; display: inline-block; margin: 5px 0; border: 1px solid; font-weight: 700; font-family: 'Lato', sans-serif; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .view-live:hover{ color: #cfa144; background: #fff; } /* #Projects ================================================== */ /* Expander Item Styles */ .relative{ position: relative; } .portfolio{ width:100%; height: auto; margin:0 auto; max-width: 960px; } .expander-wrap { position:relative; display: none; text-align: center; } #expander-wrap{ position: relative; width:100%; max-width:960px; margin:0 auto; overflow: hidden; } /* Expander Item Controls */ .project-controls{ position: relative; width:100%; height: auto; top:105px; max-width: 960px; margin:0 auto; } .expander-inner{ position: relative; } .cls-btn{ width:100%; padding: 0; margin: 0 auto; display: block; height: auto; } .expander-wrap .cls-btn .close { position:relative; display: inline-block; color:#000; top:0; margin-top:105px; width:auto; height:auto; font-size:30px; font-weight:100; text-align:center; cursor: pointer; float:none; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .expander-close:hover { color:#3a3a3a; cursor:pointer; } .project{ position: relative; width: 100%; overflow: hidden; } .project .flex-direction-nav a{ top: 50%; } #project-single-slider{ position: relative; margin: 0 auto; width: 100%; overflow:hidden; z-index:2; padding-top:10px; padding-bottom:20px; } #project-single-slider h1{ color:#fff; } #project-single-slider .bx-wrapper .bx-prev { bottom:20px; } #project-single-slider .bx-wrapper .bx-next { bottom:20px; } #last-work{ position: relative; margin: 0 auto; padding-bottom:20px; width: 100%; overflow:hidden; z-index:2; } #last-work img{ width: 100%; height:auto; display:block; } #last-work h3{ text-align:center; padding-bottom:25px; } #last-work h6{ text-align:left; padding-bottom:25px; } #last-work p{ text-align:left; padding-bottom:30px; } #last-work p:last-child{ padding-bottom:0; } #slider-wrap{ position: relative; margin: 0 auto; width: 100%; overflow:hidden; z-index:2; } #slider-wrap img{ width: 100%; height:auto; display:block; } .padding-project{ padding-top:50px; padding-bottom:50px; } #sep8 .z-index{ z-index:2000; } #sep8{ position:relative; display:block; width:100%; overflow:hidden; padding-top:150px; padding-bottom:150px; z-index:2; } #project-single-video{ position: relative; margin: 0 auto; width: 100%; overflow:hidden; z-index:2; } #project-single-video h1{ color:#fff; } #thevideo{ display:none; } .video{ width: 100%; height:auto; display:block; } iframe{ width:100%; height:auto; display:block; } #sep9 .z-index{ z-index:2000; } #sep9{ position:relative; display:block; width:100%; overflow:hidden; padding-top:150px; padding-bottom:150px; z-index:2; } .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus {outline: none;} .slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;} /* Icon Fonts *********************************/ /* Font-face Icons */ @font-face { font-family: 'flexslider-icon'; src:url('css/font/flexslider-icon.eot'); src:url('css/font/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('css/font/flexslider-icon.woff') format('woff'), url('css/font/flexslider-icon.ttf') format('truetype'), url('css/font/flexslider-icon.svg#flexslider-icon') format('svg'); font-weight: normal; font-style: normal; } /* FlexSlider Necessary Styles *********************************/ .flexslider {margin: 0; padding: 0;} .flexslider ul.slides{ list-style: none; padding-left: 0;} .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden; list-style: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img {width: 100%; display: block;} .flex-pauseplay span {text-transform: capitalize;} /* Clearfix for the .slides element */ .slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .slides {display: block;} * html .slides {height: 1%;} /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ .no-js .slides > li:first-child {display: block;} /* FlexSlider Default Theme *********************************/ .flexslider { position: relative; zoom: 1; } .flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .loading .flex-viewport { max-height: 300px; } .flexslider .slides { zoom: 1; } .carousel li { margin-right: 5px; } /* Direction Nav */ .flexslider .flex-direction-nav {*height: 0; list-style: none!important;} .flex-direction-nav a { display: block; width: 46px; height: 45px; position: absolute; top: 50%;margin-top:-25px;z-index: 100; overflow: hidden; opacity: 1; cursor: pointer; color: rgba(0,0,0,0); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; } .flex-direction-nav .flex-prev { left: 10px;background:url('assets/arrow_large_left.png') no-repeat center top; } .flex-direction-nav .flex-next { right: 10px; background:url('assets/arrow_large_right.png') no-repeat center top; } .flexslider:hover .flex-prev { opacity: 0.7; } .flexslider:hover .flex-next { opacity: 0.7; } .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; } .flex-direction-nav .flex-disabled { opacity: 0!important; filter:alpha(opacity=0); cursor: default; } .flex-direction-nav a:before {} .flex-direction-nav a.flex-next:before {} /* Pause/Play */ .flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; } .flex-pauseplay a:before { font-family: "flexslider-icon"; font-size: 20px; display: inline-block; content: '\f004'; } .flex-pauseplay a:hover { opacity: 1; } .flex-pauseplay a.flex-play:before { content: '\f003'; } /* Control Nav */ .flex-control-nav {width: 100%; position: absolute; bottom: 15px; text-align: center; z-index: 2; display: none;} .flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;} .flex-control-paging li a {width: 7px; height: 7px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -o-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); box-shadow: inset 0 0 3px rgba(0,0,0,0.3); } .flex-control-paging li a:hover { background: #2B2620; background: rgba(0,0,0,0.7); } .flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; } .flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;} .flex-control-thumbs li {width: 25%; float: left; margin: 0;} .flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;} .flex-control-thumbs img:hover {opacity: 1;} .flex-control-thumbs .flex-active {opacity: 1; cursor: default;} @media screen and (max-width: 860px) { .flex-direction-nav .flex-prev { opacity: 1; left: 10px;} .flex-direction-nav .flex-next { opacity: 1; right: 10px;} } /* #Separator 2 ================================================== */ #sep2{ position: relative; margin: 0 auto; width: 100%; overflow:hidden; padding-top:100px; padding-bottom:100px; } .parallax2 { background: url('images/6.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax2 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { .parallax2 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 959px) { .parallax2 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .facts-wrap{ position: relative; width: 100%; margin:0 auto; text-align:center; } .facts-wrap h5{ padding-top:15px; color:#fff; text-align:center; } .facts-wrap-num{ font-family: 'Lato', sans-serif; font-weight:300; font-size: 60px; line-height:120px; -moz-box-shadow: inset 0 0 30px rgba(60,60,60,.7); -webkit-box-shadow: inset 0 0 30px rgba(60,60,60,.7); box-shadow: inset 0 0 30px rgba(60,60,60,.7); text-shadow: 0px -2px 0px rgba(51,51,51,.1), 0px 2px 3px rgba(102,102,102,.1); width:120px; height:120px; border:1px solid rgba(255,255,255,.4); margin:0 auto; text-align:center; opacity:.9; } /* #Services ================================================== */ #services{ position: relative; margin: 0 auto; width: 100%; background:#fff; overflow:hidden; padding-top:60px; padding-bottom:60px; z-index:2; } .services-offer{ position: relative; width: 100%; background:#f1f1f1; overflow:hidden; margin: 0 auto; cursor:pointer; padding-top:20px; padding-bottom:20px; border-radius:5px; text-align:center; } .services-offer h5{ text-align:center; padding-bottom:25px; padding-top:10px; padding-left:20px; padding-right:20px; } .services-offer p{ text-align:center; padding-left:20px; padding-right:20px; } #plans{ position: relative; margin: 0 auto; width: 100%; overflow:hidden; padding-top:60px; padding-bottom:60px; z-index:2; } .plans-offer{ position: relative; width: 100%; background:#fff; overflow:hidden; margin: 0 auto; padding-top:20px; padding-bottom:20px; border-radius:5px; text-align:center; } .plans-offer h3{ padding-top:15px; padding-bottom:5px; text-align:center; } .plans-offer h3 b{ font-family: 'Lato', sans-serif; font-weight:300; font-size: 12px; line-height:22px; } .plans-offer p{ font-family: 'Lato', sans-serif; font-weight:300; text-align:center; text-transform:uppercase; font-size: 12px; line-height:22px; padding-bottom:10px; } .plans-offer h6{ text-align:center; padding-bottom:35px; } .plans-offer-gold{ position: relative; width: 100%; background:#fff; overflow:hidden; margin: 0 auto; padding-top:20px; padding-bottom:20px; border-radius:5px; text-align:center; } .plans-offer-gold h3{ padding-top:15px; padding-bottom:5px; text-align:center; } .plans-offer-gold h3 b{ font-family: 'Lato', sans-serif; font-weight:300; font-size: 12px; line-height:22px; } .plans-offer-gold p{ font-family: 'Lato', sans-serif; font-weight:300; text-align:center; text-transform:uppercase; font-size: 12px; line-height:22px; padding-bottom:10px; } .plans-offer-gold h6{ text-align:center; padding-bottom:35px; } .plans-offer-gold a, .plans-offer a { position: relative; font-family: 'Satisfy', cursive; display: inline-block; outline: none; text-align:center; text-decoration: none; text-shadow: 0 0 1px rgba(255,255,255,0.3); font-size: 18px; margin-top:5px; } .plans-offer-gold a:hover, .plans-offer-gold a:focus, .plans-offer a:hover, .plans-offer a:focus { outline: none; } .plans-offer-gold .cl-effect-5 a, .plans-offer .cl-effect-5 a { overflow: hidden; text-align:center; padding-left:5px; padding-right:5px; } .plans-offer-gold .cl-effect-5 a span, .plans-offer .cl-effect-5 a span { position: relative; display: inline-block; text-align:center; padding-top:10px; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; } .plans-offer-gold .cl-effect-5 a span::before, .plans-offer .cl-effect-5 a span::before { position: absolute; top: 100%; padding-top:10px; color:#101010; content: attr(data-hover); text-align:center; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .plans-offer-gold .cl-effect-5 a:hover span, .plans-offer-gold .cl-effect-5 a:focus span, .plans-offer .cl-effect-5 a:hover span, .plans-offer .cl-effect-5 a:focus span { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); } /* #Logos ================================================== */ #logos{ position: relative; margin: 0 auto; text-align:center; width: 100%; background:#fff; overflow:hidden; padding-top:10px; padding-bottom:10px; z-index:2; } .logos-wrap{ position: relative; float:left; display:inline-block; text-align:center; margin: 0 27px; overflow:hidden; z-index:2; cursor:pointer; } .logos-wrap img{ width:60%; height:auto; margin-left:20%; margin-right:20%; display:block; -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out; -ms-transition: all .35s ease-in-out; -o-transition: all .35s ease-in-out; transition: all .35s ease-in-out; } .logos-wrap:hover img{ opacity:.7; } /* #Blog ================================================== */ .parallax1 { background: repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax1 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { .parallax1 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 959px) { .parallax1 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-section { margin: 0 auto; overflow: hidden; position: relative; padding-top:150px; padding-bottom:150px; width: 100%; z-index: 2; } .parallax-section:before { box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); content: ""; height: 10px; left: 0; position: absolute; top: -10px; width: 100%; z-index: 101; } .parallax-section:after { bottom: -10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); content: ""; height: 10px; left: 0; position: absolute; width: 100%; z-index: 101; } .blog{ position:relative; margin:0 auto; width:100%; } .blog .sub-text{ margin-bottom:0; } .parallax-blog { background: url('images/parallax/blog.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-blog { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { .parallax-blog { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 959px) { .parallax-blog { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .home-blog.blog-post{ position: relative; margin: 0 auto; width: 100%; overflow:hidden; background:rgba(255,255,255,.9); padding: 0; -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out; -ms-transition: all .35s ease-in-out; -o-transition: all .35s ease-in-out; transition: all .35s ease-in-out; } .home-blog.blog-post:hover{ opacity:.7; } .blog-post img{ width:100%; height:auto; display:block; } .z-index{ z-index:100; } .home-blog h5 { padding-left: 20px; } .blog-post h5 { text-align:left; padding-top:20px; padding-bottom:25px; padding-right:20px; } .blog-post h5 a{ color: #101010; } .blog-post p{ text-align:left; padding-left:20px; padding-right:20px; padding-bottom:20px; } .blog-post p span{ font-family: 'Lato', sans-serif; font-weight:100; font-size: 90%; line-height:12px; } .blog-post p span:last-child{ padding-left:10px; visibility: hidden; } .blog-link{ text-align: center; padding-top: 20px; } .blog-link a{ position: relative; display: block; text-align: center; font-family: 'P22Lindum', sans-serif; font-weight: 400; font-size: 14px; line-height: 14px; padding: 15px 65px; text-transform: uppercase; letter-spacing: 1px; color: #2B2620; background: rgba(255,255,255,.9); -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out; -ms-transition: all .35s ease-in-out; -o-transition: all .35s ease-in-out; transition: all .35s ease-in-out; } .blog-link a:hover{ background: #fff; opacity: 0.7; } /* #Contact ================================================== */ #contact{ position: relative; margin: 0 auto; width: 100%; overflow:hidden; padding-top:60px; padding-bottom:60px; z-index:2; } #ajax-form { width: 100%; font-family: 'Sansa-Pro-Normal'; font-size: 10px; line-height:14px; color:#101010; margin:0 auto; } label { display: block; font-family: 'Sansa-Pro-Normal'; font-size: 15px; line-height:30px; font-weight:bold; } input{ width: 96%; border:none; font: 13px/22px 'Open Sans', sans-serif; padding-top: 10px; padding-bottom: 10px; background:#fff; } textarea { width:96%; font: 13px/24px 'Open Sans', sans-serif; height:22px; margin-top:2px; padding-top: 10px; padding-bottom: 10px; border:none; background: #fff; } .error { font: 10px/22px 'Open Sans', sans-serif; text-transform:uppercase; display: none; color:#101010; } #ajaxsuccess { background: #f5f5f5; color:#101010; font: 20px/60px 'Open Sans', sans-serif; height:60px; display: none; padding-left:10px; width: 100%; margin-left: auto; margin-right: auto; margin-top: 30px; } #button-con { position:relative; text-align:center; width: 100%; margin:0 auto; } #button-con input{ width:100%; height:43px; padding-top:0; margin-top:32px; text-align:center; font-family: "Sansa-Pro-Normal", sans-serif; font-weight:700; font-size: 13px; line-height:43px; background: #685542; text-transform:uppercase; } #button-con input:hover{ background: rgba(80,67,59,1); } #button-con input:focus{ outline: none !important; } .text-align-center{ text-align:center; padding-top:10px; } #ajax-form textarea:active, #ajax-form input:active { color: #101010;} #ajax-form textarea:active, #ajax-form input:hover { color: #101010;} #ajax-form textarea:focus, #ajax-form input:focus { outline: none !important; box-shadow: 0 0 10px rgba(60,60,60,.2);} #ajax-form textarea, #ajax-form input { color: #101010;} #ajax-form input[type="text"], #ajax-form input[type="email"]{ padding-left:2%; padding-right:2%; } #ajax-form input[type="text"], textarea{ padding-left:2%; padding-right:2%; } .contact-wrap{ position: relative; margin: 0 auto; overflow:hidden; padding-top:40px; } .contact-wrap p{ text-align:center; opacity:.8; } .contact-wrap p span{ font-family: 'P22Lindum'; font-size: 18px; line-height: 18px; color: #101010; text-transform:uppercase; padding-right:10px; } .contact-wrap i{ font-family: 'FontAwesome'; font-size: 20px; line-height: 20px; text-align:center; z-index:6; padding-right:10px; } div.wpcf7-mail-sent-ok, div.wpcf7-validation-errors{ clear: both; } /* #google_map ================================================== */ #google_map { -webkit-filter: grayscale(90%); -moz-filter: grayscale(90%); -ms-filter: grayscale(90%); -o-filter: grayscale(90%); filter: grayscale(90%); filter: url(images/grayscale.svg#greyscale); filter: gray; /* IE 6-9 */ } #google_map { width:100%; height:400px; z-index:0; position:relative; display: none; z-index:200; opacity:.8; } .button-map { cursor: pointer; text-align: center; position: relative; border-top:1px solid rgba(60,60,60,.1); border-bottom:1px solid rgba(60,60,60,.1); margin-top:10px; padding-top:20px; padding-bottom:20px; width: 100%; display: block; color: #101010; font-size: 16px; font-family: 'P22Lindum'; text-transform: uppercase; z-index:200; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .close-map:after { content: "\f107"; font-family: FontAwesome; display: inline-block; font-weight: normal; font-style: normal; display: inline-block; text-decoration: inherit; margin-left: 16px; font-size: 18px; } .show-map:after { content: "\f106"; font-family: FontAwesome; display: inline-block; font-weight: normal; font-style: normal; display: inline-block; text-decoration: inherit; margin-left: 16px; font-size: 18px; } .map-tooltip h6 { color: #2B2620; text-transform: uppercase; font-size: 18px; margin-bottom: 10px; margin-top: 10px; } .map-tooltip p { margin-bottom: 10px; margin-left:20px; font-size: 13px; text-align:center; } .blog-post-wrapper.page404{ padding: 200px 0; } .page404 h1{ padding-bottom: 30px; color:#ffffff; } .content_404 { padding-bottom: 50px; color:#ffffff; } /*Edit*/ /* #Blog page ================================================== */ .blog{ position:relative; margin:0 auto; width:100%; } .blog h1 { color: #fff; padding-top: 50px; } .blog .sub-text{ margin-bottom:0; position: relative; width:100%; max-width:900px; margin:0 auto; text-align:center; letter-spacing:2px; font-size: 18px; line-height: 26px; color: #f9f9f9; } .parallax-blog { background-size: cover; background-position: center center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -2; width:100%; } .overlay-blog{ background: rgba(0,0,0,0); position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; } @media only screen and (min-width: 1930px) { .parallax-blog { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { .parallax-blog { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 959px) { .parallax-blog { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .blog-post-wrapper{ position:relative; margin:0 auto; width:100%; padding-top:70px; padding-bottom:70px; } .blog-post-wrapper article {margin-bottom: 20px;} .thevideo > iframe { max-width: 100%; height: auto; } .blog-post{ position:relative; margin:0 auto; width:calc(100% - 60px); background:#fff; padding: 30px; box-sizing: border-box; } .blog-post .item img{ width: 100%; height:auto; display:block; } .blog-text-wrap{ position:relative; margin:0 auto; width:100%; padding-top:30px; } .blog-text-wrap:after { content: ''; display: block; clear: both; } .blog-text-wrap img{ float:left; width:70px; height:70px; border-radius:50%; } .blog-text-name{ font-family: 'Lato'; text-align:left; margin-left:90px; font-size:14px; line-height:14px; padding-bottom: 0px; letter-spacing:1px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .blog-text-name:hover{ opacity:.7; } .blog-text-wrap h3{ text-align:left; margin-left:90px; line-height:36px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .blog-text-wrap h3:hover{ opacity:.7; } .blog-text-wrap h3 a {color: #414141;} .blog-text-date{ text-align:left; margin-left:90px; font-size:14px; line-height:14px; color:#212121; padding-top:10px; padding-bottom:30px; letter-spacing:1px; } .blog-text-wrap p{ text-align:left; font-size:18px; line-height:28px; font-weight:300; margin-top: 0px !important; padding: 0; } .blog-text-wrap p span{ font-family: 'FontAwesome'; margin-left:10px; line-height:20px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .blog-text-wrap p span:hover{ color:#323232; } .qu-post .blog-text-date{ padding-bottom:0; } .qu-post .blog-text-wrap{ padding-top:0; } .sticky .blog-text-wrap p { background: #F2F2F2; padding: 20px; } .sticky .blog-text-wrap p a { background: none repeat scroll 0 0 #1a1a1a; display: block; padding: 5px 0; text-align: center; vertical-align: middle; width: 100%; margin-top: 15px; } .sticky .blog-text-wrap p a:hover {background: #cfa144;} .sticky .blog-text-wrap p a:hover span {color: #1a1a1a;} .pagination { position: relative; text-align: center; padding: 20px 0 20px; } .pagination ul li { border: none; display: inline-block; font-size: 14px; height: 35px; line-height: 35px; width: 35px; cursor: pointer; color: #ccc; margin-right: 5px; font-weight: bold; background-color: #2B2620; } .pagination ul li a { color: #ccc; display: block; } .pagination ul li a.current, .pagination ul li span.current, .pagination ul li a:hover { color: #cbab82; } #blog-single img { height: auto; max-width: 100%; margin-right: 20px; } iframe { max-width: 100%; } .widget{ position: relative; width: 100%; padding-bottom:50px; } .widget h6{ text-align:left; padding-bottom:20px; color:#ffffff!important; } .widget_recent_entries ul li{ position: relative; width: 100%; padding: 8px 0; background:rgba(220,220,220,.1); text-align:center; line-height:20px; font-size:12px; text-transform:uppercase; margin-bottom:5px; cursor:pointer; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .widget_recent_entries ul li:last-child{ margin-bottom:0; } .widget_recent_entries ul li a{ color:#ffffff!important; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .widget_recent_entries ul li span{ font-family: 'Lato', sans-serif; font-weight:700; display: block; font-size: 11px; } .widget_recent_entries ul li:hover a{ color:#000; } .widget_recent_entries ul li:hover{ background:rgba(220,220,220,.7); } .widget_categories ul li, .widget_archive ul li{ display: block; line-height: 28px; color: #cbab82; } .widget_categories ul li a, .widget_archive ul li a{ color:#cccccc; font-size:14px; text-transform:uppercase; margin-bottom:8px; background:url('images/arrow-next.png') no-repeat left center; text-align:left; padding-left:20px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .widget_categories ul li a:last-child, .widget_archive ul li a:last-child { margin-bottom:0; } .widget_categories ul li a:hover, .widget_archive ul li a:hover{ color:#E39E5F; padding-left:30px; } .widget_meta abbr { border-bottom: 1px dotted #999; cursor: help; color: #cbab82; } .widget_meta ul li {line-height: 28px;} .widget_meta ul li a {color: #827b7d;} .tag11, .wp-tag-cloud li { padding-left:10px; padding-right:10px; display:inline-block; margin-right: 1px; height:30px; background:rgba(220,220,220,.4); text-align:center; line-height:30px; font-size:10px; text-transform:uppercase; margin-bottom:5px; cursor:pointer; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .tag11 a, .wp-tag-cloud li a{ color:#827b7d; font-size: 11px!important; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .tag11:hover a, .wp-tag-cloud li:hover a{ color:#000; } .tag11:hover, .wp-tag-cloud li:hover{ background:rgba(220,220,220,.7); } .widget_recent_comments ul li {line-height: 28px;} .widget_recent_comments ul li a {color: #827b7d;} .widget_recent_comments ul li a:hover {color: #C3512F;} .widget_rss li { display: block; margin-bottom: 15px; } .widget_rss a.rsswidget { display: block; line-height: 23px; margin-bottom: 6px; } .widget_rss a.rss-date { display: block; font-style: italic; margin-bottom: 10px; } /*-----------------------------------------------------------------------------------*/ /* SEARCH FORM /*-----------------------------------------------------------------------------------*/ .search_form {position:relative;} .search_form:before { content: "\f002"; position:absolute; right:0; top:0; width:50px; height:51px; font-family:FontAwesome; line-height:49px; text-align:center; font-size:20px; color:#666; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .search_form:hover:before {color:#cbab82;} .search_form input { margin:0; padding:13px 0 14px 10px; color:#999; background:none; border:2px solid #666; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .search_form input:focus {border-color:#cbab82; color:#2B2620;} .search_form input.search_btn { width:100%; margin:0; padding:12px 55px 13px 17px; background-color: rgba(81,81,81,0.5); line-height:20px; font-size:12x; color:#b5b5b5; } .search_form input.search_btn { position:absolute; z-index:1; top:0; right:0; width:46px; height:54px; padding:0; border:0; text-indent:-999px; background: none !important; } .search_form input.search_btn:hover { border:0; background-color:#008da8; } /*-----------------------------------------------------------------------------------*/ /* CALENDAR STYLES WIDGET /*-----------------------------------------------------------------------------------*/ .widget_calendar {float: none;} #wp-calendar {width: 100%; } #wp-calendar caption { background: none repeat scroll 0 0 #E9E9E9; color: #2B2620333; font-size: 16px; padding: 10px 0; text-align: center; } #wp-calendar thead { font-size: 10px; } #wp-calendar thead th { border: 1px solid #E9E9E9; font-size: 13px; padding: 8px 0; text-align: center; vertical-align: middle; } #wp-calendar tbody { color: #aaa; } #wp-calendar tbody td { background: #f5f5f5; border: 1px solid #E9E9E9; text-align: center; padding:8px;} #wp-calendar tbody td#today {background: #cbab82;color: #fff;} #wp-calendar tbody td:hover { background: #fff; } #wp-calendar tbody .pad { background: none; } #wp-calendar tfoot {border: 1px solid #E9E9E9;} #wp-calendar tfoot #next { font-size: 12px; text-transform: uppercase; text-align: right; color: #cbab82;} #wp-calendar tfoot #prev { font-size: 12px; text-transform: uppercase; padding-top: 10px; color: #cbab82;} .widget select {max-width: 100%;padding: 5px;border: 1px solid #ccc; width: 100%;} .widget_text .textwidget img{max-width: 100%;height: auto;} .widget_text select, .widget_text input , .widget_text textarea {max-width: 100%;padding: 5px;border: 1px solid #ccc; width: 100%;} .widget_text option {max-width: 100%;} .widget_nav_menu ul li, .widget_pages ul li {color: #827b7d;line-height: 28px;} .widget_nav_menu ul li ul, .widget_pages ul li ul {padding-left: 20px;} .widget_nav_menu ul li a, .widget_pages ul li a{color: #827b7d;} .widget_nav_menu ul li a:hover, .widget_pages ul li a:hover {color: #615C5C;} .blog-post ul{padding-left: 20px;list-style: disc outside none !important;margin-bottom: 15px;} .blog-post ul ul {list-style: circle outside none !important;} .blog-post ul ul ul{list-style: square outside none !important;} .blog-post ol {padding-left: 20px;list-style: decimal outside none !important;margin-left: 0px;margin-bottom: 15px;} .blog-post ul li ul, .blog-post ol li ol { margin-bottom: 0; margin-left: 0px; } .blog-post h1, .blog-post h2, .blog-post h3, .blog-post h4, .blog-post h5, .blog-post h6 {text-align: left;} blockquote{background: #F9F9F9;} blockquote p{ font-size: 15px; font-style: italic; padding-bottom: 0; } /* #Blog single ================================================== */ .blog-post-wrapper .blog-post{ width: auto; } #blog-single.blog-post, .blog-sidebar .blog-post{ padding: 20px; } #blog-single .blog-text-date { margin-left: 0px; padding-top: 5px; padding-bottom: 10px; } #blog-single h1, #blog-single h2, #blog-single h3, #blog-single h4, #blog-single h5, #blog-single h6 { text-align: center; margin-bottom: 15px; color: #cccccc; } .blog-post-wrapper .single-title, #blog-single h3.single-title { padding: 10px 0px 0px; text-align: left; margin-bottom: 0px !important; line-height: 40px; } #blog-single p{ padding: 0; padding-bottom: 10px; } .paragraf-left { padding-left:20px; margin-left:40px; } .caps{ font-family: 'Montserrat', sans-serif; font-weight: 700; font-size:44px; font-size:40px; float: left; padding-right: 10px; padding-top: 12px; } .blog-post .tag11{ margin-top:20px; margin-bottom:0; } pre, code { background-color: #F9F9F9; border-color: rgba(180,180,180,1); border-style: solid; border-width: 0px 0px 0px 4px; display: block; font-family: 'Open Sans', sans-serif;font-weight: 300; font-size: 14px; padding: 10px; } pre, code { margin-top:20px; margin-left:20px; margin-right:20px; overflow: auto; } .blog-post .post{ position: relative; border-top:3px double rgba(200,200,200,.7); border-bottom:3px double rgba(200,200,200,.7); padding-top:20px; padding-bottom:20px; margin-top:20px; margin-right:20px; } .blog-post .post img{ width: 100px; height:100px; float:left; } .blog-post .post h6{ text-align:left; padding-left:120px; padding-bottom: 10px; } .blog-post .post p{ text-align:left; padding-left:120px; font-family: 'Lato'; } .blog-post .post h6 span{ opacity:.5; } .blog-post .post h6 a { color: #cbab82; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .blog-post .post h6 a:hover {color: #414141;} .post-down{ position: relative; border-top:3px double rgba(200,200,200,.7); border-bottom:3px double rgba(200,200,200,.7); padding-top:20px; padding-bottom:20px; margin-top:20px; } .post-down .rpl-but{ position:absolute; z-index:2; top:20px; right:0; height:26px; width:60px; text-align:center; background:rgba(6,6,6,.6); font-family: 'Open Sans', sans-serif;font-weight: 300; font-weight: 400; font-size: 12px; line-height:26px; text-transform:uppercase; cursor:pointer; color:#fff; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .post-down .rpl-but a.comment-reply-link{ color:#fff; } .post-down .rpl-but:hover{ background:rgba(6,6,6,.9); } .margin-rpl{ margin-left:60px; } .post-down img{ width: 100px; height:100px; float:left; } .post-down h6{ text-align:left; padding-left:120px; padding-bottom:20px; text-transform:none; } .post-down p{ text-align:left; padding-left:120px; } .post-down h6 span{ opacity:.4; font-weight: 400; font-size:80%; font-family: 'Montserrat',sans-serif; } .single-comment .children {margin-left: 40px;} .comment-reply-title {font-size: 16px;padding-top: 40px; text-align: left;} .replyForm textarea{ min-height: 100px; } .replyForm #ajax-form input[type="submit"]{ color: #dfdfdf; } .replyForm #ajax-form input[type="submit"]:hover{ color: #fff; } .comment-form input[type="text"], .comment-form input[type="email"]{ margin-bottom: 15px; } /* #footer ================================================== */ #footer{ position: relative; margin: 0 auto; width: 100%; background:#2B2620; padding-top:60px; color:#A6A6A6; padding-bottom:35px; text-align: center; } #footer .back-top{ position: absolute; cursor:pointer; top:-10px; left:50%; margin-left:-20px; width:40px; height:40px; font-family: 'FontAwesome'; border-top-left-radius:3px; border-top-right-radius:3px; text-align:center; z-index:10000; font-size: 22px; line-height: 40px; background:#2B2620; -webkit-box-shadow: 0 -5px 15px -5px #000; -moz-box-shadow: 0 -5px 15px -5px #000; box-shadow: 0 -5px 15px -5px #000; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } #footer .back-top:hover{ background:#fff; -webkit-box-shadow: 0 -5px 5px -5px #000; -moz-box-shadow: 0 -5px 5px -5px #000; box-shadow: 0 -5px 5px -5px #000; } #footer{ text-transform:uppercase; font-size: 12px; line-height:22px; text-align:center; padding-bottom:5px; } #footer small{ display: block; padding-top: 10px; } #footer i{ font-size: 16px; line-height: 22px; text-align:center; z-index:6; padding-left:5px; padding-right:5px; } /* #Media Queries ================================================== */ @media only screen and (max-width: 800px) { h1 { font-size: 28px; line-height:28px; } .header-text p{ padding-top:50px; } .header-shadow-text{ margin-top:-20px; font-size: 40px; line-height:40px; } #royal_preloader.text .loader { letter-spacing: 2px; font-size: 26px; } .logo{ width:80px; height:50px; left:10px; top:10px; background:url('images/logo.png') no-repeat center center; background-size:80px 50px; } .cbp-af-header.cbp-af-header-shrink .logo{ width:80px; height:50px; left:10px; top:10px; background:url('images/logo.png') no-repeat center center; background-size:80px 50px; -webkit-transition : all 0.5s ease-out; -moz-transition : all 0.5s ease-out; -o-transition :all 0.5s ease-out; transition : all 0.5s ease-out; } .cbp-af-header.cbp-af-header-shrink ul.slimmenu li a { border-bottom:none; } .cbp-af-header.cbp-af-header-shrink ul.slimmenu li a:hover { border-bottom:none; background:none; } .cbp-af-header.cbp-af-header-shrink ul.slimmenu li { background:none; } ul.slimmenu li a: { border-bottom:none; } ul.slimmenu li a:hover { border-bottom:none; background:none; } ul.slimmenu li { background:none; } ul.slimmenu li > ul { width: 100%; text-align:right; } } @media only screen and (min-width: 1200px) and (max-width: 1699px) { .video-section-2 h5{ padding-left:40px; } .video-section-2 p{ padding-left:40px; } } @media only screen and (min-width: 960px) and (max-width: 1199px) { .big-text { margin-top:-20px; font-size: 50px; line-height:50px; } .video-section-2 h5{ padding-left:40px; } .video-section-2 p{ padding-left:40px; } } @media only screen and (min-width: 768px) and (max-width: 959px) { .big-text { margin-top:-10px; font-size: 40px; line-height:40px; } #blog-single .single-title, .blog-post-wrapper h3{ font-size: 24px; } .video-section-1 { width: 100%; height:450px; } .video-section-2 { position: relative; margin:0 auto; width: 100%; height:auto; padding-bottom:20px; } .video-section-2 .container .nine.columns { width: 748px; } .video-section-2 h5{ text-align:center; } .video-section-2 p{ text-align:center; } } @media only screen and (max-width: 768px){ .blog-text-wrap img, .blog-text-name{ display: none; } .blog-text-date{ margin-left: 0; padding-bottom: 10px; } .blog-post-wrapper h3{ font-size: 20px; line-height: 24px; margin-left: 0; } .blog-text-wrap p{ font-size: 14px; line-height: 20px; } .blog-text-wrap{ padding-top: 10px; } .blog-post-wrapper .blog-post{ padding: 15px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .big-text { margin-top:0; font-size: 25px; line-height:25px; } .video-section-1 { width: 100%; height:450px; } .video-section-2 { position: relative; width: 100%; height:auto; padding-bottom:20px; } .video-section-2 h5{ text-align:center; } .video-section-2 p{ text-align:center; } .logos-wrap{ width: 33.3333333333333333333333333%; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .big-text { margin-top:5px; font-size: 17px; line-height:17px; } .video-section-1 { width: 100%; height:250px; } .video-section-2 { position: relative; width: 100%; height:auto; padding-bottom:20px; } .video-section-2 h5{ text-align:center; } .video-section-2 p{ text-align:center; } .logos-wrap{ width: 50%; } .blog-post-wrapper .single-title{ font-size: 17px; } } @media only screen and (max-width: 320px) { input, textarea, select {width: 94%;} #button-con { text-align: left;} #button-con input { padding-left: 0; padding-right: 0; width: 98%; } } @media only screen and (max-width: 319px) { .big-text { margin-top:10px; font-size: 12px; line-height:12px; } .video-section-1 { width: 100%; height:250px; } .video-section-2 { position: relative; width: 100%; height:auto; padding-bottom:20px; } .video-section-2 h5{ text-align:center; } .video-section-2 p{ text-align:center; } .logos-wrap{ width: 50%; } .blog-post-wrapper .single-title{ font-size: 17px; } }