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

@media (max-width: 1400px) {

	/* MOBILE NAV */
	#topwrapper{
		z-index: 9999;
	}

	.main-menu{
		position: absolute;
		display: none;
		right:0;
		top: 0;
		height: 100%;
		transition: left 0.3s ease, box-shadow 0.3s ease;
		z-index: 999;
	}

	#navwrapper .main-menu ul.nav{
		padding: 40px 0 0;
		-webkit-box-shadow: -8px 0 8px rgba(0,0,0,.5);
		-moz-box-shadow: -8px 0 8px rgba(0,0,0,.5);
		box-shadow: -8px 0 8px rgba(0,0,0,.5);
		width: 320px!important;
		background: #1a1a1a;
		min-height:100%;
		display: block;

	}

	#navwrapper .fa.fa-close{
		color:#fff;
	}

	#navwrapper .fa-bars{
		color:#fff;
		font-size:18px;
		display: block;
		z-index:9;
		width: 16px;
		height: 20px;
		position:fixed;
		top:0px;
		right:0px;
		background:rgba(0,0,0,0.7);
		padding:10px 12px 10px 12px;
	}

	#navwrapper .menu-toggle, #navwrapper .menu-close{
		display:block;
		text-align:right;
		font-size:21px;
	}

	#topwrapper .nav .left, #topwrapper .nav .right{
		width:100%;
	}

	#topwrapper #navwrapper li{
		margin:0;
		display: block;
	}


	#navwrapper .sub_menu li a {
		font-size: 14px;
		padding: .75em  5px;
	}

	#topwrapper #navwrapper  li a,  #topwrapper #navwrapper .main-menu a{
		display: block;
		padding: 15px;
		font-size: 14px;
		border:0;
		border-bottom: 1px solid #383838;
		text-align:right;
		border-radius: 0;
	}

	.main-menu .menu-close {
		position: absolute;
		right: 0;
		top: 0;
		border-bottom: none!important;
	}

	.main-menu:target, .main-menu[aria-expanded="true"]{
		display: block;
		right: 0;
		outline: none;
		-moz-box-shadow: 3px 0 12px rgba(0,0,0,.25);
		-webkit-box-shadow: 3px 0 12px rgba(0,0,0,.25);
		box-shadow: 3px 0 12px rgba(0,0,0,.25);
	}

	.main-menu:target .menu-close, .main-menu[aria-expanded="true"] .menu-close{
		z-index: 1001;
	}

	.main-menu:target ul, .main-menu[aria-expanded="true"] ul {
		position: relative;
		z-index: 1000;
	}

	.main-menu:target + .backdrop,
	.main-menu[aria-expanded="true"] + .backdrop{
		position: absolute;
		display: block;
		right: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 998;
		background: #000;
		background: rgba(0,0,0,.85);
		cursor: default;

	}
	.main-menu,
	.main-menu:target + .backdrop,
	.main-menu[aria-expanded="true"] + .backdrop{
		position: fixed;

	}

	#navwrapper li.drop{
		cursor:pointer;
	}

	#navwrapper li.drop{

		background-image:url(images/down.png);
		background-size:13px;
		background-repeat:no-repeat;
		background-position:98% 15px;
	}

	#navwrapper li.drop.toggle {
		background-image:url(images/up.png);
	}


	#navwrapper .main-menu .sub_menu {
		left:0;
		width:100%;
		top:0;
		background:none;
		padding:0;
	}

	#navwrapper li.drop:hover .sub_menu{
		visibility:hidden;
	}

	#navwrapper .main-menu .drop.toggle .sub_menu{
		visibility:visible;
		position:relative;
	}

	/* END MOBILE NAV */

	body{
		font-size: 18px;
	}

	h1{
		font-size: 80px;
	}

	h2{
		font-size: 55px;
	}

	.title{
		font-size: 18px;
	}

	.button{
		font-size: 16px;
	}

	#home .head .overlay{
		padding:60px 0;
	}

	.head .eventlogo{
		width:300px;
	}

	.location{
		width:30%;
		padding:60px 1.5%;
	}

	.location.larger{
		width:31%;
	}

	.location h2{
		font-size: 55px;
	}

	.location.larger h2{
		font-size: 80px;
	}

	.location .title{
		font-size: 16px;
	}

	.location.larger .title{
		font-size: 18px;
	}

	.location .date{
		font-size: 28px;
	}

	.event .main .info h2{
		width: auto;
	}

	.form{
		background-size: 200%;
		background-position: 50% top;
	}

	#dn-center .dn-field{
		font-size: 15px;
	}

	#footerwrapper .footer{
		flex-direction: column;
		gap:30px;
	}

	#footerwrapper .contactinfo{
		margin:auto;
	}

}

@media (max-width: 950px) {
	#leadership .flex {
		gap:5%;
	}
	
	#leadership .name {
		flex-grow:0;
	}
}


@media (max-width: 850px) {

	.location h2{
		font-size: 40px;
	}

	.location.larger h2{
		font-size: 55px;
	}

	.location .title{
		font-size: 14px;
	}

	.location.larger .title{
		font-size: 16px;
	}

	.location .date{
		font-size: 20px;
	}

	.location .button{
		font-size: 12px;
	}

	.event .main .info{
		padding:60px 3%;
	}

	.form{
		padding:60px 0;
	}

	.form #form{
		padding:40px 20px;
	}

	.about .box{
		padding:60px 3%;
	}

}

@media (max-width: 650px) {

	body{
		font-size: 16px;
	}

	h1{
		font-size: 55px;
	}

	h2{
		font-size: 40px;
	}

	.title{
		font-size: 16px;
	}

	.button{
		font-size: 14px;
	}

	#background-video.desktop{
		display: none;
	}

	#background-video.mobile{
		display: block;
	}

	.location, .location.larger{
		width:92%;
		padding:40px 3%;
	}

	.location h2 br{
		display: none;
	}

	.form{
		background-size: 300%;
	}

	#dn-center .dn-field{
		font-size: 14px;
	}
	
	#leadership .flex {
		flex-direction:column;
	}

}