/*
 * PAGE.CSS - THEME 'channel4'
 * 
 */

@import url('../font/C4.css');

 /* ==== GENERAL THEME STYLES ==== */

html, body { height: 100%; }
body { font-family: 'C4 Text', sans-serif; background-color: #76b74a; }
body.theme1 { background-color: #ffbc21; }

a, a:visited { color: #ffbc21; outline: none; }
a:hover { text-decoration: underline; }
.rcModule { background: none; }





 /* Pagination */
 
.rcPagination {
	display: none;
	 position: absolute;
	 bottom: 8px;
	 right: 10px;
	 font-size: 14px;
 	color: #dddddd;
 	z-index: 3;
}
.rcPaginationSection {
	padding-right: 4px;
}
.rcPaginationSection:after {
	content: '|';
	margin-left: 4px;
}
.question .rcPagination {
}
.question .rcPaginationSection:after {
}



/* Page */


.rcPanelBodyInner > .clearFix { display: none; }

.rcNavigator { overflow: hidden; } /* fix for odd behaviour where an absolute positioned image was still affecting page height and causing scrolling! */

.rcSection {
	height: 670px;
	width: 1100px;
}

.rcPanel {
	height: 670px;
	width: 1100px;
	background-color: #666666;
	color: #ffffff;
	text-align: left;
	border-radius: 0 54px 0 54px;
	overflow: hidden;
}
.rcPanel.carouselscreen.rcCompanionPanel {
	display: block;
}
.rcPanel .rcPanelBody {
	padding: 0 !important;
	display: block !important;
	position: relative;
	overflow: hidden;
	background-color: rgba(0,0,0,0) !important;
}
 .rcPanel .rcPanelBody .rcPanelBodyInner {
 	display: block !important;
	position: relative;
	background-color: rgba(0,0,0,0) !important;
	padding: 50px 60px 0 60px;
	height: 620px; /* to add up to .rcPanel height */
	width: 980px;
}
.rcPanel .rcPanelHead {
	display: none;
}
.rcObject {
	position: relative;
	z-index: 2;
}
.rcObject div.rcInner, .rcContainer.rcObject div.rcInner {
	padding-bottom: 0px !important;
}
.rcObject.rcInline div.rcInner {
	padding-right: inherit;
}


.rcLeftCol {
	z-index: 4;
}
.rcRightCol {
	z-index: 3;
}



.rcOneThird .rcInner {
	padding-top: 0px;
}
.rcTwoThirds .rcInner {
	padding: 0 20px 0 0 !important;
}

.rcInline {
	padding-top: 16px;
}






 /* Title Page */

.titlescreen {
	padding: 0 !important;
	text-align: center;
	background-color: #000000 !important;
}

.titlescreen .rcPagination {
	display: none;
}
.rcPanel.titlescreen .rcPanelBody .rcPanelBodyInner {
	padding: 0px;
	height: 670px;
	width: 1100px;
}

.titlescreen .titletext h1 {
	font-size: 74px;
	line-height: 74px;
	color: #ffffff;
}
.titletext {
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
}
.titletext:after {
	display: inline-block;
	vertical-align: middle;
	content: '';
	height: 100%;
}
.titletext .rcInner {
	display: inline-block;
	vertical-align: middle;
}

.titletext h3 {
	font-weight: 400;
	font-size: 40px;
	text-transform: uppercase;
	color: #ffffff;
	margin-left: 14px;
	margin-bottom: 8px;
}
.titletext h3 span {
	color: #000000;
}


.imagetitlescreen .titletext {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	text-align: left;
	background-image: url('../../module_assets/channel4logo_angled.png');
	background-position: 96% 50%;
	background-size: 30vh;
	background-repeat: no-repeat;
}
.imagetitlescreen .titletext .rcInner {
	width: 98%;
	margin-left: 2%;
}
.imagetitlescreen .titletext h3, .imagetitlescreen .titletext h1 {
	font-family: arial, sans-serif;
	font-weight: bold;
	font-style: italic;
	display: block;
	color: #ffffff;
	text-transform: uppercase;
}
.imagetitlescreen .titletext h3 {
	font-size: 7vw;
	line-height: 7vw;
}
.imagetitlescreen .titletext h1 {
	font-size: 3.2vw;
	line-height: 3.5vw;
	margin-left: 0.8%;
}


/* Section page */



/* Menu page */

.menuscreen .rcNextButt {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
}

 /* Fix for recruitment module - makes menu screen image full page */
.menuscreen .fullimage { position: fixed; }

/* First-of-section */
.firstofsection .rcPrevButtContainer {
  display: none; }



/* Unboxed Page */

.unboxed {
	height: 670px;
	width: 1100px;
	background-color: rgba(0,0,0,0) !important;
	text-align: left;
	border-radius: 0;
	overflow: visible;
	color: #ffffff;
}
.unboxed .rcPanelBody, .fullscreen .rcPanelBody {
	overflow: visible;
}
.unboxed .rcPagination, .fullscreen .rcPagination {
	display: none;
}

.unpadded, .unpadded .rcPanelBodyInner { /* added 15th Jan 2015 to make interactive video bigger */
	padding: 0 !important;
	width: 1088px !important;
	height: 612px !important;
	 margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

.fullbackground, .bigbackground {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
.titlescreen .bigbackground { z-index: 0; }
.fullbackground img {
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
}
.bigbackground img {
	width: auto;
	height: auto;
}



/* Whiteboard theme */

.whiteboard .rcPanel {
	background-color: rgba(0,0,0,0);
	color: #333333;	
}
.whiteboard .rcPanel:not(.imagetitlescreen):not(.scrollerscreen):before {
	content: "";
	display: block;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-image: url(../img/whiteboard/whiteboard.jpg);
	background-size: 90% 90%;
	background-repeat: no-repeat;
	background-position: center center;
}
.whiteboard .rcPanel:not(.imagetitlescreen):not(.scrollerscreen) .rcPanelBody:after {
	content: "";
	display: block;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-image: url(../img/whiteboard/pens.png);
	background-size: 40vh auto;
	background-position: center 97%;
	background-repeat: no-repeat;
}

.whiteboard .rcMultiChoice .rcOption {
	background-color: rgba(0,0,0,0) !important;
	color: #000000 !important;
	background-image: url(../img/whiteboard/option-background.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center center;
	margin-top: 0;
}
.whiteboard .rcMultiChoice .rcOption:nth-child(even) {
	background-image: url(../img/whiteboard/option-background_alt.png);
}
.whiteboard .question .rcSubmitButton {
/*	background-color: #174cc8 !important; */
	background-color: rgba(0,0,0,0) !important;
	background-image: url(../img/whiteboard/submit-background.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center center;
	color: #ffffff !important;
}
.whiteboard .rcMultiChoice .rcOption.ticked .rcRadio {
	background-image: url('../img/whiteboard/tick.png');
}
.whiteboard .rcTitle {
	background-color: rgba(0,0,0,0) !important;
	background-image: url(../img/whiteboard/title-background.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center center;
	color: #ffffff !important;
	padding-left: 20px;
	font-size: 220%;
	font-family: 'Hanzimarker', 'C4 Headline', sans-serif;
}
.whiteboard.desktop_s .rcTitle {
	margin-left: -40px;
}
.whiteboard .rcPanel:not(.imagetitlescreen) .titletext h3, .whiteboard .rcPanel:not(.imagetitlescreen) .titletext h1 {
	color: #333333;
	font-family: 'Hanzimarker', 'C4 Headline', sans-serif;
}
.whiteboard .rcPanel:not(.imagetitlescreen) .titletext h1 {
	color: #135fbb;
}

.whiteboard .sectionscreen h1 { color: rgba(0, 0, 0, 0.3); font-size: 70px; line-height: 78px; }
.whiteboard .sectionscreen h1.currentsection { color: #dd0000; }


.whiteboard a.nextslide {
	background-image: url('../img/whiteboard/next.png');
}
.whiteboard a.nextslide.nowcontinue {
	background-image: url('../img/whiteboard/arrow_large.png');
}
.whiteboard a.previousslide {
	background-image: url('../img/whiteboard/prev.png');
}




/* Whiteboard breakpoints */

.desktop_s.whiteboard .sectionscreen h1 { font-size: 50px; line-height: 58px; }

.tablet_l.whiteboard .sectionscreen h1 { font-size: 56px; line-height: 64px; }

body.tablet_l.whiteboard {
	background-color: #76b74a;
}


.tablet_l.whiteboard .rcPanel:before {
	background-size: 98% 98%;

}
.tablet_l.whiteboard .rcPanel:after {
	background-image: none;
}
.tablet_l.whiteboard .rcPanelBodyInner {
	padding-top: 80px !important;
}
.whiteboard.mobile .rcTitle, .mobile.whiteboard .titletext h3, .mobile.whiteboard .titletext h1 {
	color: #ffffff;
	font-family: 'C4 Headline', sans-serif;
}

.mobile.whiteboard .rcPanel, .mobile.whiteboard .rcMultiChoice .rcOption {
	color: #ffffff !important;
}

.whiteboard.tablet_l .simplecards .rcInner > div {
	background-color: rgba(0,0,0,0) !important;
}
.mobile.whiteboard .sectionscreen h1 { font-size: 28px; line-height: 32px; }



.markerquote, .markertitle {
	font-family: 'Hanzimarker', 'C4 Headline', sans-serif;
	margin-bottom: 3%;
}
.markerquote:nth-of-type(3n) {
	color: #044da7;
}
.markerquote:nth-of-type(3n+1) {
	color: #b50707;
}






/* Filled Page (eg. simple video show) */

.filledbox .rcTitle {
/*	display: none; */
	position: fixed;
	top: 30px;
	left: 0;
	margin-left: 0;
}
.filledbox video {
	width: 100% !important;
}


/* Fullscreen Page */

.fullscreen {
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0) !important;
	text-align: left;
	border-radius: none;
	overflow: visible;
}
.fullscreen .rcPanelBodyInner {
	max-height: 100% !important;
	width: 100%  !important;
	padding: 5% 0 !important;
}
.fullscreen .rcTitle {
	margin-left: 0;
}
.fullscreen .imagegrid {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-left: 5%;
	padding-right: 5%;
}


/* Carouselscreen Page - in conjunction with unboxed */

.carouselscreen, .timedscreen {
	overflow: hidden;
	width: 100% !important;
}

.unboxed.carouselscreen, .unboxed.timedscreen {
	overflow: visible !important;
}
.carouselscreen .rcTitle, .timedscreen .rcTitle {
	position: fixed;
	top: 30px;
	left: 60px;
}





/* Unskippableness */

/*
.carouselscreen.unskippable .rcNextButt, .timedscreen.unskippable .rcNextButt, .scrollerscreen.unskippable .rcNextButt, .scrollerscreen.unskippable .rcPrevButt,
*/
.unskippable .rcNextButt, .unskippable .rcPrevButt {
	display: none !important;
}
/*
.carouselscreen .rcNextButt.finished, .timedscreen .rcNextButt.finished, .scrollerscreen.unskippable .rcNextButt.finished, .scrollerscreen.unskippable .rcPrevButt.finished
*/
.unskippable .rcNextButt.finished, .unskippable .rcPrevButt.finished {
	display: inline !important;
}





/* Content boxes */

.leftbox, .rightbox, .middlebox {
	padding: 6px 10px 10px 10px;
	display: inline-block;
	max-width: 70%;
	margin-bottom: 20px;
}
.leftbox { float: left; }
.rightbox { float: right; }
.fullscreen .leftbox, .fullscreen .rightbox {
	margin-left: 10%;
	margin-right: 10%;
}
.middlebox {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.leftbox p, .rightbox p, .middlebox p, .bigimpactbox p {
	margin-bottom: 0px;
}



.bigimpactbox, .centeredbox {
	text-align: center;
	width: 100%;
	height: 100%;
}
.bigimpactbox:before, .centeredbox:before {
	content: '';
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	height: 100%;
}
.bigimpactbox div.rcInner {
	font-size: 180%;
	line-height: 120%;
	font-weight: bold;
	display: inline-block;
	vertical-align: middle;
	width: 60%;
	background-color: #4f92d7;
	color: #ffffff;
	padding: 3% !important;
}

.centeredbox div.rcInner {
	display: inline-block;
	vertical-align: middle;
	width: 90%;
}




.bluepanel {
background-color: #4f92d7 !important;	
}
.purplepanel {
background-color: #6f2d78 !important;	
}


.bluestyle {
	background-color: #4f92d7;
	color: #ffffff !important;
}
.purplestyle {
	background-color: #6f2d78;
	color: #ffffff !important;
}
.aquastyle {
	background-color: #007591;
	color: #ffffff !important;
}
.greenstyle {
	background-color: #007360;
	color: #ffffff !important;
}
.rcPanel.question.redstyle {
	background-color: #cc0033 !important;
	color: #ffffff !important;
}
.pinkstyle {
	background-color: #db3275;
	color: #ffffff !important;
}
.yellowstyle {
	background-color: #ffbc21;
	color: #333333 !important;
}
.limestyle {
	background-color: #76b74a;
	color: #333333 !important;
}
.whitestyle {
	background-color: #ffffff;
	color: #666666 !important;
}
.greystyle {
	background-color: #444444;
	color: #76b74a !important;
}
.blackstyle {
	background-color: #000000;
	color: #ffffff !important;
}

.darkstyle { /* for dark icons/controls over fullimage backgrounds */
	color: #333333 !important;
}

.newspaperstyle {
	background-color: #ffffff;
	background-image: url('../../module_assets/newsprint.jpg');
	color: #333333 !important;
	font-family: georgia, times, serif;
	font-size: 140%;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}

.quotestyle {
	background-color: #ffffff;
	color: #111111 !important;
	font-family: "Times New Roman", times, serif;
	font-size: 140%;
	padding: 6% 4% !important;
	box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
	-webkit-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
}
.quotestyle:before, .quotestyle:after {
	color: #dddddd;
	font-size: 300%;
	position: absolute;
}
.quotestyle:before { content: open-quote; top: -4%; left: 2%; }
.quotestyle:after { content: close-quote; bottom: -13%; right: 2%; }


.footnotetext {
	font-size: 80%;
	line-height: 100%;
	position: absolute;
	display: block;
	bottom: 4%;
}
.smallertext {
	font-size: 100%;
	line-height: 120%;
}
.bitsmallertext {
	font-size: 140%; /* I've really lost track of why this works */
}
.expandedtext {
	font-size: 150%;
	line-height: 110%;
}
.expandedtext li {
	margin-bottom: 3%;
}

.mediumtext {
	font-size: 170%;
	line-height: 110%;
}
.bitbiggertext {
	font-size: 170%;
	line-height: 100%;
}
.biggertext {
	font-size: 230%;
	line-height: 100%;
}
.supertext {
	font-size: 290%;
	line-height: 110%;
}
.megatext {
	font-size: 360%;
	line-height: 100%;
	margin-top: 5% !important;
}

.paddeddowntext {
	
margin-top: 24%;
}

.rotatedleft {
	-webkit-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	margin-top: 2px;
	margin-bottom: 30px;
}
.bitrotatedleft {
	-webkit-transform: rotate(1deg);
	-ms-transform: rotate(1deg);
	margin-top: 4px;
	margin-bottom: 15px;
}
.rotatedright {
	-webkit-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	margin-top: -10px;
	margin-bottom: 25px;
}
.bitrotatedright {
	-webkit-transform: rotate(-1deg);
	-ms-transform: rotate(-1deg);
	margin-top: 0px;
	margin-bottom: 15px;
}

.circle {
	border-radius: 50%;
	padding: 15%;
	margin: 0;
	text-align: center;
}


.lgbt {
	color: #000000 !important;
	background-color: #ffffff;
	background-image: url(../../module_assets/lgbt.png);
	background-repeat: repeat-x;
	background-size: auto 100%;
	
/*	background: linear-gradient(
		#f00000,
		#f00000 16%,
		#ff8000 17%,
		#ff8000 33%,
		#ffff00 34%,
		#ffff00 50%,
		#007940 51%,
		#007940 67%,
		#4040ff 68%,
		#4040ff 84%,
		#a000c0 85%,
		#a000c0 100%
	); */
}




/* Image Grids - add number of rows across, spaced and/or breakable to container class */

.imagegrid {
	width: 100%;
	max-width: 100%;
}
.imagegrid .rcInner {
	padding-right: 0; 
	width: 100%;
}
.spaced .rcInner {
	margin-left: -1%;
}

.imagegrid .rcInner > * {
	float: left;
	text-align: center;
}
.imagegrid .rcInner > a {
	text-decoration: none;
	color: inherit;
}
.imagegrid img {
	width: 100%;
}
.spaced .rcInner > *, .circlespaced  .rcInner > * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-left: 1%;
	padding-bottom: 1%;
}
.circlespaced a {
	padding: 2%;
}
.circle img {
	width: auto;
	max-width: 100%;
}
.twoacross .rcInner > * {
	width: 50%;
}
.threeacross .rcInner > * {
	width: 33.33%;
}
.fouracross .rcInner > * {
	width: 25%;
}
.fiveacross .rcInner > * {
	width: 20%;
	display: inline-block;
}

.rcObject.circles.rcInline, .rcObject.circles.rcInline div.rcInner {
	padding-right: 0 !important;
	margin-left: 0;
	text-align: center;
}
.circles .rcInner > a {
	border-radius: 50%;
	position: relative;
	float: none;
	display: inline-block;
}
.spaced.circles .rcInner > a {
	margin-left: 0%;
	margin-right: 1.9%;
}
.twoacross.circles .rcInner > a {
	width: 48%;
	padding-bottom: 48%;
}
.threeacross.circles .rcInner > a {
	width: 31%;
	padding-bottom: 31%;
}
.fouracross.circles .rcInner > a {
	width: 23%;
	padding-bottom: 23%;
}
.fiveacross.circles .rcInner > a {
	width: 18%;
	padding-bottom: 18%;
}

.circles .rcInner > a > div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
.circles .rcInner > a > div:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
.circles .rcInner > a > div > div {
	display: inline-block;
	vertical-align: middle;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 4% 7%;
	text-align: center;
	font-weight: bold;
	color: #ffffff;
}
.rcObject.circles .rcInner {
	padding: 0 !important;
}
.rcObject.rcOneThird.circles {
	padding: 0 0 33.33333333333333% 0;
}
.rcObject.rcTwoThirds.circles {
	padding-bottom: 66.66666666666666%;
}

.circles .rcInner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.circles .rcInner > a {
	width: 100%;
	height: 100%;
}






/* ==== QUESTIONS ==== */

.question .rcTitle, .question .rcMultiChoice {
	position: relative;
	z-index: 2;
}
.question .rcSubmitButton {
	background-color: #ffffff !important;
	color: #333333 !important;
}

.questionspeaker img {
	margin-left: 50px;
	width: 163px;
}
.plainspeaker img {
	margin-top: 12px;
	width: 163px;
}

.rcMultiChoice {
	margin: 0px auto;
}
.rcMultiChoice p i {
}
.rcMultiChoice .rcOption {
	margin-top: 2px;
	width: auto !important;
	background-color: #555555 !important;
	color: #ffffff !important;
}
.rcMultiChoice .rcOption:first-of-type {
	margin-top: 0.6em;
}
.rcMultiChoice a.rcSubmitButton {
	margin-right: 0px !important;
	margin-top: 0.95em;
	padding: 0.4em 0.75em;
}

.rcMultiChoice .rcOptionImage {
	border: none;
}


.rcTrueFalse {
	width: auto !important;
	margin-left: 40px;
}
.rcTrueFalse .rcOption {
	margin-top: 0 !important;
	margin-right: 8px !important;
}
.rcTrueFalse .rcOptionText {
	padding: 10px 12px !important;
	font-size: 120%;
}


.rcOptionText {
	padding: 0px;
}

.rcMultiChoice .rcOption .rcRadioCont {
	background: none !important;
	margin: 0 1em;
}
.rcRadio {
	border-radius: 0.75em;
	background-color: #ffffff !important;
}
.rcOption:hover .rcRadio {
	background-color: #cccccc !important;
}
.rcOption.on .rcRadio, .rcOption.ticked .rcRadio {
	background-color: #76b74a !important;
}


.hidewarning .rcWarntext {
	display: none !important;
}


/* YesNo and YesNoMaybe fake question screens */

.yesno .rcPagination {
	display: none;
}
.yesnoquestion, .yesnomaybequestion {
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	text-align: center;
	font-size: 24px;
	padding: 0 !important;
	z-index: 50;
}
.yesnoquestion div, .yesnomaybequestion div {
	max-width: 100%;
}
.yesnoquestion div + div, .yesnomaybequestion div + div {
	padding-left: 4%; padding-right: 4%;
	line-height: 120%;
}
.yesnoquestion a, .yesnomaybequestion a  {
	display: inline-block;
	width: 33.33%;
	font-size: 28px;
	font-weight: bold;
	padding: 6px 0;
	margin: 1.5% 0 2% 0;
	text-decoration: none;
	background-color: rgba(0,0,0,0.1);
}
.yesnomaybequestion a {
	width: 25%;
}
.yesnoquestion.fourway a {
	width: 20%;
}
.yesnoquestion.fiveway a {
	width: 16%;
}
.yesnoquestion a:hover, .yesnomaybequestion a:hover {
	background-color: rgba(0,0,0,0.2);
}



/* Companion links */

.companionlinks {
	text-align: center;
	color: #ffffff;
	padding-top: 24px;
}
.companionlinks .rcInner > * {
	display: inline-block;
	padding: 8px 12px;
}
.companionlinks .rcInner div {
	font-size: 24px;
	padding-top: 14px;
}
.companionlinks a {
	background-color: #4f92d7;
	color: #ffffff;
	background-repeat: no-repeat;
	font-weight: bold;
	font-size: 34px;
	text-decoration: none;
}
.companionlinks a:hover {
	background-color: #4984c0;
}
.companionlinks a:first-of-type {
	padding-left: 30px;
	background-image: url('../img/companionlink-left_butt.png');
	background-position: left center;
	float: left;
}
.companionlinks a:last-of-type {
	padding-right: 30px;
	background-image: url('../img/companionlink-right_butt.png');
	background-position: right center;
	float: right;
}



.launchbutton a {
	display: inline-block;
	padding: 8px 12px;
	background-color: #4f92d7;
	color: #ffffff;
	font-weight: bold;
	font-size: 34px;
	text-decoration: none;
}
.launchbutton a:hover {
	background-color: #4984c0;
}




/* ==== CUSTOM IMAGE POSITIONING ==== */

.rightimage, .leftimage, .bottomimage, .rightcornerimage, .leftcornerimage, .rightimage_big {
	position: static; /* Wah? Fixes for addition of relative positioning on all objects */
}
.titlescreen .rightimage { position: fixed; }

.bottomimage .rcInner {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 50% !important;
	height: 100%;
	font-size: 0;
}
.bottomimage img {
	position: absolute;
	bottom: 0;
	right: 0;
	width: auto;
	height: auto;
	max-width: 95% !important;
	max-height: 80%;
	margin-left: auto;
	margin-right: auto;
	left: 0; right: 0;
}
.rightcornerimage img {
	position: absolute;
	bottom: 0;
	right: 0px;
	width: inherit;
	max-width: 66% !important;
}
.leftcornerimage img {
	position: absolute;
	top: 0;
	left: 0px;
	width: inherit;
	max-width: 66% !important;
}
.leftimage img {
	width: inherit;
	max-width: 50% !important;
	position: absolute;
	left: 0px;
}
.rightimage img {
	width: inherit;
	max-width: 50% !important;
	position: absolute;
	right: 0px;
	z-index: -1;
}
.titlescreen .rightimage img {
	top: 50px; /* offsets some padding somewhere */
}
.middleimage img {
	width: inherit;
	max-width: 50% !important;
	position: absolute;
	left: 25%;
}

.rightimage_big img {
	width: inherit;
	max-width: 160% !important;
	position: absolute;
	right: -15%;
	top: -180px; /* offsets some padding somewhere */
	z-index: 1;
}

.largeimage {
	margin-top: -8%;
}

.twothirdsimage .rcInner {
	width: 66% !important;
}
.twothirdsimage img {
	max-height: 94%;
}

.completelyrightimage, .completelyleftimage {
	position: fixed;
	top: 0;
	height: 100%;
}
.completelybottomrightimage, .completelybottomleftimage {
	position: fixed;
	width: 100%;
	bottom: 0;
	font-size: 0;
}
.completelyrightimage, .completelybottomrightimage { right: 0; }
.completelyleftimage, .completelybottomleftimage { left: 0; }
.completelybottomrightimage { text-align: right; }

.completelyrightimage:after, .completelyleftimage:after {
	display: inline-block;
	vertical-align: middle;
	content: '';
	height: 100%;
}
.completelyrightimage .rcInner, .completelyleftimage .rcInner {
	display: inline-block;
	vertical-align: middle;
}
.completelyrightimage .rcInner img, .completelyleftimage .rcInner img, .completelybottomrightimage .rcInner img, .completelybottomleftimage .rcInner img {
	width: auto;
	height: auto;
	max-width: 40%; /* changed 5th Jan 2015 from 50% to fix for android */
	max-height: 90%;
}





.fullimage {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
	z-index: 0;
}
.fullimage .rcInner {
  position: absolute; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
.fullimage .rcInner img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto;
  width: 50%;
  min-width: 50%; /* not needed? */
  min-height: 50%; /* not needed? */
}

@media only screen and (orientation : landscape) {
	.fullimage .rcInner img {
		width: 50%;
		height: auto;
	}
}
@media only screen and (orientation : portrait) {
	.fullimage .rcInner img {
		height: 50%;
		width: auto;
	}
}


.carouselslides .fullimage {
	display: block;  position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;
}
.carouselslides .fullimage div {
	position: absolute !important;
	display: block;
	top: -150%; left: -150%;
	width: 400% !important;
	height: 400% !important;
	font-size: 0;
	text-align: center;
	z-index: 0;
}
.carouselslides .fullimage div:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
.carouselslides .fullimage img {
	display: inline-block;
	vertical-align: middle;
	position: relative;
}
@media only screen and (orientation : landscape) {
	.carouselslides .fullimage img { min-height: 25%; min-width: 25%; max-width: 25%; }
}
@media only screen and (orientation : portrait) {
	.carouselslides .fullimage img { min-width: 25%; min-height: 25%; max-height: 25%; width: auto; }
}



.fullslide { /* replaces fullimage for timedslideshow images */
	position: absolute;
	width: 100% !important;
	height: auto !important;
	left: 0;
	top: 0;
	z-index: -1;
}


/* fullimage for required content */

.fullcontentimage {
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
}








/* ==== TEXT STYLES ==== */


.rcPanel, .rcModal {
	font-size: 22px; /* BASE FONT SIZE */
}

.rcTitle {  
	font-family: 'C4 Headline', sans-serif;
	padding: 6px 20px 8px 54px;
	margin-bottom: 28px;
	font-style: normal;
	background-color: #ffffff;
	color: #333333;
	margin-left: -60px;
	display: inline-block;
	float: left;
	width: auto;
}
.unboxed .rcTitle {
	background-color: #000000;
	color: #ffffff;
}
.narrowtitle .rcTitle {
	max-width: 78%;	
}

h1, .rcSubtitle, h2, .rcHeading, h3 {
	font-family: 'C4 Headline', sans-serif;
	color: #4f92d7;
}
.rcTitle, h1 {
	font-size: 180%;
	font-weight:normal;
}
.rcSubtitle, h2 {
	font-size: 150%;
	font-weight: normal;
}
.rcHeading, h3 {
	font-size: 130%;
	font-weight: bold;
}
h4 {
	font-size: 120%;
	font-weight: medium;
	margin: 0.2em 0;
}



/* ==== COLLAPSIBLE PANELS ==== */

a.rcCollapsedTitle, a.rcCollapsedTitle:visited, .rcObject a.rcCollapsedTitle.rcTouch:hover {
	background-color: #76b74a;
	color: #ffffff !important;
	font-family: 'C4 Headline', sans-serif;
	padding: 0.25em;
	margin-top: 2px;
}
a.rcCollapsedTitle:hover {
}

.rcCollapsedTitleText .rcInner {
	padding-top: 0px !important;
}
.rcCollapsedTitleText .rcInner p {
	padding-top: 10px;
}




.roundsign span.annotation {
	display: block;
	position: absolute;
	font-size: 10px;
	color: #444444;
	right: -30%;
	bottom: 0%;
}


.longword {
	padding-top: 0 !important;
}


.highlighted, .unboxed .simplecards .highlighted {
	font-family: 'C4 Headline', sans-serif;
	color: #76b74a;
}
.unboxed .highlighted { color: #ffffff; }


/* Form lists */

.formlist {
	list-style: none;
	font-size: 130%;
	display: inline-block;
	margin-bottom: 0;
}
.formlist li {
	margin-bottom: 10px;
	text-align: right;
}
.formlist input {
	float: right;
	padding: 6px 10px;
	margin-left: 10px;
}




/* ==== MODALS ==== */


.modal {
	border: none;
	border-radius: 0;
	margin-top: 50px;
}

.modal-header h3 {
	font-family: 'C4 Text', sans-serif;
	font-weight: medium;
	font-size: 200%;
	padding: 4px 0;
}
.modal-body ul {
	padding-left: 24px;
	line-height: 110%;
}
.modal-body ul li {
	margin-bottom: 16px;
}

.rcModal > * { text-align: left; }

.advicelink {
	display: inline-block;
	background-color: #76b74a;
	color: #ffffff;
	font-family: 'C4 Headline', sans-serif;
	padding: 0 6px;
	margin: 0 4px;
}



/* ARTICLE SCREEN */

.articlescreen .rcObject + .rcObject {
	height: 64%;
}
.articlescreen .rcObject + .rcObject .rcInner, .articlescreen iframe {
	height: 100%;
}
.articlescreen iframe {
	width: 90%;
	margin-left: 5%;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
}

/* ==== SCROLLERS ==== */

.scrollerscreen.fullscreen iframe {
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: none;
}




/* === SHOW/HIDES === */

/* Sequential Show */

.sequentialshow .rcInner > * {display: none;}
.show, .firstshow {display: block !important;}

.simplelist .rcInner > div {
	position: relative;
	background-color: #f37021;
	color: #ffffff;
	padding: 6px 10px 6px 36px;
	margin-bottom: 3px;
	cursor: pointer;
}
.simplelist .rcInner > div b {
	position: absolute;
	top: 0px;
	left: 8px;
	font-size: 24px;
}


/* Carousels */


.carouselscreen .rcPanelBody, .carouselscreen .rcPanelBodyInner {
	padding: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

.carouselslides {
	position: relative;
	width: 100%;
	height: 670px;
}

.carouselslides img {
	max-width: 100%;
}
.carouselslides .rcInner > div {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}

.containsaudio .rcInner > div:first-of-type:after, .timedslideshow .rcInner > div > div:first-of-type:after {
	content: 'This bit has audio';
	display: block;
	position: absolute;
	top: 62%;
	right: 30px;
	width: 100px;
	line-height: 90%;
	text-align: left;
	padding: 6px 6px 12px 48px;
	background-color: #76b74a;
	color: #ffffff;
	background-image: url('../img/speaker_small.png');
	background-repeat: no-repeat;
	background-position: 8px center;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
	z-index: 2;
}
.timedslideshow .rcInner > div > div:first-of-type:after {
	top: 86%;
}

.simplecards .rcInner > div {
	border-radius: 0 54px 0 54px;
	background-color: #666666;
}
.whiteboard .simplecards .rcInner > div {
	border-radius: 0;
	background-color: transparent;
}

.carouselslides .rcInner > div {
	padding: 0 16% 0 11%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-align: left;
	-webkit-transition: translate3D();
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	overflow: hidden;
}

a.previousslide, a.nextslide {
	position: absolute;
	height: 100%;
	width: 114px;
	top: 0;
	z-index: 10;
	cursor: default;
	background-repeat: no-repeat;
	background-position: center center;
}
a.previousslide {
	left: -4%;
	opacity: 0.1;
	background-image: url('../img/carousel_back-new.png');
}
a.previousslide.shown {
	opacity: 1;
}
a.nextslide {
	right: -3%;
	background-image: url('../img/carousel_next-new.png');
}
a.nextslide.nowcontinue {
	background-image: url('../img/arrow_large.png');
}
.rcCompanionPanel a.nextslide.nowcontinue {
	background-image: none;
}
.simplecards a.nextslide.nowcontinue {
	width: 100px;
	right: -56px;
}

.carouselslides .rcInner > div:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
.carouselslides .rcInner > div > div {
	position: relative; /* added 10th Nov to fix absolute positioning of images with rightimage, middleimage etc */
	display: inline-block;
	vertical-align: middle;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-top: 0%; padding-bottom: 0%;
	background-repeat: no-repeat;
	background-position: right center;
	z-index: 1;
}
.carouselslides .rcInner > div > div.fullimage {
	z-index: 0;
}
.carouselslides .rcInner > div > div.yesnoquestion, .carouselslides .rcInner > div > div.yesnomaybequestion {
	position: absolute !important;
	bottom: 0 !important;
	padding-top: 10px; padding-bottom: 10px;
}

.carouselslides .instructions {
	font-size: 100%;
}
.carouselslides h1 {
	font-style: normal;
	color: inherit;
	padding:  10px 0;
}
.carouselslides h2 {
	font-style: normal;
	color: inherit;
	/* padding: 0 0 1em 0; changed 3rd Feb 2015 */
	padding: 0.4em;
	line-height: 1.2em;
}
.carouselslides p {
	padding-left: 2%;
	padding-right: 2%;
}
.carouselslides ul, .carouselslides ol {
	display: inline-block;
	width: auto;
	text-align: left;
	padding-top: 2%;
}
.carouselslides li {
	margin-bottom: 4%;
}


.bluestyle, .purplestyle, .aquastyle, .greenstyle, .redstyle, .pinkstyle, .yellowstyle, .limestyle, .whitestyle, .greystyle, .blackstyle {
	padding: 1% 2%;
}


/* text and image positioning in carousels (and some work in interactivevideo) */

.twothirdswidth { width: 66% !important; }
.twothirdswidth img { max-width: 66% !important; }
.halfwidth { width: 50% !important; }
.onethirdwidth { width: 33% !important; }
.onethirdwidth img { max-width: 33% !important; }
.carouselslides .halfwidth { display: inline-block; vertical-align: middle; } /* added 2.1.15 along  to counteract structural changes necessary in Performance Management for mobile */
.carouselslides .twothirdswidth img, .carouselslides .onethirdwidth img {
	max-width: 100% !important;
	width: 100%;
}
.rightcolumn { margin-left: 50%; }
.rightcolumn.onethirdwidth { margin-left: 66%; }
.rightcolumn.twothirdswidth { margin-left: 33%; }

.middlecolumn { margin-left: 25%; }
.middlecolumn.onethirdwidth { margin-left: 34%; }
.middlecolumn.twothirdswidth { margin-left: 17%; }

.carouselslides .leftimage, .carouselslides .rightimage, .carouselslides .middleimage {
	position: absolute !important;
	left: 0;
	top: 0;
	z-index: 0;
}
.carouselslides .leftimage img, .carouselslides .middleimage img, .carouselslides .rightimage img {
	top: 50px;
}

.carouselslides .middleimage.twothirdswidth { left: 17%; }
.carouselslides .rightimage.twothirdswidth { left: 34%; }
.carouselslides .middleimage.halfwidth { left: 25%; }
.carouselslides .rightimage.halfwidth { left: 50%; }
.carouselslides .middleimage.onethirdwidth { left: 34%; }
.carouselslides .rightimage.onethirdwidth { left: 66%; }
.carouselslides .middleimage img { left: 0; }

.carouselslides .toptext, .carouselslides .bottomtext {
	position:absolute !important;
	display: block !important;
	width: 78% !important;
	text-align: center;
}
.carouselslides .toptext { top: 3%; }
.carouselslides .toptext { bottom: 3%; }
.carouselslides .toptext > *, .carouselslides .bottomtext > * { display: inline-block !important; }

.centredblock { text-align: center !important; }



/* Flexible round signs - bit like .circle but height isn't based on square contents, so can contain variable height text block. 2 inner DIVs required */

.roundsign {
	position: relative;
	border-radius: 50%;
	width: 54%;
	padding-bottom: 54%;
	margin: 20px auto 0 auto;
	font-weight: medium;
	line-height: 75px; /* Why is this affecting height of vertical center content? */
}
.roundsign > div {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
}
.roundsign > div:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
.roundsign > div > div {
	display: inline-block;
	vertical-align: middle;
	width: 100%;
}
.roundsign h1 {
	font-size: 110px;
	line-height: 110px;
	padding: 0;
}
.roundsign p {
	font-size: 28px;
	line-height: 26px;
	margin: 0;
	padding: 0;
}



/* Timed Slideshow */

.timedscreen .rcPanelBodyInner {
/*	padding-top: 25px !important; padding-bottom: 25px !important; */
	padding: 0 !important;
	margin-left: auto; margin-right: auto; margin-top: 1.6%;
}

.timedslideshow {
	position: relative;
	width: 100%;
	height: 100%;
}
.timedslideshow .rcInner {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}
.timedslideshow .rcInner > div {
	position: relative;
	border-radius: 5px;
	box-shadow: 0px 2px 6px rgba(0,0,0,0.3);
	width: 100%;
	height: 100%;
	text-align: center;
	overflow: hidden;
}

.timedslideshow .rcInner > div > div {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index:1;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.timedslideshow .rcInner > div > div:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
.timedslideshow .rcInner > div > div.active {
	z-index:3;
}

.timedslideshow .rcInner > div > div > * {
	display: inline-block;
	vertical-align: middle;
	background-repeat: no-repeat;
	background-position: right center;
}
.timedslideshow .rcInner div div img {
	width: intrinsic;
	width: auto;
	max-width: 100%;
}
.timedslideshow h1, .timedslideshow h2 {
	padding: 2% 5%;
}


.timedslideshow .rcInner .darkstyle img {
	z-index: -1;
}


.timedslideshow h3 { position: absolute; font-weight: normal; font-size: 150%; }
.timedslideshow .top { top: 6%; }
.timedslideshow .left { left: 2.5%; }
.timedslideshow .bottom { bottom: 6%; }
.timedslideshow .right { right: 2.5%; }


.rightoverlay .rcInner > div + div { /* all except first */
	opacity: 0;
	-webkit-transform: translate3d(150%,0,0);
	-ms-transform: translate(150%,0);
	transform: translate3d(150%,0,0);
}
.rightoverlay .displayed {
	opacity: 1 !important;
	-webkit-transform: translate3d(0,0,0) !important;
	-ms-transform: translate(0,0) !important;
	transform: translate3d(0,0,0) !important;
}
.rightoverlay .replaced {
	opacity: 0 !important;
	-webkit-transform: scale(0.1) !important;
	-ms-transform: scale(0.1) !important;
	transform: scale(0.1) !important;
	z-index: -1;
}

.leftreplace .rcInner > div + div { /* all except first */
	-webkit-transform: translate3d(-150%,0,0);
	-ms-transform: translate(-150%,0);
	transform: translate3d(-150%,0,0);
}
.leftreplace .displayed {
	-webkit-transform: translate3d(0,0,0) !important;
	-ms-transform: translate(0,0) !important;
	transform: translate3d(0,0,0) !important;
}
.leftreplace .replaced {
	-webkit-transform: translate3d(150%,0,0) !important;
	-ms-transform: translate(150%,0) !important;
	transform: translate3d(150%,0,0) !important;
}


.fadingstack .rcInner > div + div { /* all except first */
	z-index: -1;
	opacity: 0;
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}
.fadingstack .displayed {
	z-index: 1 !important;
	opacity: 1 !important;
	-webkit-transform: scale(1) !important;
	-ms-transform: scale(1) !important;
	transform: scale(1) !important;
}
.fadingstack .replaced {
	z-index: -1 !important;
	opacity: 0 !important;
	-webkit-transform: scale(0.8) !important;
	-ms-transform: scale(0.8) !important;
	transform: scale(0.8) !important;
}




/* === VIDEO SEQUENCES === */

.branchingvideo, .interactivevideo {
	background-color: #000000;
	box-shadow: 2px 4px 0px rgba(0,0,0,0.2);
	overflow: hidden;
	max-width: 1088px;
	height: 0 !important;
	padding-bottom: 56.25%;
	margin-left: auto;
	margin-right: auto;
}

.branchingvideo .show, #firstvideosection {
	display: block !important;	
}

.branchingvideo video, .desktop_s .branchingvideo video, .interactivevideo video, .desktop_s .interactivevideo video {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
}

.videoquestion, .branchingvideo video ~ video, .interactivescreen, .interactivevideo video {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	z-index: 100;
}
.videoquestion, .branchingvideo video ~ video { display: none; }

.videoquestion a {
	display: block;
	position: absolute;
	background-color: #d800bd;
	text-align: center;
	width: 11%;
	height: 0 !important;
	padding-bottom: 11%;
	border-radius: 50%;
	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.4);
}
.videoquestion h2 {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	color: #ffffff !important;
	font-size: 64px;
	font-style: normal;
}
.desktop_s .videoquestion h2 {
	font-size: 48px;
}
.videoquestion h2:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
.videoquestion h2 span {
	display: inline-block;
	vertical-align: middle;
	width: 100%;
}


.interactivescreen { padding: 0 !important; }
.interactivevideo .show, .interactivescreen.overlaid.show {
	left: 0;
	top: 0;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
 }
.interactivescreen, .interactivevideo div ~ video { left: 100%; }
.interactivescreen.overlaid { left: 0; top:100%; }
.interactivescreen.removed > a { display: none; }
.interactivescreen.slideout.removed > div {
	left: -100%;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
.interactivescreen.overlaid.slideout.removed > div {
	left: 0;
	top: 100%;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

.interactivescreen {
	display: block;
	text-align: center;
	width: 100%;
	height: 100%;
	color: #ffffff !important;
}
.interactivescreen:after {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
.interactivescreen > div {
	max-width: 90%;
	display: inline-block !important;
	vertical-align: middle;
	position: relative !important;
}

.interactivescreen.overlaid {
	width: 94%;
	height: 90%;
	margin-top: 3%;
	margin-left: 3%;
	box-shadow: 2px 3px 0px rgba(0, 0, 0, 0.1);
}

.interactivescreen h2 { color: inherit; font-style: normal; }
.interactivescreen > a { /* next slide link */
	position: absolute;
	bottom: 0;
	right: 0;
	width: 54px;
	height: 54px;
	z-index: 200;
	cursor: default;
	background-color: #333333;
	background-image: url('../img/next_butt@2x.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 38px 38px;
}
.interactivescreen div a, .choicebuttons a { display: inline-block; background-color: rgba(0,0,0,0.1); font-size: 135%; font-weight: 700; padding: 1%; margin-bottom: 10px; }
.interactivescreen div a:hover, .choicebuttons a:hover { text-decoration: none; background-color: rgba(0,0,0,0.2); }
.choicebuttons a span { font-weight: 400; font-size: 90%; }
a.solidbutton {background-color: rgba(0,0,0,0.8) !important;}
a.solidbutton:hover {background-color: rgba(0,0,0,1) !important;}
.interactivescreen div a:first-of-type { margin-top: 5%; }
.factoid h3, .factoid h2 { line-height: 100%; display: block; padding: 2%; margin: 4% 0; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); }
.factoid h3 { font-size: 600%; }
.factoid h2 { font-size: 900%; }
.factoid p { font-size: 180%; line-height: 100%; margin-bottom: 0; }

.interactivescreen .screentitle { font-size: 300%; display: block !important; position: absolute; left: 0; top: 0; width: 100%; padding: 1% 0; color: #ffffff; }
.interactivescreen .screentitle.calendarstyle { background-color: #ffffff; color: #666666; }



/* === COMPANION PANELS === */

.rcCompanionPanel {
	position: fixed !important;
	width: 100% !important;
	height: 100% !important;
	border-radius: 0;
}
.rcCompanionPanel .rcPanelBody {
	height: 100%;
	text-align: center;
}
.rcCompanionPanel .rcPanelBody:before, .rcCompanionPanel .fullcompanion:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
.rcCompanionPanel .rcPanelBody .rcPanelBodyInner, .rcCompanionPanel .fullcompanion .rcInner {
	display: inline-block !important;
	vertical-align: middle !important;
	margin: 0 !important;
	text-align: left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.rcCompanionPanel.fullscreencompanion .rcPanelBody, .rcCompanionPanel.fullscreencompanion .rcPanelBody .rcPanelBodyInner {
	width: 100% !important;
	height: 100% !important;
	max-width: inherit !important;
}
.rcCompanionPanel .fullcompanion {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	height: 100%;
}
.rcCompanionPanel .fullcompanion img {
	width: 100%;
}

.rcCompanionPanel .oversizecompanion {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 120%;
	height: auto;
	margin-left: -10%;
	margin-top: -10%;
}



.showondevices {
	display: none;
}





@media only screen and (max-height: 792px) {
	.carouselscreen .rcTitle {
		top: 0 !important;
		font-size: 150%;
	}
}
/* @media only screen and (max-height: 710px) {
	.carouselscreen .rcTitle {
		display: none;
	}
} */



.current-desktop_l .hideondesktop, .current-desktop_s .hideondesktop {
	display: none !important;
}





/* === RESPONSIVE CHANGES === */


/* Small Desktop (1024px to 1367px) - precede with .desktop_s */

.desktop_s .rcSection {
	width: 900px;
	height: 560px;
	max-height: none;
	max-width: none;
}
.desktop_s .rcPanel {
	font-size: 18px;
	width: 900px;
	height: 560px;
}
.desktop_s .rcModal {
	font-size: 18px;
}
.desktop_s .rcPanel .rcPanelBody .rcPanelBodyInner {
	padding: 30px 40px 0 40px;
	width: 820px;
	height: 530px;
	max-width: none;
}
.desktop_s .rcRightCol .rcInner {
	padding-right: 10px;
}
.desktop_s .rcPagination {
	 bottom: 6px;
	 right: 11px;
	 font-size: 12px;
}

.desktop_s .rcPanel.titlescreen .rcPanelBody .rcPanelBodyInner {
	padding: 0px;
	width: 900px;
	height: 560px;
}
.desktop_s .titlescreen .titletext h1 {
	font-size: 60px;
	line-height: 60px;
}
.desktop_s .bottomimage .rcInner {
	width: 54%;
}

.desktop_s .simplelist .rcInner > div b {
	font-size: 21px;
}

.desktop_s .fullscreen {
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0) !important;
	text-align: left;
	border-radius: none;
	overflow: visible;
}
.desktop_s .fullscreen .rcPanelBody {
	position: fixed;
	height: 100% !important;
	width: 100% !important;
}
.desktop_s .fullscreen .rcPanelBodyInner {
	position: fixed;
	max-height: 100% !important;
	width: 100% !important;
	padding: 5% 0 !important;
}

.desktop_s .unpadded, .desktop_s .unpadded .rcPanelBodyInner { width: 896px !important; height: 504px !important; }

.desktop_s .companionlinks .rcInner div {
	font-size: 20px;
}
.desktop_s .companionlinks a {
	font-size: 28px;
}

.desktop_s .carouselslides {
	height: 560px;
}

.desktop_s .simplecards .roundsign {
	font-size: 80px;
	line-height: 70px;
}
.desktop_s .roundsign h1 {
	font-size: 90px;
	line-height: 90px;
	padding: 0;
}
.desktop_s .roundsign p {
	font-size: 24px;
	line-height: 22px;
	margin: 0;
	padding: 0;
}

.desktop_s .containsaudio .rcInner > div:first-of-type {
	background-position: 98% 73%;
}

.desktop_s .launchbutton a {
	display: inline-block;
	padding: 5px 8px;
	background-color: #4f92d7;
	color: #ffffff;
	font-weight: bold;
	font-size: 24px;
	text-decoration: none;
}


.desktop_s .containsaudio .rcInner > div:first-of-type:after, .desktop_s .timedslideshow .rcInner > div > div:first-of-type:after {
	width: 78px;
	padding: 6px 6px 10px 48px;
}

.desktop_s .branchingvideo, .desktop_s .interactivevideo {
}



/* Large Tablet (769px to 1024px) - precede with .tablet_l */


/* MEDIA QUERY IS A TEMPORARY FIX FOR CAROUSELS IN IE9 - REMOVE AGAIN WHEN SASS ALLOWS NESTING OF IE9 TAG? */
@media only screen 
and (max-width : 1024px) {

body {
	background-color: #666666;
}


.tablet_l .rcSection {
	width: 100%;
	height: 100%;
}
.tablet_l .rcPanel {
	font-size: 18px;
	width: 100%;
	height: 100%;
	border-radius: 0;
	box-shadow: none;
}
.tablet_l .rcModal {
	font-size: 18px;
}
.tablet_l .rcPanel .rcPanelBody {
	width: 100%;
	height: 100%;
	margin: 0;
	max-width: inherit;
}

.tablet_l .rcPanel .rcPanelBody .rcPanelBodyInner {
	padding: 50px 80px 80px 80px;
	height: 100%;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	vertical-align: inherit;
	overflow: hidden;
}

.tablet_l .unpadded { width: 100% !important; height: 100% !important; }
.tablet_l .unpadded .rcPanelBody { width: 100%; height: 0; padding-bottom: 56.25% !important; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; }
.tablet_l .unpadded .rcPanelBodyInner { width: 100% !important; height: 100% !important; position: absolute; top: 0; left: 0; padding: 0 50px !important; }



.tablet_l .fullscreen .rcPanelBodyInner {  /* should this be general? */
	padding: 0 0 !important;
}

.tablet_l .titlescreen {
	background-size: cover;
	background-color: #76b74a !important;
}
body.tablet_l.theme1 .titlescreen { background-color: #ffbc21 !important; }

.tablet_l .titlescreen .fullbackground {
	z-index: 0;
}
.tablet_l .rcPanel.titlescreen .rcPanelBody .rcPanelBodyInner {
	padding: 0px;
	height: 100%;
	width: 100%;
}
.tablet_l .titlescreen .titletext {
	position: fixed;
	background-position-x: center;
}
.tablet_l .titlescreen .titletext h1 {
	font-size: 74px;
	line-height: 74px;
}

.tablet_l .rcTitle {
	margin-top: 0px; /* changed 5th Jan 2015 from 50 px */
	margin-bottom: 50px;
	margin-left: -80px;
	max-width: 80%;
	font-size: 160%;
}
.tablet_l .unboxed .rcTitle {
	margin-top: 1%;
	top: 0;
	z-index: 1000;
	background-color: #ffffff;
	color: #333333;
}

.tablet_l .rcMenuButt:before {
	content: '';
}

.tablet_l  .rcPagination {
	 right: 0px;
	 bottom: 10px;
	 text-align: center;
	 font-size: 14px;
	 width: 100%;
	 z-index: 9;
}

.tablet_l .rcPanelBody .rcObject.rcOneThird {
	width: 32% !important;
}
.tablet_l .rcPanelBody .rcObject.rcTwoThirds {
	width: 62% !important;
}
.tablet_l .rcRightCol .rcInner {
}

.tablet_l .rcOneThird .rcInner {
	padding-top: 0px;
}
.tablet_l .rcTwoThirds .rcInner {
	padding: 0px !important;
}

.tablet_l .simplelist .rcInner > div {
	font-size: 14px;
	padding: 4px 8px 4px 28px;
}
.tablet_l .simplelist .rcInner > div b {
	font-size: 18px;
	top: 1px;
}

.tablet_l .question .rcPanelBody:before, .mobile .question .rcPanelBody:before {
	top: -50px;
	left: 10px;
}


.tablet_l .leftbox, .tablet_l .rightbox, .tablet_l .middlebox {
	margin-bottom: 12px;
}
.tablet_l .rightbox {
	margin-right: 0;
}
.tablet_l .leftbox {
	margin-left: 0;
}

.tablet_l .rcPagination + .leftbox, .tablet_l .rcPagination + .rightbox, .tablet_l .rcPagination + .middlebox, .tablet_l .rcPagination + .bigimpactbox {
	margin-top: 4%;
}
.tablet_l .longword {
	font-size: 2vw;
	line-height: 2vw;
}


.tablet_l .rightimage_big img {
	max-width: 130%;
}



.tablet_l .fullcontentimage {
	width: auto;
	height: auto;
	position: relative;
	top: inherit;
	text-align: center;
	overflow: hidden;
}
.tablet_l .fullcontentimage img, .tablet_l img.fullcontentimage {
	width: auto !important;
	max-width: 100%;
	height: auto;
	max-height: 40%;
}

.tablet_l .finalscreen .fullcontentimage {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	text-align: center;
}
.tablet_l .finalscreen .fullcontentimage:after {
	display: inline-block;
	vertical-align: middle;
	content: '';
	height: 100%;
}
.tablet_l .finalscreen .fullcontentimage .rcInner {
	display: inline-block;
	vertical-align: middle;
}
.tablet_l .finalscreen .fullcontentimage img {
	max-height: 80%;
}


.tablet_l .fullbackground .rcInner {
	width: 1px;
	height: 100%;
	position: absolute;
	left: 50%;
}
.tablet_l .fullbackground img {
	-webkit-transform: translate(-50%,0);
	height: 100%;
}




.tablet_l .yesno .middlebox { /* might need to add leftbox and rightbox at some point */
	text-align: center;
}
.tablet_l .yesnoquestion, .tablet_l .yesnomaybequestion {
	font-size: 18px;
	position: relative;
	margin: 6px auto;
	width: 80%;
}
.tablet_l .timedslideshow .yesnoquestion, .tablet_l .carouselscreen .yesnoquestion, .tablet_l .timedslideshow .yesnomaybequestion, .tablet_l .carouselscreen .yesnomaybequestion {
	position: absolute;
	margin: inherit;
	width: inherit;
}
.tablet_l .yesno .fullimage img {
	max-height: 36% !important;
}
.tablet_l .yesnoquestion a {
	font-size: 24px;
	padding: 10px 0;
	margin-top: 8px;
	width: 46%;
}
.tablet_l .yesnomaybequestion a {
	font-size: 24px;
	padding: 10px 0;
	width: 25%;
}
.tablet_l .yesnoquestion + img.fullimage, .tablet_l .yesnomaybequestion + img.fullimage {
	position: relative !important;
	top: 0;
	width: auto !important;
	min-width: 100%;
	height: auto !important;
	max-height: none;
}

.tablet_l .yesnomaybequestion + .fullimage > img {
	width: 100%;
	height: auto;
	max-width: none;
	max-height: none;
}



.tablet_l .rcCompanionPanel.carouselscreen .rcTitle {
/*	display: none; */
	z-index: 100;
	position: absolute;
	margin-top: 0 !important;
}
.tablet_l .carouselslides, .tablet_l .timedslideshow {
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	width: 98%;
	height: 78%;
}



.tablet_l .carouselslides .rcInner > div {
	padding: 25px 72px;
}
.tablet_l .carouselslides .rcInner > div > div {
	max-height: 100%;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.tablet_l .unboxed .highlighted {
	color: #ffffff;
}
.tablet_l .carouselslides .rcInner > div > div.yesnoquestion, .tablet_l .carouselslides .rcInner > div > div.yesnomaybequestion {
	padding: 10px 0;
}

.tablet_l a.previousslide, .tablet_l a.nextslide {
	width: 80px;
}
.tablet_l a.previousslide {
	background-size: 50px;
	left: 2.5%;
}
.tablet_l a.nextslide {
	background-size: 80px;
	right: 2.5%;
}


.tablet_l .simplecards .rcInner > div {
	background-color: #76b74a;
	border-radius: 0;
}
body.tablet_l.theme1 .simplecards .rcInner > div { background-color: #ffbc21; }


.tablet_l a.nextslide.nowcontinue {
	right: 0px;
}


.tablet_l .carouselslides h1 {
	font-size: 170%;
	max-width: 80%;
	line-height: 100%;
	margin-left: auto; margin-right: auto;
}
.tablet_l .simplecards h1 {
	padding-top: 0;
}
.tablet_l .carouselslides h2 {
	font-size: 150%;
	max-width: 80%;
	line-height: 130%;
	margin-left: auto; margin-right: auto;
}
.tablet_l .carouselslides p {
	font-size: 105%;
	max-width: 80%;
	margin-left: auto; margin-right: auto;
	padding: 2%;
}
.tablet_l  .carouselslides ul, .tablet_l  .carouselslides ol {
	font-size: 105%;
}
.tablet_l .carouselslides .rcInner > div :first-child.rotatedleft, .tablet_l .carouselslides .rcInner > div :first-child.rotatedright {
	margin-top: 12px;
}
.tablet_l audio {
	position: absolute !important;
}
.tablet_l .carouselslides video + img {
	display: none;
}

.tablet_l .timedscreen .rcTitle {
	display: none;
}
.tablet_l .timedslideshow .fullimage {
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	max-height: none !important;
	min-width: 100% !important;
}


.tablet_l .interactivescreen { font-size: 80%; }
.tablet_l .interactivescreen h2 { margin-top: 0% !important; margin-bottom: 1% !important; }



.tablet_l .roundsign {
	width: 40%;
	padding-bottom: 40%;
}
.tablet_l .roundsign h1 {
	font-size: 9vw;
	line-height: 8vw;
	max-width: none !important;
}
.tablet_l .roundsign p {
	font-size: 2vw;
	line-height: 2vw;
}

.tablet_l .companionlinks .rcInner div {
	display: block !important;
	margin-bottom: 12px;
}

.tablet_l .showondevices {
	display: block;
}

.tablet_l .biggertext, .tablet_l .bitbiggertext {
	font-size: 2.5vw;
}

.tablet_l .advicelink {
	background-color: #555555;
}

}

.current-tablet_l .hideontablet {
	display: none !important;
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	.tablet_l .rcTitle {
		margin-top: 50px;
		margin-bottom: 70px;
	}
	.tablet_l .unboxed .rcTitle {
		margin-top: 2%;
	}
	.tablet_l .carouselslides, .tablet_l .timedslideshow {
		margin-top: 11%;
	}
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
	.tablet_l .rcTitle {
		margin-top: 40px;
		margin-bottom: 30px;
	}
}

@media only screen 
and (max-width : 768px) {
	.tablet_l .rcPanel, .tablet_l .rcModal {
		font-size: 16px;
	}
	.tablet_l .leftbox, .mobile .rightbox, .mobile .middlebox {
		max-width: 95%;
		margin-bottom: 20px;
	}
}

@media only screen 
and (min-width : 576px) 
and (max-width : 1024px)
and (orientation : portrait) {
	

	.tablet_l .rcPanelBody .rcObject.rcLeftCol, .tablet_l .rcPanelBody .rcObject.rcRightCol {
		float: none !important;
		width: 100% !important;
	}
	.tablet_l .rcPanelBody .rcObject.rcLeftCol.circles, .tablet_l .rcPanelBody .rcObject.rcRightCol.circles {
		width: 32% !important;
	}
	.rcPanelBody .rcObject.rcLeftCol img, .rcPanelBody .rcObject.rcRightCol img {
		margin-left: auto !important;
		margin-right: auto !important;
		left: 0; right: 0;
	}
	.rcMultiChoice {
		width: 100%;
	}
	.rcRightCol img, .rcLeftCol img {
		width: auto;
		height: auto;
		max-width: 95% !important;
		max-height: 50% !important;
	}
	.rcRightCol  {
		text-align: center;
	}
	
	.rcTitle {
		font-size: 32px;
		line-height: 40px;
	}
	
	.imagetitlescreen .titletext {
	background-size: 30vw;
}

	.bottomimage, .leftimage, .rightimage, .rightimage_big, .midquestionimage {
		position:  static;
	}
	.bottomimage .rcInner, .leftimage .rcInner, .rightimage .rcInner, .rightimage_big .rcInner, .midquestionimage .rcInner {
		width: 100% !important;
		height: 50% !important;
	}
	.midquestionimage .rcInner {
		position: absolute;
		bottom: 0;
		right: 0;
	}
	.bottomimage img, .leftimage img, .rightimage img, .rightimage_big img, .midquestionimage img {
		position: absolute;
		bottom: 0;
		width: auto;
		height: auto;
		max-width: 95% !important;
		max-height: 100% !important;
		margin-left: auto;
		margin-right: auto;
		left: 0; right: 0;
	}
	.rightcornerimage img, .leftcornerimage img {
		max-width: 95%;
	}
	.rightcornerimage img, .rightimage img, .rightimage_big img {
		left: auto !important;
	}
	.leftcornerimage img, .leftimage img {
		right: auto !important;
	}
	.leftimage img, .rightimage img {
		bottom: 10% !important;
		max-height: 50% !important;
	}
	.rightimage_big img {
		max-height: 90% !important;
		max-width: 70% !important;
		top: -10px;
	}

	 .breakable a {
		 width: auto;
		line-height: auto;
	}
	.breakable.threeacross a, .breakable.fouracross a {
		max-width: 50%;
	}
	.breakable.fiveacross a {
		max-width: 33%;
	}

	.halfwidth { width: 100% !important; text-align: center; }
	.halfwidth img { width: 60%; }
	.rightcolumn { margin-left: 0; }
	.halfwidth p { margin-bottom: 0; }
	.halfwidth h2 { padding-bottom: 0; }
}




/* Mobile (below 576px) - precede with .mobile */

body.mobile {
	position: relative;
}

.mobile .rcPanel, .mobile .rcModal {
	font-size: 12px;
}
.mobile .rcPanel .rcPanelBody {
	height: auto;
	overflow: visible !important;
}
.mobile .rcPanel .rcPanelBody .rcPanelBodyInner {
	padding: 10px 60px 60px 60px;
	overflow: visible !important;
}
.mobile .titlescreen {
	background-image: none;
}
.mobile .titlescreen .titletext h1 {
	font-size: 36px;
	line-height: 36px;
}
.mobile .titletext h3 {
	line-height: 100%;
	margin-bottom: 20px;
}
.mobile .titletext h3 span {
	display: block;
}
.mobile .rcTitle {
	width: auto;
	max-width: 82%;
	padding: 6px 10px 6px 10px;
	margin: 0px 0px 20px -60px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-align: left;
	font-size: 20px;
	font-size: 160%;
	line-height: 110%;
}
.mobile .filledbox .rcTitle, .mobile .carouselscreen .rcTitle {
	top: 0;
	left: 0;
	margin-left: 0;
}
.mobile .imagetitlescreen .titletext {
	background-size: 50vw;
	background-position: center 5%;
}
.mobile .imagetitlescreen .titletext {
	text-align: center;
}
.mobile .imagetitlescreen .titletext .rcInner {
	margin-left: auto;
}
.mobile .imagetitlescreen .titletext h3 {
	font-size: 11vw;
	line-height: 11vw;
	margin-left: auto;
}
.mobile .imagetitlescreen .titletext h1 {
	font-size: 5vw;
	line-height: 5vw;
	margin-left: auto;
}

.mobile  .rcPagination {
	display: none;
}

.mobile .rcRightCol .rcInner {
	padding-top: 0px;
}
.mobile .simplelist .rcInner > div {
	font-size: 12px;
	padding: 8px 8px 8px 16px;
}
.mobile .simplelist .rcInner > div b {
	font-size: 14px;
	top: 0px;
}


.mobile .rcPanelBody .rcObject.rcLeftCol {
	float: none !important;
	width: 100% !important;
}
.mobile .rcPanelBody .rcObject.rcRightCol {
	position: relative;
	width: 100% !important;
	text-align: center;
	padding-top: 20px;
	overflow: auto;
}
.mobile .rcRightCol .rcInner {
	position: relative;
	overflow: auto;
}
.mobile .rcLeftCol img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.mobile .rcPanelBody .rcObject.rcLeftCol img, .mobile .rcPanelBody .rcObject.rcRightCol img {
	margin-left: auto !important;
	margin-right: auto !important;
	left: 0; right: 0;
	position: relative;
	width: auto;
	height: auto;
	max-width: 95% !important;
	max-height: 50% !important;
}
.mobile .bottomimage .rcInner, .mobile .leftimage .rcInner, .mobile .rightimage .rcInner, .mobile .midquestionimage .rcInner {
	width: 100% !important;
	height: 50% !important;
}

.mobile .plainspeaker {
	text-align: center;
}

.mobile .rcMultiChoice {
	width: 100%;
}

.mobile .rotatedleft, .mobile .bitrotatedleft {
	-webkit-transform: inherit;
	margin-top: inherit;
	margin-bottom: inherit;
}
.mobile .rotatedright, .mobile .bitrotatedright {
	-webkit-transform: inherit;
	margin-top: inherit;
	margin-bottom: inherit;
}

.mobile .leftbox, .mobile .rightbox, .mobile .middlebox {
	max-width: 100%;
	margin-bottom: 15px;
}
.mobile .leftbox {
	margin-left: -10px;
}
.mobile .rightbox {
	margin-right: -10px;
}

.mobile .bigimpactbox div.rcInner {
	font-size: 120%;
	width: 80%;
	margin-top: 50px;
}


.mobile .leftimage img {
	max-width: 100%;
}
.mobile .rightimage img {
	max-width: 100%;
}


.mobile img.fullcontentimage {
	max-height: none;
}

.mobile .fullscreen {
	position: inherit;
}
.mobile .fullscreen .rcPanelBodyInner {
	padding: 0 20px 60px 20px !important;
}
.mobile .fullscreen .rcTitle {
	margin-left: -20px;
}


.mobile .fullscreen .imagegrid {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 0;
}


.mobile .yesnoquestion, .mobile .carouselscreen .yesnoquestion, .mobile .carouselscreen .yesnomaybequestion, .mobile .timedslideshow .yesnoquestion, .mobile .timedslideshow .yesnomaybequestion {
	position: relative !important;
	text-align: center;
	font-size: 14px;
	line-height: 16px;
	margin-top: 12px;
	width: 100%;
}
.mobile .carouselscreen .yesnoquestion, .mobile .carouselscreen .yesnomaybequestion {
	margin-top: 0 !important;
	background: none;
}
.mobile .timedslideshow .yesnoquestion, .mobile .timedslideshow .yesnomaybequestion {
	width: 80%;
	padding: 8px;
}
.mobile .yesnoquestion div div, .mobile .yesnomaybequestion div div {
	width: 68%;
	margin-left: auto; margin-right: auto;
	padding: 8px 6px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.mobile .yesnoquestion a, .mobile .yesnomaybequestion a {
/*	background-color: #4f92d7; */
	margin-top: 4px;
}
.mobile .yesnoquestion a:hover, .mobile .yesnomaybequestion a:hover {
/*	background-color: #4175aa; */
}
.mobile .yesnoquestion + img.fullimage, .mobile .yesnomaybequestion + img.fullimage {
	position: relative !important;
	top: auto;
}


.mobile .carouselslides, .mobile .timedslideshow {
	position: fixed;
	width: 100%;
	height: 100%;
	margin-top: 0;
	margin-left: 0;
	left: 0%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 44px 2% 80px 2%;
}
.mobile .rcCompanionPanel .carouselslides {
	position: absolute;
	height: 80%;
	top: 10%;
}
.mobile .carouselslides .rcInner > div + div:after, .mobile .carouselslides .rcInner > div + div.whitestyle:after , .mobile .carouselslides .rcInner > div + div.darkstyle:after {
	content: '';
}
.mobile .carouselslides .rcInner > div > div, .mobile .carouselslides  .rcInner > div.whitestyle > div, .mobile .carouselslides .rcInner > div.darkstyle > div {
	max-width: 100%; /* Changed Dec 8th - was 90% */
	background-image: none !important;
}
.mobile .simplecards .rcInner > div {
	border-radius: 0 !important;
}
.mobile .previousslide, .mobile .nextslide {
	top: inherit;
	right: inherit;
	left: inherit;
	bottom: -60px;
	background-color: #4f92d7;
	background-repeat: no-repeat;
}
.mobile .unboxed .previousslide, .mobile .unboxed .nextslide {
	bottom: -65px;
}
.mobile a.previousslide {
	left: auto;
	right: 51%;
	background-image: url('../img/carousel_back.png');
	background-position: left center;
	border-radius: 6px 0px 0px 6px;
	opacity: 0.2;
}
.mobile div:first-of-type.replaced ~ .previousslide {
	opacity: 1;
}
.mobile .nextslide {
	left: 51%;
	background-image: url('../img/carousel_next.png') !important;
	background-position: right center;
	border-radius: 0px 6px 6px 0px;
}
.mobile div:last-of-type.displayed ~ .nextslide {
	opacity: 0.2;
}


.mobile a.previousslide, .mobile a.nextslide {
	width: 60px !important;
	height: 60px;
	background-size: 40px 40px;
}





.mobile .carouselslides .rcInner, .mobile .timedslideshow .rcInner {
	height: 100%;
	position: relative;
}
.mobile .carouselslides .rcInner > div {
	position: absolute;
	top: 0;
	padding: 12px;
}
.mobile .simplecards .rcInner > div:first-of-type {
	z-index: 1;
}
.mobile .carouselslides .rcInner > div:before {
	overflow-y: scroll !important;
}
.mobile .carouselslides .rcInner > div > div {
	position: relative;
	padding: 0;
	overflow-y: scroll !important;
}
.mobile .carouselslides .rcInner > div > div p, .mobile .carouselslides .rcInner > div > div ul, .mobile .carouselslides .rcInner > div > div h2, .mobile .carouselslides .rcInner > div > div h1 {
	padding: 3% 5%;
	line-height: 120%;
	margin: 0 0 6px 0;
	max-width: none !important;
	list-style-position: inside;
}
.mobile .carouselslides .rcInner > div > div p, .mobile .carouselslides .rcInner > div > div ul {
	font-size: 120%; /* added 5th Jan 2015 */
}
.mobile .carouselslides .leftbox, .mobile .carouselslides .rightbox, .mobile .carouselslides .middlebox {
	padding-top: 0; padding-bottom: 0;
	margin-bottom: 0;
}
.mobile .containsaudio .rcInner > div:first-of-type, .mobile .timedslideshow .rcInner > div > div:first-of-type.darkstyle:after {
	background-image: none;
}
.mobile img.fullimage {
	max-height: none;
}


.mobile .carouselslides .whitestyle {
	background-color: #4f92d7 !important;
	color: #ffffff !important;
}

.mobile .containsaudio .rcInner > div:first-of-type:after, .mobile .timedslideshow .rcInner > div > div:first-of-type:after {
	top: auto;
	bottom: 0;
	right: 0;
	width: 100%;
	font-size: 140%;
	line-height: 140%;
	text-align: center;
	background-color: #333333;
	padding: 12px 0 14px 0;
	background-position: 28% center;
	box-shadow: none;
	background-image: none;
}





.mobile .roundsign {
	border-radius: 0;
	width: 100%;
	padding-bottom: 12px;
	margin: 10px auto 0 auto;
}
.mobile .roundsign > div {
	position: relative;
}
.mobile .roundsign > div br {
	display: none;
}
.mobile .roundsign > div:before {
	content: '';
	display: none;
}
.mobile .roundsign h1 {
	font-size: 14vw;
	line-height: 11vw;
}
.mobile .roundsign p {
	font-size: 4vw;
	line-height: 4vw;
}

.mobile .roundsign span.annotation {
	position: relative;
	font-size: 2.5vw;
	right: auto;
	margin-top: 10px;
}

.mobile .circles {
	padding-top: 0 !important;
	padding-bottom: 100% !important;
	margin-bottom: 50px;
}
.mobile .circles .rcInner {
	position: absolute;
	overflow: hidden;
}
.mobile .circles .rcInner > a {
	height: 0;
}
.mobile .circles .rcInner > a > div {
	padding: 0 !important;
}



.mobile .finalscreen .fullcontentimage {
	position: fixed;
	width: 90%;
	margin-left: 5%;
}




.mobile .hideonmobile {
	display: none !important;
}


.mobile .companionlinks a {
	font-size: 150%;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-bottom: 6px;
}
.mobile .companionlinks .rcInner div {
	font-size: 120%;
}
.mobile .rcCompanionPanel {
	position: absolute !important;
	height: 100%;
}
.mobile .rcCompanionPanel, 
.mobile .rcCompanionPanel .rcPanelBody, 
.mobile .rcCompanionPanel .rcPanelBodyInner  {
	height: 100%;
}

.mobile .rcCompanionPanel .carouselscreen .rcTitle {
	top: 0px;
	margin: 0;
}


.mobile .rcCompanionPanel .rcPanelBody .rcPanelBodyInner {
	overflow-y: scroll !important;
}
.mobile .rcCompanionPanel .rcPrevButt {
	bottom: 0;
}

.mobile .rcTrueFalse .rcOption {
	margin-bottom: 6px;
}
.mobile .rcTrueFalse .rcOptionText {
	min-width: 60px !important;
}


.mobile .articlescreen .rcPanelBody {
	height: 100%;
}
.mobile .articlescreen iframe {
	width: 100%;
	margin-left: 0%;
}


.mobile .interactivevideo {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
}
.mobile .interactivevideo:before {
	display: inline-block;
	vertical-align: middle;
	content: '';
	height: 100%;
}
.mobile .interactivevideo .rcInner {
	display: inline-block;
	vertical-align: middle;
	width: 100%;
}
.mobile .interactivevideo .rcInner video {
	width: 100%;
}
.mobile .interactivevideo video ~ video {
	bottom: 0;
	margin: auto;
}

.mobile .halfwidth, .mobile .twothirdswidth, .mobile .onethirdwidth {
	width: 100% !important; text-align: center;
}
.mobile .rightcolumn {
	margin-left: 0;
}

.mobile .quotestyle {
	-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
}
.mobile .quotestyle:before, .mobile .quotestyle:after {
	content: none;
}

.mobile .biggertext, .mobile .bitbiggertext {
	font-size: 2.5vw;
}

.mobile .interactivescreen { font-size: 90%; }
.mobile .interactivescreen .screentitle { font-size: 200%; }



@media only screen 
and (max-width : 576px) 
and (orientation : portrait) {
	.mobile .rcTrueFalse {
		margin-left: 0 !important;
	}
	.mobile .formlist {
		padding-left: 0;
	}
	.mobile .rcPanelBody .rcObject.rcTwoThirds {
		width: 100% !important;
	}
	.mobile .factoid h3 {
		font-size: 360%;
	}

}