/*--------------------------------Temporary---------------------------------*/

body{
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.cta{
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 3%;
	padding-top: 10px;
	padding-bottom: 10px;
	text-decoration: none;
	color: white;
	background-color: var(--eat-blue);
	font-size: 25px;
	width: 300px;
	text-align: center;
}

.cta span{
	text-transform: uppercase;
	display: inline-block;
}

.cta span:first-letter{
	font-size: 35px;
}

main .cta{
	margin-top: 40px;
}

footer .cta{
	margin-bottom: 3%;
}

@media only screen and (min-width: 1000px){
    .cta{
        margin-top: 4%;
    }
}

/*-----------------------------End Temporary--------------------------------*/

@font-face {
  font-family: MinionPro;
  src: url(/minion-pro/MinionPro-Regular.woff) format("woff");
  font-display: swap;
}

@font-face {
  font-family: MinionPro;
  src: url(/minion-pro/MinionPro-Bold.woff) format("woff");
  font-weight: bold;
  font-display: swap;
}

@font-face{
	font-family: MinionPro;
	src: url(/minion-pro/MinionPro-SemiboldIt.woff) format("woff");
	font-style: italic;
	font-weight: bold;
	font-display: swap;
}

:root{
	--eat-blue: rgb(00,62,98);
	--eat-grey: rgb(224, 224, 224);
}

body{
	font-family: MinionPro, serif;
}

body::-webkit-scrollbar{
	width: 1em;
}

body::-webkit-scrollbar-track {
  background-color: var(--eat-grey);
}

body::-webkit-scrollbar-thumb{
	background-color: var(--eat-blue);
}

/*-----------------------------Header---------------------------------------*/
header{
	display: flex;
	padding-bottom: 25px;
}

#header-left, #header-right{
	width: 50%;
	text-align: center;
}

#header-left{
	font-family: MinionPro;
	font-weight: normal !important;
}

#header-left h1, #header-left h3{
	font-weight: normal !important;
	margin-top: 0;
	margin-bottom: 0;
}

#header-left h1{
	font-size: 30px;
}

#header-left h2{
	font-weight: bold !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	font-size: 20px;
	text-transform: uppercase;
}

#header-left h2 span{
	display: inline-block;
}

#header-left h2 span::first-letter{
	font-size: 27px;
}

#header-left h3{
	font-size: 20px !important; 
}

/*----------------------------Main Banner------------------------------*/
#main-banner{
	background: url("/Images/dbh-max-2.jpg") rgba(00,62,98,.50);
	background-blend-mode: multiply;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	height: 600px;
	padding-top: 20px;
	box-sizing: border-box;
	color: white;
}

#main-banner-title{
	text-align: center;
	background-color: var(--eat-blue);
	font-weight: normal;
	text-transform: uppercase;
	font-size: 40px;
}

#main-banner-title span{
	display: inline-block;
}

#main-banner-title span:first-letter{
	font-size: 60px !important;
}

#main-banner ul{
	width: 53%;
	margin: 70px auto 0 auto;
	font-size: 26px;
	list-style-type: "\2022";
	list-style-position: outside !important;
}

#main-banner ul li{
	margin-bottom: 20px;
	text-shadow: 5px 5px 5px black;
	padding-left: 10px;
	white-space: nowrap !important;
}
/*-----------------------------After Main Banner-------------------------------*/

#after-main-banner{
	display: flex;
	margin-top: 40px;
}

#after-main-banner #dbh-quote-box{
	width: 67%;
}

#after-main-banner #dbh-image{
	width: 33%;
}

#dbh-quote-box div{
	width: 80%;
	margin-left: auto;
	margin-right: 25px;
	padding: 20px;
	background-color: var(--eat-grey);
	color: var(--eat-blue);
	font-style: italic;
	font-weight: bold;
	border: 2px solid var(--eat-blue);
}

#dbh-quote-box p{
	margin: 0;
	font-weight: bold;
	font-size: 25px;
}

#dbh-image img{
	display: block;
	margin-left: 25px;
	margin-right: auto;
	width: 212px;
	height: auto;
}

#main-separator{
	background-color: var(--eat-blue);
	height: 75px;
	margin-top: 40px;
	margin-bottom: 10px;
	border: none;
}

/*--------------------------------Main Content-------------------------------*/

section{
	position: relative;
	z-index: -2;
	margin-top: 35px;
}

section h2{
	position: relative;
	text-transform: uppercase;
	color: var(--eat-blue);
	font-size: 40px;
	margin: 0;
	font-weight: normal;
}

section h2 span span{
	display: inline-block;
}

section h2 span span::first-letter{
	font-size: 50px;
}

section h2 > span{
	display: inline-block;
}

.section-content{
	display: flex;
}

.section-content p, .section-image, .section-content ul{
	width: 50%;
}

.section-content p{
	color: var(--eat-blue);
	font-size: 24px;
}

.section-image img{
	display: block;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;	
}

/*--------------------------Left Text Sections------------------------*/

.text-left h2 > span{
	background-color: #fff;
	padding-left: 40px;
	padding-right: 10px;
}

.text-left h2:after{
	content: "";
	position: absolute;
	background: var(--eat-blue);
	height: 2.5px;
	width: 100%;
	right: 0;
	top: 50%;
	z-index: -1;
}

.text-left .section-content p{
	padding-left: 40px;	
}

/*------------------------Right Text Sections----------------------------*/

.text-right{
	background-color: var(--eat-grey);
	padding-bottom: 30px;
}

.text-right h2 > span{
	background-color: var(--eat-grey);
	padding-right: 40px;
	padding-left: 10px;
}

.text-right h2{
	text-align: right;
}

.text-right h2:before{
	content: "";
	position: absolute;
	background: var(--eat-blue);
	height: 2.5px;
	width: 100%;
	left: 0;
	top: 50%;
	z-index: -1;
}

.text-right .section-content p{
	padding-right: 40px;
	text-align: right;
}

/*---------------------------Answer To A Dilemma------------------------------*/
#answer-to-a-dilemma{
	margin-top: 0;
}

#answer-to-a-dilemma img{
	width: 75%;
}

#answer-to-a-dilemma .section-content p{
	line-height: 1.8;
}

/*------------------------Silver Lining----------------------------------------*/
#silver-lining img{
	width: 80%;
}

#silver-lining .section-content p{
	margin-top: 0;
	margin-bottom: 0;
	font-size: 20px;
	line-height: 2;
}

/*----------------------------Persoanlized Approach-------------------------------*/
#personalized-approach p{
	width: 41%;
	margin-top: 0;
}

#personalized-approach p span{
	width: 80%;
	display: inline-block;
	line-height: 2;
	font-size: 24px;
}

#peronalized-approach .section-image{
	width: 59%;
}

/*-------------------------------Gain Not Loss---------------------------------------*/
#gain-not-loss img{
	width: 90%;
	margin-top: 30px;
}

#gain-not-loss p{
	width: 43%;
	margin-bottom: 0;
}

#gain-not-loss .section-image{
	width: 57%;
}

#gain-not-loss p{
	margin-top: 0;
}

#gain-not-loss p span{
	display: inline-block;
	width: 85%;
	font-size: 21px;
	line-height: 1.75;
}

/*--------------------------------------Meeting Schedule----------------------------------*/
#meeting-schedule img{
	width: 80%;
}

#meeting-schedule p{
	margin-top: 0;
	margin-bottom: 0;
	font-size: 22px;
	line-height: 1.75;
}

/*-------------------------------------Exclusive and Limited Practice---------------------*/
#exclusive-and-limited-practice img{
	width: 80%;
	margin-left: auto;
	margin-right: 0;
}

#exclusive-and-limited-practice p{
	margin-top: 0;
	margin-bottom: 0;
}

#exclusive-and-limited-practice p span{
	display: inline-block;
	width: 80%;
	line-height: 2;
}

/*-----------------------------------------Methods Used-------------------------------------*/
#methods-used img{
	width: 90%;
	margin-right: auto;
	margin-left: 0;
}

#methods-used ul{
	list-style-position: inside;
	margin-top: 0;
}

#methods-used li{
	margin-top: 20px;
	font-size: 24px;
	color: var(--eat-blue);
}

#methods-used li:first-of-type{
	margin-top: 0;
}

/*----------------------------------Footer------------------------------------*/
footer{
	margin-top: 40px;
	margin-bottom: 40px;
	background-color: var(--eat-grey);
	border: 2px solid var(--eat-blue);
}

footer h2{
	text-align: center;
	color: var(--eat-blue);
	font-weight: normal;
	text-transform: uppercase;
	font-size: 40px;
	margin-top: 0;
	margin-bottom: 0;
}

footer h2 span{
	display: inline-block;
}

footer h2 span::first-letter{
	font-size: 55px;
}

footer p{
	font-size: 25px;
	text-align: center;
	margin-top: 0;
	line-height: 2;
	color: var(--eat-blue);
}

/**************************************Mobile*******************************************/
@media only screen and (max-width: 1000px){
}

@media only screen and (max-width: 1000px){
	body{
		max-width: 600px;
		min-width: 300px;
	}
	
	header{
		display: block;
	}
	
	#header-left, #header-right{
		width: 100%;
	}
	
	/*-------------------------Main Banner--------------------------------*/
	#main-banner{
		height: initial;
		padding-bottom: 20px;
	}
	
	#main-banner ul{
		margin: 0;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	
	#main-banner ul li{
		white-space: normal !important;
		max-width: 100%;
	}
	
	/*-----------------------------After Main Banner-----------------------*/
	#after-main-banner{
		flex-direction: column-reverse;
	}
	
	#dbh-quote-box, #dbh-image{
		width: 100% !important;
	}
	
	#dbh-quote-box div, #dbh-image img{
		margin-left: auto;
		margin-right: auto;
	}
	
	#dbh-quote-box{
		text-align: center;
	}
	
	#dbh-image{
		margin-bottom: 40px;
	}
	
	/*---------------------Main Sections--------------------*/
	
	.text-left .section-content{
		flex-direction: column-reverse;
	}
	
	.text-right .section-content{
		flex-direction: column;
	}
	
	section h2{
		margin-bottom: 20px;
	}
	
	section h2:before, section h2:after{
		display: none;
	}
	
	section h2, section h2 span{
		text-align: center !important;
	}
	
	section h2 > span{
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	
	.section-content p, .section-image{
		width: 100% !important;
	}
	
	.section-image img{
		width: 90%;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-top: 0 !important;
	}
	
	.section-content p{
		padding-left: 10px !important;
		padding-right: 10px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-top: 20px !important;
		text-align: center !important;
		box-sizing: border-box !important;
	}
	
	.section-content p span{
		text-align: center !important;
		width: 100% !important;
	}
	
	/*-------------------------------------Methods Used--------------------------------*/
	#methods-used ul{
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 5%;
		box-sizing: border-box;
		margin-top: 20px;
	}
	
	#methods-used li{
		width: 100% !important;
	}
	
}