:root {
    --color-first: #ff0000;
}
.nav-header {
    margin-top: 8px;
    background-color: #ffffff;
    border-bottom: 1px solid #eeeeee;
}
.nav-content .logo-principal {    
    width: 120px;
    height: 80px;
    background-size: 120px 80px;
    background-repeat: no-repeat;
}
.list-one .nav-item {
    padding: 0 16px;
}
.list-one .nav-item:nth-child(4) {
    border-right: 0 solid #eeeeee;
}
.list-one .nav-link {
    color: #000000;
    font-weight: 500;
    padding: 8px 16px;
}
.list-one .nav-link:hover {
    color: #ffffff;
    background-color: var(--color-first);
}
.list-two .nav-link {
    display: flex;
}
.nav-link .icono {
    width: 19px;
    height: 19px;
    background-size: 19px 19px;
    border-radius: 2px;
    display: inline-block;
}
.nav-link .icono-facebook {
    background-image: url('/img/iconos/facebook-gray.svg');
}
.nav-link .icono-facebook:hover {
    background-image: url('/img/iconos/facebook-blue.svg');
}
.nav-link .icono-whatsapp {
    background-image: url('/img/iconos/whatsapp-gray.svg');
}
.nav-link .icono-whatsapp:hover {
    background-image: url('/img/iconos/whatsapp-green.svg');
}
.carousel-caption {
    top: 30%;
}
.carousel .banner-primary {
    width: 100%;
    height: 84vh;
    object-fit: cover;
}
.carousel-caption .text {
    text-shadow: 1px 1px 1px #444;
}
.carousel-caption .title-one {
    color: var(--color-first);
    font-weight: bold;
    font-size: 50px;    
}
.carousel-caption .subtitle-one {
    color: #000000;
    font-size: 25px;
}
.subtitle-one .icono-click {
    width: 4%;
    box-shadow: 1px 1px 1px;
    border-radius: 50%;
    position: relative;
    bottom: 2px;
}
.carousel-indicators .item-circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.text-introduction {
    text-align: center;
}
.block-one,
.block-two {
    display: flex;
    flex-direction: column;
    padding: 40px 0 0;
}
.block-two {
    padding: 40px 0;
}
.logo-school {
    width: 20%;
    align-self: center;
    padding: 20px 0;
}
.text-black {
    font-size: 20px;
}
.red-modify {
    font-size: 18px;
}
.img-fluid.banner-complementary {
    height: 94vh;
}
.icono-carrito {
    width: 2%;
}
.text-red {
    color: var(--color-first);
}
.size-one {
    font-size: 24px;
}
.imagen-circular {
    border-radius: 50%;
    width: 250px;
    height: 250px;
    background-size: 100% 100%;
}
.alineacion-circular {
    align-items: center;
}
.circular-mini {
    width: 14%;
    align-self: center;
}
.mini-one {
    align-self: flex-end;
}
.mini-three {
    align-self: flex-start;
}
.block-center {
    display: flex;
    justify-content: center;
}
.info-circular {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.title-circular {
    padding: 16px 0;
}
.title-plus {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.content-eleccion #imagen {
    background-size: 92% 100%;
    background-repeat: no-repeat;
}
.content-eleccion .eleccion-1 {
    background-image: url('/img/cuadrados/nosotros/cuadrado-1.jpg');
}
.content-eleccion .eleccion-1:hover {
    background-image: url('/img/cuadrados/nosotros/transparente-1.jpg');
}
.content-eleccion .eleccion-2 {
    background-image: url('/img/cuadrados/nosotros/cuadrado-2.jpg');
}
.content-eleccion .eleccion-2:hover {
    background-image: url('/img/cuadrados/nosotros/transparente-2.jpg');
}
.content-eleccion .eleccion-3 {
    background-image: url('/img/cuadrados/nosotros/cuadrado-3.jpg');
}
.content-eleccion .eleccion-3:hover {
    background-image: url('/img/cuadrados/nosotros/transparente-3.jpg');
}
div#imagen {
    width: 92%;
    height: 555px;
    margin: 0;
    padding: 0;
}
div#content-imagen {
    position:absolute;
    overflow:hidden;
    width: 92%;
    height: 555px;
    opacity:0;
    transition: opacity 0.3s;
    margin-left: 0px;
}
div#imagen:hover div#content-imagen {
    opacity: 1;
}
p#button {
    position: absolute;
    /* margin-left: -75px; */
    margin-top: 80px;
    transition: margin-left 0.3s;
    font-size: 34px;
    width: 100%;
    text-align: center;
}
div#imagen:hover p#button {
    margin-left: 0;
}
p#description {
    font-size: 1rem;
    text-align: center;
    margin-top: 200px;
    transition: margin-top 0.4s;
}
div#imagen:hover p#description {
    margin-top: 110px;
    font-size: 28px;
}
div#imagen.eleccion-1:hover p#description{
    color: #33cc33;
}
div#imagen.eleccion-2:hover p#description{
    color: #ff6600;
}
div#imagen.eleccion-3:hover p#description{
    color: #fa030b;
}
div#imagen div#content-imagen p#button a > img {
    width: 65px;
}
.logo-titular {
    width: 20%;
}
.btn.btn-oso,
.btn.btn-click {
    background-color: red;
    color: white;
    border-radius: 30px;
    width: 20%;
    align-self: center;
}
.btn.btn-oso {
    width: 60%;
}
.btn-oso img {
    width: 28%;
}
.div-form label {
    width: 28%;
}
.div-button {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.div-button a {
    font-size: 14px;
    color: black;
}
.div-button a:hover {
    text-decoration: none;
    color: red;
}
.btn-click img {
    width: 11%;
}
.form-control.modidy-form {
    display: inline-block;
    width: 70%;
    border-radius: 30px;
}

.content-imagen {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
}
.content-imagen figure {
    position: relative;
    height: 250px;
    width: 250px;
    overflow: hidden;
    border-radius: 50%;
    /*box-shadow: 0 15px 20px rgba(0,0,0,0.50);*/
    margin: 0;
}
.content-imagen figure img {
    width: 100%;
    height: 100%;
    transition: all 500ms ease-out;
}
.alineacion-circular:hover .content-imagen .subcontent-home > img {
    transform: scale(1.3);
}
.alineacion-circular:hover .text-buy {
    color: var(--color-first);
    transition: all 500ms ease-out;
}
.block-text {
    color: inherit;
}
.block-text:hover {
    text-decoration: none;
}
.btn-link {
    display: flex;
    justify-content: center;
}
.alineacion-circular:hover .btn-link,
.alineacion-circular:hover .link-modal {
    transform: scale(1.3);
    transition: all 500ms ease-out;
}
.content-promotion {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.price-before,
.price-promotion,
.price-today,
.border-discount,
.download-link {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.price-before > span:first-child {
    font-size: 12px;
}
.price-before span:nth-child(2) {
    font-size: 15px;
}
.price-before > span > span:first-child {
    font-size: 17px;
    text-transform: uppercase;
}
.price-before del {
    font-size: 23px;
}
.price-promotion > span {
    font-size: 13px;
    padding-bottom: 5px;
}
.border-discount {
    border: 1px solid var(--color-first);
    padding: 5px 10px 10px;
    border-radius: 10px;
}
.border-discount span:first-child {
    font-size: 31px;
}
.border-discount span:nth-child(2) {
    font-size: 13px;
}
.price-today > span:first-child {
    font-size: 17px;
}
.price-today > span:nth-child(2) {
    font-size: 15px;
}
.price-today > span > span:first-child {
    font-size: 15px;
    text-transform: uppercase;
}
.price-today > span > span:nth-child(2) {
    font-size: 23px;
}
.price-today span:nth-child(4) {
    font-size: 8px;
}
.price-today img {
    width: 20px;
}
.content-button {
    align-items: center;
    padding: 20px;
}
.content-button > span:first-child {
    font-size: 14px;
}
.content-button > span:nth-child(2) {
    padding-bottom: 5px;
}
.content-button > span > span:first-child {
    font-size: 19px;
}
.content-button > span > span:nth-child(2) {
    font-size: 29px;
}
.btn.btn-store {
    border-radius: 20px;
    background-color: var(--color-first);
    color: #ffffff;
}
.btn.btn-store:hover {
    color: #ffffff;
}
.btn-store img {
    width: 30px;
}
.content-button span:nth-child(4) {
    padding: 10px 0;
    font-size: 14px;
}
.content-link {
    padding: 10px;
}
.content-link .circular-mini {
    width: 20%;
}
.modal.fade.show {
    padding-left: 17px;
}
.content-close {
    background-color: var(--color-first);
    display: flex;
    width: 25px;
    height: 25px;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    text-shadow: 0 0 black;
    border-radius: 50%;
}
.content-close > span {
    position: relative;
    bottom: 0;
    left: 0;
    font-size: 23px;
}
.block-flotante {
    padding-top: 5px;
    border-right: 1px solid #dee2e6;
}
.download-link {
    font-size: 12px;
    color: inherit;
}
.download-link:hover {
    color: var(--color-first);
    text-decoration: none;
}
.col-md-8.block-detail {
    padding-left: 60px;
}
.block-paragraph p {
    margin-bottom: 16px;
}
.link-modal {
    cursor: pointer;
    display: flex;
    justify-content: center;
}
.action-modal {
    cursor: pointer;
}
.alineacion-circular:hover .content-imagen .sub-content > img {
    transform: rotateZ(15deg);
    transition: all 300ms ease-out;
}
.alineacion-circular:hover .content-imagen .sub-content > .circular-360 {
    transform: rotateZ(360deg);
    transition: all 600ms ease-out;
}    

.modal.fade .modal-header {
    border-bottom: 0px;
    padding-bottom: 0;
    
}
/*footer {
    background-color: whitesmoke;
    background-image: url('/img/background-footer.jpg');
    height: 560px;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}
.container-footer {
    height: 560px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.row-one ul,
.row-two ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    justify-content: center;
}
.row-one ul li,
.row-two ul li {
    list-style: none;
}
.row-one ul li a,
.row-two ul li a {
    padding: 5px 10px;
    text-decoration: none;
}
footer .row-two span {
    font-size: 70px;
}
.row-three {
    display: flex;
}
.line-footer:hover {
    color: red;
}*/

footer {
    background-image: url('/img/background-footer.webp');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    background-attachment: fixed;
    background-position-y: top;
}
.row.footer-main {
    padding: 70px 0 62px;
    margin: 0;
}
.container-footer {
    padding: 30px 20px;
}
.container-footer span {
    font-size: 18px;
    color: #ffffff;
}
.links-footer {
    padding: 0;
}
.item-footer {
    list-style: none;
}
.item-footer a {
    text-decoration: none;
    color: #bababa;
    font-size: 15px;
}
.item-footer a:hover {
    text-decoration: none;
    color: var(--color-first);
}
.input-subscribe {
    display: flex;
    margin-top: 4px;
    justify-content: center;
}
.input-subscribe input { 
    width: 80%;
    border-radius: 4px 0px 0px 4px;
    outline: none;
}
.btn.btn-email {
    background-color: var(--color-first);
    border-radius: 0px 4px 4px 0px;
}
.container-footer p {
    margin: 0;
    color: #bababa;
    font-size: 14px;
    padding-top: 4px;
}
.background-color {
    background-color: rgba(255 0 0 / 60%);
    border-radius: 4px;
}
.line-footer {
    background-color: #ffffff;
    margin: 0;
}
.row.footer-bottom {
    padding: 30px 0;
    color: #ffffff;
    align-items: center;
}
.social-media {
    display: flex;
    margin: 0;
    justify-content: flex-end;
}
.social-media .item-social {
    list-style: none;
}
.social-media .link-social {
    padding: 0 10px;
}
.social-media a svg circle {
    stroke: #bababa;
}
.social-media a svg  path {
    fill: #bababa;
}
.social-media a:hover svg circle {
    stroke: var(--color-first);
}
.social-media a:hover svg path {
    fill: var(--color-first);
}

@media (max-width: 600px) {
    footer,
    .container-footer {
        height: auto;
        background-attachment: unset;
        background-size: 100% 100%;
    }
    .line-footer {
        color:white;
    }
    footer .row-two span {
    font-size: 30px;
    }
}