@charset "UTF-8";
@import "main.css";

:root{
	/* MAIN */
	--theme-background-color : #FFEF2C; /*#FFF144;*/
	--theme-section-margin-top: 100px;

	/* INDEX */
	--theme-global-margin : 200px;
	--theme-figcaption-margin : 25px;
}

*{}

section{
	display: grid;
	grid-template-columns: [start] 1fr [col1] 1fr [col2] 1fr [end];
}

/*
.theme-light {background-color: #FFF;}
.theme-light *{color:#000;transition: all 0.5s ease;}
.theme-light .type{background-color: #000 !important;color:#FFF !important;}

.theme-dark, .theme-dark header {background-color: #000;}
.theme-dark *{color:#FFEF2C;transition: all 0.5s ease;}
.theme-dark .type{background-color: #FFEF2C !important;color:#000 !important;}

.theme-color {background-color: #FFEF2C;}
.theme-color *{color:#000;transition: all 0.5s ease;}
.theme-color .type{background-color: #000 !important;color:#FFF !important;}
*/

/*//////////////////////////////////*/

section article{
	margin-bottom: 100px;
}

section address{
	display: none;
}

/*//////////////////////////////////*/

.index-item.left{
	grid-column-start: start;
	grid-column-end: col2;
}
.index-item.right{
	grid-column-start: col1;
	grid-column-end: end;
}
.index-item hgroup{
	margin-bottom: 20px;
	width:100%;
}
.index-item.left hgroup{
	margin-left: var(--theme-global-margin);
	width: calc(100% - var(--theme-global-margin));
}
.index-item.right hgroup{
	width: calc(100% - var(--theme-global-margin));
}
.index-item .type{
	background-color: #000;
	color: #FFF;
	padding: 5px 10px;
	border-radius: 10px;
	width: max-content;
	width: -moz-max-content;    /* Firefox */
  	width: -webkit-max-content; /* Chrome */
	margin-bottom: 10px;
}
.index-item figure{
	position: relative;
}
.index-item figure img{
	width: 100%;
}
.index-item figure figcaption{
	position: absolute;
	top:50%;
	width: max-content;
	width: -moz-max-content;    /* Firefox */
  	width: -webkit-max-content; /* Chrome */
	transform-origin: center;
	font-size: 15px;
	
}
.index-item.left figure figcaption{
	transform: translateX(-50%) rotate(90deg);
	left: calc(100% + var(--theme-figcaption-margin));
}
.index-item.right figure figcaption{
	transform: translateX(50%) rotate(90deg);
	right: calc(100% + var(--theme-figcaption-margin));
}

/*//////////////////////////////////*/

.index-item.left h3{
	margin-bottom: 20px;
}

.index-item h3 a{
	font-size: 70px;
	line-height: 70px;
	font-family: 'Oswald', sans-serif;
	font-weight: bold;
}

/*.index-item.right h3 a{
	font-size: 30px;
	line-height: 30px;
}*/

/*//////////////////////////////////*/

@media screen and (max-width: 690px) {
	:root{
		--theme-section-margin-top: 0px;
		--theme-global-margin : 20px;
	}
	
	section, section address{display: block;}
	
	section address{
		padding: var(--theme-global-margin);
		padding-bottom: calc(var(--theme-global-margin) * 2);
	}
	
	.index-item hgroup{
		margin-left: var(--theme-global-margin);
	}
	.index-item figure figcaption{
		top:100%;		
	}
	.index-item.left figure figcaption{
		transform: translateX(0) rotate(0deg);
		left: var(--theme-global-margin);
	}
	.index-item.right figure figcaption{
		transform: translateX(0) rotate(0deg);
		left: var(--theme-global-margin);
	}

	.index-item h3{
		margin-bottom: 10px !important;
	}

	.index-item h3 a{
		font-size: 30px;
		line-height: 30px;
	}

	.index-item.right h3 a{
		font-size: 30px;
	}
}

@media print{
	:root{

	}
}