@media screen and (max-width: 900), 
screen and (max-device-width: 900px),
@media (orientation:portrait) {

* {
	margin:0;
	padding:0;
	width:100%;}

* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;}	

html,
body {
	font-size:12px;
	width:100%;}

body {
	min-height:100vh;
	height:100%;
	margin:0;
	display:grid;
	overflow-y:scroll;
	grid-template-rows:min-content 1fr auto;}

.wrapper {
	background:#fff;
	width:100%;
	padding:5rem 0;
	z-index:auto;}

	/*--- ANCHOR ---*/

	#anchor-fix {
		position:absolute;
		top:0;
		left:0;
		right:0;
		height:0;
		width:0;
		top:70vh;} /* SAME AS HEADER: IMAGE_HEADER */

/*-----------------------*/
/*       CONTAINER       */
/*-----------------------*/

.container {
	margin:0 auto;
	padding:0;
	width:calc(100vw - 2rem);
	height:auto;}

	/* CONTAINER: FULL */

	.container#full {
		margin:0;
		padding:0;
		width:100vw;
		height:auto;}
		
	.container#grid {
		grid-template-columns:repeat(1,1fr);}
		
	/* CONTAINER: CONTENT */

	.container#content {
		margin:0 1rem;
		padding:0;
		width:calc(100% - 2rem);
		height:auto;}



/*-----------------------*/
/*        HEADER         */
/*-----------------------*/

header {}



/*-----------------------*/
/*        MENU         */
/*-----------------------*/

.menu {}
	
header .menu_header .arrow::after {
	top:10px;
	left:12px;
	float:left;
	border-width:0 5px 5px 0;
	padding:6px;}	
	
header .menu_header .close::before,
header .menu_header .close::after {
	left:6px;
	top:16px;
	width:25px;
	height:5px;}


/*-----------------------*/
/*       CAROUSEL        */
/*-----------------------*/




#grid {
	margin:2rem auto 0;
	list-style:none;
	grid-row-gap:2rem;
	--gridItemHeight:calc(calc(100vh - 9rem) / 4);
	grid-template-rows:repeat(3,var(--gridItemHeight));}
	
body.open #grid {
	grid-template-rows:auto;}

	/*--- CAROUSEL: ITEM ---*/

	#grid .item {
		aspect-ratio:unset;}
	
	#grid .item:hover {
		transform:scale(1);}			

	/*--- CAROUSEL: ITEM-TITLE ---*/
	
	#grid .item h2 {
		bottom:auto;
		left:50%;
		right:auto;
		top:50%;}
	
	#grid .item h2 {
		transition:padding 0.5s ease,transform 0.5s ease;
		transform:translate(-50%,-50%);}
	
	body.open #grid .item h2,
	body.open #grid .item.open h2 {
		top:2rem;
		transform:translate(-50%,0);}
		
	body.open #grid .item h2,
	body.open #grid .item.open h2 {
		font-size:2rem;}		
		


	/*--- CAROUSEL: ITEM-IMAGE ---*/
	
	#grid .item .icon {
		background-size:var(--gridItemHeight);}

	#grid .item .icon {
		transition:opacity 0.3s ease,transform 0.3s ease;}
	
		
		/*-- CAROUSEL-OPEN: ITEM-IMAGE --*/
		
		body.open #grid .item .icon {
			opacity:0;
			transform:translateY(-10vh);}
			

		body.open #grid .item .body {
			transform:translateY(0);}








/* PAGE */

.page .post .page_title {
	margin:2rem 0;
	text-align:center;
	overflow:hidden;}

.page .page_return {
	position:relative;
	display:block;
	float:left;
	margin:0 auto 4rem;
	padding:0;
	width:auto;
	height:auto;
	overflow:visible;
	text-align:center;
	z-index:auto;}
	
.page .page_return {
	cursor:pointer;}




ul.button {
	position:relative;
	display:block;
	float:none;
	margin:0 auto;
	padding:0;
	width:100%;
	height:2rem;
	overflow:hidden;
	text-align:center;
	z-index:auto;}

ul.button {
	bottom:auto;
	left:0;
	right:0;
	top:auto;}

ul.button {
	color:#000;
	font-family:Poppins;
	font-size:1.4rem;
	font-style:normal;
	font-weight:normal;
	letter-spacing:0;
	line-height:2rem;
	text-decoration:none;
	text-transform:none;}
	
ul.button {
	cursor:pointer;}
	
ul.button::before {
	content:'>>';
	position:absolute;
	display:inline;
	float:none;
	margin:0 auto;
	padding:0;
	width:2rem;
	height:2rem;
	overflow:visible;
	text-align:center;
	z-index:2;}	
	
ul.button::before {
	bottom:auto;
	left:0;
	right:auto;
	top:0;}	
	
ul.button::before {
	transition:transform 0.3s;}
	
ul.button:hover::before {
	transform:translateX(2rem);}
	
ul.button::after {
	content:'<<';
	position:absolute;
	display:inline;
	float:none;
	margin:0 auto;
	padding:0;
	width:2rem;
	height:2rem;
	overflow:visible;
	text-align:center;
	z-index:2;}	
	
ul.button::after {
	bottom:auto;
	left:auto;
	right:0;
	top:0;}

ul.button::after {
	transition:transform 0.3s;}
	
ul.button:hover::after {
	transform:translateX(-2rem);}	
	
ul.button li {
	position:absolute;
	display:inline;
	float:none;
	margin:0 auto;
	padding:0;
	width:100%;
	height:auto;
	overflow:visible;
	text-align:center;
	z-index:auto;}

ul.button li {
	bottom:auto;
	left:0;
	right:0;
	top:0;}
	
ul.button li {
	transition:transform 0.3s;}

ul.button:hover li {
	transform:scale(1.03);}

ul.button li:nth-child(1) {
	transform:translateY(0) scale(1);}

ul.button:hover li:nth-child(1) {
	transform:translateY(0) scale(1.03);}

ul.button li:nth-child(2) {
	transform:translateY(100%) scale(1);}
	
ul.button:hover li:nth-child(3) {
	transform:translateY(100%) scale(1.03);}	

	body.open ul.button li:nth-child(1) {
		transform:translateY(-100%) scale(1);}

	body.open ul.button:hover li:nth-child(1) {
		transform:translateY(-100%) scale(1.03);}
	
	body.open ul.button li:nth-child(2) {
		transform:translateY(0) scale(1);}

	body.open ul.button:hover li:nth-child(2) {
		transform:translateY(0) scale(1.03);}



body .front {
	overflow:hidden;
	margin:2rem 1rem;
	transition:height 0.5s ease;}

body.open .front {
	height:0;}






/* BUTTON */

.post a.button {}

.post a.button {
	position:relative;
	display:block;
	float:left;
	margin:0;
	padding:0.8rem 1.6rem;	
	width:auto;
	height:auto;
	overflow:hidden;
	text-align:left;
	z-index:inherit;}
	
.post a.button {
	cursor:pointer;}
	
.post a.button ~ a.button {
	margin:0 0 0 1rem;}
	
.related a.button ~ a.button {
	margin:0;}

.post a.button {
	color:#fff;
	font-family:Poppins,Arial;
	font-size:1.32rem;
	font-style:normal;
	font-weight:600;
	letter-spacing:1px;
	line-height:1em;
	text-decoration:none;
	text-transform:none;}

.post a.button {
	background-image:linear-gradient(to top,#366 33.33%,#633 33.33%,#633 66.66%,#fff 66.66%);
	background-position:0 100%;
	background-size:100% 300%;
	border-radius:2px;
	transition:transform 0.2s ease,background 0.4s ease;}

.post a.button:hover {
	background-position:0 50%;
	transform:translateY(3px);}
	
.post a.button:active {
	background-position:0 0;
	color:#fff;
	transform:translateY(6px);}






/*-----------------------*/
/*        STYLE          */
/*-----------------------*/

.post {}

/* HEADINGS */

.post h1,
.post h2,
.post h3,
.post h4,
.post h5,
.post h6 {}

	/* HEADINGS: H1 */
	
	.post h1 {
		color:#000;
		font-family:Poppins,Arial;
		font-size:3rem;
		font-style:normal;
		font-weight:900;
		letter-spacing:1px;
		line-height:3.2rem;
		text-decoration:none;
		text-transform:none;}
		
	.post h1 {
		margin:2rem 0 1rem;}		
		
		
	.single .post .single_sub {
		display:block;
		transform:translateY(-2rem);}
		
	/* HEADINGS: H2 */

	.post h2 {
		margin-bottom:0.3rem;}
	
	.post h2 {
		color:#000;
		font-family:Poppins,Arial;
		font-size:2rem;
		font-style:normal;
		font-weight:800;
		letter-spacing:0;
		line-height:2rem;
		text-decoration:none;
		text-transform:lowercase;}
		
	/* HEADINGS: H3 */
	
	.post h3 {
		color:#000;
		font-family:Poppins,Arial;
		font-size:1.4rem;
		font-style:normal;
		font-weight:600;
		letter-spacing:1px;
		line-height:2rem;
		text-decoration:none;
		text-transform:none;}	
		
	/* HEADINGS: H4 */
	
	.post h4 {
		color:#000;
		font-family:Poppins,Arial;
		font-size:1.4rem;
		font-style:italic;
		font-weight:400;
		letter-spacing:1px;
		line-height:2rem;
		text-decoration:none;
		text-transform:none;}
		
	.page h4 {
		text-align:center;}	
		
	/* HEADINGS: H5 */
	
	.post h5 {
		color:#000;
		font-family:Poppins,Arial;
		font-size:1.5rem;
		font-style:italic;
		font-weight:300;
		letter-spacing:1px;
		line-height:2rem;
		text-decoration:none;
		text-transform:none;}
		
	.page h5 {
		text-align:center;}	
		
	/* HEADINGS: H6 */
	
	.post h6 {
		color:#000;
		font-family:Poppins,Arial;
		font-size:1rem;
		font-style:normal;
		font-weight:normal;
		letter-spacing:0;
		line-height:2rem;
		text-decoration:none;
		text-transform:uppercase;}
		
	.page h6 {
		text-align:center;}								

/* BLOCKQUOTE */

.post blockquote {
	position:relative;
	margin:2rem 4rem;}

	/* BLOCKQUOTE: QUOTES */
	
	.post blockquote::before {
		content:"";
		position:absolute;
		transform:translateX(-2.5rem);}
	
	.post blockquote::before {
		color:#000;
		font-family:Poppins;
		font-size:5rem;
		font-style:italic;
		font-weight:400;
		letter-spacing:0;
		line-height:5rem;
		text-decoration:none;
		text-transform:none;}			
		
	.post blockquote::before {
		left:0;
		top:0;}

	/* BLOCKQUOTE: P */
	
	.post blockquote p {
		color:#000;
		font-family:Poppins;
		font-size:2rem;
		font-style:normal;
		font-weight:600;
		letter-spacing:1px;
		line-height:2rem;
		text-decoration:none;
		text-transform:none;}
	
	/* BLOCKQUOTE: CITE */
	
	.post blockquote cite {
		color:#000;
		font-family:Poppins;
		font-size:1rem;
		font-style:normal;
		font-weight:600;
		letter-spacing:1px;
		line-height:2rem;
		text-decoration:none;
		text-transform:none;}	

/* LISTS */

.post ul,
.post ol {}
	
.post ul li > ul {
	margin:1rem 2rem;}

.post li {
	color:#000;
	font-family:Poppins;
	font-size:1.4rem;
	font-style:normal;
	font-weight:normal;
	letter-spacing:1px;
	line-height:2rem;
	text-decoration:none;
	text-transform:none;}
	
	/* LISTS: NUMBERED MARKER */

	.post ol {
		list-style-position:inside;}
	
	.post ol li::marker {
		font-size:0.8em;
		font-weight:900;}
	
	/* LISTS: UNNUMBERED MARKER */

	.post ol {
		list-style-position:inside;}
	
	.post ul li::marker {
		content:"";
		font-size:0.8em;
		font-weight:900;}		

/* IMAGES */

.post figure {
	margin:2rem 0;}
	
.post .wp-block-image figure {
	margin:1rem 0 2rem;}	
	
.post .wp-block-image figure.aligncenter {
	margin:2rem 0 2rem;}
	
/* GALLERY */

.post {}

.post p,
.post span,
.post a {
	color:#000;
	font-family:Poppins;
	font-size:1.4rem;
	font-style:normal;
	font-weight:normal;
	letter-spacing:1px;
	line-height:1.5em;
	text-decoration:none;
	text-transform:none;}

.post p strong,
.post p b {
	font-weight:500;}

.post p#prev {
	font-weight:600;
	cursor:pointer;}


.post h3,
.post p,
.post span,
.post a {
	transition:color 0.3s;}	

.post span {
	font-style:italic;}

.post p {
	margin-bottom:1rem;}
	
.post p:last-child {
	margin-bottom:0;}





/* RELATED */

.related {
	position:relative;
	display:grid;
	float:left;
	margin:2rem 0;
	padding:0;	
	width:100%;
	height:auto;
	overflow:hidden;
	text-align:left;
	z-index:auto;}
	
.page .related {
	margin-top:2rem;}
	
.related {
	grid-template-columns:50% 50%;}
	
	




	
loop .post {
	position:relative;
	transition:transform 0.5s;}
	
loop .post:hover {
	transform:scale(1.02);}

loop .post:hover h3,
loop .post:hover a.readmore {
	color:#366;}
	
loop .post a.readmore {
	font-weight:500;
	text-transform:lowercase;}

loop .post h3,
loop .post a.readmore {
	transition:all 0.3s;}
	
loop .post h3:hover {
	transform:translateX(1rem);}

loop .post a.readmore:hover {
	margin-left:3px;}

loop .post a.readmore:after {
	content:' >';
	visibility:hidden;
	opacity:0;
	transition:all 0.3s;}
	
loop .post:hover a.readmore:after {
	visibility:visible;
	opacity:1;}

loop .post:hover h3:hover {
	cursor:pointer;}

list .post {
	display:grid;
	grid-template-columns:10rem 1fr;}
	
list#related .post {
	grid-template-columns:10rem 1fr;}

list .post span {
	overflow:hidden;}
	
list .post h3 {
	cursor:pointer;
	transition:all 0.3s;}
	
list .post:hover h3 {
	color:#366;}
	
list .post h3:hover {
	transform:translateX(1rem);}	



/**/

footer .back .arrow {
	position:relative;
	display:block;
	float:left;
	margin:0 1rem 0 0;
	padding:0 0.64rem;
	width:2rem;
	height:2rem;
	overflow:hidden;
	text-align:center;
	z-index:inherit;}

footer .back .arrow::after {
	content:'';
	position:absolute;
	display:inline-block;
	top:6px;
	left:7.5px;
	float:left;
	border-color:#fff;
	border-style:solid;
	border-width:0 4px 4px 0;
	border-radius:2px;
	padding:4px;
	transform:rotate(135deg);
	transition:border-color 0.3s;}

}