/*-------------------------------------------------LOCATION---------------------------------------------------------*/

.location{
	grid-column: 1/4;
	background-color: white;
}

.locationTitle{
	margin-top:20px;
	text-align: center;
	font-size:4vmax;
	font-weight: bold;
	color:#0682CD;
}

.locationUnderline{
	margin-top: 5px;
	background-color:#0682CD;
	height:3px;
	width:70%;
	margin-left:15%;
}

.locationText {
	color:#10679C;
	font-size: 22px;
	width:70%;
	margin-bottom: 10px;
}

@media screen and (max-width:960px){
	.locationText{font-size: 18px}
	.locationUnderline{width:90%; margin-left: 5%}
}

/*-------------------------------------------------Location Page only Sale class ---------------------------------------------------------*/

.saleClass{
	grid-column: 1/4;
	background-color: white;
}

.locationSale{
	width: 90%;
	margin-left:4%;
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 3vmax;
	font-weight: normal;
	text-align:center;
	border:5px solid #0682CD;
	padding: 5px;
	background-color: #0CB3FB;
	border-radius: 15px;
	grid-column:1/4
	}

	@media screen and (max-width:500px){
		.locationSale{width:90%}
	}

/*-------------------------------------------------IMAGE---------------------------------------------------------*/
.image{
	grid-column:1/4;
	padding:10px 0px 20px 0px;
	}

	.mySlides {display:none}

	/* Slideshow container */
	.slideshow-container {
	  max-width: 1200px;
	  position: relative;
	  margin: auto;
	}

	#slide{
		max-height:330px;
		border-radius:10px;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
	}

	/* Caption text */
	.text {
	  color: #f2f2f2;
	  font-size: 15px;
	  padding: 8px 12px;
	  position: absolute;
	  bottom: 8px;
	  width: 100%;
	  text-align: center;
	}


	/* The dots/bullets/indicators */
	.dot {
	  height: 15px;
	  width: 15px;
	  margin: 0 2px;
	  background-color: #bbb;
	  border-radius: 50%;
	  display: inline-block;
	  transition: background-color 0.6s ease;
	}

	.active {
	  background-color: #717171;
	}

	/* Fading animation */
	.fade {
	  -webkit-animation-name: fade;
	  -webkit-animation-duration: 1.5s;
	  animation-name: fade;
	  animation-duration: 1.5s;
	}

	@-webkit-keyframes fade {
	  from {opacity: .4}
	  to {opacity: 1}
	}

	@keyframes fade {
	  from {opacity: .4}
	  to {opacity: 1}
	}




	.dot-nav{
	    position: absolute;
	    bottom: 10px;
	    margin-left: 10px;
	}

	@media only screen and (max-width: 1240px){
		.slideshow-container{width: 90%; }
	}

	@media only screen and (max-width: 500px) {
	  .text {font-size: 11px}
		.dot{height: 10px; width: 10px}

	}
/*-------------------------------------------------QUALITY and INFO---------------------------------------------------------*/

.details{
	grid-column:1/4;
	margin-bottom: 50px;
}

#quality{
	margin-top: 20px;
	font-size: 80px;
	font-weight:bold;
	text-align: center;
	width:100%
}
.purfect {
	font-size: 40px;
	font-weight: bold;
	margin-top:30px;
	width:100%
}


.hereAt {
	font-size: 20px;
	width:70%;
	margin-left:15%;
	margin-top:40px;
	margin-bottom:40px;
}
	@media screen and (max-width:1400px){
		.hereAt{font-size:1.8vmax}
		.purfect{font-size:2.5vmax}
		#quality{font-size:4.5vmax}
	}



	@media screen and (max-width:700px){
		.purfect{
			margin-top:15px;
			font-size:20px;
			margin-bottom: 30px;
			margin-top: 30px
		}
		.hereAt{
			margin-top: 20px;
			font-size:18px;
			width: 90%;
		margin-left: 5%;
	margin-bottom: 0px}
	}

	/*-------------------------------------------------AWARD---------------------------------------------------------*/



.awardPic{
	grid-column: 1/3;
	margin-bottom: 100px;
}
#awardPic{
	width:50%;
	margin-left: 20%
}
.awardHeading{
	grid-column: 3/4;
	text-align: center;
	width:95%;
	margin-left: -30%;
	margin-top: 5%;
	margin-bottom: 100px;
	font-size: 2.8vmax;
	font-weight:bold;
	color: #0682CD
}

@media screen and (max-width:1000px){
	.awardPic{grid-column: 1/4; margin-bottom: 0px; margin-top: 0px}
	#awardPic{
		width:70%;
		margin-left: 15%;
	}
	.awardHeading{
		grid-column: 1/4;
		margin-left: 0;
		margin-top: 0;
		margin-top: 30px;
		margin-bottom: 50px;
		width: 100%;
		font-size: 3.8vmax;
	}
}

@media screen and (max-width:600px){
#awardPic{
		width:90%;
		margin-left: 5%;
	}
	.awardHeading{
		font-size: 4vmax;
	}
}



/*-------------------------------------------------BLOG---------------------------------------------------------*/

.blog{
	width:65%;
	background-color:none;
	grid-column:1/2;
	overflow:auto;
	height:1100px;
	border:none;
	background-color:none;
	padding-left:15px;
	padding-right:20px;
	box-shadow: 1px 5px 3px rgba(0,0,0,.3);
}
.blog:hover{
	box-shadow: 3px 5px 3px #CFE3F8
}

.reviewHead{
	font-size: 40px;
	font-weight: bold;
	color: #0682CD;
	background-color: none;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;

}

.reviewLink{
	font-size: 17px;
	color: #0682CD;
	text-align: center;
	margin-bottom: 5px
}

.reviewTitle{
	font-size: 20px;
	color: #2C6BF2;
	margin-bottom: 10px
}

.reviewInfo{
	font-size: 17px;
	color: #666565;
	margin-bottom: 5px
}
.reviewDate{
	font-size: 17px;
	color: #666565;
	margin-bottom: 15px
}

.line{
	background-color: #B5B5B5;
	width:100%;
	height:1px;
	margin-bottom: 15px
}



		@media screen and (max-width:1400px){
			.blog{height:1200px}
		}

		@media screen and (max-width:1350px){
			.blog{height:1000px}
		}
			@media screen and (max-width:1130px){
				.reviewHead{font-size: 35px}
				.reviewLink, .reviewInfo, .reviewDate{font-size: 15px}
				.reviewTitle{font-size: 17px}
		}

		@media screen and (max-width:1000px){
			.blog{display:none}
			.reviewLink, .reviewInfo, .reviewDate{font-size: 13px}
			.reviewTitle{font-size: 15px}
		}

		@media screen and (max-width:750px){
			.blog{height:600px}
		}

		@media screen and (max-width:700px){
			.blog{display:none}
		}

/*-------------------------------------------------REVIEW VAN PROOFING---------------------------------------------------------*/

.content{
	background-color:none;
	grid-column:2/4;
	margin-bottom:40px;
	width:110%;
	margin-left:-10%
}


.gallery {
	width: 95%;
	margin: 0 auto;
	margin-left:5%;
	padding: ;
	background: white;

}

.gallery > div {

 display:inline;
  padding: 1%;
}

.gallery > div > img {
transition: .1s transform;
  transform: translateZ(0); /* hack */
}


#slide{
	text-align:center;
	width:30%;
	box-shadow: 1px 5px 3px rgba(0,0,0,.3);
	border-radius:10px
}




.ReviewContaniner {
  position: relative;
  width: 50%;
}

.CheckImage {
  display: block;
  width: 50%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  background-color: #0682CD;
  overflow: hidden;
  width: 80%;
  height: 100%;  /* hello world appears withough hovering  change to 0 for hidden*/
  margin:auto;
  transition: .5s ease;
  opacity:0.9;
  border-radius:10px 10px 0px 0px
}

.Checkoverlay {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  background-color: #0682CD;
  overflow: hidden;
  width: 80%;
  height: 0;  /* hello world appears withough hovering  change to 0 for hidden*/
  margin:auto;
  transition: .5s ease;
  opacity:0.9;
  border-radius:10px 10px 0px 0px
}

.ReviewContaniner:hover .overlay, .ReviewContaniner:hover .Checkoverlay  {
  height: 600%;
}

.text {
  color: white;
  font-size: 25px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

		@media screen and (max-width:1150px){
			.text{font-size:20px}
		}
		@media screen and (max-width:900px){
			.text{font-size:17px}
		}
		@media screen and (max-width:1000px){
			.content{grid-column:1/4}
			.text {font-size:25px}
			.ReviewContaniner:hover .overlay, .ReviewContaniner:hover .Checkoverlay{ height:500%}
		}
		@media screen and (max-width:750px){
			.text {font-size:18px}
		}
		@media screen and (max-width:450px){
			.text {font-size:10px}
			.ReviewContaniner:hover .overlay, .ReviewContaniner:hover .Checkoverlay{ height:400%}
		}

/*-------------------------------------------------COMMON---------------------------------------------------------*/

.commonHeader{
	margin-top:40px;
	text-align:left;
	font-size:3vmax;
	color:#0682CD;
	padding-left:10%;
	font-weight: normal;
}
.headerunderline{
	background-color:#0682CD;
	height:2px;
	width:90%;
	margin-left:5%

}

.galleryCommon {
	width: 97%;
	margin: 0 auto;
	margin-left:10px;
	padding: ;
	background: white;

}

.galleryCommon > div {

 display:inline;
  padding: 1%;
}

.galleryCommon > div > img {
transition: .1s transform;
  transform: translateZ(0); /* hack */
}


#slide2{
	text-align:center;
	width:30%;
	height:auto;
	box-shadow: 1px 5px 3px rgba(0,0,0,.3);
	border-radius:15px;
}
#slide2:hover{
	opacity: 0.4;


}



/*-------------------------------------------------OPERATE--------------------------------------------------------*/

.operateHeader{
	margin-top:40px;
	text-align:right;
	font-size:3vmax;
	color:#0682CD;
	padding-right:10%;
	font-weight: normal;
}
#workMap{
	float:right;
	width:40%;
	margin-right:3%
}
.opperateInfo{
	float:left;
	width:90%;
	font-size:19px;
	margin-top: 20px;
	margin-left:5%;
	line-height: 1.3;

}

		@media screen and (max-width:1000px){
			.content{grid-column:1/4;width:100%; margin-left:0%}
		}

		@media screen and (max-width:500px){
			#workMap{display:none}
			.opperateInfo{width:90%; margin-left:5%; font-size:18px}
			.operateHeader, .commonHeader{font-size: 35px}

		}