/* Scss Document */

@import 'reset';
@import 'variables';
@import 'header';
@import 'footer';
@import 'location';
@import 'contact';
@import 'cut-sheets';

body {
	font-family: $font2;
	position: relative;
	overflow-x: hidden;
	background: $lightblue - 40;
	}
a {
	text-decoration: none;
	color: inherit;
	&:hover {
		color: inherit;
		}
	}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 35px;
	}
		
#hero {
	background-image: url("../graphics/row.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: rgba(0,0,0,.6);
	background-blend-mode: multiply;
	&.sell-hero {
		background-image: url("../graphics/contract.jpg");
	}
	&.locate-hero {
		background-image: url("../graphics/lot.JPG");
	}
	&.contact-hero {
		background-image: url("../graphics/contact.jpg");
	}
	#top-call {
		padding: 1rem 0 10rem;
		color: #fff;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			    -ms-flex-direction: column;
			        flex-direction: column;
		.top-call-content {
		h1 {
			margin: 15px;
			font-size: 44px;
			font-weight: 700;
			}
		p {
			line-height: 1.3;
			max-width: 44ch;
			font-size: 18px;
			margin: 15px;
			}
		#srchBtn {
			max-width: 140px;
			padding: 15px 30px;
			text-align: center;
			background: $yellow;
			color: $lightblue - 60;
			margin: 15px;
			font-weight: 700;
			display: inline-block;
			&:hover {
				background: $lightblue;
				color: #fff;
				}
			}
		}
	}
	}
#first-call {
	padding: 1rem 0;
	margin: 2rem 0;
	text-align: center;
	border-top: 3px dashed $yellow;
	border-bottom: 3px dashed $yellow;
	h1 {
		margin: 15px;
		font-size: 42px;
		font-weight: 700;
		color: #fff;
		}
	p {
		line-height: 1.4;
		max-width: 88ch;
		margin: 5px auto 15px;
		display: inline-block;
		color: #fff;
		font-size: 22px;
		}
	}

	
main {
	background: #fff;
	padding: 20px;
	.lr-wrap {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: start;
		    -ms-flex-align: start;
		        align-items: flex-start;
		.left-info {
			margin: 1rem;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: center;
			    -ms-flex-pack: center;
			        justify-content: center;
			-webkit-box-align: center;
			    -ms-flex-align: center;
			        align-items: center;
			-webkit-box-flex: 1;
			    -ms-flex: 1;
			        flex: 1;
			h1 {
				font-weight: 700;
				color: $lightblue;
				font-size: 36px;
				max-width: 10ch;
				margin: 10px;
				font-style: italic;
				}
			p {
				line-height: 1.7;
				margin: 10px;
				color: $grey;
				font-size: 17px;
				max-width: 66ch;
				&#map-call {
					font-weight: 700;
					font-size: 3.5vw;
					line-height: 1.2;
					color: $lightblue - 10;
					}
				}
			}
		ul.fader {
			min-height: 350px;
			margin: 1rem;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-flex: 1.5;
			    -ms-flex: 1.5;
			        flex: 1.5;
			z-index: 500;
			position: relative;
			li {
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
				-webkit-box-shadow: 0px 0px 7px rgba(0,0,0,.7);
				        box-shadow: 0px 0px 7px rgba(0,0,0,.7);
				opacity: 0;
				&:nth-of-type(1) {
					background-image: url("../graphics/4.JPG");
					-webkit-animation: fader 15s infinite both;
					        animation: fader 15s infinite both;
					}
				&:nth-of-type(2) {
					background-image: url("../graphics/1.JPG");
					-webkit-animation: fader 15s 5s infinite both;
					        animation: fader 15s 5s infinite both;
					}
				&:nth-of-type(3) {
					background-image: url("../graphics/row.jpg");
					-webkit-animation: fader 15s 10s infinite both;
					        animation: fader 15s 10s infinite both;
					}
				}
			}
			#map-wrap {
				width: 100%;
				iframe {
					width: 100%;
					min-height: 300px;
				}
			}
		}
	}

@-webkit-keyframes fader {
	33% {
		opacity: 1;
		}
	66% {
		opacity: 0;
		}
	}

@keyframes fader {
	33% {
		opacity: 1;
		}
	66% {
		opacity: 0;
		}
	}
	
.service-section {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-pack: distribute;
		    justify-content: space-around;
		-webkit-box-align: start;
		    -ms-flex-align: start;
		        align-items: flex-start;
		        padding: 3rem 0 1rem;
		.service-list {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			    -ms-flex-direction: column;
			        flex-direction: column;
			-webkit-box-pack: center;
			    -ms-flex-pack: center;
			        justify-content: center;
			-webkit-box-align: center;
			    -ms-flex-align: center;
			        align-items: center;
			text-align: center;
			margin: 0 10px;
			-webkit-box-flex: 1;
			    -ms-flex: 1;
			        flex: 1;
			i {
				font-size: 32px;
				height: 70px;
				width: 70px;
				background: $yellow;
				color: $lightblue - 40;
				border-radius: 50%;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
						margin: 5px 0;
				}
			h1 {
				font-size: 28px;
				margin: 5px 0;
				line-height: 1.1;
				color: $yellow;
				font-weight: 700;
				}
			p {
				font-family: $font1;
				max-width: 40ch;
				margin: 5px 0;
				line-height: 1.2;
				color: #fff;
				}
			}
		}
	
	#quote {
	background: #fff;
	color: $lightblue;
	text-align: center;
	padding: 20px;
	font-size: 23px;
	margin: 30px 0 60px;
	span {
		color: $lightblue - 50;
		}
	}
	
@media all and (max-width: 767px) {
	#hero {
		#top-call {
			h1 {
				font-size: 24px;
				}
			p {
				font-size: 17px;
				}
			}
		}
	#first-call {
		h1 {
			font-size: 28px;
			}
		p {
			font-size: 17px;
			}
		}
	main {
		.lr-wrap {
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			    -ms-flex-direction: column;
			        flex-direction: column;
			.left-info {
				width: 100%;
				margin: 10px;
				}
			ul.fader {
				width: 100%;
				margin: 10px;
				}
				#map-wrap {
				width: 100%;
				}
			}
		}
	#quote {
		line-height: 1.5;
		}
	.service-section {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
			.service-list {
				margin: 10px 0;
			}
		}
	}