@import url(https://fonts.googleapis.com/css?family=Raleway);
 									/* FONT IMPORT */


/* Note that the following CSS code applies to all HTML, even code indirectly included by PHP. */

/* -------GENERAL------- */

/* The background of the website is (#E4E4E4)(Off White / Light Gray) */
body {
background-color:#E4E4E4;
font-family: 'Trebuchet MS', sans-serif; /* Lato is very similar to Trebuchet MS, and so far people I've asked like Trebuchet MS better */
margin:0px;
overflow-x:hidden;
overflow-y:auto;
width: 100vw;
}
.wrapper {
  max-width: 1200px;
  margin: auto;
}
/* Now to make our links seem less archaic... */
a:link {
color: #000;
text-decoration:none;
}
a:visited {
color: #111;
text-decoration:none;
}
a:hover {
color: #006200;
font-weight:bold;
}

/* We don't need bullets. At least not yet. */
ul {
list-style-type: none;
padding:0px;
}

/* For thumbnail picture previews... */
img.thumb{
height:300px;
}

/* For embedded YouTube videos... */
.video {
display:block;
margin-left:auto;
margin-right:auto;
    width: 100%;
    height: 100%;
}

/* Blue banners */
.award{
background-color:darkblue;
color:white;
padding:2vw;
}

/* -------HEADER------- */

/* When the viewport is smaller than 550px wide, the navigation items will collapse into an expandable overflow. */
@media(max-width: 550px) {
div.header_item {
  display:none;
  }
#overflow {
  display:table-cell;
  padding:7px;
  }
}
@media(min-width: 550px) {
div.header_item {
  display:table-cell;
  }
div#overflow {
  display:none;
  }
}

/* The background color (#000)(Jet Black) of the header extends to each side of the screen. (Excludes Search Bar) */
header {
background-color:#000;
width:100vw;
display:table;
position:fixed;
z-index:1806;
}

/* The S.W.A.T. logo will be on the left of the header. */
#logo {
float:left;
display:table-cell;
padding:7px;
}

/* Each of the items in the header will be aligned horizontally. Note: Because of the oddities of the "float:right;" property, the navigation items in the html are actually backwards. For the sake of clarity, I have included the order in which the pictures actually appear in the name of each picture. */
.header_item {
width:35px;
float:right;
padding:7px;
}

/* The whitespace div allows for more space on each end of the header, so that it is less crowded. */
.whitespace {
display:table-cell;
position:relative;
width:23px;
}

/* The overflow button appears instead of header items when necessary. */
#overflow {
position:relative;
height:35px;
float:right;
display: inline-block;
}

/* All icons in the header have a height of 35px. */
img.icon {
height:35px;
}

/* The search bar descends from the header when the search icon is clicked. */
#search_bar {
position:fixed;
z-index:1000;
width:372px;
top:39px;
right:10px;
}

/* -------FOOTER------- */

/* The footer contains a sitemap and contact information. */
#footer {
background-color:#d0d0d0;
width:100vw;
height:223px;
display:table;
}

/* The sitemap should include links to all relevant pages on the site. */
.sitemap {
width:25%;
display:table-cell;
text-align:center;
font-size:112%;
}
.social-sitemap {
width:25%;
display:table-cell;
text-align:center;
font-size:112%;
}

/* -------HOMEPAGE------- */

/* When the viewport is smaller than 1025px wide, the caption will move below the picture. */
  #caption p {
    padding-left: 20px;
  }
@media(max-width: 1025px) {
  #caption_wrapper {
  overflow:hidden;
  }
  #caption {
  background-color:#006200;
  width:100%;
  position:initial;
  font-size:150%;
  }
  .tile_wrapper {
  width:100%;
  }
}
@media(min-width: 1025px) {
#caption {
  background-color:#006200;
  background-color:rgba(0,98,0,.85);
  width:410px;
  position:absolute;
  font-size:200%;
  }
.tile_wrapper {
  display:table-cell;
  width:33vw;
  padding:1vw;
  }
}
.tile_wrapper:nth-child(3) {
  padding-right:-200;

}

/* You can't see the 52-pixel-tall ninja, but it still has an important job. */
#ninja {
height:53px;
}

/* The main image is front and center. It should be a header's height (theoretically 49px, actually 53px for some reason) down from the top, so that the top of the picture starts at the bottom of the header. Note: When replacing the main picture, make sure that it has an aspect ratio similar to the current one. */
#main_photo {
    padding: 0px;
    margin: 0px;
    height: 80vh;
    width: 100vw;
    background-size: cover;
    background-position: center;
    -webkit-transition:all 1s ease-in;
    -moz-transition:all 1s ease-in;
    -o-transition:all 1s ease-in;
    -ms-transition:all 1s ease-in;
    transition:all 1s ease-in;
}

/* The caption wrapper is used to position the caption. */
#caption_wrapper {
width:100%;
position:relative;
bottom:4px;
}

/* The caption is either on or below the picture, and is most likely the first 


 read by the site visitor. */
#caption {
padding:1px;
color:#dedede;
bottom:30px;
left:30px;
}

/* The featured 
 will be located below the main photo. */
#featured {
position:relative;
width:100%;
display:table;
bottom:4px;
}

/* The tile wrapper will be used to position the tiles. */
.tile_wrapper {
text-align:center;
}

/* The featured content will be contained in a series of tiles. */
div.tile {
height:279px;
background-color:gray;

}

p.tile {
font-size:350%;
transform:translate(0,170%);
}

/* Now to make our links seem less archaic... */
a.tile:link {
color: #fff;
text-decoration:none;
}
a.tile:visited {
color: #eee;
text-decoration:none;
}
a.tile:hover {
color: #006200;
font-weight:bold;
}

/* Content divisions will be centered and will be 90% of the width of the page. */
#content {
width:90vw;
min-height:71vh;
margin-left:auto;
margin-right:auto;
}
	
/* -------SPONSORS------- */

.square {
  position: relative;
  z-index:-9999;
  width:90vw;
  padding-bottom:25%;
  margin:1vw;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:contain;
}

.small {
  width:45vw;
}

@media(min-width: 550px) {
  .square {
  float:left;
  padding-bottom:15%;
  width:28vw;
  }
  .small {
  width:20vw;
  }
}
.img_1-1{background-image:url('../images/sponsor_logos/Darrell-Smith.png');z-index: 10; position: relative; }
.img_1-2{background-image:url('../images/sponsor_logos/Labconco.png'); z-index: 10; position: relative; }
.img_1-3{background-image:url('../images/sponsor_logos/CommunityAmerica.png'); z-index: 10; position: relative; }

.img_2-1{background-image:url('../images/sponsor_logos/CitizensBank&Trust.png'); z-index: 10; position: relative;}
.img_2-2{background-image:url('../images/sponsor_logos/Wesco.png'); z-index: 10; position: relative;}
.img_2-3{background-image:url('../images/wireco.png'); z-index: 10; position: relative;}

.img_3-1{background-image:url('../images/sponsor_logos/Chuck-Hitchborn.png');}
.img_3-2{background-image:url('../images/sponsor_logos/Paul-and-Dawn-Clouse.png');}
.img_3-3{background-image:url('../images/sponsor_logos/MainlineTaxi.png'); z-index: 10; position: relative;} 

.img_4-1{background-image:url('../images/sponsor_logos/HDR.png'); z-index: 10; position: relative;}
.img_4-2{background-image:url('../images/sponsor_logos/Earl-and-Diane-Soetaert.png');}
.img_4-3{background-image:url('../images/sponsor_logos/Denny-and-Nancy-Lowe.png');}
.img_4-4{background-image:url('../images/sponsor_logos/Your-Logo-Here.png');}

.img_5-1{background-image:url('../images/sponsor_logos/PlatteValleyBank.png'); z-index: 10; position: relative;}
.img_5-2{background-image:url('../images/sponsor_logos/Your-Logo-Here.png');}
.img_5-3{background-image:url('../images/sponsor_logos/Your-Logo-Here.png');}
.img_5-4{background-image:url('../images/sponsor_logos/Your-Logo-Here.png');}

.square_dividers {
width: 500px;
height:5px;
background-color: #ADADAD;
}

/* -------MOBILE HEADER------- */

#mobile_header {
 position: absolute;
  /* padding: 20px; */
  width: 150px;
    height: 9em;
  background: #000;
  float: left;
  right: 0vw;

}
#mobile_text {
	position:relative;
	padding: 20px;
	color: white;
	right: -30px;
	bottom: 15px;
	font-size:23px;
	text-align: center;
	line-height: 170%;	
}
/*QUICK AND DIRTY */ a.mobile_header:link {color:#fff;}
/*QUICK AND DIRTY */ a.mobile_header:visited {color:#fff;}

/*Adding this bc footer broken everywhere, but really jacks up mobile, temp fix, maybe ghetto but YOLO AMIRITE? */

@media(max-width: 550px) {
.social-sitemap {
display:none
}
}

/* AYY NEWLETTER */
/* This is the grid setup, change color and container here */
/*Basic Grid Styles*/
/* Changes were made. Please don't burn me at the stake.*/
.Grid {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
}

.u-textCenter {
  text-align: center;
}

.Grid-cell {
  flex: 1;
}

.Demo {
    padding: .8em 1em 0;
    margin-bottom: 1em;
    background-color: #d0d0d0;
    transition: 0.3s ease;
    border: 2px solid #969696;
    font-family: Lato;
    font-weight: bold;
    /* font-size: 20px; */
    font-size: 20px;
    border-radius: 3px;
    min-height: 25vh;

}
.Demo:after {
  content: "";
  display: block;
  margin-top: .8em;
  height: 1px;
}
.Demo:hover {
  transition: 0.3s ease;
  background: #969696;
}

.Demo.Holly {
  background: rgba(102, 51, 255, 0.1);
}
.Demo.Holly:hover {
  background: rgba(102, 51, 255, 0.25);
}

/* With gutters*/
.Grid--gutters {
  margin-left: -1em;
}
.Grid--gutters .Grid-cell {
  padding-left: 1em;
}
.Grid--gutters .Grid--nested .Grid-cell:first-of-type .Demo {
  margin-right: 1em;
}

/* Justify per row*/
.Grid--right {
  justify-content: flex-end;
}

.Grid--center {
  justify-content: center;
}

/* Alignment per row */
.Grid--top {
  align-items: flex-start;
}

.Grid--bottom {
  align-items: flex-end;
}

.Grid--center {
  align-items: center;
}

/* Alignment per cell */
.Grid-cell--top {
  align-self: flex-start;
}

.Grid-cell--bottom {
  align-self: flex-end;
}

.Grid-cell--center {
  align-self: center;
}
.newsletter-thumbnail-size {
	height: 90%;
    width: 87%;
}




/* -----2016 Stronghold----- */

#video{
    text-align:center;
}

#Dates {
	border-style:solid;
	border-width:2px;
	border-color:#336600;
	background:#d0d0d0;
}

@media only screen and (max-width: 700px) {
	#Stronghold {
		width:100%;
		height:40vh;
	}
}
.video_size{
}

/* -----History----- */

#Game_Pic {
	border-style:solid;
	border-width:2px;
	border-color:#336600;
	float:left;
	height:230px;
	width:370px;
	margin: 15px 15px 15px 15px;
	padding: 5px 5px;
	
}


/*----- About -----*/

#Cowtown {
	padding-top: 75px;
	border-style: solid;
	border-width: 2px;
	border-color:#000000;
	float:left;
	height:5vw
	width:10vw;
}