@charset "utf-8";

:root {

    --text-size: 16px;

    /*--text-white: #FFF;
    --text-black: #000;*/

    --size-xxs: 12px;
    --size-xs: 14px;
    --size-sm: 18px;
    --size-medium: 20px;
    --size-l: 25px;
    --size-lg: 30px;
    --size-xl: 50px;
}


.size-xxs { width: var(--size-xxs); }
.size-xs { width: var(--size-xs); }
.size-sm { width: var(--size-sm); }
.size-medium { width: var(--size-medium); }
.size-base { width: var(--size-base); }
.size-l { width: var(--size-l); }
.size-lg { width: var(--size-lg); }
.size-xl { width: var(--size-xl); }
.size-2xl { width: var(--size-2xl); }
.size-3xl { width: calc(var(--size-2xl) * 1.5); }
.size-4xl { width: calc(var(--size-2xl) * 2); }
.size-5xl { width: calc(var(--size-2xl) * 2.5); }
.size-6xl { width: calc(var(--size-2xl) * 3); }

.opacity-10 { opacity: 1; }
.opacity-9 { opacity: 0.9; }
.opacity-8 { opacity: 0.8; }
.opacity-7 { opacity: 0.7; }
.opacity-6 { opacity: 0.6; }
.opacity-5 { opacity: 0.5; }
.opacity-4 { opacity: 0.4; }
.opacity-3 { opacity: 0.3; }
.opacity-2 { opacity: 0.2; }
.opacity-1 { opacity: 0.1; }
.opacity-0 { opacity: 0; }

/* ---------------------------------------------------------- */
/***** Align *****/
.position-relative { position: relative; }
.align-right { float:right; }
.align-left { float:left; }

.flex { display: flex; align-items: stretch; align-self: flex-start; }
.flex-center { display: flex; align-items: center; justify-content: center; /*text-align: center;*/ }
.flex-left,.flex-left-center { display: flex; align-items: center; justify-content: left; text-align: left;   }
.flex-right,.flex-right-center { display: flex; align-items: center; justify-content: right; text-align: right; }
.flex-end { display: flex; align-items: flex-end; }
.flex-row { flex-direction: row; align-items: stretch; }
.flex-col { flex-direction: column; align-items: stretch; }
.align-items-start { align-items: flex-start; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }
.justify-content-center { justify-content: center; }
.justify-content-end { justify-content: end; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.justify-between { justify-content: space-between; }


.clear-both { clear: both; width: 100%; height: 0; }

.visibility-hidden { visibility: hidden; }
.cursor-pointer { cursor: pointer; }

.h-inherit { height: inherit; }
.h-80p { height: 80%; }
.h-100p { height: 100%!important; }
.h-5 { height: 5px; }
.h-10 { height: 10px; }
.h-20 { height: 20px; }
.h-25 { height: 25px; }
.h-30 { height: 30px; }
.h-40 { height: 40px; }
.h-50 { height: 50px; }
.h-60 { height: 60px; }
.h-70 { height: 70px; }
.h-80 { height: 80px; }
.h-90 { height: 90px; }
.h-100 { height: 100px; }
.h-150 { height: 150px; }
.h-200 { height: 200px; }

.w-30 { width: 30%; }
.w-40 { width: 40%; }
.w-50 { width: 50%; }
.w-70 { width: 70%; }
.w-80 { width: 80%; }
.w-90 { width: 90%; }
.w-100 { width: 100%; }

.margin-auto { margin: auto; }
.overflow-hidden { overflow: hidden; }

.crop-paragraphe { 
    width: 100%; height: 150px; overflow: scroll;
    font-size: 0.8rem; line-height: 1.3rem;
    border-radius: 10px; border: 2px solid rgba(var(--component-color-rgb), 0.2);
    box-shadow: 0px 1px 0px 6px rgba(var(--component-color-rgb), 0.1);
}

.translatex-20 { transform: translateX(20px); }
.translatex-40 { transform: translateX(40px); }
.translatex--20 { transform: translateX(-20px); }
.translatex--40 { transform: translateX(-40px); }

.translatey-40 { transform: translateY(40px); }
.translatey--40 { transform: translateY(-40px); }
/* ---------------------------------------------------------- */
/***** Card *****/
/*.card {
    width: 100%; height: 100%;
    background-color: #FFF;
    border-radius: 20px;
    box-shadow: 1px 1px 30px rgb(0, 0, 0, 0.1);
}
.card-img {
    width: 90%; margin: 0 5%; border-radius: 20px; 
}
.card .title { 
    font-weight: 500; color: #000;
}*/



/* ---------------------------------------------------------- */
/***** Container *****/
/* #app { overflow: hidden; } */

.main {
    width: 100vw;
    height: auto;
}

.container-flex {
    display: flex;
    flex-wrap: wrap; 
}

.container-full { width: 100%; margin: auto; }
.container-wide,
.container-large, 
.container,
.container-small,
.container-lil { margin: auto;  }

.container-full-1 { width: 100%; height: auto; float: left; padding: 0 1.5% 25px 1.5%; }
.container-full-2 { width: 100%; height: auto; float: left; padding: 0 2.5% 25px 2.5%; }
.container-full-3 { width: 100%; height: auto; float: left; padding: 0 3% 25px 3%; }
.container-full-4 { width: 100%; height: auto; float: left; padding: 0 4% 25px 4%; }
.container-full-5 { width: 100%; height: auto; float: left; padding: 0 5% 25px 5%; }
.container-full-6 { width: 100%; height: auto; float: left; padding: 0 6% 25px 6%; }
.container-full-7 { width: 100%; height: auto; float: left; padding: 0 7% 25px 7%; }
.container-full-8 { width: 100%; height: auto; float: left; padding: 0 8% 25px 8%; }
.container-full-9 { width: 100%; height: auto; float: left; padding: 0 9% 25px 9%; }
.container-full-10 { width: 100%; height: auto; float: left; padding: 0 10% 25px 10%; }

.row {
    display: flex;
}

.video-size { width: 100%; height: auto; }


/*Grid*/
.grid1 {
    width: 98%; margin: 0 1%;
    display: grid; 
    grid-row-gap: 10px;
    grid-column-gap : 0;
    grid-template-columns: 100%;
}

.grid2 {
    width: 100%; margin: 0 0;
    display: grid; 
    grid-row-gap: 20px;
    grid-column-gap : 3%;
    grid-template-columns: 48.5% 48.5%;
}

.grid3 {
    width: 100%; margin: 0 0;
    display: grid; 
    grid-row-gap: 20px;
    grid-column-gap : 2%;
    grid-template-columns: 32% 32% 32%;
}

.grid4 {
    width: 100%; margin: 0 0;
    display: grid; 
    grid-row-gap: 20px;
    grid-column-gap : 2%;
    grid-template-columns: 23.5% 23.5% 23.5% 23.5%;
}
.grid5 {
    width: 100%; margin: 0 0;
    display: grid; 
    grid-row-gap: 20px;
    grid-column-gap : 2%;
    grid-template-columns: 18.4% 18.4% 18.4% 18.4% 18.4%;
}

.grid6 {
    width: 100%; margin: 0 0;
    display: grid; 
    grid-row-gap: 20px;
    grid-column-gap : 1.7%;
    grid-template-columns: 15.25% 15.25% 15.25% 15.25% 15.25% 15.25%;
}

.grid7 {
    width: 100%; margin: 0 0;
    display: grid; 
    grid-row-gap: 20px;
    grid-column-gap : 1%;
    grid-template-columns: 13.4% 13.4% 13.4% 13.4% 13.4% 13.4% 13.4%;
}

.grid-column-3-2 { grid-column: 3 / span 2;  }


/* ---------------------------------------------------------- */
/***** Text *****/
/* Links */
/*a.Linkbreak         { text-decoration:none; line-height: inherit; }
a.Linkbreak:visited { text-decoration:none; }
a.Linkbreak:hover   { text-decoration:none; }
a.Linkbreak:active  { text-decoration:none; }*/


/***** Text Color *****/
/*.text-white { color: var(--text-white); }
.text-grey-100 { color: #EEEEEE; }
.text-grey-200 { color: #DDDDDD; }
.text-grey-300 { color: #CCCCCC; }
.text-grey-400 { color: #AAAAAA; }
.text-grey-500 { color: #888888; }
.text-grey-600 { color: #666666; }
.text-grey-700 { color: #444444; }
.text-grey-800 { color: #222222; }
.text-black { color: var(--text-black); }*/


h1 { font-size: 2.5rem; line-height: 3rem; font-weight: 700; } 
h2 { font-size: 2rem; line-height: 2.5rem; font-weight: 700; } 
h3 { font-size: 1.7rem; line-height: 2.2rem; font-weight: 700; } 
h4 { font-size: 1.5rem; line-height: 1.9rem; font-weight: 700; } 
h5 { font-size: 1.3rem; line-height: 1.8rem; font-weight: 700; } 
h6 { font-size: 1.1rem; line-height: 1.5rem; font-weight: 700; } 


.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-black { font-weight: 900; }

.text-xs { font-size: 0.75rem; /* 12px */ line-height: 1rem; /* 16px */ }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base,.text-medium { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.6rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; } 
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 3.5rem; }
.text-6xl { font-size: 3.5rem; line-height: 4.2rem; }
.text-7xl { font-size: 4rem; line-height: 4.9rem; }
.text-8xl { font-size: 4.5rem; line-height: 5rem; }
.text-9xl { font-size: 5rem; line-height: 5.9rem; }
.text-10xl { font-size: 5.5rem; line-height: 6.2rem; }
.text-11xl { font-size: 6rem; line-height: 6.8rem; }
.text-12xl { font-size: 7rem; line-height: 7.9rem; }
.text-18xl { font-size: 18rem; line-height: 18.9rem; }


.italic { font-style: italic; }
.not-italic { font-style: normal; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }
.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }

.line-height-medium { line-height: 1.8rem; }


.text-read {
	font-weight: 400;
	font-size: var(--text-size); line-height: calc(var(--text-size) + 10px);
}


/* ---------------------------------------------------------- */
/*Divers*/
.rounded-0 { border-radius: 0; }
.rounded-10 { border-radius: 10px; }
.rounded-15 { border-radius: 15px; }
.rounded-20 { border-radius: 20px; }
.rounded-30 { border-radius: 30px; }
.rounded-40 { border-radius: 40px; }
.rounded-50 { border-radius: 50px; }
.rounded-100 { border-radius: 100px; }
.rounded-200 { border-radius: 200px; }




.s1 { width: 5%; float: left; }
.s2 { width: 10%; float: left; }
.s3 { width: 15%; float: left; }
.s4 { width: 20%; float: left; }
.s5 { width: 25%; float: left; }
.s6 { width: 30%; float: left; }
.s7 { width: 35%; float: left; }
.s8 { width: 40%; float: left; }
.s9 { width: 45%; float: left; }
.s10 { width: 50%; float: left; }
.s11 { width: 55%; float: left; }
.s12 { width: 60%; float: left; }
.s13 { width: 65%; float: left; }
.s14 { width: 70%; float: left; }
.s15 { width: 75%; float: left; }
.s16 { width: 80%; float: left; }
.s17 { width: 85%; float: left; }
.s18 { width: 90%; float: left; }
.s19 { width: 95%; float: left; }
.s20 { width: 100%; float: left; }


/* ---------------------------------------------------------- */
/***** Spacing *****/
/*Margin*/
.m-0 { margin: 0 !important; }
.m-1 { margin: 0.25rem !important; }
.m-2 { margin: 0.5rem !important; }
.m-3 { margin: 0.75rem !important; }
.m-4 { margin: 1rem !important; }
.m-5 { margin: 1.5rem !important; }
.m-6 { margin: 2rem !important; }
.m-7 { margin: 2.5rem !important; }
.m-8 { margin: 3rem !important; }
.m-9 { margin: 3.5rem !important; }
.m-10 { margin: 4rem !important; }

.mt--1 { margin-top: -0.25rem !important; }
.mt--2 { margin-top: -0.5rem !important; }
.mt--3 { margin-top: -0.75rem !important; }
.mt--4 { margin-top: -1rem !important; }
.mt--5 { margin-top: -1.5rem !important; }
.mt--6 { margin-top: -2rem !important; }
.mt--7 { margin-top: -2.5rem !important; }
.mt--8 { margin-top: -3rem !important; }
.mt--9 { margin-top: -3.5rem !important; }
.mt--10 { margin-top: -4rem !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 0.75rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-5 { margin-top: 1.5rem !important; }
.mt-6 { margin-top: 2rem !important; }
.mt-7 { margin-top: 2.5rem !important; }
.mt-8 { margin-top: 3rem !important; }
.mt-9 { margin-top: 3.5rem !important; }
.mt-10 { margin-top: 4rem !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-5 { margin-bottom: 1.5rem !important; }
.mb-6 { margin-bottom: 2rem !important; }
.mb-7 { margin-bottom: 2.5rem !important; }
.mb-8 { margin-bottom: 3rem !important; }
.mb-9 { margin-bottom: 3.5rem !important; }
.mb-10 { margin-bottom: 4rem !important; }

.mx-0 { margin-right: 0 !important;  margin-left: 0 !important; }
.mx-1 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; }
.mx-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; }
.mx-3 { margin-right: 0.75rem !important; margin-left: 0.75rem !important; }
.mx-4 { margin-right: 1rem !important; margin-left: 1rem !important; }
.mx-5 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; }
.mx-6 { margin-right: 2rem !important; margin-left: 2rem !important; }
.mx-7 { margin-right: 2.5rem !important; margin-left: 2.5rem !important; }
.mx-8 { margin-right: 3rem !important; margin-left: 3rem !important; }
.mx-9 { margin-right: 3.5rem !important; margin-left: 3.5rem !important; }
.mx-10 { margin-right: 4rem !important; margin-left: 4rem !important; }  

.my-0 {margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-3 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; }
.my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-5 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-6 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
.my-7 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; }
.my-8 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.my-9 { margin-top: 3.5rem !important; margin-bottom: 3.5rem !important; }
.my-10 { margin-top: 4rem !important; margin-bottom: 4rem !important; }

.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 0.75rem !important; }
.mr-4 { margin-right: 1rem !important; }
.mr-5 { margin-right: 1.5rem !important; }
.mr-6 { margin-right: 2rem !important; }
.mr-7 { margin-right: 2.5rem !important; }
.mr-8 { margin-right: 3rem !important; }
.mr-9 { margin-right: 3.5rem !important; }
.mr-10 { margin-right: 4rem !important; }

.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 0.75rem !important; }
.ml-4 { margin-left: 1rem !important; }
.ml-5 { margin-left: 1.5rem !important; }
.ml-6 { margin-left: 2rem !important; }
.ml-7 { margin-left: 2.5rem !important; }
.ml-8 { margin-left: 3rem !important; }
.ml-9 { margin-left: 3.5rem !important; }
.ml-10 { margin-left: 4rem !important; }



/*Padding*/
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 0.75rem !important; }
.p-4 { padding: 1rem !important; }
.p-5 { padding: 1.5rem !important; }
.p-6 { padding: 2rem !important; }
.p-7 { padding: 2.5rem !important; }
.p-8 { padding: 3rem !important; }
.p-9 { padding: 3.5rem !important; }
.p-10 { padding: 4rem !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 0.75rem !important; }
.pt-4 { padding-top: 1rem !important; }
.pt-5 { padding-top: 1.5rem !important; }
.pt-6 { padding-top: 2rem !important; }
.pt-7 { padding-top: 2.5rem !important; }
.pt-8 { padding-top: 3rem !important; }
.pt-9 { padding-top: 3.5rem !important; }
.pt-10 { padding-top: 4rem !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 0.75rem !important; }
.pb-4 { padding-bottom: 1rem !important; }
.pb-5 { padding-bottom: 1.5rem !important; }
.pb-6 { padding-bottom: 2rem !important; }
.pb-7 { padding-bottom: 2.5rem !important; }
.pb-8 { padding-bottom: 3rem !important; }
.pb-9 { padding-bottom: 3.5rem !important; }
.pb-10 { padding-bottom: 4rem !important; }

.px-0 { padding-right: 0 !important;  padding-left: 0 !important; }
.px-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
.px-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
.px-3 { padding-right: 0.75rem !important; padding-left: 0.75rem !important; }
.px-4 { padding-right: 1rem !important; padding-left: 1rem !important; }
.px-5 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
.px-6 { padding-right: 2rem !important; padding-left: 2rem !important; }
.px-7 { padding-right: 2.5rem !important; padding-left: 2.5rem !important; }
.px-8 { padding-right: 3rem !important; padding-left: 3rem !important; }
.px-9 { padding-right: 3.5rem !important; padding-left: 3.5rem !important; }
.px-10 { padding-right: 4rem !important; padding-left: 4rem !important; }
  
.py-0 {padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-6 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.py-7 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
.py-8 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.py-9 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
.py-10 { padding-top: 4rem !important; padding-bottom: 4rem !important; }

.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pr-3 { padding-right: 0.75rem !important; }
.pr-4 { padding-right: 1rem !important; }
.pr-5 { padding-right: 1.5rem !important; }
.pr-6 { padding-right: 2rem !important; }
.pr-7 { padding-right: 2.5rem !important; }
.pr-8 { padding-right: 3rem !important; }
.pr-9 { padding-right: 3.5rem !important; }
.pr-10 { padding-right: 4rem !important; }

.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 0.25rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.pl-3 { padding-left: 0.75rem !important; }
.pl-4 { padding-left: 1rem !important; }
.pl-5 { padding-left: 1.5rem !important; }
.pl-6 { padding-left: 2rem !important; }
.pl-7 { padding-left: 2.5rem !important; }
.pl-8 { padding-left: 3rem !important; }
.pl-9 { padding-left: 3.5rem !important; }
.pl-10 { padding-left: 4rem !important; }

.gap-0 { gap: 0 !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 0.75rem !important; }
.gap-4 { gap: 1rem !important; }
.gap-5 { gap: 1.5rem !important; }
.gap-6 { gap: 2rem !important; }
.gap-7 { gap: 2.5rem !important; }
.gap-8 { gap: 3rem !important; }
.gap-9 { gap: 3.5rem !important; }
.gap-10 { gap: 4rem !important; }


.p-fill-1 { padding: 0 1%; }
.p-fill-2 { padding: 0 2%; }
.p-fill-3 { padding: 0 3%; }
.p-fill-4 { padding: 0 4%; }
.p-fill-5 { padding: 0 5%; }
.p-fill-6 { padding: 0 6%; }
.p-fill-7 { padding: 0 7%; }
.p-fill-10 { padding: 0 10%; }
.p-fill-15 { padding: 0 15%; }
.p-fill-20 { padding: 0 20%; }
.p-fill-25 { padding: 0 25%; }
.p-fill-30 { padding: 0 30%; }
.p-fill-40 { padding: 0 40%; }
.p-fill-50 { padding: 0 50%; }
.p-fill-text { padding: 0 7%; }


.page-space { width: 100%; height: var(--nav-height); }
.page-space-5 { width: 100%; height: calc(var(--nav-height) + 5px); }
.page-space-10 { width: 100%; height: calc(var(--nav-height) + 10px); }
.page-space-20 { width: 100%; height: calc(var(--nav-height) + 20px); }
.page-space-25 { width: 100%; height: calc(var(--nav-height) + 25px); }
.page-space-30 { width: 100%; height: calc(var(--nav-height) + 30px); }
.page-space-40 { width: 100%; height: calc(var(--nav-height) + 40px); }
.page-space-50 { width: 100%; height: calc(var(--nav-height) + 50px); }





/* ---------------------------------------------------------- */
/***** Form *****/






/* ---------------------------------------------------------- */
/*Responsive*/
@media screen and (max-width: 600px){

    :root {
        --text-size: 12px;

        --size-xxs: 9px;
        --size-xs: 12px;
        --size-sm: 13px;
        --size-medium: 15px;
        --size-l: 25px;
        --size-lg: 30px;
        --size-xl: 40px;
        --size-2xl: 55px;
    }

    /*Container*/
    .container-wide { width: 96%; }
    .container-large { width: 1080px; }
    .container { width: 90%; }
    .container-small { width: 85%;  }

	.s1_mobile { width: 100%; }
	.s2_mobile { width: 100%; }
	.s3_mobile { width: 100%; }
	.s4_mobile { width: 100%; }
    .s4_5_mobile { width: 100%; }
	.s5_mobile { width: 100%; }
	.s6_mobile { width: 100%; }
    .s6_5_mobile { width: 100%; float: left; }
	.s7_mobile { width: 100%; }
	.s8_mobile { width: 100%; }
	.s9_mobile { width: 100%; }
	.s10_mobile { width: 100%; }
	.s11_mobile { width: 100%; }
	.s12_mobile { width: 100%; }
	.s13_mobile { width: 100%; }
	.s14_mobile { width: 100%; }
	.s15_mobile { width: 100%; }
    .s15_5_mobile { width: 100%; }
	.s16_mobile { width: 100%; }
	.s17_mobile { width: 100%; }
	.s18_mobile { width: 100%; }
	.s19_mobile { width: 100%; }
	.s20_mobile { width: 100%; }


    .s1_tab { width: 100%; float: left; }
	.s2_tab { width: 100%; float: left; }
	.s3_tab { width: 100%; float: left; }
	.s4_tab { width: 100%; float: left; }
	.s5_tab { width: 100%; float: left; }
	.s6_tab { width: 100%; float: left; }
	.s7_tab { width: 100%; float: left; }
	.s8_tab { width: 100%; float: left; }
	.s9_tab { width: 100%; float: left; }
	.s10_tab { width: 100%; float: left; }
	.s11_tab { width: 100%; float: left; }
	.s12_tab { width: 100%; float: left; }
	.s13_tab { width: 100%; float: left; }
	.s14_tab { width: 100%; float: left; }
	.s15_tab { width: 100%; float: left; }
	.s16_tab { width: 100%; float: left; }
	.s17_tab { width: 100%; float: left; }
	.s18_tab { width: 100%; float: left; }
	.s19_tab { width: 100%; float: left; }
	.s20_tab { width: 100%; float: left; }


    .grid1,.grid2,.grid3,.grid4,.grid5,.grid6,.grid7 {
        width: 100%; 
        grid-row-gap: 10px;
        grid-column-gap : 0;
        grid-template-columns: 100%;    
    }


    .content-left-center,
	.content-right-center { justify-content: center; }

    .hide-tab { display: block; }
	.show-tab { display: none; }
	.hide-tab-mobile { display: none; }
	.hide-tab-mobile-flex { display: none!important; }
	.hide-mobile { display: none; }
	.hide-mobile-flex { display: none!important; }
	.show-tab-mobile-flex { display: flex; }
	.show-tab-mobile { display: block; }
	.show-mobile { display: block; }
	.hide-13inch-tab-mobile { display: none; }
    
}

@media screen and (min-width: 600px){

    :root {
        --text-size: 12px;

        --size-xxs: 9px;
        --size-xs: 12px;
        --size-sm: 13px;
        --size-medium: 15px;
        --size-l: 25px;
        --size-lg: 30px;
        --size-xl: 40px;
        --size-2xl: 55px;
    }

    /*Container*/
    .container-wide { width: 96%; }
    .container-large { width: 1080px; }
    .container { width: 90%; }
    .container-small { width: 85%;  }


    .s1_mobile { width: 5%; float: left; }
	.s2_mobile { width: 10%; float: left; }
	.s3_mobile { width: 15%; float: left; }
	.s4_mobile { width: 20%; float: left; }
    .s4_5_mobile { width: 22.5%; float: left; }
	.s5_mobile { width: 25%; float: left; }
	.s6_mobile { width: 30%; float: left; }
    .s6_5_mobile { width: 33.33%; float: left; }
	.s7_mobile { width: 35%; float: left; }
	.s8_mobile { width: 40%; float: left; }
	.s9_mobile { width: 45%; float: left; }
	.s10_mobile { width: 50%; float: left; }
	.s11_mobile { width: 55%; float: left; }
	.s12_mobile { width: 60%; float: left; }
	.s13_mobile { width: 65%; float: left; }
	.s14_mobile { width: 70%; float: left; }
	.s15_mobile { width: 75%; float: left; }
    .s15_5_mobile { width: 77.5%; float: left; }
	.s16_mobile { width: 80%; float: left; }
	.s17_mobile { width: 85%; float: left; }
	.s18_mobile { width: 90%; float: left; }
	.s19_mobile { width: 95%; float: left; }
	.s20_mobile { width: 100%; float: left; }


    .s1_tab { width: 100%; float: left; }
	.s2_tab { width: 100%; float: left; }
	.s3_tab { width: 100%; float: left; }
	.s4_tab { width: 100%; float: left; }
	.s5_tab { width: 100%; float: left; }
	.s6_tab { width: 100%; float: left; }
	.s7_tab { width: 100%; float: left; }
	.s8_tab { width: 100%; float: left; }
	.s9_tab { width: 100%; float: left; }
	.s10_tab { width: 100%; float: left; }
	.s11_tab { width: 100%; float: left; }
	.s12_tab { width: 100%; float: left; }
	.s13_tab { width: 100%; float: left; }
	.s14_tab { width: 100%; float: left; }
	.s15_tab { width: 100%; float: left; }
	.s16_tab { width: 100%; float: left; }
	.s17_tab { width: 100%; float: left; }
	.s18_tab { width: 100%; float: left; }
	.s19_tab { width: 100%; float: left; }
    .s20_tab { width: 100%; float: left; }


    .hide-tab { display: none; }
	.show-tab { display: block; }
	.hide-tab-mobile { display: none; }
	.hide-tab-mobile-flex { display: none!important; }
	.hide-mobile { display: block; }
	.hide-mobile-flex { display: flex!important; }
	.show-tab-mobile-flex { display: flex; }
	.show-tab-mobile { display: block; }
	.show-mobile { display: none; }
	.hide-13inch-tab-mobile { display: none; }

}

@media screen and (min-width: 992px){
    

    /*Container*/
    /*.s1_tab { width: 100%; }
	.s2_tab { width: 100%; }
	.s3_tab { width: 100%; }
	.s4_tab { width: 100%; }
	.s5_tab { width: 100%; }
	.s6_tab { width: 100%; }
	.s7_tab { width: 100%; }
	.s8_tab { width: 100%; }
	.s9_tab { width: 100%; }
	.s10_tab { width: 100%; }
	.s11_tab { width: 100%; }
	.s12_tab { width: 100%; }
	.s13_tab { width: 100%; }
	.s14_tab { width: 100%; }
	.s15_tab { width: 100%; }
	.s16_tab { width: 100%; }
	.s17_tab { width: 100%; }
	.s18_tab { width: 100%; }
	.s19_tab { width: 100%; }
    .s20_tab { width: 100%; }*/


    .hide-tab { display: none; }
	.show-tab { display: block; }
	.hide-tab-mobile { display: none; }
	.hide-tab-mobile-flex { display: none!important; }
	.hide-mobile { display: block; }
	.show-tab-mobile-flex { display: flex; }
	.show-tab-mobile { display: block; }
	.show-mobile { display: none; }
	.hide-13inch-tab-mobile { display: none; }

}

@media screen and (min-width: 1200px){

    /*:root {
        --text-size: 12px;

        --size-xs: 12px;
        --size-sm: 16px;
        --size-medium: 18px;
        --size-lg: 28px;
        --size-xl: 45px;
    }*/


    /*Container*/
    .container-wide { width: 1100px; }
    .container-large { width: 1080px; }
    .container { width: 1000px; }
    .container-small { width: 900px; }
    .container-lil { width: 780px;  }

    .s1_tab { width: 5%; float: left; }
	.s2_tab { width: 10%; float: left; }
	.s3_tab { width: 15%; float: left; }
	.s4_tab { width: 20%; float: left; }
	.s5_tab { width: 25%; float: left; }
	.s6_tab { width: 30%; float: left; }
	.s7_tab { width: 35%; float: left; }
	.s8_tab { width: 40%; float: left; }
	.s9_tab { width: 45%; float: left; }
	.s10_tab { width: 50%; float: left; }
	.s11_tab { width: 55%; float: left; }
	.s12_tab { width: 60%; float: left; }
	.s13_tab { width: 65%; float: left; }
	.s14_tab { width: 70%; float: left; }
	.s15_tab { width: 75%; float: left; }
	.s16_tab { width: 80%; float: left; }
	.s17_tab { width: 85%; float: left; }
	.s18_tab { width: 90%; float: left; }
	.s19_tab { width: 95%; float: left; }
	.s20_tab { width: 100%; float: left; }	

    .hide-tab { display: block; }
	.show-tab { display: none; }
	.hide-tab-mobile { display: block; }
	.hide-tab-mobile-flex { display: flex!important; }
	.show-tab-mobile { display: none; }
	.show-tab-mobile-flex { display: none!important; }
	.hide-13inch-tab-mobile { display: none; }

}

@media screen and (min-width: 1300px){

}

@media screen and (min-width: 1500px){

    .hide-13inch-tab-mobile { display: block; }

}

@media screen and (min-width: 1600px){

    :root {
        --text-size: 13px;

        --size-xxs: 10px;
        --size-xs: 14px;
        --size-sm: 16px;
        --size-medium: 18px;
        --size-base: 27px;
        --size-l: 35px;
        --size-lg: 40px;
        --size-xl: 50px;
        --size-2xl: 70px;
    }

    .container-wide { width: 1550px; }
    .container-large { width: 1250px; }
    .container { width: 1100px; }
    .container-small { width: 950px; }
    .container-lil { width: 750px;  }

}

@media screen and (min-width: 1800px){

    /*:root {
        --text-size: 13px;

        --size-xs: 14px;
        --size-sm: 16px;
        --size-medium: 18px;
        --size-lg: 26px;
        --size-xl: 45px;
    }*/

    .container-wide { width: 1600px; }
    .container-large { width: 1300px; }
    .container { width: 1200px; /*1130px*/ }
    .container-small { width: 1000px; }
    .container-lil { width: 800px;  }

}

@media screen and (min-width: 2300px){

    :root {
        --text-size: 15px;

        --size-xxs: 13px;
        --size-xs: 16px;
        --size-sm: 18px;
        --size-medium: 20px;
        --size-base: 27px;
        --size-l: 38px;
        --size-lg: 45px;
        --size-xl: 55px;
        --size-2xl: 85px;
    }

    .container-wide { width: 1700px; }
    .container-large { width: 1400px; }
    .container { width: 1300px; }
    .container-small { width: 1100px; }
    .container-lil { width: 900px;  }

}

@media screen and (min-width: 3200px){

}