#wrapper{
	width: 100%;
	margin: 0 auto;
	font-size: 16px;
	margin-top: 50px;
}

h1 {
    font-size: 4.3rem;
    color: #000000;
    font-weight: 400;
    text-align: center;
    margin: 0 0 0 18.3%;
    width: 67.4%; 
    position: relative;
}
h1 div{
	display: inline-block; 
    float: right;
}
h1 div button{
	background-color: #292f3d;
    float: right;
    width: 80px;
    height: 50px;
    border: 1px solid #fff;
    font-size: 42px;
    border-radius: 5px;
    outline: none;
}
h1 div button:hover,h1 div button i:hover{
	color: #53657f;
	cursor: pointer;
}
#wrapper > h1 > div > button:nth-child(2){
	position: absolute;
    top: 0;
    right: 0;
    transition: all 1s;
}
#wrapper > h1 > div > button:nth-child(1){
	    position: absolute;
    top: 0;
    right: 0;
}
#infoSection{
	margin: 0 0 30px 18.3%;
    width: 67.4%;
    border-bottom: 2px solid #000;
    position: relative;
    background-color: #53657f;
}
#infoSection > div:last-of-type{
	margin: 0 auto;
    font-size: 1.3em;
    width: 25%;
    border: 1px solid #cccccc;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    text-align: center;
    padding: 0px 0;
    position: absolute;
    top: 100%;
    left: 37.4%;
    background: #fff;
}
#info > div> span{
    width: 100%;
    margin: 0 auto;
    display: inline-block;
    font-size: 0.8em;
}
#infoWrapper{
	display: none;
}
#info{
	display:flex;
	justify-content: space-between;
	padding: 20px; auto;
    width: 95%;
    margin: 0 auto;
    transition: all 1s;
}

#infoSection > div:nth-child(2){
	cursor: pointer;
}
#info > div:nth-child(2) > table > tbody > tr:not(:first-child) > td:not(:first-child){
	background-color: #deecff;
	color: #000;
	border: 1px solid #6d6d6d;
}
#info > div:nth-child(1){
    width: 181px;
}
#info > div:nth-child(2){
    width: 150px;
}
#info > div:nth-child(3){
	width: 365px;
}
#info div{
    width: 30%;
    display: inline-block;
    color: #fff;
}
#info div:first-child{
	
}
#info > div:nth-child(3) > div{
	width: 100%;
}
#info > div:nth-child(3) > div > div{
	background-color: #3c5050;
    width: 20px;
    height: 20px;
    display: inline-block;
       border: 1px solid #000;
    border-radius: 2px;
}
#info > div:nth-child(3) > div > span{
    width: 90%;
    margin: 0 auto;
    display: inline-block;
    vertical-align: top;
    line-height: 1.7;
    margin-left: 10px;
}
#info > div:nth-child(3) > div:nth-child(1) > div{
	background-color: #99ff99;
}
#info > div:nth-child(3) > div:nth-child(2) > div{
	background-color: #ffeb3b;
}
#info > div:nth-child(3) > div:nth-child(3) > div{
	background-color: #ff6666;
}
section{
    display: block;
    width: 80%;
    margin: 0 auto 30px auto;
    overflow: hidden;
    transition: all 1s;
}

.right{
    float: right;
}

.underline{
    border-bottom: 1px solid #000;
}

#wrapper > aside:nth-child(3) > h4 > button {
	background: #292f3d;
	border: none;
	font-size: 0.7em;
	font-family: roboto;
	padding: 5px 15px;
	border-radius: 4px;
	margin-bottom: 10px;
	outline: none;
}

#cart > h4 > button {
	border: none;
	font-size: 0.7em;
	font-family: roboto;
	background: #292f3d;
	padding: 5px 15px;
	border-radius: 4px;
	margin-bottom: 10px;
	outline: none;
}
#wrapper > aside:nth-child(3) > h4 > button:hover, #cart > h4 > button:hover{
	background: #000;
}
#wrapper > aside:nth-child(3) > h4 > button:active, #cart > h4 > button:active{
	background: #444;
}



/* tile view*/
.tile{ 
	width: 27.6%;
    position: relative;
    height: 180px;
    margin: 0 5px 20px 0;
    display: block;
    float:left;
    border: 2px solid #e6e6e6;
}

.tile div, .detailed div{
	display: inline-block;
	float: left;
}

.tile div:nth-child(odd){
	width:45%;
	height: 100%;

}

.tile div:first-child span{
	display: block;
    text-align: center;
    font-size: 2em;
}

.tile div:first-child span:first-child{
	font-size: 6em;
}

.tile div:first-child span:nth-child(2){
	float:left;
}

.tile div:last-child{
	float: right;
	margin-right: 5%;
}
.tile div:last-child{
	float: right;
	margin-right: 5%;
	height: 100px;
	margin-top: 13px;
}

.tile div:last-child span{
	font-size: 1.1em;

}
.tile div:last-child span input{
	font-size: 1.1em;
	width: 20px;
    height: 20px;
    margin: 0;
}
.tile div:last-child span label{
	vertical-align: top;
}
	.tile button {
		background: #292f3d;
		/*font-weight: 300;*/
		border: none;
		width: 100%;
		font-size: 1.1em;
		font-family: roboto;
		/*font-weight: 300;*/
		padding: 5px 15px;
		border-radius: 4px;
		margin-bottom: 10px;
		outline: none;
	}

.tile button i{
	font-size: 1.5em;
}


.number-detail .detail{
	width: 100% !important;
	height: 50% !important;
}

.number-detail .detail>span:first-child{
	font-size: 2.1em !important; 
    line-height: 1.5 !important; 
}

.number-detail .tileBar{
    width: 100% !important;
    height: 5px !important;
    margin: 0 !important;
}

.number-detail .buttons{
    width: 100% !important;
    height: 40% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(0) !important;
}

.number-detail .buttons button{
    width: 48% !important;
    margin: 1% !important;
}
.number-detail .buttons>button:nth-child(2){
    float: right !important;
}

.number-detail .buttons>span{
    margin: 1% !important;
}

.number-detail .buttons .compare-button{
    display: block;
}

.detail>div{
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    height: inherit !important;
    font-size: 12px !important;
}

.detail>div span:nth-child(1){
	font-size: 2em !important;
	float: left !important;
	margin-left: 10px;
}

.detail>div span:nth-child(2){
	font-size: 2em !important;
	float: right !important;
	margin-right: 10px;
}


/* detailed view */
.detailed{
	width: 84.1%;
    position: relative;
    height: 180px;
    margin: 0 5px 20px 0;
    display: block;
    float:left;
    border: 2px solid #e6e6e6;
}


.detailed div{
	display: inline-block;
	float: left;
}

.detailed div:first-child{
	width:20%;
	height: 100%;
}
.detailed div:nth-child(3){
    width: 50%;
    padding: 1% 2%;
}
.detailed div:nth-child(3) span{
    display: block;
}
.detailed div:first-child span{
	display: block;
    text-align: center;
}

.detailed div:first-child span:first-child{
	font-size: 6em;
}

.detailed div:first-child span:nth-child(2){
	font-size: 2em;
}

.detailed div:last-child{
	float: right;
	margin-right: 5%;
}
.detailed div:last-child{
	float: right;
	margin-right: 5%;
	margin-top: 10px; 
	height: 100px;
	width: 23%;
}
.detailed div:last-child span{
	font-size: 1.1em;

}
.detailed div:last-child span input{
	font-size: 1.1em;
	width: 20px;
    height: 20px;
    margin: 0;
}
.detailed div:last-child span label{
	vertical-align: top;
}
	.detailed button {
		background: #292f3d;
		border: none;
		width: 100%;
		font-size: 1.1em;
		font-family: roboto;
		padding: 5px 15px;
		border-radius: 4px;
		margin-bottom: 10px;
		outline: none;
	}



/*tile and detailed view*/
.detailed, .tile{
	
}

#wrapper > section > div > div button:hover{
	background: #000;
}

#wrapper > section > div > div button:active{
	background: #444;
}

.tileBar{
	margin: 0 auto;
	width: 5px;
	background: #9e9e9e;
	border-radius: 5px;
	height: 150px;
    margin-top: 15px;
}

.line-height-center{
	line-height: 180px;
}

/*side bars*/
aside{
	width: 16.5%;
    float: left;
}
aside h4{
	font-size: 1.5em;
	text-align: center;
	margin: 0;
	padding: 0;
}

aside div, aside ul{
	list-style: none;
	font-size: 1em;
	padding: 0;
	font-weight: 300;
	margin-left: 15px
}

aside ul ul{
	margin-left: 15px;
	display:none;
}

aside b{
	display:block;
	width: 100%;
	border-bottom: solid 1px #e6e6e6;
}

aside ul b:hover{
	cursor: pointer;
}

.fa-sort-desc{
	float:right;
	transition: transform 0.25s;
}
.more{
	transform: rotate(90deg);
}
.less{
	transform: rotate(0deg);
}

.point-right{
	transform: rotate(-90deg);
}

/* cart */
#cart{
	position: fixed;
	top: 109px;
	right: 0;
	width: 15%;
    float: right;
    background-color: #53657f;
    padding: 20px 0;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}
#cart h4{
	font-size: 24px;
	text-align: center;
	margin: 0;
	padding: 0;
	color: #fff;
}

#cart ul{
	width: 80%;
	margin: 0 auto;
	list-style: none;
	font-size: 19.2px;
	padding: 20px 0;
	font-weight: 300;
}

#cart ul ul{
	margin-left: 15px;
	display:none;
}

#cart ul b{
	display:block;
	width: 100%;
	border-bottom: solid 1px #e6e6e6;
}

#cart ul b:hover{
	cursor: pointer;
}

#cart ul > li{
	/*height: 2em;*/
	border: 1px solid #aaa;
	padding: 5px;
	margin-bottom: 2px;
}
#cart ul > li > span{
	line-height: 1;
	font-weight: initial;
	color: #fff;
}
#cart ul > li > button{
    font-size: 1.2em;
    background: none;
    border: none;
    outline: none;
    color: #ff0000;
    float: right;
    display: inline-block;
    height: 100%;
    vertical-align: top;
    line-height: 0;
}
#cart ul > li > button:hover{
	color: #000;
}
#cart > button{
    margin: 0 auto;
    display: block;
    width: 80%;
    font-size: 1.5em;
    background: #228481;
    border: 1px solid #fff;
    outline: none;
}

#cart > button:hover{
	border-color:  #228481;
}
#cart > button:active{
	border-color:  #000;
}
/*preview*/
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100vw; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
	height: 100vh;
    /*transform: translateY(100%);*/
    background-color: #fefefe;
    margin: 0 auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 100%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/*Modal Canvas*/
.modal canvas {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
}

#previewText{
	width: 300px;
	height: 100px;
	text-align: center;
	color: rgba(0,0,0,.5);
	font-size: 1.9em;
}

#previewText h3{
	font-size: 1.5em;
	text-align: center;
	color: rgba(0,0,0,.5);
	font-weight: bold;
	margin: 0;
	padding: 0;
}

#previewText p{
	margin: 0;
}

#preview{
	height: 100%;
	overflow: hidden;
}

#preview div:first-child{
	height: 100%;
	width: 50%;
	float: left;
	display: inline-block;
	
}

#preview div:first-child img{
	height: 100%;
}

#preview div:last-child{
	width: 50%;
	float: right;
	display: inline-block;
}
#wrapper > section > div > div > span:hover .compare-button, .compare-button:hover{
	display: block;
}
.compare-button{
    margin: 0px 0px 0 0;
    float: right;
}

#cart a{
	color: #E22919; 
}

#filterList input{
	width: 12px;
	float: left;
	margin-top: 5px;
}
#filterList label{
	max-width: 90%;
	margin-left: 1%;
}

.loading{
    width: 87.5%;
    text-align: center;
    font-size: 2.5em;
}

/*breakpoints*/
@media (max-width: 1770){
	#pointUL{
		height: 475px;
	}
	
	.tile div:first-child span:first-child {
    	font-size: 5em;
	}
}




@media (max-width: 1677px){
	#sidebar2 button{
		width: 100%;
	}
	
	.tile {
		width: 41.9%;
	}
}

@media (max-width: 1470px){
	#cart {
		width: 273px;
		z-index: 9999;
	}
	
	
	
	#info > div:nth-child(1){
   		float: left;
	}
	#info > div:nth-child(2){
	    float: left;
	}
	#info > div:nth-child(3){
		float: left;
		clear: left;
	    margin-top: 10px;
	}
	#info{
		display:block;
		overflow: hidden;
		width: 380px;
	}
	
	#infoSection > div:last-of-type{
		width: 50%;
		left: 25%;
	}
}

@media (max-width: 1220px){
	.tile {
		width: 100%;
	}
	#infoSection > div:last-of-type{
		width: 90%;
		left: 5%;
	}
	
	#wrapper{
		width: 80%;
		margin: 0;
	}
	
	aside, h1 {
		width: 100%;
		float: none;
	}
	
	h1{
		margin: 0;
	}
	
	section{
		width: 100%;
	}
	
	.detailed{
		width: 100%;
	}
}

@media (max-width: 1030px){
	h1{
		text-align: left;
	}
	#infoSection{
		width: 100%;
		margin: 0 0 30px 0;
	}
}