/*
  ========================================
  Overview Colour Hues
  ========================================
*/

:root {
    /* col dict card */
    --top-col-dict-desc1: 10%;
    --width-col-dict-desc1: 35%;

    /* name color */
    --width-name-col-desc1: 70%;
    --top-name-col-desc3: 80%;
}
@media all and (min-width: 768px) {
    :root {
        /* col dict card */
        --top-col-dict-desc1: 25%;
        --width-col-dict-desc1: 30%;
        
        /* name col card */
        --width-name-col-desc1: 40%;
        --top-name-col-desc3: 85%;
    }
}

/* --------- background ---------- */
#video_bg_main {
    z-index: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: cover;
    position: absolute;
    right: 0;
    bottom: 0;
}
#sa_ani_card1_el1, #sa_ani_card1_el2 {
    padding: 1em;
    /*background-color: #5131A9CC;*/
}
#sa_ani_card1_el2 {
    letter-spacing: 0.3em;
}

/* -------------- moodboard colors -------------- */

/* -------------- color dictionary -------------- */
#card_col_dict {
    background: -webkit-linear-gradient(var(--col-accent2-dd) 2%, white 2%, white 75%, var(--col-accent2-dd) 70%);
    background: -moz-linear-gradient(var(--col-accent2-dd) 2%, white 2%, white 75%, var(--col-accent2-dd) 70%);
    background: -o-linear-gradient(var(--col-accent2-dd) 2%, white 2%, white 75%, var(--col-accent2-dd) 70%);
    background: linear-gradient(var(--col-accent2-dd) 2%, white 2%, white 75%, var(--col-accent2-dd) 70%);
    border: 0.5px solid var(--col-accent2-dd);
}

#img_flower {
    position: absolute;
    top: 10%;
    left: 5%;
    max-width: 60%;
    max-height: 60%;
    background: white;
    border-radius: 10px;
}

#desc_col_dict_1, #desc_col_dict_2, #desc_col_dict_3, #desc_col_dict_4 {
    z-index: 2;
    position: absolute;
    padding: 2px;
    text-align: center;
}

#desc_col_dict_1 h4, #desc_col_dict_2 h4, #desc_col_dict_3 h3, #desc_col_dict_4 h4 {
    color: white;
    padding: 7px 5px;
    line-height: 1.2;
}
@media all and (max-width: 768px) {
    #desc_col_dict_1 h4, #desc_col_dict_2 h4, #desc_col_dict_4 h4 {
        font-size: 1em;
    }
    #desc_col_dict_3 h3 {
        font-size: 1.15em;
    }
}

#desc_col_dict_1 {
    top: var(--top-col-dict-desc1);
    left: 65%;
    width: var(--width-col-dict-desc1);
    background: #0F52BA;
}

#desc_col_dict_2 {
    top: 45%;
    left: 65%;
    width: var(--width-col-dict-desc1);
    background: #DE3163;
}

#desc_col_dict_3, #desc_col_dict_4 {
    top: 75%;
    left: 0%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#desc_col_dict_4 {
    top: 85%;
}

/* animation */
#img_flower{
    -webkit-animation: ani1_flower 8s ease-in-out infinite;
    -moz-animation: ani1_flower 8s ease-in-out infinite;
    -o-animation: ani1_flower 8s ease-in-out infinite;
    animation: ani1_flower 8s ease-in-out infinite;
}
#desc_col_dict_1{
    -webkit-animation: ani1_desc1 8s ease-in-out infinite;
    -moz-animation: ani1_desc1 8s ease-in-out infinite;
    -o-animation: ani1_desc1 8s ease-in-out infinite;
    animation: ani1_desc1 8s ease-in-out infinite;
}
#desc_col_dict_2{
    -webkit-animation: ani1_desc2 8s ease-in-out infinite;
    -moz-animation: ani1_desc2 8s ease-in-out infinite;
    -o-animation: ani1_desc2 8s ease-in-out infinite;
    animation: ani1_desc2 8s ease-in-out infinite;
}
#desc_col_dict_3{
    -webkit-animation: ani1_desc3 8s ease-in-out infinite;
    -moz-animation: ani1_desc3 8s ease-in-out infinite;
    -o-animation: ani1_desc3 8s ease-in-out infinite;
    animation: ani1_desc3 8s ease-in-out infinite;
}
#desc_col_dict_4{
    -webkit-animation: ani1_desc4 8s ease-in-out infinite;
    -moz-animation: ani1_desc4 8s ease-in-out infinite;
    -o-animation: ani1_desc4 8s ease-in-out infinite;
    animation: ani1_desc4 8s ease-in-out infinite;
}

@-webkit-keyframes ani1_flower {
    0% {-webkit-transform: scale(0.4)}
    5% {-webkit-transform: scale(1)}
}
@-webkit-keyframes ani1_desc1 {
    0% {-webkit-transform: translateX(100vh)}
    5% {-webkit-transform: translateX(70vh)}
    10.0% {-webkit-transform: translateX(0)}
}
@-webkit-keyframes ani1_desc2 {
    0% {-webkit-transform: translateX(100vh)}
    10.0% {-webkit-transform: translateX(70vh)}
    15% {-webkit-transform: translateX(0)}
}
@-webkit-keyframes ani1_desc3 {
    0% {opacity: 0}
    15% {opacity: 0}
    20.0% {opacity: 1}
}
@-webkit-keyframes ani1_desc4 {
    0% {opacity: 0}
    20% {opacity: 0}
    25% {opacity: 1}
}

@-moz-keyframes ani1_flower {
    0% {-moz-transform: scale(0.4)}
    5% {-moz-transform: scale(1)}
}
@-moz-keyframes ani1_desc1 {
    0% {-moz-transform: translateX(100vh)}
    5% {-moz-transform: translateX(70vh)}
    10.0% {-moz-transform: translateX(0)}
}
@-moz-keyframes ani1_desc2 {
    0% {-moz-transform: translateX(100vh)}
    10.0% {-moz-transform: translateX(70vh)}
    15% {-moz-transform: translateX(0)}
}
@-moz-keyframes ani1_desc3 {
    0% {opacity: 0}
    15% {opacity: 0}
    20.0% {opacity: 1}
}
@-moz-keyframes ani1_desc4 {
    0% {opacity: 0}
    20% {opacity: 0}
    25% {opacity: 1}
}

@-o-keyframes ani1_flower {
    0% {-o-transform: scale(0.4)}
    5% {-o-transform: scale(1)}
}
@-o-keyframes ani1_desc1 {
    0% {-o-transform: translateX(100vh)}
    5% {-o-transform: translateX(70vh)}
    10.0% {-o-transform: translateX(0)}
}
@-o-keyframes ani1_desc2 {
    0% {-o-transform: translateX(100vh)}
    10.0% {-o-transform: translateX(70vh)}
    15% {-o-transform: translateX(0)}
}
@-o-keyframes ani1_desc3 {
    0% {opacity: 0}
    15% {opacity: 0}
    20.0% {opacity: 1}
}
@-o-keyframes ani1_desc4 {
    0% {opacity: 0}
    20% {opacity: 0}
    25% {opacity: 1}
}

@keyframes ani1_flower {
    0% {transform: scale(0.4)}
    5% {transform: scale(1)}
}
@keyframes ani1_desc1 {
    0% {transform: translateX(100vh)}
    5% {transform: translateX(70vh)}
    10.0% {transform: translateX(0)}
}
@keyframes ani1_desc2 {
    0% {transform: translateX(100vh)}
    10.0% {transform: translateX(70vh)}
    15% {transform: translateX(0)}
}
@keyframes ani1_desc3 {
    0% {opacity: 0}
    15% {opacity: 0}
    20.0% {opacity: 1}
}
@keyframes ani1_desc4 {
    0% {opacity: 0}
    20% {opacity: 0}
    25% {opacity: 1}
}

/* -------------- color name finder -------------- */

/* -------------- analyze a color -------------- */
#card_anal_col {
    background: white;
    background: -webkit-linear-gradient(to right, var(--col-accent2) 37.5%, white 37.5%);
    background: -moz-linear-gradient(to right, var(--col-accent2) 37.5%, white 37.5%);
    background: -o-linear-gradient(to right, var(--col-accent2) 37.5%, white 37.5%);
    background: linear-gradient(to right, var(--col-accent2) 37.5%, white 37.5%);
    border: 0.5px solid var(--col-accent2);
}

#desc_anal_col_1, #desc_anal_col_2 {
    z-index: 3;
    position: absolute;
    left: 5%;
    width: 27.5%;
}
#desc_anal_col_1 {
    top: 15%;
}
#desc_anal_col_2 {
    top: 65%;
}

#desc_anal_col_1 h4, #desc_anal_col_2 h4 {
    color: var(--col-accent2-dd);
    text-align: center;
}

@media all and (max-width: 768px) {
    #desc_anal_col_1 h4, #desc_anal_col_2 h4 {
        font-size: 1em;
    }
}

#circle_anal_col_3, #shad_anal_col_3, #sat_anal_col_3 {
    z-index: 3;
    position: absolute;    
}

#circle_anal_col_3 {
    top: 5%;
    left: 40%;
    width: 57.5%;
    height: 45%;
    background-image: url(/images/swatch_shades.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

#matches_anal_col_1, #matches_anal_col_2, #matches_anal_col_3, #matches_anal_col_4 {
    z-index: 3;
    position: absolute;
    width: 20%;
    height: 14%;
    background: var(--col-accent2);
}
#matches_anal_col_1, #matches_anal_col_2 {
    top: 60%;
}
#matches_anal_col_3, #matches_anal_col_4 {
    top: 80%;
}
#matches_anal_col_1, #matches_anal_col_3 {
    left: 47%;
}
#matches_anal_col_2, #matches_anal_col_4 {
    right: 9.5%;
}

#matches_anal_col_1 {
    background: -webkit-linear-gradient(45deg, var(--col-accent2) 50%, #20F986 50%);
    background: -moz-linear-gradient(45deg, var(--col-accent2) 50%, #20F986 50%);
    background: -o-linear-gradient(-45deg, var(--col-accent2) 50%, #20F986 50%);
    background: linear-gradient(-45deg, var(--col-accent2) 50%, #20F986 50%);
}

#matches_anal_col_2 {
    background: -webkit-linear-gradient(45deg, var(--col-accent2) 50%, #BFF128 50%);
    background: -moz-linear-gradient(45deg, var(--col-accent2) 50%, #BFF128 50%);
    background: -o-linear-gradient(-45deg, var(--col-accent2) 50%, #BFF128 50%);
    background: linear-gradient(-45deg, var(--col-accent2) 50%, #BFF128 50%);
}

#matches_anal_col_3 {
    background: -webkit-linear-gradient(45deg, var(--col-accent2) 50%, #003FFF 50%);
    background: -moz-linear-gradient(45deg, var(--col-accent2) 50%, #003FFF 50%);
    background: -o-linear-gradient(-45deg, var(--col-accent2) 50%, #003FFF 50%);
    background: linear-gradient(-45deg, var(--col-accent2) 50%, #003FFF 50%);
}

#matches_anal_col_4 {
    background: -webkit-linear-gradient(45deg, var(--col-accent2) 50%, #EEDC82 50%);
    background: -moz-linear-gradient(45deg, var(--col-accent2) 50%, #EEDC82 50%);
    background: -o-linear-gradient(-45deg, var(--col-accent2) 50%, #EEDC82 50%);
    background: linear-gradient(-45deg, var(--col-accent2) 50%, #EEDC82 50%);
}

/* animation */
#desc_anal_col_1 {
    -webkit-animation: ani3_desc1 8s ease-in-out infinite;
    -moz-animation: ani3_desc1 8s ease-in-out infinite;
    -o-animation: ani3_desc1 8s ease-in-out infinite;
    animation: ani3_desc1 8s ease-in-out infinite;
}
#circle_anal_col_3 {
    -webkit-animation: ani3_img1 8s ease-in-out infinite;
    -moz-animation: ani3_img1 8s ease-in-out infinite;
    -o-animation: ani3_img1 8s ease-in-out infinite;
    animation: ani3_img1 8s ease-in-out infinite;
}
#desc_anal_col_2 {
    -webkit-animation: ani3_desc2 8s ease-in-out infinite;
    -moz-animation: ani3_desc2 8s ease-in-out infinite;
    -o-animation: ani3_desc2 8s ease-in-out infinite;
    animation: ani3_desc2 8s ease-in-out infinite;
}
#matches_anal_col_1, #matches_anal_col_2, #matches_anal_col_3, #matches_anal_col_4 {
    -webkit-animation: ani3_img2 8s ease-in-out infinite;
    -moz-animation: ani3_img2 8s ease-in-out infinite;
    -o-animation: ani3_img2 8s ease-in-out infinite;
    animation: ani3_img2 8s ease-in-out infinite;
}

@-webkit-keyframes ani3_desc1 {
    0% {-webkit-transform: translateX(-100vh)}
    0% {-webkit-transform: translateX(-70vh)}
    5% {-webkit-transform: translateX(0)}
}
@-webkit-keyframes ani3_img1 {
    0% {-webkit-transform: scale(0)}
    5% {-webkit-transform: scale(0)}
    10% {-webkit-transform: scale(1)}
}
@-webkit-keyframes ani3_desc2 {
    0% {-webkit-transform: translateX(-100vh)}
    10% {-webkit-transform: translateX(-70vh)}
    15% {-webkit-transform: translateX(0)}
}
@-webkit-keyframes ani3_img2 {
    0% {opacity: 0}
    20% {opacity: 0}
    25% {opacity: 1}
}

@-moz-keyframes ani3_desc1 {
    0% {-moz-transform: translateX(-100vh)}
    0% {-moz-transform: translateX(-70vh)}
    5% {-moz-transform: translateX(0)}
}
@-moz-keyframes ani3_img1 {
    0% {-moz-transform: scale(0)}
    5% {-moz-transform: scale(0)}
    10% {-moz-transform: scale(1)}
}
@-moz-keyframes ani3_desc2 {
    0% {-moz-transform: translateX(-100vh)}
    10% {-moz-transform: translateX(-70vh)}
    15% {-moz-transform: translateX(0)}
}
@-moz-keyframes ani3_img2 {
    0% {opacity: 0}
    20% {opacity: 0}
    25% {opacity: 1}
}

@-o-keyframes ani3_desc1 {
    0% {-o-transform: translateX(-100vh)}
    0% {-o-transform: translateX(-70vh)}
    5% {-o-transform: translateX(0)}
}
@-o-keyframes ani3_img1 {
    0% {-o-transform: scale(0)}
    5% {-o-transform: scale(0)}
    10% {-o-transform: scale(1)}
}
@-o-keyframes ani3_desc2 {
    0% {-o-transform: translateX(-100vh)}
    10% {-o-transform: translateX(-70vh)}
    15% {-o-transform: translateX(0)}
}
@-o-keyframes ani3_img2 {
    0% {opacity: 0}
    20% {opacity: 0}
    25% {opacity: 1}
}

@keyframes ani3_desc1 {
    0% {transform: translateX(-100vh)}
    0% {transform: translateX(-70vh)}
    5% {transform: translateX(0)}
}
@keyframes ani3_img1 {
    0% {transform: scale(0)}
    5% {transform: scale(0)}
    10% {transform: scale(1)}
}
@keyframes ani3_desc2 {
    0% {transform: translateX(-100vh)}
    10% {transform: translateX(-70vh)}
    15% {transform: translateX(0)}
}
@keyframes ani3_img2 {
    0% {opacity: 0}
    20% {opacity: 0}
    25% {opacity: 1}
}