@charset "utf-8";
/* CSS Document */
/* The hero image */
body, html {
	background-color:whitesmoke;
	max-width: 1920px;
	margin-left: auto;
	margin-right: auto;
	font-size: 14px;
    line-height: 1.3em;
    text-transform: none;
	font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	line-height: 24px;
	font-weight: 300;
	letter-spacing: 0px;
	
	}
html{
	overflow-x:hidden;
}
h1{
	font-size:36px;
}
h2{
	font-size:30px;
}
h3{
	font-size:24px
}
h4{
	font-size:20px;
}
h5{
	font-size:18px;
}
h6{
	font-size:16px;
}
main-content{
	background-color: whitesmoke;
	max-width:1920px;
	padding-left:50px;
	padding-right:50px;	
	
}

.hero-box {
  /* Position and center the image to scale nicely on all screens */
	overflow-x:hidden;
	height: 500px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
	text-align: center;
 
}
.intro {
	padding-top: 60px;
	background-color: #f5f5f5;
    box-shadow: 0 8px 6px -6px gray;
}

    

.hero-box h1{
	color:#333333; /*gray */
	font-weight: lighter;
	letter-spacing: 1px;
	font-size: 15px;
}

.hero-box  span{
	color:#333333; /* gray */
	font-size: 15px;
	
}

a.button {
    
    text-decoration: none;
 	display: inline-block;
    font-size: 18px;
	padding: 10px 14px;
	font-weight: lighter;
	margin-top: 400px;
	background-color:tomato;
	color:#FFFFFF;
	box-shadow: 0 8px 6px -6px black;

}
@media (max-width:939px) {
	a.button {
	appearance: button;
    
     
    text-decoration: none;
 	display: inline-block;
    font-size: 18px;
	padding: 10px 14px;
	font-weight: lighter;
	margin-top: 100px;
	background-color:tomato;
	color:#FFFFFF;
	box-shadow: 0 8px 6px -6px black;
	}
		.hero-box  h1{
	   
		text-align:center;
		padding-left: 0px;
		font-size:20px;
	}
}
/* start of medium tablet styles */
@media only screen and (min-width:768px){
	
	.main-content{
	width: 100%;
    clear: both;
	
	}

	.hero-box h1{ 
	letter-spacing:2px;
	text-align:center;
	padding-left: 0px;
	font-size:15px;
		
	}
		.hero-box span{ 
	letter-spacing:2px;
	text-align:center;
	color:darkgray;
		
	}
	.intro{
		padding-top:70px;
	}
		a.button {
	font-size: 15px;
	padding: 5px 10px;
	font-weight: lighter;
	margin-top: 50px;
	background-color:#FFF;
	color: tomato;
	box-shadow: 0 8px 6px -6px black;
	}

}

/* start of phone styles */
@media (max-width:400px){
	
	
	.hero-box {
		clear: both;
		
	}
		
		.hero-box  h1{
	   		text-align:center;
				font-size:15px;
	}		
	.hero-box span{
		text-align:center;
		padding-left: 0px;
		font-size:15px;	
	}	
	.intro{
		padding-top:70px;
	}
	a.button {
	font-size: 15px;
	padding: 5px 10px;
	font-weight: lighter;
	margin-top: 50px;
	background-color:#FFF;
	color: tomato;
	box-shadow: 0 8px 6px -6px black;
	}
		
}
@media only screen and (max-width: 667px)and (orientation : landscape) {
	.hero-box {
	clear: both;
		
	}
	.hero-box h1{
		text-align:center;
		padding-left: 0px;
		font-size:13px;	
	}	
	.hero-box span{
		text-align:center;
		padding-left: 0px;
		font-size:11px;	
	}	
	.intro{
		padding-top:80px;
	}
	a.button {
	font-size: 13px;
	padding: 5px 10px;
	font-weight: lighter;
	margin-top: 50px;
	background-color:#FFF;
	color: red;
	box-shadow: 0 8px 6px -6px black;
	}
	
}