@charset "utf-8";
/* CSS Document */

body{
	margin:0;
	padding:0;
}

@font-face{
	font-family: 'BrittanySignature';
	src: url("Fonts/BrittanySignature.ttf");		
}

@font-face{
	font-family: 'White Star';
	src: url("Fonts/White Star PersonalUseOnly.ttf");
}

#wrapper{
	position:absolute;
	top:0;
	left:0;
	width:100%;
}

.logo{
	position:absolute;
	top:1px;
	left:4%;
	width:10%;
	z-index: 9999;
}

.topheader{
	position:relative;
	margin:0 auto;
	width: 100%;
	height:25px;
	background-color: #000000;
	font-family: 'Tenor Sans', sans-serif;
	font-size: .7em;
	color:#FFFFFF;
	text-align: center;
	line-height: 25px;
}

.header{
	position:relative;
	margin:0 auto;
	width:100%;
	height:100px;
	background-color: #FFFFFF;
	border-bottom: 2px solid black;
	z-index: 999;
	opacity:.9;
}

.menu{
	position:absolute;
	top:30px;
	left:38%;
	width:60%;
	display: flex;
	justify-content: space-between;
	gap:15px; 
}

.menu a{
	font-family: 'Montserrat', sans-serif;
	font-size: 1em;
	color: #111111;
	font-weight: 700;
	text-decoration:none;
	transition: all .3s ease;
	padding:10px; 
	flex:.5;
	text-align: center;
}

.menu a:hover{
	background-color: #222222;
	color:#EFEFEF;
}

.tagline{
	position:absolute;
	top:18%;
	left:10%;
	width:40%;
	text-align: center;
	z-index: 9999;
}

.tagline a:link{text-decoration: none;}

.tagline h1{
	font-family: 'Brittany Signature', sans-serif;
	font-size: 2.5em;
	color:#000000;
	letter-spacing: 1px;
}

.tagline p{
	font-family: 'Tenor Sans', sans-serif;
	font-size: 1em;
	color:#000000;
	letter-spacing: 1px;
}

.tagbtn{
	position:relative;
	margin:20px auto;
	width:25%;
	padding:10px;
	background-color: #111111;
	text-align: center;
	font-family: 'Tenor Sans', sans-serif;
	font-weight:600;
	color:#EFEFEF;
	transition: all .3s ease;	
}

.tagbtn:hover{
	background-color:#EFEFEF;
	color:#111111;
}

.homevideo{
	position:relative;
	margin:-102px auto;
	width:100%;
	height:850px;
}

.contentarea{
	position:relative;
	margin:40px auto;
	width:90%;
	height: 800px;
	text-align:center; 
}

.contentarea h2{
	font-family: 'Tenor Sans', serif;
	font-size: 1.5em;
	color:#111111;
}

.contentarea h3{
	font-family: 'Tenor Sans', serif;
	font-size: 1em;
	color:#111111;
}


.contentflex{
	position:relative;
	margin:0 auto;
	width:100%;
	display: flex;
	justify-content: space-between;
	gap:25px;
}

.box{
	flex-basis:33%;
}


.footer{
	position:relative;
	bottom:0;
	left: 0;
	width: 100%;
	height:200px;
	background-color: #111111;	
}

.footer img{
	margin:0 10px 0 10px;
	width:5%;
}

.footer a:link{
	text-decoration:none;
	color:aqua;
}

.footer p{
	font-family: 'Montserrat', sans-serif;
	font-size: .9em;
	color:#FFFFFF;
}

.footerflex{
	position:relative;
	padding-top:20px;
	margin: 20px auto;
	width:70%;
	display: flex;
	justify-content: space-between;
	gap:30px;
	align-items: center;
}

.footerbox{
	flex-basis: 50%;
	text-align:center;
}

/*CSS for product pages*/

.productbkgrnd{
	position:relative;
	margin:0 auto;
	width:100%;
	height:500px;
	display: flex;
	background-image: url("Backgrounds/ProductsDesk.jpg");
	background-attachment: scroll;
	background-position:center;
	background-repeat: no-repeat;
	background-size: cover;
}

.productbkgrnd h1{
	position:relative;
	margin:auto;
	font-family: 'Tenor Sans', sans-serif;
	font-size: 3em;
	color:#FFFFFF;
	text-shadow: 1px 1px 2px #000000;
}

.content{
	position:relative;
	margin:100px auto;
	width:80%;
}

.infocontent{
	position:relative;
	margin:40px auto;
	width:80%;
}



/*About CSS*/

.aboutbkgrnd{
	position:relative;
	margin:0 auto;
	width:100%;
	height:500px;
	background-image:url("Backgrounds/AboutDesk.jpg");
	background-position: center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
}

.aboutbkgrnd h1{
	position:relative;
	margin:auto;
	font-family: 'Tenor Sans', sans-serif;
	font-size: 3em;
	color:#FFFFFF;
	text-shadow: 1px 1px 2px #000000;
}

.aboutflex{
	position:relative;
	margin:0 auto;
	width:80%;
	display: flex;
	justify-content: space-between;
	gap:50px;
	align-items: center;
}

.aboutvideo{
	flex-basis:45%;
}

.abouttext{
	flex-basis: 55%;
}

.abouttext h2{
	position:relative;
	margin:auto;
	font-family: 'Tenor Sans', sans-serif;
	font-size: 3em;
	color:#222222;	 
}

.abouttext p{
	font-family: 'Montserrat', sans-serif;
	font-size: .95em;
	color:#222222;
}



/*End of About CSS*/


/*CSS for info page*/

.infobkgrnd{
	position:relative;
	margin:0 auto;
	width:100%;
	height:500px; 
}

.infobkgrnd h1{
	position:relative;
	margin:auto;
	font-family: 'Tenor Sans', sans-serif;
	font-size: 3em;
	color:#FFFFFF;
	text-shadow: 1px 1px 2px #000000;
}


/*End Css for info page*/

.productbkgrndMOB{display: none;}
#sidebar{display: none;}
.homevideoMOB{display: none;}
.mobtagline{display: none;}
.infobkgrndmob{display:none;}
@media screen and (max-width:1680px){
	
.logo{	 
	top:1px;
	left:4%;
	width:11.5%;	 
}
	
.tagline{ 
	top:16%;
	left:7%;
	width:50%;	 
} 

.tagline h1{ 
	font-size: 2.3em;	 
}

.tagline p{ if;
	font-size: 1em; 
}	
	
.homevideo{ 
	margin:-102px auto;
	width:100%;
	height:650px; 
}
	
.contentarea{ 
	margin:140px auto;
	width:90%;
	height: 700px; 
}
	
	

/*About pg css*/
	
.abouttext h2{font-size: 2.5em;}
	.abouttext p{font-size: .9em;}


	
	
}

@media screen and (max-width:1440px){
	
.logo{	 
	top:1px;
	left:4%;
	width:13%;	 
}
	
.menu{ 
	top:34px;
	left:38%;
	width:60%; 
}
	
.menu a{
	font-size: .9em;
}
	
.tagline{ 
	top:14%;
	left:5%;
	width:55%;	 
} 

.tagline h1{ 
	font-size: 1.8em;	 
}

.tagline p{ if;
	font-size: 1em; 
}

.homevideo{ 
	margin:-102px auto;
	width:100%;
	height:550px; 
}
	
.contentarea{
	position:relative;
	margin:140px auto;
	width:90%;
	height: 700px;
	text-align:center;
}

	
/*About pg css*/
	
.aboutbkgrnd{height:350px;}
.productbkgrnd{height:350px;}
.aboutflex{width:95%;}
.abouttext h2{font-size:2.2em;}	
.infocontent{
	position:relative;
	margin:-80px auto;
	width:80%;
}
	
	#infofooter{
		position: relative;
		bottom:-200px;
		left:0;
	}

	
	
}

@media screen and (max-width:1366px){
	
	
.logo{	 
	top:1px;
	left:4%;
	width:14%;	 
}
	
.menu{ 
	top:32px;
	left:38%;
	width:60%; 
}

.tagline{ 
	top:16%;
	left:3%;
	width:55%;	 
} 

.tagline h1{ 
	font-size: 1.5em;	 
}

.tagline p{ if;
	font-size: .9em; 
}

	
.homevideo{ 
	margin:-102px auto;
	width:100%;
	height:530px; 
}

	
.contentarea{
	position:relative;
	margin:140px auto;
	width:90%;
	height: 650px;
	text-align:center;
}
	
	
/*About pg CSS*/
	
.abouttext h2{font-size:2em;}
	.abouttext p{font-size: .85em;}
	
}


@media screen and (max-width:1280px){
	
	
.logo{	 
	top:1px;
	left:4%;
	width:14.5%;	 
}
	
.menu{ 
	top:32px;
	left:38%;
	width:60%; 
}

.tagline{ 
	top:16%;
	left:3%;
	width:55%;	 
} 

.tagline h1{ 
	font-size: 1.5em;	 
}

.tagline p{ if;
	font-size: .9em; 
}

	
.homevideo{ 
	margin:-102px auto;
	width:100%;
	height:500px; 
}

	
.contentarea{
	position:relative;
	margin:140px auto;
	width:90%;
	height: 650px;
	text-align:center;
}
	
.aboutbkgrnd{height:300px;}
.productbkgrnd{height:300px;}

.infocontent{
	position:relative;
	margin:-120px auto;
	width:80%;
}
	
	
}

@media screen and (max-width:1024px){
	
.logo{	 
	top:1px;
	left:4%;
	width:17%;	 
}
	
.menu{ 
	top:32px;
	left:36%;
	width:60%; 
}
	
	.menu a{font-size:.8em;}

.tagline{ 
	top:14%;
	left:3%;
	width:60%;	 
} 

.tagline h1{ 
	font-size: 1.1em;	 
}

.tagline p{ if;
	font-size: .8em; 
}
	
.homevideo{ 
	margin:-102px auto;
	width:100%;
	height:400px; 
}
	
.contentarea{
	position:relative;
	margin:140px auto;
	width:90%;
	height: 400px;
	text-align:center;
}


.contentarea h2{
	font-family: 'Tenor Sans', serif;
	font-size: 1.1em;
	color:#111111;
}

.contentarea h3{
	font-family: 'Tenor Sans', serif;
	font-size: .9em;
	color:#111111;
}
	
	
	
}

@media screen and (max-width:1180px){
	
.tagline{ 
	top:12%;
	left:3%;
	width:60%;	 
} 
	
	.contentarea{height:750px;}
	
	
}

@media screen and (max-width:820px){
	
.logo{	 
	top:1px;
	left:1%;
	width:20%;	 
}
	
.menu{ 
	top:32px;
	left:32%;
	width:65%; 
}
	
	.menu a{font-size:.7em;}

.tagline{ 
	top:10%;
	left:3%;
	width:60%;	 
} 

.tagline h1{ 
	font-size: 1em;	 
}

.tagline p{ font-size: .7em;}
	.tagbtn{font-size: .7em;}
	
.homevideo{ 
	margin:-102px auto;
	width:100%;
	height:350px; 
}
	
.contentarea{
	position:relative;
	margin:140px auto;
	width:90%;
	height: 650px;
	text-align:center;
}
	
	.contentflex{width:100%;}


.contentarea h2{
	font-family: 'Tenor Sans', serif;
	font-size: 1em;
	color:#111111;
}

.contentarea h3{
	font-family: 'Tenor Sans', serif;
	font-size: .8em;
	color:#111111;
}
	
.footer{height:300px;}
	
/*About CSS*/
	
.aboutflex{flex-direction: column;} 	
}

@media screen and (max-width:768px){
.tagline{ 
	top:15%;
	left:3%;
	width:85%;	 
}
	
.menu{ 
	top:32px;
	left:30%;
	width:69%; 
}


	.contentarea{height:100px;}
	.contentflex{flex-direction:column; width:80%;}	
	.footer{
		bottom:-600px;
	}
	
	#aboutfooter{bottom:-200px;}
	#productsfooter{bottom: -300px;}
	
}

@media screen and (max-width:732px){
	
#sidebar{
	display:block;
	background:#333333;
	position:fixed;
	width:200px;
	left:-200px;
	top:0; 
	opacity:.90;
	height:100%;
	transition: left 0.3s linear;
	z-index: 9999999;
}
			
#sidebar.visible{
	left:0;
	transition: left 0.3s linear;
}
		
#sidebar-btn{
	display:inline-block;
	vertical-align:middle;
	width:40px;
	height:15px;
	cursor:pointer;
	margin:20px;
	position:fixed;
	top:75px;
	right:15px;				 
}
			
#sidebar-btn span{
	height:3px;
	background:#222222;
	margin-bottom:5px;
	display: block;
}
	
#sidebar-btn span:nth-child(2){width:75%;}
#sidebar-btn span:nth-child(3){width:60%;}
	
ul{
	margin:0;
	padding:0;				
}
		
ul li{list-style:none; padding-top:10px;}
		
ul li a{
	font-family: 'Roboto', sans-serif;
	font-size:1em;
	color:#FFFFFF;
	border-bottom:.25px solid #FFFFFF;
	display:block;
	width:152px;
	padding:15px 0 15px 10px;
	text-decoration:none;				
}
	
.logo{	 
	top:25px;
	left:25%;
	width:50%;	 
}

	
.menu{display: none;}
.header{display: none;}
	
.homevideo{display: none;}	
.homevideoMOB{
	position:relative;
	margin:160px auto;
	width:100%;
	height:310px; 
	display: block;
}
	
.tagline{display: none;}
	
	.mobtagline{
		position:relative;
		margin:-120px auto;
		width:90%;
		display: block;
	}

.mobtagline a:link{text-decoration: none;}

.mobtagline h1{
	font-family: 'Brittany Signature', sans-serif;
	font-size: 1.2em;
	color:#000000;
	letter-spacing: 1px;
}

.mobtagline p{
	font-family: 'Tenor Sans', sans-serif;
	font-size: 1em;
	color:#000000;
	letter-spacing: .9px;
}
	
.productbkgrnd{
	position:relative;
	margin:150px auto;
	width:100%;
	height:300px;
	display: flex;
	background-image: url("Backgrounds/ProductsDesk.jpg");
	background-attachment: scroll;
	background-position:center;
	background-repeat: no-repeat;
	background-size: cover;
}
	
.aboutbkgrnd{
	position:relative;
	margin:150px auto;
	width:100%;
	height:300px;
	background-image:url("Backgrounds/AboutDesk.jpg");
	background-position: center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
}

.infobkgrnd{display: none;}
	.infobkgrndmob{
		position:relative;
		margin:150px auto;
		width:100%;
		height:300px;
		display: block;
	}
	
.infocontent{
	position:relative;
	margin:-140px auto;
	width:90%;
}

	
 	
.footer{bottom:-400px;}
	
	.footerflex{width:90%;}


	
}