:root {
    --bs-shm-gray: #c0c0c0;
    --bs-shm-lightgray: #f0f0f0;
    --bs-shm-wine: #8a414a;
    --bs-shm-dark: #111111;
    --bs-shm-gray-rgb: 192, 192, 192;
    --bs-shm-lightgray-rgb: 240, 240, 240;
    --bs-shm-wine-rgb: 138, 65, 74;
    --bs-shm-dark-rgb: 17, 17, 17;
}

@font-face {
    font-family: 'Comfortaa';
    font-weight: 300;
    font-weight: 400;
    font-weight: 500;
    font-style: normal;
    src: url(../fonts/Comfortaa-VariableFont_wght.ttf);
}

body {
    background-color: var(--bs-shm-lightgray);
    font-family: Montserrat, sans-serif
    /* font-family: 'Comfortaa', cursive; */
}

.text-shm-wine {
    color: var(--bs-shm-wine);
}

.text-shm-wine-b {
    color: var(--bs-shm-wine)!important;
    font-weight: bold;
}

.t-shm-g {
    color: #858585;
    text-decoration: none
}

a.t-shm-g:hover {
    color: #636363;
    text-decoration: none
}

.tittle-sa {
    color: #8a414a;
}

.btn-shm {
    color: #fff;
    background-color: #8a414a;
    border-color: #7a363e;
}

.btn-shm:hover {
    color: #fff;
    background-color: #a04852;
    border-color: #7a373f;
}

.check-shm {
    text-align: start;
    font-size: 0.8em;
    color: #83565c;
}

.check-shm .form-check-input:checked {
    background-color: #a04852;
    border-color: #7a373f;
}

.check-shm .form-check-input:focus {
    border-color: #a04852;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(160 72 82 / 25%);
}

.wrong_mail {
    color: #830505;
    font-weight: bold;
}

#loader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-position-x: 50%;
    background-position-y: 50%;
    background-color: #fff;
    background-repeat: no-repeat;
    background-image: url(../resources/logos/wait.gif);
    background-size: 10em
}

.hero {
    position: relative;
    top: 0;
    left: 0;
    height: 75vh;
    width: 100%;
}

.hero .bg-hero {
    height: 100%;
    background-size: cover;
    background-image: url(../resources/bg/main-big-blur.png);
    background-color: rgba(0, 0, 0, 1);
    background-position: center center;
    background-repeat: no-repeat;
}

.bg-hero .main-logo {
    position: absolute;
    height: 12em;
    width: 30em;
    top: 25vh;
    left: calc(50% - 15em);
    background-image: url(../resources/logos/900px_negro.png);
    background-size: contain;
    background-repeat: no-repeat;
    overflow: hidden
}

@media (max-width:1020px) {
    .hero .bg-hero {
        height: 100%;
        background-image: url(../resources/bg/main-md.png);
        background-color: rgba(0, 0, 0, 1);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover
    }
    .bg-hero .main-logo {
        height: 10em;
        width: 15em;
        top: 30vh;
        left: calc(50% - 7.5em)
    }
}

@media (max-width:425px) {
    .hero .bg-hero {
        background-image: url(../resources/bg/main-small.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover
    }
    .bg-hero .main-logo {
        height: 10em;
        width: 15em;
        top: 30vh;
        left: calc(50% - 7.5em);
    }
}


/* NAVBAR CONTENT */

.navbar-shm {
    font-family: 'Comfortaa';
    text-transform: uppercase;
    text-align: center;
    font-weight: 300;
    background-color: rgba(240, 240, 240, 1)!important;
    color: black;
}

.navbar-shm * {
    box-sizing: border-box;
    transition: all .35s ease;
}

.navbar-shm li {
    display: inline-block;
    list-style: outside none none;
    margin: .5em 1em;
    padding: 0;
}

.navbar-shm a {
    padding: .5em .8em;
    color: rgba(17, 17, 17, .8);
    position: relative;
    text-decoration: none;
    font-size: 20px;
}

.navbar-shm a::before,
.navbar-shm a::after {
    content: '';
    height: 14px;
    width: 14px;
    position: absolute;
    transition: all .35s ease;
    opacity: 0;
}

.navbar-shm a::before {
    content: '';
    right: 0;
    top: 0;
    border-top: 3px solid #8a414a;
    border-right: 3px solid #813942;
    transform: translate(-100%, 50%);
}

.navbar-shm a:after {
    content: '';
    left: 0;
    bottom: 0;
    border-bottom: 3px solid #813942;
    border-left: 3px solid #8a414a;
    transform: translate(100%, -50%)
}

.navbar-shm a:hover:before,
.navbar-shm a:hover:after {
    transform: translate(0, 0);
    opacity: 1;
}

.navbar-shm a:hover {
    color: #8a414a;
}

.bg-navbar-shm {
    background-color: rgba(240, 240, 240, 1)!important;
}

.navbar-shm .navbar-nav {
    color: rgba(17, 17, 17, 0.55);
}

.navbar-shm .navbar-nav .nav-link:focus {
    color: rgba(17, 17, 17, 0.7);
}

.navbar-shm .navbar-nav .nav-link.disabled {
    color: rgba(17, 17, 17, 0.3);
}

.navbar-shm .navbar-nav .show>.nav-link,
.navbar-shm .navbar-nav .nav-link.active {
    color: rgba(17, 17, 17, 0.9);
}

.navbar-shm .navbar-toggler {
    color: rgba(17, 17, 17, 0.55);
    border-color: rgba(17, 17, 17, 0.1);
}

.navbar-shm .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-shm .navbar-text {
    color: rgba(17, 17, 17.55);
}

.navbar-shm .navbar-text a,
.navbar-shm .navbar-text a:focus {
    color: rgba(17, 17, 17, 0.9);
}

@media (max-width:1024px) {
    .navbar-shm {
        font-size: 0.2em;
    }
}


/* / NAVBAR CONTENT */


/* FORMATO TARJETA */

.card-shm {
    width: 80vw;
    margin: 5rem;
    background-color: #e2e2e2!important;
    font-family: 'Comfortaa';
    font-weight: 300;
}

.bg-shm {
    background-color: #8a414a;
}


/* / FORMATO TARJETA */


/* ENCABEZADOS */


/* Ajustr Global */

.px-tittle {
    position: relative;
    font-size: 3em;
    font-family: 'Comfortaa', cursive;
    text-transform: uppercase;
    text-align: center;
    font-weight: 800;
    background-color: rgba(240, 240, 240, .8)!important;
}


/* ///  ERP  /// */


/* Image */

.erp-p {
    /* The image used */
    background-image: url("../resources/bg/px-erp.png");
    /* Set a specific height */
    min-height: 600px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media (max-width:1020px) {
    .erp-p {
        background-image: url(../resources/bg/px-erp.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover
    }
}

@media (max-width:425px) {
    .erp-p {
        background-image: url(../resources/bg/px-erp-small.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover
    }
}


/* Texto */

#ERP p {
    position: absolute;
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    text-shadow: 4px 4px 5px rgba(1, 1, 1, 1);
}


/* /// ERP  /// */


/* ///  SEC  /// */


/* Image */

.sec-p {
    /* The image used */
    background-image: url("../resources/bg/px-seg.png");
    /* Set a specific height */
    min-height: 600px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media (max-width:1020px) {
    .sec-p {
        background-image: url(../resources/bg/px-seg.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover
    }
}

@media (max-width:425px) {
    .sec-p {
        background-image: url(../resources/bg/px-seg-small.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover
    }
}


/* Texto */

#Seguridad p {
    position: absolute;
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    text-shadow: 4px 4px 5px rgba(1, 1, 1, 1);
}


/* ///  SEC  /// */


/* ///  DB  /// */

.db-p {
    /* The image used */
    background-image: url("../resources/bg/px-db.png");
    /* Set a specific height */
    min-height: 600px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media (max-width:1020px) {
    .db-p {
        background-image: url(../resources/bg/px-db.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover
    }
}

@media (max-width:425px) {
    .db-p {
        background-image: url(../resources/bg/px-db-small.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover
    }
}


/* Texto */

#DB p {
    position: absolute;
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    text-shadow: 4px 4px 5px rgba(1, 1, 1, 1);
}


/* ///  DB  /// */


/* ///  US  /// */

.Nosotros-p {
    /* The image used */
    background-image: url("../resources/bg/px-us.png");
    /* Set a specific height */
    min-height: 600px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media (max-width:1020px) {
    .Nosotros-p {
        background-image: url(../resources/bg/px-us.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover
    }
}

@media (max-width:425px) {
    .Nosotros-p {
        background-image: url(../resources/bg/px-us-mobile.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover
    }
}


/* Texto */

#Nosotros p {
    position: absolute;
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    text-shadow: 4px 4px 5px rgba(1, 1, 1, 1);
}

.mision .card-text {
    text-align: center;
    color: #212529;
    background-color: #f0f0f0;
    margin: 2rem;
    padding: 1rem;
}


/* ///  US  /// */


/* ///  CONTACTO  /// */

.Contacto-p {
    /* The image used */
    background-image: url("../resources/bg/px-contact.png");
    /* Set a specific height */
    min-height: 600px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media (max-width:1020px) {
    .Contacto-p {
        background-image: url(../resources/bg/px-contact.png);
        background-attachment: fixed;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover
    }
}

@media (max-width:425px) {
    .Contacto-p {
        background-image: url(../resources/bg/px-contact-small.png);
        background-attachment: fixed;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover
    }
}


/* Texto */

#Contacto p,
#Contacto-sa p {
    position: absolute;
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    text-shadow: 4px 4px 5px rgba(1, 1, 1, 1);
}


/* ///  CONTACTO  /// */


/*  / ENCABEZADOS */

#nosotros {
    padding: 1rem 0;
    margin: 4rem 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 25rem
}

#nosotros .container {
    max-width: 90%;
    padding: 1em;
    background-color: #fff
}

#nosotros p {
    font-size: 1.15em;
    font-weight: 300
}

#nosotros img {
    height: 4.5em
}

@media(max-width:1020px) {
    #nosotros .container {
        max-width: 85%;
        padding: 1em;
    }
    #nosotros p {
        font-size: 1em;
    }
}

@media(max-width:425px) {
    #nosotros .container {
        max-width: 90%;
        padding: 0.5em;
    }
    #nosotros p {
        font-size: 0.75em;
    }
}

.main-foot {
    min-height: 50px;
}

#credits {
    display: table;
}

.credits-content {
    display: table-cell;
    vertical-align: middle;
}

.brand:hover {
    color: var(--bs-shm-wine);
}

.heart {
    font-size: 0.9em;
    color: #7e6d6d;
    transform-origin: center;
}

.heart:hover {
    font-size: 0.9em;
    color: #d12424;
    animation: beat .25s infinite alternate;
    transform-origin: center;
}


/* Heart beat animation */

@keyframes beat {
    to {
        transform: scale(1.5);
    }
}