@font-face {
    font-family: 'helveticabold';
    src: url('./fonts/helvetica_bold-webfont.eot');
    src: url('./fonts/') format('embedded-opentype'),
        url('./fonts/helvetica_bold-webfont.woff2') format('woff2'),
        url('./fonts/helvetica_bold-webfont.woff') format('woff'),
        url('./fonts/helvetica_bold-webfont.ttf') format('truetype'),
        url('./fonts/helvetica_bold-webfont.svg#helveticabold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'helvlightregular';
    src: url('./fonts/helvlight_regular-webfont.eot');
    src: url('./fonts/?#iefix') format('embedded-opentype'),
        url('./fonts/helvlight_regular-webfont.woff2') format('woff2'),
        url('./fonts/helvlight_regular-webfont.woff') format('woff'),
        url('./fonts/helvlight_regular-webfont.ttf') format('truetype'),
        url('./fonts/helvlight_regular-webfont.svg#helvlightregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    width: 1080px;
    height: 1920px;
}

.content {
    width: 1080px;
    height: 1920px;
    overflow: hidden;
    position: relative;
    background: url('../assets/bg.png');
    background-size: cover;
    background-position: center;
}

.slide {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


.img-container {
    display: flex;
    justify-content: center;
    width: 910px;
    height: 1760px;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    background-color: #F0F0F0;
}

.expo_1 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    transition-delay: 0.7s;
}

#img_1 {
    background-image: none;
}

.expo_2 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.expo_3 {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.container-expo_3 {
    width: 790px;
    height: 870px;
    margin-top: 290px;
    margin-left: 60px;
    margin-right: 60px;
    overflow: hidden;
    position: relative;
}

.artwork.active {
    opacity: 1;
}

.conatinet-points {
    display: flex;
    justify-content: space-between;
    width: 114px;
    height: 20px;
    position: absolute;
    top: 1870px;
    left: 82px;
}

.point-1 {
    width: 20px;
    height: 20px;
    background-color: #C49332;
    border-radius: 50%;
}

.point-2 {
    width: 20px;
    height: 20px;
    background-color: #242323;
    border-radius: 50%;
}

.point-3 {
    width: 20px;
    height: 20px;
    background-color: #5E5E5E;
    border-radius: 50%;
}


.container-description {
    overflow: hidden;
    width: 780px;
    height: 469px;
    background-color: #fff;
    position: absolute;
    top: 1272px;
    left: 300px;
    box-shadow: -11px 11px 17px 1px rgba(105, 105, 105, 0.5);
    /*sombra letrral*/
}

.slide-in-1 {
    animation: scale-in-hor-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation-delay: 20s;
}

.container-name {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 114px;
    width: 100%;
    max-height: 96px;
}

.slide-in-2 {
    animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation-delay: 20.6s;
}


.text-name {
    font-family: helveticabold;
    font-size: 2.5rem;
    letter-spacing: -1.1px;
    overflow: hidden;
    /* text-overflow: ellipsis; */
    white-space: normal;
    max-width: 100%;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.title {
    font-family: helveticabold;
    color: #C49332;
    font-size: 2rem;
    margin-bottom: 54px;
    letter-spacing: 0.7px;
}

.containet-title {
    position: absolute;
    top: 127px;
    left: 48px;
}

.slide-in-3 {
    animation: scale-in-hor-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation-delay: 20.5s;
}

.text-date {
    font-family: helvlightregular;
    font-size: 34px;
    font-weight: 600;
    letter-spacing: 2.1px;
    overflow: hidden;
    height: 41px;
}

.container-artist {
    position: absolute;
    top: 173px;
    left: 48px;
}

.slide-in-4 {
    animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation-delay: 20.9s;
}


.container-technique {
    position: absolute;
    top: 271px;
    left: 47px;
}

.slide-in-5 {
    animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation-delay: 21s;
}

.container-specifications {
    position: absolute;
    top: 361px;
    left: 47px;
}

.slide-in-6 {
    animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation-delay: 21.2s;
}

.container-available {
    display: flex;
    justify-content: center;
    margin-top: 307px;

}

.slide-in-7 {
    animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation-delay: 21.3s;
}

.text-date-available {
    font-family: helvlightregular;
    font-size: 34px;
    font-weight: 600;
    letter-spacing: 0px;
    height: 41px;
    overflow: hidden;
    margin-left: 10px;
}

.container-lines {
    animation: scale-in-hor-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation-delay: 20.5s;
}

.line-1 {
    position: absolute;
    top: 58px;
    left: -34px;
    width: 182px;
    height: 3px;
    background-color: #C49332;
}

.line-2 {
    position: absolute;
    top: 151px;
    left: -1px;
    width: 233px;
    height: 3px;
    background-color: #C49332;

}

.line-3 {
    position: absolute;
    top: 244px;
    left: -1px;
    width: 127px;
    height: 3px;
    background-color: #C49332;
}


/* container-descrption */

@keyframes scale-in-hor-center {
    0% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        opacity: 1;
    }
}

@-webkit-keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(1000px);
        transform: translateX(1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

/*Text-data*/

@keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(1000px);
        transform: translateX(1000px);
        opacity: 0;
    }

    80% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

/*titles*/

@keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}