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

@keyframes show{
	to{
		left: 2vw;
	}
}

@keyframes show{
	to{
		left: 102vw;
	}
}

@keyframes fromLeft {
	from{
		grid-column: 1;
		grid-row: 1;
		z-index: -1;
		opacity: 0;
	}
	to{
		opacity: 1;
	}

}


:root
{
--color-background: #cad3c5;
--color-lines: #ffffff;
--color-text: #795936;
--color-text-rgba: rgba(141, 41, 18, 0.6);
--color-main: rgba(88, 41, 0, 0.4);
--color-box: #f1d883;
--color-box-rgba: rgba(255, 200, 27, 0.8);

}


main{
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	overflow-y: auto;
}

header{
	width: 90vw;
	height: 30vh;
	background-image: url('../images/logo6.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.subLogo{
	height: 5vh;
	font-size: 2vh;
	font-family: "Font2";
	color: var(--color-lines);
}

/* nav{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 98vw;
	height: 59vh;
	overflow-y: auto;
	scrollbar-width: none;
	background-color: #795936;
} */

.box{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 90vw;
	height: 28vh;
	border: 4px solid var(--color-lines);
	border-radius: 25px 0px 25px 25px;
	margin-bottom: 2vh;
	background-image: url('../images/box_tile.jpg');
}	

.boxTitle{
	height: 5vh;
	text-align: center;
	font-family: "Font1";
	color: var(--color-lines);
	text-shadow: 0px 0px 4px var(--color-text);
	font-size: 4.1vh;
	margin: 0;
	padding: 1vh;
	background-position: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.boxText{
	width: 100%;
	height: 20vh;
	font-family: "Font2";
	color: var(--color-text);
	font-size: 3vh;
	margin: 0;
	overflow-y: auto;
	scrollbar-width: none;
	padding: 2vh;
	text-align: justify;
}

#slider{
	display: none;
	flex-wrap: wrap;
	width: 98vw;
	height: 98vh;
	justify-content: center;
	align-items: flex-start;
	position: absolute;
	top: 1vh;
	left: 1vw;
	z-index: 2;
	border: 4px solid var(--color-lines);
	border-radius: 25px 0px 25px 25px;
	background-image: url('../images/box_tile.jpg');
	/* padding-top: 2vh; */
	/* overflow-y: auto;
	scrollbar-width: none; */
	/* margin-bottom: 2vh; */
	
}

.sliderImg{
	width: 88vw;
	height: 25vh;
	border-radius: 25px 0px 0px 0px;
	border: 2px solid var(--color-background);
	margin-top: 1vh;
}

.sliderTitle{
	font-family: "Font1";
	width: 92vw;
	height: 8vh;
	color: var(--color-lines);
	text-shadow: 0px 0px 4px var(--color-text);
	font-size: 4.1vh;
	padding: 2vh;
	margin-top: 1vh;
	text-align: center;
	background-image: url('../images/backtitle.png');
	background-position: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.sliderText{
	display: flex;
	flex-wrap: wrap;
	width: 92vw;
	height: 54vh;
	font-family: "Font2";
	color: var(--color-text);
	font-size: 3vh;
	padding: 1vh;
	overflow-y: auto;
	scrollbar-width: none;
	text-align: justify;
	background-color: var(--color-white-rgba);

}

ul{
	width: 100%;
	padding-right: 3vw;
	background-color: #f1d883;
}

li{
	/* line-height: 90%;	 */
	list-style-type: disc;
	list-style-position: outside;
	text-align: left;
	
}

.iconBox{
	/* position: absolute;
	bottom: 1vh;
	left: 50%;
	transform: translate(-50%); */

	display: flex;
	width: 92vw;
	height: 7vh;
	justify-content: space-around;
	align-items: center;
	justify-self: flex-end;
	padding-top: 2vh;
}

.icon{
	height: 5vh;
	width: 8vh;
}

article
{
display: flex;

}

.hiddText
{
display: none;
}

#dialog
{
display: flex;
}

	@media screen and (orientation : landscape){

		main{
			display: grid;
			grid-template-columns: repeat(2, 49vw);
			grid-template-rows: repeat(4, 24.5vh);
			align-items: center;
			justify-items: center;
			overflow-y: hidden;
		}

		header{
			grid-column: 1;
			grid-row: 1 / 3;
			height: 100%;
			width: 100%;		
			
		}

		.subLogo{
			grid-column: 1;
			grid-row: 3;
			height: 100%;
			width: 100%;
			text-align: center;
			font-size: 3vh;
			
		}

		.box{
			width: 80%;
			height: 90%;
			animation: fromLeft 2s backwards;
		}

		#c1{
			grid-column: 2;
			grid-row: 1;
			
		}

		#c2{
			grid-column: 2;
			grid-row: 2;
		}

		#c3{
			grid-column: 2;
			grid-row: 3;
		}

		#c4{
			grid-column: 2;
			grid-row: 4;
		}

		#c5{

			grid-column: 1;
			grid-row: 4;
		}
		
	}