@font-face {
    font-family: 'MyFont';
    src: url('font/Quicksand_Light.otf');
}

body{
	font-family: MyFont;
	margin: 0px;
	/*background-attachment: fixed;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
	background-size: cover;*/
}

body:after{
	content:"";
	position:fixed; /* stretch a fixed position to the whole screen */
	top:0;
	height:100vh; /* fix for mobile browser address bar appearing disappearing */
	left:0;
	right:0;
	z-index:-2; /* needed to keep in the background */
	background: url('img/paper.jpg'); center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

p, ul{
	line-height: 150%;
}


.top_nav{
	background-color: rgba(0,0,0,0);
	width: 100%;	
	padding-left: 8%;
	display: flex;
	position: fixed;
	z-index: 6;

	backdrop-filter: blur(0px);
}

.button{
	/*color: rgb(252, 247, 230);*/
	color: rgba(0,0,0,0.8);

	/*padding-top: 1%;
	padding-bottom: 1%;*/
	padding-left: 20px;
	padding-right: 20px;
	font-size: 95%;
	position: relative;
	transition: all .35s;
	cursor: pointer;
}

.button{
	position: relative;
	z-index: 2;
}

.button:after{
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: rgba(200, 180, 115, 0.5);
  transition: all .35s;
}


.button:hover{
 	color: black;
 	z-index: 2;
 }

 .button:hover:after{
 	width: 100%;
 	z-index: -1;
 }

 .button_slide{
 	color: rgb(252, 247, 230);
	/*padding-top: 1%;
	padding-bottom: 1%;*/
	padding-left: 20px;
	padding-right: 20px;
	font-size: 95%;
	position: relative;
	transition: all .35s;
	cursor: pointer;
 }

 .button_slide:after{
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: rgba(252, 247, 230);
  transition: all .35s;
}


.button_slide:hover{
 	color: black;
 	z-index: 2;
 }

 .button_slide:hover:after{
 	width: 100%;
 	z-index: -1;
 }

.gif_container{
	text-align: center;
	padding-top: 4%;

}

.gif_container_empty{
	text-align: center;
	padding: 18% 0% 20% 0%;
}

.gif_container_2{
   position: fixed;
   width: 100%;
   text-align: center;
   padding-top: 8%;
   -webkit-transform: translateZ(-600px);
   transform: translateZ(-600px);
   z-index: -1;
   transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -webkit-font-smoothing: antialiased;;
}

.gif{
	width: 30%;
	height: auto;
	opacity: 0.8;
}

.gif_2{
	width: 45%;
	height: auto;
	opacity: 0.1;
}

.load_gif_container{
	height: 10%;
	width: auto;
	position: fixed;
	z-index: 2;
	top: 40%;
	left: 50%;
	transform: translate(-50%, 0);
	opacity: 0.5;
}

.load_gif{
	height:100%;
}

.logo_about{
	width: 35%;
	opacity: 0.8;
}

.social_button{
	background: transparent;
	border: none;
	cursor: pointer; 
}

.title{
	font-size: 400%;
	text-align: center;
}

.title_big{
	font-size: 650%;
	text-align: center;
}

.title_2{
	position:fixed;
	width: 100%;
	padding-top: 6%;
	z-index: -1;
}

.title_project{
	width: 100%;
	padding: 10% 0px 10% 0px;
	z-index: -1;
}

.sign{
	width: 6%;
	padding-right: 20%;
	float: right;
}

.bottom_container{
	background-color: rgba(0,0,0,0.8);
	padding: 5% 16% 0% 16%;
}

.content_container{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}


.content{
	width: calc(33.333% - 3px);
	padding: 0.5px;
	position: relative;
	cursor: pointer;
}

.content:after{
	position: absolute;
	size: 3px;
	top: 0;
	left: 0;
	width: 0;
    height: 100%;
	content: "";
	line-height: 200px;
	font-size: 0px;
	color: rgba(252, 247, 230, 0);
	text-align: center;
	background: rgba(74, 54, 0, 0.6);
	transition: all .35s;
}


.content:hover{
 	color: black;

 }

 .content:hover:after{
 	width: 100%;
 	color: rgba(252, 247, 230, 255);
 	font-size: 20px;
 	content: "TITLE";
 }

.content_pr{
	width: calc(50% - 3px);
	padding: 0.5px;
	position: relative;
	cursor: pointer;
}

.content_pr:after{
	position: absolute;
	size: 3px;
	top: 0;
	left: 0;
	width: 0;
    height: 100%;
	content: "";
	line-height: 300px;
	font-size: 0px;
	color: rgba(252, 247, 230, 0);
	text-align: center;
	background: rgba(74, 54, 0, 0.6);
	transition: all .35s;
}

.content_pr:hover:after{
 	width: 100%;
 	color: rgba(252, 247, 230, 255);
 	font-size: 20px;
 	content: "TITLE";
 }

 .up_button{
 	color: rgb(252, 247, 230);
 	text-align: center;
 	font-size: 100px;
 	padding: 2.5%;
 	cursor: pointer;
 }


 .view_container{
 	position: fixed;
 	top: 0;
    left: 0;
 	width: 100%;
 	height: 100%;
 	text-align: center;
 	padding-top: 2%;
 	background-color: rgba(0,0,0,0);
 	z-index: 1;
 	-webkit-backdrop-filter: blur(8px);
 	backdrop-filter: blur(8px);
 }

 .view_content{
 	height: 80%;
 	flex-wrap: wrap;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	padding-left: 80px;
 }


 .img_content{
 	height: 75%;
 	position: absolute;
   	left: 50%;
   	top: 50%;
   	transform: translate(-50%, -50%);
 }

 .close_button{
 	color: white;
 	height: 8%;
 	padding: 2px 20px 35% 20px;
 }

.close_button_3d{
 	height: 5%;
	width: auto;
	position: fixed;
	z-index: 3;
	top: 10%;
	left: 80%;
 }


 .download_button{
 	border: solid 1px;
 	border-color: rgb(252, 247, 230); 
 	color: rgb(252, 247, 230); 
 	padding: 10px;
 	text-decoration: none;
 	background-color: none;
 }

 .submit{
 	background-color: transparent; 
 	padding: 22px;
 }



 .projects_img{
 	width: 70%;
 }

 .about_text_container{
 	width: 100%;
 	right: 100%;
 	position: fixed;
 	z-index: 1;
 	opacity: 0.8;

 }

 .about_photo_container{
 	width: 100%;
 	left: 100%;
 	position: fixed;
 	z-index: 3;
 	opacity: 1;
 }

 .about_img{
 	width: 100%;
 }

 .about_text{
 	position: absolute;
 	z-index: 2;
 	color: rgba(252, 247, 230, 0.6);
 	padding: 7% 4% 5% 9%;
 	width: 32%;
    text-align: center;
    top: 150%;
 }

 ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: rgb(252, 247, 230); 
	opacity: 1; /* Firefox */
	font-family: 'MyFont';
 }

 .form_container{
 	text-align: center;
 	color: rgb(252, 247, 230);
 }

 .input_container{
 	padding: 2%;
 }

 .input{
 	color: rgb(252, 247, 230);
 	width: 50%;
 	padding: 2%;
 	background-color: rgba(110, 106, 100);
 	border: none;
 }

 .list{
 	margin-left: 15%; 
 }

 .text{
 	padding: 5% 15% 5% 15%;
 	color: rgba(252, 247, 230, 0.6);
 }

.canvas_3d{
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 2;
	top: 0;
	left: 0;
}

canvas {
  outline: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */
}