*{
	transition: all 1s;
	-moz-transition: -moz-all 1s;
	-webkit-transition: all 1s;
	padding: 0;
	margin: 0;
	color: white;
}
body{
	/*background: black;*/
	overflow-x: hidden;
	background-size: 200%;
	animation: back-ani;
	animation-duration: 20s;
	background-color: #081411;
	/* background: black; */
	
	/*
	background: linear-gradient(90deg,#717dd7 0%, #FFCA40 50% ,#717dd7 100%);
	animation-iteration-count: infinite;
	animation-play-state: running;
	animation-direction: alternate;
	animation-timing-function: linear;*/
}

a{
	color: white;
	height: 100%;
	width: 100%;
	text-decoration: none;
	display: block;
}


img{
	width: 100%;
}

video{
	width: 100%;
}

.nav{
	background: #1729b0;
	color: white;
	height: 60px;
	width: 100%;
	padding-left: 5%;
	overflow: hidden;
}

.nav li{
	height: 100%;
	display: inline-block;
	line-height: 60px;
	width: 120px;
	text-align: center;
}

.nav li:hover{
	background-color: royalblue;
	cursor: pointer;
}

.box{
	background: #2e3884;
	/* margin-top: 5rem; */
}

.half-middle{
	margin-left: 25%;
	width: 50%;
}

.half{
	width: 50%;
}

.wide{
	width: 90%;
}

.wide-middle{
	width: 90%;
	margin-left: 5%;
}

.thin{
	width: 30%;
}

.thin-middle{
	width: 20%;
	margin-left: 40%;
}

.clickable{
	cursor: pointer;
}

.height-match
{
	height: 100%;
}

.height-half
{
	height: 50%;
}

.width-match
{
	width: 100%;
}



.float{
	float: left;
}

.folder{
	/*height: 60px;*/
	overflow: hidden;
}

.folder:active{
	height: auto;
}

.folder-button{
	font-size: 25px;
	line-height: 60px;
	padding-left: 20px;
	height: 60px;
	text-align: left;
	color: white;
	background: linear-gradient(90deg,#4b5cd7 30%, #ffb800 );
	background-size: 200%;
	text-shadow: 0px 0px 0px white;
	/*animation: folder-button-ani .25s, 100ms;*/
	cursor: pointer;
	margin-bottom: 10px;
}

.folder-button:hover{
	background: linear-gradient(90deg,#4b5cd7 30%, #ffb800 );
	background-size: 100%;
	text-shadow: 0px 0px 8px white;
	/*animation: folder-button-ani .25s, 100ms;*/
}


.item-block{
	display: inline-block; 
	/*height: 300px; */
	padding: 10px;
	overflow: hidden;
}

.item-block img{
	border-radius: 10px;
}

.text-container div{
	margin-left: 20px;
	margin-right: 20px;
	font-size: 20px;
	line-height: 40px;
}

/* .text-container div:first-child{
	line-height: 40px;
	font-size: 30px;
	font-weight: 800;
} */

.text-container div h1{
	line-height: 40px;
	font-size: 30px;
	font-weight: 800;
}

.fixed-button{
	position: fixed;
	right:0;
	width: 80px;
	height: 80px;
	text-align: center;
	line-height: 80px;
	font-size: 20px;
	background: #1729b0;
	cursor: pointer;
}

.fixed-button:hover{
	background: royalblue;
}

.fade{
  -webkit-animation: fade-in 0.5s;
  animation: fade-in 0.5s;
}

/* ID AREA */

#top-button{
	bottom: 10%;
}

#lang-button{
	bottom: 20%;
}


/* KEYFRAME */
@keyframes back-ani{
	0%{
		background-position: 0%;
	}
	50%{
		background-position: 100%;
	}
	100%{
		background-position: 200%;
	}
}

@keyframes fade-in {
from {
  opacity: 0;
    transform: translateY(30px);
    }
to {
  opacity: 1;
    transform: translateY(0);
    }
}

@-webkit-keyframes fade-in {
  from {
  opacity: 0;
    -webkit-transform: translateY(30px);
      }
  to {
  opacity: 1;
    -webkit-transform: translateY(0);
     }
}