/*---------------------------Boton Municipe-------------------------------------*/
#buttonMunicipe{
    display: inline-block;
    background-color: #105289;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 4px;
    position: fixed;
    bottom: 165px;
    right: 5px;
    transition: background-color .3s,
      opacity .5s, visibility .5s;
    opacity: 1;
    z-index: 1000;
    border-radius: 32px;
    text-decoration-line: none !important;
    -webkit-box-shadow: 1px 1px 9px 1px #000;
    -moz-box-shadow: 1px 1px 9px 1px #000;
    
  }
  #buttonMunicipe::after {
    content: "\f0c0";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    font-size: 2em;
    line-height: 52px;
    color: #fff;
    text-decoration-line: none !important;
  }
  #buttonMunicipe:hover {
    cursor: pointer;
     background-color: #fff;
  }
  #buttonMunicipe:active {
    background-color: #fff;
  }

 /*Cuando se haga hover en boton que cambie el color del icono*/
.CMunicipe:hover > #buttonMunicipe::after{
   color: #105289;
  }







/*Texto del Span del boton Municipal PADRE*/

 #textoMunicipe {
    display: inline-block;
    background-color: rgb(72, 73, 73);
    border-radius: 8px;
    position: fixed;
    bottom: 178px;
    right: 61px;
    /*transition: background-color .3s, opacity .5s, visibility .5s;*/
    z-index: 1000;
    border-radius: 32px;
    font-family: montserrat;
    color: white;
    padding: 3px;
    font-size: 12px;
    visibility: hidden;
}

.CMunicipe:hover + #textoMunicipe{
visibility: visible;
  
}



/*Botones Municipe Hijos Start*/

/*----boton1 hijo Municipe Start------*/
#btnMun1{
  display: inline-block;
  background-color: #105289;
  width: 35px;
  height: 35px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 170px;
  right: 15px; /*medida trasladar*/
  text-decoration-line: none !important;
  transition: background-color .3s,
    opacity .5s, visibility .5s;
  opacity: 1;
  z-index: 999;
  border-radius: 32px;

  -webkit-box-shadow: 1px 1px 9px 1px #000;
  -moz-box-shadow: 1px 1px 9px 1px #000;




  transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 0.5s ease-in-out; /** Firefox **/
    -o-transition: all 0.5s ease-in-out; /** Opera **/
  
}

#btnMun1::after {
  content: "\f08d";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 1.2em;
  line-height: 35px;
  color: #fff;
  text-decoration-line: none !important;
}
#btnMun1:hover {
  cursor: pointer;
   background-color: #fff;
   width: 50px;
   height: 50px;
   transition: all 0.3s ease-in-out;
   
}
.contenedorbtnMun1:hover > #btnMun1::after{/*Hacer que crezca el icono al hacer hover*/
  font-size: 2em;
  line-height: 50px;
  transition: all 0.3s ease-in-out;
   
}
#btnMun1:active {
  background-color: #fff;
}

/*Cuando se haga hover en boton que cambie el color de la flecha*/
.contenedorbtnMun1:hover > #btnMun1::after{
  color: #105289;
  
}


/*Texto del Span*/

#texbtnM1{

  position: absolute;
  left: -70px;
  top: 12px;
  background-color: rgb(72, 73, 73);
  padding: 3px;
  font-size: 13px;
  font-family: montserrat;
  border-radius: 8px;
  color: white;
  visibility: hidden;

}

#btnMun1:hover > #texbtnM1{
visibility: visible;
  
}
/*Texto del Span END*/

   /*----boton1 hijo Municipe End------*/     


/*----boton2 hijo Municipe Start------*/
#btnMun2{
  display: inline-block;
  background-color: #105289;
  width: 35px;
  height: 35px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 170px;
  right: 15px; /*medida trasladar*/
  text-decoration-line: none !important;
  transition: background-color .3s,
    opacity .5s, visibility .5s;
  opacity: 1;
  z-index: 999;
  border-radius: 32px;

  -webkit-box-shadow: 1px 1px 9px 1px #000;
  -moz-box-shadow: 1px 1px 9px 1px #000;




  transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 0.6s ease-in-out; /** Firefox **/
    -o-transition: all 0.6s ease-in-out; /** Opera **/
  
}

#btnMun2::after {
  content: "\f15c";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 1.2em;
  line-height: 35px;
  color: #fff;
  text-decoration-line: none !important;
}
#btnMun2:hover {
  cursor: pointer;
   background-color: #fff;
   width: 50px;
   height: 50px;
   transition: all 0.3s ease-in-out;
   
}
.contenedorbtnMun2:hover > #btnMun2::after{/*Hacer que crezca el icono al hacer hover*/
  font-size: 2em;
  line-height: 50px;
  transition: all 0.3s ease-in-out;
   
}
#btnMun2:active {
  background-color: #fff;
}

/*Cuando se haga hover en boton que cambie el color de la flecha*/
.contenedorbtnMun2:hover > #btnMun2::after{
  color: #105289;
  
}


/*Texto del Span*/

#texbtnM2{

  position: absolute;
  left: -235px;
  top: 12px;
  background-color: rgb(72, 73, 73);
  padding: 3px;
  font-size: 12px;
  font-family: montserrat;
  border-radius: 8px;
  color: white;
  visibility: hidden;

}

#btnMun2:hover > #texbtnM2{
visibility: visible;
  
}
/*Texto del Span END*/
   /*----boton2 hijo Municipe End------*/     



/*----boton3 hijo Municipe Start------*/
#btnMun3{
  display: inline-block;
  background-color: #105289;
  width: 35px;
  height: 35px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 170px;
  right: 15px; /*medida trasladar*/
  text-decoration-line: none !important;
  transition: background-color .3s,
    opacity .5s, visibility .5s;
  opacity: 1;
  z-index: 999;
  border-radius: 32px;

  -webkit-box-shadow: 1px 1px 9px 1px #000;
  -moz-box-shadow: 1px 1px 9px 1px #000;




  transition: all 0.7s ease-in-out;
    -webkit-transition: all 0.7s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 0.7s ease-in-out; /** Firefox **/
    -o-transition: all 0.7s ease-in-out; /** Opera **/
  
}

#btnMun3::after {
  content: "\f0c0";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 1.2em;
  line-height: 35px;
  color: #fff;
  text-decoration-line: none !important;
}
#btnMun3:hover {
  cursor: pointer;
   background-color: #fff;
   width: 50px;
   height: 50px;
   transition: all 0.3s ease-in-out;
   
}
.contenedorbtnMun3:hover > #btnMun3::after{/*Hacer que crezca el icono al hacer hover*/
  font-size: 2em;
  line-height: 50px;
  transition: all 0.3s ease-in-out;
   
}
#btnMun3:active {
  background-color: #fff;
}

/*Cuando se haga hover en boton que cambie el color de la flecha*/
.contenedorbtnMun3:hover > #btnMun3::after{
  color: #105289;
  
}


/*Texto del Span*/

#texbtnM3{

  position: absolute;
  left: -105px;
  top: 12px;
  background-color: rgb(72, 73, 73);
  padding: 3px;
  font-size: 12px;
  font-family: montserrat;
  border-radius: 8px;
  color: white;
  visibility: hidden;

}

#btnMun3:hover > #texbtnM3{
visibility: visible;
  
}
   /*----boton3 hijo Municipe End------*/     



/*----boton4 hijo Municipe Start------*/
#btnMun4{
  display: inline-block;
  background-color: #105289;
  width: 35px;
  height: 35px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 170px;
  right: 15px; /*medida trasladar*/
  text-decoration-line: none !important;
  transition: background-color .3s,
    opacity .5s, visibility .5s;
  opacity: 1;
  z-index: 999;
  border-radius: 32px;

  -webkit-box-shadow: 1px 1px 9px 1px #000;
  -moz-box-shadow: 1px 1px 9px 1px #000;




  transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 0.8s ease-in-out; /** Firefox **/
    -o-transition: all 0.8s ease-in-out; /** Opera **/
  
}

#btnMun4::after {
  content: "\f571";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 1.2em;
  line-height: 35px;
  color: #fff;
  text-decoration-line: none !important;
}
#btnMun4:hover {
  cursor: pointer;
   background-color: #fff;
   width: 50px;
   height: 50px;
   transition: all 0.3s ease-in-out;
   
}
.contenedorbtnMun4:hover > #btnMun4::after{/*Hacer que crezca el icono al hacer hover*/
  font-size: 2em;
  line-height: 50px;
  transition: all 0.3s ease-in-out;
   
}
#btnMun4:active {
  background-color: #fff;
}

/*Cuando se haga hover en boton que cambie el color de la flecha*/
.contenedorbtnMun4:hover > #btnMun4::after{
  color: #105289;
  
}


/*Texto del Span*/

#texbtnM4 {
    position: absolute;
    left: -188px;
    top: 12px;
    background-color: rgb(72, 73, 73);
    padding: 3px;
    font-size: 12px;
    font-family: montserrat;
    border-radius: 8px;
    color: white;
    visibility: hidden;
}

#btnMun4:hover > #texbtnM4{
visibility: visible;
  
}
   /*----boton4 hijo Municpe End------*/  



/*---------------------------Boton Municipe End---------------------------------*/



/*---------------------------Boton Institucional--------------------------------*/
#buttonInstitucional {
    display: inline-block;
    background-color: #105289;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 4px;
    position: fixed;
    bottom: 95px;
    right: 5px;
    transition: background-color .3s,
      opacity .5s, visibility .5s;
    opacity: 1;
    z-index: 1000;
    border-radius: 32px;

    -webkit-box-shadow: 1px 1px 9px 1px #000;
    -moz-box-shadow: 1px 1px 9px 1px #000;
  
  

    }
  #buttonInstitucional::after {

    text-decoration-line: none !important;
  }
  #buttonInstitucional:hover {
    cursor: pointer;
     background-color: #fff;
  }
  #buttonInstitucional:active {
    background-color: #fff;
  }
  #icoLogo1{
height: 90%;
position: absolute;
margin-left: -14px;

  }
  #icoLogo2{
    height: 90%;
  visibility: hidden;
  position: absolute;
  margin-left: -14px;
      }

 /*Cuando se haga hover en boton que cambie el color de la flecha*/

 .contenedorBotonInstitucional a:hover > #icoLogo1{
    visibility: hidden;
  }
  .contenedorBotonInstitucional a:hover > #icoLogo2{
   visibility: visible;
  }



#textoInstitucional{
    display: inline-block;
    background-color: rgb(72, 73, 73);
    border-radius: 8px;
    position: fixed;
    bottom: 108px;
    right: 61px;
    /*transition: background-color .3s, opacity .5s, visibility .5s;*/
    z-index: 1000;
    border-radius: 32px;
    font-family: montserrat;
    color: white;
    padding: 3px;
    font-size: 12px;
    visibility: hidden;
}


.contenedorBotonInstitucional a:hover + #textoInstitucional{
visibility: visible;
  
}





/*Botones Institucionales Hijos Start*/

/*----boton1 hijo Institucional Start------*/
#btnInst1{
  display: inline-block;
  background-color: #105289;
  width: 35px;
  height: 35px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 100px;
  right: 15px; /*medida trasladar*/
  text-decoration-line: none !important;
  transition: background-color .3s,
    opacity .5s, visibility .5s;
  opacity: 1;
  z-index: 999;
  border-radius: 32px;

  -webkit-box-shadow: 1px 1px 9px 1px #000;
  -moz-box-shadow: 1px 1px 9px 1px #000;




  transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 0.5s ease-in-out; /** Firefox **/
    -o-transition: all 0.5s ease-in-out; /** Opera **/
  
}

#btnInst1::after {
  content: "\f0d1";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 1.2em;
  line-height: 35px;
  color: #fff;
  text-decoration-line: none !important;
}
#btnInst1:hover {
  cursor: pointer;
   background-color: #fff;
   width: 50px;
   height: 50px;
   transition: all 0.3s ease-in-out;
   
}
.contenedorbtnInst1:hover > #btnInst1::after{/*Hacer que crezca el icono al hacer hover*/
  font-size: 2em;
  line-height: 50px;
  transition: all 0.3s ease-in-out;
   
}
#btnInst1:active {
  background-color: #fff;
}

/*Cuando se haga hover en boton que cambie el color de la flecha*/
.contenedorbtnInst1:hover > #btnInst1::after{
  color: #105289;
  
}


/*Texto del Span*/

#texbtnI1{

  position: absolute;
  left: -260px;
  top: 12px;
  background-color: rgb(72, 73, 73);
  padding: 3px;
  font-size: 13px;
  font-family: montserrat;
  border-radius: 8px;
  color: white;
  visibility: hidden;

}

#btnInst1:hover > #texbtnI1{
visibility: visible;
  
}
/*Texto del Span END*/

   /*----boton1 hijo Institucional End------*/     


/*----boton2 hijo Institucional Start------*/
#btnInst2{
  display: inline-block;
  background-color: #105289;
  width: 35px;
  height: 35px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 100px;
  right: 15px; /*medida trasladar*/
  text-decoration-line: none !important;
  transition: background-color .3s,
    opacity .5s, visibility .5s;
  opacity: 1;
  z-index: 999;
  border-radius: 32px;

  -webkit-box-shadow: 1px 1px 9px 1px #000;
  -moz-box-shadow: 1px 1px 9px 1px #000;




  transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 0.6s ease-in-out; /** Firefox **/
    -o-transition: all 0.6s ease-in-out; /** Opera **/
  
}

#btnInst2::after {
  content: "\f15c";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 1.2em;
  line-height: 35px;
  color: #fff;
  text-decoration-line: none !important;
}
#btnInst2:hover {
  cursor: pointer;
   background-color: #fff;
   width: 50px;
   height: 50px;
   transition: all 0.3s ease-in-out;
   
}
.contenedorbtnInst2:hover > #btnInst2::after{/*Hacer que crezca el icono al hacer hover*/
  font-size: 2em;
  line-height: 50px;
  transition: all 0.3s ease-in-out;
   
}
#btnInst2:active {
  background-color: #fff;
}

/*Cuando se haga hover en boton que cambie el color de la flecha*/
.contenedorbtnInst2:hover > #btnInst2::after{
  color: #105289;
  
}


/*Texto del Span*/

#texbtnI2{

  position: absolute;
  left: -260px;
  top: 12px;
  background-color: rgb(72, 73, 73);
  padding: 3px;
  font-size: 12px;
  font-family: montserrat;
  border-radius: 8px;
  color: white;
  visibility: hidden;

}

#btnInst2:hover > #texbtnI2{
visibility: visible;
  
}
/*Texto del Span END*/
   /*----boton2 hijo Institucional End------*/     



/*----boton3 hijo Institucional Start------*/
#btnInst3{
  display: inline-block;
  background-color: #105289;
  width: 35px;
  height: 35px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 100px;
  right: 15px; /*medida trasladar*/
  text-decoration-line: none !important;
  transition: background-color .3s,
    opacity .5s, visibility .5s;
  opacity: 1;
  z-index: 999;
  border-radius: 32px;

  -webkit-box-shadow: 1px 1px 9px 1px #000;
  -moz-box-shadow: 1px 1px 9px 1px #000;




  transition: all 0.7s ease-in-out;
    -webkit-transition: all 0.7s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 0.7s ease-in-out; /** Firefox **/
    -o-transition: all 0.7s ease-in-out; /** Opera **/
  
}

#btnInst3::after {
  content: "\f07b";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 1.2em;
  line-height: 35px;
  color: #fff;
  text-decoration-line: none !important;
}
#btnInst3:hover {
  cursor: pointer;
   background-color: #fff;
   width: 50px;
   height: 50px;
   transition: all 0.3s ease-in-out;
   
}
.contenedorbtnInst3:hover > #btnInst3::after{/*Hacer que crezca el icono al hacer hover*/
  font-size: 2em;
  line-height: 50px;
  transition: all 0.3s ease-in-out;
   
}
#btnInst3:active {
  background-color: #fff;
}

/*Cuando se haga hover en boton que cambie el color de la flecha*/
.contenedorbtnInst3:hover > #btnInst3::after{
  color: #105289;
  
}


/*Texto del Span*/

#texbtnI3{

  position: absolute;
  left: -185px;
  top: 12px;
  background-color: rgb(72, 73, 73);
  padding: 3px;
  font-size: 12px;
  font-family: montserrat;
  border-radius: 8px;
  color: white;
  visibility: hidden;

}

#btnInst3:hover > #texbtnI3{
visibility: visible;
  
}
   /*----boton3 hijo Institucional End------*/     



/*----boton4 hijo Institucional Start------*/
#btnInst4{
  display: inline-block;
  background-color: #105289;
  width: 35px;
  height: 35px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 100px;
  right: 15px; /*medida trasladar*/
  text-decoration-line: none !important;
  transition: background-color .3s,
    opacity .5s, visibility .5s;
  opacity: 1;
  z-index: 999;
  border-radius: 32px;

  -webkit-box-shadow: 1px 1px 9px 1px #000;
  -moz-box-shadow: 1px 1px 9px 1px #000;




  transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 0.8s ease-in-out; /** Firefox **/
    -o-transition: all 0.8s ease-in-out; /** Opera **/
  
}

#btnInst4::after {
  content: "\f0e0";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 1.2em;
  line-height: 35px;
  color: #fff;
  text-decoration-line: none !important;
}
#btnInst4:hover {
  cursor: pointer;
   background-color: #fff;
   width: 50px;
   height: 50px;
   transition: all 0.3s ease-in-out;
   
}
.contenedorbtnInst4:hover > #btnInst4::after{/*Hacer que crezca el icono al hacer hover*/
  font-size: 2em;
  line-height: 50px;
  transition: all 0.3s ease-in-out;
   
}
#btnInst4:active {
  background-color: #fff;
}

/*Cuando se haga hover en boton que cambie el color de la flecha*/
.contenedorbtnInst4:hover > #btnInst4::after{
  color: #105289;
  
}


/*Texto del Span*/

#texbtnI4{

  position: absolute;
  left: -130px;
  top: 12px;
  background-color: rgb(72, 73, 73);
  padding: 3px;
  font-size: 12px;
  font-family: montserrat;
  border-radius: 8px;
  color: white;
  visibility: hidden;

}

#btnInst4:hover > #texbtnI4{
visibility: visible;
  
}
   /*----boton3 hijo Institucional End------*/     

/*Botones Institucionales Hijos End */




/*---------------------------Boton Institucional End--------------------------------*/

/*---------------------------Boton SliderUp --------------------------------*/

  
#buttonSlideUp {
    display: inline-block;
    background-color: #105289;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 4px;
    position: fixed;
    bottom: 30px;
    right: 5px;
    transition: background-color .3s,
      opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    border-radius: 32px;
     text-decoration:none;
    -webkit-box-shadow: 1px 1px 9px 1px #000;
    -moz-box-shadow: 1px 1px 9px 1px #000;
    
  }
  #buttonSlideUp::after {
    content: "\f077";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    font-size: 2em;
    line-height: 45px;
    color: #fff;
      text-decoration-line: none !important;
  }
  #buttonSlideUp:hover {
    cursor: pointer;
     background-color: #fff;
  }
  #buttonSlideUp:active {
    background-color: #fff;
  }
  #buttonSlideUp.show {
    opacity: 1;
    visibility: visible;
  }
  
 /*Cuando se haga hover en boton que cambie el color de la flecha*/
 .contenedorSlider:hover > #buttonSlideUp::after{
    color: #105289;
  }



/*---------------------------Boton SliderUp End--------------------------------*/


 /*------------------------------------------------------------------------------------------*/


/*-----------------------------Rotacion---------------------------------------*/

/*-----Spin para rotar derecho-----*/
@-moz-keyframes spin { 
  100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
  100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
  100% { 
      -webkit-transform: rotate(360deg); 
      transform:rotate(360deg); 
  } 
}


.rotacion{  -webkit-animation:spin 0.4s linear infinite;
  -moz-animation:spin 0.4s linear infinite;
  animation:spin 0.4s linear infinite;}
/*-----Spin para rotar derecho end-----*/

/*-----Spin para rotar Inverso-----*/
@-moz-keyframes spin2 { 
  100% { -moz-transform: rotate(-360deg); } 
}
@-webkit-keyframes spin2 { 
  100% { -webkit-transform: rotate(-360deg); } 
}
@keyframes spin2 { 
  100% { 
      -webkit-transform: rotate(-360deg); 
      transform:rotate(-360deg); 
  } 
}


.rotacionInversa{  -webkit-animation:spin2 0.4s linear infinite;
  -moz-animation:spin2 0.4s linear infinite;
  animation:spin2 0.4s linear infinite;}
/*-----Spin para rotar Inverso end-----*/

/*-----------------------------Rotacion End---------------------------------------*/



/*-----------------------------Trasladar-----------------------------------------------------------*/


/*1.--------------------Botones Municipales------------------------------------*/

/*Btn1 traslación*/

.btnMun1Transl1{  
  -moz-transform:translate(-75px, 90px);   
   -webkit-transform:translate(-75px, 90px); 
  -webkit-transform: translate(-75px, 90px);
  transform:translate(-75px, 90px); 
  transform: center center;
  transition: all .3s ease-in-out;
   }
  /*Btn1  traslación End*/
  
  /*Btn2 traslación*/
  
  .btnMun1Transl2{  
    -moz-transform:translate(-130px, 18px); 
     -webkit-transform:translate(-130px, 18px); 
    -webkit-transform: translate(-130px, 18px); 
    transform:translate(-130px, 18px); 
    transform: center center;
    transition: all .3s ease-in-out;
     }
    /*Btn2  traslación End*/
  
  
    /*Btn3 traslación*/
  
  .btnMun1Transl3{  
    -moz-transform:translate(-80px,-100px);  
     -webkit-transform:translate(-80px,-70px); 
    -webkit-transform: translate(-80px,-100px); 
    transform:translate(-130px,-70px); 
    transform: center center;
    transition: all .3s ease-in-out;
     }
    /*Btn3  traslación End*/
  
    /*Btn4 traslación*/
  
  .btnMun1Transl4{  
    -moz-transform:translate(-75px,-130px); 
     -webkit-transform:translate(-75px,-130px); 
    -webkit-transform: translate(-75px,-130px); 
    transform:translate(-75px,-130px); 
    transform: center center;
    transition: all .3s ease-in-out;
     }
    /*Btn4  traslación End*/
/*--------------------Botones Municipales End--------------------------------*/




/*2.--------------------Botones Institucionales------------------------------------*/

/*Btn1 traslación*/

.btnInst1Transl1{  
-moz-transform:translate(-160px);  
 -webkit-transform:translate(-160px); 
-webkit-transform: translate(-160px); 
transform:translate(-160px); 
transform: center center;
transition: all .3s ease-in-out;
 }
/*Btn1  traslación End*/

/*Btn2 traslación*/

.btnInst1Transl2{  
  -moz-transform:translate(-130px,-60px);  
   -webkit-transform:translate(-130px,-60px); 
  -webkit-transform: translate(-130px,-60px); 
  transform:translate(-130px,-60px); 
  transform: center center;
  transition: all .3s ease-in-out;
   }
  /*Btn2  traslación End*/


  /*Btn3 traslación*/

.btnInst1Transl3{  
  -moz-transform:translate(-80px,-100px);  
   -webkit-transform:translate(-80px,-100px); 
  -webkit-transform: translate(-80px,-100px); 
  transform:translate(-80px,-100px); 
  transform: center center;
  transition: all .3s ease-in-out;
   }
  /*Btn3  traslación End*/

  /*Btn4 traslación*/

.btnInst1Transl4{  
  -moz-transform:translate(-25px,-80px);  
   -webkit-transform:translate(-25px,-80px); 
  -webkit-transform: translate(-25px,-80px); 
  transform:translate(-25px,-130px); 
  transform: center center;
  transition: all .3s ease-in-out;
   }
  /*Btn4  traslación End*/

/*--------------------Botones Institucionales End--------------------------------*/




/*----------------------------Trasladar End------------------------------------------------------*/