h2{
	font-size:24px;
	font-weight:normal;
}
/*        MENU           */
#menu{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
	
	overflow:hidden;
	
	width:100%;
	
	background-color:rgba(0,0,0,0.8);
	
	transition: 0.5s;
}
@media all and (orientation: landscape) and (max-width: 800px) {
#menucontainer{
		border:1px dotted red;
		display:flex;
		padding-top:0px;
		padding-bottom:15px;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:flex-between;
		align-item:center;
	}
	#menucontainer a{
	font-size:18px;
	display:flex;
	justify-content:center;
	align-items:center;
	
	width:20%;
	height:48px;
	text-align:center;
	}
}
@media all and (orientation: portrait) and (max-width: 800px) {	
	#menucontainer{
		display:flex;
		padding-top:15px;
		padding-bottom:15px;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:space-between;
	}
	
#menucontainer a{
	font-size:18px;
	display:flex;
	justify-content:center;
	align-items:center;
	
	width:50%;
	height:48px;
	text-align:center;
}
}

#menu a{
	margin-bottom:5px;
}
#menu a:before{
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: white;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

#menu a:hover:before{
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/*             TOP                    */
#top{
	z-index:2;
	width:100%;
	position:fixed;
	top:0%;
	transition: top 0.5s;
}

#titleTop{
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:space-between;
	align-items:center;
	
	width:100%;
	height:100px;

	background-color:rgba(250,250,250,1);
}

#title, #topicon{
	color:rgba(0, 0, 0, 1);
	font-style:normal;
}

#topicon:hover{
	color:rgba(0, 0, 0, 0.15);
	-webkit-transition: 0.5s ease;
			transition: 0.5s ease;	
}

#topicon{
	margin-right:15px;
	font-size: 35px;
}

#title{
	margin-left:15px;
	font-size: 26px;
}

/* MAIN */
		
#main{
	transition: margin-top .5s;
	margin-top:100px;
	width:100%;
}
	
a {
	position: relative;
	text-decoration: none;
	font-size: 24px;
	color: #cccccc;
    text-decoration: none;
    border-bottom: 0px solid white;    
    -webkit-transition: 0.5s ease;
            transition: 0.5s ease;
}

a:hover{
	-webkit-transition: 0.5s ease;
			transition: 0.5s ease;
	color: white;
}
.black-a{
	color:rgba(0, 0, 0, 1);
}

.black-a:hover{
	color:rgba(0, 0, 0, 0.15);
	-webkit-transition: 0.5s ease;
			transition: 0.5s ease;	
}



	/* GALERIE */
	
.content{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	
	width:100%;
	margin-bottom:30px;
	
	padding-right:15px;
	padding-left:15px;
}

.container{
	display:flex;
	width:100%;
	
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:stretch;
	align-items:flex-start;
}	

.infocontainer{
	display:flex;
	width:100%;
	
	flex-direction:column;
	justify-content:flex-start;
	align-items:center;
	
	margin-bottom:15px;
}
.infocontainer-title{
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:flex-start;
	align-items:center;
	
	width:100%;
}
.infocontainer-title *{
	margin-right:10px;
	}
.infocontainer-desc{
	font-size:14px;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	
	width:100%;
}

#bio-container{
	padding-right:15px;
	padding-left:15px;
	width:100%;
		
	flex-direction:column;
	flex-wrap:wrap;
	justify-content:space-around;
	align-items:flex-start;
}
#bio-container p{
	color:grey;
	font-size:12px;
	text-align:justify;
}
#bio-container h3{
	text-align:center;
}
#contact-container{
	padding-right:15px;
	padding-left:15px;
	width:100%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}
#top-bio{
	display:flex;
	flex-direction:row;
	align-items:center;
	padding-top:5px;
}

/* SIDE */
	
.side{
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
	
	width:100%;
	padding:15px;
}
	
.side a{
	font-size:18px;
	font-weight:normal;
	font-family:roboto-light;
	color:black;
	margin-bottom:7px;
}

.side a {
  display: inline-block;
}

.side a:after {
  content: '';
  width: 0px;
  height: 1px;
  display: block;
  background: black;
  transition: 500ms;
}

.side a:hover:after {
  width: 100%;
}

/* FOOTER */
	
footer{
	position:fixed;
	bottom:0%;
	background-color:white;
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:space-between;
	align-items:center;
	
	width:100%;
	height:30px;
	
	padding-right:15px;
	padding-left:15px;
}

footer a{
	font-size:14px;
}

#creditweb{
	color:rgba(0,0,0,0.4);
	font-size:9px;
}

/* MODAL */
.modal{
	padding:5px;
	z-index:3;
	display:none;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;

	background-color:white;
	
	flex-direction:column;
	justify-content:center;
	align-items:center;
}
	
.modal-content{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	
	width:100%;
	height:100%;
}

.mySlides{
	display:none;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	height:90%;
	width:90%;
}
	
.mySlides img{
	max-height:90%;
	max-width:100%;
	cursor:pointer;
}
@media all and (orientation: landscape) {
  .mySlides-caption{
	  padding-top:5px;
    width:100%;
	height:10%;

	color:black;
	font-size:13px;
	
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
  }
  .captionsmall{
	font-size:10px;
	color:grey;
}
}@media all and (orientation: portrait) {
  .mySlides-caption{
	  padding-top:5px;
    width:100%;
	height:10%;

	color:black;
	font-size:13px;
	
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:flex-start;
  }
  .captionsmall{
	font-size:10px;
	color:grey;
}
}

.display-topright{position:absolute;right:0;top:0;padding:1%;font-size:50px;color:black;}
.display-right{position:absolute;top:50%;right:0%;display:block;height:100px;margin-top:-50px;font-size:50px;}
.display-left{position:absolute;top:50%;left:0%;display:block;height:100px;margin-top:-50px;font-size:50px;}
	
/* MEDIA CONTAINER */

.media-container{
	display:flex;
	flex-grow:1;
	flex-shrink:1;
	padding:2px;
	height:180px;
	
	
	background:	-moz-linear-gradient(to bottom right, rgba(0,0,0,.1), rgba(0,0,0,0) 45%),
				-moz-linear-gradient(to top right, rgba(0,0,0,.1), rgba(0,0,0,0) 45%),
				-moz-linear-gradient(to bottom left, rgba(0,0,0,.1), rgba(0,0,0,0) 45%),
				-moz-linear-gradient(to top left, rgba(0,0,0,.1), rgba(0,0,0,0) 45%); /* FF3.6+ */
	background: linear-gradient(to bottom right, rgba(0,0,0,.1), rgba(0,0,0,0) 45%),
				linear-gradient(to top right, rgba(0,0,0,.1), rgba(0,0,0,0) 45%),
				linear-gradient(to bottom left, rgba(0,0,0,.1), rgba(0,0,0,0) 45%),
				linear-gradient(to top left, rgba(0,0,0,.1), rgba(0,0,0,0) 45%); /* W3C */
	background: -ms-linear-gradient(to bottom right, rgba(0,0,0,.1), rgba(0,0,0,0) 45%),
				-ms-linear-gradient(to top right, rgba(0,0,0,.1), rgba(0,0,0,0) 45%),
				-ms-linear-gradient(to bottom left, rgba(0,0,0,.1), rgba(0,0,0,0) 45%),
				-ms-linear-gradient(to top left, rgba(0,0,0,.1), rgba(0,0,0,0) 45%); /* IE10+ */
	background: -o-linear-gradient(to bottom right, rgba(0,0,0,.1), rgba(0,0,0,0) 45%),
				-o-linear-gradient(to top right, rgba(0,0,0,.1), rgba(0,0,0,0) 45%),
				-o-linear-gradient(to bottom left, rgba(0,0,0,.1), rgba(0,0,0,0) 45%),
				-o-linear-gradient(to top left, rgba(0,0,0,.1), rgba(0,0,0,0) 45%); /* Opera 11.10+ */
}
	
.media-container:hover{
		background:rgba(0,0,0,0) 0%;
		cursor:pointer;
}
	
.media-container .media{
	flex-grow:1;
	flex-shrink:1;
	cursor:pointer;
	z-index:-1;
	height:100%;
	max-width:100%;
	object-fit:cover;
}
.text-container{
	max-width:100%;
	display:block;
	text-align:justify;
	text-indent:30px;
}
/* ------------RANDOM SLIDESHOW --------------- */

#randomslideshow{
	width:100%;
	height:100%;

	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	
}
#randomslideshow img{
	max-height:90%;
	max-width:90%;
}