/*
Theme Name: Thème Donia 2 190x190
Description: le theme 190x190 par Donia
Version: 1.0
Color to change: D43399
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}

html {
line-height: 1;
}

@font-face {
font-family: 'entypo';
src: url("font/entypo.eot");
src: url("font/entypo.eot?#iefix") format("embedded-opentype"), url("font/entypo.woff") format("woff"), url("font/entypo.ttf") format("truetype"), url("font/entypo.svg#entypo") format("svg");
font-weight: normal;
font-style: normal;
}

.logo {
color: #fff;
display: block;
font-family: "Leckerli One",cursive;
font-size: 3vw;
margin-left: 3px;
}

ol, ul {
list-style: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}

q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}

a img {
border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block;
}

html {
height: 100%;
min-height: 100%;
}

body {
height: 100%;
min-height: 100%;
font-family: "Lato", sans-serif;
font-size: 14px;
color: #434343;
line-height: 1.5em;
background-color: #f3f3f3 !important;
}

p,
ul,
ol,
blockquote {
margin-bottom: 0.5em;
}

p.sp {
    float: inherit;
}

a {
color: #111111;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
margin-bottom: 18px;
color: #111111;
font-family: "Lato", sans-serif;
text-align: left;
}

h2, .h2 {
    font-size: 30px;
    clear: both;
    padding-top: 20px;
}

h1 {
font-size: 1.8em;
}

h2 {
font-size: 1.325em;
}

h3 {
font-size: 1.25em;
}

h4 {
font-size: 1.125em;
}

h5,
h6 {
font-size: 1em;
}

ul,
ol {
margin-left: 20px;
}

ul {
list-style: disc inside;
overflow: hidden;
}

ul ul,
ol ul {
list-style: disc inside;
margin-bottom: 0;
}

ol {
list-style: decimal inside;
overflow: hidden;
}

ol ol,
ul ol {
list-style: decimal inside;
margin-bottom: 0;
}

ul.ab-top-menu {
overflow: visible;
}

strong {
font-weight: 700;
}

em {
font-style: italic;
}

blockquote {
margin: 0 60px 0 45px;
border-left: 5px solid #111111;
padding-left: 15px;
font-style: italic;
overflow: hidden;
margin-bottom: 1.5em;
}

blockquote p {
margin-bottom: 0;
}

blockquote em {
display: block;
font-style: normal;
text-align: right;
}

blockquote em:before {
content: ' -';
}

img.alignleft {
float: left;
margin: 0 10px 0 0;
}

img.alignright {
float: right;
margin: 0 0 0 10px;
}

img.aligncenter {
display: block;
margin: 0 auto;
}

.clear, .row {
clear: both;
}

.clear:before, .clear:after, .row:before, .row:after {
content: "";
display: table;
}

.clear:after, .row:after {
clear: both;
}

.clear, .row {
*zoom: 1;
}

.row + .row {
margin-top: 20px;
}
.row + .row.small {
margin-top: 2px;
}

.center {
text-align: center;
}

.left {
float: left;
}

.right {
float: right;
}

.relative {
position: relative;
}

.titre-main {
font-weight: 700;
font-size: 25px;
line-height: 25px;
}

.full-img img {
min-width: 100%;
max-width: 100%;
height: auto;
}

#page {
z-index: 100;
position: relative;
}

.wrap {
width: 1015px;
margin: 0 auto;
}

.wp-pagenavi {
text-align: center;
margin: 20px 0;
}
.wp-pagenavi .page, .wp-pagenavi span, .wp-pagenavi a.nextpostslink, .wp-pagenavi a.previouspostslink {
padding: 0 10px !important;
border: none !important;
font-size: 24px;
}
.wp-pagenavi a {
color: #FFF;
background: #323232;
}
.wp-pagenavi a:hover {
color: #FFF;
background: #111111;
}
.wp-pagenavi span {
color: #FFF;
background: #111111;
}
.wp-pagenavi span.extend {
color: #FFF;
background: #111111;
}
.wp-pagenavi span.current {
font-weight: normal !important;
color: #FFF;
background: #111111;
}

#top {
background-color: #111111;
height: 6px;

}

#container {
padding: 5px;
background: #FFF;
}

#content {
margin-left: 30px;
float: left;
width: 630px;
text-align: justify;
}

#single-article .thumbnail {
float: left;
width: 295px;
}

#single-article .thumbnail img {
border: 1px solid #d5d5d5;
}
#single-article #info {
margin-bottom: 20px;
}
#single-article #info.right {
margin-bottom: 0;
width: 340px;
}

div.article {
padding-bottom: 20px;
background: url(img/divider-article.png) no-repeat center bottom;
}
div.article:hover .titre a {
color: #111111;
}
div.article + .article {
margin-top: 20px;
}
div.article .right {
width: 365px;
}
div.article .titre {
margin-bottom: 5px;
font-size: 15px;
line-height: 15px;
font-weight: 700;
}
div.article .titre a {
color: #111111;
text-decoration: none;
}
div.article .thumbnail {
float: left;
display: block;
width: 250px;
}
div.article .thumbnail img {
display: block;
}
div.article p {
margin-bottom: 0;
}

div.article-small {
width: 205px;
float: left;
}
div.article-small + .article-small {
margin-left: 7px;
}
div.article-small .thumbnail {
display: block;
}
div.article-small .thumbnail img {
display: block;
}
div.article-small .titre {
text-align: center;
font-size: 13px;
padding: 0 10px;
}
div.article-small .titre a {
display: block;
text-decoration: none;
color: #111111;
}

div.article-small .titre a:hover {
color: #111111;
}

div.photo {
    position: relative;
    width: 190px;
    float: left;
}

.main-content div.photo {
    position: relative;
    width: 190px;
    height: 215px;
    float: left;
    margin-left: 13.5px;
}

div.photo.small {
width: 28%;
}
div.photo.small .titre {
height: 100px;
}

aside div.photo {
margin-left: 10px;
}

#content div.photo {
    margin-right: 10px;
    min-height: 212px;

}

div.photo:hover img {
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
border-color: #f3f3f3;
}

div.photo:hover .titre {
visibility: visible;
background-color: #111111;
border-color: #f3f3f3;
}

aside div.photo:hover .titre {
background-color: #fff;
border-color: #f3f3f3;
}

div.photo .thumbnail {
position: relative;
overflow: hidden;
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
    background-color: #f3f3f3;
}

div.photo a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active {
   border-color: #111111;
}

div.photo .thumbnail img {
display: block;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}

div.photo .titre {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
padding: 0 5px;
height: 190px;
line-height: 190px;
color: #FFF;
font-size: 14px;
text-align: center;
visibility: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
text-shadow: 0 0 3px rgba(34, 34, 34, 0.75);
z-index: 5;
}

aside div.photo .titre {
line-height: 75px;
font-size: 12px;
}


div.photo .titre .middle {
display: inline-block;
vertical-align: middle;
line-height: 1;
}

/** new css DONIA **/

.page-wrapper {
  height: 100%;
}

.main-content {
  padding: 40px;
}

.sidebarleft { 
    width: 25%;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 20px;    
    position: fixed;
    overflow-y: scroll;
    top: 150px;
    bottom: 0;
    /*right: 0;*/ /*enlever left:0 et activer right:0 pour passer la barre à droite*/
    left: 0;
}

.title-fix-sidebar {
    width: 25%;
    padding-top: 20px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 20px;
    background-color: #D43399;
    position: fixed;
    top: 0;
    bottom: 0;
    /* right: 0; */
    left: 0;
}

.footer {
    clear: both;
    margin-top: 70px;
    padding-top: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
    padding-left: 30%;    
    background-color: #fff;
}

.gisocial-social-widget {
    position: fixed;
    width: 50px;
    z-index: 99999;
    top: 102px;
    margin-left: 631px;
}

#next{
    float: right;
    padding-top: 10px;
}
#previous{
    float: left;
    padding-top: 10px;
}

/* Responsive */

@media all and (max-width: 1024px) {
        .logo { font-size: 3.2vw; }
	body { width: 100%; overflow-x: hidden }
	
	h1 {text-align: center;}

	.main-content { width: 100% }

	.main-content { width: 59%; padding-right: 1% }
	
	aside { width: 36%; margin: 0 }
	
	.main-content div.photo {
		width: 30%;
		height: auto;
		max-width: 90px;
		min-width: 90px;
		margin: 1% !important;
	}
	div.photo .small{ width:42%; } 	
	div.photo .titre { height: auto; line-height: 80px;}
	div.photo .thumbnail img { max-width: 100%; height: auto }
	
	.row { clear: none }
	.row:before, .row:after { display: none }
	
	div.photo + .photo { margin: 0 }
	.photo { margin: 5px !important}
	
	#content div.photo {min-height:96px;}
	
	.widget:after {
		content: '';
		display: block;
		clear: both
	}
	
	.footer { width: 100% }
	
	.sidebarleft {
   	 top: 110px;
	}

	#content { width: 500px; }
	.gisocial-social-widget { margin-left: 502px; top: 102px;}
	#next {
	    float: left;
	}
}

@media all and (max-width: 910px) {
        .logo { font-size: 3vw; }
	div.photo.small{ width:43%; } 	
	.sidebarleft {
   	 top: 80px;
	}
}


@media all and (max-width: 768px) {
        .logo {margin: auto; }
	.sidebarleft { overflow-y: hidden;}
	.title-fix-sidebar {
   	 width: 100%;
   	 height: 140px; 
   	 padding-top: 10px;
  	  padding-right: 0px;
 	   padding-bottom: 0px;
  	  padding-left: 0px;
 	   background-color: #111111;
 	   position: fixed;
  	  top: 0;
 	   bottom: none;
  	  z-index: 2;
  	  left: 0;
	}	
	.main-content .row .row:nth-last-child(-n+3) {
		display: none !important;
	}
	
	.main-content .row .row:nth-last-child(-n+4):after {
		content: '';
		display: block;
		clear: both
	}
	
	.main-content {	
		float: none;
		position: relative;
		margin: 60px auto !important;
		width: 82%;
	}
	
	aside {
		width: 100%;
		float: none;
		position: absolute;
		top: 0;
		margin-bottom: 60px;
	}
	
		.logo {
			text-align: center;
			float: none !important;
			margin: auto;
		}
		
	aside .widget {
		display: none !important;
	}	
	
	aside .row,
	aside .titre-widget {
		display: none
	}

	div.photo.small{ width:90%; } 	
	
	#content { width: 85%; margin-top: 80px;}
	.gisocial-social-widget { margin-left: 82%; top: 177px;}

}

@media all and (max-width: 660px) {
	.main-content {	
		width: 98%;
		margin: 60px auto !important;
	}

	#content { width: 84%; }
	.gisocial-social-widget { margin-left: 81%; top: 177px;}
}

@media all and (max-width: 526px) {
	div.photo {
		width: 23%;
		margin: 1% !important;
   		min-height: 110px;
	}

	#content { width: 82%; }
	.gisocial-social-widget { margin-left: 78%; top: 177px;}
}

@media all and (max-width: 412px) {
	.main-content {
            margin: 110px auto !important;
	}
	div.photo {
		width: 30%;
		margin: 1.5% !important;
   		min-height: 100px;
	}
	aside {
    	margin-bottom: 0px;
	}
	#content { width: 80%; margin-top: 120px;}
	.gisocial-social-widget { margin-left: 75%; top: 137px;}

	div.photo .titre { height: auto; font-size:10px;}
}

@media all and (max-width: 380px) {

	div.photo {
		width: 30%;
		margin: 1.5% !important;
		min-height: 100px;
	}
	aside {
    	margin-bottom: 0px;
	}
	#content { width: 77%; margin-top: 120px;}
	.gisocial-social-widget { margin-left: 72%; top: 175px;}
}