@font-face {
    font-family: KoHo-Regular;
    src: url(../fonts/KoHo-Regular.ttf);
}

@font-face {
    font-family: KoHo-Medium;
    src: url(../fonts/KoHo-Medium.ttf);
}

@font-face {
    font-family: KoHo-Bold;
    src: url(../fonts/KoHo-Bold.ttf);
}

@font-face {
    font-family: KoHo-Italic;
    src: url(../fonts/KoHo-Italic.ttf);
}

html {
    overflow : auto;
}


body {
    background: #000000;
    color: #000000;
    font-family: 'Roboto', sans-serif;
    overflow-x: hidden; /* prevent horizontal scrollbar from appearing */
}

a {
    color: #4259a8;
}

a:hover {
    color: #ee6f2d;
    text-decoration : none;
}

a:focus {
    outline : none;
}

button:focus {
    outline : none;
}

/* Modal Display Corrections */

body.modal-open {
    padding-right : 0px !important;
    overflow : auto;
}

.modal {
    padding-right : 0px !important;
}

/* Modal Display Corrections - End */

.container {
    max-width : 1366px;
}

/* Navbar */

.navbar {
    font-family: KoHo-Medium;
}

.navbar-brand {
    max-width : 80%;
}

@media(max-width : 450px) {
    .navbar-brand img.compact {
        height : 40px;
    }

    .navbar-brand img.regular {
        display : none;
    }
}

@media(min-width : 451px) {
    .navbar-brand img.compact {
        display : none;
    }
}

@media(max-width : 767px) {
    .navbar-brand img {
        height : 40px;
    }
}

@media(min-width : 767px) {
    .navbar-brand img {
        max-height : 50px;
    }
}

.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link:focus {
    color: rgba(0,0,0,1);
}

.navbar-light .navbar-nav .nav-link:hover {
    color: #ee6f2d;
}

.sticky-top {
    background-color: rgba(255,255,255,1);
}

/* 
 * To change collapsed icon color, change border-color from .navbar-toggler and
 * the stroke from background-image property of .navbar-toggler-icon (its a SVG
 * image).
 */


.navbar-light .navbar-toggler {
    padding: .20rem .65rem;
    font-size: 0.6rem;
    line-height: 1;
    font-weight: 700;
    border-color : rgba(238,111,45,1);
}

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

/* Navbar - END */

/* Subnav */

html {
    overflow : auto;
}

.navbar {
    padding-top : 0;
    padding-bottom : 0;
}

@media(max-width : 575px) {
    .navbar {
        min-height : 50px;
    }
}

@media(max-width : 767px) {
    .navbar {
        padding-top : 0.5rem;
        padding-bottom : 0.5rem;
    }

    .navbar-brand {
        padding-top : 0;
        padding-bottom : 0;
    }
}

.nav-item {
    height : 76px;
    display : flex;
    align-items : center;
    justify-content : center;
}

@media(max-width : 767px) {
    .nav-item {
        height : auto;
    }
}

/* 
.nav-item:hover .subnav {
    display : flex;
}
*/

.subnav {
    display : flex;
    position : absolute;
    top : 56px;
    left : 100%;
    opacity : 1;
    transition : 200ms ease-in-out;
    transition-property: left;
    -webkit-box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.1), inset 0px 10px 15px 0px rgba(0,0,0,0.125);
    -moz-box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.1), inset 0px 10px 15px 0px rgba(0,0,0,0.125);
    box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.1), inset 0px 10px 15px 0px rgba(0,0,0,0.125);
    font-family: KoHo-Regular;
    color : #ffffff;
    background-color : rgba(238,111,45,1);
}

.subnav.visible {
    left : 0%;
}

@media(min-width : 768px) {
    .subnav {
        top : 76px;
        height : 0px;
        overflow : hidden;
        transition : 200ms ease-in-out;
        transition-property: height;
    }

    .subnav.visible {
        left : 0%;
        height : 310px;
    }
}

@media(min-width : 880px) {
    .subnav.visible {
        left : 0%;
        height : 235px;
    }
}

.subnav .title {
    font-family: KoHo-Bold;
    font-size : 1.1rem;
    display: inline-block;
    border-bottom : solid 1px #ffffff;
    padding-bottom : 0.05rem;
    margin-bottom : 0.05rem;
}

.subnav a {
    color : #ffffff;
    font-size : 0.9rem;
}

/* Subnav - END */

/* Main */

main > div > .container {
    min-height : calc(100vh - 76px - 65px);
}

.pill-button {
    background-color: transparent;
    border: solid 1px rgba(255,255,255,0.75);
    color: rgba(255,255,255,0.75);
    padding: 6px 14px;
    text-align: center;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 14px;
    font-size : 0.8rem;
    font-family: KoHo-Bold;
}

.pill-button:hover {
    background-color: transparent;
    border: solid 1px rgba(255,255,255,1);
    color: rgba(255,255,255,1);
}

/* Main - END */


/* Swup Animations */

.transition-fade {
    transition: 300ms;
    opacity: 1;
}

html.is-animating .transition-fade {
    opacity: 0;
}

html.is-leaving .transition-fade {
    opacity : 0;
}

.transition-left-in {
    transition: 500ms;
    opacity: 1;
    transform: translateX(0);
    transform-origin: left;
}

html.is-animating .transition-left-in {
    opacity: 1;
    transform: translateX(100%);
}

html.is-leaving .transition-left-in {
    opacity: 0;
    transform: translateX(0);
}

/* Swup Animations - END */


/* Footer */
footer {
    padding-left : 1rem;
    padding-right : 1rem;
    min-height : 65px;
    background-color : #373736;
}

footer .text {
    font-family: KoHo-Regular;
    font-size : 0.7em;
    color : rgba(255,255,255,0.5)
}

footer img {
    max-height : 30px;
}

/* Footer - END */

/* Home */

.home {
    background: url(../img/background/Background_4_.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.home .logo {
    border-bottom : solid 2px #ffffff;
    padding-bottom : 1.5rem;
    margin-bottom : 1.5rem;
}

@media(max-width : 1366px) {
    .home .logo {
        padding-bottom : 1.0rem;
        margin-bottom : 1.0rem;
    }

    .home .logo img {
        max-height : 90px;
    }
}

.home .title {
    font-family: KoHo-Bold;
    font-size : 2.0rem;
    line-height : 2.0rem;
    color : #ffffff;
}

.home .service-logo {
    max-height : 60px;
}

@media(max-width : 1366px) {
    .home .service-logo  {
        max-height : 40px;
    }
}

.home .text {
    font-family: KoHo-Italic;
    font-size : 1.20rem;
    line-height : 1.20rem;
    color : #ffffff;
}

@media(max-width : 767px) {
    .home .title {
        font-size : 1.5rem;
        line-height : 1.5rem;
    }

    .home .text {
        font-size : 1.1rem;
        line-height : 1.1rem;
    }
}

/* Home - END */

/* Nosotros */

/*
.nosotros {
    background: url(../img/background/Background_4_.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}
*/

.nosotros .title {
    font-family: KoHo-Bold;
    font-size : 3.5em;
    line-height : 1.1em;
    color : #ffffff;
}

.nosotros .text {
    font-family: KoHo-Italic;
    font-size : 1.4em;
    line-height : 1.2em;
    color : #ffffff;
}

.nosotros .historia {
    font-family: KoHo-Regular;
    font-size : 1.1em;
    line-height : 1.2em;
    color : rgb(255,255,255,0.6);
}

@media(max-width : 767px) {
    .nosotros .title {
        font-size : 3.0em;
    }

    .nosotros .text {
        font-size : 1.2em;
    }

    .nosotros .historia {
        font-size : 0.9em;
    }
}

/* Nosotros - END */

/* Servicios  */

.servicios .title {
    font-family: KoHo-Bold;
    font-size : 2.0rem;
    line-height : 2.0rem;
    color : #ffffff;
}

.servicios .text {
    font-family: KoHo-Italic;
    font-size : 1.20rem;
    line-height : 1.20rem;
    color : #ffffff;
}

.servicios .title-2 {
    font-family: KoHo-Italic;
    font-size : 3.0rem;
    line-height : 3.0rem;
    color : #ffffff;
}

.servicios .text-2 {
    font-family: KoHo-Italic;
    font-size : 1.65rem;
    line-height : 1.20rem;
    color : #ffffff;
}

.servicios .text-2 a {
    color : #ffffff;
}

.servicios .text-2 a:hover {
    color : #ffffff;
}

@media(max-width : 767px) {
    .servicios .title {
        font-size : 2.0rem;
        line-height : 2.0rem;
    }

    .servicios .text {
        font-size : 1.1rem;
    }

    .servicios .title-2 {
        font-size : 2.0rem;
        line-height : 2.0rem;
    }

    .servicios .text-2 {
        font-size : 1.35rem;
        line-height : 1.10rem;
    }
}

.servicios .service-logo {
    max-height : 60px;
}

@media(max-width : 1366px) {
    .servicios .service-logo  {
        max-height : 50px;
    }
}

/* Servicios - END */

/* Servicios Subitem */

.servicios-subitem {
    background: url(../img/background/Background_5_.png);
    background-size: cover;
    background-repeat: no-repeat;
    padding-left : 1rem;
    padding-right : 1rem;
}

.servicios-subitem .title {
    font-family: KoHo-Bold;
    font-size : 3.0rem;
    line-height : 3.0rem;
    color : #ffffff;
}

.servicios-subitem .text {
    font-family: KoHo-Italic;
    font-size : 1.25rem;
    line-height : 1.34rem;
    color : #ffffff;   
}

.servicios-subitem .link-microstrategy {
    color : #ffffff;
    font-weight : bold;
    text-decoration : none;
}

.servicios-subitem .link-microstrategy:hover {
    color : #ffffff;
    text-decoration : none;
}

@media(max-width : 767px) {
    .servicios-subitem .title {
        font-size : 2.0rem;
        line-height : 2.0rem;
    }

    .servicios-subitem .text {
        font-size : 1.1rem;
    }
}

@media(min-width : 768px) {
    .servicios-subitem img {
        max-height : 380px;
    }
}

/* Servicios Subitem - END */

.background-1 {
    background: url(../img/background/Background_1_.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.background-2 {
    background: url(../img/background/Background_2_.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.background-3 {
    background: url(../img/background/Background_3_.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

/* Clientes */

.servicios-subitem.clientes .logos {
    background-color : #ffffff;
}

.servicios-subitem.clientes .logos div {
    width : 10%;
}

@media(max-width : 400px) {
    .servicios-subitem.clientes .logos div {
        width : 50%;
        padding-left : 5px;
        padding-right : 5px;
    }
}

@media(min-width : 401px) and (max-width : 600px) {
    .servicios-subitem.clientes .logos div {
        width : 25%;
    }
}

@media(min-width : 601px) and (max-width : 800px) {
    .servicios-subitem.clientes .logos div {
        width : 16.50%;
    }
}

@media(min-width : 801px) and (max-width : 1000px) {
    .servicios-subitem.clientes .logos div {
        width : 12.5%;
    }
}

/* Clientes - End */

/* Contacto */

.servicios-subitem.contacto .info {
    border-top : solid 1px rgba(255,255,255,0.75);
    color : rgba(255,255,255,0.75);
    padding-left : 5px;
    padding-right : 10px;
}

.servicios-subitem.contacto .info img {
    width : 30px;
    min-width : 30px;
    margin-right : 10px;
    opacity : 0.85;
}

.servicios-subitem.contacto .info a {
    color : rgba(255,255,255,0.75);
}

.servicios-subitem.contacto .form-container {
    border : solid 1px rgba(255,255,255,0.75);
    padding : 30px 25px;
}

/* Contacto - End */

/* Formulario de contacto */

    /* .input-container manages the input border */
    .input-container {
        display : flex; 
        flex-direction : row; 
        align-items : center; 
        width : 100%;
        border : solid 1px rgba(255,255,255,0.85); 
        border-radius : 4px;
    }

    /* change border when focus in the input inside the container */
    .input-container:focus-within {
        border : solid 1px rgba(255,255,255,1.0);
    }

    /* change border when there is an input error */
    .input-container.error {
        border : solid 1px rgba(255,100,0,0.85);
    }

    /* change border when the input inside has an error and focus */
    .input-container:focus-within.error {
        border : solid 1px rgba(255,100,0,1.0);
    }

    .input-container input,
    .input-container textarea {
        background-color : transparent;
        color : rgba(255,255,255,0.85);
        margin : 0 !important;
        border : 0;
        padding : .375rem .75rem .375rem .75rem; 
        font-size : 1rem;
        box-shadow : 0;
        width : 100%;
    }

    .input-container input:focus,
    .input-container textarea:focus {
        border : 0;
        color : rgba(255,255,255,1);
        outline : none;
        box-shadow : 0 0 0 0 transparent;
    }

    .input-container input::placeholder,
    .input-container textarea::placeholder {
        color : rgba(255,255,255,0.75);
    }

    .input-container input:focus::placeholder,
    .input-container textarea:focus::placeholder {
        color : rgba(255,255,255,0.85);
    }

    .input-container input:required {
        border-color: transparent !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
    }

    /* show an icon next to input when there is an error */
    .input-container .icon {
        display : none;
    }

    .input-container.error input {
        padding-right : 0;
        width : calc(100% - 38px);
    }

    .input-container.error .icon {
        display : initial;
        /* padding : .420rem 0 .420rem 0; */
        color : rgba(255,100,0,1);
        font-size : 1.25rem;
        width : 38px;
        text-align : center;
    }

    /* input error message style */
    .input-container + span.input-error {
        color : rgba(255,255,255,0.85);
        font-size: 80%;
    }

    /* submit button */
    .submit-container:hover  {
        border-color : rgba(255,255,255,1.0);
        color : rgba(255,255,255,1.0);
    } 

    .submit-container .submit-button  {
        color : rgba(255,255,255,0.85);
        padding : .375rem .75rem .375rem .75rem; 
        font-size : 1rem;
        width : 100%;
    }

    .submit-container .submit-button:hover  {
        color : rgba(255,255,255,1.0);
    }

    /* Response message */
    .form-response {
        font-size : 80%;
    }

/* Formulario de Contacto - End */

/* Slider */

.prev-arrow,
.next-arrow {
    position: absolute;
    top: calc(50% - 15px);
    z-index: 99
}

.prev-arrow:hover,
.next-arrow:hover {
    cursor: pointer;
}

.prev-arrow {
    left: 8px;
}

.next-arrow {
    right: 8px;
}

.slick-dots {
    bottom: 15px;
}

.slick-dots li button:before {
    color : #FFFFFF;
    font-size: 15px !important;
}

.slick-dots li.slick-active button:before {
    color : #FFFFFF;
}

@media (max-width : 575px) {
    .slick-dots {
        bottom: 5px;
    }
}

.slick-dotted.slick-slider {
    margin-bottom : 0;
}

/* End Slider */