/* Theme Name: Ray Clarke Roofing Theme URI: http://www.robicowebsolutions.com Description: A theme by Robico Web Solutions. Version: 1.0 Author: Jessica Robinson Author URI: http://www.robicowebsolutions.com */ body{margin:0px !important; padding:0px !important; font-family:Arial, sans-serif; font-size: 16.67px;} body.single{} .middle{position:relative;} * { -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} *:before, *:after { -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} *:focus { outline:none !important; } #wrapper{position:relative; z-index:50; } /*=============HEADERS=============*/ h1{font-size:30px; font-weight:bold; margin:0px; text-transform:uppercase; color:#ed2024;} h2{font-size:25px; font-weight:normal; color:#0973ba; } h3{font-size:18px; font-weight:normal; } p{} p.small{font-size:12px; line-height:24px !important;} /*=============ANCHORS/LINKS=============*/ a{text-decoration:none; color:#ed2024;} a:hover{color:#0973ba;} /*=============ALIGNMENT=============*/ .alignright {float: right;} .alignleft {float: left;} .aligncenter {display:block; margin:auto;} /*=============IMAGES=============*/ a img {border:none;} img{max-width: 100%; height: auto; vertical-align: middle;} img.aligncenter {display: block; margin:0px auto 30px;} img.alignright {float:right; margin-left:30px; margin-bottom:30px;} img.alignleft {float:left; margin-right:30px; margin-bottom:30px;} .wp-caption{} .wp-caption p{} /*=============FORMS=============*/ :-ms-input-placeholder, ::-moz-placeholder, :-moz-placeholder, ::-webkit-input-placeholder{color:#000000; font-family:Arial, sans-serif !important;} input[type=text]{background:#FFFFFF; color:#000000; padding:15px 25px; border-radius:5px; margin-bottom:10px !important; border:none;} textarea{background:#FFFFFF; color:#000000; padding:15px 25px; border-radius:5px; border:none; margin-bottom:10px !important;} input[type=submit]{ background:#ed2024; border:none; font-size:20px; text-transform:uppercase; color:#FFFFFF; padding:10px; border-radius:5px;} /*=============HEADER=============*/ #header{position:relative; background:#FFFFFF; width:100%; border-top:10px solid #ed2024;} #logo img{} #connect{text-align:right;} #connect #phone .number{color:#ed2024;font-weight:bold; margin:0px;} #connect #phone .number:before{content:"\f095"; font-family: FontAwesome; color:#0973ba;} #connect .title{font-family:'Brush Script MT', cursive; color:#0973ba; margin:0px; } /*=============MENUS=============*/ #menu{width:100%; background:#ed2024;} #menu #nav-trigger{display:none; background:url(images/menu.png) no-repeat; width:38px; height:30px; background-size:100%; cursor:pointer;} #menu #homebutton{display:none;} #menu #homebutton a{background:url(images/home.png) no-repeat; width:36px; height:30px; background-size:100%; margin-top:20px; margin-right:10px; cursor:pointer; display:block;} #menu ul.menu{list-style-type: none; padding:0px; margin:0px;} #menu ul.menu li{position:relative;} #menu ul.menu > li a { color:#FFFFFF; font-size:18.75px; padding:20px 25px; display:block;} #menu ul.menu > li.current-menu-item, #menu ul.menu > li:hover{ background:#0973ba;} #menu ul.menu .sub-menu{list-style-type: none; padding:0px; margin:0px;} #menu ul.menu .sub-menu > li > a {text-align:left; white-space: nowrap;} /*=============SLIDESHOW=============*/ #slideshow{height:375px; background:#0973ba; margin-bottom:75px;} #slideshow .cycle-slideshow{width:1170px; margin:auto; position:relative;} #slideshow .cycle-slideshow #adv-custom-caption{position:absolute; left:25px; top:25px; font-size:35px; color:#FFFFFF; text-transform:uppercase; z-index:999998; width:50%; font-weight:bold; text-shadow:2px 2px 2px rgba(0, 0, 0, 1);} #slideshow .cycle-slideshow .cycle-pager{position:absolute; right:25px; bottom:0px; z-index:999999;} #slideshow .cycle-slideshow .cycle-pager span{font-size:75px; color:#FFFFFF;} #slideshow .cycle-slideshow .cycle-pager span.cycle-pager-active{color:#0973ba;} /*=============CONTENT and SIDEBAR CONTAINER=============*/ #middle{position:relative; } /*=============CONTENT=============*/ #content{padding:40px 0px; position:relative; background:#e9e9e9;} .home #content{background:none;} #content .post{height:auto; position:relative; padding-bottom:20px;} #content .post .featuredimage{border:1px solid #e1e1e1; position:relative; float:left; margin-right:20px; width:100px; height:100px; overflow:hidden;} #content .post .featuredimage img{margin:auto; background-color: #fff; display: block; height: auto; width: 100px; line-height: 1.42857; vertical-align:middle; max-width: 100%; padding: 4px; transition: all 0.2s ease-in-out 0s;} #content .post h2{font-size:17px; text-transform:uppercase; margin-bottom:10px;} #content .post .entry h2 a{} #content .post .entry {border-bottom:1px dotted #ebe7e3; margin-top:20px;} #content .navigation{display: table; width: 100%; height:50px; margin-bottom:20px;} #content .navigation ul{padding-left:0px; display: table-cell; text-align: center; vertical-align: middle;} #content .navigation li { display: inline; } #content .navigation li a, #content .navigation li a:hover, #content .navigation li.active a, #content .navigation li.disabled {text-decoration:none; cursor: pointer; font-weight:bold; font-family:"lobster",serif; font-size:41.67px;color:#71001b; padding:0px 20px;} #content .navigation li a:hover, #content .navigation li.active a {color:#848484;} .colorbond{width:150px; height:200px; float:left; padding:0px 25px; text-align:center; font-weight:bold;} .feedback-box{margin-bottom:40px;} .feedback-box .message{background:url(images/testimonial.png) no-repeat; padding-left:60px; font-style:italic; min-height:40px; margin-bottom:20px;} .feedback-box .client-info{font-weight:bold;} /*=============SIDEBAR=============*/ .mainsidebar{position:relative; clear:both; background:url(images/sidebarbkg.jpg)} .mainsidebar ul.sidebar{list-style:none; margin:0; padding:0;} .mainsidebar ul.sidebar li h2.widgettitle{display:none;} .mainsidebar ul.sidebar li .textwidget{position:relative;} .mainsidebar ul.sidebar li .textwidget .slider h3{font-size:20px; text-transform:uppercase; margin:0px; font-weight:bold;} .genericsb ul.sidebar{list-style:none; padding:0px; margin:0px;} .genericsb ul.sidebar h2.widgettitle{font-size:30px; font-weight:bold; margin:0px 0px 25px 0px; text-transform:uppercase; color:#ed2024;} .genericsb ul.sidebar li ul.menu{list-style:none; padding:0px; margin:0px;} .genericsb ul.sidebar li ul.menu li{height:100px; border-top:1px solid rgba(0,0,0,0.5); } .genericsb ul.sidebar li ul.menu li a{ padding: 35px 0 35px 90px; color:#0973ba; display:block; text-transform:uppercase;} .genericsb ul.sidebar li ul.menu li a:hover{color:#ed2024; } .genericsb ul.sidebar li ul.menu li:nth-child(1) a{background:url(images/products.png) 0px 20px no-repeat;} .genericsb ul.sidebar li ul.menu li:nth-child(1) a:hover{background:url(images/products-hover.png) 0px 20px no-repeat;} .genericsb ul.sidebar li ul.menu li:nth-child(2) a{background:url(images/services.png) 0px 20px no-repeat;} .genericsb ul.sidebar li ul.menu li:nth-child(2) a:hover{background:url(images/services-hover.png) 0px 20px no-repeat;} .genericsb ul.sidebar li ul.menu li:nth-child(3) a{background:url(images/guarantee.png) 0px 20px no-repeat;} .genericsb ul.sidebar li ul.menu li:nth-child(3) a:hover{ background:url(images/guarantee-hover.png) 0px 20px no-repeat;} .genericsb ul.sidebar li ul.menu li:nth-child(4) a{background:url(images/work.png) 0px 20px no-repeat;} .genericsb ul.sidebar li ul.menu li:nth-child(4) a:hover{background:url(images/work-hover.png) 0px 20px no-repeat;} .genericsb ul.sidebar li ul.menu li:nth-child(5) a{background:url(images/reputation.png) 0px 20px no-repeat;} .genericsb ul.sidebar li ul.menu li:nth-child(5) a:hover{background:url(images/reputation-hover.png) 0px 20px no-repeat;} .genericsb ul.sidebar li ul.menu li:nth-child(6) a{background:url(images/philosophy.png) 0px 20px no-repeat;} .genericsb ul.sidebar li ul.menu li:nth-child(6) a:hover{background:url(images/philosophy-hover.png) 0px 20px no-repeat;} /*=============FOOTER=============*/ #footer #footer-bottom{background:#ed2024; color:#FFFFFF;} #footer #footer-bottom a{color: #FFFFFF;} #footer #footer-bottom a:hover{color:#FFFFFF;} /* iPhone3/4/5, Samsung Galaxy S2/S3/S4, HTC one*/ @media only screen and (min-width: 320px) and (max-width: 478px), (min-device-width: 320px) and (max-device-height: 480px) and (orientation:portrait) and (-webkit-device-pixel-ratio: 1), (min-device-width: 320px) and (max-device-height: 534px) and (orientation:portrait) and (-webkit-device-pixel-ratio: 1.5), (min-device-width: 320px) and (max-device-height: 640px) and (orientation:portrait) and (-webkit-device-pixel-ratio: 2), (min-device-width: 320px) and (max-device-height: 640px) and (orientation:portrait) and (-webkit-device-pixel-ratio: 3){ .middle{padding-left:25px; padding-right:25px;} /*=============HEADER=============*/ #header{height:auto;} #logo{padding-top:15px; text-align:center;} #logo img{width:75%; height:auto; margin:auto; } #connect{padding-top:15px; } #connect #social{text-align:center; position:absolute; bottom:2px; left:45%;} #connect #phone{text-align:center; padding-bottom:50px;} #connect #social p.title{display:none;} #connect #phone p.title{display:none;} #connect #phone .number{font-size:25px;} #connect #phone .number:before{ font-size:30px;} /*=============MENUS=============*/ #menu{position:relative; background:#FFFFFFF; width:100%; height:auto; min-height:10px;} #menu .menu-top-menu-container{float:none;} #menu #homebutton{display:block;} #menu #homebutton a{display:block; position:absolute; left:20px; top:-40px; width:36px; height:30px; margin:0px;} #menu #nav-trigger{display:block; position:absolute; right:20px; top:-40px;} #menu ul li{float:none; } #menu ul.menu li ul.sub-menu{position:relative; } #menu #menu-top-menu{display:none; width:100%; z-index:99999;} #menu #menu-top-menu > li {float:none; height:auto; width:100%; border-top:1px solid #ffffff;} #menu #menu-top-menu > li:first-child{border-top:none;} #menu #menu-top-menu > li a {text-align:left;} #menu #menu-top-menu .sub-menu{ left: auto; top:auto; display:block; position:relative; float:none;} #menu #menu-top-menu .sub-menu li a{padding-left:30px; white-space:normal;} #menu #menu-top-menu .sub-menu > li:first-child a{} #menu #menu-top-menu .sub-menu > li {background:none;} #menu #menu-top-menu .sub-menu > li:first-child{border-top:1px solid #ffffff;} #menu #menu-top-menu .sub-menu > li > a{margin:0px; padding-left:50px; border-top:1px solid #ffffff; text-transform:none;} /*=============SLIDESHOW=============*/ #slideshow{height:115px; margin-bottom:0px;} #slideshow .cycle-slideshow{width:100%; } #slideshow .cycle-slideshow #adv-custom-caption{left:15px; top:15px; font-size:12px; width:70%;} #slideshow .cycle-slideshow .cycle-pager{ right:15px; bottom:0px;} #slideshow .cycle-slideshow .cycle-pager span{font-size:24px;} /*=============SIDEBAR=============*/ .mainsidebar ul.sidebar li{float:none; margin-bottom:20px; width:100%;} .mainsidebar ul.sidebar li .textwidget{ width:100%;} .mainsidebar ul.sidebar li .textwidget .slider{ height:100px; background: rgba(9, 115, 186, 0.75); color:#FFFFFF; padding:30px;} /*=============CONTENT=============*/ .pageextract{margin-bottom:20px; } .pageextract img{width:100%; height:auto;} /*=============FOOTER=============*/ #footer #footer-bottom .left{text-align:center; padding:10px 0px;} #footer #footer-bottom .right{text-align:center; padding:10px 0px;} } /* HTC one*/ @media only screen and (min-width: 360px) and (max-width: 478px), (min-device-width: 360px) and (max-device-height: 480px) and (orientation:portrait) and (-webkit-device-pixel-ratio: 1), (min-device-width: 360px) and (max-device-height: 534px) and (orientation:portrait) and (-webkit-device-pixel-ratio: 1.5), (min-device-width: 360px) and (max-device-height: 640px) and (orientation:portrait) and (-webkit-device-pixel-ratio: 2), (min-device-width: 360px) and (max-device-height: 640px) and (orientation:portrait) and (-webkit-device-pixel-ratio: 3){} /* Mobile Layout: 480px and below. */ @media only screen and (min-width: 480px) and (max-width: 599px), (min-device-width: 320px) and (max-device-height: 480px) and (orientation:landscape) and (-webkit-device-pixel-ratio: 1), (min-device-width: 320px) and (max-device-height: 534px) and (orientation:landscape) and (-webkit-device-pixel-ratio: 1.5), (min-device-width: 320px) and (max-device-height: 640px) and (orientation:landscape) and (-webkit-device-pixel-ratio: 2), (min-device-width: 320px) and (max-device-height: 640px) and (orientation:landscape) and (-webkit-device-pixel-ratio: 3) { .middle{padding-left:25px; padding-right:25px;} /*=============HEADER=============*/ #header{height:auto;} #logo{padding-top:15px; text-align:center;} #logo img{width:50%; height:auto; margin:auto; } #connect{padding-top:15px; } #connect #social{text-align:center; position:absolute; bottom:2px; left:45%;} #connect #phone{text-align:center; padding-bottom:50px;} #connect #social p.title{display:none;} #connect #phone p.title{display:none;} #connect #phone .number{font-size:25px;} #connect #phone .number:before{ font-size:30px;} /*=============MENUS=============*/ #menu{position:relative; background:#FFFFFFF; width:100%; height:auto; min-height:10px;} #menu .menu-top-menu-container{float:none;} #menu #homebutton{display:block;} #menu #homebutton a{display:block; position:absolute; left:20px; top:-40px; width:36px; height:30px; margin:0px;} #menu #nav-trigger{display:block; position:absolute; right:20px; top:-40px;} #menu ul li{float:none; } #menu ul.menu li ul.sub-menu{position:relative; } #menu #menu-top-menu{display:none; width:100%; z-index:99999;} #menu #menu-top-menu > li {float:none; height:auto; width:100%; border-top:1px solid #ffffff;} #menu #menu-top-menu > li:first-child{border-top:none;} #menu #menu-top-menu > li a {text-align:left;} #menu #menu-top-menu .sub-menu{ left: auto; top:auto; display:block; position:relative; float:none;} #menu #menu-top-menu .sub-menu li a{padding-left:30px; white-space:normal;} #menu #menu-top-menu .sub-menu > li:first-child a{} #menu #menu-top-menu .sub-menu > li {background:none;} #menu #menu-top-menu .sub-menu > li:first-child{border-top:1px solid #ffffff;} #menu #menu-top-menu .sub-menu > li > a{margin:0px; padding-left:50px; border-top:1px solid #ffffff; text-transform:none;} /*=============SLIDESHOW=============*/ #slideshow{height:195px; margin-bottom:0px;} #slideshow .cycle-slideshow{width:100%; height:195px;} #slideshow .cycle-slideshow #adv-custom-caption{left:15px; top:15px; font-size:20px; width:60%;} #slideshow .cycle-slideshow .cycle-pager{ right:15px; bottom:0px; } #slideshow .cycle-slideshow .cycle-pager span{font-size:24px;} /*=============CONTENT=============*/ .pageextract{margin-bottom:20px; } .pageextract img{width:100%; height:auto;} /*=============SIDEBAR=============*/ .mainsidebar ul.sidebar li .textwidget img{position:absolute; top:0px; left:0px;} .mainsidebar ul.sidebar li .textwidget .slider{ position: absolute; left: 0; right: 0; bottom:0; transition: all .5s; overflow: hidden; height:100px; background: rgba(9, 115, 186, 0.75); color:#FFFFFF; padding:30px;} .mainsidebar ul.sidebar li .textwidget .slider:hover { height: 100%;} .mainsidebar ul.sidebar li .textwidget .slider p{display:none;} .mainsidebar ul.sidebar li .textwidget .slider:hover p{display:block;} .mainsidebar ul.sidebar li .textwidget .slider img{right:30px; bottom:30px; top:auto; left:auto;} /*=============FOOTER=============*/ #footer #footer-bottom .left{text-align:center; padding:10px 0px;} #footer #footer-bottom .right{text-align:center; padding:10px 0px;} } /* Samsung Galaxy (portrait and landscape) ----------- */ @media only screen and (min-width : 600px) and (max-width : 767px){ .middle{padding-left:25px; padding-right:25px;} /*=============HEADER=============*/ #header{height:auto;} #logo{width:50%;float:left; display:inline-block; clear:left; padding-top:10px;} #logo img{width:50%; height:auto; margin:auto; } #connect{padding-top:15px; padding-bottom:90px;} #connect #social{text-align:center; position:absolute; bottom:2px; left:45%;} #connect #phone{text-align:right; } #connect #social p.title{display:none;} #connect #phone p.title{display:none;} #connect #phone .number{font-size:25px;} #connect #phone .number:before{ font-size:30px;} /*=============MENUS=============*/ #menu{position:relative; background:#FFFFFFF; width:100%; height:auto; min-height:10px;} #menu .menu-top-menu-container{float:none;} #menu #homebutton{display:block;} #menu #homebutton a{display:block; position:absolute; left:20px; top:-40px; width:36px; height:30px; margin:0px;} #menu #nav-trigger{display:block; position:absolute; right:20px; top:-40px;} #menu ul li{float:none; } #menu ul.menu li ul.sub-menu{position:relative; } #menu #menu-top-menu{display:none; width:100%; z-index:99999;} #menu #menu-top-menu > li {float:none; height:auto; width:100%; border-top:1px solid #ffffff;} #menu #menu-top-menu > li:first-child{border-top:none;} #menu #menu-top-menu > li a {text-align:left;} #menu #menu-top-menu .sub-menu{ left: auto; top:auto; display:block; position:relative; float:none;} #menu #menu-top-menu .sub-menu li a{padding-left:30px; white-space:normal;} #menu #menu-top-menu .sub-menu > li:first-child a{} #menu #menu-top-menu .sub-menu > li {background:none;} #menu #menu-top-menu .sub-menu > li:first-child{border-top:1px solid #ffffff;} #menu #menu-top-menu .sub-menu > li > a{margin:0px; padding-left:50px; border-top:1px solid #ffffff; text-transform:none;} /*=============SLIDESHOW=============*/ #slideshow{height:230px; margin-bottom:0px;} #slideshow .cycle-slideshow{width:100%; height:230px;} #slideshow .cycle-slideshow #adv-custom-caption{left:15px; top:15px; font-size:20px;} #slideshow .cycle-slideshow .cycle-pager{ right:15px; bottom:0px; } #slideshow .cycle-slideshow .cycle-pager span{font-size:40px;} /*=============CONTENT=============*/ .pageextract{float:left; margin-bottom:20px; width:48%; min-height:212px;} .pageextract:nth-child(odd){margin-left:1%;} .pageextract:nth-child(even){margin-right:1%;} .pageextract img{width:100%; height:auto;} /*=============SIDEBAR=============*/ .mainsidebar ul.sidebar li .textwidget img{position:absolute; top:0px; left:0px;} .mainsidebar ul.sidebar li .textwidget .slider{ position: absolute; left: 0; right: 0; bottom:0; transition: all .5s; overflow: hidden; height:100px; background: rgba(9, 115, 186, 0.75); color:#FFFFFF; padding:30px;} .mainsidebar ul.sidebar li .textwidget .slider:hover { height: 100%;} .mainsidebar ul.sidebar li .textwidget .slider p{display:none;} .mainsidebar ul.sidebar li .textwidget .slider:hover p{display:block;} .mainsidebar ul.sidebar li .textwidget .slider img{right:30px; bottom:30px; top:auto; left:auto;} /*=============FOOTER=============*/ #footer #footer-bottom .left{text-align:center; padding:10px 0px;} #footer #footer-bottom .right{text-align:center; padding:10px 0px;} } /* Tablet Layout Portrait ----------- */ @media only screen and (min-width : 768px) and (max-width : 960px), (min-device-width: 768px) and (max-device-height: 1024px) and (orientation:portrait) and (-webkit-device-pixel-ratio: 1), (min-device-width: 768px) and (max-device-height: 1024px) and (orientation:portrait) and (-webkit-device-pixel-ratio: 2){ .middle{padding-left:40px; padding-right:40px;} /*=============HEADER=============*/ #header{height:200px;} #logo{float:left; padding-top:15px;} #connect{float:right; padding-top:15px; } #connect #social p.title{font-size:18.45px;} #connect #phone p.title{font-size:25px;} #connect #phone .number{font-size:36.81px;} #connect #phone .number:before{ font-size:40px;} /*=============MENU=============*/ #menu ul.menu{display: flex; justify-content:space-between;} #menu ul.menu li ul.sub-menu{display:none; position:absolute; z-index:999999; background-clip: padding-box; left: 0px; top:100%; min-width: 100px; background:#0973ba;} #menu ul.menu li:hover ul.sub-menu{display:block; } #menu ul.menu li ul.sub-menu li:hover{background:#ed2024;} /*=============SLIDESHOW=============*/ #slideshow{height:284px; margin-bottom:0px;} #slideshow .cycle-slideshow{width:100%; height:284px;} #slideshow .cycle-slideshow #adv-custom-caption{left:15px; top:15px; font-size:20px;} #slideshow .cycle-slideshow .cycle-pager{ right:15px; bottom:0px; } #slideshow .cycle-slideshow .cycle-pager span{} /*=============CONTENT=============*/ #content{min-height:400px;} .pageextract{float:left; margin-bottom:20px; width:48%; min-height:212px;} .pageextract:nth-child(odd){margin-left:1%;} .pageextract:nth-child(even){margin-right:1%;} .pageextract img{width:100%; height:auto;} .twocolumn{width:50%; float:left;} .twocolumn:nth-child(1){padding-right:5%; clear:left;} .twocolumn:nth-child(2){padding-right:5%; clear:right;} /*=============SIDEBAR=============*/ .mainsidebar ul.sidebar li .textwidget img{position:absolute; top:0px; left:0px;} .mainsidebar ul.sidebar li .textwidget .slider{ position: absolute; left: 0; right: 0; bottom:0; transition: all .5s; overflow: hidden; height:100px; background: rgba(9, 115, 186, 0.75); color:#FFFFFF; padding:30px;} .mainsidebar ul.sidebar li .textwidget .slider:hover { height: 100%;} .mainsidebar ul.sidebar li .textwidget .slider p{display:none;} .mainsidebar ul.sidebar li .textwidget .slider:hover p{display:block;} .mainsidebar ul.sidebar li .textwidget .slider img{right:30px; bottom:30px; top:auto; left:auto;} /*=============FOOTER=============*/ #footer #footer-bottom{height:40px; } #footer #footer-bottom .left{width:50%; padding-top:10px; display:inline-block; vertical-align:middle; height:40px;} #footer #footer-bottom .right{width:50%; padding-top:10px; display:inline-block; vertical-align:middle; height:40px; text-align:right;} } /* Tablet Layout Landscape ----------- */ @media only screen and (min-width: 960px) and (max-width : 1024px), (min-device-width: 768px) and (max-device-height: 1024px) and (orientation:landscape) and (-webkit-device-pixel-ratio: 1), (min-device-width: 768px) and (max-device-height: 1024px) and (orientation:landscape) and (-webkit-device-pixel-ratio: 2){ .middle{width:900px; margin:auto;} /*=============HEADER=============*/ #header{height:200px;} #logo{float:left; padding-top:15px;} #connect{float:right; padding-top:15px; } #connect #social p.title{font-size:18.45px;} #connect #phone p.title{font-size:25px;} #connect #phone .number{font-size:36.81px;} #connect #phone .number:before{ font-size:40px;} /*=============MENU=============*/ #menu ul.menu{display: flex; justify-content:space-between;} #menu ul.menu li ul.sub-menu{display:none; position:absolute; z-index:999999; background-clip: padding-box; left: 0px; top:100%; min-width: 100px; background:#0973ba;} #menu ul.menu li:hover ul.sub-menu{display:block; } #menu ul.menu li ul.sub-menu li:hover{background:#ed2024;} /*=============CONTENT=============*/ #content{min-height:400px;} .pageextract{float:left; margin-bottom:20px; width:48%; min-height:212px;} .pageextract:nth-child(odd){margin-left:1%;} .pageextract:nth-child(even){margin-right:1%;} .twocolumn{width:50%; float:left;} .twocolumn:nth-child(1){padding-right:5%; clear:left;} .twocolumn:nth-child(2){padding-right:5%; clear:right;} /*=============SIDEBAR=============*/ .mainsidebar ul.sidebar li .textwidget img{position:absolute; top:0px; left:0px;} .mainsidebar ul.sidebar li .textwidget .slider{ position: absolute; left: 0; right: 0; bottom:0; transition: all .5s; overflow: hidden; height:100px; background: rgba(9, 115, 186, 0.75); color:#FFFFFF; padding:30px;} .mainsidebar ul.sidebar li .textwidget .slider:hover { height: 100%;} .mainsidebar ul.sidebar li .textwidget .slider p{display:none;} .mainsidebar ul.sidebar li .textwidget .slider:hover p{display:block;} .mainsidebar ul.sidebar li .textwidget .slider img{right:30px; bottom:30px; top:auto; left:auto;} /*=============FOOTER=============*/ #footer #footer-bottom{height:40px; } #footer #footer-bottom .left{width:50%; padding-top:10px; display:inline-block; vertical-align:middle; height:40px;} #footer #footer-bottom .right{width:50%; padding-top:10px; display:inline-block; vertical-align:middle; height:40px; text-align:right;} } /* Desktop Layout: 960px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */ @media only screen and (min-width: 1025px){ .middle{width:1170px; margin:auto;} /*=============HEADER=============*/ #header{height:200px;} #logo{float:left; padding-top:15px;} #connect{float:right; padding-top:15px; } #connect #social p.title{font-size:18.45px;} #connect #phone p.title{font-size:25px;} #connect #phone .number{font-size:36.81px;} #connect #phone .number:before{ font-size:40px;} /*=============MENU=============*/ #menu ul.menu{display: flex; justify-content:space-between;} #menu ul.menu li ul.sub-menu{display:none; position:absolute; z-index:999999; background-clip: padding-box; left: 0px; top:100%; min-width: 100px; background:#0973ba;} #menu ul.menu li:hover ul.sub-menu{display:block;} #menu ul.menu li ul.sub-menu li:hover{background:#ed2024;} /*=============SIDEBAR=============*/ .mainsidebar ul.sidebar li{float:left; margin-bottom:20px; width:370px; height:212px;} .mainsidebar ul.sidebar li:nth-child(3n+2){margin-left:20px; margin-right:20px;} .mainsidebar ul.sidebar li .textwidget{ width:370px; height:212px;} .mainsidebar ul.sidebar li .textwidget img{position:absolute; top:0px; left:0px;} .mainsidebar ul.sidebar li .textwidget .slider{ position: absolute; left: 0; right: 0; bottom:0; transition: all .5s; overflow: hidden; height:100px; background: rgba(9, 115, 186, 0.75); color:#FFFFFF; padding:30px;} .mainsidebar ul.sidebar li .textwidget .slider:hover { height: 100%;} .mainsidebar ul.sidebar li .textwidget .slider p{display:none;} .mainsidebar ul.sidebar li .textwidget .slider:hover p{display:block;} .mainsidebar ul.sidebar li .textwidget .slider img{right:30px; bottom:30px; top:auto; left:auto;} /*=============CONTENT=============*/ #content{min-height:400px;} .pageextract{float:left; margin-bottom:20px; width:370px; min-height:212px;} .pageextract:nth-child(3n+0){margin-left:20px; margin-right:20px;} .pageextract .featuredimage{height:180px; overflow:hidden; background:#FFFFFF;} .twocolumn{width:50%; float:left;} .twocolumn:nth-child(1){padding-right:5%; clear:left;} .twocolumn:nth-child(2){padding-right:5%; clear:right;} .page-template-page-sidebar #middle{width:70%; display:inline-block; float:left;} .page-template-page-sidebar .genericsb{width:30%; display:inline-block; float:right; padding-left:5%;} /*=============FOOTER=============*/ #footer #footer-bottom{height:40px; } #footer #footer-bottom .left{width:50%; padding-top:10px; display:inline-block; vertical-align:middle; height:40px;} #footer #footer-bottom .right{width:50%; padding-top:10px; display:inline-block; vertical-align:middle; height:40px; text-align:right;} }