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(//www.recuperateur-eau.eu/wp-content/themes/themeimage/font/entypo.eot);
src: url(//www.recuperateur-eau.eu/wp-content/themes/themeimage/font/entypo.eot?#iefix) format("embedded-opentype"), url(//www.recuperateur-eau.eu/wp-content/themes/themeimage/font/entypo.woff) format("woff"), url(//www.recuperateur-eau.eu/wp-content/themes/themeimage/font/entypo.ttf) format("truetype"), url(//www.recuperateur-eau.eu/wp-content/themes/themeimage/font/entypo.svg#entypo) format("svg");
font-weight: normal;
font-style: normal;
}
.logo {
color: #455082;
display: block;
float: left;
font-family: "Leckerli One",cursive;
font-size: 32px;
margin-bottom: 17px;
position: relative;
}
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: #F4F4F9;
}
p,
ul,
ol,
blockquote {
margin-bottom: 0.5em;
}
a {
color: #455082;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-bottom: 18px;
color: #455082;
font-family: "Lato", sans-serif;
text-align: left;
}
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 #455082;
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: #455082;
}
.wp-pagenavi span {
color: #FFF;
background: #455082;
}
.wp-pagenavi span.extend {
color: #FFF;
background: #455082;
}
.wp-pagenavi span.current {
font-weight: normal !important;
color: #FFF;
background: #455082;
}
#top {
background-color: #455082;
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;
}
#sidebar {
float: right;
width: 305px;
margin-right: 10px;
}
#sidebar .widget + .widget {
margin-top: 20px;
}
#sidebar .widget .titre-widget {
margin-bottom: 5px;
padding-left: 5px;
border-top: 1px solid #455082;
border-bottom: 1px solid #455082;
font-weight: 700;
font-size: 16px;
color: #455082;
line-height: 25px;
background: url(//www.recuperateur-eau.eu/wp-content/themes/themeimage/img/bg-titre-widget.png) no-repeat 10px center;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar ul li {
padding: 5px 0;
border-bottom: 1px dashed #212121;
}
#sidebar ul a {
font-size: 13px;
color: #d45b4d;
text-decoration: none;
}
#sidebar ul a:hover {
color: #455082;
}
div.article {
padding-bottom: 20px;
background: url(//www.recuperateur-eau.eu/wp-content/themes/themeimage/img/divider-article.png) no-repeat center bottom;
}
div.article:hover .titre a {
color: #455082;
}
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: #455082;
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: #455082;
}
div.article-small .titre a:hover {
color: #455082;
}
div.photo {
position: relative;
width: 115px;
float: left;
}
div.photo.small {
width: 100px;
}
div.photo.small .titre {
height: 100px;
}
div.photo + .photo {
margin-left: 13.5px;
}
div.photo + .photo.small {
margin-left: 2px;
}
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);
}
div.photo:hover .titre {
visibility: visible;
background-color: #455082;
}
div.photo .thumbnail {
position: relative;
overflow: hidden;
display: block;
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}
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: 115px;
line-height: 115px;
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;
}
div.photo .titre .middle {
display: inline-block;
vertical-align: middle;
line-height: 1;
}
#footer {
background-color: #455082;
color: #455082;
height: 1px;
margin-bottom: 18px;
margin-left: auto;
margin-right: auto;
width: 1017px;
} @media all and (max-width: 1024px) {
body { width: 100%; overflow-x: hidden }
h1 {text-align: center;}
.wrap, #container { width: 100% }
#content { width: 59%; padding-right: 1% }
#sidebar { width: 36%; margin: 0 }
#sidebar .photo {
width: 30%;
height: auto;
max-width: 100px;
margin: 1% !important;
}
#content .photo {
width: 18%;
height: auto;
max-width: 115px;
min-width: 90px;
margin: 1% !important;
}
div.photo .titre { height: auto }
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}
.widget:after {
content: '';
display: block;
clear: both
}
#footer { width: 100% }
}
@media all and (max-width: 768px) {
#container { margin-bottom: 80px }
#content .row .row:nth-last-child(-n+3) {
display: none !important;
}
#content .row .row:nth-last-child(-n+4):after {
content: '';
display: block;
clear: both
}
#content {	
float: none;
position: relative;
top: 80px;
margin: 0 auto !important;
width: 82%;
}
#sidebar {
width: 100%;
float: none;
position: absolute;
top: 0;
margin-bottom: 150px;
}
.logo {
text-align: center;
float: none !important;
margin: 20px auto 0
}
#sidebar .widget {
display: none !important;
}	
#sidebar .row,
#sidebar .titre-widget {
display: none
}
}
@media all and (max-width: 660px) {
#content {	
width: 98%;
left: -2px;
}
}
@media all and (max-width: 526px) {
#content .photo {
width: 23%;
margin: 1% !important;
}
}
@media all and (max-width: 412px) {
#content .photo {
width: 30%;
margin: 1.5% !important;
}
}