body>div {
	
	
}


body > div > div {
	float:left;
	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(5),
body > div > div:nth-of-type(6) {
	
}

.height_5 {
	padding:70px !important;
}

body > div > div:nth-of-type(7),
body > div > div:nth-of-type(8),
body > div > div:nth-of-type(9),
body > div > div:nth-of-type(10) {
	
}



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) {
	background:black;
	
	
	
	
}

body > div > div:nth-of-type(1) {
	background:#f4b553;
}

body > div > div:nth-of-type(2) {
	background:#666666;
	font-size:1.5em;
}

body > div > div:nth-of-type(4) {
	padding:40px;
	text-align:left;
	overflow-y:auto;
}
.title {
	
	display: flex;
	justify-content: center;
    align-items: center;
}

body > div > div:nth-of-type(3),
body > div > div:nth-of-type(5),
body > div > div:nth-of-type(6), 
body > div > div:nth-of-type(7), 
body > div > div:nth-of-type(8), 
body > div > div:nth-of-type(9), 
body > div > div:nth-of-type(10) {
	
	background-size:cover;
	background-position:center;
	filter: brightness(80%) sepia(100%);
	-webkit-filter: brightness(80%) sepia() hue-rotate(5deg) saturate(20%);
	cursor:pointer;
	transition: filter 0.5s ease-in-out;
	
}

body > div > div:nth-of-type(3):hover, 
body > div > div:nth-of-type(5):hover, 
body > div > div:nth-of-type(6):hover,
body > div > div:nth-of-type(7):hover,
body > div > div:nth-of-type(8):hover,
body > div > div:nth-of-type(9):hover,
body > div > div:nth-of-type(10):hover


{
	
	filter: brightness(100%);
	-webkit-filter: brightness(100%) sepia() hue-rotate(5deg) saturate(20%);
	background-size:cover;
	transition: filter 0.5s ease-in-out;
}

body > div > div:nth-of-type(4) {
	background:#f09001;

}




.title_category {
	font-size: 2.5em;
	    font-size: 1.5em;
	display: flex;
	justify-content: center;
    align-items: center;

}
 h1 {
	
	font-size: 2.5em;
	line-height: 120%;
	margin:0px;
	
}
.title_category a {color:white;text-decoration:none;}


.wrapper {
		 max-width:100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 2fr 1fr;
  grid-auto-rows: 1fr;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  min-height: 100%;
  
  
}
body > div > div:nth-of-type(1) {
	background:#f4b553;
	grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 1;
	
	


}

.title_category a{ font-family:"jura"}
body > div > div:nth-of-type(2) {

background:#666666;
	font-size:1.5em;
}
body > div > div:nth-of-type(4) {
	background:#f09001;
	grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 2;
	
	
}
@media only screen and (max-width: 900px) {
body > div > div {margin:0}
	body>.wrapper > * {
		flex: 1 100%;
	}
	.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%;height:auto !important;}
	body>.wrapper > div:nth-of-type(1) { order: 1; flex: 1 100% !important;}
	body>.wrapper > div:nth-of-type(2) { order: 2; flex: 1 100% !important;height:auto;min-height:100px !important;}
	body>.wrapper > div:nth-of-type(3) { order: 4; }
	body>.wrapper > div:nth-of-type(4) { order: 3; flex: 1 100% !important;height:auto !important;min-height:200px !important;}
	body>.wrapper > div:nth-of-type(5) { order: 5; }
	body>.wrapper > div:nth-of-type(6) { order: 6; }
	
	body>.wrapper > div:nth-of-type(7) { order: 7; }
	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; }
	body>.wrapper > div:nth-of-type(11) { order: 11; }
	body>.wrapper > div:nth-of-type(12) { order: 12; }
	body>.wrapper > div:nth-of-type(13) { order: 13; }

	.title_category {min-height:250px !important;}
.txt {font-size: 2vw;}
.btn {font-size: 3vw;}
}








@media only screen and (max-width: 500px) {
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 100%;height:auto !important;}
	body>.wrapper > div:nth-of-type(1) { order: 1; flex: 1 100% !important;padding-top:100px;}
	body>.wrapper > div:nth-of-type(2) { order: 3; flex: 1 100% !important;height:auto;min-height:100px !important;padding: 40px 0;height:250px !important;}
	body>.wrapper > div:nth-of-type(3) { order: 4; }
	body>.wrapper > div:nth-of-type(4) { order: 2; flex: 1 100% !important;height:auto !important;min-height:200px !important;}
	body>.wrapper > div:nth-of-type(5) { order: 5; }
	body>.wrapper > div:nth-of-type(6) { order: 6; }
	
	body>.wrapper > div:nth-of-type(7) { order: 7; }
	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; }
	body>.wrapper > div:nth-of-type(11) { order: 11; }
	body>.wrapper > div:nth-of-type(12) { order: 12; }
	body>.wrapper > div:nth-of-type(13) { order: 13; }

	.title_category {min-height:250px !important;}
.txt {font-size: 2vw;}
.btn {font-size: 3vw;}
}
@media only screen and (max-width: 400px) {
body > div > div.txt, body>.wrapper > div:nth-of-type(4) {font-size: 4vw!important;}
h1, body > div > div>h2 {font-size: 6vw;}
.btn, body > div > div {font-size: 6vw !important;}
	.logo {
    padding: 40px;
}
.navi_icon {right:80px}
body>.wrapper > div:nth-of-type(1) {padding-top:100px;}
}