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

@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: 'Roboto';
	src: url('../fonts/Roboto-Regular.ttf');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Roboto_Condensed';
	src: url('../fonts/RobotoCondensed-Regular.ttf');
	font-weight: normal;
	font-style: normal;
}

* {box-sizing:border-box; }

html, body {width:100%; margin: 0px; padding: 0px;}

body {
	font-family: 'open_sansregular', sans-serif;
	font-size: 1.7em;
	color: var(--main-color);
	text-align:justify;
}

ul {
	padding-left:0;
}
/* ---------- Header ---------- */

@media (min-width: 64rem) {
	.container {
		padding-left: 15rem;
		padding-right: 15rem;
	}
}

.header {
	background-color: var(--third-color);
	-webkit-box-shadow: 0 2px 3px rgba(0,0,0,.3);
	-moz-box-shadow: 0 2px 3px rgba(0,0,0,.3);
	box-shadow: 0 2px 3px rgba(0,0,0,.3);
	height: 5.8rem;
	z-index: 2;
}

.header a {
	color: #222;
}

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

.logo {
	height: 5.8rem;
}
#logo {padding-top:8px;}

.bg_home {
	background-color:var(--second-color);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 300px;
}

.bg {
	background: url(../img/bg.jpg) no-repeat top left;
	background-color:var(--second-color);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 200px;
}

.header_post {
	width:100%;
	height: 300px;
	overflow:hidden;
	position:relative;
}

.header_post img{
	width:100%;
	height:auto;
	position: absolute;
	top: 0;
	left: 0;
}

.header_post h2{
	position: absolute;
	color: var(--second-color);
	font-size: 5rem;
	bottom: 6rem;
	font-family:'Roboto_Condensed';
	letter-spacing: 1.25px;
	text-transform: uppercase;
       text-shadow:2px 3px 2px black;
}

.lastart-list_home {display: inline-flex;}
.last-article .container {padding:1rem 15rem;}
.last-article h1 {font-size:5rem;}
.last-article a {color:#333; }

.recent_art { margin-bottom:40px;
	display:inline-flex;
	justify-content: space-between;
}
.recent_art>li {
	-webkit-box-shadow:0 0 5px rgba(0,0,0,.3);
	-moz-box-shadow:0 0 5px rgba(0,0,0,.3);
	box-shadow:0 0 5px rgba(0,0,0,.3);
	-webkit-border-radius:var(--border-radius);
	-moz-border-radius:var(--border-radius);
	border-radius:var(--border-radius);
	background:#fff;
	width:32%;
}
.recent_art li section:first-child { overflow:hidden; height:200px; min-height:200px; width:auto;}
.recent_art li section:first-child img { height: 200px;
min-height: 200px;
width: auto;
min-width: 100%;}
.recent_art li section:last-child { padding: 0 1.5rem 35px 1.5rem; 
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

 }
.recent_art li section:last-child h3 { text-align:left;
}
.recent_art li section:last-child p { margin-bottom:35px;
word-wrap: break-word;
  overflow-wrap: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
}
@media (max-width: 768px) {
        .recent_art li section:first-child {height: 300px;}
        .recent_art li section:first-child img { height: auto;}
}
/*.more { margin:40px 0;}*/

.btn {
	background-color:var(--second-color);
	padding:15px;
	color:#000;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	border-radius:8px;
	margin:15px 0;
}

.btn:hover, .art_visible article:nth-child(2n+1) .btn:hover {
	background-color:var(--button-background);
	color:#fff;
}
main .container .grid { padding-top:2rem;}
@media (max-width: 463px) {
	.bg {
		height: 100px;
	}
}

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

.nav {
	text-align: right;
	height:5.8rem;
}

.nav > div, .menu, .menu>li.menu a {
	height:100%;
	display:block;
}
.menu>li.menu a {
	padding: 15px 10px;
}

.menu>li.menu:hover {
	background-color:var(--second-color);
}

.menu>li ul {
	display: none;
	position: absolute;
	padding: 0;
	line-height: 2.8rem;
	z-index: 10;
}

.menu>li:hover ul {
	display: block;
}

.menu ul li {
	display: block;
	margin: 0;
	padding: 0 1rem;
	background-color: #fff;
	text-align: left;
}

.menu span::before {
	content: '\25bc';
}

@media (max-width: 767px) {
	.nav {
		height: auto;
		max-height: 400px;
		overflow-y: auto;
		text-align: left;
		margin-top: 0;
		z-index: 10;
	}
	.nav>.container {
		padding: 0;
	}
	li.menu {
		padding: 5px 5px 2px 5px;
		background: #efefef;
	}
	li.menu:hover {
		border: none;
	}
	.responsive-menu label {
		background-color: transparent;
		color: #333;
		font-size: 3.5rem;
		margin: .75rem;
		text-align: right;
	}
	.responsive-menu label:before {
		content: '\2630';
	}
	.menu>li ul {
		position: relative !important;
	}
	.menu>li ul li:hover {
		background-color: #fff;
	}
	.menu>li ul li:hover a {
		text-decoration: underline;
	}
	.responsive-menu ul li.active a,
	.responsive-menu ul li.active:hover {
		background-color: #fff;
		color: #000;
	}
}

li.active, .menu>li.active:hover {
	background-color:#fff;
}

.static.group.active,
.static.menu.active a {
	white-space: nowrap;
}

.static.group.noactive,
.static.menu.noactive a {
	white-space: nowrap;
}

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

.main, .main_home {
	padding-top: 0rem;
	background-color: #fff;
}

.main_home {
	background-color: #f2f2f2;
}

.main_rea {
	padding-top:0;
}
.main_rea .article .container {
	max-width: 1900px;
}
.repertory {
	margin-top: 4rem;
}


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

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

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

.pagination a:hover {
	background-color: #219BBA;
	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;
}

/* ------- Title ------- */
.bg h2, .title_h1  {
	font-family:'Roboto', 'serif';
	font-size:25px;
	font-weight:bold;
	text-align:center;
	color:var(--second-color);
	text-transform:uppercase;
       text-shadow:2px 3px 2px black;
}

.title_h1  {
	text-align:left;
	margin:0;
	line-height:8em;
}

.title_article{
	font-family:'Roboto_Condensed', 'serif';
	font-size:24px;
	text-transform:capitalize;
}

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

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

.article header div {
	margin: 0;
}

.article header h2,
.article header h2 a {
	color: var(--second-color);
	font-size: 2.4rem;
	font-weight:bold;
	line-height: 1.2em;
	letter-spacing: 1.25px;
	margin: 0;
	font-family:'Roboto_Condensed';
}

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

.article h3{
	color: var(--second-color);
	font-size: 2.4rem;
	letter-spacing: 1.25px;
	font-weight:bold;
	font-family:'Roboto_Condensed';
}

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

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

.article .art-date, .article .art_cat {
	width:50%;
	float:left;
	margin-bottom:15px;
}
.article .art-date, .article .art_cat small {
	font-size: 1.6rem;
	color: var(--second-color);
	font-family:'Roboto_Condensed';
}

.article .art_cat {
	text-align:right;
}

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

.two_art {
	margin:30px 0;
	-webkit-display:flex;
	-moz-display:flex;
	display:flex;
	justify-content: space-between;
	height:300px;
}

.two_art .article {
	height:100%;
	width:48%;
	-webkit-box-shadow:0 0 5px #000;
	-moz-box-shadow:0 0 5px #000;
	box-shadow:0 0 5px #444;
	-webkit-border-radius:var(--border-radius);
	-moz-border-radius:var(--border-radius);
	border-radius:var(--border-radius);
}

.two_art .article section {
	display: inline-block;
	vertical-align: top;
	width: 51%;
	padding:1.2rem 0.9rem;
        height: 100%;
        position: relative;
}

.two_art .article section:first-child {
	overflow:hidden;
	height:300px;
	width:48%;
	padding:0;
}


.two_art .article h2 {
	margin:0rem 0 1.5rem 0;
}

.two_art .article p {
	font-size:1.5rem;
}

.two_art article p:last-child a {
position: absolute;
bottom: 0;
}
.two_art .article img.art_thumbnail {
	padding:0;
	height: 100%;
	max-width: none;
}

@media (max-width: 768px) {
	.two_art {
		display:block;
		min-height:290px;
		height:100%;
	}
	.two_art article {
		width:100% !important;
		margin-bottom:20px;
	}
	.two_art .article section {
    height:320px !important;
	}


	.recent_art { margin-bottom:40px;
		display:block;
	}
	.recent_art>li {
		width:100%;
		margin-bottom:20px;
	}
	.info .container .med-7 {margin-bottom: 20px;}

}

@media (max-width: 463px) {

	.two_art .article section {
    width: 61%;
	}
	.two_art .article section:first-child {
    width: 38%;
	}
}

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

.artPrevNext {
	line-height:40px;
	height:40px;
	margin-top: 20px;
	text-align:center;
}

.artPrevNext > div {
	display:inline-block;
	padding-left:1.5rem;
}

.art_visible article {padding:1.5rem;}
.art_visible article:nth-child(2n+1){
	background:var(--second-color);
	color:#fff;
	-webkit-border-radius:var(--border-radius);
	-moz-border-radius:var(--border-radius);
	border-radius:var(--border-radius);
}
.art_visible article:nth-child(2n+1) h2 a, .art_visible article:nth-child(2n+1) .art-date, .art_visible article:nth-child(2n+1) .art_cat *{
	color:#fff;
}
.art_visible article:nth-child(2n+1) .btn {
	background:#fff;
	color:var(--second-color);
}

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

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

.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;
}

@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;
	}
}

#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;
}


/* ------- Page ---------- */
.title_h2, .static header h2,
.static header h2 a {
	color: var(--second-color);
	font-size: 2.6rem;
	font-weight:normal;
	text-transform:uppercase;
	text-align:center;
}

/* ------- Sidebar ------- */

.aside {
	padding: 0 2rem 0 2rem;
	margin-bottom:40px;
}

.aside h3 {
	font-size: 2.4rem;
	font-family:'Roboto_Condensed';
	font-weight: bold;
	margin-top: 3rem;
	color:var(--second-color);
}

.aside h3:first-child {
	margin-top: 2rem;
}

.aside ul {
	margin: 0;
}

.aside a {
	color:var(--main-color);
}

@media (max-width: 768px) {
	.aside {
		padding-left: 1.5rem;
		margin-bottom: 4rem;
	}
}

/* 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;
}

/* 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;
}

/* ---------- Home ---------------- */
.information, .info {
	margin-left: 0;
	margin-right: 0;
	padding: 3rem 0;
}
.information .info:nth-child(2n+1) {background:#fff;}
.information {padding-bottom:0;}
.information p {
	margin-top: 0;
	margin-bottom:4rem;
}

/* ---------- Blog --------------- */

/* ---------- References ----------*/
#ref {
	background:#ececec;
	padding:60px 0;
}
.reference {
    height: auto !important;
}
.reference img {
    width: 100% !important;
height: auto !important;
max-width: unset !important;
}

/* ---------- Réalisation ----------- */
.bg h2 {
	line-height: 3em;
	letter-spacing: 1.25px;
	margin: 0;
	text-transform:uppercase;
	text-align:left;
	text-shadow:2px 3px 2px black;
}

nav.tri {
	background:var(--third-color);
	height:5.8rem;
}

nav.tri ul { margin:0;}
nav.tri ul li{
	display:inline-block;
	list-style:none;
	line-height: 3rem;
	cursor: pointer;
	margin-top: 1rem;
	padding: 3px 15px 5px 15px;
	border-radius: 20px;
}

nav.tri ul li:hover {
	background-color:var(--second-color);
}

/* ---------- Form ------------ */
#form_contact {
    margin: 20px 0 0 0 !important;
}

#background_form {
	background: #e6f5fb url("../img/motifs_contact.png") repeat;
	padding:50px 0;
}

form {
	width: 30%;
	display: block;
	margin: 0 auto;
	background: var(--third-color);
	-webkit-box-shadow:0 0 10px rgb(46,174,229);
	-moz-box-shadow:0 0 10px rgb(46,174,229);
	box-shadow:0 0 10px rgb(46,174,229);
}

form fieldset {
	padding:0 3rem;
}

form input {
	height: 4.8rem;
}
form label {
	font-size:2.3rem;
}

form input[type="submit"] {
    background-color: var(--second-color);
}

/* ---------- Contact ---------- */
.contact {
	margin:0;
}
.contact .content { padding:0;}
.text_contact {
	margin: 0 auto;
	max-width: 1280px;
	width: 100%;
	padding: 1.5rem 15rem;
}
/* ---------- Footer ---------- */

.footer {
	background: #1a1a1a;
	color: #fff;
	padding: 6rem 0;
	font-size: 1.5rem;
}

.footer a[title="Administration"] { color:#000;}
.footer p {
	margin: 0;
}

.footer .network {
	text-align:right;
}

.footer #social {
	width:100%;
}

.footer #social > * {
	display:inline-block;
	vertical-align:middle;
}


@media (max-width: 768px) {
	#logo {
		max-width: unset;
	}
	.footer .network {
		text-align:left;
		margin-top:2rem;
	}
	form {
	 width: 90%;
 }
 .text_contact {
    padding: 3rem;
}
}

.contentBox {
    position: absolute !important;
  }