html{
	height:auto;
	min-height:100%;
	background-color: black;
}

body {
	height:auto;
	min-height:100%;
	opacity: 1;
    transition: 1s opacity;
    background-color:black;
}

body.fade-out {
    opacity: 0;
    transition: none;
}

h2{
	font: 500 35px/1.3 'Oleo Script', Helvetica, sans-serif;
	color:white;
}

h6{
	color:#5B5E63;
}

p{
	color:white;
}

a{
	text-decoration: none;
	color:white;
}

a:hover{
	text-decoration: none;
	color:#cfd1d1;
}

section {
  position: relative;
  width: 100%;
  height: 100%;
}

.demo a {
  position: absolute;
  bottom: 20px;
  left: 50%;
  z-index: 2;
  display: inline-block;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #fff;
  letter-spacing: .1em;
  text-decoration: none;
  transition: opacity .3s;
}
.demo a:hover {
  opacity: .5;
}

.navbar{	
  letter-spacing: .1em;
}

.navbar-brand {
  font: 400 35px/1.3 'Oleo Script', Helvetica, sans-serif;
  color: #2b2b2b;
  /*text-shadow: 4px 4px 0px rgba(0,0,0,0.1);*/
}

.bg{
	background-color:black;
}








/*homepage*/

#title_page{
	position:absolute;
	height:100%;
	width:100%;
	top:0;
}

.container-picture>img {
  object-fit:cover;
}

.container-picture-mob>img {
  object-fit:contain;
}

.container-picture {
    height: 95%; 
    width:50%;
    position:absolute;
    top:5%;
    z-index:1;
    align-content: center;
}

.container-picture-mob {
    height: 45%; 
    width:60%;
    height:32%;
    left:20%;
    position:absolute;
    top:12%;
    z-index:1;
}

.container-title{
	position:absolute;
	top:50%;
	right:5%;
	width:40%;
	text-align:right;
}

.container-title-mob{
  position:absolute;
  top:55%;
  right:5%;
  width:90%;
  text-align:right;
}
.container-text{
	position:absolute;
	top:90%;
	right:0;
	color:white;
	text-align:right;

}

.container-text-mob{
  font-size:14px;
  position:absolute;
  top:90%;
  right:0;
  color:white;
  text-align:right;

}

.container-icons{
	position:absolute;
	top:40%;
	right:5%;
	text-align:right;
}

.container-icons-mob{
  position:absolute;
  top:46%;
  right:5%;
  text-align:right;
}

.fa{
    padding: 20px;
    font-size: 30px;
    width: 50px;
    text-align: center;
    text-decoration: none;
    background-color:white;
    color:black;
    border-radius:50%;
}

.fa:hover {
	color:black;
    opacity: 0.5;
}

#title_page a {
  padding-top: 70px;

}
#title_page a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#about_page{
	position:absolute;
	height:100%;
	width:100%;
	top:100%;
}

.container-title-about{
	position:absolute;
	top:40%;
	width:100%;
	text-align:center;
}

.container-title-about-mob{
  position:absolute;
  top:30%;
  width:100%;
  text-align:center;
}


.container-about{
	position:absolute;
	top:150%;
	left:10%;
	width:80%;
	text-align:center;
	color:white;
}

.container-about-mob{
  position:absolute;
  top:140%;
  left:10%;
  width:80%;
  text-align:center;
  color:white;
}


#about_page a {
  padding-top: 70px;
}
#about_page a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#contact_page{
	position:absolute;
	height:100%;
	width:100%;
	top:200%;
}

.container-contact{
	position:absolute;
	top:40%;
	width:100%;
	text-align:center;
}

.container-contact-text{
	position:absolute;
	top:50%;
	width:100%;
	text-align:center;
	color:white;
}

.container-contact-form{
	position:absolute;
	top:35%;
	width:100%;
	color:white;
}

input[type=submit]{
	border:none;
	background-color:white;
	color:black;
}

input[type=submit]:hover{
	opacity:0.5;
	color:black;
}

label{
	width:150px;
}

.container-submit{
	position:relative;
	right:-285%;
}

table{
	margin-left: auto;
    margin-right: auto;
}


#contact_page a {
  padding-top: 70px;
}

.downbutton{
  width:100%;
  margin:20px;
}














/*resumepage*/

.resume_page{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
}

#resume_title_page{
  margin:auto;
	display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  min-height:100vh;
}

.resume_title{
  margin:20px;

}

#resume_title_page a {
  padding-top: 70px;
}
#resume_title_page a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

.resume_title_text{
  margin:20px;

}

.resume_title_text-mob{
  position:absolute;
  top:50%;
  left:50%;
  width:60%;
  text-align:center;
  -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);

}

.resume_title_text a {
  all: unset;
}

.resume-left{
  /*position:absolute;
  top:0;
  left:5%;*/
  margin:auto;
  width:60%;
  text-align:left;
  align-content:flex-start;
}

.resume-right{
  /*
  position:absolute;
  top:0;
  right:5%;*/
  margin:0px;
  margin-right:auto;
  margin-left:auto;
  width:30%;
  text-align:right;
  align-content: flex-start;
}

#education_page{
  margin:auto;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  min-height:100vh;
}

.education_page{
	display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  min-height:100vh;

}

.education_title{
	margin:20px;
}

.education_title-mob{
  margin:20px;
  margin-top:40px;
}

.education_flex{
  min-width:100vh;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
}

.education_info_block{
  margin:20px;
  min-width:100vw;
  color:white;
  display:flex;
  flex-direction: row; 
  flex-wrap: nowrap;
  align-content:flex-start;
}

.education-info-college-mob{
  position:absolute;
  top:130%;
  width:100%;
  color:white;
}

.education-info-hs-mob{
  position:absolute;
  top:160%;
  width:100%;
  color:white;
}

.resume-right-mob{
  position:absolute;
  top:0;
  right:5%;
  width:30%;
  text-align:right;
  font-size: 14px;
}


#education_page a {
  padding-top: 70px;
}
#education_page a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#experience_page{
	/*position:absolute;
	height:325%;
	width:100%;
	top:200%;*/
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
}

.experience_page{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
}

#experience_page-mob{
  position:absolute;
  height:480%;
  width:100%;
  top:200%;
}

.experience_title{
  margin:auto;
  margin-top:10%;
	/*-webkit-transform: translate(-50%, 0%);
  	transform: translate(-50%, 0%);*/
}

.experience_title-mob{
  margin:auto;
  margin-top:20%;
}

.resume_subtitle{
  margin:auto;
	color:white;
	/*-webkit-transform: translate(-50%, 0%);
  	transform: translate(-50%, 0%);*/
}

.experience_subtitle-mob{
  position:absolute;
  top:6.5%;
  left:50%;
  width:80%;
  color:white;
  -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
}

.experience_flex{
  width:100%;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
}

.experience_info_block{
  margin:20px;
  width:100%;
  color:white;
  display:flex;
  flex-direction: row; 
  flex-wrap: nowrap;
  align-content:flex-start;
}

.experience_info_block-end{
  margin:20px;
  margin-bottom:200px;
  width:100%;
  color:white;
  display:flex;
  flex-direction: row; 
  flex-wrap: nowrap;
  align-content:flex-start;
}

.experience_info_qualcomm-mob{
  position: absolute;
  top: 239%;
  width:100%;
  color:white;
}

.experience_info_media-mob{
  position: absolute;
  top: 278%;
  width:100%;
  color:white;
}

.experience_info_bose-mob{
  position: absolute;
  top: 316%;
  width:100%;
  color:white;
}

.experience_info_la-mob{
  position: absolute;
  top:349%;
  width:100%;
  color: white;
}

.experience_info_urop-mob{
  position:absolute;
  top:385%;
  width:100%;
  color:white;
}


.experience_info_tc-mob{
  position:absolute;
  top:446%;
  width:100%;
  color:white;
}


.experience_info_ac-mob{
  position:absolute;
  top:469%;
  width:100%;
  color:white;
}


.experience_info_ta-mob{
  position:absolute;
  top:501%;
  width:100%;
  color:white;
}


.experience_info_woofie-mob{
  position:absolute;
  top:565%;
  width:100%;
  color:white;
}


.experience_info_arc-mob{
  position:absolute;
  top:533%;
  width:100%;
  color:white;
}

#experience_page a {
  padding-top: 70px;
}

#experience_page a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

.experience_info_block a {
  all: unset;
}

#experience_page-mob a {
  padding-top: 70px;
}

#experience_page-mob a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#skills_page{
	display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
}

#skills_page-mob{
  position:absolute;
  height:100%;
  width:100%;
  top:700%;
}

.skills_page{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  width: 100vw;
  min-height:100vh;
}

.skills_page-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  width: 100vw;
  min-height:140vh;
}

.skills_title{
	/*position:absolute;
	top:20%;
	left:50%;
	-webkit-transform: translate(-50%, 0%);
  	transform: translate(-50%, 0%);*/
  margin:20px;
}

.skills_title-mob{
  /*position:absolute;
  top:20%;
  left:50%;
  -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);*/
  margin:10px;
  margin-top:20%;
}


.skills_content{
	/*position:absolute;
	top:30%;
	left:5%;*/
	color:white;
  margin:20px;
  margin-bottom:100px;
}

#skills_page a {
  padding-top: 70px;
}

#skills_page a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#skills_page-mob a {
  padding-top: 70px;
}

#skills_page-mob a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#awards_page{
	display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
}

.awards_page{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  min-height:100vh;
}

#awards_page-mob{
  position:absolute;
  height:100%;
  width:100%;
  top:800%;
}

.awards_title{
	/*position:absolute;
	left:50%;
	top:20%;
	-webkit-transform: translate(-50%, 0%);
  	transform: translate(-50%, 0%);*/
    margin:20px;
}

.awards_title-mob{
  /*position:absolute;
  left:50%;
  top:20%;
  -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);*/
    margin-top:20%;
}

.awards_content{
	/*position:absolute;
	left:5%;
	width:90%;
	top:30%;*/
	color:white;
  margin:20px;
}

.awards_content-mob{
  position:absolute;
  left:5%;
  width:90%;
  top:35%;
  color:white;
}

#awards_list li{
	font-size:18px;
	padding: 10px 0px;
}






/*portfoliopage*/

#portfolio_page{
  height:180%;
  width:100%;
  position:absolute;
  top:0%;
}

.portfolio_title{
  position:absolute;
  left:50%;
  top:20%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.portfolio_subtitle{
  position:absolute;
  left:50%;
  top:26%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.portfolio_title-mob{
  position:absolute;
  left:50%;
  top:10%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.portfolio_subtitle-mob{
  position:absolute;
  left:50%;
  top:13%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.project_widget{
  height:180px;
  width:180px;
  border-style: solid;
  border-width: 3px;
  border-color:white;
  border-radius:5px;
  display: flex;
  align-items: center;
}

.project_widget-mob{
  height:100px;
  width:100px;
  border-style: solid;
  border-width: 3px;
  border-color:white;
  border-radius:5px;
  display: flex;
  align-items: center;
}

.portfoliocontent{
  position:absolute;
  top:30%;
  width:100%;
}

.portfoliocontent-mob{
  position:absolute;
  top:30%;
  left:50%;
  text-align:center;
    -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.portfolioflex{
  margin-top:0%;
  margin-left:18.5%;
  display:flex;
  width:75%;
  flex-flow:row wrap;
  justify-content: center;
}

.portfolioflex-mob{
  margin-top:0%;
  margin-left:40%;
  display:flex;
  width:100%;
  flex-flow: column nowrap;
  justify-content: center;
  align-content:center;
}

.fluidsim{
  /*position:absolute;
  left:10%;
  top:35%;*/
  margin:20px;
  text-align:center;
  font-size:15px;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.fluidsim:hover{
  opacity:0.5;
}

.fluidsim-mob{
  /*position:absolute;
  left:50%;
  top:38%;*/
  margin:20px;
  text-align:center;
  font-size:16px;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.fluidsim-mob:hover{
  opacity:0.5;
}

.mario{
  /*position:absolute;
  left:10%;
  top:35%;*/
  margin:20px;
  text-align:center;
  font-size:15px;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.mario:hover{
  opacity:0.5;
}

.mario-mob{
  /*position:absolute;
  left:50%;
  top:38%;*/
  margin:20px;
  text-align:center;
  font-size:16px;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.mario-mob:hover{
  opacity:0.5;
}

.this_site{
  /*position:absolute;
  left:30%;
  top:35%;*/
  margin:20px;
  text-align:center;
  font-size:15px;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.this_site:hover{
  opacity:0.5;
}

.this_site-mob{
  /*position:absolute;
  left:50%;
  top:78%;*/
  margin:20px;
  text-align:center;
  font-size:16px;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.this_site-mob:hover{
  opacity:0.5;
}

.urop{
  /*position:absolute;
  left:50%;
  top:35%;*/
  margin:20px;
  height:200px;
  width:180px;
  text-align:center;
  font-size:15px;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.urop:hover{
  opacity:0.5;
}

.urop-mob{
  /*position:absolute;
  left:50%;
  top:118%;*/
  margin:20px;
  height:220px;
  width:180px;
  text-align:center;
  font-size:16px;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.urop-mob:hover{
  opacity:0.5;
}

.ac{
  /*position:absolute;
  left:70%;
  top:35%;*/
  margin:20px;
  text-align:center;
  font-size:15px;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.ac:hover{
  opacity:0.5;
}

.ac-mob{
  /*position:absolute;
  left:50%;
  top:158%;*/
  margin:20px;
  text-align:center;
  font-size:16px;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.ac-mob:hover{
  opacity:0.5;
}

.woofie{
  /*position:absolute;
  left:90%;
  top:35%;*/
  margin:20px;
  height:220px;
  width:180px;
  text-align:center;
  font-size:15px;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.woofie:hover{
  opacity:0.5;
}

.woofie-mob{
  /*position:absolute;
  left:50%;
  top:198%;*/
  margin:20px;
  height:200px;
  width:180px;
  text-align:center;
  font-size:16px;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.woofie-mob:hover{
  opacity:0.5;
}





/*portfolio thissite*/
.thissite_page{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
}

#thissitetitle_page{
  height:100%;
  width:100%;
  position:absolute;
  top:0;
}

#thissitetitle_page-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  min-height:100vh;
}

.thissite_title{
  position:absolute;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.thissite_subtitle{
  position:absolute;
  top:56%;
  left:50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.thissite_title-mob{
  margin:0px;
}

.thissite_subtitle-mob{
  margin:0px;
}

.backbutton{
  position:fixed;
  top:5%;
  left:5%;
  z-index:2;
  letter-spacing: .1em;
  text-decoration: none;
}

#thissitetitle_page a {
  padding-top: 70px;
}

#thissitetitle_page a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#thissitetitle_page-mob a {
  padding-top: 70px;
}

#thissitetitle_page-mob a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}


#overview_page{
  position:absolute;
  height:100%;
  width:100%;
  top:100%;
}

#overview_page-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  min-height:100vh;
}

.overview_title{
  position:absolute;
  top:20%;
  left:50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);

}

.overview_title-mob{
  margin:0px;
  margin-top:20%;
}

.overview_info{
  position:absolute;
  top:130%;
  left:50%;
  width:80%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.sitegif{
  position:absolute;
  left:50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.overview_info-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  margin-left:20px;
  margin-right:20px;
  justify-content:center;
  align-items:center;
}

.sitegif-mob{
  margin:20px;
  margin-bottom:150px;
}

.overview_info-mob a{
  all:unset;
}

#overview_page a {
  padding-top: 70px;
}

#overview_page a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#overview_page-mob a {
  padding-top: 70px;
}

#overview_page-mob a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#methods_page{
  position:absolute;
  height:100%;
  width:100%;
  top:200%;
}

#methods_page-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  min-height:100vh;
}

.methods_title{
  position:absolute;
  top:20%;
  left:50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);

}

.methods_title-mob{
  margin:0px;
  margin-top:20%;
}

.methods_info{
  position:absolute;
  top:230%;
  left:50%;
  width:80%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.methods_info-mob{
  margin-left:20px;
  margin-right:20px;
  margin-bottom:150px;
}

#methods_page a {
  padding-top: 70px;
}

#methods_page a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#methods_page-mob a {
  padding-top: 70px;
}

#methods_page-mob a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}


#further_page{
  position:absolute;
  height:100%;
  width:100%;
  top:300%;
}

#further_page-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  min-height:100vh;
}

.further_title{
  position:absolute;
  top:40%;
  left:50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.further_info{
  position:absolute;
  top:350%;
  left:50%;
  width:80%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.further_title-mob{
  margin:20px;
}

.further_info-mob{
  margin:20px;
}

#further_page a {
  padding-top: 70px;
}

#further_page a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#further_page-mob a {
  padding-top: 70px;
}

#further_page-mob a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#sources_page{
  position:absolute;
  height:100%;
  width:100%;
  top:400%;
}

#sources_page-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  min-height:100vh;
}

.sources_title{
  position:absolute;
  top:35%;
  left:50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.sources_title-mob{
  margin:20px;
}

.sources_info{
  position:absolute;
  top:445%;
  left:50%;
  width:80%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.sources_info-mob{
  margin:20px;
}

.sources_info-mob a{
  all:unset;
}

/*portfolio woofie*/
.ena_page{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
}

#ena_title_page{
  height:100%;
  width:100%;
  position:absolute;
  top:0;
}

#ena_title_page-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  min-height:100vh;
}

.ena_title{
  position:absolute;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.ena_title-mob{
  margin:20px;
}

#ena_title_page a {
  padding-top: 70px;
}

#ena_title_page a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#ena_title_page-mob a {
  padding-top: 70px;
}

#ena_title_page-mob a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#overview_page_ena{
  height:100%;
  width:100%;
  position:absolute;
  top:100%;
}

#overview_page_ena-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  min-height:100vh;
}

.overview_ena_title{
  position:absolute;
  top:20%;
  left:50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.overview_ena_title-mob{
  margin-top:20%;
  margin-left:20px;
  margin-right:20px;
}

.overview_ena_subtitle-mob{
  margin-left:20px;
  margin-right:20px;
}

.overview_ena_info{
  position:absolute;
  top:130%;
  left:50%;
  width:80%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);

}

.overview_ena_info-mob{
  margin-left:20px;
  margin-right:20px;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  margin-bottom:150px;
}

#overview_page_ena a {
  padding-top: 70px;
}

#overview_page_ena a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#overview_page_ena-mob a {
  padding-top: 70px;
}

#overview_page_ena-mob a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#abstract{
  height:100%;
  width:100%;
  position:absolute;
  top:200%;
}

#abstract-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  min-height:100vh;
}

.abstract_title{
  position:absolute;
  top:25%;
  left:50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.abstract_title-mob{
  margin-top:20%;
  margin-left:20px;
  margin-right:20px;
}

.abstract_subtitle-mob{
  margin-left:20px;
  margin-right:20px;
}

.abstract_info{
  position:absolute;
  top:235%;
  left:50%;
  width:80%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);

}

.abstract_info-mob{
  margin-left:20px;
  margin-right:20px;
  margin-bottom:100px;

}

#abstract a {
  padding-top: 70px;
}

#abstract a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#abstract-mob a {
  padding-top: 70px;
}

#abstract-mob a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#paper{
  height:100%;
  width:100%;
  position:absolute;
  top:300%;
}

#paper-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  min-height:100vh;
}

.paper_title{
  position:absolute;
  text-align: center;
  top:18%;
  left:50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.paper_title-mob{
  margin:20px;
  margin-top:20%;
}

.paper_info{
  position:absolute;
  top:327%;
  left:50%;
  width:80%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);

}

.paper_info-mob{
  margin:20px

}

.paper_info-mob a{
  all:unset;
  color:white;
}

#paper a {
  padding-top: 70px;
}

#paper a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#paper-mob a {
  padding-top: 70px;
}

#paper-mob a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#gallery{
  height:200%;
  width:100%;
  position:absolute;
  top:400%;
}

#gallery-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  min-height:100vh;
}

.spacer{
  margin-top:50px;
}

.gallery_title{
  position:absolute;
  top:10%;
  left:50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.gallery_title-mob{
  margin:20px;
  margin-top:20%;
}

.gallery_content-mob{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:flex-start;
}

.ena_full{
  position:absolute;
  left:40%;
  top:17.5%;
  text-align:center;
  font-size:20px;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  color:white;
}

.ena_full-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  justify-content: center;
  align-items: center;
  width:180px;
  margin:auto;
  margin-top:0;
  color:white;
}

.ena_full_flip{
  position:absolute;
  left:60%;
  top:17.5%;
  text-align:center;
  font-size:20px;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  color:white;
}

.ena_full_flip-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  justify-content: center;
  align-items: center;
  width:180px;
  margin:auto;
  margin-top:0;
  color:white;
}

.ena_scad{
  position:absolute;
  left:20%;
  top:17.5%;
  width:200px;
  height:250px;
  text-align:center;
  font-size:20px;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  color:white;
}

.ena_scad-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  justify-content: center;
  align-items: center;
  width:180px;
  margin:auto;
  margin-top:0;
  color:white;
}

.ena_top{
  position:absolute;
  left:80%;
  top:17.5%;
  text-align:center;
  font-size:20px;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  color:white;
}

.ena_top-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  justify-content: center;
  align-items: center;
  width:180px;
  margin:auto;
  margin-top:0;
  color:white;
}

.ena_inslrf{
  position:absolute;
  left:20%;
  top:41%;
  width:200px;
  height:250px;
  text-align:center;
  font-size:16px;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  color:white;
}

.ena_inslrf-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  justify-content: center;
  align-items: center;
  width:180px;
  margin:auto;
  margin-top:0;
  color:white;
}

.ena_atwork{
  position:absolute;
  left:80%;
  top:41%;
  width:200px;
  height:250px;
  text-align:center;
  font-size:16px;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  color:white;
}

.ena_atwork-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  justify-content: center;
  align-items: center;
  width:180px;
  margin:auto;
  margin-top:0;
  color:white;
}

.ena_mess1{
  position:absolute;
  left:40%;
  top:41%;
  width:200px;
  height:250px;
  text-align:center;
  font-size:20px;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  color:white;
}

.ena_mess1-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  justify-content: center;
  align-items: center;
  width:180px;
  margin:auto;
  margin-top:0;
  color:white;
}

.ena_mess2{
  position:absolute;
  left:60%;
  top:41%;
  width:200px;
  height:250px;
  text-align:center;
  font-size:20px;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  color:white;
}

.ena_mess2-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  justify-content: center;
  align-items: center;
  width:180px;
  margin:auto;
  margin-top:0;
  color:white;
}

.experiment{
  position:absolute;
  left:20%;
  top:70%;
  width:200px;
  height:250px;
  text-align:center;
  font-size:18px;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  color:white;
}

.experiment-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  justify-content: center;
  align-items: center;
  width:180px;
  margin:auto;
  margin-top:0;
  color:white;
}

.poster{
  position:absolute;
  left:40%;
  top:70%;
  width:200px;
  height:250px;
  text-align:center;
  font-size:20px;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  color:white;
}

.poster-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  justify-content: center;
  align-items: center;
  width:180px;
  margin:auto;
  margin-top:0;
  color:white;
}

.storage{
  position:absolute;
  left:60%;
  top:70%;
  width:200px;
  height:250px;
  text-align:center;
  font-size:17px;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  color:white;
}

.storage-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  justify-content: center;
  align-items: center;
  width:180px;
  margin:auto;
  margin-top:0;
  color:white;
}

.isef{
  position:absolute;
  left:80%;
  top:70%;
  width:200px;
  height:250px;
  text-align:center;
  font-size:20px;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  color:white;
}

.isef-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  justify-content: center;
  align-items: center;
  width:180px;
  margin:auto;
  margin-top:0;
  color:white;
}




/*portfolio screw sorter*/
.sorter_page{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
}

#sorter_title_page{
  height:100%;
  width:100%;
  position:absolute;
  top:0;
}

#sorter_title_page-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  min-height:100vh;
}

.sorter_title{
  position:absolute;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.sorter_title-mob{
  margin:20px;
}

#sorter_title_page a {
  padding-top: 70px;
}

#sorter_title_page a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#sorter_title_page-mob a {
  padding-top: 70px;
}

#sorter_title_page-mob a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#overview_page_sorter{
  height:100%;
  width:100%;
  position:absolute;
  top:100%;
}

#overview_page_sorter-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  min-height:100vh;
}

.overview_sorter_title{
  position:absolute;
  top:20%;
  left:50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.overview_sorter_info{
  position:absolute;
  top:30%;
  left:50%;
  width:80%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);

}

.overview_sorter_title-mob{
  margin-top:20%;
  margin-left:20px;
  margin-right:20px;
}

.overview_sorter_subtitle-mob{
  margin-left:20px;
  margin-right:20px;
}

.overview_sorter_info-mob{
  margin-left:20px;
  margin-right:20px;
  margin-bottom:100px;

}

#overview_page_sorter a {
  padding-top: 70px;
}

#overview_page_sorter a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#overview_page_sorter-mob a {
  padding-top: 70px;
}

#overview_page_sorter-mob a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#photo_sorter{
  height:100%;
  width:100%;
  position:absolute;
  top:200%;
}

#photo_sorter-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  min-height:100vh;
}

.photo_gallery_sorter_title{
  position:absolute;
  top:20%;
  left:50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.photo_gallery_sorter_title-mob{
  margin:20px;
  margin-top:20%;
}

.photo_sorter{
  position:absolute;
  top:30%;
  left:39%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.photo_sorter-mob{
  margin:20px;
  display:flex;
  justify-content:center;
}

.video_sorter{
  position:absolute;
  top:30%;
  left:61%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.video_sorter-mob{
  display:flex;
  justify-content:center;
  margin:20px;
}

/*portfolio urop*/
.urop_page{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
}

#urop_title_page{
  height:100%;
  width:100%;
  position:absolute;
  top:0;
}

#urop_title_page-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  min-height:100vh;
}

.urop_title{
  position:absolute;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.urop_title-mob{
  margin-left:20px;
  margin-right:20px;
}

.urop_subtitle{
  position:absolute;
  top:56%;
  left:50%;
  width:100%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.urop_subtitle-mob{
  margin-left:20px;
  margin-right:20px;
}

#urop_title_page a {
  padding-top: 70px;
}

#urop_title_page a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#urop_title_page-mob a {
  padding-top: 70px;
}

#urop_title_page-mob a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#overview_page_urop{
  height:100%;
  width:100%;
  position:absolute;
  top:100%;
}

#overview_page_urop-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  min-height:100vh;
}

.overview_urop_title{
  position:absolute;
  top:30%;
  left:50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.overview_urop_info{
  position:absolute;
  top:140%;
  left:50%;
  width:80%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.overview_urop_title-mob{
  margin-top:20%;
  margin-left:20px;
  margin-right:20px;
}

.overview_urop_info-mob{
  margin-left:20px;
  margin-right:20px;

}


/*portfolio mario*/
.mario_page{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
}

#mario_title_page{
  height:100%;
  width:100%;
  position:absolute;
  top:0;
}

#mario_title_page-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  min-height:100vh;
}

.mario_title{
  position:absolute;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}
.mario_title-mob{
  margin:20px;
}

#mario_title_page a {
  padding-top: 70px;
}

#mario_title_page a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#mario_title_page-mob a {
  padding-top: 70px;
}

#mario_title_page-mob a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#overview_page_mario{
  height:100%;
  width:100%;
  position:absolute;
  top:100%;
}

#overview_page_mario-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  min-height:100vh;
}

.overview_mario_title{
  position:absolute;
  top:20%;
  left:50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.overview_mario_title-mob{
  margin-top:20%;
}

.overview_mario_subtitle-mob{
  margin:0px;
}

.overview_mario_info{
  position:absolute;
  top:130%;
  left:50%;
  width:80%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);

}

.overview_mario_info-mob{
  margin-left:20px;
  margin-right:20px;
  margin-bottom:100px;

}

#overview_page_mario a {
  padding-top: 70px;
}

#overview_page_mario a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#overview_page_mario-mob a {
  padding-top: 70px;
}

#overview_page_mario-mob a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}



#papermario{
  height:100%;
  width:100%;
  position:absolute;
  top:200%;
}

#papermario-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  min-height:100vh;
}

.papermario_title{
  position:absolute;
  text-align: center;
  top:18%;
  left:50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.papermario_title-mob{
  margin:20px;
}

.papermario_info{
  position:absolute;
  top:227%;
  left:50%;
  width:80%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);

}

.papermario_info-mob{
  margin:20px;

}

.papermario_info-mob a {
  all:unset;
}

#papermario a {
  padding-top: 70px;
}

#papermario a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#papermario-mob a {
  padding-top: 70px;
}

#papermario-mob a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#gallerymario{
  height:100%;
  width:100%;
  position:absolute;
  top:300%;
}

#gallerymario-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  min-height:100vh;
}

.gallerymario_title{
  position:absolute;
  top:20%;
  left:50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.gallerymario_title-mob{
  margin:20px;
}

.video_mario{
  position:absolute;
  top:30%;
  left:50%;
  height:50%;
  width:50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.video_mario-mob{
  margin:20px;
}
.video_mario_caption-mob{
  margin:20px;
}


/*portfoliofluidsimulator*/
.fluid_page{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
}

#fluid_title_page{
  height:100%;
  width:100%;
  position:absolute;
  top:0;
}

#fluid_title_page-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  min-height:100vh;
}

.fluid_title{
  position:absolute;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.fluid_title-mob{
  margin:20px;
}

#fluid_title_page a {
  padding-top: 70px;
}

#fluid_title_page a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#fluid_title_page-mob a {
  padding-top: 70px;
}

#fluid_title_page-mob a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#overview_page_fluid{
  height:100%;
  width:100%;
  position:absolute;
  top:100%;
}

#overview_page_fluid-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  min-height:100vh;
}

.overview_fluid_title{
  position:absolute;
  top:30%;
  left:50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.overview_fluid_title-mob{
  margin:0;
  margin-top:20%;
}

.overview_fluid_subtitle-mob{
   margin-left:20px;
   margin-right:20px;
}

.overview_fluid_info{
  position:absolute;
  top:140%;
  left:50%;
  width:80%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);

}

.overview_fluid_info-mob{
  margin-left:20px;
  margin-right:20px;
  margin-bottom:100px;

}

#overview_page_fluid a {
  padding-top: 70px;
}

#overview_page_fluid a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#overview_page_fluid-mob a {
  padding-top: 70px;
}

#overview_page_fluid-mob a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#paperfluid{
  height:100%;
  width:100%;
  position:absolute;
  top:200%;
}

#paperfluid-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  min-height:100vh;
}

.paperfluid_title{
  position:absolute;
  text-align: center;
  top:18%;
  left:50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.paperfluid_title-mob{
  margin:20px;
}

.paperfluid_info{
  position:absolute;
  top:227%;
  left:50%;
  width:80%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);

}

.paperfluid_info-mob{
  margin:20px;
}

.paperfluid_info-mob a{
  all:unset;
}

#paperfluid a {
  padding-top: 70px;
}

#paperfluid a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#paperfluid-mob a {
  padding-top: 70px;
}

#paperfluid-mob a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

#galleryfluid{
  height:100%;
  width:100%;
  position:absolute;
  top:300%;
}

#galleryfluid-mob{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  min-height:100vh;
}

.galleryfluid_title{
  position:absolute;
  top:20%;
  left:50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.galleryfluid_title-mob{
  margin:20px;
  margin-top:20%;
}

.video_fluid{
  position:absolute;
  top:30%;
  left:50%;
  height:50%;
  width:100%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.fluids{
  position:absolute;
  top:15%;
  left:2.5%;
  height:50%;
  width:100%;
}

.video_fluid-mob{
  margin:20px;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;

}

.videobox-mob{
  margin: auto;
}

.video_fluid_caption-mob{
  margin-left:20px;
  margin-right:20px;
}