@import url('https://fonts.googleapis.com/css?family=Playfair+Display|Poppins:300,400,500,600,700');


/* ***** Import All CSS ***** */

@import 'others/animate.css';
@import 'others/magnific-popup.css';
@import 'others/owl.carousel.min.css';
@import 'others/font-awesome.min.css';
@import 'others/elegant-font.css';
@import 'others/themify-icons.css';

/* --------------------
:: 1.0 Base CSS
-------------------- */

@font-face {
    font-family: "Bebas Neue";
    src: url(../fonts/BebasNeue-Regular.otf);
}

@font-face {
    font-family: "Open Sans";
    src: url(../fonts/OpenSans-Regular.ttf);
}

@font-face {
    font-family: "Nebulous Content";
    src: url("../fonts/Nebulous\ Content.otf");
}

*,
ul,
li {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Open Sans';
    position: relative;
    z-index: auto;
    padding-top: 3rem;
    color: #5a5a5a;
}

.display-2 {
    font-family: "Open Sans" !important;
}

/* Navbar */
.header_area {
    background: #314563;
    position: fixed;
    width: 100%;
    z-index: 90;
    height: 56px;
    top: 0;
    left: 0;
    padding: 0 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

.navbar-expand-lg .navbar-nav .nav-link {
    font-family: "Open Sans";
    padding-right: 25px !important;
    padding-left: 25px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.navbar-brand {
    background: #fff;
    border-radius: 5px;
    box-shadow: 2px 2px 5px #000000;
    position: absolute;
    width: 72px;
    height: 72px;
    left: 50px;
    top: 17px;
    text-align: center;
}

.carousel-indicators li {
    background: #9AC0DD;
    border-radius: 5px;
    width: 3px;
    transform: rotate(20deg);
}

.carousel-indicators::after {
    /* content: "\e64a"; */
    content: url("../../images/right.png");
}

.carousel-indicators::before {
    /* content: "\e64a"; */
    content: url("../../images/left.png");
}

.carousel-caption {
    position: absolute;
    bottom: 10rem !important;
}

.carousel-caption h1 {
    font-family: "Bebas Neue";
    letter-spacing: 2px;
    font-style: normal;
    font-weight: 100;
    font-size: 55px;
    line-height: 56px;
    /* or 100% */
    text-align: center;
    color: #FFFFFF;
    /* DIGITAL SHADOW */
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
}

.carousel-caption p {
    font-family: "Bebas Neue";
    letter-spacing: 2px;
    font-style: normal;
    font-weight: 100;
    font-size: 50px !important;
    font-style: italic;
    line-height: 56px;
    text-align: center;
    color: #FFFFFF;
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
}

.carousel-caption p.creditos {
    font-family: "Bebas Neue";
    letter-spacing: 2px;
    font-style: normal;
    font-weight: 100;
    font-size: 25px !important;
    text-transform: uppercase;
    font-style: italic;
    line-height: 25px;
    text-align: center;
    color: #FFFFFF;
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
}


/* Carousel  */

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* width: 100%; */
}

.carousel-caption {
    bottom: 3rem;
    z-index: 10;
}

.carousel-item {
    height: 34.6rem;
}

.carousel-item>img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 34.6rem;
}

.contacto {
    margin-top: 100px;
    font-family: "Open Sans";
}


.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
}

.col-xs-15 {
    width: 20%;
    float: left;
}

.col-md-15 img:hover {
    border-radius: 100%;
    transform: scale(1.25);
    transition: 0.5s;
}

.tituloHistoria {
    font-size: 40px;
    font-weight: 800;
    font-family: "Open Sans";
    color: #314563;
}

.mbr-section-subtitle {
    font-size: 16px;
    font-weight: 600;
}

.user_name {
    color: #606060 !important;
}

.margenDerecho {
    border-right: 5px solid #314563;
}

.user_image {
    box-shadow: 2px 2px 10px #314563;
}

.user_text p {
    color: #314563;
    font-weight: 800;
    margin: 10px;
}

#detalleUser01,
#detalleUser02 {
    display: none;
}

.primaryB {
    border: 1px solid #FFFFFF !important;
    color: #FFFFFF !important;
}

#info4-4 {
    /* background-color: rebeccapurple; */
    background: url("../../images/gif02.gif");
    background-repeat: no-repeat;
    background-size: cover;
    height: 90vh;
}

#info4-4 h2 {
    font-family: "Bebas Neue" !important;
    font-style: normal;
    font-weight: normal;
    line-height: 100px;
    font-size: 75px;
    text-align: center;
    color: #FFF;
    letter-spacing: 3px;
    word-spacing: 5;
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
}

#info4-4 h3 {
    font-family: "Bebas Neue";
    font-style: normal;
    font-weight: normal;
    font-size: 40px;
    text-align: center;
    color: #FFF;
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
}

#info4-4 .display-4 {
    font-family: "Open Sans";
}

#promesa {
    padding: 0px 145px;
}

#clients-9 {
    background-color: #fff;
}

/* #progress-bars2-3{
    height: 100vh;
} */

.ocultar {
    display: none !important;
}

/* Estilo de cards  */
.cajaPricipal {
    display: flex;
    min-height: 100vh;
    max-height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style-type: none;
}

.cajasPeques {
    flex: 1;
    padding: 20px;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: all .5s ease;
}

#caja01 {
    background-image: url("../../images/cards/01.png");
}

#caja02 {
    background-image: url("../../images/cards/04.png");
    mix-blend-mode: multiply;
}

#caja03 {
    background-image: url("../../images/cards/02.png");
    mix-blend-mode: multiply;
}

#caja04 {
    background-image: url("../../images/cards/01.png");
    mix-blend-mode: multiply;
}

.cajasPeques.active {
    flex: 3;
    cursor: default;
}

.cajasPeques.active h2 {
    color: #ffffff;
}

.cajasPeques.active .contenidoCaja {
    flex: 4;
    opacity: 1;
    transform: scaleX(1);
    color: #ffffff;
}

.contenidoCaja {
    margin-top: 100px !important;
}

.contenidoCaja p {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #FFFFFF;
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
}

.cajasPeques .tituloCaja {
    flex: 1;
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    color: white;
    font-family: "Open Sans";
    font-weight: bold;
}

.cajasPeques .tituloCaja h2 {
    margin: 0;
    white-space: nowrap;
}

.cajasPeques .pieCaja {
    position: absolute;
    width: 275px;
    top: 1000px;
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 17px;
    line-height: 17px;
    color: #FFFFFF;
    transform: rotate(-90deg);
}

.cajasPeques .contenidoCaja {
    flex: 1;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    opacity: 0;
    transition: all .25s .1s ease-out;
}

.cajaPromise {
    padding: 0px 0px 70px 0px;
    background: radial-gradient(41.18% 721.61% at 50% 50%, #FFFFFF 67.19%, rgba(255, 255, 255, 0) 100%);
    /* background: radial-gradient(45% 700% at 50% 50%, #FFF 96.19%, rgba(255, 255, 255, 0) 100%); */

}

.form-control-t {
    background-color: rgba(91, 170, 248, 0.3);
}

::placeholder {
    color: #ffffff !important;
    opacity: 1;
    /* Firefox */
}

:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #ffffff !important;
}

::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #ffffff !important;
}

.btn-white-outline:hover,
.btn-white-outline:focus {
    color: #000000 !important;
}

.contenedor {
    width: 80%;
    margin: 0 auto;
}

.fuenteDigital {
    font-family: "Nebulous Content" !important;
}

.banner .content .espacios {
    font-family: "Bebas Neue";
    color: #ffffff;
    font-size: 75px !important;
    letter-spacing: 2px;
    word-spacing: 15px;
}

/* Estilo de nuevas cards  */
.descripcion {
    display: none;
    /* transform: translate(0px ,-200px); */

}

.activar {
    background: #ffffff;
    height: 309px !important;
    transform: translate(0px, -200px);
    transition: 0.5s ease-in;
    padding-top: 50px !important;
    padding-bottom: 93px !important;
    padding-left: 15px !important;
    border-radius: 25px;
}

.activar .descripcion {
    display: inline;
    transition: 1s;
    transform: translate(0px, -5px);

}

.card-img-top {
    border-radius: 25px 25px 0px 0px;
}

.card {
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25);
    border-radius: 25px;
    height: 309px;
    background-color: #fff;
}

.card-cuerpo {
    padding: 0px;
}

.cb {
    padding-top: 10px;
    padding-left: 10px;
}

.banner {
    width: 100%;
    height: 75vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner video {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: auto;
    pointer-events: none;
}

.banner .content {
    position: relative;
    z-index: 1;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.banner .content h3 {
    margin: 0;
    padding: 0;
    color: #ffffff;
}

.banner .content p {
    font-size: 1.5em;
    color: #ffffff;
}

.columna_card{
    width: 27%;
    margin-right: 3%;
    margin: 0 auto;
}

.portafolio{
    margin: 0 auto;
    width: 90%;
}

/* Cards Nuevas */
.portafolio h1 {
    text-align: center;
    font-size: 38px;
    margin: 15px 0px 40px;
}

.portafolio-item {
    width: 100%;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 26px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

.portafolio-img {
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.portafolio-text {
    width: 100%;
    position: absolute;
    bottom: 0;
    padding: 25px 20px 40px 20px;
    background: #fff;
    color: #000;
    -webkit-transform: translateY(55%);
    -ms-transform: translateY(55%);
    transform: translateY(55%);
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

.portafolio-text .lineas5{
    margin: 0px 0px 10px 0px !important;
}

.portafolio-text p {
    text-align: justify;
}

.portafolio-item:hover .portafolio-text {
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
}

.portafolio-item:hover .portafolio-img {
    -webkit-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15);
}

.portafolio-text .card-text2 {
    text-align: center !important;
}