* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
    background-color: #f5f5f5;
    font-family: Arial;
}

.blank {
    height: 100px;
    width: 100%;
    background-color: #fff;
}

.header {
    width: 100%;
    background-color: #ffffffbd;
    position: absolute;
    z-index: 999;
    top: 0;
}

.navbar, .navbar-default {
    margin-bottom: 0;
}

.header-img {
    width: 101%;
    margin-left: -1%;
    margin-bottom: -0.3%;
}

.header-content-ul {
    margin: 0;
    font-size: 12px;
    font-weight: bold;
    list-style: none;
    justify-items: center;
    align-items: center;
}

    .header-content-ul > li > a {
        color: #707070;
        text-decoration: none;
    }

        .header-content-ul > li > a[class~="active"] {
            color: #0073bb;
            text-decoration: underline;
        }

.header > a {
    color: #c8c7c7;
}

.header-menu-2 {
    margin-top: 6.8%;
    color: #0769b2 !important;
    font-weight: bold;
}

    .header-menu-2 > a {
    }

.header-menu-3-icon {
    width: 7%;
    margin-right: 2%;
}

.header-menu-3-tienda, .header-menu-3-un {
    color: #8bb8db;
}

.header-menu-3-adopta {
    color: #0769b2;
    font-weight: bold;
}

.header-menu-3-movil {
    font-style: italic;
    color: #3695d9;
}

.header-mobile {
    display: none;
    width: 100%;
    grid-template-columns: 60% 20% 10% 10%;
    justify-items: center;
    align-items: center;
    border-bottom: 1px solid rgba(60, 60, 60, 0.31);
}

.header-mobile-menu {
    z-index: 999;
}

.header-mobile-links {
    display: none;
    grid-template-rows: repeat(2,1fr);
    margin: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.82);
    position: absolute;
    left: 0;
    right: 0;
    list-style-type: none;
    justify-items: center;
    align-items: center;
    height: 100%;
    bottom: 0;
}

.visible {
    display: grid;
}

.change .header-mobile-menu-bar1 {
    background-color: white;
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

.change .header-mobile-menu-bar2 {
    opacity: 0;
}

.change .header-mobile-menu-bar3 {
    background-color: white;
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}

.header-menu-1, .header-menu-2, .header-menu-3 {
    text-decoration: none;
}

.header-logo-img {
    height: 100%;
}

.hero {
    background-image: url(../img/index/Banner.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: -webkit-fill-available;
    display: grid;
    grid-auto-rows: 80% 1%;
    justify-items: center;
    align-items: center;
    padding: 15%;
    color: #0073bb;
}

.hero-2 {
    background-image: url(../img/index/Banner-2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: -webkit-fill-available;
    display: grid;
    grid-auto-rows: 80% 1%;
    justify-items: center;
    align-items: center;
    padding: 15%;
    color: #0073bb;
}


.hero-content {
    display: grid;
    grid-template-rows: 20% 20% 20%;
    margin: 10%;
    justify-items: center;
    align-items: center;
}

.grey {
    color: #707070;
}

.hero-title {
    font-size: 40px;
    letter-spacing: 8px;
}

.hero-title-signin {
    font-size: 30px;
    letter-spacing: 8px;
    margin-bottom: 5%;
}

.hero-subtitle {
    color: #0073bb;
}

.signin-hero-subtitle2 {
    color: #333;
}

.signin-hero-subtitle {
    color: #0073bb;
}

.line {
    border-bottom: 2px solid #0073bb;
    width: 24%;
}

.arrow:hover {
    animation-name: wiggle;
    animation-duration: 2s;
    cursor: pointer;
}

@keyframes wiggle {
    25% {
        transform: translateY(5px);
    }

    50% {
        transform: translateY(5px);
    }

    75% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(-5px);
    }
}

.products {
    width: 100%;
    background-color: #fff;
    display: grid;
    grid-template-rows: 1fr;
    justify-items: center;
    align-items: center;
}

.products-header {
    padding: 5%;
    color: #696969;
}

.products-header-title {
    border-left: 2px solid #ff9b00;
    font-size: xx-large;
    font-weight: 100;
    text-indent: 20px;
    color: #000;
}

.products-ofertas {
    display: grid;
    grid-template: repeat(2,1fr) / repeat(4,1fr);
    justify-items: center;
    align-items: center;
    text-align: center;
    color: #000;
    width: 100%;
}

.ofertas-item-1, .ofertas-item-2, .ofertas-item-3, .ofertas-item-4, .ofertas-item-5, .ofertas-item-6, .ofertas-item-7, .ofertas-item-8 {
    border: 1px solid #d6d6d6;
    width: 100%;
    margin: 0;
    padding: 0;
}

.ofertas-item-1-texto, .ofertas-item-2-texto, .ofertas-item-3-texto, .ofertas-item-4-texto, .ofertas-item-5-texto, .ofertas-item-6-texto, .ofertas-item-7-texto, .ofertas-item-8-texto {
    position: absolute;
    margin-top: -22.6%;
    min-width: 336px;
    max-width: 300px;
    min-height: 305px;
    max-height: 300px;
    background-color: #000000b3;
    display: grid;
    grid-template-rows: 60% 20% 10%;
    justify-items: center;
    align-items: center;
    opacity: 0;
}

    .ofertas-item-1-texto:hover, .ofertas-item-2-texto:hover, .ofertas-item-3-texto:hover, .ofertas-item-4-texto:hover, .ofertas-item-5-texto:hover, .ofertas-item-6-texto:hover, .ofertas-item-7-texto:hover, .ofertas-item-8-texto:hover {
        animation-name: show;
        animation-duration: 15s;
    }

@keyframes show {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 10;
    }

    20% {
        opacity: 20;
    }

    30% {
        opacity: 30;
    }

    40% {
        opacity: 40;
    }

    50% {
        opacity: 50;
    }

    60% {
        opacity: 60;
    }

    70% {
        opacity: 70;
    }

    80% {
        opacity: 80;
    }

    90% {
        opacity: 90;
    }

    100% {
        opacity: 100;
    }
}

.ofertas-item-1-texto-icon, .ofertas-item-2-texto-icon, .ofertas-item-3-texto-icon, .ofertas-item-4-texto-icon, .ofertas-item-5-texto-icon, .ofertas-item-6-texto-icon, .ofertas-item-7-texto-icon, .ofertas-item-8-texto-icon {
    margin-top: 25%;
}

.ofertas-item-img {
    width: 100%;
    max-width: 300px;
    min-width: 295px;
    min-height: 295px;
    max-height: 300px;
    width: 100%;
    margin: 0;
    padding: 0;
}

.ofertas-item-titulo {
    color: #f2f2f2;
}

.ofertas-item-precio {
    font-size: xx-large;
    color: #ff9c00;
}

.services {
    width: 100%;
    display: grid;
    grid-template-columns: 40% 60%;
    justify-items: center;
    align-items: center;
    background: #f0eeee;
}

.services-text {
    display: grid;
    grid-template-rows: 30% 20% 30%;
    align-items: center;
    padding: 5%;
    color: #696969;
    border: 1px solid #cccccc;
}

.services-text-title, .brands-text-title, .contact-text-head-title {
    border-left: 2px solid #ff9b00;
    font-size: xx-large;
    font-weight: 100;
    text-indent: 20px;
    color: #000;
}

.services-text-question, .brands-text-question, .contact-text-head-span {
    font-size: medium;
}

.services-text-1, .services-text-2 {
    font-size: small;
}

.services-items {
    display: grid;
    grid-template: repeat(2,1fr) / repeat(4,1fr);
    justify-items: center;
    align-items: center;
    font-size: 10px;
    width: 100%;
    height: 100%;
}

.services-items-1, .services-items-2, .services-items-3, .services-items-4, .services-items-5, .services-items-6, .services-items-7, .services-items-8 {
    width: 100%;
    height: 100%;
    border: 1px solid #cccccc;
    display: grid;
    grid-template-rows: 80% 2%;
    justify-items: center;
    align-items: center;
}

.services-items-1, .services-items-2 {
    border-bottom: 10px solid #0073bb;
}

.services-items-3, .services-items-4 {
    border-bottom: 10px solid #007c00;
}

.services-items-5, .services-items-6 {
    border-bottom: 10px solid #f59c0f;
}

.services-items-7, .services-items-8 {
    border-bottom: 10px solid #8cc8e5;
}

.brands {
    width: 100%;
    display: grid;
    grid-template-rows: 1fr;
    align-items: center;
    padding: 5%;
    color: #696969;
    background-color: #fff;
}

.brands-icons {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4,1fr);
}

.icon1, .icon2, .icon3, .icon4 {
    background-color: #ff9b00;
    width: 300px;
    height: 300px;
}

.advice {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    justify-items: center;
    align-items: center;
    background: #f0eeee;
    padding: 1%;
}

.advice-item1, .advice-item2, .advice-item3 {
    display: grid;
    grid-template-rows: repeat(3,1fr);
    justify-items: center;
    align-items: center;
    text-align: center;
}

.advice-item1-text, .advice-item2-text, .advice-item3-text {
    font-size: 15px;
    color: #696969;
}

.advice-item1-title, .advice-item2-title, .advice-item3-title {
    font-weight: 100;
}

.shop {
    width: 100%;
}

.shop-img {
    width: 100%;
}

.contact {
    padding: 5%;
    width: 100%;
    height: 500px;
    display: grid;
    background-color: #f0eeee;
    color: #696969;
    grid-template-columns: repeat(2,1fr);
}

.contact-text {
    display: grid;
    grid-template-rows: 30% 50%;
    justify-items: flex-start;
    align-items: center;
}

.contact-text-head {
    width: 100%;
    display: grid;
    align-items: center;
    grid-template-rows: 75% 25%;
}

.contact-text-head-title {
    margin-bottom: 2%;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
}

.contact-text-head-span {
    width: 50%;
    color: #656565;
}

.contact-text-body {
    color: #000;
    display: grid;
    width: 100%;
    grid-template-rows: 25% 25% 20% 30%;
    justify-items: flex-start;
    align-items: center;
}

.contact-text-body-title {
    font-weight: bold;
}

.contact-text-body-figure {
    width: 100%;
    margin: 0;
}

.contact-text-body-callme {
    margin-top: 3%;
    width: 30%;
    font-size: 12px;
    background: #ff9c00;
    padding: 1%;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    position: relative;
}

    .contact-text-body-callme:hover {
        transition-delay: 0.2s;
        transition: ease;
        border-bottom: 2px solid #d28204;
    }

.contact-form {
    display: grid;
    width: 100%;
    grid-template: 10% 20% 10% 40% 20%/repeat(2,1fr);
    grid-template-areas: "nspan espan" "ninput einput" "tspan tspan" "tinput tinput" "button .";
    align-items: center;
}

.contact-form-name-span {
    grid-area: nspan;
}

.contact-form-name-input {
    grid-area: ninput;
    width: 90%;
    height: 60%;
}

.contact-form-email-span {
    grid-area: espan;
}

.contact-form-email-input {
    grid-area: einput;
    width: 90%;
    height: 60%;
}

.contact-form-text-span {
    grid-area: tspan;
}

.contact-form-text-input {
    grid-area: tinput;
    height: 100px;
    padding: 12px 10px;
    box-sizing: border-box;
    resize: none;
}


.contact-form-button {
    background: #009dde;
    border: none;
    width: 70%;
    padding: 1%;
    overflow: hidden;
    border-radius: 5px;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

.form-button {
    background: #009dde;
    border: none;
    width: 25%;
    height: 100%;
    overflow: hidden;
    border-radius: 5px;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

.contact-form-button-img {
    margin-left: -63%;
}

    .contact-form-button-img:hover {
        animation-name: wiggle;
        animation-duration: 2s;
    }

.form-button-img:hover {
    animation-name: wiggle;
    animation-duration: 2s;
}

.form-button:hover {
    transition-delay: 0.2s;
    transition: ease;
    border-bottom: 2px solid #0472a0;
}

.contact-form-button:hover {
    transition-delay: 0.2s;
    transition: ease;
    border-bottom: 2px solid #0472a0;
}

.contact-form-button-span {
    margin-top: 0.6%;
    position: absolute;
}


.footer {
    width: 100%;
    display: grid;
    grid-template-columns: 70% 30%;
    align-items: center;
    background: #292929;
    padding: 5%;
    color: #696969;
}

.footer-info {
    height: 100%;
    display: grid;
    grid-template-rows: 15% 40% 30%;
}

.footer-info-email {
    border-bottom: 1px solid #8d8d8d;
    border-top: none;
    border-left: none;
    border-right: none;
    background: transparent;
    width: 80%;
}

    .footer-info-email::placeholder {
        color: #4c4b4b;
        font-size: 40px;
        font-weight: 100;
    }

    .footer-info-email:focus {
        outline: none;
        color: #fff;
        font-size: 40px;
    }

.footer-info-copyright {
    margin-top: 3%;
    color: #5e5e5e;
}

.footer-links {
    margin-bottom: 3%;
}

    .footer-links > ul {
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: 25% 15% 27%;
    }

        .footer-links > ul > li {
            list-style: none;
        }

            .footer-links > ul > li > a {
                text-decoration: none;
                color: #fff;
            }

.footer-social {
    display: grid;
    grid-template-rows: 60% 20% 20%;
    justify-items: center;
    align-items: center;
}

.footer-social-logo {
    width: 65%;
}

.modal-login {
    color: #636363;
    width: 350px;
}

    .modal-login .modal-content {
        padding: 20px;
        border-radius: 5px;
        border: none;
    }

    .modal-login .modal-header {
        border-bottom: none;
        position: relative;
        justify-content: center;
    }

    .modal-login h4 {
        text-align: center;
        font-size: 26px;
        margin: 30px 0 -15px;
    }

    .modal-login .form-control:focus {
        border-color: #70c5c0;
    }

    .modal-login .form-control, .modal-login .btn {
        min-height: 40px;
        border-radius: 3px;
    }

    .modal-login .close {
        position: absolute;
        top: -5px;
        right: -5px;
    }

    .modal-login .modal-footer {
        background: #ecf0f1;
        border-color: #dee4e7;
        text-align: center;
        justify-content: center;
        margin: 0 -20px -20px;
        border-radius: 5px;
        font-size: 13px;
    }

        .modal-login .modal-footer a {
            color: #999;
        }

    .modal-login .avatar {
        position: absolute;
        margin: 0 auto;
        left: 0;
        right: 0;
        top: -70px;
        width: 95px;
        height: 95px;
        border-radius: 50%;
        z-index: 9;
        background: #60c7c1;
        padding: 15px;
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
    }

        .modal-login .avatar img {
            width: 100%;
        }

    .modal-login.modal-dialog {
        margin-top: 80px;
    }

    .modal-login .btn {
        color: #fff;
        border-radius: 4px;
        background: #60c7c1;
        text-decoration: none;
        transition: all 0.4s;
        line-height: normal;
        border: none;
    }

        .modal-login .btn:hover, .modal-login .btn:focus {
            background: #45aba6;
            outline: none;
        }

.trigger-btn {
    display: inline-block;
}

div[data-acc-content] {
    display: none;
}

div[data-acc-step]:not(.open) {
    background: #f2f2f2;
}

    div[data-acc-step]:not(.open) > div[data-acc-content] {
        display: none !important;
    }

    div[data-acc-step]:not(.open) h5 {
        color: #777;
    }

    div[data-acc-step]:not(.open) .badge-primary {
        background: #ccc;
    }

.form {
    display: grid;
    grid-template-rows: repeat(2,auto);
    justify-items: center;
    align-items: center;
}

.form-signin {
    padding: 4%;
    margin: 2%;
    background: #fff;
    width: 75%;
}

.form-signin-header {
    padding: 3%;
    text-align: center;
    padding: 1%;
    margin: 3%;
    text-align: center;
    border: 2px solid #009dde;
    border-radius: 5px;
}

.form-sigin-inputs-names-input, .form-sigin-inputs-company-input, .form-sigin-inputs-address-input {
    line-height: 1.5;
    color: #666;
    background-color: transparent;
    background-clip: padding-box;
    border: 0rem solid transparent;
    border-radius: 0;
    box-shadow: inset 0 -1px 0 #ddd;
    width: 100%;
    margin-bottom: 1%;
}


input.form-signin-next-btn {
    display: none;
}

.form-sigin-footer {
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-rows: repeat(2,auto);
    padding: 2%;
    margin: 1%;
}

.form-signin-button {
    background: #009dde;
    border: none;
    width: 25%;
    height: 100%;
    overflow: hidden;
    border-radius: 5px;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    padding: 0.5%;
}

.form-signin-next-btn {
    color: #337ab7;
    font-weight: bold;
    font-size: large;
}

    .form-signin-next-btn:hover {
        text-decoration: none;
        color: #1c4568;
    }

.form-signin-before-btn {
    color: #337ab7;
    font-weight: bold;
    font-size: large;
    float: right;
}

.acc-step-number {
    background-color: #009dde;
}

.form-signin-before-btn:hover {
    text-decoration: none;
    color: #1c4568;
}

.form-signin-button-img:hover {
    animation-name: wiggle;
    animation-duration: 2s;
}

.form-signin-button:hover {
    transition-delay: 0.2s;
    transition: ease;
    border-bottom: 2px solid #0472a0;
}

.signinok-title {
    text-align: center;
    color: #0073bb;
    padding: 1%;
    font-size: 22px;
}

.signinok-subtitle {
    text-align: center;
    color: #333;
}

.signinok-content {
    display: grid;
    grid-template-rows: repeat(3,auto);
    justify-items: center;
    align-items: center;
    padding: 5%;
    padding-top: 2%;
    background: #fff;
    margin-bottom: 3%;
    margin-top: 3%;
}

.signinok-content-text {
    padding: 1%;
    text-align: justify;
    width: 80%;
}

.signinok-content-button {
    margin: 1%;
    margin-bottom: 2%;
    background: #009dde;
    border: none;
    width: 25%;
    height: 50%;
    overflow: hidden;
    border-radius: 5px;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
}

.signinok-content-adobe {
    width: 80%;
    text-align: justify;
    padding: 1%;
}

.signinok-content-adobe-button {
    font-size: large;
    font-weight: bold;
}

.signinok-content-adobe-button:hover {
    text-decoration:none;
    color:#1c4568;
}

.terms-content, .legal-content, .privacy-content {
    padding: 5%;
    text-align: justify;
}

.terms-content-tittle, .legal-content-tittle, .privacy-content-tittle {
    color: #0472a0;
    font-size: 22px;
}

.terms-content-text > li {
    list-style: none;
}

@media (min-width: 768px) {
    .navbar-collapse.collapse {
        height: 90px !important;
    }

    .navbar {
        height: 90px;
    }

    .navbar-header {
        height: 90px;
    }

    .navbar-brand {
        height: 100%;
    }

    .navbar-nav > li > a {
        padding-top: 35px;
        padding-bottom: 35px;
    }
}