*{
	margin: 0;
    padding: 0;
}

html, body { height: 100%; width: 100%; margin: 0; overflow-y:auto;}




#body_background{
  /* The image used */
  background-image: url("bg.jpg");

  /* Full height */
  height: 100%; 
  

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


.menu{
	width:80%;
	height:10%;
	position: relative;
	border-bottom: 1px solid #fff;
    text-align:center;
    align-items: center;
    margin: 0 auto;
    display : flex;
  	align-items : center;
  	justify-content: center;
  	font-family: tomarik-extrovert, sans-serif;
	font-weight: 400;
	font-size: 1em;

}

#black_border{
	border-bottom: 1px solid #000;
}

.menu ul{
	list-style-type: none;
  	display:inline;
  	text-align:center;
}

.menu ul li {
    display:inline-block;
    margin:50px;
    cursor: pointer;
}

.menu ul li a{
	text-decoration: none;
	display:block;
}

.black_menu{
	color: #000;
}

.white_menu{
	color: #fff;
}

#menu_name{
	font-family: montana, sans-serif;
	font-weight: 400;
	font-size: 2em;
}

#menu_photos{
	border-bottom: 1px solid dashed;
}

#menu_videos{
	border-bottom: 1px solid dashed;
}

#phone_menu_home,
#phone_menu_photos,
#phone_menu_videos{
	border-bottom: 1px dashed #fff;
}


#phone_menu{
	width:100%;
	display: none;
	position: fixed;
	top:0;
	background-color: black;

}

#menu_icon{
	width:30px;
	height: auto;	
	margin:25px;
}

#phone_menu_expand{
	width:0%;
	display: none;
}

#phone_menu_open{
	background-color: #000;
	position: fixed;
	text-align:center;
    align-items: center;
    margin: 0 auto;
    display : block;
    height: auto;
  	justify-content: center;
  	font-family: tomarik-extrovert, sans-serif;
	font-weight: 400;
	font-size: 1em;
	z-index: 2;
	width:100%;
	border-top: 1px solid #fff;
}

#phone_menu ul{
	list-style-type: none;
}

#phone_menu ul li a{
	text-decoration: none;
	color:#fff;
	z-index:1;
}

#phone_home{
	margin-top: 25px;
}

#menu_phone_name{
	font-family: montana, sans-serif;
	font-weight: 400;
	font-size: 2em;
	float:right;
	margin:20px;
	margin-right: 30px;
	z-index: 1;
	color: #FFF;
}

#phone_photos{
	margin:50px;
	z-index:1;
}

#phone_videos{
	margin:50px;
	z-index:1;
}

.about_me{
	width:50%;
	text-align: center;
	margin: 0 auto;
	margin-top:8%;
	color:#fff;
}	

.vertical { 
    border-left: 1px solid black; 
    height: 20px; 
    text-align: center;
    position:relative;
    left: 50%;
} 

.about_me h1{
	font-size: 20px;
	font-family: futura-pt, sans-serif;
	font-weight: 300;
}

.fa-file-pdf {
    color: #fff;
  }

.about_me h2{
	font-size: 16px;
	font-family: futura-pt, sans-serif;
	font-weight: 300;
	display: inline;
}

.about_me img {
  border-radius: 50%;
  width:50px;
}

#contact{
  border: 1px dashed #fff;
  display: inline-block;
  margin-top:8%;
  padding: 2%;
}

#sample_pictures{
  width:50%;
  text-align: center;
  margin: 0 auto;
  display: box;
  position:relative;
  overflow:auto;
  margin-top: 2%;
}

.sample input[type=image],
.sample_category input[type=image]{
  width:100%;
  height:100%;
  opacity: 1;
}

.sample{
  float:left;
  width:20%;
  height:20%;
  margin:3% 2.5% 3% 2.5%;
  padding:0;
}

.sample:hover{
	opacity:0.8;
}


#picture_categories{
	width:25%;
	text-align: center;
  	margin: 0 auto;
  	display: box;
  	position:relative;
	overflow:auto;
  	margin-top: 5%;
}

.sample_category{
	float:left;
  	width:40%;
  	height:40%;
  	margin:5% 5% 5% 5%;
  padding:0;
}


/*pop up that contains image*/
.outer_div_image{
    height:100%;
    width:0%;
    position:fixed;
    z-index:1;
    top:0;
    left:0;
    background-color: rgba(0, 0, 0, 0.9);
    overflow-x: hidden;
}

/*div that contains image*/
#inner_div_image{
	width:80%;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
}

#inner_div_image input[type=image]{
	position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
}

.portrait{
	width:45%;
    height: auto;
}

.square{
	width:60%;
    height: auto;
}

.landscape{
	width:90%;
    height: auto;
}

.next_button{
	width:15px;
	height:auto;
	position: absolute;
    bottom: 20px;
    right: 20px;
}

/*exit button in pop up window*/
.fa-times{
	position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    padding:10px;
    cursor: pointer;
}

.fa-angle-right{
	color: #fff;
	position: absolute;
    top: 50%; 
    right: 5%;
    cursor: pointer;
    padding:10px;
}

.fa-angle-left{
	color: #fff;
	position: absolute;
    top: 50%; 
    left: 5%;
    cursor: pointer;
    padding:10px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0.5%;
  width:70%;
  text-align: center;
	margin: 0 auto;
	margin-top:2%;
	margin-bottom:2%;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 24%;
  max-width: 24%;
  padding: 0 0.5%;
}

.column img {
  margin-top: 5%;
  vertical-align: middle;
  width: 100%;
  margin-bottom: 0;
}

.outer_video{
	width:90%;
	text-align: center;
	margin: 0 auto;
	margin-top:2%;
	position: relative;
}

.row_video{
	width:100%;
	margin-top:2%;
	vertical-align: middle;
	text-align: center;
}

.video{
	vertical-align: middle;
  	width: 30%;
 	margin:1.66%;
 	float: left;
 	box-shadow: 2px 2px 8px #e8e8e8;
}

video{
	width:100%;
	height:auto;
	float:left;
}

.video h2{
	font-size: 16px;
	font-family: futura-pt, sans-serif;
	font-weight: 300;
}

.video h3{
	font-size: 14px;
	font-family: futura-pt, sans-serif;
	font-weight: 300;
	color: #989898;
}

.video h4{
	font-size: 12px;
	font-family: futura-pt, sans-serif;
	font-weight: 300;
	color: #989898;
	border-top: 1px dashed #989898;
	margin-top:2%;
	padding-top: 2%;
}


.media{
	float: left;
  	width: 100%;
}

.description{
	float: left;
	width: 100%;
	padding: 2% 0;
}


/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 48%;
    max-width: 48%;
    padding: 0 1%;
  }

  .about_me{
	width:85%;
	margin-top:30%;
}

body{
	position: fixed;
	bottom: 0;
}	

#phone_menu{
	width:100%;
	display: inline;
}

.menu{
	width:0%;
	display: none;
}

.row{
	margin-top: 80px;
}

.video{
	width:46%;
	margin:2%;
}

.row_video{
	margin-top: 80px;
	flex: 100%;
   max-width: 100%;
}

}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {

	
body{
	position: fixed;
	bottom: 0;
}

#phone_menu{
	width:100%;
	display: inline;
}

.about_me{
	width:85%;
	margin-top:30%;
}

.about_me img {
  border-radius: 50%;
  margin-top: 5%;
  margin-bottom: 5%;
  width:100px;
}

#sample_pictures{
	width:0%;
	display: none;
}

.vertical{
	height:0px;
}

.menu{
	width:0%;
	display: none;
}

.row{
	width:85%;
	margin-top: 80px;
}

.column {
   flex: 100%;
   max-width: 100%;
}

.video{
	width:90%;
	margin:5%;
}

.row_video{
	margin-top: 80px;
	flex: 100%;
   max-width: 100%;
}
}