﻿html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}

html,body{height: 100%;}html{overflow-x:hidden}

body { display: flex; flex-direction: column;}
div#wholepage { flex: 1 0 auto;}
div#footer {flex-shrink: 1;}

.clear, .clearb {clear:both}
.clearl {clear:left}
.clearr {clear:right}

.content{max-width:920px;margin:auto}
.content-sliderwide{max-width:926px;margin:auto}
#page, .page {padding:0 12px; }
@media (min-width:601px){#page, .page {padding:12px;}}

ul, ol {margin:12px 0 12px 50px;text-align:left;line-height: 1.4em}
ul, ol h2, ul, ol h3, ul, ol h1 {line-height:normal}
@media (max-width:601px){ul, ol {margin:12px 0 12px 14px;text-align:left;}}
ul li {list-style:square;padding:3px 3px 9px 3px;}
ol li {padding:3px 3px 9px 3px;}

.bar-block .dropdown-hover,.bar-block .dropdown-click{width:100%}
.bar-block .dropdown-hover .dropdown-content,.bar-block .dropdown-click .dropdown-content{min-width:100%}
.bar-block .dropdown-hover .button,.bar-block .dropdown-click .button{width:100%;text-align:left;padding:8px 16px}
.main,#main{transition:margin-left .4s}

.tablew {display:table}
.table {width: 100%; display: flex; flex-wrap: wrap;}
.column {flex-direction: column}
.table-cell {width:100%}
@media (min-width: 601px) {.table-cell {flex:1} }


.tablewide {
display: flex;
    justify-content: space-around;
    flex-flow:  wrap;
align-items: stretch;}
.cellthird {flex-grow:1;flex:1;margin:5px}
.celltwothirds {flex-grow:2;flex:2;margin:5px}
@media (max-width: 801px) {.tablewide {display:inline-block}}


.filetypeslg {padding:6px 0; margin:0 0 12px 0;}
.filetypeslg div {float:left;margin:2px 2px 2px 0; white-space: nowrap;width:30px;}
@media (min-width:751px){.filetypeslg div{width:7em; ;margin:2px 30px 2px 0;}}
@media (max-width:750px){.filetypeslg div span{display:none; width:0;height:0;opacity:0;visibility: collapse}}

.tablecol    {display: flex; flex-direction: column;}
.tablecol p {  flex: 1 0 auto;}

/*.tablecolumns {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-flow: column wrap;
   align-content: start;
}*/
      
.tablecell {width:100%}
@media (min-width: 601px) {.tablecell {display: flex; }}



.display-container:hover .display-hover{display:block}.display-container:hover span.display-hover{display:inline-block}.display-hover{display:none}
.tooltip,.display-container{position:relative}.tooltip .text{display:none}.tooltip:hover .text{display:inline-block}
.container:after,.container:before,.panel:after,.panel:before,.row:after,.row:before,.row-padding:after,.row-padding:before,
.cell-row:before,.cell-row:after,.clear:after,.clear:before,.bar:before,.bar:after{content:"";display:table;clear:both}
.row-padding,.row-padding>.half,.row-padding>.third,.row-padding>.twothird,.row-padding>.threequarter,.row-padding>.quarter,.row-padding>.col{padding:0 8px}
/*.container,*/.panel{padding:0.01em 16px}.panel{margin-top:16px;margin-bottom:16px}

.image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit}

.col,.half, .half700,.third, .third700, .twothird,.threequarter,.quarter, .twofifth, .threefifth, .fifth, .fourfifth, .bigvideo {float:left;width:100%} .fifthcntr {width:100%; margin:auto;}
.halfright,.thirdright,.quarterright {float:right;width:100%}
@media (min-width:601px){.col.m1{width:8.33333%}.col.m2 {width:16.66666%}  .fifth, .fifthcntr{width:20%} .col.m3,.quarter{width:24.99999%}.col.m4,.third,.thirdright{width:33.33333%}
.col.m5{width:41.66666%}.col.m6,.half,.halfright {width:49.99999%}.col.m7{width:58.33333%}.col.m8,.twothird {width:66.66666%}.twothirdwide{width:70%} .twofifth {width:39.99999%}.threefifth {width:59.99999%} .fourfifth{width:79.99999%}

.col.m9,.threequarter,.quarterright{width:74.99999%}.col.m10{width:83.33333%}.col.m11{width:91.66666%}.col.m12{width:99.99999%}

.bigvideo {max-width:670px; float:none; margin:auto}}

#footermain .footquart {width:24.99999%;float:left;}
@media (max-width: 920px) and (min-width: 501px){	#footermain .footquart {width:49.99999%;float:left; border-bottom:1px solid #aaa;}}
@media (max-width: 500px) {	#footermain .footquart {width:100%;border-bottom:1px solid #aaa;}}

@media (min-width:701px){ .half700 {width:49.99999%} .third700 {width:33.33333%}}
@media (min-width:993px){.col.l1{width:8.33333%}.col.l2{width:16.66666%}.col.l3{width:24.99999%}.col.l4{width:33.33333%}
.col.l5{width:41.66666%}.col.l6{width:49.99999%}.col.l7{width:58.33333%}.col.l8{width:66.66666%}
.col.l9{width:74.99999%}.col.l10{width:83.33333%}.col.l11{width:91.66666%}.col.l12{width:99.99999%}}

.top100 {margin-top:100px!important;}
.top75 {margin-top:75px!important;}
.top50, .top50w {margin-top:50px!important;}
.top25, .top25w {margin-top:25px/*!important;*/}
@media (max-width:601px){.top25w,.top50w {margin-top:0!important;}}
.topbot25 {margin-top:25px!important;margin-bottom:25px!important;}
.topbot50 {margin-top:50px!important;margin-bottom:50px!important;}
.top20 {margin-top:20px!important;}
.top15 {margin-top:15px!important;}
.top10 {margin-top:10px!important;}
.bottom100 {margin-bottom:100px!important;}
.bottom75 {margin-bottom:75px!important;}
.bottom50 {margin-bottom:50px!important;}
.bottom25 {margin-bottom:25px/*!important;*/}
.bottom20 {margin-bottom:20px!important;}
.bottom10 {margin-bottom:10px!important;}
.right75 {margin-right:75px;}
@media (max-width:601px){.right75 {margin-right:0;}}
.right50 {margin-right:50px;}
.right30 {margin-right:30px;}
.right20 {margin-right:20px;}
.right10 {margin-right:10px;}
.left100 {margin-left:100px;}
.left30 {margin-left:30px;}
.left25 {margin-left:25px;}
.left20 {margin-left:20px;}
.left10 {margin-left:10px;}
@media (max-width:601px){.left10, .left100 {margin-left:0;}}
.rightp50 {padding-right:50px;}
@media (max-width:601px){.rightp50 {padding-right:0;}}
.rightp30 {padding-right:30px;}
.rightp20 {padding-right:20px;}
.rightp10 {padding-right:10px;}
@media (max-width:601px){.rightp10 {padding-right:0;}}
.leftp50 {padding-left:50px;}
@media (max-width:601px){.leftp50 {padding-left:0;}}
.leftp30 {padding-left:30px;}
.leftp20 {padding-left:20px;}
.leftp10 {padding-left:10px;}
.sides20w {margin-left:20px;margin-right: 20px}
.sides30w {margin-left:30px;margin-right: 30px}
.sides40w {margin-left:40px;margin-right: 40px}
@media (max-width: 920px) and (min-width: 601px){.sides20w {margin-left:10px;margin-right:10px}}
@media (max-width:600px){.sides20w {margin-left:0;margin-right: 0}}
.padding20 {padding:20px;}

.acentre, .acenter {text-align:center}
.aleft{text-align:left!important}
.aright{text-align:right!important}
.arightwide{text-align:left!important;}
.arightwidec {text-align:center!important;}
@media (min-width:601px){.arightwide, .arightwidec {text-align:right!important}}
.aleftwidec {text-align:center!important;}
@media (min-width:921px){.aleftwidec {text-align:left!important}}
.avmiddle {vertical-align:middle}
.left {float:left; margin-right:10px;}
.leftw {float:none;margin-left:0; clear:both; }
@media (min-width:601px){.leftw {float:left;margin-right:10px;}}
.right {float:right;margin-left:10px;}
.rightw {float:none;margin-left:0; clear:both}
	@media (min-width:601px){.rightw {float:right;margin-left:10px;}}

#tabs, #tabsodr { display: flex; flex-wrap: wrap;}
#tabs label, #tabsodr label { display: block; padding: 0.8rem 1rem; margin-right: 0.2rem; cursor: pointer; }
#tabs .tab, #tabsodr .tab { flex-grow: 1; width: 100%;display: none; padding: 1.5rem; background: #fff;}
#tabs input[type="radio"] { position: absolute;opacity: 0;}
#tabsodr input[type="radio"] { position: absolute;opacity: 0;}
#tabs input[type="radio"]:checked + label { background: #fff;border-bottom: 1px solid #fff; }
#tabsodr input[type="radio"]:checked + label { background: #fff;border-bottom: 1px solid #fff; }
@media (max-width: 45em) {
	#tabs input[type="radio"]:checked + label, #tabsodr input[type="radio"]:checked + label {
		background: #E8E8E8 url(../images/icons/minus.png) no-repeat right;
		border-bottom: 1px solid #fff;
		color:#002b6d;
	}
}
#tabs input[type="radio"]:checked + label + .tab, #tabsodr input[type="radio"]:checked + label + .tab { display: block; }
@media (max-width: 45em) {
		#tabs label, #tabsodr label {  width: 100%; margin-right: 0; margin-top: 0.2rem;}
	#tabsodr .twothird, #tabsodr .third {width:100%;}
}
@media (min-width: 45em) {
	#tabs .tab, #tabsodr .tab {
		order: 99;
	}
}

.brwrap br {display:none;}
@media (min-width:601px){.brwrap br {display:inline}}
@media (max-width:600px){.hiddensmall {display:none; width:0;height:0;opacity:0;visibility: collapse;}}

.hiddenlarge, .hiddenlarge700 {display:inline;opacity:1;visibility: visible}
@media (min-width:601px){.hiddenlarge {display:none;width:0;height:0;opacity:0;visibility: collapse;}}
@media (min-width:701px){.hiddenlarge700 {display:none;width:0;height:0;opacity:0;visibility: collapse;}}


.hiddensmall {display:inline;opacity:1;visibility: visible}
@media (max-width:601px){.hiddensmall {display:none;width:0;height:0;opacity:0;visibility: collapse;}}



.hiddenlargetb {display:inline;opacity:1;visibility: visible}
@media (min-width:45em){.hiddenlargetb {display:none;width:0;height:0;opacity:0;visibility: collapse;}}

.nowrap {white-space: nowrap}

.gapleft {margin-left:0}
@media (min-width:601px){.gapleft {margin-left:15px}}
.gapright {margin-right:0}
@media (min-width:601px){.gapright{margin-right:15px}}
.gapleftlrg {margin-left:0; }
@media (min-width:601px){.gapleftlrg {margin-left:25px;}}
.gaprightlrg {padding-right:0; border:0;}
@media (min-width:601px){.gaprightlrg{padding-right:25px; border-right:1px solid #e6e6e6;}}

.margin0 {margin:0 !important; padding:0 !important;}
.blockq {margin-left: 40px;}

.lightbox {position: fixed; display:flex;flex-direction: column;align-items: center;justify-content: center;z-index: 999;width: 100%;height: 100%;text-align: center;top: 0;left: 0;background: rgba(0,0,0,0.8);}
.lightbox img {	max-width: 90%;max-height: 80%; border-radius:8px}
.lightbox p {color: #fff;}
.lb {cursor: zoom-in;}
@media only screen and (min-width: 600px) {	.lb {background-color:inherit;}	}
@media only screen and (min-width: 920px) { .imgsml {max-width:225px;} }

.videolrg {width:100%; margin:auto; height:300px;}
@media only screen and (min-width: 600px) {.videolrg{max-width:670px; height:377px}}


.storyquote {padding:1em; font-weight: bold; margin:2em 0; background: #0f71b8; color:#fff}

.read-more-state {display: none; }
.read-more-target img.storysymbol {width:0;}
.read-more-target {opacity: 0;max-height: 0; font-size: 0; transition: .25s ease; overflow:hidden; }

.read-more-state:checked ~ .read-more-wrap .read-more-target {opacity: 1;font-size: inherit;max-height: 999em;}
.read-more-state:checked ~ .read-more-wrap .read-more-target img.storysymbol {width:100%; margin-bottom:25px;}
.read-more-state ~ .read-more-trigger:before {content: 'Show more';}
.read-more-state:checked ~ .read-more-trigger:before { content: 'Show less';}
.read-more-trigger { cursor: pointer; display: inline-block; padding: 0 .5em; color: #fff; font-size: 18px; line-height: 2; border: 1px solid #ddd; border-radius: 8px; background: #e56220;text-shadow: -1px 1px 0 #c3531b, 1px 1px 0 #c3531b, 1px -1px 0 #c3531b, -1px -1px 0 #c3531b;}
@media print {.read-more-target {opacity: 1;font-size: inherit;max-height: 999em;}.read-more-trigger{display: none; }}


.boxstory {	margin:auto;width:100%;}
@media (min-width:701px){.boxstory {width:80%;}}



div.hmlinks { display: flex;flex-wrap: wrap;}
div.hmitem2, div.hmitem3, div.hmitem4 {display: flex; padding: 0;width: 100%;}
@media (min-width:701px){div.hmitem3 {width: 33.333%; flex-basis: 33.333%;}}
@media (min-width:601px){div.hmitem2 {width: 50%; flex-basis: 50%;}}
@media (max-width: 920px) and (min-width: 600px){div.hmitem4 {width: 45%; flex-basis: 45%;}}
@media (min-width:921px){div.hmitem4 {width: 23%; flex-basis: 23%;}}

@media print {div.hmitem3 {width: 50%; flex-basis: 50%;}}

.hmcontent {display: flex;flex-direction: column;padding: 0 1em; width: 100%;}
.hmcontent p {flex: 1 0 auto;}

.heightx2 {line-height: 2.55em}
.width150 {min-width:150px !important}
.width200 {width:200px !important}
.width300 {width:300px !important}
.marginauto {margin-left:auto !important;margin-right:auto !important}

#aboutSymbolsVideo {
	width: 100%;
	max-width: 833px;
}

.homepage-symboliser {
	width:100%;
}

#login-ed a {
	min-width:8em;
	text-align:right
}

#view_cart-ed svg {
	cursor:pointer;
}

#view_cart-ed {
	position:relative;
}