.wrapper{
	position: absolute;
	top: 0;
	left: 0;
	max-width:1200px;
	margin:0 auto;
	padding:0px;
	min-width:320px;}
@media(max-width: 767px) {
	.wrapper{
		max-width:767px;
	}
}
@media(max-width: 500px) {
	.wrapper{
		max-width:500px;
	}
}
@media(max-width: 320px) {
	.wrapper{
		max-width:320px;
	}
}
.header{
	width:100%;
	display:block;
	min-height:214px;
	padding-top:0px;
	background:url(../images/topbg.jpg) top center no-repeat;
	box-shadow: 0 0 20px rgba(0,0,0,.3);
	}
.logo{
	padding:49px 0px;
	margin:0 auto;
	text-align:center;
	}
	
.show-grid{background-color:#fff; }


@-webkit-keyframes rotating  {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

/*Color Demo*/

.moreoption{ width:100%; display:block;  margin-top:250px;}
.moreoption .boxheader{ border:solid 0px; padding-top:25px; padding-bottom:10px; font-size:17px; }



.buttoncolor{
	color: #fff;
    display: block;
    font-size:13px;
    padding:10px 15px;
    text-decoration: none;
    transition: background 0.3s linear 0s;
    width:12.5%;
	height:30px;
	float:left;
	text-align:center;
	margin:0px 0px;
}
.buttoncolor:hover{ color:#fff; text-decoration:none;}
.buttoncolor:focus{ color:#fff; text-decoration:none;}

.headertlt{ width:100%; padding:40px 0px 15px 0px; letter-spacing:-0.5px; font-size:22px; font-family: 'archivo_narrowregular'; color:#424242;}

.colorlink01{width:40%; float:left; margin:0% 0% 0% 2%; }
.colorlink02{width:40%; float:left; margin:0% 0% 0% 2%; }
.colorlink03{width:14%; float:left; margin:0% 0% 0% 2%; }

.buttoncolor02{
	color: #424242;
    display: block;
    font-size:15px;
	border-radius:2px;
	height:30px;
    padding:10px 15px;
    text-decoration: none;
    transition: background 0.3s linear 0s;
    width:100%;
	border-right:solid 5px #fff;
	float:left;
	text-align:center;
	margin:0% 0% 0% 0%;
	background-color:#f2f2f2;
	border:solid 1px #D9D9D9;
	cursor:pointer;
	text-align:center !important; 
	text-decoration:none !important;
	width:50%; float:left;
}
.buttoncolor02:hover{background-color:#424242; color:#000;}
.buttoncolor02.active{background-color:#424242; color:#fff;}

.main-content {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
} 

@media only screen and (min-width: 230px) and (max-width:780px){
.wrapper { width:100%; margin:0% 0%; }
.header{min-height:75px;}
.logo { display:none !important; }
.header{ box-shadow:none !important; background-image:none !important; }
.colorlink01{ width:92% !important; margin:0% 4%;}
.colorlink02{ width:92% !important; margin:0% 4%;}
.colorlink03{ width:92% !important;  margin:0% 4%;}
.buttoncolor02{ width:100% !important; margin-bottom:2%; }
.buttoncolor{ width:25%; }
.moreoption{ width:100%; margin:85px 0 0 0; background-color:transparent !important; border:none !important;
-webkit-box-shadow:none !important;
-moz-box-shadow:none !important;
box-shadow:none !important;
}

}

@media only screen and (min-width: 781px) and (max-width:1064px) {
.wrapper { width:96%; margin:0% 2%; }
.colorlink01{ width:100% !important; margin:0%;}
.colorlink02{ width:100% !important; margin:0%;}
.colorlink03{ width:100% !important; margin:0%;}
.buttoncolor02{ width:50% !important; margin-bottom:1%; }
.logo{ float:none !important; margin:0 auto !important; width:100% !important; text-align:center; }
}


@media only screen and (min-width: 1024px) and (max-width:1200px) {
.wrapper { width:96%; margin:0% 2%; }
.colorlink01{ width:100% !important; margin:0%; }
.colorlink02{ width:100% !important; margin:0%;}
.colorlink03{ width:100% !important; margin:0%;}

}