/*

Todos los que comienzan con @media
estan destinados a la vista movil

*/

/*******************************/
/********* General CSS *********/
/*******************************/


body {
    color: #797979;
    background: #ffffff;
    font-family: 'Open Sans', sans-serif;
}




h1,
h2, 
h3, 
h4,
h5, 
h6 {
    color: #1d2434;
}


@media screen {
    h2, 
    h3, 
    h4
    {
        font-size: 1rem;
        font-weight: bolder;
    }

    h5,h6{
        font-size: 0.8rem;

    }

    p{
        font-size: 0.9rem;
    }
    li{
        
        font-size: 0.9rem;
    }
}





a {
    color: #454545;
    transition: .3s;
}

a:hover,
a:active,
a:focus {
    color: #1bb2dc;
    outline: none;
    text-decoration: none;
}

.owl-prev, .owl-next{
    background-color: #ffffff !important;
    color: #000000 !important;
    font-size: 500px;
    width: 100px;
    transition: 0.3s ease; 
}

.owl-prev:hover, .owl-next:hover{
    background-color: #514e80b9 !important;
    color: #ffffff !important;
}



.container-fluid {
    max-width: 1366px;
}

.mail{
    color: #ffffff;
}

.back-to-top {
    position: fixed;
    display: none;
    background: #1bb1dc;
    width: 44px;
    height: 44px;
    text-align: center;
    line-height: 1;
    font-size: 22px;
    right: 15px;
    bottom: 15px;
    transition: background 0.5s;
    z-index: 9;

}

.back-to-top:hover {
    background: #1d2434;
}

.back-to-top:hover i {
    color: #1bb1dc;
}

.back-to-top i {
    color: #1d2434;
    padding-top: 10px;
}

@media (max-width: 991.98px) {
    .btn:focus,
    .form-control:focus {
        box-shadow: none;
    }
    .back-to-top {
        position: fixed;
        display: none;
        background: #1bb1dc;
        width: 44px;
        height: 44px;
        text-align: center;
        line-height: 1;
        font-size: 22px;
        right: 15px;
        bottom: 15px;
        transition: background 0.5s;
        z-index: 9;
    
    }
    
    .back-to-top:hover {
        background: #1d2434;
    }
    
    .back-to-top:hover i {
        color: #1bb1dc;
    }
    
    .back-to-top i {
        color: #1d2434;
        padding-top: 10px;
    }
}


/**************************************** lineas separadoras*/
hr{
   margin-left: 25%;
   margin-right: 25%;
   margin-bottom: 5%;
   margin-top: 5%;
    width: 50%;
    background-color:#514E80;
    border: none;
    height: 2px;
}

.separador{
    width: 50%;
    border: 0;
    border-top: 2px dotted #514e809f;
    background: none;
    margin-top: 5%;
    margin-bottom: 5%;
}

@media (max-width: 767.98px) {
    hr{
        margin-left: 15%;
        margin-right: 25%;
        margin-bottom: 15%;
        margin-top: 15%;
         width: 70%;
         background-color:#514E80;
         border: none;
         height: 2px;
     }
     
     .separador{
         width: 70%;
         border: 0;
         border-top: 2px dotted #514e809f;
         background: none;
         margin-top: 7%;
         margin-bottom: 7%;
     }
}
/**********************************************************/



/**********************************/
/*********** Nav Bar CSS **********/
/**********************************/



/*movimiento suave del scroll o 'Smoth Scrolling'*/
/*
no funciona en todo los browsers, pasar a js seria la opcion para que funcione en todos los browsers
--- ultimas actualizaciones hace que funcione en  safari
*/

html{
    scroll-behavior:smooth;
    transition: 1s;

}
/********************************************************************************************/

/* Esconde el scroll para safari, chrome y opera */
body::-webkit-scrollbar {
    display: none;
  }

/* Esconde el scroll para 1(IE, Edge) y 2(Firefox) */
body {
    -ms-overflow-style: none; /*1*/
    scrollbar-width: none; /*2*/
  }

.navbar {
    position: relative;
    transition: 0.5s;
    z-index: 999;
    width: 50%;
}

  /*****************************/
 /**** Vista Movil  Navbar ****/
/****************************/
@media (max-width: 991.98px) {   
    .navbar {
        width: 100%;
        padding: 15px;
        background: #514E80 !important;
    }

    /* se supone que fija el navbar... pero como que no funca*/
    .navbar-fixed-top{
        position: relative;
        top: auto;   
    }
    
    .navbar a.nav-link {
        padding: 30px;
    }
    
    .navbar .dropdown-menu {
        box-shadow: none;
    }

    /*social media icons*/
    .fab {
        color: #ffffff !important;
       align-content: center;
       padding: 5% !important;
       font-size: 20px;
    }
    
    .fab:hover {
        color: #1bb2dc
    }
    
    .social-top{
        margin-left: 5%;
        margin-top: 0.95%;
        margin-right: -80%;
    }
    
    /* Contacto se cambia por separado ya que es un Mail-to, vale decir que no sigue la estructura del navbar
    por defeceto, aunque tenga las clases "iguales" en el html, yo agregue dentro de la clase  "contacto", para poder hacer cambios. */
    .contacto{
        margin-left: -287px !important;
    }

    .navbar .navbar-brand:hover {
        margin: 0;
        color: #1bb2dc;
        size: 5%;
        transition: 0.1s;
    }

}
/**********************************************************************************************************************/

/*shadow navbar*/
.navbar.nav-sticky {
    position: fixed;
    top: 0;
    width: 100%;
    box-shadow: 0 2px 5px #0000004d;
}

/*logo harrys informatica*/
.navbar .navbar-brand {
    margin: 0;
    color: #ffffff;
    size: 5%;
}
.navbar .navbar-brand:hover {
    margin: 0;
    color: #1bb2dc;
    size: 5%;
    transition: 0.5s;
}

.navbar .navbar-brand span {
    font-weight: 1000;
}


/**************************************** Social media ****************************************/
.fab {
    color: #ffffff;
   align-content: center;
   padding: 5px;
   transition: 0.3s;
}

.fab:hover {
    color: #1bb2dc
}

.social-top{
    margin-left: 5%;
    margin-top: 0.95%;
    margin-right: -80%;
}

/**********************************************************************************************/

.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    padding: 10px 10px 8px 10px;
    color: #ffffff;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    background: #ffffff34;
    transition: 0.3s;
}

.navbar .dropdown-menu {
    margin-top: 0;
    border: 0;
    border-radius: 0;
    background: #f8f9fa;
}
/****************************************************/
@media (min-width: 992px) {
    .navbar {
        position: absolute;
        width: 100%;
        top: 0px;
        padding: 5px 60px;
        background: #0000005d !important;
        z-index: 9;
    }
    
    .navbar.nav-sticky {
        padding: 5px 60px;
        background: #514E80 !important;
    }
    
    .navbar a.nav-link {
        padding: 8px 15px;
        font-size: 14px;
        letter-spacing: 1px;
        text-transform: uppercase;
    }


@media (max-width: 991.98px) {   
    .navbar {
        padding: 15px;
        background: #1d2434 !important;
    }
    
    .navbar a.nav-link {
        padding: 5px;
    }
    
    .navbar .dropdown-menu {
        box-shadow: none;
        }
    }
/****************************************************/

/**********************************************************************/
/**************************** eslogan CSS ****************************/
/**********************************************************************/
@media (max-width: 991.98px) { 
    .eslogan {
        position: relative;
        width: 100%;
        margin-bottom: 45px;
        height: calc(106.5vh - 60px);
        background: #514e80;
        overflow: hidden;
    }

    .eslogan .container-fluid {
        padding: 0;
    }
    
    .eslogan .eslogan-image {
        position: relative;
        margin-top: 189px;
         margin-right: 80px;
        min-width: 200% !important;
        max-width: 5% !important;
        z-index: 0;
    }
    
    .eslogan .eslogan-image img {
        max-width: 80%;
        max-height: 80%;
    }
    
    .eslogan .eslogan-text {
        position: relative;
        padding-left: 75px;
        height: calc(115vh - 60px);
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        z-index: 1;
    }

    .eslogan .eslogan-text h1 {
        color: #ffffff;
        font-size: 50px;
        font-weight: 700;
        margin-bottom: 20px;
    }
    
    .eslogan .eslogan-text p {
        color: #1d2434;
        font-size: 18px;
        margin-bottom: 25px;
    }
}
/*******************************************************************************/

.eslogan {
    position: relative;
    width: 100%;
    margin-bottom: 45px;
    height: calc(106.5vh - 60px);
    background: #514e80;
    overflow: hidden;
}
/* 
@media (max-width: 991.98px) {
    .eslogan {
        position: relative;
        width: 100%;
        margin-bottom: 45px;
        height: calc(106.5vh - 60px);
        background: #514e80 !important;
        overflow: hidden;
    }
}
 */

.eslogan .container-fluid {
    padding: 0;
}

.eslogan .eslogan-image {
    position: relative;
    margin-top: 189px;
     margin-right: 80px;
    min-width: 200% !important;
    max-width: 5% !important;
    z-index: 0;
}

.eslogan .eslogan-image img {
    max-width: 80%;
    max-height: 80%;
}


.eslogan .eslogan-text {
    position: relative;
    padding-left: 75px;
    height: calc(115vh - 60px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    z-index: 1;
}


.eslogan .eslogan-text h1 {
    color: #ffffff;
    font-size: 50px;
    font-weight: 700;
    margin-bottom: 20px;
}

.eslogan .eslogan-text p {
    color: #1d2434;
    font-size: 18px;
    margin-bottom: 25px;
}




/************************************************ Boton empezemos ************************************************/
.eslogan .eslogan-text .btn {
    padding: 15px 30px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #ffffff;
    background: none;
    border: 2px solid #ffffff;
    border-radius: 0;
    transition: .3s ease-in-out;
}

.eslogan .eslogan-text .btn:hover {
    color: #000000;
    background: #19b1dc;
    border: 2px solid #19b1dc;
}


@media (max-width: 991.98px) {
    .eslogan .eslogan-text {
        padding-left: 15px;
    }
    
    .eslogan .eslogan-text h1 {
        font-size: 35px;
    }
    
    .eslogan .eslogan-text p {
        font-size: 16px;
    }
    
    .eslogan .eslogan-text .btn {
        padding: 12px 30px;
        font-size: 15px;
        letter-spacing: 0;
    }
}

@media (max-width: 767.98px) {
    .eslogan .eslogan-text h1 {
        font-size: 30px;
        font-weight: 600;
    }
    
    .eslogan .eslogan-text p {
        font-size: 14px;
    }
    
    .eslogan .eslogan-text .btn {
        padding: 10px 25px;
        font-size: 15px;
        font-weight: 400;
        letter-spacing: 0;
        color: #ffffff !important;
        background-color: #514E80 !important;
    }
}

@media (max-width: 575.98px) {
    .eslogan .eslogan-text h1 {
        font-size: 25px;
        font-weight: 600;
    }
    
    .eslogan .eslogan-text p {
        font-size: 14px;
    }
    
    .eslogan .eslogan-text .btn {
        padding: 8px 20px;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0;
        background-color: #514E80 !important;
    }
}



/*******************************/
/******* Section Header ********/
/*******************************/

.section-header {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    margin-bottom: 45px;

}

.section-header p {
    margin-bottom: 5px;
    position: relative;
    font-size: 16px ;
    font-weight: 600;
}

.section-header h2 {
    margin: 0;
    position: relative;
    font-size: 50px;
    font-weight: 700;
}




@media (max-width: 767.98px) {
    .section-header h2 {
        font-size: 30px;
    }
} 



/*******************************/
/********** About CSS **********/
/*******************************/
.about {
    position: relative;
    width: 100%;
    padding: 45px 0;
}

.about .section-header {
    position: relative;
    margin-bottom: 30px;
    margin-left: 0;
}

.about .about-img img {
    position: relative;
    width: 250% !important;
    height: 100%;
    z-index: 1;
    padding-right: 10px;
    margin-left: -100px;
}

.about .about-text p {
    font-size: 16px;
}


/*******************************/
/********* Clientes CSS *********/
/*******************************/

.row{
    margin: 2px;
}

.clientes {
    position: relative;
    width: 100%;
    padding: 5% 0 2.5% 0;
}

.clientes .clientes-item {
    position: relative;
    width: 100%;
    text-align: center;
}

.clientes .clientes-img {
    position: relative;
    width: 100%;
}

.clientes .clientes-img img {
    position: relative;
    width: 50%;
    height: 50%;
  
}


.clientes .clientes-item h3 {
    margin: 0;
    padding: 25px 15px 15px 15px;
    font-size: 25px;
    font-weight: 700;
}

/************************************************************** Espacio intermedio imagenes de clientes*/
.middle{
    margin: 0% 20% 0% 0% ;
}


@media (max-width: 991.98px) {
    .middle{
        margin: 0% 5% 0% 0% !important;
    }

}

/*******************************/
/********* Portafolio CSS *********/
/*******************************/

.porta{
    padding: auto;

}

.portafolio {
    position: relative;
    width: 100%;
    padding: 45px 0 15px 0;
}

.portafolio .portafolio-item {
    position: relative;
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
    background: #1d24340a;
    padding-top: 5%;
    padding-bottom: 1%;
    background-color: #ffffff;
}

.portafolio .portafolio-img {
    position: relative;
    width: 100%;
}

.portafolio .portafolio-img img {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10%;
    padding-top: 2.5%;
}



/****************************/
/********** servicio *********/
/****************************/

@media (max-width: 767.98px) {
   .card-body{
    border-radius: 10%; 
    border: 10px solid #514E80 !important;
    /*background: #73AD21;*/
   }
}
#serv_tarj{
    border-radius: 15%; 
}
.card{
    width: 100%;
    height: 100%;
    padding-bottom: 15px;
    margin-bottom: 5px;
    border: none;
    /*background: hsla(166, 67%, 49%, 0.008);*/
    border-radius: 10%; 
}

.separar{
    margin: 5%;
}

i{
    color: #58d137;
    color: #84c4f2;  /*  Color Icono */
}

div .card-body:hover{
    box-shadow: 0px 0px 0px 5px #514e80;
    border-radius: 10%;
    transition:  box-shadow 0.3s;
}





/*******************************/
/*********** Team CSS **********/
/*******************************/
.team {
    position: relative;
    width: 100%;
    padding: 45px 0 15px 0;
}

.team .team-item {
    margin-bottom: 30px;
}

.team .team-img {
    position: relative;
}

.team .team-img img {
    width: 100%;
}

/*caja del nombre y cargo*/
.team .team-text {
    position: relative;
    margin: -60px 15px 0 15px;
    padding: 20px 15px;
    text-align: center;
    background: #F6F6F7;
    transition: .3s;
    margin: -50px 20px 20px  20px;
    z-index: 2;
}

.team h3 {
    font-size: 25px;
    font-weight: 700;
}

.team .team-text p {
    margin: 0;
    color: #000000;
}

.team .team-text:hover p {
    color: #ffffff;
}

.team .team-text:hover h2{
    color: #ffffff;
}


.desem{
    font-size: 12px;
}


.team .team-item:hover .team-text {
    background: #514E80;
    color: #ffffff;
}

.team .team-item:hover .team-img::after {
    border-color: #514E80;
    color: #ffffff;
}

@media  (max-width:600px) {
    img {
        width: 1%;
    }

    .team .team-item{
        align-items: center !important;

    }



}




/********************************************************************************************************************************************/
/********* Contact CSS *********/
/*******************************/

/* Import Google font - Poppins */


.wrapper{
  width: 100%;
  border-radius: 5px;
  margin-left: -30%;
}


.wrapper form.disabled{
  pointer-events: none;
  opacity: 0.7;
} 

.contact {
    position: relative;
    width: 100%;
    padding-top: 5%;
    padding-bottom: 5%;
    background: #1d2434;

}

form .dbl-field{

    margin-bottom: 2%;
    justify-content: space-between;
    
}

/**************************Placeholder*/
.field input::placeholder,
.message textarea::placeholder{
  color: #858585;
  background: #1d2434;
}

/*Bordes no focused*/
form .field input,
form .message textarea{
    padding: 15px 0;
    background: none;
    border-radius: 0;
    border: none;
    border-bottom: 1.5px solid #ffffff;
    color: #ffffff;
    width: 105%;
    transition: border-bottom 0.5s ease;
}

/************************************** bordes*/
.field input:focus,
.message textarea:focus{
    padding: 15px 0;
    background: none;
    border-radius: 0;
    border: none;
    outline: none;
    border-bottom: 1.5px solid #19b1dc;


}


.field input:focus,
.message textarea:focus {
  color: #ffffff;

}

form .message{
  position: relative;
}

form .message i{
  top: 30px;
  font-size: 18px;
}

form .message textarea{
  min-height: 130px;
  max-height: 230px;
  max-width: 105%;
  min-width: 105%;

}

form .message textarea::-webkit-scrollbar{
  width: 0px;
}

.message textarea:focus{
  padding-top: 14px;
}


/********************************************** boton enviar mensaje*/
form .button-area{
  margin: 25px;
  display: flex;
  align-items: center;
}

.button-area button{
    margin-left: 245px;
    color: #ffffff;
    border: none;
    outline: none;
    font-size: 18px;
    cursor: pointer;
    padding: 13px 25px;
    background: #1d2434;
    transition: background 0.3s ease;

}

.button-area button:hover{
  /*background: #514e809f;*/
  background: #19b1dc;
  color: #1d2434;
}

.button-area span{
  font-size: 17px;
  margin-left: 30px;
  display: none;
}

@media (max-width: 600px){
  .wrapper header{
    text-align: center;
  }
  .wrapper form{
    margin: 35px 20px;
  }
  form .dbl-field{
    flex-direction: column;
    margin-bottom: 0px;
  }
  form .dbl-field .field{
    width: 100%;
    height: 45px;
    margin-bottom: 20px;
  }
  form .message textarea{
    resize: none;
  }
  form .button-area{
    margin-top: 20px;
    flex-direction: column;
  }
  .button-area button{
    width: 100%;
    padding: 11px 0;
    font-size: 16px;
  }
  .button-area span{
    margin: 20px 0 0;
    text-align: center;
  }
}



.btn{
    border-radius: 0px;
    transition: 1s ease-in-out;
}

.btn:hover{
    background-color: #1bb2dc !important;
}


/*******************************/
/********* Footer CSS **********/
/*******************************/
.footer {
    position: relative;
    margin-top: 45px;
    padding-top: 45px;
    background: #1d2434;
}

.footer .footer-contact,
.footer .footer-link,
.footer .footer-newsletter {
    position: relative;
    margin-bottom: 45px;
    color: #999999;
}

.footer .footer-contact h2,
.footer .footer-link h2,
.footer .footer-newsletter h2{
    position: relative;
    margin-bottom: 30px;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
}

.footer .footer-link a {
    display: block;
    margin-bottom: 10px;
    color: #999999;
    transition: .3s;
}


.footer .footer-link a::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
} 

.footer .footer-link a:hover {
    color: #1bb2dc;
    letter-spacing: 1px;
}


.footer .footer-contact p i {
    width: 10%;
}

/**********************************/
.footer .footer-contact p:hover{
    color: #19b1dc;
    transition: 0.3s ease-in-out;
}

.footer .footer-contact i:hover{
    color: #19b1dc;
    transition: 0.3s ease-in-out;
} 
/**********************************/




.footer .footer-social {
    position: relative;
    margin-top: 20px;
}

.footer .footer-social a {
    display: inline-block;
}

.footer .footer-social a i {
    margin-right: 15%;
    font-size: 18px;
    color: #ffffff;
    transition: 0.3s;
}

.footer .footer-social a:last-child i {
    margin: 0;
}

.footer .footer-social a:hover i {
    color: #1bb2dc;
}

.footer .footer-newsletter .form {
    position: relative;
    width: 100%;
}

.footer .footer-newsletter input {
    height: 60px;
    border: 2px solid #1d2434;
    border-radius: 0;
}

.footer .footer-newsletter .btn {
    position: absolute;
    top: 8px;
    right: 8px;
    height: 44px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #1d2434;
    background: none;
    border-radius: 0;
    border: 2px solid #1d2434;
    transition: .3s;
}

.footer .footer-newsletter .btn:hover {
    color: #1bb2dc;
    background: #1d2434;
}





/*****************************************************************************/
.footer .copyright {
    padding: 0 2.5%;
    
}

.footer .copyright .row {
    background: #ffffff;
    padding-top: 25px;
    padding-bottom: 25px;
}

.footer .copyright p {
    margin: 0;
    color: #454545;
}

.footer .copyright .col-md-6:last-child p {
    text-align: right;
}

.footer .copyright p a {
    color: #1d2434;
    font-weight: 700;
}

.footer .copyright p a:hover {
    color: #ff0040;
}

@media (max-width: 767.98px) {
    .footer .copyright p,
    .footer .copyright .col-md-6:last-child p {
        margin: 5px 0;
        text-align: center;
    }
}