/** Example of use var(--primary) **/

/*
NOTE: Variables do not work in IE. Here is a workaround:

1.	Code using the variables as you normally would.
2.  When you are finished, save everything and make a backup copy of the file in a convenient location. This file will be useful in case you need to change any colors in the future, since we are going to be overwriting the variables in the main file.
3.	Paste your css into the left section here: https://madlittlemods.github.io/postcss-css-variables/playground/
4.	Copy the css to the right, and paste it over everything in this document.
*/

/*===================== 
	Color information

		 
=======================*/
/*===================== 
	CSS reset/normalize 
=======================*/

ol, ul, dl {
    margin-top: 0 !important;
    margin-bottom: 0px !important;
}

/**Correct `block` display not defined in IE 8/9.**/
article,aside,details,figcaption,figure,footer,header,hgroup,
main,nav,section,summary {display: block;}
pre {white-space: pre-wrap;}
small { font-size: 80%;}


/*===================== 
	THEME
=======================*/
#headz * {box-sizing: border-box !important; letter-spacing: normal;}
.container {margin: 0 auto;min-width: 960px;}
.main-bg {background: #fee04e;}
.accent-bg {background: #000;}
.accent-bg2 {background: #f2f2f2;}
.btn-primary {background: #fee04e; color: #000; border:none; transition: ease-in-out .3s; font-weight: 600;}
.btn-primary:hover {background: #000; color: #fee04e; border:none;}
.btn-secondary {background: undefined;}



/*===================== 
	base styles 
=======================*/
.pad25 {padding:calc(5vw * .25);}
.pad50 {padding:calc(5vw * .5);}
.pad100 {padding:5vw;}
.tb50 {margin-top:50px; margin-bottom:50px;}
.pad-top-50	{padding-top:50px;}
.pad-bottom-50 {padding-bottom:50px;}
.p-pad {padding:2em 1em 1em;}
.p-pad2 {padding:calc(2em * 2);}
.z-hi {position:relative; z-index: 1001;}
.z-low {position:relative; z-index: 101;}

.primary {color: #fee04e;}
.secondary {color: #f2f2f2;}


html {
    font-family: 'museo-sans', sans-serif; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
	}

body {
    margin: 0;	
	font-weight: 400;
	letter-spacing: 1px;
	font-size:16px;
	}

svg:not(:root) {overflow: hidden;/*reset*/}
	
/* clear floats */ 
.group:before,
.group:after {content: ""; display: table;} 
.group:after {clear: both;}
.group {zoom: 1;}	
.clear { clear: both;}
	
/*image replacement*/
.hide-text {
	text-indent:  100%;
	white-space:  nowrap;
	overflow:  hidden;
	}	

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
	border-style: solid;
    height: 0;
	} 

img { border: 0;} 
	
.scrolling-wrap, iframe.scrolling {width:100%;}	

.volvo-desk {max-height:400px;}








button.md-trigger {padding:.5rem 1.5rem; font-size: 1.5rem; font-weight: 600; color:#fff; border:0; border-radius: 3px; background:#000;  font-family:'museo-sans-display', sans-serif;}
button.md-trigger-bigger {padding:1rem 2rem; font-size: 1.85rem;}


.md-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	width:95%;
	max-width: 630px;
	min-width: 320px;
	height: auto;
	z-index: 2000;
	visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.md-show {
	visibility: visible;
}

.md-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: hidden;
	top: 0;
	left: 0;
	z-index: 1000;
	opacity: 0;
	background: rgba(0,0,0,0.3);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-show ~ .md-overlay {
	opacity: 1;
	visibility: visible;
}

/* Content styles */
.md-content {
	position: relative;
	border-radius: 3px;
	margin: 0 auto;
}

.md-close{position: absolute; top:5px; right: 15px; z-index:1000; padding:5px 10px; font-size: 20px; color: #ccc; cursor: pointer;}
.md-close:hover{color: #000;}


/* Individual modal styles with animations/transitions */

/* Effect 1: Fade in and scale up */
.md-effect-1 .md-content {
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	-ms-transform: scale(0.7);
	transform: scale(0.7);
	opacity: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-show.md-effect-1 .md-content {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}




/*===================== 
	Card Styles
=======================*/
.cat-cards, .cat-card-other {background-color:#000; border-width: 1px; transition: all .35s;}
.cat-card-other {border: solid 1px #737373;}
.cat-cards div {border: solid 1px #737373;}

.cat-cards .card-body {position:relative; overflow: hidden; min-height: 195px;}
.cat-cards .card-body * {transition:ease-in-out .35s;}
.img-occupant {position:absolute; top:15px; right:15px; max-height: 130px; z-index: 1;opacity: .7;}

.card-link {color:#fff !important; font-weight: 500;}
.card-link:hover {color:#fe4e4e!important; font-weight: 500;}
.cat-cards h1 {font-size: 50px !important;}
.cat-cards:hover h1, .cat-card-other:hover span {color: #fe4e4e !important; text-decoration: overline;}
.cat-cards h3, .cat-card-other h3 {font-size: 25px !important; text-transform:uppercase;}
.cat-cards:hover h3, .cat-card-other:hover h3 {color: #fff !important;}
.cat-card-other h3 {margin: 0px !important;}

.cat-cards:hover div {border:none;}
.cat-cards:hover img {opacity: .25; transform: rotate(-11.25deg)}
.cat-cards:hover {border-color:#fe4e4e; border-width: 6px; margin: -5px;}
.cat-card-other:hover {border-color:#fe4e4e; border-width: 6px; margin: -5px -5px -5px 1px;}
.cat-cards:hover .card-footer {text-align:right;}
.cat-cards .card-footer.bg-transparent {background: #000; position: relative; z-index: 1001;}

#cat-row-1 {}
#cat-wrap {padding-bottom: 50px; padding-top:40px;}
.cat-bg-image {background:#000 url("../siteart/cta-bg.png") no-repeat; background-position: bottom; background-size: cover;}
/*===================== 
	Button/ Link Styles
=======================*/
a {transition:ease-in-out .3s;}
#headz .text-link {padding: 0 1%;font-size: 14px;line-height: 40px;font-weight: 400;position: relative;text-align: right;text-transform: uppercase;letter-spacing: 1px;color:#000;font-family: 'Roboto Condensed',sans-serif;}
#headz .text-link:hover {text-decoration:underline;}
/*===================== 
	Backgrounds and Blocks
=======================*/
.hero-bg {background-image:url("/siteart/architect-bg.png"); background-size:contain; background-position: right top; background-repeat: no-repeat}
	
/*===================== 
	typography 
=======================*/

h1 {
	font-family: 'museo-sans-display', sans-serif;
	font-weight: 600;
	}

h2 {
	font-family: 'museo-sans-display', sans-serif;
	font-weight: 600;
	}

h3 {
	font-family: 'museo-sans-display', sans-serif;
	font-weight: 600;
	}

h4 {
	font-family: 'museo-sans-display', sans-serif;
	font-weight: 600;
	}

h5 {
	font-family: 'museo-sans-display', sans-serif;
	font-weight: 600;
	}

h6 {
	font-family: 'museo-sans-display', sans-serif;
	font-weight: 600;
	}

p {
	margin: 0;
	}

	
h1 {
	font-size:50px;
}
		

h2 {
}

	
h3 {
}


h4 {
}


h5 {
}


h6 {
}

/*===================== 
	link styles 
=======================*/

a:focus {outline: thin dotted;/*reset*/
	}
	
a,
a:link, 
a:visited, 
a:active {
	outline: 0;/*reset*/
    color: #005b88; 
    text-decoration:none;
	}
	a:hover  {
		outline: 0;/*reset*/
		text-decoration: none;
		}  

/*===================== 
	header styles 
=======================*/


header {
	margin: 0 auto;
	width: 100%;
	}

/*===================== 
	nav styles 
=======================*/
.top-nav {background-color:#f2f2f2;}
.navbar {padding: 1rem;}
a.navbar-brand img {
    max-height: 65px;
}



/*===================== 
	content styles 
=======================*/
ul.inline {list-style:none; text-align:right; padding-right:15px; font-size:12px;}
ul.inline > li  {display:inline;}
a.soc-cont { background-color:inherit; color:#fff !important; transition: .5s; display: inline-block; text-align: center; width:27px; height:24px; padding:2px; border-radius: 50%;}
a.soc-cont:hover {background-color:#fe4e4e !important;}

.dash-left {top:49%; left:0px;}	
.dash-right {top:49%; right:0px;}

.about-us a {
    font-weight: 700;
    color: #000;
}
.about-us a:hover {
    color: #fe4e4e;
}

/*===================== 
	slideshow styles 
=======================*/



/*===================== 
	banner styles 
=======================*/
.page-head {background-image:url("../siteart/Page Header-Romco.png"); background-size:cover; background-position: center right; background-repeat: no-repeat;}
.page-title {color:#fff; font-size:3rem;}
/*===================== 
	Form styles 
=======================*/
.CaptchaWhatsThisPanel a {
    color: #fff !important;
}
.CaptchaWhatsThisPanel a:hover {
    color: #fee04e !important;
}



/*===================== 
	footer styles 
=======================*/
.footer, .footer * {box-sizing: border-box;}
.footer a > i {width:0px; transition: all ease-in-out .35s;}
.footer a:hover > i {color:#fe4e4e; width:auto;}
.divfooter * { opacity: .5; color: #fff !important; line-height: normal;}
.divfooter a:hover {color: #fe4e4e !important; opacity: 1;}
ul.list-no-style {list-style: none; padding-inline-start:20px; padding-top:10px;}
ul.list-no-style a {color:#fff; font-weight: 500;}
ul.list-no-style a:hover {color:#fe4e4e;}
.footer h5 {padding-inline-start:20px;}


.footer {
	background: #000 url("../siteart/footer-bg-graph.png") bottom -20px right no-repeat; 
	background-size:cover;
	}
	
a.footerlink:link,
a.footerlink:visited, 
a.footerlink:active {
	text-decoration: none; 
	font-size:13px;
	color: #222;
	}
	a.footerlink:hover {
		text-decoration:none; 
		font-size:13px;
		color: #fff;
		}

.footertext {
	font-size:13px; 
	color:#666;
	}

.smallfootertext {
	font-size:10px; 
	color:#666;
	}

.divfooter {
	max-width:1200px; 
	text-align:center; 
	margin:0 auto;
	}

/*========================= 
	 Responsive styles 
===========================*/

/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {


}

@media only screen and (min-width : 1200px) {
	.container {max-width:83.5% !important}

}
@media only screen and (max-width : 1367px) and (min-width:1023px) {
	.cat-cards h3, .cat-card-other h3 {font-size:22px !important;}
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
	.container {min-width:auto;}
	.top-nav {padding: 5px 0px;}
	.volvo-desk {bottom:-20%; margin-top:-5%;}
	.cat-cards h1, .cat-cards h3 {font-size: 20px !important;}
	.cat-cards a {font-size: 12px;}
	.cat-cards .card-body {min-height:115px;}
	.cat-cards {margin-bottom:1em;}
	.img-occupant {max-height:95px; right:10px; top:10px;}
	.top-nav > .container {max-width: 100% !important; padding-right: 5px;}

}

@media only screen and (max-width : 808px) and (min-width:786px) {
	.has-search-bar {width: calc(72% - .75%) !important;}
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
.top-nav {padding: 10px 0px;}
ul.inline {text-align:center;}
.p-pad {padding: 2em 1em;}
.cat-cards .card-body {min-height: 130px;}
}

@media only screen and (max-width : 575px) {	
.img-occupant {max-height: fit-content !important; min-height:auto; right: 0;top: 0;width: 100%; opacity: .65;}
.cat-cards .card-body {min-height: auto; overflow: visible;}
.cat-cards .card-footer.bg-transparent {background-color:transparent !important; background:transparent !important;}
.cat-cards {overflow: hidden;}
.cat-cards:hover img {transform: none;}
	.cat-cards:hover, .cat-card-other:hover {border-width: 4px; margin:-3px -3px 13px -3px;}
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
	.footer h5, ul.list-no-style {    padding-inline-start: 0px;}
	h1, .page-title {font-size:2.5em;}
	.mobile-accent-img {max-width:90%; margin:0 auto;}
	.footer {text-align: center;}
	.border-left {border:none !important;}
 
}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {


}