/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
@font-face {
    font-family: 'barca';
    src: url('../fonts/barca_by_roca.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


.jersey-customizer-image-container{
    display: none;
    margin-bottom: 15px;
}
.jersey-customizer-image-front{
    display: none;
}
.jersey-customizer-image-front.state-active{
    display: block;
}
.jersey-customizer-image-back{
    display: none;
}
.jersey-customizer-image-back.state-active{
    display: block;
}


.jersey-customizer-image{
    position: relative;
}
.jersey-customizer-image .base-image{
    position: relative;
    z-index: 1;
}
.jersey-customizer-image .base-image img{
    width: 100%;
    height: auto;
}
.jersey-customizer-image .overylay{
    position: absolute;
    z-index: 2;
    left:0;
    right: 0;
    top: 0;
    bottom: 0;
}

.jersey-customizer-image .overylay-name,
.jersey-customizer-image .overylay-number{
    font-family: 'barca';
    text-align: center;
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    color: #000000;
}
.jersey-customizer-image .overylay-name{
    top: 7%;
    font-size: 40px;
}
.jersey-customizer-image .overylay-number{
    top: 14%;
    font-size: 150px;
}
.jersey-customizer-image.jersey-customizer-image-front .overylay-logo{
    position: absolute;
    z-index: 3;
    width: 9%;
    left: 59%;
    top: 17%;
}
.jersey-customizer-image.jersey-customizer-image-front .overylay-logo-alt{
    position: absolute;
    z-index: 3;
    width: 9%;
    right: 59%;
    top: 17%;
}


.jersey-customizer-image.jersey-customizer-image-front .overylay-sponsor{
    position: absolute;
    z-index: 3;
    width: 29.6%;
    top: 36%;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.jersey-customizer-image.jersey-customizer-image-back .overylay-logo{
    position: absolute;
    z-index: 3;
    width: 27%;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 25%;
}

.jersey-customizer-image.jersey-customizer-image-back .overylay-sponsor{
    position: absolute;
    z-index: 3;
    width: 29.6%;
    top: 75%;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.jersey-customizer-rowone{
    display: grid !important;
    flex-wrap: wrap;
    gap: 5px 10px;
    grid-template-columns: repeat(2, 1fr);
}
.jersey-customizer-rowone .jersey-customizer-club-logo,
.jersey-customizer-rowone .jersey-customizer-sponsor-logo,
.jersey-customizer-rowone .jersey-customizer-name-color{
    margin: 0 !important;
}