@charset "utf-8"; /* Template Name: Fertile Author: OS Templates Author URI: http://www.os-templates.com/ Licence: Free to use under our free template licence terms Licence URI: http://www.os-templates.com/template-terms File: Layout CSS */ /*@import url("fontawesome-4.2.0.min.css");*/ @import url("font-awesome-4.7.0.min.css"); @import url("framework.css"); /*@import url("../scripts/supersized/supersized.custom.css");*/ @import url("custom.flexslider.css"); @import url("justifiedGallery.min.css"); /* Rows ---------------------------------------------------------------------------------------------------------------*/ .row_, .row_ a{} .row0{border-bottom:1px solid;} .row1, .row1 a{} .row2, .row2 a{} .row3, .row3 a{} .row4, .row4 a{} .row5, .row5 a{} .row6{border-top:1px solid;} /* Top Bar --------------------------------------------------------------------------------------------------------------- */ #topbar{margin-left: 240px; margin-top: 3px; padding:2px 0; font-size:.8rem;} #topbar ul li{display:inline-block; margin-right:10px; padding-right:0px;} #topbar ul li:last-child{margin-right:0; padding-right:0; border-right:none;} #topbar i{line-height:normal;} /* Header ---------------------------------------------------------------------------------------------------------------*/ #header{margin-top:30px; text-transform:uppercase;} #header *{margin:0; padding:25px 0 0px;} #header #logo{margin-left: -70px; background:url("images/logo_exp5.png") left center no-repeat;} #header #logo h1{padding:0 5px; margin-left: 60px; font-size:52px; text-transform:lowercase; color:#0b4928; font-family: Verdana, Geneva, sans-serif; letter-spacing: -2px} #header #logo h1::first-letter{} #header #logo p{margin:0; padding:0px 0 0px 60px; font-size:15px; color:#333435;} /* Full Width Homepage Slider - non mobile --------------------------------------------------------------------------------------------------------------------------------------- #slider{position:relative;} #slider, #slider ul{display:block; width:100%; min-width:978px; height:600px; margin:0; padding:0; list-style:none; overflow:hidden;} #slider ul, #slider li{position:absolute;} #slider img{max-width:none;} #slider #slidewrap{position:absolute; top:250px; left:0; width:100%; padding:20px 0; color:#FFFFFF; background-color:rgba(0,0,0,.6);} #slider #slidewrap div{width:978px; max-width:none; margin:0 auto; padding:0; text-align:center;} #slider #slidewrap div span{display:inline-block; margin:0; padding:0; text-transform:none; font-size:42px;} */ /* Shout - Call To Action ---------------------------------------------------------------------------------------------------------------*/ .shout{padding:600px 0 0 0; text-transform:uppercase;} .shout.inner{padding-top:200px;} .shout p{margin:0; padding:0;} .shout p:first-of-type{margin-top:15px; text-transform:none;} .shout .shout-content{padding:15px 30px; border-radius:5px 5px 0 0; font-size:1.2rem;} /* Page Header --------------------------------------------------------------------------------------------------------------- */ #pageintro{padding:180px 0 0 0;} #pageintro .title{margin:0 0 50px 0;} #pageintro .title :first-of-type{font-size:32px;} #pageintro .title{text-shadow: 6px 6px 8px #000000;} /* Latest ---------------------------------------------------------------------------------------------------------------*/ .latest{display:block; width:100%; min-width:978px; max-width:2000px; margin:0 auto;} .latest *{margin:0; padding:0;} .latest ul, .latest ul li{border:solid;} .latest ul{border:solid; border-width:1px 0;} .latest ul li{display:block; float:left; width:20%; border-width:0 0 0 1px; box-sizing:border-box;} .latest ul li:first-child{border-left:none;} .latest ul li:first-child, .latest ul li:nth-child(5n+1){clear:left;} .latest ul li *{width:100%; box-sizing:border-box;} /*.latest a{color:rgba(0,0,0,0);}*/ .latest h2{position:relative; padding-bottom:30px; font-size:2rem; text-align:center;} /* Clients ---------------------------------------------------------------------------------------------------------------*/ .clients{padding:30px 0;} .clients *{margin:0; padding:0;} .clients ul li{display:block; float:left; width:20%; padding:0 15px; box-sizing:border-box;} .clients ul li:first-child, .clients ul li:nth-child(5n+1){clear:left;} .clients ul li *{width:100%; opacity:.5;} .clients ul li *:hover{opacity:1;} /* Content Area ---------------------------------------------------------------------------------------------------------------*/ .container{padding:80px 0;} /* Content */ .container #content{} .container h3{text-align:center; padding-bottom:1px;} .boxedicon{display:inline-block; width:70px; height:70px; line-height:70px; margin-bottom:15px; text-align:center;} .boxedicon a{display:block; width:100%; height:100%; border:2px solid;} .boxedicon a i{line-height:inherit;} .testimonial em{display:block; margin:0; padding:0; font-style:normal; font-size:.8rem;} /* Services */ .services{} .services li:nth-child(-n+3){margin-bottom:30px;}/* Adds bottom margin to the first three elements only */ .services article{position:relative; padding:20px 20px 50px; border-bottom:2px solid; text-align:center;} .services article .txtwrap{padding:20px; border:1px solid;} .services article .txtwrap *{margin:0;} .services article .txtwrap i{margin-bottom:50px;} .services article .txtwrap .heading{margin-bottom:20px; font-size:1.2rem;} .services article footer{display:block; position:absolute; bottom:0; left:0; width:100%; line-height:1;} .services article footer a{display:block; width:100%; padding:8px 0; opacity:0;} .services article:hover footer a, .services .active article footer a{opacity:1;} /* Comments */ #comments ul{margin:0 0 40px 0; padding:0; list-style:none;} #comments li{margin:0 0 10px 0; padding:15px;} #comments .avatar{float:right; margin:0 0 10px 10px; padding:3px; border:1px solid;} #comments address{font-weight:bold;} #comments time{font-size:smaller;} #comments .comcont{display:block; margin:0; padding:0;} #comments .comcont p{margin:10px 5px 10px 0; padding:0;} /* Sidebar */ .container .sidebar{} .sidebar .sdb_holder{margin-bottom:50px;} .sidebar .sdb_holder:last-child{margin-bottom:0;} /* Footer ---------------------------------------------------------------------------------------------------------------*/ #footer{padding:0 0 80px 0;} #footer .shout{margin:0 0 80px 0; padding:0;} #footer .shout .shout-content{border-radius:0 0 5px 5px;} #footer .title{margin:0 0 30px 0; padding:0 0 8px 0; border-bottom:1px solid; font-size:16px; text-transform:uppercase;} #footer .linklist li{margin-bottom:10px;} #footer .linklist li:last-child{margin-bottom:0;} #footer .smallfont{font-size:.8em; margin:0;} #footer input, #footer button{border:none; border-radius:5px;} #footer input{display:block; width:100%; padding:8px;} #footer button{padding:6px 12px; font-weight:bold; text-transform:uppercase; cursor:pointer;} /* Copyright ---------------------------------------------------------------------------------------------------------------*/ #copyright{padding:30px 0;} #copyright p{margin:0; padding:0;} /* Back to Top ---------------------------------------------------------------------------------------------------------------*/ #backtotop{z-index:999; display:inline-block; position:fixed; visibility:hidden; bottom:20px; right:20px; width:36px; height:36px; line-height:36px; border-radius:5px; font-size:16px; text-align:center; opacity:.2;} #backtotop i{display:block; width:100%; height:100%; line-height:inherit;} #backtotop.visible{visibility:visible; opacity:.5;} #backtotop:hover{opacity:1;} /* Transition Fade --------------------------------------------------------------------------------------------------------------- */ .row0, .faico a, #mainav *, .shout-content, .overlay ::before, .overlay ::after, .boxedicon a, .clients ul li *, #backtotop{transition:all .5s ease-in-out;} /*-------------------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------------------*/ /* Navigation ---------------------------------------------------------------------------------------------------------------*/ nav ul, nav ol{margin:0; padding:0; list-style:none;} #mainav .drop::after, #mainav li li .drop::after, #breadcrumb li a::after, .sidebar nav a::after{position:absolute; font-family:"FontAwesome"; font-size:10px; line-height:10px;} /* Top Navigation */ #mainav{margin-bottom:-1px;} #mainav ul{text-transform:uppercase;} #mainav ul ul{z-index:9999; position:absolute; width:160px; text-align:left; text-transform:none;} #mainav ul ul ul{left:160px; top:0;} #mainav li{display:inline-block; position:relative; margin:0 10px 0 0; padding:0;} #mainav li:last-child{margin-right:0;} #mainav li li{width:100%; margin:0;} #mainav li a{display:block; padding:25px 10px;} #mainav li li a{border:solid; border-width:0 0 1px 0;} #mainav .drop{padding-left:15px;} #mainav li li a, #mainav li li .drop{display:block; margin:0; padding:10px 15px;} #mainav .drop::after, #mainav li li .drop::after{content:"\f0d7";} #mainav .drop::after{top:30px; left:5px;} #mainav li li .drop::after{top:15px; left:5px;} #mainav ul ul{visibility:hidden; opacity:0;} #mainav ul li:hover > ul{visibility:visible; opacity:1;} /* Breadcrumb */ #breadcrumb{display:block; padding:15px 20px; border-radius:5px 5px 0 0; text-transform:uppercase;} #breadcrumb ul{margin:0; padding:0; list-style:none;} #breadcrumb li{display:inline-block; margin:0 6px 0 0; padding:0;} #breadcrumb li a{display:block; position:relative; margin:0; padding:0 12px 0 0; font-size:12px;} #breadcrumb li a::after{top:5px; right:0; content:"\f101";} #breadcrumb li:last-child a{margin:0; padding:0;} #breadcrumb li:last-child a::after{display:none;} /* Sidebar Navigation */ .sidebar nav{display:block; width:100%;} .sidebar nav li{margin:0 0 3px 0; padding:0;} .sidebar nav a{display:block; position:relative; margin:0; padding:5px 10px 5px 15px; text-decoration:none; border:solid; border-width:0 0 1px 0;} .sidebar nav a::after{top:9px; left:5px; content:"\f101";} .sidebar nav ul ul a{padding-left:35px;} .sidebar nav ul ul a::after{left:25px;} .sidebar nav ul ul ul a{padding-left:55px;} .sidebar nav ul ul ul a::after{left:45px;} /* Pagination */ .pagination{display:block; width:100%; text-align:center; clear:both;} .pagination li{display:inline-block; margin:0 2px 0 0;} .pagination li:last-child{margin-right:0;} .pagination a, .pagination strong{display:block; padding:8px 11px; border:1px solid; font-weight:normal;} /* Gallery Landing */ #landing {display:block; width:100%; line-height:1.6em;} #landing ul{margin:0; padding:0; list-style:none;} #landing li{display:block; float:left; width:300px; margin:0 30px 30px 0; padding:0;} #landing li.last{margin-right:0;} #landing article, #landing article figure{display:block; width:100%;} #landing article figure img{width:300px; height:225px; margin-bottom:8px;} #landing article figure a img{display:block; border:10px solid #B7B7B7;} #landing article figure a:hover img{border-color:#505050;} #landing article figure figcaption{padding:8px; color:#000000; background-color:#CCCCCC; text-align:center; border:1px solid #CCCCCC; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;} /* Portfolio */ #portfolio{display:block; width:100%; line-height:1.6em;} #portfolio ul{margin:0; padding:0; list-style:none;} #portfolio li{display:block; width:100%; margin:0 0 40px 0; padding:0 0 40px 0; border-bottom:1px solid #444444;} #portfolio li.last{margin:0; padding:0; border-bottom:none;} #portfolio article{display:block; width:100%;} #portfolio article p, #portfolio article header, #portfolio article footer{display:block; width:300px;} #portfolio article header{margin:0 0 15px 0; padding:0; font-size:20px;} #portfolio article footer{} #portfolio article figure{display:block; float:right; width:630px; margin:0; padding:0;} #portfolio article figure img{width:630px; } #portfolio article figcaption p{display:block; width:100%;} #portfolio article figure li{display:block; float:left; width:300px; margin:0 30px 0 0; padding:0; border:none;} #structure{display:block; width:100%; line-height:1.6em;} #structure ul{margin:0; padding:0; list-style:none;} #structure li{display:block; width:100%;} #structure .last{margin:0; padding:0;} #structure article, #structure article figure{display:block; width:100%; margin:0; padding:0;} #structure article{margin:0 0 50px 0; padding:0 0 30px 0; border-bottom:1px solid #B7B7B7;} #structure li.last article{margin:0; padding:0; border:none;} #structure article figure{} #structure article figure figcaption{display:block; float:left; width:300px;} #structure article figure figcaption header{margin:0 0 15px 0; padding:0; font-size:20px;} #structure article figure figcaption p{} #structure article figure figcaption .meta{display:block; width:100%; margin:30px 0; padding:30px 0; font-size:11px; border-top:1px solid #E8E8E8; border-bottom:1px solid #E8E8E8;} #structure article figure figcaption .meta time{} #structure article figure figcaption .meta .tags{} #structure article figure figcaption footer{text-align:left;} #structure article figure ul{display:block; float:right; width:630px;} #structure article figure ul li{display:block; float:left; width:300px; margin:0 0 30px 0; padding:0;} #structure article figure ul li.first{margin-right:30px;} /* Forms ---------------------------------------------------------------------------------------------------------------*/ form, fieldset, legend{margin:0; padding:0; border:none;} legend{display:none;} label, input, textarea, select{display:block; resize:none; font-size:inherit; box-sizing:border-box;} label{margin-bottom:5px;} /* Comment Area */ #comments form{display:block; width:100%;} #comments input, #comments textarea{width:100%; padding:10px; border:1px solid;} #comments textarea{overflow:auto;} #comments div{margin-bottom:15px;} #comments input[type="submit"], #comments input[type="reset"]{display:inline-block; width:auto; min-width:150px; margin:0; padding:8px 5px; cursor:pointer;} /* Tables ---------------------------------------------------------------------------------------------------------------*/ table, th, td{border:1px solid; border-collapse:collapse; vertical-align:top; box-sizing:border-box;} table, th{table-layout:auto;} table{width:100%; margin-bottom:15px;} th, td{padding:5px 8px;} td{border-width:0 1px;} /* Gallery ---------------------------------------------------------------------------------------------------------------*/ #mygallery{display:block; width:100%; margin-bottom:50px;} #gallery{display:block; width:100%; margin-bottom:50px;} #gallery figure figcaption{display:block; width:100%; clear:both;} #gallery li{margin-bottom:30px;} .overlay ul li a{display:block; position:relative;} .overlay ul li a::before{display:block; position:absolute; top:0; left:0; width:100%; height:100%; text-align:center; padding-top:60px; content:"";} .overlay ul li a::after{display:block; position:absolute; top:50%; left:40%; width:100px; height:40px; line-height:40px; margin:-18px 0 0 -18px; padding:0; border-radius:50%; text-align:center;} .overlay ul li a::before, .overlay ul li a::after{opacity:0;} .overlay ul li a:hover::before, .overlay ul li a:hover::after{opacity:1; font-size:23px;} .overlay-b:hover::before, .overlay-b:hover::after{opacity:1; font-family:"Arial"; content:"Before"; } .overlay-a:hover::before, .overlay-a:hover::after{opacity:1; font-family:"Arial"; content:"After"; } .overlay-photo:hover::before, .overlay-photo:hover::after{opacity:1; font-family:"FontAwesome"; content:"\f2cd"; } .overlay-bath:hover::before, .overlay-bath:hover::after{opacity:1; font-family:"FontAwesome"; content:"\f2cd"; } .overlay-kitchen:hover::before, .overlay-kitchen:hover::after{opacity:1; font-family:"FontAwesome"; content:"\f0f5"; } .overlay-living:hover::before, .overlay-living:hover::after{opacity:1; font-family:"FontAwesome"; content:"\f26c"; } .overlay-outdoor:hover::before, .overlay-outdoor:hover::after{opacity:1; font-family:"FontAwesome"; content:"\f1bb"; } .overlay-ext:hover::before, .overlay-ext:hover::after{opacity:1; font-family:"FontAwesome"; content:"\f0e3"; } .overlay-bath-text:hover::before{opacity:1; font-family:"FontAwesome"; content:"\f030";} .overlay-bath-text:hover::after{opacity:1; font-family:"Times New Roman"; content:"Bathroom";} .overlay-kitchen-text:hover::before{opacity:1; font-family:"FontAwesome"; content:"\f030";} .overlay-kitchen-text:hover::after{opacity:1; font-family:"Times New Roman"; content:"Kitchen"; } .overlay-living-text:hover::before{opacity:1; font-family:"FontAwesome"; content:"\f030";} .overlay-living-text:hover::after{opacity:1; font-family:"Times New Roman"; content:"Living / Bedroom"; } .overlay-outdoor-text:hover::before{opacity:1; font-family:"FontAwesome"; content:"\f030";} .overlay-outdoor-text:hover::after{opacity:1; font-family:"Times New Roman"; content:"Outdoor Living"; } .overlay-ext-text:hover::before{opacity:1; font-family:"FontAwesome"; content:"\f030";} .overlay-ext-text:hover::after{opacity:1; font-family:"Times New Roman"; content:"Before and After";} /* Font Awesome Social Icons ---------------------------------------------------------------------------------------------------------------*/ .faico{margin:0; padding:0; list-style:none;} .faico li{display:inline-block; margin:0 2px 0 0; padding:0; line-height:normal;} .faico li:last-child{margin-right:0;} .faico a{display:inline-block; width:30px; height:30px; line-height:30px; border-radius:5px; font-size:inherit; text-align:center;} /* .faico a{color:inherit; background-color:#3C3C3C;} */ .faico a{color:inherit; background-color:inherit;} .faico a:hover{color:#FFFFFF;} .faicon-facebook:hover{background-color:#3B5998;} .faicon-google-plus:hover{background-color:#DB4A39;} .faicon-instagram:hover{background-color:#3F729B;} .faicon-linkedin:hover{background-color:#0E76A8;} .faicon-tumblr:hover{background-color:#34526F;} .faicon-twitter:hover{background-color:#00ACEE;} /*-------------------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------------------*/ /* Colours ---------------------------------------------------------------------------------------------------------------*/ body{color:#B4B4B4; background-color:#232323;} a{color:#56AED4;} hr, .borderedbox{border-color:#EDEDED;} label span{color:#FF0000; background-color:inherit;} .btn{color:#FFFFFF; background-color:#56AED4;} .font_xxl:after{color:inherit; background-color:#56AED4;} /* Rows */ .row_, .row a{color:#efefef; background-color:#c6c6c6; position:fixed; z-index:999;} .row0{color:#888888; background-color:rgba(255,255,255,.8); border-color:#EDEDED;} .row0:hover{background-color:rgba(255,255,255,1);} .row1, .row1 a{color:#FFFFFF; background-color:#000000;} .row2, .row2 a{color:#FFFFFF; background-color:#000000;} .row3{color:#888888; background-color:#FFFFFF;} .row4, .row4 a{color:#B4B4B4; background-color:#EDEDED;} .row5{color:#B4B4B4; background-color:#232323;} .row6, .row6 a{color:#B4B4B4; background-color:#232323;} .row6{border-color:#3C3C3C;} /* Top Bar */ #topbar ul li{border-color:rgba(255,255,255,.4);} #topbar div:first-of-type li:first-child a{color:#FFFFFF;} /* Header */ #header #logo h1 a{color:inherit;} .latest a{color:#FFFFFF;} /* Custom ------------------- */ .services article{color:inherit; border-color:#C5A059;} .services article .txtwrap{border-color:transparent;} .services article:hover .txtwrap, .services .active article .txtwrap{color:#FFFFFF; border-color:#D7D7D7;} .services article footer a{color:#FFFFFF; background-color:#C5A059;} /* Shout */ .shout .shout-content{color:inherit; background-color:rgba(255,255,255,.8);} .shout .shout-content:hover{background-color:rgba(255,255,255,1);} /* Latest Work */ .latest ul, .latest ul li{border-color:#EDEDED;} /* Content */ .boxedicon a{color:inherit; border-color:#56AED4;} .boxedicon a:hover{color:#FFFFFF; background-color:#56AED4;} /* Footer */ #footer .shout .shout-content, #footer .shout .shout-content:hover{color:inherit; background-color:#3C3C3C;} #footer .title{color:#FFFFFF; border-color:#3C3C3C;} #footer input{color:#FFFFFF; background-color:#3C3C3C;} #footer button{color:#FFFFFF; background-color:#56AED4;} /*Back to Top*/ #backtotop{color:#FFFFFF; background-color:#56AED4;} /* Navigation */ #mainav li a{color:inherit;} #mainav .active a, #mainav a:hover, #mainav li:hover > a{color:#56AED4; background-color:inherit;} #mainav li li a, #mainav .active li a{color:#FFFFFF; background-color:rgba(0,0,0,.6); border-color:rgba(0,0,0,.6);} #mainav li li:hover > a, #mainav .active .active > a{color:#FFFFFF; background-color:#56AED4;} #breadcrumb{color:inherit; background-color:rgba(0,0,0,.6);} #breadcrumb a{background-color:inherit;} #breadcrumb li:last-child a{color:#56AED4;} .container .sidebar nav a{color:inherit; border-color:#EDEDED;} .container .sidebar nav a:hover{color:#56AED4;} .pagination a, .pagination strong{border-color:#EDEDED;} .pagination .current{color:inherit; background-color:#EDEDED;} /* Tables + Comments */ table, th, td, #comments .avatar, #comments input, #comments textarea{border-color:#EDEDED;} th{color:#FFFFFF; background-color:#373737;} tr, #comments li, #comments input[type="submit"], #comments input[type="reset"]{color:inherit; background-color:#FBFBFB;} tr:nth-child(even), #comments li:nth-child(even){color:inherit; background-color:#F7F7F7;} table a, #comments a{background-color:inherit;} /* Gallery */ .overlay ul li a::before{background-color:rgba(0,0,0,.5);} /*.overlay ul li a::after{color:#FFFFFF; background-color:#56AED4;}*/ .overlay ul li a::after{color:#FFFFFF;} /* ------------------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------------------ */ /* Media Queries --------------------------------------------------------------------------------------------------------------- @-ms-viewport{width:device-width;} /* Smartphone + Tablet --------------------------------------------------------------------------------------------------------------- @media screen and (min-width:180px) and (max-width:750px) { .imgl, .imgr{display:inline-block; float:none; margin:0 0 10px 0;} .fl_left, .fl_right{display:block; float:none;} .one_half, .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter{display:block; float:none; width:auto; margin:0 0 30px 0; padding:0;} #topbar, #header{text-align:center;} } @media screen and (min-width:180px) and (max-width:900px) { #topbar, #header, #breadcrumb, .container, #footer, #copyright{max-width:95%;} #topbar{padding:0 0 10px;} #topbar ul{margin-top:10px;} #header{padding:12px 0;} #header #logo h1{margin:0;} #mainav{margin-top:6px;} #mainav ul{display:none;} #mainav form{display:block;} #breadcrumb{} .container{} #comments input[type="reset"]{margin-top:10px;} .pagination li{display:inline-block; margin:0 5px 5px 0;} #footer{padding-bottom:20px;} #copyright{} #copyright p:first-of-type{margin-bottom:10px;} } /* Max Wrapper Width - Laptop, Desktop etc. --------------------------------------------------------------------------------------------------------------- @media screen and (min-width:978px) { #topbar, #header, #breadcrumb, .container, #footer, #copyright{max-width:978px;} } /* Other --------------------------------------------------------------------------------------------------------------- @media screen and (max-width:650px) { .scrollable{display:block; width:100%; margin:0 0 30px 0; padding:0 0 15px 0; overflow:auto; overflow-x:scroll;} .scrollable table{margin:0; padding:0; white-space:nowrap;} } */