@import '/template/fonts/fontawesome/css/all.min.css';
@import '/template/fonts/fontawesome/css/custom.css';
@font-face {font-family: "Open-sans";src: url("/template/fonts/open-sans-Regular.ttf");}
@font-face {font-family: "Quicksand";src: url("/template/fonts/Quicksand-Regular.ttf");}
@font-face {font-family: "Lato";src: url("/template/fonts/Lato-Regular.ttf");}
@font-face {font-family: "Montserrat";src: url("/template/fonts/Montserrat-Regular.ttf");}
@font-face {font-family: "Garamond";src: url("/template/fonts/gara.ttf");}
@font-face {font-family: "Outfit";src: url("/template/fonts/Outfit-Regular.ttf");}
@font-face {font-family: "Oswald";src: url("/template/fonts/Oswald-Medium.ttf");}
@font-face {font-family: "Caviar-dreams";src: url("/template/fonts/caviardreams.ttf");}
@font-face {font-family: "Oranville";src: url("/template/fonts/oranville.ttf");}
@font-face {font-family: "Agency";src: url("/template/fonts/agencyrfont.ttf");}
@font-face {font-family: "Advent-pro";src: url("/template/fonts/adventpro-regularfont.ttf");}
@font-face {font-family: "Amazon";src: url("/template/fonts/amazon-webfont.ttf");}

/* W3PRO.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
html{box-sizing:border-box}
*,*:before,*:after{box-sizing:inherit}
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}
summary{display:list-item}
audio,canvas,progress,video{display:inline-block}
progress{vertical-align:baseline}
audio:not([controls]){display:none;height:0}
[hidden],template{display:none}
a{background-color:transparent}
a:active,a:hover{outline-width:0}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
b,strong{font-weight:bolder}
dfn{font-style:italic}
.mark,mark{background:#ff0;color:#000}  /*surlignage texte*/
.small,small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}
sup{top:-0.5em}
figure{margin:1em 40px}
img{border-style:none}
code,kbd,pre,samp{font-family:var(--cm-font-monospace);font-size:1em}
hr{box-sizing:content-box;height:0;overflow:visible}
button,input,select,textarea,optgroup{font:inherit;margin:0}
optgroup{font-weight:bold}
button,input{overflow:visible}
button,select{text-transform:none}
button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}
textarea{overflow:auto}
[type=checkbox],[type=radio]{padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
/* End extract */

:root {
    --color01: #FFFFFF;
	--color02: #444444;
	--color01b: #FFFFFF20;
	--color02b: #44444420;
    --color1cmg: #F90;
    --color2cmg: #C60;
	--font1: "Open-sans", sans-serif;
    --font2: "Quicksand", sans-serif;
	--font3: "Lato", sans-serif;
    --font4: "Montserrat", sans-serif;
	--font5: "Garamond";
	--font6: "Outfit", sans-serif;
	--font7: "Oswald", sans-serif;
	--font8: "Caviar-dreams";
	--font9: "Oranville";
	--font10: "Agency";
	--font11: "Advent-pro";
	--font12: "Amazon";
	--cm-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --cm-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
/*:root {
    --bs-breakpoint-xs: 0;
    --bs-breakpoint-sm: 576px;(max-width: 575.98px)  //600/599.98 pour w3pro 
    --bs-breakpoint-md: 768px;(max-width: 767.98px)
    --bs-breakpoint-lg: 992px;(max-width: 991.98px)
    --bs-breakpoint-xl: 1200px;(max-width: 1199.98px)
    --bs-breakpoint-xxl: 1400px;(max-width: 1399.98px)
}*/
.color01 {color:var(--color01);}
.color02 {color:var(--color02);}
.color01b {color:var(--color01b);}
.color02b {color:var(--color02b);}
.color1cmg {color:var(--color1cmg);}
.color2cmg {color:var(--color2cmg);}
.color1 {color:var(--color1);}
.color2 {color:var(--color2);}
.color3 {color:var(--color3);}
.color4 {color:var(--color4);}
.color5 {color:var(--color5);}
.color1b {color:var(--color1b);}
.color2b {color:var(--color2b);}
.color3b {color:var(--color3b);}
.color4b {color:var(--color4b);}
.color5b {color:var(--color5b);}
.bgcolor01 {background-color:var(--color01);}
.bgcolor02 {background-color:var(--color02);}
.bgcolor01b {background-color:var(--color01b);}
.bgcolor02b {background-color:var(--color02b);}
.bgcolor1 {background-color:var(--color1);}
.bgcolor2 {background-color:var(--color2);}
.bgcolor3 {background-color:var(--color3);}
.bgcolor4 {background-color:var(--color4);}
.bgcolor5 {background-color:var(--color5);}
.bgcolor1b {background-color:var(--color1b);}
.bgcolor2b {background-color:var(--color2b);}
.bgcolor3b {background-color:var(--color3b);}
.bgcolor4b {background-color:var(--color4b);}
.bgcolor5b {background-color:var(--color5b);}
.font1 {font-family: var(--font1);}
.font2 {font-family: var(--font2);}
.font3 {font-family: var(--font3);}
.font4 {font-family: var(--font4);}
.font5 {font-family: var(--font5);}
.font6 {font-family: var(--font6);}
.font7 {font-family: var(--font7);}
.font8 {font-family: var(--font8);}
.font9 {font-family: var(--font9);}
.font10 {font-family: var(--font10);}
.green {color: #00711b;}
.green:hover {color: #00a025;}
.red {color: #ff0000;}
.red:hover {color: #e20000;}
.orange {color: #e3a500;}
.orange:hover {color: #cc6600;}

::-webkit-scrollbar {
    width: 13px;
}
@media (max-width:991.98px) {
    ::-webkit-scrollbar {
        display: none;
    }
}
::-webkit-scrollbar-track {
    background: var(--scrollbar-track-bgcolor); 
}
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-bgcolor); 
}
::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-bgcolor); 
}
/*inclut padding et border dans la largeur totale*/
*,::after,::before {
    box-sizing: border-box
}
* {
    outline: none; /*__GV attention, plus de contours == les ajouter pour le :focus __accessibilité*/
    scroll-behavior: smooth;
}
body, html {
	scroll-padding-top: 125px;
    font-size: 19px;
	line-height:1.5;
	font-weight: 400;
    font-family: var(--body-font);
	color: var(--body-color);
	background-color: var(--color01);
}
@media (max-width:599.98px) {body, html {font-size: 16px}}
.container-extrem {
    width: 100%;
    margin-left: auto;
    margin-right: auto
}
.container-fluid {
    width: 100%;
    margin-left: auto;
    margin-right: auto
}
@media (min-width:1400px) {
	.container-fluid {
        max-width: 1140px}
}
.container {
	display:table;
    width: 100%;
    clear:both;
	padding:0;
	margin-left: auto;
    margin-right: auto
}
@media (max-width:599.98px) {.container,.container-fluid {padding-left:16px;padding-right:16px}}

@media (min-width:600px) {.container {max-width: 560px}}
@media (min-width:768px) {.container {max-width: 720px}}
@media (min-width:992px) {.container {max-width: 960px}}
@media (min-width:1200px) {.container {max-width: 1140px}}
@media (min-width:1400px) {.container {max-width: 1140px}}

.row:after,.row:before,.row-padding:after,.row-padding:before{content:"";display:table;clear:both}
.col{float:left;width:100%}
.col.s1{width:8.33333%}.col.s2{width:16.66666%}.col.s3{width:25%}.col.s4{width:33.33333%}
.col.s5{width:41.66666%}.col.s6{width:50%}.col.s7{width:58.33333%}.col.s8{width:66.66666%}
.col.s9{width:75%}.col.s10{width:83.33333%}.col.s11{width:91.66666%}.col.s12{width:100%}
@media (min-width:600px){
.col.m1{width:8.33333%}.col.m2{width:16.66666%}.col.m3{width:25%}.col.m4{width:33.33333%}
.col.m5{width:41.66666%}.col.m6{width:50%}.col.m7{width:58.33333%}.col.m8{width:66.66666%}
.col.m9{width:75%}.col.m10{width:83.33333%}.col.m11{width:91.66666%}.col.m12{width:100%}
}
@media (min-width:992px){
.col.l1{width:8.33333%}.col.l2{width:16.66666%}.col.l3{width:25%}.col.l4{width:33.33333%}
.col.l5{width:41.66666%}.col.l6{width:50%}.col.l7{width:58.33333%}.col.l8{width:66.66666%}
.col.l9{width:75%}.col.l10{width:83.33333%}.col.l11{width:91.66666%}.col.l12{width:100%}
}
/*@media (max-width:599.98px) {.col {margin-bottom:30px}}*/
@media (max-width:599.98px) {.col:not(:last-child) {margin-bottom:25px}}

/* SEPARATOR */
/*w3*/hr {border:0;border-top:1px solid #eee;margin:20px 0}
hr.hr-xxl {
	margin:1rem 0;
	border:0;
	border-top:1px solid var(--hr-xxl-color);
}
hr.hr-xs-center,.hr-xs-left {
    width: var(--hr-xs-width);
    margin-top: 25px;
	margin-bottom: 50px;
	border: 2px solid var(--hr-xs-color);
	border-radius: 5px;
	}
hr.hr-xs-center {
    margin-left: auto;margin-right: auto;
	}
hr.hr-xs-left {
    margin-left: 0;
	}
@media (max-width:599.98px) {hr.hr-xs-center,.hr-xs-left {margin-top:20px;margin-bottom:30px}}
.separator-100 {
    clear: both;
    height: 100px;
}
.separator-80 {
    clear: both;
    height: 80px;
}
.separator-60 {
    clear: both;
    height: 60px;
}
.separator-40 {
    clear: both;
    height: 40px;
}
.separator-20 {
    clear: both;
    height: 20px;
}
.separator-10 {
    clear: both;
    height: 10px;
}
.separator {
    clear: both;
}
@media (max-width:599.98px) {.separator-100 {height: 60px}.separator-80 {height: 50px}.separator-60 {height: 45px}}

.pl-0 {padding-left:0px!important}
.pl-xs {padding-left:10px!important}/*.p-l10 */
.pl-m {padding-left:20px!important}/*.p-l20 */
.pl-l {padding-left:30px!important}
.pl-xl {padding-left:50px!important}/*.p-l50 */

.pr-0 {padding-right:0px!important}
.pr-xs {padding-right:10px!important}/*.p-r10 */
.pr-m {padding-right:20px!important}/*.p-r20 */
.pr-l {padding-right:30px!important}
.pr-xl {padding-right:50px!important}/*.p-r50 */

@media (max-width: 599.98px){
.pl-xs,.pl-m,.pl-l,.pl-xl {padding-left:0!important}
.pr-xs,.pr-m,.pr-l,.pr-xl {padding-right:0!important}
}

.pt-0 {padding-top:0px!important}
.pt-xs {padding-top:10px!important}/*.p-t10 */
.pt-m {padding-top:20px!important}/*.p-t20 */
.pt-l {padding-top:30px!important}
.pt-xl {padding-top:50px!important}

.pb-0 {padding-bottom:0px!important}
.pb-xs {padding-bottom:10px!important}/*.p-b10 */
.pb-m {padding-bottom:20px!important}/*.p-b20 */
.pb-l {padding-bottom:30px!important}
.pb-xl {padding-bottom:50px!important}/*.p-b50 */

.pxy-0 {padding:0!important}/*.p-xy0 */
.pxy-xxs {padding:4px 5px 5px 5px!important}
.pxy-xs {padding:7px 10px 10px 10px!important}/*.p-xy10 */
.pxy-m {padding:18px 20px 20px 20px!important}/*.p-xy20 */
.pxy-l {padding:25px 30px 30px 30px!important}
.pxy-xl {padding:45px 50px 50px 50px!important}/*.p-xy50 */

.ml-0 {margin-left:0px!important}
.ml-xs {margin-left:10px!important}
.ml-m {margin-left:20px!important}
.ml-l {margin-left:30px!important}
.ml-xl {margin-left:50px!important}

.mr-0 {margin-right:0px!important}
.mr-xs {margin-right:10px!important}
.mr-m {margin-right:20px!important}
.mr-l {margin-right:30px!important}
.mr-xl {margin-right:50px!important}

@media (max-width: 599.98px){
.ml-xs,.ml-m,.ml-l,.ml-xl {margin-left:0!important}
.mr-xs,.mr-m,.ml-l,.mr-xl {margin-right:0!important}
}

.mt-0 {margin-top:0px!important}
.mt-xs {margin-top:10px!important}
.mt-m {margin-top:20px!important}/*.m-t20 */
.mt-l {margin-top:30px!important}
.mt-xl {margin-top:50px!important}

.mb-0 {margin-bottom:0px!important}
.mb-xs {margin-bottom:10px!important}
.mb-m {margin-bottom:20px!important}/*.m-b20 */
.mb-l {margin-bottom:30px!important}/*.m-b30 */
.mb-xl {margin-bottom:50px!important}

.mxy-0 {margin:0!important}/*.m-xy0 */
.mxy-xs {margin:10px 10px 10px 10px!important}/*.m-xy10 */
.mxy-m {margin:20px 20px 20px 20px!important}/*.m-xy20 */
.mxy-l {margin:30px 30px 30px 30px!important}
.mxy-xl {margin:50px 50px 50px 50px!important}

/* SCRIPTURE */
.h1,.h2,.h3,.h4,.h5,.h6,
h1,h2,h3,h4,h5,h6 {
    margin-top: 10px;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
	text-wrap: pretty; /* évite les mots orphelins*/
}
@media (max-width:599.98px) {.h1,.h2,.h3,.h4,.h5,.h6,
h1,h2,h3,h4,h5,h6 {margin-bottom: .2rem}}

h1, h2, h3 {
    font-family: var(--h1h2h3-font);
	color: var(--h1h2h3-color);
} /*h4, h5, h6 = couleur héritée de body*/

.h1,h1 {
    font-size: 3rem;
    font-weight: bold;
}
@media (max-width:991.98px) {
    .h1,h1 {
        font-size: 2.5rem;
    }
}
@media (max-width:599.98px) {
    .h1,h1 {
        font-size: 2rem;
    }
}
.h2,h2 {
    font-size: 2rem;
    font-weight: bold;
	margin-bottom: 10px;
}
@media (max-width:991.98px) {
    .h2,h2 {
        font-size: 1.67rem;
    }
}
@media (max-width:599.98px) {
    .h2,h2 {
        font-size: 1.45rem;
    }
}
.h3,h3 {
    font-size: 1.7rem;
    font-weight: bold;
}
@media (max-width:991.98px) {
    .h3,h3 {
        font-size: 1.45rem;
    }
}
@media (max-width:599.98px) {
    .h3,h3 {
        font-size: 1.23rem;
    }
}
.h4,h4 {
    font-size: 1.5rem;
    font-weight: bold;
}
@media (max-width:991.98px) {
    .h4,h4 {
        font-size: 1.25rem;
    }
}
@media (max-width:599.98px) {
    .h4,h4 {
        font-size: 1.2rem;
    }
}
.h5,h5 {
    font-size: 1.25rem
}
.h6,h6 {
    font-size: 1rem
}
.f-xsmall {font-size: 75%!important;}
.f-small {font-size: .875em}
.f-large {font-size: 120%!important}
.f-xlarge {font-size: 180%!important}
@media (max-width:991.98px){
	.f-xlarge {font-size: 150%!important}
	}
.text-uppercase {text-transform: uppercase;}
.l-large {letter-spacing: .2rem!important}
.w-large {word-spacing:.75rem}
p {
    margin: 0 0 10px 0;
}
a {
    color: var(--link-color);
	text-decoration: none;
}
a:hover {
    color: var(--link-hover-color);
}    
ol,ul {
    padding-left: 2rem
}
ol,ul {
    margin-top: 0;
    margin-bottom: 1rem
}
ol ol,ol ul,ul ol,ul ul {
    margin-bottom: 0
}
blockquote {
    margin-left: 1.5rem
}
.badge {
	display:inline-block;
	border-radius:8px;
	padding:0 5px; margin:5px 0;
	text-align:center
}
.border-0{border:0!important}
.border-wxs{border:1px solid!important}
.border-ws{border:2px solid!important}
.border-wm{border:3px solid!important}
.border-wl{border:5px solid!important}
.border-wxl{border:10px solid!important}

.rounded-circle{border-radius:50%}
.rounded-xs{border-radius:2px}
.rounded,.rounded-s{border-radius:4px}
.rounded-m{border-radius:8px}
.rounded-l{border-radius:16px}
.rounded-xl{border-radius:32px}
.rounded-txs{border-radius:2px 2px 0 0!important}
.rounded-ts{border-radius:4px 4px 0 0!important}
.rounded-tm{border-radius:8px 8px 0 0!important}
.rounded-tl{border-radius:16px 16px 0 0!important}
.rounded-txl{border-radius:32px 32px 0 0!important}
.rounded-bxs{border-radius:0 0 2px 2px!important}
.rounded-bs{border-radius:0 0 4px 4px!important}
.rounded-bm{border-radius:0 0 8px 8px!important}
.rounded-bl{border-radius:0 0 16px 16px!important}
.rounded-bxl{border-radius:0 0 32px 32px!important}

/* ICON */
.icon {
	display: inline-block;
    width: 2.7em;
    height: 2.7em;
}
.icon:hover {
	opacity:.8
}
@media (max-width:599.98px) {.icon {width:2.5em;height:2.5em}}


.left{text-align:left!important}
.right{text-align:right!important}
.justify{text-align:justify!important}
.center{text-align:center!important}
.float-start {float: left !important}
.float-end {float: right !important}

.fixed-top,.fixed-bottom{position:fixed;width:100%;z-index:1}
.fixed-top{top:0}
.fixed-bottom{bottom:0}

.cm-hide{display:none!important}
.cm-show-block,.cm-show{display:block!important}
.cm-show-inline-block{display:inline-block!important}
@media (max-width:599.98px){
	.cm-dropdown-hover.cm-mobile .cm-dropdown-content,.cm-dropdown-click.cm-mobile .cm-dropdown-content{position:relative}
	.cm-hide-small{display:none!important}.cm-mobile{display:block;width:100%!important}
	.cm-bar-item.cm-mobile,.cm-dropdown-hover.cm-mobile,.cm-dropdown-click.cm-mobile{text-align:center}
	.cm-dropdown-hover.cm-mobile,.cm-dropdown-click.cm-mobile{width:100%}
}
@media (max-width:991.98px) and (min-width:600px){.cm-hide-medium{display:none!important}}
@media (min-width:992px){.cm-hide-large{display:none!important}}
@media (max-width:991.98px) and (min-width:600px){.cm-mobile{display:block;width:100%!important}}

/*.w3-hide{display:none!important}
.w3-show-block,.w3-show{display:block!important}
.w3-show-inline-block{display:inline-block!important}
@media (max-width:600px){
	.w3-hide-small{display:none!important}.w3-mobile{display:block;width:100%!important}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center}
.w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}}
@media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}}
@media (min-width:992px){.w3-modal-content{width:900px}.w3-hide-large{display:none!important}.w3-sidebar.w3-collapse{display:block!important}}
@media (max-width:991.98px) and (min-width:600px){.w3-hide-medium{display:none!important}}*/

/* HEADER */
#topofthetop {
    padding: 11px;
    /*height: 47px;*/
    font-family: var(--topofthetop-font);
    color: var(--topofthetop-color);
    background-color: var(--topofthetop-bgcolor);
}
header.classic {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: var(--header-classic-bgcolor);
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    z-index: 1337;
}
header.chameleon {
    position: fixed;
    width: 100%;
    background-color: transparent;
    z-index: 1337;
}
header #nav {
	min-height: 126px;
    padding: 13px;
}
header #nav .logo {
    min-height: 100px;
    display: grid;
    place-items: center;
}
header #nav h3 {
    display: inline;
    margin-left: 10px;
    font-weight: bold;
    font-size: 2.5rem;
    vertical-align: middle;
}
@media (max-width:991.98px) {
    header #nav h3 {
        font-size: 1.95rem;
    }
}
@media (max-width:599.98px) {
    header #nav h3 {
        font-size: 1.39rem;
    }
}
header #nav a {
    color: var(--navlink-color);
}
header #nav a:hover {
    color: var(--navlink-hover-color);
}
header #nav a.active {
    color: var(--navlink-active-color);
}
header #nav .menu {
    min-height: 100px;
    display: grid;
    place-items: center;
    text-align: right;
}
header #nav .menu .button {
    display: inline-block;
    font-weight: bold;
	padding: 0px 0px 5px 20px;
    font-size: 1.11rem;
}
header #navalt {
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
	background-color: var(--navalt-bgcolor);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    text-align: center;
}
header #navalt .top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    min-height: 126px;
    padding: 13px;
	background-color: var(--navalt-top-bgcolor);
}
header #navalt .menu {
    margin: 0 13px 0 13px;
}
header #navalt .button {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
    font-size: 1.11rem;
    font-weight: bold;
	background-color: var(--navalt-button-bgcolor);
}
header #navalt a {
    color: var(--navaltlink-color);
}
header #navalt a:hover {
    color: var(--navaltlink-hover-color);
}
.head-image {
    background-position: center;
    background-size: cover;
    height: 100vh;
}
.head-image .slogan {
    height: calc(100vh - 166px);
    display: flex;
    flex-direction: column;
    margin-top: 60px;
    padding: 20px;
}
.head-video {
    height: 100vh;
}
.head-video video {
    position: absolute;
    left: 0;
    top: 0;
    height: 100vh;
    object-fit: cover;
}
.head-video .slogan {
    position: relative;
    height: calc(100vh - 166px);
    display: flex;
    flex-direction: column;
    margin-top: 60px;
    padding: 20px;
}
.head-image .slogan h1,.head-video .slogan h1 {
    color: var(--header-media-h1color);
}
.head-image .slogan h2,.head-video .slogan h2 {
    color: var(--header-media-h2color);
}
.head-image .slogan h3,.head-video .slogan h3 {
    color: var(--header-media-h3color);
}

/* FOOTER */
footer {
    font-size: 0.83rem;
    text-align: center;
	color: var(--footer-color);
    background-color: var(--footer-bgcolor);
}
footer a {
    color: var(--footer-a-color);
    }
footer a:hover {
    color: var(--footer-ahover-color);
    }

/* SECTION */
section {
	padding: 65px 0 75px 0;
}
@media (max-width: 599.98px){
section {padding: 30px 0 40px 0!important}
}

/* ACCORDION */
.accordion {
  background-color: var(--body-bgcolor);
  border-radius: 10px;
  color: var(--body-color);
  cursor: pointer;
  padding: 12px;
  width: 100%;
  border: 1px solid var(--body-color);
  text-align: left;
  outline: none;
  transition: 0.4s;
}
.accordion:after {
  content:"\f0d7";
  font-family: 'FontAwesome';
  font-size: 17px;
  color: var(--body-color);
  float: right;
  margin-left: 5px;
}
.activeaccordion, .accordion:hover {
  background-color: var(--body-bgcolor);
  color: var(--link-hover-color);
}
.activeaccordion:after {
  content:"\f0d8";
  font-family: 'FontAwesome';
  background-color: var(--body-bgcolor);
}
.panel {
  display: none;
  overflow: hidden;
  color: var(--body-color);
  text-align: justify;
}

/* ACCORDION-FOOTER -- mentions legales */
.accordion-footer {
  background-color: var(--footer-bgcolor);
  color: var(--footer-a-color);
  cursor: pointer;
  padding: 4px;
  width: 80%;
  border: none;
  text-align: center;
  outline: none;
  transition: 0.4s;
}
.accordion-footer:after {
  content:"\f0d7";
  font-family: 'FontAwesome';
  font-size: 17px;
  color: var(--footer-a-color);
  float: center;
  margin-left: 5px;
}
.activeaccordionfooter, .accordion-footer:hover {
  background-color: var(--footer-bgcolor);
  color: var(--footer-ahover-color);
}
.activeaccordionfooter:after {
  content:"\f0d8";
  font-family: 'FontAwesome';
}
.panelfooter {
  display: none;
  overflow: hidden;
  color: var(--footer-color);
  padding:35px;
  margin-top: 18px;
  margin-bottom: 18px;
  border: 1px solid var(--footer-a-color);
  border-radius: 10px;
  text-align: justify;
}

/* SWIPER */
/*swiper-container {
	width: 100%;
    height: 100%;
	margin-left: auto;
    margin-right: auto;
}*/
swiper-slide {
    text-align: center;
    /*font-size: 18px;
    background: #444;*/
    display: flex;
    justify-content: center;
    align-items: center;
	overflow: hidden;
}
/*swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}*/

.cm-image-background {
    background-position: center;
    background-size: cover;
}

.cm-testimony {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 40px 60px 50px 60px;
    overflow: hidden;
}
@media (max-width: 767.98px){.cm-testimony {padding: 20px 60px 35px 60px;}}

/* FORM */
textarea {
    resize: vertical ;
}
label {
    font-weight: bold;
    cursor: pointer;
	/*display: inline-block; __bootstrap*/
}
input[type="text"], input[type="password"], select, textarea {
    display: block;
    width: 100%;
    border: none;
    padding: 8px;
    margin-top: 5px;
    border-bottom: 1px solid transparent;
    border-radius: 10px;
}
input[type="text"]:focus, input[type="password"]:focus, select:focus, textarea:focus {
    border-radius: 0;
	border-bottom: 1px solid var(--color1) !important;
}
input[type="text"]:disabled, input[type="password"]:disabled, select:disabled, textarea:disabled {
    border-radius: 0;background-color: #999;
}
.form-dark {
    background-color: #f3f3f3;
    color: #000;
}
.form-white {
    background-color: #fff;
    color: #000;
}
.form-color {
    background-color: var(--form-colorbg);
    color: var(--form-color);
}
.form-small {
    padding: 5px;
    border-radius: 7px;
}
input[type="file"] {
    background-color: #f3f3f3;
    padding: 5px;
}
input[type="file"].white {
    background-color: #fff;
}
input[type="radio"] {
    display: none;
}
input[type="radio"] + label::before {
    font-family: "Font Awesome 6 Free";
    content: '\4f';/*\f192\f111*/
    font-size: 20px;
    vertical-align: middle;
    margin-right: 8px;
}
input[type="radio"] + label::before {
    color: var(--body-color);
}
input[type="radio"]:checked + label::before {
    content:'\f058';
    color: var(--body-color);
}	
input[type="radio"]:disabled + label::before {
    color: #dfdfdf;
}
input[type="radio"].radio-cmg + label::before {
    color: #00a025;
}
input[type="radio"].radio-cmg:checked + label::before {
    content:'\f058';
    color: #00a025;
}
input[type="radio"].radio-cmg:disabled + label::before {
    color: #dfdfdf;
}

button[type="submit"] {
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
    letter-spacing: 4px;
    font-weight: bold;
    cursor: pointer;
}
.btsubmit {
	color: var(--submit-color);
    background-color: var(--submit-bgcolor);
    border: 1px solid var(--submit-hover-bordercolor);
}
.btsubmit:hover {
    color: var(--submit-hover-color);
    background-color: var(--submit-hover-bgcolor);
}
.btsubmit-cmg {
	border: 1px solid transparent;
    color: #ffffff;
    background-color: var(--color1cmg);
}
.btsubmit-cmg:hover {
    background-color: var(--color2cmg);
}
.btsubmit-cmg.line {
    margin: 28px 0 0 0;
}
@media (max-width:600px) {.btsubmit-cmg.line {margin: 28px 0 0 0;}}

button[type="button"] {
	margin-top: 9px;
    padding: 5px 10px 6px 10px;/*10px 20px 10px 20px*/
    text-align: center;
    border-radius: 10px;
	letter-spacing: 1px;
    font-weight: bold;
	cursor: pointer;
}
button[type="button"]:disabled{cursor:not-allowed;opacity:0.3}

.btbutton {
	color: var(--btn-color);
	background-color: var(--btn-bgcolor);
    border: 1px solid var(--btn-hover-bordercolor);
}
.btbutton:hover {
    color: var(--btn-hover-color);
    background-color: var(--btn-hover-bgcolor);
}
.btbutton-cmg {
	border: 1px solid transparent;
    color: #ffffff;
    background-color: var(--color1cmg);
}
.btbutton-cmg:hover {
    background-color: var(--color2cmg);
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  	color: var(--placeholder-color) !important;
  	opacity: 1; /* Firefox */
}
::-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--placeholder-color) !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--placeholder-color) !important;
}

/* MEDIA */
.img-fluid {
    max-width: 100%;
    height: auto
}
:root  {
	--img-x-xs : 20px;--img-x-m : 45px;--img-x-xl : 80px;
	--img-y-xs : 10px;--img-y-m : 20px;--img-y-xl : 50px;
}
img.left-gap-xs,.left-gap-m,.left-gap-xl {
    float: left;
}
img.right-gap-xs,.right-gap-m,.right-gap-xl {
    float: right;
}
img.left-gap-xs {
    margin-right: var(--img-x-xs);
	margin-bottom: var(--img-y-xs);
	margin-top: var(--img-y-xs);
}
img.left-gap-m {
    margin-right: var(--img-x-m);
	margin-bottom: var(--img-y-m);
	margin-top: var(--img-y-xs);
}
img.left-gap-xl {
    margin-right: var(--img-x-xl);
	margin-bottom: var(--img-y-xl);
	margin-top: var(--img-y-xs);
}
img.right-gap-xs {
    margin-left: var(--img-x-xs);
	margin-bottom: var(--img-y-xs);
	margin-top: var(--img-y-xs);
}
img.right-gap-m {
    margin-left: var(--img-x-m);
	margin-bottom: var(--img-y-m);
	margin-top: var(--img-y-xs);
}
img.right-gap-xl {
    margin-left: var(--img-x-xl);
	margin-bottom: var(--img-y-xl);
	margin-top: var(--img-y-xs);
}

video {
    width: 100%;
    background-color: var(--video-bgcolor);
}
iframe {
    border: none;
}
iframe.youtube {
    width: 100%;
    background-color: var(--video-bgcolor);
}
iframe.vimeo {
    width: 100%;
    background-color: var(--video-bgcolor);
}

/* MAP */
.map {
    width: 100%;
}

/* GALLERY */
/* GALLERY FLEX */
.cm-gallery-flex5 .row, .cm-gallery-flex4 .row, .cm-gallery-flex3 .row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  /*padding: 0 4px;*/
}
/* 5 colonnes egales */
.cm-gallery-flex5 .column {
  -ms-flex: 20%; /* IE10 */
  flex: 20%;
  max-width: 20%;
  padding: 0 8px;
}
/* 4 colonnes egales */
.cm-gallery-flex4 .column {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 8px;
}
/* 3 colonnes egales */
.cm-gallery-flex3 .column {
  -ms-flex: 33%; /* IE10 */
  flex: 33%;
  max-width: 33%;
  padding: 0 8px;
}
.cm-gallery-flex5 .column img, .cm-gallery-flex4 .column img, .cm-gallery-flex3 .column img {
  margin: 8px 0;
  vertical-align: middle;
  width: 100%;
}
/* 2 colonnes */
@media screen and (max-width: 991.98px) {
  .cm-gallery-flex5 .column, .cm-gallery-flex4 .column, .cm-gallery-flex3 .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}
/* 1 colonne */
@media screen and (max-width:599.98px) {
  .cm-gallery-flex5 .column, .cm-gallery-flex4 .column, .cm-gallery-flex3 .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}

/* GALLERY GRID */
.cm-gallery-grids, .cm-gallery-gridm, .cm-gallery-gridl {
	display: grid;
	gap: 1rem;
}
.cm-gallery-grids {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-rows: 200px;
}
.cm-gallery-gridm {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-rows: 250px;
}
.cm-gallery-gridl {
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    grid-auto-rows: 330px;
}

/* GALLERY Communs Flex et Grid */
.cm-gallery {
    position:relative;
    transition: transform .5s;
}
.cm-gallery.zoom:hover {
    transform: scale(1.05);
}
.cm-gallery img {
    width:100%;
    height:100%;
    object-fit:cover;
}
.cm-gallery .caption-flex, .cm-gallery .caption-grid {
    background-color:rgba(31, 30, 30, 0.7);
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    width:100%;
    top:0;
    left:0;
    color: var(--gallery-color);
    opacity:0;
    transition: 1s ease;
    text-align: center;
}
.cm-gallery:hover .caption-flex, .cm-gallery:hover .caption-grid {
    opacity: 1;
}

/* GALLERY different Flex et Grid */
.cm-gallery .caption-flex {
    height: calc(100% - 16px);
    margin-top: 8px;
}
.cm-gallery .caption-grid {
    height:100%;
}

/* BLOCK */
.block {
    display: flex;
    flex-flow: row wrap;
    gap: 32px;/*equivaut column-gap: 32px;row-gap: 32px;*/
}
.block-item {
    flex: 1;
}
@media screen and (max-width:991.98px) {
  .block-item {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}
@media (max-width:599.98px) {.block-item{padding-left:16px!important;padding-right:16px!important}}

/* SHADOW */
.shadow-m {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.shadow-xl {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}

/* ZOOM */
.zoom:hover {
    transform: translateY(-10px);
    transition: all 0.5s ease-out;
}

/* CARD */
.card, .cardwfix {
    position: relative;
    display: flex;
    flex-direction: column;
    /*height: var(--card-height);*/
    min-width: 0;
    word-wrap: break-word;
    background-color: var(--card-bgcolor);
    background-clip: border-box;
    border-color: var(--card-border-color);
    transition: transform .5s;
}
.card>hr, .cardwfix>hr {
    margin-right: 0;
    margin-left: 0
}
.card-body {
    flex: 1 1 auto;
}
.card-img {
    width: 100%;
}
.card-header {
    margin-bottom: 0;
    background-color: var(--card-cap-bg);
    border-bottom: 1px solid var(--card-border-color)
}
.card-footer {
    background-color: var(--card-cap-bg);
    border-top: 1px solid var(--card-border-color)
}
.card-deck {
    display:-ms-flexbox;
    display:flex;
    -ms-flex-direction:column;
    flex-direction:column
}
.card-deck .card {   
    min-width: 250px;
    margin-bottom: calc(2 * var(--card-deck-margin));
}
.card-deck .cardwfix {
    min-width: calc(25% - 2 * var(--card-deck-margin));max-width: calc(25% - 2 * var(--card-deck-margin));
    margin-bottom: calc(2 * var(--card-deck-margin));
}

@media (min-width:600px) { /*min-width:576px*/
    .card-deck {
        -ms-flex-flow:row wrap;
        flex-flow:row wrap;
        margin-right:-15px;
        margin-left:-15px
    }
    .card-deck .card {
        display:-ms-flexbox;
        display:flex;
        -ms-flex:1 0 0%;
        flex:1 0 0%;
        -ms-flex-direction:column;
        flex-direction:column;
        margin-right: var(--card-deck-margin);
        margin-bottom: calc(2 * var(--card-deck-margin));
        margin-left: var(--card-deck-margin);
    }
    .card-deck .cardwfix {
        display:-ms-flexbox;
        display:flex;
        -ms-flex:1 0 0%;
        flex:1 0 0%;
        min-width: calc(25% - 2 * var(--card-deck-margin));max-width: calc(25% - 2 * var(--card-deck-margin));      
        -ms-flex-direction:column;
        flex-direction:column;
        margin-right: var(--card-deck-margin);
        margin-bottom: calc(2 * var(--card-deck-margin));
        margin-left: var(--card-deck-margin);
    }
}
@media (max-width:991.98px) {/*1199.98px*/
  .card-deck .cardwfix {
    min-width: calc(33.33% - 2 * var(--card-deck-margin));max-width: calc(33.33% - 2 * var(--card-deck-margin));
  }
}
@media (max-width:767.98px) {
  .card-deck .cardwfix {
    min-width: calc(50% - 2 * var(--card-deck-margin));max-width: calc(50% - 2 * var(--card-deck-margin));
  }
}
@media (max-width:599.98px) {
  .card-deck .cardwfix {
    max-width: 100%;
  }
}

/* sticky de bootstrap */
.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020
}
.sticky-bottom {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: 1020
}
@media (min-width:576px) {
    .sticky-sm-top {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1020
    }
    .sticky-sm-bottom {
        position: -webkit-sticky;
        position: sticky;
        bottom: 0;
        z-index: 1020
    }
}
@media (min-width:768px) {
    .sticky-md-top {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1020
    }
    .sticky-md-bottom {
        position: -webkit-sticky;
        position: sticky;
        bottom: 0;
        z-index: 1020
    }
}
@media (min-width:992px) {
    .sticky-lg-top {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1020
    }
    .sticky-lg-bottom {
        position: -webkit-sticky;
        position: sticky;
        bottom: 0;
        z-index: 1020
    }
}
@media (min-width:1200px) {
    .sticky-xl-top {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1020
    }
    .sticky-xl-bottom {
        position: -webkit-sticky;
        position: sticky;
        bottom: 0;
        z-index: 1020
    }
}
@media (min-width:1400px) {
    .sticky-xxl-top {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1020
    }
    .sticky-xxl-bottom {
        position: -webkit-sticky;
        position: sticky;
        bottom: 0;
        z-index: 1020
    }
}
/* ******************************* */
/* GESTION -cmg superadmin.admin */
/* ******************************* */
body.body-cmg {scroll-padding-top: 0px;font-family:"Quicksand", sans-serif;font-size:18px;color:var(--color02);background-color: #f0f0f0;}
html.html-cmg {scroll-padding-top: 0px;font-family:"Quicksand", sans-serif;font-size:18px;color:var(--color02);background-color: #f0f0f0;}
.main {
    margin-left: 340px;
    margin-right: 40px;
    padding-top: 40px;
	padding-bottom: 40px;
}
.main, #main {
    transition: none;
}
@media (max-width:991.98px){.main{margin-left:0!important;margin-right:0!important}}

@media (max-width:599.98px){.main{padding-top:100px!important}}
@media (max-width:991.98px) and (min-width:600px){.main{padding-top:100px!important}}

.container-cmg:after,.container-cmg:before{
    content:"";display:table;clear:both
}
.container-cmg{
    padding:0.01em 16px;
	color: var(--color02);
}
.h1.h-cmg,.h2.h-cmg,.h3.h-cmg,
h1.h-cmg,h2.h-cmg,h3.h-cmg {
    color: var(--color02);
    font-family: "Quicksand", sans-serif;
}
hr.hr-cmg {
    width: 50px;
	margin-bottom: 32px;
	border: 5px solid var(--color02);
	border-radius: 5px;
}
/* LINK */
.a-cmg:link {
    text-decoration: none;
    font-weight: bold;
    color: var(--color1cmg);
}
.a-cmg:hover {
    color: var(--color2cmg);
}
/* HEADER */
header.cmg #nav::-webkit-scrollbar {
    display: none;
}
header.cmg #nav {
    z-index: 1337;
    width: 300px;
    padding: 20px 0 20px 0;
    background-color: #ffffff;
}
@media (max-width:991.98px) {
    header.cmg #nav {
        width: 100%;
    }
	header.cmg #nav img {
        max-width: 100%;
    }
}
header.cmg #nav a {
    color: var(--color02);
	font-weight: bold;
}
/*header.cmg #nav .button-mobile {
    color: var(--color1cmg);
    cursor: pointer;
}*/
header.cmg #nav #close {
    position: absolute;
    top: 5px;
    right: 20px;
}
header.cmg #nav #menu {
    padding-top: 25px;
    font-size: 18px;
}
header.cmg #nav #menu a.active {
    background-color: var(--color1cmg);
    color: var(--color01);
}
header.cmg #nav #menu a:hover {
    background-color: var(--color2cmg);
    color: var(--color01);
}
header.cmg #nav #menu .submenu {
    cursor: pointer;
}
header.cmg #nav #menu .submenu:hover {
    color: var(--color2cmg);
}
header.cmg #nav #menu .submenu2 {
    margin: 5px;
    border: 10px solid;
    border-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11' width='11' height='11'><g fill='black'><rect width='1' height='5'/><rect x='10' y='6' width='1' height='5'/><rect width='5' height='1'/><rect x='6' y='10' width='5' height='1'/></g></svg>") 5;
}
header.cmg #nav .links {
    padding: 12px 20px 8px 20px !important;
}
header.cmg #navalt {
    padding: 10px;
    background-color: var(--color01);
}
/*header.cmg #navalt .button-mobile {
    padding-right: 10px;
    color: var(--color1cmg);
    cursor: pointer;
}*/

header.cmg .sidebar {
    height:100%;
    width:200px;
    background-color:#fff;
    position:fixed!important;
    z-index:1;
    overflow:auto
}
@media (min-width:993px){header.cmg .sidebar.collapse{display:block!important}}
@media (max-width:992px){header.cmg .sidebar.collapse{display:none}}

header.cmg .bar-block .bar-item {
    width:100%;
    display:block;
    padding:7px 10px 7px 50px;
    text-align:left;
    border:none;
    white-space:normal;
    float:none;
    outline:0 /*contours diffèrent des bordures = ne prennent pas d'espace et sont dessinés au-dessus du contenu*/
}

.button-mobile {
    border:none;
    display:inline-block;
    padding:8px 16px;
    vertical-align:middle;
    overflow:hidden;
    text-decoration:none;
    color:inherit;
    background-color:inherit;
    text-align:center;
    cursor:pointer;
    white-space:nowrap
}
.button-mobile{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   
/*.button-mobile:disabled{cursor:not-allowed;opacity:0.3}
.w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .button-mobile:first-child{background-color:#ccc;color:#000}
.bar-block .w3-dropdown-hover .button-mobile,.bar-block .w3-dropdown-click .button-mobile{width:100%;text-align:left;padding:8px 16px}
.w3-bar .button-mobile{white-space:normal}
@media (max-width:600px){	
.w3-dropdown-hover.w3-mobile .button-mobile,.w3-dropdown-click.w3-mobile .button-mobile{width:100%}}*/
.button-mobile:hover{color:#000!important;background-color:#ccc!important}

/* FORM */
input[type="checkbox"] {
    display: none;
}
input[type="checkbox"] + label::before {
    font-family: "Font Awesome 6 Free";
    content: '\f0c8';/*content: '\4f'\f0c8';*/
    font-size: 22px;
    font-weight: bold;
    margin-right: 8px;
    color: #fff;/*2372b2*/
}
input[type="checkbox"]:checked + label::before {
    content:'\f14a';
    color: #00a025;/*2e94d0*/
}
input[type="checkbox"]:disabled + label::before {
    color: #dfdfdf;
    cursor: not-allowed;
}
input[type="checkbox"].switch {
    display: none;
}
input[type="checkbox"].switch + label::after {
    font-size: 16px;
    color: #cc0000;
}
input[type="checkbox"].switch.active + label::after {
    content: 'Désactiver';
}
input[type="checkbox"].switch.online + label::after {
    content: 'Hors-ligne';
}
input[type="checkbox"].switch + label::before {
    font-family: "Font Awesome 6 Free";
    content: '\f057';
    font-size: 24px;
    margin-right: 5px;
    color: #cc0000;
    vertical-align: middle;
}
input[type="checkbox"].switch:checked + label::after {
    font-size: 16px;
    color: #129d00;
}
input[type="checkbox"].switch.active:checked + label::after {
    content: 'Activer';
}
input[type="checkbox"].switch.online:checked + label::after {
    content: 'En ligne';
}
input[type="checkbox"].switch:checked + label::before {
    font-family: "Font Awesome 6 Free";
    content: '\f058';
    font-size: 24px;
    margin-right: 5px;
    color: #129d00;
}

/* VIIT */
/*viitp.block {
    padding: 20px;
    border-radius: 10px;
    background-color: #ffffff;
}*/
/* TABLE */
.viit-table {
    background-color: var(--color01);
    padding: 12px 10px 20px 10px;
    border-radius: 10px;
    margin-bottom: 20px;
}
.viit-table .viit-td {
    cursor: pointer;
    padding: 10px;
	border-top: 1px solid #ddd;
}
.viit-table .viit-td:last-child {
	border-bottom: 1px solid #ddd;
}
.viit-table .viit-td:hover {
    background-color: #f3f3f3;
}
.viit-table .viit-button {
    float: right;
    padding-left: 5px;
    color: var(--color02);
}
.viit-table .viit-button:hover {
    color: var(--color2cmg);
}
.viit-table .viit-td div {
    overflow: hidden;
}
/* SWITCH */
.viit-switch {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 45px;
    margin-top: 5px;
}
.viit-switch.standard {
    width: 60px;
    height: 34px;
    margin-top: 0;
}
.viit-switch.mini {
    width: 40px;
    height: 22px;
    margin-top: 0;
}
.viit-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.viit-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 34px;
    background-color: #cccccc;
    -webkit-transition: .5s;
    transition: .5s;
}
.viit-slider:before {
    position: absolute;
    content: "";
    height: 37px;
    width: 37px;
    left: 4px;
    bottom: 4px;
    border-radius: 50%;
    background-color: #ffffff;
    -webkit-transition: .5s;
    transition: .5s;
}
.viit-slider.standard:before {
    position: absolute;
    content: "";
    height: 27px;
    width: 27px;
    left: 3px;
    bottom: 3px;
    background-color: #ffffff;
    -webkit-transition: .4s;
    transition: .4s;
}
.viit-slider.mini:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: #ffffff;
    -webkit-transition: .4s;
    transition: .4s;
}
input:checked + .viit-slider {
    background-color: #00a025;/*2372b2*/
}
input:focus + .viit-slider {
    box-shadow: 0 0 1px #00a025;/*2372b2*/
}
input:checked + .viit-slider:before {
    -webkit-transform: translateX(35px);
    -ms-transform: translateX(35px);
    transform: translateX(35px);
}
input:checked + .viit-slider.standard:before {
    -webkit-transform: translateX(27px);
    -ms-transform: translateX(27px);
    transform: translateX(27px);
}
input:checked + .viit-slider.mini:before {
    -webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px);
}
/* UPLOAD */
#viit-upload-bar {
    margin-top: 18px;
    width: 100%;
    height: 35px;
    padding: 5px;
    border-radius: 10px;
    background-color: #ffffff;
    font-size: 16px;
    font-weight: bold;
}
@media (max-width: 600px) {
    #viit-upload-bar {
        margin-top: -20px;
        margin-bottom: 20px;
    }
}
#viit-upload-bar #viit-upload-loading {
    width: 0%;
    height: 25px;
    padding: 0 5px 0 5px;
    border-radius: 10px;
    background-color: #00a025;/*2e94d0*/
}
/* NOTIFICATION */
.viit-notification {
    position: fixed;
    z-index: 1337;
    top: 3%;
    left: 50%;
    width: 26%;
    margin-left: -13%;
    cursor: pointer;
    font-weight: bold;
}
.viit-notification-content-error {
    padding: 20px;
    text-align: center;
    color: #ffffff;
    background-color: #ad0000;
    border-radius: 10px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
.viit-notification-content-success {
    padding: 20px;
    text-align: center;
    color: #ffffff;
    background-color: #00711b;
    border-radius: 10px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
@media (max-width: 768px) {
    .viit-notification {
        width: 90%;
        margin-left: -45%;
    }
}
@media (min-width: 768px) {
    .viit-notification {
        width: 50%;
        margin-left: -25%;
    }
}
@media (min-width: 1440px) {
    .viit-notification {
        width: 26%;
        margin-left: -13%;
    }
}
.viit-notification strong {
    color: inherit;
}
/* POPUP */
#viit-popup {
    display: flex;
    position: fixed;
    z-index: 1337;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
#viit-popup h3 {
    margin-top: 15px;
    color: #ad0000;
}
#viit-popup strong {
    color: #000000;
}
#viit-popup-content {
    margin: auto;
    width: 25%;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    background-color: #ffffff;
    border: 1px solid #888888;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
#viit-popup-p {
    margin-top: 20px;
    text-align: center;
}
#viit-popup-cancel {
    width: 150px;
    border-radius: 10px;
    padding: 15px 30px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    background-color: #efefef;
    color: #535353;
    outline: none !important;
}
#viit-popup-cancel:hover {
    border-radius: 0px;
    background-color: #f9f9f9;
}
#viit-popup-confirm {
    width: 150px;
    border-radius: 10px;
    padding: 15px 30px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    background-color: #2faa4c;
    color: #ffffff;
    outline: none !important;
}
#viit-popup-confirm:hover {
    border-radius: 0;
    background-color: #1dc344;
}
@media (max-width: 768px) {
    #viit-popup-content {
        width: 90%;
    }
    #viit-popup-p {
        margin: 15px 0 25px 0;
    }
    #viit-popup-cancel {
        margin-bottom: 10px;
    }
}
@media (min-width: 768px) {
    #viit-popup-content {
        width: 50%;
    }
}
@media (min-width: 1440px) {
    #viit-popup-content {
        width: 25%;
    }
}
/* ERROR */
.viit-error {
    margin-top: 5px;
    font-size: 14px;
    font-weight: bold;
    padding: 5px;
    border-radius: 5px;
	color: #db2525;
    background-color: #ffffffcc;
    width: fit-content;
}
/* ERROR 000 */
#viit-error-xxx {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#viit-error-xxx-content {
    margin: auto;
    padding: 20px;
}
#viit-error-xxx-content p {
    text-align: center;
    font-size: 25px;
}
#viit-error-xxx-content a {
    color: #000000;
}
#viit-error-xxx-content a:hover {
    color: var(--color3);
}
#viit-error-xxx-content img {
    max-width: 90%;
}
/* MESSAGE NO JS */
#viit-no-js {
    display: flex;
    position: fixed;
    z-index: 1337;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.5);
}
#viit-no-js-content {
    margin: auto;
}
#viit-no-js-content p {
    padding: 100px;
    text-align: center;
    font-family: Verdana, sans-serif;
    font-size: 25px;
    color: #ffffff;
    background-color: #000000;
}
#viit-no-js-content a {
    color: #00b4ff;
}
#viit-no-js-content a:hover {
    color: #4fcbff;
}