/* 
 * Copyright (C) Sigmagine, SARL - All Rights Reserved - < contact [at] sigmagine.com >
 * This file is part of Fineaty project
 * Unauthorized copying, reuse or modification of this file, partial or total, by any means, is strictly prohibited
 * Developed by Samuel Tranchet since June 2008
 */


/* 
ROUGE ELEGANCIA : var(--main-button-color);
ROUGE ELEGANCIA : rgba(157,1,44,0.1);
FONT COLOR      : #787878;
YELLOW  : rgb(249,239,58);
*/



@font-face {
    font-family : "icofont";
    src         : url('../fonts/icofont.ttf') format('truetype');
    font-weight : normal;
    font-style  : normal;
}

@font-face {
    font-family: "CocogoosePro";
    src: url('../fonts/CocogoosePro-Light.otf');
    font-weight : 100;
    font-style  : normal;
}

@font-face {
    font-family: "CocogoosePro";
    src: url('../fonts/CocogoosePro-Semilight.otf');
    font-weight : 300;
    font-style  : normal;
}

@font-face {
    font-family: "CocogoosePro";
    src: url('../fonts/CocogoosePro-Regular.otf');
    font-weight : normal;
    font-style  : normal;
}

@font-face {
    font-family: "Larken";
    src: url('../fonts/Larken-Regular.otf');
    font-weight : normal;
    font-style  : normal;
}

@font-face {
    font-family: "Larken";
    src: url('../fonts/Larken-Light.otf');
    font-weight : lighter;
    font-style  : normal;
}

@font-face {
    font-family: "Larken";
    src: url('../fonts/Larken-Italic.otf');
    font-weight : normal;
    font-style  : italic;
}

@font-face {
    font-family: "Larken";
    src: url('../fonts/Larken-BoldItalic.otf');
    font-weight : bold;
    font-style  : italic;
}

@keyframes h1LetterSpacing {
    0% {
        letter-spacing: 50px;
    }
    100% {
        letter-spacing: 10px;
    }
}

@keyframes h2LetterSpacing {
    0% {
        letter-spacing: 40px;
    }
    100% {
        letter-spacing: 2px;
    }
}

:root{

    --state-blue  : rgba(61, 162, 230, 1);
    --state-red   : rgba(252, 100, 132, 1);
    --state-green : rgba(82, 192, 191, 1);
    --state-orange: rgba(253, 159, 79, 1);
    --state-purple: rgba(151, 103, 248, 1);
    --state-yellow: rgba(254, 205, 102, 1);
    --state-grey  : rgba(201, 203, 207, 1);

    --transparency: 0.2;

    --main-bg-color     : rgb(51,51,51);/*#262D3D;*/
    --main-font-color   : rgb(51,51,51);/*#262D3D;*/
    --main-color        : #227bab;
    --main-gap          : 50px;
    --main-tb-bd-color  : #f7f2ee;
    --main-table-hover  : rgb(253,236,231);
    --main-font-family  : "indivisible", sans-serif;
    --main-border-width : 2px;
    --main-border-radius: 0px;
    --section-padding   : 80px;

    --secondary-bg-color: rgb(247,247,245);/*#EDF3FF;*/

    --thumb-font-family-1: "salamat", sans-serif;
    --thumb-font-family-2: "sarah-script", sans-serif;/*400*/
    --thumb-font-family-3: "alpine-script", sans-serif;/*400*/
}

html,body{
    font-family     : arial, sans-serif;
    background-color: var(--secondary-bg-color);
    font-size       : 14px;
    margin          : 0px;
    padding         : 0px;
    height          : 100%;
    color           : var(--main-font-color);
    font-weight     : 300;
    font-family     : var(--main-font-family);
}

body{
    background-repeat   : no-repeat;
    background-position : center top;
}


input,select,textarea{
    width           : 100%;
    margin          : 5px 0px 15px;
    padding         : 10px 20px;
    border          : var(--main-border-width) solid var(--main-bt-color);
    background-color: #227bab0F;
    font-family     : inherit;
    color           : var(--main-color);
}

textarea,
table.formTable .formField.formFieldTextArea{
    resize      : vertical;
    min-height  : 100px;
}

select{
    background-image    : url("../images/blackarrowdown.png");
    background-repeat   : no-repeat;
    background-position : right center;
    -webkit-appearance  : none;
    -moz-appearance     : none;
    appearance          : none;
    padding-right       : 30px;
}

iframe{
    border      : none;
    width       : 100%;
    height      : 100%;
}

a,a:visited{
    color           : var(--main-color);
    text-decoration : none;
    font-weight     : 500;
}

h1, h2, h3, h4{
    font-family: var(--main-title-font);
    letter-spacing: 1px;
}

h1{
    font-size       : 40px;
    text-transform  : uppercase;
    font-weight     : 200;
    text-align      : center;
    /* color           : var(--main-color); */
    letter-spacing  : 10px;
    /* animation: 1s ease-out 0s 1 h1LetterSpacing; */
    margin-top: 0px;
    padding-top: 25px;
}

.fineatyPopUp h1,
.fineatyPopUp h2{
    animation: none;
}

h2{
    font-size       : 20px;
    text-transform  : uppercase;
    font-weight     : 300;
    letter-spacing  : 2px;
    /* animation: 1s ease-out 0s 1 h2LetterSpacing; */
}

h3{
    font-size       : 16px;
    font-weight     : 500;
    text-transform  : uppercase;
}

h4{
    font-size       : 10px;
    padding-bottom  : 10px;
    margin-bottom   : 10px;
    border-bottom   : var(--main-border-width) solid var(--main-border-color);
    font-weight     : 300;
}

h5{
    padding-bottom  : 5px;
    border-bottom   : var(--main-border-width) solid var(--main-border-color);
}

@media (max-width: 767px) {

    h1{
        font-size: 30px;
        animation: none;
    }

    h2{
        animation: none;
    }
    
}

label{
    display         : block;
    font-size       : 10px;
    font-weight     : 400;
    text-transform  : uppercase;
    color           : var(--main-th-color);
    padding-left    : 0px;
}

label.inlineClass{
    display: inline-block;
}

hr{
    border      : none;
    border-top  : 1px solid #cccccc;
    margin      : 15px 0px;
}

summary {
    list-style: none;
}

summary:hover{
    cursor: pointer;
}

details > summary { 
    color: var(--main-font-color);
    clear: right;
}

details[open] > summary { 
    color: var(--main-bt-color);
}

details > summary::before { 
    content     : "\002B"; 
    margin-right: 10px;
    font-size   : 9px;
}

details[open] > summary::before { 
    content     : "\2212"; 
    margin-right: 10px;
    font-size   : 9px;
}

details.hideMarker > summary::before { 
    content: none; 
}

details.hideMarker[open] > summary::before { 
    content: none
}

button, .fineatyButton, .fineatyButton:visited,
.formImage .fineatyThumbImage{
    font-family     : var(--main-font-family);
    padding         : 15px;
    font-size       : 12px;
    border          : var(--main-border-width) solid var(--main-color);
    font-weight     : 500;
    text-transform  : uppercase;
    /* background      : var(--main-bg-color); */
    background      : none;
    color           : var(--main-color);
    transition      : background-color 0.5s;
    transition      : color 0.5s;
}

h2 > button, h2 > .fineatyButton, h2 > .fineatyButton:visited{
    font-size       : 20px;
    font-weight     : 300;
    min-width       : 150px;
    border          : 1px solid var(--main-color);
}

.formImage .formFieldFileUploadInfos,
.formImage .formFieldFileUploadFileList{
    display: none;
}

.formLink.fineatyLink{
    font-family     : var(--main-font-family);
    width           : 200px;
    padding         : 12px 20px;
    display         : inline-block;
    color           : var(--main-bt-color);
    margin-top      : 15px;
    overflow        : hidden;
}

.formLink.fineatyLink.fineatyButton{
    border: var(--main-border-width) solid var(--main-bt-color);
}

button:hover, .fineatyButton:hover,
.formImage .fineatyThumbImage:hover{
    cursor      : pointer;
    background  : var(--main-color);
    color       : var(--secondary-bg-color);
}

.flatButton{
    border          : var(--main-border-width) solid var(--main-bt-color);
    padding         : 3px;
    text-transform  : uppercase;
    font-size       : 9px;
}

.flatButton:hover{
    background-color: var(--main-bt-color);
    color           : #ffffff;
}

/*.iconButton, .iconButton:hover{
    font-size   : 12px;
    padding     : 5px;
}*/

.formFieldCheckboxOption input, .formFieldRadioOption input {
    width: inherit;
}

.miniButton, .miniButton:hover,
.formLink.fineatyLink.miniButton{
    font-size       : 10px;
    padding         : 5px 15px;
    text-transform  : uppercase;
    width           : auto;
}

.microButton{
    font-size       : 8px;
    padding         : 3px;
    text-transform  : uppercase;
    width           : auto;
}

.fineatyAlert{
    border-width: 1px;
    border-style: solid;
}

.filterTitle{
    font-family     : var(--main-font-family);
    text-transform  : uppercase;
    font-size       : 12px;
    font-weight     : 900;
    margin-bottom   : -15px;
    text-align      : center;
    color           : var(--main-bt-color);
    border-bottom   : var(--main-border-width) solid var(--main-bt-color);
}

#siteTitle{
    font-size   : 42px;
    font-weight : 100;
    margin      : 30px 0 0 0;
}

#siteSubtitle{
    font-size   : 14px;
    font-weight : 100;
    margin      :  0;
}

#content{
    background-color: #fff;
    padding-bottom  : 20px;
    margin-bottom   : 10px;
    padding         : 10px;
}

#pageSubtitle{
    margin      : 0px 0px 15px 30px;
    font-size   : 13px;
}

#itemPath{
    margin      : 0px 0px 15px 0px;
    font-size   : 10px;
}

#pageDescription{
    padding         : 10px;
    background-color: #eeeeee;
    margin          : 0px 0px 15px 0px;
}

.collectionItem{
    float       :left;
    text-align  :center;
}

.collectionItemTitle{
    overflow:hidden;
    width   : 120px;
    height  : 50px;
}

th{
    font-size       : 10px;
    text-transform  : uppercase;
    font-weight     : 400;
    padding         : 15px 5px;
    color           : var(--main-th-color);
}

.formTable td{
    border-color: #81969f;
    padding     : 0px;
    text-align  : center;
}

.formTable + .formLinkdiv .formLink{
    width       : auto;
    padding     : 5px 10px;
    border      : none;
    font-size   : 10px;
}

.formTable + .formLinkdiv .formLink.fineatyButton{
    border: var(--main-border-width) solid var(--main-bt-color);
}

.formTable .formLink, .formTable .formLink:hover{
    width           : auto;
    font-size       : 8px;
    padding         : 3px 10px;
    text-transform  : uppercase;
    margin-top      : 0px;
}

.formLinkdiv{
    text-align: center;
}

table.formTable td{
    vertical-align: middle;
}

.hideField{
    display: none;
}

.stateYes{
    color: var(--state-green);
}

.stateNo{
    color: var(--state-red);
}

.stateWait{
    color: var(--state-orange);
}

.divAsLink{
    position: relative;
    cursor  : pointer;
}

.divAsLink a.divLink{
    display: inline;
}

.divAsLink a.divLink span{
    position: absolute;
    top     : 0;
    left    : 0;
    height  : 100%;
    width   : 100%;
}

li > *{
    vertical-align: top;
}

.tableStyle{
    width           : 100%;
    font-size       : 11px;
    border-collapse : collapse;
}

.tableStyle th{
    border-bottom: 1px solid var(--main-tb-bd-color);
}

.tableStyle tbody tr:hover,
.tbodyStyle:hover{
    background-color: var(--main-table-hover);
}

.tbodyStyle:hover tr{
    background-color: transparent;
}

.tableStyle .secondHover:hover{
    background-color: #C8D3DE;
}

.tableStyle .formTable tbody tr:hover{
    background-color: transparent;
}

.tableStyle td{
    padding         : 10px 4px;
    border-bottom   : 1px solid var(--main-tb-bd-color);
}

.tableStyle td.exclusiveIcon{
    padding  : 0px 4px;
    font-size: 20px;
}

.iconCell{
    padding  : 0px;  
    font-size: 16px;
}

.iconCell a{
    margin: 0px 2px;
}

.trOrder:hover{
    cursor  : pointer;
    color   : var(--main-bt-color);
}

/*.tableStyle tr:last-child td {
    border-bottom: 0;
}*/

.progressBar-container{
    width: 100%;
}

.progressBar-empty{
    height          : 5px;
    background-color: #cccccc;
    border-radius   : 0px;
}

.progressBar-progression{
    height          : 100%;
    background-color: var(--state-blue);
    border-radius   : 0px;
    transition      : width 0.5s;
}

.progressBar-progression.complete{
    background-color: var(--state-green);
}



.tableHeaderContainer{
    text-align      : center;
    padding         : 15px 0px;
    background-color: #eeeeee;
    color           : var(--main-th-color);
    font-size       : 12px;
    border-bottom   : var(--main-border-width) solid #cccccc;
}

.tableHeaderContainer{
    font-weight: 700;
}

.tableRowContainer{
    background-color: transparent;
    border-bottom: var(--main-border-width) solid #cccccc;
}

.tableRowContainer:hover{
    background-color: #DCE9F5;
    /*z-index: 1000;
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16), -3px -3px 6px rgba(0,0,0,0.16);*/
}

.tableRow{
    text-align  : center;
    padding     : 10px 4px;
}

.accordion,
.accordion-header{
    cursor: pointer;
}

.accordion-content{
    overflow    : hidden;
    min-height  : 0px !important;
    max-height  : 0;
    transition  : max-height 0.2s ease-out;
}

.accordion:after,
.accordion-header:after{
    content    : "\002B";
    float      : right;
    margin-right: 15px;
}

.accordion.active:after,
.accordion-header.active:after{
    content: "\2212";
}

.accordion.clearAfter:after,
.accordion.clearAfter.active:after,
.accordion-header.clearAfter:after,
.accordion-header.clearAfter.active:after{
    content    : "";
    float      : none;
    margin-right: 0px;
}




.filters{
    text-align: center;
    padding: 15px 0px;
    margin-bottom: 10px;
}

.filters button{
    margin: 5px 5px;
}

.filters .mixitup-control-active{
    color: var(--main-bt-color);
}

.filters .borderButton.mixitup-control-active{
    border: 1px solid var(--main-bt-color);
}

.buttonContainer{
    margin-bottom: 30px;
}

.buttonContainer > *{
    margin-right: 10px;
    margin-bottom: 10px;
}

.form-container{
    display                 : grid;
    grid-template-columns   : 1fr;
    grid-auto-rows          : min-content;
    grid-row-gap            : 15px;
    padding                 : 15px 30px;
    border                  : 1px solid var(--main-bt-color);
    border-radius           : 12px;
}

.formImage{
    position    : relative;
    text-align  : center;
    margin      : 3px 0px;
}

.formImage .fineatyThumbImage{
    margin-bottom: 20px;
}

.formImage:hover .fineatyThumbImage{
    opacity: 0.6;
}

.formImage input[type="file"]:hover{
    cursor: pointer;
}

.formImage input[type="file"]{
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 100%;
    height  : 100%;
    margin  : 0px;
    opacity : 0;
}

.formImage label{
    margin: 5px 0px;
}

.formProfile .fineatyThumbImage{
    padding             : 0px;
    border-radius       : 75px;
    background-size     : cover !important;
    background-repeat   : no-repeat;
}

.formFieldFileProgress{
    width : 100%;
    height: 5px;
    margin: 0px;
}

.formFieldFileProgressBar{
    background-color: var(--main-info);
}

.fineatyAlert{
    overflow: hidden;
}

.module-container{
    padding: 25px;
}

.grid-solo{
    display                 : grid;
    grid-template-columns   : 1fr;
    row-gap                 : var(--main-row-gap);
}

.grid-twoFold{
    display                 : grid;
    grid-template-columns   : repeat(2, 1fr);
    column-gap              : var(--main-column-gap);
    row-gap                 : var(--main-row-gap);
}

.grid-threeFold{
    display                 : grid;
    grid-template-columns   : repeat(3, 1fr);
    column-gap              : var(--main-column-gap);
    row-gap                 : var(--main-row-gap);
}

.grid-fourFold{
    display                 : grid;
    grid-template-columns   : repeat(4, 1fr);
    column-gap              : var(--main-column-gap);
    row-gap                 : var(--main-row-gap);
}

.grid-fiveFold{
    display                 : grid;
    grid-template-columns   : repeat(5, 1fr);
    column-gap              : var(--main-column-gap);
    row-gap                 : var(--main-row-gap);
}

.grid-300px-1fr{
    display                 : grid;
    grid-template-columns   : 300px 1fr;
    column-gap              : var(--main-column-gap);
    row-gap                 : var(--main-row-gap);
}

.grid-1fr-2fr{
    display                 : grid;
    grid-template-columns   : 1fr 2fr;
    column-gap              : var(--main-column-gap);
    row-gap                 : var(--main-row-gap);
}

.grid-2fr-1fr{
    display                 : grid;
    grid-template-columns   : 2fr 1fr;
    column-gap              : var(--main-column-gap);
    row-gap                 : var(--main-row-gap);
}

@media (min-width: 1280px){}

@media (min-width: 1024px) and (max-width: 1279px){
    
    .grid-fourFold,
    .grid-fiveFold{
        grid-template-columns: repeat(3, 1fr);
    }
    
    .grid-threeFold{
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-threeFold.integrationPlanManager{
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    
    .grid-threeFold,
    .grid-fourFold,
    .grid-fiveFold{
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-300px-1fr,
    .grid-1fr-2fr,
    .grid-2fr-1fr{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    
    .module-container{
        padding: 0px;
    }
    
    .grid-twoFold,
    .grid-threeFold,
    .grid-fourFold,
    .grid-fiveFold,
    .grid-300px-1fr,
    .grid-1fr-2fr,
    .grid-2fr-1fr{
        grid-template-columns: 1fr;
    }
}



/*.card-container .formTable{
    background-color: #eee;
    padding         : 15px;
    border-radius   : 12px;
    box-shadow      : inset 3px 3px 6px rgba(0,0,0,0.16);
}*/











/* ICONS */

.icons{
    font-family : 'icofont', serif;
    font-style  : normal;
    font-weight : normal !important;
}

.icon-float{
    float: left;
}

.icon-addDate::before{
    content: "";
}

.icon-archeryTarget::before{
    content: "";
}

.icon-archive::before{
    content: "";
}

.icon-atom::before{
    content: "";
}

.icon-auctionHammer::before{
    content: "";
}

.icon-award::before{
    content: "";
}

.icon-balance::before{
    content: "";
}

.icon-balanceMan::before{
    content: "";
}

.icon-barChartCorner::before{
    content: "";
}

.icon-barChartCurve::before{
    content: "";
}

.icon-bathrobe::before{
    content: "";
}

.icon-bed::before{
    content: "";
}

.icon-bell::before{
    content: "";
}

.icon-bookmark::before{
    content: "";
}

.icon-bookTurnPages::before{
    content: "";
}

.icon-buffer::before{
    content: "";
}

.icon-buildings::before{
    content: "";
}

.icon-calculBoard::before{
    content: "";
}

.icon-calendar::before{
    content: "";
}

.icon-camera::before{
    content: "";
}

.icon-cantSee::before{
    content: "";
}

.icon-cart::before{
    content: "";
}

.icon-certificate::before{
    content: "";
}

.icon-check::before{
    content: "";
}

.icon-checkLight::before{
    content: "";
}

.icon-checkListNotepad::before{
    content:"";
}

.icon-chefHat::before{
    content: "";
}

.icon-cinemaCamera::before{
    content: "";
}

.icon-computerOperator::before{
    content: "";
}

.icon-crop::before{
    content: "";
}

.icon-diary::before{
    content: "";
}

.icon-document::before{
    content: "";
}

.icon-dollarBag::before{
    content: "";
}

.icon-dollarCurrency::before{
    content: "";
}

.icon-done::before{
    content: "";
}

.icon-download:before{
    content: "";
}

.icon-ducplicate::before{
    content: "";
}

.icon-error::before{
    content: "";
}

.icon-errorLight::before{
    content: "";
}

.icon-edit::before{
    content: "";
}

.icon-emergencyLogo::before{
    content: "";
}

.icon-euroCurrency::before{
    content: "";
}

.icon-excel::before{
    content: "";
}

.icon-exchange::before{
    content: "";
}

.icon-fillingStar::before{
    content: "";
}

.icon-filter::before{
    content: "";
}

.icon-flag::before{
    content: "";
}

.icon-flowchart::before{
    content: "";
}

.icon-flowchartProfile::before{
    content: "";
}

.icon-folder::before{
    content: "";
}

.icon-forbidden::before{
    content: "";
}

.icon-forkKnife::before{
    content: "";
}

.icon-glassCocktail::before{
    content: "";
}

.icon-hammer::before{
    content: "";
}

.icon-hammer2::before{
    content: "";
}

.icon-happy::before{
    content: "";
}

.icon-history::before{
    content: "";
}

.icon-home::before{
    content: "";
}

.icon-idCard::before{
    content: "";
}

.icon-indianLine::before{
    content: "";
}

.icon-info::before{
    content: "";
}

.icon-inProgress::before{
    content: "";
}

.icon-internetClic::before{
    content: "";
}

.icon-invisible::before{
    content: "";
}

.icon-itinerary::before{
    content: "";
}

.icon-light::before{
    content: "";
}

.icon-link:before{
    content: "";
}

.icon-linkedDocument::before{
    content: "";
}

.icon-lock::before{
    content: "";
}

.icon-locked::before{
    content: "";
}

.icon-logout::before{
    content: "";
}

.icon-mail::before{
    content: "";
}

.icon-mailSended::before{
    content: "";
}

.icon-manifyingProfile::before{
    content: "";
}

.icon-menu::before{
    content: "";
}

.icon-message::before{
    content: "";
}

.icon-minus::before{
    content: "";
}

.icon-molecule::before{
    content: "";
}

.icon-money::before{
    content: "";
}

.icon-moneyBag::before{
    content: "";
}

.icon-night::before{
    content: "";
}

.icon-oldPhone::before{
    content: "";
}

.icon-oldPhone2::before{
    content: "";
}

.icon-oneWayStreet::before{
    content: "";
}

.icon-orderAsc::before{
    content: "";
}

.icon-orderDesc::before{
    content: "";
}

.icon-pause::before{
    content: "";
}

.icon-pen::before{
    content: "";
}

.icon-phone::before{
    content: "";
}

.icon-picture:before{
    content: "";
}

.icon-pieChart::before{
    content: "";
}

.icon-piece::before{
    content: "";
}

.icon-play::before{
    content: "";
}

.icon-playCircle::before{
    content: "";
}

.icon-plus::before{
    content: "";
}

.icon-present::before{
    content: "";
}

.icon-print::before{
    content: "";
}

.icon-priority::before{
    content: "";
}

.icon-profile::before{
    content: "";
}

.icon-profileThumb::before{
    content: "";
}

.icon-qrCode::before{
    content: "";
}

.icon-refresh::before{
    content: "";
}

.icon-resize::before{
    content: "";
}

.icon-restaurantTable::before{
    content: "";
}

.icon-return::before{
    content: "";
}

.icon-sailingBoat::before{
    content: "";
}

.icon-save::before{
    content: "";
}

.icon-screw::before{
    content: "";
}

.icon-sealedLips::before{
    content: "";
}

.icon-search::before{
    content: "";
}

.icon-select::before{
    content: "";
}

.icon-send::before{
    content: "";
}

.icon-signed::before{
    content: "";
}

.icon-square::before{
    content: "";
}

.icon-star::before{
    content: "";
}

.icon-start::before{
    content: "";
}

.icon-stop::before{
    content: "";
}

.icon-stopCircle::before{
    content: "";
}

.icon-stopHand::before{
    content: "";
}

.icon-substitute::before{
    content: "";
}

.icon-support:before{
    content: "";
}

.icon-swap::before{
    content: "";
}

.icon-swimmer::before{
    content: "";
}

.icon-tag::before{
    content: "";
}

.icon-tagText::before{
    content: "";
}

.icon-thumbDown::before{
    content: "";
}

.icon-thumbUp::before{
    content: "";
}

.icon-ticket::before{
    content: "";
}

.icon-timer::before{
    content: "";
}

.icon-transparent::before{
    content: "";
}

.icon-trash::before{
    content: "";
}

.icon-traveler::before{
    content: "";
}

.icon-unhappy::before{
    content: "";
}

.icon-unlocked::before{
    content: "";
}

.icon-updateDocument::before{
    content: "";
}

.icon-visible::before{
    content: "";
}

.icon-warning::before{
    content: "";
}

.icon-web::before{
    content: "";
}

.icon-wrenchSrewdriver::before{
    content: "";
}

.icon-writtenMessage::before{
    content: "";
}

.icon-writingMessage::before{
    content: "";
}




.icon-groom::before{
    content: "";
}
.icon-trioShapeFullBody::before{
    content: "";
}
.icon-suitShape::before{
    content: "";
}
.icon-trioShapeFullBodyPerspective::before{
    content: "";
}
.icon-butler::before{
    content: "";
}
.icon-searchFile::before{
    content: "";
}
.icon-searchFolder::before{
    content: "";
}
.icon-instagram::before{
    content: "";
}
.icon-borderLessSmiley::before{
    content: "";
}
.icon-bigAttachedCase::before{
    content: "";
}
.icon-attachedCase::before{
    content: "";
}
.icon-photoCameraCorner::before{
    content: "";
}
.icon-wineGlass::before{
    content: "";
}
.icon-openMail::before{
    content: "";
}
.icon-callOperator::before{
    content: "";
}
.icon-suitcase::before{
    content: "";
}
.icon-plateCutlery::before{
    content: "";
}
.icon-magicWand::before{
    content: "";
}
.icon-megaphone::before{
    content: "";
}
.icon-beardBrush::before{
    content: "";
}
.icon-painterPalette::before{
    content: "";
}
.icon-pestle::before{
    content: "";
}
.icon-recycle::before{
    content: "";
}
.icon-tools::before{
    content: "";
}
.icon-refreshVertical::before{
    content: "";
}
.icon-listQuestionMessage::before{
    content: "";
}














/* PAGE FRAME */

#structure-frame{
    display             : grid;
    grid-template-rows  : minmax(min-content, 70px) 1fr auto;
    min-height          : 100vh;
}

#structureFrame-header{
    background-color        : var(--main-bg-color);
    /* border-bottom           : 1px solid var(--main-color); */
}

#header{
    display                 : grid;
    grid-template-columns   : 1fr auto 1fr;
    height                  : 70px;
    align-items             : end;
}

#miniHeader{
    display                 : grid;
    grid-template-columns   : 1fr auto;
    height                  : 70px;
    align-items             : center;
    display                 : none;
}

.miniHeader-dropdown{
    display         : none;
    background-color: var(--main-bg-color);
    width           : 100%;
    text-align      : center;
}

.header-leftSide{
    display                 : grid;
    grid-template-columns   : 1fr 1fr 1fr;
    height                  : 70px;
    align-items             : end;
    text-align              : center;
}

.header-rightSide{
    display                 : grid;
    grid-template-columns   : 1fr 1fr 1fr;
    height                  : 70px;
    align-items             : end;
    text-align              : center;
}

#structureFrame-header a{
    letter-spacing: 0.5px;
    font-weight   : 700;
    transition    : color 0.3s;
}

#structureFrame-header .miniHeader-dropdown a,
#structureFrame-header .miniHeader-dropdown a:visited{
    color      : rgba(255,255,255,0.75);/*var(--main-bg-color);*/
    font-weight: 900;
    /* transition : background-color 0.3s; */
}

#structureFrame-header a:hover{
    color: #66add3;
}

#structureFrame-header .miniHeader-dropdown a:hover{
    color           : rgba(255,255,255,0.85);/*var(--main-color);*/
    background-color: var(--main-bg-color);
}

#logo{
    padding-left  : 3vw;
    padding-right : 3vw;
    padding-top   : 20px;
    padding-bottom: 20px;
}

/* #logo img{
    transition: filter 0.3s;
} */

#logo img:hover{
    filter: invert(76%) sepia(9%) saturate(2931%) hue-rotate(171deg) brightness(86%) contrast(92%);
}

#logo img{
    filter: invert(33%) sepia(98%) saturate(390%) hue-rotate(157deg) brightness(103%) contrast(93%);
}

#miniHeader-logo,
.miniHeader-menu{
    padding: 25px 20px;
}

#miniHeader-logo img{
    filter: invert(33%) sepia(98%) saturate(390%) hue-rotate(157deg) brightness(103%) contrast(93%);
}

/* #miniHeader-logo img{
    transition: filter 0.3s;
} */

#miniHeader-logo img:hover{
    filter: invert(76%) sepia(9%) saturate(2931%) hue-rotate(171deg) brightness(86%) contrast(92%);
}

.miniHeader-menu{
    transition: color 0.3s;
}

.miniHeader-menu:hover{
    color: rgba(255,255,255,0.85);/*#66add3;*/
}

.header-menu{
    padding-left  : 3vw;
    padding-right : 3vw;
    padding-bottom: 25px;
    text-transform: uppercase;
    font-size     : 14px;
}

.miniHeader-link a{
    width         : 100%;
    padding       : 15px 0px;
    margin        : 5px 0px;
    text-transform: uppercase;
    font-size     : 14px;
}

.miniHeader-menu{
    color    : rgba(255,255,255,0.75);/*var(--main-color);*/
    cursor   : pointer;
    font-size: 25px;
}

#structureFrame-container{
    width           : 100%;
    margin-left     : auto;
    margin-right    : auto;
    /* min-height      : calc(100vh - 140px);  */
}

#structureFrame-footer{
    padding         : 20px;
    background-color: var(--main-color);
    color           : var(--main-bg-color);
    margin-top      : 50px;
    height          : 70px;
}

#structureFrame-footer a,
#structureFrame-footer a:visited{
    color : var(--main-bg-color);
}

#footer{
    display              : grid;
    grid-template-columns: 150px 1fr;
}

.footer-tagLine{
    text-align    : center;
    text-transform: uppercase;
    font-size     : 10px;
    font-weight   : 200;
    letter-spacing: 2px;
    margin-top    : 5px;
    color         : #ffffff;
}

.footer-credits{
    text-align: center;
    /* margin-top: 15px; */
}

#pageContent,
.centerContainer{
    /* min-height      : calc(100vh - 190px);  */
    box-sizing: border-box;
}

.centerContainer{
    padding-left: 20px;
    padding-right: 20px;
}

@media (min-width: 1280px){}

@media (min-width: 1024px) and (max-width: 1279px){}

@media (min-width: 768px) and (max-width: 1023px) {}

@media (max-width: 767px) {

    #header{
        display: none;
    }

    #miniHeader{
        display: grid;
    }
    
}











/* POP UP */

.fineatyPopUp {
    background-color: var(--secondary-bg-color);
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.32);
    border          : 1px solid var(--main-color);
}

.fineatyPopUpHeader{
    color: var(--main-bg-color);
    background-color: var(--main-color);
    padding         : 5px 0px;
    border-bottom   : 1px solid #227bab30;
}

.fineatyPopUpTitle{
    text-transform: uppercase;
    font-weight   : 900;
    font-size     : 12px;
}

.fineatyPopUpClose a{
    background-image    : url(../images/exit.png);
    background-repeat   : no-repeat;
    background-position : center;
    background-size     : 20px;
    filter              : invert(100%) sepia(100%) saturate(0%) hue-rotate(137deg) brightness(103%) contrast(101%);
    color               : rgba(0,0,0,0) !important;
}











/* HOME */

.Home h1{
    display: none;
}

.homeLogo-container{
    width       : 40vw;
    min-width   : 300px;
    margin-left : auto;
    margin-right: auto;
    margin-bottom: 50px;
}

.homeLogo-container img{
    /* filter: invert(92%) sepia(0%) saturate(368%) hue-rotate(155deg) brightness(95%) contrast(82%); */
    filter: invert(14%) sepia(54%) saturate(341%) hue-rotate(182deg) brightness(93%) contrast(91%);
    opacity: 0.5;
}

.tagLine{
    text-transform: uppercase;
    font-size     : 1.3vw;
    font-weight   : 200;
    letter-spacing: 0.5vw;
    margin-top    : 10px;
}

section{
    margin-top    : 40px;
    padding-top   : 30px;
    padding-bottom: 30px;
    transition    : background-color 0.3s ease-out, box-shadow 0.3s;
}

section.divAsLink h2{
    font-weight: 700;
    color      : var(--main-color);
}

section.divAsLink:hover{
    background-color: #ffffff55;
    box-shadow      : 0px 0px 6px rgba(0,0,0,0.16);
}

.divAsLink{
    position: relative;
    cursor  : pointer;
}

.divAsLink a.divLink{
    display: inline;
}

.divAsLink a.divLink span{
    position: absolute;
    top     : 0;
    left    : 0;
    height  : 100%;
    width   : 100%;
}

.scrollBannerContainer{
    width   : 100%;
    height  : 315px;
    overflow: hidden;
    display : block;
    position: relative;
}

.scrollBannerContainer-banner{
    position: absolute;
}

.scrollBannerContainer-item{
    display      : inline-block;
    margin-right : 20px;
    width        : 300px;
    height       : 300px;
    border-radius: var(--main-border-radius);
    overflow     : hidden;
    background-color: #ffffffaa;
}

.scrollBannerContainer-item.filmContainer{
    display     : inline-block;
    margin-right: 20px;
    width       : 228px;
    height      : 300px;
}

.scrollBannerContainerItem-border{
    box-shadow: 3px 3px 6px rgba(0,0,0,0.16);
}

.scrollBannerContainerItem-defaultCreator{
    font-family: var(--thumb-font-family-3);
    font-family: var(--main-font-family);
    font-size  : 24px;
    color      : var(--main-bg-color);
    font-weight: 900;
    font-style : italic;
}

.scrollBannerContainerItem-defaultEditor{
    font-family   : var(--main-font-family);
    font-size     : 24px;
    font-weight   : 900;
    text-transform: uppercase;
}

.section-shadow{
    filter: drop-shadow(3px 3px 6px rgba(0,0,0,0.32));
}

.section-border{
    background-color: var(--main-bg-color);
    clip-path       : polygon(0 0, 100% 0, 100% calc(100% - var(--section-padding)), 50% 100%, 0 calc(100% - var(--section-padding)));
    padding-bottom  : 1px;
}

.aboutSection{
    background-repeat   : no-repeat;
    background-position : center;
    background-size     : cover;
    clip-path           : polygon(0 0, 100% 0, 100% calc(100% - var(--section-padding)), 50% 100%, 0 calc(100% - var(--section-padding)));
    padding-bottom      : var(--section-padding);
}

.home-menu{
    aspect-ratio: 2 / 1;
    background-repeat  : no-repeat;
    background-position: center;
    background-size    : cover;
    /* background-color   : transparent; */
    box-shadow         : 3px 3px 6px rgba(0,0,0,0.16);
    position: relative;
}

.home-menu span{
    position: absolute;
    top: 20px;
    left: 20px;
    color: black;
    background-color: rgba(255,255,255,0.75);
    padding: 20px;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: bold;
}

@media (max-width: 800px) {

    .tagLine{
        font-size     : 10px;
        letter-spacing: 4px;
    }
}



/* .Recording .centerContainer,
.AboutUs .centerContainer,
.Editions .centerContainer,
.ContactPage .centerContainer,
.Label .centerContainer{
    padding-left: 20px;
    padding-right: 20px;
} */







/* PAGES */

.page-summary{
    font-weight : 400;
    width       : 100%;
    max-width   : 600px;
    margin-left : auto;
    margin-right: auto;
    text-align  : justify;
}

@media (max-width: 800px) {

    .page-summary{
        padding-left: 10px;
        padding-right: 10px;
        line-height: 1.4;
    }
}











/* ABOUT US */

.aboutUsAsset-container{
    text-align      : center;
    background-color: #f1f1f1;
    display: grid;
    grid-template-rows: auto 1fr;
}

.aboutUsAsset-textContainer{
    color  : #777777;
    padding: 30px 40px 30px;
    align-self: center;
}

.aboutUsAsset-title{
    padding-bottom: 20px;
    border-bottom : 1px solid #777777;
    font-weight   : 700;
    margin        : 30px auto 30px auto;
    max-width     : 200px;
}

.aboutUsAsset-text{
    font-weight: 500;
    color      : var(--main-color);
    font-size: 16px;
}

.worldMap{
    width       : 100%;
    max-width   : 800px;
    margin-left : auto;
    margin-right: auto;
    margin-top  : 30px;
}

.worldMap svg{
    margin-top: 30px;
}

.worldMap path{
    fill        : #eeeeee;
    stroke-width: 1px;
    stroke      : var(--main-bg-color);
}

.worldMap #AT,
.worldMap #BE,
.worldMap #CA,
.worldMap #CH,
.worldMap #DE,
.worldMap #DK,
.worldMap #EE,
.worldMap #FI,
.worldMap #F0,
.worldMap #FR,
.worldMap #GB,
.worldMap #GL,
.worldMap #IE,
.worldMap #IS,
.worldMap #IT,
.worldMap #LI,
.worldMap #LT,
.worldMap #LV,
.worldMap #NL,
.worldMap #NO,
.worldMap #PL,
.worldMap #SE,
.worldMap #US{
    fill: #227babcc;
}











/* CONTACT PAGE */

.centerContainer{
    text-align: center;
}

.contactForm{
    width       : 100%;
    max-width   : 600px;
    margin-left : auto;
    margin-right: auto;
}

::placeholder{
    color  : #227bab;
    opacity: 0.4;
}

.fineatyCaptchaHint{
    display: none;
}

.captchadiv{
    display              : grid;
    grid-template-columns: auto 1fr;
}

.fineatyCaptchaAnswer input{
    margin: 0px;
    height: 100%;
}

.submitdiv{
    margin-top: 15px;
}











/* ROASTER */

.roasterGrid{
    display              : grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap           : 10px;
    row-gap              : 10px;
}

.roaster-card{
    display           : grid;
    grid-template-rows: 350px 1fr;
    border-radius     : var(--main-border-radius);
    overflow          : hidden;
    box-shadow        : 3px 3px 6px rgba(0,0,0,0.16);
    background-color  : #ffffffaa;
}

.roasterCard-infos{
    padding           : 20px;
    display           : grid;
    grid-template-rows: 1fr auto;
}

.roasterCard-name{
    text-transform: uppercase;
    font-size     : 24px;
    font-weight   : 900;
    color         : var(--main-bg-color);
}

.roasterCard-style{
    margin-bottom : 10px;
    text-transform: uppercase;
    font-size     : 10px;
    font-weight   : 300;
}

.roasterCard-summary{
    text-align : justify;
    font-weight: 300;
    font-size : 11px;
}

.roasterCard-thumb{
    /* background-repeat  : no-repeat;
    background-position: center;
    background-size    : cover;
    background-color   : transparent; */
    box-shadow         : 3px 3px 6px rgba(0,0,0,0.16);
    height             : 30vw;
}

.roasterCard-links{
    display   : grid;
    margin-top: 20px;
    font-size : 24px;
}

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

    .roasterGrid{
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 701px) and (max-width: 900px){

    .roasterGrid{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {

    .roasterGrid{
        grid-template-columns: 1fr;
    }
}











/* CATALOG */

.card{
    background-repeat    : no-repeat;
    background-position  : center;
    background-size      : cover;
    background-color     : transparent;
    display              : grid;
    grid-template-columns: 1fr;
    grid-template-rows   : 1fr;
    align-items          : center;
    margin               : 0px;
    border-radius        : var(--main-border-radius);
    overflow             : hidden;
    /* border               : 1px solid var(--main-font-color); */
    box-shadow          : 3px 3px 6px rgba(0,0,0,0.16);
}

.cardFilm{
    height: calc(17.625vw - 15px);
}

.cardDisc{
    height: calc(12.5vw - 15px);
}

.cardLogo{
    background-size: 80%;
}

.card figcaption{
    height               : 100%;
    background-color     : #ffffffaa;
    opacity              : 0;
    display              : grid;
    grid-template-columns: 1fr;
    grid-template-rows   : 1fr;
    align-items          : center;
    transition           : opacity 0.3s;
}

.card:hover figcaption{
    opacity: 1;
}

.cardTitle{
    text-transform: uppercase;
    font-size     : 14px;
    font-weight   : 900;
    color         : var(--main-bg-color);
    padding       : 0px 15px;
}

.cardSubtitle{
    text-transform: uppercase;
    font-size     : 10px;
    color         : var(--main-bg-color);
    margin-top    : 5px;
    padding       : 0px 15px;
}

.catalogGrid{
    display              : grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap           : 80px;
    row-gap              : 20px;
}

/* .subCatalogGrid{
    display              : grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap           : 20px;
    row-gap              : 20px;
} */

.subDiscGrid,
.subFilmGrid{
    display              : grid;
    grid-template-columns: repeat(8, 1fr);
    column-gap           : 10px;
    row-gap              : 10px;
    padding              : 0px 10px;
    margin               : 0px -10px;
    padding-bottom       : 40px;
}

.subEditionGrid{
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap           : 10px;
    row-gap              : 10px;
    padding              : 0px 10px;
    margin               : 0px -10px;
    margin-bottom        : 20px;
    padding-bottom       : 40px;
    
}

.subPartnerGrid{
    display              : grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap           : 10px;
    row-gap              : 10px;
    padding              : 0px 10px;
    margin               : 0px -10px;
    margin-bottom        : 20px;
    padding-bottom       : 40px;
}

.subEditionGrid .card,
.subPartnerGrid .card{
    height: calc(16.66vw - 15px);
}

 @media (min-width: 1501px){

    .subDiscGrid,
    .subFilmGrid{
        grid-template-columns: repeat(8, 1fr);
    }

    .subEditionGrid{
        grid-template-columns: repeat(3, 1fr);
    }

    .subPartnerGrid{
        grid-template-columns: repeat(6, 1fr);
    }

    .subEditionGrid .card,
    .subPartnerGrid .card{
        height: calc(16.66vw - 15px);
    }
}

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

    .subDiscGrid,
    .subFilmGrid{
        grid-template-columns: repeat(6, 1fr);
    }

    .cardFilm{
        height: calc(23.5vw - 15px);
    }
    
    .cardDisc{
        height: calc(16.67vw - 15px);
    }

    .subEditionGrid{
        grid-template-columns: repeat(3, 1fr);
    }

    .subPartnerGrid{
        grid-template-columns: repeat(6, 1fr);
    }

    .subEditionGrid .card,
    .subPartnerGrid .card{
        height: calc(16.66vw - 15px);
    }
}

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

    .subDiscGrid,
    .subFilmGrid{
        grid-template-columns: repeat(5, 1fr);
    }

    .cardFilm{
        height: calc(28.2vw - 15px);
    }
    
    .cardDisc{
        height: calc(20vw - 15px);
    }

    .subEditionGrid{
        grid-template-columns: repeat(3, 1fr);
    }

    .subPartnerGrid{
        grid-template-columns: repeat(6, 1fr);
    }

    .subEditionGrid .card,
    .subPartnerGrid .card{
        height: calc(16.66vw - 15px);
    }
}

@media (min-width: 881px) and (max-width: 1100px){

    .subDiscGrid,
    .subFilmGrid{
        grid-template-columns: repeat(4, 1fr);
    }

    .cardFilm{
        height: calc(35.25vw - 15px);
    }
    
    .cardDisc{
        height: calc(25vw - 15px);
    }

    .subEditionGrid{
        grid-template-columns: repeat(2, 1fr);
    }

    .subPartnerGrid{
        grid-template-columns: repeat(4, 1fr);
    }

    .subEditionGrid .card,
    .subPartnerGrid .card{
        height: calc(25vw - 15px);
    }
}

@media (min-width: 551px) and (max-width: 880px) {

    .subDiscGrid,
    .subFilmGrid{
        grid-template-columns: repeat(3, 1fr);
    }

    .cardFilm{
        height: calc(47vw - 15px);
    }
    
    .cardDisc{
        height: calc(33.33vw - 15px);
    }

    .subEditionGrid{
        grid-template-columns: repeat(2, 1fr);
    }

    .subPartnerGrid{
        grid-template-columns: repeat(4, 1fr);
    }

    .subEditionGrid .card,
    .subPartnerGrid .card{
        height: calc(25vw - 15px);
    }
}

@media (max-width: 550px) {

    .catalogGrid{
        grid-template-columns: 1fr;
    }

    .subDiscGrid,
    .subFilmGrid{
        grid-template-columns: repeat(2, 1fr);
    }

    .cardFilm{
        height: calc(70.5vw - 15px);
    }
    
    .cardDisc{
        height: calc(50vw - 15px);
    }

    .subEditionGrid{
        grid-template-columns: repeat(2, 1fr);
    }

    .subPartnerGrid{
        grid-template-columns: repeat(2, 1fr);
    }

    .subEditionGrid .card,
    .subPartnerGrid .card{
        height: calc(50vw - 15px);
    }
}











/* PARTNERS */

.partnersGrid{
    display              : grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap           : 20px;
    row-gap              : 20px;
}

@media (min-width: 769px) and (max-width: 1000px) {

    .partnersGrid{
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 501px) and (max-width: 768px) {

    .partnersGrid{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {

    .partnersGrid{
        grid-template-columns: 1fr;
    }
}











/* GLOBAL */

.marginBottom15{
    margin-bottom: 15px;
}

.marginBottom20{
    margin-bottom: 20px;
}

.marginBottom30{
    margin-bottom: 30px;
}

.marginBottom50{
    margin-bottom: 50px;
}

.marginBottom70{
    margin-bottom: 70px;
}

.marginTop15{
    margin-top: 15px;
}

.marginTop20{
    margin-top: 20px;
}

.marginTop30{
    margin-top: 30px;
}

.marginTop50{
    margin-top: 50px;
}

.marginTop70{
    margin-top: 70px;
}

.marginAuto{
    margin-left : auto;
    margin-right: auto;
}

.verticalMargin15{
    margin: 15px 0px;
}




.noPadding{
    padding: 0px;
}

.noMargin{
    margin: 0px;
}

.align-right{
    text-align: right;
}

.align-center{
    text-align: center;
}

.align-left{
    text-align: left;
}




.gridGap10{
    grid-gap: 10px;
}

.gridGap20{
    grid-gap: 20px;
}

.gridNoGap{
    grid-gap: 0px;
}






.green, a.green:visited{
    color: var(--state-green);
}

.blue, a.blue:visited{
    color: var(--state-blue);
}

.red, a.red:visited{
    color: var(--state-red);
}

.yellow, a.yellow:visited{
    color: var(--state-yellow);
}

.purple, a.purple:visited{
    color: var(--state-purple);
}

.grey, a.grey:visited{
    color: var(--state-grey);
}

.orange, a.orange:visited{
    color: var(--state-orange);
}



.greenBackground{
    background-color: rgba(82, 192, 191, 1);
}

.blueBackground{
    background-color: rgba(61, 162, 230, 1);
}

.redBackground{
    background-color: rgba(252, 100, 132, 1);
}

.yellowBackground{
    background-color: rgba(254, 205, 102, 1);
}

.purpleBackground{
    background-color: rgba(151, 103, 248, 1);
}

.greyBackground{
    background-color: rgba(201, 203, 207, 1);
}

.orangeBackground{
    background-color: rgba(253, 159, 79, 1);
}



.greenBackgroundTransparency{
    background-color: rgba(82, 192, 191, var(--transparency));
    color: var(--state-green);
    font-family: var(--main-title-font);
}

.blueBackgroundTransparency{
    background-color: rgba(61, 162, 230, var(--transparency));
    color: var(--state-blue);
    font-family: var(--main-title-font);
}

.redBackgroundTransparency{
    background-color: rgba(252, 100, 132, var(--transparency));
    color: var(--state-red);
    font-family: var(--main-title-font);
}

.yellowBackgroundTransparency{
    background-color: rgba(254, 205, 102, var(--transparency));
    color: var(--state-yellow);
    font-family: var(--main-title-font);
}

.purpleBackgroundTransparency{
    background-color: rgba(151, 103, 248, var(--transparency));
    color: var(--state-purple);
    font-family: var(--main-title-font);
}

.greyBackgroundTransparency{
    background-color: rgba(201, 203, 207, var(--transparency));
    color: var(--state-grey);
    font-family: var(--main-title-font);
}

.orangeBackgroundTransparency{
    background-color: rgba(253, 159, 79, var(--transparency));
    color: var(--state-orange);
    font-family: var(--main-title-font);
}







.thColor{
    color: var(--main-th-color);
}


.bigIconButton{
    font-size: 30px;;
}

.forceShow{
    display: inherit !important;
}

/* .itemRating{
    background-image: url(../images/ratingStars.png);
}

.itemRatingMini{
    background-image: url(../images/ratingStarsMini.png);
} */



.showHideContainer{
    position: relative;
}

.showHideButton{
    position        : absolute;
    bottom          : -20px;
    right           : 10px;
    border          : none;
    background-color: var(--secondary-bg-color);
    width           : calc(100% - 20px);
    font-weight     : 900;
    opacity         : 0.9;
}

.showHideButton:hover{
    width: calc(100% - 20px);
    cursor: pointer;
    /* color: var(--main-font-color); */
}

.showHideButton.hideAll{
    display: none;
}



/* 
.conteneur {
  position: relative;
  background: #3498db;
  color: #fff;
  padding: 40px 20px 60px 20px;
}

.conteneur::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-top: 40px solid #3498db;
} */
.conteneur {
  width: 300px;
  height: 200px;
  background: #e67e22;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
}