/* Base Mobile layout */
     body {
        background-color: #666;
        color: white;
        font-family: "Helvetica Neue","Helvetica","Arial", sans-serif;
        line-height: 160%;
        text-align: center;
        font-size: 2rem;
    }
    
    div {
     border: 0; /*1px solid red;*/
     }
    
    #inner {
        display: table;
        margin: 0 auto;
        width: 100%;
    }

    #outer {
        width:100%;
        padding-top: 50px;
        padding-bottom: 100px;
    }
    
    #footer {
        font-size: small;
        margin-top: 50px;
    }
    
    #caption {
        margin-top: 0px;
        margin-bottom: 100px;
    }
    
    h1 {
        font-size: 6rem; 
        line-height: 6rem; 
        font-weight: 700;
    }
    
    p {
     text-align: left;
    }
    
    
    h3 {
        font-size: 150%; 
        line-height: 1.1; 
        font-weight: 600;

    }
    
    h4 {
        font-size: 120%; 
        line-height: 1.1; 
        font-weight: 600;
    }
    
    h5 {
        font-size: 2.25rem; 
        line-height: 1.1; 
        font-weight: 600;
        text-align: left;
        margin: 50px 0 5px 0;
    }


    
    /* unvisited link */
    a:link {
        color: #5EBA7D;
        text-decoration: none;
    }

    /* visited link */
    a:visited {
        color: #551A8B;
        text-decoration: none;
    }

    /* mouse over link */
    a:hover {
        color: #6BD58F;
        text-decoration: none;
    }

    /* selected link */
    a:active {
        color: #451571;
        text-decoration: none;
    }
    
    audio {
        border-radius: 10px;
        transform: scale(2);
    }
    
    #quoter-column img {
        width: 90%;
        margin: 10% 5% 0 5%;
    }

    #quoter-column h4 {
        width: 90%;
        margin: 0 5% 0 5%;
    }
    
    #quoter-column audio {
        margin: 80px 5% 30px 5%;
        padding: 0;
        width: 45%;
    }
    
    #quoter-column p {
        margin: 0 9% 0 9%;
    }
    
    p a.inline {
        color: #fff;
        text-decoration: none;

    }

    p a.inline:hover {
        color: #6BD58F;
        text-decoration: none;
    }
    
     #quoter-column p span {
        color: #999;
    }

    .single {
        width: 90%;
        margin: 0 auto;
    }

    .single img {
        width: 480px;
        margin-top: 5%;
    }

    .single p {
        text-align: center;
    }

    .single audio {
        margin: 80px 5% 30px 5%;
        width: 30%;
        transform: scale(3);
    }
    
    /* 4 Column layout, wider layout */
    @media only screen and (min-width: 980px) {
            
        #inner {
            width: 980px;
            margin: 0 auto;
        }
        
        #quoter-column {
            width: 50%;
            float: left;
        }
        
        #quoter-column audio {
            width: 45%;
        }

    }

    /* Widest layout */
    @media only screen and (min-width: 1200px) {
        
        body {
            font-size: 1.125rem;
        }
        

        #inner {
            width: 1200px;
            margin: 0 auto;
        }
        
        #quoter-column {
            width: 25%;
            float: left;
        }
        
        #quoter-column audio {
            transform: scale(1);
            margin: 40px 5% 0 5%;
            width: 90%;
        }
        
        h5 {
            font-size: 1.25rem; 
            line-height: 1.1; 
            margin: 50px 0 5px 0;
        }
    }