/*shared styles*/
body{
	font-family: 'Nunito Sans', sans-serif;
	overflow-wrap: break-word;
}
body, #clients ul li, #public p, #private p, #advisors-page p, #contact{
	background-color: #D4D5D7;
}

/*hide header menu */
.hide, footer div img, header nav, input, #main-menu-close, .down-arrow, .sub-menu, #main-menu-toggle:checked ~ #logo label #main-menu-open, #sub-menu-toggle-services:checked ~ nav #main-menu li label #services-arrow-left, 

/*hide home page dropdowns*/
#about-toggle:checked ~ #about-menu label .left-arrow, #clients ul, #clients-toggle:checked ~ div label .left-arrow, #about #about-p-container, 

/*hide public services dropdowns*/
#public p,.down-arrow, #public-one-toggle:checked ~ div label .left-arrow, #public-two-toggle:checked ~ div label .left-arrow, #public-three-toggle:checked ~ div label .left-arrow,

/*hide private services dropdowns*/
#private p,.down-arrow, #private-one-toggle:checked ~ div label .left-arrow, #private-two-toggle:checked ~ div label .left-arrow, #private-three-toggle:checked ~ div label .left-arrow, #private-four-toggle:checked ~ div label .left-arrow, #private-five-toggle:checked ~ div label .left-arrow,

/*hide advisors dropdowns*/
#advisors-page p,.down-arrow, #advisors-page-one-toggle:checked ~ div label .left-arrow, #advisors-page-two-toggle:checked ~ div label .left-arrow, #advisors-page-three-toggle:checked ~ div label .left-arrow, #advisors-page-four-toggle:checked ~ div label .left-arrow{
	display: none;
}

/*show header menu */
#main-menu-toggle:checked ~ nav, #main-menu-toggle:checked ~ #logo label #main-menu-close, #sub-menu-toggle-services:checked ~ nav #main-menu #services, #sub-menu-toggle-services:checked ~ nav #main-menu li label #services-arrow-down, 

/*show home page dropdowns*/
#hero a, #about-toggle:checked ~ #about-p-container, #about-toggle:checked ~ #about-menu label .down-arrow, #advisors a, #clients-toggle:checked ~ ul, #clients-toggle:checked ~ div label .down-arrow, #clients a, 

/*show public services dropdowns*/
#public h1, #public-intro p, #public-one-toggle:checked ~ div label .down-arrow, #public-one-toggle:checked ~ p, #public-two-toggle:checked ~ div label .down-arrow, #public-two-toggle:checked ~ p, #public-three-toggle:checked ~ div label .down-arrow, #public-three-toggle:checked ~ p, 

/*show private services dropdowns*/
#private h1, #private-intro p, #private-one-toggle:checked ~ div label .down-arrow, #private-one-toggle:checked ~ p, #private-two-toggle:checked ~ div label .down-arrow, #private-two-toggle:checked ~ p, #private-three-toggle:checked ~ div label .down-arrow, #private-three-toggle:checked ~ p, #private-four-toggle:checked ~ div label .down-arrow, #private-four-toggle:checked ~ p, #private-five-toggle:checked ~ div label .down-arrow, #private-five-toggle:checked ~ p,

/*hide advisors dropdowns*/
#advisors-page h1, #advisors-page-intro p, #advisors-page-one-toggle:checked ~ div label .down-arrow, #advisors-page-one-toggle:checked ~ p, #advisors-page-two-toggle:checked ~ div label .down-arrow, #advisors-page-two-toggle:checked ~ p, #advisors-page-three-toggle:checked ~ div label .down-arrow, #advisors-page-three-toggle:checked ~ p, #advisors-page-four-toggle:checked ~ div label .down-arrow, #advisors-page-four-toggle:checked ~ p{
	display: block;
}

#logo, .main-item, .sub-item, #about-menu, #clients-menu, #hero, #footer-contact, .menu, footer p, #advisors-page-hero, #advisors-page .menu, #advisors-page .menu-bottom{
	display: flex;
}
#logo, .main-item, .sub-item, #about-menu, #clients-menu, #footer-contact, .menu, #advisors-page .menu-bottom{
	justify-content: space-between;
}
#hero, #logo, .main-item, .sub-item, #about-menu, #clients-menu, #footer-contact, .menu, #advisors-page-hero, #advisors-page .menu-bottom{
	align-items: center;
}
header nav ul li a, #advisors a, #advisors-page .portrait, #advisors-page .menu-bottom{
	width: 100%;
}
header nav ul li a, #hero a, #advisors a, #clients a, footer a, #contact address a{
	text-decoration: none;
}
header nav ul li, header nav ul li a, #hero h2, #about h2, strong, #advisors a, #clients h2, #public h1, #public h2, #private h1, #private h2, #advisors-page h1, #advisors-page h2, #contact h1, #contact h2, .bold{
	font-weight: bold;
}
#logo, .main-item, .sub-item, #hero, #about, #advisors, #clients li, #public h1, #public p, .menu, #private h1, #private p, #advisors-page-hero, #advisors-page p, #contact h1{
	border-bottom: solid 2px #E6E6E6;
}
footer, #clients li:first-of-type, #advisors-page-four p{
	border-top: solid 2px #E6E6E6;
}
header nav, #about-menu, #hero a, #clients-menu, .menu{
	background-color: #4b5146;
}
header nav ul li, header nav ul li a, #hero a, #about h2, #clients h2, footer, footer a{
	color: #E6E6E6;
}
header, .sub-menu, footer{
	background-color: #6C6355;
}
#about p, #advisors, hr, #contact p{
	background-color: #E6E6E6;
}
footer p, #hero, #advisors-page .menu{
	flex-direction: column;
}
footer, #contact p{
	padding: 15px;
}

/*header*/
#logo{
	padding: 14px 14px 7px 14px;
}
header nav ul li, header nav ul li a{
	font-size: 1.25rem;
}
.sub-menu a{
	padding-left: 30px;
	font-weight: normal;
}
header .left-arrow, header .down-arrow, #main-menu label{
	height: 25px;
}
#logo a img{
	width: 185px;
}
#main-menu-open, #main-menu-close{
	width: 40px;
}
.main-item{
	padding: 0 10px;
}
header li{
	min-height: 45px;
}

/*footer*/
footer{
	line-height: 1.3rem; 
}
.underline{
	text-decoration: underline;
}
hr{
	margin: 15px 0;
	height: 2px;
}
.right{
	text-align: right;
}

/*shared main*/

#hero, #about-menu, #about p, #clients-menu, #public h1, #public p, #public .menu, #private h1, #private p, #private .menu, #advisors-page p, #advisors-page .menu, #contact h1, #contact section{
	padding: 25px;
}
#hero, #advisors, #public h1, #private h1, #advisors-page-hero, #contact h1{
	background-size: cover;
}
#hero, #advisors-page-hero{
	justify-content: center;
}
#hero, #advisors-page .menu{
	gap: 25px;
}
#hero a, #advisors-page .portrait{
	border: solid 2px #E6E6E6;
}
#hero a, #public p, #public h2, #private h2, #private p, #advisors-page p, #advisors-page h2, #contact h2{
	font-size: 1.5rem;
}
#hero a, #advisors a, #public h1, #private h1{
	text-align: center;
}
#about p, #clients li, #contact{
	line-height: 1.7rem;
}
#about-p-container, #about a, #clients a, #contact address a, #contact h2, #contact h1, #private h1{
	color: #1A1A1A;
}
#about p, #contact p{
	border-radius: 5px;
}
#about img, #clients img, #about label, #clients label, #public img, #public label, #private img, #private label, #advisors-page .left-arrow, #advisors-page .down-arrow, #advisors-page label{
	height: 35px;
}
#advisors, #advisors-page-hero{
	background-image: url("../img/advisors-background.jpg");
}
#advisors a, #advisors-page h1{
	font-size: 3.5rem;
}
#advisors a, #public h2, #private h2, #advisors-page h1, #advisors-page h2{
	color:  #E6E6E6;
}
#advisors a, #advisors-page h1{
	text-shadow: -2px 2px #947561;
}
#public h1, #private h1, #contact h1{
	font-size: 2.7rem;
}
#public h1, #private h1, #advisors-page-hero, #contact h1{
	height: 280px;
}
#public h1, #private h1{
	text-shadow: -2px 2px #E6E6E6;
}
#public p, #private p, #advisors-page p{
	line-height: 2rem;
}
#public .menu, #private .menu{
	gap: 10px;
}
#public-three .menu, #public-three p, #private-five .menu, #private-five p, #advisors-page-four .menu, #advisors-page-four p{
	border-bottom: none;
}

/*home page*/
#hero{
	background-image: url("../img/hero-background.jpg");
	min-height: 600px;
}
#hero h2, #about h2, #clients h2{
	font-size: 2.25rem;
}
#hero h2, #about p{
	max-width: 800px;
}
#hero a{
	padding: 10px 15px;
	margin-top: 10px;
}
#about p, #clients li{
	font-size: 1.4rem;
}
#about-p-container{
	padding: 30px;
	background-color: #B5B2AD;
}
#advisors a{
	height: 100%;
	padding: 80px 25px;
	line-height: 4rem;
}
#clients ul li:nth-child(odd){
	background-color: #B5B2AD; 
}
#clients a{
	padding: 15px 25px;
}

/*public agencies */
#public h1{
	background-image: url("../img/public.jpg");
}

/*private sector */
#private h1{
	background-image: url("../img/private.jpg");
	background-position-y: -50px;
}

/*advisors*/
#advisors-page h1{
	padding: auto 25px;
}

/*contact*/
#contact h2, #contact p{
	margin-bottom: 25px;
}
#contact address:last-child{
	padding-bottom: 0;
}
#contact h1{
	line-height: 3.2rem;
	background-image: url("../img/contact.jpg");
	background-position: center;
	text-shadow: -2px 2px #B5B2AD;
}
#contact{
	font-size: 1.2rem;
}
#contact hr{
	margin: 0 25px;
	background-color:  #1A1A1A;
	border: none;
}

/*styles for screen size over 420px*/

@media (min-width: 420px){
	
	/*shared*/
	header .left-arrow, header .down-arrow, #main-menu label{
		height: 30px;
	}
	
	/*header*/
	header nav ul li, header nav ul li a{
		font-size: 1.75rem;
	}
	.main-item{
		padding: 15px;
	}
	.sub-item{
		padding: 15px 0 15px 30px;
	}
	#logo a img{
		width: 200px;
	}
	
	/*footer*/
	footer, footer a{
		font-size: 1.25rem;
		line-height: 1.5rem;
	}
	
	/*shared main*/
	#hero, #public h1, #advisors-page-hero, #contact h1{
		background-position: center;
	}
	#advisors, #advisors-page-hero{
		background-image: url("../img/advisors-background-lg.jpg");
	}
	#hero a, #public h2, #private h2, #advisors-page h2, #contact h2{
		font-size: 2rem;
	}
	#clients li, #about p, #public p, #private p, #advisors-page p, #contact p, #contact address{
		font-size: 1.5rem;
	}
	#public h1, #private h1{
		text-shadow: -4px 4px #E6E6E6;
	}
	#public h1, #private h1, #advisors-page-hero, #contact h1{
		background-size: cover;
		height: 600px;
	}
	#public h1, #private h1, #contact h1, #advisors-page h1{
		font-size: 5.5rem;
	}
	#public p, #private p, #advisors-page p, #contact p, #contact address{
		line-height: 2rem;
	}
	#advisors-page h1, #advisors a{
		text-shadow: -4px 4px #947561;
	}
	
	/*home page*/
	#hero{
		background-image: url("../img/hero-background-lg.jpg");
	}
	#advisors a{
		font-size: 4.5rem;
	}
	#hero h2{
		font-size: 3rem
	}
	#hero a{
		min-width: 450px;
	}
	#clients li, #about p{
		line-height: 1.8rem;
	}
	
	/*public*/
	#public h1{
		background-image: url("../img/public-lg.jpg");
	}
	
	/*private*/
	#private h1{
		background-image: url("../img/private-lg.jpg");
		background-position: top;
	}
	
	/*advisors*/
	#advisors-page .portrait{
		max-width: 300px;
	}
	#advisors-page .menu{
		flex-direction: row;
		justify-content: space-between;
		gap: 50px;
	}
	#advisors-page .menu-bottom{
		gap: 25px;
	}
	
	/*contact*/
	#contact h1{
		background-image: url("../img/contact-lg.jpg");
		height: 600px;
		line-height: 6rem;
		padding: 50px 0 0 50px;
		text-shadow: -4px 4px #B5B2AD;
	}
	#contact section{
		padding: 35px;
	}
	#contact hr{
		margin: 0 35px;
	}
	#contact h2, #contact p{
		margin-bottom: 25px;
	}
}

/*screen size over 825px*/
@media (min-width: 825px){
	
	/*shared*/
	header, header nav, header nav ul, .sub-menu ul, #about-toggle:checked ~ #about-p-container{
		display: flex;
	}
	header, footer p{
		justify-content: space-between;
	}
	
	/*header*/
	header{
		border-bottom: solid 2px #E6E6E6;
	}
	header, header nav, header nav ul{
		background-color: #6C6355;
	}
	#logo, .main-item, .sub-item:last-of-type{
		border: none;
	}
	#logo label{
		display: none;
	}
	header nav ul{
		align-items: end;
	}
	nav label{
		margin-left: 10px;
		height: 5px;
	}
	#sub-menu-toggle-services:checked ~ nav #main-menu #services{
		position: absolute;
		top: 110px;	
	}
	.sub-item a, .sub-item, .sub-menu ul{
		background-color: #4b5146;
		padding: 5px 10px;
	}
	.sub-menu ul{
		flex-direction: column;
		align-items: start;
	}
	
	/*footer*/
	footer div img{
		display: block;
		width: 200px;
	}
	footer p{
		flex-direction: row;
	}
	
	/*home page*/
	#about-toggle:checked ~ #about-p-container{
		justify-content: center;
	}
	#about p{
		font-size: 1.75rem;
		line-height: 2.25rem;
	}
	#advisors{
		min-height: 400px;
	}
	#advisors a{
		padding: 200px 25px;
	}
	#clients-toggle:checked ~ ul{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: repeat(6, 1fr);
	}
	#clients ul li:nth-child(odd){
		background-color: #D4D5D7; 
	}
	#clients ul li:nth-child(4n+1), #clients ul li:nth-child(4n+2){
		background-color: #B5B2AD; 
	}
	#clients ul li:nth-child(2){
		border-top: solid 2px #E6E6E6;
	}
}

/*screen size over 1200px*/
@media (min-width: 1200px){
	
	body{
		background-image: url("../img/background.jpg");
		background-size: cover;
		background-attachment: fixed;
	}
	
	header, main, footer{
		max-width: 1200px;
		margin: 0 auto;
	}
}