.container-proyectos{
  margin: auto;
  display: flex;
  /*background-color: #cccccc;*/
  /* width: 1024px; */
  /*height: 900px;*/
  position: relative;
  margin-bottom: 50px;
  
}

.container-proyectos.menu-top,
.container-proyectos.menu-bottom{
  flex-direction: column;
}

.container-proyectos .container-menu-slide{
  z-index: 1
}

.container-proyectos ul.menu, .container-proyectos ul.menu > li{
  list-style: none;
}

.container-proyectos.menu-top .container-menu-slide ul.menu,
.container-proyectos.menu-bottom .container-menu-slide ul.menu{
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 767px){
  .container-proyectos.menu-top .container-menu-slide ul.menu{
    justify-content: flex-start;
  }
}

.container-proyectos ul.slider, .container-proyectos ul.slider > li {
  padding: 0;
  margin: 0;
  list-style: none;
  
}

.container-proyectos.menu-right ul.slider,
.container-proyectos.menu-left ul.slider{
  position: relative;
  width: 100%;
  max-width: 1024px;
  margin: auto;
  height: 1000px;
  
flex: 8; 
}

.container-proyectos.menu-right ul.slider,
.container-proyectos.menu-left .container-menu-slide,
.container-proyectos.menu-bottom ul.slider,
.container-proyectos.menu-top .container-menu-slide{
  order: 1;
}

.container-proyectos.menu-left ul.slider,
.container-proyectos.menu-right .container-menu-slide,
.container-proyectos.menu-top ul.slider,
.container-proyectos.menu-bottom .container-menu-slide{
   order: 2;
}

/*@media (min-width: 768px){
  .container-proyectos ul.slider{
    border-radius: 20px;
    overflow: hidden;
  }
  
}*/

.container-proyectos ul.slider > li {
  position: absolute;
  left: 0px;
  top: 0px;
  opacity: 0;
  width: inherit;
  transition: opacity .5s;
  background:#fff;
  height: auto;
  
  border-radius: 20px;
}

.container-proyectos.menu-top ul.slider > li{
  top: 100px;
}

.container-proyectos ul.slider > li img{
  width: 100%;
  height: 100.01%;
  object-fit: cover;
}

.container-proyectos ul.slider .slide-container{
  display: flex;
  
   border-radius: 20px;
    overflow: hidden;
  box-shadow: 0 2px 20px 0 rgb(0 0 0 / 12%);
/* -webkit-box-shadow: 0px 11px 15px 0px rgba(50, 50, 50, 0.36);
-moz-box-shadow:    0px 11px 15px 0px rgba(50, 50, 50, 0.36);
box-shadow:         0px 11px 15px 0px rgba(50, 50, 50, 0.36);*/
  
    /*height: 950px;*/

}
.container-proyectos.image-top ul.slider .slide-container,
.container-proyectos.image-bottom ul.slider .slide-container{
  flex-direction: column;
}

.container-proyectos.image-top ul.slider .slide-container .image,
.container-proyectos.image-bottom ul.slider .slide-container .contenido-container,
.container-proyectos.image-left ul.slider .slide-container .image,
.container-proyectos.image-right ul.slider .slide-container .contenido-container{
  order: 1;
}


.container-proyectos.image-bottom ul.slider .slide-container .image,
.container-proyectos.image-top ul.slider .slide-container .contenido-container,
.container-proyectos.image-right ul.slider .slide-container .image,
.container-proyectos.image-left ul.slider .slide-container .contenido-container{
  order: 2;
}

/*.container-proyectos ul.slider .slide-container .image{
  flex: 5;
}*/
.container-proyectos ul.slider .slide-container .contenido-container{
  flex: 4;
  padding: 8%;  
}

.container-proyectos.image-left ul.slider .slide-container .image,
.container-proyectos.image-right ul.slider .slide-container .contenido-container,
.container-proyectos.image-right ul.slider .slide-container .image,
.container-proyectos.image-left ul.slider .slide-container .contenido-container{
  flex: 1 50%;
  box-sizing: border-box;
}

.container-proyectos ul.slider .slide-container .contenido-container .titulo{
  text-align: center;
  margin-bottom: 40px;
  font-size: 20px;
}

.container-proyectos ul.slider .slide-container .contenido-container ul{
  margin-left: 20%;
  font-size: 20px !important;
  list-style: none;
}

.container-proyectos ul.slider .slide-container .contenido-container ul li{
  margin-bottom: 15px;
}

.container-proyectos ul.slider .slide-container .contenido-container ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #654a3d; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

.container-proyectos ul.slider li.item-slider,
.container-proyectos ul.slider li.item-slider.active{
  color: #000 !important;  
}

/*.container-proyectos ul.slider li:first-child {
  opacity: 1; /*Mostramos el primer <li>*/
/*}*/

.container-proyectos ul.slider .boton-funcionalidad.sig:before{
  content: url('https://f.hubspotusercontent30.net/hubfs/8396987/flechaderecha2-1.png');
}

.container-proyectos ul.slider .boton-funcionalidad.ant:before{
  content: url('https://f.hubspotusercontent30.net/hubfs/8396987/flechaizquierda2-1.png');
}

.container-proyectos ul.slider li.active {
  opacity: 1; /*Mostramos el <li> del enlace que pulsemos*/ 
}

.container-proyectos .menu{
  text-align: center;
  margin: 20px;
  margin-top: 0;
  padding: 20px;
  flex: 3;
}

.container-proyectos.menu-left .menu li{
  text-align: left;
}

.container-proyectos.menu-right .menu li{
  text-align: right;
}

.container-proyectos .menu li a{
  display: inline-block;
  color: #c0c0c0;
  text-decoration: none;
  padding: 10px;
  font-size: 20px;
  border-radius: 0;
  cursor: pointer;
  opacity: 0.6;
  transition: ease all 0.4s;
}

.container-proyectos .menu li.active a{
  color: #ee7b27;
  font-weight: bold;
  opacity: 1;
  text-decoration: underline;
  transition: ease all 0.4s;
  
}
.container-proyectos.menu-right .menu li.active a{
  padding-right: 20px;
}
.container-proyectos.menu-left .menu li.active a{
  padding-left: 20px;
}

@media (max-width: 767px){
  .container-proyectos{
    flex-direction: column;
    /*width: 110%;
    margin-left: -5%; */
  }
  .container-proyectos ul.slider .slide-container{
    display: block;
    -webkit-box-shadow: 0px 11px 15px 0px rgba(50, 50, 50, 0.36);
-moz-box-shadow:    0px 11px 15px 0px rgba(50, 50, 50, 0.36);
box-shadow:         0px 11px 15px 0px rgba(50, 50, 50, 0.36);
    height: auto;
    /*min-height: 1200px;*/
    width: 90%;
    margin: auto;
  }
  .container-menu-slide .inner-container-menu-slide{
    width: 100vw;
    overflow: hidden;
  }
  .container-menu-slide .inner-container-menu-slide ul.menu{
    display: flex;
    overflow: auto;
    margin: 0;
  }

  .container-menu-slide .inner-container-menu-slide ul.menu::-webkit-scrollbar {
    display: none;
  }

  .container-menu-slide .inner-container-menu-slide ul.menu li{
    text-align: center;
    min-width: 200px;
    cursor: pointer;
  }
  .container-proyectos ul.slider {
    width: 98%;
    margin: auto 2%;
  }
  .container-proyectos ul.slider .slide-container .contenido-container ul{
    margin-left: 5%;
  }
  .container-proyectos ul.slider .slide-container .image{
    /*height: 60vw;*/
  }

}