/*
# ------------------ BEGIN LICENSE BLOCK ------------------
#
# This file is part of PluXml : http://www.pluxml.org
#
# Package:		theme.css
# Copyright (c) 2017 PluXml
# Authors		Stephane F., Pedro "P3ter" CADETE.
# Licensed under the GPL license.
# See http://www.gnu.org/licenses/gpl.html
#
# ------------------- END LICENSE BLOCK -------------------
*/

*{
  box-sizing: border-box;
}


@font-face {
	font-family: 'open_sansregular';
	src: url('../fonts/OpenSans-Regular-webfont.eot');
	src: url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
	url('../fonts/OpenSans-Regular-webfont.woff') format('woff'),
	url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
	url('../fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
	font-weight: normal;
	font-style: normal;

}

 @font-face {
    font-family: 'Montserrat Regular';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/Montserrat-Regular.woff') format('woff');
    }

@font-face {
    font-family: 'Montserrat Bold';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/Montserrat-Bold.woff') format('woff');
    }

@font-face {
    font-family: 'Andika';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/Andika-R.woff') format('woff');
    }
    
.andika-regular {
	font-family: "Andika", sans-serif;
	font-weight: 400;
	font-style: normal;
  }
  
  .andika-bold {
	font-family: "Andika", sans-serif;
	font-weight: 700;
	font-style: normal;
  }
  
  .andika-regular-italic {
	font-family: "Andika", sans-serif;
	font-weight: 400;
	font-style: italic;
  }
  
  .andika-bold-italic {
	font-family: "Andika", sans-serif;
	font-weight: 700;
	font-style: italic;
  }

body {
	width: 100%;
	min-height: 100vh;
	font-family: 'Andika', sans-serif;
	font-size: 2.2rem;
	line-height: 1.2em;
	color: #3A4145;
	background-color: #fafafa;
	background-size: cover;
	overflow-x: hidden;
	background-image: url("../img/backgroundmax.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	
	
}

p {
	text-indent: 30px;
}


/* ---------- Header ---------- */


.header {
	max-width: 100%;
	background-color: #d19566;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23D8C1A4' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23D6B484'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E");
	height: 125px;
	z-index: 999;
	display: flex;
	box-shadow: 2px 3px 7px 3px rgba(27, 27, 27, 0.137);
	justify-content: center;

}

.hcontent {
	display: flex;
	width: 100vw;
	justify-content: center;
}


.no-margin {
	color: hwb(0 98% 2%);
	font-size: 0.8vw;
	font-weight: lighter;
}



.header a {
	color: rgb(255, 255, 255);
}

h1 {
	color: #2c929b;
	font-weight: bolder;
	font-size: 2.8rem;
	font-family: "Montserrat Bold";
}

.header h1 a {
	position:relative;
	z-index:1;
	margin-top: 1em;
	margin-right:-2em;
	font-size: 1.5vw;
	color: #fff;
	font-weight: bold;
}



.header a:hover {
	text-decoration: none;
}


/*---------------SearchBar-----------*/



/* ----- Hero ----- */




.hero {
	position:sticky;
	top: 140px;
	background-color: #d19566;
	width: 350px;
	height: fit-content;
	padding: 10px;
	margin-top: 6vw;
	color: #fafafa;
	box-shadow: 2px 5px 5px 3px rgba(27, 27, 27, 0.137);
	border-radius: 0 15px 15px 0px;
}

.accroche {
	display: flex;
	font-family: "Montserrat Regular";
	justify-content: center;
	margin: 2px;
}

.accroche p{
	text-indent: 0;
	font-size: 2rem;
	line-height: auto
}

.name a:hover {
	color: #2c929b;
	text-decoration: none;
	transition: 0.5s;
}

.name a{
	color: #fafafa
}

.name {
	display: flex;
	justify-content: center;
	padding: 0;
	margin: 0;
	font-size: 2.8rem;
	grid-row: 1;
	color: #fafafa;
}

.portrait>img {
	display: block;
	width: 75%;
	margin: auto ;
	border-radius: 25px;
}

.portrait {
	margin-top: 15px;
	grid-row: 2;
	height: fit-content;
	margin-bottom: 15px;
}

.portrait, .name, #social1 {
	grid-column: 1;
}


#social1>a>i:hover {
	color: #209da8;
	transition: 0.5s;
}

#social1>a {
	font-size: 40px;
	color: #fafafa;
	margin-left: 15px;
	
}

#social1 {
	display: flex;
	grid-row: 3;
	justify-content: center;
	height: 40px;
	width: 100%;
	padding-top: 0.5vw;
	border-top: rgb(34, 34, 34);
	border-style: solid;
	border-width: 1px;
	border-bottom: none;
	border-left: none;
	border-right: none;
}

/* ----- Nav / Menu ----- */

.child {
	display: flex
}

.menu-container {
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: center;

}

.nav{
	display: flex;
	padding: 10px 20px;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	position: relative;

}

.liste {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
}


.liste li {
	line-height: 80px;
	margin: 0.8px;

}

.liste li a {
	align-items: right;
	padding: 7px 13px;
	border-radius: 3px;
	letter-spacing: 1px;
	font-family: "Montserrat Bold";

}

li.active a,
a.active {
	color: #000;
}


.menu-toggle {
	display:none;
}

.menu-icon {
	display: none;
	font-size: 3rem;
	color: #fafafa;
	cursor: pointer;
	z-index: 11;
}

.menu-icon .open,
.menu-icon .close {
  display: inline-block;
  font-size: 7vw;
}

.menu-icon .close {
  display: none;
}

.static.group.active,
.static.menu.active a {
	color: #ffffff;
	white-space: nowrap;
	font-size: 2.3rem;
	text-transform: uppercase;
	font-weight: bolder;
	background-color: #209da8;
	transition: .5s;
	padding: 10px;
}

.static.menu.noactive a:hover {
	white-space: nowrap;
	font-size: 1.6rem;
	font-weight: bolder;
	color: #209da8;
	transition: .5s;
}

.static.group.noactive,
.static.menu.noactive a {
	color: #ffffff;
	white-space: nowrap;
	font-size: 1.8rem;
	text-transform: uppercase;
	font-weight: bold;
}

/* ---------- Main ---------- */

.main {
	max-width: 100%;
	padding: 0;
	margin: 0;
	flex: 1;
	display: flex;
}

.repertory {
	margin-top: 4rem;
}

.container {
	margin: 1vw ;
	max-width: 100%;
	padding: 0;
}

.grid1 {
	display: flex;
	justify-self: center;
	margin: 30px 12vw 0 5vw;
}

.wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-width: 100vw;
	max-width: 100vw;
}

/* ------- Pagination ------- */

.pagination {
	margin: 3rem 0 3rem 0;
}

.pagination a {
	background-color: #258fd6;
	border-radius: .3rem;
	color: #fff;
	padding: .9rem .7rem;
	transition-duration: .2s;
}

.pagination a:hover {
	background-color: #3a6c96;
	color: #fff;
	text-decoration: none;
}

.pagination span:first-letter,
.pagination a:first-letter {
	text-transform: uppercase;
}

.p_first,
.p_prev,
.p_current,
.p_next,
.p_last {
	display: inline-block;
}


/* ------- Article ------- */

.handicap {
	font-family: "Montserrat Regular";
	font-size: 2rem;
	margin: 45px 2vw 20px 2vw;
	font-weight: lighter;
	letter-spacing: 0.2px;

}

.col.sml-12 {
	border-right-style: solid;
	border-left-style: solid;
	border-width: 1px;
	border-color: #424242;
	padding-left: 2vw;
	padding-right: 2vw;
}

.article header {
	margin-top: 2rem;
}

h2 {
	color: #2c929b;
	font-size: 2.5rem;
	font-family: "Montserrat Bold";
}

h3 {
	font-family: "Montserrat Regular";
	font-weight: bold;
	
	font-size: 2.2rem;
	color: #108558;
	text-indent: 15px;

}

h4 {
	font-family: "Andika";
	font-weight: bold;
	font-size: 2.3rem;
	font-style: oblique;
}

.article header h2,
.article header h2 a {
	color: darkgoldenrod;
	font-size: 3.2rem;
	line-height: 1.2em;
	letter-spacing: -1px;
	font-weight: bold;
	margin: 0;
	text-align: center;
}

.article header h2 a:hover {
	color: #111;
	text-decoration: none;
}

.article header small,
.comment small {
	color: #9EABB3;
}

.article header span:before,
.article header time:before,
.article span:before {
	padding-left: 1.5rem;
	padding-right: .3rem;
}

.article .art-date {
	font-size: 1.5rem;
	color: #9EABB3;
}

.article .written-by:after {
	content: '|';
	padding-left: 0;
}

.article .classified-in:after {
	content: '|';
	padding-left: 0;
}

.article img.art_thumbnail {
	padding: 30px 15px 15px 0;
	float: left;
}

.page.mode-article .article {
	border-top: 1px solid #dedede;
	border-bottom: 1px solid #dedede;
}

/* ------- Comments ------- */

#form {
	border-top: 130px solid transparent;
	margin: -130px 0 0;
}

.comment {
	background-image: url('../img/user.png');
	background-repeat: no-repeat;
	margin-bottom: 2.5rem;
	padding-left: 6rem;
	border-top: 100px solid transparent;
	margin-top: -100px;
}

.comment blockquote {
	margin: 0;
	font-size: 1.3rem;
}

.type-admin {
	background-color: #F0F8FF;
	padding: .2rem .5rem;
}

.nbcom {
	background-color: #258fd6;
	border-radius: .3rem;
	color: #fff;
	padding: .4rem .6rem;
}

.nbcom:hover {
	background-color: #3a6c96;
	color: #fff;
	text-decoration: none;
}

.level-0 {
	margin-left: 0;
}

.level-1 {
	margin-left: 5rem;
}

.level-2 {
	margin-left: 10rem
}

.level-3 {
	margin-left: 15rem;
}

.level-4 {
	margin-left: 20rem;
}

.level-5,
.level-max {
	margin-left: 25rem;
}



#id_answer {
	margin-bottom: 1.5rem;
	padding: 1.5rem;
	border: 1px solid #eee;
	width: 100%;
	background: #fafafa;
	display: none;
}

.capcha-letter,
.capcha-word {
	font-weight: bold;
}

.capcha-word {
	background-color: #ddd;
	border-radius: .3rem;
	letter-spacing: .5rem;
	padding: .9rem .7rem;
	transition-duration: .2s;
}

.capcha-word:hover {
	background-color: #666;
	color: #fff;
	transition-duration: .2s;
}



/* tags */

.aside ul.tag-list {
	list-style-type: none;
	padding: 0;
}

.aside ul.tag-list li {
	display: inline-block;
}

.aside ul.tag-list li a {
	padding: 0 0.5rem 0 0;
}

.aside ul.tag-list li a.active {
	font-weight: bold;
	background-color: #68838b;
	color: #fff;
	padding: 0 0.5rem 0 0.5rem;
}

.sidebar1 {
	display: flex;
	justify-content: center;
	padding: 1vw;
}


/* ---------- Footer ---------- */

.footer {
	width: 100%;
	background:#D19566;
	color: #2e2e2e;
	padding: 0.8vh;
	font-size: 1rem;
	height: 100px;
	text-align: center;
	line-height: 20px;
}

.social {
	font-size: 3rem;
	display: none;
}

.page-up {
	font-size: 3rem;
}

.contact {
	font-family: "Montserrat Bold";
	font-size: 1.6rem;
	
}

.footer>p {
	font-size: 1.3rem;
	margin-top: 5px;
}

.footer a,footer p {
	color: #fafafa;
}

.footer a:hover {
	color: #209da8;
	text-decoration: none;
	transition: .5;
}






/* Responsive */

@media (max-width: 1024px) {
	
	.static.group.noactive, 
	.static.menu.noactive a {
		font-size: 1.5vw;
	}

	.static.group.active,
	.static.menu.active a {
		font-size: 2.1vw;
	}

	.static.menu.noactive a:hover {
	white-space: nowrap;
	font-size: 1.9vw;
	font-weight: bolder;
	color: #209da8;
	transition: .5s;
	}
}



@media (max-width: 768px) {

	.main {
		display: block;
	}

	.hero {
		position:unset;
		width: auto;
		display: grid;
		grid-template-areas:
		"portrait intro"
		"portrait acc"
		"social social";
		grid-template-columns: 30vw 1fr;
		column-gap: 2vw;
		margin-bottom: 4vw;
		margin-left: 30px;
		margin-right: 30px;
		border-radius: 15px 15px 15px 15px;
		
	}
	
	#social1 {
		grid-area: social;
		margin-top: 3vw;
		margin: 3vw 0 3vw
	}

	#social1>a {
		font-size: 7vw;
		margin-left: 2vw;
	}

	.accroche {
		grid-area: acc;
		display: flex;
		text-wrap: wrap;
	}

	.accroche>p {
		font-size: 3vw;
		margin: 0;
		line-height: normal;

	}

	.portrait>img {
		display: flex;
		width: 30vw;
		float: left;	
	}

	.intro {
		grid-area: intro;
		margin-top: 25px;
		margin-bottom: 15px;
		justify-self: center;
		align-self: center;
	}

	.name {
		font-size: 5.5vw;
		display: flex;
	}

	.portrait {
		float: left;
		grid-area: portrait;
		align-items: center;
		justify-content: center;
		margin: 2vw 0 2vw
	}

	.header h1 a {
		font-size: 25px;
		font-weight: bold;
	}
	.no-margin    {
		font-size: 10px;
	}
	.aside {
		padding-left: 1.5rem;
	}
	
	.menu-icon {
		display: block;
	}

	.grid1 {
		margin: 3px 6vw 0 2vw;
	}

	.static.group.noactive, 
	.static.menu.noactive a {
		font-size: 1.7rem;
	}

	.static.group.active,
	.static.menu.active a {
		font-size: 2.1rem;
	}

	.static.menu.noactive a:hover {
	white-space: nowrap;
	font-size: 1.8vw;
	font-weight: bolder;
	color: #209da8;
	transition: .5s;
	}

	.search-box {
		display: none;
	}

	/* Affichage du menu quand coché */
	.menu-toggle:checked ~ .liste {
		display: flex;
		justify-content: center;
		align-items: center;
	}


	/* Changement d'icône burger vers croix */
	.menu-toggle:checked + .menu-icon .open {
		display: none;
	}

	.menu-toggle:checked + .menu-icon .close {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	

	.nav {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	
	li.menu {
		background: #d19466;
	}
	li.menu:hover {
		border: none;
	}
	
	.responsive-menu label{
		display: flex;
	}
	
	.responsive-menu label {
		background-color: #dddddd00;
		color: #ffffff;
		font-size: 3.5rem;
		margin: .75rem;
		text-align: center;
		align-items: center;
	}
	.responsive-menu label:before {
		content: '\2630';
	}

	.liste {
		display: none;
		flex-direction: column;
		top: 80%;
		left: 0;
		right: 0;
		background-color: #d19466;
		z-index: 10;
		width: 100vw;
		position: relative;
	}

	.liste li {
		justify-content: center;
	}

	.responsive-menu {
		background-color: #d19466;
	}

	.responsive-menu input[type=checkbox]:checked+ul {
		display: flex;
	}


	.h5 {
		font-size: 2vw;
	}
}


@media (max-width: 768px) {
	.comment {
		background-image: none;
		padding-left: 0;
	}
	.level-1 {
		margin-left: 1rem;
	}
	.level-2 {
		margin-left: 2rem;
	}
	.level-3 {
		margin-left: 3rem;
	}
	.level-4 {
		margin-left: 4rem;
	}
	.level-5,
	.level-max {
		margin-left: 5rem;
	}
}
/* https://www.w3schools.com/colors/colors_trends.asp (The 10 Hottest Fall Colors for 2016) */

.tag-size-1 a {
	font-size: 1.0rem;
	/* Riverside  */
	color: #4C6A92;
}

.tag-size-2 a {
	font-size: 1.2rem;
	/* Airy Blue  */
	color: #92B6D5;
}

.tag-size-3 a {
	font-size: 1.4rem;
	/* Sharkskin  */
	color: #838487;
}

.tag-size-4 a {
	font-size: 1.6rem;
	/* Bodacious */
	color: #B76BA3;
}

.tag-size-5 a {
	color: #AF9483;
	/* Warm Taupe */
	font-size: 1.8rem;
}

.tag-size-6 a {
	color: #AD5D5D;
	/* Dusty Cedar */
	font-size: 2.0rem;
}

.tag-size-7 a {
	font-size: 2.2rem;
	/* Lush Meadow */
	color: #006E51;
}

.tag-size-8 a {
	font-size: 2.4rem;
	/* Spicy Mustard */
	color: #D8AE47;
}

.tag-size-9 a {
	font-size: 2.6rem;
	/* Potter's Clay */
	color: #9E4624;
}

.tag-size-10 a {
	font-size: 2.8rem;
	/* Aurora Red */
	color: #B93A32;
}

.tag-size-11 a {
	font-size: 3.0rem;
	/* Snorkel Blue */
	color: #034F84;
}