﻿.modal.show .modal-dialog {
    width: 100%;
    max-width: 500px !important;
}

.wrapper-video {
    overflow: hidden;
    padding-bottom: 400px;
    position: relative;
    height: 0;
}

    .wrapper-video iframe {
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        position: absolute;
    }

.notas-header-bg {
    position: relative;
    width: 100%;
}

.notas-header-bg-text {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}


.notas-list {
    padding-top: 140px;
    padding-bottom: 180px;
    /*width: 100%;*/
    /*max-width: 1728px;*/
    margin: 0 auto;
}

.container-notes {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-right: 20px;
    justify-content: center;
}

.container-notes-second {
    margin-left: 10%;
    position: relative;
}

.wrapper-notes-top {
    margin-left: 400px;
    /*margin-right: 400px;*/
}

.wrapper-notes-bottom {
    margin-left: 25%;
}

.quote-left-bottom {
    width: 100%;
    width: 480px;
    margin-right: 80px;
}

.quote-right-top {
    width: 100%;
    max-width: 480px;
    position: absolute;
    right: 120px;
    top: 0;
}

.nota-quote-circle {
    position: absolute;
    width: 100%;
    max-width: 600px;
    left: 0;
    bottom: -100px;
}

.nota-qoute {
    width: 320px;
    max-width: 320px;
    position: relative;
}

.nota-quote-right {
    margin-left: auto;
}



.nota-qoute:before {
    position: absolute;
    content: '';
    top: -25px;
    left: -50px;
    width: 80px;
    height: 80px;
    background-image: url('/images/notas/quote-lefs.svg');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}

.nota-qoute:after {
    position: absolute;
    content: '';
    bottom: 5px;
    right: 0px;
    width: 80px;
    height: 80px;
    background-image: url('/images/notas/quote-right.svg');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}


.nota-quote-text {
    font-family: 'metropolis-regular';
    font-size: 22px;
    position: relative;
    z-index: 2;
}

.nota-autor {
    font-family: 'metropolis-semibold';
    font-size: 16px;
}


.nota-underline {
    width: 50px;
    height: 6px;
    margin-top: 10px;
    border-radius: 3px;
    background-color: #C5973C;
}

.nota-quote-dots {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 130px;
    position: absolute;
}

.nota-quote-dots-bottom {
    bottom: -160px;
    left: 50%;
    transform: translateX(-50%);
}

.nota-quote-dots-top {
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
}


.underlines {
    width: 100%;
    margin-left: auto;
    position: absolute;
    left: 250px;
    bottom: -30px;
    z-index: 1;
}

.underline-third-section {
    height: 50px;
    top: 50%;
    transform: translateY(-50%);
    left: -120px;
    z-index: 1;
}

.card-notas {
    width: 320px;
    max-width: 320px;
    height: 320px;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.30);
    padding: 15px;
    position: relative;
}

.card-notas-content {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    background-image: url('../images/notas/layer_aux.svg');
    background-size: cover;
    background-position: center;
}

    
    .card-notas-video {
        position: relative;
    }

    .card-notas-video:before{
        content: '';
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-color: rgb(0,0,0,0.3);
        position: absolute;
    }

        .card-notas-video:after {
            content: '';
            position: absolute;
            width: 60px;
            height: 60px;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background-image: url('../images/notas/play-button-youtube.svg');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            opacity: 0.5;
            transition: 0.6s;
        }

        .card-notas-video:hover:after {
            opacity: 0.9;
        }



.card-notas-content-vertical {
    background-image: url('../images/notas/layer_aux_vertical.svg');
}

.card-notas-vertical {
    height: 548px;
}

.capitan {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 10px;
    position: relative;
    /*transform: translateX(-10vw);*/
}

.capitan-notes {
    position: absolute;
    width: 450px;
    height: 100%;
    bottom: 120px;
}


.circle-second-notes {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}

    .circle-second-notes img {
        max-width: 100%;
    }

.ascroll-container {
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: row;
    position: relative;
}

.ascroll-content {
    transition: transform 0.3s ease; /* Transición suave */
}


.close-modal-notes {
    position: absolute;
    right: 30px;
    top: 30px;
    z-index: 20;
    width: 35px;
    height: 35px;
    background-color: #fff;
    border-radius: 50%;
    border: none;
    box-shadow: -2px 2px 15px 0.15px;
}

    .close-modal-notes i {
        color: #ffc107;
    }

@media(max-width: 1280px) {
    .capitan {
        transform: translateX(0vw);
    }

    .card-notas {
        width: 240px;
        height: 240px;
    }

    .card-notas-vertical {
        height: 440px;
    }

    .quote-left-bottom {
        width: 400px;
    }

    .capitan-notes {
        width: 350px;
    }
}


@media(max-height: 800px){
    .capitan {
        transform: translateX(0vw);
    }

    .card-notas {
        width: 220px;
        height: 220px;
    }

    .card-notas-vertical {
        height: 400px;
    }

    .quote-left-bottom {
        width: 400px;
    }

    .capitan-notes {
        width: 350px;
    }

    .grow-img {
        max-width: 80%;
    }
}

@media(max-height: 700px) {
    .capitan {
        transform: translateX(0vw);
    }

    .card-notas {
        width: 200px;
        height: 200px;
    }

    .card-notas-vertical {
        height: 380px;
    }

    .quote-left-bottom {
        width: 400px;
    }

    .capitan-notes {
        width: 350px;
    }
}

.swipper-next-notas::after {
    content: '';
    width: 30px;
    height: 30px;
    background-image: url('../images/iconos/arrow-right.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.swipper-prev-notas::after {
    content: '';
    width: 30px;
    height: 30px;
    background-image: url('../images/iconos/arrow-left.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.modal.show .modal-dialog{
    margin: 0 auto;
}

@media(max-width: 991px) {
    .capitan {
        transform: translateX(0vw);
    }

    .card-notas {
        width: 220px;
        height: 220px;
        padding: 10px;
    }

    .card-notas-vertical {
        height: 400px;
    }

    .quote-left-bottom {
        width: 400px;
    }

    .capitan-notes {
        width: 300px;
    }
}

@media(max-width: 768px) {
    .nota-quote-text {
        font-size: 20px;
    }

    .ascroll-container {
        overflow-x: auto;
    }

    .card-notas-vertical {
        height: 390px !important;
    }
}

@media(max-width: 567px) {

    .card-notas {
        width: 200px;
        height: 200px;
    }

    .wrapper-notes-top {
        margin-left: 100px;
    }

    .nota-quote-right {
        margin-left: 0px;
    }

    .quote-left-bottom {
        width: 300px;
        margin-right: 0px;
    }

    .nota-qoute {
        width: 180px;
    }

    .nota-quote-text {
        font-size: 16px;
    }

    .nota-autor {
        font-size: 14px;
    }

    .nota-quote-circle {
        left: -80px;
    }
}
