@import "./loader.less";

@levels: -5,-4,-3,-2,-1,0,1,2,3,4,5;
@spaces: -5,-4,-3,-2,-1,0,1,2,3,4,5;
@globalScale: -5,-4,-3,-2,-1,0,1,2,3,4,5;

.widgetMenu{
    //top: 0 !important;
}

/* Colors */
@darkBlue: #2A273D;
@darkerBlue: #1F1D33;
@sky: #F3F2F4;
@blanket: #F9F9FA;
@goldOnLight: #C4984C;
@goldOnDark: #D0AC76;

@gap_S: 0.75rem;
@gap_M: 1rem;
@gap_L: 2rem;
@gap_XL: 4rem;

@box_S: 12rem;
@box_M: 16rem;
@box_L: 24rem;

@space_S: 4rem;
@space_M: 8rem;
@space_L: 12rem;

@flow_S: 1rem;
@flow_M: 2rem;
@flow_L: 4rem;

@wide_S: 50rem;
@wide_M: 70rem;
@wide_L: 80rem;
@wide_XL: 100rem;

.gap_S{ --gap: @gap_S; }
.gap_M{ --gap: @gap_M; }
.gap_L{ --gap: @gap_L; }
.gap_XL{ --gap: @gap_XL; }

.flow_S{ --flow: @flow_S; }
.flow_M{ --flow: @flow_M; }
.flow_L{ --flow: @flow_L; }

.space_0{ --space: 0; }
.space_S{ --space: @space_S; }
.space_M{ --space: @space_M; }
.space_L{ --space: @space_L; }

.box_S{ --box: @box_S; }
.box_M{ --box: @box_M; }
.box_L{ --box: @box_L; }

.wide_S{ --wide: @wide_S; }
.wide_M{ --wide: @wide_M; }
.wide_L{ --wide: @wide_L !important; }
.wide_XL{ --wide: @wide_XL !important; }


:root{
    
}


.e-card{
    background: @sky;
    padding: @gap_L;
    margin-top: @flow_M;
  }
  

html{

    .generateSpaces(14,17,360,2250,1.5,1.61,1vw);

    font-family: 'Nunito Sans', sans-serif;
    font-size: var(--s0);    

    

    --gap: @gap_M;
    --flow: @flow_M;
    --space: @space_M;
    --box: @box_M;
    --wide: @wide_M;
}

/*FLOW*/
.stack,.componentHtmlInlineBlock, .l-section > *, .l-section .componentContainer, .w0{
    > * + *{margin-top: @flow_S;}
}

table{
    
}

.e-btn{
    color: white;
    background: @darkBlue;
    border-radius: 999px;
    padding: 0.8em 2em;
    margin-top: @flow_S;
    display: inline-block;
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: 600;
}


.th3 .e-btn{
    color: white;
    background: rgba(209,174,118,0.25);
    border-radius: 999px;
    border: 0.15em solid #D1AE76;
    display: inline-block;
}


/*THEMES*/
.th2{
	background: #efefef;
}

.th3{
    background: @darkBlue;
    
    h1,h2,p{
        color: white;
    }

    .homepage &{
        h1 {font-size: calc( 1.1 * var(--s3)); line-height: 110%;}

        .l-fronterInner{
            p{
                font-size: var(--s1);
            }
        }
    }
    .homepage & h1 strong{
        color: @goldOnDark;
        
    }
    a{
        color: @goldOnDark;
    }
}