body > div > div {
	float:left;
	margin:4px;
	height: calc(((100%) / 3) - 8px);
	transition: filter 0.5s ease-in-out;
	color:white;
	box-sizing:border-box;
	text-align:center;
}

body > div > div:nth-of-type(1), body > div > div:nth-of-type(2), body > div > div:nth-of-type(3), body > div > div:nth-of-type(4), body > div > div:nth-of-type(10), body > div > div:nth-of-type(8), body > div > div:nth-of-type(9) {
	width:calc((100% / 4) - 8px);
	background:#6b6251;
}

body > div > div:nth-of-type(1) {
		background: url("../img/overlay/Home_1.jpg");
	background-size:cover;
	
	height:30%;
	
}



body > div > div:nth-of-type(1):hover {
	background: url("../img/Home_1.jpg");
	
	background-size:cover;
	transition: filter 0.5s ease-in-out;
}


body > div > div:nth-of-type(2) {
	background: url("../img/overlay/Home_2.jpg");
	background-size:cover;
	
	height:30%;
	
}

body > div > div:nth-of-type(2):hover {
	background: url("../img/Home_2.jpg");

	background-size:cover;
	transition: filter 0.5s ease-in-out;
}


body > div > div:nth-of-type(3) {
	background: url("../img/overlay/Home_3.jpg");
	background-size:cover;

	
	transition: filter 0.5s ease-in-out;
	height:30%;
}

body > div > div:nth-of-type(3):hover {
	background: url("../img/Home_3.jpg");
	
	
	background-size:cover;
	transition: filter 0.5s ease-in-out;
}


.logo {padding:80px;}




body > div > div:nth-of-type(4) {
background:#f4b553;
height:30%;
	}





body > div > div:nth-of-type(5) {
	width:calc((100% / 4) - 8px);
	height: calc((((100%) / 3) * 2) - 8px);
	background:#f4b553;
	padding:40px;
	height:70%;
	
}

body > div > div>span {

}

body > div > div:nth-of-type(6) {
	
	width:calc((100% / 2) - 8px);
	
	background:#f09001;
	height:calc(40% - 8px);
	
}
 body > div > div:nth-of-type(8) {
	 height:30%;
	 
 }
 body > div > div:nth-of-type(7) {
	width:calc((100% / 4) - 8px);
	
	background:red;
	height:calc(40% - 8px);
	
}

body > div > div:nth-of-type(7) {
	background: url("../img/overlay/Home_7.jpg");
	background-size:cover;
	background-position:center;
	
	
	
	transition: filter 0.5s ease-in-out;
}

body > div > div:nth-of-type(7):hover {
	background: url("../img/Home_7.jpg");
	
	background-position:center;
	
	background-size:cover;
	transition: filter 0.5s ease-in-out;
}


body > div > div:nth-of-type(9) {
	background: url("../img/overlay/Home_9.jpg");
	background-size:cover;
	
	
	
	
	transition: filter 0.5s ease-in-out;
	height:30%;
}

body > div > div:nth-of-type(9):hover {
	background: url("../img/Home_9.jpg");
	
	
	background-size:cover;
	transition: filter 0.5s ease-in-out;
}

body > div > div:nth-of-type(10) {
	background: url("../img/overlay/Home_10.jpg");
	background-size:cover;
	
	
	
	
	transition: filter 0.5s ease-in-out;
	height:30%;
}

body > div > div:nth-of-type(10):hover {
	background: url("../img/Home_10.jpg");
	
	
	background-size:cover;
	transition: filter 0.5s ease-in-out;
}

@media only screen and (max-width: 900px) {
body > div > div {margin:0}
	body>.wrapper > * {
		flex: 1 100%;
	}
	
	body>.wrapper { display: flex; flex-flow: row wrap;overflow:scroll;}
	body>.wrapper > div {min-height:200px;align-self:flex-start;flex: 1 50%;}
	body>.wrapper > div:nth-of-type(1) { order: 2; }
	body>.wrapper > div:nth-of-type(2) { order: 3; }
	body>.wrapper > div:nth-of-type(3) { order: 5; }
	body>.wrapper > div:nth-of-type(4) { order: 7; }
	body>.wrapper > div:nth-of-type(5) { order: 4; flex: 1 100% !important;height:auto;padding-bottom:30px;}
	body>.wrapper > div:nth-of-type(6) { order: 1; flex: 1 100% !important}
	body>.wrapper > div:nth-of-type(7) { order: 6; }
	body>.wrapper > div:nth-of-type(8) { order: 8; }
	body>.wrapper > div:nth-of-type(9) { order: 9; }
	body>.wrapper > div:nth-of-type(10) { order: 10; }
	
.txt {font-size: 2vw;}
.btn {font-size: 3vw;}
}


@media only screen and (max-width: 500px) {
body > div > div {margin-bottom:8px;}
	body>.wrapper > * {
		flex: 1 100%;
	}
	body > div:nth-of-type(1) {
    width: 100%;
     height: calc(100% - 40px) !important;
}
.menu {max-width:500px;width:100%;left:0;}

	body>.wrapper { display: flex; flex-flow: row wrap;overflow:scroll;}
	body>.wrapper > div {min-height:200px;align-self:flex-start;flex: 1 100%;}
	body>.wrapper > div:nth-of-type(1) { order: 2; }
	body>.wrapper > div:nth-of-type(2) { order: 3; }
	body>.wrapper > div:nth-of-type(3) { order: 5; }
	body>.wrapper > div:nth-of-type(4) { order: 7; height:auto}
	body>.wrapper > div:nth-of-type(5) { order: 4; height:auto}
	body>.wrapper > div:nth-of-type(6) { order: 1; }
	body>.wrapper > div:nth-of-type(7) { order: 6; }
	body>.wrapper > div:nth-of-type(8) { order: 8; height:auto}
	body>.wrapper > div:nth-of-type(9) { order: 9; }
	body>.wrapper > div:nth-of-type(10) { order: 10; }
	
.txt {font-size: 3vw;}
.btn {font-size: 4vw;}
.btn a,.btn span {font-size: 4vw;line-height:100%;}
}

@media only screen and (max-width: 400px) {
.txt {font-size: 4vw;}
.btn {font-size: 6vw;}
	.logo {
    padding: 40px;
}
.navi_icon {right:80px}

}

.logo img {width:100%;}