@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500&display=swap');
    @font-face {
        font-family: Gilsan;
        src: url('../css/fonts/GILL-SANS-MT.TTF');
    }
    
    @font-face {
        font-family: GilsanBold;
        src: url('../css/fonts/GILLUBCD.TTF');
    }
    
    html {
        min-height: 100%;
        position: relative;
    }
    
    body {
        margin: 0;
        overflow-x: hidden;
    }
    
    img,
    embed,
    object,
    video {
        max-width: 100%;
    }
    
    body>.container {
        max-width: 85% !important;
        margin-top: 10px;
    }
    
    #logotipo {
        margin: 15px;
    }
    
    .titulo {
        font-family: 'Oswald', sans-serif !important;
        font-weight: 500;
        text-align: center;
    }
    
    .subtitulo {
        font-family: 'Oswald', sans-serif !important;
        font-weight: 400;
        font-size: 20px;
    }
    
    .texto {
        font-family: 'Oswald', sans-serif !important;
        font-weight: 400;
        font-size: 18px;
        text-align: justify;
    }
    
    .dropdown-item {
        font-family: 'Oswald', sans-serif !important;
        font-weight: 400;
        font-size: 18px;
    }
    
    .subtitulo-h4 {
        font-family: 'Oswald', sans-serif !important;
        font-weight: 400;
    }
    
    .contenido {
        font-family: Gilsan;
        font-size: 18px;
        font-style: italic;
    }
    
    hr.orbitline {
        border-top: 1px dotted #555d8e;
    }
    
    .parrafo {
        font-size: 22px;
        padding: 15px;
        margin-left: 20px;
        line-height: 40px;
        color: #fff;
        text-align: justify;
    }
    
    #centinela {
        background-image: url('../img/centinela.jpg');
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center;
        height: 340px;
    }
    
    #leyenda {
        background-image: url('../img/leyenda-centro-comando.jpg');
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center;
        height: 340px;
    }
    
    #cabecera {
        background-image: url('../img/background-orbitkeeper.jpg');
        width: 99.99%;
    }
    
    #footer {
        margin-top: 15px;
        background-image: url('../img/background-orbitkeeper.jpg');
        color: #fff;
        position: relative;
        bottom: 0;
        display: block;
    }
    
    #footer>.row>div {
        margin-top: 15px;
        text-align: center;
    }
    
    #footer label {
        text-align: center;
        line-height: 40px;
        font-family: 'Oswald', sans-serif !important;
        font-weight: 400;
    }
    
    .card-seguridad {
        position: relative;
        display: flex;
        flex-direction: column;
        min-width: 0;
        word-wrap: break-word;
        background-color: #fff;
        background-clip: border-box;
        border: 1px solid rgba(0, 0, 0, .125);
        border-radius: 0.25rem;
        height: 550px;
    }
    
    .card-seguridad:hover,
    .card-simple:hover {
        background-color: #7271b5;
        margin-top: -20px;
    }
    
    .card-simple {
        padding: 0;
        position: relative;
        display: flex;
        flex-direction: column;
        min-width: 0;
        word-wrap: break-word;
        background-color: #fff;
        background-clip: border-box;
        /*border: 1px solid rgba(0, 0, 0, .125);*/
        border-radius: 0.25rem;
        /*max-height: 450px;*/
    }
    
    .card {
        width: 100%;
        margin: 0 auto;
        height: 425px !important;
    }
    
    .card-plus {
        height: 450px !important;
    }
    
    .card-img-top:hover {
        opacity: 80%;
    }
    
    .nav-link {
        font-family: 'Oswald', sans-serif !important;
        font-weight: 500;
        font-size: 18px !important;
    }
    
    .navbar-collapse {
        flex-grow: 0 !important;
    }
    
    .nav-item {
        padding-left: 50px;
    }
    
    .nav-link:hover {
        border-bottom: #555d8e dotted 2px;
        color: #555d8e !important;
    }
    
    .navbar-nav {
        padding-right: 150px !important;
    }
    
    .nav-link.active {
        color: #555d8e !important;
        font-weight: bold;
    }
    
    .whatsapp {
        position: fixed;
        width: 60px;
        height: 60px;
        bottom: 40px;
        right: 40px;
        background-color: #25d366;
        color: #FFF;
        border-radius: 50px;
        text-align: center;
        font-size: 30px;
        z-index: 100;
    }
    
    .whatsapp-icon {
        margin-top: 13px;
    }
    
    .vueperslides {
        width: 100%;
    }
    
    .vueperslides__arrows>.vueperslides__arrow--prev {
        background-image: url('../img/arrow-prev.png');
        background-repeat: no-repeat;
        width: 47px !important;
        height: 78px !important;
    }
    
    .vueperslides__arrows>.vueperslides__arrow--next {
        background-image: url('../img/arrow-next.png');
        background-repeat: no-repeat;
        width: 47px !important;
        height: 78px !important;
    }
    
    .vueperslide__title {
        background-color: red !important;
        height: 100px;
        width: 250px;
    }
    /* HACK TEXTO UNDEFINED */
    
    .vueperslide {
        color: transparent !important;
    }
    
    .centrar-imagen>img {
        display: block;
        margin: 0 auto;
    }
    
    .centrarvertical {
        display: flex;
        align-items: center;
    }
    
    .tarjeta {
        margin: 0 auto;
        max-width: 414px;
        width: 100%;
    }
    
    .tarjeta-contenido {
        width: 100%;
        padding: 5px;
        text-align: justify;
    }
    
    .tarjeta:hover {
        background-color: #7271b5;
        margin-top: -10px;
    }
    
    ul.subtitulo {
        list-style-image: url('../img/bullet-orbit.png') !important;
    }
    
    .contacto {
        background-color: #1B4F72;
        border-radius: 5%;
        padding: 10px;
    }
    
    form>.form-group>label {
        color: #fff !important;
    }
    
    #overlay_vue {
        position: fixed;
        /* Sit on top of the page content */
        display: block;
        /* Hidden by default */
        width: 100%;
        /* Full width (cover the whole page) */
        height: 100%;
        /* Full height (cover the whole page) */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.8);
        /* Black background with opacity */
        z-index: 100;
        /* Specify a stack order in case you're using a different order for other elements */
        cursor: pointer;
        align-items: center;
        /* Add a pointer on hover */
    }
    
    #overlay_vue>div {
        margin-left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    /* mediaqueries - RESPONSIVE*/
    
    @media (max-width: 600px) {
        .vueperslides__arrows>.vueperslides__arrow--prev {
            background-image: url('../img/arrow-prev.png');
            background-size: 27px !important;
            background-repeat: no-repeat;
            width: 27px !important;
            height: 58px !important;
        }
        .vueperslides__arrows>.vueperslides__arrow--next {
            background-image: url('../img/arrow-next.png');
            background-size: 27px !important;
            background-repeat: no-repeat;
            width: 27px !important;
            height: 58px !important;
        }
        .container-fluid>button.navbar-toggler {
            display: block;
            margin-left: 87% !important;
            /* margin-left: 300px; */
        }
        #logotipo>img {
            display: block;
            margin: 0 auto;
        }
        .parrafo {
            font-size: 16px;
            padding: 15px;
            margin-left: 20px;
            line-height: 40px;
            color: #000;
            text-align: justify;
        }
        #centinela {
            background-image: url('../img/centinela-movil.jpg');
        }
        #leyenda {
            background-image: url('../img/leyenda-movil.jpg');
        }
        div>.col-sm-4 {
            margin-top: 10px;
        }
        .card {
            height: 100% !important;
        }
        .card-seguridad {
            height: auto;
            margin-bottom: 20px;
        }
        .card-seguridad:hover {
            background-color: #7271b5;
            margin-top: 0px;
        }
        .centrar-imagen>img {
            max-width: 100%;
            height: auto;
        }
        .tarjeta>img {
            max-width: 100%;
            height: auto;
        }
        /* div>img {
            max-width: 100%;
            height: auto;
        } */
    }
    
    @media (max-width: 1000px) {
        .centrar-imagen>img {
            max-width: 100%;
            height: auto;
        }
        .tarjeta>img {
            max-width: 100%;
            height: auto;
        }
    }
    /* For Desktop View */
    
    @media screen and (min-width: 1024px) {
        /*.centrar-imagen>img {
            width: 100%;
            height: auto;
        }*/
    }
    /* For Tablet View */
    
    @media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
        .container-fluid>button.navbar-toggler {
            display: block;
            margin-left: 90% !important;
            /* margin-left: 300px; */
        }
    }
    /* For Mobile Portrait View */
    
    @media screen and (max-device-width: 480px) and (orientation: portrait) {}
    /* For Mobile Landscape View */
    
    @media screen and (max-device-width: 640px) and (orientation: landscape) {}
    /* For Mobile Phones Portrait or Landscape View */
    
    @media screen and (max-device-width: 640px) {}
    /* For iPhone 4 Portrait or Landscape View */
    
    @media screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {}
    /* For iPhone 5 Portrait or Landscape View */
    
    @media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {}
    /* For iPhone 6 and 6 plus Portrait or Landscape View */
    
    @media (min-device-height: 667px) and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 3) {}
    
    @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
        /* your css rules for ipad portrait */
    }
    
    @media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
        /* your css rules for ipad landscape */
    }