@font-face
{
	font-family: 'main';
	src: url('font.ttf') format('truetype');
}
@font-face
{
  font-family: 'other';
  src: url('font2.ttf') format('truetype');
}
@font-face
{
  font-family: 'he';
  src: url('font3.ttf') format('truetype');
}
body
{
	position: relative;
  background-color: #474747;
  margin: 0;
  min-width: 640px;
  font-family: 'other', 'he', 'main', Arial;
  text-align: center;
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
}
div.bar
{
  background-color: #e88b27;
  min-width: 640px;
  text-align: center;
  border-top: 12px solid #e88b27;
  border-bottom: 22px solid #e88b27;
}
div.box
{
	display: block;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	background-color: rgba(0,0,0,0.5);
	overflow: hidden;
}
.dropoff
{
	display: block;
	height: 0;
	overflow: hidden;
	-moz-transition: all 0s ease 0.5s, height 0.5s ease;
	-webkit-transition: all 0s ease 0.5s, height 0.5s ease;
	transition: all 0s ease 0.5s, height 0.5s ease;
}
.dropon
{
	display: block;
	overflow: hidden;
	height: var(--size);
	-moz-transition: all 0s ease, height 0.5s ease;
	-webkit-transition: all 0s ease, height 0.5s ease;
	transition: all 0s ease, height 0.5s ease;
}
.boxoff
{
	height: 0;
	opacity: 0;
	padding-top: 0;
	padding-bottom: 0;
	/*transition: height 0s ease;*/
	-moz-transition: all 0s ease 0.2s, opacity 0.2s ease;
	-webkit-transition: all 0s ease 0.2s, opacity 0.2s ease;
	transition: all 0s ease 0.2s, opacity 0.2s ease;
}
.boxactive
{
	height: 100%;
	opacity: 1;
	padding-top: 0;
	padding-bottom: 0;
	/*transition: height 2s ease 2s;*/
	-moz-transition: all 0s ease, opacity 0.2s ease;
	-webkit-transition: all 0s ease, opacity 0.2s ease;
	transition: all 0s ease, opacity 0.2s ease;
}
div.mail
{
	text-align: left;
	background-color: #e88b27;
	width: 70%;
	margin: auto;
	margin-top: 96px;
	-webkit-animation-name: box;
	animation-name: box;
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
	/*border: 20px solid #e88b27;
	border-top: 0;*/
}
div.bio
{
	text-align: justify;
	background-color: #e88b27;
	width: 80%;
	margin: auto;
	margin-top: 96px;
	-webkit-animation-name: box;
	animation-name: box;
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
}
p
{
  font-size: 40px;
}
p.main
{
  text-align: justify;
	margin-top: 3vw;
  color: #e88b27;
}
p.bio
{
	text-align: justify;
  color: black;
}
p.top
{
	font-size: 32px;
	margin: 0;
	color: black;
}
p.form
{
	margin: 0;
}
p.title
{
	font-size: 50px;
	color: #e88b27;
}
p.item
{
	font-size: 36px;
	position: absolute;
	margin: 0;
	top: 50%;
	left: 96px;
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	transform: translate(0, -50%);
 	text-overflow: ellipsis;
	overflow-x: hidden;
	white-space: nowrap;
	width: 75%;
	width: -webkit-calc(100% - 96px - 16px);
	width: -moz-calc(100% - 96px - 16px);
	width: calc(100% - 96px - 16px);
	text-align: left;
	color: black;
}
p.drop
{
	font-size: 32px;
	width: 100%;
	text-align: center;
	left: 0;
}
p.header
{
	font-size: 28px;
	color: #e88b27;
	text-align: left;
	margin: 0;
}
div.header
{
	width: 70%;
	margin: 0 auto;
}
img.item
{
	position: absolute;
	margin: 0;
	top: 50%;
	left: 16px;
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	transform: translate(0, -50%);
}
img.top
{
  margin-left: 6px;
  margin-right: 6px;
}
img.main
{
  margin-top: 3vw;
  width: 100%;
	border: 3px solid #e88b27;
}
a.left
{
  float: left;
}
a.right
{
  float: right;
}
a:hover,input[type=submit]:hover,input[type=reset]:hover
{
  -webkit-filter: drop-shadow(0 5px 5px rgba(0,0,0,0.6));
  filter: drop-shadow(0 5px 5px rgba(0,0,0,0.6));
}
a:active,input[type=submit]:active,input[type=reset]:active
{
  -webkit-filter: drop-shadow(0 0px 0px rgba(0,0,0,0.6));
  filter: drop-shadow(0 0px 0px rgba(0,0,0,0.6));
}
a,input[type=submit],input[type=reset]
{
	-moz-transition-duration: 0.2s;
  -webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;
	text-decoration: none;
	outline: none;
}
a img
{
	text-decoration: none;
	outline: none;
	border: none;
}
.row,.rowperm
{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
}
.col
{
	-webkit-flex: 100%;
	-moz-flex: 100%;
  flex: 100%;
	padding: 36px;
  padding: 3vw;
	padding-bottom: 0;
}
.colbio
{
	-webkit-flex: 100%;
	-moz-flex: 100%;
	flex: 100%;
	padding: 18px;
	padding: 1.5vw;
}
a.icon, a.icyt
{
	display: block;
	position: relative;
	width: 68%;
	margin: auto;
	background-color: #e88b27;
	height: 96px;
	margin-bottom: 24px;
	text-align: center;
}
a.icyt
{
	height: 72px;
}
a.drop
{
	display: block;
	position: relative;
	width: 70%;
	margin: auto;
	background-color: #e88b27;
	height: 48px;
	margin-bottom: 32px;
	text-align: center;
	-moz-transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	cursor: pointer;
}
@media screen and (max-width: 1000px)
{
  .row
  {
    display: inline;
  }
	.colbio
	{
		padding: 12px 24px 12px 12px;
		padding: 1vw 2vw 1vw 2vw;
	}
}
input[type=email],input[type=text],textarea
{
	/*height: 32px;*/
	padding: 20px;
	width: 100%;
	height: 60px;
	border: 2px solid black;
	box-sizing: border-box;
	font-size: 40px;
  font-family: 'other', 'he', 'main', Arial;
	margin-bottom: 10px;
	resize: none;
}
input[type=submit],input[type=reset]
{
	font-size: 40px;
	font-family: 'other', 'he', 'main', Arial;
	/*width: calc(50% - 10px);*/
	width: 100%;
	border: 2px solid black;
	background-color: white;
  cursor: pointer;
	box-sizing: border-box;
}
form
{
	padding: 20px;
}
audio, video
{
	width: 70%;
	margin: 5px;
}