@font-face {
    font-family: 'Avenir';
    src: url('../fonts/Avenir.ttc') format('ttc');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Baskerville-Regular';
    src: url('../fonts/LibreBaskerville-Regular.ttf') format('ttf');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Baskerville-Bold';
    src: url('../fonts/LibreBaskerville-Bold.ttf') format('ttf');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Baskerville-Italic';
    src: url('../fonts/LibreBaskerville-Italic.ttf') format('ttf');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
    font-style: normal;
}




html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
    scroll-behavior: smooth;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.containerCS {
    margin: 1em 5em;
}

.subTitle {
    font-family: 'Avenir';
    font-size: 35px;
    margin-top: -0.5em;
}

p {
    margin: 1%;
    font-size: 15pt;
}

.screen-lg {
    display: block;
}

.screen-md {
    display: none;
}

screen-lg-md {
    display: block;
}

.screen-sm {
    display: none;
}


/* HEADER */
#header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 70px;
    z-index: 999;
    position: sticky;
    top: 0;
    left: 0;
    background-color: white;
}

#navbar {
    display: flex;
    align-items: center;
    justify-content: center;
}

    #navbar li {
        list-style: none;
        padding: 0 30px;
        position: relative;
    }

        #navbar li a {
            text-decoration: none;
            font-size: 18px;
            font-weight: 500;
            color: #1A1A1A;
            transition: 0.3s ease;
            font-family: 'Avenir';
        }

            #navbar li a:hover,
            #navbar li a.active {
                color: #4B1D4A;
            }

                #navbar li a.active::after,
                #navbar li a:hover::after {
                    content: "";
                    width: 40%;
                    color: #4B1D4A;
                    height: 2px;
                    background: #4B1D4A;
                    position: absolute;
                    bottom: -4px;
                    left: 20px;
                }

.logo {
    height: 15px;
}

/* HERO */
#heroImg {
    max-height: 600px;
}

#heroText {
    margin-top: 3em;
}

#heroPara {
    font-family: 'Avenir';
    font-size: 50px;
    margin-top: -0.5em;
    text-align: center;
}

/* Horario */
.ico {
    margin: 0 0 1em 0;
    height: 3vw;
}

.primaryBtn {
    background-color: #F4EBE6;
    border-color: transparent;
    color: black;
    font-weight: 600;
}

/* Vestidos */
.dresses-text {
    font-size: 20pt;
}

.imgDresses img {
    max-width: 100%;
    max-height: 100vh;
    width: auto;
    margin-bottom: 5em;
}

.dressItem {
    display: flex;
    margin-bottom: 3em;
}

.dressItem img {
    height: 5.5vw;
}

    .dressItem p {
        margin: 20px 10px 0 20px;
        font-weight: 500;
    }


@media (max-width: 1100px) {

    .screen-lg {
        display: none;
    }

    .screen-md {
        display: block;
    }

    screen-lg-md {
        display: block;
    }

    .screen-sm {
        display: none;
    }

    .subTitle {
        font-family: 'Avenir';
        font-size: 35px;
        margin-top: -0.5em;
    }

    p {
        margin: 1%;
        font-size: 12pt;
    }

    /* HERO */
    #heroImg {
        max-height: 30vw;
    }

    #heroText {
        margin-top: 3em;
    }

    #heroPara {
        font-family: 'Avenir';
        font-size: 3vw;
        margin-top: -0.5em;
        text-align: center;
    }

    /* PASOS */
    .dressItem p {
        margin: 15px 0px 0 15px;
        font-weight: 500;
    }
}

@media (max-width: 450px) {
    .screen-lg {
        display: none;
    }

    .screen-md {
        display: none;
    }

    .screen-lg-md {
        display: none;
    }

    .screen-sm {
        display: block;
    }

    .containerCS {
        margin: 1em 2em;
    }

    /* NAV BAR */
    #navbar li {
        list-style: none;
        margin: 10px 0px -10px 0;
    }

    .subTitle {
        font-family: 'Baskerville-Regular';
        font-size: 30px;
        margin-top: -0.5em;
    }

    p {
        margin: 1%;
        font-size: 10pt;
    }

    /* HERO */
    #heroImg {
        max-width: 110%;
        max-height: 100vh;
        width: auto;
        margin-bottom: 5em;
        margin-left: -1.4em;
    }

    .catalogBtn {
        background-color: #4B1D4A;
        border-color: transparent;
        color: white;
        font-weight: 700;
        font-size: 16pt;
    }


    /* Horario */
    .ico {
        margin: 0 0 1em 0;
        height: 8vw;
    }

    /* PASOS */
    .dressItem img {
        height: 15vw;
    }

    .dressItem p {
        margin: 15px 0px 0 15px;
        font-weight: 500;
    }

    /* Vestidos */
    .dresses-text {
        font-size: 25pt;
    }
}



/*checkbox to swtich from img to card*/
#chk{
    display: none;
}

.dress {
    display: block;
    max-width: 100%;
    margin-bottom: 1px;
}

#dress-name {
    font-size: calc(1.275rem + .3vw);
}

.dress-card {
    padding: 1em;
    margin-left: -6.5%;
    position: fixed;
    width: 100%;
    bottom: 0;
    transform: translateY(63%);
    transition: .8s ease-in-out;
}

.ico-size {
    height: 1.7em;
}

#chk:checked ~ .dress-card {
    transform: translateY(-0%);
}

a {
    text-decoration: none;
}