/*
Theme Name: ETDraft1
Theme URI: https://education-together.org/
Author: Jon Bell
Author URI: https://education-together.org/
Description: This theme has been developed to support Education Together Ltd; a company that delivers Educational opportunities
Version: 2.0
License: undistributed theme for author's personal use
License URI: Not applicable
Tags: TBC
*/

/* =Default Settings ---------------------------------- */

 * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align:	baseline;
	background: transparent;}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em,font, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody,tfoot, thead, tr, th, td {
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	font-size-adjust: 100%;
	border: 0;
	margin: 0; outline: 0; padding: 0;
	vertical-align: baseline;
}

html {
	font-size: 62.5%;
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0; padding:0;}
html,body {margin:0; padding:0;}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {display: block;}
ol, ul {list-style: none;}
table { /* tables still need 'cellspacing="0"' in the markup */ border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal; text-align: left;}
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a:focus {outline: thin dotted;}
a:hover, a:active {outline: 0;}
a img {border: 0;}
img {display:block;}

body {
	background-image: url("https://education-together.org/wp-content/uploads/2025/06/backimg-4-3a.png");
	background-size:100%;
	background-repeat: repeat;
	background-clip: border-box;
}

@media only screen and (max-width: 450px) {
body {background-image: url("https://education-together.org/wp-content/uploads/2025/06/backimg-4-3a.png");}
}/*Changes background image on smaller screens */

/* =Colours ------------------------------------------- */

:root {
	--et-blue-1:#3b4b85;
	--et-blue-2:#8299b2;
	--et-blue-3:#c9d8e8;
	--et-blue-4:#c5cbeb;
	
	--et-green-1:#4e7387;
	--et-green-2:#c9dbe4;
	--et-green-3:#edf3f6;
	--et-green-4:#ecf7ff;
	
	--et-orange-1:#d26632;
	--et-orange-2:#d5a992;
	
	--et-sand-1:#d8a353;
	--et-sand-2:#ead4b2;
	--et-sand-2-rgb20: rgb(234, 212, 178, 0);
	
	--et-grey-1:#545454;
	--et-grey-2:#737373;
	--et-grey-3:#a6a6a6;
	--et-grey-4:#e6e6e6;
	
	--et-off-grey-1:#dce4e9;
	--et-pale-1:#fafafa;



}

:root {
	--ee-green-1:#0f3116;
	--ee-green-2:#6ba13c;
	--ee-red-1:#bc1823;	
}

/* =Text Settings - fonts, sizes etc ------------------ */

body, input, select, textarea {
	font-size: 1rem;
	font-family: 'Poppins', sans-serif;
	line-height: 1.5;
}

h1,h2,h3,h4,h5,h6,p,ul,ol {clear: both;color: var(--et-blue-1);}
.text-pale {color: var(--et-pale-1);}

h1,h2,h3,button,.a-button {font-family: "Exo 2", sans-serif;font-weight: bold;}
h4 {font-family: "Architechts Daughter", cursive;}
h4, h5, h6 {font-family: "Poppins", sans-serif;}


h1 {font-size: clamp(2.75rem,6.75vw + 0.25rem ,6rem);}
h2 {font-size: clamp(2rem,4vw + 0.25rem ,3rem);}	
h3, button {font-size: clamp(1.5rem,3vw + 0.25rem ,2.5rem);}
h4 {font-size: clamp(1.75rem, 3vw + 0.25rem ,3rem);}
h5 {font-size: clamp(2rem,3vw + 0.25rem ,2.5rem);}
h6 {font-size: clamp(1.25rem,3.25vw + 0.25rem,4rem);}
.page-strap {font-size: clamp(2.5rem,5vw + 0.25rem ,4rem);}

p,ul,ol, .small-button {font-size: clamp(1.4rem,1.25vw + 0.25rem ,1.5rem);margin-bottom: 0.5em;}

.small-button {font-size: clamp(1.5rem,1.5vw + 0.25rem ,1.75rem);}

.top-page {font-size: clamp(2rem,3vw + 0.25rem ,2.5rem);}

p:empty {display: none;}

/* =Common formats and Display Types-----------------------*/

.block {display:block}
.inline {display:inline-block;}
.flex {display:flex;}
.none {display:none;}

.fit-content {margin:auto; width:-moz-fit-content; width:-web-kit-fit-content; width:-ms-fit-content; width:fit-content;} 
.zero-margin {margin:auto; margin-top:0; margin-bottom:0; padding:0;}
.pointer {cursor:pointer;}

.text-center {text-align:center;}
.text-left {text-align: left;}
.text-right {text-align:right;}
.text-bold {font-weight: bold;}
.text-italic {font-style: italic;}
.text-normal {font-weight:normal;}
.strike {text-decoration: line-through;}
.product-text {font-size:1.2em}/*REVIEW THIS*/

b, strong {font-weight: bold;}
dfn, cite, em, i {font-style: italic;}
ul, ol {margin: 0 0 0.5em 3em;}
ul {list-style: disc;}
ol {list-style: decimal;}
ul ul, ol ol, ul ol, ol ul {margin-bottom: 0; margin-left: 1.5em;}

sup,sub { font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline;}
sup {bottom: 1ex;}
sub {top: .5ex;}

small {font-size: 75%;}
big {font-size: 125%;}

.unstyled-list {list-style:none; margin: 0}
.unstyled-list li {margin-bottom:1em}


/*link colours*/
a {color: var(--et-green-1); cursor:pointer;}
a:visited {color: var(--et-green-1);}
a, a:visited {color: #2b4f6b;}
a:hover, a:focus, a:active {color: var(--et-green-1);}
.clean-link, .clean-link:visited, .clean-link:active, .clean-link:hover, .clean-link:focus {text-decoration:none; cursor:pointer;}

button a {color: var(--et-blue-3);}
button a:visited {color: var(--et-blue-3);}
button a:hover, button a:focus, button a:active {color: var(--et-green-2);}

/*link colours*/

label {cursor:pointer;}

hr {
	width:95%;
	margin:auto;
	background-color:var(--et-blue-2);
	border: 0;
	height: 0.25vmin;
	margin-bottom:2em;
	margin-top:2em;
}

/* =Button Styles and button links ---------------------------------------*/

button, button:visited {
	clear: both;
	background-color: var(--et-blue-1);
	color:var(--et-pale-1);
	border:none;
	border-radius: 1em;
	padding: 1.5rem 1em 1.5rem;
	display:block;
	cursor:pointer;
	-webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */
}


.button-et-orange-1 {background-color:var(--et-orange-1)}
.button-et-orange-2 {background-color:var(--et-orange-2)}
.button-et-green-1 {background-color:var(--et-green-1)}
.button-et-grey-1 {background-color:var(--et-grey-1)}


/*.button-list, .woocommerce button.button, .woocommerce button.button.alt, .woocommerce a.button.alt, .wc-forward, .woocommerce a.button,button {color:#fff; background-color:#3888b2; font-size:1.5vw; width:100%;}
.button-list, .woocommerce button.button:hover,.woocommerce button.button.alt:hover, .woocommerce a.button.alt:hover, .wc-forward:hover, .woocommerce a.button:hover {color:#fff; background-color:#6899C4;}

/* =Input and form styles-------------------------------*/

input, input:visited {
	background-color: var(--et-pale-1);
	color: var(--et-blue-1);
	cursor: pointer;
}

input:focus, input:active, input:hover {
	background-color: var(et-green-2-1);
	color: var(--et-grey-1);
	cursor: pointer;
}

/* =Input and form styling TO REVIEW--------------------*/

input[type="checkbox"], input[type="radio"] {box-sizing: border-box; padding: 0;}
input[type="search"] {-webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;}
input[type=text], input[type=email],input[type=password], textarea {color: #666; border: 1px solid #ccc; border-radius: 3px;}
input[type=text]:focus, input[type=email]:focus, textarea:focus {color: #111;}
input[type=text], input[type=email], input[type=password] {padding: 3px;}

textarea {overflow: auto; padding-left: 3px; vertical-align: top; width: 98%;}

/* =TO REVIEW--END--*/

/* =Site Structure--------------------------------------*/

body {
	min-height:100vh;
	background-color:var(--et-green-4);
	
}

.top-page-text {
	margin-top:1rem;
	margin-bottom:1rem;
}

main {
	padding:0 2vw;
	margin: auto;
	min-height: 75vh;
}

.position-relative {position:relative;}

.grid-container {
	gap:2rem;
	display:grid;
	grid-template-columns: repeat(auto-fit,minmax(35rem, 1fr));
	grid-template-rows:min-content;
	margin-bottom:3rem;
	justify-content: center;
}

.grid-2col-container {
	gap:2rem;
	display:grid;
	grid-template-columns: 100%;
	grid-template-rows:min-content;
	margin-bottom:3rem;
	justify-content: center;
}

.grid-tight-container {
	gap:1em;
	margin-bottom:0;
	padding:0;
}

.content-block-container {
	margin:auto;
	margin-bottom: 2rem;
	justify-content: center;
}

@media only screen and (max-width: 750px) {
.grid-container {grid-template-columns: repeat(auto-fit,minmax(25rem, 1fr));}
}

.grid-element, .content-block-element {
	background: var(--et-green-2);
	padding:1em;
	position:relative;
}

.grid-element-tight {padding:0.25em}

.grid-col-span-extra {
	background: var(--et-green-2);
}
.grid-img {
	width:100%;
}

.card-button {
	width:100%;
	margin-top:auto;
}

/*@media only screen and (max-width:539px) {
	.show-540-1135 {display:none;}
}*/

@media only screen and (min-width:1136px) {
	.show-540-1135 {display:none;}
}

@media only screen and (min-width:1521px) {
	.show-540-1135 {display:grid;}
}



/*Grid 2 columns for large screens*/

.card-sub-div {margin-bottom:1em;}

/* Media Queries to adjust card font sizes mitigating text wrapping---------*/
@media only screen and (min-width: 542px) {
	.card-caption {font-size: clamp(2rem,3.5vw + 0.25rem ,4rem);}
	.card-subtitle {font-size: clamp(1.75rem, 2.5vw + 0.25rem ,3rem);}
	.grid-col-span-extra {grid-column:span 2;}
}

@media only screen and (min-width: 700px) {
	.grid-2col-container {grid-template-columns: 1fr 1fr;}
	.not-small {display:none;}
}

@media only screen and (min-width: 1136px) {
	.card-caption {font-size: clamp(2rem,2.5vw + 0.25rem ,3.5rem);}
	.card-subtitle {font-size: clamp(1.75rem, 2vw + 0.25rem ,2.5rem);}
	.lay-1 {width: 8.33%;}
	.lay-2 {width: 16.66%;}
	.lay-3, .lay-3a, .lay-3b {width: 25%;}
	.lay-4, .lay-4a, .lay-4b {width: 33.33%;}
	.lay-5 {width: 41.66%;}
	.lay-6, .lay-6a {width: 50%;}
	.lay-7 {width: 58.33%;}
	.lay-8, .lay-8a {width: 66.66%;}
	.lay-9, .lay-9a {width: 75%;}
	.lay-10 {width: 90%;}
	.lay-11 {width: 91.66%;}
	.lay-12 {width: 100%;}
}
@media only screen and (min-width: 1521px) {
	.card-caption {font-size: clamp(2.25rem, 2.5vw + 0.25rem ,3.25rem);}
	.card-subtitle {font-size: clamp(1.5rem, 1.5vw + 0.25rem ,2.5rem);}
	.grid-col-span-extra {grid-column:span 4;}
	.lay-10 {width: 83.33%;}
}


/* =Header Styles---------------------------------------*/
.block-element {
	background: var(--et-blue-2);
	padding:1em;
}

/* =Header Styles---------------------------------------*/

header {
	position:sticky;
	top:0;
	z-index:999;
}

.header-pt1 {
	background-color: var(--et-green-3);
}

.site-title-port {
	display:block;
	width:65%;
	margin:0 auto;
	padding:0.75vh;
}


@media only screen and (orientation:landscape) {
.site-title {
	display:block;
	width:80%;
	margin:0 auto;
	padding:2vw 0;
}
}

@media only screen and (orientation:portrait) {
.site-title {
	display:block;
	width:90%;
	margin:0 auto;
	padding:2vh 0;
}
}

.menu-label {
	display:block;
	position:absolute;
	top:28%;
	width: 12%;
	margin-left:83%;
	margin-right:5%;
	padding:0;
}


@media only screen and (orientation:portrait) {/* For portrait Devices */
.land-only {display:none;}
}

@media only screen and (orientation:landscape) {/* For portrait Devices */
.port-only {display:none;}
}

.header-pt1:after {
	content:"";
	display:block;
	width:100%;
	height:0.5vmin;
	background-color: var(--et-orange-1);
}

.header-pt2 {
	position: relative;
}

.main-strap {
	margin:0 auto;
	padding:0.5vh;
	background-color: var(--et-blue-3);
}

.top-image-container {
	position:relative;
}

.top-image {
	width:100vw;
	margin:0;
	padding:0;
}

.top-image-container:before {
	content:"";
	position:absolute;
	top:0;
	width:100%;
	height:100%;
	background-color: rgba(0,0,0,0.3);
}

.page-caption {
	position:absolute;
	top:0%;
	margin:0.5rem;
}

.page-caption-text {
	color:#ffffff;
}

.header-pt2:after {
	content:"";
	display:block;
	width:100%;
	height:0.5vmin;
	background-color: var(--et-orange-1);
}

/* Expananbable Block Styling
-----------------------------------------------*/

.toggle-input {display:none;}

.expandable-content{
	position:relative;
	height:15rem;
	overflow:hidden;
	transition:all 1s ease;
	padding-bottom:0;
}

.expandable-content:after {
 	position: absolute;
	bottom: 0;  
	height: 100%;
	width: 100%;
	content: "";
	-webkit-transition:all 3s ease;
	transition:all 3s ease;
	background: linear-gradient(to top,rgb(201, 219, 228, 1) 20%,rgb(234, 212, 178, 0) 80%);
 	pointer-events: none;
}

.toggle-sign {
	text-align: center;
	padding:0;
	padding-bottom:1rem;
}

.expander-sign {font-size:4rem;}
.colapser-sign {font-size:3rem;}


.toggle-character {
	font-size: 4rem;
	margin:0;
	padding:0;
	position:absolute;
	bottom:0;
	left:50%;
	transform:translate(-50%,10%);
}

.toggle-character .close {display:none;}

.expandable-section {
	margin-top:0.5rem;
	font-weight: normal;
	display:none;
	-webkit-transition:all 0.5s ease;
	transition:all 0.5s ease;
}

.non-expandable-section {
	margin-top:0.5rem;
	font-weight: normal;
}

.cursor-default {cursor:default;}

div [id^="toggle-input-"]:checked + div .expandable-section {
	display:block;
}

div [id^="toggle-input-"]:checked + div .expander-sign {display:none;}



div [id^="toggle-block-"]:checked + [id^="exp-"] {
	height:auto;
}

div [id^="toggle-block-"]:checked + [id^="exp-"]:after {
	content:"";
	display:none;
	-webkit-transition:all 3s ease;
	transition:all 3s ease;
}

div [id^="toggle-block-"]:checked ~ .toggle-sign label p {
	position:relative;
	height:auto;
	padding-bottom:0;
	transform:translate(-49.7%,-10%);
}
div [id^="toggle-block-"]:checked ~ .toggle-sign label p .close {
	display:block;
	rotate:90deg;
}

div [id^="toggle-block-"]:checked ~ .toggle-sign label p .plus {display:none;}


.expander-img {
	width:100%;
	margin-top:1rem;
	border-radius: 1rem;
}

.expander-frame {aspect-ratio: 1/1;}

@media only screen and (min-width: 450px) {
.expander-frame {aspect-ratio: 5/3}
}

@media only screen and (min-width: 700px) {
.expander-frame {aspect-ratio: 1/1}
}

@media only screen and (min-width: 900px) {
.expander-frame {aspect-ratio: 5/3}
} /*Image or map within an expanded column */

.no-margin-bottom {margin-bottom:0;}

/* Expandable block styling END
----------------------------------------------- */


/* Navigation
----------------------------------------------- */

#menu-toggle-label {
	border: none;
	background-color: #d9d9d9;
	background-color: rgba(0,0,0,0.2);
	background-color: none;
	cursor: pointer;
	width:12vmin;
	padding:0;
	position: fixed;
	right: 2.5vw;
	top: 5vmin;
	z-index:999;
}

#menu-toggle-label-overlay {
	border: none;
	background-color: #152535;
	background-color: var(--bit-black, #000);
	background-color: none;
	cursor: pointer;
	width:12vmin;
	padding:0;
	position: fixed;
	right: 2.5vw;
	top: 5vmin;
	z-index:999;
}

#toggle-1-label-overlay, #toggle-2-label-overlay, #toggle-3-label-overlay, #toggle-4-label-overlay, #toggle-5-label-overlay, #toggle-6-label-overlay, #toggle-7-label-overlay, #toggle-8-label-overlay, #toggle-9-label-overlay, #toggle-10-label-overlay, #toggle-11-label-overlay, #toggle-12-label-overlay, #toggle-13-label-overlay, #toggle-14-label-overlay  {
	border: none;
	background-color: #152535;
	background-color: var(--bit-black, #000);
	cursor: pointer;
	width:12vmin;
	padding:0;
	position: fixed;
	right: 2.5vw;
	top: 5vmin;
	z-index:999;
}

.menu-image {
	width:100%;
	height:9vmin;
	box-sizing:border-box;
	padding:0;
	padding:0.25vh 0.25vw 0.25vh 0.25vw;
	margin:0;
	display:block;
}

.menu-image-logged-out {
	width:100%;
	height:9vmin;
	box-sizing:border-box;
	padding:0;
	padding:0.25vh 0.25vw 0.25vh 0.25vw;
	margin:0;
	display:block;
}

.menu-image-logged-in {display:none}

.logged-in .menu-image-logged-in {
	width:100%;
	height:9vmin;
	box-sizing:border-box;
	padding:0;
	padding:0.25vh 0.25vw 0.25vh 0.25vw;
	margin:0;
	display:block;
}

.logged-in .menu-image-logged-out {display:none}


----------------------------------------------- */


/* Small menu */
#menu-toggle, #toggle-1, #toggle-2, #toggle-3, #toggle-4, #toggle-5, #toggle-6, #toggle-7, #toggle-8, #toggle-9, #toggle-10, #toggle-11, #toggle-12, #toggle-13, #toggle-14 {
	cursor: pointer;
	display:none;
}


/* =Overlay
----------------------------------------------- */

#overlay {
	display:block;
	opacity:0;
	visibility:hidden;
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	overflow:auto;
	border-radius:0vw;
	box-sizing:border-box;
	padding:0;
	z-index:99999;
	background:rgba(21,37,53,0.95);
	background:rgba(64,64,64,0.8);
	transition: all 0.1s ease-in-out;
}

#box1-overlay, #box2-overlay, #box3-overlay, #box4-overlay, #box5-overlay, #box6-overlay, #box7-overlay, #box8-overlay, #box9-overlay, #box10-overlay, #box11-overlay, #box12-overlay, #box13-overlay, #box14-overlay {
	display:block;
	opacity:0;
	visibility:hidden;
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	overflow:auto;
	border-radius:0vw;
	box-sizing:border-box;
	padding:0;
	z-index:99999;
	background:rgba(21,37,53,0.95);
	background:rgba(64,64,64,0.8);
	transition: all 0.5s ease-in-out;
}


#menu-toggle:checked ~ #overlay {visibility:visible; opacity:1;}
#toggle-1:checked ~ #box1-overlay {visibility:visible; opacity:1;}
#toggle-2:checked ~ #box2-overlay {visibility:visible; opacity:1;}
#toggle-3:checked ~ #box3-overlay {visibility:visible; opacity:1;}
#toggle-4:checked ~ #box4-overlay {visibility:visible; opacity:1;}
#toggle-5:checked ~ #box5-overlay {visibility:visible; opacity:1;}
#toggle-6:checked ~ #box6-overlay {visibility:visible; opacity:1;}
#toggle-7:checked ~ #box7-overlay {visibility:visible; opacity:1;}
#toggle-8:checked ~ #box8-overlay {visibility:visible; opacity:1;}
#toggle-9:checked ~ #box9-overlay {visibility:visible; opacity:1;}
#toggle-10:checked ~ #box10-overlay {visibility:visible; opacity:1;}
#toggle-11:checked ~ #box11-overlay {visibility:visible; opacity:1;}
#toggle-12:checked ~ #box12-overlay {visibility:visible; opacity:1;}
#toggle-13:checked ~ #box13-overlay {visibility:visible; opacity:1;}
#toggle-14:checked ~ #box14-overlay {visibility:visible; opacity:1;}

#site-title-overlay {
	font-size:12.5vmin;
	padding:0;
	margin:0;
	font-weight:800;
	color:#e68a00;
	box-sizing:border-box;
	display:block;
}

.central-container-overlay {
	margin:auto;
	min-height:100vh;
	background-color:transparent;
	display: block;
	opacity:0.95;
	margin-top:0vw;
}

#content-prime-text-overlay {
	color:var(--bit-yellow, #ffcd1e);
	font-size:6vmin;
	padding:0;
	margin:0;
	font-weight:800;
	box-sizing:border-box;
	display:block;
	cursor:pointer;
	background-color:#404040;
	transition: all 0.5s ease-in-out;
}

#content-prime-text-overlay:hover {
	background-color:var(--bit-black, #000);
}

#content-graphics-overlay {
	padding:0.5vw;
	margin:0;
	box-sizing:border-box;
	display:block;
	background-color:#303030;
	transition: all 0.5s ease-in-out;
}

#content-graphics-overlay:hover {background-color:var(--bit-black, #000);}

#overlay-background {
	margin:auto;
	width:100%;
	padding:0;
	background-color:rgba(217,217,217,0.01);
	background-color:#606060;
	transition: all 0.5s ease-in-out;
}

#overlay-background:hover {background-color:#151515;}

#soc-overlay-icon {
	display:inline-block;
	height:6vw;
	width:6vw;
	padding:0.6vw;
}




/* =block1 styles
----------------------------------------------- */
.block1 {
	display:-webkit-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;	
	margin:auto;
	clear:both;
	height:auto;
	padding:0.5vw;
	box-sizing:border-box;
}

.block1-container {
	display:-webkit-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
	box-sizing:border-box;
	float:left;
	padding:0.5vw;
}

.block1-content {
	display:-webkit-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
	padding:1vw;
	box-sizing:border-box;
	display:inline-block;
	width:100%;
	background-color:rgba(200,200,200,0.8);
}

.block1-content-transparent {
	display:-webkit-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
	padding:1vw;
	box-sizing:border-box;
	display:inline-block;
	width:100%;
	background-color:none
}

.block1-image {
	width:100%;
	height:auto;
	margin:auto;
	margin-top:0vw;
}

.block1-primary-text {
	font-size:2.5vmin;
	padding:0.5vmin;
	margin:0;
	font-weight:500;
	color:#d9d9d9;
	color:var(--bit-black, #000000);
	box-sizing:border-box;
}

.block1-secondary-text {
	font-size:1.5vmin;
	padding:0.5vmin;
	text-align:justify;
}

.block1-sub-title, .block1-sub-title2, .block1-sub-title-c-img {
	font-size:3vmin;
	padding:1vmin;
	margin:0;
	font-weight:800;
	color:#d9d9d9;
	color:var(--bit-black, #000000);
	box-sizing:border-box;
}

.block1-sml-title, .block1-sml-title-c-img {
	font-size:2vmin;
	padding:1vmin;
	margin:0;
	font-weight:800;
	color:#d9d9d9;
	color:var(--bit-black, #000000);
	box-sizing:border-box;
}

.block1-big-title-c-img, .block1-big-title {
	font-size:4.5vmin;
	padding:1vmin;
	margin:0;
	font-weight:800;
	color:#d9d9d9;
	color:var(--bit-black, #000000);
	box-sizing:border-box;
}
 
.page-big-button {
	font-size:4em;
	padding:1vmin;
	margin:0;
	font-weight:800;
	color:#d9d9d9;
	color:var(--bit-black, #000000);
	box-sizing:border-box;
}
 
 
.block1-sub-title-c-img, .block1-big-title-c-img {
	margin-bottom:1vmin;
}



/* =Page Content Toggles
----------------------------------------------- */

.cover-block {
	position:absolute;
	top:0;
	left:0;
	right:0;
}

#cover-block-1, #cover-block-2, #cover-block-3, #cover-block-4, #cover-block-5 {
	visibility:visible;
	opacity:1;
	transition: all 1s ease-in-out;
}

#hidden-block-1, #hidden-block-2, #hidden-block-3, #hidden-block-4, #hidden-block-5 {
	visibility:hidden;
	opacity:0;
	transition: all 1s ease-in-out;
}

#toggle-1:checked ~ #cover-block-1 {visibility:hidden; opacity:0;}
#toggle-1:checked ~ #hidden-block-1 {visibility:visible; opacity:1;}
#toggle-2:checked ~ #cover-block-2 {visibility:hidden; opacity:0;}
#toggle-2:checked ~ #hidden-block-2 {visibility:visible; opacity:1;}
#toggle-3:checked ~ #cover-block-3 {visibility:hidden; opacity:0;}
#toggle-3:checked ~ #hidden-block-3 {visibility:visible; opacity:1;}
#toggle-4:checked ~ #cover-block-4 {visibility:hidden; opacity:0;}
#toggle-4:checked ~ #hidden-block-4 {visibility:visible; opacity:1;}
#toggle-5:checked ~ #cover-block-5 {visibility:hidden; opacity:0;}
#toggle-5:checked ~ #hidden-block-5 {visibility:visible; opacity:1;}

/* =Home Menu
----------------------------------------------- */

.central-logo-container {
	background-color:none;
	box-sizing:border-box;
	width:30vh;
	height:42vh;
	margin:auto;
	border-radius:17.5vh;
	padding:0vw;
	opacity:0;
	-webkit-animation: central-logo-animation 0.75s linear;
	-webkit-animation-delay: 0.2s;
	-moz-animation: central-logo-animation 0.75s linear;
	-moz-animation-delay: 0.2s;
	-ms-animation: central-logo-animation 0.75s linear;
	-ms-animation-delay: 0.2s;
	animation: central-logo-animation 0.75s linear;
	animation-delay: 0.2s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

@keyframes central-logo-animation {
0% { opacity: 0; }
100% { opacity:1; }
}

.central-logo {
	width:100%;
	height:100%;
	padding:0.25vw;
	box-sizing:border-box;
}

.central-logo-img {
	width:100%;
	height:100%;
	padding:0vw;
	box-sizing:border-box;
}



/* =Background
----------------------------------------------- */

#background-t {background:transparent; position:relative;}
#background-0 {background-color: rgba(255,205,30,0.9); min-height:90vh; padding-top:2vmin;}
#background-0 {background-color: rgba(255,233,153,0.9); min-height:90vh; padding-top:2vmin;}
#background-1 {background-color: rgba(56,136,178,0.9); min-height:90vh;padding-top:2vmin;}
#background-2 {background-color: rgba(133,97,166,0.9); min-height:90vh;padding-top:2vmin;}
#background-3 {background-color: rgba(88,85,81,0.9); min-height:90vh;padding-top:2vmin;}
#background-4 {background-color: rgba(102,157,97,0.9); min-height:90vh;padding-top:2vmin;}
#background-5 {background-color: #000000; min-height:90vh;padding-top:2vmin;}
#background-spare-b {background-color: #1e7329; min-height:90vh;padding-top:2vmin;}
#background-space-c {background-color: #97adc2; min-height:90vh;padding-top:2vmin;}

.colour-theme-spare-a {background-color:rgba(150,175,200,0.9);}
.colour-theme-0 {background-color:rgba(150,155,180,0.9);}
.colour-theme-0a {background:linear-gradient(to bottom, rgba(170,175,200,0.9) 5%, rgba(130,130,155,0.9) 100%); background-color:rgba(170,175,200,0.9);}
.colour-theme-0a:hover {background:linear-gradient(to bottom, rgba(130,130,155,0.9) 5%, rgba(170,175,200,0.9) 100%); background-color:rgba(190,195,220,0.9);}
.colour-theme-1 {background-color:rgba(145,145,170,0.9);}
.colour-theme-2 {background-color:rgba(205, 191, 217,0.9);}
.colour-theme-2 {background-color:rgba(133, 97, 166,0.9);}
.colour-theme-2a {background:linear-gradient(to bottom, rgba(130,135,160,0.9) 5%, rgba(100,100,125,0.9) 100%); background-color:rgba(140,145,160,0.9);}
.colour-theme-2a:hover {background:linear-gradient(to bottom, rgba(100,100,125,0.9) 5%, rgba(130,135,160,0.9) 100%); background-color:rgba(160,165,190,0.9);}
.colour-theme-3 {background-color:rgba(88,85,81,0.9);}
.colour-theme-4 {background-color:rgba(140,160,145,0.9);}
.colour-theme-5 {color:#eeeeee; background-color:rgba(40,40,40,0.9);}
.colour-theme-5a {color:#eeeeee; background:linear-gradient(to bottom, rgba(60,60,60,0.9) 5%, rgba(30,30,30,0.9) 100%); background-color:rgba(40,40,40,0.9);}
.colour-theme-5b {color:#cccccc; background:linear-gradient(to bottom, rgba(120,120,120,0.9) 5%, rgba(60,60,60,0.9) 100%); background-color:rgba(80,80,80,0.9);}
.colour-theme-5a:hover {background:linear-gradient(to bottom, rgba(30,30,30,0.9) 5%, rgba(0,60,60,0.9) 100%); background-color:rgba(40,40,40,0.9);}
.colour-theme-6 {background-color:rgba(216,82,73,0.9);}

.social-colour {background-color: #3888b2; color:#ffffff;}
.better-colour {background-color: #8561A6; color:#ffffff;}
.savvy-colour {background-color: #585551; color:#ffffff;}
.global-colour {background-color: #669d61; color:#ffffff;}


#social-colour {background-color: #3888b2; color:#ffffff;}
#better-colour {background-color: #8561A6; color:#ffffff;}
#savvy-colour {background-color: #585551; color:#ffffff;}
#global-colour {background-color: #669d61; color:#ffffff;}

#contact-title {color:#eeeeee;}

.white {color:#eeeeee;}

/* = Background - Landscape
----------------------------------------------- */


div [id^="back-img"] {
	background-size:100%;
	background-repeat: repeat;
	background-clip: border-box;
	min-height:150vh;
	width:100%;
	position:absolute;
	top:0;
	left:0;
}

div [id^="fixedback-img"] {
	background-size:100%;
	background-repeat: repeat;
	background-clip: border-box;
	position:fixed;
	height:100vh;
	width:100%;
	top:0;
	left:0;
}


/* =Footer
----------------------------------------------- */

#colophon:before {
	content:"";
	display:block;
	width:100%;
	height:0.5vmin;
	background-color: var(--et-green-1);
}

#colophon {
	position: relative;
	min-height:12vh;
	margin:auto;
	clear:both;
	display:block;
	background-color:var(--et-off-grey-1);
	z-index:999;
}

.site-info {
	box-sizing: border-box;
	Display:block;
	margin:auto;
	margin-top:0;
	padding:1vw;
	background:none;
	color:var(--et-blue-2);
	text-align:center;
	border-top: solid 0.1vw #7D9CCB;
	border-top:none;
}

#footer-social {
	text-decoration:none;
	display:inline-block;
	font-weight:bold;
	margin:auto;
	width:auto;
	height:auto;
}

#soc-footer-icon {
	display:inline-block;
	height:3.5vw;
	width:3.5vw;
	padding:0.4vw;
}




/* =Woocommerce
----------------------------------------------- */

/* =Woo Styles
----------------------------------------------- */

.woo-container {
	margin:auto;
	background-color:rgba(217,217,217,0.8);
	margin-top:0vh;
}

.woocommerce-MyAccount-navigation ul {
	list-style:none;
	margin:auto;
}

.woocommerce-MyAccount-navigation-link {
	color:var(--bit-yellow, #ffd217);
	font-size:2vmin;
	padding:0;
	margin:0;
	font-weight:800;
	box-sizing:border-box;
	display:block;
	cursor:pointer;
	background-color:#606060;
	text-align:center;
	transition: all 0.5s ease-in-out;
}

.woocommerce-MyAccount-navigation-link:hover {
	background-color:var(--bit-black, #000);
}

.woocommerce-MyAccount-navigation-link a {
	color:var(--bit-yellow, #ffd217);
	text-decoration:none;
}

.woocommerce ul.products li {width:33%;}

.product {padding:0.5vw 2vw 0 2vw;}

.woocommerce div.product p.price {font-size:16px; font-size:1.5vw; color:#213244; margin-bottom:0;}

.woocommerce div.product p.stock {font-size:12px; font-size:0.8vw; color:#213244;}

p.stock {font-size:12px; font-size:0.8vw; color:#213244;}
p.price {font-size:16px; font-size:1.5vw; color:#213244; margin-bottom:0;}

.woocommerce button.button.alt:hover, .woocommerce a.button.alt:hover, .wc-forward:hover, .woocommerce a.button:hover {color:#fff; background-color:#6899C4;}
.products li {background-color:fff;}

.shop-intro {padding:1.5vw 0 1vw 0; font-size:18px; font-size:1.5vw; color:#213244; margin-bottom:0; text-align:center;}

.woocommerce-notices-wrapper {padding:0;}
.woocommerce-account .woocommerce-MyAccount-content {width:80%; margin:auto; margin-left:10%; margin-right:10%; padding-top:1vw;}
.woocommerce-message, .woocommerce-error, .woocommerce-info {background-color:rgba(200,200,200,0.8);}
.woocommerce-message a, .woocommerce-error a {background-color:rgba(200,200,200,0.8);}
.woocommerce-message ul li, .woocommerce-error ul li {background-color:rgba(200,200,200,0.8);}

.woocommerce-message {border-top-color:#3f9155;}
.woocommerce-message::before {color:#3f9155;}

.woocommerce-cart-form {padding-top:1.5vw;}
.woocommerce-cart table.cart img {width:20%;}

.product_meta, .entry-title, .wc-memberships-member-discount-message {display:none;}

.logged-in .member-hidden {display:none;}

/* =/Woocommerce end
----------------------------------------------- */


/* =Woocommerce HS
----------------------------------------------- */
.woocommerce ul.products li {width:33%;}


.product {padding:0.5vw 2vw 0 2vw;}

.woocommerce div.product p.price {font-size:16px; font-size:1.5vw; color:#213244; margin-bottom:0;}
.woocommerce ul.products li.product .price {font-size:16px; font-size:1.5vw; color:#213244; margin-bottom:0;}
.woocommerce div.product p.stock {font-size:12px; font-size:0.8vw; color:#213244;}
.woocommerce ul.products li.product .woocommerce-loop-product__title {font-size:16px; font-size:1.5vw; color:#213244; margin-bottom:0; text-align:left;}

.products li {background-color:fff;}

.shop-intro {padding:1.5vw 0 1vw 0; font-size:18px; font-size:1.5vw; color:#213244; margin-bottom:0; text-align:center;}

.woocommerce-price-amount {font-size:1.5vw; color:#213244; margin-bottom:0;}

.woocommerce-account .woocommerce-MyAccount-content {width:80%; margin:auto; margin-left:10%; margin-right:10%; padding-top:1vw;}
.woocommerce-message, .woocommerce-error, .woocommerce-info {background-color:#b9b9b9;}
.woocommerce-message a, .woocommerce-error a {background-color:#b9b9b9;}
.woocommerce-message ul li, .woocommerce-error ul li {background-color:#b9b9b9;}

.woocommerce-message {border-top-color:#3f9155;}
.woocommerce-message::before {color:#3f9155;}

.woocommerce-cart-form {padding-top:1.5vw;}
.woocommerce-cart table.cart img {width:20%;}
.quantity {font-size:1.25vw; margin-bottom:1vw; background-color:#dddddd; text-align:left;}

.woocommerce span.onsale {display:none;}
p.in-stock {display:none;}

#coupon_code {width:100%; padding: 1vw;}

.diy-product-button {margin-bottom:2em;}



/* MEDIA : TABLET
----------------------------------------------- */

@media only screen and (max-width: 1280px) {/* For tablets and small monitors: */

.col-8 {width:100%;}
.col-9 {width: 100%;}
.col-10 {width: 100%;}
.col-11 {width: 100%;}
.col-12 {width: 100%;}

#soc-footer-icon {height:5.3vw; width:5.3vw; padding:0.5vw;}
#youtube-5-3 {height:55vw;}

}

/* MEDIA : MOBILE DEVICE
----------------------------------------------- */

@media only screen and (max-width: 960px) {/* For mobile phones */

.mob-hidden {display:none;}
.mob-only {display:block;}

.cl-2 {width:50%;}
.col-3 {width:50%;}
.col-3a {width:100%;}
.col-3b {width:25%;}
.col-4 {width:100%;}
.col-4a {width:75%;}
.col-6 {width:100%;}
.col-6a {width:50%;}
.col-8 {width: 100%;}
.col-9 {width: 100%;}
.col-10 {width: 100%;}
.col-11 {width: 100%;}
.col-12 {width: 100%;}

.block1 {display:block;}
#youtube-5-3 {height:55vw;}


#content-prime-text-overlay {
	font-size:10vmin;
}


/* = Footer and Overlay
----------------------------------------------- */

#soc-footer-icon {height:8vw; width:8vw; padding:0.7vw;}

#soc-overlay-icon {
	display:inline-block;
	height:12vw;
	width:12vw;
	padding:1vw;
}

/* = Other Content TBC
----------------------------------------------- */

.mob-center {text-align:center;}

div [id^="pointer"] {
	padding:0.4vw 1vw 0.3vw 1vw;
	border-radius:0.4vw;
	right:4vw;
	top:2.8vw;
	font-size:6vw;
	}


.block1 {box-sizing:border-box;}
.block1-container {box-sizing:border-box; margin-top:1vmin;}

.block1-sub-title, .block1-sub-title-c-img, .block1-big-title, .block1-big-title-c-img {font-size:6.5vmin;}
.block1-sub-title2 {font-size:5vmin;}
.block1-sml-title, .block1-sml-title-c-img {font-size:5vmin; margin-bottom:1vw;}
.block1-primary-text {font-size:4.5vmin;}
.block1-secondary-text {font-size:4vmin;}

.page-big-button {font-size:2.25em}


.main-section-title-under {
	font-size:1.75em;
	padding:0.5vmin;
	color:#d9d9d9;
	color:var(--bit-black, #000000);
	box-sizing:border-box;
}

#soc-footer-icon {height:10vmin; width:10vmin; padding:0.7vw;}

#soc-overlay-icon {
	display:inline-block;
	height:12vmin;
	width:12vmin;
	padding:1vmin;
}


/* Woocommerce
----------------------------------------------- */
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button .woocommerce a.button.alt, .wc-forward, .woocommerce a.button{
	line-height: 1.5;
	border-radius:0.5vmin;
	box-shadow: inset 0vw 0.075vw 0.5vw #808080;
	font-size:5vmin;
	padding:1vmin;
}

.woocommerce ul.products li.product .price {font-size:16px; font-size:4.5vw; color:#213244; margin-bottom:0;}
.woocommerce ul.products li.product .woocommerce-loop-product__title {font-size:16px; font-size:5vmin; color:#213244; margin-bottom:0; text-align:left; padding:2.5vmin;}

/* Woocommerce End
----------------------------------------------- */

}


/* MEDIA : PORTRAIT DEVICE
----------------------------------------------- */

@media only screen and (orientation:portrait) {/* For portrait Devices */

/* = Background - Portrait
----------------------------------------------- */


div [id^="back-img"] {
	background-size:100%;
	background-repeat: repeat;
	background-clip: border-box;
	min-height:120vh;
	width:100%;
	position:absolute;
	top:0;
	left:0;
}

div [id^="fixedback-img"] {
	background-size:100%;
	background-repeat: repeat;
	background-clip: border-box;
	position:fixed;
	height:100vh;
	width:100%;
	top:0;
	left:0;
}

#map {height:80vh;}
#full-iframe {height:auto;}
#gform1 {height:150vh;}

.port-only {display:block;}
.port-hidden {display:none;}

}


/* MEDIA : PORTRAIT DEVICE MOBILE
----------------------------------------------- */

@media only screen and (max-width: 960px) {/* For portrait Devices - Deals with top of homepage issue */

.central-logo-container {width:25vh; height:35vh; margin-top:4vh; margin-bottom:2vh; border-radius:15vh;}
.content-heading {font-size:8vmin; margin-top:6vw;background-color:rgba(255,210,25,0.7);}
.content-heading-secondary {font-size:5vmin;}
.round-icon {margin-top:1vh; margin-bottom:1vw; width:12vw; height:12vw; border-radius:6vw;font-size:3.5vw;}
.button, button:visited {border-radius:0vmin;}
.product-text {font-size:1.15em}


/* =Woocommerce Mobile
----------------------------------------------- */
.woocommerce ul.products li {width:33%;}
.shop-intro {padding:1.5vmin 0 1vmin 0; font-size:18px; font-size:3.5vw;}
.product {padding:0.5vmin 2vmin 0 2vmin;}

.quantity {font-size:4vmin; margin-bottom:2vmin; background-color:#dddddd;}
.woocommerce div.product p.price {font-size:24px; font-size:7.5vmin;}
.woocommerce ul.products li.product .price {font-size:24px; font-size:3.5vmin;}
.woocommerce div.product p.stock {font-size:16px; font-size:5vmin;}
.woocommerce ul.products li.product .woocommerce-loop-product__title {font-size:24px; font-size:3.5vmin;}
.woocommerce button.button,.woocommerce button.button.alt, .woocommerce a.button.alt, .wc-forward, .woocommerce a.button {font-size:6vmin;}
.woocommerce a.button {width:100%}
.woocommerce-account .woocommerce-MyAccount-content {width:100%; margin:auto; margin-left:10%; margin-right:10%; padding-top:1vmin;}
.woocommerce-notices-wrapper {padding:0 2vmin 0 2vmin;}
.woocommerce-cart-form {padding-top:1.5vmin;}
.woocommerce-cart table.cart img {width:20%;}


}