/*
	Website Developed by Karoline Dassie

	Main Colors:
	- Light Gray #ededed #c7c7c7
	- Gray #636363
	- Red #a10000
	- White #fff
	- Black #000
	
*/

/***** BEGIN RESET *****/

* {
    background:transparent;
    border:0;
    margin:0;
    padding:0;
    
}
ol, ul {list-style: none;}
.clear {clear: both; height:0px; margin:0;}

::-moz-selection {
    background: #ededed;
    color: #636363;
    text-shadow: none;
}

::selection {
    background: #ededed;
    color: #636363;
    text-shadow: none;
}


	
/***** END RESET *****/

header, nav, article, footer {display:block;}

body {
	background:#a10000!important;
	color:#636363;
	font-weight:normal;
	-webkit-text-size-adjust: none;
	font-family: 'Roboto', sans-serif;
	overflow-x: hidden;
}


/* TYPOGRAPHY
------------------------------------------------*/

p {color:#636363; font-size:15px; line-height:1.6em;}

strong {font-weight:900;}

.black {color:#000;}
.white {color:#fff;}
.dk-gray {color:#636363;}
.red {color:#a10000;}

h1 {
	color:#000;
	font-size:16px;
	font-weight:normal;
	font-family: 'Roboto Condensed', sans-serif;
	margin:8px 0!important;
}

h2 {
	color:#636363;
	font-size:25px;
	font-weight:normal;
	background:#ededed;
	text-transform:uppercase;
	text-align:center;
	padding:1em 0;
}

h3 {
	color:#a10000;
	font-size:15px;
	font-weight:900;
	text-transform:uppercase;
}

h5 {
	color:#fff;
	font-size:20px;
	text-transform:uppercase;
	font-weight:900;
	margin-bottom:20px;
}

a {
	color:#a10000; 
	text-decoration:none; 
	transition:background-color 300ms ease, background-color 300ms ease, all 300ms ease;
	}
a:hover {color:#636363; text-decoration:none;}

.call-phone a {text-decoration:none; }

a#cta-btn button {
    width: 100%;
    max-width: 222px;
    display: block;
    background: #a10000;
    padding: .75em;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
	cursor: pointer;
	vertical-align: middle;
}
a#cta-btn button:hover {background: #333; transition: .3s ease-in-out all;}

/* SITE FRAME
------------------------------------------------*/
.wrap {width:82%; margin:0 auto; max-width:1120px;}

.main {
	background:#fff;
	border:1px #c2c2c2 solid;
	border-top:0;
	-moz-box-shadow:0px 0px 16px rgba(0, 0, 0, .3); 
	-webkit-box-shadow:0px 0px 16px rgba(0, 0, 0, .3); 
	box-shadow:0px 0px 16px rgba(0, 0, 0, .3);
}

.show-tablet {display:none;}
.half-col {width:48%; float:left; margin-right:2%;}

article {width:100%; padding:3em 0; background:#fff}




/* HEADER
------------------------------------------------*/

header {padding:17px 1%; background:#fff url(../siteart/layout/pattern.png) repeat}
header h1 {font-family: 'Roboto Condensed', sans-serif;}
header .rt-header h1 a:link{color:#000!important; text-decoration:none;}
header .rt-header h1 a:hover{text-decoration:none; color:#a10000!important;}

.logo {width:50%; float:left; }
.logo img {width:100%; height:auto; max-width:400px; }
.rt-header {width:50%; float:left; text-align:right; font-family: 'Roboto Condensed', sans-serif!important;}
.rt-header a, .rt-header strong {font-family: 'Roboto Condensed', sans-serif!important;}

.search-box {
	width:19%;
	margin:5px 1% 0 0;
	display:block;
	float:right;
	position:relative;
}
.search-box input {
	width:calc(80% - 12px)!important;
	padding:6px 5px!important;
	border:1px solid #c2c2c2!important;
	color:#333!important;
	font-size:12px!important;
	float:right;
	background:#fff;
	vertical-align:top;
	border-radius: 0!important;
	height: auto!important;
	line-height: normal!important;
}
.search-box input.sm-button,
.search-box input.sm-button:focus {
    width:100%; 
    margin:0;
    padding: 6px 0;
    background:#c2c2c2 url('../siteart/layout/search-icon.png') no-repeat center;
    border:1px solid #c2c2c2;
	line-height:14px;
	float:right;
}
.search-box input.sm-button:hover {
	background:#a10000 url('../siteart/layout/search-icon.png') no-repeat center;
	border-color:#a10000;
}
.search-box input:focus{ outline-color:#fff;}

.top-top{background:#a10000}


/* NAVIGATION 
------------------------------------------------*/

nav {width:80%;float:left; position:relative; display:block;}
nav ul {width:100%; margin:0 auto;}
nav li {float:left; position:relative; display:inline;}

nav a:link, nav a:active, nav a:visited {
	font-family: 'Roboto Condensed', sans-serif;
	display:block;
	text-decoration:none;
	color:#fff;
	font-weight:200px;
	font-size:16px;
	padding:0 20px;
	line-height:40px;
}
nav a:hover {background:#636363;}

nav ul ul {
	display: none;
	position: absolute; 
	z-index:99999;
	top: 40px;
	left:0;
	width:180px;
	background:#fff;
	border:1px #c2c2c2 solid;
	border-top:0;
}

nav ul ul ul {
	position: absolute; 
	left: 100%; 
	top:0;
}

nav ul li:hover > ul {
	display: block;
	z-index:99999;
}

nav ul ul li {
	float: none; 
	position: relative;
	display:block;
}

nav ul ul li a:link, nav ul ul li a:active, nav ul ul li a:visited{
	font-size:14px;
	line-height:16px;
	padding:7px 0px 7px 10px;
	border-bottom: 1px solid #c2c2c2;
	color:#000;
}

nav ul ul li a:hover {
	background: #a10000;
	color:#fff;
}







/* SCROLLING INVENTORY
------------------------------------------------*/
.scroll-contain {width:100%; width:calc(100% - 4px); height:90px; display:block; border:2px #000 solid;}
.scroll-frame {width:50%; width:calc(50% - 1px); display:block; float:left; border-right:2px #000 solid; overflow:hidden; position:relative;}
.scroll-frame:nth-of-type(2) {border-right:0;}


.scroll-frame .label {
	display:block; 
	position:absolute; 
	top:0; 
	left:0; 
  }
.scroll-frame .label h6 {
	font-weight:700; 
	font-family: 'Roboto Condensed', sans-serif; 
	color:#fff; 
	font-size:16px;
	text-transform:uppercase;
	margin-bottom:0;
	line-height:30px;
	float:left;
	padding:0 10px;
	background:rgba(161, 0, 0, 0.75);
	}
.scroll-frame .label img {width:29px; height:auto; display:block; float:left;}
.scroll-frame iframe {width:100%; height:90px; display:block; background:#fff;}



/*  CONTENT
------------------------------------------------*/

.lg-search {width:93%; display:block; padding:20px 3.5% 0 3.5%;}

.content {width:100%; display:block; padding:20px 0;}

.inv {width:100%; display:block;}
.inv iframe {width:100%; display:block; height:2100px; background:#fff;}

.contact{text-align:center}
.contact a{color:#636363; }
.contact a:hover{color:#000; font-weight:600; }

iframe#map{border:0; width:100%; height:300px; margin:2em auto 0 auto}




/* FOOTER
------------------------------------------------*/

footer {width:100%; line-height:12px; padding:40px 0; color:#c7c7c7;}

a.footerlink:link, a.footerlink:visited, a.footerlink:active{text-decoration:underline; font-size:10px; color:#c7c7c7;}
a.footerlink:hover {text-decoration:none; color:#c7c7c7;}
.footertext {font-size:10px; color:#c7c7c7;}
.smallfootertext {font-size:10px; color:#c7c7c7;}
.divfooter {width:96%; max-width:560px; text-align:center; margin:0 auto; color:#c7c7c7; line-height:1em;}

/* footer elements */
.foot {
	width:100%; 
	display:block;
	padding:3em 0; 
	background:#636363 url(../siteart/LOGO-bottom.png) no-repeat center center
	}
.foot a, .foot p {color:#c7c7c7!important; font-weight:600; line-height:1.4em;}
.foot a:hover{color:#fff!important;}
.foot strong{color:#fff!important;}
.foot-contact {width:50%; float:left;}
.foot-contact-right {width:50%; float:left; text-align:right;}




/* FORM 
------------------------------------------------*/

#formpage .row {width:100%;}
#formpage .row:after {content:""; display:block; clear:both;}
#formpage .col4 {width:23%; float:left; margin-right:2%;}
#formpage .col3 {width:31.33333%; float:left; margin-right:2%;}
#formpage .col2 {width:48%; float:left; margin-right:2%;}
#formpage .full-col {width:98%;}

#formpage label {display:block; margin-bottom:3px;}

#formpage input {
	width:100%;
	width:calc(100% - 12px);
	padding:6px 5px;
	border:1px solid #c2c2c2;
	color:#8e8d8d;
	font-size:12px;
	margin-bottom:8px;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
}

#formpage textarea {
	width:100%;
	width:calc(100% - 12px);
	padding:6px 5px;
	border:1px solid #c2c2c2;
	color:#8e8d8d;
	font-size:12px;
	height:100px;
	margin-bottom:8px;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
}

 
/* selects have similar styles to input & textarea fields, but with no padding. Text in a dropdown select is positioned differently */
#formpage select {
	width:100%;
	width:calc(100% - 2px);
	border:1px solid #c2c2c2;
	color:#8e8d8d;
	vertical-align:middle;
	font-size:12px;
	line-height:normal;
	padding:5px;
	margin-bottom:8px;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
}

#formpage input.checkbox {
    padding:0; 
    border:0;
    margin:0 5px 8px 0;
    width:13px;
    height:13px;
    display:inline;
    background-color:#fff;
 }

#formpage input.radio {
    padding:0; 
    border:0;
    margin:0 5px 0 0;
    width:15px;
    height:15px;
    display:inline;
 }

#formpage .check {display:inline-block; zoom:1; *display:inline; margin-right:10px;}



/* focus states of various types of fields */

#formpage input:focus,
#formpage textarea:focus,
#formpage select:focus {
	background:#8e8d8d; 
	color:#FFF;
	border:1px solid #16598d;
	outline-style:none;
}
#formpage input.radio:focus,
#formpage input.checkbox:focus {
	background:none; 
	border:0;
	outline-style:none;
}
 



#formpage input.button,
#formpage input.button:focus {
    width:100%; 
    margin:0;
    padding:7px 0;
    background:#c2c2c2;
    border:0;
    font-size:14px;
	line-height:14px;
	font-weight:bold;
    color:#000;
	-webkit-appearance: none;
}
#formpage input.button:hover {
	background:#f6c600;
	color:#000;
}
 


/* for plain text next to an input field, if not using a table structure */
#formpage label.basic {
    color:#212121;
    font-size:13px;
    text-align:left;
}
#formpage label.checkbox {
  /*  color:#212121;*/
    font-size:13px;
    text-align:left;
    display:inline;
    padding:0;
}
 

/*control the Captcha */

.CaptchaPanel {
	margin:0 0 8px 0 !important;
	padding:0 0 0 0 !important;
	text-align: center;
	line-height:normal !important;
}

.CaptchaImagePanel {
	margin:0 0 0 0;
	padding:0 0 0 0;
}
.CaptchaImagePanel img {width:100%; height:auto; max-width:180px;}

.CaptchaMessagePanel {
	padding:0 0 0 0 !important;
	margin:0 0 0 0 !important;
	font-weight:normal !important;
	font-size:12px;
	line-height:14px;
}

.CaptchaAnswerPanel {
	margin:0 0 0 0;
	padding:2px 0px 2px 0px !important;
}

.CaptchaWhatsThisPanel {
	line-height:0;
	margin:0 0 0 0;
	padding:8px 0 8px 0 !important;
}
.CaptchaWhatsThisPanel a {color:#000;}
.CaptchaWhatsThisPanel a:hover {text-decoration:none;}



/* REMOVED 

===== SLIDESHOW =====
.cycle-slideshow {
	width:100%;
	position:relative;
	display:block;
	z-index:2;
	overflow:hidden;
	border-bottom:1px #000 solid;
}
.cycle-slideshow a {
	width:100%;
	display:block;
	position:absolute;
	top:0; left:0;
}
.cycle-slideshow img {width:100%; height:auto; display:block;}

.cycle-pager { 
    text-align: center; width: 100%; z-index: 500; position: absolute; bottom: 3%; overflow: hidden;
}
.cycle-pager span { 
    font-family: arial; font-size: 50px; width: 16px; height: 16px; 
    display: inline-block; color: #a10000; cursor: pointer; 
}
.cycle-pager span.cycle-pager-active { color: #f6c600;}
.cycle-pager > * { cursor: pointer;}

.cycle-prev, .cycle-next { position: absolute; top: 0; width: 10%; opacity: 1; filter: alpha(opacity=100); z-index: 800; height: 100%; cursor: pointer; }
.cycle-prev { left: 0;  background: url('../siteart/layout/lt-slide-arrow.png') left 50% no-repeat; background-size:50%;}
.cycle-next { right: 0; background: url('../siteart/layout/rt-slide-arrow.png') right 50% no-repeat; background-size:50%;}
.cycle-prev:hover, .cycle-next:hover { opacity: .7; filter: alpha(opacity=70) }
------------------------------------------------*/


/* BUTTONS */

.button-inv, .button-inv:active, .button-inv:visited{
	border:0;
	transition: all .2s ease-in-out;
	padding:0;
	text-align:center;
	width:100%;
	}	
.dropdown {
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    background: #fff;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	width:100%;
	color:#000;
	font-weight:normal;
	text-transform:uppercase;
	font-size:15px;
	z-index:999999;
	text-align:left;
}



.dropdown:hover .dropdown-content {
    display: block;
}


/*  ICONS BOX
------------------------------------------------*/

.group{background:#000}

.invlinkbox{
    float:left;
    width:16.55%;
    margin:0;
    background:#000;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
	z-index:1000;
	text-align:center;
	border:1px solid #636363;
	font-family: 'Roboto Condensed', sans-serif;
}

.invlinkbox img{ margin:0 auto;}

.invlinkbox h5{
	font-size:17px;
	line-height:1.2em;
	color:#fff;
	font-family: 'Roboto Condensed', sans-serif;
	width:100%;
	background:#636363;
	padding:10px 0;
	margin:0 auto!important;
	}

.invlinkbox a {
	text-align:left;
	z-index:99999;
    color: #000;
	background:#fff;
    padding:7px 10px;
    text-decoration: none;
    display: block;
	border-bottom: 2px #eeeeee solid;
	font-size:15px;
	font-family: 'Roboto Condensed', sans-serif;

}

.invlinkbox a:hover {
	border-bottom: 2px  #a10000 solid;
	background:  #eeeeee;
	color:#a10000;
}
	
.sub-categories {
	min-height: 280px;
	background: #fff;
}


/* 
.invlinkbox::before {
    content: ' ';
    position: absolute;
    top: 183px;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(99, 99, 99, 0.91);
}

.invlinkbox:hover::before {
    background:rgba(99, 99, 99, 0.91));
	top:0;
}

.caption__media {
    display: block;
    min-width: 100%;
    max-width: 100%;
    height: auto;
}

.caption__overlay {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    padding: 10px 0;
    color: white;

    -webkit-transform: translateY(183px);
            transform: translateY(183px);

    transition: -webkit-transform .35s ease-out;
    transition:         transform .35s ease-out;
}

.invlinkbox:hover .caption__overlay {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

.caption__overlay__title {
    transition: -webkit-transform .35s ease-out;
    transition:         transform .35s ease-out;
}

.invlinkbox:hover .caption__overlay__title {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}



/*  RESPONSIVE STYLES
------------------------------------------------*/

@media screen and (max-width: 1720px) {
	
	.invlinkbox{width:16.50%;}
	
}

@media screen and (max-width: 1333px) {
	
	.invlinkbox{width:16.48%;}
	
	.invlinkbox h5{font-size:14px;}
	.invlinkbox p{font-size:13px;}
	.invlinkbox a{font-size:13px;}
	.sub-categories{min-height:280px}
		
}

@media screen and (max-width: 1124px) {
	
	.invlinkbox{width:33%;}
	
	.invlinkbox h5{font-size:16px;}
	.invlinkbox p{font-size:14px;}
	.invlinkbox a{font-size:14px;}
	
	
}

/* iPads (portrait and landscape) ----------- */
 
@media screen and (max-width: 1024px) {
	
	nav a:link, nav a:active, nav a:visited {font-size:16px; padding:0 8px;}

	.scroll-frame .label {width:100%;}
}


@media screen and (max-width: 768px) {
	h2{font-size:18px}
	p{font-size:14px;}
	article{padding:1em 0;}
	
	.show-tablet {display:block;}
	.hide-tablet {display:none !important;}
	
	
	.logo {width:100%; margin:0 auto; float:none; display:block; text-align:center}
	.rt-header {display:none}
	.search-box {display:none}
	.logo img { margin:0 auto}
	
	#simple-menu {
		float:left;
		background:url('../siteart/layout/mobile-nav-icon.png') no-repeat left center;
		height:40px;
		width:120px;
		display:block;
		cursor:pointer;
		padding-left:34px;
		line-height:40px;
		color:#fff;
		font-weight:900;
		margin-left:10px;
		}


	.staff {width:31.33333%;}
	
	#formpage .row:after {clear:none;}
	#formpage .col4 {width:48%;}
	#formpage .col3 {width:48%;}
	#formpage .col2 {width:98%;}
	
	
	
}


/* Galaxy (portrait and landscape) ----------- */

@media screen and (max-width:640px){
	h5{margin-bottom:10px}
	
	.show-640 {display:block !important;}
	.hide-640 {display:none !important;}

	.scroll-contain {height:182px;}
	.scroll-frame {width:100%; border-right:0px #000 solid; border-bottom:2px #000 solid;}
	.scroll-frame:nth-of-type(2) {border-bottom:0;}
	
	/* footer elements */
	.foot {padding:2em 0; }
	.foot-contact {width:100%; float:none; text-align:center }
	.foot-contact-right {width:100%; float:none; text-align:center; margin:2em auto 0 auto }

	
	.invlinkbox{width:49.5%}
}

/* Smartphones (portrait and landscape) ----------- */

@media screen and (max-width: 480px){
	.half-col {width:100%; margin-right:0;}
	
	.cycle-prev, .cycle-next {background-size:65%;}
	
	#formpage .col4, #formpage .col3, #formpage .col2, #formpage .full-col {width:100%; margin-right:0%;}
	
	.invlinkbox{
		width:49.2%;
	}
	
	.invlinkbox h5{font-size:13px;}
	.invlinkbox p{font-size:12px;}
	.invlinkbox a{font-size:12px;}
	

	.short-it{font-size:12px;}
}


@media screen and (max-width:375px) {
	.full-image .overlay {width:65%; left:10%;}
	
	.foot-contact {width:100%; margin-right:0;}
	
}






