@import url(http://fonts.googleapis.com/css?family=Lato:400,700,900);

	.mySlidesroof {display:none}
	.mySlidestrim {display:none}
	.mySlidespanel {display:none}
	
	.demoroof {cursor:pointer}
	.demotrim {cursor:pointer}
	.demopanel {cursor:pointer}


/**color squares on color visualizer**/
.pic{
	width: 100%;
	position: relative;
}


/**descriptions for components**/
.piccontent{
	width: 100%;
	position: relative;
	top:-30px;
	
}



/**base image**/
		.pickcontainer 
	{
		position:relative;
		width:1200px;
		height:950px;
		margin:auto;
		background-color:;
		margin-top: 190px;

	}

.mainimgGar
{
	position: relative;
	width:1200px;
	height:730px;
	margin: auto;
	background-color:;
	margin-top: -160px;	
}

		.pickcontainercom 
	{
		position:relative;
		width:1200px;
		height:830px;
		margin:auto;
		background-color:;


	}
	
	.mainimgcom
{
	position: relative;
	width:1200px;
	height:730px;
	margin: auto;
	background-color:;
	margin-top: -50px;	
}

.style
{
	
	
	display: inline-block;
	width: 100%;
	text-align: center;
	font-size: 1.5em;
	margin-top: 40px;
	margin-bottom: 40px;
	z-index: 5;
	
}

.style a
{
	padding: 60px;
	
}

.header
{
	margin-bottom: 30px;
	text-align: center;
	margin-top: 200px;
}


a:hover {
	background:;
	
}

a.active
{
	color:black;
	opacity:.4;
}

.components

	{
		display:block;
		position:absolute;
		margin-top: -730px;
		z-index: 2;
		
	}

.portfolio-item-component {
	margin-left: 90px;
	
}


/**individual carport layers**/


	.groundplate
	{
		display:block;
		position:absolute;
		margin-top: -760px;
		z-index: 2;
	}
		

	.roof

	{
		display:block;
		position:absolute;
		margin-top: -741px;
		z-index: 2;
		
	}
	.trim
	{
		display:block;
		position:absolute;
		margin-top:-741px;
		z-index: 3;;
		
	}
	.panel
	{
		display:block;
		position: absolute;
		margin-top:-741px;
		z-index: 1;
		
	}
/**individual Garage layers**/



	.roofGar

	{
		display:block;
		position:absolute;
		margin-top: -730px;
		z-index: 2;
		
	}
.trimGar

	{
		display:block;
		position:absolute;
		margin-top: -730px;
		z-index: 3;
		
	}
.panelGar

	{
		display:block;
		position:absolute;
		margin-top: -730px;
		z-index: 1;
		
	}

/**Color Names**/
	.contentcontent 
	{
		position: relative;
		padding-right: 0px;
    	display: none;
		text-align: left;
		margin-left:-60px;
		margin-top:-20px; 
		color:#008ECC;
		width:37.33%;
		cursor:default;
		
	}
	.contentcontent a:hover
	   {
		   opacity: .5;
		   
	   }

	.contentroof 
	{
		position: relative;
		background-color:;
		padding-right: 0px;
    	display: none;
		text-align: center;
		margin-left:0px;
		margin-top:-20px; 
		color:#008ECC;
		width:33.33%;
		font-size: 17px;
		cursor:default;
		
	}

	   
	.contenttrim
	{
		position: relative;
		background-color:;
		padding-right: 0px;
    	display: none;
		text-align: center;
		margin-left:33.33%;
		margin-top:-24px; 
		color:#008ECC;
		width:33.33%;
		font-size: 17px;
		cursor:default;
		
	}	
	   
	   .contentpanel
	{
		position: relative;
		background-color:;
		padding-right:0px;
    	display: none;
		text-align: center;
		margin-left:66.66%;
		margin-top:-24px; 
		color:#008ECC;
		width:33.33%;
		font-size: 17px;
		cursor:default;
	}


/**Print page**/

.printheader
{
	display: none;
}

.printdisclaimer
{
	display:none;
}
.popularprint
{
	display:none;
}
	/**print**/
@media print {
  
	body
	{
		overflow:hidden !important;
	}

	.donotprint
	{
		display:none;
		
	}
		

	
	
	.mi-slider {
	position: relative;
	top:80px;
	height: -230px;
	z-index: 4;
	
}
	
	.printheader
	{
		display:block;
		margin-top: -60px;

	}
	
	.printdisclaimer
	{
		display: block;
		position: relative;
		text-align: left;
		width:100%;
		
		margin-top:-470px; 
		
	}
	/**individual carport layers**/


	.groundplate
	{
		display:block;
		position:absolute;
		margin-top: -445px;
		z-index: 2;
	}
		


	

	.roof

	{
		display:block;
		position:absolute;
		margin-top: -445px;
		z-index: 2;
		
	}
	.trim
	{
		display:block;
		position:absolute;
		margin-top:-445px;
		z-index: 3;;
		
	}
	.panel
	{
		display:block;
		position: absolute;
		margin-top:-445px;
		z-index: 1;
		
	}
	/**individual Garage layers**/


	.groundplateGar
	{
		display:block;
		position:absolute;
		margin-top: -445px;
		z-index: 2;
	}

	.roofGar

	{
		display:block;
		position:absolute;
		margin-top: -445px;
		z-index: 2;
		
	}
	.trimGar

	{
		display:block;
		position:absolute;
		margin-top: -445px;
		z-index: 3;
		
	}
	.panelGar

	{
		display:block;
		position:absolute;
		margin-top: -445px;
		z-index: 1;
		
	}

	.popularprint
	{
		display: block;
		margin-top: 0px;
			
	}

	
	
/**base image**/
		.pickcontainer 
	{
		position:relative;
		width:1000px;
		height:675px;
		margin:auto;
		background-color:;
		margin-top: -135px;
	
	}

/* portfolio */
    .portfolio-item {
        width: 8%;
    }
	
	
.style
{
	
	display: inline-block;
	width: 100%;
	text-align: center;
	font-size: 1.5em;
	margin-bottom: 20px;
	z-index: 4;
}

.style a
{
	padding: 60px;
}

.header
{
	margin-bottom: 30px;
	text-align: center;
	font-size: 2em;
	margin-top: 120px;
}


a:hover {
	background:;
	
}

a.active
{
	color:black;
	opacity:.4;
}

/**individual layers**/


	.groundplate
	{
		display:block;
		position:absolute;
		margin-top: -594px;
		z-index: 2;
	}
		


	

	.roof

	{
		display:block;
		position:absolute;
		margin-top: -590px;
		z-index: 2;
		
	}
	.trim
	{
		display:block;
		position:absolute;
		margin-top:-590px;
		z-index: 3;;
		
	}
	.panel
	{
		display:block;
		position: absolute;
		margin-top:-590px;
		z-index: 1;
		
	}
/**individual Garage layers**/


	.groundplateGar
	{
		display:block;
		position:absolute;
		margin-top: -633px;
		z-index: 2;
	}

	.roofGar

	{
		display:block;
		position:absolute;
		margin-top: -633px;
		z-index: 2;
		
	}
.trimGar

	{
		display:block;
		position:absolute;
		margin-top: -633px;
		z-index: 3;
		
	}
.panelGar

	{
		display:block;
		position:absolute;
		margin-top: -633px;
		z-index: 1;
		
	}
}
/**
***************Responsive Section Starts here***********************************************************
**/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1)  
{ 

		body
	{
		width:100%;
	}
		

		/**components visualizer**/
		.pickcontainercom
	{
		position:relative;
		width:100%;
		height:750px;
		margin:auto;
		background-color:;
		margin-top: 0px;
		background-color:;

	}
	
	
	.mainimgcom
{
	position: relative;
	width:100%;
	margin:0 auto;
	background-color:;
	margin-top: 0px;

}
	.components

	{
		width:100%;
		display:block;
		position:absolute;
		margin-top: -730px;
		z-index: 2;
		
	}

	.piccontent{
	width: 90%;
	position: relative;
	margin:0 auto;
	top:-05px;
	background-color:;
	}
		
	/**Components caption**/
	.portfolio-item-component {
    visibility: visible;
	z-index:3;
}
	/**Components caption**/
	.portfolio-item-component {
    cursor: default;
    margin: 0 1% 1% -40%;
    overflow: hidden;
	top:-165px;
    position: absolute;
    width: 130%;
	background-color: black;
	opacity: .8;
	border-radius: 7px;
	z-index: 3;
	
	
}
	
	


/**color Visualazer**/
	/**base image**/
		.pickcontainer 
	{
		position:relative;
		width:90%;
		height:950px;
		margin:auto;
		background-color:;
		margin-top: 0px;

	}
	
	
	.mainimgGar
{
	position: relative;
	width:100%;
	height:200px;
	margin: auto;
	background-color:;
	margin-top: 0px;
	}
	
	/**individual Garage layers**/



	.roofGar

	{
		display:block;
		position:absolute;
		margin-top: -200px;
		z-index: 2;
		
		}
.trimGar

	{
		display:block;
		position:absolute;
		margin-top: -200px;
		z-index: 3;
		
	}
.panelGar

	{
		display:block;
		position:absolute;
		margin-top: -200px;
		z-index: 1;
		
	}
	
		
		.contentroof 
	{
		position: absolute;
		background-color:;
		padding-right: 0px;
    	display: none;
		text-align: center;
		margin-left:0px;
		margin-top:0px; 
		color:#008ECC;
		width:33.33%;
		font-size: 17px;
		cursor:default;
		
	}
	
		.contenttrim
	{
		position: absolute;
		background-color:;
		padding-right: 0px;
    	display: none;
		text-align: center;
		margin-left:33.33%;
		margin-top:0px; 
		color:#008ECC;
		width:30.33%;
		font-size: 17px;
		cursor:default;
		
	}	
	   
	   .contentpanel
	{
		position: absolute;
		background-color:;
		padding-right:0px;
    	display: none;
		text-align: center;
		margin-left:66.66%;
		margin-top:0px; 
		color:#008ECC;
		width:30.33%;
		font-size: 17px;
		cursor:default;
	}
	
	
.style
{
	
	margin-top: -300px;
	
	
}
	
	.style a
{
	padding: 60px;
	
}

.header
{
	margin-bottom: 30px;
	text-align: center;
	margin-top: 210px;
}
	#popular
	{
		margin-top: -250px;
		margin-bottom: -150px;
	}
	
	
}

/**Ipad mini break point landscape**/

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) 
{


	body
	{
		width:100%;
	}
		

		/**components visualizer**/
		.pickcontainercom
	{
		position:relative;
		width:100%;
		height:750px;
		margin:auto;
		background-color:;
		margin-top: -60px;
		background-color:;

	}
	
	
	.mainimgcom
{
	position: relative;
	width:100%;
	margin:0 auto;
	background-color:;
	margin-top: 0px;

}
	.components

	{
		width:100%;
		display:block;
		position:absolute;
		margin-top: -730px;
		z-index: 2;
		
	}

	.piccontent{
	width: 90%;
	position: relative;
	margin:0 auto;
	top:-05px;
	background-color:;
	}
		
	/**Components caption**/
	.portfolio-item-component {
    visibility: visible;
	z-index:3;
}
	/**Components caption**/
	.portfolio-item-component {
    cursor: default;
    margin: 0 1% 1% -40%;
    overflow: hidden;
	top:-165px;
    position: absolute;
    width: 130%;
	background-color: black;
	opacity: .8;
	border-radius: 7px;
	z-index: 3;
	
	
}
	
	


/**color Visualazer**/
	/**base image**/
		.pickcontainer 
	{
		position:relative;
		width:90%;
		height:950px;
		margin:auto;
		background-color:;
		margin-top: 0px;

	}
	
	
	.mainimgGar
{
	position: relative;
	width:100%;
	height:200px;
	margin: auto;
	background-color:;
	margin-top: 0px;
	}
	
	/**individual Garage layers**/



	.roofGar

	{
		display:block;
		position:absolute;
		margin-top: -200px;
		z-index: 2;
		
		}
.trimGar

	{
		display:block;
		position:absolute;
		margin-top: -200px;
		z-index: 3;
		
	}
.panelGar

	{
		display:block;
		position:absolute;
		margin-top: -200px;
		z-index: 1;
		
	}
	
		
		.contentroof 
	{
		position: absolute;
		background-color:;
		padding-right: 0px;
    	display: none;
		text-align: center;
		margin-left:0px;
		margin-top:0px; 
		color:#008ECC;
		width:33.33%;
		font-size: 17px;
		cursor:default;
		
	}
	
		.contenttrim
	{
		position: absolute;
		background-color:;
		padding-right: 0px;
    	display: none;
		text-align: center;
		margin-left:33.33%;
		margin-top:0px; 
		color:#008ECC;
		width:30.33%;
		font-size: 17px;
		cursor:default;
		
	}	
	   
	   .contentpanel
	{
		position: absolute;
		background-color:;
		padding-right:0px;
    	display: none;
		text-align: center;
		margin-left:66.66%;
		margin-top:0px; 
		color:#008ECC;
		width:30.33%;
		font-size: 17px;
		cursor:default;
	}
	
	
.style
{
	
	margin-top: -300px;
	
	
}
	
	.style a
{
	padding: 60px;
	
}

.header
{
	margin-bottom: 30px;
	text-align: center;
	margin-top: 210px;
}
	#popular
	{
		margin-top: -90px;
		margin-bottom: -150px;
	}
	



}


/*============================================================
	Mobile (Portrait) Design for a width of 320px
==============================================================*/

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

	body
	{
		width:100%;
	}
		

		/**components visualizer**/
		.pickcontainercom
	{
		position:relative;
		width:100%;
		height:500px;
		margin:auto;
		background-color:;
		margin-top: 0px;
		background-color: ;

	}
	
	
	.mainimgcom
{
	position: relative;
	width:100%;
	margin:0 auto;
	background-color:;
	margin-top: 0px;

}
	.components

	{
		width:100%;
		display:block;
		position:absolute;
		margin-top: -730px;
		z-index: 2;
		
	}

	.piccontent{
	width: 90%;
	position: relative;
	margin:0 auto;
	top:-470px;
	background-color:;
	}
		
	/**Components caption**/
	.portfolio-item-component {
    visibility: hidden;
}
	
		/**color Visualazer**/
	/**base image**/
		.pickcontainer 
	{
		position:relative;
		width:90%;
		height:950px;
		margin:auto;
		background-color:;
		margin-top: 0px;

	}
	
	.mainimgGar
{
	position: relative;
	width:100%;
	height:200px;
	margin: auto;
	background-color:;
	margin-top: 0px;	
}
	/**individual Garage layers**/



	.roofGar

	{
		display:block;
		position:absolute;
		margin-top: -200px;
		z-index: 2;
		
		}
.trimGar

	{
		display:block;
		position:absolute;
		margin-top: -200px;
		z-index: 3;
		
	}
.panelGar

	{
		display:block;
		position:absolute;
		margin-top: -200px;
		z-index: 1;
		
	}
	
		.contentroof 
	{
		position: absolute;
		background-color:;
		padding-right: 0px;
    	display: none;
		text-align: center;
		margin-left:0px;
		margin-top:0px; 
		color:#008ECC;
		width:33.33%;
		font-size: 17px;
		cursor:default;
		
	}
	
		.contenttrim
	{
		position: absolute;
		background-color:;
		padding-right: 0px;
    	display: none;
		text-align: center;
		margin-left:33.33%;
		margin-top:0px; 
		color:#008ECC;
		width:30.33%;
		font-size: 17px;
		cursor:default;
		
	}	
	   
	   .contentpanel
	{
		position: absolute;
		background-color:;
		padding-right:0px;
    	display: none;
		text-align: center;
		margin-left:66.66%;
		margin-top:0px; 
		color:#008ECC;
		width:30.33%;
		font-size: 17px;
		cursor:default;
	}
	
	
.style
{
	
	margin-top: -300px;
	
	
}
	
	.style a
{
	padding: 60px;
	
}

.header
{
	margin-bottom: 30px;
	text-align: center;
	margin-top: 130px;
}
	#popular
	{
		margin-top: -450px;
		margin-bottom: -150px;
	}
	
	
	
}


/*============================================================
	Mobile (Landscape) Design for a width of 480px
==============================================================*/

@media only screen and (min-width: 480px) and (max-width: 767px)
{
	
	
	
		/**components visualizer**/
		.pickcontainercom
	{
		position:relative;
		width:100%;
		height:500px;
		margin:auto;
		background-color:;
		margin-top: 0px;
		background-color: ;

	}
	
	
	.mainimgcom
{
	position: relative;
	width:100%;
	margin:0 auto;
	background-color:;
	margin-top: 0px;

}
	.components

	{
		width:100%;
		display:block;
		position:absolute;
		margin-top: -730px;
		z-index: 2;
		
	}

	.piccontent{
	width: 90%;
	position: relative;
	margin:0 auto;
	top:-400px;
	background-color:;
	}
		
	/**Components caption**/
	.portfolio-item-component {
    visibility: hidden;
}
	
	
	/**color Visualazer**/
	/**base image**/
		.pickcontainer 
	{
		position:relative;
		width:90%;
		height:950px;
		margin:auto;
		background-color:;
		margin-top: 0px;

	}
	
	
	.mainimgGar
{
	position: relative;
	width:100%;
	height:200px;
	margin: auto;
	background-color:;
	margin-top: 0px;
	}
	
	/**individual Garage layers**/



	.roofGar

	{
		display:block;
		position:absolute;
		margin-top: -200px;
		z-index: 2;
		
		}
.trimGar

	{
		display:block;
		position:absolute;
		margin-top: -200px;
		z-index: 3;
		
	}
.panelGar

	{
		display:block;
		position:absolute;
		margin-top: -200px;
		z-index: 1;
		
	}
	
		
		.contentroof 
	{
		position: absolute;
		background-color:;
		padding-right: 0px;
    	display: none;
		text-align: center;
		margin-left:0px;
		margin-top:0px; 
		color:#008ECC;
		width:33.33%;
		font-size: 17px;
		cursor:default;
		
	}
	
		.contenttrim
	{
		position: absolute;
		background-color:;
		padding-right: 0px;
    	display: none;
		text-align: center;
		margin-left:33.33%;
		margin-top:0px; 
		color:#008ECC;
		width:30.33%;
		font-size: 17px;
		cursor:default;
		
	}	
	   
	   .contentpanel
	{
		position: absolute;
		background-color:;
		padding-right:0px;
    	display: none;
		text-align: center;
		margin-left:66.66%;
		margin-top:0px; 
		color:#008ECC;
		width:30.33%;
		font-size: 17px;
		cursor:default;
	}
	
	
.style
{
	
	margin-top: -300px;
	
	
}
	
	.style a
{
	padding: 60px;
	
}

.header
{
	margin-bottom: 30px;
	text-align: center;
	margin-top: 130px;
}
	#popular
	{
		margin-top: -390px;
		margin-bottom: -150px;
	}
	
	
	
	
}