.slideshow-container 
{ width: 100%; position: relative; margin: auto; z-index: 1; overflow: hidden; }

.slideshow-container .mySlides 
{ display: none; width: 100%; height: auto; position: relative; }

.slideshow-container .mySlides::after
{ top: 0; left: 0; z-index: 2; content: ''; width: 100%; height: 100%; opacity: 50%; position: absolute; background-image: linear-gradient(to right, #232f95, #0a0a0a); }

.slideshow-container .mySlides img
{ vertical-align: middle; width: 100%; position: relative; z-index: 0; }

.slideshow-container .mySlides .container-img
{ width: 20%; height: auto; position: absolute; margin-top: 12%; z-index: 10; }

.slideshow-container .mySlides .container-im img
{ width: 100%; object-fit: cover; }

.slideshow-container .mySlides .container-info
{ width: 100%; height: auto; position: absolute; bottom: 0; margin-bottom: 35px; z-index: 999; }

.slideshow-container .mySlides .container-info .title,
.slideshow-container .mySlides .container-info .subtitle,
.slideshow-container .mySlides .container-info .resume
{ color: transparent; background-image: linear-gradient(to right, #ffffff, #ffffff); background-size: 100%; -webkit-background-clip: text; text-transform: uppercase; font-weight: 700; position: relative; padding: 1px; text-align: center; }

.slideshow-container .mySlides .container-info .title
{ font-size: 40px; margin-bottom: -15px; margin: 0px 17.5% 0px 17.5%; }

.slideshow-container .mySlides .container-info .subtitle
{ font-size: 25px; transform: translateY(-10px); margin: 0px 17.5% 0px 17.5%; }

.slideshow-container .mySlides .container-info .resume
{ font-size: 16px; margin: 0px 20% 0px 20%; margin-bottom: 25px; }

.slideshow-container .transition 
{ -webkit-animation-name: transition; -webkit-animation-duration: 1.5s; animation-name: transition; animation-duration: 1.5s; }

@-webkit-keyframes transition 
{
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes transition 
{
  from {opacity: .4} 
  to {opacity: 1}
}

.slideshow-container .left
{ z-index: 9999; width: 90px; height: 100%; background-color: rgba(0, 0, 0, 0); position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; left: 0; }

.slideshow-container .left:hover
{ filter:brightness(75%); transition: .2s; transition-timing-function: linear; }

.slideshow-container .left::after
{ content: ''; width: 30px; height: 5px; background-color: rgb(255, 255, 255); position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%) rotate(45deg); border-radius: 50px; margin-top: 10px; }

.slideshow-container .left::before
{ content: ''; width: 30px; height: 5px; background-color: rgb(255, 255, 255); position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%) rotate(-45deg); border-radius: 50px; margin-top: -9px; }

.slideshow-container .right
{ z-index: 9999; width: 90px; height: 100%; background-color: rgba(0, 0, 0, 0); position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; right: 0; }

.slideshow-container .right:hover
{ filter:brightness(75%); transition: .2s; transition-timing-function: linear; }

.slideshow-container .right::after
{ content: ''; width: 30px; height: 5px; background-color: rgb(255, 255, 255); position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%) rotate(-45deg); border-radius: 50px; margin-top: 10px; }

.slideshow-container .right::before
{ content: ''; width: 30px; height: 5px; background-color: rgb(255, 255, 255); position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%) rotate(45deg); border-radius: 50px; margin-top: -9px; }

.slideshow-container .navigation
{ text-align: center; margin-top: -35px; z-index: 999; position: absolute; left: 50%; margin-right: -50%; transform: translateX(-50%); }

.slideshow-container .navigation .dot 
{cursor: pointer;height: 5px;width: 33px;margin: 0 2px;background-color: rgb(180, 180, 180);border-radius: 50px;display: inline-block;transition: background-color 0.6s ease;z-index: 999; }

.slideshow-container .navigation .active, 
.slideshow-container .navigation .dot:hover 
{ background-color: #ffffff; }
@media screen and (min-width:0px) and (max-width:449px) 
{
  .slideshow-container .mySlides .container-img
  { width: 150px; height: auto; margin-top: 7%; }  

  .slideshow-container .mySlides .container-img img
  { width: 100%; height: auto; object-fit: cover; }
}

@media screen and (min-width:450px) and (max-width:649px) 
{
  .slideshow-container .mySlides .container-img
  { width: 200px; height: auto; margin-top: 7%; }  

  .slideshow-container .mySlides .container-img img
  { width: 100%; height: auto; object-fit: cover; }
}

@media screen and (min-width:650px) and (max-width:999px) 
{
  .slideshow-container .mySlides .container-img
  { width: 15%; margin-top: 7%; }  
}

@media screen and (min-width:1000px) and (max-width:1200px) 
{
  .slideshow-container .mySlides .container-img
  { width: 17.5%; margin-top: 8%; }  
}












@media screen and (min-width:0px) and (max-width:899px) 
{
  .slideshow-container .mySlides .container-info .title
  { font-size: 30px; margin-bottom: -15px; margin: 0px 17.5% 0px 17.5%; }
  
  .slideshow-container .mySlides .container-info .subtitle
  { font-size: 20px; transform: translateY(-10px); margin: 0px 17.5% 0px 17.5%; }
  
  .slideshow-container .mySlides .container-info .resume
  { font-size: 11px; margin: 0px 20% 0px 20%; margin-bottom: 25px; }
  
}

@media screen and (min-width:0px) and (max-width:649px) 
{
  .slideshow-container .mySlides img
  { width: 100%; height: 400px; }
}

@media screen and (min-width:650px) and (max-width:899px) 
{
    .margin-nav
    { margin-top: 70px; }
}