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

body{
	padding:0;
	margin:0;
	background-image: url("backgrounds/WHTBKGRND.jpg");
	background-position:center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
}

#wrapper{
	
	position:absolute;
	top:0;
	left:0;
	width:100%;
	text-align: center;
}

.logo{
	position:absolute;
	top:5px;
	left:2%;
	width:10%;
	z-index: 999;
}

.header{
	position:relative;
	margin:0 auto;
	width:100%;
	height:140px;
}

.menu{
	position:absolute;
	margin:55px 40%;
	width:20%; 
	display: flex;
	justify-content: space-between;
	gap:20px;
	text-align:center; 
}

.menu a{
	text-decoration:none;
	color:#FFFFFF;
	font-family: 'Roboto', sans-serif;
	text-align: center;
	padding:10px;
	flex-basis: 20%;
	background-color: #000000;
	transition: all .4s ease;
}

.menu a:hover{
	background-color: #706F6F;
}

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

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

.content a:link{text-decoration:none; color: #FFFFFF;}
.content a:visited{color:#FFFFFF;}

.content h1{
	font-family: 'Roboto', sans-serif;
	font-size: 2em;
	color:#333333;
}

.content p{
	font-family: 'Roboto', sans-serif;
	font-size: 1em;
	color:#000000;
}

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

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

.box p{
	position:relative;
	margin:10px auto;
	margin: 8px;
	min-height:180px; 
}

.boxbtn{
	position:relative;
	bottom:10px;
	left:10px;
	padding:8px;
	background-color:#000000;
	width:40%;
	font-family: 'Roboto', sans-serif;
	font-size: .9em;
	color: #FFFFFF;
	text-decoration: none;
	transition: all .4s ease;
}

.boxbtn:hover{
	background-color: #706F6F;
}

 
.footer{
	position:absolute;
	margin:150px auto;
	width:100%;
	height:150px;
	background-color: #000000;
}

.footerflex{
	position:relative;
	margin:25px auto;
	width:80%;
	font-family: 'Roboto', sans-serif;
	font-size: .9em;
	color:#EFEFEF;
}


/*CSS for content page*/

.contentbackground{
	position:relative;
	margin:0 auto;
	width:100%;
	height:400px;
	background-image: url("backgrounds/ContentDesk.jpg");
	background-position:center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-size: cover;
}


.laneybackground{
	position:relative;
	margin:0 auto;
	width:100%;
	height:400px;
	background-image: url("backgrounds/LANEYDESK.jpg");
	background-position:center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-size: cover;
}

.jillianbackground{
	position:relative;
	margin:0 auto;
	width:100%;
	height:400px;
	background-image: url("backgrounds/JillianDesk.jpg");
	background-position:center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-size: cover;
}

.videobackground{
	position:relative;
	margin:0 auto;
	width:100%;
	height:400px;
	background-image: url("backgrounds/videodesk.jpg");
	background-position:center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-size: cover;
}


/*CSS for video page*/
.videoflex{
	position:relative;
	margin: 0 auto;
	width:90%;
	display: flex;
	justify-content:space-between;
	gap:50px; 
	
}

.videobox{
	flex-basis: 30%;
	text-align: center;
}

.box p{
	position:relative;
	margin:10px auto;
	margin: 8px;
	min-height:180px; 
}

/*End Css of video page*/


#sidebar{display: none;}


@media screen and (max-width:732px){
	
.logo{
	position:absolute;
	top:5px;
	left:2%;
	width:35%;
	z-index: 999;
}

	
	
	#sidebar{
		display:block;
		background:#333333;
		position:fixed;
		width:200px;
		left:-200px;
		top:0;
		opacity:.85;
		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:80px;
		right:10px;		
	}
	
	#sidebar-btn span{
		height:3px;
		background:red; 
		margin-bottom:5px;
		display:block;
	}
	
	#sidebar-btn span:nth-child(2){width:85%;}
	#sidebar-btn span:nth-child(3){width:70%;}
	
	ul{
		margin:0;
		padding:0;				
	}
			
	ul li{list-style:none; padding-top:10px;}
		
	ul li a{
		font-family: 'Roboto', sans-serif;
		font-size: 16px;
		color:#FFFFFF;
		border-bottom:.25px solid #FFFFFF;
		display:block;
		width:152px;
		padding:15px 0 15px 10px;
		text-decoration:none;				
	}
	
	
.background{
	position:relative;
	margin:150px auto;
	width:100%;
	height:500px;
	background-image: url("backgrounds/homemob.jpg");
	background-position:center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-size: cover;
}

.header{display:none;}
	
.contentflex{flex-direction: column;}
	.content{
		margin:-60px auto;
		with:90%;
	}
	
	#laneycontent{
		margin:0px auto;}
	.contentflex{width: 100%;}
	.box p{
	   flex-basis: 100%;
	   min-height:120px;
	}
	
	
.contentbackground{
	position:relative;
	margin:150px auto;
	width:100%;
	height:400px;
	background-image: url("backgrounds/Contentmob.jpg");
	background-position:center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-size: cover;
}
	
	
.laneybackground{
	position:relative;
	margin:150px auto;
	width:100%;
	height:400px;
	background-image: url("backgrounds/laneymob.jpg");
	background-position:center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-size: cover;
}

.jillianbackground{
	position:relative;
	margin:150px auto;
	width:100%;
	height:400px;
	background-image: url("backgrounds/JillianMob.jpg");
	background-position:center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-size: cover;
}


	
	
	
	
	
	
}