/* Hiker's Guide CSS
==================================================
================================================== */

html{
	font-size: 62.5%;
}

body{
	background: #222222;
	color: #888888;
	font: 16px/1.25 "Program OT", Arial, sans-serif;
	position: relative;
}



/* TYPOGRAPHY ================================== */
h1, h2{
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
}

h1{
	font-size: 40px;
	color: #16A085;
}

h2{
	font-size: 35px;
}

section > h2{
	margin-left: 280px;
}

strong, em{
	color: #666666;
}

h2 strong{
	color: #16A085;
	display: inline-block;
	font-size: 2em;
}

h3{
	color: #CCCCCC;
	font: 20px "Georgia Bold", Arial, sans-serif;
}

h4{
	color: #AAAAAA;
	font: 14px "Program OT Bold", Arial, sans-serif;
}

h5{
	font-weight: bold;
}

p{
	color: #888888;
	font: 10px "Program OT Book", Arial, sans-serif;
}

figure{
	margin: 0;
	padding: 0;
}



/* BASE STRUCTURE =============================== */
body > section:nth-of-type(even){
	background-color: #444444;
}

.container, body > section:nth-of-type(odd){
	margin-left: auto;
	margin-right: auto;
}

.container{
	position: relative;
}



/* HEADER ================================== */
header{
	left: 0;
	margin: 8% auto 0;
	max-width: 1500px;
	position: absolute;
	z-index: 999;
	right: 0;
	top: 0;
}
/*LOGO*/
header figure{
	/* background: url(../images/hikersGuide.png) no-repeat; */
	clear: both;
	float: left;
	width: 10%;
}

header figure h3{
	color: #16A085;
	font-weight: bold;
	text-transform: uppercase;
}

/*NAVIGATION*/
nav{
	float: right;
	width: 600px;
}

nav ul li{
	border-right: .1px solid #EEEEEE;
	float: left;
	padding: 1% 3%;
	text-align: center;
}

nav ul li:nth-child(4), nav ul li:last-child{
	border-right: 0;
}

nav ul li:last-child a img{
	float: left;
	margin-top: -15%;
}

nav ul li:last-child a:last-child{
	margin-left: 7%;
}

nav ul li a, #mainContain > section:nth-child(2) > article:nth-child(1) > div, #mainContain > section:nth-child(2) section:nth-child(2) ul{
	opacity: .5
}

nav ul li a{
	color: #EEEEEE;
	font-size: 1em;
	font-weight: bold;
	opacity: .5;
	text-transform: uppercase;
}

nav ul li a:hover, .currentLink, #mainContain > section:nth-child(2) > article:nth-child(1) > div:hover{
	opacity: 1;
}

nav ul li a:active{
	color: #16A085;
}



/* FOOTER =============================== */
footer{
	bottom: 0;
  position: absolute;
  z-index: 3;
  margin: 0 auto;
	padding: 1%;
  left: 0;
  right: 0;
	background: #444444;
	opacity: .9;
}

footer section{
	text-align: center;
	margin: 0 auto;
	width: 60%;
}

footer section p{
	float: left;
}

footer ul{
	float: right;
	width: 38%;
}

footer ul li{
	float: left;
	height: 30px;
	margin-right: 5%;
	width: 30px;
}

footer ul li:nth-child(1){
	background: url(../images/facebook.png) no-repeat 0 0 / cover;
}

footer ul li:nth-child(2){
	background: url(../images/twitter.png) no-repeat 0 0 / cover;
}

footer ul li:nth-child(3){
	background: url(../images/youtube.png) no-repeat 0 0 / cover;
}

footer ul li:nth-child(4){
	background: url(../images/google.png) no-repeat 0 0 / cover;
}

footer ul li:nth-child(5){
	background: url(../images/instagram.png) no-repeat 0 0 / cover;
}



/* HOME =============================== */
#mainContain > section:nth-child(2), #eventContain{
	height: 950px;
	position: relative;
}

#destContain, #connectContain, #loginContain{
	display: inline-block;
	height: 100%;
}

#destContain > section, #eventContain > section, #connectContain > section, #loginContain > section{
	display: inline-block;
	/* height: 100%; */
	/* padding-bottom: 50%; */
	/* position: relative; */
	margin-top: 370px;
	width: 100%;
}

#destContain > section > section, #eventContain table, #loginContain > section form{
	margin: 60px auto 35px;
}

#destContain > section, #connectContain > section{
	display: flex;
	flex-direction: column;
	margin-bottom: 150px;
}

#connectContain section > section form, #loginContain section form{
	background: #888888;
	padding: 2% 2%;
}

#connectContain section > section form p, #loginContain section form p{
	font-size: 1em;
	font-weight: bold;
	color: #FFFFFF;
	margin-bottom: 3%;
}

input:focus, textarea:focus{
	border: solid 1px #16A085;
	outline: 0;
}

#connectContain section > section form h2, #loginContain section form h2{
	color: #000000;
}

#connectContain section > section form input, #connectContain section div form textarea, #loginContain section form input,
#loginContain section div form textarea{
	color: #000000;
	margin-bottom: 1%;
	margin-right: 1%;
	padding: 1%;
}

#connectContain section > section form input, #loginContain section form input{
	width: 32.3%;
}

#connectContain section > section form input:last-child, #loginContain section form input:last-child{
	clear: right;
}

#connectContain section > section form textarea, #loginContain section form textarea{
	width: 100%;
}

#connectContain section > section form input[placeholder], #loginContain section form input[placeholder]{
	color: #000000;
}


#mainContain > section:nth-child(2) > article:nth-child(1){
	left: 0;
	margin: 0 auto;
	max-width: 1550px;
	position: absolute;
	right: 0;
	top: 370px;
	z-index: 3;
}

/* #mainContain > section:nth-child(2) > article:nth-child(1) .arrows{
	display: flex;
	flex-direction: row;
	height: 40px;
	justify-content: space-between;
}

#mainContain > section:nth-child(2) > article:nth-child(1) .arrows div{
	cursor: pointer;
	height: 40px;
	width: 40px;
}

#mainContain > section:nth-child(2) > article:nth-child(1) .arrows div:nth-child(1){
	background: url(../images/left.png) no-repeat;
	float: left;
} */

#mainContain > section:nth-child(2) > article:nth-child(1) section:nth-child(1), #mainContain > section:nth-child(2) > article:nth-child(1) section:nth-child(2),
#mainContain > section:nth-child(2) > article:nth-child(1) section:nth-child(3), #mainContain > section:nth-child(2) > article:nth-child(1) section:nth-child(4){
	display: none;
	opacity: 0;
	position: absolute;
	right: 100px;
	top: 38px;
	width: 600px;
	z-index: 4;
}

#mainContain > section:nth-child(2) > article:nth-child(1) section article{
	background: #222222;
	border-right: solid 6px #16A085;
	/* display: none;
	opacity: 0; */
	padding: 40px 25px 25px;
	/* position: absolute; */
	/* right: 100px; */
	/* top: 38px; */
	/* width: 600px; */
	/* z-index: 4; */
}

/* #mainContain > section:nth-child(2) > article:nth-child(1) section:nth-child(2){
	display: block;
	opacity: 1;
} */

#mainContain > section:nth-child(2) > article:nth-child(1) section.previous{
	display: block;
	opacity: 1;
	z-index: 4;
}

#mainContain > section:nth-child(2) > article:nth-child(1) section.current{
	display: block;
	opacity: 1;
	z-index: 5;
}

#mainContain > section:nth-child(2) > article:nth-child(1) section article h2{
	border-bottom: solid 1px #FFFFFF;
	border-top: solid 1px #FFFFFF;
	margin-bottom: 20px;
	padding: 10px;
	width: 80%;
}

#mainContain > section:nth-child(2) > article:nth-child(1) section article h3{
	margin-bottom: 5px;
}

/* #mainContain > section:nth-child(2) > article:nth-child(1) .arrows div:nth-child(2){
	background: url(../images/right.png) no-repeat;
	float: right;
} */

#mainContain > section:nth-child(2) > article:nth-child(1) .circleNav{
	list-style: none;
	margin: 0 auto;
	position: absolute;
	display: inline-block;
	padding-right: 10px;
	right: 0;
	top: 100px;
	z-index: 5;
}

#mainContain > section:nth-child(2) > article:nth-child(1) .circleNav li{
	background-color: rgba(255, 255, 255, .5);
	border-radius: 10px;
	cursor: pointer;
	height: 13px;
	margin-bottom: 5px;
	width: 13px;
}

#mainContain > section:nth-child(2) > article:nth-child(1) .circleNav li:hover{
	background-color: rgba(255, 255, 255, 1);
}

#mainContain > section:nth-child(2) > article:nth-child(1) .circleNav li:nth-child(1), #mainContain > section:nth-child(2) > article:nth-child(1) ul:nth-child(4)	li:nth-child(2), #mainContain > section:nth-child(2) > article:nth-child(1) ul:nth-child(4)	li:nth-child(3){
	margin-right: 4.5%;
}

#mainContain > section:nth-child(2) > article:nth-child(1) .circleNav .currentCir:hover{
	border: none;
	background: #FFFFFF;
}

#mainContain > section:nth-child(2) > article:nth-child(1) .circleNav .currentCir{
	border: none;
	background: #FFFFFF;
}

#mainContain > section:nth-child(2) > article:nth-child(1) .circleNav .previousCir{
	border: solid 2px #FFFFFF;
	background: transparent;
}

#mainContain > section:nth-child(2) > section:nth-child(2){
	margin: 0;
	min-height: 900px;
	min-width: 100%;
	top: 0;
	z-index: -1;
}

#mainContain > section:nth-child(2) section:nth-child(2) ul{
	margin: 0;
}

#mainContain > section:nth-child(2) section:nth-child(2) ul li{
	display: none;
	height: 100%;
	opacity: 0;
	position: absolute;
	min-height: 950px;
	width: 100%;
	z-index: 1;
}

#mainContain > section:nth-child(2) section:nth-child(2) ul li:nth-child(1){
	background: url(../images/hikers1001.jpg) no-repeat 0 0 / cover;
}

#mainContain > section:nth-child(2) section:nth-child(2) ul li:nth-child(2){
	background: url(../images/hikers1002.jpg) no-repeat 0 0 / cover;
}

#mainContain > section:nth-child(2) section:nth-child(2) ul li:nth-child(3){
	background: url(../images/hikers1003.jpg) no-repeat 0 0 / cover;
}

#mainContain > section:nth-child(2) section:nth-child(2) ul li:nth-child(4){
	background: url(../images/hikers1004.jpg) no-repeat 0 0 / cover;
}

#mainContain > section:nth-child(2) section:nth-child(2) ul li img{
	width: 100% !important;
	height: 100% !important;
}

#mainContain > section:nth-child(2) section:nth-child(2) > ul > li.previous{
	display: block;
	opacity: 1;
	z-index: 1;
}

#mainContain > section:nth-child(2) section:nth-child(2) > ul > li.current{
	display: block;
	opacity: 1;
	z-index: 2;
}

#mainContain > article:nth-child(3){
	height: 1500px;
	position: relative;
}

/* #mainContain > article:nth-child(3) > h2{
	display: none;
} */

#mainContain > article:nth-child(3) > section:nth-child(1){
	left: 0;
	margin: 0 auto;
	width: 1300px;
	position: absolute;
	right: 0;
	top: -40px;
	z-index: 99;
}

#mainContain > article:nth-child(3) > section:nth-child(1) > article{
	background: #111111;
	float: left;
	height: 600px;
	margin-bottom: 20px;
	margin-right: 50px;
	padding: 20px;
	width: 400px;
}

#mainContain > article:nth-child(3) > section:nth-child(1) > article img, #mainContain > article:nth-child(3) > section:nth-child(1) > article h2, #mainContain > article:nth-child(3) > section:nth-child(1) > article h3,
#mainContain > article:nth-child(3) > section:nth-child(1) > article p, #mainContain > article:nth-child(3) > section:nth-child(1) > article h4{
	margin-bottom: 10px;
}

#mainContain > article:nth-child(3) > section:nth-child(1) > article img{
	width: 100%;
}

#mainContain > article:nth-child(3) > section:nth-child(1) > article h2{
	font-size: 20px;
	line-height: 30px;
}

#mainContain > article:nth-child(3) > section:nth-child(1) > article p{
	font-size: 13px;
	height: 100px;
	line-height: 20px;
	overflow: hidden;
}

article a button, #connectContain section > section form button, #loginContain section form button{
	background: #1ABC9C;
	cursor: pointer;
	padding: 10px 20px;
	border-bottom: solid 5px #16A085;
}

article a button strong, #connectContain section > section form button, #loginContain section form button{
	color: #FFFFFF;
}

#mainContain > article:nth-child(3) > section:nth-child(1) > article:nth-child(2){
	margin-right: 0px;
}

#mainContain > article:nth-child(3) > section:nth-child(1) > article:nth-child(3){
	margin-right: 0;
	float: right;
}

#mainContain > article:nth-child(3) hr{
	background: #111111;
	border: 1px solid #111111;
	height: .5px;
	left: 0;
	margin: 0 auto;
	opacity: .3;
	position: absolute;
	right: 0;
	top: 1370px;
	width: 600px;
}

#mainContain > article:nth-child(3) > button, #destContain section > button{
	background: transparent;
	border: 2px solid #FFFFFF;
	bottom: 2%;
	color: #FFFFFF;
	cursor: pointer;
	font-size: 12px;
	font-weight: bold;
	left: 0;
	margin: 0 auto;
	opacity: .4;
	padding: 12px;
	right: 0;
	text-align: center;
	text-transform: uppercase;
	width: 200px;
}

#mainContain > article:nth-child(3) > button{
	position: absolute;
}

#mainContain > section:nth-child(4) > article{
	background: linear-gradient(
      rgba(26, 188, 156, .7),
      rgba(26, 188, 156, .7)
    ),
		url(../images/hikers1001.jpg) no-repeat -990px -1150px;
	display: inline-block;
	height: 500px;
	/* margin-top: 1600px; */
	padding-left: 400px;
	padding-top: 100px;
	position: relative;
	width: 100%;
}

#mainContain > section:nth-child(4) > article h2{
	color: #FFFFFF;
}

#mainContain > section:nth-child(4) > article > section:nth-child(4) div, #mainContain > section:nth-child(4) > article > div:nth-child(4) h4{
	float: left;
}

#mainContain > section:nth-child(4) > article > section:nth-child(4) div{
	background: url(../images/twitter.png) no-repeat 0 0 / cover;
	height: 30px;
	width: 30px;
}

#mainContain > section:nth-child(4) > article > section:nth-child(4) div{
	margin-right: 15px;
}

#mainContain > section:nth-child(4) > article > section:last-child{
	background: url(../images/climbers.png) no-repeat 0 0 / cover;
	bottom: 0;
	float: right;
	height: 257px;
	position: absolute;
	right: 100px;
	width: 1000px;
}

#mainContain > article:nth-child(5){
	background: #000000;
	display: inline-block;
	height: 900px;
	position: relative;
	width: 100%;
}

#mainContain > article:nth-child(5) > section{
	background: #333333;
	margin: 20px 0 70px;
	text-align: center;
	width: 100%;
}

#mainContain > article:nth-child(5) > section p{
	font-size: 2em;
	margin: 0 auto;
	padding: 25px 0;
}

#mainContain > article:nth-child(5) > section p span{
	color: #16A085;
	font-weight: bold;
}

.eventsWrap{
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

.eventsContainer h3{
	border-bottom: solid gray 1px;
	font-size: 30px;
	margin: 0 0 30px;
}

.eventsContainer section article{
	display: flex;
	flex-direction: column;
	/* justify-content: space-between; */
	margin-bottom: 20px;
	width: 320px;
}

.eventsContainer section article h4{
	font-size: 20px;
	font-weight: bold;
	text-transform: uppercase;
}

.eventsContainer section article h5{
	margin-bottom: 10px;
}

.eventsContainer section article p{
	color: #FFF;
	font-size: .9em;
	line-height: 22px;
}

section.connectHikerSection article{
	display: flex;
	flex-direction: row;
	/* justify-content: space-evenly; */
	margin-bottom: 20px;
}

.connectHikerSection article figure{
  margin-right: 10px;
}

.connectHikerSection article figure img{
	min-width: 100px;
	width: 150px;
}

.connectHikerSection article section{
	margin: 0;
	padding: 0;
}



/* DESTINATIONS PAGE =============================== */
#destContain > section > section{
	display: flex;
  flex-direction: row;
  flex-wrap: wrap;
	justify-content: center;
	padding: 0 5%;
	width: 100%;
	/* width: 70%; */
}

#destContain section > section:nth-child(2) > article{
	background: #FFFFFF;
	float: left;
	margin-bottom: 20px;
	margin-right: 30px;
	padding-bottom: 5%;
	width: 420px;
}

#destContain section > section:nth-child(2) > article:nth-child(3), #destContain section > section:nth-child(2) > article:nth-child(6){
	margin-right: 0px;
}

#destContain section > section:nth-child(2) > article img, #destContain section > section:nth-child(2) > article h2,
#destContain section > section:nth-child(2) > article h4{
	margin-bottom: 10px;
}

#destContain section > section:nth-child(2) > article img{
	width: 100%;
}

#destContain section > section:nth-child(2) > article h2{
	line-height: 40px;
}

#destContain section > section:nth-child(2) > article h2, #destContain section > section:nth-child(2) > article h4,
#destContain article a{
	padding: 0 10%;
}



/* EVENTS =============================== */
#eventContain table{
	width: 40%;
}

table{
	background: #FFFFFF;
}

tbody{
	display: flex;
	flex-direction: row;
}

table tbody:nth-child(1){
	background: #CCC;
}

table tbody:nth-child(1) tr th{
	color: #2B2B2B;
	font-size: 2rem;
	font-weight: bold;
}

table tbody:nth-child(1) tr{
	display: flex;
	flex-direction: row;
	width: 100%;
}

table tbody:nth-child(1) tr:nth-child(1) th{
	text-align: left;
  width: 129px;
}

table tbody:nth-child(1) tr:nth-child(2){

}

tr{
	/* border: solid 1px #111111; */
	/* float: left; */
	padding: 1% 3%;
}

tr:nth-child(2){
	border-left: solid 1px #111111;
	/* width: 70%; */
}



/* CONNECT =============================== */
#connectContain section h2{
	margin-bottom: 60px;
}

#connectContain section article > p{
	color: #FFF;
	font-size: 1.7rem;
	margin-bottom: 30px;
}

#connectContain section > article:nth-child(2){
	margin-left: 280px;
}

#connectContain section > section{
	background: #FFFFFF;
	border: solid 6px #000000;
	margin: 0 auto;
	padding: 2% 2% ;
	width: 65%;
}

#connectContain section > section article{
	margin: 0 auto 5%;
	width: 100%;
}

#connectContain section > section article ol li, #connectContain section > section article ol li img{
	width: 50%;
}

#connectContain section > section article ol li:nth-child(1), #connectContain section > section article ol li:nth-child(3), #connectContain section > section article ol li img{
	float: left;
}

#connectContain section > section article ol li{
	clear: both;
	display: inline-block;
	margin-bottom: 5%;
}

#connectContain section > section article ol li img{
	margin-right: 5%;
}

#connectContain section > section article ol li h3:nth-child(2){
	color: #000000;
	font-size: 1.2em;
	font-weight: bold;
}

#connectContain section > section article ol li p{
	font-size: 1em;
}

#connectContain section > section form{
	height: 500px;
	margin: 0 auto;
	width: 700px;
}

#connectContain section > section form input, #connectContain section div form textarea{
	float: left;
}

#loginContain{
	width: 100%;
}

#loginContain > section{
	margin-bottom: 150px;
}

#loginContain section form{
	width: 500px;
}

#loginContain section form button{
	margin-bottom: 30px;
}

#loginContain section form a strong{
	color: #1ABC9C;
}

/* #connectContain section > section form button{
	background: transparent;
	font-weight: bold;
	text-transform: uppercase;
} */