/* 
============================================
    0. Layout - Main Containers 
============================================
*/
/* ---------------- main container 0 ---------------- */
:root {
    --padd-stand: 0.5em;

    --height-min-page: auto;
    --grid-cont-0: auto auto auto;
    --width-max-page: 1800px; 

    --padd-vert-cont0: 2vh;
    --padd-hor-cont0: 3vw;
    --padd-cont-0: var(--padd-vert-cont0) var(--padd-hor-cont0) 4vh var(--padd-hor-cont0);

    --height-page: auto;
}
@media all and (min-width: 768px) {
    :root {
        --height-title-cont0: 3em;

        --height-min-page: calc(100vh - var(--height-header));
        --grid-cont-0: 0 var(--height-title-cont0) auto;
        --padd-cont-0: var(--padd-vert-cont0) var(--padd-hor-cont0);

        --height-page: calc(0.97 * (100vh - var(--height-header) - var(--height-title-cont0) - var(--padd-vert-cont0)));
        --height-page: min(calc(0.97 * (100vh - var(--height-header) - var(--height-title-cont0) - var(--padd-vert-cont0))), 50em);
    }
    @media all and (orientation: portrait) {
        :root {
            --height-title-cont0: 4.5em;
            --height-page: 60em;
        }
    }
}

@media all and (min-width: 768px) {
    .it-body-cont-scrollable {
        height: var(--height-min-page);
        overflow-y: scroll; 
        overflow-x: hidden;
    }
}

.it-page-cont-0 {
    height: auto;
    width: 100%;
    /*min-height: var(--height-min-page);*/
    max-width: var(--width-max-page);
    margin: auto;
    padding: var(--padd-cont-0);

    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: var(--grid-cont-0);
    grid-template-areas: 'it-page-title' 'it-page-search' 'it-page-overview';
}

.it-page-cont-0 > * {
    width: 100%;
}

.it-page-title {
    grid-area: it-page-title;    
}
.it-page-search {
    grid-area: it-page-search;
}
.it-page-overview {
    grid-area: it-page-overview;
    overflow: hidden;
}

/* 
============================================
    0.1. Main Container - Title
============================================
*/
/* ---------------- main container - title ---------------- */
/* title class mobile & desktop */
.it-title-desc {
    display: flex;
    margin: auto;
    padding: 1vh 3vw 0.5vh 3vw;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.it-title-desc h1 {
    display: inline-block;
}
@media all and (min-width: 768px) {
    .it-title-desc {
        padding: 0;
    }
}

/* title - mobile */
.it-title-block {
    display: flex;
}
@media all and (min-width: 768px) {
    .it-title-block {
        display: none;
    }
}
/* title - desktop */
.it-title-inline {
    display: none;
}
@media all and (min-width: 768px) {
    .it-title-inline {
        display: inline-block;
    }
}

/* 
============================================
    0.2. Main Container - Searchbar
============================================
*/
/* -------------- search box (main container) -------------- */
:root {
    --width-searchb-whole: 15em;
    --height-searchb: 2.3em;
}
@media all and (min-width: 768px) {
    :root {
        --height-searchb: 1.9em;
    }
}

.it-search-box {
    z-index: 4;
    position: relative;
    display: inline-block;
    height: var(--height-searchb);
    width: var(--width-searchb-whole);    
    
    border-radius: var(--height-searchb);
    border: none;
    box-sizing: content-box;
    background: var(--col-body-bg2);
    border: 1px solid var(--col-accent2-ddd);

    margin-right: auto;
    margin-left: auto;
}
@media all and (min-width: 768px) {
    .it-search-box {
        margin-left: 0;

        -webkit-animation: searchbox-animate 0.3s ease-in-out;
        animation: searchbox-animate 0.3s ease-in-out;
    }
}
@-webkit-keyframes searchbox-animate {
    0% { width: var(--height-searchb) }
    50% { width: var(--height-searchb) }
    100% { width: var(--width-searchb-whole) }
}
@keyframes searchbox-animate {
    0% { width: var(--height-searchb) }
    50% { width: var(--height-searchb) }
    100% { width: var(--width-searchb-whole) }
}

/* -------------- search input -------------- */
.it-search-input {
    height: var(--height-searchb);
    width: calc(var(--width-searchb-whole) - 1.1 * var(--height-searchb));
    position: absolute;

    border: none;
    background: none;
    outline: none;
    padding: 0;
    padding-left: var(--padd-stand);

    font: var(--font-weight-text) var(--font-size-p) var(--font-fam);
    letter-spacing: var(--font-chspace-p);
    color: var(--col-text);
}
@media all and (min-width: 768px) {
    .it-search-input {    
        -webkit-animation: searchbox-input-animate 0.5s ease-in-out;
        animation: searchbox-input-animate 0.5s ease-in-out;
    }
}
@-webkit-keyframes searchbox-input-animate {
    0% { width: 0 }
    50% { width: 0 }
    100% { width: var(--width-searchb-whole) }
}
@keyframes searchbox-input-animate {
    0% { width: 0 }
    50% { width: 0 }
    100% { width: var(--width-searchb-whole) }
}

.it-search-box ::-moz-placeholder {
    color: var(--col-accent2-dark);
    font-weight: 600;
}
.it-search-box ::-webkit-input-placeholder {
    color: var(--col-accent2-dark);
    font-weight: 600;
}
.it-search-box ::placeholder {
    color: var(--col-accent2-dark);
    font-weight: 700;
    color: var(--grey-dark);
}

/* -------------- search button -------------- */
.it-search-button {
    z-index: 4;
    
    position: absolute;
    bottom: 0;
    right: -2px;

    width: var(--height-searchb);
    height: var(--height-searchb);

    border-radius: 50%;
}
@media all and (min-width: 768px) {
    .it-search-button {
        cursor: pointer;

        -webkit-animation: searchbox-button-animate 0.5s ease-in-out 2s;
        animation: searchbox-button-animate 0.5s ease-in-out 2s;
    }

    .it-search-box:hover .it-search-button {
        z-index: 4;
        -webkit-transform: scale(1.15);
                transform: scale(1.15);
    }
}
@-webkit-keyframes searchbox-button-animate {
    0% { -webkit-transform: scale(1) }
    30% { -webkit-transform: scale(1.2) }
    100% { -webkit-transform: scale(1) }
}
@keyframes searchbox-button-animate {
    0% { transform: scale(1) }
    30% { transform: scale(1.2) }
    100% { transform: scale(1) }
}

/* -------------- color picker and cover -------------- */
.it-color-picker, .it-color-picker-cover {
    z-index: 2;
    border-radius: 50%;
    width: var(--height-searchb);
    height: var(--height-searchb);    
    top: 0; 
    left: -2px;
    opacity: 1;
    position: absolute;
}
.it-color-picker-cover {
    z-index: 1;
}
#it_my_col_picker {
    opacity: 0;
}

input[type="color"] {
    -webkit-appearance: none;
       -moz-appearance: none;
        -ms-appearance: none;
         -o-appearance: none;
            appearance: none;

    border: none;
    padding: 0px;
    width: var(--height-searchb);
    height: var(--height-searchb);
    cursor: pointer;
}

/* 
============================================
    0.3. Main Container - Page View
============================================
*/
.it-overview-cont {
    position: relative;
    height: auto;
    width: 100%;
    margin: auto;
    padding-bottom: 1px;
    background: transparent;
    
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.85);  

    -webkit-box-shadow: var(--shadow-card-lev2);
            box-shadow: var(--shadow-card-lev2);  
}

@media all and (min-width: 768px) {
    .it-overview-cont {
        padding: calc(2 * var(--padd-stand));
    }
}

/* 
==========================================================
    0.4. Main Container - Description (badges at the top)
==========================================================
*/
/* -------------- description container -------------- */
:root {
    --height-min-page-cont-desc: var(--height-min-page);
}
@media all and (min-width: 768px) {
    :root {
        --height-min-page-cont-desc: var(--height-min-page);
    }
    @media all and (orientation: portrait) {
        :root {
            --height-min-page-cont-desc: auto;
        }    
    }
}

.it-page-cont-desc {
    height: auto;
    min-height: var(--height-min-page-cont-desc);
    width: 100%;
    max-width: var(--width-max-page);
    margin: auto;
    padding: var(--padd-cont-0);
    overflow: hidden;
    background: var(--col-accent1-pale);

    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto auto;

 -webkit-box-shadow: var(--shadow-card-lev1);
         box-shadow: var(--shadow-card-lev1);
}

.it-page-cont-desc-2 {
    height: auto;
    min-height: 50vh;
}

/* -------------- description - menu -------------- */
:root {
    --marg-desc-menu-entry: 0.5em;
}
@media all and (min-width: 768px) {
    :root {
        --marg-desc-menu-entry: auto 0.5em;
    }
}

.it-desc-menu-entry {
    width: auto;
    min-width: 8em;
    height: auto;
    margin: var(--marg-desc-menu-entry);
    margin-top: 1.5em;
    padding: 0.1em 0.5em;
    justify-content: center;
    align-items: center;

    cursor: pointer;

    background: var(--col-hightlight-outset);

    /*border-radius: var(--radius-card);*/
    border-radius: 1em;

    -webkit-transition: .5s;
            transition: .5s;
}
.it-desc-menu-entry-active {
    background: var(--col-hightlight-inset)!important;
 -webkit-box-shadow: var(--shadow-card-inset-lev2)!important;
         box-shadow: var(--shadow-card-inset-lev2)!important;
}

.it-desc-menu-entry-secondary {
    background: rgba(210, 210, 210, 0.7);
}

.it-desc-menu-entry > * {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: auto;
    padding: 0.2em;
}

/* -------------- description layout -------------- */
:root {
    --desc-num-col: 1;
    --padd-desc-col: 2em;
}
@media all and (min-width: 768px) {
    :root {
        --desc-num-col: 1;
        --padd-desc-col: 2em 15vw;
    }
}

.it-desc-cont-columnista {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}

.it-desc-columnista {
    width: 100%;
    height: auto;
    display: block;
    margin: 0.5em auto;

    background: var(--col-body-bg2);
    border-radius: var(--radius-card);

    column-count: var(--desc-num-col);
    column-gap: 3vw;

    padding: var(--padd-desc-col);
    text-align: justify;
}

.it-desc-columnista section {
    break-inside: avoid;
}

/* -------------- description slide in and out -------------- */
.it-desc-columnista-in {
    -webkit-animation: ani-columnista-in 0.3s;
    animation: ani-columnista-in 0.3s;
}

.it-desc-columnista-out {
    -webkit-animation: ani-columnista-out 0.4s;
    animation: ani-columnista-out 0.4s;
}

@-webkit-keyframes ani-columnista-in {
    0% {-webkit-transform: translateX(-150%)}
    100% {-webkit-transform: translateX(0%)}
}
@-webkit-keyframes ani-columnista-out {
    0% {-webkit-transform: translateX(0%)}
    100% {-webkit-transform: translateX(-150%)}
}
@-webkit-keyframes ani-columnista-in {
    0% {transform: translateX(-150%)}
    100% {transform: translateX(0%)}
}
@-webkit-keyframes ani-columnista-out {
    0% {transform: translateX(0%)}
    100% {transform: translateX(-150%)}
}

@keyframes ani-columnista-in {
    0% {-webkit-transform: translateX(-150%)}
    100% {-webkit-transform: translateX(0%)}
}
@keyframes ani-columnista-out {
    0% {-webkit-transform: translateX(0%)}
    100% {-webkit-transform: translateX(-150%)}
}
@keyframes ani-columnista-in {
    0% {transform: translateX(-150%)}
    100% {transform: translateX(0%)}
}
@keyframes ani-columnista-out {
    0% {transform: translateX(0%)}
    100% {transform: translateX(-150%)}
}

/* -------------- description text -------------- */
.it-desc-columnista h2 {
    column-span: all;
    margin-bottom: 1em;
    text-align: center;
}

.it-desc-text-title {
    margin: 0.5em 0;
    font-weight: 600;
    text-align: center;
}

.it-desc-text-list {
    margin-left: 1em;
    padding-left: 2vw;
    list-style-type: disc;
    page-break-inside:avoid;
}

.it-desc-text-img-grid {
    width: 100%;
    height: auto;
    max-width: 80vw;
    margin: var(--padd-stand) auto;
    padding: var(--padd-stand);
    page-break-inside: avoid;
}
@media all and (min-width: 768px) {
    .it-desc-text-img-grid {
        max-width: 40vw;
    }

    @media all and (orientation: portrait) {
        .it-desc-text-img-grid {
            flex-direction: column;
        }
    }
}

.it-desc-text-img-1, .it-desc-text-img-2, .it-desc-text-img-3 {
    max-width: 100%;
    max-height: 35vh;
    padding: var(--padd-stand);
    object-fit: contain;

    filter: drop-shadow(0px 0px 2px var(--grey))
            drop-shadow(2px 2px 1px var(--grey));
}
.it-desc-text-img-3 {
    max-height: 20vh;
}

@media all and (min-width: 768px) {
    .it-desc-text-img-1 {
        max-width: 100%;
    }
}
@media all and (min-width: 768px) {
    .it-desc-text-img-2 {
        max-width: 50%;
    }
    .it-desc-text-img-3 {
        max-width: 33%;
        max-height: 40vh;
    }

    @media all and (orientation: portrait) {
        .it-desc-text-img-2 {
            max-width: 80%;
        }
        .it-desc-text-img-3 {
            max-width: 80%;
            max-height: 15vh;
        }
    }
}

/* 
========================================================================
    1.0. Landing Page - ArtyClick Colors
========================================================================
*/
/* -------------- whole page -------------- */
.it-main-page-cont {
    height: auto;
    width: 100%;
    min-height: calc(100vh - var(--height-header));
    max-width: var(--width-max-page);
    margin: auto;
    background: transparent;
    overflow-x: hidden;
}   
.it-main-page-cont > * {
    padding: var(--padd-stand);
}

/* -------------- container -------------- */
.it-main-page-feature-cont {
    z-index: 1;
    margin: 0!important;
    width: 100%!important;
}

/* 
========================================================================
    1.1. Layout - Slides at the Bottom (About, How, Guide etc)
========================================================================
*/
/* -------------- card - text -------------- */
.it-desc-text-list {
    padding: 0.5em 0;
    text-align: left;
}

.it-feat-icon {
    margin: 0.5em;
    height: 2em;
    width: 2em;
    display: none;
}
@media all and (min-width: 768px) {
    .it-feat-icon {
        display: flex;
    }
}

/* -------------- card - example container - dimensions -------------- */
:root {
    --width-big-card: 85vw;
    --width-big-card-max: 50vh;
    --height-big-card: calc(1.1 * var(--width-big-card));
    --height-big-card-max: 55vh;
}
@media all and (min-width: 768px) {
    :root {
        --width-big-card: 40vw;
        --width-big-card-max: 60vh;
        --height-big-card: var(--width-big-card);
        --height-big-card-max: 60vh;
    }

    @media all and (orientation: portrait) {
        :root {
            --width-big-card: 55vw;
            --width-big-card-max: 30vh;
            --height-big-card: var(--width-big-card);
            --height-big-card-max: 30vh;
        }
    }
}

.it-feat-card {
    position: relative;
    display: flex;
    flex-direction: row;
    background: var(--col-body-bg2);

    height: var(--height-big-card);
    max-height: var(--height-big-card-max);
    
    width: var(--width-big-card);
    max-width: var(--width-big-card-max);
    
    overflow: hidden;
    margin: auto;
}

/* -------------- card - examples (3) container -------------- */
.it-card-example-cont {
    display: flex;
    position: absolute;
}
@media all and (min-width: 768px) {
    .it-card-example-cont {
        /* slideshow */
        -webkit-animation: mb-move 15s infinite;
        animation: mb-move 15s infinite;
    }
}
@-webkit-keyframes mb-move {
    0% {-webkit-transform: translateX(0)}
    10.7% {-webkit-transform: translateX(0)}
    14.3% {-webkit-transform: translateX(-100%)}
    35.7% {-webkit-transform: translateX(-100%)}
    39.3% {-webkit-transform: translateX(-200%)}
    60.7% {-webkit-transform: translateX(-200%)}
    64.3% {-webkit-transform: translateX(-100%)}
    85.7% {-webkit-transform: translateX(-100%)}
    89.3% {-webkit-transform: translateX(0%)}
    100% {-webkit-transform: translateX(0%)}
}
@keyframes mb-move {
    0% {transform: translateX(0)}
    10.7% {transform: translateX(0)}
    14.3% {transform: translateX(-100%)}
    35.7% {transform: translateX(-100%)}
    39.3% {transform: translateX(-200%)}
    60.7% {transform: translateX(-200%)}
    64.3% {transform: translateX(-100%)}
    85.7% {transform: translateX(-100%)}
    89.3% {transform: translateX(0%)}
    100% {transform: translateX(0%)}
}

.it-card-example {
    width: 95%;
    height: 95%;
    position: absolute;
    object-fit: contain;
    margin: auto;
    border: 1px solid red;
}

#it_card_example_1 {
    top: 2.5%;
    left: 2.5%;
}
#it_card_example_2 {
    top: 2.5%;
    left: 102.5%;
}
#it_card_example_3 {
    top: 2.5%;
    left: 202.5%;
}

/* 
============================================
    9.0. Elements - Cards 
============================================
*/
/* ---------------- Card - rectangle with shadow ---------------- */
:root {
    --radius-card: 8px;
    --shadow-card-lev1: 1px 1px 1px rgba(0,0,0,0.05), 2px 2px 2px rgba(0,0,0,0.1),
                        -1px -1px 1px rgba(255,255,255,0.8), 
                        0px 0px 1px rgba(0,0,0,0.05), 0px 0px 2px rgba(0,0,0,0.15);
    --shadow-card-lev2: 2px 2px 2px rgba(0,0,0,0.05), 3px 3px 3px rgba(0,0,0,0.1),
                        -1px -1px 1px rgba(255,255,255,0.8), 
                        0px 0px 2px rgba(0,0,0,0.05), 0px 0px 3px rgba(0,0,0,0.15);
    --shadow-card-inset-lev1: inset 2px 2px 1px rgba(0,0,0,0.4), inset -1px -1px 1px rgba(255,255,255,0.4), 
                        inset -2px -2px 1px rgba(255,255,255,0.2);
    --shadow-card-inset-lev2: inset 3px 3px 1px rgba(0,0,0,0.4), inset -1px -1px 1px rgba(255,255,255,0.4), 
                        inset -2px -2px 1px rgba(255,255,255,0.2);
    --shadow-all-lev2: 2px 2px 2px rgba(0,0,0,0.25), 3px 3px 3px rgba(0,0,0,0.3),
                        0px 0px 2px rgba(0,0,0,0.25), 0px 0px 3px rgba(0,0,0,0.35);
    --scale-swatch-hover: 1.01;
}
@media all and (min-width: 768px) {
    :root {
        --shadow-card-lev1: 1px 1px 1px rgba(0,0,0,0.05), 3px 3px 3px rgba(0,0,0,0.1),
                            -1px -1px 1px rgba(255,255,255,0.8), 
                            0px 0px 1px rgba(0,0,0,0.05), 0px 0px 2px rgba(0,0,0,0.15);
        --shadow-card-lev2: 2px 2px 2px rgba(0,0,0,0.05), 5px 5px 5px rgba(0,0,0,0.1),
                            -1px -1px 1px rgba(255,255,255,0.8), 
                            0px 0px 2px rgba(0,0,0,0.05), 0px 0px 4px rgba(0,0,0,0.15);
        --shadow-card-inset-lev1: inset 2px 2px 2px rgba(0,0,0,0.4), inset -1px -1px 1px rgba(255,255,255,0.4), 
                            inset -2px -2px 2px rgba(255,255,255,0.2);
        --shadow-card-inset-lev2: inset 3px 3px 2px rgba(0,0,0,0.4), inset -2px -2px 1px rgba(255,255,255,0.4), 
                                    inset -3px -3px 2px rgba(255,255,255,0.2);
        --shadow-all-lev2: 2px 2px 2px rgba(0,0,0,0.25), 5px 5px 5px rgba(0,0,0,0.3),
                            0px 0px 2px rgba(0,0,0,0.25), 0px 0px 4px rgba(0,0,0,0.35);
    }
}
.it-card-lev1-static, .it-card-lev1, .it-card-lev2, .it-card-inset-lev2 {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-card);
}
.it-card-lev1, .it-card-lev2, .it-card-inset-lev2 {    
 -webkit-transition: .5s;
         transition: .5s;
}
.it-card-lev1, .it-card-lev1-static {
 -webkit-box-shadow: var(--shadow-card-lev1);
         box-shadow: var(--shadow-card-lev1);
}
.it-card-lev2 {
 -webkit-box-shadow: var(--shadow-card-lev2);
         box-shadow: var(--shadow-card-lev2);
}
.it-card-inset-lev2 {
    -webkit-box-shadow: var(--shadow-card-inset-lev2);
            box-shadow: var(--shadow-card-inset-lev2);
}
@media all and (min-width: 768px) {
    .it-card-lev1:hover, .it-card-lev2:hover, .it-card-inset-lev2:hover {
    -webkit-transform: scale(var(--scale-swatch-hover));
            transform: scale(var(--scale-swatch-hover));
    }
}

/* 
============================================
    9.1. Elements - Buttons 
============================================
*/
/* ---------------- Action Button ---------------- */
.it-button {
    width: auto;
    height: auto;

    margin: calc(1.5 * var(--padd-stand))!important;
    border: none;
    padding: 0.4em 0.8em!important;
    border-radius: 1em;
}
@media all and (min-width: 768px) {
    .it-button {
        margin: var(--padd-stand)!important;
        padding: 0.3em 0.6em!important;

        cursor: pointer;

        -webkit-animation: in-out-button 10s infinite;
        animation: in-out-button 10s infinite;
    }
}
@-webkit-keyframes in-out-button {
    0% {-webkit-transform: scale(0.9)}
    10% {-webkit-transform: scale(1.05)}
    15% {-webkit-transform: scale(1)}
    100% {-webkit-transform: scale(1)}
}
@keyframes in-out-button {
    0% {transform: scale(0.9)}
    10% {transform: scale(1.05)}
    15% {transform: scale(1)}
    100% {transform: scale(1)}
}

.it-button h5, .it-button h4, .it-button h3 {
    font-size: 1.1em;
    line-height: 1;
    text-align: center;
}
@media all and (min-width: 768px) {
    .it-button h5, .it-button h4, .it-button h3 {        
        font-size: 1.03em;
    }
}

/* accent1 */
.it-button-acc1 {
    background: var(--col-accent1-pale);
}
.it-button-acc1:hover {
    background: var(--col-accent1);
}

/* accent2 */
.it-button-acc2 {
    background: none;
    border: 2px solid var(--col-accent2-dark);
    padding: calc(0.4em - 2px) calc(0.8em - 2px)!important;
}
@media all and (min-width: 768px) {
    .it-button-acc2 {
        padding: calc(0.3em - 2px) calc(0.6em - 2px)!important;
    }
}

/* accent3 */
.it-button-acc3 {
    background: var(--col-accent3);
}
.it-button-acc3 h5, .it-button-acc3 h4, .it-button-acc3 h3 {
    color: white;
}
.it-button-acc3:hover {
    background: var(--col-accent3-dark);
}

/* grey */
.it-button-grey {
    background: var(--grey);
}
.it-button-grey h5, .it-button-grey h4, .it-button-grey h3 {
    color: white;
}
.it-button-grey:hover {
    background: var(--grey-dark);
}

/* secondary */
.it-button-secondary {
    background: none;
    border: 1.5px solid var(--col-accent1);
    box-shadow: none;
}
.it-button-secondary h5, .it-button-secondary h4, .it-button-secondary h3 {
    color:  white;
}
.it-button-secondary:hover {
    background: none;
}

/* at the end */
.it-button-end {
    margin: 1.5em 0 1em 0;
}

/* 
============================================
    9.2. Elements - Upload Button 
============================================
*/
.it-upload-icon {
    z-index: 10;
    width: 3em;
    height: 3em;
    border-radius: 50%;
    margin: 0 0.5em;
    padding: 0.3em;
    background: var(--col-accent3);
}
@media all and (min-width: 768px) {
    .it-upload-icon {
        cursor: pointer;
    
        -webkit-animation: searchbox-upload-animate 0.3s ease-in-out;
        animation: searchbox-upload-animate 0.3s ease-in-out;
    }

    .it-upload-icon:hover {
        -webkit-transform: scale(1.2);
                transform: scale(1.2);
       
       -webkit-transition: .5s;
               transition: .5s;
    }
}
@-webkit-keyframes searchbox-upload-animate {
    from { -webkit-transform: scale(0) }
    80% { -webkit-transform: scale(0) }
    90% { -webkit-transform: scale(1.2) }   
    to { -webkit-transform: scale(1) }
}
@keyframes searchbox-upload-animate {
    from { transform: scale(0) }
    80% { transform: scale(0) }
    90% { transform: scale(1.2) }   
    to { transform: scale(1) }
}

/* 
============================================
    9.3. Elements - Upload Image 
============================================
*/
#it_uploaded_image {
    z-index: 3;
    height: 100%;
    width: 100%;
    object-fit: contain;
    margin: auto;
    background: transparent;
    /*filter: drop-shadow(0px 0px 2px var(--grey))
            drop-shadow(2px 2px 1px var(--grey));*/
}

/* 
============================================
    9.4. Elements - Loading Wheel Icon
============================================
*/
/* ---------------- Loading Wheel ---------------- */
.it-spinning-wheel-cont {
    height: auto;
    width: auto;
    display: grid;
    place-content: center;
    margin: 0;
    animation: fsx 4s steps(1) infinite;
}
@-webkit-keyframes fsx {
    50% {-webkit-transform: scale(-1);}
}
@keyframes fsx {
    50% {transform: scale(-1);}
}

.it-spinning-wheel, .it-spinning-wheel2, .it-spinning-wheel3 {
    overflow: hidden;
    position: relative;
    padding: 1.5em;
    margin: 1.5em;
    border-radius: 50%;
    animation: fbg 4s steps(1) -1s infinite, fsc 2s steps(1) infinite;
}
.it-spinning-wheel2 {
    animation: fbg2 4s steps(1) -1s infinite, fsc 2s steps(1) infinite;
}
.it-spinning-wheel3 {
    animation: fbg3 4s steps(1) -1s infinite, fsc 2s steps(1) infinite;
}

.it-spinning-wheel::after, .it-spinning-wheel2::after, .it-spinning-wheel3::after {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -1em -30em;
    padding: 30em;
    transform-origin: 50% 0;
    animation: fbg 4s steps(1) -3s infinite, mov 1s infinite alternate, exp 1s ease-in infinite alternate;
    content: '';
}
.it-spinning-wheel2::after {
    animation: fbg2 4s steps(1) -3s infinite, mov 1s infinite alternate, exp 1s ease-in infinite alternate;
}
.it-spinning-wheel3::after {
    animation: fbg3 4s steps(1) -3s infinite, mov 1s infinite alternate, exp 1s ease-in infinite alternate;
}

@-webkit-keyframes fsc {
    50% {-webkit-transform: scaley(-1)}
}
@-webkit-keyframes fbg {
    0% {background: var(--col-accent1-pale)}
    50% {background: var(--col-body-bg2)}
}
@-webkit-keyframes fbg2 {
    0% {background: var(--col-accent2-dd)}
    50% {background: var(--col-body-bg2)}
}
@-webkit-keyframes fbg3 {
    0% {background: var(--col-accent2)}
    50% {background: var(--col-body-bg2)}
}
@-webkit-keyframes mov {
    0%, 20% {-webkit-transform: none;}
    100% {-webkit-transform: translatey(1.5em) rotate(0.5turn)}
}
@-webkit-keyframes exp {
    0%, 20% {-webkit-clip-path: inset(0 29em 58em round 50%)}
    100% {-webkit-clip-path: inset(0 round 50%/ 0)}
}

@keyframes fsc {
    50% {transform: scaley(-1)}
}
@keyframes fbg {
    0% {background: var(--col-accent1-pale)}
    50% {background: var(--col-body-bg2)}
}
@keyframes fbg2 {
    0% {background: var(--col-accent2-dd)}
    50% {background: var(--col-body-bg2)}
}
@keyframes fbg3 {
    0% {background: var(--col-accent2)}
    50% {background: var(--col-body-bg2)}
}
@keyframes mov {
    0%, 20% {transform: none}
    100% {transform: translatey(1.5em) rotate(0.5turn)}
}
@keyframes exp {
    0%, 20% {clip-path: inset(0 29em 58em round 50%)}
    100% {clip-path: inset(0 round 50%/ 0)}
}

/* 
============================================
    9.5. Elements - Error Message
============================================
*/
/* ---------------- Error Message ---------------- */
.it-text-error {
    text-align: center;
    padding: 2em;
}
.it-text-error h4 {
    color: var(--col-accent2-dd);
}

/* 
============================================
    9.6. Elements - Tooltop
============================================
*/
/* ------ tooltip ------ */
.tooltip {
    position: relative;
}
.tooltip .tooltiptext {
    visibility: hidden;

    /* Position the tooltip */
    position: absolute;
    z-index: 80;
    top: -50%;
    left: 50%;
    margin-right: 0em;

    -webkit-transform: translate(-50%, -100%);
    -moz-transform: translate(-50%, -100%);
    -o-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
}
@media all and (min-width: 768px) {
    .tooltip .tooltiptext {
        visibility: hidden;
        max-width: 6em;
        background-color: var(--col-text-grey-d);
        color: white;
        text-align: center;
        border-radius: 5px;
        padding: 0.2em 0.5em;

        -webkit-box-shadow: var(--shadow-card-lev1);
                box-shadow: var(--shadow-card-lev1);

        -webkit-transition-delay: 0.5s;
                transition-delay: 0.5s;
    }

    .tooltip .tooltiptext::after {
        content: " ";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: var(--col-text-grey-d) transparent transparent transparent;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
    }

    .tooltip:checked .tooltiptext {
        visibility: visible;
      }
}

/* 
============================================
    9.7. Elements - Shadow items
============================================
*/
.it-shadow-lev1 {
 -webkit-box-shadow: var(--shadow-card-lev1);
         box-shadow: var(--shadow-card-lev1);
}
.it-shadow-lev2 {
    -webkit-box-shadow: var(--shadow-card-lev2);
            box-shadow: var(--shadow-card-lev2);
}

/* 
============================================
    9.7. Elements - Flex Box
============================================
*/
.flex-box-center, .flex-box-row, .flex-box-col, .flex-box-col-mob-row-tab, .flex-box-row-mob-col-tab {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}
.flex-box-row, .flex-box-row-mob-col-tab {
    flex-wrap: wrap;
    flex-direction: row;
}
.flex-box-col, .flex-box-col-mob-row-tab {
    flex-wrap: wrap;
    flex-direction: column;    
}

@media all and (min-width: 768px) {
    .flex-box-col-mob-row-tab {
        flex-direction: row;
    }
    .flex-box-row-mob-col-tab {
        flex-direction: column;
    }
}

.cont-full-size {
    width: 100%;
    height: 100%;
}

/* 
============================================
    10. Similar Pages
============================================
*/
.sim-pages-cont-0 {
    max-width: var(--width-max-page);
    padding: var(--padd-cont-0);
    padding-top: 0;
    margin: auto;
}
.sim-pages-cont-0 > * {
    padding: var(--padd-stand);
}

.sim-pages-cont-1 {
    height: auto;
    width: 100%;
    padding: 1em;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    margin: auto;
    border-radius: var(--radius-card);
    background: var(--col-body-bg2);

 -webkit-box-shadow: var(--shadow-card-lev1);
         box-shadow: var(--shadow-card-lev1);
}
.sim-pages-cont-1 h3 {
    color: var(--grey-dark);
}
.sim-pages-cont-1 h4 {
    color: var(--col-text);
}
@media all and (min-width: 768px) {
    .sim-pages-cont-1 {
        align-items: flex-start; 
    }
}