/*
Theme Name: Project clear
Theme URI: http://www.scriptoria.co.uk
Description: A premium theme by Chris Thomas
Version: 1.0
Author: Chris Thomas
Author URI: http://www.scriptoria.co.uk
*/

html {color:#FFF; width:100vw; overflow-x: hidden; padding:0; margin:0}

body {
	padding: 0;
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	width: 100%;
	font-size: 1.2vw;
	line-height: 1;
	color: #333;
	overflow-x: hidden;
	font-weight: 400;
	background-color: #FFF;
}

@media only screen and (max-width : 10000000px) {
body {font-size: 0.75vw;}}

@media only screen and (max-width : 1600px) {
body {font-size: 1vw;}}

@media only screen and (max-width : 1280px) {
body {font-size: 1.2vw;}}

@media only screen and (max-width : 1100px) {
body {font-size: 1vw; width:94% !important; margin-left:auto; margin-right:auto;}}

@media only screen and (max-width : 812px) {
body {font-size: 3vw;}}




.header {background-color:#FFF;}
img {width:100%; height:auto}
.header img {margin-bottom:1.6vw; float:left;}
.header .logo {margin-top:1.6vw; width: 149px;}
.header .logo2 {margin-top: 1.6vw; width: 163px; float: right;}
.left-footer .logo3 {margin-top: 1.3vw; width: 108px}
.left-footer .logo4{margin-top: 1.6vw; width: 46px}
.left-footer .logo5{margin-top: 1.6vw; width: 44px}
.left-footer .logo6{margin-top: 1.6vw; width: 82px; margin-right:0 !important}

@media only screen and (max-width : 812px) {
.header .logo {margin-top:1.6vw; width: 25vw; padding-left:4vw}
.header .logo2 {margin-top: 1.6vw; width: 25vw; float: right; padding-right:4vw}	
	
}

.main {
	margin: auto;
	position: relative; 
}

.triangle {background-image: url(images/trianglesv2.jpg); background-size: 100% auto;}

.accordion-home {
	background-color: #2d4575;
	color: #FFF;
	text-align: center;
	padding-top: 3.2vw;
	padding-bottom: 3.2vw;
	line-height:1.4;
	position:relative;
}

.accordion-home p {max-width: 1100px;
margin-left: auto;
margin-right: auto; max-width: 1100px;
margin-left: auto;
margin-right: auto;
padding-left: 6.4vw;
padding-right: 6.4vw;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}

.accordion-home .home-infographic {max-width: 800px; margin-left: auto;
margin-right: auto; margin-top:40px; margin-bottom:40px; width:80%;}
.accordion-home .accordion {
  background-color: #2d4575;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

.home-ac-line {
	position: absolute;
	height: auto;
	width: 100%;
	left: 0px;
	top: 0px;
}

.accordion-home .accordion-homebut {
	display: inline-block;
	background-color: #2eb893;
	color: #fff !important;
	border-radius: 2vw;
	-moz-transition: all .2s ease-in;
	-o-transition: all .2s ease-in;
	-webkit-transition: all .2s ease-in;
	transition: all .2s ease-in;
	padding-top: 0.5vw;
	padding-right: 2vw;
	padding-bottom: 0.5vw;
	padding-left: 2vw; font-size:70%;
}
.accordion-home .accordion-homebut:hover {cursor: pointer; background-color:#1c6e58 }


.accordion-home #homebut1 {display:block;}
.accordion-home #homebut2 {display:none}



/* Style the accordion panel. Note: hidden by default */

.accordion-home .panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.accordion-home .panel a {color:#FFF; text-decoration:underline}
/* Style the accordion panel. Note: hidden by default */




.clearfix:after  {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

a {-moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in; text-decoration:none;}
	
.holder-webkit-flex  {display: -webkit-flex; /* Safari */ display: flex; /* Standard syntax */}
@media only screen and (max-width : 700px) {.holder-webkit-flex  {display: block}}
.flex {-webkit-flex: 1; /* Safari */-ms-flex: 1; /* IE 10 */ flex: 1; /* Standard syntax */}

div {-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;   
box-sizing: border-box;}

/* RC */

.rc-single-content {float:right; width:71%; margin-left:4%;}

.rc-single-content a{color:#58585a}
.rc-single-content a:hover{ text-decoration:underline;}

.rc-single-image-desc-holder {margin-bottom: 2vw}

#single-pub-tab-right {
	width: 20vw;
	display: block;
	float: right;
	margin-left: 2%;
	background-color: #fff;
	padding: 2vw;
	border: 1px solid #ddd;
}

.single-rc h1 {
    text-align: left;
    margin: 0;
    top: 50%;
    left: 2%; color:#58585a; font-size:125%;
}
.single-rc h2 {color:#58585a; font-size:100%; }

/* RC arch */


.searchandfilter ul {padding:0; margin-top: 0; margin-bottom: 0; }
.searchandfilter ul li ul{display:none}
.searchandfilter ul li input[type=text] {width: 100%;
	padding: 5px;
	margin-bottom: 0vw;
	font-size: 12px; -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; background-color: #fff;
	color: #333; line-height:1; border:0; height:30px}

@media only screen and (max-width : 812px) {
.searchandfilter ul li input[type=text] {width: 100%;
	padding: 3vw;}	
}
	
.left-holder-arch {position:absolute; -ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%; left: 1.6vw;
right: 1.6vw; z-index:99}

@media only screen and (max-width : 812px) {
.left-holder-arch {position:absolute; -ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%; left: 3.2vw;
right: 3.2vw; z-index:99}
}
	
	
.page-id-155 .left-holder-arch h2 span{display: block; font-size: 75%;}

.pubfiletype p {font-size: 100%; line-height: 1.2; margin-top: 1.6vw;
margin-bottom: 1.6vw;}
.left-holder-arch a {color: #2d4575}
.left-holder-arch a:hover {color:#000}
.rc-arch-readmore a {padding-left: 20px !important; padding-right: 20px !important; }

.clear-filters {font-size: 75%; color: #000;}
	
	.searchandfilter ul li input[type=text]::placeholder {color: #333 !important; opacity:1}

.searchandfilter ul li input[type=submit], .rc-arch-readmore a {width: 50%;
	padding: 5px;
	margin-bottom:10px;
	font-size: 90%; cursor:pointer; height:30px; background-color: #2d4575; color:#fff; border:none;-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in; font-weight:bold;}


.searchandfilter ul li input[type=submit]:hover, .rc-arch-readmore a:hover{background-color:#58585a !important; color: #fff !important;}
.searchandfilter ul li{width: 100%; padding: 0; }
.searchandfilter ul li ul {background-color:#ccc; margin-top:-10px; padding:5px; margin-bottom:10px;}
.searchandfilter ul li ul label {font-size:80%}

.rcgen  label, .earc-wrap label {
    display: block;
    margin-bottom: 5px;
    float: left;
    margin-left:20px;
}
.rcgen  label input[type='checkbox'], .earc-wrap label input[type='checkbox'] {
  margin-left:-20px;
}

.h1-holder {background-color: #2d4575; width:100%;}
.h1-holder h1, .single-all-resources .h1-holder span {margin: 0; color:#FFF; padding:3.2vw; color:#FFF; font-size:80%; font-size: 2.8vw; display:block; font-weight:bold;}
.single .h1-holder {margin-bottom: 1.6vw;}

.rc-holder {margin-top: 1.6vw;}

.box1100 {width: 1100px;
max-width: 100%; margin-right:auto !important; margin-left:auto !important;}



/*.rc-home-filters {
	position: absolute;
	left: 0;
	top: 44px;
	right: 0;
	bottom: 0;
}*/

.rc-home-filters {
	position: relative; min-height: 18vw;
}

.rc-arch {
    background-color: #b9babc;
    padding: 1.6%;
    margin-bottom: 2%;
    width: 23.8%;
    float: left;
    margin-right: 1.6%;
    padding-top: 22.2%;
    position: relative;
	background-size:cover; background-position:center; 
}

.rc-arch:nth-of-type(4n){margin-right: 0 !important;}

.page-id-155 .rc-arch {width: 32.26%}
.page-id-155 .rc-arch:nth-of-type(4n){margin-right: 1.6% !important;}
.page-id-155 .rc-arch:nth-of-type(3n){margin-right: 0 !important;}

@media only screen and (max-width : 812px) {
.rc-arch {background-color: #bad89a;
padding: 4vw; padding-top: 50% !important; margin-right:0 !important;
width: 100% !important; margin-bottom:4%;}	
}

.page-id-155 .phase-logo-small{
    width: auto;
    height: 50px; margin-bottom:10px;
}
.rc-arch .coverlink {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0; z-index:999
}

.rc-arch::after {
    content: " ";
    position: absolute;
    z-index: 9;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 9;
    background-color: #666;
    opacity: 0.6;
	-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}

.rc-arch:hover::after {
    opacity: 0.95;
    background-color: #00bdf2;
}

.rc-arch-title a {
	text-align: left;
	left: 80px; position:absolute; -ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%; left: 2%; }
.rc-arch-title {position: relative;
float: left;
width: 100%;
text-align: left; }
.rc-arch-title a {color:#58585a; font-size:125%; line-height:1.1}
.rc-arch-icon {float:left; font-size:50px; color:#78bb43}
.rc-arch-title h1 i {font-size:150%; color:#bb8643; margin-right:10px;}
.rc-arch-readmore {text-align:left}

.corner-icon {position:absolute; right:1.6vw; bottom:1.6vw; color:#FFF; font-size:150%; z-index:99}

.left-holder-arch h2 {
    margin-top: 0;
    font-size: 125%;
    line-height: 1.4; color:#FFF; margin-bottom:0; text-shadow: 1px 1px 1px #666;
	-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
text-decoration: none;
}

.rc-arch:hover .left-holder-arch h2 { text-shadow:none}

.rchome .rc-arch-readmore a, .rchome .read-more  {
	font-size: 0%;
	cursor: pointer;
	background-color: #bb8643;
	color: #fff;
	display: inline-block;
	padding-top: 5px;
	padding-right: 20px;
	padding-bottom: 5px;
	padding-left: 20px;
}

.four-rel {position:relative; width: 23.8%; float:left; margin-right:1.6%; background-color:#999; padding-bottom:12%; padding-top:2vw;margin-top:1.6vw; margin-bottom:1.6vw; text-align:center; background-size: 100% auto; background-position:bottom; background-repeat:no-repeat;}

@media only screen and (max-width : 812px) {
.four-rel {width:46vw; margin-right: 2vw;}	
.four-rel:nth-of-type(2) {margin-right:0 !important}
.four-rel:nth-of-type(1), .four-rel:nth-of-type(2) {margin-bottom:0 !important}
}

.four-rel a {background-color:#FFF; display:inline-block; border-radius: 2vw; padding-top: 0.5vw;
padding-right: 2vw;
padding-bottom: 0.5vw;
padding-left: 2vw; font-size: 85%;
font-weight: bold; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;   
box-sizing: border-box; max-width:95%;}

.four-rel:nth-of-type(1), .rchome ul li:nth-of-type(1) .accordion { background-color:#7eba3d;}
.four-rel:nth-of-type(1) a {color:#7eba3d}
.four-rel:nth-of-type(1) a:hover, .rchome ul li:nth-of-type(1) .accordion:hover {background-color: #4c7025; color: #fff;}

.four-rel:nth-of-type(2), .rchome ul li:nth-of-type(2) .accordion  { background-color:#00bdf2}
.four-rel:nth-of-type(2) a {color:#00bdf2}
.four-rel:nth-of-type(2) a:hover, .rchome ul li:nth-of-type(2) .accordion:hover {background-color: #007191; color: #fff;}

@media only screen and (max-width : 812px) {
.four-rel:nth-of-type(2), .rchome ul li:nth-of-type(2) .accordion {margin-right:0}	
}

.four-rel:nth-of-type(3), .rchome ul li:nth-of-type(3) .accordion  { background-color:#aeca33}
.four-rel:nth-of-type(3) a {color:#aeca33}
.four-rel:nth-of-type(3) a:hover, .rchome ul li:nth-of-type(3) .accordion:hover {background-color: #68791f; color: #fff;}


.four-rel:nth-of-type(4), .rchome ul li:nth-of-type(4) .accordion  { background-color:#36b18f; margin-right:0 !important}
.four-rel:nth-of-type(4) a {color:#36b18f}
.four-rel:nth-of-type(4) a:hover, .rchome ul li:nth-of-type(4) .accordion:hover {background-color: #206a56; color: #fff;}





.rchome ul {width:100%; margin-bottom: 0;}
.rchome ul li {width:23.8%; margin-right:1.6%; display: block; float: left; position:relative;}
.rchome ul li:nth-of-type(4) {margin-right:0 !important}

@media only screen and (max-width : 812px) {
.rchome ul li {width:46vw !important; margin-right:2vw; display: block; float: left; position:relative;}
.rchome ul li:nth-of-type(2), .rchome ul li:nth-of-type(4)  {margin-right:0 !important}	
.rchome ul li:nth-of-type1), .rchome ul li:nth-of-type(2) {margin-bottom:0 !important}
}

.rchome ul li ul {-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;   
box-sizing: border-box; margin-top:0 !important;}

.rchome ul li ul li {width:100% !important}

.rchome ul li:nth-of-type(5) {clear:both;}

.rchome ul .accordion {
    display: block;
    width: 100%;
    padding: 0.8vw;
   	margin-bottom: 0.8vw;
    font-size: 85%;
    line-height: 1;
    text-align: left;
    background-image: url(images/accor01b.png) !important;
    background-repeat: no-repeat !important;
    background-position: right top !important;
    background-color: #fff;
    color: #fff;
    border: 0;
    cursor: pointer;
}
@media only screen and (max-width : 812px) {
.rchome ul .accordion {
    padding: 3vw; margin-bottom: 2vw;	
}}

.rchome ul .active {
    background-image: url(images/accor02b.png) !important;
    background-repeat: no-repeat !important;
    background-position: right top !important;
}

.rchome ul li li {float:none}

.rchome ul li ul {background-color: #eef2f5 !important}

.rchome input:not([type="submit"]) {background-color: #eef2f5 !important; padding-left: 2.2vw !important;}

@media only screen and (max-width : 812px) {
.rchome input:not([type="submit"]) {
    background-color: #eef2f5 !important;
    padding-left: 5vw !important;
    font-size: 90% !important;}}


.rchome ul li input[type="submit"] {
    width: 2vw;
    margin-bottom: 0.8vw;
    font-size: 0;
    cursor: pointer;
    height: 30px;
    background-color: transparent;
    border: none;
    position: absolute;
    left: -106%;
    background-image: url(images/magnifying-glass-solid.svg) !important;
    background-size: 14px;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
	opacity: 0.5 !important;
}
@media only screen and (max-width : 812px) {
.rchome ul li input[type="submit"] {
    width: 4vw;
    font-size: 0;
    cursor: pointer;
    height: 30px;
    background-color: transparent;
    border: none;
    position: absolute;
    left: 2px;
    background-image: url(images/magnifying-glass-solid.svg) !important;
    background-size: 70%;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    opacity: 0.5 !important;
    bottom: -10px; margin-bottom: 2.4vw;
}}

.rchome ul li input[type="submit"]:hover {opacity:1 !important; background-color: transparent !important;}

.home-search-box {position:relative; margin-bottom: 1.6vw}

.sm-footer {width:50%; float: right; text-align:right; margin-top: 1.6vw; margin-bottom: 1.6vw;}
@media only screen and (max-width : 812px) {
.sm-footer {width:100%; text-align:center }
}
.footer-left {
	color: #CCC;
	text-align: left;
	float: left;
	width: 80%; padding:2vw;
}

video, audio, iframe {width:100%}
.mp4-holder {
    width: 50%;
    padding-bottom: 28%;
    position: relative;
}
.mp3-holder {
    width: 50%;
    position: relative;
}
.mp4-holder iframe {position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%; border: none;
}
.mp3-holder iframe {
    border: none;
}
.imagetype {width:50%; height:auto; border: 1px solid #2d4575;}
.mp4-holder, .mp3-holder {border: 1px solid #2d4575;}

.single-all-resources h1 {
	font-size: 150%;
	color: #2d4575; margin-top:2vw;
}
.pubfiletype { line-height:1.6}
.pubfiletype a {color: #2d4575}
.pubfiletype a:hover {text-decoration:underline}

.goback  {
    margin-top: 2vw;
    display: block;
    margin-bottom: 2vw; color: #2d4575
}
.goback:hover {text-decoration:underline}

.fab::before {
    position: absolute;
	-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
top: 50%; left: 50%; }

.sm-footer i {
    background-color: #b9babc;
    color: #FFF;
    width: 2.5vw; height:2.5vw; -moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in; position:relative; font-size:1vw;
}
@media only screen and (max-width : 812px) {
.sm-footer i {
    background-color: #b9babc;
    color: #FFF;
    width: 10vw; height:10vw; font-size:4vw; }	
}
.sm-footer i:hover {background-color: #2d4575;}
.left-footer img {margin-right:6.4%;}
.left-footer {width:50%; float:left; margin-bottom: 1.3vw;}

@media only screen and (max-width : 812px) {
.left-footer {width:100%; float:left; margin-bottom: 2vw;}	
.pre-footer-line {margin-top:4vw}
}

/*.banner-holder {margin-left:1.4vw; margin-right:1.4vw; margin-top:1.4vw}*/

.panel-content p {-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px; line-height:1.4}

.panelallrec { background-color:#00bdf2;
display: inline-block;
border-radius: 2vw;
padding-top: 0.5vw;
padding-right: 2vw;
padding-bottom: 0.5vw;
padding-left: 2vw;
font-size: 100%;
font-weight: bold;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #fff;}
.panelallrec:hover {background-color: #000}

.panelallholder {margin-top:40px; text-align:left}

.panel-content .panelallholder {margin-top: -moz-calc(5% - 16px);
margin-top: -webkit-calc(5% - 16px);
margin-top: -o-calc(5% - 16px);
margin-top: calc(5% - 16px); text-align:left}


.no-results {margin-top:40px; margin-bottom:40px;}

.home-rcinfo {
    position: absolute !important;
    left: 25.4%;
    bottom: 0.6vw; color: #2d4575; 
}

@media only screen and (max-width : 812px) {
.home-rcinfo {position: absolute !important;
left: 49vw;
bottom: 2.5vw;
color: #2d4575;}}


/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  ; /* If you want dots under the hoverable text */
}
.tooltip:hover {cursor: default;}

.wp-block-columns a:hover {text-decoration:underline}

/* Tooltip text */
.tooltip .tooltiptext {
	visibility: hidden;
	/* white-space: nowrap; */
	background-color: #2d4575;
	color: #fff;
	text-align: left;
	border-radius: 6px;
	/* Position the tooltip text - see examples below! */
	position: absolute;
	z-index: 1;
	bottom: 150%;
	left: -10vw;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	width: 20vw; font-size:80%; line-height:1.2; font-family: Arial, Helvetica, sans-serif !important; font-weight:normal;
}

@media only screen and (max-width : 812px) {
.tooltip .tooltiptext {font-size:100%;}
}

.tooltip .tooltiptext strong {
	font-weight: 900 !important;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #2d4575 transparent transparent transparent;
}

.pag {clear:both; width:100%; margin-bottom: 2%;}
.pag a {color:#2d4575}
.pag a:hover {text-decoration:underline}

.page-id-1586 .hih2 {
	display: block;
	background-color: #2eb893;
	color: #fff !important;
	border-radius: 2vw;
	margin-right: auto;
	padding-top: 0.75%;
	padding-right: 4%;
	padding-bottom: 0.75%;
	padding-left: 4%;
}

@media only screen and (max-width : 812px) {
	.page-id-1586 .hih2 {font-size: 100%; padding-top: 1.6vw;
	padding-right: 3.2vw;
	padding-bottom: 1.6vw;
	padding-left: 3.2vw;}
}

.infographic-holder {position:relative; width:100%; padding-top: 148%}
.infographic-holder svg {position:absolute; width:100%; height:100%; left:0; right:0; top:0; bottom:0;}
.infographic-holder svg a, .infographic-holder svg a:active, .infographic-holder svg a:focus {
   outline: none;
}