/*
===========================================================
  Header 
===========================================================
*/
/* --------------- header (menu container) --------------- */
:root {
    --height-header-logos: 1.8em;
    --height-header-menu: 3.2em;
}
@media screen and (min-width: 768px) {
    :root {
        --height-header-logos: 1.6em;
    }
}
:root {
    --height-header: calc(var(--height-header-logos) + var(--height-header-menu));
}
  
/* whole container */
.it-header-cont {
    width: 100%;
    height: var(--height-header);
    background: var(--col-accent2-dd);
}
@media screen and (min-width: 768px) {
    .it-header-cont {
        border-bottom-right-radius: 15% 35%;      
    }
}

/* header with menu */
#it_header {
    z-index: 100;
    position: relative;

    background: var(--col-accent2-dd);
    background-image: -webkit-linear-gradient(to bottom, var(--col-accent2-ddd), var(--col-accent2-dd) 80%);
    background-image: -moz-linear-gradient(to bottom, var(--col-accent2-ddd), var(--col-accent2-dd) 80%);
    background-image: -o-linear-gradient(to bottom, var(--col-accent2-ddd), var(--col-accent2-dd) 80%);
    background-image: linear-gradient(to bottom, var(--col-accent2-ddd), var(--col-accent2-dd) 80%);

    display: grid;       
    grid-template-columns: 0 auto;
    grid-template-areas: "area1 area1" "area2 area3" "area4 area5";
}
@media screen and (min-width: 768px) {
    #it_header {
        /* stripe of 5px */
        height: calc(var(--height-header) - 5px);
        position: fixed;
        grid-template-columns: auto 0 auto 0;
        grid-template-areas: "area1 area1 area1 area1" "area2 area3 area4 area5";
        border-bottom-right-radius: 10vw 2em;
    }
}

#it_header_ac_logos {
    grid-area: area1;
    padding-left: 3.5vw;
}
#it_header_logo_cont {
    grid-area: area2;
    padding-left: 3.5vw;
}
#it_menu_bars {
    grid-area: area3;
}
#it_header_menu {
    grid-area: area4;
    padding-right: 3.5vw;
}
#it_header_menu_mobile {
    grid-area: area5;
}

/* header with AC logos */ 
#it_header_ac_logos {
    width: 100%;
    background: var(--col-accent2-light);
}
@media screen and (min-width: 768px) {
    #it_header_ac_logos {
        justify-content: flex-start; 
    }
}

#it_header_ac_logos > * {
    height: calc(var(--height-header-logos) - 2 * 0.1em);  
    padding: 0.1em 1em;
}

/* header reserved space */
#it_header_shadow {
    display: none;
}
@media screen and (min-width: 768px) {
    #it_header_shadow {
        display: block;
        background: none;
        z-index: -1;
    }
}

/* --------------- header stripe --------------- */
#it_header_stripe {
    width: 100%;
    height: 0;
    z-index: 99;
}
@media screen and (min-width: 768px) {
    #it_header_stripe {
        height: var(--height-header);
        position: fixed;
            
        background: -webkit-linear-gradient(to right, var(--col-accent2-dd) 0%, var(--col-accent2-light) 50%, var(--col-accent1) 100%);
        background: -moz-linear-gradient(to right, var(--col-accent2-dd) 0%, var(--col-accent2-light) 50%, var(--col-accent1) 100%);
        background: -o-linear-gradient(to right, var(--col-accent2-dd) 0%, var(--col-accent2-light) 50%, var(--col-accent1) 100%);
        background: linear-gradient(to right, var(--col-accent2-dd) 0%, var(--col-accent2-light) 50%, var(--col-accent1) 100%);
            
        border-bottom-right-radius: 10vw 1.6em;
    }
}

/* --------------- header logo --------------- */
:root {
    --height-logo: calc(0.7 * var(--height-header-menu));
}

#it_header_logo_cont {
    width: 100%;
    height: var(--height-header-menu);    
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

#it_header_logo {
    height: var(--height-logo);
}
#it_header_logo {
    -webkit-animation: animate_logo ease-in-out 60s infinite;
    animation: animate_logo ease-in-out 60s infinite;
}

@-webkit-keyframes animate_logo {
    0% {opacity: 1;}
    24% {opacity: 1;}  
    26% {opacity: 0;}
    28% {opacity: 1; }
    74% {-webkit-transform: scale(1);}  
    76% {-webkit-transform: scale(0.6);}
    78% {-webkit-transform: scale(1);}
    100% {-webkit-transform: scale(1);}
}
@keyframes animate_logo {
    0% {opacity: 1;}
    24% {opacity: 1;}  
    26% {opacity: 0;}
    28% {opacity: 1;}
    74% {transform: scale(1);}  
    76% {transform: scale(0.6);}
    78% {transform: scale(1);}
    100% {transform: scale(1);}
}


/* --------------- header menu - bars for mobile --------------- */
/* menu bars container - mobile */
#it_menu_bars {
    z-index: 100;
    height: var(--height-header-menu);
    width: var(--height-header-menu);
    position: fixed;
    right: 2em;
    top: var(--height-header-logos);
    border-radius: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--col-accent2-dd);
}
@media screen and (min-width: 768px) {
    #it_menu_bars {
        display: none;
    }
}

/* menu bars - mobile */
.it-menu-bar {
    width: 1.5em;
    height: 0.15em;
    margin: 0.2em 0;
    background-color: var(--col-accent1);
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

/* it-menu-bars-change in JS */
.it-menu-bars-change #it_menu_bar1 {
-webkit-transform: rotate(-45deg) translate(-0.4em, 0.4em);
        transform: rotate(-45deg) translate(-0.4em, 0.4em);
}

.it-menu-bars-change #it_menu_bar2 {opacity: 0}

.it-menu-bars-change #it_menu_bar3 {
-webkit-transform: rotate(-45deg) translate(-0.35em, -0.35em);
        transform: rotate(45deg) translate(-0.35em, -0.35em);
}


/* --------------- header menu - titles layout --------------- */
/* header titles - round for mobile */
.it-header-menu {
    visibility: hidden;
    position: fixed;
    width: 100%;

    top: 0;
    padding-top: var(--height-header-logos);
    padding-bottom: 1em;

    opacity: 0.98;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-color: var(--col-accent2-dd);
    border-bottom-left-radius: 3vw;
    border-bottom-right-radius: 3vw;

    -webkit-box-shadow: var(--shadow-card-lev1);
            box-shadow: var(--shadow-card-lev1);
}
#it_header_menu {
    display: none;
}
#it_header_menu_mobile {
    display: flex;
}

/* header titles - flat for desktop */
@media screen and (min-width: 768px) {
    .it-header-menu {
        visibility: visible;
        position: relative;

        padding-top: 0;
        opacity: 1;

        display: flex;
        flex-direction: row;
        justify-content: flex-end;

        background-color: unset;
        border-top: none;       
        border-radius: 0px;

    -webkit-box-shadow: none;
        -moz-box-shadow: none;
        -o-box-shadow: none;
            box-shadow: none;
    }
    #it_header_menu {
        display: flex;
    }
    #it_header_menu_mobile {
        display: none;
    }
}


/* --------------- header menu - titles entries --------------- */
/* menu titles */
.it-menu-entry {
    padding: 0.5em;
    width: 80vw;
}
.it-menu-entry:nth-child(1) {
    margin-top: 1.5em;
}
.it-menu-entry:nth-last-child(1) {
    margin-bottom: 0.5em;
}

.it-menu-entry h3 {
    color: var(--col-accent1-pale);
    font-weight: 500;
    font-size: 1em;
    letter-spacing: 0.1em;
}

@media screen and (min-width: 768px) {
    .it-menu-entry:nth-child(1) {
        margin-top: 0;
    }
    .it-menu-entry:nth-last-child(1) {
        margin-bottom: 0;
    }
    .it-menu-entry h3 {
        line-height: 1;
        letter-spacing: 0.12em;
    }
}

.it-menu-login {
    display: flex;
    flex-direction: row;
}
@media screen and (min-width: 768px) {
    .it-menu-login {
        width: auto;
    }
    .it-menu-login > * {
        width: auto!important;
    }
}


/* ------- order of items in menu ------- */
@media screen and (min-width: 768px) {
    #it_menu_entry_col {
        order: 1;
    }
    #it_menu_entry_app {
        order: 2;
    }
    #it_menu_entry_pricing {
        order: 3;
    }
    #it_menu_login, #it_menu_login_mobile {
        order: 4;
    }
    #it_menu_my_assets, #it_menu_my_assets_mobile {
        order: 5;
    }
}


/* layout expandable menu - mobile */
.menu-title-w-arrow {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center; 
}

.menu-title-my-assets {
    border-radius: 1em;
    border: 1.5px solid var(--col-accent1);
    font-size: 1.1em;
    line-height: 1; /* for the border */
    padding: 0.3em 0.6em;
}

.menu-arrow {
    margin: 0 0 0 0.5em;
}

.it-icon-menu-arrow {
    width: 2.2em;
    height: 2.2em;
    margin: 0.3em;
    margin-bottom: 0.5em;
}

/* toggling between */
.menu-arrow-exp {
    display: none;
}

.toggle-show-menu-arrow {
    display: grid;
    width: 80vw;
    grid-template-columns: repeat(3, 33.3%);
    margin-top: 0.5em;
}

.menu-arrow-exp-entry {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1em;
    outline: solid 2px var(--col-accent1);
    outline-offset: -0.5em;
    border-radius: 1em;
}

.menu-arrow-exp h5 {
    color: white;
    font-size: 0.85em;
    line-height: 1.4;
    text-align: center;
}

@media screen and (min-width: 768px) {
    .it-menu-entry {
        border: none;    
        padding: 0 2vw;
        width: auto;
    }

    .menu-arrow {
        display: none;
    }
    .menu-arrow-exp {
        display: none;
    }
    /* only for similar tools on desktop */ 
    .toggle-show-menu-arrow {
        display: flex;
        width: 100%;
    }
    .menu-arrow-exp-entry {
        width: 9em;
        height: 9em;
    }
    .menu-arrow-exp-entry:hover {
        background-color: var(--col-accent1-ll);
    }

    .menu-title-my-assets {
        font-size: calc(0.3 * var(--height-header-menu));
        line-height: 1;
    }

    .it-menu-entry h3 {
        font-size: calc(0.3 * var(--height-header-menu));
    }

    .it-menu-entry:nth-child(3) {
        border-right: 0.08em solid var(--col-accent1-pale);
    }
}


/* --------------- header menu - titles expansions - desktop only --------------- */
.it-header-menu-exp {
    display: none;
    height: 0px;
}

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

    :root {
        --height-head-menu-exp-title: 3em;
    }
    @media screen and (orientation: portrait) {
        :root {
        --height-head-menu-exp-title: 4em;
        }
    }
    :root {
        --dist-head-menu-exp-title: calc(var(--height-header) + 0.2em + 0.5em + var(--height-head-menu-exp-title));
    }

    .it-header-menu-exp {
        height: auto!important;
        width: 100%;
        padding: calc(var(--height-header) + 0.2em) 2vw 1vh 2vw;

        z-index: 97;
        position: fixed;
        display: block;
        top: -100vh;

        background: var(--col-accent2-dd);
        background: -webkit-linear-gradient(to bottom, var(--col-accent1-pale) var(--dist-head-menu-exp-title), var(--col-accent2-dd) var(--dist-head-menu-exp-title), var(--col-accent2-dd) 120%);
        background: -moz-linear-gradient(to bottom, var(--col-accent1-pale) var(--dist-head-menu-exp-title), var(--col-accent2-dd) var(--dist-head-menu-exp-title), var(--col-accent2-dd) 120%);
        background: -o-linear-gradient(to bottom, var(--col-accent1-pale) var(--dist-head-menu-exp-title), var(--col-accent2-dd) var(--dist-head-menu-exp-title), var(--col-accent2-dd) 120%);
        background: linear-gradient(to bottom, var(--col-accent1-pale) var(--dist-head-menu-exp-title), var(--col-accent2-dd) var(--dist-head-menu-exp-title), var(--col-accent2-ddd) 120%);

        opacity: 0.98;
    }

    .it-header-menu-exp-grid {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
    }

    .it-header-menu-exp-entry {
        width: auto;
        height: auto;
        padding: 0.5em 3vw;
        display: flex;
        flex-direction: column;
    }

    .it-header-menu-exp-entry h3 {
        width: 25vw;
        max-width: 15em;
        height: var(--height-head-menu-exp-title);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: auto;

        color: var(--col-text);
        padding: 0em 2em;
        text-align: left;
    }

    .it-header-menu-exp-entry h5 {
        width: 25vw;
        max-width: 15em;
        height: auto;
        margin: 1em auto;

        border: 2px solid transparent;

        color: white;
        border-radius: 10px;
        opacity: 0.8;
        text-align: left;
    }

    .it-header-menu-exp-entry a:hover h5 {
        border: 2px solid var(--col-accent1-pale);
        opacity: 1;
    }

    .it-header-menu-exp-entry-feat {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .it-icon-menu {
        width: 1.2em;
        height: 1.2em;
        margin: 0.5em;
        margin-right: 1em;
    }

    .it-icon-menu-ani {
        -webkit-animation: ani_icon_ani 10s ease-in-out infinite;
        animation: ani_icon_ani 10s ease-in-out infinite;
    }
    @-webkit-keyframes ani_icon_ani {
        25% { -webkit-transform: rotate(0deg) scale(1, 1); }
        30% { -webkit-transform: rotate(45deg) scale(1.5, 1.5); }
        38% { -webkit-transform: rotate(0deg) scale(1, 1); }
    }
    @keyframes ani_icon_ani {
        25% { transform: rotate(0deg) scale(1, 1); }
        30% { transform: rotate(45deg) scale(1.5, 1.5); }
        38% { transform: rotate(0deg) scale(1, 1); }
    }
}

/* ----------- user details menu ----------- */
#exp_menu_user_details {
    display: none;
}
@media all and (min-width: 768px) {
    #exp_menu_user_details {
        display: block;
        position: fixed;
        right: -100vw;
    }
}

/* ---------- other ----------*/
.img-icon-new {
    display: inline-block;
    margin-left: 0.5em;
    vertical-align: super;
}
.img-icon-new p {
    padding: 0.1em;
    font-size: 0.7em;
    line-height: 1.3;
    letter-spacing: 1.5;
    color: yellow;
    border: 1px solid yellow;
    border-radius: 0.3em;
}


/*
=======================================================
Sidebar 
=======================================================
*/

/* --------------- parameters used by other files ------------------ */
:root {
    --height-sidebar-perm: 35px;
}
@media all and (min-width: 768px) {
    :root {
        --height-sidebar-perm: 0px;
        --width-sidebar-perm-ext: 50px;
    }
}


/* --------------- sidebar at top for mobile --------------- */
/* sidebar - added by js */
.it-sticky-header {
    position: fixed!important;
    top: 0px;
    width: 100%;
    border-top: 1px solid var(--col-accent2-dd);
}


/*
=======================================================
Footer 
=======================================================
*/
:root {
    /* footer */
    --footer-grid-col: 50% 50%;
    --footer-grid-row: repeat(3, auto);  
    --footer-grid-areas: 'it_subfooter_2 it_subfooter_2' 'it_subfooter_1 it_subfooter_3' 'it_subfooter_4 it_subfooter_4';
    --width-footer-form: 80vw;
    --width-terms-form: 100%;
}

/* tablet and above */
@media all and (min-width: 768px) {
    :root {
        /* footer */
        --footer-grid-col: 25% 50% 25%;
        --footer-grid-row: repeat(2, auto);
        --footer-grid-areas: 'it_subfooter_1 it_subfooter_2 it_subfooter_3' 'it_subfooter_4 it_subfooter_4 it_subfooter_4';
        --width-footer-form: 80%;
        --width-terms-form: 70%;
    }
}
@media all and (min-width: 1200px) {
    :root {
        /* footer */
        --footer-grid-col: 20% 60% 20%;
        --footer-grid-row: repeat(2, auto);
        --footer-grid-areas: 'it_subfooter_1 it_subfooter_2 it_subfooter_3' 'it_subfooter_4 it_subfooter_4 it_subfooter_4';
        --width-footer-form: 60%;
        --width-terms-form: 60%;
    }
}


/* ---------------- footer - container ---------------- */
/* whole footer */
.it-footer {
    width: 100%;
    height: auto;
    z-index: 90;
    position: relative;
    display: grid;
    grid-template-columns: var(--footer-grid-col);
    grid-template-rows: var(--footer-grid-row);
    grid-template-areas: var(--footer-grid-areas);
    background: var(--col-accent2-dd);
    background-image: -webkit-linear-gradient(to top, var(--col-accent2-ddd), var(--col-accent2-dd));
    background-image: -moz-linear-gradient(to top, var(--col-accent2-ddd), var(--col-accent2-dd));
    background-image: -o-linear-gradient(to top, var(--col-accent2-ddd), var(--col-accent2-dd));
    background-image: linear-gradient(to top, var(--col-accent2-ddd), var(--col-accent2-dd));
    text-align: center;
}
#it_subfooter_1 {
    grid-area: it_subfooter_1;
}
#it_subfooter_2 {
    grid-area: it_subfooter_2;
}
#it_subfooter_3 {
    grid-area: it_subfooter_3;
}
#it_subfooter_4 {
    grid-area: it_subfooter_4;
}


/* ---------------- footer - left and right menu ---------------- */
.it-subfooter {
    padding: 2vh 10vw;
}

.it-leftfooter, .it-rightfooter {
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
}

.it-rightfooter {
    justify-content: flex-end;
    text-align: right;
}

@media screen and (min-width: 768px) {
    .it-subfooter {
        padding: 2vh 3vw;
    }

    .it-leftfooter, .it-rightfooter {
        padding-top: 3em;
    }
}

.it-leftfooter h6, .it-rightfooter h6 {
    text-transform: uppercase;
    line-height: 2;
    padding-top: 0;
    color: white;
}


/* ---------------- footer - input menu ---------------- */
/* form title */
#it_footer_form_title, #it_terms_form_title {
    margin: 1em auto;
    text-align: center;
}
#it_footer_form_title {
    color: white;
}

/* input section */
#it_form_footer_contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.it-footer-input, .it-terms-input {
    width: var(--width-footer-form);
    height: auto;
    margin: 1em auto;
    border: none;
    border-bottom: solid 1px var(--col-accent2-dark);
}
.it-footer-input {
    background: transparent;
    border-bottom: solid 1px white;    
}
.it-terms-input {
    width: var(--width-terms-form);
}
.it-footer-input:focus, .it-terms-input:focus {
    outline: none;
}

/* manual input - p */
.it-footer-input, .it-terms-input {
    font: var(--font-weight-text) var(--font-size-p-small) var(--font-fam);
    letter-spacing: var(--font-chspace-p);
}
.it-footer-input {
    color: white;
}

/* registration form */
.it-footer-input::-webkit-input-placeholder, .it-terms-input::-webkit-input-placeholder {
    font: var(--font-weight-text) var(--font-size-p-small) var(--font-fam);
    color: var(--col-text);
    opacity: 0.7;
}
.it-footer-input::-webkit-input-placeholder {
    color: white;
}
.it-footer-input::-moz-placeholder, .it-terms-input::-moz-placeholder {
    font: var(--font-weight-text) var(--font-size-p-small) var(--font-fam);
    color: var(--col-text);
    opacity: 0.7;
}
.it-footer-input::-moz-placeholder {
    color: white;
}
.it-footer-input::placeholder, .it-terms-input::placeholder {
    font: var(--font-weight-text) var(--font-size-p-small) var(--font-fam);
    color: var(--col-text);
    opacity: 0.7;
}
.it-footer-input::placeholder {
    color: white;
}

/* footer - submit button */
#it_footer_button {
    margin: 1em 0 0.5em 0;
}


/* footer - company details */
#it_subfooter_4 {
    padding: 1em;
}

#it_subfooter_4 h6 {
    color: white;
    text-transform: none;
    opacity: 0.6;
}


/*
=======================================================
Scrollbar 
=======================================================
*/

/* -------------- scrollbar - only supported by Webkit (Chrome & Opera) -------------- */
@media screen and (min-width: 768px) {
    ::-webkit-scrollbar {
        width: 10px;
    }
    ::-webkit-scrollbar-track {
    -webkit-box-shadow: var(--shadow-card-inset-lev1);
            box-shadow: var(--shadow-card-inset-lev1);
    }
    ::-webkit-scrollbar-thumb {
        background: var(--col-accent2-dd); 
        border-radius: 7px;
    }
}