@media only screen and (min-width : 1921px){

.wrapper {
height: auto;
}

.wrapper a {
width: 20%;
height: auto;
}

}

@media only screen and (max-width : 1920px){

.wrapper {1921
height: auto;
}

.wrapper a {
width: 20%;
height: auto;
}

.container .text {
padding: 5% 16%;
}

}

@media only screen and (max-width : 1880px){
}

@media only screen and (max-width : 1600px){

.wrapper {
height: auto;
}

.wrapper a {
width: 25%;
height: auto;
}

}

@media only screen and (max-width : 1440px){

.wrapper {
height: auto;
}

.wrapper a {
width: 25%;
height: auto;
}

.container .text {
padding: 10% 12%;
}

}

@media only screen and (max-width : 1366px){

.wrapper {
height: auto;
}

.wrapper a {
width: 25%;
height: auto;
}


}

@media only screen and (max-width : 1280px){

.wrapper {
height: auto;
}

.wrapper a {
width: 25%;
height: auto;
}

.container .text {
padding: 10% 14%;
}

.container .text h2 {
font-size: 1.2em;
}

.container .text {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}



}

@media only screen and (max-width : 1200px){

.wrapper {
height: auto;
}

.wrapper a {
width: 25%;
height: auto;
}


.container .text p.interviewee {
font-size: 1.2em;
}

.container .text h2 {
font-size: 1em;
line-height: 1.7em;
}

.container .text p.credits {
font-size: 1.2em;
}


.container .text p.date {
font-size: 1em;
}

.container .text {
padding: 9% 13%;
}

}

@media only screen and (max-width : 1024px){

.wrapper {
height: auto;
}

.wrapper a {
width: 25%;
height: auto;
}

.container .text p.interviewee {
font-size: 1.13em;
}

.container .text h2 {
    font-size: .99em;
line-height: 1.75em;
}

.container .text p.credits {
font-size: 1em;
}

.container .text p.date {
font-size: 1em;
}

.container .text {
padding: 5% 9%;
}

.container .text {
    background: #000000bf none repeat scroll 0% 0%;
    opacity: 1;
    }

}

@media screen and (max-width: 1000px){

} 

@media only screen and (max-width : 992px){

.wrapper {
height: auto;
}


.container .text p.interviewee {
font-size: 1.2em;
}



.container .text p.credits {
font-size: 1.2em;
}


.container .text p.date {
font-size: 1em;
}



.wrapper a {
    width: 50%;
    height: auto;
}

.container .text h2 {
    font-size: 1.3em;
    line-height: 1.7em;
}

.container .text {
    padding: 9.5% 14%;
}

.container .text h2 {
    font-size: 1.4em;
    line-height: 1.7em;
}

}

@media only screen and (max-width : 768px){

.wrapper {
height: auto;
}


.container .text p.interviewee {
font-size: 1.13em;
}

.container .text h2 {
font-size: 1.35em;
line-height: 1.75em;
}

.container .text p.credits {
font-size: 1.1em;
}

.container .text p.date {
font-size: 0.9em;
}

.container .text {
padding: 7% 9%;
}

}

@media only screen and (max-width : 520px){

.wrapper {
height: auto;
}
.wrapper a {
width: 50%;
height: auto;
}

.container .text {
padding: 7% 10%;
}

}

@media only screen and (max-width : 480px){

.wrapper {
height: auto;
}
.wrapper a {
width: 100%;
height: auto;
}

.container .text h2 {
font-size: 1.2em;
line-height: 1.8em;
}

.container .text p.date {
font-size: 0.88em;
}

.container .text {
    padding: 16% 18%;
}

nav a.work-title p.hide-small-devices {
display: none;
}

}



@media only screen and (max-width : 375px){
.container .text {
    padding: 10% 18%;
}
}

@media only screen and (max-width : 360px){
.container .text h2 {
    font-size: 1em;
    line-height: 1.8em;
}
}


@media only screen and (max-width : 320px){

.wrapper {
height: auto;
top: 47.3px;
}

.wrapper a {
width: 100%;
height: auto;
}

.topnav {
padding: 1em 0em;
}



.container .text p.interviewee {
font-size: 1.2em;
}

.container .text h2 {
font-size: 1.12em;
line-height: 1.7em;
}

.container .text p.credits {
font-size: 1.2em;
}


.container .text p.date {
font-size: 1em;
}

.container .text {
padding: 9% 14%;
}

}