@font-face {
font-family: 'Bariol';
src: url(//www.studio-lapinternet.fr/wp-content/themes/lapinternet/css/font/bariol/bariol-webfont.eot);
src: url(//www.studio-lapinternet.fr/wp-content/themes/lapinternet/css/font/bariol/bariol-webfont.eot?#iefix) format('embedded-opentype'),
url(//www.studio-lapinternet.fr/wp-content/themes/lapinternet/css/font/bariol/bariol-webfont.woff2) format('woff2'),
url(//www.studio-lapinternet.fr/wp-content/themes/lapinternet/css/font/bariol/bariol-webfont.woff) format('woff'),
url(//www.studio-lapinternet.fr/wp-content/themes/lapinternet/css/font/bariol/bariol-webfont.ttf) format('truetype'),
url(//www.studio-lapinternet.fr/wp-content/themes/lapinternet/css/font/bariol/bariol-webfont.svg#Bariol) format('svg');
font-weight: 300;
font-style: normal;
} html {
font-size: 100%;
}
body {
margin: 0;
padding: 0;
font-family: 'Lato', Sans-Serif;
font-weight: 300;
font-size: 18px;
color: #323232;
background: #efefef;
}
.container {
padding: 0 15px 0 15px;
}
.page-container {
width: 1200px;
margin: 0 auto;
padding: 0;
}
.clear {
clear: both;
}
.gras {
font-weight: 400;
}
.gauche {
float: left;
padding : 15px 15px 15px 0;
}
.droite {
float: left;
padding : 15px 0 15px 15px;
}
.jaune {
color: #dee000 ;
}
a {
text-decoration: none;
} #header {
background-color: #323232;
min-height: 100px;
position:fixed;
width: 100%;
z-index:1000;
}
.header-page {
width: 1170px;
margin: 0 auto;
padding: 0 15px 0 15px;
}
#header #logo, #header #logo-mobile {
float:left;
}
#header #logo-mobile {
display: none;
}
#header #logo img {
margin: 25px 0 21px 0;
padding: 0;
}
#header #logo-mobile img {
margin: 30px 0 25px 0;
}
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.pace-inactive {
display: none;
}
.pace .pace-progress {
background: #d93c35;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 2px;
}
.web .pace-inactive {
display: block;
}
.web .pace .pace-progress {
background: #2f8bfb;
height: 1px;
}
.geek .pace-inactive {
display: block;
}
.geek .pace .pace-progress {
background: #d93c35;
height: 1px;
}
.quotidien .pace-inactive {
display: block;
}
.quotidien .pace .pace-progress {
background: #dee000;
height: 1px;
} #menu {
position:relative;
font-size: 17px;
font-family: 'Montserrat', sans-serif;
padding: 43px 0 0 0;
float: right;
}
#menu ul {
padding: 0;
margin: 0;
list-style-type: none;
float: left;
}
#menu ul li {
margin: 0;
padding: 0;
float: left;
position: relative;
}
#menu ul li + li {
padding: 0 0 0 30px;
}
#menu ul li a {
color: #ffffff;
text-decoration: none;
display: block ;
text-transform: uppercase;
}
#menu ul li a:hover, #menu ul li.current-menu-item a, #menu ul li a.active {
color: #dee000;
}
.archive #menu ul li.blog a, .blog #menu ul li.blog a, .single-post #menu ul li.blog a, .single-reference #menu ul li.references a {
color: #dee000;
}  .slicknav_menu {
display: none;
padding: 0;
background: none;
}
.slicknav_btn {
margin: 42px 0 0 0;
padding: 0;
background: none;
text-shadow: none;
}
.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar {
margin-top: 0.25em;
}
.slicknav_menu .slicknav_icon {
width: 22px;
margin: 0.25em 0 0 0.438em;
}
.slicknav_btn .slicknav_icon-bar {
width: auto;
-webkit-transition: background 0.5s, -webkit-transform 0.5s;
}
.slicknav_btn:hover .slicknav_icon-bar {
background-color: #dee000;
width: auto;
}
.slicknav_nav {
font-family: 'Montserrat', sans-serif;
font-size: 18px;
float: right;
}
.slicknav_nav ul {
padding: 0;
margin: 0;
float: left;
}
.slicknav_nav a {
text-transform: uppercase;
padding: 0;
margin: 0; }
.slicknav_nav .slicknav_row:hover {
background: none;
}
.slicknav_nav a:hover {
background: none;
color: #dee000;
}
.slicknav_nav li {
float: left;
margin: 0 0 20px 0;
padding: 0;
}
.slicknav_nav li + li {
padding: 0 0 0 30px;
}
.archive .slicknav_nav li.blog a, .blog .slicknav_nav li.blog a, .single-post .slicknav_nav li.blog a, .single-reference .slicknav_nav li.references a {
color: #dee000;
} .slicknav_open .slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar {
margin-top: 0;
}
.slicknav_open .slicknav_icon {
margin: 0.20em 0 0 0.219em;
}
.slicknav_open .slicknav_icon .slicknav_icon-bar:nth-child(1) {
margin-top: 0.30em;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
}
.slicknav_open .slicknav_icon .slicknav_icon-bar:nth-child(2) {
display: none;
}
.slicknav_open .slicknav_icon .slicknav_icon-bar:nth-child(3) {
margin-top: 0em;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
} #contenu {
padding: 100px 0 0 0;
}
.col-3 {
float: left;
width: 25%;
padding: 0;
}
.col-4 {
float: left;
width: 33%;
padding: 0;
}
.col-6 {
float: left;
width: 50%;
padding: 0;
}
.col-9 {
float: left;
width: 75%;
padding: 0;
}
.col-12 {
float: left;
width: 100%;
padding: 0;
}  #intro {
}
#intro h1 {
position: absolute;
bottom: 25% ;
left: 20%; 
padding: 10px 15px 10px 15px;
margin: 0;
background: #323232;
color: #d93c34;
font-weight: 300;
font-size: 36px;
}
#intro.owl-carousel .owl-prev, #intro.owl-carousel .owl-next {
display: none;
color: #000;
position: absolute;
z-index: 101;
top: 45%;
}
#intro.owl-carousel .slide img {
height: auto;
}
#intro.owl-carousel:hover .owl-prev, #intro.owl-carousel:hover .owl-next {
color: #ffffff;
position: absolute;
display: block;
z-index: 101;
top: 45%;
}
#intro.owl-carousel .owl-prev {
left: 20px;
}
#intro.owl-carousel .owl-next {
right: 20px;
} #services {
background-color: #ffffff;
padding : 60px 0 60px 0;
}
#services h1 {
margin: 0;
padding: 0;
color: #c10000;
font-size: 46px;
font-family: 'Bariol', sans-serif;
text-transform: uppercase;
text-align: center;
}
#services h2 {
margin: 10px 0 0 0;
padding: 0;
font-size: 22px;
font-weight: 400;
}
#services p {
margin: 0 0 0 0;
padding: 0;
color: #323232;
font-size: 22px;
text-align: center;
}
#services .col-4 {
margin: 60px 0 0 0;
padding: 0;
text-align: center;
}
#services i {
color: #dee000;
font-size: 100px;
}
#services .col-4 p {
font-size: 16px;
margin: 10px 0 0 0;
} #funfacts {
color: #ffffff;
padding: 0 0 60px 0;
background: url(//www.studio-lapinternet.fr/wp-content/themes/lapinternet/images/funfacts.jpg) no-repeat center fixed;
-webkit-background-size: cover;
background-size: cover;
}
#funfacts .col-3 {
margin: 60px 0 0 0;
padding: 0;
text-align: center;
}
#funfacts .cercle {
width:100px;
height:100px;
background-color:none;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
border: 3px solid #ffffff; 
line-height:100px;
text-align:center;
vertical-align:middle;
display:inline-block;
}
#funfacts .cercle i {
line-height: inherit;
font-size: 50px;
}
#funfacts h2 {
font-size: 22px;
font-weight: 400;
margin: 0;
padding: 0;
}
#funfacts p.compteur {
color: #dee000;
margin: 0;
padding: 0;
font-size: 80px;
font-family: 'Bariol', sans-serif;
}
#funfacts p {
font-size: 16px;
margin: 0;
padding: 0;
} #equipe {
background-color: #efefef;
padding : 60px 0 60px 0;
}
#equipe h1 {
margin: 0;
padding: 0;
color: #26cbde;
font-size: 46px;
font-family: 'Bariol', sans-serif;
text-transform: uppercase;
text-align: center;
}
#equipe h2 {
margin: 10px 0 0 0;
padding: 0;
font-size: 22px;
font-weight: 400;
}
#equipe p {
margin: 0 0 0 0;
padding: 0;
color: #323232;
font-size: 22px;
text-align: center;
}
#equipe #membres {
margin: 60px 0 0 0;
padding: 0;
text-align: center;
}
#equipe #membres .cercle {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
margin: 0 auto 20px auto;
width: 220px;
}
#equipe #membres p.gregory {
margin: 0;
padding: 0;
font-size: 18px;
font-weight: 400;
}
#equipe #membres h2 {
margin: 0;
padding: 0;
font-size: 22px;
color: #de473d;
}
#equipe #membres p {
margin: 10px 0 0 0;
padding: 0;
font-size: 16px;
} #citations {
color: #ffffff;
padding: 60px 0 60px 0;
background: url(//www.studio-lapinternet.fr/wp-content/themes/lapinternet/images/citation.jpg) no-repeat center fixed;
-webkit-background-size: cover;
background-size: cover;
text-align: center;
}
#citations i {
font-size: 80px;
padding: 0;
margin: 0;
}
#citations #quotes {
margin: 0 0 0 0;
padding: 0;
text-align: center;
font-family: 'Bariol', sans-serif;
font-size: 30px;
}
#citations #quotes p {
margin: 0;
padding: 20px 0 30px 0;
}
#citations #quotes a {
color: #dee000;
}
#citations #quotes a:hover {
color: #de473d;
} #references {
background-color: #ffffff;
padding : 60px 0 60px 0;
}
#references h1 {
margin: 0;
padding: 0;
color: #c10000;
font-size: 46px;
font-family: 'Bariol', sans-serif;
text-transform: uppercase;
text-align: center;
}
#references .controls{
text-align: center;
padding: 0;
margin: 0;
}
#references button{
display: inline-block;
padding: 0 10px 0 10px;
font-size: 22px;
background: none;
border: none;
cursor: pointer;
}
#references button.active{
color: #26cbde;
}
#references button:focus{
outline: 0 none;
}
#references #Container{
margin: 20px 0 0 0;
}
#references #Container .mix { display: none;
width: 255px;
padding: 0;
margin: 30px 15px 0 15px;
overflow: hidden;
position: relative;
text-align: center;
}
#references #Container .mix img {
display: block;
width: 100%;
}
#references #Container .mix .survol {
width: 100%;
min-height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
background-color: #26cbde;
background-color: rgba(38,203,222,0.9);
transform: translateX(200px);
transition: 300ms;
opacity:0;
filter: alpha(opacity = 0);
}
#references #Container .mix h2{
color: #fff;
font-size: 24px;
font-weight: 400;
position: relative;
padding: 0 10px 0 10px;
margin: 14px 0 0 0;
text-align: center;
opacity:0;
filter: alpha(opacity = 0);
transition: 300ms;
}
#references #Container .mix p {
font-size: 16px;
font-weight: 400;
position: relative;
color: #323232;
padding: 0 10px 0 10px;
margin: 0;
text-align: center; 
opacity:0;
filter: alpha(opacity = 0);
transition: 300ms;
}
#references #Container .mix i {
color: #ffffff;
font-size: 40px;
margin: 10px 0 0 0;
text-align: center; 
opacity:0;
filter: alpha(opacity = 0);
transition: 300ms;
}
#references #Container .mix:hover .survol {  
opacity:1;
filter: alpha(opacity = 100);
transition-delay: 0s;
transform: translateX(0px);
}
#references #Container .mix:hover h2 {
opacity: 1;
filter: alpha(opacity = 100);
transition-delay: 0.1s;
}
#references #Container .mix:hover p {
opacity:1;
filter: alpha(opacity = 100);
transition-delay: 0.1s;
}
#references #Container .mix:hover i {
opacity:1;
filter: alpha(opacity = 100);
transition-delay: 0.1s;
} #clients {
background-color: #dee000;
padding : 60px 0 60px 0;
}
#clients h1 {
margin: 0;
padding: 0;
color: #c10000;
font-size: 46px;
font-family: 'Bariol', sans-serif;
text-transform: uppercase;
text-align: center;
}
#clients p {
margin: 0 0 0 0;
padding: 0;
color: #323232;
font-size: 22px;
text-align: center;
}
#clients a {
color: #c10000;
}
#clients a:hover {
color: #26cbde;
}
#clients #logotypes {
margin: 60px 0 20px 0;
}
#clients #logotypes img {
margin: 0 auto 20px auto;
width: 180px;
} #blog {
background-color: #efefef;
padding : 60px 0 60px 0;
}
#blog h1 {
margin: 0;
padding: 0;
color: #26cbde;
font-size: 46px;
font-family: 'Bariol', sans-serif;
text-transform: uppercase;
text-align: center;
}
#blog h2 {
margin: 0;
padding: 0;
color: #ffffff;
font-size: 22px;
font-weight: 400;
text-align: center;
}
#blog .quotidien h2 {
color: #323232;
}
#blog p {
margin: 0 0 40px 0;
padding: 0;
color: #323232;
font-size: 22px;
text-align: center;
}
#blog .col-4 {
margin: 20px 0 0 0;
padding: 0;
text-align: center;
}
#blog .web {
background: #2f8bfb;
padding: 20px 30px 25px 30px;
}
#blog .geek {
background: #de473c;
padding: 20px 30px 25px 30px;
}
#blog .quotidien {
background: #dee000;
padding: 20px 30px 25px 30px;
}
#blog a:hover .web {
outline: 2px solid #2f8bfb;
}
#blog a:hover .geek {
outline: 2px solid #de473c;
}
#blog a:hover .quotidien {
outline: 2px solid #dee000;
}
#blog .col-4 p {
margin: 0;
padding: 0;
color: #ffffff;
font-size: 18px;
font-weight: 300;
}
#blog .quotidien p {
color: #323232;
}
#blog .col-4 i {
margin: 0 10px 0 0;
} #articles {
color: #ffffff;
padding: 60px 0 60px 0;
background: url(//www.studio-lapinternet.fr/wp-content/themes/lapinternet/images/article.jpg) no-repeat center fixed;
-webkit-background-size: cover;
background-size: cover;
}
#articles h1 {
margin: 0;
padding: 0;
color: #ffffff;
font-size: 46px;
font-family: 'Bariol', sans-serif;
text-transform: uppercase;
text-align: center;
}
#articles p {
margin: 0 0 0px 0;
padding: 0;
color: #ffffff;
font-size: 22px;
text-align: center;
}
#articles img {
display: block;
width: 100%;
}
#articles article {
margin: 40px 0 0 0;
position: relative;
}
#articles article .image {
position: relative;
overflow: hidden;
}
#articles article .image a img {
-webkit-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
#articles article:hover .image a img {
-webkit-transform: rotate(15deg) scale(1.4);
transform: rotate(15deg) scale(1.4);
}
#articles article:hover {
outline: 1px #ffffff solid;
}
#articles article .resume {
background: #ffffff;
padding: 20px 30px 20px 40px;
}
#articles article .video {
position: relative;
padding-bottom: 56.25%; height: 0;
margin: 0;
}
#articles article .video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#articles article p.categorie {
position: absolute;
bottom: 20px;
right: 30px;
padding: 5px 10px 5px 10px;
margin: 0;
font-family: 'Bariol', sans-serif;
color: #ffffff;
font-weight: 300;
font-size: 18px;
border: none;
}
#articles article.web p.categorie {
background: #2f8bfb;
}
#articles article.geek p.categorie {
background: #de473c;
}
#articles article.quotidien p.categorie {
background: #dee000;
color: #323232;
}
#articles article.web p.categorie a {
color: #ffffff;
}
#articles article.geek p.categorie a {
color: #ffffff;
}
#articles article.quotidien p.categorie a {
color: #323232;
}
#articles article.web p.categorie:hover a {
color: #323232;
}
#articles article.geek p.categorie:hover a {
color: #323232;
}
#articles article.quotidien p.categorie:hover a {
color: #ffffff;
}
#articles article .resume a {
color: #323232;
}
#articles article h2 {
margin: 0px 0 0 0;
padding: 0;
color: #ffffff;
font-size: 26px;
font-weight: 400;
font-family: 'Lato', Sans-Serif;
text-transform: none;
text-align: left;
}
#articles article.web:hover h2 a {
color: #2f8bfb;
}
#articles article.geek:hover h2 a {
color: #de473c;
}
#articles article.quotidien:hover h2 a {
color: #dee000;
}
#articles article p.date {
margin: 0;
padding: 0;
color: #323232;
font-size: 14px;
border: none;
}
#articles article p {
margin: 10px 0 0 0;
padding: 0 0 0 10px;
color: #ffffff;
font-size: 18px;
text-align: left;
border-left: 1px solid #323232;
}
#articles .video { 
overflow:hidden; 
padding-bottom:56.25%; 
position:relative; 
height:0;
}
#articles .video iframe {
left:0; 
top:0; 
height:100%;
width:100%;
position:absolute;
} #contact {
background-color: #ffffff;
padding : 60px 0 0 0;
}
#contact h1 {
margin: 0;
padding: 0;
color: #ef3d37;
font-size: 46px;
font-family: 'Bariol', sans-serif;
text-transform: uppercase;
text-align: center;
}
#contact p {
margin: 0 0 20px 0;
padding: 0;
color: #323232;
font-size: 22px;
text-align: center;
}
#contact p + p {
margin: 0;
}
#contact p a {
margin: 0 10px 0 10px;
}
#contact p img {
margin: 0 6px 0 0;
}
#contact p a.facebook {
color: #4e71a8;
}
#contact p a.twitter {
color: #1cb7eb;
}
#contact p a.youtube {
color: #ca3737;
}
#contact #formulaire {
margin: 40px 0 0 0;
}
#contact #formulaire form {
overflow: hidden;
padding: 0 0 0 0;
}
#contact #formulaire form label {
float: left;
font-size: 18px;
font-weight: 400;
color: #323232;
width: 100%;
text-align: left;
cursor: pointer;
margin:20px 0 4px 0;
}
#contact #formulaire form label:hover {
color: #d93c35;
}
#contact #formulaire form input[type=text], #formulaire form input[type=email], #formulaire form input[type=tel] {
color: #323232;
background: #dee000;
width: 94%;
font-size: 22px;
font-weight: 300;
margin:0 0 0 0;
border: none;
padding: 10px 3% 10px 3%;
}
#contact #formulaire form input[type=text]:focus, #contact #formulaire form input[type=mail]:focus, #contact #formulaire form input[type=text]:hover, #contact #formulaire form input[type=mail]:hover, #contact #formulaire form input[type=tel]:hover, #contact #formulaire form input[type=tel]:hover {
color: #323232;
}
#contact #formulaire form textarea {
color: #323232;
background: #dee000;
width: 97%;
font-weight: 300;
font-size: 22px;
color: #000000;
margin: 2px 0 6px 0;
border: none;
padding: 10px 1% 10px 1%;
}
#contact #formulaire form textarea:focus, #contact #formulaire form textarea:hover {
color: #323232;
}
#contact #formulaire form input[type="submit"] {
font-weight: 400;
font-size: 18px;
float: right;
color: #323232; border: 2px solid #dee000;
background: none;
cursor:pointer;
font-family: 'Lato', Serif;
padding:6px 14px 6px 14px;
margin: 20px 1% 0 0;
}
#contact #formulaire form input[type="submit"]:hover {
cursor: pointer;
background: #dee000;
}#contact #formulaire .wpcf7-response-output {	    margin: 10px 10px 0 0;	}
#contact #map {
width: 100%;
height: 200px;
margin: 60px 0 0 0;
} #reference {
background-color: #d93c35;
padding : 60px 0 60px 0;
} #reference #galeries {
margin: 0 0 30px 0;
padding: 0;
text-align: center;
}
#reference #galeries .slide {
text-align: center;
}
#reference #galeries .slide img {
height: auto !important;
}
#reference .owl-theme .owl-dots .owl-dot {
display: inline-block;
zoom: 1;
*display: inline;
}
#reference .owl-theme .owl-dots .owl-dot span {
width: 12px;
height: 12px;
margin: 30px 5px 0 5px;
background: #ffffff;
display: block;
-webkit-backface-visibility: visible;
-webkit-transition: opacity 200ms ease;
-moz-transition: opacity 200ms ease;
-ms-transition: opacity 200ms ease;
-o-transition: opacity 200ms ease;
transition: opacity 200ms ease;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
#reference .owl-theme .owl-dots .owl-dot.active span, #reference .owl-theme .owl-dots .owl-dot:hover span {
background: #dee000;
} #reference #description {
margin: 30px 0 0 0;
padding: 30px 30px 30px 30px;
background: #ffffff;
font-size: 20px;
}
#reference #description h1 {
margin: 0;
padding: 0;
color: #d93c35;
font-size: 46px;
font-weight: normal;
font-family: 'Bariol', sans-serif;
text-align: center;
}
#reference #description h2 {
margin: 0;
padding: 0;
font-weight: 300;
font-size: 22px;
text-align: center;
}
#reference #description ul {
font-size: 18px;
font-weight: 400;
list-style: none;
padding: 0;
margin: 30px 0 30px 0;
}
#reference #description li {
padding-left: 1.3em;
margin: 2px 0 2px 0;
}
#reference #description li:before {
content: "\f058";
color: #de473c;
font-family: FontAwesome;
display: inline-block;
margin-left: -1.3em; width: 1.3em; }
#reference #description p {
margin: 0;
padding: 0;
}
#reference #description a {
color: #de473c;
}
#reference #description a:hover {
color: #26cbde;
}
#reference #description p.web {
text-align: right;
font-size: 18px;
margin: 30px 0 0 0;
}
#reference #description p.web:before {
content: "\f055";
color: #323232;
font-family: FontAwesome;
margin: 0 6px 0 0;
}
#reference #description p.web a {
color: #323232;
font-weight: 400;
}
#reference #description p.web a:hover {
color: #de473c;
} #reference #projets {
background: #ffffff;
}
#reference #projets h3 {
color: #ffffff;
background: #323232;
text-transform: uppercase;
text-align: center;
margin: 0;
padding: 10px 0 10px 0;
font-size: 22px;
font-weight: 300;
}
#reference #projets ul {
font-size: 18px;
font-weight: 300;
list-style: none;
padding: 16px 30px 16px 30px;
margin: 0;
}
#reference #projets li {
padding-left: 0;
margin: 8px 0 8px 0;
}
#reference #projets li a {
color: #323232;	font-size: 17px;
}
#reference #projets li a:hover {
color: #d93c35;
}
#reference #projets li.current-menu-item a {
color: #d93c35;
font-weight: 400;
font-size: 20px;
} #reference #projet {
background: #323232;
margin: 30px 0 0 0;
padding: 20px 10px 20px 10px;
text-align: center;
}
#reference #projet:hover {
outline: 1px #ffffff solid;
}
#reference #projet h4 {
font-size: 24px;
font-weight: 400;
padding: 0;
margin: 0;
}
#reference #projet h4 a {
color: #dee000;
}
#reference #projet h4 i {
margin: 0 10px 0 0;
}
#reference #projet p {
margin: 10px 0 0 0;
padding: 0;
}
#reference #projet p a {
color: #ffffff;
} #reference img.erreur {
width: 100%;
} .archive #header, .single #header, .blog #header, .error404 #header, .search #header {
position: relative;
}
.archive #contenu, .single #contenu, .blog #contenu, .error404 #contenu, .search #contenu {
padding: 0;
}
#blog {
background-color: #ffffff;
padding : 60px 0 60px 0;
}
#blog-header {
background-color: #ffffff;
min-height: 42px;
border-bottom: 1px solid #efefef;
width: 100%;
z-index:1000;
}
.blog-header-container {
height: 43px;
}
#blog-header.fixed {
position:fixed;
top: 0;
height: 42px;
} #categories {
position:relative;
font-size: 17px;
padding: 11px 0 0 0;
float: left;
}
#categories ul {
padding: 0;
margin: 0;
list-style-type: none;
float: left;
}
#categories ul li {
margin: 0;
padding: 0;
float: left;
position: relative;
}
#categories ul li i {
margin: 0 8px 0 0;
}
#categories ul li + li {
padding: 0 0 0 30px;
}
#categories ul li a {
color: #323232;
text-decoration: none;
display: block;
text-transform: uppercase;
height: 29px; -webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#categories ul li.web a {
border-bottom: 1px solid #2f8bfb;
padding: 0 0 2px 0;
}
#categories ul li.web a:before {
content: "\f0ac";
color: #2f8bfb;
font-family: FontAwesome;
margin: 0 8px 0 0;
}
#categories ul li.web a:hover, #categories ul li.web.current-menu-parent a, #categories ul li.web.current-menu-item a {
border-bottom: 3px solid #2f8bfb;
padding: 0 0 0 0;
}
#categories ul li.web i {
color: #2f8bfb;
}
#categories ul li.geek a {
border-bottom: 1px solid #de473c;
padding: 0 0 2px 0;
}
#categories ul li.geek a:before {
content: "\f11b";
color: #de473c;
font-family: FontAwesome;
margin: 0 8px 0 0;
}
#categories ul li.geek a:hover, #categories ul li.geek.current-menu-parent a, #categories ul li.geek.current-menu-item a {
border-bottom: 3px solid #de473c;
padding: 0 0 0 0;
}
#categories ul li.geek i {
color: #de473c;
}
#categories ul li.quotidien a {
border-bottom: 1px solid #dee000;
padding: 0 0 2px 0;
}
#categories ul li.quotidien a:before {
content: "\f236";
color: #dee000;
font-family: FontAwesome;
margin: 0 8px 0 0;
}
#categories ul li.quotidien a:hover, #categories ul li.quotidien.current-menu-parent a, #categories ul li.quotidien.current-menu-item a {
border-bottom: 3px solid #dee000;
padding: 0 0 0 0;
}
#categories ul li.quotidien i {
color: #dee000;
} #blog-header #recherche {
float: right;
}
#blog-header #recherche form {
display: block;
}
#blog-header #recherche input[type=text] {
display: block;
font-size:18px;
background:#ffffff;
border: none;
margin: 0;
padding: 0 10px 0 10px;
width:110px;
height:42px;
line-height:42px;
float: left;
color:#323232;
}
#blog-header #recherche input[type=text]:hover, #header #recherche input[type=text]:focus {
color:#de473c; }
#blog-header #recherche input[type="submit"] {
float: left;
border: none;
margin: 12px 0 0 8px;
height: 18px;
width: 18px;
cursor: pointer;
background: transparent url(//www.studio-lapinternet.fr/wp-content/themes/lapinternet/images/loupe.png) top left no-repeat;
}
#blog-header #recherche input[type="submit"]:hover, #blog-header #recherche input[type="submit"]:focus {
background: transparent url(//www.studio-lapinternet.fr/wp-content/themes/lapinternet/images/loupe-hover.png) top left no-repeat;
} .archive #articles, .blog #articles  {
padding: 20px 0 60px 0;
background: url(//www.studio-lapinternet.fr/wp-content/themes/lapinternet/images/blog.jpg) no-repeat center fixed;
-webkit-background-size: cover;
background-size: cover;
}
.archive #articles .col-4.principal, .blog #articles .col-4.principal, .search #articles .col-4.principal {
width: 99%;
}
.archive #articles .col-4.principal article, .blog #articles .col-4.principal article, .search #articles .col-4.principal article {
background: #ffffff;
float: left;
}
.archive #articles .col-4.principal .image, .blog #articles .col-4.principal .image, .search #articles .col-4.principal .image {
width: 60%;
float: left;
}
.archive #articles .col-4.principal .resume, .blog #articles .col-4.principal .resume, .search #articles .col-4.principal .resume {
width: 39%;
float: left;
padding: 20px 0 20px 0;
margin: 0;
}
.archive #articles .col-4.principal .resume p.date, .blog #articles .col-4.principal .resume p.date, .search #articles .col-4.principal .resume p.date {
margin: 0;
padding: 0 30px 0 30px;
}
.archive #articles .col-4.principal .resume p, .blog #articles .col-4.principal .resume p, .search #articles .col-4.principal .resume p {
padding: 0 20px 0 10px;
margin: 10px 30px 0 30px;
}
.archive #articles .col-4.principal .resume h1, .blog #articles .col-4.principal .resume h1, .search #articles .col-4.principal .resume h1 {
font-size: 45px;
padding: 10px 30px 10px 30px;
line-height: 40px;
}
.archive #articles article h1, .blog #articles article h1, .search #articles article h1 {
margin: 0px 0 0 0;
padding: 0;
color: #ffffff;
font-size: 26px;
font-weight: 400;
font-family: 'Lato', Sans-Serif;
text-transform: none;
text-align: left;
}
.archive #articles article.web:hover h1 a, .blog #articles article.web:hover h1 a, .search #articles article.web:hover h1 a {
color: #2f8bfb;
}
.archive #articles article.geek:hover h1 a, .blog #articles article.geek:hover h1 a, .search #articles article.geek:hover h1 a {
color: #de473c;
}
.archive #articles article.quotidien:hover h1 a, .blog #articles article.quotidien:hover h1 a, .search #articles article.quotidien:hover h1 a {
color: #dee000;
} .pagination {
clear: both;
padding: 0px 0 0 0;
margin: 40px 0 0 0;
text-align: center;
font-weight: 400;
}
.pagination .page-numbers {
background: #ffffff;
padding: 4px 8px;
color: #323232;
}
.pagination .page-numbers:hover {
background: #323232;
color: #ffffff;
}
.pagination .current {
background: #323232;
color: #ffffff;
} #article {
padding: 50px 0 60px 0;
background: #ffffff;
font-size: 17px;
}
#article article h1 {
margin: 0;
padding: 0;
font-size: 45px;
font-weight: 400;
line-height: 42px;
}
#article .edition {
float: left;
width: 78%;
margin: 0 2% 0 0;
}
#article .date {
float: left;
width: 20%;
text-align: right;
}
#article article .edition p {
margin: 10px 0 20px 0;
padding: 0;
font-size: 15px;
}
#article article .edition p i {
margin: 0 4px 0 0;
font-size: 14px;
}
#article article.web .edition p a {
font-weight: 400;
color: #2f8bfb;
-webkit-filter: contrast(100%); 
}
#article article.geek .edition p a {
font-weight: 400;
color: #de473c;
-webkit-filter: contrast(100%); 
}
#article article.quotidien .edition p a {
font-weight: 400;
color: #dee000;
-webkit-filter: contrast(100%); 
}
#article article.web .edition p a:hover, #article article.geek .edition p a:hover, #article article.quotidien .edition p a:hover {
color: #323232;
}
#article article .image {
position: relative;
overflow: hidden;
margin: 0 0 30px 0;
}
#article article .image img {
width: 100%;
}
#article article .publicite {
float: right;
margin: 0 0 15px 15px;
}
#article article .publicite img {
}
#article article p {
margin: 10px 0 20px 0;
padding: 0;
}
#article article h2 {
display:inline-block;
margin: 20px 0 10px 0;
padding: 0 10px 6px 10px;
font-size: 35px;
background-color: #323232;
color: #ffffff;
font-weight: 400;
}
#article article h2 + h3 {
margin: 6px 0 0 0;
}
#article article img {
max-width: 100%;
height: auto;
}
#article article p.legende {
margin: 0;
padding: 0 0 10px 0;
color: #7a7a7a;
font-size: 16px;
border: none;
text-align: center;
}
#article article blockquote p {
margin: 0;
padding: 0 0 10px 0;
font-family: 'Bariol', sans-serif;
color: #000;
font-size: 22px;
border: none;
text-align: center;
}
#article article blockquote p:before {
content: "\f10d";
color: #de473c;
font-family: FontAwesome;
margin: 0 10px 0 0;
}
#article article blockquote p:after {
content: "\f10e";
color: #de473c;
font-family: FontAwesome;
margin: 0 0 0 10px;
}
#article article h3 {
margin: 0;
padding: 0;
font-size: 27px;
font-weight: 400;
}
#article article.web h3 {
color: #2f8bfb;
}
#article article.geek h3 {
color: #de473c;
}
#article article.quotidien h3 {
color: #323232;
}
#article article.web a {
font-weight: 400;
color: #2f8bfb;
}
#article article.geek a {
font-weight: 400;
color: #de473c;
}
#article article.quotidien a {
font-weight: 400;
color: #de473c;
}
#article article.web a:hover, #article article.geek a:hover, #article article.quotidien a:hover {
color: #de473c;
}
#article article .video {
position: relative;
padding-bottom: 56.25%; height: 0;
margin: 0;
}
#article article .video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#article article p.categorie {
position: absolute;
bottom: 20px;
right: 30px;
padding: 5px 10px 5px 10px;
margin: 0;
font-family: 'Bariol', sans-serif;
color: #ffffff;
font-weight: 300;
font-size: 18px;
border: none;
}
#article article.web p.categorie {
background: #2f8bfb;
}
#article article.geek p.categorie {
background: #de473c;
}
#article article.quotidien p.categorie {
background: #dee000;
color: #323232;
}
#article article.web p.categorie a {
color: #ffffff;
}
#article article.geek p.categorie a {
color: #ffffff;
}
#article article.quotidien p.categorie a {
color: #323232;
}
#article article.web p.categorie:hover a {
color: #323232;
}
#article article.geek p.categorie:hover a {
color: #323232;
}
#article article.quotidien p.categorie:hover a {
color: #ffffff;
} #article #recommandes {
margin: 60px 0 0 0;
}
#article #recommandes h4 {
margin: 0 0 20px 0;
padding: 24px 0 0 0;
font-size: 22px;
color: #323232;
font-family: 'Bariol', sans-serif;
border-top: 1px solid #dddddd;
}
#article #recommandes article {
background: #323232;
margin: 0 0 30px 0;
padding: 0;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
#article #recommandes article:hover {
outline : 1px solid #323232;
}
#article #recommandes article h5 {
margin: 0;
padding: 6px 8px 6px 8px;
font-size: 16px;
color: #ffffff;
text-align: center;
}
#article #recommandes article:hover h5 {
background: #ffffff;
}
#article #recommandes article h5 a {
color: #ffffff;
}
#article #recommandes article:hover h5 a {
color: #323232;
}
#article #recommandes article .image {
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
}
#article #recommandes article .image a img {
display: block;
-webkit-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
#article #recommandes article:hover .image a img {
-webkit-transform: rotate(15deg) scale(1.4);
transform: rotate(15deg) scale(1.4);
} aside {
width: 25%;
float: left;
}
aside .col-3 {
width: 100%;
} #article #auteur {
margin: 0 0 0 20px;
padding: 0 0 30px 0;
border-bottom: 1px solid #dddddd;
}
#article #auteur .avatar {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
margin: 0 auto 10px auto;
width: 100px; -webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#article #auteur:hover .avatar {
-webkit-transform: rotate(15deg) scale(1);
transform: rotate(15deg) scale(1);
}
#article #auteur h4 {
margin: 0;
padding: 0;
font-size: 22px;
color: #de473d;
font-family: 'Bariol', sans-serif;
}
#article #auteur h4 a {
color: #de473d;
}
#article #auteur h5 {
margin: 0;
padding: 0;
font-size: 18px;
font-weight: 400;
}
#article #auteur p {
margin: 10px 0 0 0;
padding: 0;
font-size: 14px;
}
#article #auteur p a {
color: #323232;
}
#article #auteur .sociaux {
margin: 12px 0 0 0;
}
#article #auteur .sociaux img {
padding: 0;
margin: 0;
}
#article #auteur .sociaux ul {
padding: 0;
margin: 0;
list-style-type: none;
float: left;
}
#article #auteur .sociaux ul li {
float: left;
margin: 0 5px 0 0;
padding: 0;
} #article #etiquettes {
margin: 0 0 0 20px;
padding: 30px 0 30px 0;
border-bottom: 1px solid #dddddd;
}
#article #etiquettes a {
background: #7a7a7a;
color: #ffffff;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
padding: 3px 9px 6px 9px;
margin: 0 6px 6px 0;
display: inline-block;
font-size: 14px; -webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#article #etiquettes a:hover{
background: #323232;
}
#article #etiquettes a i {
font-size: 12px;
margin: 0 6px 0 0;
} #article #stars {
margin: 0 0 0 20px;
padding: 24px 0 0 0;
border-bottom: 1px solid #dddddd;
}
#article #stars h4 {
margin: 0 0 20px 0;
padding: 0;
font-size: 22px;
color: #323232;
font-family: 'Bariol', sans-serif;
}
#article #stars article {
margin: 0 0 30px 0;
padding: 0;
background: #323232;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
#article #stars article:hover {
outline: 1px #323232 solid;
background: none;
}
#article #stars article .image {
margin: 0 0 0 0;
}
#article #stars article h5 {
margin: 0;
padding: 6px 8px 6px 8px;
font-size: 16px;
color: #ffffff;
text-align: center;
}
#article #stars article h5 a {
color: #ffffff;
}
#article #stars article:hover h5 a {
color: #323232;
}
#article #stars article .image {
position: relative;
overflow: hidden;
}
#article #stars article .image a img {
display: block;
-webkit-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
#article #stars article:hover .image a img {
-webkit-transform: rotate(15deg) scale(1.4);
transform: rotate(15deg) scale(1.4);
} #article #projet {
background: #323232;
margin: 30px 0 0 20px;
padding: 20px 10px 20px 10px;
text-align: center;
}
#article #projet:hover {
outline: 3px #323232 solid;
}
#article #projet h4 {
font-size: 20px;
font-weight: 400;
text-transform: uppercase;
padding: 0;
margin: 0;
}
#article #projet h4 a {
color: #dee000;
}
#article #projet h4 i {
margin: 0 10px 0 0;
}
#article #projet p {
margin: 10px 0 0 0;
padding: 0;
}
#article #projet p a {
color: #ffffff;
} #commentaires {
color: #ffffff;
padding: 60px 0 60px 0;
background-color: rgb(50, 50, 50);
background-color: rgba(50, 50, 50, 0.9);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#323232, endColorstr=#323232);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#323232, endColorstr=#323232)";
}
#commentaires .commentaire h3 {
font-size: 45px;
font-weight: 400;
margin: 0;
padding: 0;
text-align: center;
}
#commentaires .commentaire p.comment-notes {
text-align: center;
}
#commentaires .commentaire form label {
float: left;
font-size: 18px;
font-weight: 400;
color: #ffffff;
width: 100%;
text-align: left;
cursor: pointer;
margin:0px 0 4px 0;
}
#commentaires .commentaire form label:hover {
color: #d93c35;
}
#commentaires .commentaire form input[type=text], #commentaires .commentaire form input[type=email] {
color: #323232;
background: #ffffff;
width: 94%;
font-size: 22px;
font-weight: 300;
margin:0 0 0 0;
border: none;
padding: 10px 3% 10px 3%;
}
#commentaires .commentaire form input[type=text]:focus, #commentaires .commentaire form input[type=mail]:focus, #commentaires .commentaire form input[type=text]:hover, #commentaires .commentaire form input[type=mail]:hover {
color: #323232;
}
#commentaires .commentaire form textarea {
color: #323232;
background: #ffffff;
width: 97%;
font-weight: 300;
font-size: 22px;
color: #000000;
margin: 2px 0 6px 0;
border: none;
padding: 10px 1% 10px 1%;
}
#commentaires .commentaire form textarea:focus, #commentaires .commentaire form textarea:hover {
color: #323232;
}
#commentaires .commentaire form p.form-submit {
padding:0 15px 0 15px;
}
#commentaires .commentaire form input[type="submit"] {
font-weight: 400;
font-size: 18px;
float: right;
color: #ffffff; border: 2px solid #de473c;
background: none;
cursor:pointer;
font-family: 'Lato', Serif;
padding:6px 14px 6px 14px;
margin: 20px 1% 0 0;
}
#commentaires .commentaire form input[type="submit"]:hover {
cursor: pointer;
background: #de473c;
color: #323232;
}
#commentaires .avatar {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
#commentaires a {
color: #de473c;
}
#commentaires a:hover {
color: #dee000;
}
#commentaires ol {
background: #323232;
list-style-type:none;
padding: 20px 20px 20px 40px;
margin: 20px 1% 20px 0;
} #auteur {
background: #ffffff;
}
#auteur .quisuisje {
padding: 50px 0 60px 0;
font-size: 17px;
}
#auteur .quisuisje .cercle {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
margin: 0 auto 10px auto;
width: 250px;
float: left;
padding: 0 30px 0 0;
max-width: 100%;
}
#auteur .quisuisje h1 {
margin: 0 0 20px 0;
padding: 0;
color: #c10000;
font-size: 46px;
font-family: 'Bariol', sans-serif;
text-transform: uppercase;
}
#auteur .quisuisje h2 {
margin: 0;
padding: 0;
font-size: 22px;
}
#auteur .quisuisje #competences {
margin: 40px 0 0 0;
}
#auteur .quisuisje .skillbar {
position:relative;
display:block;
margin-bottom:15px;
width:100%;
background:#eee;
height:35px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-webkit-transition:0.4s linear;
-moz-transition:0.4s linear;
-ms-transition:0.4s linear;
-o-transition:0.4s linear;
transition:0.4s linear;
-webkit-transition-property:width, background-color;
-moz-transition-property:width, background-color;
-ms-transition-property:width, background-color;
-o-transition-property:width, background-color;
transition-property:width, background-color;
}
#auteur .quisuisje .skillbar-title {
position: absolute;
top: 0;
left: 0;
font-weight: 400;
font-size: 13px;
color: #fff;
background: #6adcfa;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
#auteur .quisuisje .skillbar-title span {
display:block;
background:rgba(0, 0, 0, 0.1);
padding:0 20px;
height:35px;
line-height:35px;
-webkit-border-top-left-radius:3px;
-webkit-border-bottom-left-radius:3px;
-moz-border-radius-topleft:3px;
-moz-border-radius-bottomleft:3px;
border-top-left-radius:3px;
border-bottom-left-radius:3px;
}
#auteur .quisuisje .skillbar-bar {
height:35px;
width:0px;
background:#6adcfa;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
#auteur .quisuisje .skill-bar-percent {
position:absolute;
right:10px;
top:0;
font-size:11px;
height:35px;
line-height:35px;
color:#444;
color:rgba(256, 256, 256, 1);
} #footer {
background-color: #323232;
padding: 10px 0 10px 0;
margin: 0; font-size: 17px;
}
#footer .mentionslegales a {
margin: 0 20px 0 0;
color: #ffffff;
}
#footer .mentionslegales a:hover {
color: #dee000;
}
#footer .referencement p {
margin: 0;
padding: 0;
color: #de473d;
text-align: center;
}
#footer .sociaux {
float: right;
}
#footer img {
padding: 0;
margin: 0;
}
#footer ul {
padding: 0;
margin: 0;
list-style-type: none;
float: left;
}
#footer ul li {
float: left;
margin: 0 0 0 5px;
padding: 0;
}
#footer ul li:hover {
} @media only screen and (max-width: 1250px) {
.header-page {
width: auto;
max-width: 1170px;
}
.page-container {
width: auto;
max-width: 1200px;
}
.no-js .header-page {
width: 1170px;
}
.no-js .page-container {
width: 1200px;
}
#references #Container .mix {
width: 22%;
margin: 3% 1.5% 0 1.5%;
}
#references #Container .mix i {
font-size: 25px;
}
#footer .col-6 {
display: none;
}
#footer .col-3 {
width: 50%;
}
}
@media only screen and (max-width: 1000px) {
.col-3 {
width: 50%;
}
.col-9 {
width: 100%;
}
#reference .col-3 {
width: 100%;
}
#recommandes .col-3 {
width: 25%;
}
#reference #projets {
margin: 30px 0 0 0;
}
#references #Container .mix {
width: 30.3%;
margin: 3% 1.5% 0 1.5%;
}
.archive #articles .col-4.principal, .blog #articles .col-4.principal, .search #articles .col-4.principal {
width: 99%;
}
.archive #articles .col-4.principal article, .blog #articles .col-4.principal article, .search #articles .col-4.principal article {
background: #ffffff;
float: none;
}
.archive #articles .col-4.principal .image, .blog #articles .col-4.principal .image, .search #articles .col-4.principal .image {
width: auto;
float: none;
}
.archive #articles .col-4.principal .resume, .blog #articles .col-4.principal .resume, .search #articles .col-4.principal .resume {
width: auto;
float: none;
}
#article #stars {
display: none;
}
#article #etiquettes {
display: none;
}
#article #auteur {
display: none;
}
#article #projet {
margin: 30px 0 0 0;
}
aside {
width: auto;
float: none;
}
}
@media only screen and (max-width: 930px) {
#menu {
display:none;
}
.slicknav_menu {
display:block;
}
#intro.owl-carousel:hover .owl-prev, #intro.owl-carousel:hover .owl-next {
display: none;
}
}
@media only screen and (max-width: 720px) {
#intro h1 { bottom: 0% ;
right: 0%; 
left: auto;
}
.col-4 {
width: 50%;
}
#blog .col-4, #articles .col-4, #contact .col-4, #commentaires .col-4 {
width: 100%;
}
.archive #articles .col-4 {
width: 50%;
}
.archive #articles .col-4.principal, .blog #articles .col-4.principal, .search #articles .col-4.principal  {
width: 100%;
}
.archive #articles .col-4.principal .resume h2, .blog #articles .col-4.principal .resume h2, .search #articles .col-4.principal .resume h2 {
font-size: 26px;
}
#contact #formulaire form textarea {
width: 94%;
padding: 10px 3% 10px 3%;
}
#services .col-4 p {
min-height: 120px;
}
#references #Container .mix {
width: 47%;
margin: 3% 1.5% 0 1.5%;
}
#recommandes .col-3 {
width: 50%;
}
#auteur .quisuisje {
text-align: center;
}
#auteur .quisuisje .cercle {
float: none;
}
#auteur .quisuisje ul {
text-align: left;
}
}
@media only screen and (max-width: 640px) {
.slicknav_nav {
float: none;
}
.slicknav_nav a {
text-align: center;
}
.slicknav_nav li {
float: none;
}
.slicknav_nav li + li {
padding:0;
}
#article article h1 {
margin: 0;
padding: 0;
font-size: 45px;
font-weight: 400;
line-height: 42px;
text-align: center;
}
#article .edition {
float: none;
width: auto;
margin: 0;
text-align: center;
}
#article .date {
float: none;
width: auto;
text-align: center;
}
#article article .edition p {
margin: 10px 0 0 0;
}
}
@media only screen and (max-width: 590px) {	
#intro.owl-carousel .owl-item img { }
#intro h1 { position: relative;
bottom: auto ;
left: auto; 
margin: 0;
font-size: 16px;
text-align: center;
}
.col-4 {
width: 100%;
}
.col-3 {
width: 100%;
}
#blog-header #recherche {
display: none;
}
#categories {
float: none;
text-align: center; }
#categories ul {
float: none;
}
#categories ul li {
float: none;
display: inline;
}
#categories ul li a {
display:inline-block;
}
}
@media only screen and (max-width: 500px) {
.archive #articles .col-4 {
width: 100%;
}
}
@media only screen and (max-width: 425px) {
#references #Container .mix {
width: 100%;
margin: 20px 0 0;
}
}
@media only screen and (max-width: 400px) {
#header #logo {
display: none;
}
#header #logo-mobile {
display: block;
}
#footer .mentionslegales {
display: none;
}
#footer .col-3 {
width: 100%;
}
#categories ul li.web a:before, #categories ul li.geek a:before, #categories ul li.quotidien a:before {
display: none;
}
#recommandes .col-3 {
width: 100%;
}
}
@media only screen and (max-width: 320px) { #categories ul li i {
display: none;
}
#categories ul li + li {
padding: 0 0 0 15px;
}
}