html{
font-size:62.5%;/* 1rem vaut 10px - (16 x62.5/100 = 10) */
scroll-behavior: smooth;
overflow-x:hidden;
/* height:100%; */
}
body{
margin:0;
padding:0;
font-family: 'PT Sans', sans-serif;
font-size: 14px; /*pour IE */
font-size: 1.4rem;/* 1.4 rem vaut 14px */
overflow-x:hidden;
transition:ease all 0.2s;
/* height:100%; */
}
a {
text-decoration:none;
}
ul li{
font-size: 14px; /*pour IE */
font-size: 1.4rem;/* 1.4 rem vaut 14px */
}
strong{
font-weight:600;
}
title{
text-decoration:capitalize;
}
a
{
text-decoration:none;
}
h1,h2,h3,h4,h5
{
font-weight:300;
margin:0;
}
p, ul, li
{
font-size:18px;
font-weight:300;
font-family: 'PT Sans', sans-serif;
}
footer
{
}
input
{
font-family: 'Quicksand', sans-serif;
font-size:16px;
}
.cursorPointer, .pointer{
cursor:pointer;
}
.cursorDefault {
cursor:default;
}
.titreStandardH1{
margin-top: 20px;
margin-top: 2rem;
margin-bottom: 20px;
margin-bottom: 2rem;
font-size: 45px;
font-size: 4.5rem;
}
@media only screen and (max-width: 900px) {
.titreStandardH1{
font-size: 3px;
font-size: 3rem;
}
}
/* ********************************************* FONT FAMILY */
.fontFamilySansSerif1 {
font-family: 'PT Sans', sans-serif;
}
.fontFamilySansSerif2 {
font-family:'Raleway', sans-serif;
}
.fontFamilySansSerif3 {
font-family: 'Josefin Sans', sans-serif;
}
.fontFamilySerif1{
font-family: 'Playfair Display', serif;
}
.fontFamilySerif2{
font-family: 'PT Serif', serif;
}
.fontFamilySerif3{
font-family: 'Amiri', serif;
}
.fontFamilyCursive1 {
font-family: 'Dancing Script', cursive;
}
/* ********************************************* FONT WEIGHT */
.fontBold, .bold{
font-weight:bold;
}
.fontNormal{
font-weight:Normal;
}
.font100{
font-weight:100;
}
.font200{
font-weight:200;
}
.font300{
font-weight:300;
}
.font400{
font-weight:400;
}
.font500{
font-weight:500;
}
.font600{
font-weight:600;
}
.font700{
font-weight:700;
}
.font800{
font-weight:800;
}
.font900{
font-weight:900;
}
/* fontSize */
.fontSizePetit{
font-size:15px;
font-size:1.5rem;
}
.fontSizeMoyen{
font-size:18px!important;
font-size:1.8rem!important;
line-height: 30px!important;
line-height: 3rem!important;
}
.fontSizeGrand{
font-size:28px;
font-size:2.8rem;
}
.fontSizeTresGrand{
font-size:30px;
font-size:3rem;
}
.fontSizeGeant{
font-size:45px;
font-size:4.5rem;
}
.fontSize10px{
font-size:10px;
font-size:1rem;
}
.fontSize12px{
font-size:12px;
font-size:1.2rem;
}
.fontSize15px{
font-size:15px;
font-size:1.5rem;
}
.fontSize18px{
font-size:18px;
font-size:1.8rem;
}
.fontSize20px{
font-size:20px;
font-size:2rem;
}
.fontSize22px{
font-size:22px;
font-size:2.2rem;
}
.fontSize25px{
font-size:25px;
font-size:2.5rem;
}
.fontSize28px{
font-size:28px;
font-size:2.8rem;
}
.fontSize30px{
font-size:30px;
font-size:3rem;
}
.fontSize32px{
font-size:32px;
font-size:3.2rem;
}
.fontSize35px{
font-size:35px;
font-size:3.5rem;
}
.fontSize38px{
font-size:38px;
font-size:3.8rem;
}
.fontSize40px{
font-size:40px;
font-size:4rem;
}
.fontSize42px{
font-size:42px;
font-size:4.2rem;
}
.fontSize45px{
font-size:45px;
font-size:4.5rem;
}
.fontSize48px{
font-size:48px;
font-size:4.8rem;
}
.fontSize50px{
font-size:50px;
font-size:5rem;
}
.fontSize55px{
font-size:55px;
font-size:5.5rem;
}
.fontSize58px{
font-size:58px;
font-size:5.8rem;
}
.fontSize60px{
font-size:60px;
font-size:6rem;
}
.lineHeight10px{
line-height:10px;
line-height:1rem;
}
.lineHeight12px{
line-height:12px;
line-height:1.2rem;
}
.lineHeight15px{
line-height:15px;
line-height:1.5rem;
}
.lineHeight18px{
line-height:18px;
line-height:1.8rem;
}
.lineHeight20px{
line-height:20px;
line-height:2rem;
}
.lineHeight22px{
line-height:22px;
line-height:2.2rem;
}
.lineHeight25px{
line-height:25px;
line-height:2.5rem;
}
.lineHeight28px{
line-height:28px;
line-height:2.8rem;
}
.lineHeight30px{
line-height:30px;
line-height:3rem;
}
.lineHeight32px{
line-height:32px;
line-height:3.2rem;
}
.lineHeight35px{
line-height:35px;
line-height:3.5rem;
}
.lineHeight38px{
line-height:38px;
line-height:3.8rem;
}
.lineHeight40px{
line-height:40px;
line-height:4rem;
}
.lineHeight42px{
line-height:42px;
line-height:4.2rem;
}
.lineHeight45px{
line-height:45px;
line-height:4.5rem;
}
.lineHeight48px{
line-height:48px;
line-height:4.8rem;
}
.lineHeight50px{
line-height:50px;
line-height:5rem;
}
.lineHeight55px{
line-height:55px;
line-height:5.5rem;
}
@media only screen and (max-width: 1440px) {
.fontSize22pxM1440{
font-size:22px!important;
font-size:2.2rem!important;
}
.fontSize25pxM1440{
font-size:25px!important;
font-size:2.5rem!important;
}
.fontSize28pxM1440{
font-size:28px!important;
font-size:2.8rem!important;
}
.fontSize30pxM1440{
font-size:30px!important;
font-size:3rem!important;
}
.fontSize32pxM1440{
font-size:32px!important;
font-size:3.2rem!important;
}
.fontSize35pxM1440{
font-size:35px!important;
font-size:3.5rem!important;
}
.fontSize38pxM1440{
font-size:38px!important;
font-size:3.8rem!important;
}
.fontSize40pxM1440{
font-size:40px!important;
font-size:4rem!important;
}
.fontSize42pxM1440{
font-size:42px!important;
font-size:4.2rem!important;
}
.fontSize45pxM1440{
font-size:45px!important;
font-size:4.5rem!important;
}
.fontSize48pxM1440{
font-size:48px!important;
font-size:4.8rem!important;
}
.fontSize50pxM1440{
font-size:50px!important;
font-size:5rem!important;
}
}
@media only screen and (max-width: 1366px) {
.fontSize22pxM1366{
font-size:22px!important;
font-size:2.2rem!important;
}
.fontSize25pxM1366{
font-size:25px!important;
font-size:2.5rem!important;
}
.fontSize28pxM1366{
font-size:28px!important;
font-size:2.8rem!important;
}
.fontSize30pxM1366{
font-size:30px!important;
font-size:3rem!important;
}
.fontSize32pxM1366{
font-size:32px!important;
font-size:3.2rem!important;
}
.fontSize35pxM1366{
font-size:35px!important;
font-size:3.5rem!important;
}
.fontSize38pxM1366{
font-size:38px!important;
font-size:3.8rem!important;
}
.fontSize40pxM1366{
font-size:40px!important;
font-size:4rem!important;
}
.fontSize42pxM1366{
font-size:42px!important;
font-size:4.2rem!important;
}
.fontSize45pxM1366{
font-size:45px!important;
font-size:4.5rem!important;
}
.fontSize48pxM1366{
font-size:48px!important;
font-size:4.8rem!important;
}
.fontSize50pxM1366{
font-size:50px!important;
font-size:5rem!important;
}
}
@media only screen and (max-width: 1280px) {
.fontSize22pxM1280{
font-size:22px!important;
font-size:2.2rem!important;
}
.fontSize25pxM1280{
font-size:25px!important;
font-size:2.5rem!important;
}
.fontSize28pxM1280{
font-size:28px!important;
font-size:2.8rem!important;
}
.fontSize30pxM1280{
font-size:30px!important;
font-size:3rem!important;
}
.fontSize32pxM1280{
font-size:32px!important;
font-size:3.2rem!important;
}
.fontSize35pxM1280{
font-size:35px!important;
font-size:3.5rem!important;
}
.fontSize38pxM1280{
font-size:38px!important;
font-size:3.8rem!important;
}
.fontSize40pxM1280{
font-size:40px!important;
font-size:4rem!important;
}
.fontSize42pxM1280{
font-size:42px!important;
font-size:4.2rem!important;
}
.fontSize45pxM1280{
font-size:45px!important;
font-size:4.5rem!important;
}
.fontSize48pxM1280{
font-size:48px!important;
font-size:4.8rem!important;
}
.fontSize50pxM1280{
font-size:50px!important;
font-size:5rem!important;
}
}
@media only screen and (max-width: 1024px) {
.fontSize22pxM1024{
font-size:22px!important;
font-size:2.2rem!important;
}
.fontSize25pxM1024{
font-size:25px!important;
font-size:2.5rem!important;
}
.fontSize28pxM1024{
font-size:28px!important;
font-size:2.8rem!important;
}
.fontSize30pxM1024{
font-size:30px!important;
font-size:3rem!important;
}
.fontSize32pxM1024{
font-size:32px!important;
font-size:3.2rem!important;
}
.fontSize35pxM1024{
font-size:35px!important;
font-size:3.5rem!important;
}
.fontSize38pxM1024{
font-size:38px!important;
font-size:3.8rem!important;
}
.fontSize40pxM1024{
font-size:40px!important;
font-size:4rem!important;
}
.fontSize42pxM1024{
font-size:42px!important;
font-size:4.2rem!important;
}
.fontSize45pxM1024{
font-size:45px!important;
font-size:4.5rem!important;
}
.fontSize48pxM1024{
font-size:48px!important;
font-size:4.8rem!important;
}
.fontSize50pxM1024{
font-size:50px!important;
font-size:5rem!important;
}
}
@media only screen and (max-width: 900px) {
/* ajouter M900 pour mobile résolution 900 px */
.fontSizeMoyenMobile900{
font-size:16px!important;
font-size:1.6rem!important;
}
.fontSize10pxM900{
font-size:10px!important;
font-size:1rem!important;
}
.fontSize12pxM900{
font-size:12px!important;
font-size:1.2rem!important;
}
.fontSize15pxM900{
font-size:15px!important;
font-size:1.5rem!important;
}
.fontSize18pxM900{
font-size:18px!important;
font-size:1.8rem!important;
}
.fontSize20pxM900{
font-size:20px!important;
font-size:2rem!important;
}
.fontSize22pxM900 {
font-size:22px!important;
font-size:2.2rem!important;
}
.fontSize25pxM900{
font-size:25px!important;
font-size:2.5rem!important;
}
.fontSize28pxM900{
font-size:28px!important;
font-size:2.8rem!important;
}
.fontSize30pxM900{
font-size:30px!important;
font-size:3rem!important;
}
.fontSize32pxM900{
font-size:32px!important;
font-size:3.2rem!important;
}
.fontSize35pxM900{
font-size:35px!important;
font-size:3.5rem!important;
}
.fontSize38pxM900{
font-size:38px!important;
font-size:3.8rem!important;
}
.fontSize40pxM900{
font-size:40px!important;
font-size:4rem!important;
}
.fontSize42pxM900{
font-size:42px!important;
font-size:4.2rem!important;
}
.fontSize45pxM900{
font-size:45px!important;
font-size:4.5rem!important;
}
.fontSize48pxM900{
font-size:48px!important;
font-size:4.8rem!important;
}
.fontSize50pxM900{
font-size:50px!important;
font-size:5rem!important;
}
}
/* Opacity */
.opacity1, .opacity1Hover:Hover {
opacity:1;
transition:var(--vitesseTransition3);
}
.opacity05{
opacity:0.2;
transition:var(--vitesseTransition3);
}
.opacity05{
opacity:0.5;
transition:var(--vitesseTransition3);
}
.opacity05{
opacity:0.8;
transition:var(--vitesseTransition3);
}
.opacity0, .opacity0Hover:Hover{
opacity:0;
transition:var(--vitesseTransition3);
}
/* ******************************************** Border radius */
.borderRadius10, .borderRadius10px{
border-radius:10px;
}
.borderRadius15,.borderRadius15px {
border-radius:15px;
}
.borderRadius20, .borderRadius20px{
border-radius:20px;
}
.borderRadius25, .borderRadius25px{
border-radius:25px;
}
.borderRadius30, .borderRadius30px {
border-radius:30px;
}
.borderRadius35, .borderRadius35{
border-radius:35px;
}
.borderRadius40, .borderRadius40px {
border-radius:40px;
}
.borderRadius45, .borderRadius45px {
border-radius:45px;
}
.borderRadius50{
border-radius:50px;
}
/* ***************************************************VARIABLE COULEUR */
:root {
/*Blanc c'est Blanc et noir c'est quand il y a plus d'espoir - Johonny Halliday*/
--colorBlanc:#fff;
--colorNoir:#000;
--color1:#7D7D7D;
--color2:#;
--color3:#;
--color4:#;
--color5:#;
--color6:#;
--vitesseTransition2: ease all 0.2s;
--vitesseTransition3: ease all 0.3s;;
--gradient1:;
}
/* ********************************************* COULEURS STANDARDS */
.colorBlanc {
color:white!important;
}
.bgColorBlanc {
background:rgb(255,255,255);
transition:var(--vitesseTransition3);
}
.colorBlancHover:hover{
color:white!important;
transition:var(--vitesseTransition3);
}
.borderColorBlanc{
border-color:rgb(255,255,255)!important;
transition:var(--vitesseTransition3);
}
.bgColorBlancHover:hover{
background:rgb(255,255,255);
transition:var(--vitesseTransition3);
}
.bgColorNoir {
background:rgb(0,0,0)!important;
color:white;
transition:var(--vitesseTransition3);
}
.colorNoir {
color:#000000;
transition:var(--vitesseTransition3);
}
.bgColorNoir2{
background:#181818;
transition:var(--vitesseTransition3);
}
.bgColorLightDark{
background:#282828;
transition:var(--vitesseTransition3);
}
.bgColorLightGrey{
background:rgb(240, 240, 240);
transition:var(--vitesseTransition3);
}
.colorGris{
color:#7D7D7D;
transition:var(--vitesseTransition3);
}
/* ********************************************* COULEUR N°1 */
.color1{
/*vert foncé */
color:var(--color1);
}
.color1Hover {
transition:var(--vitesseTransition3);
}
.color1Hover:hover{
color:var(--color1)!important;
}
.bgColor1 {
/*vert foncé */
background-color:var(--color1);
color:#fff;
}
.bgColor1translucide05{
background-color:rgba(63,184,169,0.5);
}
.bgColor1Hover{
transition:var(--vitesseTransition3);
}
.bgColor1Hover:hover{
background-color:var(--color1)!important;
color:#fff!important;
}
/*vert foncé */
.borderColor1{
border-color:var(--color1)!important;
}
.color1Burned{
color:var(--color1Burned);
}
.borderColor1Burned{
border-color:var(--color1Burned)!important;
}
/* ********************************************* COULEUR N°2 */
.color2{
color:var(--color2)!important;
}
.color2Hover {
transition:var(--vitesseTransition3);
}
.color2Hover:hover{
color:var(--color2)!important;
}
.bgColor2{
background-color:var(--color2)!important;
}
.bgColor2Hover:hover{
transition:var(--vitesseTransition3);
background-color:var(--color2)!important;
}
.borderColor2 {
border-color:var(--color2)!important;
}
.borderColor2Hover:hover{
border-color:var(--color2)!important;
}
/* ********************************************* COULEUR N°3 */
.color3{
/* saumon orange du niger */
color:var(--color3)!important;
}
.color3Hover {
transition:var(--vitesseTransition3);
}
.color3Hover:hover{
color:var(--color3)!important;
}
.bgColor3{
/* saumon orange du niger */
background-color:var(--color3)!important;
}
.bgColor3Hover:hover{
background-color:var(--color3)!important;
}
.borderColor3 {
/* saumon orange du niger */
border-color:var(--color3)!important;
}
/* saumon orange du niger */
.borderColor3Hover:hover{
border-color:var(--color3)!important;
}
.color3milked{
color:#FBD9C9;
}
.borderColor3Milked{
border-color:#FBD9C9!important;
}
/* ********************************************* COULEUR N°4*/
/* saumon rose */
.color4{
/* saumon rose */
color:var(--color4)!important;
}
.color4Hover {
transition:var(--vitesseTransition3);
}
.color4Hover:hover{
color:var(--color4)!important;
}
.bgColor4{
/* saumon rose */
background-color:var(--color4);
}
.borderColor4 {
/* saumon rose */
border-color:var(--color4)!important;
}
/* saumon rose */
.borderColor4Hover:hover{
border-color:var(--color4)!important;
}
/* ********************************************* COULEUR N°5 */
.color5{
/* vert fluo */
color:var(--color5);
}
.color5Hover {
transition:var(--vitesseTransition3);
}
.color5Hover:hover{
color:var(--color5)!important;
}
.bgColor5{
/* vert fluo */
background-color:var(--color5);
}
.borderColor5 {
/* vert fluo */
border-color:var(--color5)!important;
}
/* vert fluo */
.borderColor5Hover:hover{
border-color:var(--color5)!important;
}
/* ********************* couleur speciale */
.bgColorGradien1{
background: rgb(33,131,128);
background: linear-gradient(315deg, rgba(33,131,128,1) 0%, rgba(253,187,45,1) 100%);
}
.bgColorOrangeGradien{
background: rgb(255,153,107);
background: linear-gradient(90deg, rgba(255,153,107,1) 0%, rgba(255,170,133,1) 100%);
}
.color6{
color:var(--color6);
}
.color6Hover {
transition:var(--vitesseTransition3);
}
.color6Hover {
color:var(--color6)!important;
}
.bgColor6{
background-color:var(--color6);
}
.color7{
color:var(--color7);
}
.color7Hover {
transition:var(--vitesseTransition3);
}
.color7Hover:hover{
color:var(--color7)!important;
}
.bgColor7{
background-color:var(--color7);
}
/* ********************* THEME PRIMAWEB */
.color5{
/* vert fluo */
color:var(--color5);
}
.color1{
/*vert foncé */
color:var(--color1)!important;
}
.color2{
/* orange foncé */
color:var(--color2)!important;
}
.color3{
/* saumon orange du niger */
color:var(--color3)!important;
}
.color4{
/* saumon rose */
color:var(--color4)!important;
}
/* class par page et thème : 1 accueil / 2 création site internet / 3 SEO / 4 Communication */
.color1-1{
color:var(--color1);
}
.bgColor1-2{
/* agence de com - purple */
background-color:var(--couleurCreationSite)!important;
}
.color1-2, .colorCreationSite{
/* agence de com - purple */
color:var(--couleurCreationSite);
}
.color1-2Hover {
transition:var(--vitesseTransition3);
}
.color1-2Hover:hover{
color:var(--couleurCreationSite)!important;
}
.bgColor1-2Hover:hover{
background-color:var(--couleurCreationSite)!important;
}
.borderColor1-2 {
/* saumon orange du niger */
border-color:var(--couleurCreationSite)!important;
}
/* ** */
.color1-3, .couleurAgenceSEO{
/* agence seo - jaune/vert */
color:var(--couleurAgenceSEO)!important;
}
.bgColor1-3{
/* agence seo jaune/vert */
background-color:var(--couleurAgenceSEO);
}
.bgColor1-3Hover{
transition:var(--vitesseTransition3);
}
.bgColor1-3Hover:hover{
background-color:var(--couleurAgenceSEO)!important;
}
.bgColor1-4{
/* creation site internet bleu / vert */
background-color:var(--couleurAgendeDeCom)!important;
}
.bgColor1-4Hover:hover{
/* creation site internet bleu / vert */
background-color:var(--couleurAgendeDeCom)!important;
}
.color1-4{
/* agence de com - purple */
color:var(--couleurAgendeDeCom)!important;
}
.colorPurpleRain{
color:#C670E8 !important;
}
.colorPurpleRainHover:hover{
color:#C670E8 !important;
}
.bgColorPurpleRain{
background-color:#C670E8 !important;
}
.bgColorPurpleRainHover:hover{
background-color:#C670E8 !important;
}
/* ********************************************* TAILLE WIDTH EN POURCENTAGE */
.w10 {
width:10%;
}
.w20 {
width:20%;
}
.w30 {
width:30%;
}
.w33 {
width:33%;
}
.w40 {
width:40%;
}
.w45 {
width:45%;
}
.w50{
width:50%;
}
.w55{
width:55%;
}
.w60{
width:60%;
}
.w65{
width:65%;
}
.w70{
width:70%;
}
.w77{
width:77%;
}
.w80 {
width:80%;
}
.w90 {
width:90%;
}
.w100{
width:100%;
}
/* Taille en px */
.w50px{
width:50px;
}
.w100px{
width:100px;
}
.w150px{
width:150px;
}
.w200px{
width:200px;
}
.w250px{
width:250px;
}
.w300px{
width:300px;
}
.w350px{
width:350px;
}
.w400px{
width:400px;
}
.w450px{
width:450px;
}
.w500px{
width:500px;
}
.w550px{
width:550px;
}
.w600px{
width:600px;
}
.w650px{
width:650px;
}
.w700px{
width:700px;
}
.w750px{
width:750px;
}
.w800px{
width:850px;
}
.w800px{
width:850px;
}
.w900px{
width:900px;
}
.w950px{
width:950px;
}
.w1000px{
width:1000px;
}
/* ********************************************* TAILLE WIDTH en px - MOBILE */
@media only screen and (max-width: 1440px) {
.w100pxM1440{
width:100px;
}
.w150pxM1440{
width:150px;
}
.w200pxM1440{
width:200px;
}
.w250pxM1440{
width:250px;
}
.w300pxM1440{
width:300px;
}
.w350pxM1440{
width:350px;
}
.w400pxM1440{
width:400px;
}
.w450pxM1440{
width:450px;
}
.w500pxM1440{
width:500px;
}
.w550pxM1440{
width:550px;
}
.w600pxM1440{
width:600px;
}
.w650pxM1440{
width:650px;
}
.w700pxM1440{
width:700px;
}
.w750pxM1440{
width:750px;
}
.w800pxM1440{
width:850px;
}
.w800pxM1440{
width:850px;
}
.w900pxM1440{
width:900px;
}
.w950pxM1440{
width:950px;
}
.w1000pxM1440{
width:1000px;
}
}
@media only screen and (max-width: 1366px) {
.w100pxM1366{
width:100px;
}
.w150pxM1366{
width:150px;
}
.w200pxM1366{
width:200px;
}
.w250pxM1366{
width:250px;
}
.w300pxM1366{
width:300px;
}
.w350pxM1366{
width:350px;
}
.w400pxM1366{
width:400px;
}
.w450pxM1366{
width:450px;
}
.w500pxM1366{
width:500px;
}
.w550pxM1366{
width:550px;
}
.w600pxM1366{
width:600px;
}
.w650pxM1366{
width:650px;
}
.w700pxM1366{
width:700px;
}
.w750pxM1366{
width:750px;
}
.w800pxM1366{
width:850px;
}
.w800pxM1366{
width:850px;
}
.w900pxM1366{
width:900px;
}
.w950pxM1366{
width:950px;
}
.w1000pxM1366{
width:1000px;
}
}
@media only screen and (max-width: 1280px) {
.w100pxM1280{
width:100px;
}
.w150pxM1280{
width:150px;
}
.w200pxM1280{
width:200px;
}
.w250pxM1280{
width:250px;
}
.w300pxM1280{
width:300px;
}
.w350pxM1280{
width:350px;
}
.w400pxM1280{
width:400px;
}
.w450pxM1280{
width:450px;
}
.w500pxM1280{
width:500px;
}
.w550pxM1280{
width:550px;
}
.w600pxM1280{
width:600px;
}
.w650pxM1280{
width:650px;
}
.w700pxM1280{
width:700px;
}
.w750pxM1280{
width:750px;
}
.w800pxM1280{
width:850px;
}
.w800pxM1280{
width:850px;
}
.w900pxM1280{
width:900px;
}
.w950pxM1280{
width:950px;
}
.w1000pxM1280{
width:1000px;
}
}
@media only screen and (max-width: 1024px) {
.w100pxM1024{
width:100px;
}
.w150pxM1024{
width:150px;
}
.w200pxM1024{
width:200px;
}
.w250pxM1024{
width:250px;
}
.w300pxM1024{
width:300px;
}
.w350pxM1024{
width:350px;
}
.w400pxM1024{
width:400px;
}
.w450pxM1024{
width:450px;
}
.w500pxM1024{
width:500px;
}
.w550pxM1024{
width:550px;
}
.w600pxM1024{
width:600px;
}
.w650pxM1024{
width:650px;
}
.w700pxM1024{
width:700px;
}
.w750pxM1024{
width:750px;
}
.w800pxM1024{
width:850px;
}
.w800pxM1024{
width:850px;
}
.w900pxM1024{
width:900px;
}
.w950pxM1024{
width:950px;
}
.w1000pxM1024{
width:1000px;
}
}
@media only screen and (max-width: 900px) {
.w100pxM900{
width:100px;
}
.w150pxM900{
width:150px;
}
.w200pxM900{
width:200px;
}
.w250pxM900{
width:250px;
}
.w300pxM900{
width:300px;
}
.w350pxM900{
width:350px;
}
.w400pxM900{
width:400px;
}
.w450pxM900{
width:450px;
}
.w500pxM900{
width:500px;
}
.w550pxM900{
width:550px;
}
.w600pxM900{
width:600px;
}
.w650pxM900{
width:650px;
}
.w700pxM900{
width:700px;
}
.w750pxM900{
width:750px;
}
.w800pxM900{
width:850px;
}
.w800pxM900{
width:850px;
}
.w900pxM900{
width:900px;
}
.w950pxM900{
width:950px;
}
.w1000pxM900{
width:1000px;
}
}
/* ***************************** max width */
.maxWidth100px{
max-width:100px;
}
.maxWidth150px{
max-width:150px;
}
.maxWidth200px{
max-width:200px;
}
.maxWidth250px{
max-width:250px;
}
.maxWidth300px{
max-width:300px;
}
.maxWidth350px{
max-width:350px;
}
.maxWidth400px{
max-width:400px;
}
.maxWidth450px{
max-width:450px;
}
.maxWidth500px{
max-width:500px;
}
.maxWidth550px{
max-width:550px;
}
.maxWidth600px{
max-width:600px;
}
.maxWidth650px{
max-width:650px;
}
.maxWidth700px{
max-width:700px;
}
.maxWidth750px{
max-width:750px;
}
.maxWidth800px{
max-width:800px;
}
.maxWidth850px{
max-width:850px;
}
.maxWidth900px{
max-width:900px;
}
.maxWidth950px{
max-width:950px;
}
/* ********************************************* TAILLE WIDTH en % - MOBILE */
@media only screen and (max-width: 1440px) {
.w40Mobil1440, .w40M1440{
width:40%!important;
}
.w50Mobil1440, .w50M1440{
width:50%!important;
}
}
@media only screen and (max-width: 1280px) {
.w400pxM1280{
width:400px;
}
}
@media only screen and (max-width: 1250px) {
.w150pxM1250{
width:150px!important;
}
}
@media only screen and (max-width: 1024px) {
.w100Mobil1024, .w100M1024{
width:100%!important;
}
}
@media only screen and (max-width: 900px) {
.w50Mobil900, .w50M900{
width:50%!important;
}
.w45Mobil900, .w45M900{
width:45%!important;
}
.w20Mobil900, .w20M900{
width:20%!important;
}
.w90Mobil900, .w90M900{
width:90%!important;
}
.w95Mobil900, .w95M900{
width:95%!important;
}
.w100Mobil900, .w100M900{
width:100%!important;
}
.maxWidth95M900{
max-width:95%;
}
.maxWidth100M900{
max-width:100%;
}
}
/* ********************************************* TAILLE WIDTH EN VIEW WIDTH */
.w40vw{
width:40vw;
}
.w50vw{
width:50vw;
}
.w55vw{
width:55vw;
}
.w60vw{
width:60vw;
}
.w65vw{
width:65vw;
}
.w70vw{
width:70vw;
}
.w75vw{
width:75vw;
}
.w80vw{
width:80vw;
}
/* ********************************************* HEIGHT PX*/
.h50px {
height:50px;
}
.h100 {
height:100%;
}
.h100px {
height:100px;
}
.h200px {
height:200px;
}
.h250px {
height:250px;
}
.h300px {
height:300px;
}
.h350px {
height:350px;
}
.h400px {
height:400px;
}
.h450px {
height:450px;
}
.h550px {
height:550px;
}
.h600px {
height:600px;
}
.h700px {
height:700px;
}
.minHeight100px{
min-height:100px;
}
@media only screen and (max-width: 900px) {
.h100pxM900 {
height:100px;
}
.h200pxM900 {
height:200px;
}
.h300pxM900 {
height:300px;
}
.h350pxM900 {
height:350px;
}
.h400pxM900 {
height:400px;
}
.h450pxM900 {
height:450px;
}
.h550pxM900 {
height:550px;
}
.h600pxM900 {
height:600px;
}
.h700pxM900 {
height:700px;
}
}
/* ********************************************* HEIGHT %*/
/* ********************************************* HEIGHT vh*/
.h5vh{
height:5vh;
}
.h10vh{
height:10vh;
}
.h25vh{
height:25vh;
}
.h50vh{
height:50vh;
}
.h60vh{
height:60vh;
}
.h65vh{
height:65vh;
}
.h75vh{
height:75vh;
}
.h80vh{
height:80vh;
}
.h85vh{
height:85vh;
}
.h90vh{
height:90vh;
}
.h95vh{
height:95vh;
}
.h100vh{
height:100vh;
}
/* ********************************************* FLOAT */
.floatLeft{
float:left;
}
.floatRight{
float:right;
}
/* ********************************************* POSITIONS */
.fixed{
position:fixed;
}
.relative{
position:relative;
}
.absolute{
position:absolute;
}
.static{
position:static;
}
.absoluteZeroZero{
position:absolute;
top:0;
left:0;
}
.top-50px{
top:-50px;
}
.top-40px{
top:-40px;
}
.top-20px{
top:-20px;
}
.top-15px{
top:-15px;
}
.top-10px{
top:-10px;
}
.top0{
top:0;
}
.top10px{
top:10px;
}
.top15px{
top:15px;
}
.top20px{
top:20px;
}
.top40px{
top:40px;
}
.top50px{
top:50px;
}
.bottom0{
bottom:0;
}
.left0{
left:0;
}
.left5{
left:5px;
}
.left10{
left:10px;
}
.left15{
left:15px;
}
.left20{
left:20px;
}
.left25{
left:25px;
}
.left30{
left:30px;
}
.right0{
right:0;
}
/* ********************************************* position Mobile */
@media only screen and (max-width: 900px) {
.top0M900{
top:0;
}
.fixedMobil900{
position:fixed;
}
.relativeMobil900{
position:relative;
}
.absoluteMobil900{
position:absolute;
}
.top0Mobil900{
top:0;
}
.bottom0Mobil900{
bottom:0;
}
.left0Mobil900{
left:0;
}
.right0Mobil900{
right:0;
}
.hInitialM900 {
height:initial!important;
}
.staticM900 {
position:static;
}
}
/* ********************************************* Z-INDEX */
/* Attention ! le z-index ne fonctionne que sur un élément positionné exemple relative ou absolute (cf .relative / .absolute)*/
.zIndex-1{
z-index:-1;
}
.zIndex0{
z-index:0;
}
.zIndex1{
z-index:1;
}
.zIndex2{
z-index:2;
}
.zIndex3{
z-index:3;
}
.zIndex4{
z-index:4;
}
.zIndex5{
z-index:5;
}
.zIndex10{
z-index:10;
}
.zIndex100{
z-index:100;
}
.zIndex150{
z-index:150;
}
.zIndex200{
z-index:200;
}
.zIndex1000{
z-index:1000;
}
/* ********************************************* TEXT ALIGN */
.alignCenter {
text-align:center;
}
.alignLeft{
text-align:left;
}
.alignRight {
text-align:right;
}
.alignJustify{
text-align:justify;
}
.justify{
text-align:justify;
}
.verticalAlignMid{
vertical-align:middle;
}
/* ********************************************* TEXT ALIGN Mobil*/
@media only screen and (max-width: 900px) {
.alignCenterMobil900, .alignCenterM900 {
text-align:center!important;
}
.alignLeftMobil900{
text-align:left!important;
}
.alignRightMobil900{
text-align:right!important;
}
}
/* ********************************************* DISPLAY */
.inline{
display:inline;
}
.inlineBlock{
display:inline-block;
}
.inlineBlockMid {
display:inline-block;
vertical-align:middle;
}
.inlineBlockTop {
display:inline-block;
vertical-align:top;
}
.block{
display:block;
}
.inline{
display:inline;
}
.displayNone, .none{
display:none;
}
@media only screen and (max-width: 1760px) {
.blockMobile1760, .blockM1760{
display:block;
}
}
@media only screen and (max-width: 900px) {
.blockMobile900, .blockM900 {
display:block!important;
}
.noneMobile900{
display:none;
}
}
.flex{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.noWrap{
-moz-box-wrap: nowrap!important;
-webkit-box-wrap: nowrap!important;
-webkit-flex-wrap: nowrap!important;
-ms-flexbox-wrap: nowrap!important;
-ms-flex-wrap: nowrap!important;
flex-wrap: nowrap!important;
}
.flexRow{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-moz-box-direction: row;
-webkit-box-direction: row;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flexbox-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.flexRowCenter{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-moz-box-direction: row;
-webkit-box-direction: row;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flexbox-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: center;
-ms-flex-pack: justify;
-moz-box-pack: justify;
justify-content: center;
-moz-box-wrap: wrap;
-webkit-box-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flexbox-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flexColumn{
-moz-box-direction: column;
-webkit-box-direction: column;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flexbox-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.flexRowCenterNoWrap{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-moz-box-direction: row;
-webkit-box-direction: row;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flexbox-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: center;
-ms-flex-pack: justify;
-moz-box-pack: justify;
justify-content: center;
}
.flexStart{
-webkit-box-pack: justify;
-webkit-justify-content: flex-start;
-ms-flex-pack: justify;
-moz-box-pack: justify;
justify-content: flex-start;
}
.alignContentStart{
-webkit-box-align: flex-start;
-webkit-align-items: flex-start;
-moz-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
}
.alignStretch {
-webkit-box-align:stretch;
-webkit-align-items:stretch;
-moz-box-align:stretch;
-ms-flex-align:stretch;
align-items: stretch;
}
.order1{
order:1;
}
.order2{
order:1;
}
/* ****************** Flex-ForMobile ************************* */
@media only screen and (min-width: 900px) {
}
@media only screen and (max-width: 1024px) {
.displayNoneM1024{
display:none;
}
.flexColumnMobil1024{
-moz-box-direction: column;
-webkit-box-direction: column;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flexbox-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.order1Mobil1024, .order1M1024{
order:1;
}
.order2Mobil1024, .order2M1024{
order:2;
}
}
@media only screen and (max-width: 900px) {
.flexColumnMobil900{
-moz-box-direction: column;
-webkit-box-direction: column;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flexbox-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.order1Mobil900, .order1M900{
order:1;
}
.order2Mobil900, .order2M900{
order:2;
}
.displayNoneM900{
display:none;
}
}
/* ****************** Margin ************************* */
.marginAuto {
margin-left:auto;
margin-right:auto;
}
.margin0, .margin0px {
margin:0;
}
.margin5, .margin5px {
margin:5px;
margin:0.5rem;
}
.margin10, .margin10px{
margin:10px;
margin:1rem;
}
.margin20,.margin20px {
margin:20px;
margin:2rem;
}
.margin30 {
margin:30px;
margin:3rem;
}
.margin40 {
margin:40px;
margin:4rem;
}
.margin50 {
margin:50px;
margin:5rem;
}
/* Margin Horizontal cad même margin à droite et à gauche */
.marginHorizontal5px, .marginH5px{
margin-right:5px;
margin-left:5px;
}
.marginHorizontal10px, .marginH10px{
margin-right:10px;
margin-left:10px;
}
.marginHorizontal15px, .marginH15px{
margin-right:15px;
margin-left:15px;
}
.marginHorizontal20px, .marginH20px{
margin-right:20px;
margin-left:20px;
}
.marginHorizontal25px, .marginH25px{
margin-right:25px;
margin-left:25px;
}
.marginHorizontal30px, .marginH30px{
margin-right:30px;
margin-left:30px;
}
.marginHorizontal35px, .marginH35px{
margin-right:35px;
margin-left:35px;
}
.marginHorizontal40px, .marginH40px{
margin-right:40px;
margin-left:40px;
}
.marginHorizontal50px, .marginH50px{
margin-right:50px;
margin-left:50px;
}
.marginHorizontal60px, .marginH60px{
margin-right:60px;
margin-left:60px;
}
.marginHorizontal100px, .marginH80px{
margin-right:80px;
margin-left:80px;
}
.marginHorizontal100px, .marginH100px{
margin-right:100px;
margin-left:100px;
}
.marginHorizontal150px, .marginH150px{
margin-right:150px;
margin-left:150px;
}
.marginHorizontal200px, .marginH200px{
margin-right:200px;
margin-left:200px;
}
@media only screen and (max-width: 1440px) {
.marginHorizontal5pxM1440, .marginH5pxM1440{
margin-right:5px;
margin-left:5px;
}
.marginHorizontal10pxM1440, .marginH10pxM1440{
margin-right:10px;
margin-left:10px;
}
.marginHorizontal15pxM1440, .marginH15pxM1440{
margin-right:15px;
margin-left:15px;
}
.marginHorizontal20pxM1440, .marginH20pxM1440{
margin-right:20px;
margin-left:20px;
}
.marginHorizontal25pxM1440, .marginH25pxM1440{
margin-right:25px;
margin-left:25px;
}
.marginHorizontal30pxM1440, .marginH30pxM1440{
margin-right:30px;
margin-left:30px;
}
.marginHorizontal35pxM1440, .marginH35pxM1440{
margin-right:35px;
margin-left:35px;
}
.marginHorizontal40pxM1440, .marginH40pxM1440{
margin-right:40px;
margin-left:40px;
}
.marginHorizontal50pxM1440, .marginH50pxM1440{
margin-right:50px;
margin-left:50px;
}
.marginHorizontal60pxM1440, .marginH60pxM1440{
margin-right:60px;
margin-left:60px;
}
.marginHorizontal100pxM1440, .marginH80pxM1440{
margin-right:80px;
margin-left:80px;
}
.marginHorizontal100pxM1440, .marginH100pxM1440{
margin-right:100px;
margin-left:100px;
}
.marginHorizontal150pxM1440, .marginH150pxM1440{
margin-right:150px;
margin-left:150px;
}
.marginHorizontal200pxM1440, .marginH200pxM1440{
margin-right:200px;
margin-left:200px;
}
}
@media only screen and (max-width: 1366px) {
.marginHorizontal5pxM1366, .marginH5pxM1366{
margin-right:5px;
margin-left:5px;
}
.marginHorizontal10pxM1366, .marginH10pxM1366{
margin-right:10px;
margin-left:10px;
}
.marginHorizontal15pxM1366, .marginH15pxM1366{
margin-right:15px;
margin-left:15px;
}
.marginHorizontal20pxM1366, .marginH20pxM1366{
margin-right:20px;
margin-left:20px;
}
.marginHorizontal25pxM1366, .marginH25pxM1366{
margin-right:25px;
margin-left:25px;
}
.marginHorizontal30pxM1366, .marginH30pxM1366{
margin-right:30px;
margin-left:30px;
}
.marginHorizontal35pxM1366, .marginH35pxM1366{
margin-right:35px;
margin-left:35px;
}
.marginHorizontal40pxM1366, .marginH40pxM1366{
margin-right:40px;
margin-left:40px;
}
.marginHorizontal50pxM1366, .marginH50pxM1366{
margin-right:50px;
margin-left:50px;
}
.marginHorizontal60pxM1366, .marginH60pxM1366{
margin-right:60px;
margin-left:60px;
}
.marginHorizontal100pxM1366, .marginH80pxM1366{
margin-right:80px;
margin-left:80px;
}
.marginHorizontal100pxM1366, .marginH100pxM1366{
margin-right:100px;
margin-left:100px;
}
.marginHorizontal150pxM1366, .marginH150pxM1366{
margin-right:150px;
margin-left:150px;
}
.marginHorizontal200pxM1366, .marginH200pxM1366{
margin-right:200px;
margin-left:200px;
}
}
@media only screen and (max-width: 1280px) {
.marginHorizontal5pxM1280, .marginH5pxM1280{
margin-right:5px;
margin-left:5px;
}
.marginHorizontal10pxM1280, .marginH10pxM1280{
margin-right:10px;
margin-left:10px;
}
.marginHorizontal15pxM1280, .marginH15pxM1280{
margin-right:15px;
margin-left:15px;
}
.marginHorizontal20pxM1280, .marginH20pxM1280{
margin-right:20px;
margin-left:20px;
}
.marginHorizontal25pxM1280, .marginH25pxM1280{
margin-right:25px;
margin-left:25px;
}
.marginHorizontal30pxM1280, .marginH30pxM1280{
margin-right:30px;
margin-left:30px;
}
.marginHorizontal35pxM1280, .marginH35pxM1280{
margin-right:35px;
margin-left:35px;
}
.marginHorizontal40pxM1280, .marginH40pxM1280{
margin-right:40px;
margin-left:40px;
}
.marginHorizontal50pxM1280, .marginH50pxM1280{
margin-right:50px;
margin-left:50px;
}
.marginHorizontal60pxM1280, .marginH60pxM1280{
margin-right:60px;
margin-left:60px;
}
.marginHorizontal100pxM1280, .marginH80pxM1280{
margin-right:80px;
margin-left:80px;
}
.marginHorizontal100pxM1280, .marginH100pxM1280{
margin-right:100px;
margin-left:100px;
}
.marginHorizontal150pxM1280, .marginH150pxM1280{
margin-right:150px;
margin-left:150px;
}
.marginHorizontal200pxM1280, .marginH200pxM1280{
margin-right:200px;
margin-left:200px;
}
}
@media only screen and (max-width: 1024px) {
.marginHorizontal5pxM1024, .marginH5pxM1024{
margin-right:5px;
margin-left:5px;
}
.marginHorizontal10pxM1024, .marginH10pxM1024{
margin-right:10px;
margin-left:10px;
}
.marginHorizontal15pxM1024, .marginH15pxM1024{
margin-right:15px;
margin-left:15px;
}
.marginHorizontal20pxM1024, .marginH20pxM1024{
margin-right:20px;
margin-left:20px;
}
.marginHorizontal25pxM1024, .marginH25pxM1024{
margin-right:25px;
margin-left:25px;
}
.marginHorizontal30pxM1024, .marginH30pxM1024{
margin-right:30px;
margin-left:30px;
}
.marginHorizontal35pxM1024, .marginH35pxM1024{
margin-right:35px;
margin-left:35px;
}
.marginHorizontal40pxM1024, .marginH40pxM1024{
margin-right:40px;
margin-left:40px;
}
.marginHorizontal50pxM1024, .marginH50pxM1024{
margin-right:50px;
margin-left:50px;
}
.marginHorizontal60pxM1024, .marginH60pxM1024{
margin-right:60px;
margin-left:60px;
}
.marginHorizontal100pxM1024, .marginH80pxM1024{
margin-right:80px;
margin-left:80px;
}
.marginHorizontal100pxM1024, .marginH100pxM1024{
margin-right:100px;
margin-left:100px;
}
.marginHorizontal150pxM1024, .marginH150pxM1024{
margin-right:150px;
margin-left:150px;
}
.marginHorizontal200pxM1024, .marginH200pxM1024{
margin-right:200px;
margin-left:200px;
}
}
@media only screen and (max-width: 900px) {
.marginHorizontal5pxM900, .marginH5pxM900{
margin-right:5px;
margin-left:5px;
}
.marginHorizontal10pxM900, .marginH10pxM900{
margin-right:10px;
margin-left:10px;
}
.marginHorizontal15pxM900, .marginH15pxM900{
margin-right:15px;
margin-left:15px;
}
.marginHorizontal20pxM900, .marginH20pxM900{
margin-right:20px;
margin-left:20px;
}
.marginHorizontal25pxM900, .marginH25pxM900{
margin-right:25px;
margin-left:25px;
}
.marginHorizontal30pxM900, .marginH30pxM900{
margin-right:30px;
margin-left:30px;
}
.marginHorizontal35pxM900, .marginH35pxM900{
margin-right:35px;
margin-left:35px;
}
.marginHorizontal40pxM900, .marginH40pxM900{
margin-right:40px;
margin-left:40px;
}
.marginHorizontal50pxM900, .marginH50pxM900{
margin-right:50px;
margin-left:50px;
}
.marginHorizontal60pxM900, .marginH60pxM900{
margin-right:60px;
margin-left:60px;
}
.marginHorizontal100pxM900, .marginH80pxM900{
margin-right:80px;
margin-left:80px;
}
.marginHorizontal100pxM900, .marginH100pxM900{
margin-right:100px;
margin-left:100px;
}
.marginHorizontal150pxM900, .marginH150pxM900{
margin-right:150px;
margin-left:150px;
}
.marginHorizontal200pxM900, .marginH200pxM900{
margin-right:200px;
margin-left:200px;
}
}
/* Margin Vertical cad même margin en Haut et en Bas */
.marginVertical0px, .marginV0px{
margin-top:0px;
margin-bottom:0px;
}
.marginVertical5px, .marginV5px{
margin-top:5px;
margin-bottom:5px;
}
.marginVertical10px, .marginV10px{
margin-top:10px;
margin-bottom:10px;
}
.marginVertical15px, .marginV15px{
margin-top:15px;
margin-bottom:15px;
}
.marginVertical20px, .marginV20px{
margin-top:20px;
margin-bottom:20px;
}
.marginVertical25px, .marginV25px{
margin-top:25px;
margin-bottom:25px;
}
.marginVertical30px, .marginV30px{
margin-top:30px;
margin-bottom:30px;
}
.marginVertical35px, .marginV35px{
margin-top:35px;
margin-bottom:35px;
}
.marginVertical40px, .marginV40px{
margin-top:40px;
margin-left:40px;
}
@media only screen and (max-width: 1440px) {
.marginVertical0pxM1440, .marginV0pxM1440{
margin-top:0px;
margin-bottom:0px;
}
.marginVertical5pxM1440, .marginV5pxM1440{
margin-top:5px;
margin-bottom:5px;
}
.marginVertical10pxM1440, .marginV10pxM1440{
margin-top:10px;
margin-bottom:10px;
}
.marginVertical15pxM1440, .marginV15pxM1440{
margin-top:15px;
margin-bottom:15px;
}
.marginVertical20pxM1440, .marginV20pxM1440{
margin-top:20px;
margin-bottom:20px;
}
.marginVertical25pxM1440, .marginV25pxM1440{
margin-top:25px;
margin-bottom:25px;
}
.marginVertical30pxM1440, .marginV30pxM1440{
margin-top:30px;
margin-bottom:30px;
}
.marginVertical35pxM1440, .marginV35pxM1440{
margin-top:35px;
margin-bottom:35px;
}
.marginVertical40pxM1440, .marginV40pxM1440{
margin-top:40px;
margin-left:40px;
}
}
@media only screen and (max-width: 1366px) {
.marginVertical0pxM1366, .marginV0pxM1366{
margin-top:0px;
margin-bottom:0px;
}
.marginVertical5pxM1366, .marginV5pxM1366{
margin-top:5px;
margin-bottom:5px;
}
.marginVertical10pxM1366, .marginV10pxM1366{
margin-top:10px;
margin-bottom:10px;
}
.marginVertical15pxM1366, .marginV15pxM1366{
margin-top:15px;
margin-bottom:15px;
}
.marginVertical20pxM1366, .marginV20pxM1366{
margin-top:20px;
margin-bottom:20px;
}
.marginVertical25pxM1366, .marginV25pxM1366{
margin-top:25px;
margin-bottom:25px;
}
.marginVertical30pxM1366, .marginV30pxM1366{
margin-top:30px;
margin-bottom:30px;
}
.marginVertical35pxM1366, .marginV35pxM1366{
margin-top:35px;
margin-bottom:35px;
}
.marginVertical40pxM1366, .marginV40pxM1366{
margin-top:40px;
margin-left:40px;
}
}
@media only screen and (max-width: 1280px) {
.marginVertical0pxM1280, .marginV0pxM1280{
margin-top:0px;
margin-bottom:0px;
}
.marginVertical5pxM1280, .marginV5pxM1280{
margin-top:5px;
margin-bottom:5px;
}
.marginVertical10pxM1280, .marginV10pxM1280{
margin-top:10px;
margin-bottom:10px;
}
.marginVertical15pxM1280, .marginV15pxM1280{
margin-top:15px;
margin-bottom:15px;
}
.marginVertical20pxM1280, .marginV20pxM1280{
margin-top:20px;
margin-bottom:20px;
}
.marginVertical25pxM1280, .marginV25pxM1280{
margin-top:25px;
margin-bottom:25px;
}
.marginVertical30pxM1280, .marginV30pxM1280{
margin-top:30px;
margin-bottom:30px;
}
.marginVertical35pxM1280, .marginV35pxM1280{
margin-top:35px;
margin-bottom:35px;
}
.marginVertical40pxM1280, .marginV40pxM1280{
margin-top:40px;
margin-left:40px;
}
}
@media only screen and (max-width: 1024px) {
.marginVertical0pxM1024, .marginV0pxM1024{
margin-top:0px;
margin-bottom:0px;
}
.marginVertical5pxM1024, .marginV5pxM1024{
margin-top:5px;
margin-bottom:5px;
}
.marginVertical10pxM1024, .marginV10pxM1024{
margin-top:10px;
margin-bottom:10px;
}
.marginVertical15pxM1024, .marginV15pxM1024{
margin-top:15px;
margin-bottom:15px;
}
.marginVertical20pxM1024, .marginV20pxM1024{
margin-top:20px;
margin-bottom:20px;
}
.marginVertical25pxM1024, .marginV25pxM1024{
margin-top:25px;
margin-bottom:25px;
}
.marginVertical30pxM1024, .marginV30pxM1024{
margin-top:30px;
margin-bottom:30px;
}
.marginVertical35pxM1024, .marginV35pxM1024{
margin-top:35px;
margin-bottom:35px;
}
.marginVertical40pxM1024, .marginV40pxM1024{
margin-top:40px;
margin-left:40px;
}
}
@media only screen and (max-width: 900px) {
.marginVertical0pxM900, .marginV0pxM900{
margin-top:0px;
margin-bottom:0px;
}
.marginVertical5pxM900, .marginV5pxM900{
margin-top:5px;
margin-bottom:5px;
}
.marginVertical10pxM900, .marginV10pxM900{
margin-top:10px;
margin-bottom:10px;
}
.marginVertical15pxM900, .marginV15pxM900{
margin-top:15px;
margin-bottom:15px;
}
.marginVertical20pxM900, .marginV20pxM900{
margin-top:20px;
margin-bottom:20px;
}
.marginVertical25pxM900, .marginV25pxM900{
margin-top:25px;
margin-bottom:25px;
}
.marginVertical30pxM900, .marginV30pxM900{
margin-top:30px;
margin-bottom:30px;
}
.marginVertical35pxM900, .marginV35pxM900{
margin-top:35px;
margin-bottom:35px;
}
.marginVertical40pxM900, .marginV40pxM900{
margin-top:40px;
margin-left:40px;
}
}
/* margin Top */
.marginTop0{
margin-top:0px;
margin-top:0rem;
}
.marginTop5px{
margin-top:5px;
margin-top:0.5rem;
}
.marginTop10px{
margin-top:10px;
margin-top:1rem;
}
.marginTop15px{
margin-top:15px;
margin-top:1.5rem;
}
.marginTop20px{
margin-top:20px;
margin-top:2rem;
}
.marginTop25px{
margin-top:25px;
margin-top:2.5rem;
}
.marginTop30px{
margin-top:30px;
margin-top:3rem;
}
.marginTop35px{
margin-top:35px;
margin-top:3.5rem;
}
.marginTop40px{
margin-top:40px;
margin-top:4rem;
}
.marginTop45px, .marginTop45, .mTop45 {
margin-top:45px;
margin-top:4.5rem;
}
.marginTop50px, .marginTop50, .mTop50 {
margin-top:50px;
margin-top:5rem;
}
.marginTop55px{
margin-top:55px;
margin-top:5.5rem;
}
.marginTop60px{
margin-top:60px;
margin-top:6rem;
}
.marginTop65px{
margin-top:65px;
margin-top:6.5rem;
}
.marginTop70px{
margin-top:70px;
margin-top:7rem;
}
.marginTop75px{
margin-top:75px;
margin-top:7.5rem;
}
.marginTop80px{
margin-top:80px;
margin-top:8rem;
}
.marginTop85px{
margin-top:85px;
margin-top:8.5rem;
}
.marginTop90px{
margin-top:90px;
margin-top:9rem;
}
.marginTop95px{
margin-top:95px;
margin-top:9.5rem;
}
.marginTop100px{
margin-top:100px;
margin-top:10rem;
}
@media only screen and (max-width: 900px) {
.marginTop0M900{
margin-top:0px;
margin-top:0rem;
}
.marginTop5pxM900{
margin-top:5px;
margin-top:0.5rem;
}
.marginTop10pxM900{
margin-top:10px;
margin-top:1rem;
}
.marginTop15pxM900{
margin-top:15px;
margin-top:1.5rem;
}
.marginTop20pxM900{
margin-top:20px;
margin-top:2rem;
}
.marginTop25pxM900{
margin-top:25px;
margin-top:2.5rem;
}
.marginTop30pxM900{
margin-top:30px;
margin-top:3rem;
}
.marginTop35pxM900{
margin-top:35px;
margin-top:3.5rem;
}
.marginTop40pxM900{
margin-top:40px;
margin-top:4rem;
}
.marginTop45pxM900, .marginTop45M900, .mTop45M900 {
margin-top:45px;
margin-top:4.5rem;
}
.marginTop50pxM900, .marginTop50M900, .mTop50M900 {
margin-top:50px;
margin-top:5rem;
}
.marginTop55pxM900{
margin-top:55px;
margin-top:5.5rem;
}
.marginTop60pxM900{
margin-top:60px;
margin-top:6rem;
}
.marginTop65pxM900{
margin-top:65px;
margin-top:6.5rem;
}
.marginTop70pxM900{
margin-top:70px;
margin-top:7rem;
}
.marginTop75pxM900{
margin-top:75px;
margin-top:7.5rem;
}
.marginTop80pxM900{
margin-top:80px;
margin-top:8rem;
}
.marginTop85pxM900{
margin-top:85px;
margin-top:8.5rem;
}
.marginTop90pxM900{
margin-top:90px;
margin-top:9rem;
}
.marginTop95pxM900{
margin-top:95px;
margin-top:9.5rem;
}
.marginTop100pxM900{
margin-top:100px;
margin-top:10rem;
}
.marginTop150pxM900{
margin-top:150px;
margin-top:15rem;
}
.marginTop200pxM900{
margin-top:200px;
margin-top:20rem;
}
}
/* margin bottom */
.marginBottom0{
margin-bottom:0px;
margin-bottom:0rem;
}
.marginBottom5px{
margin-bottom:5px;
margin-bottom:0.5rem;
}
.marginBottom10px{
margin-bottom:10px;
margin-bottom:1rem;
}
.marginBottom15px{
margin-bottom:15px;
margin-bottom:1.5rem;
}
.marginBottom20px{
margin-bottom:20px;
margin-bottom:2rem;
}
.marginBottom25px{
margin-bottom:25px;
margin-bottom:2.5rem;
}
.marginBottom30px{
margin-bottom:30px;
margin-bottom:3rem;
}
.marginBottom35px{
margin-bottom:35px;
margin-bottom:3.5rem;
}
.marginBottom40px{
margin-bottom:40px;
margin-bottom:4rem;
}
.marginBottom45px{
margin-bottom:45px;
margin-bottom:4.5rem;
}
.marginBottom50px{
margin-bottom:50px;
margin-bottom:5rem;
}
.marginBottom55px{
margin-bottom:55px;
margin-bottom:5.5rem;
}
.marginBottom60px{
margin-bottom:60px;
margin-bottom:6rem;
}
.marginBottom65px{
margin-bottom:65px;
margin-bottom:6.5rem;
}
.marginBottom70px{
margin-bottom:70px;
margin-bottom:7rem;
}
.marginBottom75px{
margin-bottom:75px;
margin-bottom:7.5rem;
}
.marginBottom80px{
margin-bottom:80px;
margin-bottom:8rem;
}
.marginBottom85px{
margin-bottom:85px;
margin-bottom:8.5rem;
}
.marginBottom90px{
margin-bottom:90px;
margin-bottom:9rem;
}
.marginBottom95px{
margin-bottom:95px;
margin-bottom:9.5rem;
}
.marginBottom100px{
margin-bottom:100px;
margin-bottom:10rem;
}
.marginRight5px, .marginRight5{
margin-right:5px;
margin-right:0.5rem;
}
.marginRight10px, .marginRight10{
margin-right:10px;
margin-right:1rem;
}
.marginRight15px, .marginRight15{
margin-right:15px;
margin-right:1.5rem;
}
.marginRight20px, .marginRight20{
margin-right:20px;
margin-right:2rem;
}
.marginRight25px, .marginRight25{
margin-right:25px;
margin-right:2.5rem;
}
.marginRight30px, .marginRight30{
margin-right:30px;
margin-right:3rem;
}
.marginRight35px, .marginRight35{
margin-right:35px;
margin-right:3.5rem;
}
.marginRight40px, .marginRight40{
margin-right:40px;
margin-right:4rem;
}
.marginRight45px, .marginRight45{
margin-right:45px;
margin-right:4.5rem;
}
.marginRight50px, .marginRight50{
margin-right:50px;
margin-right:5rem;
}
.marginRight55px, .marginRight55{
margin-right:55px;
margin-right:5.5rem;
}
.marginRight60px, .marginRight60{
margin-right:60px;
margin-right:6rem;
}
.marginRight65px, .marginRight65{
margin-right:65px;
margin-right:6.5rem;
}
.marginRight70px, .marginRight70{
margin-right:70px;
margin-right:7rem;
}
.marginLeft5px, .marginLeft5{
margin-left:5px;
margin-left:0.5rem;
}
.marginLeft10px, .marginLeft10{
margin-left:10px;
margin-left:1rem;
}
.marginLeft15px, .marginLeft15{
margin-left:15px;
margin-left:1.5rem;
}
.marginLeft20px, .marginLeft20{
margin-left:20px;
margin-left:2rem;
}
.marginLeft25px, .marginLeft25{
margin-left:25px;
margin-left:2.5rem;
}
.marginLeft30px, .marginLeft30{
margin-left:30px;
margin-left:3rem;
}
.marginLeft35px, .marginLeft35{
margin-left:35px;
margin-left:3.5rem;
}
.marginLeft40px, .marginLeft40{
margin-left:40px;
margin-left:4rem;
}
.marginLeft45px, .marginLeft45{
margin-left:45px;
margin-left:4.5rem;
}
.marginLeft50px, .marginLeft50{
margin-left:50px;
margin-left:5rem;
}
.marginLeft55px, .marginLeft55{
margin-left:55px;
margin-left:5.5rem;
}
.marginLeft60px, .marginLeft60{
margin-left:60px;
margin-left:6rem;
}
.marginLeft65px, .marginLeft65{
margin-left:65px;
margin-left:6.5rem;
}
.marginLeft70px, .marginLeft70{
margin-left:70px;
margin-left:7rem;
}
.marginLeftRight10{
margin-left:10px;
margin-left:1rem;
margin-right:10px;
margin-right:1rem;
}
.marginLeftRight15{
margin-left:15px;
margin-left:1.5rem;
margin-right:15px;
margin-right:1.5rem;
}
.margin15 {
margin:15px;
margin:1.5rem;
}
.margin10-0{
margin:10px 0;
margin:1rem 0;
}
/* ****************** Padding ************************* */
.padding0{
padding:0px;
padding:0rem;
}
.padding5, .padding5px {
padding:5px;
padding:0.5rem;
}
.padding10px, .padding10 {
padding:10px;
padding:1rem;
}
.padding15, .padding15px{
padding:15px;
padding:1.5rem;
}
.padding20{
padding:20px;
padding:2rem;
}
.padding25{
padding:25px;
padding:2.5rem;
}
.padding50, .padding50px{
padding:50px;
padding:5rem;
}
.padding60{
padding:60px;
padding:6rem;
}
.padding65{
padding:65px;
padding:6.5rem;
}
.padding75{
padding:75px;
padding:7.5rem;
}
.padding100{
padding:100px;
padding:10rem;
}
/* ----Padding Responsive */
@media only screen and (max-width: 1440px) {
.padding0M1440{
padding:0px;
padding:0rem;
}
.padding5M1440, .padding5pxM1440 {
padding:5px;
padding:0.5rem;
}
.padding10pxM1440, .padding10M1440 {
padding:10px;
padding:1rem;
}
.padding15M1440, .padding15pxM1440{
padding:15px;
padding:1.5rem;
}
.padding20M1440{
padding:20px;
padding:2rem;
}
.padding25M1440{
padding:25px;
padding:2.5rem;
}
.padding50M1440, .padding50pxM1440{
padding:50px;
padding:5rem;
}
.padding60M1440{
padding:60px;
padding:6rem;
}
.padding65M1440{
padding:65px;
padding:6.5rem;
}
.padding75M1440{
padding:75px;
padding:7.5rem;
}
.padding100M1440{
padding:100px;
padding:10rem;
}
}
@media only screen and (max-width: 1366px) {
.padding0M1366{
padding:0px;
padding:0rem;
}
.padding5M1366, .padding5pxM1366 {
padding:5px;
padding:0.5rem;
}
.padding10pxM1366, .padding10M1366 {
padding:10px;
padding:1rem;
}
.padding15M1366, .padding15pxM1366{
padding:15px;
padding:1.5rem;
}
.padding20M1366{
padding:20px;
padding:2rem;
}
.padding25M1366{
padding:25px;
padding:2.5rem;
}
.padding50M1366, .padding50pxM1366{
padding:50px;
padding:5rem;
}
.padding60M1366{
padding:60px;
padding:6rem;
}
.padding65M1366{
padding:65px;
padding:6.5rem;
}
.padding75M1366{
padding:75px;
padding:7.5rem;
}
.padding100M1366{
padding:100px;
padding:10rem;
}
}
@media only screen and (max-width: 1280px) {
.padding0M1280{
padding:0px;
padding:0rem;
}
.padding5M1280, .padding5pxM1280 {
padding:5px;
padding:0.5rem;
}
.padding10pxM1280, .padding10M1280 {
padding:10px;
padding:1rem;
}
.padding15M1280, .padding15pxM1280{
padding:15px;
padding:1.5rem;
}
.padding20M1280{
padding:20px;
padding:2rem;
}
.padding25M1280{
padding:25px;
padding:2.5rem;
}
.padding50M1280, .padding50pxM1280{
padding:50px;
padding:5rem;
}
.padding60M1280{
padding:60px;
padding:6rem;
}
.padding65M1280{
padding:65px;
padding:6.5rem;
}
.padding75M1280{
padding:75px;
padding:7.5rem;
}
.padding100M1280{
padding:100px;
padding:10rem;
}
}
@media only screen and (max-width: 1024px) {
.padding0M1024{
padding:0px;
padding:0rem;
}
.padding5M1024, .padding5pxM1024 {
padding:5px;
padding:0.5rem;
}
.padding10pxM1024, .padding10M1024 {
padding:10px;
padding:1rem;
}
.padding15M1024, .padding15pxM1024{
padding:15px;
padding:1.5rem;
}
.padding20M1024{
padding:20px;
padding:2rem;
}
.padding25M1024{
padding:25px;
padding:2.5rem;
}
.padding50M1024, .padding50pxM1024{
padding:50px;
padding:5rem;
}
.padding60M1024{
padding:60px;
padding:6rem;
}
.padding65M1024{
padding:65px;
padding:6.5rem;
}
.padding75M1024{
padding:75px;
padding:7.5rem;
}
.padding100M1024{
padding:100px;
padding:10rem;
}
}
@media only screen and (max-width: 900px) {
.padding0M900{
padding:0px;
padding:0rem;
}
.padding5M900, .padding5pxM900 {
padding:5px;
padding:0.5rem;
}
.padding10pxM900, .padding10M900 {
padding:10px;
padding:1rem;
}
.padding15M900, .padding15pxM900{
padding:15px;
padding:1.5rem;
}
.padding20M900{
padding:20px;
padding:2rem;
}
.padding25M900{
padding:25px;
padding:2.5rem;
}
.padding50M900, .padding50pxM900{
padding:50px;
padding:5rem;
}
.padding60M900{
padding:60px;
padding:6rem;
}
.padding65M900{
padding:65px;
padding:6.5rem;
}
.padding75M900{
padding:75px;
padding:7.5rem;
}
.padding100M900{
padding:100px;
padding:10rem;
}
}
/* padding top */
.paddingTop0{
padding:0px!important;
padding:0rem!important;
}
.paddingTop5, .paddingTop5px{
padding-top:5px;
padding-top:0.5rem;
}
.paddingTop10, .paddingTop10px{
padding-top:10px;
padding-top:1rem;
}
.paddingTop15, .paddingTop15px{
padding-top:15px;
padding-top:1.5rem;
}
.paddingTop25, .paddingTop25px{
padding-top:25px;
padding-top:2.5rem;
}
.paddingTop50, .paddingTop50px{
padding-top:50px;
padding-top:5rem;
}
.paddingTop100, .paddingTop100px{
padding-top:100px;
padding-top:10rem;
}
.paddingTop150, .paddingTop150px{
padding-top:150px;
padding-top:15rem;
}
@media screen and (max-width:900px){
.paddingTop0M900{
padding:0px!important;
padding:0rem!important;
}
.paddingTop5M900, .paddingTop5pxM900{
padding-top:5px;
padding-top:0.5rem;
}
.paddingTop10M900, .paddingTop10pxM900{
padding-top:10px;
padding-top:1rem;
}
.paddingTop15M900, .paddingTop15pxM900{
padding-top:15px;
padding-top:1.5rem;
}
.paddingTop25M900, .paddingTop25pxM900{
padding-top:25px;
padding-top:2.5rem;
}
.paddingTop50M900, .paddingTop50pxM900{
padding-top:50px;
padding-top:5rem;
}
.paddingTop100M900, .paddingTop100pxM900{
padding-top:100px;
padding-top:10rem;
}
.paddingTop150M900, .paddingTop150pxM900{
padding-top:150px;
padding-top:15rem;
}
.paddingTop110pxM900 {
padding-top:110px!important;
padding-top:11rem!important;
}
}
.paddingBottom0,.paddingBottom0px {
padding-bottom:0px!important;
padding-bottom:0rem!important;
}
.paddingBottom5, .paddingBottom5px{
padding-bottom:5px;
padding-bottom:0.5rem;
}
.paddingBottom10, .paddingBottom10px{
padding-bottom:10px;
padding-bottom:1rem;
}
.paddingBottom15, .paddingBottom15px{
padding-bottom:15px;
padding-bottom:1.5rem;
}
.paddingBottom25, .paddingBottom25px{
padding-bottom:25px;
padding-bottom:2.5rem;
}
.paddingBottom50, .paddingBottom60px{
padding-bottom:60px;
padding-bottom:6rem;
}
.paddingBottom55, .paddingBottom55px{
padding-bottom:55px;
padding-bottom:5.5rem;
}
.paddingBottom60, .paddingBottom55px{
padding-bottom:60px;
padding-bottom:6rem;
}
.paddingBottom100, .paddingBottom100px {
padding-bottom:100px;
padding-bottom:10rem;
}
.paddingBottom150, .paddingBottom150px {
padding-bottom:150px;
padding-bottom:15rem;
}
.paddingBottom200, .paddingBottom200px {
padding-bottom:200px;
padding-bottom:20rem;
}
@media screen and (max-width:900px){
.paddingBottom0M900,.paddingBottom0pxM900 {
padding-bottom:0px!important;
padding-bottom:0rem!important;
}
.paddingBottom5M900, .paddingBottom5pxM900 {
padding-bottom:5px;
padding-bottom:0.5rem;
}
.paddingBottom10M900, .paddingBottom10pxM900 {
padding-bottom:10px;
padding-bottom:1rem;
}
.paddingBottom15M900, .paddingBottom15pxM900 {
padding-bottom:15px;
padding-bottom:1.5rem;
}
.paddingBottom25M900, .paddingBottom25pxM900 {
padding-bottom:25px;
padding-bottom:2.5rem;
}
.paddingBottom50M900, .paddingBottom50pxM900 {
padding-bottom:50px;
padding-bottom:5rem;
}
.paddingBottom100M900, .paddingBottom100pxM900 {
padding-bottom:100px;
padding-bottom:10rem;
}
.paddingBottom150M900, .paddingBottom150pxM900 {
padding-bottom:150px;
padding-bottom:15rem;
}
.paddingBottom200M900, .paddingBottom200pxM900 {
padding-bottom:200px;
padding-bottom:20rem;
}
}
/* Padding Vertical haut et bas / équivalent de padding-top + padding-bottom */
.paddingV5{
padding:5px 0;
padding:0.5rem 0;
}
.paddingV8{
padding:8px 0;
padding:0.8rem 0;
}
.paddingV10{
padding:10px 0;
padding:1rem 0;
}
.paddingV15{
padding:15px 0;
padding:1.5rem 0;
}
.paddingV18{
padding:18px 0;
padding:1.8rem 0;
}
.paddingV20{
padding:20px 0;
padding:2rem 0;
}
.paddingV25{
padding:25px 0;
padding:2.5rem 0;
}
.paddingV28{
padding:28px 0;
padding:2.8rem 0;
}
.paddingV50{
padding:50px 0;
padding:5rem 0;
}
.paddingV55{
padding:55px 0;
padding:5.5rem 0;
}
.paddingV80{
padding:80px 0;
padding:8rem 0;
}
.paddingV100{
padding:100px 0;
padding:10rem 0;
}
.paddingV150{
padding:150px 0;
padding:15rem 0;
}
.paddingV180{
padding:180px 0;
padding:18rem 0;
}
.paddingV200{
padding:200px 0;
padding:20rem 0;
}
.paddingV220{
padding:220px 0;
padding:22rem 0;
}
.paddingV250{
padding:250px 0;
padding:25rem 0;
}
.paddingV280{
padding:280px 0;
padding:28rem 0;
}
/* ancienne nomenclature */
.padding20-0{
padding:100px 0;
padding:10rem 0;
}
.padding50-0{
padding:50px 0;
padding:5rem 0;
}
.padding80-0{
padding:80px 0;
padding:8rem 0;
}
.padding100-0{
padding:100px 0;
padding:10rem 0;
}
.padding150-0{
padding:150px 0;
padding:15rem 0;
}
.padding180-0{
padding:180px 0;
padding:18rem 0;
}
.padding200-0{
padding:200px 0;
padding:20rem 0;
}
.padding250-0{
padding:250px 0;
padding:25rem 0;
}
@media screen and (max-width:1440px){
.paddingV5M1440{
padding:5px 0;
padding:0.5rem 0;
}
.paddingV8M1440{
padding:8px 0;
padding:0.8rem 0;
}
.paddingV10M1440{
padding:10px 0;
padding:1rem 0;
}
.paddingV15M1440{
padding:15px 0;
padding:1.5rem 0;
}
.paddingV18M1440{
padding:18px 0;
padding:1.8rem 0;
}
.paddingV20M1440{
padding:20px 0;
padding:2rem 0;
}
.paddingV25M1440{
padding:25px 0;
padding:2.5rem 0;
}
.paddingV28M1440{
padding:28px 0;
padding:2.8rem 0;
}
.paddingV50M1440{
padding:50px 0;
padding:5rem 0;
}
.paddingV55M1440{
padding:55px 0;
padding:5.5rem 0;
}
.paddingV80M1440{
padding:80px 0;
padding:8rem 0;
}
.paddingV100M1440{
padding:100px 0;
padding:10rem 0;
}
.paddingV150M1440{
padding:150px 0;
padding:15rem 0;
}
.paddingV180M1440{
padding:180px 0;
padding:18rem 0;
}
.paddingV200M1440{
padding:200px 0;
padding:20rem 0;
}
.paddingV220M1440{
padding:220px 0;
padding:22rem 0;
}
.paddingV250M1440{
padding:250px 0;
padding:25rem 0;
}
.paddingV280M1440{
padding:280px 0;
padding:28rem 0;
}
/* ancienne nomenclature */
.padding20-0M1440{
padding:100px 0;
padding:10rem 0;
}
.padding50-0M1440{
padding:50px 0;
padding:5rem 0;
}
.padding80-0M1440{
padding:80px 0;
padding:8rem 0;
}
.padding100-0M1440{
padding:100px 0;
padding:10rem 0;
}
.padding150-0M1440{
padding:150px 0;
padding:15rem 0;
}
.padding180-0M1440{
padding:180px 0;
padding:18rem 0;
}
.padding200-0M1440{
padding:200px 0;
padding:20rem 0;
}
.padding250-0M1440{
padding:250px 0;
padding:25rem 0;
}
}
@media screen and (max-width:1366px){
.paddingV5M1366{
padding:5px 0;
padding:0.5rem 0;
}
.paddingV8M1366{
padding:8px 0;
padding:0.8rem 0;
}
.paddingV10M1366{
padding:10px 0;
padding:1rem 0;
}
.paddingV15M1366{
padding:15px 0;
padding:1.5rem 0;
}
.paddingV18M1366{
padding:18px 0;
padding:1.8rem 0;
}
.paddingV20M1366{
padding:20px 0;
padding:2rem 0;
}
.paddingV25M1366{
padding:25px 0;
padding:2.5rem 0;
}
.paddingV28M1366{
padding:28px 0;
padding:2.8rem 0;
}
.paddingV50M1366{
padding:50px 0;
padding:5rem 0;
}
.paddingV55M1366{
padding:55px 0;
padding:5.5rem 0;
}
.paddingV80M1366{
padding:80px 0;
padding:8rem 0;
}
.paddingV100M1366{
padding:100px 0;
padding:10rem 0;
}
.paddingV150M1366{
padding:150px 0;
padding:15rem 0;
}
.paddingV180M1366{
padding:180px 0;
padding:18rem 0;
}
.paddingV200M1366{
padding:200px 0;
padding:20rem 0;
}
.paddingV220M1366{
padding:220px 0;
padding:22rem 0;
}
.paddingV250M1366{
padding:250px 0;
padding:25rem 0;
}
.paddingV280M1366{
padding:280px 0;
padding:28rem 0;
}
/* ancienne nomenclature */
.padding20-0M1366{
padding:100px 0;
padding:10rem 0;
}
.padding50-0M1366{
padding:50px 0;
padding:5rem 0;
}
.padding80-0M1366{
padding:80px 0;
padding:8rem 0;
}
.padding100-0M1366{
padding:100px 0;
padding:10rem 0;
}
.padding150-0M1366{
padding:150px 0;
padding:15rem 0;
}
.padding180-0M1366{
padding:180px 0;
padding:18rem 0;
}
.padding200-0M1366{
padding:200px 0;
padding:20rem 0;
}
.padding250-0M1366{
padding:250px 0;
padding:25rem 0;
}
}
@media screen and (max-width:1280px){
.paddingV5M1280{
padding:5px 0;
padding:0.5rem 0;
}
.paddingV8M1280{
padding:8px 0;
padding:0.8rem 0;
}
.paddingV10M1280{
padding:10px 0;
padding:1rem 0;
}
.paddingV15M1280{
padding:15px 0;
padding:1.5rem 0;
}
.paddingV18M1280{
padding:18px 0;
padding:1.8rem 0;
}
.paddingV20M1280{
padding:20px 0;
padding:2rem 0;
}
.paddingV25M1280{
padding:25px 0;
padding:2.5rem 0;
}
.paddingV28M1280{
padding:28px 0;
padding:2.8rem 0;
}
.paddingV50M1280{
padding:50px 0;
padding:5rem 0;
}
.paddingV55M1280{
padding:55px 0;
padding:5.5rem 0;
}
.paddingV80M1280{
padding:80px 0;
padding:8rem 0;
}
.paddingV100M1280{
padding:100px 0;
padding:10rem 0;
}
.paddingV150M1280{
padding:150px 0;
padding:15rem 0;
}
.paddingV180M1280{
padding:180px 0;
padding:18rem 0;
}
.paddingV200M1280{
padding:200px 0;
padding:20rem 0;
}
.paddingV220M1280{
padding:220px 0;
padding:22rem 0;
}
.paddingV250M1280{
padding:250px 0;
padding:25rem 0;
}
.paddingV280M1280{
padding:280px 0;
padding:28rem 0;
}
/* ancienne nomenclature */
.padding20-0M1280{
padding:100px 0;
padding:10rem 0;
}
.padding50-0M1280{
padding:50px 0;
padding:5rem 0;
}
.padding80-0M1280{
padding:80px 0;
padding:8rem 0;
}
.padding100-0M1280{
padding:100px 0;
padding:10rem 0;
}
.padding150-0M1280{
padding:150px 0;
padding:15rem 0;
}
.padding180-0M1280{
padding:180px 0;
padding:18rem 0;
}
.padding200-0M1280{
padding:200px 0;
padding:20rem 0;
}
.padding250-0M1280{
padding:250px 0;
padding:25rem 0;
}
}
@media screen and (max-width:1024px){
.paddingV5M1024{
padding:5px 0;
padding:0.5rem 0;
}
.paddingV8M1024{
padding:8px 0;
padding:0.8rem 0;
}
.paddingV10M1024{
padding:10px 0;
padding:1rem 0;
}
.paddingV15M1024{
padding:15px 0;
padding:1.5rem 0;
}
.paddingV18M1024{
padding:18px 0;
padding:1.8rem 0;
}
.paddingV20M1024{
padding:20px 0;
padding:2rem 0;
}
.paddingV25M1024{
padding:25px 0;
padding:2.5rem 0;
}
.paddingV28M1024{
padding:28px 0;
padding:2.8rem 0;
}
.paddingV50M1024{
padding:50px 0;
padding:5rem 0;
}
.paddingV55M1024{
padding:55px 0;
padding:5.5rem 0;
}
.paddingV80M1024{
padding:80px 0;
padding:8rem 0;
}
.paddingV100M1024{
padding:100px 0;
padding:10rem 0;
}
.paddingV150M1024{
padding:150px 0;
padding:15rem 0;
}
.paddingV180M1024{
padding:180px 0;
padding:18rem 0;
}
.paddingV200M1024{
padding:200px 0;
padding:20rem 0;
}
.paddingV220M1024{
padding:220px 0;
padding:22rem 0;
}
.paddingV250M1024{
padding:250px 0;
padding:25rem 0;
}
.paddingV280M1024{
padding:280px 0;
padding:28rem 0;
}
/* ancienne nomenclature */
.padding20-0M1024{
padding:100px 0;
padding:10rem 0;
}
.padding50-0M1024{
padding:50px 0;
padding:5rem 0;
}
.padding80-0M1024{
padding:80px 0;
padding:8rem 0;
}
.padding100-0M1024{
padding:100px 0;
padding:10rem 0;
}
.padding150-0M1024{
padding:150px 0;
padding:15rem 0;
}
.padding180-0M1024{
padding:180px 0;
padding:18rem 0;
}
.padding200-0M1024{
padding:200px 0;
padding:20rem 0;
}
.padding250-0M1024{
padding:250px 0;
padding:25rem 0;
}
}
@media screen and (max-width:900px){
.paddingV5M900{
padding:5px 0;
padding:0.5rem 0;
}
.paddingV8M900{
padding:8px 0;
padding:0.8rem 0;
}
.paddingV10M900{
padding:10px 0;
padding:1rem 0;
}
.paddingV15M900{
padding:15px 0;
padding:1.5rem 0;
}
.paddingV18M900{
padding:18px 0;
padding:1.8rem 0;
}
.paddingV20M900{
padding:20px 0;
padding:2rem 0;
}
.paddingV25M900{
padding:25px 0;
padding:2.5rem 0;
}
.paddingV28M900{
padding:28px 0;
padding:2.8rem 0;
}
.paddingV50M900{
padding:50px 0;
padding:5rem 0;
}
.paddingV55M900{
padding:55px 0;
padding:5.5rem 0;
}
.paddingV80M900{
padding:80px 0;
padding:8rem 0;
}
.paddingV100M900{
padding:100px 0;
padding:10rem 0;
}
.paddingV150M900{
padding:150px 0;
padding:15rem 0;
}
.paddingV180M900{
padding:180px 0;
padding:18rem 0;
}
.paddingV200M900{
padding:200px 0;
padding:20rem 0;
}
.paddingV220M900{
padding:220px 0;
padding:22rem 0;
}
.paddingV250M900{
padding:250px 0;
padding:25rem 0;
}
.paddingV280M900{
padding:280px 0;
padding:28rem 0;
}
/* ancienne nomenclature */
.padding20-0M900{
padding:100px 0;
padding:10rem 0;
}
.padding50-0M900{
padding:50px 0;
padding:5rem 0;
}
.padding80-0M900{
padding:80px 0;
padding:8rem 0;
}
.padding100-0M900{
padding:100px 0;
padding:10rem 0;
}
.padding150-0M900{
padding:150px 0;
padding:15rem 0;
}
.padding180-0M900{
padding:180px 0;
padding:18rem 0;
}
.padding200-0M900{
padding:200px 0;
padding:20rem 0;
}
.padding250-0M900{
padding:250px 0;
padding:25rem 0;
}
}
/* padding top */
@media screen and (max-width:900px){
.paddingTop110pxM900 {
padding-top:110px!important;
padding-top:11rem!important;
}
.marginTop0pxM900{
margin-top:0px!important;
margin-top:0rem!important;
}
.marginTop100pxM900{
margin-top:100px!important;
margin-top:10rem!important;
}
.marginTop120pxM900{
margin-top:120px!important;
margin-top:12rem!important;
}
.marginTop50pxM900{
margin-top:50px!important;
margin-top:5rem!important;
}
.marginBottom10pxM900 {
margin-bottom:10px!important;
margin-bottom:1rem!important;
}
.marginBottom15pxM900 {
margin-bottom:15px!important;
margin-bottom:1.5rem!important;
}
.marginBottom20pxM900 {
margin-bottom:20px!important;
margin-bottom:2rem!important;
}
.marginBottom25pxM900 {
margin-bottom:25px!important;
margin-bottom:2.5rem!important;
}
.marginBottom40pxM900 {
margin-bottom:40px!important;
margin-bottom:4rem!important;
}
.padding0M900{
padding:0!important;
}
.padding10pxM900{
padding:10px!important;
padding:1rem!important;
}
.padding20pxM900{
padding:20px!important;
padding:2rem!important;
}
.padding30pxM900{
padding:30px!important;
padding:3rem!important;
}
.padding40pxM900{
padding:40px!important;
padding:4rem!important;
}
.padding50pxM900{
padding:50px!important;
padding:5rem!important;
}
.padding100-0M900{
padding:100px 0;
padding:10rem 0;
}
.padding50-0M900{
padding:50px 0;
padding:5rem 0;
}
.padding20-0M900{
padding:20px 0;
padding:2rem 0;
}
.padding75{
padding:15px;
padding:1.5rem;
}
.marginAutoM900{
margin-left: auto!important;
margin-right: auto!important;
}
}
@media screen and (max-width:900px){
.padding10Mobile900, .padding10M900{
padding:10px;
padding:1rem;
}
.padding15Mobile900, .padding15M900{
padding:15px;
padding:1.5rem;
}
.padding20Mobile900, .padding20M900{
padding:20px;
padding:2rem;
}
.padding25Mobile900, .padding25M900{
padding:25px;
padding:2.5rem;
}
.padding0Mobile900{
padding:0px;
padding:0rem;
}
.padding0M900{
padding:0px;
padding:0rem;
}
}
/* ********************************************* TEXT TRANSFORM */
.uppercase{
text-transform: uppercase;
}
.lowercase{
text-transform: lowercase!important;
}
.capitalize{
text-transform: capitalize;
}
/* *************************************************** OVERFLOW */
.overflowHidden{
overflow:hidden;
}
.hidden{
overflow:hidden;
}
.overflowAuto{
overflow:auto;
}
.overflowScroll{
overflow:scroll;
}
/* ********************************************* BORDER BOX */
.borderBox{
box-sizing:border-box;
}
/* ********************************************* Border */
.borderSolid{
border:solid;
}
.borderSolid1, .borderSolid1px {
border:solid 1px;
}
.borderSolid2, .borderSolid2px {
border:solid 2px;
}
.borderSolid3, .borderSolid3px {
border:solid 3px;
}
.borderSolid4, .borderSolid4px {
border:solid 4px;
}
.borderSolid5, .borderSolid5px {
border:solid 5px;
}
/* **** Transparence **** */
.borderColorTransparent{
border-color:transparent;
transition:var(--vitesseTransition2);
}
.borderColorBlanc{
border-color:white;
transition:var(--vitesseTransition2);
}
.borderColorNoir{
border-color:black;
transition:var(--vitesseTransition2);
}
.borderColor1{
border-color:var(--color1);
transition:var(--vitesseTransition2);
}
.borderColor2{
border-color:var(--color2);
transition:var(--vitesseTransition2);
}
.borderColor3{
border-color:var(--color3);
transition:var(--vitesseTransition2);
}
.borderColor4{
border-color:var(--color4);
transition:var(--vitesseTransition2);
}
.borderColor5{
border-color:var(--color5);
transition:var(--vitesseTransition2);
}
.borderColor6{
border-color:var(--color6);
transition:var(--vitesseTransition2);
}
.borderColor7{
border-color:var(--color7);
transition:var(--vitesseTransition2);
}
/* border animation : ATTENTION - mettre borderColorTransparent si vs ne souhaitez pas de couleur quand inactif */
.borderColor1Hover{
border-color:var(--color1);
transition:var(--vitesseTransition2);
}
.borderColor2Hover{
border-color:var(--color2);
transition:var(--vitesseTransition2);
}
.borderColor3Hover{
border-color:var(--color3);
transition:var(--vitesseTransition2);
}
.borderColor4Hover{
border-color:var(--color4);
transition:var(--vitesseTransition2);
}
.borderColor5Hover{
border-color:var(--color5);
transition:var(--vitesseTransition2);
}
.borderColor6Hover{
border-color:var(--color6);
transition:var(--vitesseTransition2);
}
.borderColor7Hover{
border-color:var(--color7);
transition:var(--vitesseTransition2);
}
/* ********************************************* TEXT TRANSFORM */
.italic{
font-style: italic;
}
.oblique{
font-style: oblique;
}
/* ********************************************* TEXT Decoration */
.textDecorationNone{
text-decoration:none;
transition:var(--vitesseTransition3);
}
.textDecorationNoneHover:hover{
text-decoration:none;
}
.underline{
text-decoration:underline;
transition:var(--vitesseTransition3);
}
.underlineHover:hover{
text-decoration:underline;
}
/* ********************************************* SHADOW */
.textShadowBlack{
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}
/* *******************************BEFORE************* */
.checkBefore::before{
}
/* ********************************************* SPECIAL EFFECT */
.absoluteCenterXY {
/* Pour centré horizontalement et verticalement un élément en position absolut - Attention ! le parent doit être positionné absolut ou relative */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition:var(--vitesseTransition3);
}
.absoluteCenterY{
position: absolute;
top: 50%;
left: 0%;
transform: translate(-50%, -80%);
transition:var(--vitesseTransition3);
}
/* pour faire l'effet background conver avec une balise ![]()
a mettre sur la balise*/
/* Attention mettre position relative sur le parent */
.imgBackgroundEffect{
display: block;
position: absolute;
left: -10000%;
right: -10000%;
top: -10000%;
bottom: -10000%;
margin: auto auto;
min-width: 1000%;
min-height: 1000%;
-webkit-transform: scale(0.1);
transform: scale(0.1);
transition: var(--vitesseTransition2);
z-index:-1;
}
.filtreSepia{
-webkit-filter: sepia(1);
filter: sepia(1);
}
.filterBlack{
background:rgba(0,0,0,0.4);
}
/* **********************************************liste *** ul et li */
/* Attention !!! les class listStyle s'applique à */
.listStyleNone, .listeStyleNone{
list-style: none;
padding:0;
font-size:inherit;
}
.listSquare{
list-style: square;
}
.listImage1{
list-style: url('../img/etoile.png');
}
.listCircle{
list-style: circle;
}
.listInside{
list-style: inside;
}
.listOutside{
list-style: outside;
}
.animChildFather:hover .animScaleHover{
transform:scale(1.1);
transition:ease all 0.3s;
}
.animScaleHover{
transform:scale(1);
transition:ease all 0.3s;
}
/* ************************ very simple slideshow */
.slideShow {
margin: 0px;
position: relative;
height: 600px;
}
.slideDescription, slideLogo{
width:350px;
margin: 0 15px;
}
.slideShow > .slides {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.slideShow > .slides p{
margin:0;
}
@media only screen and (max-width: 1380px) {
}
@media only screen and (max-width: 1280px) {
.miniaturesReferences img {
width: 180px;
}
}
@media only screen and (max-width: 900px) {
.slideShow {
margin: 0px;
position: relative;
height: 520px;
}
.miniaturesReferences img {
width: 150px;
}
}
@media only screen and (max-width: 500px) {
.slideShow {
margin: 0px;
position: relative;
height: 395px;
}
@media only screen and (max-width: 400px) {
.slideShow {
margin: 0px;
position: relative;
height: 300px;
}
}
/* ************************************** BEFORE EFFECT *** */
/* ** ici spécifique à Primaweb ** */
.beforeMiniLogo::before{
content:'';
display:inline-block;
vertical-align:middle;
position:absolute;
left:-25px;
top:7px;
width:25px;
height:25px;
border-radius:3px;
background-color:var(--color6);
transform:rotate(-45deg);
margin-right:15px;
}
/* Fleche next section pour one page */
.fleche a {
position: absolute;
bottom: 20px;
left: 50%;
z-index: 2;
display: inline-block;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
color: #fff;
font : normal 400 20px/1 'Josefin Sans', sans-serif;
letter-spacing: .1em;
text-decoration: none;
transition: opacity .3s;
}
.fleche a:hover {
opacity: .5;
}
#contenerFleche{
position:absolute!important;
bottom:0;
left:0;
width:100%;
text-align:center;
}
#contenerFleche a {
padding-top: 70px;
}
#contenerFleche a span {
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: contenerFlecheAnim 1.5s infinite;
animation: contenerFlecheAnim 1.5s infinite;
box-sizing: border-box;
}
@-webkit-keyframes contenerFlecheAnim {
0% {
-webkit-transform: rotate(-45deg) translate(0, 0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
-webkit-transform: rotate(-45deg) translate(-20px, 20px);
opacity: 0;
}
}
@keyframes contenerFlecheAnim {
0% {
transform: rotate(-45deg) translate(0, 0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: rotate(-45deg) translate(-20px, 20px);
opacity: 0;
}
}
/* ********************************************* POUR MODALS */
.cachee {
display:none;
}
.modal {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
background:rgba(0,0,0,0.5);
position:fixed;
opacity:1;
transition:ease display 0.3s 0.3s;
}
.modalInner {
width:500px;
padding:15px;
box-sizing:border-box;
background:rgb(255,255,255);
border-radius:20px;
}
.modalInner h4 {
font-size:25px;
font-size:2.5rem;
margin:0;
margin-bottom:15px;
}
.modal form {
width:80%;
margin:auto;
}
.modal label {
text-align:left;
display:block;
}
.modal input[type=text], .modal input[type=password] {
padding:5px;
display:inline-block;
border-radius:5px;
border:2px solid grey;
width:100%;
transition:var(--vitesseTransition3);
}
.modal input[type=submit], .btnModal{
display:inline-block;
border:none;
padding:5px 15px;
font-size:20px;
font-size:2rem;
border-radius:5px;
cursor:pointer;
text-decoration:none;
}
.modal input[type=text]:focus {
border-color:#8e4896;
}
.modal .checkbox{
display:block;
}
.boutonQuitterModal {
display: inline-block;
background-color: white;
width: 25px;
height: 25px;
padding: 5px;
margin: 5px;
display: inline-block;
position: absolute;
top: 5px;
right: 5px;
}
.modal form .w50 {
width:calc(50% - 10px);
}
.marginRight {
margin:0 10px 0 0;
}
.marginBottom0{
margin-bottom:0;
}
.marginLeft {
margin:0 0 0 10px;
}
.lienModal {
}
.boutonQuitterModal img {
width:100%;
}
/* ***************************************ANIMATE */
.fadeIn {
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* ************************************************ Custom */
@keyframes smallButBetter {
0% {
height:0;
}
100% {
height:500px;
}
}
.smallButBetter{
animation-name: smallButBetter;
animation-duration: 0.5s;
animation-timing-function: ease-in;
height:500px;
position:relative;
overflow:hidden;
}
@keyframes smallButBetter2 {
0% {
height:0;
}
100% {
height:680px;
}
}
.smallButBetter2{
animation-name: smallButBetter;
animation-duration: 0.5s;
animation-timing-function: ease-in;
height:680px;
position:relative;
overflow:hidden;
}
.titreH1Fil{
display: inline-block;
text-transform: uppercase;
color: #ac8e90;
font-family: 'Raleway', sans-serif;
font-size: 5rem;
font-size: 50px;
font-weight: 300;
}
.filFromLeft:before{
content: '';
display: inline-block;
vertical-align: middle;
height: 2px;
width: 40%;
background: #ac8e90;
margin-right: 15px;
}
.filFromRight:after{
content: '';
display: inline-block;
vertical-align: middle;
height: 2px;
width: 40%;
background: #ac8e90;
margin-right: 15px;
}
.titreWidth100{
width:100%!important;
}
.titreRightWidth145{
width:145%;
position:relative;
right:-80%;
transition:var(--vitesseTransition3);
}
.titreWidth145{
width:145%;
position:relative;
left:-50%;
transition:var(--vitesseTransition3);
}
.animateOnHover:hover .filFromLeft{
position:relative;
left:0px;
}
.animateOnHover:hover .filFromRight{
position:relative;
right: -50%;
}
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
/* border: 1px solid #f1f1f1; */
perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: ease-in transform 0.4s;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-card:hover .flip-card-front img{
visibility:hidden;
}
/* Position the front and back side */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
padding:10px;
box-sizing:border-box;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: rgb(240,240,240);
color: black;
transition:ease all 0.15s;
}
.flip-card-front:hover {
/* background-color: white; */
transition:var(--vitesseTransition3);
}
/* Style the back side */
.flip-card-back {
transform: rotateY(180deg);
}
/* ********************** PROGRESS BAR */
/* The progress container (grey background) */
.progress-container {
width: 100%;
height: 8px;
background: #ccc;
}
/* The progress bar (scroll indicator) */
.progress-bar {
height: 8px;
background: var(--color3) !important;
width: 0%;
}
@media screen and (max-width:900px){
.flip-card {
height:250px;
}
}
/* ********************************** AOS API */