@media all and (min-width:680px) and (max-width:980px) {
 
    div.title-climb {
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        max-width: 100%;
        margin-top:1% ;
        padding: 10px;
    }
    div.title-climb .two {
        font-size: 65px;
    }
    div.title-climb .climb {
        font-size: 35px;
    }
    div.title-climb p {
        font-size: 10px;
        padding: 25px;
        
    }
    div.text {
        max-width: 30%;
        max-height: 185px;
        
    }
    div.text h2{
        font-size: 20px;
    }
    div.text ul{
        font-size: 10px;
    }
}
@media all and (min-width:550px) and (max-width:680px) {
   
    div.title-climb {
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        max-width: 100%;
        margin-top:2% ;
    }
    div.title-climb .two {
        font-size: 45px;
    }
    div.title-climb .climb {
        font-size: 15px;
    }
    div.title-climb p {
        font-size: 10px;
        padding: 15px;
        
    }
    a.next{
        margin-left: 10%;
        font-size: 15px;
    }
    a.prev{
        font-size: 15px;
    }
    div.text {
        max-width: 40%;
        max-height: 165px;
        
    }
    div.text h2{
        font-size: 15px;
    }
    div.text ul{
        font-size: 10px;
    }
    
}
@media all and (min-width:310px) and (max-width:550px) {
    
    div.title-climb {
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        max-width: 100%;
        margin-top:20% ;
    }
    div.title-climb .two {
        font-size: 45px;
    }
    div.title-climb .climb {
        font-size: 15px;
    }
    div.title-climb p {
        font-size: 10px;
        padding: 15px;
    }

    div.text {
        max-width: 300px;
        max-height: 100px;
        left: 10%;
    }
    div.text h2 {
        font-size: 15px;
        margin:0%;
        padding: 0%;   
    }
    div.text ul  {
        font-size: 5px;
        margin: 0%;
    }
    a.next{
        margin-left: 20%;
        font-size: 10px;
    }
    a.prev{
        font-size: 10px;
    }
    div.text {
        max-width: 250px;
    }
}
.section-climb {
    background-color:rgb(53, 74, 105);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
}
.section-climb img {
    background-size:cover;
    background-repeat: no-repeat;
    width: 100%;
}

.titleClimb-container{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    
}

.title-climb{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%; 
    height: 200px;
    margin:10%;
    
}

.title-climb span {
    font-family: 'Lato',sans-serif;
    vertical-align: middle;
}
.two{
    color:rgba(65, 79, 107, 0.364);
    font-size: 6rem;
}
.climb {
    color:rgb(53, 74, 105);
    font-size: 3rem;
    font-weight: 500;
}
.title-climb p {
    font-size: 15px;
    padding-left: 15px;
}


/* SLIDER */


* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */

.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
  background-color:rgb(53, 74, 105);
}

.img-bar {
    background-color:rgb(53, 74, 105);
    width: 100%;
    height: 80px;
}


/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -20%;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background-color:rgb(53, 74, 105);
}

/* Position the "next button" to the right */
.next {
  left:15%;
  border-radius: 3px 0 0 3px;
  
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
    background-color:rgb(136, 150, 169);
}

/* Caption text */
.text {
  background-color: #ffffffd8;
  border-radius: 10px;
  padding: 10px;
  position: absolute;
  width: 50%;
  height: 300px;
  text-align: center;
  margin-top: -30%;
  left: 10%;
  text-decoration: none;

}

.text h2 {
    color:rgb(53, 74, 105);
    font-weight: 3rem;
    font-size: 40px;
    padding: 10px;
}

.text li{
line-height: 2em;
padding-top: 5px;
color:rgba(79, 79, 79, 0.832); 
list-style-type: none;


}


/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

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

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}