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

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

	header {
		background-image: url("../images/palm_trees.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;
		overflow: auto;
		box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.4);
		width: 170px;
		background-color: floralwhite;
	}

	.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: 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: 12rem;
	}

	.msg p {
		font-family: Asap Condensed, sans-serif;
		font-size: 18px;	
		color: #03122E;
		word-spacing: 3px;
		text-align: center;
		text-transform: uppercase;
		margin-top: 6rem;
	}

	main p {
		font-family: Asap Condensed, sans-serif;
		font-size: 19px;
		text-align: center;	
		color: #03122E;
		line-height: 1.5rem;
		margin: 8rem 12rem 8rem 12rem;
		word-spacing: 3px;
	}

	.box1 hr, .box2 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;
	}

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

	.box2 {
		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;
		overflow: auto;
		box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.4);
		width: 170px;
        background-color: floralwhite;
	}

	.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/palm_trees.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		height: 100vh;
		width: auto;
	}

	nav ul {
		text-align: center;
		font-family: Asap Condensed, sans-serif;
		font-size: 22px;
		line-height: 3rem;
		margin-top: 3rem;
	}
	
	.logo img {
		width: 400px;
	}

	.msg h1 {
		display: none;
	}

	.msg p {
		font-family: Asap Condensed, sans-serif;
		font-size: 18px;	
		color: #03122E;
		word-spacing: 3px;
		text-align: center;
		text-transform: uppercase;
		margin-top: 5rem;
	}

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

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

	.contact p {
		font-family: Asap Condensed, sans-serif;
		font-size: 16px;
		color: #03122E;
		line-height: 1.5rem;
		word-spacing: 3px;
	}

	.box1 {
		margin-left: 25px;
	}

	.box2 {
		margin-top: 25px;
	}

	.box1 h3, .box2 h3 {
		font-weight: 600;
	}

	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;
	}

}


