*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html{
	
	/* background-image:url("../img/bgbg.png"); */
	background-color:#2A3651;
}

body{
	font-family:'Roboto', Helvetica, sans-serif;
}

p{
	color:;
}

ul{
	list-style:none;
}

ul li, ol li{
	margin-bottom:.5rem;
}

ol li{
	font-weight:700;
}

li p{
	font-weight:300;
	padding-left:1rem;
}

header{
	/* position:absolute; */
	top:0;
	z-index:10;
	width:100%;
	background-color:#2A3651;
}

footer{
	font-size:.75rem;
	padding:1rem;
	background-color:#2A3651;
	color:white;
	margin-top:2rem;
}

.hero{
	background-image:url("../img/heroStrava.png");
	background-size:contain;
	background-repeat:repeat-x;
	width:100%;
	height:300px;
	position:relative;
	padding:0;
	margin:0 0 0 0;
	box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3);
}

.heroText{
	position:absolute;
	top:50%;
	left:50px;
	max-width:40%;
}

.content{
	max-width:1400px;
	width:100%;
	margin:0 auto;
}


.gallery{
	padding:2em 1em;
	width:100%;
	background:white;
}

nav {
	width:auto;
	padding-right:3rem;
}

nav.subNav{
	width:100%;
	background-color:#171F2D;
	color:white;
	padding:1rem 6rem;

}

img {
	height:auto;
	max-width:100%;
	

}

#mainFrame {
	display:block;
	margin:0 auto;
	
}



#instafeed img{
	display:inline-block;
	width:25%;
}

iframe{
	margin:1rem;
	padding:.5rem;
	box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.2);
}

.logo{
	
	margin-right:auto;
	width:60%;
	flex-basis:auto;


}

.logo img {
	float:left;
}

img.feed{
	
	padding:0.75em;
}


.endButton{
	text-decoration:none;
	background-color:#2A3651;
	padding:5px;
	color:white;
	font-size:1.5rem;
}

/* --------------------- Flex Controls ---------------------------- */

.flex-container{
	display: -webkit-flex;
	display:flex;
	flex-direction:row;
	align-items:center;
}

.flex-container:after{
	content:"";
	display:block;
	clear:both;
}

header.flex-container{
	justify-content:flex-end;
	/* position:absolute; */
	top:0;
	padding: 0 6rem;
	font-family:'Open Sans', Helvetica, sans-serif;
	font-weight:500;
	color:white;
}

nav.flex-container{
	justify-content: center;
}

.flex-object{
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis:auto;
}


.firstInstruct {
	padding:3rem 1rem;
	align-items:flex-start;
	background:white;
	margin-left:6rem;
	margin-right:6rem;
	margin-bottom:1em;
	flex-wrap:wrap;

}

.firstInstruct div{
	flex-basis:auto;
	padding-left:2rem;
}



.firstInstruct img{
	
	padding:.5rem;
	margin: 1rem;
	background:white;
	box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.2);
}
.firstInstruct img:after{
	content:"";
	display:block;
	clear:both;
}

.firstInstruct .topRow{
	flex-basis:80%;
	margin-bottom:2rem;
}

.firstInstruct .col-2of3{
	
	/* flex-grow:2; */

	
}

.tallImg{
	display:none;
}

.col-1of3{
	width:33.333%;
}

.col-1of4{
	width:25%;
}

.firstInstruct p{
	padding-right:2rem;
}

.col-2of3 {
	width:66.666%;
}

.col-3of4 p{
	max-width:70%;

}
.col-2of4{
	width:50%;
	padding:1em;
}

.col-3of4{
	width:75%;
}

.col-4of4{
		width:100%;
		padding:0 0 1rem 0;
		
	}

header h1{
	padding:0 1rem;
}

nav a{
	color:white;
	text-decoration:none;
	padding:0.25rem;
}




@media (min-width:98em){
	header.flex-container{
		padding: 0 18rem;
	}
}


@media (max-width:68em){
	.col-2of4{
		width:100%;
		padding:0 0 1rem 0;
		
	}

	.col-4of4{
		width:100%;
		padding:0 0 1rem 0;
		
	}




}


@media (max-width:75em){
	header.flex-container{
		padding: 0;
		flex-wrap:wrap;
		
	}

	.hero{
		background-size:cover;
	}

	.col-3of4 p, .col-3of4 h4{
		max-width:100%;
		margin-left:1rem;
		padding-right:1rem;
	}

	.firstInstruct{
		margin-left:3rem;
		margin-right:3rem;
	}

nav{
		background:black;
		padding:1rem;
		width:100%;
	}

nav.subNav{
		padding:1rem;
		font-size:0.8rem;
}

	
}

@media (max-width:62em){
	/*.wideImg{
		display:none;
	}

	.tallImg{
		display:inline;
	}*/

	.flex-container {
		flex-wrap: wrap;
	}

	.flex-container div{
		flex-basis:100%;
	}

	img.articleThumb{
	width:50%;
}

}

@media (max-width:50em){
	#logoPic{
		display:none;
	}
}

@media (max-width:37em){
	.firstInstruct{
		flex-wrap:wrap;
		padding:0;
	}

	

	.firstInstruct h2, .firstInstruct p{
		padding:1rem;
	}

	.col-2of4 img{
		float:none;
		box-shadow:none;

	}

	#instafeed img{
	
	width:50%;
}



	.hero{
		height:420px;
	}
	}

@media (max-width:40em){

	

	}

	.textBox{
		background-color:rgba(100,100,100,0.8);
		width:60%;
	}

	.textBox p{
		float:right;
		width:25%;
	}

	.textBox:after{
		content:"";
	display:block;
	clear:both;
	}
}

.qImg, .qImg2, .qImg3{
	display:inline-block;
}

.qImg img, .qImg2 img, .qImg3 img{
	width:32%;
}

.qImg:hover + .hov1{
	display:inline-block;
}

.hov1, .hov2, .hov3{
	display:none;
}



.qImg2:hover + .hov2{
	display:inline-block;
}

.qImg3:hover + .hov3{
	display:inline-block;
}