/******************************/
/***          HOME          ***/
/******************************/

.home h2 {
	font-family: 'theodonisvilla', 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
}


.home h2 a {
	font-weight: normal;
}

main {
	padding-bottom: 50px;
}

/******************************/
/***     HOME - polyglot    ***/
/******************************/


.polyglot {
	position: absolute;
	top: 50px;
	right: 0;
}

/******************************/
/***    HOME - dark mode    ***/
/******************************/


#dm-home {
	position: absolute;
	top: 100px;
	right: 0;
	padding: 5px;
	border: 2px solid var(--second);
	border-right: none;
	transition: background .3s;
}
#dm-home:hover { background: var(--second); }

#dm-home button {
	display: inline-block;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 5px;
	transition: color .3s;
}

#dm-home button {
	font-size: 20px;
	color: var(--second);
	border: none;
	background: none;
}
#dm-home:hover button { color: var(--bg); }


/******************************/
/***       HOME - blog      ***/
/******************************/

.home-blog {
	position: relative;
	width: 100%;
	height: 850px;
	margin-top: -50px;
}

.home-blog h2 {
	position: relative;
	left: 267px;
	top: 189px;
	width: 200px;
	font-size: 40px;
	font-weight: normal;
	color: var(--first);
}

.home-blog .article {
	position: absolute;
	width: 600px;
	height: 400px;
}

.home-blog img {
	position: absolute;
	display: block;
	width: 400px;
	height: 300px;
	z-index: 1;
}

.home-blog .article-infos {
	position: absolute;
	width: 400px;
	height: 200px;
	z-index: 2;
	background-color: var(--bg);
}
.home-blog .article:hover .article-infos { border: 3px solid var(--third); }


.home-blog .article-infos .article-link {
	position: absolute;
	right: 8px;
	top: 8px;
}

.home-blog .article-infos h3 {
	width: 315px;
}

.home-blog .article-infos h3 a,
.home-blog .article-infos p a {
	text-decoration: none;
	color: var(--txt);
}

.home-blog .article-infos p a {
	font-weight: normal;
}


/******************************/
/***      HOME - intro      ***/
/******************************/

.home-intro {
	position: relative;
	margin-top: -150px;
	width: 750px;
	-webkit-box-shadow: 10px -10px 0px 0px var(--second-50);
	-moz-box-shadow: 10px -10px 0px 0px var(--second-50);
	box-shadow: 10px -10px 0px 0px var(--second-50);
}

.home-intro h2 {
	position: relative;
	font-size: 30px;
	font-weight: normal;
	color: var(--first);
}



/******************************/
/***   HOME - Vademecum   ***/
/******************************/

.home-vademecum {
	position: relative;
	margin-top: 50px;
	padding-top: 45px;
	width: 750px;
}

.home-vademecum h2 {
	position: absolute;
	top: -30px;
    left: 50px;
	width: 350px;
	padding: 5px;
    text-align: center;
	font-size: 30px;
	font-weight: normal;
	color: var(--first);
	background-color: var(--bg);
	border: 3px dashed var(--first);
}

.home-vademecum .articles {
	display: flex;
	align-items: stretch;
	margin-top: 35px;
}

.home-vademecum .article {
	position: relative;
	display: inline-block;
	width: 360px;
	margin-left: 50px;
	vertical-align: top;
	background-color: var(--first);
	border: 3px solid var(--first);
}
.home-vademecum .article:first-of-type { margin-left: 0; }
.home-vademecum .article:hover { background-color: var(--third); border-color: var(--third); }

.home-vademecum .article img {
	display: block;
	max-width: 100%;
}

.home-vademecum .article p {
	padding: 5px;
	color: var(--bg);
	background-color: var(--first);
}
.home-vademecum .article:hover p { background: var(--third); }

.home-vademecum .article h3 {
	padding: 10px;
	color: #eaeaea;
	background-color: var(--first);
}
.home-vademecum .article:hover h3 { background: var(--third); }

.home-vademecum .article h3 a {
	text-decoration: none;
	color: #fff;
}


/******************************/
/***     HOME - YouTube     ***/
/******************************/

.home-youtube {
	position: relative;
	margin-top: 50px;
    -webkit-box-shadow: 10px -10px 0px 0px var(--second-50);
    -moz-box-shadow: 10px -10px 0px 0px var(--second-50);
    box-shadow: 10px -10px 0px 0px var(--second-50);
}

.home-youtube h2 {
	font-size: 30px;
	font-weight: normal;
	color: var(--first);
}

.home-youtube .cols {
	display: inline-block;
	vertical-align: top;
	margin-top: 25px;
}

.home-youtube .cols-2 {
	width: 47%;
}

.home-youtube .cols-3 {
	width: 30%;
}

.home-youtube .col-2-3 {
	width: 60%;
}


.home-youtube .col {
 	margin-right: 4%;
}

.home-youtube .col-nm {
 	margin-right: 0;
}

.home-youtube .cols iframe {
 	max-width: 100%;
}


/******************************/
/***      HOME - Menu       ***/
/******************************/

.home-menu ul {
	list-style-type: none;
}

.home-menu li a {
	display: block;
	height: 50px;
	line-height: 50px;
	margin: 25px 0;
	text-align: center;
    border: 3px solid var(--first);
	-webkit-box-shadow: 10px -10px 0px 0px var(--second-50);
	-moz-box-shadow: 10px -10px 0px 0px var(--second-50);
	box-shadow: 10px -10px 0px 0px var(--second-50);
}
.home-menu li:hover a {
    border: 3px solid var(--third);
	-webkit-box-shadow: 10px -10px 0px 0px var(--third-50);
	-moz-box-shadow: 10px -10px 0px 0px var(--third-50);
	box-shadow: 10px -10px 0px 0px var(--third-50);
    color: var(--third);
    text-decoration: none;
}



/******************************/
/***       HOME - books     ***/
/******************************/

.home-books {
	margin-top: 3em;
	padding: 1%;
	border: 3px solid var(--second);
    -webkit-box-shadow: 10px -10px 0px 0px var(--second-50);
    -moz-box-shadow: 10px -10px 0px 0px var(--second-50);
    box-shadow: 10px -10px 0px 0px var(--second-50);
}

.home-books h2 {
  position: relative;
  margin-bottom: 1em;
  font-size: 30px;
  font-weight: normal;
  color: var(--first);
}

.home-books .book {
	width: 23%;
	float: left;
}
.home-books .book:not(:last-child) { margin-right: 2%; }



.home-books .book-cover {
	position: relative;
}

.home-books .book-cover img {
	max-width: 100%;
}

.home-books .book .date {
	position: absolute;
	bottom: 0;
	left: 50%;
	display: inline-block;
	padding: 5px 10px;
	-webkit-transform: translate(-50%,25%);
	-moz-transform: translate(-50%,25%);
	-ms-transform: translate(-50%,25%);
	-o-transform: translate(-50%,25%);
	transform: translate(-50%,25%);
	color: var(--txt-revert);
	background: var(--bg-revert);
}
.home-books .book .date a { color: var(--txt-revert); }


.home-books .book h3 {
	margin-top: 25px;
	text-align: center;
	height: 100px;
}

.home-books .book h3 a { color: var(--txt); }



/******************************/
/***       HOME - craft     ***/
/******************************/

.home-crafts {
	position: relative;
	margin-top: 50px;
	padding-top: 45px;
}

.home-crafts h2 {
	position: absolute;
	top: -30px;
    left: 50px;
	width: 350px;
	padding: 5px;
    text-align: center;
	font-size: 30px;
	font-weight: normal;
	color: var(--first);
	background-color: var(--bg);
	border: 3px dashed var(--first);
}

.home-crafts .craft {
	width: 23%;
	float: left;
}
.home-crafts .craft:not(:last-child) { margin-right: 2%; }



.home-crafts .craft-cover {
	position: relative;
}

.home-crafts .craft-cover img {
	max-width: 100%;
}

.home-crafts .craft .date {
	position: absolute;
	bottom: 0;
	left: 50%;
	display: inline-block;
	width: max-content;
	padding: 5px 10px;
	-webkit-transform: translate(-50%,25%);
	-moz-transform: translate(-50%,25%);
	-ms-transform: translate(-50%,25%);
	-o-transform: translate(-50%,25%);
	transform: translate(-50%,25%);
	color: var(--txt-revert);
	background: var(--bg-revert);
}
.home-crafts .craft .date a { color: var(--txt-revert); }


.home-crafts .craft h3 {
	margin-top: 25px;
	text-align: center;
	height: 50px;
}

.home-crafts .craft h3 a { color: var(--txt); }



/******************************/
/***           RWD          ***/
/******************************/

@media screen and (min-width: 1301px) {
	/*----- Home blog -----*/
	.home-blog .article-1 {
		left: 450px;
		top: 0;
	}

	.home-blog .article-1 img {
		top: 0;
		right: 0;
	}

	.home-blog .article-1 .article-infos {
		bottom: 0;
		left: 0;
		-webkit-box-shadow: 10px -10px 0px 0px var(--second-50);
		-moz-box-shadow: 10px -10px 0px 0px var(--second-50);
		box-shadow: 10px -10px 0px 0px var(--second-50);
	}
	.home-blog .article-1:hover .article-infos {
		-webkit-box-shadow: 10px -10px 0px 0px var(--third-50);
		-moz-box-shadow: 10px -10px 0px 0px var(--third-50);
		box-shadow: 10px -10px 0px 0px var(--third-50);
	}


	.home-blog .article-2 {
		left: 0;
		top: 250px;

	}

	.home-blog .article-2 img {
		top: 0;
		left: 0;
	}

	.home-blog .article-2 .article-infos {
		bottom: 0;
		right: 0;
		-webkit-box-shadow: -10px -10px 0px 0px var(--second-50);
		-moz-box-shadow: -10px -10px 0px 0px var(--second-50);
		box-shadow: -10px -10px 0px 0px var(--second-50);
	}
	.home-blog .article-2:hover .article-infos {
		-webkit-box-shadow: -10px -10px 0px 0px var(--third-50);
		-moz-box-shadow: -10px -10px 0px 0px var(--third-50);
		box-shadow: -10px -10px 0px 0px var(--third-50);
	}

	.home-blog .article-3 {
		left: 600px;
		top: 450px;

	}

	.home-blog .article-3 img {
		bottom: 0;
		right: 0;
	}

	.home-blog .article-3 .article-infos {
		top: 0;
		left: 50px;
		-webkit-box-shadow: 10px 10px 0px 0px var(--second-50);
		-moz-box-shadow: 10px 10px 0px 0px var(--second-50);
		box-shadow: 10px 10px 0px 0px var(--second-50);
	}
	.home-blog .article-3:hover .article-infos {
		-webkit-box-shadow: 10px 10px 0px 0px var(--third-50);
		-moz-box-shadow: 10px 10px 0px 0px var(--third-50);
		box-shadow: 10px 10px 0px 0px var(--third-50);
	}

	/*----- Home menu -----*/
	.home-menu {
		position: absolute;
		right: 50px;
		width: 300px;
		margin-top: 25px;
	}
}

@media screen and (max-width: 1300px) {

	.page {
		width: 90%;
	}

	/*----- Home blog -----*/
	.home-blog {
		height: auto;
		margin-top: 0
	}

	.home-blog h2 {
		position: absolute;
		left: unset;
		top: unset;
		right: 50px;
		z-index: 3;
	}

	.home-blog .article .article-infos {
		position: absolute;
		width: 500px;
		height: auto;
	}

	.home-blog .article-1,
	.home-blog .article-2,
	.home-blog .article-3 {
		position: relative;
		margin: 0 auto 100px;
		width: 100%;
		height: 300px;
	}

	.home-blog .article-1 img,
	.home-blog .article-2 img,
	.home-blog .article-3 img {
		position: relative;
	}

	.home-blog .article-1 .article-infos,
	.home-blog .article-3 .article-infos {
		left: 325px;
		bottom: -50px;
		-webkit-box-shadow: -10px -10px 0px 0px var(--second-50);
		-moz-box-shadow: -10px -10px 0px 0px var(--second-50);
		box-shadow: -10px -10px 0px 0px var(--second-50);
	}

	.home-blog .article-1:hover .article-infos,
	.home-blog .article-3:hover .article-infos {
		border: 3px solid var(--third);
		-webkit-box-shadow: -10px -10px 0px 0px var(--third-50);
		-moz-box-shadow: -10px -10px 0px 0px var(--third-50);
		box-shadow: -10px -10px 0px 0px var(--third-50);
	}


	.home-blog .article-2 {
		margin-bottom: -100px;
	}


	.home-blog .article-2 .article-image {
		position: absolute;
		right: 0;
		top: 50px;
	}

	.home-blog .article-2 .article-infos {
		top: 0px;
		right: 350px;
		-webkit-box-shadow: 10px 10px 0px 0px var(--second-50);
		-moz-box-shadow: 10px 10px 0px 0px var(--second-50);
		box-shadow: 10px 10px 0px 0px var(--second-50);
	}
	.home-blog .article-2:hover .article-infos {
		border: 3px solid var(--third);
		-webkit-box-shadow: 10px 10px 0px 0px var(--third-50);
		-moz-box-shadow: 10px 10px 0px 0px var(--third-50);
		box-shadow: 10px 10px 0px 0px var(--third-50);
	}

	/*----- Home intro -----*/
	.home-intro {
		margin: 0 auto;
	}

	/*----- Home vademecum -----*/
	.home-vademecum {
		width: 100%;
	}

	/*----- Home youTube -----*/
	.home-youtube {
		margin: 75px auto 0;
	}

	/*----- Home menu -----*/
	.home-menu {
		margin: 75px auto 0;
	}

}

@media screen and (max-width: 1300px) and (min-width: 1000px) {
	
	/*----- Home menu -----*/
	.home-menu {
		margin-top: 25px;
	}

	.home-menu li {
		display: inline-block;
		width: 28%;
		margin-right: 5%;
	}

}


@media screen and (max-width: 1000px) {

	/*----- Home blog -----*/
	.home-blog .article-1,
	.home-blog .article-2,
	.home-blog .article-3 {
		width: 100%;
	}

	.home-blog .article .article-infos {
		width: 400px;
	}

	.home-youtube .cols {
		width: 100% !important;
	}

	.home-youtube .col { margin-right: 0; }


	/*----- Home books and crafts -----*/


	.home-books .book,
	.home-crafts .craft {
		width: 48%;
		float: left;
	}


}


@media screen and (max-width: 850px) {

	/*----- Home blog -----*/
	.home-blog {
		margin-top: 25px;
	}

	.home-blog h2 {
		position: relative;
		left: unset;
		right: unset;
		top: unset;
		margin: 0 auto;
	}

	.home-blog .article-1,
	.home-blog .article-2,
	.home-blog .article-3 {
		width: 400px;
		height: auto;
		margin: 0 auto 50px;
	}

	.home-blog .article-1 .article-infos,
	.home-blog .article-2 .article-infos,
	.home-blog .article-3 .article-infos,
	.home-blog .article-1 .article-image,
	.home-blog .article-2 .article-image,
	.home-blog .article-3 .article-image {
		position: relative;
		left: unset;
		right: unset;
		top: unset;
		bottom: unset;		
	}

	.home-blog .article-1 .article-infos,
	.home-blog .article-3 .article-infos {
		-webkit-box-shadow: 10px 10px 0px 0px var(--second-50);
		-moz-box-shadow: 10px 10px 0px 0px var(--second-50);
		box-shadow: 10px 10px 0px 0px var(--second-50);
	}
	.home-blog .article-1:hover .article-infos,
	.home-blog .article-3:hover .article-infos {
		border: 3px solid var(--third);
		-webkit-box-shadow: 10px 10px 0px 0px var(--third-50);
		-moz-box-shadow: 10px 10px 0px 0px var(--third-50);
		box-shadow: 10px 10px 0px 0px var(--third-50);
	}

	/*----- Home intro -----*/
	.home-intro {
		width: 90%;
	}

	/*----- Home YouTube -----*/
	.home-youtube {
		width: 100%;
	}

	.home-youtube iframe {
		width: 90%;
		height: 300px;
		margin-left: 5%;
	}

}