body
{
padding-top:150px;
margin:0 auto;
background-size:cover;
height:2000px;
}


html
{
font-size:16px;
}


html
{
scroll-behavior: smooth;
}

a{
text-decoration:none;
color:#313333;
font-family:"Trebuchet MS",sans-serif;
}

a:hover
{
color:white;
font-family:"Trebuchet MS",sans-serif;
}

/* === WHOLE === */
#whole{
display:flex;
flex-wrap:wrap;
flex-direction:column;
}


/* ==== NAV BODY ==== */
#nav-body{
position:fixed;
display:flex;
justify-content:center;
align-items:center;
min-height:100px;
text-align:center;
width:100%;
left:0;
top:0;
background:white;
height:150px;
z-index:1000;
}

.wrap-nav
{
position:fixed;
display:flex;
justify-content:center;
align-items:center;
width:1200px;
height:150px;
}



.nav-logo{
height:150px;
width:150px;
border-radius:50%;
}

	.nav-logo img
	{
	height:100%;
	width:100%;
	}

.button-wrapper
{
display:flex;
flex-wrap:wrap;
flex-direction:row;
box-sizing:border-box;
height:50px;
width:600px;
}

.nav-button-box{
display:flex;
flex-wrap:wrap;
justify-content:center;
width:600px;
height:50px;
}


.button{
display:flex;
justify-content:center;
align-items:center;
height:30px;
flex:1;
width:60px;
background-color:white;
font-family:"Trebuchet MS",sans-serif;
}

	.button:hover
		{
		border-bottom:2px solid white;
		transform:skew(350deg);
		background-color:orange;
		color:white;
		}

	.button p
		{
		color:#313333;
		}

	.button p:hover
		{
		color:white;
		}



.sub-button
{
display:none;
flex-wrap:wrap;
flex-direction:row;
height:250px;
width:300px;
background-color:#313333;
border:2px solid #313333;
}

.button2
{
display:flex;
align-items:center;
justify-content:center;
height:50px;
width:100%;
background-color:white;
}
	

	.button2:hover
	{
	background-color:orange;
	}



/* === NAV-MOBILE === */
@media screen and (max-width:767px){

.wrap-nav
{
display:flex;
flex-wrap:wrap;
flex-direction:row;
width:400px;
height:100px;
}
	
.button-wrapper
{
display:flex;
flex-wrap:wrap;
flex-direction:row;
box-sizing:border-box;
height:50px;
width:400px;
}

.nav-logo{
height:70px;
width:70px;
border-radius:50%;
}


nav-button-box{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
width:100%;
}


.button{
width:100%;
font-size:0.8rem;
color:gray;
 }

.button2:hover
	{
	color:#052047;
	background-color:orange;
	}

}



/* === NAV-TABLET === */
@media screen and (min-width:767px) and (max-width:1024px){



.wrap-nav
{
display:flex;
flex-wrap:wrap;
flex-direction:row;
width:700px;
}

.nav-logo{
height:70px;
width:70px;
border-radius:50%;
}

	.nav-logo img
	{
	height:100%;
	width:100%;
	}

.nav-button-box{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
width:700px;
}
	.button{
	width:100%;
	font-size:0.8rem;
	color:gray;
	 }

.free-quotes-mobile
{
display:flex;
justify-content:center;
align-items:center;
font-size:1rem;
padding:5px;
width:150px;
}

.free-quotes
{
display:none;
 }
}