@viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-webkit-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@-khtml-viewport { width: device-width; }

html, body, div, span, object, iframe, h1, h2, h3, p, blockquote, pre, a, code, img, small, strike, strong, sub, sup, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, canvas, embed, footer, header, menu, nav, section, article, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
header, hgroup, menu, nav, section {  display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table {
	border-collapse: collapse;
	border-spacing: 0;
}

.clearfix {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}
.clearfix:after {
    clear: both;
    content: '';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
}

* html .clearfix,
*:first-child+html .clearfix {
    zoom: 1;
}

html, body {
	height: 100%;
	min-width: 320px;
	text-align: center;
	/*overflow-x:hidden;*/
	
	-webkit-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-select: none; user-select: none;
}

IFRAME { border:none; overflow:hidden; background-color: transparent; }
OL, UL, LI { list-style:none; margin: 0; padding: 0; display:block; float:left; }



/* ================================================================== */

:target::before {
  content: "";
  display: block;
  height: 100px; /* fixed header height*/
  margin: -100px 0 0; /* negative fixed header height */
}

body {
	font-family:'Cantarell', 'Arial','Trebuchet MS','Lucida Sans','Tahoma','Helvetica','sans-serif';
	font-size: 14px;
	font-weight: 400;
	color: #004433;
	letter-spacing: -0.2px;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	background-color: #dddddd;
	transition: 0.5s all; -webkit-transition: 0.5s all; -o-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; transition-delay: 0s;
}

/*
::-webkit-scrollbar { 
display: none; 
}
*/

DIV { line-height:1.3em; }

blockquote {
    font-family: Georgia, serif;
    position: relative;
    margin: 0.3em 0.3em 1em 0.3em;
    padding: 0.5em 2em 0.5em 3em;
}
/* Thanks: http://callmenick.com/post/styling-blockquotes-with-css-pseudo-classes */
blockquote:before {
    font-family: Georgia, serif;
    position: absolute;
    font-size: 5em;
    line-height: 1;
    top: 0;
    left: 0;
    content: "\201C";
}
blockquote:after {
    font-family: Georgia, serif;
    position: absolute;
   /* display: block; don't use this, it raised the quote too high from the bottom - defeated line-height? */
    float:right;
    font-size:5em;
    line-height: 1;
    right:0;
    bottom:-0.5em;
    content: "\201D";
}
blockquote footer {
    padding: 0 2em 0 0;
    text-align:right;
}
blockquote cite:before {
    content: "\2013";
}

HR {height:1px;width:30%;border: 1px solid #006666;margin-top:5px;margin-bottom:5px;}

.nowrap {white-space:nowrap;}
.UserSelectable { user-select: text; -webkit-user-select: text; -moz-user-select: text; -o-user-select: text; -ms-user-select: text; }
.HideOnDesktop { display: none; }
.HideOnTablet { display: inline; }
.HideOnPhone { display: inline; }

#cookiewarn {
	position: absolute;
	top: 88px;
	width: 100%;
	margin-top:0em;
	padding: 0;
	font-size:0.9em;
	text-align:center;
	color: #e8e8e8;
}

.cookielink {
	text-decoration: underline;
	color: inherit;
	cursor: pointer;
}

#Page { position: absolute; top: 0px; width: 100%; text-align: left;}

.QLogo { /*use class as there's a loader with same size*/
    display: none; cursor: pointer;
    z-index:200; position: fixed;
    top: 0; left: 0;
	width: 203px; height: 161px; /*was width: 290px; height: 230px;*/
	background-size :100% 100%;
	-webkit-transition: width 1s; -moz-transition: width 1s; -o-transition: width 1s; -ms-transition: width 1s; transition: width 1s; 
}

#QLogo.compact {
	width: 116px; height: 92px;
}

.QLogo IMG { max-width: 100%; }

#Menu_Button {
	display: none;
	cursor: pointer;
	z-index:200; position: fixed;
	top: 64px; left: 14px;
	width: 18px; height: 12.5px;
	overflow: hidden; 
	margin: 0; padding: 0;
	line-height: 0;
	border-radius: 3px;
	/*border: 1px outset #226969; */
}

#Menu_Button:hover {
	border: 2px outset rgba(127,127,127,1);
	box-shadow: 1px 1px 2px #CCCCCC;
}

#LogoText {
    top:12px; left:50%;
    min-width: 12em; 
    margin-left: -7.6em;
    line-height: 2.2em;
	display:inline-block;
	z-index:200;
	position:fixed;
	padding: 0 1.2em;
	text-align:center;
	min-height: 4.1em; 
    cursor: pointer;
    background: #901010;
	border-radius: 4px;
    color: #ffffff;
	text-shadow: 0 1px 0 #000000; 
	border: 3px inset rgb(97, 122, 125);
	-webkit-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-select: none; user-select: none;
}

.LogoText_Line1 {font-size: 1.8em; font-weight: 400; margin: 0 0 2px 0; }
.LogoText_Line2_Holder {position: relative; top: 0; font-size: 1.1em;}
.LogoText_Line2 {font-size: 0.01em; font-weight: 400; margin: 0; position: absolute; top: 0; width: 100%; opacity: 0.1;}


#MastheadBG {
	display: inline;
	z-index: 190;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 138px;
	-webkit-transition: height 1s; -moz-transition: height 1s; -o-transition: height 1s; -ms-transition: height 1s; transition: height 1s; 
}

#MastheadBG.compact {
	height: 100px; /*If you change this, change #PageContent top*/
}

#MastheadBG_Upper {
	height: 90%;
	background-color: #226969;
}

#MastheadBG_Lower {
	height: 5%;
	background: linear-gradient(to bottom,rgba(34,105,105,1)0,rgba(240,240,240,0)40%); /*#226969 to #f0f0f0*/
	background: -webkit-linear-gradient(top,rgba(34,105,105,1)0,rgba(240,240,240,0)40%);
	background: -moz-linear-gradient(top,rgba(34,105,105,1)0,rgba(240,240,240,0)40%);
	background: -o-linear-gradient(top,rgba(34,105,105,1)0,rgba(240,240,240,0)40%);
	background: -ms-linear-gradient(top,rgba(34,105,105,1)0,rgba(240,240,240,0)40%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#226969', endColorstr='#00f0f0f0', GradientType=0);
}

#FooterHolder {
	z-index: 200; position: fixed;
	bottom: 0; left: 0; width: 100%; height: 4.8em;
	/*top: 0; height: 100%; min-height: 100%;*/
}

.FooterBG {
	z-index: 200; position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 100%;
}

#Footer_Grad {
	position: relative;
	height: 1em;
	/*background: linear-gradient(to bottom,rgba(240,240,240,0)60%,rgba(34,105,105,1)100%);
	background: -webkit-linear-gradient(top,rgba(240,240,240,0)60%,rgba(34,105,105,1)100%);
	background: -moz-linear-gradient(top,rgba(240,240,240,0)60%,rgba(34,105,105,1)100%);
	background: -o-linear-gradient(top,rgba(240,240,240,0)60%,rgba(34,105,105,1)100%);
	background: -ms-linear-gradient(top,rgba(240,240,240,0)60%,rgba(34,105,105,1)100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#226969', GradientType=0);*/
}

#FooterOuter {
	position: relative;
	/*overflow-scrolling: touch;*/
	background-color: #226969;
	color: #FFFFFF;
	text-shadow: 0 1px 0 #000000;
	font-size: 1.03em;
	padding-bottom: 1em;
}

#FooterInner { /*affects Contact on Bottom left*/
	padding: 0.2em 1em 0 1em;
	height: 100%;
	border-top: 2px outset rgba(255,255,255,0.1);
}

#ContactDeets {
	left: 0.5em; top: 0.5em; text-align: left;
	line-height: 1.2em;
}

#ContactBtn {
	background-color:#CC4444; border-radius: 8px 8px 8px 8px; text-align: center;
	cursor: pointer;
	border-bottom: 2px outset rgba(255,255,255,0.1); border-right: 2px outset rgba(255,255,255,0.2);
	position: absolute; padding: 0.1em 1em 0.3em 1em;
	left: 50%; margin-left: -6em;
	top: 1em; line-height: 1.3em;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#aa2222), to(#992222));
	background: -webkit-linear-gradient(#cc4444, #992222);
	background: -moz-linear-gradient(#cc4444, #992222);
	background: -ms-linear-gradient(#cc4444, #992222);
	background: -o-linear-gradient(#cc4444, #992222);
	background: linear-gradient(#cc4444, #992222);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aa2222', endColorstr='#770000',GradientType=1 );
	-webkit-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-select: none; user-select: none;
}

.ContactFormHolder {
	display: inline-block; overflow-x: wrap;
	min-height: 16em;
	margin: 0;
	padding-top: 3em;
	font-variant: small-caps;
	vertical-align: middle;
}

#ContactForm.response {
	font-size: 1.4em; text-shadow: #000080 0 1px; padding-top: 2em; min-height: inherit;
}


.ContactFormFieldLabel {
	display: inline-block; overflow: hidden;
	height:1.3em; font-size: 1.2em;
	margin: 0.1em 0; padding: 0;
	width: 7.5em;
	border: 1px inset rgb(160,32,32);
	border-radius: 6px 0 0 6px;
	text-align: center;
	vertical-align: top;
	background-color: #2f6254;
	color: #ffffff;
}

.ContactFormFieldButton {
	cursor:pointer;
	display: inline-block; overflow: hidden;
	height:1.5em; font-size: 1.2em;
	margin: 1em 0 0 0;
	width: 7.5em;
	text-align: center;
	vertical-align: top;
	border-radius:8px;
	border: 1px inset rgb(160,32,32);
	padding: 2px; /*padding facilitates border enlargement on hover*/
	background-color: #2f6254;
	color: #ffffff;
}

.ContactFormFieldButton:hover {
	border: 3px inset rgb(160,32,32);
	padding: 0; /*padding facilitates border enlargement on hover*/
	background-color: rgba(74,138,202,1);
}

.ContactFormFieldEntry_Multiline {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    color: #000000;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    overflow: auto;
    resize: both;
    margin: 0.1em 0.5em 0.1em 0;
    padding: 0 0.5em;
    width: 14em;
    border-radius: 0 6px 6px 0;
	height: 6em;
    vertical-align: top;
}

.ContactFormFieldEntry {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    background-color: white;
    background-color: -moz-field;
    color: #000000;
    border: 1px solid darkgray;
    border-radius: 0 6px 6px 0;
	box-shadow: 1px 1px 1px 0 lightgray inset;  
    font: -moz-field;
    font: -webkit-small-control;
    margin: 0.1em 0.5em 0.1em 0;
    padding: 0 0.5em;
    width: 14em;
    height: 1.6em;
    vertical-align: top;
}

.ContactFormMsg {
	cursor:pointer;
	display: inline-block;
	font-size: 1.3em;
	margin: 1em 0 0 0;
	max-width: 80%;
	text-align: center;
	vertical-align: top;
	border-radius:8px;
	border: 3px ridge rgb(97, 122, 125);
	padding: 0.5em;
	background-color: #920000;
	background: linear-gradient(#ce0505, #920000);
	color: #ffffff;
}

#SocialMediaStuff {
	opacity: 0.001; filter: alpha(opacity=1);
	position: absolute; line-height: 0.6em; font-size: 0.9em;
	right: 1em; top: -0.2em;
}

#PageContent {
	z-index: 100; 
	position: absolute; 
	top: 90px; /*make this MastheadBG.compact - 10*/
	margin: 0 auto;
	padding: 50px 0 0 0;
	width: 99.6%;
	max-width: 99.6%;
	/*Padding bottom must match 'top' offset*/
}

.PageBG {
	position: fixed; top:0; left:0; width:100%; height:100%; min-height:100%;
	overflow: hidden; z-index: -10; margin: 0; padding: 0; display: inline;
	-webkit-animation: fadein 2s; -moz-animation: fadein 2s; -o-animation: fadein 2s; -ms-animation: fadein 2s; animation: fadein 2s; 
    background-color: #e6dcdc;
    background: linear-gradient(to bottom right, #ffffff, #9e9e9e);
    background: -webkit-linear-gradient(to bottom right, #ffffff, #9e9e9e);
    background: filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='#ffffff', endColorstr='#9e9e9e', GradientType=1);
    /* background-image: url("//qsonicsmedia.s3.eu-west-2.amazonaws.com/bg/QsBack_Skyline2.jpg"); */
   	background-position: center bottom; /*Positioning*/
   	background-repeat: no-repeat; /*Prevent showing multiple background images*/
   	background-size: cover;
}


#SwitchTo {
	opacity:0.001; filter: alpha(opacity=1);
	z-index: 200; position:fixed; top: 0; right: 0; text-align: center;
	font-size: 0.84em; padding: 0.7em 1.6em 0.8em 1.2em;
	background-color: #141414; background-color:rgba(20,20,20,0.3); 
    color: #ffffff;
	border-left: 3px outset rgba(255,255,255,0.1); border-bottom: 4px outset rgba(255,255,255,0.1);
	border-radius: 0 0 0 5px;
	border-style: hidden;
	cursor: pointer;
}

.SectionHeading {
	text-align: center; color: white;
	padding: 2.5em 0 0em 0;
	text-shadow: #000 0 1px;
	font-variant: small-caps;
	cursor: pointer;
}

.SectionHeading h2 {
	text-shadow: 0 1px 0 #000000; 
	background-color: #0f4234;
	font-size: 2.4em;
	padding: 0.2em 0 0.4em 0;
	margin: 0 0 0 1%;
}

.SectionHeading h3 {
	background-color: rgba(24, 51, 29, 0.22);
	color: #2a702a;
	text-shadow: 0 1px 0 #000000; 
	font-size: 1.8em;
	margin: 0 0 0.5em 1%;
	padding: 0.2em 0 0.3em 0;
}

/*\2014 = —
.SectionHeading h3:before {content:"\2014 \00a0";}
.SectionHeading h3:after {content:"\00a0 \2014";}
*/

.SectionHeading p {
	font-size: 1.2em;
	margin: 0 20%;
}

.SectionBody {
	text-align: center;
	counter-reset: section;
}

.whitelink {
	color: white;
	text-decoration: none;
}

.whitelink:hover {
	color: white;
	text-decoration: underline;
}

.HeadedBox {
	/*width: 85%;*/
	min-width: 320px;
	max-width: 1200px;
	margin: 1em auto;
	padding: 0.3em 0.5em;
	text-align: left;
	vertical-align: top;
	font-size: 1.1em;
	line-height: 1.5em;
	color: #ffffff;
	border: 1px outset #555;
	text-shadow: #000 0 1px;
    box-shadow: 5px;
	background-color: #485048;
    background: linear-gradient(to bottom right, #56716e, #22384e);
    background: -webkit-linear-gradient(to bottom right, #56716e, #22384e);
    background: filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='#56716e', endColorstr='#22384e', GradientType=1);
}

.HeadedBox p {
	vertical-align:top; overflow: visible; padding: 0.1em 0.3em;
}

.HeadedBox a {
	border-bottom: 1px #FFFFFF dotted;
	color: #ffffff;
	text-decoration: none;
}

.HeadedBox:hover {
	background-color: rgba(42, 93, 144, 0.9);
	color: #ffffff;
	transition: background-color 3s;
}

.RedBox {
	background-color: #7f0000;
	background-color: rgba(128, 0, 0, 0.4);
	color: #ffffff;
}

.BlackBox {
	background-color: #000000;
	background-color: rgba(0, 0, 0, 0.8);
	color: #ffffff;
	}

.BlackBox p {
	font-size: 0.8em;
	}

.PhotoFrameLeft {
	float: left;
	margin: 0 1em 1em 0.5em; 
	padding: 0.2em 0.2em 0 0.2em; 
	background-color:#AA4444; 
	background-color:rgba(170, 68, 68, 0.8); 
	border-radius: 5px;
}

.PhotoFrameRight {
	float: right;
	margin: 0 0.5em 1em 1em; 
	padding: 0.2em 0.2em 0 0.2em; 
	background-color:#AA4444; 
	background-color:rgba(170, 68, 68, 0.8); 
	border-radius: 5px;
}

.StandOut1 {
	text-shadow: 0px 1px 0px #ffffff;
}

.TopLine {
	width: auto;
	text-align: center;
	margin: 0;
}

.TopLine h2 {
	font-size: 1.45em; vertical-align: baseline;
    color: #aa2200;
    text-shadow: #000 0 1px;
	margin: 0;
	line-height: 2em;
	font-variant: small-caps;
}

.IntroPanel {
    display: block;
	width: 85%;
	min-width: 320px; max-width: 1000px;
	margin: 0 auto;
	padding: 1em 0;
	text-align: center;
	vertical-align: top;
	overflow-x: wrap;
	font-size: 1.1em;
	color: #f4f4f4;
    text-shadow: #b0c0b0 0 1px;
	font-variant: small-caps;
}

.IntroSet {
	display: inline-block;
	position: relative;
	min-height: 10em;
	text-align: left;
	vertical-align: top;
}

.IntroBox {
	display: block;
	width: 230px;
	background-color: #4080C0;
	background-color: rgb(64,128,192);
	background-color: rgba(64,128,192,0.001);
	-webkit-transition: background-color 1s; -moz-transition: background-color 1s; -o-transition: background-color 1s; -ms-transition: background-color 1s; transition: background-color 1s;
	border: 2px ridge #ffffff;
	margin: 0.5em 0.4em;
	padding-bottom: 0.5em;
	cursor: pointer;
}

.IntroBoxAddBG {
	background-color: #ffffff;
}

.IntroBox:hover {
	background-color: rgba(202,202,202,0.7);
	border: 2px ridge #aa2200;
}

.IntroBoxIcon {
	position: absolute;
	top: auto; left: auto;
	bottom: 0; right: 0;
	width: 20%; height: 20%;
	padding-top: 10%;
	background-size: 60% 60%;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0.6;
	transition: all 2s ease 0s;
}

.IntroBoxIcon_Big {
	bottom: -30px; right: 0;
	width: 100%; height: 100%;
	padding-top: 10%;
	opacity: 0.1;
}

.IntroBox h2 {
    font-size: 1.2em;
    /*
    background-color: #442222;
    background: -webkit-gradient(linear, left center, right center,
                               color-stop(0, rgb(96,0,0)),
                               color-stop(0.40, rgb(160,32,32)),
                               color-stop(0.60, rgb(160,32,32)),
                               color-stop(1, rgb(96,0,0)));
    background: gradient(linear, left center, right center,
                               color-stop(0, rgb(96,0,0)),
                               color-stop(0.40, rgb(160,32,32)),
                               color-stop(0.60, rgb(160,32,32)),
                               color-stop(1, rgb(96,0,0)));
    background: linear-gradient(left center, rgb(96,0,0), rgb(160,32,32), rgb(96,0,0));
    */
    color: #ffffff;
    background-color: #0f4234;
    background: -webkit-gradient(linear, left center, right center,
                               color-stop(0, rgb(35,86,72)),
                               color-stop(0.40, rgb(15,66,52)),
                               color-stop(0.60, rgb(15,66,52)),
                               color-stop(1, rgb(0,0,0)));
    background: gradient(linear, left center, right center,
                               color-stop(0, rgb(35,86,72)),
                               color-stop(0.40, rgb(15,66,52)),
                               color-stop(0.60, rgb(15,66,52)),
                               color-stop(1, rgb(0,0,0)));
    background: linear-gradient(left center, rgb(35,86,72), rgb(15,66,52), rgb(0,0,0));
    text-align: center;
    vertical-align: baseline;
    text-shadow: #000 0 1px;
    box-shadow: 0.2em;
    padding: 0.2em;
    margin: 0 0 0.3em 0;
    border-bottom: 1px solid #ddd;
    border-radius: 4px;

}

/*\2026 = …*/

.IntroBox h3 {
	padding: 0 0.5em;
	color: #000000;
    font-size: 1.1em;
    text-align: left;
	font-weight: normal;
	text-shadow: 1px 1px 0 #ffffff;
	transition: color 2s;
}

.IntroBox h4 {
	margin: 0.5em 0;
	padding: 0 0.5em;
    color: #006633;
    font-size: 0.97em;
    line-height:1.2em;
    text-align: left;
	font-weight: normal;
	text-shadow: 0 1px 0 #0000007a;
	transition: all 2s;
}

.IntroBoxPointer {
	text-align:right;
	position: absolute;
	bottom: 0.7em;
	right: 1.4em;
	line-height: 1em;
	font-size:1.2em;
	display: none;
}

/*.IntroBox h3:after {content: "\2026";}*/
/*.IntroBox h3:after {content: "\0020\00A0\21D2";}*/

.Slogan {
	line-height: 1.6em;
}

.Slogan h2 {
	font-size:1.4em;
	text-align: center;
	margin: 0.5em 0;
	color: #aa2200;
	text-shadow: #aa2200 0 1px;
}

.QParaSep {
	width: 100%;
	margin-top: 2em;
	line-height:2em; text-align: center; vertical-align: middle;
}

.QParaSep IMG { max-width: 60%; }

.ProjectBoxHolder {
	float: left;
	margin: 0 auto 1em auto;
	padding: 0 1em 1em 1em;
	text-align: center;
	width: 46%; min-width: 290px;
}

.ProjectBox {
	display: inline-block;
	margin: 0 auto;
	padding-bottom: 1em;
	vertical-align: top;
	width: 100%; min-width: 100%;
	overflow: hidden;
	border: 2px solid #fff;
	background-color: #1E2A2A;
	background-color: rgba(30, 42, 42,0.6);
	box-shadow: 3px inset rgb(97, 122, 125);
	text-align: center;
	color: #ffffff;
}

.ProjectBox:hover {
 	border-left: 2px dotted #888888; border-right: 2px dotted #888888;
 	background-color: #002240;
	background-color: rgba(0, 34, 64, 0.5);
}

.ProjectBox h3 {
	font-size: 1.1em;
	    /*
    background-color: #442222;
    background: -webkit-gradient(linear, left center, right center,
                               color-stop(0, rgb(96,0,0)),
                               color-stop(0.40, rgb(160,32,32)),
                               color-stop(0.60, rgb(160,32,32)),
                               color-stop(1, rgb(96,0,0)));
    background: gradient(linear, left center, right center,
                               color-stop(0, rgb(96,0,0)),
                               color-stop(0.40, rgb(160,32,32)),
                               color-stop(0.60, rgb(160,32,32)),
                               color-stop(1, rgb(96,0,0)));
    background: linear-gradient(left center, rgb(96,0,0), rgb(160,32,32), rgb(96,0,0));
    */
    color: #ffffff;
    background-color: #0f4234;
    background: -webkit-gradient(linear, left center, right center,
                               color-stop(0, rgb(35,86,72)),
                               color-stop(0.40, rgb(15,66,52)),
                               color-stop(0.60, rgb(15,66,52)),
                               color-stop(1, rgb(0,0,0)));
    background: gradient(linear, left center, right center,
                               color-stop(0, rgb(35,86,72)),
                               color-stop(0.40, rgb(15,66,52)),
                               color-stop(0.60, rgb(15,66,52)),
                               color-stop(1, rgb(0,0,0)));
    background: linear-gradient(left center, rgb(35,86,72), rgb(15,66,52), rgb(0,0,0));
    text-align: center;
    vertical-align: baseline;
    text-shadow: #000 0 1px;
    box-shadow: 0.2em;
    padding: 0.2em;
    margin: 0 0 0.3em 0;
    border-bottom: 1px solid #ddd;
    border-radius: 4px;

}

.ProjectBox a { color: #ffffcc; font-weight: 800; }

.ProjectText {
	/*width:95%;*/
	vertical-align: top;
	padding: 0.2em 0 0.1em 0;
	text-align: left;
	font-size: 1em;
}

.ProjectText p {
	padding-left: 0.7em;
	padding-right: 0.7em;
}

.ProjectMedia {
	float: none;
	min-width: 320px; min-height: 180px;
	vertical-align: top;
	padding-right: 1em;
	margin: 0.5em auto 0 auto;
}

.ProjectMediaCaption {
	width: 310px;
	/*then, for really narrow devices, no overflow*/
	max-width: 90%;
	margin: 0.5em auto;
	color: #e6e6fa;
}

.ProjectVideoHolder
{
position: relative; width: 100%; height: 100%; margin: 0 auto 1em auto;
}

.ProjectVideoInnerHolder
{
width: 100%; height: 100%; 
background: rgb(170, 34, 0);
background-size: contain;
background-repeat: no-repeat;
border: #aa2200 2px ridge;
margin: 0 auto; padding: 0;
box-shadow: 2px 2px 4px #aa2200;
cursor: pointer;
}

.ProjectVideoStatus
{
	position: absolute; bottom: 0; right: 0;
	font-size: 1.2em; overflow: hidden; text-align: right;
	margin: 0 auto; padding: 2% 2%;
	text-shadow: 2px 2px 0 #000000;
	color: #ffffff;
	cursor: pointer;
}

.ProjectVideoObject
{
	margin:0; padding:0; border:0; width: 100%;
}

.ProjectAudioHolder
{
	position:relative;
	width: 310px; /* don't specify height - default vary massively! Let it be dynamic */
	margin: 0 auto;
	padding: 0;
}

.ProjectAudioInnerHolder {
	width: 100%;
	min-height: 2em;
}

.ProjectAudioHolder audio {
	width:100%; border:0px; margin: 0 auto;
}

.ProjectAudioStatus
{
	position: absolute;
	font-size: 1.2em;
	width: 100%;
	height: 1.4em;
	margin: 0 auto; padding: 0 5px;
	background-color: rgba(170,34,34,0.3); color: #ffffff;
	cursor: pointer;
}

.ProjectYouTubeHolder
{
	position: relative; width: 100%; height: 100%; margin: 0 auto;
}

.ProjectYouTubeCover
{
	z-index: 102;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	/* background size V was 118%, but that stretched it */
	background-repeat: no-repeat;
	background-position: 0px;
	cursor: pointer;
}

.YTDIV {
	position: absolute; top: 0; left: 0; 
	z-index: 101; 
	display: none;
}

.ProjectImageHolder
{
	width: 310px;
	margin: 0 auto;
	padding: 0;
	cursor: pointer;
}

.ProjectImagePrompt
{
	font-size: 0.85em; overflow: hidden; text-align: right; margin: 0 auto;
}

.ImgExpand {
	z-index:10001;
	opacity: 0;
	position: fixed;
	left: 0; top: 0;
	width: 100%; height: 100%;
	background-color: #000000;
	transition: opacity 1s;
	cursor: pointer;
}

.ImgExpandImg {
	z-index:10002;
	position: fixed;
	left: 5%; top: 5%;
	width: 90%; height: 90%;
	background-repeat: no-repeat; background-position: center; background-size: contain; background-origin: content-box;
	cursor: pointer;
}

.ImgExpandClosePrompt {
	z-index:10003;
	position: fixed;
	right: 0; top: 0;
	font-size: 1.6em;
	text-align: center;
	padding: 0 1em;
	background-color: #ffffff;
	color: #000000;
}

.ProjectExtLink {
	width: 100%;
	text-align: center;
}

.ProjectExtLink button {
	width: 90%;
	margin: 0.5em auto 1em auto;
	padding: 3px 4px;
	background-color: #705588;
	color: #eeeeee;
	border-radius: 6px;
	border: 1px inset #777777;
	line-height: 1.3em;
	cursor: pointer;
}

.ProjectExtLink button:hover {
	margin-top: 6px;
	margin-bottom: 11px;
	padding-top: 2px;
	border: 3px inset #ffffff;
}

.AudioHolder
{
	position:relative;
	width: 310px; 
	margin: 1em auto 0.5em auto;
	padding: 0;
}

.AudioHolder audio {
	width:100%; border:0px; margin: 0 auto;
}

.SoundCloud_SmallHolder {
	text-align: center;
	width: 100%;
}

.SoundCloud_SmallHolder IFRAME {
	width: 80%;
	height: 20px;
	padding: 0.5em 1em 0.5em 1em;
	border-radius: 5px;
	background-color: #FFF4F4; /*compatibility*/
	background-color: rgba(255, 54, 54, 0.28);
	margin: 1em auto;
}

.tightpara {
	line-height: 1.45em;
	font-size: 0.85em;
}

.phonesep {
	/*applies to phone only*/
}

.DrewWhite {
	font-size:48px;
	color:#fff;
	text-shadow:0 1px 0 #ccc,0 2px 0 #c8c8c8,0 3px 0 #c0c0c0,0 4px 0 #b8b8b8,0 5px 0 #999,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);
}

.vertbar_or_wrap {
	display: inline;
	white-space: nowrap;
}

.vertbar_or_wrap:after {
	content: ' | ';
}

.space_or_wrap {
	display: inline;
	white-space: nowrap;
}

.space_or_wrap:after {
	content: ' ';
}

/* ******2 PROJECT COLUMNS beyond 768px****** */
/*
@media only screen and (min-width: 769px) and (max-width: 1159px) { 
	.SectionBody article:nth-of-type(2n+3)  .ProjectBoxHolder {
		clear: both;
	}
}
*/

/* ******RESTRICT WIDTH TO 1240******
NOT WORKING
@media only screen and (min-width: 1240px) {
	html {
		width: 1240px;
		max-width: 1240px;
		text-align: left;
		margin: auto;
	}
}
 */


@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media all and (-ms-high-contrast:none) {
	.IntroPanel {font-size: 1em;}
}

/* ************                                                                                 ************ */
/* ************    888888888888   db        88888888ba  88          88888888888 888888888888    ************ */
/* ************         88       d88b       88      "8b 88          88               88         ************ */
/* ************         88      d8'`8b      88      ,8P 88          88               88         ************ */
/* ************         88     d8'  `8b     88aaaaaa8P' 88          88aaaaa          88         ************ */
/* ************         88    d8YaaaaY8b    88""""""8b, 88          88"""""          88         ************ */
/* ************         88   d8""""""""8b   88      `8b 88          88               88         ************ */
/* ************         88  d8'        `8b  88      a8P 88          88               88         ************ */
/* ************         88 d8'          `8b 88888888P"  88888888888 88888888888      88         ************ */
/* ************                                                                                 ************ */
/*  MAX WIDTH: 768px  */
@media only screen and (min-width: 521px) and (max-width: 768px) {
.HideOnDesktop { display: inline; }
.HideOnTablet { display: none !important; }

.QLogo { /*use class as there's a loader with same size*/
width: 174px; height: 138px;
background-size: 100% 100%;
}

#Menu_Button {
	top: 46px; left: 126px;
	font-size: 1em;
}

#LogoText {
font-size: 0.9em;
top: 10px; left:50%; width:14em; min-width: 12em; margin-left: -7.8em; line-height: 2em;
}

#MastheadBG {
  height:128px;
}

#MastheadBG.compact {
	height: 90px; /*If you change this, change #PageContent top*/
}

#cookiewarn {
	top: 82px;
}

#PageContent {
	z-index: 100;
	position: absolute;
	top: 80px; /*make this MastheadBG.compact - 10*/
	left: 0px;
	max-width: 98%;
	padding: 54px 0 0 0;
}

#SwitchTo {
    font-size: 1em; padding: 0.45em 0.9em 0.45em 0.7em;
}

.SectionHeading h2 {
	box-shadow: 5px;
	border-radius: 6px;
	font-size: 1.5em;
	padding: 0.3em 0 0.5em 0;
	margin: 0.5em 0;
}

.SectionHeading h3 {
	font-size: 1.2em;
	line-height: 1.2em;
	margin-bottom: 0.5em;
}

.SoundCloud_SmallHolder IFRAME {
	width: 90%;
	height: 20px;
	padding: 0.5em 0.5em 0.5em 0.3em;
}

.ProjectBoxHolder {
	width: 98%; min-width: 290px;
}

.ProjectBox h3 {
	text-align: center;
	font-size: 1em;
}

.ProjectText {
	float: left;
	width: 95%;
	font-size: 1em;

}

.ProjectMedia {
	float: none;
	display: inline-block;
	/*margin: 2em auto;*/
	margin: 0 auto;	
	min-width: 304px;
}

#FooterOuter {
  font-size: 1em;
}

#FooterInner {
  padding: 0.3em 1em 0 0.8em;
  border-radius: 10px 10px 0 0;
}

#ContactDeets {
	margin-top: 0.2em;
}

#ContactBtn {
	margin-left: -1em;
}

#SocialMediaStuff {
	position: absolute; line-height: 0.6em; font-size: 0.9em;
	text-align: right; right: 0.5em; top: 4px;
}

.DownArrowRow { 
	margin-top: 0em;
	font-size: 1.2em;
}

.vertbar_or_wrap {
	display: block;
}

.vertbar_or_wrap:after {
	content: '';
}

.space_or_wrap {
	display: block;
}

.space_or_wrap:after {
	content: '';
}

} /*END OF TABLET MEDIAQUERY*/

/* ************                                                                        ************ */
/* ************    88888888ba  88        88   ,ad8888ba,   888b      88 88888888888    ************ */
/* ************    88      "8b 88        88  d8"'    `"8b  8888b     88 88             ************ */
/* ************    88      ,8P 88        88 d8'        `8b 88 `8b    88 88             ************ */
/* ************    88aaaaaa8P' 88aaaaaaaa88 88          88 88  `8b   88 88aaaaa        ************ */
/* ************    88""""""'   88""""""""88 88          88 88   `8b  88 88"""""        ************ */
/* ************    88          88        88 Y8,        ,8P 88    `8b 88 88             ************ */
/* ************    88          88        88  Y8a.    .a8P  88     `8888 88             ************ */
/* ************    88          88        88   `"Y8888Y"'   88      `888 88888888888    ************ */
/* ************                                                                        ************ */
/* MAX WIDTH: 620px (was 520) */


@media only screen and (min-width: 0px) and (max-width: 620px), screen and (min-height: 0px) and (max-height: 620px) { /*phone in either orientation*/

:target::before {
  content: "";
  display: block;
  height: 80px; /* fixed header height*/
  margin: -80px 0 0; /* negative fixed header height */
}


.HideOnDesktop { display: inline; }
.HideOnPhone { display: none !important; }

.QLogo { /*use class as there's a loader with same size*/
	left: 0px; top: 2px;
	width: 87px; height: 69px;
	background-size :100% 100%;
}

#QLogo.compact {
	width: 72.5px; height: 57.5px;
}

#Menu_Button {
	top: 43px; left: 10px;
	border: none;
}

#LogoText {
font-size: 0.7em;
min-height: 3.8em; 
top: 8px; left: 50%; line-height: 1.8em;
margin-left: -8em;
}

#MastheadBG {
  height:96px;
}

#MastheadBG.compact {
	height: 72px; /*If you change this, change #PageContent top*/
}

#cookiewarn {
	top: 60px;
	font-size: 0.8em;
}

#PageContent { 
	z-index: 100; 
	position: absolute;
	top: 62px; /*make this MastheadBG.compact - 10*/
	margin: 0 auto;
	width: 100%;
	text-align: left;
	padding: 26px 0 2em 0;
}

#SwitchTo {
    font-size: 0.88em; padding: 3px 12px 3px 8px; line-height: 1.25em;
}

#FooterHolder {
	height: 6em;
}


#FooterOuter {
  font-size: 1em;
}

#FooterInner {
  padding: 0 0.1em 0 0.2em; left: 0;
  border-radius: 10px 10px 0 0;
}

#ContactDeets {
	-webkit-text-size-adjust:100%;
	line-height: 1.9em;
	padding-left: 0.2em;
	padding-top: 0.2em;
}

#ContactBtn {
	position: absolute;
	left: initial; right: 0;
	margin-left: 0; margin-right: 2px;
	top: 2.4em; width: 12em;
	padding: 0;
	font-size: 1.2em;
}

.ContactFormFieldEntry_Multiline {
	width: 10em;
}

.ContactFormFieldEntry {
	width: 10em;
}

.ContactFormMsg {
	font-size: 1.15em;
}

#SocialMediaStuff {
	position: absolute; line-height: 0.6em; font-size: 0.9em;
	text-align: right; right: 0.2em; top: 0.3em;
}

.SectionHeading {
	padding: 1.5em 0 0.5em 0;
}

.SectionHeading h2 {
	font-size: 1.2em; font-weight: 600;
	padding: 0.3em 0;
	margin: 0.3em 0;
}

.SectionHeading h3 {
	font-size: 1.1em;
}

.HeadedBox {
	width: 90%; min-width: 310px;
	font-size: 1.1em;
	margin: 0 auto;
	padding: 0.3em 0.5em;
	line-height: 1.5em;
}

.TopLine {
	text-align: center;
	margin: 0 0 0.3em 0;
}

.TopLine h2 {
	font-size: 1em;
}

/* For phone display, the IntroPanel menu items use full width and hide the pointer arrow */

.IntroPanel {
	width: auto;
	font-size: 0.9em;
	padding: 0 1em 0 0;
	max-width: 95%;
	line-height: 1.4em;
}

.IntroSet {
	display: block;
}

.IntroBox {
	width: 100%;
	min-height: 10em;
}

.IntroBox h2 {
	font-size: 1.5em;
}

.IntroBox h3 {
	font-size: 1.3em;
	padding-left: 1.2em;
}

.IntroBox h4 {
	font-size: 1.2em;
	padding-left: 1.2em;
}

.IntroBoxIcon {
	width: 10%; height: 10%;
}

.IntroBoxPointer {
	display: none;
}

.Slogan {
	line-height: 1.5em;
}

.Slogan h2 {
	font-size: 1.2em;
}

.SoundCloud_SmallHolder IFRAME {
	width: 250px;
	height: 20px;
	padding: 0.5em 0.3em 0.5em 0.3em;
}

.ProjectBoxHolder {
	width: 99%; min-width: 310px;
	padding: 0;
}

.ProjectBox h3 {
	text-align: center;
	font-size: 1em;
}

.ProjectText {
	float: left;
	width: 95%;
}

.ProjectMedia {
	float: none;
	display: inline-block;
	/*margin: 2em auto;	*/
	margin: 0 auto;
	min-width: 304px; min-height: 171px;
}

.ProjectMediaCaption {
    text-align: center;
    margin: 0.5em auto;
}

.DownArrowRow { 
	margin-top: 0em;
	font-size: 1.4em;
}

.tightpara {
	line-height: 1em;
	font-size: 0.71em;
}

.phonesep {
	width: 90%;
	margin: 0.4em auto -5px auto;
	border-top: 1px groove #6666CC;
}

.vertbar_or_wrap {
	display: block;
}

.vertbar_or_wrap:after {
	content: '';
}

.space_or_wrap {
	display: block;
}

.space_or_wrap:after {
	content: '';
}


} /*END OF PHONE MEDIAQUERY*/

/* ******SHORT PHONE****** */
/* ******SHORT PHONE****** */
/* ******SHORT PHONE****** */
/*  MAX HEIGHT: 500px  */

@media only screen and (min-width: 0px) and (max-width: 420px) and (max-height: 500px) {
.ProjectMedia {
	float: none;
	padding: 0;
	margin: 0.5em 0 0 0;
}

.tightpara {
	line-height: 1.71em;
	font-size: 0.71em;
}

.phonesep {
	width: 90%;
	margin: 0 auto -5px auto; /*Extra tight for iPhone 4*/
	border-top: 1px groove #6666CC;
}
} /*END OF EXTRA SHORT PHONE*/



/*Probable small phone landscape*/
@media only screen and (max-height: 350px) {
#FooterHolder {
	display: none;
	height:	0px;
	max-height: 0px;
}

} /*END OF Probable small phone landscape*/