:root{
    --DarkestBlue:#1F2546;
    --DarkBlue:#3A3F83;
    --BerryBlue:#4857AC;
    --LightBlue:#90A3D0;
    --DarkestGrey:#252525;
    --DarkGrey:#595857;
    --MiddleGrey:#908182;
    --LightGrey:#ECEAE5;
    --PastelPink:#ee8b70;
    --PastelPink2:#FFA78F;
    --RaspberryPink:#FF5965;
    --KalinkaPink:rgb(189, 47, 56)5;
    --white:#ffff;

    --testA:purple;


    --SocialButtonSize:86px;
    --IconSize:50px;

    --H1Size: 70px;
    --H2Size: 60px;
    --H3Size: 50px;
    --H4Size: 40px;
    --H5Size: 30px;
    --H6Size: 18px;
    --BodyText:20px;
    /* --TextHover:21px; */

    --SmallText:18px;
    --SmallerText:18px;

    --img-box-hover-width: 550px;
    --img-box-label-width: 450px;

    

}




/* Carrousel */
/* Beginning */
.comm-expand{
    /* background-color: var(--testA);*/

    max-width: 100% auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 1em;


}

/* Tittle design */
.comm-title{
    display: flex;
    
    max-width: 400px;
    gap: 1em;

}

#comm-tag{
    background-color: var(--RaspberryPink);

    height: auto;
    padding: 10px;
    

    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;

    color: white;
    font-weight: 500;
    font-size: var(--H5Size);

}



/* Gallery Inside */

.comm-carrousel{
    /* background-color: #FFA78F; */
    max-width: 1000px;
    height: auto;

    display: flex;
    align-items: center;
    justify-content: center;
}

.gradient{
    height: 100%;
    width: 100%;
    border-radius: 60px;

    background-image: linear-gradient(to top, var(--DarkestBlue), transparent);
    position: relative;

    opacity: 0.8;

}

/* Image Boxes */

.img-box{
    background-color: var(--LightBlue);
    width: 90px;
    height: 330px;
    margin: 12px;
    border-radius: 60px;

    background:url(/Images/gallery-resources/AutumnScott.jpg);
    background-size: cover;
    background-position: center;
    position: relative;

    transition: all 0.7s;
}
    .img-box:nth-child(2){
        background:url(/Images/gallery-resources/Waffles-Middle-Body.jpg);
        background-size: cover;
        background-position: center;
    }

    .img-box:nth-child(3){
        background:url(/Images/gallery-resources/CometTrident.jpg);
        background-size: cover;
        background-position: center;
    }

    .img-box:nth-child(4){
        background:url(/Images/gallery-resources/JayRef.jpg);
        background-size: cover;
        background-position: center;
    }

.img-box:hover{
    width: var(--img-box-hover-width);
    cursor: pointer;

}


/* Image Boxes Contents Verticals */

.img-box h3{
    color: white;
    position: absolute;
    left: 30%;
    bottom: 30px;

    font-size: var(--H5Size);
    text-shadow: 0px 4px 4px var(--DarkBlue);

    writing-mode: vertical-lr;

    opacity: 1;

    transition: opacity 0.2s;
}

.img-box:hover h3{
    color: white;


    opacity: 0;
}


/* Image Boxes Contents Horizontals */

.img-box label{
    position: absolute;
    width: var(--img-box-label-width);
    bottom: 40px;
    left: 40px;
    
    opacity: 0;
    display: none;

    transition: transform 1s ease-in;

}

.img-box:hover label{
    color: white;

    /* display: block; */
    opacity: 0;
    transition: opacity 3s;
    opacity: 1;
    font-size: 1px;

    display: block;
    
}

.img-box h4{
    color: white;
    margin-bottom: 12px;

    font-size: var(--H4Size);

    text-shadow: 0px 4px 4px var(--DarkBlue);

}

.img-box span{
    font-weight: 300;
    width: 200px;

    text-shadow: 0px 4px 4px var(--DarkBlue);

}




/* Commission Buttons */
.comm-buttons{
    /* background-color: #3A3F83; */

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
}

/* Ending */
/* Carrousel */







/* START */
/* Commission Tags */


/* Commission Tag Container */

.com-label{
    width: 85%;
    min-height: 380px;
    max-height: auto;

    border: solid var(--BerryBlue) 3px;
    border-radius: 38px;

    display: flex;
    direction: row;

    margin-bottom: 10px;

}

/* Tag's Images */

.exmp-com{
    height: auto;
    min-width: 40%;

    border-radius: 35px 0 0 35px;

    background-image: url(../Images/gallery-resources/AutumnScott.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

#exmp-head{
    height: auto;
    min-width: 40%;

    border-radius: 35px 0 0 35px;

    background-image: url(../Images/gallery-resources/AutumnScott.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

#exmp-mid{
    height: auto;
    width: 40%;


    border-radius: 35px 0 0 35px;

    background-image: url(../Images/gallery-resources/Waffles-Middle-Body.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

#exmp-full{
    height: auto;
    width: 40%;


    border-radius: 35px 0 0 35px;

    background-image: url(../Images/gallery-resources/CometTrident.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

#exmp-ref{
    height: auto;
    width: 40%;

    display: flex;
    align-items: center;


    border-radius: 35px 0 0 35px;

    background-image: url(../Images/gallery-resources/JayRef.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

/* Tag's Text Container*/

.exmp-text{
    margin: 30px 0;

    width: 60%;
    padding: 0 50px;

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

    font-size: 25px;
    color: var(--DarkGrey);

}

/* Tag's Text  */

.exmp-text-tit{
    width: 100%;

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

}

.exmp-text-tit h3{
    color: var(--BerryBlue);

}

.exmp-text-tit h4{
    color: var(--DarkBlue);

}

.exmp-text-desc{
    margin-top: 1em;
}

.exmp-text-notation{
    margin-top: 15px;

    color: var(--BerryBlue);
    font-size: var(--SmallText);

}

/* Commission, Queue & ToS buttons */

#gray-notes{
    width: 80%;
    margin-bottom: 25px;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    text-align: center;

    font-size: var(--BodyText);
    color: var(--DarkGrey);

}

/* Ending */
/* Commission Tags */





/* START */
/* Commission Slider */

.com-exam-img img{
    max-width: 100%;
    border-radius: 33px 33px 0 0;
}