@font-face{
		font-family: OdinRoundedLight;
		src: url("OdinRoundedLight.otf");
}

html{
		scroll-behavior: smooth;
}

body{
		padding:0;
		margin:0;
		background-color: #262D33;
		-webkit-animation-name: fade;
		-webkit-animation-duration: 2s;
		animation-name: fade;
		animation-duration: 2s;
		font-family: OdinRoundedLight;
}

@-webkit-keyframes fade {
		from{
				opacity: 0;
		}to{
				opacity: 1;
		}
}

@keyframes fade{
		from{
				opacity: 0;
		}to{
				opacity: 1;				
		}
}

.container{
		width: 85%;
		margin: auto;
		overflow: hidden;
}

.image img{
		width: 30px;
		position: absolute;
		top: 15px;
		left: 10px;
}

header{
		background: #1E1E1E;		
		min-height: 50px;
		width: 100%;
}

header a{
		color: #DCDCDC;
		text-decoration: none;
		text-transform: uppercase;
		font-size: 16px;
}

header li{
		float: right;
		display: block;
		padding: 5px 40px 0 0;
}

header #title h2{
		color: #DCDCDC;		
		position: absolute;
		top: -3px;
		left: 100px;
}

header #title img{
		width: 30px;
		position: absolute;
		top: 10px;
		left: 60px;
		border-radius: 100%;
		border: white 1.5px solid;
		filter: brightness(1000%);
}

header nav{  
		margin-top: 15px
}

.box{
		color: #DCDCDC;
		width: 100%;
}

.box h1{
		font-size: 10px;
		margin-top: 40px;
		margin-right: 40px;
		margin-bottom: 10px;
		text-indent: 40px;
}

.box p{
		font-size: 10px;
		margin-left: 40px;
		margin-right: 40px;
		margin-bottom: -10px;
}

.box li{
		font-size: 10px;
		margin-left: 40px;
		padding-top: 10px;
}

.banner{
		background: url("image/homepict.png");
		background-position: center;
		background-size: cover;
		height: 400px;
		text-align: center;
		color: white;
		border-bottom: #24272E 30px solid;
}

.banner h1{
		margin-top: 140px;
		font-size: 55px;
}

.banner p{
		font-size: 20px;
		margin-top: -30px;
}

.row{   
		display: flex;
		padding: 0 4px;
		width: 90%;
		margin: auto;
} 

.column{
		flex: 100%;
		padding: 0 4px;
}

.column img{
		width: 100%; 
		margin-top: 8px; 
		vertical-align: middle; 
}

.button {
		background-color: #1E1E1E;
		transition: all 1s;
 		border: 1px solid #1E1E1E;
 		border-radius: 7px;
 		display: block;
 		width: 250px;
 		margin: auto;
 		margin-top: 30px;
		height: 50px;		
		position: relative;	
}

.button a{
		color: #DCDCDC;		
		text-decoration: none;
		padding-top: 18px;
		display: block;
		text-align: center;
		font-size: 20px;
}

.button:hover{
		box-shadow: 0 0 8px #1E1E1E, 0 0px 16px #1E1E1E;
		border: 1px solid #24272E;
		background-color: #24272E;		
}

.button:hover a{
		color: white;
		text-shadow: 0 0 8px white, 0 0px 16px white;
} 

.slide {  
		width: 100%;
		height: 50px;
		z-index: -1;  
		position: absolute;
		top: 0;
		transition: all 1s;    
		border-radius: 7px;
}

.slide p {
		text-align: center;
		font-size: 140%;	
		text-shadow: 0 0 2px white;
}

.button:hover .slide {
		background-color: #1E1E1E;		
		border-radius: 3px;
		box-shadow: 0 0 8px #1E1E1E, 0 0px 16px #1E1E1E;
		top: 40px;  
}

footer{
		margin-top: 30px;
		color: #DCDCDC;
		background-color: #1E1E1E;
}

footerfixed{
		margin-top: 30px;
		color: #DCDCDC;
		background-color: #1E1E1E;
		position: fixed;
		bottom: 0px;
		width: 100%;
}

footer p, footerfixed p{
		margin: auto;
		text-align: center;
		font-size: 10px;
		padding-bottom: 15px;
		padding-top: 15px;
}

.buttonup{
		position: fixed;
		right: -100px;
}

@media(max-width: 768px){
		.buttonup{
				background: rgba(0.0,0.0,0.0,0.6);
				color: white;	
				position: fixed;
				width: 35px;
				height: 35px;
				bottom: 60px;
				right: 40px;
				font-size: 30px;
				line-height: 55px;
				border-radius: 50%;
				text-align: center;
		}
		
		.buttonup a{
				color: white;	
				text-decoration: none;
		}
		
		header{
				min-height: 40px;
		}
   
   header nav, header li, header a{  		
				font-size: 92%;
				margin-top: 4px;  		
				padding: 1px 5px 0 5px;
				float: left;        
		}
		
   header #title h2{
				opacity: 0;
				top: -100px;				
		}
		
		header #title img{
				opacity: 0;
				top: -100px;
		}
		
		.banner h1{
				margin-top: 100px;
		}
  
		.banner p{
				margin-top: -20px;
		}
  
		.box h1{
				font-size: 100%;  
				margin-top: 20px;
				text-indent: 20px;
				margin-bottom: 0px;
				margin-right: 50px;
		}	
  
		.box p{
				margin-left: 20px;
				margin-right: 20px;  		
				margin-bottom: -5px;
				font-size: 85%;
		}
  
		.box li{
   		font-size: 85%;
   		margin-left: 20px;
   		margin-right: 20px;
		}
  
		.row{
				padding-top: 5px;
		}
  
		.button, .slide{
				width: 140px;
				height: 40px;
		}
  
		.button a{		
				padding-top: 14px;				
				font-size: 15px;
		}

		.slide p {  
				padding-top: 5px;
				text-align: center;
		}

		.button:hover .slide {
				background-color: #1E1E1E;		
				border-radius: 3px;
				top: 30px;
			}
}