/*
    
## ## ## ## ##  ##              ## ## ## ## ##  ## ## ## ## ##  ## ## ## ## ##  ##          ##  ## ## ## ## ##  ## ## ## ## ##
##              ##              ##          ##  ##          ##  ##          ##  ## ##       ##  ##                    ##
##              ##              ##          ##  ##          ##  ##          ##  ##  ##      ##  ##                    ##
##    ## ## ##  ##              ##          ##  ## ## ## ##     ##          ##  ##    ##    ##  ## ## ## ## ##        ##
##          ##  ##              ##          ##  ##          ##  ##          ##  ##      ##  ##  ##                    ##
##          ##  ##              ##          ##  ##          ##  ##          ##  ##        ## #  ##                    ##
## ## ## ## ##  ## ## ## ## ##  ## ## ## ## ##  ## ## ## ## ##  ## ## ## ## ##  ##          ##  ## ## ## ## ##        ##

/**** TEXT & ICONS ****/

/* WHITE COLOR */
h1,
.prev, 
.next,
.teaser i,
button,
input[type=submit],
.dropdown .menuitem a {
    color: var(--whiteclr);
}

body,
#popup,
.bottommenu nav,
.bottommenu {
    background: var(--whiteclr);    
}

/* LIGHT WHITE COLOR */
.dropdown .menuitem a:hover{
    color: var(--lghtwhite);
}

/* MAIN COLOR */
h2,
h3,
h4,
#popup p,
li i,
p,
footer a {
    color: var(--mainclr);
} 

/* GREY COLOR */
.menuitem a{
    color: var(--lghtgreyclr);
}

/* LIGHTGREY COLOR */
.menuitem a:hover{
    color: var(--greyclr);
}

/* SECOND COLOR */
input,
.teaser,
textarea,
.topmenu,
#teaserbox .box,
footer {
    background: var(--secondclr);
}

/* ACCENT COLOR */
a,
.form h4,
#decline,
#popup h3,
#burgermenu,
footer a:hover {
    color: var(--accentclr);
}

button,
.teaser i,
input[type=submit] {
    background: var(--accentclr);
}

button:hover,
input[type=submit]:hover {
    background: var(--drkaccentclr);
}

#decline,
input:focus,
textarea:focus {
    outline: 1px solid var(--accentclr);
}

/**** TRANSITIONS ****/
nav,
#more,
.all i,
button,
.teaser i,
.dropdown,
.menuitem a,
.bottommenu nav,
#selection span,
input[type=submit] {
    transition: all .2s cubic-bezier(.28,1.03,.74,1);
    will-change: color;
}

#burgermenu {
    transition: all linear 200ms;
}

/**** TEXT DECORATION ****/
.menuitem a:hover {
    text-decoration: none;
}
#popup a{
    text-decoration: underline;
}

/**** COOKIE POPUP ****/
#popup {
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
}
#decline {
    background: transparent;
}

/**** OTHERS ****/
.alert i:nth-of-type(1) {
    color: green;
}
.dropdown{
    background: rgba(15,68,255,.4);
}

/**** FONTS ****/
@font-face {
    font-family: 'proxima-nova';
    src: url(../font/proximo-nova/proxima-nova-light.otf);
    font-weight: 300;
}
@font-face {
    font-family: 'proxima-nova';
    src: url(../font/proximo-nova/proxima-nova-regular.otf);
    font-weight: 400;
}
@font-face {
    font-family: 'proxima-nova';
    src: url(../font/proximo-nova/proxima-nova-semibold.otf);
    font-weight: 700;
}
* {
    font-family: 'proxima-nova';
}
body{
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.5;
}

/**** ROOT ****/
:root {
    --mainclr: #212529;
    --lghtgreyclr: #6c757dbf;
    --greyclr: #6c757d;
    --secondclr: #f8f9fa;
    --whiteclr: #FFFFFF;
    --lghtwhite: #e9ecef;
    --accentclr: #0f44ff; 
    --drkaccentclr: #0033e8;
}