html{
	width: 100%;
	height:100vh;
	margin: 0px;
	padding: 0px;
	color: white;
	font-family: 'Cinzel', serif;
	overflow-x: none;
}

nav{
	font-size: 1rem;
	background-color: rgb(105,105,105, 0.5);
	z-index: 10;
	position:relative;
	min-height: 12vh;
	max-width: 100%;
}

#social{
	position: absolute;
	right: 0px;
	padding: 5px;
	display: flex;
	flex-direction: row;
}

@media (max-width: 700px) {
	#social{
			display: flex;
	flex-direction: column;
	}
}


#social>a>img:hover{
	background-color: rgb(105,105,105, 0.5);
	transition: .5s;

}


 a { text-decoration: none;
 color:white; }

 a:hover{
 	cursor: pointer;
 }

nav ul{
	list-style: none;
	margin: 0;
	padding: 0;
	justify-content: space-around;
	display:flex;
	align-items: center;
	z-index: 10;
	min-height: 100%;
}


@media  (max-height: 522px) {
	nav ul{
		display:none;
	}
}

 @media (max-width: 700px) {


 	ul li:nth-child(1){
 		display: none;
 	}
 	ul li:nth-child(2){
 		display: none;
 	}

 	 nav ul{
 	justify-content: center;
 }


 	ul li:nth-child(4){
 		display: none;
 	}
 	ul li:nth-child(5){
 		display: none;
 	}

 

/*ALLOWS MOBILE NAV TO SHOW*/
#nav>li{
	display: flex;
}
 
 }


nav ul li{
	cursor: pointer;
	padding: 0.5rem;

}

nav ul li:hover{
	background-color: rgb(105,105,105, 0.5);
}


/*LOGO IN THE NAV BAR*/



#logo{
	
	border-radius: 10px;
	display: flex;
	margin: 0px;
	flex-direction: column;	
	

}

#headerPhoto{

	border: 8px solid;
	width: 70px;
	height: 47px;
	border-color: rgba(255, 255, 255, 1); 
	margin: auto;
	position: relative;

	z-index: 1;

}
#headerPhotoText{
	
	z-index:10;
	font-size: 35px;
	font-family: 'Satisfy', cursive;
	margin: auto;
	position: relative;
	bottom: 5px;
}

#headerPhotoTextPhotography{

	z-index:10;
	font-size: 15px;
	font-family: 'Cinzel', serif;
	margin:auto;
	position: relative;
	bottom: 15px;
	
}
/*END LOGO*/


/*Section 1 */

.container{
	display: flex;
	flex-direction: column;
	max-width: 98%;
	margin:auto;
	padding-top: 30px;
	background-image: url("pictures/ericpic17.jpg");
	  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
	
}


@media  (min-width: 800px) {
	.container{
		flex-direction: row;

	}
	
	.sec1a{
		width: 40%;

	}

	.sec1b{
		
		width: 60%;
	}
}

@media  (max-width: 800px) {
	.container{
		

	}
	
}



.sec1a{
	width:97%;
	background-image: url("pictures/ericHimself2.jpg");
	background-size: cover;
	background-position: center;
	margin: auto;
	height: 50vh;
	margin-left: 10px;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 30px;
}


.sec1b{
	width: 95%;
	background-color: rgb(255, 242, 230);
	min-height: 47vh;
	height: xx;
	margin: auto;
	color: black;
	border: 7px double white;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	margin-bottom: 10px;
	padding-bottom: 20px;
	
}
.sec1b>h1{
	padding-left: 20px;
	padding-top: 30px;
}
.sec1b>p{
	font-size: 20px;
	width: 76%;
	margin: auto;
	padding-top: 10px;
	position: relative;

	padding-bottom: 30px;
}



#contactMeButton {
	background-color: rgb(255, 242, 230);
    box-shadow: 
    12px 12px 16px 0 rgba(255, 255, 255, 0.3) inset,
    -8px -8px 12px 0 rgba(0, 0, 0, .25) inset;
    width: 40%;
    display: block;
   margin: auto;
   padding-top: 20px;
   padding-bottom: 20px;
  border-radius: 10px;
  font-family: 'Cinzel', serif;
   
}

#contactMeButton:hover{
  box-shadow: 
	12px 12px 16px 0 rgba(0, 0, 0, 0.25),
	-8px -8px 12px 0 rgba(255, 255, 255, 0.3);
	font-size: 15px;
	transition: .7s;
	cursor: pointer;
  
}



/*Hero Image...
THE HEROSLIDE AND HEROIMG STYLES ARE THE KEY TO FORCING AN IMAGE (NOT BACKGROUND-IMG) 
INTO FITTING INTO IT'S PARENT DIV!!! *** search: FORCE IMG INTO DIV ***
*/



#heroNav{
	position: relative;
	margin:auto;
	width: 98%;
	height:100vh ;
	z-index: 1;

}


#heroSlide{
	
	position: absolute;
	top: 0;  
	width: 100%;
	height: 100vh;

}



.heroImg{
	z-index: 1;
	width: 100%;
	height: 100vh;
	object-fit: fill;
	margin: auto;
	
}

@media  (max-width: 700px){
	.heroImg, #heroNav, #heroSlide{
	z-index: 1;
	width: 100%;
	height: 70vh;
	
	}
}







/*HERO IMAGE END*/






/*TOGGLE*/


#navBar{
	width: 35px;
	height: 25px;
	position: absolute;
	cursor: pointer;
	top:20px;
	left: 10px;

	


}@media only screen and (min-width: 700px) {
	#navBar, #nav, #mobileLogo{
		display:none;
	}
	
}

#nav{
	position: ;
	float: right;
	background: rgba(00, 00, 00, 0.2);
	width:50px;
	height: 100px ;
	border: 1px white solid;
	border-radius: 10px;
	text-align: center;	
	list-style: none;
	display: none;
	width: 100%;
	height: 500px;
}

.mobileNav{
	text-align: center;
	text-align: center;
	margin: auto;
	font-size: 30px;
	padding: 10px;
	}

#nav>.mobileNav>a{
	text-decoration: none;
	color: white;
	text-align: center;
	margin: auto;
cursor: pointer;

}

@media screen(max-width: 700px) {
	#nav>.mobileNav>a{
		display:block;
	}
}


#nav>.mobileNav:hover{
	background-color: rgb(255, 255, 255, .5);
	
}




.toggle{
	position: absolute;
	text-align: center;


}

.one{
	color: white;
	width: 35px;
	height: 4.5px;
	background-color: white;
	border-radius: 20px;
	top: 2px;
	
}

.two{
	color: white;
	width: 35px;
	height: 3.5px;
	background-color: white;
	border-radius: 20px;
	top: 11px;
	
}

.three{
	color: white;
	width: 35px;
	height: 2.5px;
	background-color: white;
	border-radius: 20px;
	top: 20px;
	
}



#closeToggle{
	border: 1px solid white;
	color:white;
	border-radius: 4px;
	margin-top: 1px;
	margin-right: 2px;
	position:absolute;
	top: 0px;
	right:0px;
	cursor: pointer;
	z-index: 10;
	font-size: 20px;
}

#closeToggle:hover{
	font-size: 30px;
	transition: .9s;


}


@media only screen and (max-width: 940px) {
	#desktopNav{
		display:none;
	}
	
}

/*END TOGGLE */






.bounce {
	

      height:50px;
      width:50px;
      -webkit-animation:bounce 1s infinite;
      z-index: 10;
     margin: auto;
     bottom: 0px;
     left: 48%;
      
    }
    
.bounce{
	cursor: pointer;
}
    @-webkit-keyframes bounce {
      0%       { bottom:0px; }
      25% { bottom:2px; }
      50%      { bottom:3px; }
      75%      { bottom:2px; }
      100%     {bottom:0px;}
    }

    @media  (max-width: 685px) {
    	.bounce{
    		left:45%;
    	}
    }



/*MODELING gallery SPECIFIC PAGE*/

#modelingBody{
	
	max-width: 100%;
	margin: auto;
	height:100%;
 background-attachment: fixed;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100vw 60vh;
  background-image: url('pictures/individualBackground.jpg');
}



.modelingImageDiv{
	text-align: center;
}
.modelingImage{
	min-height: 300px;
	min-width: 300px;
	opacity: .9;
	max-width: 70vw;
	max-height: 600px;
}

.modelingImage:hover{
	opacity: 1;
}

#modelingImageText{
	background-color: rgb(105,105,105, 0.5);
	height: 50px;
}

#heroNavModeling{
	position: relative;
	margin:auto;
	width: 98%;
	min-height: 9vh;
	z-index: 1;
}
/*END MODELING SPECIFIC*/


/*INDIVIDUAL SLIDE PAGE STYLING*/
.individualSlideBody{
	width: 100%;
	margin: auto;
	position: relative;
	height: 100vh;
 background-attachment: fixed;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100vw 60vh;
  
  background-image: url('pictures/individualBackground.jpg');
}


/*AT LESS THAN A HEIGHT OF 522PX, THE TOP BAR NEEDS TO DISAPPEAR
LEAVING ONLY THE TOGGLE TO  REMAIN.*/

.individualImageDiv{
	text-align: center;
	padding-top: 30px;
	position: relative;
	height: 70vh;
	overflow-y: hidden;




}
.individualImage{
	height: 50vh;
	max-width: 90%;
	object-fit: fill;
	border-radius: 10px;
	display: none;
	position: relative;
}



.indiOne{
	display: inline-block;
}
.individualImage:hover{
	opacity: 1;
}



.previous{
color:black;
height:30px;
width:30px;
margin-right: 50px;
}

.next{
color:black;
height:30px;
width:30px;
margin-left: 50px;
}

.previous:hover{
cursor:pointer;



}

.next:hover{
cursor: pointer;


}


/* END INDIVIDUAL SLIDE PAGE STYLING*/

footer{
	background-color: black;
	text-align: center;
	color: white;
	min-width: 100%;
	margin:auto;
	width:100%;
	position: absolute;
	bottom: 0px;

	

}