/*fondo de imagen*/
body{
  margin: 0px;
  min-height: 100vh;
  background-image: url("../imagen/fondo.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

body:before {
  content: "";
  width: 100%;
  min-height: 100vh;
  position: absolute;
  top: 0;
  left: 0;

  background: linear-gradient(90deg,#242329,#c9323e);

  opacity: 0.6;
  z-index: -1;
}
section{
  width: 100%;
  margin-bottom: 25px;
}
/*BANNER*/


#banner{
  margin-top: 0px;
  position: relative;
}

#banner img{
  width: 100%;
  height: 100%;

}

#banner .contenedor1{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: #f5f0f3
}

#banner p{
  font-size: 15px;
  color: ##f5f0f3;
}

@media (min-width: 1024px){
  .contenedor1{
    width: 1000px;
  }
}

@media (min-width: 450px){
  #banner p{
    font-size: 30px;
    text-align: center;

  }
  #banner img{
    height: auto;
    margin-top: -50px;
  }
}



@media (min-width: 768px){
  #banner {
    height: 100px;
    overflow: hidden;
  }
#banner img{
  height: auto;
  margin-top: -100px;
}
}

@media (min-width: 1024px){

#banner img{
  margin-top: -200px;
}
}


/*MAPA*/

<style class="cp-pen-styles">#mapa{
  width:50%;
  text-align:right;

}
#mapa #title{
  text-align:left;
}
#mapa svg {
  display: inline;
  position:relative;
  width: 800px;
  height: 500px;
  left: 30%;
  margin-left: -30px;
  border-style: solid;
  border-color: rgba(201, 500, 76, 0.10);
  background-image: url("../imagen/pomacochas.jpg");
  background-repeat: no-repeat;
  background-size: cover;

  /*https://images.mentalfloss.com/sites/default/files/styles/mf_image_16x9/public/istock_47989012_smallprimary.jpg?itok=ZUZXZv7e&resize=1100x1100*/


}
#mapa g path:not(.fil1):hover{
  fill: #faf7f9;
  cursor:pointer;
}
#mapa a{
  position: relative;
      z-index: 0;
}
.contenedor{
  display: flex;
  width: 500px;
  height: 40px;
  color: #f7f2f7;
  font-size: 40px;
  line-height: 40px;

  right: 0;
  bottom: 0;
  margin: auto;
  overflow: hidden;

}

ul{
  list-style: none;
  padding-left: 10px;
  animation: cambiar 7s infinite;
}
ul, p{
  margin: 0;
}

@keyframes cambiar {

0%{ margin-top: 0;}
20%{ margin-top: 0;}

25%{ margin-top: -40px;}
50%{ margin-top: -40px;}



85%{ margin-top: -40px;}
95%{ margin-top: -40px;}

100%{ margin-top: 0;}

}





</style>