@font-face {
   font-family: val-font;
   src: url(VAL.ttf);
}

@font-face {
   font-family: val-header;
   src: url(VAL-header.ttf);
}

#list {
	position: absolute; 
	top: 50%; 
	left: 50%; 
	transform: translate(-50% , -50%); 
	font-family: Verdana, sans-serif; 
	font-size: 40px; 
	margin: 0; 
	padding: 24px; 
	border-width: 1px; 
	border-style: solid; 
	border-color: #ffffff; 
	opacity: 0; 
	transition: opacity 2s ease-in-out;
}

#columns-about {
	height: 50vh;
	position: relative;
	width: 100%; 
	max-width: 1200px; 
	margin-left: auto; 
	margin-right: auto; 
	margin-top: 0;

}

#header-container2 {
	position: absolute;
	bottom: 0;
	height: auto;
	width: 100vw;
	/* background-color: #eaeaea; */
	background-image: linear-gradient(to right, rgba(158, 42, 43,1), rgba(124, 37, 41,1));
	min-height: 16px;
	z-index: 9;
}

#freeze-about {
	min-height: 360px; 
	height: 50vh; 
	position: absolute; 
	z-index: 10;
	width: 100%; 
	max-width: 1200px; 
  
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

#freeze-box-container-about {
	position: relative;
	height: 50vh;
	width: 100vw;
	overflow: hidden;

}

#our-values-right {
	visibility: hidden;
	display: none;
}

#copy {
	font-family: Verdana; 
	font-size: 7px; 
	text-align: center; 
	max-width: 800px; 
	margin-left: auto; 
	margin-right: auto;
}

.list-item {
	clear: both; 
	margin-left: auto; 
	margin-right: auto; 
	text-align: center; 
	float: none; 
	color: #ffffff;
}

#header-container {
	position: relative;
	height: auto;
	width: 100vw;
	/* background-color: #eaeaea; */
	background-image: linear-gradient(to right, rgba(158, 42, 43,1), rgba(124, 37, 41,1));
	min-height: 16px;
}

#header {
	position: relative; 
	height: 24px; 

	max-width: 1200px; 
	width: 100%; 
	margin-left: auto; 
	margin-right: auto;
}

#logo-box {
	width: 72px; 
	height: 80px; 
	background-color: #ffffff; 
	left: 16px;
	position: absolute;
	z-index: 10;
}

#menu-bar {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
	display: block;
}

#menu-buttons {
	margin-top: 0; 
	font-family: Verdana, sans-serif; 
	font-size: 14px;
	color: #ffffff;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
	float: left;
	clear: none;
	display: block;
	margin-right: 56px;
	text-transform: uppercase;
}



#freeze-box-container {
	position: relative;
	height: 75vh;
	width: 100vw;
	overflow: hidden;

}

#freeze {
	min-height: 360px; 
	height: 75vh; 
	position: absolute; 
	z-index: 10;
	width: 100%; 
	max-width: 1200px; 
  
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

#freeze-text {
	background-color: #454B1B; 
	display: block;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	box-shadow: 0px 12px 12px;
}

#tag-line {
	color: #000000; 
	text-align: center;
	margin-bottom: 32px;
	font-family: val-header;
	font-size: 32px;
	line-height: .8em;
	width: 320px; 
	margin-left: auto;
	margin-right: auto;
}

#header-text-container {
	position: absolute; 
	top: 100%;
	transform: translateY(-210%);
  width: 100%;
  max-width: 1600px;
}

#column-box-container {
	position: relative;
	height: auto;
	width: 100vw;
	background-color: #ffffff;
  padding-bottom: 20px;
  z-index: 10;
}

#column-box-container2 {
	position: relative;
	height: auto;
	width: 100vw;
	background-color: #ffffff;
	 z-index: 10;
}

#column-box-container3 {
	position: relative;
	height: auto;
	width: 100vw;
	background-color: #ffffff;
 z-index: 10;
}

#column-box-container4 {
	position: relative;
	height: auto;
	width: 100vw;
	background-image: url(paper.jpg);
	background-size: cover;
 z-index: 10;
}

#columns {
	height: 75vh;
	position: relative;
	width: 100%; 
	max-width: 1200px; 
	margin-left: auto; 
	margin-right: auto; 
	margin-top: 0;

}

#columns2 {
	height: auto;
	position: relative;
	width: 100%; 
	max-width: 1200px; 
	margin-left: auto; 
	margin-right: auto; 
	margin-top: 0;
  margin-bottom: 32px;
}

#columns-video {
	height: auto;
	position: relative;
	
	width: 100%; 
	max-width: 1200px; 
	margin-left: auto; 
	margin-right: auto; 
	margin-top: 0;
}

#columns6 {
	height: auto;
	position: relative;
	background-color: #ffffff;
	width: 100%; 
	max-width: 1200px; 
	margin-left: auto; 
	margin-right: auto; 
	margin-top: 0;

}


.column2-small-about  {
	width: calc(50% - 24px);

	margin-bottom: 16px;
	margin-left: 16px;
	float: left;
	clear: none;
	display: block;
	position: relative;
	background-color: #009900;
	min-height: 100px;
}

.column2-small-locations  {
	width: calc(100% - 24px);

	margin-bottom: 16px;
	margin-left: 16px;
	float: left;
	clear: none;
	display: block;
	position: relative;
	background-color: #009900;
	min-height: 100px;
}

.small-div-color {
	background-color: #ffffff !important;
}

.column3 {
	width: calc(33.333% - 21px);
	margin-top: 16px;

	margin-left: 16px;
	float: left;
	clear: none;
	display: block;
	position: relative;
	background-color: #009900;
	min-height: 100px;
}

.column3-2 {
	width: calc(66.666% - 26px);
	margin-top: 16px;

	margin-left: 16px;
	float: left;
	clear: none;
	display: block;
	position: relative;
	background-color: #009900;
	min-height: 100px;
}

.column2 {
	width: calc(50% - 24px);
	margin-top: 16px;

	margin-left: 16px;
	float: left;
	clear: none;
	display: block;
	position: relative;
	background-color: #009900;
	min-height: 100px;
}

.column4 {
	width: calc(25% - 20px);
	margin-top: 16px;

	margin-left: 16px;
	float: left;
	clear: none;
	display: block;
	position: relative;
	background-color: #009900;

}

.column3-small  {
	width: calc(33.333% - 21px);
	margin-top: 16px;
	margin-bottom: 16px;
	margin-left: 16px;
	float: left;
	clear: none;
	display: block;
	position: relative;
	background-color: #009900;
	min-height: 100px;
}

.column3-2-small  {
	width: calc(66.666% - 26px);
	margin-top: 16px;
	margin-bottom: 16px;
	margin-left: 16px;
	float: left;
	clear: none;
	display: block;
	position: relative;
	background-color: #009900;
	min-height: 100px;
}

.column2-small  {
	width: calc(50% - 24px);
	margin-top: 16px;
	margin-bottom: 16px;
	margin-left: 16px;
	float: left;
	clear: none;
	display: block;
	position: relative;
	background-color: #009900;
	min-height: 100px;
}

.column1-small  {
	width: calc(50% - 24px);
	margin-top: 16px;
	margin-bottom: 16px;
	margin-left: 16px;
	display: block;
	position: relative;
	background-color: #009900;
	min-height: 100px;
	float: left;
	min-height: 100%;
}

.column4-small {
	width: calc(25% - 20px);
	margin-top: 16px;
	margin-bottom: 16px;
	margin-left: 16px;
	float: left;
	clear: none;
	display: block;
	position: relative;
	background-color: #009900;
	min-height: 100px;
}

.column-center {
	width: calc(72% - 32px);
	margin-top: 64px;
	margin-bottom: 16px;
	margin-left: auto;
	margin-right: auto;
	display: block;
	position: relative;
	max-width: 700px;
	min-height: 100px;
}

.column-center2 {
	width: calc(100% - 32px);
	margin-top: 64px;
	margin-bottom: 16px;
	margin-left: auto;
	margin-right: auto;
	display: block;
	position: relative;
	
	min-height: 100px;
}

.column-center-wide {
	width: calc(75% - 32px);
	margin-top: 64px;
	margin-bottom: 16px;
	margin-left: auto;
	margin-right: auto;
	display: block;
	position: relative;
	
	min-height: 100px;
}


#footer-container {
	position: relative;
	height: auto;
	width: 100vw;
	background-color: #ffffff;
	 z-index: 10;
}

#footer {
	position: relative;
	height: auto;
	min-height: 20vh;
  z-index: 10;
	max-width: 1200px; 
	width: 100%; 
	margin-left: auto; 
	margin-right: auto;
}

#footer-content {
	margin-left: 16px;
	margin-top: 16px;
	margin-right: 16px;
	margin-bottom: 16px; 
}


#left-box {
	left: 0; 
	width: calc((100vw - 1200px) + 20px); 
	min-width: 32px; 
	max-width: 400px; 
	height: 80px; 
	background-color: #ffffff; 
	z-index: 10; 
	position: absolute; 
	transform: translateX(-30%);
	display: block;
}


#polygon {
	position: absolute; 
	left: 87px; 
	height: 80px; 
	z-index: 10;
	display: block;
}

#lower-poly {
	bottom: 0; 
	height: 80px; 
	width: 100vw; 
	transform: translateX(75%); 
	position: absolute; 
	z-index: 10;
	display: block;
}

#mission {
	font-size: 60px;
	margin: 28px 16px 28px 16px; 
	font-family: val-header; 
	color: #000000; 
	line-height: 30px;
	letter-spacing: 4px;
}

#graphic {
	display: block;
	height: 180px;
}

#graphic-about {
	display: block;

}

#values-about {
	width: calc(75% - 24px);
}

#values {
	width: calc(50% - 24px);
}

#big-text {
	font-size: 80px; 
	font-family: val-header;  
	line-height: .8em; 
	position: absolute; 
	top: 50%; 
	transform: translate(-50%, -50%); 
	margin-left: 16px;
	left: 50%;
	width: 60vw;
	max-width: 600px;
	height: auto;
	max-height: 300px;
}

#big-text-about {
	font-size: 80px; 
	font-family: val-header; 
	color: #ffffff; 
	line-height: .8em; 
	position: absolute; 
	top: 50%; 
	transform: translateY(-50%); 
	text-align: center;
	width: 100%;
}

	#token {
		width: 80px;
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 16px;
		float: left; 
		clear: none; 
		display: block; 
		position: relative;
	}

#menu {
	position: absolute;
	right: 16px;
	top: -4px;
	height: 18px;
	width: 18px;
	display: none;
	z-index: 3;
}

#menu-overlay {
	z-index: 20; 
	top: 0;
	bottom: 0;
	left: 0;
	right: 0; 
	position: fixed; 
	background-color: rgba(0, 0, 0, .85); 
	display: none;
}


#howWeRoll-text {
	font-family: val-font; 
	text-transform: uppercase; 
	text-align: center; 
	font-size: 20px; 
	margin-bottom: 0; 
	color: #ffffff; 
	z-index: 40; 
	position: absolute; 
	margin-left: 60%; 
	margin-top: 56px;
}

#howWeRoll-image {
	height: 200px; 
	overflow: hidden;
}

#support2 {
	overflow: hidden; 
	background-image: url('vet-fest_001.jpg'); 
	background-position: 50%,50%;
	background-size: cover;
	display: block;
}

#support1 {
	width: calc(50% - 24px);
	margin-top: 16px;
	margin-bottom: 16px;
	margin-left: 16px;
	display: block;
	position: relative;
	background-color: #009900;
	min-height: 100px;
	float: left;
}

#support3 {
	width: calc(50% - 24px);
	margin-top: 16px;
	margin-bottom: 16px;
	margin-left: 16px;
	display: block;
	position: relative;
	background-color: #009900;
	min-height: 100px;
	float: left;
}

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

	#mission {
		font-size: 40px;
		line-height: 20px;
	}

	.column-center {
		width: calc(80% - 32px);
	}

	.column-center-wide {
		width: calc(80% - 32px);
	}



}






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

		#graphic {
			display: none;
		}
	
	#our-values-right {
		visibility: visible;
		display: block;
	}

	#values-about {
			width: calc(100% - 24px);
		}	
	
	#values {
			width: calc(100% - 24px);
		}

		.column2-small  {
			width: calc(100% - 24px);
		}

		#menu-bar {
			display: none;
		}

		#menu {
			display: block;
		}
	
		#big-text-about {
			font-size: 60px; 

		}

	
	#support1 {
		width: calc(100% - 24px);

	}
	
	#support3 {
		width: calc(100% - 24px);

	}
	
		#howWeRoll-text {
			margin-left: 50%; 
			margin-top: 40px;
		}
	
}

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

		#howWeRoll-image {
			height: 120px; 
			
		}
	
	#support2 {
		display: none;
	}
	
	
}


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

		#tag-line {
			width: 240px; 
		}

		#mission {
			font-size: 28px;
			line-height: 18px;
		}



			#token {
				width: 80px;
				margin-left: auto;
				margin-right: auto;
				float: none;
			}

			.column-center-wide {
				width: calc(100% - 32px);
			}

			.column-center {
				width: calc(100% - 32px);
			}

		#howWeRoll-image {
			height: 80px; 
		}
	
		#howWeRoll-text {
			margin-left: 50%; 
			margin-top: 20px;
		}
}


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



			.column4 {
				width: calc(50% - 20px);
				margin-top: 16px;

				margin-left: 16px;
			}

}

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

					#mission {
						font-size: 18px;
						line-height: 18px;
					}

}











#sentinel {
	width: 80px;
	margin-left: auto;
	margin-right: auto;
	margin-top: -40px;
	height: 80px;

}

#stearing {
	width: 80px;
	margin-left: auto;
	margin-right: auto;
	margin-top: -40px;
	height: 80px;
}

#outreach {
	width: 80px;
	margin-left: auto;
	margin-right: auto;
	margin-top: -40px;
	height: 80px;
}