@font-face {
  font-family: EB Garamond ;
  src: url(static/EBGaramond-Regular.ttf);
}


body{
	font-family: Gotham A, "Gotham B", "Gotham", "Arial", Sans-Serif;
	font-weight: 300;
}

.maroon_header{
	background-color: #480001;
	color: #fff;
}

.maroon_header .fs-row{
	padding: 20px 0 80px;
}

.slider_holder{
	background-color: #fff;
	margin: 40px 0;
	text-align: center;
}

.single_slide_holder{
	width: 400%;
	position: relative;
}

.single_slide{
	float: left;
	width: 1200px;
}

.header_image_holder{
	clear: left;
	width: 100%;
}

.left_box{
	float: left;
}

.right_box{
	float: right;
}

.right_box p{
	line-height: 1.5;
	margin-bottom: 45px;
}

.right_box .button{
	padding: 10px 20px;
}

.header_image_holder .left_box{
	width: 850px;
}

.header_image_holder .right_box{
	width: 300px;
}

.left_box img{
	max-width: 100%;
}

.slide_section{
	overflow: hidden;
}

.left_text,
.right_image{
	width: 49%;
	float: left;
	text-align: left;
}

.left_text{
	padding: 30px;
	height: 450px;
	line-height: 1.5;
}

.left_text h2{
	font-family: 'EB Garamond', "Georgia", "Times New Roman", serif;
	font-size: 44px;
	font-weight: 400;
	margin: 18px 0;
	color: #222;
}

.left_text.bg_dark_gray h2{
	color: #777;
}

.right_image img{
	width: 100%;
}

.bg_lime_green{
	background-color:#9bcb3b;
	color:#000;
	font-weight: 400;
}
.bg_bright_orange{
	background-color:#f57c20;
	color:#000;
	font-weight: 400;
}
.bg_light_blue{
	background-color:#26a0da;
	color:#000;
	font-weight: 400;
}
.bg_dark_gray{
	background-color:#040707;
	color:#fff;	
}

.sliderButtons{
	width: 40px;
	height: 40px;
	display: inline-block;
	margin: 40px;
	cursor: pointer;
}

.backward_button{
	float: left;
}

.forward_button{
	float: right;
}

.sliderButtons.backward_button:after{
  	transform: rotate(45deg);
	background-color: #000;
	display: block;
	width: 18px;
	height: 1px;
	position: relative;
	top: 0;
	left: 0;
	border-width: 0;
	content: '';
}

.sliderButtons.backward_button:before{
	margin-top: 28px;
  	transform: rotate(-45deg);
	background-color: #000;
	display: block;
	width: 18px;
	height: 1px;
	position: relative;
	top: -12px;
	left: 0;
	border-width: 0;
	content: '';
}

.sliderButtons.forward_button:after{
	margin-top: 28px;
  	transform: rotate(-45deg);
	background-color: #000;
	display: block;
	width: 18px;
	height: 1px;
	position: relative;
	top: 0px;
	left: 0;
	border-width: 0;
	content: '';
}
.sliderButtons.forward_button:before{
	transform: rotate(45deg);
	background-color: #000;
	display: block;
	width: 18px;
	height: 1px;
	position: relative;
	top: 16px;
	left: 0;
	border-width: 0;
	content: '';
}

.slide_buttons{
	width: 100%;
	text-align: center;
	clear: both;
	padding-top: 35px;
}

.dot{
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background-color: #222;
	display: inline-block;
}

.dot.current{
	background-color: #8C2531;
}

footer{
	clear: both;
}

@media only screen and (max-width: 975px) and (min-width: 600px) {
	.header_image_holder .left_box,
	.header_image_holder .right_box{
		width: 100%;
	}
}

/*
mobile css
*/
@media only screen and (max-width: 600px) {
	.maroon_header .fs-row{
	padding: 20px;
	}

	.header_image_holder .left_box,
	.header_image_holder .right_box{
		width: 100%;
		margin: 20px 0;
		text-align: center;
	}

	.hidden_mobile{
		display: none;
	}

	.single_slide{
		width: 25%;
	}

	.left_text, 
	.right_image{
		float: none;
		width: 100%;
	}

	.left_text{
		height: auto;
		padding: 15px;
	}

	.left_text h2{
		font-size: 30px;
	}

	.right_image{
		margin-top: 20px;
	}
}


@media only screen and (max-width: 740px) and (min-width: 601px) {
	.single_slide{
		width: 480px;
	}

	.left_text, 
	.right_image{
		float: none;
		width: 100%;
	}

	.left_text{
		height: 370px;
	}

	.left_text h2{
		font-size: 30px;
		margin: 6px 0;
	}

	.right_image{
		margin-top: 20px;
	}
}


@media only screen and (max-width: 980px) and (min-width: 741px) {
	.single_slide{
		width: 720px;
	}

	.left_text h2{
		font-size: 30px;
		margin: 12px 0;
	}

}

@media only screen and (max-width: 1220px) and (min-width: 981px) {
	.left_text h2{
		font-size: 36px;
	}

	.header_image_holder .left_box{
		width: 650px;
	}

	.header_image_holder .right_box{
		width: 250px;
	}

	.single_slide{
		width: 960px;
	}
}


@media only screen and (min-width: 1350px) {
	.sliderButtons{
		position: relative;
		top: -350px;
		display: block;
	}
}

@media only screen and (max-width: 1220px){
	.sliderButtons{
		margin-top: -30px;
	}
}

@media (prefers-color-scheme: dark) {
	.bg_white{
		background-color: #fff;
	}
}


@media only screen and (max-width: 980px){
	p{
		font-size: 14px;
	}
}