slider.css

.slide-1{
    width: 90%; 
    margin: 0 auto; 
    text-align: left
}
.slider{
    z-index: 7;
}
.nr1{
    font-size: 22px;
    border-left: 4px solid rgb(255, 9, 9);
    padding-left: 10px;
    margin-top: 0;
}
@media only screen and (max-width: 600px){
    .nr1{
        display: block;
        writing-mode: vertical-rl;
        transform: rotate(270deg);
    }
}
.nm1{
    margin-top: 0px;
    text-align: left;
    font-size: 78px;
    font-weight: bolder;
}
@media only screen and (max-width: 600px){
    .nr1{
        display: block;
        writing-mode: vertical-rl;
        transform: rotate(270deg);
    }
    .nm1{
        font-size: 36px;
    }
}
.info p{
    display: inline;
    padding: 5px;
}

.progress-circle {
    font-size: 10px;
   font-weight: bold;
    position: relative; /* so that children can be absolutely positioned */
    padding: 0;
    margin-bottom: 20px;
    width: 5em;
    height: 5em;
    background-color: #F2E9E1; 
    border-radius: 50%;
    line-height: 5em;
       float: left;
 }
 
 .progress-circle:after{
     border: none;
     position: absolute;
     top: 0.35em;
     left: 0.35em;
     text-align: center;
     display: block;
     border-radius: 50%;
     width: 4.3em;
     height: 4.3em;
     background-color: white;
     content: " ";
 }
 /* Text inside the control */
 .progress-circle span {
     position: absolute;
     line-height: 5em;
     width: 5em;
     text-align: center;
     display: block;
     color: rgb(226, 10, 10);
     z-index: 2;
 }
 .left-half-clipper { 
    /* a round circle */
    border-radius: 50%;
    width: 5em;
    height: 5em;
    position: absolute; /* needed for clipping */
    clip: rect(0, 5em, 5em, 2.5em); /* clips the whole left half*/ 
 }
 /* when p>50, don't clip left half*/
 .progress-circle.over50 .left-half-clipper {
    clip: rect(auto,auto,auto,auto);
 }
 .value-bar {
    /*This is an overlayed square, that is made round with the border radius,
    then it is cut to display only the left half, then rotated clockwise
    to escape the outer clipping path.*/ 
    position: absolute; /*needed for clipping*/
    clip: rect(0, 2.5em, 5em, 0);
    width: 5em;
    height: 5em;
    border-radius: 50%;
    border: 0.45em solid rgb(255, 1, 1); /*The border is 0.35 but making it larger removes visual artifacts */
    /*background-color: #4D642D;*/ /* for debug */
    box-sizing: border-box;
   
 }
 /* Progress bar filling the whole right half for values above 50% */
 .progress-circle.over50 .first50-bar {
    /*Progress bar for the first 50%, filling the whole right half*/
    position: absolute; /*needed for clipping*/
    clip: rect(0, 5em, 5em, 2.5em);
    background-color: rgb(255, 0, 0);
    border-radius: 50%;
    width: 5em;
    height: 5em;
 }
 .imdb{
     background-color: gold;
     color: black;
     margin-left: 10px;
     font-size: 16px;
     padding: 0 10px 0 10px;
     font-weight: bold;
 }

 .year{
     font-weight: bold;
     margin-left: 20px;
     font-size: 18px;
 }
 .time{
    font-weight: bold;
    margin-left: 20px;
    font-size: 18px;
 }
 .genre{
    font-weight: bold;
    margin-left: 20px;
    font-size: 18px;
    color: red;
 }

 .para-details{
     display: block;
     
 }
 .details{
     max-width: 600px;
     float: left;
     font-size: 26px;
     line-height: 30px;
     margin-top: 3%;
     margin-left: -80px;
     font-weight: 500;
     
 }
 @media only screen and (max-width: 600px){
    .nr1{
        display: block;
        writing-mode: vertical-rl;
        transform: rotate(270deg);
    }
    .nm1{
        font-size: 36px;
    }
    .imdb{
        font-size: 14px;
    }
   
    .info{
        font-size: 16px;
    }
    .details{
        margin-left: 0;
    }
}
 .button{

    background-color: rgb(255, 11, 11); /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
   
    
    font-size: 16px;
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
    font-weight: bold;
    text-transform: uppercase;
    border: 2px solid rgb(255, 11, 11);
 }
 .button-main{
     display: block;
     margin: 37px;
     
     
 }
 .button:hover{
     
     background: transparent;
 }

 #bg{
     max-width: 300px;
     max-height: 450px;
     float: right;
     
 }
 #bg img{
     width: 100%;
     top: 0px;
 }