@font-face{
	font-family: bit;
	src: url(../fonts/justabit.ttf);
}

html, body {
    width: 100%;
    height: 100%;
	margin:0;
	padding:0;
	font-size:32px;
	color:#00ffff;
	text-decoration: none;
	scroll-behavior: smooth;
	}
	html {font-family: bit;}
	a {text-decoration: none; color:#00ffff; letter-spacing:0px; transition-duration: .2s;}
	a:hover{text-decoration: none; color:#00ffff; letter-spacing:3px; transition-duration: .2s;}
	span {color: #33CC88;}
	span:hover{text-shadow: 0 0 8px #33CC88, 0 0 8px #33CC88, 0 0 8px #33CC88;}
	section{text-align:center;background-color:#001018;}
	h1{font-size:32px; text-decoration: none; font-weight:normal; font-style: italic; color: #ffffff; text-shadow: 0 0 3px #0aa, 0 0 3px #0aa, 0 0 3px #0aa;}
	p{padding:0px 32px; max-width: 768px; margin:0 auto;}
	p a{ text-shadow: 0 0 2px #08a, 0 0 2px #08a, 0 0 2px #08a; }
	.nice_button{white-space: nowrap; line-height: 72px; background-color:#001A20; color:#00ffff; border-radius:32px; padding:16px;  outline: #33CC88 solid 2px;	transition-duration: .2s;}
	.nice_button:hover{ background-color:#00ffff; color:#000810; border-radius:32px; padding:16px;  outline: #ffffff solid 4px;	transition-duration: .2s;}
	.signUpButton{background-color: #095; width:256px; border-radius:16px; line-height: 64px; font-weight: 500; color: #0ff; cursor: pointer; letter-spacing:0px; 	transition-duration: .2s;}
	.signUpButton:hover{background-color: #0ff; width:256px; line-height: 64px; font-weight: 500; color: #095; cursor: pointer; letter-spacing:3px;	transition-duration: .2s;}
input{
	font-family: bit;
	font-size:32px;
	width:100%;
	background-color: #eeeeee;
	border: black solid 2px;
}

label{color:gray;}

.nav {text-align: right;
    height: 96px;
    line-height: 96px;
	top:0px;
    position: fixed;
	width:100%;
	z-index: 3;
	/*border-bottom: 2px solid #008899;*/
	background-color: #001A20;
	display: flex;
	justify-content: space-between;
	/*overflow: hidden;*/
	}
	.menu {margin: 0 32px 0 0;
	/*margin-left:auto ;margin-right: 0px;*/
	}
	.menu a {clear: right;
		text-decoration: none;
		margin: 0 10px;
		text-shadow: 0 0 0px #0aa, 0 0 0px #0aa, 0 0 0px #0aa;
		filter: brightness(66%);
		transition-duration: .2s;
		display: inline-flex;
		line-height:32px; height:32px; vertical-align: middle;
		
		}
	.menu a div{
		margin-right: 8px;
	}
	.menu a:hover{
		text-shadow: 0 0 4px #0aa, 0 0 4px #0aa, 0 0 4px #0aa;
		filter: brightness(100%);
		transition-duration: .2s;
		}
	label {margin: 0 40px 0 0;
		font-size: 32px;
		line-height: 96px;
		display: none;
		width: 26px;
		float: right;}
	#toggle {display: none;}

#socbtn{
	height:100%; /*max-height:100%;*/
}

#small_text{
	font-size:16px;
}

/* CUSTOM UI IMAGES */
.westmen0{
	border: double orange 1em; border-image: url('../img/westmengui0.png') 32 round round;
	background-color: #271f1b;
}
.westmen0 p{
	padding: 0px; margin:0px;
}

	
/*EMAIL BUTTONS*/
.mail-c {display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
  justify-content: center;
    grid-column-gap:3%;
  grid-row-gap:3%;
  }
	.mail-i {
	  transition-duration: .5s;
	  padding: 20px;
	  font-size: 18px;
	  text-halign: middle;
	  text-align: center;
		width: 15vw;
		height: 6vw;
		line-height: 6vw;
		max-width:225px;
		max-height:90px;
	  }
	.mail-i:hover {}
	#gold {background-color:#ddb500; color:#ffffff;}
	#gold:hover {background-color:#000000; color:#ddb500;}
	
/*SOCIAL MEDIA x5*/
.collection a{
display: flex; line-height:32px; height:32px; vertical-align: middle; font-size: 32px;
	filter: brightness(66%);
	transition-duration: .2s;
}

.collection a:hover{
	filter: brightness(100%);
	transition-duration: .2s;
}

.socialsQuicks a{
	filter: brightness(66%);
	display: flex; line-height:32px; height:32px; vertical-align: middle; font-size: 32px;
	transition-duration: .2s;
	margin-inline: 1vw;
}
.socialsQuicks a:hover{
	filter: brightness(100%);
	transition-duration: .2s;
}


.sm_icon{
	 width: 34px; height: 34px; display: block; margin: 0px; background: url(../img/sm.png);margin-right:8px;
}
.m_icon{

}


.sm_icon:hover{
/*	filter: brightness(100%);
	transition-duration: .2s; put to grid-c a*/
}

.grid-c {display: grid;
  grid-template-columns: auto auto auto auto auto;
  grid-column-gap:3%;
  grid-row-gap:3%;
  row-gap:3%;
  padding: 10px;
  justify-content: center;
  min-height:8vw;
  }
	.grid-i {
	  transition-duration: .5s;
	  padding: 20px;
	  font-size: 18px;
	  text-halign: middle;
	  text-align: center;
		line-height:6vw;
		max-width:128px;
		max-height:128px;
		width: 7vw;
		height: 7vw;
	  border-radius:8vw;
	  }
	.grid-i:hover {
	  border-radius:9vw;
		width: 8vw;
		height: 8vw;
		}

/*BIG*/
	#big{
		width: 11vw;
		height: 11vw;
	  border-radius:12vw;
	  }
	#big:hover {
	  border-radius:13vw;
		width: 12vw;
		height: 12vw;
		}

/*TESTIMONIALS*/
.test-c {display: grid;
  grid-template-columns: auto auto;
  grid-column-gap:3%;
  grid-row-gap:3%;
  padding: 10px;
  justify-content: center;
  overflow: initial;
  }
	.test-p{
		background-image:('img/v/cma.jpg');
		background-size:cover;
		width: 15vw;
		height: 15vw;
		border-radius:16vw;
	    border: 2px solid gray;
		margin: auto;
		max-width:128px;
		max-height:128px;
	}
	.test-i {
	  transition-duration: .5s;
	  border-radius:2vw;
	  padding: 20px;
	  font-size: 18px;
	  text-halign: middle;
	  text-align: center;
		width: 40vw;
		height: 100%;
		max-width:640px;
	  }
	.test-i:hover {}
	  
	.clearfix::after {
    content: "";
    clear: both;
    display: table;
	}

/*CSS GRID 5*/
.gri5-c {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  grid-column-gap:2%;
  grid-row-gap:2%;
  padding: 10px;
justify-content: center;
}
.gri5-i {
	transition-duration: .5s;
  padding: 20px;
  font-size: 18px;
  text-halign: middle;
  text-align: center;
    width: 12vw;
    height: 12vw;
	line-height: 12vw;
}
#gri5-i2
{
    height: 12vw;
	line-height: 6vw;	
}
.gri5-i:hover {}

/*CSS GRID FREE*/
.grif-c {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-column-gap:3%;
  grid-row-gap:3%;
  padding: 10px;
  justify-content: center;
}
	.grif-i {
	  border-radius:2vw;
	  transition-duration: .5s;
	  padding: 20px;
	  font-size: 18px;
	  text-halign: middle;
	  text-align: center;
		width: 20vw;
		height: 20vw;
	  max-width:300px;
	  max-height:300px;
		/*line-height: 128px;*/
	}
	.grif-i:hover {
	  width: 21vw;
	  height: 21vw;
	  max-width:315px;
	  max-height:315px;
	}
	.grif-i img{width:70%;}

/*16:9*/
	.asp169 {
	  width: 20vw;
	  height: 12vw;
	  max-width:300px;
	  max-height:177px;
	}
	.asp169:hover {
	  width: 21vw;
	  height: 12vw;
	  max-width:315px;
	  max-height:177px;
	}

.collection{
	width:100%; display:flex; justify-content: space-evenly; flex-wrap: wrap;
}

/*CSS GRID 6*/
.gri6-c {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-column-gap:1%;
  grid-row-gap:1%;
  padding: 10px;
justify-content: center;
}
	.gri6-i {
	  transition-duration: .5s;
	  padding: 20px;
	  font-size: 18px;
	  text-halign: middle;
	  text-align: center;
		width: 10vw;
		height: 2vw;
		line-height: 2vw;
	   /*overflow*/
		overflow: hidden;
		text-overflow: ellipsis;
		max-width:150px;
		max-height:30px;
	}
	.gri6-i:hover {
	}

/*HUGE MODE*/
@media only screen and (min-width: 1530px) {

	.gri6-i {
		line-height: 30px;
	}
	.grid-i {
		/*line-height: 90px;*/
	}
	.mail-i {
		line-height: 90px;
	}

}
	#desktoponly
	{
		display:block;		
	}
/*MOBILE MODE*/
@media only screen and (max-width: 740px) {
	#desktoponly
	{
		display:none;
	}
	
	.footer{
	}
	
    label {
        display: block;
        cursor: pointer;
    }
    .nav{
    }
    .menu {
    	position: absolute;
    	top:96px;
    	left: 0px;
    	right: 0px;
        text-align: center;
        width: 100%;
        display: none;
		line-height:64px;
		height: 64px;
 	    z-index: -10;
    }
		.menu a {
			width:100%;
			margin: 0;
			background-color: #001A20;
			line-height:64px;
			height: 64px;
			border-bottom: solid gray 2px;
 	    	z-index: -10;
 	    	font-size: 32px;
		}
	.test-c {display: grid;
		grid-template-columns: auto;
		grid-template-columns: auto;
	}
	.test-i {
		width: 80vw;
	}
	.grid-c {
		grid-template-columns: auto ;
	 }
	.grid-i {
		/*height: 10vw;
		line-height: 10vw;*/
	 }
	.mail-i {
		height: 10vw;
		line-height: 10vw;
	 }
		.gri6-c {
			grid-template-columns: auto auto auto;
			grid-column-gap:2%;
			grid-row-gap:2%;
			padding: 10px;
			justify-content: center;
		}
		.gri6-i {
			width: 20vw;
			height: 2vw;
			line-height: 2vw;
		 }
	/*CSS GRID 5*/
	.gri5-c {
	  grid-template-columns: auto auto auto;
	}
    #toggle:checked + .menu {
        display: grid;
        z-index: 1;
    }
    #toggle:checked + .menu a{
    	display: inline-flex;
        z-index: 1;
    }
    .socialsQuicks{
    	z-index: 10;

    }
    #toggle:checked + .socialsQuicks{
    	display:none;
    	z-index: -1;
    }
    
}

/*STUFF*/
.b1{
	width:100%;
	background: rgba(0, 0, 0, 0.5) ;/*url("bg.png") no-repeat 10% 50%;*/
	display: table;
	background-size: cover;
	/*position:relative;			<- Reassurt Top Section to remove spacing*/
	height: 80vh;
}
.b1 .in1{
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	max-width: none;

}
.plite{
    padding: 70px;
}

	.footer{
		padding: 32px;
		line-height: 96px;
		/*height:96px;*/
		border-top: 2px solid #008899;
		background-color: #001A20;
		color:#00FFFF;
		left:0px;
		right:0px;
		bottom:0px;
	}

.content .logo {
	background: url("logo.png") no-repeat 100% 100%;
	height:128px;
	width:128px;
	float:center;
}

.vidbgd{
    position:absolute;
	height:100%;
	width:100%;
	overflow:hidden;
    z-index: -10;
}

.vidbgd video{
    top:50%;
    left:-50%;
    right:-50%;
    min-width:100%;
    min-height: 85vh;
	background-size:cover;
    top:0;
    transform:(-50%,-50%);
    margin: 0 auto;
    position:absolute;
}