#caption{
    background: rgb(26, 60, 182);
    text-align: center;
    padding: 2% 0;
}

#caption-textwrapper{
    width: 70%;
    margin: 0 auto;
}

#caption-h1{
    text-decoration: underline;
    margin-bottom: 1%;
}


#caption-textwrapper .text-small{
    margin: 1%;
}

#caption-buttons{
    margin: 2% 0 0 0;
}


/*1025 to 1440*/
@media only screen and (min-width: 1024px) and (max-width: 1439px){
    #caption-textwrapper{
        width: 80%;
        margin: 0 auto;
    }

    #caption-textwrapper .text-small{
        margin: 2%;
    }
    
    #caption-buttons{
        margin: 3% 0 0 0;
    }  
}

/*768 to 1024*/
@media only screen and (min-width: 768px) and (max-width: 1023px){
    #caption{
        padding: 4% 0;
    }

    #caption-textwrapper{
        width: 90%;
        margin: 0 auto;
    }

    #caption-textwrapper .text-small{
        margin: 3%;
    }
    
    #caption-buttons{
        margin: 4% 0 0 0;
    }  
}

/*425 to 767*/
@media only screen and (min-width: 425px) and (max-width: 767px){
    #caption{
        padding: 5% 0;
    }

    #caption-textwrapper{
        width: 95%;
        margin: 0 auto;
    }

    #caption-textwrapper .text-small{
        margin: 4%;
    }
    
    #caption-buttons{
        margin: 5% 0 0 0;
    } 
}

/*375 to 424*/
@media only screen and (min-width: 375px) and (max-width: 424px){
    #caption{
        padding: 5% 0;
    }

    #caption-textwrapper{
        width: 95%;
        margin: 0 auto;
    }

    #caption-textwrapper .text-small{
        margin: 4%;
    }
    
    #caption-buttons{
        margin: 5% 0 0 0;
    } 
}

/*320 to 374*/
@media only screen and (min-width: 320px) and (max-width: 374px){
    #caption{
        padding: 6% 0;
    }

    #caption-textwrapper{
        width: 95%;
        margin: 0 auto;
    }

    #caption-textwrapper .text-small{
        margin: 5%;
    }
    
    #caption-buttons{
        margin: 6% 0 0 0;
    } 
}