@import url('https://fonts.googleapis.com/css2?family=Suwannaphum:wght@700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Arbutus+Slab&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap');

:root{

--gris:#9e9e9e;

--grisfuerte:#70635a;

--rojo:  #ff3547;

--rosa:#ec2286;

--amarillo:#fdea0b;

--verde:#9ac93d;

--azul:#00a6e4;



}



body{

    padding: 0;

    margin: 0;

}

.content{

    width: 100%;

    background: center fixed url("https://zinacantepec.gob.mx/img/fuente.jpg");

    height:600px ;

    animation-name:slid;

    animation-duration: 9.9s;

    animation-delay: 0.5s;

    animation-iteration-count: infinite;

    background-repeat: no-repeat;

    background-size:cover;

    opacity: 1;

    background-position: center;

    transition: 0.2s;

    display: block;

    position: relative;

    margin-top: -50px;

    



}

.content::before{

    content: "";

    width: 100%;

    height: 100%;

    display: block;

  

    

    backdrop-filter: blur(0px);

position: absolute;

}

.animate:hover{

    transform: translateY(-10px);

}

.animate{

    font-family: 'Suwannaphum', serif;

    text-shadow: 1px 2px 3px black;

    display:table-column;

    width:100%;

    color: white;

    text-align: center;

    font-size: 33px;

    display: block;

    margin: auto;

    animation-name:letra;

    animation-duration: 3s;

    animation-fill-mode: forwards;

    

    

    

}





.bando h2::before{

    content: "";

    display: block;

    width: 7px;

    height: 100%;

    background-color: blue;

    left: -15px;

    position: absolute;



}

.bando{

    display:table-cell;

    background-color: aqua;

    position: absolute;

    bottom: 47%;

    left:0;

    animation-name: bando ;

    animation-duration: 5s;

    animation-fill-mode: forwards;

    transform: scale(0);

    transition: all 5s;

    animation-delay: 0.9s;

    

    

   

}

.lista{

    width: auto;

    height: 50px;

    display: block;

    list-style: none;

    position: absolute;

    overflow: hidden;

}

.lista li{

    display: flex;

    align-items: center;

    justify-content: center;

    width:500px;

    height:50px;

    border-bottom: 2px solid red;

    /*background-color: blueviolet;*/



    text-align: center;

    font-size: 25px;

    

    animation-name: lista;

    animation-duration: 7s;

    animation-delay: 8s;

    animation-iteration-count:infinite;

    animation-direction:alternate ;

    color: white;

    font-family: 'Suwannaphum', serif;

    text-shadow: 1px 2px 3px black;



  

    



}

 @keyframes lista{

    0%{

        transform: translateY(0px);

    }

    500%{

        transform: translateY(-50px);

    }

    100%{

        transform: translateY(-100px);

    }

 }







@keyframes bando {

    0%{

        transform: translateX(-100px )  scale(0);

    }

    100%{

        transform: translateX(300px)  scale(1);

       

        

    }

    

}

@keyframes letra {

    0%{

        transform: translateY(50px) scale(0);

        opacity: 0;

        transition: 5s;

        backdrop-filter: blur(0px);

    }

    100%{

        transform: translateY(200px) scale(1);

        opacity: 1;

        transition: 5s;

        backdrop-filter: blur(10px);

    }

}



@keyframes slid {



    0%{

        
		background-image: url("https://zinacantepec.gob.mx/img/fuente.jpg");

        opacity: 1;

        transition: ease-in 5.9s;

        

    }

    40%{

        background-image: url("https://upload.wikimedia.org/wikipedia/commons/2/28/Vista_del_Nevado_de_Toluca.jpg");

        opacity:1;

        transition: all 1.9s;

    }

    

    /*80%{

        background-image: url("https://zinacantepec.gob.mx/img/agosto23/mar.jpg");

        opacity:1;

        transition: all 3.9s;

    }*/

    100%{

        background-image: url("https://zinacantepec.gob.mx/img/1IGMVVB.jpg");

        opacity:1;

        transition: all 1.9s;

    }



}





/*servicios*/



.servicios{

    display: block;

    width: 100%;

    height:100px;

    background-image: url("https://static.vecteezy.com/system/resources/previews/002/303/937/large_2x/abstract-gray-background-with-wavy-lines-vector.jpg");

   background-position: center;

   background-size: cover;

   background-repeat: no-repeat;

   background-attachment: fixed;

   border-bottom: 1px solid var(--gris);

   

   

}

.sub_menu{

display: grid;

    grid-template-columns: repeat(5,1fr);

    width: 70%;

    margin: auto;

    height: 100%;

    justify-content: center;

    align-items: center;

    

    

}

.item a{

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 5px;

    font-family: 'Montserrat', sans-serif;

    color: var(--grisfuerte);

    font-weight: 700;



}

.rosa{

    color:var(--rosa);

    margin: 5px;

}

.amarillo{

    color:var(--amarillo);

    margin: 5px;

}

.azul{

    color:var(--azul);

    margin: 5px;

}

.verde{

    color:var(--verde);

    margin: 5px;

}







.valor{

    width: 200px;

    height: 200px;

    display: flex;

    margin: auto;

    background-color: white;

    border-radius:100%;

    align-items: center;

    justify-content: center;

    border: 2px solid var(--gris);



}

/*Avisos y convocxatorias*/

.titulo_central{

    font-family: 'Roboto Slab', serif;

    display: block;

    text-align: center;

    color:var(--grisfuerte);

    font-size: 20px;

   padding: 10px;

   line-height: 28px;



   overflow: hidden;

   position: relative;

}

.titulo_central h1{

margin-top: 0px;

display: block;

position: relative;



}

.titulo_central h1::before{

    content: "";

    display: block;

    height: 3px;

    width: 30%;

    background-color: var(--gris);

    bottom: -20px;

    position: absolute;

    display: block;

    margin: auto;

   

    





}

.titulo_central h1::after{

    content: "";

    display: block;

    height: 3px;

    width: 30%;

    background-color:var(--gris);

    bottom: -20px;

    position: absolute;

    display: block;

    margin: auto;

    right: 0;

   

    





}



.titulo_central span{

    display: block;

    

    color: var(--gris);

    font-size: 17px;

    animation-name: gobierno;

    animation-duration: 3s;

    animation-fill-mode: forwards;

    animation-iteration-count: infinite;

    animation-direction: alternate;

    transition: 3s ease-out;

}



@keyframes gobierno{

    0%{

        transform: translateY(-7px);

    }

    100%{

        transform: translateY(2px);

    }

}



.content_slider{

    width: 81%;

    display: block;

    margin: auto;

    padding: 15px 15px;

    position: relative;

    overflow: hidden;

}

.owl-item{

    

    width: 100px;

    height:280px;

    display: block;

    padding: 2px;

   /* background-color: #ec2286;*/

}

.owl-carousel .owl-stage-outer{

    

    padding: 5px 10px;

    height: 300px;

}

.im{

display: block;

height: 100%;

box-shadow: 0px 5px 10px gray;

}

.owl-dots{

    background: var(--grisfuerte);

    display:table-cell;

    margin: auto;

    width: 100%;

    display: none;

}

.owl-dot span{

    color: white;

    display: block;

    width: 10px;

    height: 10px;

   

    margin: 5px;

}

.owl-dots .active{

    background-color: #9ac93d;

}

.owl-nav{

    display: flex;

    justify-content: space-between;

    width: 100%;

    position: absolute;

    top: 50%;

}

[aria-label="Previous"]{

    background-color: #9ac93d;

    font-size: 35px;

    display: table-cell;

    margin: 5px;

    padding: 5px;

    color: white;

    

}

[aria-label="Next"]{

    display: table-cell;

    background-color: #9ac93d;

    font-size: 35px;

    margin: 5px;

    padding: 5px;

    color: white;

}



/*Gobierno*/

.content_g{

    width: 80%;

    height: auto;

    display: block;

    margin: auto;

    line-height:7px;

   position: relative;

   padding: 4px;

}

.content_g h1{

    font-family: 'Roboto Slab', serif;

    display: block;

    

    color:var(--grisfuerte);

    font-size: 26px;

}

.content_g span{

    font-family: 'Roboto Slab', serif;

    color: var(--rojo);

    



}

.content_g p{

    font-family: Arial, Helvetica, sans-serif;

    color: var(--grisfuerte);

    

}

.content_g::before{

    content: "";

    width:5px;

    height: 100%;

    display: block;

    background-color: var(--rojo);

    position: absolute;

    left: -10PX;

}

.g_body

{

    width: 80%;

    display: block;

    margin: auto;



}

.g_item_u ul{

    list-style: none;

    

}

.g_item_u ul li{ 

    list-style: none;

    display: flex;

    margin-bottom: 50px;



}

.g_item_u ul li:hover { 

    

    transform: translateY(-5px);

    transition: all 0.3s;

    color: #00a6e4;

    

}

.g_item_u ul li i{

    color:white;

    padding: 5px;

    border:2px solid var(--grisfuerte);

    height: 50px;

    width: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius:100%;

    margin-left: 5px;

    box-shadow:0px 7px 30px gray;

    

}

.g_item_u ul li span{

    font-family: Arial, Helvetica, sans-serif;

    display: flex;

    align-items: center;

    margin-left: 5px;

    flex-direction:column;

    text-align: center;

    width: 200px;

    justify-content: space-evenly;

    color: var(--grisfuerte);

    font-weight: bold;

}



.g_item_u ul li span a{

    background-color: var(--gris);

    color: white;

    padding: 5px;

    text-decoration: none;

    font-weight: bold;

    border-radius: 10px;

    font-size: 15px;

}

.body_row{

    display: grid;

    grid-template-columns: repeat(3,1fr);

    height: 500px;

    align-items: center;

    backdrop-filter: blur(10px);

    column-gap: 15px;

/*background-image: url("https://static.vecteezy.com/system/resources/previews/002/303/937/large_2x/abstract-gray-background-with-wavy-lines-vector.jpg");

    /*background: radial-gradient( black, transparent);*/

}

.g_item_u a img{

    height:400px;

    box-shadow: 0px 10px 20px gray;

}



/*Noticias*/

.noticias{

    width: 80%;

    display: block;

    margin: auto;

}

.body_noticias{

    padding:40px 10px;

    display: grid;

    grid-template-columns: repeat(3,1fr);

    grid-row-gap: 25px;

    grid-column-gap: -25px;

    

}

.item_noticias{

    display: block;

    width: 350px;

    height:270px;

    box-shadow: 0px 3px 7px gray;

    margin: auto;

    position: relative;

    overflow: hidden;

    

}

.info_n{

    display: flex;

    

    width: 100%;

    height: 100%;

    position: absolute;

    top:0;

    background:linear-gradient(transparent,black);

    color:white;

    font-size: 10px;

    font-family: Arial, Helvetica, sans-serif;

    opacity: 1;

    flex-direction: column;

    align-items: center;

    justify-content: space-evenly;

    text-transform: uppercase;

    text-align: center;

    

    

}

.info_n i{

    color:var(--rojo);

}

.item_noticias:hover > .info_n{

    transition: ease-in-out 1.5s;

    opacity: 0;

    top:0;

    cursor: pointer;

}

.item_noticias img{

width:100%;

height:100%;

}

.fecha{

    font-family: Arial, Helvetica, sans-serif;

    color: white;

    display: flex;

    font-family: Arial, Helvetica, sans-serif;

  

    font-size: 17px;

    padding: 3px;

}



/*termina noticias*/



/*población*/

.poblacion{

    display: flex;

    width: 100%;

    height: 350px;

    background-image: url("https://upload.wikimedia.org/wikipedia/commons/2/28/Vista_del_Nevado_de_Toluca.jpg");

    background-attachment: fixed;

    background-position: center center;

    background-size: cover;

    background-position-y: 280px;

    position: relative;

    flex-direction: column;

    align-items: center;

    justify-content: space-between;

    

}

.b_poblacion{

    display: block;

    width: 80%;

    margin: auto;

}



.conteo {

    display: flex;

    justify-content: space-evenly;

    z-index: 1;

    position: absolute;

    top: 25%;

    margin: auto;

    width: 100%;

   

}

.miles{

    display: flex;

    font-size: 60px;

    font-family: sans-serif;

    height: auto;

    align-items: center;

    color: white;

    font-weight: 100;

    flex-direction: column;

    

}

.miles span{

    font-size: 13px;

    padding: 5px;

}

.miles i{

    padding: 10px;

    color: var(--verde);

    border: 2px solid white;

    border-radius: 50px;

    box-shadow: 0px 7px 20px black;

}

.count{

    transition: 0.3s;

    display: block;

    padding: 5px;

    text-shadow: 2px 1px 4px black;



}

.poblacion::before{

    content: "";

    display: block;

    width: 100%;

    height: 100%;

    background: linear-gradient(359deg, black, transparent 400px);

    position: absolute;

    top: 0;

    opacity: 0.8;

 

}

.t_poblacion{

    position: absolute;

    z-index: 1;

    color: white;

    text-align: center;

    display: block;

    font-family: 'Montserrat';

    font-size: 35px;

    text-transform: capitalize;

    font-weight: 100;

    text-shadow: 2px 1px 4px black;

}

.datos{

    display: flex;

}



/*REDES*/

.redes{

    width: 80%;

    margin: auto;

    margin-top: 25px;

    display:block;

    

}

.body_redes{

    

        display: flex;

        flex-direction: row;

        justify-content: space-between;

        width: 80%;

        margin: auto;

        padding: 10px;

    

}

iframe{

    box-shadow: 0px 7px 10px black;

    animation-name: mov;

    animation-iteration-count:calc(10);

    animation-duration: 0.9s;

}

@keyframes mov {

    50%{

        transform: translateY(-10px);

    }

    

}

/*sitios*/

.sitios{

width: 80%;

display: block;

margin: auto;



}



.carrucel .owl-stage-outer {

height: auto;

}

.carrucel  .owl-nav{

    display: none;

}

.mapa{

    height:90%;

    width:auto;

    



}

.incu{

    height:120px;

}

.op{

    height:78px;

}

.dif{

    height:75px;

}

.carrucel .owl-stage-outer .owl-stage .owl-item{ 

    

    height: 115px !important;

    border: none;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0px 0px 5px #ccc;

}







@media screen and (max-width: 800px){





    .animate h1{

        display: block;

        font-size: 25px;

    }

    .bando{

        font-size: 15px;

        display: none;

    }

}