""*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
	margin: 0;
	overflow: hidden;
	background-color: #fff;
  color: black;
    font-family: 'Monda', serif;
overflow-y: auto;
}



header{
    text-align: center;
    background: #090909;
    margin-bottom: 50px;
}

header img {
    max-width: 100%;
}

a, a:visited {
	color:  #6b20b0;
	text-decoration: none;
}

a, a:active, a:focus {
outline: none;
}

a:hover {
	text-decoration: underline;
}

h1 {
    font-family: 'Monda', sans-serif;
    font-weight: 700;
    font-size: 48px;
}

h4 {
    font-weight: 400;
}

#content {
    max-width: 85%;
    margin: 0 auto;
    padding: 0px 0px 20px 0px;
}

#content #quotes {
    text-align: justify;
    width: 85%;
    margin: auto;
}

#content p .right {
    text-align: right;
}

#tag {
    text-align: center;
}
#navigation {
    float: right;
    max-width: 49%;
    margin-top: 2.25em;
}

#navigation a {
    margin-right: 1em;
    position: relative;
    float: left;
}

/* media query for mobile devices */

@media all and (max-width: 790px) {
	
    #bigvideo {
        display: none;
    }
    
    #bigvideomobile {
        display: inherit;
    }
    
    #navigation {
    float: none;
    max-width: 100%;
    margin-top: 0;
    display: block;
    padding-bottom: 15px;
        height: 1em;
        clear: both;
    }
    
    #navigation a {
        font-size: .9em;
    }
    
    header h1 {
    font-size: 10vw;
    }
    
    #grid {
        display: none;
    }
    
    #list {
        display: inline;
    }
    
    #button-bar {
        display: none !important;
    }
    
    #button-bar button {
        display: none;
    }
    
    
    .single-body {
    text-align: center;
    }
    
    .single-content #intro {
    margin-bottom: 1em;
    float: none;
    width: 100%;
    }
    
    #single-video {
        width: 90%;
        margin: auto;
        float: none;
    }
    
    .single-content #intro p {
    display: inline-block;
    margin: 0 0 0 1%;
    width: 100%;
    vertical-align: top;
}
    
    .single-content #pull-quote {
        width: 90%;
    }
   
    #interview {
        width: 100%;
    }
    
    #interview .left{
    max-width: 100%;
    float: none;
    margin: 0;
}

#interview .right{
    max-width: 100%;
    float: none;
margin: 0;
    }
    
    
    #instructions {
display: none;
}

#instructions-mobile {
        display: block;
}
    #list {
        width: 95%;
    }
    
    #list li {
        display: block;
        padding-right: 0;
    }
    
    .about .center {
    margin: auto;
    max-width: 100%;
}
}