
/********** DESKTOP SCREEN *********/

@media only screen and (min-width: 800px) {

	header {
		background-image: url("../images/surf.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		height: 100vh;
		width: auto;
	}

	header p {
		text-align: center;	
		color: #03122E;
		font-family: Asap Condensed, sans-serif;
		font-size: 22px;
		margin-top: 5rem;
	}

	.logo img {
		width: 300px;
		margin-left: 38%;
		margin-top: 20px;
	}

	nav ul {
		display: flex;
		font-family: Asap Condensed, sans-serif;
		font-size: 22px;
		justify-content: space-around;
	}

	main h1 {
		display: none;
	}

	.msg h1 {
		color: #1D3664;
		font-family: Judson, sans-serif;
		font-size: 35px;
		text-align: center;
		margin-top: 10rem;
		text-shadow: 2px 2px 5px whitesmoke;
	}

	header p {
		font-family: Asap Condensed, sans-serif;
		font-size: 18px;	
		color: whitesmoke;
		word-spacing: 3px;
		text-align: center;
		text-transform: uppercase;
		margin-top: 2rem;
	}

	.dropdown {
		display: inline-block;
		position: relative;
	}

	.dropdown-content {
		display: none;
		position: absolute;
		width: 170px;
		background-color: floralwhite;
		overflow: auto;
		box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.4);
	}

	.dropdown:hover .dropdown-content {
		display: block;
	}

	.dropdown-content a {
		display: block;
		color: #000;
		padding: 5px;
		text-decoration: none;
		cursor: pointer;
	}

	.dropdown-content a:hover {
		color: #FFF;
		background-color: #00A4BD;
	}

	a {
		text-decoration: none;
		cursor: pointer;
	}

	a:link {
		color: #0C3249;
	}

	a:visited {
		color: #447A99;
	}

	a:hover {
		color: #5A9CC4;
	}

	a:active {
		color: #9CC6DF;
	}

	.list figure img {
		width: 500px;
		margin-bottom: 3rem;
	}

	.list p, .services p, .box2 li, .box3 li {
		font-family: Asap Condensed, sans-serif;
		font-size: 20px;
		line-height: 1.5rem;
		word-spacing: 3px;
	}

	.list p, .list figcaption {
		margin: 2rem;
	}

	.list figcaption, .services h1 {
		font-family: Judson, sans-serif;
		font-size: 28px;
		color: #1D3664;
	}

	.services .list li {
		list-style-type: circle;
		text-indent: 15px;
		margin-left: 80px;
	}

	p.intro {
		margin: 5rem;
		text-indent: 25px;
	}

	.box1 img, .box3 img, .box5 img {
		float: left;
	}

	.box2 img, .box4 img, .box6 img {
		float: right;
	}

	.box3, .box4, .box5, .box6 {
		margin-top: 10rem;
	}

	.box2 {
		margin-top: 15rem;
	}

	.box1 p, .box1 figcaption, .box3 p, .box3 figcaption, .box5 p, .box5 figcaption{
		margin-left: 35rem;
	}

	.box3 ul {
		margin-left: 30rem;
		margin-right: 3rem;
	}

	.box4 p, .box6 p {
		margin-right: 35rem;
	}

	.box5, .box6 {
		margin-top: 20rem;
	}

	.box6 {
		margin-bottom: 10rem;
	}

	hr {
		border-radius: 5px;
		margin-bottom: 1rem;
		margin-top: 1rem;
        border: 1px solid #A0AFCA;
	}

	footer img {
		width: 75px;
		margin-bottom: 1rem;
	}

	footer {
		display: flex;
		justify-content: space-evenly;
		background-color: #dde3ed;
		padding: 2rem;
		font-family: Asap Condensed, sans-serif;
		line-height: 1.5rem;
	}

	footer h4 {
		font-weight: 600;
	}

	footer img {
		align-self: flex-end;
	}

	.bottom1 {
		flex-grow: 2;
		margin-left: 120px;
	}

	.bottom2 {
		flex-grow: 2;
		margin-left: 80px;
	}

}


















/********* PHONE SCREEN ***********/

@media only screen and (max-width: 799px) {

	.dropdown {
		display: inline-block;
		position: relative;
	}

	.dropdown-content {
		display: none;
		position: absolute;
		width: 170px;
		overflow: auto;
		box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.4);
		line-height: 1.5rem;
		background-color: whitesmoke;
	}

	.dropdown:hover .dropdown-content {
		display: block;
	}

	.dropdown-content a {
		display: block;
		color: #000;
		padding: 5px;
		text-decoration: none;
		cursor: pointer;
	}

	.dropdown-content a:hover {
		color: #FFF;
		background-color: #00A4BD;
	}

	a {
		text-decoration: none;
		cursor: pointer;
	}

	a:link {
		color: #0C3249;
	}

	a:visited {
		color: #447A99;
	}

	a:hover {
		color: #5A9CC4;
	}

	a:active {
		color: #9CC6DF;
	}

	header {
		background-image: url("../images/surf.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		height: 100vh;
		width: auto;
	}

	header p {
		text-align: center;	
		color: #03122E;
		font-family: Asap Condensed, sans-serif;
		font-size: 22px;
		margin-top: 5rem;
	}

	.logo img {
		width: 400px;
	}

	.msg h1 {
		display: none;
	}

	nav ul {
		text-align: center;
		font-family: Asap Condensed, sans-serif;
		font-size: 22px;
		line-height: 3rem;
	}

	.list figure img {
		width: 100vw;
	}

	.list p, .services p, .box2 li, .box3 li {
		font-family: Asap Condensed, sans-serif;
		font-size: 20px;
		line-height: 1.5rem;
		margin: 2.5rem;
		word-spacing: 3px;
	}

	.list figcaption, .services h1 {
		font-family: Judson, sans-serif;
		font-size: 28px;
		color: #1D3664;
		text-align: center;
		margin-top: 2rem;
	}

	.services .list li {
		list-style-type: circle;
		text-indent: 15px;
		margin-left: 80px;
	}

	.bottom1 {
		margin-left: 30px;
	}

	.bottom2 {
		margin-top: 50px;
	}

	.bottom1 h3, .bottom2 h3 {
		font-weight: 600;
	}


	hr {
		border-radius: 5px;
		margin-bottom: 1rem;
		margin-top: 1rem;
        border: 1px solid #A0AFCA;
	}

	footer img {
		align-self: flex-end;
		width: 80px;
		margin-left: 120px;
	}

	footer {
		display: flex;
		flex-wrap: wrap;
		background-color: #dde3ed;
		padding: 2rem;
		font-family: Asap Condensed, sans-serif;
		line-height: 1.5rem;
	}

	footer h4 {
		font-weight: 600;
	}


}























