@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


/*
Framework by Andy Shearouse
*/
html, body{
	margin:0px !important;
	padding:20px !important;
	background:none;
	color:black;
	font-family: 'Host Grotesk', Arial, Helvetica, sans-serif;

}

img{
	max-width:100% !important;	
}

.container{
	max-width:1920px;
	width:100%;
	margin:0 auto;
	position:relative;
}

.header{
    width: 100%;
}


/*Use the following for top drop-down nav
Change the background-color in #nav to change the color of the navigation bar
Change the background-color in #nav ul li ul to change the background color of the dropdown menus
These values do also need to be changed further down, in the 600px, 400px, and 300px wide sections 
*/
/* -------------------- Start Navigation -------------------- */
#nav{
	width: 100%;
	z-index:10;
	position:relative;
	float:left;
	font-size:16px;
	margin-bottom:15px;
	font-weight:bolder;
	font-size:24px;
}

#nav > a{
	display: none;
}

#nav li{
	position: relative;
	list-style-position:inside;
	list-style-type:none;
}
#nav li a{
	color:white;
	display: block;
	text-decoration:none;
}

#nav section{
    width:100%;
    padding-left:0px;
    text-transform:uppercase;
    font-size:24px;
}

#nav section img{
    display:block;
    margin:0 auto;
}

.image-container {
    position:relative;
    display:inline-block;
    max-width:100%;
}

.image-container img{
    width:100%;
    height:auto;
    display:block;
}

#bannerText{
    position:absolute;
    top:20px;
    background-color:black;
    color:white;
    font-size:1.5vw;
    font-weight:bold;
    padding-right:40px;
    padding-left: 25vw;
    text-transform:uppercase;
    right:0px;
}

/* first level */

#nav > ul{
	padding-left:0px;
	margin-left:0px ;
	background:black;
	padding: 15px 30px;
	list-style: none;
	text-align:center;
	text-transform:uppercase;
	margin-top: 10px;
	padding:0px 50px;
	font-size: 28px;
    font-weight: bold;
}
#nav > ul > li{
	margin:0px 15px;
	padding:4px 8px;
	height: 100%;
	display:inline-block;
}
#nav > ul > li > a{
	height: 100%;
	text-align: center;
}
#nav > ul > li:not( :last-child ) > a{
	
}

#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a{
	
}

	/* second level */

#nav li ul{
	background-color:#ccc;
	display: none;
	position: absolute;
	top: 100%;
	margin-left:0 !important;
	padding-left:0 !important;
	width:240px;
	text-align:left;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
}
#nav li:hover ul{
	display: block;
	left: 0;
	right: 0;
}
#nav li:not( :first-child ):hover ul{
	left: -1px;
}
#nav li ul a{
	color:#000;
	padding: 0.75em; /* 15 (20) */
}
#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a
{
}
/* -------------------- End Navigation -------------------- */

.content{
	width:100%;
	display:inline-block;
	padding-bottom:20px;
	text-align:center;
	margin:auto;
}

main {
    clear:both;
    font-family: "Ebrima", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    padding:0 3%;
}

section{
    display:block;
    padding: 0px 20px 0px 0px;
    width: 70%;
    justify-content:center;
    text-align:center;
    margin:auto;
    

}

section ul{
    list-style:none;
    margin-top:30px;
}

section ul li {
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    line-height: 1.6;
}

section h3{
    color:rgb(113, 38, 66);
    margin: 10px 0px 10px 0px;
}

section h3, h4{
    font-size: clamp(1rem, 2.5vw, 1.5rem);
}

section p{
    margin:16px 30px 16px 30px;
    text-align:center;
    justify-content:center;
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    line-height: 1.6;
}

footer{
    background-color:black;
    padding-left:20px;
    padding-right:20px;
    text-transform:uppercase;
    font-weight:bold;
}

.grid-three-columns{
	display:-ms-grid;
	display:grid;
	-ms-grid-columns:1fr 1fr 1fr;
	grid-template-columns:1fr 1fr 1fr;	
	background-color:black;
	color:white;
	padding: 10px;
	align-items:center;
	font-size: clamp(0.8rem, 1.5vw, 1.2rem);
    line-height: 1.6;
}

.grid-three-columns img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  width: 260px;
  max-width:100%;
  height:auto;
  margin:0 auto;
}


.grid-two-columns-footer{
	display:-ms-grid;
	display:grid;
	-ms-grid-columns:1fr 1fr;
	grid-template-columns:1fr 1fr;
}

.grid-two-columns-footer section li{
    text-align:start;
    padding-bottom:10px;
    padding-top:0px;
    font-size: clamp(0.8rem, 1.5vw, 1.2rem);
    line-height: 1.6;
}

.grid-two-columns-footer section ul{
    padding-left:0px;
    padding-right:0px;
}

.grid-two-columns-footer section{
    margin-left:0px;
    padding-left: 0px;
}

.grid-two-rows-footer{
    text-align:end;
}


.grid-two-columns-footer2{
	display:-ms-grid;
	display:grid;
	-ms-grid-columns:1fr 1fr;
	grid-template-columns:1fr 1fr;
	color: white;
}

.grid-two-columns-footer2 p:nth-child(2) {
  text-align: right;
}


.grid-two-thirds-one-third{
	display:-ms-grid;
	display:grid;
	-ms-grid-columns:2fr 1fr;
	grid-template-columns:2fr 1fr;
}

.grid-one-fourth-three-fourths{
	display:-ms-grid;
	display:grid;
	-ms-grid-columns:1fr 3fr;
	grid-template-columns:1fr 3fr;
	padding:10px;
}


.grid-three-fifths-two-fifths{
	display:-ms-grid;
	display:grid;
	-ms-grid-columns:3fr 2fr;
	grid-template-columns:3fr 2fr;
}

.grid-two-fifths-three-fifths{
	display:-ms-grid;
	display:grid;
	-ms-grid-columns:2fr 3fr;
	grid-template-columns:2fr 3fr;
}

.grid-two-columns{
	display:-ms-grid;
	display:grid;
	-ms-grid-columns:1fr 1fr;
	grid-template-columns:1fr 1fr;
	margin-bottom: 40px;
	justify-items:center;
}

.grid-two-columns img{
    margin:auto;
}

.grid-three-columns{
	display:-ms-grid;
	display:grid;
	-ms-grid-columns:1fr 1fr 1fr;
	grid-template-columns:1fr 1fr 1fr;	
	color:white;
	padding:0px;
	height:auto;
}

.grid-four-columns{
	display:-ms-grid;
	display:grid;
	-ms-grid-columns:1fr 1fr 1fr 1fr;
	grid-template-columns:1fr 1fr 1fr 1fr;
	column-gap:3%;
	margin-bottom:40px;
}

.grid-four-columns button{
    padding:2vh .08vw 2vh 0.8vw;
    background-color: rgb(113, 38, 66);
    border: none;
    font-family: "Ebrima", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    text-transform:uppercase;
    font-weight:bold;
    font-size:24px;
    margin-bottom:1vh;
}

.grid-four-columns button a{
    color:white;
    text-decoration:none;
    
}

.footer a{
	color:#fff;
}

.grid-two-columns-footer a{
    text-decoration:none;
}

.no-margin{
	margin:0px !important;
}

.no-padding{
	padding:0px !important;	
}

.no-bold{
	font-weight:normal !important;	
}

.no-border{
	border:none !important;
}

.center{
	text-align:center;
}

.block{
	display:block !important;	
}



@media only screen and (max-width:768px){


}

@media only screen and (max-width:720px){
	/* -------------------- Start Navigation -------------------- */
	#nav{
        position: relative;
        margin-bottom:0px;
    }
    #nav img{
        vertical-align:middle;
    }
	#nav > a{
	}
	
	#nav:not( :target ) > a:first-of-type,
	#nav:target > a:last-of-type{
		display: block;
		width:100%;
		text-align:center;
		color:#000;
		font-size:20px;
		padding:5px 0px;
		text-decoration:none;
		
	}
	
	#nav:not(:target){
	    margin-bottom:10px;
	}
	
	#nav a{
		font-size:16px;	
		background:black;
		color:white;
		margin-top:5px;
	}
	
	#bannerText{
    padding-left: 15vw;
    }
 
    /* first level */
 
    #nav > ul{
        height: auto;
        left: 0;
        right: 0;
		background-color:black;
		margin-top:0px;
		padding:auto;
		margin-bottom:10px;
		display:none;
    }
	#nav:target > ul{
		display: block;
	}
	#nav > ul > li{
		width: 100%;
		float: none;
		margin:0px !important;
		padding:4px 0px;
	}

    /* second level */
 
    #nav li ul{
        position: static;
		width:98%;
		margin:0 !important;
		text-align:center;
		padding:0 !important;
    }
	#nav li ul a{
		padding:0.5em 0;
		margin:0.25em 0;
	}
	/*End Navigation*/
	
	.grid-two-thirds-one-third{
		-ms-grid-columns:1fr;
		grid-template-columns:1fr;
	}
	
	.grid-one-fourth-three-fourths{
		-ms-grid-columns:1fr;
		grid-template-columns:1fr;
	}
	
	.grid-two-fifths-three-fifths{
		-ms-grid-columns:1fr;
		grid-template-columns:1fr;
	}
	
	.grid-three-fifths-two-fifths{
    	-ms-grid-columns:1fr;
		grid-template-columns:1fr;
    }
	
	.grid-two-columns{
		-ms-grid-columns:1fr;
		grid-template-columns:1fr;
	}
	
	.grid-three-columns{
		-ms-grid-columns:1fr;
		grid-template-columns:1fr;
	}
	
	.grid-four-columns{
		-ms-grid-columns:1fr;
		grid-template-columns:1fr;
	}
	
	.footer{
		text-align:center;
	}
	
	.footer-left{
		float:none;
		padding:10px 0px 0px 0px;
		display:block;
	}
	
	.footer-right{
		float:none;
		padding:0px 0px 0px 0px;
		display:block;
	}
	
	ul.no-margin-bottom{
	    margin-bottom:0;
	}
	
	ul.no-margin-top{
	    margin-top:0;
	}
	
	.grid-two-rows-footer{
	    text-align:center;
	}
}

@media only screen and (max-width:600px){
	
    #bannerText{
    padding-left: 15vw;
    top:10px;
    }
    
    
}


@media only screen and (max-width:480px){

    #bannerText{
    padding-left: 15vw;
    top:10px;
    }
    
}