@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

@font-face {
    font-family:'didot';
    src: url('../fonts/Didot/didot-htf-b-11-bold-ital.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
	-moz-osx-font-smoothing: grayscale;
}


@font-face {
    font-family:'frank';
    src: url('../fonts/FranklinGothic-DemiCdIt-webfont.eot');
    src: url('../fonts/FranklinGothic-DemiCdIt-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/FranklinGothic-DemiCdIt-webfont.woff2') format('woff2'),
         url('../fonts/FranklinGothic-DemiCdIt-webfont.woff') format('woff'),
         url('../fonts/FranklinGothic-DemiCdIt-webfont.ttf') format('truetype'),
         url('../fonts/FranklinGothic-DemiCdIt-webfont.svg#franklin_gothic_fsdemicd_italic') format('svg');
    font-weight: normal;
    font-style: normal;
	-moz-osx-font-smoothing: grayscale;
}
@font-face {
    font-family:'frankM';
    src: url('../fonts/FranklinGothic-MedCdIt-webfont.eot');
    src: url('../fonts/FranklinGothic-MedCdIt-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/FranklinGothic-MedCdIt-webfont.woff2') format('woff2'),
         url('../fonts/FranklinGothic-MedCdIt-webfont.woff') format('woff'),
         url('../fonts/FranklinGothic-MedCdIt-webfont.ttf') format('truetype'),
         url('../fonts/FranklinGothic-MedCdIt-webfont.svg#franklin_gothic_fsmedcd_italic') format('svg');
    font-weight: normal;
    font-style: normal;
	-moz-osx-font-smoothing: grayscale;
}
@font-face {
    font-family: 'klar';
    src: url('../fonts/KlartextMono-Light-webfont.eot');
    src: url('../fonts/KlartextMono-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/KlartextMono-Light-webfont.woff2') format('woff2'),
         url('../fonts/KlartextMono-Light-webfont.woff') format('woff'),
         url('../fonts/KlartextMono-Light-webfont.ttf') format('truetype'),
         url('../fonts/KlartextMono-Light-webfont.svg#klartext_monolight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family:'borg';
    src: url('../fonts/BorgstrandPro.otf') ;
	font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family:'sofia';
    src: url('../fonts/Sofia_Pro_Black.otf') ;
	font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family:'equip';
    src: url('../fonts/EquipLrig-webfont.ttf') ;
	src: url('../fonts/EquipLig-webfont.eot') format('embedded-opentype'),
	 url('../fonts/EquipLig-webfont.woff') format('woff'),
	  url('../fonts/EquipLig-webfont.svg')  format('svg');
	speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
}



@font-face {
    font-family:'squL';
    src: url('../fonts/BPdots/BPdotsSquareLight.otf') ;
	font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family:'squB';
    src: url('../fonts/BPdots/BPdotsSquareBold.otf') ;
	font-weight: normal;
    font-style: normal;
	-moz-osx-font-smoothing: grayscale;
}
@font-face {
    font-family:'squ';
    src: url('../fonts/BPdots/BPdotsSquare.otf') ;
	font-weight: normal;
    font-style: normal;
	-moz-osx-font-smoothing: grayscale;
}

body {
	margin:0;
	padding:0;
	background: #fff;
	color: #334;
	font-weight: normal;
	font-family: 'klar', Calibri, Arial, sans-serif;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	/*display:flex;*/
}

p{  font-weight: 100;
	font-size: 1.3em;
	padding: 0 auto 1em;
	line-height: 2em;
	letter-spacing: 0.08em;
	word-spacing:.5px;
	text-align:center;
	font-family:'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, 'sans-serif';
	font-weight: 100;
	font-style: normal;
	}
a {
	text-decoration: none;
	/*color:;*/
	outline: none;
	height:auto;
	padding:0;
	margin:0;
	cursor:pointer;
	  }



ul, li{ margin:0; padding:0;}
li{ list-style:none;}

/* remove glow around open graphic */
:focus {
outline: -webkit-focus-ring-color auto 0px;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
	content: " ";
	display: block;
  	overflow: hidden;
  	visibility: hidden;
  	width: 0;
  	height: 0;
}

.clearfix:after {
	clear: both;
}

.container{     
	padding-left: 0%; 
    padding-right: 0%; }

		
.codrops-header {
	vertical-align:middle;
	vertical-align:-webkit-baseline-middle;
	margin: 1.2em auto 4em;
    z-index:20;	
	}
	
#index-info {
	clear:both; 
	text-align:center;
	margin-bottom:1em;
	}
	


	

.logodiv{
	padding:0;
	margin: 0 0%;
	vertical-align:middle; 
	display: inline-block;
	vertical-align:-webkit-baseline-middle;
	}
.logo{
			margin: 0 4%;
	}
.logo img{       
	width:70px;
	padding:0 ;
	margin: 0 auto;
	text-align:center;
	z-index:9;
	}
.logodiv a:hover, .logodiv a:focus { 
	color: #f00;
	background: #FFFF63;
}
	.rez{font-size:.8em;}
.filter{ vertical-align:middle;  font-family:'Menlo'; font-size:10px; cursor:pointer; padding:0; z-index:10;}
.notfilter {
	font-size: 1em;
	line-height: .3em;
	letter-spacing: 0.01em;
	font-family:'frank';
	color:#162b17;
	text-transform:uppercase;
	}
.menufix { 
    z-index:3; 
	position:relative; 
	text-align:left; 
	/*margin-top:.8em;*/
	}
	
	
/*.closediv:nth-child(3){margin-left:0;}*/



.title {font-size:12px;}


.rightnav .icon img { display:none;

	margin-top:1.3em;}

.rightnav a:nth-child(3) {} /* margin-left:5em;*/


 .icon img{
	padding:0;
	margin: 0 auto;
	text-align:center;
	z-index:9;
	display: inline-block;
	/*display: inline-block;*/
	}


.fix{	margin-right: auto;
		margin-left: auto;
		display: -webkit-flex;
   		display: flex;
   		-webkit-align-items: center;
   		align-items: center;
   		-webkit-justify-content: center;
   		justify-content: center;
   /* You can set flex-wrap and flex-direction individually */
   		-webkit-flex-direction: row;
   		flex-direction: row;
   		-webkit-flex-wrap: wrap;
   		flex-wrap: wrap;
   /* Or do it all in one line with flex flow */
   		-webkit-flex-flow: row wrap;
   		flex-flow: row wrap;
   /* tweak the where items line up on the row */
   /* valid values are: flex-start, flex-end, space-between, space-around, stretch */
   		-webkit-align-content: flex-end;
   		align-content: flex-end;
}
.
	

a .closeX {    
}
.closeX img{ display: inline-block;   float:right;
}

.close{ opacity: 0.9; */
    filter: alpha(opacity=90);}
/* Safari only override */


	

/* To Navigation Style */
.left {float:left;}

/*top bar*/
.right{float:right; z-index:4; position:relative; margin-right: 20%;}
 /*hover color box height*/
/*.codrops-top a {
	position: relative;
	display: inline-block;
	margin: 0px 25px;
	outline: none;
	color: #00befc;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	font-size: 1.em;}*/


/*button .safari{	font-weight:100;
text-shadow:none; font-size:50%;}*/

/*INFO SLIDE*/	
.close, .grn, .deets a{ font-family:'borg'; 
	font-size:1.5em;	
	color: #00befc; 
	cursor: pointer;
	display: inline-block;
	border-radius: 1px;
	padding: 0.4em 0 0.8em;	
}
a.grn{text-align:center;}

.grn:hover, .deets a:hover { 
color: #F58183;
background-color:#F3F01F;

}
.close:hover,
.close:focus {
  filter: invert(27%) sepia(50%) saturate(3500%) hue-rotate(320deg) brightness(104%) contrast(97%);
}
.close{ float:right; width:19%;}


/*MENU SLIDE*/

#menu-info {padding: 40px 20px 30px;}
#menu-info p{ font-family:'Gill Sans'; font-size:.9em; font-weight: 500; padding:6px;letter-spacing: 0.02em; text-align:left; line-height:1.8em; 
}

#menu-info p:nth-child(7), #menu-info p:nth-child(8){ margin:0 auto; text-transform: uppercase;font-size:.8em;letter-spacing: 0.04em;}


/*HOME PAGE*/		

	
/* main*/
.work{
	margin-left:0em;
	}

.work img {width:100%; margin:20% auto 1%;}

.center{align-items: center; text-align: center;}

/*NAV ARROWS*/

input[type=text], input[type=button] {
 -webkit-appearance: none;
 -webkit-border-radius: 0;
}

button{ 
 border:0;
 background-color:rgba(265, 265, 265, 0);
 }
 
.button{ 
 padding:0;
 margin:0;
 /*background-image: url(img/l-arrow.png) no-repeat;  */
}

		
		/*CONTENT*/
.desc{
	position: relative;
	width:80%;
	margin:4em auto 4em;
	float:none;}

.desc p, .work p {
	font-weight: 100;
	padding: 0 auto 1em;
	margin: 1em auto 0em;
	line-height: 2em;
	word-spacing:.5px;
	text-align:center;
	z-index:1;
	}
.work p {font-size: 0.9em;}
.desc p b{
	font-size: 2.7em;
	line-height: .8em;
	text-transform: uppercase;
font-family: "trade-gothic-next", sans-serif;
font-weight: 600;
font-style: italic;
	color:#fff;
	/*color:#162b17;*/
	letter-spacing: .02em;
	text-shadow:
		-1px -1px 0 #334,
		1px -1px 0 #334,
		-1px 1px 0 #334,
		1px 1px 0 #334;
	}


h1{font-family: "trade-gothic-next", sans-serif; font-weight: 600; font-style: italic; text-decoration: underline; font-size: 1.5em; letter-spacing: .02em}


p.pink { font-family: "trade-gothic-next", sans-serif; font-weight: 700; font-style: italic;
text-transform:uppercase;  letter-spacing: .03em; margin:4em 0 0em; font-size:115%;}
/*.leftp {width:45%;}*/
	
.frank{
	font-size: 4.7em;
	line-height: .05em;
	letter-spacing: 0.01em;
	word-spacing:.5px;    
	font-family:'frank';
	color:#162b17;
	}
.codrops-header p {
	margin: 0 3%;
	line-height: 0em;
	padding:0px;
	vertical-align:middle;
	vertical-align:-webkit-baseline-middle;
	}

	.dir-fix 
	{color:#fff;}
/*#div2, #div3,#div4,#div5,#div6,#div7,#div8, #div9 {display:none;}*/


/*.work p b {font-weight: 100;   color: #f706ac; text-transform:uppercase;  letter-spacing: 0.2em; line-height:2em; 	word-spacing:.5px;     font-size: 1em; }*/







.codrops-header img { 	
	position: relative;  
	margin: 0 auto;
 	max-width:100%;   /* For IE8 */
}
.codrops-header .rightnav a:last-child{margin: 0 0 0 auto;}
 .btn { float:left;
  -webkit-border-radius: 20;
  -moz-border-radius: 20;
  border-radius: 20px;
  padding: 7px 14px 7px 14px;
  text-decoration: none;
  font-size: .6em;
  background-color:#ff6;
 /*  border: dotted #ff6 1px; */
  color:#F00;
  margin-right:20px;
  margin-bottom:20px;}

.btn:hover {
  text-decoration: none;
  background-color:#9CF;
  border: dotted #ff6 1px;
}

.beginning {margin-top:10em;}
.Gsection { margin: 6em 0 4em; }	
.fstsection { margin: 10em 0 4em; }
.ikeasection{margin: 10em 5% 4em; }
.trivsection{margin: 10em 17% 4em; }


.Usection { margin: 14em 0 17em; text-align:center;}	
.Usection:first-child {margin-top:10em;}
/*.five img{ margin: 6em 2.5% 4em; }	*/
.Usection img{vertical-align:center; margin: 2em auto 2em;}	
.Usection p   {
	z-index:1;
	width:90%; 
	margin: 0em auto 0em;
	}
/*.Usection p b, .section p b, .fstsection p b {font-weight: 100;  font-family:'frank'; color: #f706ac; text-transform:uppercase;  letter-spacing: 0.1em; line-height:2em; 	word-spacing:.5px;     font-size: 1.7em; }*/
.work p b, .Usection p b /*, .section p:first-child*/ {font-weight: 100;  font-family:'frank'; color: #f706ac; text-transform:uppercase;  letter-spacing: 0.05em; line-height:2em; 	word-spacing:.5px;     font-size: 1.7em; margin:8em auto 2em; }
.section p:nth-child(2){ text-align: center; margin:2em 0 4em; }
#msp{margin:12% 5% 0 7%;}

#msp img {margin:0 .%; width:250px;}

.sectionbreak {margin: 22% 0;}
.sectionbreak p b{font-size: 1.7em;}

.waring img {max-width:90%;}
.morebottom p b {margin:8em 0 8em; }
.Usection .mute {margin:4em auto 6em;}

.stood img { }
.section {margin-bottom:6em;}

.manyads { white-space: nowrap;}
		  
.manyads img{ display: inline; float:left; width:33%;}
		  
.specialsweat_rv {width:25%; float:left; margin-right:50px;}
.truth_ img{width: 45%; margin-right:5%; float:left;}
.truth_ img:first-child { width:43%;}
.lab img{width: 45%; margin-right:5%; float:left;}
.labtwo img{width: 45%; }
.lab video {width:100%; margin: 15em 0 15em;}

.ap img { width:30%; margin-right:3%; float:right;}

/*.social {width:15%; margin-left:20px;vertical-align:middle; margin-top:-20px;}
.goggles {width:35%; float:right; margin-left:10px; margin-top:-40px;}
.all {width:50%;}*/
.sweatads {width:50%;}
.bannersweat {margin-right:25px; margin-top:25px;}

.lgifs img {max-width:220px;}
/*Script GALLERY*/
.scripts {
    margin: 0 auto;
    padding-top: 0;
    z-index: 1;
	right:0;
	text-align:left;
	display:inline;
	}
.script_thumbs {width:auto;}

.script_thumbs img {    margin: 0 3.7%; }
.tango img {width:17%; margin-top:25px;}

.scripts img {
-webkit-box-shadow: 0px 1px 3px 1px rgba(0,0,0,0.2);
box-shadow: 0px 1px 3px 1px rgba(0,0,0,0.2);
height: auto; width:100%; 
}
.scripts.btn a{margin-right:20px;}

.tv1, .tv2, .tv3 {display:none;
padding:0; margin:0;}

.wild {display:inline-block;}
/*Script GALLERY*/
.huff {width:90%; margin-top:1%;}
#loserapp{	
		margin: 0 auto;
		padding:0 auto;
		display: -webkit-flex;
   		display: flex;
   		-webkit-align-items: center;
   		align-items: center;
   		-webkit-justify-content: center;
   		justify-content: center;
   /* You can set flex-wrap and flex-direction individually */
   		-webkit-flex-direction: row;
   		flex-direction: row;
   		-webkit-flex-wrap: wrap;
   		flex-wrap: wrap;
   /* Or do it all in one line with flex flow */
   		-webkit-flex-flow: row wrap;
   		flex-flow: row wrap;
   /* tweak the where items line up on the row */
   /* valid values are: flex-start, flex-end, space-between, space-around, stretch */
   		-webkit-align-content: flex-end;
   		align-content: flex-end;
}
.paint img{max-width:30%; margin-right:20px;}

.pics img{padding:0; width:45%; margin-right:2.5%; margin-left:0; float:right;}

.photo p{font-family:'Lato'; font-color: #333;letter-spacing:2px; font-weight:300;}
/*more ads*/

.pjban {  position:relative; text-align: center;}
.pjban img{ margin-right:4%;  margin-left:4%; position:relative;}
.pjweb { width:100%; margin-left:3%; float:left;}
.bus img{margin-top:2%;width:95%;}
.deets {
	
	text-align: center;
	margin-top:60px;
	padding-top:40px ;
	width:100%;

}
.deets p{
	margin-bottom:0px;
	letter-spacing:.13em;
	}
	
.deets p:last-child{margin-bottom:35px; 	color: #f06a90;
	font-family: Gill Sans, "Helvetica Neue", Helvetica, Arial;
	font-weight: 600;
	font-style: italic;
	font-size: 1em;
	text-transform: uppercase;
		letter-spacing: .01em;
}

.deets a {
	font-size: .7em;	
font-family: "trade-gothic-next", sans-serif;
font-weight: 400;
font-style: normal;
	letter-spacing:.03em;
	color: #334;
	}
.deets a:hover, .deets a:focus{}
@media screen and (max-width: 1300px) { 
}
@media screen and (max-width: 1080px) { 


} 


@media screen and (max-width: 926px) {
}

@media screen and (max-width: 850px) {
	.logodiv img {margin:0 1em;}
			/*.logodiv {margin-left:30%;(old new*/}

		

	@media screen and (max-width: 844px) {
	.logodiv img {margin:0 1em;}
			/*.logodiv {margin-left:33%;}(old new*/

		
}
	
@media screen and (max-width: 1024px) {


		
	}
	
@media screen and (max-width: 926px) {

	.stood img {}
}

@media screen and (max-width: 9844px) {

	.stood img { }
}
@media screen and (max-width: 812px) {

	.stood img {}
}

@media screen and (max-width: 768px) {

	.desc{width:100%;}


}
@media screen and (max-width: 736px) {


	.menufix { 
	
	}
	.navfix{    margin-top: 20px;}
	.work{
	width:100%;
}
/*.work p:nth-child(1){padding-top:2em;}*/
.desc p  {
	}
	.social, .kooz, .insta, .goggles, .specialsweat, .specialsweat_rv {margin-top:0px; float:none; text-align:center;}
	.specialsweat{margin-left: 0px;}

}
	
@media screen and (max-width: 429px) {	
	.logodiv {/*margin-left:17%;*/ margin-top:3%;}
	.Usection p   {width:98%; line-height: 1.5em;}
	.work p b, .Usection p b {line-height:1.5em; 	word-spacing:.25px;   }
	.stood img {}
}

@media screen and (max-width: 390px) {
	.codrops-header {
    margin: -1em auto 2em;}
		.logodiv {/*margin-left:12%;*/margin-top:10%;}
	.logodiv img {margin:0 1em;}
	.desc p {font-size:1.25em;}
	.desc p:nth-child(1){	letter-spacing: 0.0001em;}
	.desc p:nth-child(2){line-height: 1.5em;}
	.desc p:nth-child(3){line-height: 1.5em;}
	.work img{margin: 20% auto 10%;}
	.work p b {font-size:1.25em; line-height:inherit; font-weight: 700; }
	.pjban { width:60%;}
	.deets {margin-top:30px;}
.insta {width:25%; margin-left:20px;  margin-top:0px;}
.all{width:60%; text-align:center;}
	.eden_post img {width:30%; float:left; margin: 0 3% 5% 12%;}

	.lab {width:auto; margin:0 auto 0;}

}
	@media screen and (max-width: 375px) {
		.codrops-header { margin: 1.5em auto 2em;}
		.codrops-header .rightnav a:last-child {
  margin: 0 0 0 auto;
}
		.logodiv {/*margin-left:12%;*/ margin-top:2%;} 
		
	.menufix {
    /*margin-top: -19px;*/
}
#msp img {margin:5% 0 0 12%;}

	}
@media screen and (max-width: 20em) {

	.col-xs-4 {
    width: 55%;
}

	.desc p:nth-child(1){	font-size: .6em;	letter-spacing: 0.0001em;}

	.filter{color:#fff;}
}