html, body {
	margin:0;
	padding:0;
    width:100%;
    height:100%;
}

body {
	font-family: 'Roboto', sans-serif;
    overflow-x:hidden;
    position:relative;
}

.longform a {
    color:#de6233;
}
.longform a:hover {
    color:#404040;
}

h1 {
    font-weight: 700;
    font-family: 'Playfair Display', serif;
    font-size: 40px;
    line-height: 49px;
    color:#212121;
    text-align:center;
}

h2 {
    font-weight: 300;
    font-size: 20px;
    line-height: 29px;
    color: #3a3a3a;
    text-align:center;
    padding:0px 0 20px 0;
}

@media (min-width: 500px) {
h1 {
    font-weight: 700;
    font-family: 'Playfair Display', serif;
    font-size: 62px;
    line-height: 71px;
    color:#212121;
    text-align:center;
}

h2 {
    font-weight: 300;
    font-size: 25px;
    line-height: 34px;
    color: #3a3a3a;
    text-align:center;
    padding: 0px;
}
}

h3 {
    font-weight: 900;
    font-size: 25px;
    line-height: 34px;
    color: #3a3a3a;
    text-align:left;
    padding: 20px 0 0 0;
}

p {
    line-height: 28px;
    font-size: 19px;
    color: #2d2d2d;
    letter-spacing: 0.3px;
}

.dropcap {
    color: #212121;
    float: left;
    font-family: 'Playfair Display', serif;
    font-size: 59px;
    line-height: 49px;
    padding-top: 0px;
    padding-right: 3px;
    padding-left: 0px;
}

#interview-words .dropcap {
    font-size: inherit;
    line-height: inherit;
    padding: 0;
    font-family: inherit;
    float: none;
    color: inherit;
}



.content-wrapper {
    width:90%;
    max-width:680px;
    margin: 0 auto 0;
    padding:20px 0;
    overflow:visible;
}

@media (min-width: 500px) {
.content-wrapper {
    width:90%;
    max-width:680px;
    margin: 0 auto 0;
    padding:20px 0;
    overflow:visible;
}
}

.content-wrapper-wide {
    width:90%;
    max-width:1000px;
    margin: 0 auto 0;
    padding:20px 0;
    overflow:hidden;
}

@media (min-width: 500px) {
.content-wrapper-wide {
    width:90%;
    max-width:1100px;
    margin: 0 auto 0;
    padding:20px 0;
    overflow:visible;
}
}

#nav {
    width: 100%;
    height: 60px;
    background: #de6233;
    color: #fff;
    position: fixed;
    z-index: 5900;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 1px;
    overflow:hidden;    
    top: 0;
    left: 0;
    -webkit-transform: translateZ(0)
}

#tempbuttons {
    float: right;   
    text-transform: uppercase;
    display:none;
}



.tempbutton {
}

.tempbutton a {
    color:#fff;
    text-decoration:none;
    padding: 19px 10px 19px 10px;
    display: inline-block;
}
.tempbutton a:hover {
    background:#b24e29;
}

#logo {
	font-family: 'Playfair Display', serif;
    float: left;
    width: 240px;
    font-size: 22px;
    line-height: 44px;
    text-align: left;
    margin: 4px 0 0 17px;
    opacity: 0.85;
}

@media (min-width: 325px) {
#logo {
    font-family: 'Playfair Display', serif;
    float: left;
    width: 275px;
    font-size: 28px;
    line-height: 44px;
    text-align: left;
    margin: 4px 0 0 17px;
    opacity: 0.85;
}
}

@media (min-width: 500px) {
#logo {
    font-family: 'Playfair Display', serif;
    float: left;
    width: 330px;
    font-size: 30px;
    line-height: 44px;
    text-align: left;
    margin: 4px 0 0 17px;
    opacity: 0.85;
}
}

#logo a {
    text-decoration:none;
    color:#fff;

}

#header {
    width:100%;
    height:100vh;
    position:relative;
    overflow:hidden;
    background:#000;
}

.header-content01 {
	position:absolute;
	width:100%;
	height:100%;
	display:inline-block;
	text-align:center;
	padding-top:200px;
	background:#ddd url('../img/index-Orwell.jpg');
	background-size:cover;
	background-position:center;
    background-repeat: no-repeat;
}

.header-content01-words, .header-content02-words, .header-content03-words, .header-content04-words {
	position:absolute;
	display:block;
	width:70%;
	left:calc(100% - 85%);
	top:20%;
	text-align:center;
	font-weight: 700;
    font-family: 'Playfair Display', serif;
    font-size: 30px;
    line-height: 35px;
    color:#fff!important;
    text-align:center;
	text-shadow: 0px 0px 14px #000;
	overflow:visible;
        top: 50%;
    left: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

@media (min-width: 500px) {
	.header-content01-words, .header-content02-words, .header-content03-words, .header-content04-words {
	    font-size: 50px;
	    line-height: 55px;
	}
}

@media (min-width: 1100px) {
	.header-content01-words, .header-content02-words, .header-content03-words, .header-content04-words {
	    font-size: 85px;
	    line-height: 108px;
	}
}

@media (min-width: 500px) and (max-height: 650px) {
    .header-content01-words, .header-content02-words, .header-content03-words, .header-content04-words {
        font-size: 50px;
        line-height: 55px;
    }
}

.header-content02 {
	position:absolute;
	width:100%;
	height:100%;
	display:inline-block;
	text-align:center;
	padding-top:200px;
	background:#ddd url('../img/map.jpg');
	background-size:cover;
	background-position:center;
    background-repeat: no-repeat;
}

.header-content03 {
	position:absolute;
	width:100%;
	height:100%;
	display:inline-block;
	text-align:center;
	padding-top:200px;
	background:#ddd url('../img/index-oldimage.jpg');
	background-size:cover;
	background-position:center;
    background-repeat: no-repeat;
}

.header-content04 {
	position:absolute;
	width:100%;
	height:100%;
	display:inline-block;
	text-align:center;
	padding-top:200px;
	background:#ddd url('../img/stories.jpg');
	background-size:cover;
	background-position:center;
    background-repeat: no-repeat;
}

.about h1, .about h2, .about p, .about figure, .about video {
    opacity:0;
}

#faces {
	width:100%;
	height:auto;
	clear:both;
	text-align:center;
	padding: 0;
    margin: 50px 0 20px 0;
}

.colorblock {
	background:#de6233;
	color:#fff;
}

.colorblock h1 {

}

.colorblock h2 {
	color:#fff;
}

.face {
	margin:0;
	padding:0;
	width:50%;
	height:300px;
	float:left;
	overflow:hidden;
	background:#000;
	position:relative;
}

@media (min-width: 500px) {
	.face {
		width:25%;
	}
}

.face-details {
	font-size: 23px;
    width: 100%;
    position: absolute;
    left: 0px;
    top: 500px;
    color: #fff;
    pointer-events: none;
    transition: top 0.3s ease-out;
}

.face-details-name {
	color:#de6233;
	font-weight:bold;
}

.face img {
    max-height: 100%;
    margin-left: 50%;
    transform: translateX(-50%);    
    transition: opacity 0.3s ease-out;
}

.face img:hover {
	opacity:0.5;
}

.face img:hover ~ .face-details {
    top: 100px;
}

#longformlinks {
	text-align:center;
}

.card {
	width:96%;
	padding:0;
	margin: 2% 2% 5% 2%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	overflow:hidden;
	min-height:400px;
	text-decoration:none;
	position:relative;
    transition: box-shadow 0.2s ease-out;
    background:#fff;
    display:inline-block;
}


@media (min-width: 500px) {
	.card {
		width:48%;
		margin:1%;
	}
}

.card {
  width:96%;
}
@media (min-width: 500px) {
.card {
  width:48%;
}
}
@media (min-width: 1000px) {
.card {
  width:31%;
}
}
@media (min-width: 1300px) {
.card {
  width:23%;
}
}
.cardinset {
    padding:10px 10px 50px 10px;
}


.card a {
	text-decoration:none;
}

.card:hover {
	box-shadow: 0 8px 12px 4px rgba(0, 0, 0, 0.2), 0 10px 24px 4px rgba(0, 0, 0, 0.19);
}
.card:hover .readmore {
    background: #de6233;
    color: #fff;
    border: 1px solid #fff;
}

.card img {
	max-width:100%;
}

.card h1 {
	font-family: 'Roboto', sans-serif;
	font-size: 24px;
	line-height:28px;
    padding: 0 10px;
    margin: 2px 0;
    text-align:center;
}

.card p {
	padding:0 10px;
    margin: 5px 0 60px 0;
    line-height:24px;
    text-align:center;
}

.clear {
	clear:both;
}

.imageright {
	width: 100%;
    float: none;
    margin-right: 0px;
    padding: 0;
    margin-top:5px;
    margin:0;
}
.imageleft {
	width: 100%;
    float: none;
    margin-left: 0px;
    padding: 0;
    margin-top:5px;
    margin:0;
}
.imagecenter {
    width:100%;
    float:none;
    margin-left:0%;
    padding:30px 0;
}
@media (min-width: 500px) {
.imageright {
	width: 500px;
    float: right;
    margin-right: -140px;
    padding: 0 20px;
    margin-top:5px;
}
.imageleft {
	width: 500px;
    float: left;
    margin-left: -140px;
    padding: 0 20px;
    margin-top:5px;
}
.imagecenter {
    width:120%;
    float:none;
    margin-left:-10%;
    padding:30px 0;
}
}

figure img {
	width:100%;
}

figcaption {
	text-align:center;
}

#whoisorwell {
	background:#3a3a3a;
	color:#fff;
}

#whoisorwell p, #whoisorwell h2 {
	color:#fff;
	text-align:left;
}

.cta {
	font-size: 20px;
    background: #fff;
    color: #de6233;
    display: inline-block;
    margin: 40px 0;
    padding: 10px 15px;
    border-radius: 30px;
    border: 2px solid #de6233;
    text-transform:uppercase;
    font-weight:bold;
    transition: all 0.2s ease-out;
}

.cta:hover {
    background: #de6233;
    border: 2px solid #fff;
    color: #fff;
}

.readmore {
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 3px;
    display: block;
    margin: 10px;
    padding: 5px 10px;
    border-radius: 30px;
    text-transform: uppercase;
    float: right;
    background: #fff;
    color: #de6233;
    border: 1px solid #de6233;
    position: absolute;
    bottom: 10px;
    transition: all 0.2s ease-out;
    left: 5%;
    width: 80%;
}

.readmore:hover {
    background: #de6233;
    color: #fff;
    border: 1px solid #fff;
}

#backtotop {
    display: block;
    font-size: 40px;
    position: fixed;
    bottom: 10px;
    right: 30px;
    z-index: 1900;
    border: 1px solid #fff;
    background-color: #de6233;
    color: #fff;
    cursor: pointer;
    border-radius: 20px;
    width: 40px;
    height: 40px;
    opacity: 0;
    transition: opacity 0.2s ease-out;
}
#backtotop img {
    width:100%;
}

#backtotop:hover {
    background-color: #555; 
}

.findoutmore {
	position: absolute;
    bottom: 20px;
    left: 50%;
    width: auto;
    background: none;
    color: #fff;
    display: block;
    margin: 20px auto;
    padding: 9px 35px 9px 35px;
    border-radius: 25px;
    border: 1px solid #fff;
    text-align: center;
    text-decoration: none;
    font-size: 19px;
    text-transform:uppercase;
    transition: background 0.2s ease-out;    
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.findoutmore:hover {
    background: #de6233;
}





/* Single long-form page */ 



#header-single {
    width:100%;
    height:100vh;
    position:relative;
    overflow:hidden;
    background:#000;
}

.header-single-content {
    position:absolute;
    width:100%;
    height:100%;
    display:inline-block;
    text-align:center;
    padding-top:200px;
    background:#ddd url('../img/longform006/sarah00.jpg');
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
    opacity:0.7;
}

.header-single-longform001 {
    background:#ddd url('../img/longform001/homelessman-portrait.jpg');
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
}
.header-single-longform002 {
    background:#ddd url('../img/longform002/wendy-richards-melanie-powell-portrait.jpg');
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
}
.header-single-longform003 {
    background:#ddd url('../img/longform003/homeless-tears-portrait.jpg');
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
}
.header-single-longform004 {
    background:#ddd url('../img/longform004/jack-hood-portrait.jpg');
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
}
.header-single-longform005 {
    background:#ddd url('../img/longform005/farmer-mike-gorton-portrait.jpg');
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
}
.header-single-longform006 {
    background:#ddd url('../img/longform006/sarah00-portrait.jpg');
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
}
.header-single-longform007 {
    background:#ddd url('../img/longform007/hero-portrait.jpg');
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
}
.header-single-longform008 {
    background:#ddd url('../img/longform008/hero-portrait.jpg');
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
}
.header-single-longform009 {
    background:#ddd url('../img/longform009/hero-portrait.jpg');
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
}
.header-single-longform010 {
    background:#ddd url('../img/longform010/hero-portrait.jpg');
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
}
.header-single-longform011 {
    background:#ddd url('../img/longform011/hero-portrait.jpg');
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
}

@media (min-width: 750px) {
.header-single-longform001 {
    background:#ddd url('../img/longform001/homelessman.jpg');
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
}
.header-single-longform002 {
    background:#ddd url('../img/longform002/wendy-richards-melanie-powell.jpg');
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
}
.header-single-longform003 {
    background:#ddd url('../img/longform003/homeless-tears.jpg');
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
}
.header-single-longform004 {
    background:#ddd url('../img/longform004/jack-hood.jpg');
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
}
.header-single-longform005 {
    background:#ddd url('../img/longform005/farmer-mike-gorton.jpg');
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
}
.header-single-longform006 {
    background:#ddd url('../img/longform006/sarah00.jpg');
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
}
.header-single-longform007 {
    background:#ddd url('../img/longform007/hero.jpg');
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
}
.header-single-longform008 {
    background:#ddd url('../img/longform008/hero.jpg');
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
}
.header-single-longform009 {
    background:#ddd url('../img/longform009/hero.jpg');
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
}
.header-single-longform010 {
    background:#ddd url('../img/longform010/hero.jpg');
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
}
.header-single-longform011 {
    background:#ddd url('../img/longform011/hero.jpg');
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
}
}





.header-single-project {
    background:#ddd url('../img/project/orwell-type.jpg');
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
}

.header-single-words {
    position:absolute;
    display:block;
    width:70%;
    left:calc(100% - 85%);
    text-align:center;
    font-weight: 700;
    font-family: 'Playfair Display', serif;
    font-size: 30px;
    line-height: 35px;
    color:#fff!important;
    text-align:center;
    text-shadow: 0px 0px 14px #000;
    overflow:visible;
    top: 50%;
    transform: translateY(-50%);
}

@media (min-width: 500px) {
    .header-single-words {
        font-size: 50px;
        line-height: 55px;
    }
}

@media (min-width: 1000px) {
    .header-single-words {
        font-size: 90px;
        line-height: 114px;
    }
}

@media (min-width: 500px) and (max-height: 650px) {
    .header-single-words {
        font-size: 50px;
        line-height: 55px;
    }
}


.fullwidth-image {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-height:100vh;
    margin-top:60px;
    margin-bottom:60px;
    overflow:hidden;
}

.fullwidth-image img {
    width:100%;
}

.fullwidth-image h1 {
    position:absolute;
    top:5px;
    left:5px;
    max-width:40%;
    text-align:left;
    color:#fff;
    font-size: 22px;
    line-height: 35px;
}
.fullwidth-image::before {
  display: block;
  position: absolute;
  background-image: linear-gradient(to left, transparent 0%, black 100%);
  rotate:90deg;
  margin-top: 0px;
  height: 99%;
  width: 70%;
  content: '';
}

@media (min-width: 325px) {
.fullwidth-image h1 {
    position:absolute;
    top:5px;
    left:5px;
    max-width:40%;
    text-align:left;
    color:#fff;
    font-size: 26px;
    line-height: 35px;
}
}

@media (min-width: 1000px) {
.fullwidth-image h1 {
    position:absolute;
    top:5%;
    left:5%;
    max-width:40%;
    text-align:left;
    color:#fff;
    font-size: 80px;
    line-height: 95px;
}
.fullwidth-image::before {
  height: 100%;
}
}

@media (min-width: 1300px) {
.fullwidth-image h1 {
    position:absolute;
    top:5%;
    left:5%;
    max-width:43%;
    text-align:left;
    color:#fff;
    font-size: 100px;
    line-height: 120px;
}
}




.fullwidth-image-cap {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-height:100vh;
    margin-top:60px;
    margin-bottom:60px;
    overflow:hidden;
}
.fullwidth-image-cap img {
    width:100%;
}
.fullwidth-image-cap::before {
  display: block;
  position: absolute;
  background-image: linear-gradient(to bottom, transparent 0%, black 150%);
  rotate:90deg;
  margin-top: 0px;
  height: 98%;
  width: 100%;
  content: '';
}
.fullwidth-image-cap figcaption {
    text-align:center;
    position:absolute;
    bottom:10px;
    color:#fff;
    width:100%;
}
@media (min-width: 1000px) {
.fullwidth-image-cap::before {
  height: 100%;
}
}











#interview {
    width:100%;
    height:auto;
    position:relative;
    overflow:hidden;
    background:#fff;
    float:right;
}

#interview-image {
    position:fixed;
    width:100%;
    height:44vh;
    display:block;
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
    float:right;
    right:0;
    z-index:1;
}

#interview-words {
    width:100%;
    float:left;
    position:relative;
    padding-top: 45vh;
}


.inset-words {
    padding: 0px 10px 0px 10px;
}

@media (min-width: 950px) {
#interview-image {
    position:fixed;
    width:65%;
    height:100vh;
    display:block;
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
    float:right;
    right:0;
}
#interview-words {
    width:35%;
    float:left;
    position:relative;
    padding-top: 0vh;
}
.inset-words {
    padding: 20px 10px 10px 50px;
}
}

.interview-unfix {
    position:absolute!important;
    bottom:0;
}

.zero {
    margin:0!important;
    padding:0!important;
}

#interview-words h1 {
    padding-top: 20px;
    font-size: 57px;
    line-height: 66px;
}

#next, #previous {
    width: 30px;
    height: auto;
    position: fixed;
    top: calc(50vh - 25px);
    background: #de6233;
    z-index: 1000;
    padding: 5px;
}

#next {
    right:0;
}

#previous {
    left:0;
}

#next img, #previous img {
    width:100%;
}

.facebook, .twitter {
    width: 41px;
    height: 41px;
    float: right;
    border-radius: 50%;
    border: 2px solid #fff;
    line-height: 58px;
    text-align: center;
    margin: 7px;
    transition: all 0.25s ease;
    display:none;
}

.twitter {
    line-height: 56px;
}

.facebook:hover {
    border: 2px solid #3b579d;
    background: #3b579d;
}

.twitter:hover {
    border: 2px solid #16b9ed;
    background: #16b9ed;
}

.navpadding {
    width:100%;
    height:60px;
}

.burger {
    width: 41px;
    height: 41px;
    float: right;
    border-radius: 50%;
    border: 2px solid #fff;
    line-height: 47px;
    text-align: center;
    margin: 7px;
    transition: all 0.25s ease;
    display:block;
    z-index:5000;
    position:relative;
    cursor:pointer;
}

#mobile-menu {
    width:100%;
    height:95vh;
    position:fixed;
    left:0;
    top:-1000px;
    z-index:5950;
    background:#de6233;
    padding-top:35px;
    display:block;
}

.mobile-button {
    width: 100%;
    height: 15%;
    font-size: 34px;
    font-weight: 900;
    letter-spacing: 1px;
    display: block;
    text-align: center;
    text-transform: uppercase;
    position:relative;
    font-weight: 700;
    font-family: 'Playfair Display', serif;
}

.mobile-button a {
    color:#fff;
    text-decoration:none;
    opacity:1;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

.mobile-button a:hover {
    opacity:0.7;
}

.close-mobile-menu {
    position:absolute;
    right:0px;
    top:0px;
    width: 41px;
    height: 41px;
    float: right;
    border-radius: 50%;
    border: 2px solid #fff;
    line-height: 50px;
    text-align: center;
    margin: 7px;
    transition: all 0.25s ease;
    display:block;
    cursor:pointer;
}

@media (min-width: 1300px) {
#tempbuttons {
    display:block;
}
.facebook, .twitter {
    display:block;
}
.burger {
    display:none;
}
}

#footer {
    width:100%;
    min-height:200px;
    background:#de6233;
    margin: 30px 0 0 0;
    color:#fff;
    padding-bottom:30px;
}

#footer-logos-hidden {
    display:none;
}

.footer-help {
    width:44%;
    margin:3%;
    position:relative;
    float:left;
    text-align:center;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform:uppercase;
    line-height: 18px;
    color:#fff;
}
@media (min-width: 500px) {
.footer-help {
    width:19%;
    margin:3%;
    position:relative;
    float:left;
    text-align:center;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform:uppercase;
    line-height: 18px;
    color:#fff;
}
}

.footer-help img {
    width:100%;
    padding-bottom: 25px;
}

.footer-help-original {
    opacity:0;
    transition: opacity 0.5s ease;
}

.footer-help-overlay {
    position:absolute;
    top:0;
    left:0;
    opacity:1;
    transition: opacity 0.5s ease;
}

.footer-help:hover .footer-help-original {
    opacity:1;
}

.footer-help:hover .footer-help-overlay {
    opacity:0;
}

.project-line {
    text-align:center;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform:uppercase;
    padding:0;
    padding-top: 20px;
}

.project-line p {
    vertical-align:middle;
    color:#fff;
    display:inline;
    font-size: 17px;
}

.tm-logo {
    display:inline;
    width:200px;
    height:auto;
    padding:10px;
    vertical-align:middle;

}
.mirror-logo {
    display:inline;
    width:150px;
    height:auto;
    padding:10px;
    vertical-align:middle;
}
.inlinelogos {
    margin: 0 10px;
    float: none;
    display: inline-block;
    height: auto;
    vertical-align: middle;
}
.inlinelogos img {
    padding: 0;
}
.noline {
    text-decoration:none;
}

#footer h1 {
    font-weight: 700;
    font-family: sans-serif;
    font-size: 25px;
    line-height: 28px;
    color: #fff;
    opacity: 0.6;
    text-align: center;
}

#location-picker {
    width: 100%;
    background: #eee;
    padding: 10px;
    text-align: center;
    font-size: 12px;
    letter-spacing: 1px;
    display:none;
}
#location-picker-mobile {
    margin-top:10px;
    display:block;
}
#location-picker-mobile select {
    min-width: 50%;
    font-size: 125%;
}
@media (min-width: 1000px) {
#location-picker {
    display:block;
}
#location-picker-mobile {
    display:none;
}
}

#location-picker a {
    text-decoration:none;
    text-transform:uppercase;
    padding-left:5px;
    padding-right:5px;
    color:#2a2a2a;
}

#location-picker a:hover {
    text-decoration:none;
    color:#de6233;
}

#journey-map {
    width:100%;
    float:none;
    margin-top:0px;
    background:#efead7;
}

#map-wrap {
    max-width:100%;
    max-height:100%;
    position:relative;
}

#journey-map img {
    width:100%;
}

svg {
    position:absolute;
    width:100%;
    top:0;
    left:0;
}

#journey-results {
    width:100%;
    position:relative;
    top:auto;
    left:auto;
}




@media (min-width: 1000px) {
#journey-map {
    width:65%;
    float:right;
    margin-top:60px;
    background:#efead7;
}
#journey-results {
    width:35%;
    position:absolute;
    top:60px;
    left:0;
    overflow-y:scroll;
}
#journey-results::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 12px;
  background-color: #F5F5F5;
}

#journey-results::-webkit-scrollbar {
  width: 8px;
  background-color: #F5F5F5;
}

#journey-results::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #525252;
}
}


#journey-results .card {
    width: 98%;
    margin: 1%;
    text-align:center;
}

#journey-results .face {
    width: 50%;
    text-align:center;
}



#journey-results h3 {
    font-family: 'Playfair Display', serif;
    font-size: 27px;
    text-transform: uppercase;
    letter-spacing: 3px;
    display: block;
    clear: both;
    color: #de6233;
    text-align:center;
}

rect {
    opacity: 0;
    cursor: pointer;
}

rect:hover {
    opacity: 1;
}

.line {
    width:100%;
    height:2px;
    background:#de6233;
}
.linewhite {
    width:100%;
    height:2px;
    background:#fff;
}
.lineblack {
    width:100%;
    height:2px;
    background:#000;
}

.line-location {
    background: #fff;
    color: #de6233!important;
    font-size: 20px;
    color: #fff;
    display: inline-block;
    top: -10px;
    position: relative;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 3px;
    padding: 0 10px;
}
.line-line {
    background: #de6233;
    /* font-size: 20px; */
    /* color: #fff; */
    text-align: center;
    width: 100%;
    height: 2px;
    overflow: visible;
    position: relative;
    /* padding-top: 0px; */
    margin-bottom:40px;
}
.filmpage-title {
    color: #de6233;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    text-transform: uppercase;
    font-size: 40px;
    line-height: 35px;
    margin-top: 130px;
}
@media (min-width: 500px) {
.filmpage-title {
    color: #de6233;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    text-transform: uppercase;
    font-size: 60px;
    line-height: 50px;
    margin-top: 130px;
}
}


.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    -webkit-filter: drop-shadow( 0px 0px 2px #000 );
    filter: drop-shadow( 0px 0px 2px #000 );
}


.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
   -webkit-filter: drop-shadow( 0px 0px 2px #000 );
    filter: drop-shadow( 0px 0px 2px #000 );
}

.white {
    color:#fff;
}
.clippedsquare {
    margin-top:-35px;
}
.center {
    text-align:center;
}

.card-episode {
    background: #de6233;
    color: #fff;
    width: 100%;
    text-transform: uppercase;
    padding: 1px;
    margin: -6px 0 13px 0;
    position: relative;
    letter-spacing: 1px;
}

.pullpanel {
    background:#feeed8;
    padding: 10px 20px 42px 20px;
    margin: 50px 0;
}
.pullpanel h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    text-align: left;
    padding: 0;
    margin: 0;
    font-size: 44px;
    text-transform: uppercase;
}
.pullpanel .byline {
    text-align:right;
}
.pullpanel h2 {
    text-align: left;
    background: #de6233;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    padding-left: 5px;
}

.stories-next, .stories-prev {
    width:100%;
    margin:0;
    padding:0px;
    font-family: 'Roboto', sans-serif;
}

@media (min-width: 630px) {
.stories-next, .stories-prev {
    width:50%;
}
}


.stories-prev {
    float:left;
    text-align:left;
}
.stories-next {
    float:right;
    text-align:right;
}
.next-prev-tag {
    font-size: 15px;
    padding: 3px 10px;
    color: #9c9c9c;
    text-transform: uppercase;
    font-weight: bold;
}
.next-prev-ep {
    font-size:15px;
    padding: 0 10px;
    text-transform:uppercase;
    color:#de6233;
    font-weight:bold;
}
.next-prev-head {
    font-size:22px;
    padding: 0 10px;
    font-weight:bold;
}
.next-prev-stories {
    text-decoration:none;
    color:#404040;
}

#previcon {
    display: block;
    float: left;
    font-size: 40px;
    border: 1px solid #fff;
    background-color: #404040;
    color: #fff;
    cursor: pointer;
    border-radius: 20px;
    width: 40px;
    height: 40px;
    transition: background-color 0.2s ease-out;
    margin: 15px 10px 30px 10px;
}
#previcon img {
    width:100%;
}
.stories-prev:hover #previcon {
    background-color: #de6233; 
}

#nexticon {
    display: block;
    float: right;
    font-size: 40px;
    border: 1px solid #fff;
    background-color: #404040;
    color: #fff;
    cursor: pointer;
    border-radius: 20px;
    width: 40px;
    height: 40px;
    transition: background-color 0.2s ease-out;
    margin: 15px 10px 30px 10px;
}
#nexticon img {
    width:100%;
}
.stories-next:hover #nexticon {
    background-color: #de6233; 
}

blockquote {
    text-align: right;
    font-weight: bold;
    color: #de6233;
    width: 100%;
    margin-left: 0%;
    margin-bottom: 60px;
    position:relative;
    quotes: '"' '"';
    quotes: '\201C' '\201D';
}
blockquote p {
    text-align: left;
    color: #404040;
    margin: 0px;
    font-weight: 100;
    font-size: 20px;
    line-height: 35px;
    z-index:1;
    padding-bottom:20px;
}
blockquote:before {
    font-family: 'Playfair Display', serif;
    color: #feeed8;
    content: open-quote;
    font-size: 290px;
    position: absolute;
    top: -110px;
    left: -30px;
    z-index:-1;
}
blockquote:after {
    font-family: 'Playfair Display', serif;
    color: #feeed8;
    content: close-quote;
    font-size: 290px;
    position: absolute;
    bottom: -220px;
    right: -30px;
    z-index:-1;
}
@media (min-width: 500px) {
blockquote {
    width: 120%;
    margin-left: -10%;
}
}



.teamlist h2 {
    color: #de6233;
    text-align:left;
    text-transform:uppercase;
    padding-top:50px;
}

.teamlist a {
    color:#de6233;
    font-weight:bold;
    text-decoration:none;
}

.logovertical {
    vertical-align:middle;
    padding-right: 10px;
}

.bookcover {
    float:none;
    max-width: 100%;
    margin-left: 0;
}
@media (min-width: 500px) {
.bookcover {
    float:right;
    max-width: 25%;
    margin-left: 20px;
}
}

.orwellsays {
    background:#feeed8;
    padding: 10px 20px 20px 20px;
    margin: 50px 0;
    width:auto;
    margin-left:0%;
}
.orwellsays p {
    font-size:130%;
    line-height:160%;
}
.orwellsays h2 {
    text-align:right;
    font-weight:bold;
}
@media (min-width: 900px) {
.orwellsays {
    width:120%;
    margin-left:-10%;
}
}

#archive {
    background: #eee;
    margin-top: 50px;
    padding-top: 1px;
    padding-bottom: 30px;
    margin-bottom: -30px;
}
#archive h2 {
    padding-left:10px;
    padding-right:10px;
}
#archive figure {
    margin:0;
    padding:0;
    text-align:center;
}
#archive figcaption {
    padding-left:10px;
    padding-right:10px;
}
#archive figure img {
    padding-top: 50px;
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
}

.dataunit {
    max-width: 1200px;
    width: 100%;
    height: auto;
    margin: 0 auto 0;
    padding: 0;
}
.dataunit img {
    width:100%;
}

.staffpic {
    display:inline;
    float:left;
    max-width:150px;
    margin: 56px 20px 10px 0;
}

#sharethisstory {
    display: block;
    text-align: center;
    width: auto;
    cursor:pointer;
}
#sharethisstory p {
    display: block;
    text-transform: uppercase;
    font-weight: bold;
    color: #cccccc;
    margin:7px;
}
#sharethisstory img {
    width:50px;
    margin: 0 5px;
}

.contactusline {
    border:1px solid #fff;
    margin-top:50px;
}
.contactusline h1 {
    opacity:1!important;
}
.contactusline h1 a {
    opacity:0.6!important;
    text-decoration:none;
    color:#fff;
}
.contactusline h1 a:hover {
    opacity:1!important;
}