style.css

/*
Theme Name: Advanced Realty
Author: LCS
Author URI: http://www.lcs.com
Description: Custom theme for Advanced Realty created by LCS.
*/

/* General Styles */

body {
	background-color: #f9f9f9;
	color: #323232;
	font-size: 18px;
	font-family: 'Lato', sans-serif;
	margin: 0;
	padding: 0;
	line-height: 1.5em;
}

h1,
h2,
h3,
h4,
h5 {
	font-family: 'Droid Serif', serif;
	font-style: italic;
}

header,
nav,
main,
footer {
	width: 100%;
	float: left;
}

.wrapper {
	width: 80%;
	max-width: 1400px;
	margin: 0 auto;
}

.clear {
	clear: both;
}

ul {
	margin: 0;
	padding: 0;
}

/* Header Styles */

header {
	margin-bottom: 20px;
}

.logo {
	float: left;
	width: 40%;
	margin-top: 20px;
}

.logo img {
	width: 100%;
	max-width: 300px;
}

.headerRight {
	float: right;
	min-width: 375px;
	text-align: right;
	position: relative;
}

.headerRight h1 a {
	color: #323232;
	font-style: italic;
	padding: 0;
	background-color: transparent;
	float: none;
	margin: 0;
}

.headerRight h1 a:hover {
	color: #00615a;
	background-color: transparent;
}

.headerRight a {
	color: #f9f9f9;
	background-color: #1BA49BFF;
	padding: 10px 30px;
	text-decoration: none;
	display: block;
	float: right;
	margin-left: 25px;
}

.headerRight a:hover {
	background-color: #323232;
}

.fhLogo {
	max-width: 30px;
	position: absolute;
	bottom: 0;
	left: 0;
}

/* Menu Styles */

nav {
	background: url(https://advancedrealty.com/wp-content/uploads/2021/10/metal-316803_1280-e1639075690595.jpg);
}

/* Slider Styles */

.slider {
	padding: 30px 0;
	text-align: center;
}

.smooth_slider img {
	margin: 0 !important;
	width: 40%;
}

.smooth_slider h2 {
	float: left;
	width: 60%;
	margin: 50px 0 10px !important;
	font-size: 1em !important;
	line-height: 1.2em !important;
}

.smooth_slider h3 {
	font-size: 1.2em;
	color: #1BA49Bff;
	font-style: italic;
	margin: 10px 0 6%;
	line-height: 1.2em;
}

.slider span {
	width: 60%;
	float: left;
	margin: 0 auto !important;
	line-height: 1.2em !important;
	font-size: 1.2em !important;
}

.smooth_slider h2 a {
	font-family: 'Droid Serif', serif !important;
	font-size: 2em !important;
	font-style: italic ;
	line-height: 1em;
}

.slider .smooth_slider p.smooth_more {
	float: left;
	width: 60%;
	text-align: right;
	margin: 8% 0 0;
}

.slider .smooth_slider p.smooth_more a {
	background-color: #3960ac;
	text-decoration: none !important;
	padding: 5px 10px;
	font-size: 1.2em !important;
	font-family: 'Lato', sans-serif !important;
	text-align: right;
}

.slider .smooth_slider p.smooth_more a:hover {
	background-color: #323232;
}



.homeSlider .cycloneslider-template-default {
	margin: 0 auto;
}

.homeSlider .cycloneslider-template-default .cycloneslider-slide img {
	width: 100%;
}

.homeSlider .cycloneslider-template-default .cycloneslider-caption {
	top: 20%;
	bottom: auto;
	text-align: center;
	opacity: 1;
	background:rgb(0,0,0);
    background: transparent\9;
    background:rgba(0,0,0,0.5);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
    zoom: 1;
}

.homeSlider .cycloneslider-template-default .cycloneslider-caption:nth-child(n) {
	filter: none;
}

.homeSlider .cycloneslider-template-default .cycloneslider-caption-title {
	font-size: 6em;
	font-weight: normal;
	padding: 40px 0 20px;
}

.homeSlider .cycloneslider-template-default .cycloneslider-caption-description {
	font-size: 1.7em;
	text-transform: uppercase;
	padding: 0 0 50px;
}

.homeSlider .cycloneslider-template-default .cycloneslider-caption-description a {
	background-color: #3960ac;
	color: #fff;
	text-decoration: none;
	padding: 10px 20px;
	font-size: .8em;
}

.homeSlider .cycloneslider-template-default .cycloneslider-caption-description a:hover {
	background-color: #323232;
}

.homeSlider .cycloneslider-template-default .cycloneslider-pager {
	display: none;
}

/* Top Content Styles */

.maps {
	width: 100%;
	float: left;
}

.location {
	width: 100%;
	float: left;
	background-color: #f9f9f9;
	padding: 0 0 30px;
}

.location .wrapper {
	width: 70%;
	margin: 0 auto;
}

.locationHeader {
	text-align: center;
}

.locationLeft,
.rentalLeft {
	color: #00615a;
}

.locationLeft h2 {
	margin: 0;
}

.locationRight,
.rentalRight {
	font-size: 1.5em;
}

.topContent {
	background-color: #1BA49BFF;
	color: #f9f9f9;
	padding: 25px 0;
	float: left;
	width: 100%;
}

.topContent h2 {
	text-align: center;
	line-height: 1.5em;
}

/* Middle Content Styles */

.middleContent {
	background: url(http://wp-content/themes/advrealty/images/textured_paper.png) repeat;
	padding: 25px 0;
	width: 100%;
	float: left;
	box-shadow: inset 0px 3px 2px #323232;
}

	/* Featured Section */
		.featured {
			width: 80%;
			max-width: 900px;
			margin: 0 auto 50px;
			padding: 0 0 50px;
			position: relative;
		}
		
		#search_results table,
		#search_results tbody {
			width: 100%;
			}
		
		.featured h2 {
			color: #3960ac;
			text-align: center;
			width: 100%;
			margin: 0 0 25px;
		}
		
		.featured h3 {
			margin: 0;
		}
		
		.featured .price {
			color: #3960ac;
			margin-bottom: 20px;
		}
		
		.featuredLeft,
		.locationLeft,
		.rentalLeft {
			width: 50%;
			float: left;
		}
		
		.featuredLeft ul li {
			width: 50%;
			float: left;
			list-style-type: none;
		}
		
		.seeAll {
			position: absolute;
			bottom: 0;
		}
		
		.seeAll a {
			color: #323232;
			font-weight: bold;
			text-decoration: none;
		}
		
		.seeAll a:hover {
			color: #00615a;
		}
		
		.featuredRight,
		.locationRight,
		.rentalRight {
			width: 50%;
			float: right;
			text-align: right;
		}
		
		.featuredImage {
			width: 70%;
			margin-left: 30%
			max-width:250px;
		}
		
		.featuredImage img {
			width: 100%;
			height: auto;
			border: 1px solid #1BA49BFF;
		}
		
		.detailButton {
			position: absolute;
			bottom: 0;
			right: 0;
		}
		
		.detailButton a {
			background-color: #3960ac;
			text-decoration: none;
			padding: 5px 10px;
			font-size: 1.2em;
			color: #f9f9f9;
		}
		
		.detailButton a:hover,
		.pricingButton a:hover,
		.availability a:hover,
		.applyButton a:hover {
			background-color: #323232;
		}
		
	.pricingButton {
			margin: 10px 0 0;
			width: 70%;
		}
		 	.applyButton {
			width: 100%;
			float: left;
			margin: 20px 0;
		}
		
		.pricingButton a 
{
			background-color: #3960ac;
    	text-decoration: none;
    	font-size: 1.2em;
    	color: #f9f9f9;
    	width: 250px;
    	text-align: center;
		float:left;
    
		}
		.applyButton a {
			background-color: #3960ac;
    	text-decoration: none;
    	font-size: 1.2em;
    	color: #f9f9f9;
    	width: 250px;
    	text-align: center;
		float:left;
    
		}
		
		
		.middleContent hr {
			width: 80%;
			margin: 30px 10%;
			float: left;
			border: none;
			height: 1px;
			background-color: #323232;
		}
		
	/* Additional Info */
	
		.addInfo {
			background-color: #1ba49bff;
			color: #f9f9f9;
			font-family: 'Droid Serif', serif;
			font-size: 1.5em;
			text-align: center;
			font-style: italic;
			padding: 25px 0;
			width: 100%;
			float: left;
			-webkit-box-shadow: 0px 3px 2px #323232, 0px -3px 2px #323232;
			-moz-box-shadow: 0px 3px 2px #323232, 0px -3px 2px #323232;
			box-shadow: 0px 3px 2px #323232, 0px -3px 2px #323232;
		}
		
		.addInfo p {
			width: 75%;
			margin: 0 auto;
			line-height: 1.5em;
		}
		
	/* Service Boxes */
	
		.serviceBox {
			width: 30%;
			margin: 25px 2.5%;
			text-align: center;
			float: left;
			color: #00a094;
		}
		
		.serviceBox:first-of-type {
			margin: 25px 2.5% 25px 0;
		}
		
		.serviceBox:last-of-type {
			margin: 25px 0 25px 2.5%;
		}
		
		.serviceBoxTitle a {
			color: #00a094;
			text-decoration: none;
		}
		
		
		.serviceBoxImage img {
			max-height: 100px;
			margin:0 0 25px;
		}
		
	/* Detail Listing Pages */
	
	table {
		width: 100%;
	}
	
	.headers {
		color: #3c61ac;
		font-size: 1.2em;
		font-style: italic;
		font-family: 'Droid Serif', serif;
		margin-bottom: 50px;
		float: left;
		width: 100%;
	}		
	
	.size,
	.rate {
		width: 15%;
		float: left;
		margin: 0 2.5%;
		text-align: center;
	}
	
	.features,
	.availability {
		display: block;
		width: 25%;
		min-height: 10px;
		float: left;
		margin: 0 2.5%;
	}
	
	.availability {
		text-align: center;
	}
	
	.headers .features {
		text-align: center;
	}
	
	.features ul {
		padding-left: 18%;
	}
	
	.features li {
		list-style-type: none;
	}
	
	.size1 {
		font-size: 1.5em;
		font-family: 'Droid Serif', serif;
		font-style: italic;
		font-weight: 600;
	}
	
	.size2 {
		font-size: 1.2em;
		text-transform: uppercase;
		font-family: 'Droid Serif', serif;

	}
	
	.unit .rate {
		font-size: 1.2em;
		color: #1ba49bff;
		margin: 20px 2.5%;
	}
	
	.availability a {
			background-color: #3960ac;
			text-decoration: none;
			font-size: 1.2em;
			color: #f9f9f9;
			padding: 10px 20px;
	}
	
	.unit .availability {
		margin: 20px 2.5%;
	}
	
	.rentalListWrapper {
		width: 80%;
		margin: 0 10%;
	}
	
	.mobileAddress {
		display: none;
	}
	
	.showListing {
		display: block;
		}
		
	.hideListing {
		display: none;
		}
	
	/* Rental Detail Pages */
	
	.app-pending {
		display: block;
		width: 100%;
		text-align: center;
		padding: 10px 0;
		background: red;
		color: #FFF;
		}
	
	.rentalLeft {
		line-height: 2em;
	}
	
	.rentalRight {
		line-height: 1.5em;
	}
	
	.amenities {
		width: 38%;
		margin-right: 2%;
		margin-top: 5%;
		float: left;
	}
	
	.amenities ul {
		margin-left: 10%;
		list-style-type: none;
	}
	
	.amenities h4 {
		display: inline-block;
		margin: 10px 0;
	}
	
	.images {
		width: 50%;
		float: right;
	}
	
	.images img {
		width: 23%;
		margin: 10px 2% 0 0;
		float: left;
		height: 70px;
	}
	
	.images .mainImage img {
		width: 100%;
		height: auto;
		margin: 10px 0;
	}
	
	.phoneDetail,
	.directions {
		display: none;
	}
	
	
		
/* Footer */

footer {
	background: url(https://advancedrealty.com/wp-content/uploads/2021/10/metal-316803_1280-e1639075690595.jpg) repeat;
	-webkit-box-shadow: inset 0px 3px 2px #323232;
	-moz-box-shadow: inset 0px 3px 2px #323232;
	box-shadow: inset 0px 3px 2px #323232;
}

footer .wrapper {
	width: 60%;
	max-width: 900px;
	margin: 0 auto;
}

.footerLeft {
	width: 65%;
	float: left;
	padding: 50px 0;
}

.menu-footer-menu-container {
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
}

.footerLeft li {
	list-style-type: none;
	margin-bottom: 10px;
}

.footerLeft li li {
	margin-bottom: 0;
}

.footerLeft li a {
	color: #f9f9f9;
	text-decoration: none;
	font-family: 'Droid Serif', serif;
	font-size: 1.2em;
}
footer a:hover {
	text-decoration: underline;
}

.footerLeft li li a {
	color: #323232;
	font-family: 'Lato', sans-serif;
	font-size: 1em;
}

.footerLeft li ul {
	margin-bottom: 15px;
}

.footerRight {
	width: 30%;
	margin-left: 5%;
	float: left;
	padding: 50px 0;
}

.footerRight h3 {
	color: #f9f9f9;
	font-style: normal;
	margin: 0;
}

.footerRight a {
	text-decoration: none;
	color: #f9f9f9;
}

.footerRight a.button {
	background-color: #1BA49BFF;
	color: #f9f9f9;
	text-decoration: none;
	padding: 5px 20px;
	font-size: 1.2em;
}

.footerRight a.button.owner {
	display: none;
}

.footerRight a.button:hover {
	background-color: #323232;
	text-decoration: none;
}

.footerBottom {
	background-color: #323232;
	color: #f9f9f9;
	border-top: 5px solid #00a094;
	padding: 20px 0 40px;
	float: left;
	width: 100%;
}

.footerBottom .footer-right {
	float: none;
	width: 100%;
	text-align: center;
	margin: 0;
}
	
	
	
/*Forms*/

.error {
	color: #f00;
	font-weight: bold;
	width: 100%;
}

label {
	width: 20%;
	display: block;
	float: left;
	padding: 0;
	margin: 0 0 10px 0;
	position: relative;
	font-size: 14px;
	}
	
label.full-width {
	width: 100%;
	}
	
.shorter-labels label {
	width: 110px;
	}
	
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
	width: 90%;
	display: block;
	padding: 6px;
	margin: 2px 0 0 0;
	border-radius: 3px;
	border: solid 1px #CCC;
	background: #FFF;
	box-sizing: border-box;
	}
	
select {
	padding: 5px 6px;
	}
	
input[type="submit"] {
	margin-top: 30px;
	padding: 6px 15px;
	border: none;
	border-radius: 3px;
	color: #FFF;
	transition: all .2s;
	background: #444;
	}
	
input[type="submit"]:hover {
	background: #101e5b;
	}
	
.req {
	color: red;
	}
	
#frmApplyOnline h3 {
	margin-top: 20px;
	padding-top: 20px;
	border-top: solid 1px #AAA;
	}
	
.fixedValue {
	width: 90%;
	display: block;
	padding: 0 6px;
	margin: 2px 0 0 0;
	border-radius: 3px;
	border: solid 1px #CCC;
	background: #FFF;
	box-sizing: border-box;
}

/* Storage Page */

.slider span.wpcf7-form-control-wrap {
	float: none;
	width: auto;
}

.wpcf7 {
	text-align: center;
}

.wpcf7 form input[type=text],
.wpcf7 form input[type=email],
.wpcf7 form input[type=tel],
.wpcf7 form select,
.wpcf7 form textarea {
	width: auto;
	margin: 2px auto;
}


@media screen and (max-width: 1250px) {
	
	body {
		font-size: 16px;
	}
	
	body #mega-menu-wrap-main #mega-menu-main > li.mega-menu-item > a {
		font-size: 18px;
	}
	
	body #mega-menu-wrap-main #mega-menu-main > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a {
		font-size: 16px;
	}
	
	.homeSlider .cycloneslider-template-default .cycloneslider-caption {
		top: 10%;
	}
	
	.homeSlider .cycloneslider-template-default .cycloneslider-caption-title {
		font-size: 3em;
	}
	
	.homeSlider .cycloneslider-template-default .cycloneslider-caption-description {
		font-size: 1.1em;
	}
	
		
	.applyButton {
			width: 100%;
			float: left;
			margin: 20px 0;
		}
		
}

@media screen and (max-width: 1000px) {
	
	body {
		font-size: 14px;
	}
	
	body #mega-menu-wrap-main #mega-menu-main > li.mega-menu-item > a {
		font-size: 16px;
	}
	
	body #mega-menu-wrap-main #mega-menu-main > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a {
		font-size: 14px;
	}
	
	.homeSlider .cycloneslider-template-default .cycloneslider-caption-description {
		padding-bottom: 20px;
	}
	
	.homeSlider .cycloneslider-template-default .cycloneslider-caption-title {
		padding-top: 20px;
	}
	
}

@media screen and (max-width: 600px) {

	
	.applyButton {
			width: 100%;
			float: left;
			margin: 20px 0;
		}
		
}