/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- YouTube - Oli Cole
- Base Styles - Oli Cole
- Instagram - Oli Cole
- Typography - Oli Cole
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0px;
  box-sizing: border-box;
}
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box;
}

/*
.container {border: 1px solid #F41115;}
.row {border: 1px solid #419DFE;}
.columns {border: 1px solid #E1FF00;}
*/

/* Larger than mobile */
@media (min-width: 400px) {}

/* For devices larger than 550px */
/* @media (min-width: 550px) { */
@media (min-width: 0px) {
  .container {
    width: 100%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
   margin-left: 0;
	}

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}


/* Youtube
 * --------------------------------------- */
    .youtube-player {
        position: relative;
        padding-bottom: 56.23%;
        height: 0;
        overflow: hidden;
        background: #fefefe;
    }
    
    .youtube-player iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: transparent;
    }
    
    .youtube-player img {
		position: absolute;
		display: block;
        top: 0;
        right: 0;
		bottom: 0;
        left: 0;
        margin: auto;
        max-width: 100%;
        width: 100%;
        border: none;
        height: auto;
        cursor: pointer;
        -webkit-transition: .4s all;
        -moz-transition: .4s all;
        transition: .4s all;
    }
    
    .youtube-player img:hover {
        -webkit-filter: brightness(75%);
    }
    
    .youtube-player .play {
        height: 70px;
        width: 70px;
        left: 50%;
        top: 50%;
        margin-left: -35px;
        margin-top: -35px;
        position: absolute;
        background: url("../images/Play.svg") no-repeat;
        cursor: pointer;
    }


   .play-btn {
        height: 70px;
        width: 70px;
        left: 50%;
        top: 50%;
        margin-left: -35px;
        margin-top: 35px;
        position: absolute;
        background: url("../images/Play.svg") no-repeat;
        pointer-events: none;
    }


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  letter-spacing: 0.05rem;
  /* color: #858585; */
  color: #ccc;
  background-color: #fefefe;  
  text-align: center;
  /*font-size: 3em;  currently ems cause chrome bug misinterpreting rems on body element */
  }

/* swap out mobile and desktop GUI */
.mobile-image {
     display: none;
}

.container {/*desktop*/
    width: 100%;
	
    /*padding: 35px 45px;*/
	padding: 0px 30px 0px 30px;
}
.row {
	/*padding: 30px 30px;*//*desktop*/
	padding: 20px 20px;
}

@media (max-width: 550px) {
    .desktop-image {
        display: none;
    }
    .mobile-image {
        display: block;
    }
	.container {/*mobile*/
    	/*padding: 30px 20px 30px 20px;*/
		padding: 0px 10px 0px 10px;
	}
	.row {
		/*padding: 20px 0px;*//*mobile*/
		padding: 10px 10px;
	}
}


/* Type
–––––––––––––––––––––––––––––––––––––––––––––––––– */


.green {
	color: #09fb81;
}

	/* mobile type */
	p {
		text-align: left;
	font-size: 2.4rem;
	line-height: 1.3;
	margin: 0px;
	padding: 5px 0px 10px 0px;
	}

	.caption {
	font-size: 1.6rem;
	line-height: 1.3;

	}

	.text-xs {
		font-size: 1.4rem;
	}

	ol, ul, li {
		list-style: none;
		margin: 0;
		padding: 10px;
		font-size: 2.4rem;
		line-height: 1.3;
	}


/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
	p {
		text-align: left;
	font-size: 3.2rem;
	line-height: 1.3;
	margin: 0px;
	padding: 10px 0px 20px 0px;
	}	

	.caption {
		font-size: 2.4rem;
		line-height: 1.3;
	}

	.text-xs {
		font-size: 1.4rem;
	}
	ol, ul, li {
		list-style: none;
		margin: 0;
		padding: 10px;
		font-size: 2.4rem;
		line-height: 1.3;
	}
}


/* Instagram
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.oc {
  height: 110px;
  width: 110px;
  /*float: right;*/	

}

#oc {
	position: fixed;
	
	 left: 50%;
	 transform: translate(-50%, 0);
	z-index: 5;
	top: 20px;
}

.insta {
	  height: 50px;
  width: 50px;
	padding: 0.6rem;
  /*height: 30px;
  width: 30px;
  padding: 0.6rem;*/
  /*float: right;	
  fill:none;stroke:#00ff84;stroke-width:6;stroke-linejoin:bevel;stroke-miterlimit:10;
  -webkit-transition: stroke 500ms ease;
  -moz-transition: stroke 500ms ease;
  -o-transition: stroke 500ms ease;
  transition: stroke 500ms ease;*/
}

.mail {
	  height: 50px;
 /* width: 164px;*/
	padding: 0.6rem;
	/*
  height: 30px;
  width: 38px;
  padding: 0.6rem;
  fill:none;stroke:#00ff84;stroke-width:6;stroke-linejoin:bevel;stroke-miterlimit:10;
  -webkit-transition: stroke 500ms ease;
  -moz-transition: stroke 500ms ease;
  -o-transition: stroke 500ms ease;
  transition: stroke 500ms ease;
	*/
}

/* For devices larger than 550px */
@media (min-width: 550px) {
.insta {
		/*height: 40px;
 		width: 40px;
		padding-top: 2.9rem;*/
	}
.envelope {
		/*height: 40px;
 		width: 50px;
		padding-top: 2.9rem;*/
	}
}



/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */


h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

/* Larger than mobile */
@media (min-width: 400px) {

}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {

}


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #09fb81;
  text-decoration: underline;
  -webkit-transition: color 500ms ease;
  -moz-transition: color 500ms ease;
  -o-transition: color 500ms ease;
  transition: color 500ms ease;
}
a:hover {
  color: #ccc;
}


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/

/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}









/* Menu
 * --------------------------------------- */

/*
ol, ul, li {
	list-style: none;
	margin: 0;
	padding: 10px;

		font-size: 2.4rem;
	line-height: 1.3;
}
*/

#menu li a {
	-webkit-transition: all 100ms ease;
	-moz-transition: all 100ms ease;
	-o-transition: all 100ms ease;
	transition: all 100ms ease;
	text-decoration: none;
	color: #ccc;
}
#menu li a:hover {
	color: #09fb81;
	/*background-color: #00ff84;*/
}
#menu li.active a {
	color: #09fb81;
	/*background-color: #00ff84;*/
}
#menu {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 70;
	
	padding: 0;
	margin: 0;
	
	padding-right: 20px;
	padding-left: 20px;
	
}
a {
	outline: none;
	border: none;
}
#menubtn {
	position: fixed;
	z-index: 5;
	top: 67px;
	left: 20px;
	cursor: pointer;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;	
}



#menubtn div {
	width: 30px;
	height: 3px;
	margin-bottom: 4px;
	background-color: #CECECE;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
	
}


#menubtn.active #top {
	-webkit-transform: translateY(7px) rotate(-135deg);
	-ms-transform: translateY(7px) rotate(-135deg);
	transform: translateY(7px) rotate(-135deg);
	background-color: #09fb81;
}
#menubtn.active #middle {
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
}
#menubtn.active #bottom {
	-webkit-transform: translateY(-7px) rotate(-45deg);
	-ms-transform: translateY(-7px) rotate(-45deg);
	transform: translateY(-7px) rotate(-45deg);
	background-color: #09fb81;
	
}



#box {
	position: fixed;
	z-index: 4;
	overflow-y: auto;
	overflow-x: hidden;
	top: 0px;
	width: 100%;
	height: 100%;
	
	background-color: #fefefe;
	visibility: hidden;
  	opacity: 0;
	left:-200px;
	-webkit-transition: all 100ms ease;
	-moz-transition: all 100ms ease;
	-o-transition: all 100ms ease;
	transition: all 100ms ease;
}
#box.active {
	visibility: visible;
  	opacity: 1;
	left:0;
}