@import url(https://fonts.googleapis.com/css?family=Courgette);
@import url(https://fonts.googleapis.com/css?family=Abel|Lato:400,900,700i);

@font-face {
  font-family: 'typicons';
  src: url("../fonts/typicons.eot");
  src: url("../fonts/typicons.eot?#iefix") format('embedded-opentype'),
       url("../fonts/typicons.woff") format('woff'),
       url("../fonts/typicons.ttf") format('truetype'),
       url("../fonts/typicons.svg#typicons") format('svg');
  font-weight: normal;
  font-style: normal;
}


*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; height: 100%; margin: 0;}

html { overflow:hidden; }

ul{list-style: none;}

.sharethis-inline-share-buttons{
	
	margin-top: 0.8em;
}
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

body {
    font-family: 'Abel', Calibri, Arial, sans-serif;
    color: #555;
    font-weight: 400;
    min-height: 900px;
	/*perspective: 1px;
	transform-style: preserve-3d;
	overflow-y: scroll;
	overflow-x: hidden;*/
}
p, .contentcontainer li{
    font-size: 1.2em;
    line-height: 1.3em;
}
.contentcontainer ul, .contentbox{
	position: relative;
	border:1px solid #ddd;
	border-top: none;
	border-radius: 0 0 0.6em 0.6em;
	padding-right: 1em;
   	box-shadow: inset 0 0px 50px rgba(0,0,0,0.04);
}
.contentbox{
	padding-left: 3em !important;
}
.contentcontainer ul{
	padding: 0.5em 0.2em 1em 2em !important;
	margin-top: 0;
}
.columns h4{
	margin-top: 0;
	width:35%;
	float:left;
}
.columns p{
	margin-top: 0;
	width:65%;
	float:left;
}
.contentbox{
	padding-top: 1em;
}
.contentcontainer li{
	float:left; 
	width: 32%; 
	padding: 0.5em 0.8em 0 1.3em; 
	position: relative;
}
@media screen and (max-width: 55em) {
	.contentcontainer li{
		width: 100%;
    	padding: 0.4em 0.8em 0 1.3em;
	}
}



.Rvideo-box {
	background-color: #000000;
	text-align: center;
	padding: 50px 0px;
	margin: 0px auto 0px auto;
	width: 100%;
	/*max-width: 520px;*/
	height: auto;
	border: none;
}

.Rvideo-box video {
	width: 100%;
	height: auto;
	display: block;
	padding: 0px;
	margin: 0px;
}

.Rvideo-caption {
	color: #FFFFFF;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	padding: 8px 5px 8px 5px;
}

.Rvideo-nosupport{
	color: #FFFFFF;
	padding-top: 110px;
	padding-bottom: 110px;
}



.contacts p, .contacts h4{
  position: relative;
}

.contact strong{
	font-size:1.2em;
}
.contact::before{
	position: absolute;
	font-family: 'typicons';
	font-style: normal;
	font-weight: normal;
	speak: none;
	display: inline-block;
	text-decoration: inherit;
	width: 2em;
	height: 2em;
	font-size: 2em;
	left:-1.7em;
	text-align: center;
	opacity: 0.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
.cbp-hsmenu .contact::before{
	width: 1.5em;
	height: 1.5em;
	font-size: 1.5em;
	left:-1.1em;
}
.contacts .contact-ad::before{
	content: '\e0a0';
}
.contacts .contact-ph::before{
	content: '\e0c5';
}
.contacts .contact-wo::before{
	content: '\e103';
}
.contacts .contact-sh::before{
	content: '\e083';
}
.contacts .contact-sa::before{
	content: '\e084';
}
.contacts .contact-mo::before{
	content: '\e05b';
}
.contacts .contact-em::before{
	content: '\e0a5';
}
.contacts .contact-arr::before{
	content: '\e00b';
}
.contacts .contact-inf::before{
	content: '\e091';
}
.contacts .contact-fb::before{
	content: '\e0e4';
}
.contacts .contact-tw::before{
	content: '\e0f8';
}
.contacts .contact-go::before{
	content: '\e0ea';
}
.contacts .contact-gal::before{
	content: '\e08d';
}
.contacts .contact-our::before{
	content: '\e049';
}
.contacts .contact-eye::before{
	content: '\e06f';
}
.contacts .contact-home::before{
	content: '\e08a';
}

.contacts .contact-insta::before{
	content: '\e0ec';
}
.contacts .contact-pinterest::before{
	content: '\e0f2';
}


.whitelistticks{
	color:#fff;
}
.whitelistticks li{
	position: relative;
	padding-left: 1.5em;
	font-size: 1.2em;
	line-height: 1.8em;
}

.contentcontainer li::before, .whitelistticks li::before{
	position: absolute;
	font-family: 'typicons';
	font-style: normal;
	font-weight: normal;
	speak: none;
	display: inline-block;
	text-decoration: inherit;
	width: 1.4em;
	height: 1.4em;
	font-size: 1.4em;
	left:-0.2em;
	text-align: center;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	content: '\e11e'; /* \e00b */ 
}
.contentcontainer li::after{
	content: '';
}


.arrowicon, .infoicon, .spannericon, .contactsicon, .bulbicon, .groupicon{
	position: relative;
}
.arrowicon::before, .infoicon::before, .spannericon::before, .contactsicon::before, .bulbicon::before, .groupicon::before{
	position: absolute;
	font-family: 'typicons';
	font-style: normal;
	font-weight: normal;
	speak: none;
	display: inline-block;
	text-decoration: inherit;
	width: 1.5em;
	height: 1.5em;
	font-size: 1.5em;
	left:-1.5em;
	text-align: center;
	opacity: 0.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.arrowicon::before{ content: '\e00b'; }
.infoicon::before{ content: '\e091'; 	width: 1.65em;
	height: 1.65em;
	font-size: 1.65em; }
.spannericon::before{ content: '\e103'; }
.contactsicon::before{ content: '\e052'; }
.bulbicon::before{ content: '\e09a'; }
.groupicon::before{ content: '\e083'; }

header{
	box-sizing:border-box;
	min-height: 100vh;
	padding:22vh 0 5vh;
	position: relative;
	transform-style: inherit;
	width: 100vw;

    -webkit-transition: min-height 1.5s ease;
    -moz-transition: min-height 1.5s ease;
    -ms-transition: min-height 1.5s ease;
    -o-transition: min-height 1.5s ease;
    transition: min-height 1.5s ease;
	
}
header h1{
	
}
header, header:before{
	background:  50% 50% / cover;
}
header::before{
	bottom:0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top:0;
	display: block;
	background-image:url(../images/header-showroom.jpg);
	background-size: cover;
	transform-origin: center center 0;
	transform: translateZ(-1px) scale(2);
	z-index: -1;
	background-position: top;
	/*min-height: 70vh;*/
}


header * {
	text-align: center;
	color: #fff;
}

.contentcontainer h2{
	border-bottom: 1px solid #eee;
	padding-bottom: 0.2em;
	text-align: center;
}

h2{
	line-height: 1.6em;
	margin-top: 1.0em;
}
h2, h3, h4{
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 2.6em;
	color:#7b0717;
	line-height: 1.4em;
	margin-bottom: 0;
	clear: both;
}
h3{
	font-size: 1.8em;
	text-align: center;
	color: #fff;
	background-color: #555;
	padding:0.5em;
	border-radius: 0.6em 0.6em 0 0;
   	box-shadow: inset 0 12px 35px rgba(0,0,0,0.2);
   	text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
h4{
	font-size: 1.3em;
	margin-top: 0.5em;
}
h2 em{
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	font-style: italic;
}

a {
	color: #222;
	text-decoration: none;
}
.footer a {
	color: #fff;
}
.footer a:hover {
	color: #eee;
}

.contentcontainer{
	margin: 0 auto;
	padding: 0em 1em 3em 1em;
	width:90vw;
	max-width: 1200px;
}

a:hover {
	color: #000;
}
.container{
	background-color: #000;
	height: 100%;
}
.container > header {
	/*max-width: 69em;*/
	margin: 0 auto;
	height:800px;
	max-height: 50%;
}
.container .headerright {
	width: 65%;
	float:left;
	background-color:#000;
	height:400px;
	background-image:url(../images/header-showroom.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.container .headerleft {
	width: 35%;
	max-width: 500px;
	float:left;
	/*padding: 9.5em 0 0 0;*/
	height:400px;
	background-color:#000;
	text-align: right;
}
.container .headerleftcontents {
	padding: 140px 0 0 0;
}
.container > header {
	color:#fff;
}
.container > header h1 {
	font-size: 2.125em;
	line-height: 1.3;
	margin: 0 0 0.6em 0;
	/*float: left;*/
	font-weight: 400;
}

.container > header span, .container .headerleft span, .phonenum {
	display: block;
	position: relative;
	z-index: 9999;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5em;
	padding: 0 0 0.6em 0.1em;
	font-size: 1.4em;
}

.container > header span span:after, .container > .headerleft span span:after {
	width: 30px;
	height: 30px;
	left: -12px;
	top: -8px;
	font-size: 75%;
	position: relative;
}

.container > header span span:hover:before {
	content: attr(data-content);
	text-transform: none;
	text-indent: 0;
	letter-spacing: 0;
	font-weight: 300;
	font-size: 110%;
	padding: 0.8em 1em;
	line-height: 1.2;
	text-align: left;
	left: auto;
	margin-left: 4px;
	position: absolute;
	color: #fff;
	background: #7b0717;
}

.container > header nav {
	float: right;
	text-align: center;
}

.container > header nav a {
	display: inline-block;
	position: relative;
	text-align: left;
	width: 2.5em;
	height: 2.5em;
	background: #fff;
	border-radius: 50%;
	margin: 0 0.1em;
	border: 4px solid #7b0717;
}

.container > header nav a > span {
	display: none;
}

.container > header nav a:hover:before {
	content: attr(data-info);
	color: #7b0717;
	position: absolute;
	width: 600%;
	top: 120%;
	text-align: right;
	right: 0;
	pointer-events: none;
}

.container > header nav a:hover {
	background: #7b0717;
}
.gallerythumb{
	width:100px;
	margin: 8px 8px 0 0;
}
.bp-icon:after {
	font-family: 'bpicons';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-align: center;
	color: #7b0717;
	-webkit-font-smoothing: antialiased;
}

.container > header nav .bp-icon:after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	line-height: 2;
	text-indent: 0;
}


.texturebg{
	
	background:none;
	background-size: 25%;
	background-repeat: repeat;
	box-shadow: inset 0 10px 15px rgba(0,0,0,0.05);
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
	
}

.featurearea{
	height:0;
	/*max-height:0;*/
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
    -webkit-transition: opacity 2.5s ease;
    -moz-transition: opacity 2.5s ease;
    -ms-transition: opacity 2.5s ease;
    -o-transition: opacity 2.5s ease;
    transition: opacity 2.5s ease;
	/*background-image:url(../images/headerlarge-showroom.jpg);
	background-image:url(../images/headerlarge-logo.jpg);*/
	background-image:url(../images/headerlarge-showroom.jpg);
	opacity: 0;
}





.featureareaimage{
	opacity: 1;
}
.featureareahigh{
	height:800px;
	/*max-height: 50%;*/
}

#logoholder{
	background-color: rgba(255,255,255,0); 
	margin: 0 auto; 
	text-align: center; 
	border-radius: 6.5em; 
	overflow: hidden; 
	width:300px; 
	opacity: 0;
    -webkit-transition: width 1.0s ease, opacity 1.0s ease, background-color 2.5s ease;
    -moz-transition: width 1.0s ease, opacity 1.0s ease, background-color 2.5s ease;
    -ms-transition: width 1.0s ease, opacity 1.0s ease, background-color 2.5s ease;
    -o-transition: width 1.0s ease, opacity 1.0s ease, background-color 2.5s ease;
    transition: width 1.0s ease, opacity 1.0s ease, background-color 2.5s ease;
	/*margin-top: -15vh;*/
	margin-top: -40vh;
    margin-bottom: 25vh;
	padding: 15px 15px 14px 15px;
}

.logo{
	width:100%;
	/*-webkit-filter: drop-shadow( 0 2px 8px rgba(0,0,0, 0.8) ); 
            filter: drop-shadow( 0 2px 8px rgba(0,0,0, 0.8) );*/
}
.featurecontent{
	margin: 0 auto;
	text-align: center;
	position: relative;
	position: absolute; 
	top:0; 
	left:0; 
	width:100%; 
	height:24%;
	overflow: hidden;
    -webkit-transition: all 1.0s ease;
    -moz-transition: all 1.0s ease;
    -ms-transition: all 1.0s ease;
    -o-transition: all 1.0s ease;
    transition: all 1.0s ease;
}
.featurecontentinner{
	width:100%; 
	padding: 1.0em 0 1.0em 0; 
	background-color: rgba(0,0,0,0.5);
	overflow: hidden;
	margin: 0 auto;
}
.featurecontentinner h1{
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 3.2em;
	color:#fff;
	line-height: 1em;
}
.featurecontentinner h1 em{
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	font-style: italic;
}
.featurecontent span { 
   	text-shadow: 0 2px 8px rgba(0,0,0,0.8);
	color:#fff;
}
.featurecontentslim{
	text-align: left;
	height:15%;
}

.rounded{
	/*border-radius: 50%;*/
	height:0;
}




.container > header nav a:hover:after {
	color: #fff;
}

.bp-icon-next:after {
	content: "\e000";
}
.bp-icon-drop:after {
	content: "\e001";
}
.bp-icon-archive:after {
	content: "\e002";
}
.bp-icon-about:after {
	content: "\e003";
}
.bp-icon-prev:after {
	content: "\e004";
}

.footer{
	min-height:20em;
	background-color: #252525;
	box-shadow: inset 0 20px 60px 0 #000;
	margin-top: 3em;
}

.footer .contentcontainer{
	padding:2em 0 4em 7.5em;
}
.hidetoexpand{
	display: none;
	opacity: 0;
	overflow: hidden;
}
.headerslim{
	min-height: 40vh;
}

.headerhigh{
	min-height: 100vh;
}	

.headerslim::before{
	margin-top:-30vh;
	min-height: 30vh;
}
.headerhigh::before{
    margin-top: -10vh;
	min-height: 80vh;
}



.widepaneldark{
	overflow: hidden;
	padding: 2em 0;
	box-shadow: inset 0 30px 60px rgba(0, 0, 0, 0.8);
	background-color:#222;
	background-image: url(../images/pagebodyimages/granite.jpg);
}
.widepaneldarkparra{
	background-color:#222;
	background-image: url(../images/pagebodyimages/granite.jpg);
	display: flex;
	flex: 1 0 auto;
	position: relative;
	height: 200vh;
	transform: translateZ(-1px) scale(2);
	z-index: 0;
}

.widepaneldark h2{
	margin-top: 0;
	color:#fff;
	border-color: #666;
}
.widepaneldark p{
	color:#fff;
}

.footer .col3 h4{
	color:#888;
	font-size: 1.5em;
	margin-left: -1.4em;
}
.footer .col3 p{
	position: relative;
	color:#ddd !important;
	font-size: 1.1em;
}
.col2{
	float:none;
	width:auto;
}
.col2 img{
	margin-bottom: -5px;
}
.col3{
	float:left;
	width:30%;
	margin-right: 1%;
}

@media screen and (max-width: 54em){
	.footer .col3{
		float:none;
		width:auto;
		border-bottom: 1px solid #666;
		margin-top: 2em;
		margin-bottom: 1em;
	}
}

@media screen and (min-width: 55em){
	.col2{
		float:left;
		width:49%;
		margin-right: 2%;
	}
	.contentcontainer .col2:nth-of-type(even){
		margin-right: 0 !important;
	}	
	
	
}
	
			
				

				


/* NON MOBILE SCREEN */
@media screen and (min-width: 51.4376em){

	.imgroundcorner{
		border-radius: 0 0 0 4em;
	}
	.cbp-hsmenu > li > a::after {
		margin: 0 auto;
		content: '';
		display: block;
		width: 0;
		height: 2px;
		background: #fff;
		opacity: 0.5;
		transition: width .3s;
	}
	
	
	.menuextrapadding{
		/*padding: 3em 1.875em !important;*/
		padding: 0.7em 1.875em 1.5em 1.875em !important;
	}
	
	.menuonlow{display: none;}
	

	.mainImgHomeHeight{
		height:80vh !important;
		/*margin-top:-5vh !important;*/
	}
	.mainImgPageHeight{
		height:70vh !important;
		margin-top:-20vh !important;
	}
	
	.ParallaxContainer {
		background-size: 115% !important;
	}
	
}



.mobtoplogo{
	display:none;
}
.footerlogos{
	/*text-align: center;*/
	margin-left: -3em;
}
.footerlogos img{
	padding:2em 3em 0 0;
	opacity:0.25;
	width:22%;
}



/* MOBILE SCREEN */
@media screen and (max-width: 51.4375em){
	
	.footerlogos{
		margin-left: -2em;
	}
	.footerlogos img{
		padding:0.5em 1em;
		width:48%;
		opacity:0.4;
	}

	.mobtoplogo{
		z-index: 99999;
		text-align: center;
		display:block;
		position: absolute;
		top:0;
		left:0;
		width:100%;
		/*background-color: rgba(255,255,255,0.6);*/
		padding:0;
	}
	
	/* HIDE MENU ON MOBILES */
	#cbp-hsmenu-wrapper, #cbp-hsmenu-wrapper2{
		overflow: hidden;
	}

	.Rvideo-box {
		padding: 0px !important;
	}

	.contact::before{
		opacity: 0.7;
	}
	
	.cbp-hsmenu .contact::before{
		left:0 !important;
	}
	.mainImgHomeHeight{
		height:67vh !important;
		margin-top:-20vh !important;
	}
	.mainImgPageHeight{
		height:60vh !important;  /* 70vh */
		margin-top:-30vh !important;
	}
	.ParallaxContainer{
		background-size: 170% !important;
		background-repeat: no-repeat !important;
		background-position: top !important;
	}
	.Content {
		padding-top: 0em !important;
	}
	
	.footer .contentcontainer {
		padding: 2em 0 4em 3.5em;
	}
	
	.cbp-hsmenu-wrapper {
		/*margin-bottom: 9vh;*/
	}
	.menuontop{display: none;}
	
	.widepaneldark{ /*padding:2em;*/ }
	
	.menuhome{ /*display: none !important;*/ }
	.contentcontainer {
		width: 97vw;
	}
	h2, h3, h4 {
		line-height: 1.2em;
	}
	.contentcontainer li {
		font-size: 1.3em;
		line-height: 1.2em;
	
	}
	p{
		font-size: 1.3em;
		line-height: 1.4em;
	
	}
	.columns h4 {
		font-size: 1.1em;
	}
	#logoholder {
		max-width: 70%;
		margin-top: -34vh;
		margin-bottom: 15vh;
		padding: 10px 10px 8px 10px !important;
	}
	.contentcontainer {
    	padding: 2em 2em 2em 1em;
	}
	
	body, html{font-size: 90%; }
	
}



@media screen and (min-width: 26em){


	.cbp-hsmenu > li > a:hover::after {
		width: 99%;
	}
	
}
	
/* Smaller SCREEN */
@media screen and (max-width: 55em) {

	.container > header h1,
	.container > header nav {
		float: none;
	}

	.container > header > span,
	.container > header h1 {
		text-align: center;
	}

	.container > header nav {
		margin: 0 auto;
	}

	.container > header > span {
		text-indent: 30px;
	}
	
	
}

.fillgradient{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
}
@media screen and (min-width: 51.4376em){ /* For performance, dont do gradient on mobiles */
	.fillgradient{
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+68,ffffff+96&0+68,1+96 */
		
		background: -moz-linear-gradient(top, rgba(255,255,255,0) 68%, rgba(255,255,255,1) 96%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgba(255,255,255,0) 68%,rgba(255,255,255,1) 96%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgba(255,255,255,0) 68%,rgba(255,255,255,1) 96%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
		
	}
}



@media screen and (orientation:portrait){

	.headerhigh::before{
		margin-top: -40vh;
	}
	.headerslim::before{
		margin-top:-50vh;
	}	
	
	.featurearea{
		max-height:65%;
	}
	.ParallaxContainer {
		background-size: 140% !important; /* 160% */
		background-repeat: no-repeat !important;
		background-position: top !important;
	}
}



@media screen and (orientation:portrait) and (min-width: 51.4376em){
	.ParallaxContainer {
		background-size: 190% !important;
	}
}



.MainContainer {
  perspective: 1px;
  transform-style: preserve-3d;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
}

.ContentContainer {
	position: relative;
	display: block;
	background-color: rgba(255,255,255,0.9);
	z-index: 1;
	min-height: 100vh;
}

.Content {
	/*width:90%;
	max-width: 1200px;*/
	margin: 0 auto;
	opacity: 0;
	-webkit-transition: opacity 0.8s ease;
	-moz-transition: opacity 0.8s ease;
	-ms-transition: opacity 0.8s ease;
	-o-transition: opacity 0.8s ease;
	transition: opacity 0.8s ease;
	/*padding-top: 1em;*/
}

.ParallaxContainer {
	display: flex;
	flex: 1 0 auto;
	position: relative;
	z-index: -1;
	height: 60vh; /* INITIAL BEFOR TRANSITION */
	margin-top: -22vh;
	/*background-size: 110% !important;*/
	justify-content: center;
	align-items: center;
	transform: translateZ(-1px) scale(2.05);
	background:url(../images/headerlarge-showroom.jpg);
	background-color: rgb(255,255,255);
	background-position: center;
	background-repeat: no-repeat;
    -webkit-transition: height 1s ease, margin-top 1s ease;
    -moz-transition: height 1s ease, margin-top 1s ease;
    -ms-transition: height 1s ease, margin-top 1s ease;
    -o-transition: height 1s ease, margin-top 1s ease;
    transition: height 1s ease, margin-top 1s ease;
}