.slider{
    position: relative;
    width: 100%;
    margin: auto;
    overflow: hidden;
}
.slider img{
    width: 70%;
    display: none;
}
.slider p{
    display: none;
}
img.displaySlide{
    display: block;    
    animation-name: myFade;
    animation-duration: 3s;
 }
 p.displayDesc{
    display: block;  
    text-align: center;
    font-size: x-large;      
 }
 .slider button{
    position: absolute;
    top: 75%;
    transform: translateY(-50%);
    font-size: 3rem;
    padding: 10px 15px  ;
   
    color: blue;
    opacity: 15%;
   
    border: none;
    cursor: pointer;
 }
.navigationSection button{
    position: absolute;
    font-size: 3rem;
    padding: 10px 15px  ;
    background-color: rgba(0, 0, 0, 0.5);
    color: aliceblue;
    border: none;
    cursor: pointer;
}
.backgroundImage{
    position: absolute;
    right: 1%;
    opacity: 10%;
    display: block;
    width: 40%;
}
.prev{
    left: 1%;   
 }
.next{
    right: 10%;    
 }
 .heading{
   position: inline;
   text-align: center;
   font-size: 3rem;
    padding: 10px 15px  ;    
    color: rgb(46, 112, 170);
    align-items: center;
 }
 @keyframes myFade {    
    from {opacity: 0.5;}
    to {opacity: 1.0;}
 }