/*css page */
body {
	margin:0;	
	background-image:url(imgs/third-white.jpg);
	background-size:cover;
	background-repeat:no-repeat ;
	}
	//
	nav {
		width: 100%;
		display: flex;
		align-content: center;
		justify-content: space-between;
		padding: 10px 0;
		background-color: black;
		color: white;
	}
	.meat{
		font-size:24px;
		color:yellow;
		background:black ;
	}

	.logo {
		width: 20%;
		cursor: pointer;
	}

	nav ul{
		list-style: none;
		width: 100%;
		text-align: right;
		padding-right: 60px;
	}

	nav ul li {
		display: inline-block;
		margin: 10px 20px;
	}
	nav ul li a{
		color: #fff;
		text-decoration: none;
	}

	.line {
		border: 1px solid purple;
		color: purple;
	}
	#story h1{
		text-align:center;
		font-family:Courier New ;
		font-size:40px ;
	}

	#story {
		line-height: 18px;
		word-spacing: 1px;
		width:50%;
		color:black;
		background:none ;
		float:left ;
	}

	#slim {
		float: right;
		width:50%;
	}

.slideshow-container {
  position: relative;
  width: 50%;
  height: 500px;
  margin: auto;
  overflow: hidden;
}

.slide-wrapper {
  position: relative;
  width: 50%;
}

.slides {
  position: relative;
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slides-img {
  width: 100%;
  height: auto;
  flex-shrink: 0;
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.prev {
  left: 0;
}

.next {
  right: 0;
}
//
	.boku {
	float:left;
	padding:5px;
	border-radius:5px;
	background:blue;
	color:white;
	text-decoration:none;
}
hr {
	border:1px solid papayawhip;
	width:100% ;
	text-align: center;
}
#header {
	top:0 ;
	width:100% ;
	position:fixed;
	background:black;
	padding-bottom:-50px ;
	padding-left:40px ;
	color:white;
	text-align:right;
	justify-content:space-between;
	box-shadow: inset 0 .5em 1.5em rgba(5, 0, 5, .1), inset 0 .125em .5em rgba(5, 0, 5, .15);
	border-bottom-right-radius:20px ;
	border-bottom-left-radius:20px ;

}
.menus{
	margin:none ;
	padding:2px;
	text-align: center;
	padding-right:100px;
	color:white ;
}
.mehn{
	background:papayawhip;
	color:black;
	padding:5px;
	border-radius:2px ;
}
.mehn:hover{
	border:1px solid papayawhip ;
	transition:.5s ease ;
}
.mehh:hover{
	border:1px solid papayawhip ;
	transition:.5s ease ;
}
.mehh {
	color:white;
	padding:5px;
	border-radius:2px ;
}
li {
	display:inline-block;
	color:white;
	text-align:center;
	padding:10px 15px 12px;
	font-size:100%;
}
a {
	text-decoration:none;
	justify-content:space-between ;
}
button {
	padding:5px;
	background:none;
	border:1px solid papayawhip;
	color:white ;
	width:80px ;
	float:right;
}
button:hover {
	cursor:pointer ;
	background:papayawhip;
	color:black;
	transition:.5s ease;

}
.mems{
		background-image:url(imgs/4.jpg);
		height:250px;
		padding:100px ;
		text-align:center ;
		background-size:contain ;
		color:papayawhip;
		background-repeat:no-repeat;
		text-align:center;
		font-family:Arial;
		font-weight:bolder;
		font-size:5vh ;
	}

#blunt{
	width:100% ;
	border-radius:10px ;
	font-family:Consolas;
	font-size:24px;
	text-align:center ;
	align-content:center;
	justify-items:center ;
}
#blunt:hover{
	background:lightblue;
	color:black;
	transition:.5 ;
	border-color:2px solid black ;
}
#blunt a{
	padding:50px ;
	border-radius:200px ;
	background:linear-gradient(to right, lightblue,  darkblue, blue, darkblue, lightblue);
	color:white;
}
#foot{
		color:white;
		background-image:url(imgs/3.jpg);
		background-repeat:no-repeat;
		background-size:cover ;
		width:100%;
		height:250px;
		margin-top:725px ;
	}
	hr{
		border:1px solid white ;
	}
	#foot p{
		text-align:center;
		font-family:Calibri ;
	}
	.trl{
		margin-left:500px ;
	}
	.leftis{
		float:left;
		width: 33.3%; 
		text-align: center;
	}
	.leftis p{
		color:ghostwhite ;
		text-align:center;
	}
	.leftus{
		float:right;
		width: 33.3%; 
		text-align: center;
	}
	.leftus p{
		color:ghostwhite ;
		text-align:center;
	}
	.leftos{
		float:right;
		width: 33.3%; 
		text-align: center;
	}
	.leftos p{
		color:ghostwhite ;
		text-align:center;
	}
	@media screen and (max-width:800px) {
		.left, .main, .right, .topnav, .leftis, .leftos, .leftus, #foot, .topnavi2, .mid-content, .mini, .sec .topnavi3, .upre, .upra, #topnav, a:hover, a, .searchbx, .select, .uper, {
			width:100%;
			float:none;
			display:block;
			 /* the width is 100%, when the viewport is 800px or smaller */
		}
	}
}