@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);

html{
  height: 100%;
  width: 100%;
  margin: 0;
  padding:0;
  overflow-y: hidden;
  font-family: Open Sans;
  font-weight: 300;
  background-color: #16161d;
}
body{
  width: 100%;
  height: 100%;
  margin: 0;
  font-size: 16px;
  overflow: hidden;
}
h1{
  font-weight: 300;
  font-size: 200%;
}
h2{
  font-weight: 300;
  font-size: 130%;
}
.clearfix{
  clear: both;
}
.text{
  font-size: 1.3vw;
  margin-left: 2.5em;
}
.logo{
	width: 30%;
  z-index: 4;
  margin-left: 2em;
  position: absolute;
}
.home{
  height: 100%;
}
#intro{
  margin-top: 40vh;
  font-size: 100%;
}
.home-desc{
  color: rgba(255,255,255,0.8);
  position:absolute;
  top: 0;
  width: 100%;
  height: 100%;
  font-size: 1.5em;
}
.mobile-svg{
  display:none;
}
.home-poly{
  shape-outside: polygon(35% 0, 100% 0, 100% 100%, 60% 100%);
  -webkit-shape-outside: polygon(35% 0, 100% 0, 100% 100%, 60% 100%);
  float: right;
  width: 100%;
  height: 100%;
  margin-right: 20px;
}
.about-options, .news-options{
	position: absolute;
	z-index: 50;
  top: 0;
}
.about-options li, .news-options li{
  list-style-type: none;
  color: rgba(255,255,255,1);;
  background-color: rgba(0,0,0,0.6);
  margin: 0.5em;
  padding: 0.8em; padding-top: 0.4em; padding-bottom: 0.4em;
  display: inline-block;
  border-style: solid;border-width: 1px;border-color: rgba(255,255,255,1);
  cursor:hand;cursor:pointer;
}
.about-options li:hover, .news-options li:hover{
  border-style: solid;border-width: 1px;border-color:rgba(125,220,151,1);
  color:rgba(125,220,151,1);
}
.about-options li h2, .news-options li h2{
  margin: 0;
  font-size: 125%;
}
.contact{
  font-weight: 400;
  bottom:5vw;
  margin-left: -5vw;
  width: 100%;
  position: absolute;
  text-align: right;
}
#contact-text{
  font-size: 1vw;
}
.landing{
  z-index: -50;
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 100vw;
	
  /* Set up proportionate scaling */
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}
.green{
  color:rgba(125,220,151,1);
}
#aboutabt, #eventsevents{
  border-style: solid;border-width: 1px;border-color:rgba(125,220,151,1);
  color:rgba(125,220,151,1);
}
.comm-mobile{
  display: none;
  color: rgba(255,255,255,0.9);
  position: absolute;
}
.comm, .links, .camps, .others{
  display: none;
  color: rgba(255,255,255,0.9);
  position: absolute;
  top: 0;
  width: 100%; height: 100%;
}
.comm li, .comm-mobile li{
  display: inline-block;
  overflow: hidden;
  height: 10vh;width: 20vw;
  margin-right: 1vh;margin-bottom: 1vh;padding: 1.5vh;
  background-color: rgba(0,0,0,0.8);
}
.comm h1,.comm-mobile h1{
  margin: 0;
  font-weight: 400;
  font-size: 1.5vw;
}
.comm p, .comm-mobile p{
  margin: 0;
  font-weight: 400;
  font-size: 1vw;
  font-style: italic;
  opacity: 0.7;
  position: absolute;
}
.comm-p-last{
  position: absolute;
}
.comm li:hover{
  cursor:hand;cursor:pointer;
}
.comm-p-last{
  display:none;
}
.comm li:hover .comm-p-first{
  display: none!important;
}
.comm li:hover .comm-p-last{
  display: block!important;
}
.comm img, .comm-mobile img{
  display:none;
  width: 40px;
  /*display: inline-block;*/
  opacity: 0.8;
  vertical-align:top;
}
.comm li div, .comm-mobile li div{
  display: inline-block;
  vertical-align:top;
  margin-left: 0.5em;
}
.links a{
  text-decoration: none;
  color: rgba(255,255,255,0.6);
}
.links a:hover{
  color:rgba(125,220,151,1);
}
.camps,.others{
	color: rgba(255,255,255,0.8);
	display: none;
	position: absolute;
}
.camps ul,.others ul{
	list-style-type: none;
	padding: 0;
}
.camps p,.others p{
	position: fixed;
	font-size: 2.5vh;
	margin-top: 0;
	opacity: 0;
	width: 15%;
}
.camps img,.others img{
	width:100%;
	}
.camps li, .others li{
	display: inline-block;
	overflow: hidden;
  width: 15%;
	padding: 1em;
	background-color: rgba(0,0,0,0.5);
	margin-right: 0.5em;margin-bottom: 0.5em;
	vertical-align:top;
}
.camps li:hover img, .others li:hover img{
	opacity: 0;
	transition: opacity 0.5s;
	-moz-transition: opacity 0.5s;
	-webkit-transition: opacity 0.5s;
	}
.camps li:hover p, .others li:hover  p{
	opacity: 1;
	transition: opacity 0.5s;
	-moz-transition: opacity 0.5s;
	-webkit-transition: opacity 0.5s;
	}
.camps li:hover	h1, .others li:hover h1{
		opacity: 0;
  transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
		}

.camps h1, .others h1{
	font-size: 100%;
	font-weight: 400;
	color: rgba(255,255,255,1);
	margin-bottom: 0;
	}

.camps li:hover,.others li:hover{
	background-color:rgba(0,0,0,0.8);
	}
.gallery{
	width:100%;
	height: 100%;
	}
#thumbs{
  position: absolute;
	list-style-type: none;
	width: 80%;
  margin-left: 10%;
	margin-top: 8vw;
  padding: 0!important;
}
#thumbs li{
  display: inline-block;
  overflow: hidden;
  width: 6vw; 
  height: 6vw;
  margin: 0;
  padding:0;
  position: relative;
}
#thumbs li:hover{
	opacity: 0.5;
	cursor:hand;cursor:pointer;
	outline:1px solid rgba(125,220,151,1);
}
#thumbs li img{
  left: -1000%;
  right: -1000%;
  top: -1000%;
  bottom: -1000%;
  margin: auto;
  position: absolute;
  height: 100%;min-width:100%;
}
#slideshow{
	overflow: hidden;
	list-style-type: none;
	padding:0; margin: 0;
	height: 100%; width: 100%;
  text-align: center;
}
#slideshow li{
	height: 100%;
}
#slideshow img{
	max-height: 75vh;
  max-width: 80vw;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.slide-wrap{
  display: none;
	text-align:center;
	position: absolute;
	width: 100%; 
  height: 100%;
  background-color: rgba(0,0,0,0.9);
  z-index:999;
	}
.comp{
  display: none;
}
.arrows{
	position: fixed;
  top: 45%;
  width: 75%;
  margin-left: 12.5%;
}
.arrows img{
  height: 5vw;
  width: 5vw;
}
.prev{
  float: left;
}
.next{
  float: right;
}
.green-border{
	outline:2px solid rgba(125,220,151,0.8);
}
#twenty-fifteen{
border-style: solid;border-width: 1px;border-color:rgba(125,220,151,1);
  color:rgba(125,220,151,1);
}
.fifteen, .fourteen, .thirteen, .twelve, .eleven, .ten, .nine{
	position: absolute;
	list-style-type: none;
}
.fifteen li, .fourteen li, .thirteen li, .twelve li, .eleven li, .ten li, .nine li{
	display: inline-block;
	width: 7.5em;
	padding: 1em;
	font-size: 1.8vw;
	margin-right: 0;margin-bottom:.25em;
	background-color: rgba(0,0,0,0.8);
	text-align:center;
	color: rgba(255,255,255,0.8);
}
.fifteen a, .fourteen a, .thirteen a, .twelve a, .eleven a, .ten a, .nine a{
	text-decoration: none;
	color: rgba(255,255,255,1);
}
.fifteen li:hover, .fourteen li:hover, .thirteen li:hover, .twelve li:hover, .eleven li:hover, .ten li:hover, .nine li:hover{
	outline:2px solid rgba(125,220,151,0.8);;
  color:rgba(125,220,151,0.8);
}
.nav{
  width: 60%;
  color: rgba(255,255,255,1);
  position: fixed;
  bottom: 0;
  z-index: 999;
}
.nav li{
  list-style-type: none;
  background-color: rgba(0,0,0,0.4);
  margin: 0.5em;
  padding: 0.8em; padding-top: 0.4em; padding-bottom: 0.4em;
  display: inline-block;
  font-size: 1.5vw;
  border-style: solid;border-width: 1px;border-color: rgba(255,255,255,1);
  cursor:hand;cursor:pointer;
}
.nav li:hover{
  border-style: solid;border-width: 1px;border-color:rgba(125,220,151,1);
  color:rgba(125,220,151,1);
}
.nav a{
  text-decoration: none;
  color: rgba(255,255,255,1);
}

/*===========================BACKGROUND===========================*/
@media screen and (max-width : 1366px ){ /* Specific to this particular image */
  .landing{
    left: 50%;
    margin-left: -683px;   /* 50% */
  }
}

/*===========================IE SPECIFIC===========================*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
  .home-poly{
    display: none;
  }
  .home-desc{

    width: 35%;

    overflow: hidden;

  }

}



/*===========================MOBILE===========================*/
@media all and (orientation:portrait) {
  /* Styles for Portrait screen */
  .home-poly, .normal-shape{
    display: none!important;
  }
  .mobile-svg{
    display: block;
    position: absolute;
    bottom: 0;
  }
  .landing{
    opacity: 0.3!important;
    height: 100%;
  }
  .logo{
    width:80%;
    margin-left: 8%;
  }
  .about-options, .news-options{
    width:100%;
    text-align: center;
    padding:0;
    margin-top: 5%;
  }
  .about-options li h2, .news-options li h2{
    font-size: 2.5vh;
  }
  .about-options li{
    margin: 1em;
    padding: 0.8em; padding-top: 0.4em; padding-bottom: 0.4em;
  }
  .news-options li{
    padding: 0.8em; padding-top: 0.4em; padding-bottom: 0.4em;
  }
  #mobile-about-text, #mobile-events-info{
    color:rgba(255,255,255,0.9);
    font-size: 2.2vh!important;
    margin-top: 20vw!important;
    text-align: left;
  }
  #mobile-about-links{
    padding-left: 2em;
    margin-top: 20vw!important;
  }
  #mobile-about-links a{
    font-size: 3vw!important;
    color:rgba(255,255,255,0.8);
  }
  #mobile-about-links span{
    font-size: 3.5vw!important;
  }
  #mobile-about-comm{
    margin-top: 20vw!important;
    text-align: center;
    width: 100%;
    padding-left: 0;
  }
  #mobile-about-comm h1{
    font-size: 2.5vw!important;
    text-align: left;
  }
  #mobile-about-comm p{
    font-size: 1.7vw!important;
    text-align: left;
  }
  #mobile-about-comm li{
    text-align: left;
    height: 6vh; width: 40%;
    margin-right: 0.2em;margin-bottom: 0;padding: 0.5em;
    background-color: rgba(0,0,0,0.8);
  }
  .contact{
    opacity: 1!important;
    font-weight: 600!important;
    margin-left: 0;
    bottom: 20vh;
    color:rgba(125,220,151,1);
  } 
  #contact-text{
    font-size: 1.5vh!important;
  }
  #thumbs li{
    width: 8vh;
    height: 8vh;
  }
  .line{
    background-color:rgba(125,220,151,0.7)!important;
  }
  #widen{
    margin-left:2%;
    padding:0;
    width: 98%!important;
  }
  .camps ul, .others ul{
    margin-top: 20vh!important;
  }
  .camps p,.others p{
    font-size: 1.5vh;
    margin-top: 0;
    opacity: 0;
    width: 28.5%;
  }
  .camps li, .others li{
    width: 28.5%;
    padding: 1em;
    background-color: rgba(0,0,0,0.5);
    margin-right: 0.5em;margin-bottom: 0.5em;
    vertical-align:top;
  }
  .camps h1, .others h1{
    font-size: 2vw;
    font-weight: 400;
    margin-bottom: 0;
  }
  .nav{
    width: 100%;
    text-align: center;
    bottom: 5%;
  }
  .nav li{
    margin: 0.5em;
    padding: 0.8em; padding-top: 0.4em; padding-bottom: 0.4em;
    display: inline-block;
    font-size: 2.5vh;
    border-style: solid;border-width: 1px;border-color: rgba(255,255,255,1);
    cursor:hand;cursor:pointer;
  }
  .home-desc{
    text-align: center;
    font-size: 2.5em;
    color:rgba(125,220,151,1);
    font-style: italic;
    width: 100%!important;
  }
  #intro{
    margin-top: 50vh!important;
    font-size: 3.6vh;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
  }
  .text{
    margin-left: 10%;
    width: 80%;
  }
  #thumbs{
    margin-top: 20vw;
  }
  .arrows img{
    height: 5vh;
    width: 5vh;
  }
  .fifteen, .fourteen, .thirteen, .twelve, .eleven, .ten, .nine{
    margin-top: 20vh!important;
    padding: 0;
    text-align: center;
    width: 100%;
  }
  .fifteen li, .fourteen li, .thirteen li, .twelve li, .eleven li, .ten li, .nine li{
    width: 25%!important;
    padding: 1em;
    font-size: 2.5vh;
    margin-right: 0;margin-bottom:.25em;
    background-color: rgba(0,0,0,0.8);
    text-align:center;
    color: rgba(255,255,255,0.8);
  }
}
/*===========================NOT SUPPORTED===========================*/
@supports not ((shape-outside: none) and (-webkit-shape-outside: none)) {

  .home-poly{

    display: none;

  }

  .home-desc{

    width: 35%;

    overflow: hidden;

  }

}