/*  Custom miSlider CSS ========================================= */

.mis-stage {
}
    .mis-slider {
        /*  Slider element does not need to be a specific height
            Here we use it to create a stylish bar behind slides */
        margin-top: 115px;
        height: 80px;
    }
        .mis-slider li a {
            text-decoration: none;
            color: #666;
            display: block;
        }  
        .mis-slider li figcaption {
            font-size: 1.5em;
        }
        .mis-slider li img {
            /*  Make max-width of image a little less than width of slide
                to avoid some browser shinking bugs */
            max-width: 270px;
            /*  for really small screens make width 100% */
            width: 100%;
            /*  Make image round */
            border-radius: 135px;
            border: none;
        }
        .mis-slide {
            /*  Set width in pixels to restrict width of slides 
                for multi-item slider, default width is 100%
                for single-item slider. Use padding to add space 
                between slides */
	        width: 300px;
            height: 300px;
	        padding: 40px;
            /*  Undo the margin added by slider element */
            margin-top: -138px
        }
    .mis-nav-buttons a {
        color: #fff; 
    }

/*  Other styles for making things look pretty ==================== */

figure, body {
    margin: 0;
    padding: 0;
    line-height: 1.4;
}
h1, h2, h3 {
    font-family: Robotolight, Georgia, 'Times New Roman', serif;
}
h1, #wrapper > figure > figcaption {
    text-align: center;
}
#wrapper > figure > figcaption {
    font-weight: bold;
    margin: 1em;
}
main {
    width: 80%;
    margin: 2em auto;
    /*display: block;*/
}
pre {
    overflow:auto;
    width: 100%;
    background-color: #fff;
    padding: 1em;
}
@media screen and (min-width: 1200px) {
    main {
        width: 50%;
    }
}