/* Remove Alert Browser - DO NOT TOUCH */ @supports (display: grid) { #checkBrowserCompatibility { display: none !important; } } /*-----------------*/ /* GRID SITE */ /*-----------------*/ #header {grid-area: header;} #slideactu {grid-area: slideactu;} #h1 {grid-area: h1;} #content {grid-area: content;} #homeHeader {grid-area: homeHeader;} #sections {grid-area: sections;} #footer {grid-area: footer;} #products-home{grid-area: productsHome;} #reassurances{grid-area: reassurances;} #galleryHome{grid-area: galleryHome;} #citationsHome{grid-area: citationsHome;} #titleBP{grid-area: titleBP;} #lebonpro {grid-area: lebonpro;} #contentBP{grid-area:contentBP; } #mapfooter{grid-area:mapfooter; } #relatedProduct{grid-area:relatedProduct; } #homeBg{grid-area:homeBg; } #contentForm{grid-area:contentForm; } #contentTitle{grid-area:contentTitle; } #contentCoordonnees{grid-area:contentCoordonnees; } #prestations{grid-area:prestations; } #visite-virtuelle{grid-area:visiteVirtuelle; } #wrappersite{ max-width: 100%; width: 100%; margin: 0 auto; display: grid; grid-row-gap: 0px; grid-column-gap: 0px; transition: 0.6s; background-image: linear-gradient(to right,#f4f5fa 1px,transparent 1px),linear-gradient(to bottom,#f4f5fa 1px,transparent 1px); background-position: 0 0; background-size: calc(100vw / 16) calc(100vw / 16); position: relative; } /* HOME */ body.home #wrappersite{ grid-template-areas: "header" "homeHeader" "productsHome" "content" "slideactu" "prestations" "sections" "reassurances" "footer"; grid-template-columns: 1fr ; grid-template-rows: min-content repeat(11, minmax(min-content, auto)); } /* PAGE - SINGLE */ /* PAGE - PARTENAIRES */ /* PAGE - GALERIE PHOTOS */ /* PAGE - 404 */ /* PAGE - MENTIONS LEGALES */ /* PAGE - PLAN DU SITE */ /* PAGE - CONTACT */ /* PAGE - ELEMENTS (généric) */ /* PAGE - PRESTATIONS */ /* PAGE - CATEGORY */ body.page-php #wrappersite, body.single-php #wrappersite, body.template-gallery-php #wrappersite, body.template-prestations-php #wrappersite, body.galerie #wrappersite, body.pagenotfound #wrappersite, body.template-mentions-legales-php #wrappersite, body.template-plan-du-site-php #wrappersite, body.template-partenaires-php #wrappersite, body.elements-php #wrappersite, body.template-parent-page-php #wrappersite, body.category-php #wrappersite, body.template-rating-php #wrappersite, body.woocommerce-category-php #wrappersite, body.template-estimation-php #wrappersite, body.template-offmarket-php #wrappersite, body.template-contact-php #wrappersite, body.template-vendre-php #wrappersite{ grid-template-areas: "header" "h1" "content" "reassurances" "mapfooter" "footer"; grid-template-columns: 1fr ; } body.woocommerce-single-php #wrappersite { grid-template-areas: "header" "h1" "content" "relatedProduct" "reassurances" "footer"; grid-template-columns: 1fr ; } /* PAGE - WOOCOMMERCE */ #gridsinglewoo{ grid-template-areas: "blocbreadcrumb blocbreadcrumb" "backBTsinglewoo backBTsinglewoo" "pageTitle pageTitle" "shortdesc shortdesc" "mainImgProduct mainImgProduct" "gallerysinglewoo tabssinglewoo" "gallerysinglewoo pricesinglewoo" "gallerysinglewoo btformsinglewoo" ; grid-template-columns: 1fr 2fr; grid-template-rows: repeat(5, minmax(min-content, auto)); } @media(max-width:736px){ #gridsinglewoo{ grid-template-areas: "blocbreadcrumb" "backBTsinglewoo" "pageTitle" "shortdesc" "mainImgProduct" "tabssinglewoo" "pricesinglewoo" "btformsinglewoo" "gallerysinglewoo" ; grid-template-columns: 1fr; grid-template-rows: repeat(8, minmax(min-content, auto)); } } /* PAGE - RATING */ body.template-rating-php #wrappersite #content .wrappercontent { grid-template-areas: "titleBP titleBP" "lebonpro contentBP"; grid-template-columns: 1fr 3fr; grid-template-rows: repeat(1, minmax(min-content, auto)); grid-gap: 30px; } @media(max-width:736px){ body.template-rating-php #wrappersite #content .wrappercontent{ grid-template-areas: "titleBP" "lebonpro" "contentBP"; grid-template-columns: 1fr; grid-template-rows: repeat(2, minmax(min-content, auto)); } } body.template-contact-php #content .wrappercontent{ grid-template-areas: "contentTitle contentTitle" "contentCoordonnees contentForm" "mapfooter contentForm "; grid-template-columns: 1fr 2fr; grid-template-rows: repeat(2, minmax(min-content, auto)); grid-column-gap: 100px; display: grid; align-items: stretch; } @media(max-width:980px){ body.template-contact-php #content .wrappercontent{ grid-template-areas: "contentTitle" "contentCoordonnees" "contentForm" "mapfooter"; grid-template-columns: 1fr; grid-template-rows: repeat(3, minmax(min-content, auto)); grid-gap: 0; } } .wrappercontent{ width: 100%; max-width: 1200px; margin: 0 auto; } .wrappercontent.medium{ max-width: 1000px; } .wrappercontent.large{ max-width: 1500px; } .wrappercontent.xlarge{ max-width: 1700px; } /*-----------------*/ /* GRID HEADER */ /*-----------------*/ #logo {grid-area: logo;} #navprimary {grid-area: navprimary;} #infotelfixe {grid-area: infotelfixe;} #infotelport {grid-area: infotelport;} #infoadresse {grid-area: infoadresse;} #infoouverture {grid-area: infoouverture;} #adresseHead{grid-area: adresseHead;} #header > .wrappercontent { align-items: center; display: grid; grid-row-gap: 10px; grid-column-gap: 10px; transition: 0.6s; grid-template-areas: "logo" " navprimary"; grid-template-columns: 1fr; grid-template-rows: repeat(2, minmax(min-content, auto)); justify-items: center; } @media(max-width: 1280px){ #header > .wrappercontent { grid-template-columns: 180px 1fr; grid-column-gap: 15px; } } @media(max-width: 1024px){ #header > .wrappercontent { grid-template-areas: "logo adresseHead"; grid-template-columns: 180px 1fr; grid-gap: 0; } } @media(max-width: 980px){ #header > .wrappercontent { grid-template-areas: "logo"; grid-template-columns: 1fr; grid-gap: 0; } } /*-----------------*/ /* GRID FOOTER */ /*-----------------*/ #logofooter{grid-area:logofooter; } #navfooter{grid-area:navfooter; } #coordonneesFooter{grid-area:coordonneesFooter; } #footerlinks{grid-area:footerlinks; } #infoouvertureFooter{grid-area:infoouvertureFooter; } #infoadresseFooter{grid-area:infoadresseFooter; } #infotelportFooter{grid-area:infotelportFooter; } #infotelfixeFooter{grid-area:infotelfixeFooter; } #footer #footerbloc{ align-items: center; display: grid; grid-column-gap: 30px; grid-row-gap: 20px; transition: 0.6s; grid-template-areas: "logofooter coordonneesFooter" "footerlinks footerlinks"; grid-template-columns: 250px 1fr; grid-template-rows: repeat(2, minmax(min-content, auto)); justify-items: center; } @media(max-width: 1280px){ #footer #footerbloc{ grid-template-columns: 140px 1fr; } } @media(max-width: 1024px){ #footer #footerbloc{ grid-template-columns: 110px 1fr; grid-column-gap: 10px; } } @media(max-width: 980px){ #footer #footerbloc{ grid-template-areas: "logofooter " "coordonneesFooter" "footerlinks"; grid-template-columns: 1fr; grid-gap: 10px 0; } } /* FOOTER - NoMap */ /* body.nofootermap #footerbloc{ align-items: center; justify-items: center; display: grid; grid-row-gap: 15px; grid-column-gap: 10px; transition: 0.6s; grid-template-areas: "logoslist" "logofooter" "addrfooter" "footerlinks"; grid-template-columns: 1fr ; grid-template-rows: repeat(4, minmax(min-content, auto)); } */ /*-----------------*/ /* GRID STRUCTURE */ /* Media Query : xl, lg, md, sm, xs */ /*-----------------*/ /*Taille des gouttières*/ .undergrid.gutter1 > *, .grid.gutter1{grid-gap: 1px;} .undergrid.gutter2 > *, .grid.gutter2{grid-gap: 2px;} .undergrid.gutter5 > *, .grid.gutter5{grid-gap: 5px;} .undergrid.gutter10 > *, .grid.gutter10{grid-gap: 10px;} .undergrid.gutter20 > *, .grid.gutter20{grid-gap: 20px;} .undergrid.gutter30 > *, .grid.gutter30{grid-gap: 30px;} .undergrid.gutter40 > *, .grid.gutter40{grid-gap: 40px;} .undergrid.gutter50 > *, .grid.gutter50{grid-gap: 50px;} .undergrid.gutter80 > *, .grid.gutter80{grid-gap: 80px;} .undergrid.gutter100 > *, .grid.gutter100{grid-gap: 100px;} /*Def Grid*/ .undergrid > *, .grid{ display:grid; align-items: start; justify-items: stretch; } /* Alignement des items du conteneur grid/flex--------*/ /* Mode : vertical */ .undergrid.align-items_start > *, .grid.align-items_start{align-items: start;} .undergrid.align-items_end > *, .grid.align-items_end{align-items: end;} .undergrid.align-items_center > *, .grid.align-items_center{align-items: center;} .undergrid.align-items_stretch > *, .grid.align-items_stretch{align-items: stretch;} .underflex.align-items_end > *, .flex.align-items_end{align-items:flex-end;} .underflex.align-items_center > *, .flex.align-items_center{align-items:center;} .underflex.align-items_start > *, .flex.align-items_start{align-items:flex-start;} .underflex.align-items_stretch > *, .flex.align-items_stretch{align-items:stretch;} /* Mode : horizontal */ .undergrid.justify-items_start > *, .grid.justify-items_start{justify-items: start;} .undergrid.justify-items_end > *, .grid.justify-items_end{justify-items: end;} .undergrid.justify-items_center > *, .grid.justify-items_center{justify-items: center;} .undergrid.justify-items_stretch > *, .grid.justify-items_stretch{justify-items: stretch;} .underflex.justify-items_end > *, .flex.justify-items_end{justify-items: flex-end;} .underflex.justify-items_start > *, .flex.justify-items_start{justify-items: flex-start;} .underflex.justify-items_center > *, .flex.justify-items_center{justify-items: center;} .underflex.justify-items_stretch > *, .flex.justify-items_stretch{justify-items: flex-stretch;} /* Alignement du conteneur grid/flex --------*/ /* Mode : vertical */ .undergrid.align-content_start > *, .grid.align-content_start{align-content: start;} .undergrid.align-content_end > *, .grid.align-content_end{align-content: end;} .undergrid.align-content_center > *, .grid.align-content_center{align-content: center;} .undergrid.align-content_stretch > *, .grid.align-content_stretch{align-content: stretch;} .underflex.align-content_start > *, .flex.align-content_start{align-content: flex-start;} .underflex.align-content_end > *, .flex.align-content_end{align-content: flex-end;} .underflex.align-content_center > *, .flex.align-content_center{align-content: center;} .underflex.align-content_stretch > *, .flex.align-content_stretch{align-content: stretch;} /* Mode : horizontal */ .undergrid.justify-content_start > *, .grid.justify-content_start{justify-content: start;} .undergrid.justify-content_end > *, .grid.justify-content_end{justify-content: end;} .undergrid.justify-content_center > *, .grid.justify-content_center{justify-content: center;} .undergrid.justify-content_stretch > *, .grid.justify-content_stretch{justify-content: stretch;} .undergrid.justify-content_space-around > *, .grid.justify-content_space-around{justify-content: space-around;} .undergrid.justify-content_space-between > *, .grid.justify-content_space-between{justify-content: space-between;} .undergrid.justify-content_space-evenly > *, .grid.justify-content_space-evenly{justify-content: space-evenly;} .underflex.justify-content_start > *, .flex.justify-content_start{justify-content: flex-start;} .underflex.justify-content_end > *, .flex.justify-content_end{justify-content: flex-end;} .underflex.justify-content_center > *, .flex.justify-content_center{justify-content: center;} .underflex.justify-content_stretch > *, .flex.justify-content_stretch{justify-content: stretch;} .underflex.justify-content_space-around > *, .flex.justify-content_space-around{justify-content: space-around;} .underflex.justify-content_space-between > *, .flex.justify-content_space-between{justify-content: space-between;} .underflex.justify-content_space-evenly > *, .flex.justify-content_space-evenly{justify-content: space-evenly;} /* Definition d'une grid en X colomns en largeur fixe */ .undergrid.g1 > *, .grid.g1{grid-template-columns: repeat(1, 1fr);} .undergrid.g2 > *, .grid.g2{grid-template-columns: repeat(2, 1fr);} .undergrid.g3 > *, .grid.g3{grid-template-columns: repeat(3, 1fr);} .undergrid.g4 > *, .grid.g4{grid-template-columns: repeat(4, 1fr);} .undergrid.g5 > *, .grid.g5{grid-template-columns: repeat(5, 1fr);} .undergrid.g6 > *, .grid.g6{grid-template-columns: repeat(6, 1fr);} .undergrid.g12 > *, .grid.g12{grid-template-columns: repeat(12, 1fr);} /* Definition d'une grid en X colomns en largeur variable */ .undergrid.g1auto > *, .grid.g1auto{grid-template-columns: repeat(1, auto);} .undergrid.g2auto > *, .grid.g2auto{grid-template-columns: repeat(2, auto);} .undergrid.g3auto > *, .grid.g3auto{grid-template-columns: repeat(3, auto);} .undergrid.g4auto > *, .grid.g4auto{grid-template-columns: repeat(4, auto);} .undergrid.g5auto > *, .grid.g5auto{grid-template-columns: repeat(5, auto);} .undergrid.g6auto > *, .grid.g6auto{grid-template-columns: repeat(6, auto);} .undergrid.g7auto > *, .grid.g7auto{grid-template-columns: repeat(7, auto);} .undergrid.g8auto > *, .grid.g8auto{grid-template-columns: repeat(8, auto);} .undergrid.g9auto > *, .grid.g9auto{grid-template-columns: repeat(9, auto);} .undergrid.g10auto > *, .grid.g10auto{grid-template-columns: repeat(10, auto);} /* Définition d'une grid d'un nombre non défini de colones de grid mais dont la taille est de X px */ /* >> auto-fill : DES COLONES SUPPLEMENTAIRES SONT CRÉES AU BESOINS */ .undergrid.auto-fill-10 > *, .grid.auto-fill-10 {grid-template-columns: repeat(auto-fill, 10px);} .undergrid.auto-fill-10 > *, .grid.auto-fill-10 {grid-template-columns: repeat(auto-fill, 10px);} .undergrid.auto-fill-20 > *, .grid.auto-fill-20 {grid-template-columns: repeat(auto-fill, 20px);} .undergrid.auto-fill-30 > *, .grid.auto-fill-30 {grid-template-columns: repeat(auto-fill, 30px);} .undergrid.auto-fill-40 > *, .grid.auto-fill-40 {grid-template-columns: repeat(auto-fill, 40px);} .undergrid.auto-fill-50 > *, .grid.auto-fill-50 {grid-template-columns: repeat(auto-fill, 50px);} .undergrid.auto-fill-60 > *, .grid.auto-fill-60 {grid-template-columns: repeat(auto-fill, 60px);} .undergrid.auto-fill-80 > *, .grid.auto-fill-80 {grid-template-columns: repeat(auto-fill, 80px);} .undergrid.auto-fill-100 > *, .grid.auto-fill-100{grid-template-columns: repeat(auto-fill, 100px);} .undergrid.auto-fill-120 > *, .grid.auto-fill-120{grid-template-columns: repeat(auto-fill, 120px);} .undergrid.auto-fill-140 > *, .grid.auto-fill-140{grid-template-columns: repeat(auto-fill, 140px);} .undergrid.auto-fill-160 > *, .grid.auto-fill-160{grid-template-columns: repeat(auto-fill, 160px);} .undergrid.auto-fill-180 > *, .grid.auto-fill-180{grid-template-columns: repeat(auto-fill, 180px);} .undergrid.auto-fill-200 > *, .grid.auto-fill-200{grid-template-columns: repeat(auto-fill, 200px);} .undergrid.auto-fill-225 > *, .grid.auto-fill-225{grid-template-columns: repeat(auto-fill, 225px);} .undergrid.auto-fill-250 > *, .grid.auto-fill-250{grid-template-columns: repeat(auto-fill, 250px);} .undergrid.auto-fill-300 > *, .grid.auto-fill-300{grid-template-columns: repeat(auto-fill, 300px);} .undergrid.auto-fill-350 > *, .grid.auto-fill-350{grid-template-columns: repeat(auto-fill, 350px);} .undergrid.auto-fill-400 > *, .grid.auto-fill-400{grid-template-columns: repeat(auto-fill, 400px);} /* >> auto-fit : DES COLONES SUPPLEMENTAIRES NE SONT ALORS PAS CRÉES */ .undergrid.auto-fit-10 > *, .grid.auto-fit-10 {grid-template-columns: repeat(auto-fit, 10px);} .undergrid.auto-fit-10 > *, .grid.auto-fit-10 {grid-template-columns: repeat(auto-fit, 10px);} .undergrid.auto-fit-20 > *, .grid.auto-fit-20 {grid-template-columns: repeat(auto-fit, 20px);} .undergrid.auto-fit-30 > *, .grid.auto-fit-30 {grid-template-columns: repeat(auto-fit, 30px);} .undergrid.auto-fit-40 > *, .grid.auto-fit-40 {grid-template-columns: repeat(auto-fit, 40px);} .undergrid.auto-fit-50 > *, .grid.auto-fit-50 {grid-template-columns: repeat(auto-fit, 50px);} .undergrid.auto-fit-60 > *, .grid.auto-fit-60 {grid-template-columns: repeat(auto-fit, 60px);} .undergrid.auto-fit-80 > *, .grid.auto-fit-80 {grid-template-columns: repeat(auto-fit, 80px);} .undergrid.auto-fit-90 > *, .grid.auto-fit-90 {grid-template-columns: repeat(auto-fit, 90px);} .undergrid.auto-fit-100 > *, .grid.auto-fit-100{grid-template-columns: repeat(auto-fit, 100px);} .undergrid.auto-fit-120 > *, .grid.auto-fit-120{grid-template-columns: repeat(auto-fit, 120px);} .undergrid.auto-fit-140 > *, .grid.auto-fit-140{grid-template-columns: repeat(auto-fit, 140px);} .undergrid.auto-fit-160 > *, .grid.auto-fit-160{grid-template-columns: repeat(auto-fit, 160px);} .undergrid.auto-fit-180 > *, .grid.auto-fit-180{grid-template-columns: repeat(auto-fit, 180px);} .undergrid.auto-fit-200 > *, .grid.auto-fit-200{grid-template-columns: repeat(auto-fit, 200px);} .undergrid.auto-fit-225 > *, .grid.auto-fit-225{grid-template-columns: repeat(auto-fit, 225px);} .undergrid.auto-fit-250 > *, .grid.auto-fit-250{grid-template-columns: repeat(auto-fit, 250px);} .undergrid.auto-fit-300 > *, .grid.auto-fit-300{grid-template-columns: repeat(auto-fit, 300px);} .undergrid.auto-fit-350 > *, .grid.auto-fit-350{grid-template-columns: repeat(auto-fit, 350px);} .undergrid.auto-fit-400 > *, .grid.auto-fit-400{grid-template-columns: repeat(auto-fit, 400px);} /* >> (minmax)auto-fill : DES COLONES SUPPLEMENTAIRES SONT CRÉES AU BESOINS d'une taille min de Xpx et max de 1fr */ .undergrid.auto-fill-min10 > *, .grid.auto-fill-min10 {grid-template-columns: repeat(auto-fill, minmax(10px, 1fr));} .undergrid.auto-fill-min20 > *, .grid.auto-fill-min20 {grid-template-columns: repeat(auto-fill, minmax(20px, 1fr));} .undergrid.auto-fill-min30 > *, .grid.auto-fill-min30 {grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));} .undergrid.auto-fill-min40 > *, .grid.auto-fill-min40 {grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));} .undergrid.auto-fill-min50 > *, .grid.auto-fill-min50 {grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));} .undergrid.auto-fill-min60 > *, .grid.auto-fill-min60 {grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));} .undergrid.auto-fill-min80 > *, .grid.auto-fill-min80 {grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));} .undergrid.auto-fill-min100 > *, .grid.auto-fill-min100{grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));} .undergrid.auto-fill-min120 > *, .grid.auto-fill-min120{grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));} .undergrid.auto-fill-min140 > *, .grid.auto-fill-min140{grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));} .undergrid.auto-fill-min160 > *, .grid.auto-fill-min160{grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));} .undergrid.auto-fill-min180 > *, .grid.auto-fill-min180{grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));} .undergrid.auto-fill-min200 > *, .grid.auto-fill-min200{grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));} .undergrid.auto-fill-min225 > *, .grid.auto-fill-min225{grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));} .undergrid.auto-fill-min250 > *, .grid.auto-fill-min250{grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));} .undergrid.auto-fill-min300 > *, .grid.auto-fill-min300{grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));} .undergrid.auto-fill-min350 > *, .grid.auto-fill-min350{grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));} .undergrid.auto-fill-min400 > *, .grid.auto-fill-min400{grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));} /* >> (minmax)auto-fit : DES COLONES SUPPLEMENTAIRES NE SONT ALORS PAS CRÉES d'une taille min de Xpx et max de 1fr */ .undergrid.auto-fit-min10 > *, .grid.auto-fit-min10 {grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));} .undergrid.auto-fit-min20 > *, .grid.auto-fit-min20 {grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));} .undergrid.auto-fit-min30 > *, .grid.auto-fit-min30 {grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));} .undergrid.auto-fit-min40 > *, .grid.auto-fit-min40 {grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));} .undergrid.auto-fit-min50 > *, .grid.auto-fit-min50 {grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));} .undergrid.auto-fit-min60 > *, .grid.auto-fit-min60 {grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));} .undergrid.auto-fit-min80 > *, .grid.auto-fit-min80 {grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));} .undergrid.auto-fit-min100 > *, .grid.auto-fit-min100{grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));} .undergrid.auto-fit-min120 > *, .grid.auto-fit-min120{grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));} .undergrid.auto-fit-min140 > *, .grid.auto-fit-min140{grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));} .undergrid.auto-fit-min160 > *, .grid.auto-fit-min160{grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));} .undergrid.auto-fit-min180 > *, .grid.auto-fit-min180{grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));} .undergrid.auto-fit-min200 > *, .grid.auto-fit-min200{grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));} .undergrid.auto-fit-min225 > *, .grid.auto-fit-min225{grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));} .undergrid.auto-fit-min250 > *, .grid.auto-fit-min250{grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));} .undergrid.auto-fit-min300 > *, .grid.auto-fit-min300{grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));} .undergrid.auto-fit-min350 > *, .grid.auto-fit-min350{grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));} .undergrid.auto-fit-min400 > *, .grid.auto-fit-min400{grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));} /* Colspan for grid */ .grid > .col.c2{grid-column: span 2;} .grid > .col.c3{grid-column: span 3;} .grid > .col.c4{grid-column: span 4;} .grid > .col.c5{grid-column: span 5;} .grid > .col.c6{grid-column: span 6;} .grid > .col.c9{grid-column: span 9;} /* Colspan auto-correct */ .grid.g1>.col.c2, .grid.g1>.col.c3, .grid.g1>.col.c4, .grid.g1>.col.c5, .grid.g1>.col.c6 {grid-column: span 1 !important;} .grid.g2>.col.c3, .grid.g2>.col.c4, .grid.g2>.col.c5, .grid.g2>.col.c6 {grid-column: span 2 !important;} .grid.g3>.col.c4, .grid.g3>.col.c5, .grid.g3>.col.c6 {grid-column: span 3 !important;} .grid.g4>.col.c5, .grid.g4>.col.c6 {grid-column: span 4 !important;} .grid.g5>.col.c6 {grid-column: span 5 !important;} /* Rowspan for grid */ .grid > .col.rowspan2{grid-row: span 2;} .grid > .col.rowspan3{grid-row: span 3;} .grid > .col.rowspan4{grid-row: span 4;} .grid > .col.rowspan5{grid-row: span 5;} .grid > .col.rowspan6{grid-row: span 6;} /*-----------------*/ /* FLEX STRUCTURE */ /* Media Query : xl, lg, md, sm, xs */ /*-----------------*/ /* Def Flex */ .underflex > *, .flex{ display: flex; align-items: flex-start; justify-items: stretch; } /* Flex row Direction */ .underflex.row > *, .flex.row { flex-direction: row; flex-wrap: wrap; width: 100%; } /* Flex col Direction */ .underflex.col > *, .flex.col { flex-direction: column; flex-basis: 100%; flex: 1; } /* Flex wrap */ .underflex.wrap> *, .flex.wrap{flex-wrap: wrap;} /* Flex predéfinir un nombre de grid en flex */ .underflex.f1 > * > *, .flex.f1 > * {width: 100%;} .underflex.f2 > * > *, .flex.f2 > * {width: 50%;} .underflex.f3 > * > *, .flex.f3 > * {width: calc(100% / 3);} .underflex.f4 > * > *, .flex.f4 > * {width: 25%;} .underflex.f5 > * > *, .flex.f5 > * {width: 20%;} .underflex.f6 > * > *, .flex.f6 > * {width: calc(100% / 6);} .underflex.forcedwidth.f1 > * > *, .flex.forcedwidth.f1 > * {min-width: 100%;} .underflex.forcedwidth.f2 > * > *, .flex.forcedwidth.f2 > * {min-width: 50%;} .underflex.forcedwidth.f3 > * > *, .flex.forcedwidth.f3 > * {min-width: calc(100% / 3);} .underflex.forcedwidth.f4 > * > *, .flex.forcedwidth.f4 > * {min-width: 25%;} .underflex.forcedwidth.f5 > * > *, .flex.forcedwidth.f5 > * {min-width: 20%;} .underflex.forcedwidth.f6 > * > *, .flex.forcedwidth.f6 > * {min-width: calc(100% / 6);} /* colspan for flex */ .underflex > * > .col.c1, .flex > .col.c1{ width: calc(100% / 6); } .underflex > * > .col.c2, .flex > .col.c2{ width: calc(100% / 6 * 2); } .underflex > * > .col.c3, .flex > .col.c3{ width: calc(100% / 6 * 3); } .underflex > * > .col.c4, .flex > .col.c4{ width: calc(100% / 6 * 4); } .underflex > * > .col.c5, .flex > .col.c5{ width: calc(100% / 6 * 5); } .underflex > * > .col.c6, .flex > .col.c6{ width: 100%; } /*-----------------*/ /* RESPONSIVE STRUCTURE */ /* Media Query : xl, lg, md, sm, xs */ /*-----------------*/ @media (max-width:1690px) { .undergrid.xl-1 > *, .grid.xl-1{grid-template-columns: repeat(1, 1fr) !important;} .undergrid.xl-2 > *, .grid.xl-2{grid-template-columns: repeat(2, 1fr) !important;} .undergrid.xl-3 > *, .grid.xl-3{grid-template-columns: repeat(3, 1fr) !important;} .undergrid.xl-4 > *, .grid.xl-4{grid-template-columns: repeat(4, 1fr) !important;} .undergrid.xl-5 > *, .grid.xl-5{grid-template-columns: repeat(5, 1fr) !important;} .undergrid.xl-6 > *, .grid.xl-6{grid-template-columns: repeat(6, 1fr) !important;} .grid > .col.xl-1{grid-column: span 1 !important;} .grid > .col.xl-2{grid-column: span 2 !important;} .grid > .col.xl-3{grid-column: span 3 !important;} .grid > .col.xl-4{grid-column: span 4 !important;} .grid > .col.xl-5{grid-column: span 5 !important;} .grid > .col.xl-6{grid-column: span 6 !important;} .grid.xl-1 > .col:not([class*="xl-"]), .grid.xl-2 > .col:not([class*="xl-"]), .grid.xl-3 > .col:not([class*="xl-"]), .grid.xl-4 > .col:not([class*="xl-"]), .grid.xl-5 > .col:not([class*="xl-"]), .grid.xl-6 > .col:not([class*="xl-"]){grid-column: span 1 !important;} .grid.xl-1 > .col.xl-2{grid-column: span 1 !important;} .grid.xl-1 > .col.xl-3{grid-column: span 1 !important;} .grid.xl-1 > .col.xl-4{grid-column: span 1 !important;} .grid.xl-1 > .col.xl-5{grid-column: span 1 !important;} .grid.xl-1 > .col.xl-6{grid-column: span 1 !important;} .grid.xl-2 > .col.xl-3{grid-column: span 2 !important;} .grid.xl-2 > .col.xl-4{grid-column: span 2 !important;} .grid.xl-2 > .col.xl-5{grid-column: span 2 !important;} .grid.xl-2 > .col.xl-6{grid-column: span 2 !important;} .grid.xl-3 > .col.xl-4{grid-column: span 3 !important;} .grid.xl-3 > .col.xl-5{grid-column: span 3 !important;} .grid.xl-3 > .col.xl-6{grid-column: span 3 !important;} .grid.xl-4 > .col.xl-5{grid-column: span 4 !important;} .grid.xl-4 > .col.xl-6{grid-column: span 4 !important;} .grid.xl-5 > .col.xl-6{grid-column: span 5 !important;} .underflex.xl-1 > * > *, .flex.xl-1 > * {width: 100% !important;} .underflex.xl-2 > * > *, .flex.xl-2 > * {width: 50% !important;} .underflex.xl-3 > * > *, .flex.xl-3 > * {width: calc(100% / 3) !important;} .underflex.xl-4 > * > *, .flex.xl-4 > * {width: 25% !important;} .underflex.xl-5 > * > *, .flex.xl-5 > * {width: 20% !important;} .underflex.xl-6 > * > *, .flex.xl-6 > * {width: calc(100% / 6) !important;} .underflex.forcedwidth.xl-1 > * > *, .flex.forcedwidth.xl-1 > * {min-width: 100% !important;} .underflex.forcedwidth.xl-2 > * > *, .flex.forcedwidth.xl-2 > * {min-width: 50% !important;} .underflex.forcedwidth.xl-3 > * > *, .flex.forcedwidth.xl-3 > * {min-width: calc(100% / 3) !important;} .underflex.forcedwidth.xl-4 > * > *, .flex.forcedwidth.xl-4 > * {min-width: 25% !important;} .underflex.forcedwidth.xl-5 > * > *, .flex.forcedwidth.xl-5 > * {min-width: 20% !important;} .underflex.forcedwidth.xl-6 > * > *, .flex.forcedwidth.xl-6 > * {min-width: calc(100% / 6) !important;} .underflex > * > .col.c1, .flex > .col.xl-1{ width: calc(100% / 6); } .underflex > * > .col.c2, .flex > .col.xl-2{ width: calc(100% / 6 * 2); } .underflex > * > .col.c3, .flex > .col.xl-3{ width: calc(100% / 6 * 3); } .underflex > * > .col.c4, .flex > .col.xl-4{ width: calc(100% / 6 * 4); } .underflex > * > .col.c5, .flex > .col.xl-5{ width: calc(100% / 6 * 5); } .underflex > * > .col.c6, .flex > .col.xl-6{ width: 100%; } /* Alignement des items du conteneur grid/flex--------*/ /* Mode : vertical */ .undergrid.xl-align-items_start > *, .grid.xl-align-items_start{align-items: start;} .undergrid.xl-align-items_end > *, .grid.xl-align-items_end{align-items: end;} .undergrid.xl-align-items_center > *, .grid.xl-align-items_center{align-items: center;} .undergrid.xl-align-items_stretch > *, .grid.xl-align-items_stretch{align-items: stretch;} .underflex.xl-align-items_end > *, .flex.xl-align-items_end{align-items:flex-end;} .underflex.xl-align-items_center > *, .flex.xl-align-items_center{align-items:center;} .underflex.xl-align-items_start > *, .flex.xl-align-items_start{align-items:flex-start;} .underflex.xl-align-items_stretch > *, .flex.xl-align-items_stretch{align-items:stretch;} /* Mode : horizontal */ .undergrid.xl-justify-items_start > *, .grid.xl-justify-items_start{justify-items: start;} .undergrid.xl-justify-items_end > *, .grid.xl-justify-items_end{justify-items: end;} .undergrid.xl-justify-items_center > *, .grid.xl-justify-items_center{justify-items: center;} .undergrid.xl-justify-items_stretch > *, .grid.xl-justify-items_stretch{justify-items: stretch;} .underflex.xl-justify-items_end > *, .flex.xl-justify-items_end{justify-items: flex-end;} .underflex.xl-justify-items_start > *, .flex.xl-justify-items_start{justify-items: flex-start;} .underflex.xl-justify-items_center > *, .flex.xl-justify-items_center{justify-items: center;} .underflex.xl-justify-items_stretch > *, .flex.xl-justify-items_stretch{justify-items: flex-stretch;} /* Alignement du conteneur grid/flex --------*/ /* Mode : vertical */ .undergrid.xl-align-content_start > *, .grid.xl-align-content_start{align-content: start;} .undergrid.xl-align-content_end > *, .grid.xl-align-content_end{align-content: end;} .undergrid.xl-align-content_center > *, .grid.xl-align-content_center{align-content: center;} .undergrid.xl-align-content_stretch > *, .grid.xl-align-content_stretch{align-content: stretch;} .underflex.xl-align-content_start > *, .flex.xl-align-content_start{align-content: flex-start;} .underflex.xl-align-content_end > *, .flex.xl-align-content_end{align-content: flex-end;} .underflex.xl-align-content_center > *, .flex.xl-align-content_center{align-content: center;} .underflex.xl-align-content_stretch > *, .flex.xl-align-content_stretch{align-content: stretch;} /* Mode : horizontal */ .undergrid.xl-justify-content_start > *, .grid.xl-justify-content_start{justify-content: start;} .undergrid.xl-justify-content_end > *, .grid.xl-justify-content_end{justify-content: end;} .undergrid.xl-justify-content_center > *, .grid.xl-justify-content_center{justify-content: center;} .undergrid.xl-justify-content_stretch > *, .grid.xl-justify-content_stretch{justify-content: stretch;} .undergrid.xl-justify-content_space-around > *, .grid.xl-justify-content_space-around{justify-content: space-around;} .undergrid.xl-justify-content_space-between > *, .grid.xl-justify-content_space-between{justify-content: space-between;} .undergrid.xl-justify-content_space-evenly > *, .grid.xl-justify-content_space-evenly{justify-content: space-evenly;} .underflex.xl-justify-content_start > *, .flex.xl-justify-content_start{justify-content: flex-start;} .underflex.xl-justify-content_end > *, .flex.xl-justify-content_end{justify-content: flex-end;} .underflex.xl-justify-content_center > *, .flex.xl-justify-content_center{justify-content: center;} .underflex.xl-justify-content_stretch > *, .flex.xl-justify-content_stretch{justify-content: stretch;} .underflex.xl-justify-content_space-around > *, .flex.xl-justify-content_space-around{justify-content: space-around;} .underflex.xl-justify-content_space-between > *, .flex.xl-justify-content_space-between{justify-content: space-between;} .underflex.xl-justify-content_space-evenly > *, .flex.xl-justify-content_space-evenly{justify-content: space-evenly;} } @media (max-width:1280px) { .undergrid.lg-1 > *, .grid.lg-1{grid-template-columns: repeat(1, 1fr) !important;} .undergrid.lg-2 > *, .grid.lg-2{grid-template-columns: repeat(2, 1fr) !important;} .undergrid.lg-3 > *, .grid.lg-3{grid-template-columns: repeat(3, 1fr) !important;} .undergrid.lg-4 > *, .grid.lg-4{grid-template-columns: repeat(4, 1fr) !important;} .undergrid.lg-5 > *, .grid.lg-5{grid-template-columns: repeat(5, 1fr) !important;} .undergrid.lg-6 > *, .grid.lg-6{grid-template-columns: repeat(6, 1fr) !important;} .grid > .col.lg-1{grid-column: span 1 !important;} .grid > .col.lg-2{grid-column: span 2 !important;} .grid > .col.lg-3{grid-column: span 3 !important;} .grid > .col.lg-4{grid-column: span 4 !important;} .grid > .col.lg-5{grid-column: span 5 !important;} .grid > .col.lg-6{grid-column: span 6 !important;} .grid.lg-1 > .col:not([class*="lg-"]), .grid.lg-2 > .col:not([class*="lg-"]), .grid.lg-3 > .col:not([class*="lg-"]), .grid.lg-4 > .col:not([class*="lg-"]), .grid.lg-5 > .col:not([class*="lg-"]), .grid.lg-6 > .col:not([class*="lg-"]){grid-column: span 1 !important;} .grid.lg-1 > .col.lg-2{grid-column: span 1 !important;} .grid.lg-1 > .col.lg-3{grid-column: span 1 !important;} .grid.lg-1 > .col.lg-4{grid-column: span 1 !important;} .grid.lg-1 > .col.lg-5{grid-column: span 1 !important;} .grid.lg-1 > .col.lg-6{grid-column: span 1 !important;} .grid.lg-2 > .col.lg-3{grid-column: span 2 !important;} .grid.lg-2 > .col.lg-4{grid-column: span 2 !important;} .grid.lg-2 > .col.lg-5{grid-column: span 2 !important;} .grid.lg-2 > .col.lg-6{grid-column: span 2 !important;} .grid.lg-3 > .col.lg-4{grid-column: span 3 !important;} .grid.lg-3 > .col.lg-5{grid-column: span 3 !important;} .grid.lg-3 > .col.lg-6{grid-column: span 3 !important;} .grid.lg-4 > .col.lg-5{grid-column: span 4 !important;} .grid.lg-4 > .col.lg-6{grid-column: span 4 !important;} .grid.lg-5 > .col.lg-6{grid-column: span 5 !important;} .underflex.lg-1 > * > *, .flex.lg-1 > * {width: 100% !important;} .underflex.lg-2 > * > *, .flex.lg-2 > * {width: 50% !important;} .underflex.lg-3 > * > *, .flex.lg-3 > * {width: calc(100% / 3) !important;} .underflex.lg-4 > * > *, .flex.lg-4 > * {width: 25% !important;} .underflex.lg-5 > * > *, .flex.lg-5 > * {width: 20% !important;} .underflex.lg-6 > * > *, .flex.lg-6 > * {width: calc(100% / 6) !important;} .underflex.forcedwidth.lg-1 > * > *, .flex.forcedwidth.lg-1 > * {min-width: 100% !important;} .underflex.forcedwidth.lg-2 > * > *, .flex.forcedwidth.lg-2 > * {min-width: 50% !important;} .underflex.forcedwidth.lg-3 > * > *, .flex.forcedwidth.lg-3 > * {min-width: calc(100% / 3) !important;} .underflex.forcedwidth.lg-4 > * > *, .flex.forcedwidth.lg-4 > * {min-width: 25% !important;} .underflex.forcedwidth.lg-5 > * > *, .flex.forcedwidth.lg-5 > * {min-width: 20% !important;} .underflex.forcedwidth.lg-6 > * > *, .flex.forcedwidth.lg-6 > * {min-width: calc(100% / 6) !important;} .underflex > * > .col.c1, .flex > .col.lg-1{ width: calc(100% / 6); } .underflex > * > .col.c2, .flex > .col.lg-2{ width: calc(100% / 6 * 2); } .underflex > * > .col.c3, .flex > .col.lg-3{ width: calc(100% / 6 * 3); } .underflex > * > .col.c4, .flex > .col.lg-4{ width: calc(100% / 6 * 4); } .underflex > * > .col.c5, .flex > .col.lg-5{ width: calc(100% / 6 * 5); } .underflex > * > .col.c6, .flex > .col.lg-6{ width: 100%; } /* Alignement des items du conteneur grid/flex--------*/ /* Mode : vertical */ .undergrid.lg-align-items_start > *, .grid.lg-align-items_start{align-items: start;} .undergrid.lg-align-items_end > *, .grid.lg-align-items_end{align-items: end;} .undergrid.lg-align-items_center > *, .grid.lg-align-items_center{align-items: center;} .undergrid.lg-align-items_stretch > *, .grid.lg-align-items_stretch{align-items: stretch;} .underflex.lg-align-items_end > *, .flex.lg-align-items_end{align-items:flex-end;} .underflex.lg-align-items_center > *, .flex.lg-align-items_center{align-items:center;} .underflex.lg-align-items_start > *, .flex.lg-align-items_start{align-items:flex-start;} .underflex.lg-align-items_stretch > *, .flex.lg-align-items_stretch{align-items:stretch;} /* Mode : horizontal */ .undergrid.lg-justify-items_start > *, .grid.lg-justify-items_start{justify-items: start;} .undergrid.lg-justify-items_end > *, .grid.lg-justify-items_end{justify-items: end;} .undergrid.lg-justify-items_center > *, .grid.lg-justify-items_center{justify-items: center;} .undergrid.lg-justify-items_stretch > *, .grid.lg-justify-items_stretch{justify-items: stretch;} .underflex.lg-justify-items_end > *, .flex.lg-justify-items_end{justify-items: flex-end;} .underflex.lg-justify-items_start > *, .flex.lg-justify-items_start{justify-items: flex-start;} .underflex.lg-justify-items_center > *, .flex.lg-justify-items_center{justify-items: center;} .underflex.lg-justify-items_stretch > *, .flex.lg-justify-items_stretch{justify-items: flex-stretch;} /* Alignement du conteneur grid/flex --------*/ /* Mode : vertical */ .undergrid.lg-align-content_start > *, .grid.lg-align-content_start{align-content: start;} .undergrid.lg-align-content_end > *, .grid.lg-align-content_end{align-content: end;} .undergrid.lg-align-content_center > *, .grid.lg-align-content_center{align-content: center;} .undergrid.lg-align-content_stretch > *, .grid.lg-align-content_stretch{align-content: stretch;} .underflex.lg-align-content_start > *, .flex.lg-align-content_start{align-content: flex-start;} .underflex.lg-align-content_end > *, .flex.lg-align-content_end{align-content: flex-end;} .underflex.lg-align-content_center > *, .flex.lg-align-content_center{align-content: center;} .underflex.lg-align-content_stretch > *, .flex.lg-align-content_stretch{align-content: stretch;} /* Mode : horizontal */ .undergrid.lg-justify-content_start > *, .grid.lg-justify-content_start{justify-content: start;} .undergrid.lg-justify-content_end > *, .grid.lg-justify-content_end{justify-content: end;} .undergrid.lg-justify-content_center > *, .grid.lg-justify-content_center{justify-content: center;} .undergrid.lg-justify-content_stretch > *, .grid.lg-justify-content_stretch{justify-content: stretch;} .undergrid.lg-justify-content_space-around > *, .grid.lg-justify-content_space-around{justify-content: space-around;} .undergrid.lg-justify-content_space-between > *, .grid.lg-justify-content_space-between{justify-content: space-between;} .undergrid.lg-justify-content_space-evenly > *, .grid.lg-justify-content_space-evenly{justify-content: space-evenly;} .underflex.lg-justify-content_start > *, .flex.lg-justify-content_start{justify-content: flex-start;} .underflex.lg-justify-content_end > *, .flex.lg-justify-content_end{justify-content: flex-end;} .underflex.lg-justify-content_center > *, .flex.lg-justify-content_center{justify-content: center;} .underflex.lg-justify-content_stretch > *, .flex.lg-justify-content_stretch{justify-content: stretch;} .underflex.lg-justify-content_space-around > *, .flex.lg-justify-content_space-around{justify-content: space-around;} .underflex.lg-justify-content_space-between > *, .flex.lg-justify-content_space-between{justify-content: space-between;} .underflex.lg-justify-content_space-evenly > *, .flex.lg-justify-content_space-evenly{justify-content: space-evenly;} } @media (max-width:980px) { .undergrid.md-1 > *, .grid.md-1{grid-template-columns: repeat(1, 1fr) !important;} .undergrid.md-2 > *, .grid.md-2{grid-template-columns: repeat(2, 1fr) !important;} .undergrid.md-3 > *, .grid.md-3{grid-template-columns: repeat(3, 1fr) !important;} .undergrid.md-4 > *, .grid.md-4{grid-template-columns: repeat(4, 1fr) !important;} .undergrid.md-5 > *, .grid.md-5{grid-template-columns: repeat(5, 1fr) !important;} .undergrid.md-6 > *, .grid.md-6{grid-template-columns: repeat(6, 1fr) !important;} .grid > .col.md-1{grid-column: span 1 !important;} .grid > .col.md-2{grid-column: span 2 !important;} .grid > .col.md-3{grid-column: span 3 !important;} .grid > .col.md-4{grid-column: span 4 !important;} .grid > .col.md-5{grid-column: span 5 !important;} .grid > .col.md-6{grid-column: span 6 !important;} .grid.md-1 > .col:not([class*="md-"]), .grid.md-2 > .col:not([class*="md-"]), .grid.md-3 > .col:not([class*="md-"]), .grid.md-4 > .col:not([class*="md-"]), .grid.md-5 > .col:not([class*="md-"]), .grid.md-6 > .col:not([class*="md-"]){grid-column: span 1 !important;} .grid.md-1 > .col.md-2{grid-column: span 1 !important;} .grid.md-1 > .col.md-3{grid-column: span 1 !important;} .grid.md-1 > .col.md-4{grid-column: span 1 !important;} .grid.md-1 > .col.md-5{grid-column: span 1 !important;} .grid.md-1 > .col.md-6{grid-column: span 1 !important;} .grid.md-2 > .col.md-3{grid-column: span 2 !important;} .grid.md-2 > .col.md-4{grid-column: span 2 !important;} .grid.md-2 > .col.md-5{grid-column: span 2 !important;} .grid.md-2 > .col.md-6{grid-column: span 2 !important;} .grid.md-3 > .col.md-4{grid-column: span 3 !important;} .grid.md-3 > .col.md-5{grid-column: span 3 !important;} .grid.md-3 > .col.md-6{grid-column: span 3 !important;} .grid.md-4 > .col.md-5{grid-column: span 4 !important;} .grid.md-4 > .col.md-6{grid-column: span 4 !important;} .grid.md-5 > .col.md-6{grid-column: span 5 !important;} .underflex.md-1 > * > *, .flex.md-1 > * {width: 100% !important;} .underflex.md-2 > * > *, .flex.md-2 > * {width: 50% !important;} .underflex.md-3 > * > *, .flex.md-3 > * {width: calc(100% / 3) !important;} .underflex.md-4 > * > *, .flex.md-4 > * {width: 25% !important;} .underflex.md-5 > * > *, .flex.md-5 > * {width: 20% !important;} .underflex.md-6 > * > *, .flex.md-6 > * {width: calc(100% / 6) !important;} .underflex.forcedwidth.md-1 > * > *, .flex.forcedwidth.md-1 > * {min-width: 100% !important;} .underflex.forcedwidth.md-2 > * > *, .flex.forcedwidth.md-2 > * {min-width: 50% !important;} .underflex.forcedwidth.md-3 > * > *, .flex.forcedwidth.md-3 > * {min-width: calc(100% / 3) !important;} .underflex.forcedwidth.md-4 > * > *, .flex.forcedwidth.md-4 > * {min-width: 25% !important;} .underflex.forcedwidth.md-5 > * > *, .flex.forcedwidth.md-5 > * {min-width: 20% !important;} .underflex.forcedwidth.md-6 > * > *, .flex.forcedwidth.md-6 > * {min-width: calc(100% / 6) !important;} .underflex > * > .col.c1, .flex > .col.md-1{ width: calc(100% / 6); } .underflex > * > .col.c2, .flex > .col.md-2{ width: calc(100% / 6 * 2); } .underflex > * > .col.c3, .flex > .col.md-3{ width: calc(100% / 6 * 3); } .underflex > * > .col.c4, .flex > .col.md-4{ width: calc(100% / 6 * 4); } .underflex > * > .col.c5, .flex > .col.md-5{ width: calc(100% / 6 * 5); } .underflex > * > .col.c6, .flex > .col.md-6{ width: 100%; } /* Alignement des items du conteneur grid/flex--------*/ /* Mode : vertical */ .undergrid.md-align-items_start > *, .grid.md-align-items_start{align-items: start;} .undergrid.md-align-items_end > *, .grid.md-align-items_end{align-items: end;} .undergrid.md-align-items_center > *, .grid.md-align-items_center{align-items: center;} .undergrid.md-align-items_stretch > *, .grid.md-align-items_stretch{align-items: stretch;} .underflex.md-align-items_end > *, .flex.md-align-items_end{align-items:flex-end;} .underflex.md-align-items_center > *, .flex.md-align-items_center{align-items:center;} .underflex.md-align-items_start > *, .flex.md-align-items_start{align-items:flex-start;} .underflex.md-align-items_stretch > *, .flex.md-align-items_stretch{align-items:stretch;} /* Mode : horizontal */ .undergrid.md-justify-items_start > *, .grid.md-justify-items_start{justify-items: start;} .undergrid.md-justify-items_end > *, .grid.md-justify-items_end{justify-items: end;} .undergrid.md-justify-items_center > *, .grid.md-justify-items_center{justify-items: center;} .undergrid.md-justify-items_stretch > *, .grid.md-justify-items_stretch{justify-items: stretch;} .underflex.md-justify-items_end > *, .flex.md-justify-items_end{justify-items: flex-end;} .underflex.md-justify-items_start > *, .flex.md-justify-items_start{justify-items: flex-start;} .underflex.md-justify-items_center > *, .flex.md-justify-items_center{justify-items: center;} .underflex.md-justify-items_stretch > *, .flex.md-justify-items_stretch{justify-items: flex-stretch;} /* Alignement du conteneur grid/flex --------*/ /* Mode : vertical */ .undergrid.md-align-content_start > *, .grid.md-align-content_start{align-content: start;} .undergrid.md-align-content_end > *, .grid.md-align-content_end{align-content: end;} .undergrid.md-align-content_center > *, .grid.md-align-content_center{align-content: center;} .undergrid.md-align-content_stretch > *, .grid.md-align-content_stretch{align-content: stretch;} .underflex.md-align-content_start > *, .flex.md-align-content_start{align-content: flex-start;} .underflex.md-align-content_end > *, .flex.md-align-content_end{align-content: flex-end;} .underflex.md-align-content_center > *, .flex.md-align-content_center{align-content: center;} .underflex.md-align-content_stretch > *, .flex.md-align-content_stretch{align-content: stretch;} /* Mode : horizontal */ .undergrid.md-justify-content_start > *, .grid.md-justify-content_start{justify-content: start;} .undergrid.md-justify-content_end > *, .grid.md-justify-content_end{justify-content: end;} .undergrid.md-justify-content_center > *, .grid.md-justify-content_center{justify-content: center;} .undergrid.md-justify-content_stretch > *, .grid.md-justify-content_stretch{justify-content: stretch;} .undergrid.md-justify-content_space-around > *, .grid.md-justify-content_space-around{justify-content: space-around;} .undergrid.md-justify-content_space-between > *, .grid.md-justify-content_space-between{justify-content: space-between;} .undergrid.md-justify-content_space-evenly > *, .grid.md-justify-content_space-evenly{justify-content: space-evenly;} .underflex.md-justify-content_start > *, .flex.md-justify-content_start{justify-content: flex-start;} .underflex.md-justify-content_end > *, .flex.md-justify-content_end{justify-content: flex-end;} .underflex.md-justify-content_center > *, .flex.md-justify-content_center{justify-content: center;} .underflex.md-justify-content_stretch > *, .flex.md-justify-content_stretch{justify-content: stretch;} .underflex.md-justify-content_space-around > *, .flex.md-justify-content_space-around{justify-content: space-around;} .underflex.md-justify-content_space-between > *, .flex.md-justify-content_space-between{justify-content: space-between;} .underflex.md-justify-content_space-evenly > *, .flex.md-justify-content_space-evenly{justify-content: space-evenly;} } @media (max-width:736px) { .undergrid.sm-1 > *, .grid.sm-1{grid-template-columns: repeat(1, 1fr) !important;} .undergrid.sm-2 > *, .grid.sm-2{grid-template-columns: repeat(2, 1fr) !important;} .undergrid.sm-3 > *, .grid.sm-3{grid-template-columns: repeat(3, 1fr) !important;} .undergrid.sm-4 > *, .grid.sm-4{grid-template-columns: repeat(4, 1fr) !important;} .undergrid.sm-5 > *, .grid.sm-5{grid-template-columns: repeat(5, 1fr) !important;} .undergrid.sm-6 > *, .grid.sm-6{grid-template-columns: repeat(6, 1fr) !important;} .grid > .col.sm-1{grid-column: span 1 !important;} .grid > .col.sm-2{grid-column: span 2 !important;} .grid > .col.sm-3{grid-column: span 3 !important;} .grid > .col.sm-4{grid-column: span 4 !important;} .grid > .col.sm-5{grid-column: span 5 !important;} .grid > .col.sm-6{grid-column: span 6 !important;} .grid.sm-1 > .col:not([class*="sm-"]), .grid.sm-2 > .col:not([class*="sm-"]), .grid.sm-3 > .col:not([class*="sm-"]), .grid.sm-4 > .col:not([class*="sm-"]), .grid.sm-5 > .col:not([class*="sm-"]), .grid.sm-6 > .col:not([class*="sm-"]){grid-column: span 1 !important;} .grid.sm-1 > .col.sm-2{grid-column: span 1 !important;} .grid.sm-1 > .col.sm-3{grid-column: span 1 !important;} .grid.sm-1 > .col.sm-4{grid-column: span 1 !important;} .grid.sm-1 > .col.sm-5{grid-column: span 1 !important;} .grid.sm-1 > .col.sm-6{grid-column: span 1 !important;} .grid.sm-2 > .col.sm-3{grid-column: span 2 !important;} .grid.sm-2 > .col.sm-4{grid-column: span 2 !important;} .grid.sm-2 > .col.sm-5{grid-column: span 2 !important;} .grid.sm-2 > .col.sm-6{grid-column: span 2 !important;} .grid.sm-3 > .col.sm-4{grid-column: span 3 !important;} .grid.sm-3 > .col.sm-5{grid-column: span 3 !important;} .grid.sm-3 > .col.sm-6{grid-column: span 3 !important;} .grid.sm-4 > .col.sm-5{grid-column: span 4 !important;} .grid.sm-4 > .col.sm-6{grid-column: span 4 !important;} .grid.sm-5 > .col.sm-6{grid-column: span 5 !important;} .underflex.sm-1 > * > *, .flex.sm-1 > * {width: 100% !important;} .underflex.sm-2 > * > *, .flex.sm-2 > * {width: 50% !important;} .underflex.sm-3 > * > *, .flex.sm-3 > * {width: calc(100% / 3) !important;} .underflex.sm-4 > * > *, .flex.sm-4 > * {width: 25% !important;} .underflex.sm-5 > * > *, .flex.sm-5 > * {width: 20% !important;} .underflex.sm-6 > * > *, .flex.sm-6 > * {width: calc(100% / 6) !important;} .underflex.forcedwidth.sm-1 > * > *, .flex.forcedwidth.sm-1 > * {min-width: 100% !important;} .underflex.forcedwidth.sm-2 > * > *, .flex.forcedwidth.sm-2 > * {min-width: 50% !important;} .underflex.forcedwidth.sm-3 > * > *, .flex.forcedwidth.sm-3 > * {min-width: calc(100% / 3) !important;} .underflex.forcedwidth.sm-4 > * > *, .flex.forcedwidth.sm-4 > * {min-width: 25% !important;} .underflex.forcedwidth.sm-5 > * > *, .flex.forcedwidth.sm-5 > * {min-width: 20% !important;} .underflex.forcedwidth.sm-6 > * > *, .flex.forcedwidth.sm-6 > * {min-width: calc(100% / 6) !important;} .underflex > * > .col.c1, .flex > .col.sm-1{ width: calc(100% / 6); } .underflex > * > .col.c2, .flex > .col.sm-2{ width: calc(100% / 6 * 2); } .underflex > * > .col.c3, .flex > .col.sm-3{ width: calc(100% / 6 * 3); } .underflex > * > .col.c4, .flex > .col.sm-4{ width: calc(100% / 6 * 4); } .underflex > * > .col.c5, .flex > .col.sm-5{ width: calc(100% / 6 * 5); } .underflex > * > .col.c6, .flex > .col.sm-6{ width: 100%; } /* Alignement des items du conteneur grid/flex--------*/ /* Mode : vertical */ .undergrid.sm-align-items_start > *, .grid.sm-align-items_start{align-items: start;} .undergrid.sm-align-items_end > *, .grid.sm-align-items_end{align-items: end;} .undergrid.sm-align-items_center > *, .grid.sm-align-items_center{align-items: center;} .undergrid.sm-align-items_stretch > *, .grid.sm-align-items_stretch{align-items: stretch;} .underflex.sm-align-items_end > *, .flex.sm-align-items_end{align-items:flex-end;} .underflex.sm-align-items_center > *, .flex.sm-align-items_center{align-items:center;} .underflex.sm-align-items_start > *, .flex.sm-align-items_start{align-items:flex-start;} .underflex.sm-align-items_stretch > *, .flex.sm-align-items_stretch{align-items:stretch;} /* Mode : horizontal */ .undergrid.sm-justify-items_start > *, .grid.sm-justify-items_start{justify-items: start;} .undergrid.sm-justify-items_end > *, .grid.sm-justify-items_end{justify-items: end;} .undergrid.sm-justify-items_center > *, .grid.sm-justify-items_center{justify-items: center;} .undergrid.sm-justify-items_stretch > *, .grid.sm-justify-items_stretch{justify-items: stretch;} .underflex.sm-justify-items_end > *, .flex.sm-justify-items_end{justify-items: flex-end;} .underflex.sm-justify-items_start > *, .flex.sm-justify-items_start{justify-items: flex-start;} .underflex.sm-justify-items_center > *, .flex.sm-justify-items_center{justify-items: center;} .underflex.sm-justify-items_stretch > *, .flex.sm-justify-items_stretch{justify-items: flex-stretch;} /* Alignement du conteneur grid/flex --------*/ /* Mode : vertical */ .undergrid.sm-align-content_start > *, .grid.sm-align-content_start{align-content: start;} .undergrid.sm-align-content_end > *, .grid.sm-align-content_end{align-content: end;} .undergrid.sm-align-content_center > *, .grid.sm-align-content_center{align-content: center;} .undergrid.sm-align-content_stretch > *, .grid.sm-align-content_stretch{align-content: stretch;} .underflex.sm-align-content_start > *, .flex.sm-align-content_start{align-content: flex-start;} .underflex.sm-align-content_end > *, .flex.sm-align-content_end{align-content: flex-end;} .underflex.sm-align-content_center > *, .flex.sm-align-content_center{align-content: center;} .underflex.sm-align-content_stretch > *, .flex.sm-align-content_stretch{align-content: stretch;} /* Mode : horizontal */ .undergrid.sm-justify-content_start > *, .grid.sm-justify-content_start{justify-content: start;} .undergrid.sm-justify-content_end > *, .grid.sm-justify-content_end{justify-content: end;} .undergrid.sm-justify-content_center > *, .grid.sm-justify-content_center{justify-content: center;} .undergrid.sm-justify-content_stretch > *, .grid.sm-justify-content_stretch{justify-content: stretch;} .undergrid.sm-justify-content_space-around > *, .grid.sm-justify-content_space-around{justify-content: space-around;} .undergrid.sm-justify-content_space-between > *, .grid.sm-justify-content_space-between{justify-content: space-between;} .undergrid.sm-justify-content_space-evenly > *, .grid.sm-justify-content_space-evenly{justify-content: space-evenly;} .underflex.sm-justify-content_start > *, .flex.sm-justify-content_start{justify-content: flex-start;} .underflex.sm-justify-content_end > *, .flex.sm-justify-content_end{justify-content: flex-end;} .underflex.sm-justify-content_center > *, .flex.sm-justify-content_center{justify-content: center;} .underflex.sm-justify-content_stretch > *, .flex.sm-justify-content_stretch{justify-content: stretch;} .underflex.sm-justify-content_space-around > *, .flex.sm-justify-content_space-around{justify-content: space-around;} .underflex.sm-justify-content_space-between > *, .flex.sm-justify-content_space-between{justify-content: space-between;} .underflex.sm-justify-content_space-evenly > *, .flex.sm-justify-content_space-evenly{justify-content: space-evenly;} } @media(max-width: 480px) { .undergrid.xs-1 > *, .grid.xs-1{grid-template-columns: repeat(1, 1fr) !important;} .undergrid.xs-2 > *, .grid.xs-2{grid-template-columns: repeat(2, 1fr) !important;} .undergrid.xs-3 > *, .grid.xs-3{grid-template-columns: repeat(3, 1fr) !important;} .undergrid.xs-4 > *, .grid.xs-4{grid-template-columns: repeat(4, 1fr) !important;} .undergrid.xs-5 > *, .grid.xs-5{grid-template-columns: repeat(5, 1fr) !important;} .undergrid.xs-6 > *, .grid.xs-6{grid-template-columns: repeat(6, 1fr) !important;} .grid > .col.xs-1{grid-column: span 1 !important;} .grid > .col.xs-2{grid-column: span 2 !important;} .grid > .col.xs-3{grid-column: span 3 !important;} .grid > .col.xs-4{grid-column: span 4 !important;} .grid > .col.xs-5{grid-column: span 5 !important;} .grid > .col.xs-6{grid-column: span 6 !important;} .grid.xs-1 > .col:not([class*="xs-"]), .grid.xs-2 > .col:not([class*="xs-"]), .grid.xs-3 > .col:not([class*="xs-"]), .grid.xs-4 > .col:not([class*="xs-"]), .grid.xs-5 > .col:not([class*="xs-"]), .grid.xs-6 > .col:not([class*="xs-"]){grid-column: span 1 !important;} .grid.xs-1 > .col.xs-2{grid-column: span 1 !important;} .grid.xs-1 > .col.xs-3{grid-column: span 1 !important;} .grid.xs-1 > .col.xs-4{grid-column: span 1 !important;} .grid.xs-1 > .col.xs-5{grid-column: span 1 !important;} .grid.xs-1 > .col.xs-6{grid-column: span 1 !important;} .grid.xs-2 > .col.xs-3{grid-column: span 2 !important;} .grid.xs-2 > .col.xs-4{grid-column: span 2 !important;} .grid.xs-2 > .col.xs-5{grid-column: span 2 !important;} .grid.xs-2 > .col.xs-6{grid-column: span 2 !important;} .grid.xs-3 > .col.xs-4{grid-column: span 3 !important;} .grid.xs-3 > .col.xs-5{grid-column: span 3 !important;} .grid.xs-3 > .col.xs-6{grid-column: span 3 !important;} .grid.xs-4 > .col.xs-5{grid-column: span 4 !important;} .grid.xs-4 > .col.xs-6{grid-column: span 4 !important;} .grid.xs-5 > .col.xs-6{grid-column: span 5 !important;} .underflex.xs-1 > * > *, .flex.xs-1 > * {width: 100% !important;} .underflex.xs-2 > * > *, .flex.xs-2 > * {width: 50% !important;} .underflex.xs-3 > * > *, .flex.xs-3 > * {width: calc(100% / 3) !important;} .underflex.xs-4 > * > *, .flex.xs-4 > * {width: 25% !important;} .underflex.xs-5 > * > *, .flex.xs-5 > * {width: 20% !important;} .underflex.xs-6 > * > *, .flex.xs-6 > * {width: calc(100% / 6) !important;} .underflex.forcedwidth.xs-1 > * > *, .flex.forcedwidth.xs-1 > * {min-width: 100% !important;} .underflex.forcedwidth.xs-2 > * > *, .flex.forcedwidth.xs-2 > * {min-width: 50% !important;} .underflex.forcedwidth.xs-3 > * > *, .flex.forcedwidth.xs-3 > * {min-width: calc(100% / 3) !important;} .underflex.forcedwidth.xs-4 > * > *, .flex.forcedwidth.xs-4 > * {min-width: 25% !important;} .underflex.forcedwidth.xs-5 > * > *, .flex.forcedwidth.xs-5 > * {min-width: 20% !important;} .underflex.forcedwidth.xs-6 > * > *, .flex.forcedwidth.xs-6 > * {min-width: calc(100% / 6) !important;} .underflex > * > .col.c1, .flex > .col.xs-1{ width: calc(100% / 6); } .underflex > * > .col.c2, .flex > .col.xs-2{ width: calc(100% / 6 * 2); } .underflex > * > .col.c3, .flex > .col.xs-3{ width: calc(100% / 6 * 3); } .underflex > * > .col.c4, .flex > .col.xs-4{ width: calc(100% / 6 * 4); } .underflex > * > .col.c5, .flex > .col.xs-5{ width: calc(100% / 6 * 5); } .underflex > * > .col.c6, .flex > .col.xs-6{ width: 100%; } /* Alignement des items du conteneur grid/flex--------*/ /* Mode : vertical */ .undergrid.xs-align-items_start > *, .grid.xs-align-items_start{align-items: start;} .undergrid.xs-align-items_end > *, .grid.xs-align-items_end{align-items: end;} .undergrid.xs-align-items_center > *, .grid.xs-align-items_center{align-items: center;} .undergrid.xs-align-items_stretch > *, .grid.xs-align-items_stretch{align-items: stretch;} .underflex.xs-align-items_end > *, .flex.xs-align-items_end{align-items:flex-end;} .underflex.xs-align-items_center > *, .flex.xs-align-items_center{align-items:center;} .underflex.xs-align-items_start > *, .flex.xs-align-items_start{align-items:flex-start;} .underflex.xs-align-items_stretch > *, .flex.xs-align-items_stretch{align-items:stretch;} /* Mode : horizontal */ .undergrid.xs-justify-items_start > *, .grid.xs-justify-items_start{justify-items: start;} .undergrid.xs-justify-items_end > *, .grid.xs-justify-items_end{justify-items: end;} .undergrid.xs-justify-items_center > *, .grid.xs-justify-items_center{justify-items: center;} .undergrid.xs-justify-items_stretch > *, .grid.xs-justify-items_stretch{justify-items: stretch;} .underflex.xs-justify-items_end > *, .flex.xs-justify-items_end{justify-items: flex-end;} .underflex.xs-justify-items_start > *, .flex.xs-justify-items_start{justify-items: flex-start;} .underflex.xs-justify-items_center > *, .flex.xs-justify-items_center{justify-items: center;} .underflex.xs-justify-items_stretch > *, .flex.xs-justify-items_stretch{justify-items: flex-stretch;} /* Alignement du conteneur grid/flex --------*/ /* Mode : vertical */ .undergrid.xs-align-content_start > *, .grid.xs-align-content_start{align-content: start;} .undergrid.xs-align-content_end > *, .grid.xs-align-content_end{align-content: end;} .undergrid.xs-align-content_center > *, .grid.xs-align-content_center{align-content: center;} .undergrid.xs-align-content_stretch > *, .grid.xs-align-content_stretch{align-content: stretch;} .underflex.xs-align-content_start > *, .flex.xs-align-content_start{align-content: flex-start;} .underflex.xs-align-content_end > *, .flex.xs-align-content_end{align-content: flex-end;} .underflex.xs-align-content_center > *, .flex.xs-align-content_center{align-content: center;} .underflex.xs-align-content_stretch > *, .flex.xs-align-content_stretch{align-content: stretch;} /* Mode : horizontal */ .undergrid.xs-justify-content_start > *, .grid.xs-justify-content_start{justify-content: start;} .undergrid.xs-justify-content_end > *, .grid.xs-justify-content_end{justify-content: end;} .undergrid.xs-justify-content_center > *, .grid.xs-justify-content_center{justify-content: center;} .undergrid.xs-justify-content_stretch > *, .grid.xs-justify-content_stretch{justify-content: stretch;} .undergrid.xs-justify-content_space-around > *, .grid.xs-justify-content_space-around{justify-content: space-around;} .undergrid.xs-justify-content_space-between > *, .grid.xs-justify-content_space-between{justify-content: space-between;} .undergrid.xs-justify-content_space-evenly > *, .grid.xs-justify-content_space-evenly{justify-content: space-evenly;} .underflex.xs-justify-content_start > *, .flex.xs-justify-content_start{justify-content: flex-start;} .underflex.xs-justify-content_end > *, .flex.xs-justify-content_end{justify-content: flex-end;} .underflex.xs-justify-content_center > *, .flex.xs-justify-content_center{justify-content: center;} .underflex.xs-justify-content_stretch > *, .flex.xs-justify-content_stretch{justify-content: stretch;} .underflex.xs-justify-content_space-around > *, .flex.xs-justify-content_space-around{justify-content: space-around;} .underflex.xs-justify-content_space-between > *, .flex.xs-justify-content_space-between{justify-content: space-between;} .underflex.xs-justify-content_space-evenly > *, .flex.xs-justify-content_space-evenly{justify-content: space-evenly;} } /***************************************************************************/ /*BASE STYLES*/ /***************************************************************************/ .search-toggle:before{ -webkit-font-smoothing: antialiased; display: inline-block; font: normal 16px/1 Genericons; text-decoration: inherit; vertical-align: text-bottom; } .search-box:before, .search-box:after{ content: ""; display: table; } .search-box:after{ clear: both; } a[bubbletooltip]:before{ content: ""; position: absolute; border-left: 21px solid transparent; border-right: 21px solid transparent; visibility: hidden; left: 0px; top: -20px; } a[bubbletooltip]:after{ position: absolute; content: attr(bubbletooltip); font-weight:bold; left: 0px; -moz-border-radius: 6px; -webkit-border-radius:6px; -khtml-border-radius:6px; border-radius: 6px; white-space: nowrap; visibility: hidden; top: -35px; padding: 5px 10px; } a[bubbletooltip]:hover:before, a[bubbletooltip]:hover:after{ visibility: visible; transition: visibility 0s linear .3s; } /***************************************************************************/ /*SEARCH */ /***************************************************************************/ .search-form { margin: 0 auto; position: relative; float: right; } .vertical .search-form { width: 100%; } #b { position:absolute; right:0; top:2px; cursor: pointer; bottom: 3px; height: 23px; } #b { font-size: 20px; } #b:before { content: "\f400"; font-family: "Genericons"; padding: 0 4px; } #s { border: none; padding: 0px 30px 0px 5px; } /***************************************************************************/ /*ACCESSIBILITE*/ /***************************************************************************/ .accessibilite{ text-align: right; } .accessibilite a{ text-align: center; line-height: 26px; padding: 0 5px; margin: 0; text-decoration: none; color: #c0bbc0; font-size: 14px; } /***************************************************************************/ /*SOCIAUX*/ /***************************************************************************/ .social-icons{padding: 0px;float: right;} .social-item{display: inline-block; margin: 3px 5px;} .genericon{ font-size: 24px; width: 24px; height: 24px; -webkit-transition : color ease 0.2s, background-color ease 0.2s; transition : color ease 0.2s, background-color ease 0.2s; font-family: 'Genericons' !important; } / /***************************************************************************/ /*TABLE*/ /***************************************************************************/ article table, #tabs table { border-top: #3f3f3f 5px solid; margin: 0 0 30px 0; font-size: 0.88em; } article table:not(.tablenergie) td, #tabs table:not(.tablenergie) td , article table:not(.tablenergie) th, #tabs table:not(.tablenergie) th { text-align: left; vertical-align: middle; line-height: 1; } article table:not(.tablenergie) td, #tabs table:not(.tablenergie) td { text-align: right; font-size: 15px; } article table:not(.tablenergie) td a, #tabs table:not(.tablenergie) td a { color: var(--text-color); } article table:not(.tablenergie) td a:hover, #tabs table:not(.tablenergie) td a:hover { color: var(--secondary-bgcolor); } article table th, #tabs table th { padding: 15px 10px 15px 10px; font-size: 0.7em; } #tabs table th{ background-color: var(--primary-bgcolor); color: var(--white); font-family: var(--font-title); text-transform: uppercase; } article table:not(.tablenergie) td, #tabs table:not(.tablenergie) td { padding: 10px; line-height: 1; } article table:not(.tablenergie) tr, #tabs table:not(.tablenergie) tr { background: var(--white); border-bottom: 1px dashed #e5e5e5; } article table caption, #tabs table caption { margin: 0 0 15px 0; } .table400{ max-height:400px; overflow:auto; } .table400 table{ margin: 0; } /***************************************************************************/ /*PLAN DU SITE*/ /***************************************************************************/ .plandusite {margin: 0px 2% 40px 2%}; .ul_plandusite{padding: 15px 0;} .ul_plandusite li {padding: 5px;} /***************************************************************************/ /*SLIDER CARROUSEL - PARTENAIRES */ /***************************************************************************/ /** RESET AND LAYOUT ===================================*/ .bx-wrapper { position: relative; margin: 0 auto; padding: 0; *zoom: 1; *box-sizing: border-box; } .bx-wrapper img { max-width: 100%; display: block; } /** THEME ===================================*/ .bx-wrapper .bx-viewport { /*fix other elements on the page moving (on Chrome)*/ -webkit-transform: translatez(0); -moz-transform: translatez(0); -ms-transform: translatez(0); -o-transform: translatez(0); transform: translatez(0); } .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto { width: 100%; bottom: -30px; position: absolute; } /* LOADER */ .bx-wrapper .bx-loading { min-height: 50px; background: url(../images/base/bx_loader.gif) center center no-repeat var(--back-color); height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 2000; } /* PAGER */ .bx-wrapper .bx-pager { text-align: center; font-size: .85em; font-family: Arial; font-weight: bold; color: #666; padding-top: 20px; display: none; } .bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block; *zoom: 1; *display: inline; } .bx-wrapper .bx-pager.bx-default-pager a { background: #666; text-indent: -9999px; display: block; width: 10px; height: 10px; margin: 0 5px; outline: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active { background: #000; } /* DIRECTION CONTROLS (NEXT / PREV) */ .bx-wrapper .bx-prev { left: 0px; background: url(../images/base/controls.png) no-repeat 0 -32px; } .bx-wrapper .bx-next { right: 0px; background: url(../images/base/controls.png) no-repeat -43px -32px; } .bx-wrapper .bx-prev:hover { background-position: 0 0; } .bx-wrapper .bx-next:hover { background-position: -43px 0; } .bx-wrapper .bx-controls-direction a { position: absolute; top: 50%; margin-top: -16px; outline: 0; width: 32px; height: 32px; text-indent: -9999px; z-index: 999; } .bx-wrapper .bx-controls-direction a.disabled { display: none; } /* AUTO CONTROLS (START / STOP) */ .bx-wrapper .bx-controls-auto { text-align: center; } .bx-wrapper .bx-controls-auto .bx-start { display: block; text-indent: -9999px; width: 10px; height: 11px; outline: 0; background: url(../images/base/controls.png) -86px -11px no-repeat; margin: 0 3px; } .bx-wrapper .bx-controls-auto .bx-start:hover, .bx-wrapper .bx-controls-auto .bx-start.active { background-position: -86px 0; } .bx-wrapper .bx-controls-auto .bx-stop { display: block; text-indent: -9999px; width: 9px; height: 11px; outline: 0; background: url(../images/base/controls.png) -86px -44px no-repeat; margin: 0 3px; } .bx-wrapper .bx-controls-auto .bx-stop:hover, .bx-wrapper .bx-controls-auto .bx-stop.active { background-position: -86px -33px; } /* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */ .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { text-align: left; width: 80%; } .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { right: 0; width: 35px; } /* IMAGE CAPTIONS */ .bx-wrapper .bx-caption { position: absolute; bottom: 0; left: 0; background: #666; background: rgba(80, 80, 80, 0.75); width: 100%; } .bx-wrapper .bx-caption span { color: var(--back-color); font-family: Arial; display: block; font-size: .85em; padding: 10px; } /***************************************************************************/ /*GG PLUGIN TRADUCTION*/ /***************************************************************************/ .labellang{ color:#222; text-shadow:1px 1px 1px #000; } #google_translate_element{ overflow: hidden; width: 187px; height: 22px; margin: 5px; } .goog-te-combo{ position: absolute; border: none; padding: 5px 0; width: 190px; color:#444; border: 1px solid var(--back-color); background: var(--back-color); } #google_translate_element select { margin: 0; padding: 1px; } .ds_box {position: static !important;} /***************************************************************************/ /*ARTICLE*/ /***************************************************************************/ /*TABLEAU*/ article table, #tabs table:not(.tablenergie) {width: 100%;} /*GALERIE*/ .gallery-item .gallery-icon{ opacity: 0.9; transition: all 0.4s; } .gallery-item .gallery-icon:hover{ opacity: 1; } .gallery {margin: 0 auto 18px;display: grid;grid-template-columns: repeat(3,1fr);} .gallery .gallery-item { /* float: left; */ margin: 15px 0; text-align: center; /* width: 33%; */ } .gallery-columns-2 .gallery-item { width: 50%; } .gallery-columns-4 .gallery-item {/* width: 25%; */} .gallery-columns-2 .attachment-medium { max-width: 92%; height: auto; } .gallery-columns-4 .attachment-thumbnail { max-width: 84%; height: auto; } .gallery .gallery-caption { color: #888; font-size: 0.9em; margin: 0 0 12px; } .gallery dl, .gallery dt { margin: 0; } .gallery br+br { display: none; } .gallery-icon img{ max-width: 100%; height: auto; } /*PRE*/ article pre { background: url(../images/base/pre.png); border: #dee0e0 1px solid; font-family: Consolas,"Andale Mono",Courier,"Courier New",monospace; font-size: 12px; line-height: 155%; margin: 0 0 30px; padding: 20px; white-space: pre-wrap; } /*LISTE*/ article ol li { list-style: decimal inside; } article ol { margin: 0 0 30px 0; } article ol ol { margin: 0 0 0 15px; } article ol ol li { list-style: lower-alpha inside; } article ul{ margin: 0 0 20px 0; } article li ul{ margin: 0 0 20px 40px; } #back{ float: right; } /*Commentaire*/ #respond, #comments{ width: 90%; margin:40px 5%; } #respond input, #respond textarea{ margin: 13px 0 3px 0; padding: 2px 5px; } #respond input[type=submit]{ float: right; } #respond textarea{ width: 100%; padding: 0; } #respond label small{ font-size: 0.8em; } .commentlist .reply { padding: 5px 0; text-align: right;} .commentlist li article{ margin: 20px 0; padding: 5px; background: rgba(255,255,255,0.1);} .commentlist .vcard img.avatar { padding: 0px; margin: 4px; float: right;} .commentlist .comment-meta { text-align: left; border-bottom: 1px solid #ddd; min-height: 42px; text-transform: uppercase; letter-spacing: 0.05em; font-size: 80%;} .commentlist .comment-metadata{ display: none;} .commentlist .children { padding-left: 15px;} .commentlist .comment-author { vertical-align: top;} .commentlist { width: 90%; margin: 0 2%;} /***************************************************************************/ /*TABS*/ /***************************************************************************/ #tabs .nav { margin: 0; } #tabs .nav li { list-style: none; padding: 0; } #tabs .nav li a { color: #424242; } #tabs .nav li a:hover { text-decoration: none; } .ui-tabs { position: relative; padding: .2em; zoom: 1; margin: 0 auto; margin-top: 50px; max-width: 1290px; } .ui-tabs .ui-tabs-nav { margin: 0; position: relative; top: 0px; } .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; border-bottom: #dee0e0 1px solid; padding: 0; white-space: nowrap; font-size: 16px; } .ui-tabs .ui-tabs-nav li:first-child a { border-left: #dee0e0 1px solid; } .ui-tabs .ui-tabs-nav li a { float: left; padding: 6px 20px 6px 20px; text-decoration: none; border-right: #dee0e0 1px solid; line-height: 190%; white-space: break-spaces; } .ui-tabs .ui-tabs-nav li { border-top: #dee0e0 5px solid; border-bottom: #dee0e0 1px solid; background: var(--back-color); } .ui-tabs .ui-tabs-nav li:last-child { background: var(--back-color); } .ui-tabs .ui-tabs-nav li.ui-tabs-selected { border-top: 5px solid; margin-bottom: 0; border-bottom: var(--back-color) 1px solid; } .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; } .ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } .ui-tabs .ui-tabs-panel { display: block; border: #dee0e0 1px solid; padding: 20px 20px 20px 20px; background: var(--back-color); } .ui-tabs .ui-tabs-hide { display: none; } .ui-tabs-nav li.ui-tabs-active, .ui-tabs-nav li.ui-state-active{ border-top: 5px solid #333; } /***************************************************************************/ /*Toggle*/ /***************************************************************************/ .toggle .title { background: url(../images/base/plus.png) center left no-repeat; } .toggle .title.active { background-image: url(../images/base/minus.png); } .toggle { border: #d4d4d4 1px solid; margin: 0 0 20px 0; background: var(--back-color); font-size: 14px; } .toggle h4 { margin: 0 0 0 0; line-height: 160%; font-size: 14px; text-transform: uppercase; font-weight: 700; } .toggle .title { margin: 0 0 0 0; padding: 20px 0 20px 55px; cursor: pointer; } .toggle .inner { margin: 0 20px 30px 55px; line-height: 160%; display: none; } .toggle .inner.active{display:block;} /***************************************************************************/ /*ACCORDION*/ /***************************************************************************/ .accordion h4 { font-size: 14px; text-transform: uppercase; font-weight: 700; border-top: #d4d4d4 1px solid; border-left: none; border-right: none; margin: 0 0 0 0 !important; padding: 30px 0 30px 55px; cursor: pointer; line-height: 160%; outline: none; } .accordion { border-bottom: #d4d4d4 1px solid; margin: 0 0 30px 0; line-height: 160%; display: block; font-size: 14px; } .accordion .ui-widget-content { border: none; } .accordion .ui-accordion-content { padding: 0 0 20px 55px; } .accordion h4 { background: url(../images/base/plus.png) no-repeat 20px center; } .accordion h4:hover { background: url(../images/base/plus.png) var(--back-color) no-repeat 20px center; } .accordion h4.ui-state-active{ background: url(../images/base/minus.png) no-repeat 20px center; } /***************************************************************************/ /*Maintenance*/ /***************************************************************************/ .maintenancesite{ margin:0; padding:0; width:100%; height:100%; min-height:100%; text-align:center; position:relative; background:#000; } .maint-blocprincipal{ border-top:10px solid #222; border-bottom:10px solid #222; margin-top:4%; height:60%; background:#ccc; } .maint-secondary{ background:var(--back-color); position:absolute; top:17%; width:60%; margin:0 18%; color:#222; padding:30px 2%; -moz-box-shadow: 0px 30px 20px -20px #999999; -webkit-box-shadow: 0px 30px 20px -20px #999999; -o-box-shadow: 0px 30px 20px -20px #999999; box-shadow: 0px 30px 20px -20px #999999; filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999, Direction=180, Strength=20); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .maint-secondary img{ width: 450px; max-width: 100%; } .maint-secondary h1{ font-family:arial; font-size:29px; } .maint-secondary p{ font-family:arial; font-size:15px; } /***************************************************************************/ /*WOOCOMMERCE*/ /***************************************************************************/ /*GLOBAL*/ .woocommerce-ordering{ margin-bottom: 20px; text-align: right; } .orderby{ padding: 5px 10px; border-color: rgba(0,0,0,.2); } /* Default Product Columns (4) */ .products li img{ max-width: 100%; width: 100%; height: 100%!important; object-fit: cover; margin: 0!important; position: absolute; left: 0; right: 0; } .products .product-img:before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 40%; z-index: 1; background: linear-gradient(to top, rgb(0 0 0 / 80%), transparent); } .woocommerce ul.products li.product a img{ margin: 0!important; height: 100%!important; object-fit: cover; } .products .product-img{ position: relative; z-index: 1; height: 300px!important; } .products li h3{ padding: 22px 20px 5px!important; font-size: 18px!important; order: -1; margin: 0; text-transform: uppercase; color: var(--title-color); } ul.products li.product .price { /* margin: 0!important; padding: 15px 20px 25px; order: 0; font-size: 22px!important; display: block; text-decoration: none; color: var(--primary-bgcolor)!important; top: 0; right: 0; right: 0; line-height: 1; */ margin: 0!important; padding: 0 15px; order: 2; font-size: 24px!important; display: block; text-decoration: none; color: var(--white)!important; position: absolute; top: 251px; left: 15px; right: 0; text-align: right; } /* Products 3 Columns */ .products-3columns li, .featured-3 .products li { width: 31.3%; float: left; margin: 0 3% 40px 0; } .products-3columns li:nth-child(3n), .featured-3 .products li:nth-child(3n) { margin: 0 0 40px 0; } /* Products 4 Columns */ .products-4columns li, .featured-4 .products li { width: 22.7%; float: left; margin: 0 3% 40px 0; } .products-4columns li:nth-child(4n), .featured-4 .products li:nth-child(4n) { margin: 0 0 40px 0; } .products-4columns li:nth-child(4n+1), .featured-4 .products li:nth-child(4n+1) { clear: both; } /* Products 5 Columns */ .products-5columns li, .featured-5 .products li { width: 17.6%; float: left; margin: 0 3% 40px 0; } .products-5columns li:nth-child(5n), .featured-5 .products li:nth-child(5n) { margin: 0 0 40px 0; } .products-5columns li:nth-child(5n+1), .featured-5 .products li:nth-child(5n+1) { clear: both; } /* Products 6 Columns */ .products-6columns li, .featured-6 .products li { width: 14.1%; float: left; margin: 0 3% 40px 0; } .products-6columns li:nth-child(6n), .featured-6 .products li:nth-child(6n) { margin: 0 0 40px 0; } /* Hover Transitions*/ .product-intro-single .price{ /* float: right; */ color: var(--primary-bgcolor); font-family: var(--font-title); font-size: 25px; order: 2; line-height: 1; position: relative; padding-bottom: 30px; } .product-intro-single .price del{ font-size: 14px; font-style: italic; color: var(--text-color); } .product-intro-single .product_meta{ display: none; } .products li.product .price del{ font-size: 14px; color: rgb(255 255 255 / 80%)!important; font-style: italic; margin-right: 6px; opacity: .5; display: inline-block; } .entry-gallery { position: relative; } .woocontact{ order: 4; } .woocontact input.button{ border:none; padding: 14px 20px; } .woocontact input.button:hover{ background-color: var(--black); } mark.count{ display: none; } .blocwoofilter{ padding: 10px; } .blocwoofilter ul.children{ padding: 0 20px; } .blocwoofilter li{ padding: 0; } /*BREADCRUMB WOO*/ /*listig categoris*/ .subcategories{ padding-left: 15px; } .current_categorie a{color: var(--back-color) !important;} /*Slider Price*/ .price_slider{ margin-bottom: 1em; } .price_slider_amount { font-size: 12px; color: var(--white); font-family: var(--font-bold); text-align: right; margin-bottom: 40px; } .price_slider_amount .button { font-size: 11px; padding: 5px 10px !important; border: none; float: left; } .ui-slider { position: relative; text-align: left; } .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 0.9em; height: 0.9em; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.25); cursor: pointer; background: #e7e7e7; background: -webkit-gradient(linear,left top,left bottom,from(#FEFEFE),to(#e7e7e7)); background: -webkit-linear-gradient(#FEFEFE,#e7e7e7); background: -moz-linear-gradient(center top,#FEFEFE 0%,#e7e7e7 100%); background: -moz-gradient(center top,#FEFEFE 0%,#e7e7e7 100%); outline: none; top: -.3em; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.65) inset; -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.65) inset; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.65) inset; } .ui-slider .ui-slider-handle:last-child { margin-left: -1em; } .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size:.7em; display: block; border: 0; background: none repeat scroll 0 0 #FF6B6B; box-shadow: 1px 1px 1px 0.5px rgba(0, 0, 0, 0.25) inset; -webkit-box-shadow: 1px 1px 1px 0.5px rgba(0, 0, 0, 0.25) inset; -moz-box-shadow: 1px 1px 1px 0.5px rgba(0, 0, 0, 0.25) inset; -moz-border-radius: 1em; border-radius: 1em; } .price_slider_wrapper .ui-widget-content { -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em; background: #1e1e1e; background: -webkit-gradient(linear,left top,left bottom,from(#1e1e1e),to(#6a6a6a)); background: -webkit-linear-gradient(#1e1e1e,#6a6a6a); background: -moz-linear-gradient(center top,#1e1e1e 0%,#6a6a6a 100%); background: -moz-gradient(center top,#1e1e1e 0%,#6a6a6a 100%); } .ui-slider-horizontal { height:.5em; } .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } .ui-slider-horizontal .ui-slider-range-min { left: -1px; } .ui-slider-horizontal .ui-slider-range-max { right: -1px; } /*pagination*/ .woocommerce-pagination{ clear: both; text-align: center; margin-top: 60px; padding: 20px; background-color: var(--beige); } .woocommerce-pagination ul li{ display: inline-block; padding: 2px; box-sizing: border-box; } .woocommerce-pagination ul li .page-numbers{ transition: all 0.4s; display: block; border-radius: 100px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-family: var(--font-title); color: var(--title-color); } .woocommerce-pagination ul li .page-numbers.current, .woocommerce-pagination ul li .page-numbers:hover{ background: var(--primary-bgcolor); color: var(--white); } /***************************************************************************/ /*DOWLOADMANAGER */ /***************************************************************************/ .dlformloguser input{ border: 1px solid #ccc; background: var(--back-color); border-radius: 2px; padding: 5px; margin-right: 10px; } .dlformloguser{ padding: 10px 20px; background: #f6f6f6; } .dm_filelist li{ padding: 5px 10px; background: #f6f6f6; border: 1px solid #e0e0e0; margin:5px 0; height: 60px; position: relative; list-style: none; } .dm_filelist li img{ float: left; margin-right: 10px; width: 46px; height: 60px; } .dm_mime{ float: none; font-size: 9px; font-weight: normal; } .dm_filelist .dlbutton{ position: absolute; right: 10px; bottom: 10px; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8fcf00), color-stop(100%, #6b9c00)); background: -webkit-linear-gradient(top, #8fcf00, #6b9c00); background: -moz-linear-gradient(top, #8fcf00, #6b9c00); background: -o-linear-gradient(top, #8fcf00, #6b9c00); background: linear-gradient(top, #8fcf00, #6b9c00); background-color: #7db500; border-color: #5a8200; color: white; text-shadow: 0 -1px 1px rgba(19, 28, 0, 0.35); -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15); box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15); display: -moz-inline-stack; display: inline-block; vertical-align: middle; zoom: 1; border: 1px solid #d4d4d4; height: 32px; line-height: 32px; padding: 0px 25.6px; font-weight: 300; font-size: 14px; font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; color: #666666; text-shadow: 0 1px 1px white; margin: 0; text-decoration: none; text-align: center; border-color: #5a8200; color: white; text-shadow: 0 -1px 1px rgba(19, 28, 0, 0.35); } .dm_filelist .dlbutton:hover { background-color: #7db500; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a0e800), color-stop(100%, #6b9c00)); background: -webkit-linear-gradient(top, #a0e800, #6b9c00); background: -moz-linear-gradient(top, #a0e800, #6b9c00); background: -o-linear-gradient(top, #a0e800, #6b9c00); background: linear-gradient(top, #a0e800, #6b9c00); } .dm_filelist .dlbutton:active { background: #76a312; color: #374f00; -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px white; -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px white; box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px white; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.4); } .dlerror{ background: var(--back-color); color:#f00; font-weight: 300; font-size: 14px; font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; padding: 5px 10px; -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15); box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15); margin: 10px 0; } /***************************************************************************/ /*NAVIG SWITCH LANG */ /***************************************************************************/ .navigation-switchlang{ float: right; background: rgba(0,0,0,0.1); padding: 5px 0 5px 15px; } .navigation-switchlang li{ display: inline-block; margin-right: 10px; border: 1px solid var(--back-color); line-height: 16px; background: var(--back-color);; } .navigation-switchlang li:hover{ box-shadow: 0px 0px 1px rgba(0,0,0,0.6); } .navigation-switchlang li:hover a{ color: #000; } .navigation-switchlang li#lang_fr a{ padding: 0px 2px 0px 28px; background: url(../images/base/fr.png) center left no-repeat; background-size: 25px; } .navigation-switchlang li#lang_de a{ padding: 0px 2px 0px 28px; background: url(../images/base/de.png) center left no-repeat; background-size: 25px; } .navigation-switchlang li#lang_ch a{ padding: 0px 2px 0px 28px; background: url(../images/base/ch.png) center left no-repeat; background-size: 25px; } /*LIGHTBOX CEKOME*/ #lightbox_cekome { position:fixed; /* keeps the lightbox window in the current viewport */ top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.75); text-align:center; z-index: 1500; } #lightbox_cekome img { margin-top: 25px; box-shadow:0 0 25px #111; -webkit-box-shadow:0 0 25px #111; -moz-box-shadow:0 0 25px #111; max-width:80%; height: auto; } ul#menu-primary { display: flex; align-items: center; gap: 10px; } /*SLIDESHOW BACKGROUND IMG*/ .cb-slideshow{ margin:0; padding:0; } .cb-slideshow{ width: 100%; height: 100%; top: 0px; left: 0px; z-index: -2; position: absolute; } .cb-slideshow:after { width: 100%; top: 0px; left: 0px; z-index: 0; bottom: 0; height: 100%; position: fixed; padding: 0; margin: 0; line-height: 0; } .cb-slideshow:after { content: ''; background: transparent url(../images/dots2.png) repeat top left; } .cb-slideshow li span { height: 100%; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: 0; backface-visibility: hidden; -webkit-animation: imageAnimation 36s linear infinite 0s; -moz-animation: imageAnimation 36s linear infinite 0s; -o-animation: imageAnimation 36s linear infinite 0s; -ms-animation: imageAnimation 36s linear infinite 0s; animation: imageAnimation 36s linear infinite 0s; position: absolute; width: 100%; } .cb-slideshow li:nth-child(2) span { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .cb-slideshow li:nth-child(3) span { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } .cb-slideshow li:nth-child(4) span { -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .cb-slideshow li:nth-child(5) span { -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } .cb-slideshow li:nth-child(6) span { -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s; } /* Animation for the slideshow images */ @-webkit-keyframes imageAnimation { 0% { opacity: 0; -webkit-animation-timing-function: ease-in; } 8% { opacity: 1; -webkit-transform: scale(1.05); -webkit-animation-timing-function: ease-out; } 17% { opacity: 1; -webkit-transform: scale(1.1); } 25% { opacity: 0; -webkit-transform: scale(1.1); } 100% { opacity: 0 } } @-moz-keyframes imageAnimation { 0% { opacity: 0; -moz-animation-timing-function: ease-in; } 8% { opacity: 1; -moz-transform: scale(1.05); -moz-animation-timing-function: ease-out; } 17% { opacity: 1; -moz-transform: scale(1.1); } 25% { opacity: 0; -moz-transform: scale(1.1); } 100% { opacity: 0 } } @-o-keyframes imageAnimation { 0% { opacity: 0; -o-animation-timing-function: ease-in; } 8% { opacity: 1; -o-transform: scale(1.05); -o-animation-timing-function: ease-out; } 17% { opacity: 1; -o-transform: scale(1.1); } 25% { opacity: 0; -o-transform: scale(1.1); } 100% { opacity: 0 } } @-ms-keyframes imageAnimation { 0% { opacity: 0; -ms-animation-timing-function: ease-in; } 8% { opacity: 1; -ms-transform: scale(1.05); -ms-animation-timing-function: ease-out; } 17% { opacity: 1; -ms-transform: scale(1.1); } 25% { opacity: 0; -ms-transform: scale(1.1); } 100% { opacity: 0 } } @keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; transform: scale(1.05); animation-timing-function: ease-out; } 17% { opacity: 1; transform: scale(1.1); } 25% { opacity: 0; transform: scale(1.1); } 100% { opacity: 0 } } /* Show at least something when animations not supported */ .no-cssanimations .cb-slideshow li span{ opacity: 1; } /*---------------------------------*/ /* ckslider */ /*---------------------------------*/ .cksliderwrap{ width: 100%; position:relative; } .ckslider { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-content: stretch; align-items: stretch; overflow: hidden; } .ckslider>*{animation-fill-mode: forwards!important;} @keyframes ckslide { 0% { -webkit-transform:translateX(0); transform:translateX(0); } 100% { -webkit-transform:translateX(-100%); transform:translateX(-100%); } } @keyframes cksliderev { 0% { -webkit-transform:translateX(-100%); transform:translateX(-100%); } 100% { -webkit-transform:translateX(0); transform:translateX(0); } } @-webkit-keyframes ckslide { 0% { -webkit-transform:translateX(0); transform:translateX(0); } 100% { -webkit-transform:translateX(-100%); transform:translateX(-100%); } } @-webkit-keyframes cksliderev { 0% { -webkit-transform:translateX(-100%); transform:translateX(-100%); } 100% { -webkit-transform:translateX(0); transform:translateX(0); } } .progressBar{ position: absolute; bottom: 15px; left: 10px; right: 10px; height: 2px; background: #666; z-index: 2; } .progressBar .sizeBar{ width: 0%; height: 100%; background: #b5f166; } @-webkit-keyframes progressBar { to { width:100%; } } @-moz-keyframes progressBar { to { width:100%; } } @keyframes progressBar { to { width:100%; } } .ckslidercontrols .next, .ckslidercontrols .prev { position: absolute; -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 0); -moz-transition: all 0.3s cubic-bezier(1, 0, 0, 0); -o-transition: all 0.3s cubic-bezier(1, 0, 0, 0); transition: all 0.3s cubic-bezier(1, 0, 0, 0); height: 30px; width: 30px; z-index: 6; background-size: 11px; background-position: center center; background-repeat: no-repeat; cursor: pointer; border: solid 1px #ddd; border-radius: 100%; bottom: 0; } .ckslidercontrols .next { background-image: url(../images/icons/arrowright.svg); right: 10px; } .ckslidercontrols .prev{ background-image: url(../images/icons/arrowleft.svg); left: 10px; } .ckslidercontrols .next:hover, .ckslidercontrols .prev:hover { background-color: var(--primary-bgcolor); opacity: 1; border-color: var(--primary-bgcolor); } #listingProducts .ckslidercontrols .prev, #listingProducts .ckslidercontrols .next { bottom: -15px; } .ckctrldiv{ left: 50%; transform: translateX(-50%); z-index: 2; position: absolute; display: flex; align-items: center; padding: 5px 3px; transition: all 0.6s cubic-bezier(1, 0, 0, 0); bottom: 0; } .cksliderwrap:hover .ckctrldiv{ opacity:1; } .ckctrldiv .play{ width: 15px; min-width: 20px; height: 20px; position: relative; cursor:pointer; background-position: center center; background-repeat: no-repeat; background-size: auto; margin: 0 0.3em; } .ckctrldiv .play.playing{background-image: url("../images/icons/play.svg");} .ckctrldiv .play, .ckctrldiv .play.stopped{background-image: url("../images/icons/pause.svg");} .ckctrldiv .counter{ text-align: right; display: flex; flex-wrap: nowrap; } .ckctrldiv .counter span{ height: 12px; width: 12px; border-radius: 100%; background: none; margin: 0 6px; display: inline-block; /* border: 1px solid var(--secondary-bgcolor); */ transition: 250ms all ease-in-out; cursor: pointer; background: #ddd; } .ckctrldiv .counter span:hover{ background: var(--primary-bgcolor); } .ckctrldiv .counter span.active:after{ content: ""; display: block; width: 8px; height: 8px; -webkit-border-radius: 1px; border-radius: 1px; position: absolute; left: 1px; top: -3px; background: var(--primary-bgcolor); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .ckctrldiv .counter span.active{ width: 10px; height: 8px; margin: 0 7px; position: relative; top: 4px; background: var(--primary-bgcolor); -webkit-border-radius: 2px; border-radius: 2px; }