*{
	box-sizing: border-box;
	margin: 0 ;
	padding: 0;
	}
	body, html {
	height: 100vh;
	width:100%;
	letter-spacing: 1px;
	color: black;
	font-family: 'Lato', sans-serif;
	font-size: 1em;
	line-height: 1.6;
	font-weight: 300;
	}
	img {
	max-width: 100%;
	height: auto;
	}
	a {
		color: white;
	}
	/* GLOBAL END */
	
	/*MOBILE FIRST LOAD */
	.master-grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-template-rows: auto;
	grid-template-areas:
	/* STACKED **/ 
	"header"
"intro"
"call"
"contact"
	;
	}
	/*MOBILE END */
	
	/*LARGER SCREENS LOADING ONLY*/
	@media  only screen and (min-width: 981px){
	.master-grid{
	display: grid;
	grid-gap: 1em;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
	grid-template-areas:
	" header           header           header        header             "
"  intro               intro                 intro                 intro            "
"   .                    contact             call                 .        "
	;
	}
	}
	.nav-logo {
		max-width: 100px;
		background-color: white;
		padding: 2px;
		}

.intro{
	grid-area: intro;
	text-align: center;
	background:  linear-gradient(rgba(22, 22, 22, 0.6) 100%, rgba(22, 22, 22, 0.6)  100%, rgba(22, 22, 22, 0.6)  100%),  url("../images/phone.jpg");
	background-size: cover; background-repeat: no-repeat; background-position: center center; background-attachment: fixed;
min-height: 350px;
}
.intro h2 {
	font-size: 3vw;
	font-weight: 400;
	margin-top: 100px;
	color: white;
}
.contact {
	grid-area: contact;
	min-height: 500px;
padding: 20px;
justify-self: center;
}
.contact h3 {
	font-size: 1.5em;
}
.call {
grid-area: call;
padding: 20px;
color: black;
justify-self: center;
}
.call h3 {
	font-size: 1.5em;
}
.call h5 {
	font-size: 1.2em;
	font-weight: 300;
}
/* FORM*/
input[type=text], select {
	width: 100%;
	padding: 12px 20px;
	margin: 8px 0;
	display: inline-block;
	border-style: solid ;
	border-color: black;
	box-sizing: border-box;

	font-family: "Lato";
	font-size: 0.9em;
	background-color: transparent;
	}
	input[type=email], select {
	width: 100%;
	padding: 12px 20px;
	margin: 8px 0;
	display: inline-block;
	border-style: solid ;
	border-color: black;
	box-sizing: border-box;
	font-family: "Lato";
	font-size: 0.9em;
	background-color: transparent;
	}
	input[type=submit] {
	text-decoration: none;
	cursor: pointer;
	}
	input[type=checkbox]{
	margin-left: 30px;
	margin-top: 20px;
	cursor: pointer;
	}
	textarea {
	width: 100%;
	height: 150px;
	padding: 12px 20px;
	box-sizing: border-box;
	border-bottom-style: solid ;
	border-style: solid ;
	border-color: black;
	resize: none;
	color: black;
	font-size: 0.9em;
	background-color: white;
	}
	.myform label {
	font-size: 0.9em;
	color: black;
	}
	.myform ::placeholder {
color: black;
	}
	
	.no-outline:focus {
	outline: none;
	}    
	/* FORM END */


	

	/* SMALLER BUTTON */
	.btn-s {
			background-color: transparent;
	color:  rgb(83, 85, 83);
	display: flex;
	align-items: center;
	justify-content: center;
	border: rgb(60, 61, 60) solid 0.2rem;
	text-decoration: none;
	font-size: 0.8em;
	font-weight: bold;
	text-transform: uppercase;
	width: 15em;
	padding: 10px 30px;
	}
	.btn-s:hover {
	background-color: transparent ;
	border: rgb(60, 61, 60) solid 0.2rem;
	text-decoration: none;
	}
	
	.logo {
		padding: 10px;
		}
		/* NAVIGATION */
		header {
		grid-area: header;
		}
		.page-header {
		user-select: none;
		-moz-user-select: none;
		-webkit-user-select: none;
		background: #333333;
		position: fixed;
		top: 0;
		height: 80px;
		color: #fff;
		width: 100%;
		line-height: 40px;
		}
		.page-header__top {
		display: flex;
		justify-content: space-between;
		padding: 10px 10px;
		}
		.page-header__toggle {
		font-size: 2em;
		
		}
		
		.navigation {
		opacity: 0.5;
		height: 0;
		overflow: hidden;
		transition: 0.7s;
		background: #333333;
		
		}
		.navigation a {
			color: white;
		}
		.navigation a:hover {
			color: white;
		}
		.navigation__item {
		padding: 10px 10px;
		}
		.navigation--visible {
		opacity: 1;
		height: 200px;
		}
		
		@media (min-width: 480px) {
		.page-header {
		display: flex;
		}
		.page-header__top {
		margin-right: auto;
		}
		.page-header__top, .page-header__bottom {
		display: block;
		}
		.page-header__toggle {
		display: none;
		}
		
		.navigation {
		display: block;
		opacity: 1;
		height: auto;
		}
		.navigation__item {
		opacity: 0.8;
		display: inline-block;
		}
		.navigation__item:hover {
		cursor: pointer;
		opacity: 1;
		}
		}
		/* END */