/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */


/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {  
    #runContainer {
        position: relative;        
        padding: 20px 20px;
    }  

    #storyContainer {        
        padding: 20px 20px;        
    }
}


/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px ) { 
    #runContainer {
        position: relative;        
        padding: 50px 150px;
    }  

    #storyContainer {        
        padding: 20px 150px;        
    }

}

#run {
    text-align: center;
}

.story {
    text-align: center;
    padding-top: 20px;
}

    .baby {
        border-radius: 50%;
        width: 304px;
        height:228px;
        padding: 5px;
        display: inline-block; /*for centering image */
    }

    #babycontainer {
        text-align: center;
        padding: 50px 0px;
    }
            
.title-padding {
        padding: 20px 0px;
    }
.my-photo {
    max-width: 100%;
    max-height: 472px;
}
.row {
    padding-top: 5px;
}