@media only screen and (max-width: 800px) {
   
	
	iframe {
        display: yes;
    }
	
	
}





@font-face {
   font-family: myFirstFont;
	src: local('Bebas Neue'), url('BebasNeue.woff') format('woff');}
	
@font-face {
   font-family: mySecondFont;
	src: local('Inconsolata'), url('Inconsolata.woff') format('woff');
}


@font-face {
   font-family: myThirdFont;
 src: local('BebasNeueBook'), url('BebasNeueBook.woff') format('woff');
}

.font_header_1 {
 font-family: myFirstFont;
 font-size: 8vh; color: white; padding: none
 }
 
.font_header_2  {
  font-family: mySecondFont ;font-size: 2vh;  padding: none; color: white;  }
  
.font_header_3 {
 font-family: myFirstFont;
 font-size: 8vh; color: white; padding: none; line-height: 1;
 }
 
 .font_header_4  {
  font-family: mySecondFont ;font-size: 2vh;  padding: none; color: white; line-height: 1; }
 
 .font_menu {
  font-family: myFirstFont;
  font-size: 5vh;
  letter-spacing: 3px;
  color: white;
  }
 
.font_menu_index {
  font-family: 'Major Mono Display', monospace;
   display: flex;
  align-items: center;
  justify-content: center; 
  letter-spacing: 3px;
  } 
 
.font_submenu_1 {
 font-family: myFirstFont;
 font-size: 6vh; 
 color: white; 
 padding: none;
 font-style: italic;
 letter-spacing: 6px;
 }
 
 .font_submenu_2 {
   font-family: myFirstFont;
 font-size: 5vh; color: white; padding: none
 }
 
 .font_dates {
   font-family: 'Major Mono Display', monospace;
 font-size: 5vh; color: white; padding-top: 1vh; padding-bottom: 1vh;
 }
 
 .font_submenu_2_underline {
   font-family: myFirstFont;
 font-size: 5vh; color: white; padding: none; text-decoration: underline;
 }



.font_basic {
  font-family: mySecondFont;
  font-size: 2.6vh;
  line-height: 1.4;
  color: white;
  
  
  }
  
.font_basic_black {
  font-family: mySecondFont;
  font-size: 2.6vh;
  line-height: 1.4;
  color: black;
  
  
  }
  
.font_basic_italic {
  font-family: mySecondFont;
  font-size: 2.6vh;
  line-height: 1.4;
  color: white;
  font-style: italic;

  
  
  }
  
.font_basic_bold {
  font-family: mySecondFont;
  font-size: 2.6vh;
  line-height: 1.4;
  color: white;
  font-weight: bold;
  
  
  }
.font_basic_underline {
  font-family: mySecondFont;
  font-size: 2.6vh;
  line-height: 1.4;
  color: white;
  text-decoration: underline;
  
  
  }
  
.font_basic_titles {
  font-family: mySecondFont;
  font-size: 3vh;
  line-height: 1.7;
  color: white;
  font-style: italic;
  font-weight: bold;
  
  
  }  
  
.font4 {
  font-family: myFirstFont;
  font-size: 5vh;
  letter-spacing: 3px;
  }
  
.font5 {
  font-family: mySecondFont;
  font-size: 3vh;
  letter-spacing: 0px;
  color: black;
  
  
  }
  

 a {
  color: white;
  -webkit-transition: color .5s linear;
  -moz-transition: color .5s linear;
  -ms-transition: color .5s linear;
  -o-transition: color .5s linear;
  transition: color 1s linear;
  transition: font-size 1s linear;
}

a:link {
	
    text-decoration: none;
	color: white;
	transition: color 1s;
}



a:hover {

color: gray


}


@keyframes example {
    0%   {filter: brightness(1); opacity: 0}
	40%   {filter: brightness(3); opacity: 0.5}
    100%  {filter: brightness(1); opacity: 1}
	
}



html { 

 background-image: radial-gradient(rgba(0, 0, 0, 0.0), rgba(100,100,100,0.2),rgba(50,50,200,0.2), rgba(50,50,100,0.2), rgba(50, 50, 50, 0.0));
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: thumb;
  background-color: black;
  width: 99vw;
  
}
 
header {
    display: -webkit-flex;
    display: flex;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.0), rgba(200,200,200,0.2),rgba(200,200,200,0.2), rgba(50, 50, 50, 0.0));	padding-left: 4vh;
    margin-top: 4vh;
	margin-bottom: 2vh;
    width: inherit;
    height: 10vh;
	padding-top: 2vh;
	padding-bottom: 1vh;
	padding-left: 5vw;
	align-items: flex-start;
	flex-direction: column;
    justify-content: space-around;

}

.header_item {
    
	max-width: 100vw;
    height: 100%;
    display:flex;
    flex-direction:column;
    justify-content:space-around;
	transition: width 1s, height 1s;
	
}

footer {
    max-width: 100vw;
	height: 12vh;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.0), rgba(100,120,100,0.0),rgba(100,100,150,0.0), rgba(50, 50, 50, 0.0));	padding-left: 4vh;
  
	margin-right: 0.05vw

}

.index_container {

    display: -webkit-flex;
    display: flex;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.0), rgba(200,200,200,0.0),rgba(200,200,200,0.0), rgba(50, 50, 50, 0.0));	padding-left: 4vh;
	-webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: inherit;
    height: 100%;
	padding-top: 1vw;
	padding-bottom: 1vw;
	align-items: flex-start;
	flex-direction: row;
    justify-content: space-around;
	
	margin-right: 0.05vw
	

}


.index_item {
    background: linear-gradient(to right,rgba(50, 50, 50, 0.3), rgba(20, 20, 20, 0.3), rgba(40, 40, 40, 0.3));
	width: 25vw;
    height: 22vh;
    display:flex;
    flex-direction:column;
    justify-content:space-around;
	transition: width 1s, height 1s;

	box-shadow: 60px 60px 50px rgba(50, 50, 50, 0.4);

}

.index_item:hover {
    width: 28vw;
    height: 25vh;

}


.index_item2 {
    position: relative;
    background: linear-gradient(to right,rgba(50, 50, 50, 0.3), rgba(20, 20, 20, 0.3), rgba(40, 40, 40, 0.3));
	width: 25vw;
    height: 22vh;
	box-shadow: 60px 60px 50px rgba(50, 50, 50, 0.4);

}



.index_item3 {
    
	max-width: 100vw;
    height: 100%;
    display:flex;
    flex-direction:column;
    justify-content:space-around;
	transition: width 1s, height 1s;
	
}


 



.menu {

    display: -webkit-flex;
    display: flex;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.0), rgba(200,200,200,0.0),rgba(200,200,200,0.0), rgba(50, 50, 50, 0.0));	padding-left: 4vh;
	-webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: inherit;
    height: 100%;
	padding-top: 1vw;
	padding-bottom: 1vw;
	align-items: center;
	flex-direction: row;
    justify-content: space-around;
	
	margin-right: 20px;
	margin-left: 20px;
	position: static;

}

.submenu {

    display: -webkit-flex;
    display: flex;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.0), rgba(200,200,200,0.0),rgba(200,200,200,0.0), rgba(50, 50, 50, 0.0));	padding-left: 4vh;
	-webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: inherit;
    height: 100%;
	padding-top: 1vw;
	padding-bottom: 1vw;
	align-items: flex-start;
	flex-direction: row;
    justify-content: space-between;

	margin-right: 20px;
	margin-left: 20px;
	position: static;

}



.image {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.7;
  filter: grayscale(100%) invert(100%);
  transition: all 0.6s
 
}

.image:hover {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.9;
  filter: grayscale(50%) invert(0%);
 
}

.contact_item:hover .image {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.9;
  filter: grayscale(50%) invert(0%);
 
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 1s;

  

}

/* MENU */ 


@media only screen and (min-width: 800px) {
   
.menu_item{
  position: relative;
  text-align: center;
  color: white;
  width: 30vh;
  height: 4vw;
  min-height: 50px;
  transition: all 1s;

  box-shadow: 60px 60px 50px rgba(50, 50, 50, 0.4);
  word-wrap:break-word;
  justify-content: space-around;
  margin-bottom: 4vh;
  filter: grayscale(100%);
  align: center;
  background: linear-gradient(to right,rgba(90, 90, 90, 0.2), rgba(100, 100, 100, 0.4), rgba(100, 100, 100, 0.4), rgba(80, 80, 80, 0.1));

}

.menu_item:hover {

  width: 33vh;
  height: 5vw;
}

.submenu_item {
  position: relative;
  text-align: center;
  color: white;
  width: 270px;
  height: auto;
  transition: width 1s, height 1s;

  box-shadow: 60px 60px 50px rgba(50, 50, 50, 0.4);
  word-wrap:break-word;
  justify-content: space-around;
  margin-bottom: 4vh;
  filter: grayscale(100%);
  align-items: center;
  align: center;
}

}


@media only screen and (max-width: 800px) {
   
.menu_item{
  position: relative;
  text-align: center;
  color: white;
  width: 90vw;
  height: 4vw;
  min-height: 50px;
  transition: all 1s;
 
  box-shadow: 60px 60px 50px rgba(50, 50, 50, 0.4);
  word-wrap:break-word;
  justify-content: space-around;
  margin-bottom: 1vh;
  filter: grayscale(100%);
  align: center;
  background: linear-gradient(to right,rgba(50, 50, 50, 0.1), rgba(30, 30, 30, 0.3), rgba(40, 40, 40, 0.1));

}

.menu_item:hover {

  width: 99vw;
  color: gray;
  transition: all 1s;
}

.submenu_item {
  position: relative;
  text-align: center;
  color: white;
  width: 100%;
  height: auto;
  transition: width 1s, height 1s;
 
  box-shadow: 60px 60px 50px rgba(50, 50, 50, 0.4);
  word-wrap:break-word;
  justify-content: space-around;
  margin-bottom: 2vh;
  filter: grayscale(100%);
  align-items: center;
  align: center;
}

}

/* WORKS */ 

.works {
    display: -webkit-flex;
    display: flex;
	-webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width:inherit;
	height: 100%;
	flex-align: flex-start;
	align-items: flex-start;
	flex-direction:row;
    justify-content:space-around;
	background: linear-gradient(to right, rgba(30, 30, 30, 0.7), rgba(200,200,200,0.5),rgba(0,200,220,0.5), rgba(50, 50, 50, 0.0));	padding-left: 4vh;

	

}

@media only screen and (min-width: 800px) {

.works-item {
    
	width: 60%;
    min-height: 3vh;
    margin: 0vh;
	display: flex;
	text-align: left;
	flex-direction:column;
	justify-content:space-around;
	align-self: flex-start;
	padding-left: 0vh;
	padding-top: 0vh;
	padding-bottom: 1vh;
    margin: 1vh;

	}

.works-item2 {
    
	width: 28%;
    min-height: 3vh;
    margin: 0vh;
	display: flex;
	text-align: left;
	flex-direction:column;
	justify-content:space-around;
	align-self: top;
	padding-left: 0vh;
	padding-top: 1vh;
	padding-bottom: 1vh;
	}
	
	}
	
	@media only screen and (max-width: 800px) {
		
		.works-item {
    
	width: 95%;
    min-height: 1vh;
    margin: 0vh;
	display: flex;
	text-align: left;
	flex-direction:column;
	justify-content:space-around;
	align-self: flex-start;
	padding-left: 0vh;
	padding-top: 0vh;
	padding-bottom: 0vh;
    margin-top: 0.5vh;

	}

.works-item2 {
    
	width: 95%;
    min-height: 1vh;
    margin: 0vh;
	display: flex;
	text-align: left;
	flex-direction:column;
	justify-content:space-around;
	align-self: top;
	padding-left: 0vh;
	padding-top: 0vh;
	padding-bottom: 1vh;
	}
	
	}
	
.subworks {
    display: -webkit-flex;
    display: flex;
	-webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
		flex-align: flex-start;

	flex-direction:column;
    justify-content:space-around;
	background: linear-gradient(to right, rgba(30, 30, 30, 0.7), rgba(240,0,249,0.7),rgba(0,200,200,0.6), rgba(50, 50, 50, 0.0));	padding-left: 4vh;
  
	

}

.subworks-item {
    
	width: inherit;
    min-height: 2vh;
    margin: none;
	display: flex;
	text-align: left;
	flex-direction:row;
	justify-content:flex-start;
	align-self: flex-start;
	padding-left: 4vh;
	padding-top: 0vh;
	padding-bottom: 0vh;
    margin: 2vh;
	}
	
.works_dates {
    display: -webkit-flex;
    display: flex;
	-webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
	flex-direction:row;
	align-self: flex-start;
	background: linear-gradient(to right,rgba(50, 50, 50, 0.0), rgba(30, 30, 30, 0.5), rgba(40, 40, 40, 0.0));
	padding-top: 1vh;
	padding-bottom: 1vh;
	
}

.works_dates-item {
    
	width: 120px;
    height: auto;
    margin: 0vh;
	padding-left: 10vh;
	padding-bottom: 0vh;
	display: flex;
	text-align: left;
	flex-direction:column;
	justify-content:space-around;
	align-self: center;
	
}

.collapsible {
  background: linear-gradient(to right, rgba(30, 30, 30, 0.0), rgba(200,200,200,0.5),rgba(200,200,200,0.5), rgba(50, 50, 50, 0.0));	
  color: white;
  cursor: pointer;
  padding: 1vh;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  
}

.collapsible:before {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
    padding: 5px;
	text-align: center;
	display: flex;
	align-items: center;
	  font-size: 25px;



}

.active:before {
  content: "\2212";
  }
  
.active, .collapsible:hover {
  background: linear-gradient(to right, rgba(30, 30, 30, 0.0), rgba(200,200,200,0.7),rgba(200,200,200,0.7), rgba(50, 50, 50, 0.0));	
}

.content {
padding-left: 0vh;
	padding-top: 2vh;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
  background: linear-gradient(to right, rgba(30, 30, 30, 0.0), rgba(200,200,200,0),rgba(0,200,220,0), rgba(50, 50, 50, 0.0));	
}

.collapsibleII {
  background: linear-gradient(to right, rgba(30, 30, 30, 0.0), rgba(200,200,200,0.5),rgba(200,200,200,0.5), rgba(50, 50, 50, 0.0));	
  color: white;
  cursor: pointer;
  padding: 1vh;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  
}

.collapsibleII:before {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
    padding: 5px;
	text-align: center;
	display: flex;
	align-items: center;
	  font-size: 25px;



}

IFRAME {
	FILTER: GRAYSCALE(20%);
	OPACITY: 0.7;
	TRANSITION: ALL 1S;
	WIDTH: 100%;
	HEIGHT: 240PX;
	TEXT-ALIGN="CENTER";
	box-shadow:5px 0px 5px 0px rgba(100, 100, 100, 0.5);
	

}

IFRAME:HOVER {

	FILTER: GRAYSCALE(0%);
	OPACITY: 1;
	TEXT-ALIGN="CENTER";
	WIDTH: 100%;


}

/* BIO */ 

.bio {
    display: -webkit-flex;
    display: flex;
	-webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: inherit;
	flex-align: flex-start;
	flex-direction: row;
    justify-content:space-around;
	background: linear-gradient(to bottom, rgba(30, 30, 30, 0.0), rgba(100,100,100,0.7),rgba(100,50,50,0.6), rgba(50, 50, 50, 0.0));	
 
	margin-left:auto;
	margin-right:auto;
	

}

.bio-item {
    
	width: 30vh;
    height: 100%;
    margin: 1vh;
	display: flex;
	text-align: left;
	flex-direction:column;
	justify-content:space-around;
	align-self: top;
	padding: 4vh;
    margin: 2vh;
	opacity: 0.6;
	background: linear-gradient(to right,rgba(50, 50, 50, 0.3), rgba(70, 70, 70, 0.5), rgba(50, 50, 50, 0.4));
	box-shadow: 60px 60px 50px rgba(50, 50, 50, 0.4);
	transition: all 1s;
	


	}
	
.bio-item:hover {
    
	padding: 5vh;
	opacity: 1;


	}

/* CONTACT */ 	
	
.contact_container {

    display: -webkit-flex;
    display: flex;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.0), rgba(200,200,200,0.0),rgba(200,200,200,0.0), rgba(50, 50, 50, 0.0));	padding-left: 4vh;
	-webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: inherit;
    height: 50vh;
	padding-top: 1vw;
	padding-bottom: 1vw;
	align-items: center;
	flex-direction: row;
    justify-content: space-around;
	
	margin-right: 0.05vw;
	  background: linear-gradient(rgba(90, 90, 90, 0.0), rgba(100, 100, 100, 0.3), rgba(100, 100, 100, 0.3), rgba(80, 80, 80, 0.0));

	

}


.contact_item {
    background: linear-gradient(to right,rgba(50, 50, 50, 0.6), rgba(80, 80, 80, 0.7), rgba(60, 60, 60, 0.6));
	width: 40vw;
    height: 40vh;
    display:flex;
    flex-direction:column;
    justify-content:space-around;
	transition: width 1s, height 1s;
	align-items:center;

	box-shadow: 60px 60px 50px rgba(50, 50, 50, 0.4);

}

.contact_item:hover {
    background: linear-gradient(to right,rgba(50, 50, 50, 0.3), rgba(20, 20, 20, 0.3), rgba(40, 40, 40, 0.3));
	width: 42vw;
    height: 42vh;
    display:flex;
    flex-direction:column;
    justify-content:space-around;
	transition: width 1s, height 1s;

	box-shadow: 60px 60px 50px rgba(50, 50, 50, 0.4);

}

img {
    object-fit: cover;
}