/* estilos sliders */
  #carouselExampleControls>div>.carousel-item{
    height:600px;
  }
  #carouselExampleControls>div>div>.carousel-caption>p{
    font-size:13px!important;
    /*text-align:justify !important;*/
    line-height: 24px !important;
  }
  #carouselExampleControls>div>div>.carousel-caption {
    position: absolute;
    right: 10%;
    bottom: 20px;
    left: 31%;
    z-index: 10;
    padding-top: 0px;
    padding-bottom: 0px;
    color: #fff;
    text-align: center;
    top: 0%;
    height: 300px;
  }

 #carouselExampleControls>.flechas{
    position: absolute;
    bottom: 0;
    left: 58%;
    top: 65%;
  }
  #carouselExampleControls>.flechas>a.carousel-control{
    display: inline-block;
    background: #ff725f;
    height: 60px;
    width: 60px;
    text-align: center;
    z-index: 999;
  }
  #carouselExampleControls>.flechas>a>img.flecha{
    max-width: 20px;
    margin-top: 14px;
    margin-right: 12px;
  }
/* end estilos sliders*/


.mr{
  margin-left: -4px;
}

button.abre-modal{
  background:transparent !important;
  border:none !important;
}


.modal_portafolio_udd{
  position:fixed;
  top:0;
  left:0px;
  bottom:0px;
  right:0px;
  background:rgba(0,0,0,0.8);
  z-index:1000000;
  display:none;
  padding:10em 20%;
}

.modal_portafolio_udd .cierra-modal{
  position:fixed;
  top:1.3em;
  right:6.5rem;
  max-width: 25px;
}

@media (max-width: 475px) {
  .modal_portafolio_udd .cierra-modal {
    right: 2rem!important;
    max-width:25px;
  }
  .modal_portafolio_udd { 
    padding: 5em 0%;
  }
  #carouselExampleControls>div>div>.carousel-caption>p {
    padding-right: 10px;
    font-size:16px!important;
  }
  #carouselExampleControls>div>div>img{
    width:120px!important;
  }
  #carouselExampleControls>div>div>.carousel-caption{
    right: 0;
    left: 0!important;
    top: 145px;
    font-size: 14px;
    overflow: auto;
    height: auto;
    /*bottom: 87px;*/
  }

  #carouselExampleControls .carousel-caption h4 {
    margin-top: .5em!important;
    font-size:15px;
  }
  #carouselExampleControls.carousel-caption h5 {
    font-size:14px;
  }
  
  #carouselExampleControls>.flechas {
    position: absolute;
    bottom: 0;
    left: 20%;
    top: inherit;
    text-align: center;
    right: 20%
  }
  #carouselExampleControls>.flechas>a.carousel-control {
    height: 40px;
    width: 40px;
    text-align: center;
  }
  #carouselExampleControls>.flechas>a>img.flecha {
    max-width: 10px;
    margin-top: 12px;
  }
  #carouselExampleControls>div>.carousel-item{
    text-align:center;
    box-sizing: content-box;
  }
}

.justify{}
@media (min-width: 476px) and (max-width:768px){
  
  #carouselExampleControls>.flechas {
    left: 40%;
    top: 100%; !important}
  
  
  .modal_portafolio_udd {
    padding: 6em 20%;
  }
  .modal_portafolio_udd .cierra-modal {
    right: 1.5rem;
  }
  
  .modal_portafolio_udd .cierra-modal {
    right: 1.5rem;
  }
  .modal_portafolio_udd {
    padding: 5em 0%;
  }
  .justify{text-align:justify;!important}
  
  #carouselExampleControls>div>div>.carousel-caption>p {
    padding-right: 10px;
    
  }
  #carouselExampleControls>div>div>img{
    width:200px!important;
  }
  #carouselExampleControls>div>.carousel-item{
    text-align:center;
  }
  #carouselExampleControls>div>div>.carousel-caption{
    right: 0%;
    left: 0%;
    top: 210px;
    font-size: 14px;
    overflow: auto;
    
  }
  #carouselExampleControls .carousel-caption h4 {
    margin-top: .5em!important;
    font-size:15px;
  }
  #carouselExampleControls.carousel-caption h5 {
    font-size:14px;
  }
  
  #carouselExampleControls>.flechas {
    position: absolute;
    bottom: 0;
    left: 0%;
    top: 100%;
  }
 
}

@media (min-width: 769px) and (max-width: 1401px) {
  .modal_portafolio_udd{
    padding: 5em 10%;
    overflow: scroll !important;
  }
  #carouselExampleControls>div>div>.carousel-caption {
    right: 0%;
    left: 42%;
  }
  #carouselExampleControls>.flechas {
    left: 42%;
  }
}

@media (min-width:1402px) and (max-width: 1800px){
  #carouselExampleControls>div>div>.carousel-caption {
    right: 0%;
    left: 30%;
  } 
}


@media (min-width:1024px){
  #carouselExampleControls>.flechas { 
    left: 42%!important;
    top: 80%!important;
  }
  #carouselExampleControls>div>div>.carousel-caption{
    top: 90px!important;
    left: 30%!important;
  }
  #carouselExampleControls>div>div>img{
    margin-top:90px!important;
  }
}

@media (max-width: 1800px) and (min-width: 476px) {
    #carouselExampleControls>div>div>.carousel-caption{
      left: 40% !important;
    }
}

.carousel-caption {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 769px) {
    #carouselExampleControls>div>div>.carousel-caption>p {
        text-align: center !important;
        margin-top: 40px !important;
    }
    .carousel-inner {margin-top:0px !important}
}