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

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

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

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

	.dropdown-content {
		display: none;
		position: absolute;
		background-color: floralwhite;
		width: 170px;
		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;
	}

	.logo img {
		width: 600px;
		margin-left: 20%;
	}

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


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

	.services h1 {
		color: #1D3664;
		font-family: Judson, sans-serif;
		font-size: 45px;
		text-align: center;
		margin-bottom: 3rem;
		margin-top: -200px;
	}

	.top h1 {
		width: 50%;
		color: #1D3664;
		font-family: Judson, sans-serif;
		font-size: 45px;
		margin-bottom: 3rem;
		margin-top: 6rem;
		margin-left: 5%;
	}

	.top p {
		font-family: Asap Condensed, sans-serif;
		font-size: 23px;	
		color: #03122E;
		line-height: 1.8rem;
		width: 50%;
		word-spacing: 3px;
		margin-left: 5%;
	}

	hr {
		display: none;
	}

	.form {
		box-shadow: 0 0 10px 5px #d6d6d6;
		border-radius: 5px;
		margin: 0 2.4rem 5rem 2.4rem;
		padding: 2rem;
		position: relative;
		width: 30%;
		left: 60%;
		bottom: 230px;
	}

	.form h3 {
		font-family: Judson, sans-serif;
		text-align: center;
		font-size: 22px;
		color: #1D3664;
	}

	.form p {
		font-family: Asap Condensed, sans-serif;
		background-color: #d4d4d4;
		margin-bottom: 2rem;
		margin-top: 2rem;
		padding-bottom: 1rem;
		padding-top: 1rem;
		border-radius: 5px;
		padding-left: 8px;
		color: #a1a1a1;
	}

	button {
		background-color: #334C7B;
		border: none;
		border-radius: 8px;
		color: #A0AFCA;
		padding: 1rem;
		font-family: Asap Condensed, sans-serif;
		font-size: 18px;
		font-weight: 600;
		letter-spacing: 2px;
		transition-duration: 0.4s;
		margin-left: 80px;
		cursor: pointer;
	}

	button:hover {
		background-color: #566D98;
		color: #03122E;
		box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
	}

	.services button {
		margin-left: 145px;
	}

	.services p {
		font-family: Asap Condensed, sans-serif;
		font-size: 23px;
		text-align: center;	
		color: #03122E;
		line-height: 1.8rem;
		margin-left: 10rem;
		margin-right: 10rem;
		word-spacing: 3px;
	}

	.list {
		display: flex;
		flex-wrap: wrap;
		margin-top: 4.5rem;
		margin-left: 8rem;
	}

	.list img {
		width: 400px;
	}

	.list figcaption {
		position: relative;
		bottom: 250px;
		margin-left: 25px;
		color: whitesmoke;
		text-shadow: 5px 5px 10px black;
		font-family: Asap Condensed, sans-serif;
		font-weight: 600;
		word-spacing: 3px;
		letter-spacing: 2px;
		font-size: 22px;
	}

	.learn a {
		background-color: #334C7B;
		border: none;
		border-radius: 8px;
		color: #A0AFCA;
		padding: 1rem;
		font-family: Asap Condensed, sans-serif;
		font-size: 18px;
		font-weight: 600;
		letter-spacing: 2px;
		transition-duration: 0.4s;
	}

	.learn:hover {
		background-color: #566D98;
		color: #03122E;
		box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);;
	}

	button.learn {
		margin-left: 43%;
	}

	button.learn:hover {
		background-color: #566D98;
		color: #03122E;
		box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
	}

	.links h3 {
		font-family: Judson, sans-serif;
		text-align: center;
		font-size: 30px;
		color: #1D3664;
		margin-top: 3rem;
		margin-bottom: 3rem;
	}

	.links p {
		font-family: Asap Condensed, sans-serif;
		margin-left: 15%;
		margin-right: 2rem;
		margin-bottom: 1rem;
		font-size: 20px;
	}

	.links p:last-child {
		margin-bottom: 5rem;
	}

	.links a {
		font-family: Judson, sans-serif;
		margin-left: 2rem;
		margin-right: 2rem;
		font-size: 23px;
		margin-left: 10%;
	}

	.divider {
		display: block;
		width: 40%;
		margin-top: 4rem;
		margin-bottom: 4rem;
		border: 1px solid #A0AFCA;
		border-radius: 5px;

	}

	footer img {
		width: 80px;
		margin-left: 70%;
		position: absolute;
		top: 238rem;
	}

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

	footer h4 {
		font-weight: 600;
	}

}










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

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

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

	.dropdown-content {
		display: none;
		position: absolute;
		width: 120px;
		overflow: auto;
		line-height: 1.5rem;
		background-color: whitesmoke;
		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;
	}

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

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

	.logo img {
		width: 400px;
	}

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

	.top h1, .services h1 {
		color: #1D3664;
		font-family: Judson, sans-serif;
		font-size: 32px;
		text-align: center;
		margin-bottom: 3rem;
		margin-top: 3rem;
	}

	.top p {
		font-family: Asap Condensed, sans-serif;
		font-size: 19px;
		text-align: center;	
		color: #03122E;
		line-height: 1.5rem;
		margin-left: 2.5rem;
		margin-right: 2.5rem;
		word-spacing: 3px;

	}

	hr {
		width: 50%;
		margin-top: 4rem;
		border: 1px solid #A0AFCA;
		border-radius: 5px;
	}

	.divider {
		margin-bottom: 5rem;
		,margin-top: -10rem;
	}

	.form {
		box-shadow: 0 0 10px 5px #d6d6d6;
		border-radius: 5px;
		margin: 5rem 2.4rem 5rem 2.4rem;
		padding: 2rem;
	}

	.form h3{
		font-family: Judson, sans-serif;
		text-align: center;
		font-size: 22px;
		color: #1D3664;
	}

	.form p {
		font-family: Asap Condensed, sans-serif;
		background-color: #d4d4d4;
		margin-bottom: 2rem;
		margin-top: 2rem;
		padding-bottom: 1rem;
		padding-top: 1rem;
		border-radius: 5px;
		padding-left: 8px;
		color: #a1a1a1;
	}

	button {
		background-color: #334C7B;
		border: none;
		border-radius: 8px;
		color: #A0AFCA;
		padding: 1rem;
		font-family: Asap Condensed, sans-serif;
		font-size: 18px;
		font-weight: 600;
		letter-spacing: 2px;
		transition-duration: 0.4s;
		margin-left: 100px;
	}

	button:hover {
		background-color: #566D98;
		color: #03122E;
		box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);;
	}

	.services button {
		margin-left: 145px;
	}

	.services p {
		font-family: Asap Condensed, sans-serif;
		font-size: 19px;
		text-align: center;	
		color: #03122E;
		line-height: 1.5rem;
		margin-left: 2.5rem;
		margin-right: 2.5rem;
		word-spacing: 3px;
	}

	.list {
		margin-top: 5rem;
	}

	.list img {
		width: 100vw;

	}

	.list figure figcaption {
		position: relative;
		bottom: 250px;
		margin-left: 25px;
		color: whitesmoke;
		text-shadow: 5px 5px 10px black;
		font-family: Asap Condensed, sans-serif;
		font-weight: 600;
		word-spacing: 3px;
		letter-spacing: 2px;
		font-size: 22px;
	}

	.links h3 {
		font-family: Judson, sans-serif;
		text-align: center;
		font-size: 22px;
		color: #1D3664;
		margin-top: 3rem;
		margin-bottom: 3rem;
	}

	.links p {
		font-family: Asap Condensed, sans-serif;
		margin-left: 2rem;
		margin-right: 2rem;
		margin-bottom: 1rem;
	}

	.links p:last-child {
		margin-bottom: 5rem;
	}

	.links a {
		font-family: Judson, sans-serif;
		margin-left: 2rem;
		margin-right: 2rem;
		font-size: 18px;
	}

	.box1 {
		margin-top: 8rem;
	}

	footer img {
		width: 80px;
		margin-left: 180px;
		position: absolute;
		top: 326rem;
	}

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

	footer h4 {
		font-weight: 600;
	}

}

















