/* content
nav
slider
services
convenios */


body{
    /* font-family: Arial, Helvetica, sans-serif !important; */
}

a:link {
    text-decoration: none !important;
  }

a:visited {
text-decoration: none !important;
}

a:hover {
text-decoration: none !important;
}

a:active {
text-decoration: none !important;
}
.btn a{
    color: #FAFAFA
}
.btn a:hover{
    color: #FAFAFA
}


.content {
    display: grid;
    background: rgba(254, 254, 254, 0.554);
    grid-template-columns: 1fr;
    grid-template-areas: "nav"
                        "section"
                         "footer";
}
.tituloSeccion{
    text-align: center;
    /* border-bottom: solid #32a3ea;  */
}
/* Menu */
.content .nav{
    grid-area: nav;
    width: 90%;
    margin: 0 auto 10px auto;
    display: grid;
    grid-template-columns: 1fr repeat(3,100px);
    grid-template-rows: 70px;
    grid-template-areas: "logo inicio nosotros contacto";
}

.content .nav >div p {
    color: #1878B5 !important;
    margin:0;
    padding: 0;
}
.content .nav .logo{
    grid-area: logo;
    /* background: pink; */
    display: flex;
    align-items: center;    
    justify-content: start;
}
.content .nav .logo img{
   
    height: 70px;
}

.content .nav .inicio{
    grid-area: inicio;
    /* background: greenyellow; */
    display: flex;
    align-items: center;    
    justify-content: center;
}

.content .nav .nosotros{
    grid-area: nosotros;
    /* background: yellow; */
    display: flex;
    align-items: center;    
    justify-content: center;
}

.content .nav .contacto{
    grid-area: contacto;
    /* background: orange ; */
    display: flex;
    align-items: center;    
    justify-content: center;
}

.content .section{
    background: #fafafa;
    grid-area: section;
}

/* Fin  Menu */

/* Slider */
.content .section .slider {
    grid-area: slider;
   
    /* background: purple; */
}
.content .section .jumbotron {
    grid-area: slider;   
    background-image: linear-gradient( to  bottom ,#1878B5 ,#fafafa);
    color: #FAFAFA;
}
.content .section .jumbotron h1{
    font-weight: bold;
    font-size: 4.5em;
}
.content .section .jumbotron p{
    color: #fafafa;
}
.content .section .jumbotron .container hr{
    background: #FAFAFA;
    height: 1.5px;
}
.carousel-item{
    height: 600px;
} 
.carousel-item img{
    height: 600px;
}
/* Fin Slider */



/* Servicios */
.content .section .services{
    margin: 3em auto 0 auto;
    width:85%;
    grid-area: services;
    display: grid;
    /* grid-template-areas: "tituloServicios tituloServicios tituloServicios"
                        "salud educacion recreacion"; */
    grid-template-areas: "tituloServicios"
                        "contServices";
    grid-template-columns: 1fr;
    grid-gap: 30px;
    /* justify-items: auto;
    align-items: auto; */
    justify-content: space-evenly;
    align-content: space-evenly;
}
.content .section .services .contServices{
    grid-area: contServices;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(3,1fr);
    justify-content: space-around;
    align-content: space-around;
}
.content .section .services .contServices .card{
   box-shadow: 0 2px 14px 0 rgba(0,0,0,.1);
}
.content .section .services .contServices .salud{
    border-bottom: solid #1878B5 5px;
}
.content .section .services .contServices .educacion{
    border-bottom: solid rgb(218, 201, 53) 5px;
}
.content .section .services .contServices .turismo{
    border-bottom: solid rgb(24, 181, 76) 5px;
}
.content .section .services .contServices .juridico{
    border-bottom: solid rgb(150, 24, 181) 5px;
}
.content .section .services .tituloServicios{
    grid-area: tituloServicios;
}

/* Fin Servicios */
/* Como funciona */
.content .section .comoFunciona {
    margin: 3em auto 0 auto;
    width:100%;
    grid-area: comoFunciona;
    background: #32a3ea;
    padding: 2em 0 3em 0;
    color: #fafafa
}
.content .section .comoFunciona .contComoFunciona {
    margin: 0 auto 0 auto;
    width:70%;
    grid-area: comoFunciona;
    display: grid;
    /* grid-template-areas: "tituloServicios tituloServicios tituloServicios"
                        "salud educacion recreacion"; */
    grid-template-areas: "tituloServicios"
                        "cont";
    grid-template-columns: 1fr;
    grid-gap: 30px;
    /* justify-items: auto;
    align-items: auto; */
    justify-content: space-evenly;
    align-content: space-evenly;
}
.content .section .comoFunciona .cont{
    grid-area: cont;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(3,190px);
    justify-items: center;
    align-items: center;
}
.content .section .comoFunciona .cont i{
    font-size: 12em;
    color: #fafafa
}
/* Fin Como funciona*/
/* Convenios */
.content .section .convenios{
    margin: 3em auto 3em auto; 
    width:85%;
    grid-area: convenios;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 30px;
    grid-template-areas: "tituloConvenios" 
                          "imgConvenios";
    justify-content: space-evenly;
    align-content: space-evenly;
    
}
.content .section .convenios .tituloConvenios{
    grid-area: tituloConvenios;
}

.content .section .convenios .imgConvenios{
    grid-area: imgConvenios;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
    justify-content: center;
}
.content .section .convenios .imgConvenios div{
    /* background: orange; */
    justify-self: center;
    align-self: center;
    
}
.ing{
    animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
    
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
.content .section .convenios .imgConvenios div img{
    max-width: 100%;
    max-height: 200px;
}
/* Fin Convenios */
.content .section .tituloGeneral{
    background-image: linear-gradient( to  right ,#32a3ea,#0b3e64);
    color: #FAFAFA;
    width: 100%;
    padding: 2em;
}
/* Nosotros */

.content .section .nosotros {
    background: url("../img/img/nosotros.jpg") no-repeat ;
    background-size: cover;
    
    width: 100%;
    height: 550px;
    margin: 0 auto;
    /* display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    align-items: center; */
}

.content .section .nosotros .presentacion {
    /* background: pink; */
    width: 48%;
    position: relative;
    top: 5%;
    left: 10%;
    text-align: left;
    /* color: gray; */
}
/* Fin Nosotros */

/* Mision Vision */

.content .section .misionVision {
    height: 400px;
    display: grid;
    grid-template-columns: 35% 35%;
    justify-content: space-evenly;
    align-content: space-around;
}


.content .section .misionVision .imgDerecha{
    /* background: red; */
    justify-self: center;
    align-self: center
}


/* Fin  Mision Vision */

/* Mision Vision */

.content .section .contacto {
    display: grid;
    grid-gap: 30px;
    height: 600px;
    grid-template-columns: 35% 35%;
    justify-content: space-evenly;
    align-content: space-around;
}


.content .section .contacto .presentacion{
    /* background: pink; */
    
}

.content .section .contacto .imgDerecha{
    /* background: red; */
    justify-self: center;
    align-self: start;

}
.content .section .contacto .imgDerecha i{
    font-size: 30px
}
.content .section .contacto .imgDerecha .mediosPago {
   margin-top:10px;
}
.content .section .contacto .imgDerecha .mediosPago .imgMedioPago{
    margin-top:10px;
    display: flex;
    align-items: center;    
    justify-content: space-evenly;
}
.content .section .contacto .imgDerecha .mediosPago img{
    width: 150px
}
/* Fin  Mision Vision */


/* Footer */
.content .footer{
    /* margin-top: 2em; */
    grid-area: footer;
    background: #0b3e64;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr;
    grid-template-rows: 50px 50px;
}
.content .footer div a {
    color: #FAFAFA;
}
.content .footer .map{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* background: red; */
    justify-items: center;
    align-items: center;
    color: #FAFAFA;
}
.content .footer .dev{
    justify-self: center;
    align-self: center;
    color: #FAFAFA;
}
/* Fin Footer */
.btn-whatsapp{
    background: url(../img/social/whatsapp.png) no-repeat center;
    background-size: cover;
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 5px;
    right: 5px;
    z-index: 100;
    cursor: pointer;
}
.btn-whatsapp:hover{
    
    animation-duration: 0.2s;
    animation-name: slidein;
    animation-fill-mode: both; 
    -moz-animation-duration: 0.2s;
    -webkit-animation-name: slidein;
    -o-animation-fill-mode: both;
}

@keyframes slidein {
    from {
      width: 50px;
        height: 50px;
    }
  
    to {
        width: 60px;
        height: 60px;
    }
}
@-moz-keyframes slidein {
    from {
      width: 50px;
        height: 50px;
    }
  
    to {
        width: 60px;
        height: 60px;
    }
}
@-webkit-keyframes slidein {
    from {
      width: 50px;
        height: 50px;
    }
  
    to {
        width: 60px;
        height: 60px;
    }
}
@-o-keyframes slidein {
    from {
      width: 50px;
        height: 50px;
    }
  
    to {
        width: 60px;
        height: 60px;
    }
}

@media screen and (max-width: 768px){
    .content {
        width: 100%;
        display: grid;
        background: rgba(254, 254, 254, 0.554);
        grid-template-columns: 1fr;
    }
    .content .nav{
        grid-area: nav;     
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: "logo logo logo" 
        "inicio nosotros contacto";
    }
    .content .nav .logo{
        align-items: center;    
        justify-content: center;
    }
    .content .section .slider{
        display: none;
       
    }
    .content .section .services{
        width:100%;
    }
    .content .section .services .contServices{
        grid-area: contServices;
        display: grid;
        grid-gap: 0px;
        grid-template-columns:1fr;
    }
    .content .section .services .card .card-body{
        text-align: center;
    }
}

/* Modal image */
.contentImg{
    width: 100%;
    /* background: red; */
}
.contentImg img{
    width: 100%;
}
/* Fin Modal image */