@charset "UTF-8";
/***********************Main Global *****************/	
	html {
		margin: 0;
		padding: 0;
		overflow-x:hidden;
		font-size: 18px;
		line-height: 24px;
	}
	body {
		margin: 0;
		padding: 0;
		overflow-x:hidden;
		font-family: canada-type-gibson, sans-serif;
		font-style: normal;
	}
	h1{
		text-transform: uppercase;
		font-size: 2.5em;
		/*line-height: 3rem;*/
    	line-height: 1rem;
		text-align: center;
	}
	nav.top {
		width: 90vw;
		padding: 2vh 5vw;
		background-color: #0D2F62;
	}
	ul {
	padding-inline-start: 15px;
	}
	p, li{
		font-size: 2.25rem;
    	line-height: 3rem;
	}
a {
	text-decoration: none;
}
a:hover{
	opacity: .7;
}
	.container{
		width: 90vw;
		padding: 0 5vw;
		position: relative;
	}
	.aboutus {
		background-color: #5973AF;
		padding: 2vh 0;
	}
	.aboutus h1 {
		text-align: center;
	}
	.white {
		color: #ffffff;
	}
	.navy {
	color:#0D2F62;
	}
	.maroon{
	color: #6F1A26;
	}

/**************menu******************/
nav.top {
		width: 90vw;
		padding: 2vh 5vw;
		background-color: #0D2F62;
	}
.menulogo{
		/*width: 25vw;*/
	width: 25%;
	}
.top ul {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	background-color: #0D2F62;
	text-transform: uppercase;
	}
.top li a {
  	display: block;
	padding: 2vh 2vw;
	color: #fff;
  	text-decoration: none;
	font-size: 1.75vw;
	}

.top li a:hover {
  opacity: .7;
}
.top .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
	text-transform: uppercase;
	float:none;
	overflow: hidden;
}
.top .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 25px 0; /*was 2vw 0*/
  position: relative;
  user-select: none;
}

.top .menu-icon .navicon {
  background: #fff;
  display: block;
  height: 4px; /*was .25vh;*/
  position: relative;
  transition: background .2s ease-out;
  width: 8vw;
}

.top .menu-icon .navicon:before,
.top .menu-icon .navicon:after {
  background: #fff;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.top .menu-icon .navicon:before {
  top: 18px; /*1vh;*/
}

.top .menu-icon .navicon:after {
  top: -18px; /*was -1vh;*/
}
/*menu animation*/
.top .menu-btn {
  display: none;
}
/*affects height of drop down*/
.top .menu-btn:checked ~ .menu {
  max-height: 70vh;
}

.top .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.top .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.top .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.top .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.top .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}
/****end menu******/
/****hero section******/
		section.hero {
			background-size: cover;
			background-image: url(images/hero_web_bk.jpg);
			background-repeat: no-repeat;
			max-height: 140px;
			padding: 0 20vw;
			height: 30vh;
			position: relative;
		}
		.containerhero{
			width: 60vw;
			/*background-color: aquamarine;*/
			position: absolute;
			bottom: 0;
			left:20vw;
		}
		.pic{
			width: 18vw;
			/*background-color: blue;*/
			/* float: left; */
			position: absolute;
			bottom: 0;
			left: 0;
		}
		img.kristen{
			width: 100%;
			max-width: 270px;
			position: absolute;
			bottom: 0;
		}
		.content {
			width: 41vw;
			/*background-color: red;*/
			position: absolute;
			bottom: 0;
			left: 19vw;
			display: none;
		}
		.mobilecontent{
			padding: 2vh 0;
		}
/****end hero section******/
/****membership section******/
		.membership {
			width: 90vw;
			float: left;
			display: inline-block;
		    padding: 0 0 3% 0;
		}
		.btn{
			font-size: 2rem;
			color: #fff;
			border-radius: 5px;
    		background-color: rgba(111, 26, 38, 1);
			text-transform: uppercase;
		    font-weight: 900;
			float: left;
			display: inline-block;
			margin: 5% 15vw;
			padding: 4% 2%;
			width: 60vw;
		}
.btn a {
	color:#ffffff;
}
.btn:hover{
	opacity: .7;
}

		.membership img{
			width: 30vw;
		    max-width: 250px;
			float: right;
		}
section.member{
	padding: 2vh 0;
}
/****end membership section******/
/*******icon section********/
section.icons {
		background-color: #0D2F62;
		padding: 5vh 0;
		clear: both;
	}
.iconcir:hover {
	opacity: .7;
}
.iconcir img{
	width:70%;
	max-width: 210px;
}
.iconcir {
	width: 50%;
	display: inline-block;
	text-align: center;
	padding: 2% 25%;
}
.iconcir a{
	text-decoration: none;
	color: #ffffff;
	display: block;
	text-transform: uppercase;
	padding: 2% 0;
	font-size: 2rem;
	line-height: 2.75rem;
	font-weight:600;
}

/*****end icon section******/
/*****footer section******/
nav.foot{
	background-color: #5973AF;
	display: none;
}
.foot ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-transform: uppercase;
	}
.foot li {
	display: inline-block;
}
.foot li a {
  	display: inline-block;
	padding: 2vh 2vw;
	color: #fff;
  	text-decoration: none;
	text-align: center;

	}
.foot ul {
	width: 90vw;
	padding: 0 5vw;
	text-align: center;
	}
footer {
	background-color: #0D2F62;
}
body > footer > a {
	text-align: center;
	display: block;
	padding: 2% 0;
}
.disclaimer h3{
	text-align: center;
    font-size: .7rem;
    color: #fff;
    text-transform: uppercase;
    font-weight: 100;
}
.disclaimer p {
	text-align: center;
    color: #fff;
    font-size: .6rem;
    line-height: .8rem;
}
.disclaimer {
	width: 60vw;
    padding: 0 20vw 3% 20vw;
}
/*****end footer section******/
@media (orientation: landscape){
	section.hero {
			height: 50vh;
		}
}
/*Small devices (landscape phones, 576px and up)*/
@media only screen and (min-width: 576px),
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 576px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 576px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 576px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 576px),
only screen and (                min-resolution: 192dpi) and (min-width: 576px),
only screen and (                min-resolution: 2dppx)  and (min-width: 576px) 
{
	/*******hero*******/
section.hero{
	max-height: 180px;
}
/*****end hero*****/
/****membership section******/
		
/****end membership section******/
/****icons section******/
.iconcir {
	width: 50%;
	padding: 1% 25%;
}
.iconcir img{
	width:70%;
	max-width: 300px;
}
}
/****icons end section******/
/*Medium devices (tablets, 768px and up)*/	
@media only screen and (min-width: 768px){
	.menulogo{
	/*width: 30vw;*/
	width: 30%;	
	max-width: 200px;
	}
	/*******hero*******/
section.hero{
	max-height: 230px;
}
/*****end hero*****/
/****membership section******/
		
/****end membership section******/

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 768px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 768px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 768px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 768px),
only screen and (                min-resolution: 192dpi) and (min-width: 768px),
only screen and (                min-resolution: 2dppx)  and (min-width: 768px) 
{
/*******menu******/
.menulogo{
	/*width: 30vw;*/
	width: 30%;
	max-width: 250px;
	}
/*******hero*******/
section.hero{
	max-height: 230px;
}
/*****end hero*****/

}
/**********************************************/
/**Large devices (desktops, 992px and up)*/	
@media only screen and (min-width: 992px)
{
	.container{
		width: 80vw;
		padding: 0 10vw;
	}

	.pic{
			width: 30vw;
		}
	p, li{
		font-size: .8rem;
		line-height: 1.5rem;
	}
	h1{
		font-size: 1.5em;
	}
	
/*menu override for larger screens*/
	nav.top{
	width: 80vw;
	padding: 2vh 10vw;
	}
.top li {
    float: left;
  }
	.top ul {
    float: right;
  }
	.top li a{
		padding: 1.75vh 0 1.75vh 1.5vw;
		font-size: 1.15vw;
	}
  .top .menu {
    clear: none;
    float: right;
    max-height: none;
	width: 65%;
  }
  .top .menu-icon {
    display: none;
  }
/*******hero*******/
	section.hero {
			max-height: 530px;
			height: 80vh;
		}
	.containerhero {
		width: 80vw;
		left: 10vw;
	}
	.content {
		width: 55vw;
		position: absolute;
		bottom: 0;
		left: 25vw;
		display: block;
	}
	.mobilecontent{
		display: none;
	}
/*****end hero*****/
/****membership section******/
	.membership {
			width: 80vw;
	}
		
/****end membership section******/
/****icons section******/
.iconcir {
	width: 33%;
	padding: 2% 0;
}
.iconcir img{
	width:70%;
	max-width: 210px;
}
			.btn{
			font-size: 1rem;
			margin: 0;
			width: 40vw;
			max-width: 250px;
			padding: 2% 2%;
		}
	.iconcir a{
	font-size: 1rem;
	}
/****icons end section******/
/*****footer section******/

	.foot ul {
	width: 80vw;
	padding: 0 10vw;
	}
	nav.foot{
	display: block;
}
	footer li a:hover{
	opacity: .7;
}
/*****end footer section******/
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 992px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 992px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 992px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 992px),
only screen and (                min-resolution: 192dpi) and (min-width: 992px),
only screen and (                min-resolution: 2dppx)  and (min-width: 992px) 
{ 
.top .menu {
    clear: none;
    float: right;
    max-height: none;
	width: 70%;
  }
	.top li a{
		padding: 1.75vh 0 1.75vh 1.5vw;
		font-size: 1.15vw;
	}
}
/**Extra large devices (large desktops, 1200px and up)**/	
@media only screen and (min-width: 1200px), 
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1200px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1200px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1200px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1200px),
only screen and (                min-resolution: 192dpi) and (min-width: 1200px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1200px) 
{ 
	nav.top{
	width: 60vw;
	padding: 2vh 20vw;
	}
	.menulogo{
		/*width: 15vw;*/
		width: 25%;
	}
	
/*menu*/
	.pic {
		width:20vw;
	}
	.content{
		width:40vw; 
		left:20vw;
	}
	.containerhero {
		width: 60vw;
		left: 20vw;
	}
	.top li a {
    padding: 1.75vh 0 1.75vh 1.5vw;
    font-size: .9vw;
	}
	.top .menu {
	width: 73%;
	}
/*end menu*/	
	.container{
	width: 60vw;
	padding: 0 20vw;
	}
	section.hero {
			max-height: 550px;
		}
/****membership section******/
	.membership {
			width: 60vw;
	}
	.membership img {
    width: 20vw;
	}
/****end membership section******/

/****icons section******/

/****icons end section******/
/*****footer section******/
	.foot ul {
	width: 60vw;
	padding: 0 20vw;
	}
/*****end footer section******/
}
/**Quick changes to hero on full screen**/	
@media only screen and (min-width: 1600px), 
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1600px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1600px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1600px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1600px),
only screen and (                min-resolution: 192dpi) and (min-width: 1600px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1600px) 
{ 
	section.hero {
		max-height: 450px;
	}
/****membership section******/
		
/****end membership section******/
}