/*---------------------------overall---------------------------*/
body {
	background-color: #FFFFFF;
	font-family: "Arial", sans-serif;
	color: #0D2919;
	height: 100%;
	min-width:320px;
	max-width:1800px;
	margin:auto;
}

.page {
	width: 100%;
	margin: auto;
	background-color: white;
}


p, span {
	line-height: 1.8;
	text-align: justify;
	font-size: calc(0.7vw + 0.7vh);
}

h1 {
	font-family: "Georgia", serif;
	font-size: calc(1.25vw + 1.25vh);
	font-weight: bold;
	letter-spacing:-2px;
	color: #0D2919;
	text-align:center;
	clear:both;
}

h2 {
	font-family: "Georgia", serif;
	font-size: calc(1.08vw + 1.08vh);
	font-weight: bold;
	color: #0D2919;
	text-align: center;
	letter-spacing:-2px;
}

h3 {
	font-family: "Arial", sans-serif;
	font-size: calc(1.08vw + 1.08vh);
	color: #0D2919;
	text-align:center;
	font-weight:normal;
	letter-spacing:-1px;
}

a {
	text-decoration: none;
}

.header {
	display:flex;
	justify-content:left;
	align-items:center;
}

.header h1 {
	text-align: left;
	font-family: "Arial", sans-serif;
	font-size: calc(1.7vw + 1.7vh);
	color: #0D2919;
	font-weight: bold;
	margin-top:6%;
	width:85%;
	letter-spacing:0;
}

.header p {
	text-align: left;
	font-family: "Arial", sans-serif;
	font-size: calc(0.8vw + 0.8vh);
	color: #0D2919;
	padding:0.5%;
	margin:0;
	font-weight:normal;
}

.header img {
	width:10%;
	padding:1%;
	display:block;
}

.gap {
	padding: 1%;
}

#nav {
	display:flex;
	justify-content:center;
	align-items:center;
	height:15px;
	background-color:#003E29;
	margin-right:auto;
	margin-left:auto;
	text-align: center;
	font-size: calc(0.8vw + 0.8vh);
	padding: 1%;
	color: white;
}

#nav ul, li {
	list-style: none;
	display: inline-block;
	padding: 0% 2%;
}

#nav a {
	letter-spacing:1px;
	color: white;
}

#nav a:hover {
	color: #3BB37B;
}

footer {
	height: 80px;
	background-color: #0D2919;
	margin-right:auto;
	margin-left:auto;
	margin-bottom:0;
	display:flex;
	justify-content:center;
	align-items:center;
}

#social {
	width:100%;
	text-align: center;
	font-size:25px;
	margin:0;
}

#social a {
	padding: 0% 2%;
	color: #3BB37B;
}

#social a:hover {
	color: #FFFFFF;
}

.main {
	height:100%;
	padding: 0% 2%;
}

a {
	color:#0D2919;
	font-weight:bold;
}

a:hover {
	color:#3BB37B;
}

.section {
	text-align:center;
	overflow: hidden;
}

@media screen and (min-width:601px) and (max-width: 775px) {
	p {
		font-size: 1.9vw;
	}
}
@media screen and (max-width: 600px) {
	p {
		font-size: 2.2vw;
	}
	h1, h2 {
		letter-spacing:0;
	}
}

img {
	padding: 0.5% 5% 2% 2%;
}

/*---------------------------home---------------------------*/

.insta {
	margin:1%;
	padding:2%;
	position: relative;
}

.j-loading {
 border-color: #3BB37B !important;
}

.j-loading:before {
 background-color: #3BB37B !important;
}

.cover {
	background-color: white;
	margin-bottom:-10px;
	z-index:10;
	position:absolute;
	width:100%;
}

.under {
	z-index:-1;
}

.vidBorder {
	position: relative;
	width: 80%;
	height: 0;
	padding-bottom:41.25%;
	display: block;
	z-index: 0;
	margin:auto;
}

.vid {
	position: absolute;
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.calendar {
	position: relative;
	width: 75%;
	padding-bottom:70%;
	overflow:hidden;
	margin: auto;
}

.calendar iframe {
	position: absolute;
	top:12%;
	width:100%;
	height:80%;
	border:0;
}


/*---------------------------merch---------------------------*/

.merch {
	overflow: hidden;
}

.merch p {
	text-align:center;
}

#tshirt, #heavyhood, #lighthood, #heavyzip, #lightzip {
	width:40%;
	height:100%;
	position: relative;
	margin-right:2%;
}

#tshirt {
	float:left;
}

#heavyhood {
	float:right;
}

#lighthood {
	float:left;
	clear:left;
}

#heavyzip {
	float:right;
}

#lightzip {
	float:left;
	clear:left;
}

#tshirt img, #heavyhood img, #lighthood img, #heavyzip img, #lightzip img {
	opacity: 1;
	display: block;
	width: 100%;
	height: 100%;
	margin-top: -0.5%;
	margin-left: -2%;
	backface-visibility: hidden;
	z-index:0;
}

.hoverMiddle {
	opacity: 0;
	position: absolute;
	padding: 50% 50%;
	margin-top:-100%;
}

#tshirt:hover img, #heavyhood:hover img, #lighthood:hover img, #heavyzip:hover img, #lightzip:hover img {
	opacity: 0;
}

#tshirt:hover .hoverMiddle, #heavyhood:hover .hoverMiddle, #lighthood:hover .hoverMiddle, #heavyzip:hover .hoverMiddle, #lightzip:hover .hoverMiddle {
	opacity: 1;
}

#tshirt:hover .hoverMiddle img, #heavyhood:hover .hoverMiddle img, #lighthood:hover .hoverMiddle img, #heavyzip:hover .hoverMiddle img, #lightzip:hover .hoverMiddle img {
	opacity: 1;
	position:absolute;
	width: 100%;
	height: 100%;
	z-index:10;
	margin-top:-52%;
	margin-left:-52%;
}

@media screen and (min-width:1000px){
	#tshirt, #heavyhood, #lighthood, #heavyzip, #lightzip {
		width:31%;
		height:100%;
		position: relative;
		margin-right:2%;
		float:left;
		clear:none;
	}
	#heavyzip {
		clear:both;
	}
}

@media screen and (min-width:1500px){
	#tshirt, #heavyhood, #lighthood, #heavyzip, #lightzip {
		width:18%;
		height:100%;
		position: relative;
		margin-right:2%;
		float:left;
		clear:none;
	}
}

/*---------------------------tutorials---------------------------*/

.tutorials {
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
}

.tutorial {
	overflow: auto;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 48%;
	border: 1px solid rgba(0, 0, 0, 0);
	border-radius: 10px;
	padding: 1%;
}

.tutorial h2, h3 {
	margin: 5px;
}

.tutorial p {
	text-align: center;
}

.tutorial img {
	max-width:90%;
    vertical-align: middle;
	border-radius: 8%;
}

@media screen and (min-width:1000px){
	.tutorial {
		width: 32%;
	}
}

@media screen and (min-width:1500px){
	.tutorial {
		width: 24%;
	}
}


/*---------------------------classes---------------------------*/

.classlist {
	display:flex;
	justify-content:center;
}

.classlist div {
	flex: 1 1 0px;
	margin:1.5%;
}

.aclassimgs {
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:nowrap;
	width:100%;
}

.aclassimgs img{
	margin:0;
	padding:0;
	max-width:33%;
}

.tclassimgs {
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:nowrap;
	width:100%;
}

.tclassimgs img{
	margin:0;
	padding:0;
	max-width:50%;
}

.reviewlist {
	padding:0 3%;
	font-style:italic;
}

.weekclass {
	display:flex;
	justify-content:center;
	gap:2%;
}

.CTA {
	margin:auto;
	width:20%;
	text-align:center;
	background-color: #3BB37B;
	border: 2px solid #3BB37B;
	border-radius:5px;
}

.CTA h1{
	font-family: "Arial", sans-serif;
}

.CTA a {
	color:#FFFFFF;
}

.CTA a:hover {
	color:#0D2919;
}

.center p{
	text-align:center;
}

/*---------------------------about---------------------------*/
.right {
	display:flex;
	justify-content:center;
}

.right p{
	margin:0;
}

.right img {
	width:28%;
	height:28%;
}

@media screen and (min-width:1000px){
	.right img {
		width: 20%;
		height: 20%;
	}
}

.short {
	display:flex;
	justify-content:center;
	align-content:center;
	flex-wrap:wrap;
}

.short div {
	width:49%;
}

.reviewlist p {
	text-align:center;

}