/*
	Theme Name: iTeach
	Theme URI: 
	Description: 
	Version: 1.0
	Author: Lava Design Studio
	Author URI: http://www.lavadesignstudio.co.uk
*/
/*------------------------------------*\
    MAIN
\*------------------------------------*/


@import url('https://fonts.googleapis.com/css2?family=Rokkitt&display=swap');

/* Set Colours */
:root {
  --tt-blue: #282846;
  --tt-green: #2dc576;
  --mb-navy: #1d2133;
  --mb-orange: #e25710;
  --tt-blue-tint: #dadaf2;
  --cc-yellow: #FFC900;
  --cc-orange: #ef7900;
  --cc-white:#fff;
  --cc-blue: #00B1F5;
  --cc-azul: #246EB9;
  --cc-dark: #241F20;
  --cc-purple: #cb5198;
  --cc-lightpink: #f3a6c9;
  --cc-darkpink: #e60e82;
  --cc-lavendar: #7670b2;
  --cc-lightgrey: #939598;
  --cc-darkgrey: #444444;
  --cc-headerFont: 'Rokkitt';
  --cc-darkgreen: #004e56;
  --cc-lime: #9bc31c;
}

/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
html {
    height: 100%;
    width: 100%;
}
body {
	font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
	color:var(--cc-darkgrey);
	background: #eee;
	display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
}
body.page-template-homepage {background: #fff;}
h1, h2, h3, h4, h5, h6 {margin: 0px 0px 10px 0px; font-weight: normal; 
    font-family: var(--cc-headerFont);
    color: var(--cc-dark);
}
h1{
    line-height: 1.2;
}
p{
    line-height: 1.5;
}
@charset "utf-8";
/***** Grid  *****/
.container .row {
  margin-left: -1rem;
  margin-right: -1rem;
}
.container .row.smlgutter {
	margin-left: -0.5rem;
  	margin-right: -0.5rem;
	margin-bottom: 1em;
}
.row {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3em;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.row .col {
  float: left;
  box-sizing: border-box;
  margin-bottom: 1em;
}
.row.no-margin, .row.no-margin .col {
	margin-bottom: 0;
	}
.row > .col {
	padding: 0 1rem;
	}
.row.smlgutter > .col {
	padding: 0 0.5rem;
	}
.row .col[class*="push-"], .row .col[class*="pull-"] {
  position: relative;
}
.row .col.s1 {
  width: 8.3333333333%;
  margin-left: auto;
  left: auto;
  right: auto;
}
.row .col.s2 {
  width: 16.6666666667%;
  margin-left: auto;
  left: auto;
  right: auto;
}
.row .col.s3 {
  width: 25%;
  margin-left: auto;
  left: auto;
  right: auto;
}
.row .col.s4 {
  width: 33.3333333333%;
  margin-left: auto;
  left: auto;
  right: auto;
}
.row .col.s5 {
  width: 41.6666666667%;
  margin-left: auto;
  left: auto;
  right: auto;
}
.row .col.s6 {
  width: 50%;
  margin-left: auto;
  left: auto;
  right: auto;
}
.row .col.s7 {
  width: 58.3333333333%;
  margin-left: auto;
  left: auto;
  right: auto;
}
.row .col.s8 {
  width: 66.6666666667%;
  margin-left: auto;
  left: auto;
  right: auto;
}
.row .col.s9 {
  width: 75%;
  margin-left: auto;
  left: auto;
  right: auto;
}
.row .col.s10 {
  width: 83.3333333333%;
  margin-left: auto;
  left: auto;
  right: auto;
}
.row .col.s11 {
  width: 91.6666666667%;
  margin-left: auto;
  left: auto;
  right: auto;
}
.row .col.s12 {
  width: 100%;
  margin-left: auto;
  left: auto;
  right: auto;
}
.row .col.offset-s1 {
  margin-left: 8.3333333333%;
}
.row .col.pull-s1 {
  right: 8.3333333333%;
}
.row .col.push-s1 {
  left: 8.3333333333%;
}
.row .col.offset-s2 {
  margin-left: 16.6666666667%;
}
.row .col.pull-s2 {
  right: 16.6666666667%;
}
.row .col.push-s2 {
  left: 16.6666666667%;
}
.row .col.offset-s3 {
  margin-left: 25%;
}
.row .col.pull-s3 {
  right: 25%;
}
.row .col.push-s3 {
  left: 25%;
}
.row .col.offset-s4 {
  margin-left: 33.3333333333%;
}
.row .col.pull-s4 {
  right: 33.3333333333%;
}
.row .col.push-s4 {
  left: 33.3333333333%;
}
.row .col.offset-s5 {
  margin-left: 41.6666666667%;
}
.row .col.pull-s5 {
  right: 41.6666666667%;
}
.row .col.push-s5 {
  left: 41.6666666667%;
}
.row .col.offset-s6 {
  margin-left: 50%;
}
.row .col.pull-s6 {
  right: 50%;
}
.row .col.push-s6 {
  left: 50%;
}
.row .col.offset-s7 {
  margin-left: 58.3333333333%;
}
.row .col.pull-s7 {
  right: 58.3333333333%;
}
.row .col.push-s7 {
  left: 58.3333333333%;
}
.row .col.offset-s8 {
  margin-left: 66.6666666667%;
}
.row .col.pull-s8 {
  right: 66.6666666667%;
}
.row .col.push-s8 {
  left: 66.6666666667%;
}
.row .col.offset-s9 {
  margin-left: 75%;
}
.row .col.pull-s9 {
  right: 75%;
}
.row .col.push-s9 {
  left: 75%;
}
.row .col.offset-s10 {
  margin-left: 83.3333333333%;
}
.row .col.pull-s10 {
  right: 83.3333333333%;
}
.row .col.push-s10 {
  left: 83.3333333333%;
}
.row .col.offset-s11 {
  margin-left: 91.6666666667%;
}
.row .col.pull-s11 {
  right: 91.6666666667%;
}
.row .col.push-s11 {
  left: 91.6666666667%;
}
.row .col.offset-s12 {
  margin-left: 100%;
}
.row .col.pull-s12 {
  right: 100%;
}
.row .col.push-s12 {
  left: 100%;
}
/* Responsive Styles */
@media only screen and (min-width: 40em) { /* < 640px */
/* Grid - Medium */
	.row .col.m1 {
    width: 8.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.m2 {
    width: 16.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.m3 {
    width: 25%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.m4 {
    width: 33.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.m5 {
    width: 41.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.m6 {
    width: 50%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.m7 {
    width: 58.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.m8 {
    width: 66.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.m9 {
    width: 75%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.m10 {
    width: 83.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.m11 {
    width: 91.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.m12 {
    width: 100%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.offset-m1 {
    margin-left: 8.3333333333%;
  }
  .row .col.pull-m1 {
    right: 8.3333333333%;
  }
  .row .col.push-m1 {
    left: 8.3333333333%;
  }
  .row .col.offset-m2 {
    margin-left: 16.6666666667%;
  }
  .row .col.pull-m2 {
    right: 16.6666666667%;
  }
  .row .col.push-m2 {
    left: 16.6666666667%;
  }
  .row .col.offset-m3 {
    margin-left: 25%;
  }
  .row .col.pull-m3 {
    right: 25%;
  }
  .row .col.push-m3 {
    left: 25%;
  }
  .row .col.offset-m4 {
    margin-left: 33.3333333333%;
  }
  .row .col.pull-m4 {
    right: 33.3333333333%;
  }
  .row .col.push-m4 {
    left: 33.3333333333%;
  }
  .row .col.offset-m5 {
    margin-left: 41.6666666667%;
  }
  .row .col.pull-m5 {
    right: 41.6666666667%;
  }
  .row .col.push-m5 {
    left: 41.6666666667%;
  }
  .row .col.offset-m6 {
    margin-left: 50%;
  }
  .row .col.pull-m6 {
    right: 50%;
  }
  .row .col.push-m6 {
    left: 50%;
  }
  .row .col.offset-m7 {
    margin-left: 58.3333333333%;
  }
  .row .col.pull-m7 {
    right: 58.3333333333%;
  }
  .row .col.push-m7 {
    left: 58.3333333333%;
  }
  .row .col.offset-m8 {
    margin-left: 66.6666666667%;
  }
  .row .col.pull-m8 {
    right: 66.6666666667%;
  }
  .row .col.push-m8 {
    left: 66.6666666667%;
  }
  .row .col.offset-m9 {
    margin-left: 75%;
  }
  .row .col.pull-m9 {
    right: 75%;
  }
  .row .col.push-m9 {
    left: 75%;
  }
  .row .col.offset-m10 {
    margin-left: 83.3333333333%;
  }
  .row .col.pull-m10 {
    right: 83.3333333333%;
  }
  .row .col.push-m10 {
    left: 83.3333333333%;
  }
  .row .col.offset-m11 {
    margin-left: 91.6666666667%;
  }
  .row .col.pull-m11 {
    right: 91.6666666667%;
  }
  .row .col.push-m11 {
    left: 91.6666666667%;
  }
  .row .col.offset-m12 {
    margin-left: 100%;
  }
  .row .col.pull-m12 {
    right: 100%;
  }
  .row .col.push-m12 {
    left: 100%;
  }
}
@media only screen and (min-width: 48em) { /* < 768px */
/* Grid - Medium Large */
	.row .col.ml1 {
    width: 8.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.ml2 {
    width: 16.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.ml3 {
    width: 25%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.ml4 {
    width: 33.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.ml5 {
    width: 41.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.ml6 {
    width: 50%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.ml7 {
    width: 58.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.ml8 {
    width: 66.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.ml9 {
    width: 75%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.ml10 {
    width: 83.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.ml11 {
    width: 91.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.ml12 {
    width: 100%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.offset-ml1 {
    margin-left: 8.3333333333%;
  }
  .row .col.pull-ml1 {
    right: 8.3333333333%;
  }
  .row .col.push-ml1 {
    left: 8.3333333333%;
  }
  .row .col.offset-ml2 {
    margin-left: 16.6666666667%;
  }
  .row .col.pull-ml2 {
    right: 16.6666666667%;
  }
  .row .col.push-ml2 {
    left: 16.6666666667%;
  }
  .row .col.offset-ml3 {
    margin-left: 25%;
  }
  .row .col.pull-ml3 {
    right: 25%;
  }
  .row .col.push-ml3 {
    left: 25%;
  }
  .row .col.offset-ml4 {
    margin-left: 33.3333333333%;
  }
  .row .col.pull-ml4 {
    right: 33.3333333333%;
  }
  .row .col.push-ml4 {
    left: 33.3333333333%;
  }
  .row .col.offset-ml5 {
    margin-left: 41.6666666667%;
  }
  .row .col.pull-ml5 {
    right: 41.6666666667%;
  }
  .row .col.push-ml5 {
    left: 41.6666666667%;
  }
  .row .col.offset-ml6 {
    margin-left: 50%;
  }
  .row .col.pull-ml6 {
    right: 50%;
  }
  .row .col.push-ml6 {
    left: 50%;
  }
  .row .col.offset-ml7 {
    margin-left: 58.3333333333%;
  }
  .row .col.pull-ml7 {
    right: 58.3333333333%;
  }
  .row .col.push-ml7 {
    left: 58.3333333333%;
  }
  .row .col.offset-ml8 {
    margin-left: 66.6666666667%;
  }
  .row .col.pull-ml8 {
    right: 66.6666666667%;
  }
  .row .col.push-ml8 {
    left: 66.6666666667%;
  }
  .row .col.offset-ml9 {
    margin-left: 75%;
  }
  .row .col.pull-ml9 {
    right: 75%;
  }
  .row .col.push-ml9 {
    left: 75%;
  }
  .row .col.offset-ml10 {
    margin-left: 83.3333333333%;
  }
  .row .col.pull-ml10 {
    right: 83.3333333333%;
  }
  .row .col.push-ml10 {
    left: 83.3333333333%;
  }
  .row .col.offset-ml11 {
    margin-left: 91.6666666667%;
  }
  .row .col.pull-ml11 {
    right: 91.6666666667%;
  }
  .row .col.push-ml11 {
    left: 91.6666666667%;
  }
  .row .col.offset-ml12 {
    margin-left: 100%;
  }
  .row .col.pull-ml12 {
    right: 100%;
  }
  .row .col.push-ml12 {
    left: 100%;
  }
}
@media only screen and (min-width: 64em) { /* < 1024px */
/* Grid - Large */
	.row .col.l1 {
    width: 8.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.l2 {
    width: 16.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.l3 {
    width: 25%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.l4 {
    width: 33.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.l5 {
    width: 41.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.l6 {
    width: 50%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.l7 {
    width: 58.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.l8 {
    width: 66.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.l9 {
    width: 75%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.l10 {
    width: 83.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.l11 {
    width: 91.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.l12 {
    width: 100%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.offset-l1 {
    margin-left: 8.3333333333%;
  }
  .row .col.pull-l1 {
    right: 8.3333333333%;
  }
  .row .col.push-l1 {
    left: 8.3333333333%;
  }
  .row .col.offset-l2 {
    margin-left: 16.6666666667%;
  }
  .row .col.pull-l2 {
    right: 16.6666666667%;
  }
  .row .col.push-l2 {
    left: 16.6666666667%;
  }
  .row .col.offset-l3 {
    margin-left: 25%;
  }
  .row .col.pull-l3 {
    right: 25%;
  }
  .row .col.push-l3 {
    left: 25%;
  }
  .row .col.offset-l4 {
    margin-left: 33.3333333333%;
  }
  .row .col.pull-l4 {
    right: 33.3333333333%;
  }
  .row .col.push-l4 {
    left: 33.3333333333%;
  }
  .row .col.offset-l5 {
    margin-left: 41.6666666667%;
  }
  .row .col.pull-l5 {
    right: 41.6666666667%;
  }
  .row .col.push-l5 {
    left: 41.6666666667%;
  }
  .row .col.offset-l6 {
    margin-left: 50%;
  }
  .row .col.pull-l6 {
    right: 50%;
  }
  .row .col.push-l6 {
    left: 50%;
  }
  .row .col.offset-l7 {
    margin-left: 58.3333333333%;
  }
  .row .col.pull-l7 {
    right: 58.3333333333%;
  }
  .row .col.push-l7 {
    left: 58.3333333333%;
  }
  .row .col.offset-l8 {
    margin-left: 66.6666666667%;
  }
  .row .col.pull-l8 {
    right: 66.6666666667%;
  }
  .row .col.push-l8 {
    left: 66.6666666667%;
  }
  .row .col.offset-l9 {
    margin-left: 75%;
  }
  .row .col.pull-l9 {
    right: 75%;
  }
  .row .col.push-l9 {
    left: 75%;
  }
  .row .col.offset-l10 {
    margin-left: 83.3333333333%;
  }
  .row .col.pull-l10 {
    right: 83.3333333333%;
  }
  .row .col.push-l10 {
    left: 83.3333333333%;
  }
  .row .col.offset-l11 {
    margin-left: 91.6666666667%;
  }
  .row .col.pull-l11 {
    right: 91.6666666667%;
  }
  .row .col.push-l11 {
    left: 91.6666666667%;
  }
  .row .col.offset-l12 {
    margin-left: 100%;
  }
  .row .col.pull-l12 {
    right: 100%;
  }
  .row .col.push-l12 {
    left: 100%;
  }
}
/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}
.clear:after {
    clear:both;
}
.clear {
    *zoom:1;
}
img {
	max-width:100%;
	vertical-align:bottom;
}
a {
	color:var(--cc-darkgreen);
	text-decoration:none;
	transition: border-color .1s ease-in;
    /*border-bottom: 1px solid rgba(45,49,58,.7);*/
}
a:hover {
	color:var(--tt-darkgrey);
	border-color: rgba(45,49,58,0)!important;
	text-decoration:underline;
}
a:focus {
	outline:0;
}
a:hover,
a:active {
	outline:0;
}
input:focus {
	outline:0;
}
/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/
/* wrapper */
#main-wrapper {
	max-width: 1200px;
	margin: auto;
	padding: 30px 30px 30px 30px;
	overflow: hidden;
	flex-grow: 1;
    width: 100%;
    width: 1;
}
/* header */
.header {
	position: relative;
	z-index: 9999;
	width: 100%;
	box-sizing: border-box;
	-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
	overflow: visible;
	background: var(--cc-white);
}
.header .logout{color:var(--cc-yellow);}
.header div.header-container {position: relative; max-width: 1200px; padding-left: 30px; padding-right: 30px; margin: auto;}
/*.header.homepage div.header-container {max-width: 100%;}*/

.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

.sticky + #main-wrapper {
    padding-top: 195px;
}

.sticky + #home-feature {
    padding-top: 176px;
}

/* Login Page */
div#theme-my-login input[type="text"] {
	width: 100%;
	height: 40px;
	border: 1px solid #ccc;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding-left: 15px;
	padding-right: 15px;
	}
div#theme-my-login input[type="password"] {
	width: 100%;
	height: 40px;
	border: 1px solid #ccc;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding-left: 15px;
	padding-right: 15px;
	}	
	div#theme-my-login input[type="submit"] { border: 0px;
		background: #3498db;
		color: #fff;
		display: block;
		height: 35px;
		padding: 0px 10px 0px 10px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		float: right;
	}
	div#theme-my-login p.error, div#theme-my-login p.message {
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		}
.tml-login .tml-rememberme-wrap {
	display: table-cell;
	vertical-align: middle;
	}
/* Login Box */
div.login {
	position: absolute;
	right: 30px;
	top: -10px;
	z-index: 99999;
	padding: 50px 30px 20px 30px;
	width: 300px;
	transition: all ease 0.3s;
	}
	div.login.active {
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		background: #fff;
		-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
		-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
		box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
		background: #fff;
		}
	.login p{
	    position: absolute;
        left: 0;
        top: 41px;
        /*font-family: var(--cc-headerFont);*/
        font-size: 16px;
        color: var(--cc-blue);
        font-weight: bold;
	}
	a.header-login {float: right;}	
	a.header-login.btn {
    background: var(--tt-green);
    border-color: var(--tt-green);
    color: #FFF;
    font-weight: bold;
    margin-top:0;
    }
    .login.active a.header-login.btn.active {
    background: #fff;
    border-color: var(--tt-green);
    color: var(--tt-green);
    }
	div.login-box {
		display: none;
		padding-top: 20px;
		float: left;
		width: 100%;
		}
		div.login-btn {width: 100%; height: 40px; float: left;color:#fff;}
		div.login-btn a.logout {margin-left: 10px;}
		div.tml-rememberme-submit-wrap {width: 220px; margin-top: 20px; display: block; overflow: hidden;}
		div#theme-my-login1 {display: block; overflow: hidden; width: 100%; height: 213px;}
		div#theme-my-login1 input.input {
			background: #eee; 
			border: 0px;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
			padding: 8px;
			height: 40px;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			}
			div#theme-my-login1 input#wp-submit1 {
				border: 0px;
				background: var(--tt-green);
				color: #fff;
				display: block;
				height: 35px;
				padding: 0px 10px 0px 10px;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				border-radius: 4px;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				float: right;
				}
				div#theme-my-login1 p.tml-rememberme-wrap {
					display: table-cell;
    				vertical-align: top;
					height: 35px;
					font-size: 14px;
					}
				div#theme-my-login1 p {margin-bottom: 0px;}	
a.help {
	font-size: 14px;
	}
/* Restricted */
div.restricted {
	width: 100%;
	text-align: center;
	}
	div.restricted a.btn {float: none; display: inline-block;}
/* Buttons */
.btn {
	display: block;
	float: left;
	height: 40px;
	line-height: 36px;
	padding-left: 25px;
	padding-right: 25px;
	border: 0px;
	border: 2px solid var(--tt-blue);
	color: var(--tt-blue);
	-webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
	margin-top: 20px;
	transition: all ease 0.3s;
	font-weight:bold;
	}
	.btn:hover {
		border: 2px solid var(--tt-blue);
		color: #fff;
		background: var(--tt-blue);
		text-decoration: none;
		}
.btn.btn-green {
    border-color: green;
    color: green;
}
.btn.btn-green:hover{
    background:green;
    color: #FFF;
}
.btn-cta {
    background-color: var(--cc-yellow);
    border-color: var(--cc-yellow);
    color: var(--cc-white);
}

.btn-cta:hover{
    background-color: var(--cc-yellow);
    border-color: var(--cc-yellow);
    color: var(--cc-white);
}

.view_resource.btn, .join.btn {
font-weight: bold;
}

.join.btn{
    background-color: var(--cc-lime);
    color: white;
    border-color:var(--cc-lime);
}

.join.btn:hover{
    background-color: white;
    color: var(--cc-lime);
    border-color:var(--cc-lime)!important;
}

.login .join.btn{
    position: absolute;
    right: 0;
    top: 30px;
}
.join i {
    margin-right: 5px;
}

/*.resource:not(:last-of-type) a.join {
    display: none;
}*/

.view_resource.btn{
    border: 2px solid var(--tt-blue);
    background: white;
    color: var(--tt-blue);
}
.view_resource.btn:hover{
    background:var(--tt-blue);
    color:white;
}
.join.btn.btn-orange {
    transition: all .2s ease-in-out;
    border: 2px solid var(--mb-orange);
    background: var(--mb-orange);
    color: #fff;
    font-size: 18px;
}
.join.btn.btn-orange:hover{
    transform: scale(1.1);
}
/* logo */
.logo {
    float: left;
    width: 225px;
    height: 90px;
    margin-top: 1em;
    display: flex;
    margin-bottom: 1em;
}
.logo-img {
}
/* nav */
nav.nav {
    float: left;
    padding-top: 10px;
    padding-bottom: 6px;
    padding-left: 20px;
    clear: both;
    margin-bottom: 0;
    margin-left: calc(50% - 50vw);
    width: 100vw;
    background: var(--cc-yellow);
    font-family: var(--cc-headerFont) ;
}
	nav.nav ul {padding: 0px; margin: 0px auto; max-width: 1200px;
    padding-left: 15px;}
	nav.nav li {
		list-style-type: none;
		display: inline-block;
		}
		nav.nav li:last-child {display: none;}
		nav.nav li a {
            float: left;
            margin-right: 20px;
            font-size: 20px;
            color: var(--cc-dark);
            font-weight: 300;
            border-radius: 2px;
            padding: 2px 6px;
            position: relative;
            transition:  all 0.3s ease-out;
		}
		li.current-menu-item a, li.current-page-ancestor a {
            color: white!important;
            font-weight:700;
        }
		nav.nav li a:hover {color: white;
         text-decoration: none;}
         
/* Mobile Menu Btn */
span.mobile-menu-btn {
	display: none;
	cursor: pointer;
	position: absolute;
	top: 50px;
	right: 20px;
	width: 50px;
	height: 50px;
	background: url(img/menu_icon.png) bottom no-repeat;
	transition: all ease 0.3s;
	}	
	span.mobile-menu-btn.active {background: url(img/menu_icon.png) top no-repeat;}	
/* Home Feature */
div#home-feature {
	width: 100%;
	max-width:1200px;
	overflow: hidden;
	background: #fff;
	margin: auto;
	}
	div.slider {
		width: 50%;
		height: 100%;
		float: right;
		overflow: hidden;
		}
		div.slider div.slick-slide {
			margin-top: 30px;
			width: 100%; 
			height: 300px;
			background-size: auto 100%!important;
			background-position:center!important;
			}
	div.welcome-text {
		width: 50%;
		height: 100%;
		float: left;
		box-sizing: border-box;
		padding: 50px 35px;
		background: #fff;
		}	
		div.welcome-text h1 {font-size: 38px; line-height: 44px;}
		div.welcome-text p {max-width: 600px; font-size: 1rem;}
		div.welcome-text a.btn {margin-top: 10px;}
/* Mobile Welcome */
section.mobile-welcome {
	width: 100%;
	background: #f4f4f4;
	color: #333;
	height: 40px;
	line-height: 40px;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
	}	
	section.mobile-welcome a.logout {
		float: right;
		}	
/* Sign Up */
.pricing {
    display: grid;
    align-items: stretch;
    column-gap: 1rem;
}
.signup {
  margin-top: 20px;
  background: #fff;
  border-bottom: 3px solid #ddd;
  /*border-radius:15px;*/
}
.signup:nth-of-type(1) h3 {background: var(--cc-lime);}
.signup:nth-of-type(2) h3 {background: var(--cc-lavendar);}
.signup:nth-of-type(3) h3 {background: var(--cc-blue);}
.signup h3 {
  background: #ddd;
  margin: 0;
  height: 50px;
  line-height: 50px;
  padding: 0px 20px;
  color: #fff;
  text-align:center;
}
.signup ul {
  padding: 0;
  margin: 0;
}
.signup ul li {
  margin-bottom: 10px;
  padding-left: 25px;
  list-style-type: none;
  position: relative;
}
.signup ul li::before {
    content: "\e906";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    position: absolute;
    left: 0;
    top: 3px;
    font-size: 14px;
    color: #6AA732;
}
.signup .content {
  padding: 25px;
}

@media screen and (min-width: 60em){
    .pricing{
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Hero */
section.hero {
	width: 100%;
	min-height: 100px;
	box-sizing: border-box;
	overflow: hidden;
	background: var(--cc-blue);
	text-align: center;
	color: #fff;
	padding-top: 30px;
	padding-bottom: 30px;
	}
	section.hero h2 {
		text-align: center;
		margin: auto;
		color: #fff;
		font-size: 36px;
		margin-bottom: 10px;
		}
		section.hero p {
			font-size: 1rem;
			margin: auto;
			}
		section.hero a.btn {
			color: #fff;
			float: none;
			border: 2px solid #fff;
			display: inline-block;
			margin-top: 40px;
			}
			section.hero a.btn:hover {
				color: #3498db;
				background: #fff;
				}	
/* Term List */
ul.term-list {padding: 0px; margin: 0px; width: 100%; clear: both; display: block; margin-bottom: 30px; min-height: 30px; overflow: hidden;}
ul.term-list li {
	list-style-type: none;
	float: left;
	}
	ul.term-list span {margin-left: 10px; margin-right: 10px; float: left;}
/* Three Col */
div.three-col {
	width: 30%;
	border: 1px solid #eee;
	float: left;
	margin-right: 5%;
	text-align: center;
	box-sizing:border-box;
	overflow: hidden;
	}
	div.three-col a.image-link {
		display: block;
		width: 100%;
		height: 225px;
		overflow: hidden;
		text-align: center;
		position: relative;
    	overflow: hidden;
		background: #ccc;
		}
	div.three-col img {
		width: 100%;
		max-width: none;
		height: auto;
		position: absolute;
		top: -9999px;
		bottom: -9999px;
		left: -9999px;
		right: -9999px;
		margin: auto;
		}
	div.three-col h2 {
		text-align: center;
		width: 100%;
		height: 50px;
		line-height: 50px;
		margin-bottom: 0px;
		background: #004A97;
		color: #fff;
		-webkit-border-top-left-radius: 4px;
		-webkit-border-top-right-radius: 4px;
		-moz-border-radius-topleft: 4px;
		-moz-border-radius-topright: 4px;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
		}
	div.three-col h3 {
		height: 80px; 
		padding: 10px 20px 10px 20px; 
		font-size: 18px; 
		border-top: 1px solid #ccc;
		-webkit-border-bottom-right-radius: 4px;
		-webkit-border-bottom-left-radius: 4px;
		-moz-border-radius-bottomright: 4px;
		-moz-border-radius-bottomleft: 4px;
		border-bottom-right-radius: 4px;
		border-bottom-left-radius: 4px;
		background: #fff;
		}
	div.three-col h3 a {color: #333;}
	div.three-col:nth-of-type(3) {margin-right: 0px;}
	h2.subtitle {
		margin-top: 40px;
		width: 100%;
		font-size: 28px;
	}
	div.featured-section {
		width: 100%;
		float: left;
		overflow: hidden;
		margin-top: 40px;
		}
/* Slick Slider */
div.slick-slider {margin-bottom: 1em;}	
button.slick-next {right: 10px; z-index:999;}
button.slick-prev {left: 10px; z-index:999;}
/*.resource:last-of-type .overlay {
        display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: url(img/member_overlay_cc.png) no-repeat center center;
    z-index: 2;
    background-size: cover;
}
.overlay a{
    display: block;
    position:absolute;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}*/

.resource .resource-slider:before, .resource:last-of-type .resource-slider:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: url(https://chapterbychapter.co.uk/wp-content/themes/iteach/img/member_overlay_cbc.png) no-repeat center center;
    z-index: 2;
    background-size: 100%;
    background-color: hwb(0deg 100% 0% / 70%);
}

.resource:first-of-type .resource-slider:before{
    background:none;
}

/* My Favourites */
div.my-favourites {
	width: 100%;
	margin-top: 40px;
	float: left;
	overflow: hidden;
	}
div.mem-header {
	width: 100%;
	height: 50px;
	background: #fff;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 30px;
	}
	div.mem-header span.favourites {
		display: block;
		width: 50px;
		height: 50px;
		float: left;
		background: url(img/star-icon.svg) center right 10px no-repeat #fbc525;
		background-size: 26px 26px;
		}
	div.mem-header h2 {
		float: left;
		margin-left: 15px;
		line-height: 48px;
		}
div.fav {
	width: 30%;
	margin-right: 5%;
	margin-bottom: 40px;
	float: left;
	background: #fff;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	overflow: hidden;
	position: relative;
	}
	div.fav:nth-of-type(3n+4) {margin-right: 0;}	
	div.fav a.image-link { 
		display: block;
		width: 100%;
		height: 225px;
		overflow: hidden;
		text-align: center;
		position: relative;
    	overflow: hidden;
		background: #ccc;
	}
	div.fav img {
		width: 100%;
		max-width: none;
		height: auto;
		position: absolute;
		top: -9999px;
		bottom: -9999px;
		left: -9999px;
		right: -9999px;
		margin: auto;
		}	
	div.fav h3 {
		height: 80px; 
		padding: 10px 20px 10px 20px; 
		font-size: 18px; 
		border-top: 1px solid #ccc;
		-webkit-border-bottom-right-radius: 4px;
		-webkit-border-bottom-left-radius: 4px;
		-moz-border-radius-bottomright: 4px;
		-moz-border-radius-bottomleft: 4px;
		border-bottom-right-radius: 4px;
		border-bottom-left-radius: 4px;
		background: #fff;
		text-align: center;
		}
		div.fav h3 a {color: #333;}
div.fav button.simplefavorite-button {
	position: absolute;
	top: 0px;
	right: 0px;
	background: url(img/star-outline.svg) center right 10px no-repeat #f9ca55;
	background-size: 20px 20px;
	padding-right: 40px;
	padding-left: 15px;
	color: #333;
	height: 40px;
	display: block;
	border: 0px;
	-webkit-border-top-right-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-topright: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-top-right-radius: 4px;
	border-bottom-left-radius: 4px;
	}	
div.fav button.simplefavorite-button.active {
	position: absolute;
	top: 0px;
	right: 0px;
	background: url(img/delete.svg) center right 12px no-repeat #f84237;
	background-size: 16px 16px;
	padding-right: 0px;
	padding-left: 0px;
	color: #fff;
	width: 40px;
	height: 40px;
	display: block;
	border: 0px;
	-webkit-border-top-right-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-topright: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-top-right-radius: 4px;
	border-bottom-left-radius: 4px;
	}	
	div.fav button.simplefavorite-button.active span {display: none;}	
/* Feature */
section.feature {
	padding-top: 60px;
	overflow: hidden;
	border-bottom: 1px solid #ddd;
	padding-bottom: 60px;
	background: #fff;
	}	
	section.feature h2 {font-size: 30px;}
	div.feature-left {
		float: left;
		width: 55%;
		}
	div.feature-img {
		float: right;
		width: 35%;
		}	
		div.feature-img img {
			width: 100%;
			height: auto;
			-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
			}	
/* Container */
.container {
	max-width: 1200px;
	margin: auto;
	padding-left: 30px;
	padding-right: 30px;
	}
	div.left-half {width: 46%; float: left; margin-right: 8%; margin-top: 40px;}
	div.help {width: 46%; float: left; margin-top: 40px;}
	div.help h3 {font-size: 24px;}
	p#breadcrumbs {
		width: 100%;
		border-bottom: 1px solid #ccc;
		padding-bottom: 10px;
	}
/* sidebar */
.sidebar {
}
/* footer */
.footer {
	width: 100%;
	margin-top: 50px;
	background: var(--cc-yellow);
	color: #4180B3;
	padding-top: 10px;
	box-sizing:border-box;
	overflow: hidden;
}
.home .footer{
    margin-top: 0;
}
ul.footer-nav {
	width: 25%;
	float: left;
	margin: 0px 0px 40px 0px;
	padding: 0px;
	}
	ul.footer-nav li {
		list-style-type: none;
		color: #fff;
		margin-bottom: 8px;
		}
		ul.footer-nav li a {
			color: #fff;
			font-family: 'open_sanslight';
			background: url(img/nav_arrow.png) no-repeat;
			background-position: 0px 6px;
			padding-left: 20px;
			font-size: 14px;
			}
			ul.footer-nav li a:hover {
				text-decoration: underline;
				}
	div.footer_bottom {
		width: 100%;
		clear: both;
		float: left;
		margin-top: 0px;
		padding-bottom: 10px;
		}
		div.terms { padding-top: 20px; padding-bottom: 40px; text-align: center; width: 100%; background: #eee; font-size: 12px; float: left;}
	ul.privacy-menu {
		padding: 10px 0px 0px 0px;
		margin: 0px;
		float: right;
		}
		ul.privacy-menu li {
			list-style-type: none;
			display: block;
			float: left;
			margin-right: 10px;
			color: #666;
			}
			ul.privacy-menu li a {
				display: block;
				float: left;
				color: #fff;
				font-size: 14px;
				margin-right: 10px;
				font-weight:800;
			}
			ul.privacy-menu li a:hover {text-decoration: underline;}
			ul.privacy-menu li:last-child a {margin-right: 0px;}
ul.social-menu {
	float: left;
	margin: 0px;
	padding: 0px;
	}
	ul.social-menu li {
		display: block;
		float: left;
		list-style-type: none;
		}
		ul.social-menu li a {
			display: block;
			float: left;
			margin-right: 10px;
			width: 40px;
			height: 39px;
			background: url(img/social_icons.png) no-repeat left;
			transition: all ease 0.3s;
			}
			ul.social-menu li:last-child a {margin-right: 0px;}
			ul.social-menu li.facebook a {background-position: 0px 0px;}
			ul.social-menu li.twitter a {background-position: -40px 0px;}
			ul.social-menu li.linkedin a {background-position: -80px 0px;}
			ul.social-menu li.google a {background-position: -120px 0px;}
			ul.social-menu li.facebook a:hover {background-position: 0px -39px;}
			ul.social-menu li.twitter a:hover {background-position: -40px -39px;}
			ul.social-menu li.linkedin a:hover {background-position: -80px -39px;}
			ul.social-menu li.google a:hover {background-position: -120px -39px;}
/* Resource */
.resource {
	margin-top: 30px;
	margin-bottom: 30px;
	overflow: hidden;
	position: relative;
	}
	.res-container {
		/* border: 2px solid #CCC;*/
		float: left;
		width: 100%;
		padding: 40px;
		box-sizing: border-box;
		margin-top: -2px;
		-webkit-border-bottom-right-radius: 6px;
		-webkit-border-bottom-left-radius: 6px;
		-moz-border-radius-bottomright: 6px;
		-moz-border-radius-bottomleft: 6px;
		border-bottom-right-radius: 6px;
		border-bottom-left-radius: 6px;
		background: #fff;
		color:#444;
		display: flex;
		justify-content: space-between;
		}
  .page .res-container{
    margin-top:0;
    -webkit-border-top-right-radius: 6px;
		-webkit-border-top-left-radius: 6px;
		-moz-border-radius-topright: 6px;
		-moz-border-radius-topleft: 6px;
		border-top-right-radius: 6px;
		border-top-left-radius: 6px;
    }
    .resource .res-container h3.resource_title{ color: var(--cc-dark); font-size: 2rem;}
	div.resource_img {
	    min-width: 30%;
		max-width:40%;
        position:relative;
	}
  
    .resource:nth-of-type(odd) .res-container {
    flex-direction: row-reverse;
    }

    .resource:nth-of-type(odd) .resource_img {
        margin-left: 2rem;
        margin-right: 0;
    }
  
		div.resource_img img {width: 100%; height: auto;}
		div.resource_img .btn {
			width: 100%;
			text-align: center;
			}
/* Tabs */
ul.tabs {
	margin: 0px;
	padding: 0px;
	position: relative;
	z-index: 999;
	min-width: 300px;
	}	
	ul.tabs li.overview, ul.tabs li.starter, ul.tabs li.main, ul.tabs li.plenary, ul.tabs li.additional {
		list-style-type: none;
		float: left;
		display: block;
		margin-right: 5px;
		padding-left: 15px;
		padding-right: 15px;
		background: #eee;
		height: 40px;
		line-height: 38px;
		color: #fff;
		cursor: pointer;
		font-weight: bold;
		-webkit-border-top-left-radius: 4px;
		-webkit-border-top-right-radius: 4px;
		-moz-border-radius-topleft: 4px;
		-moz-border-radius-topright: 4px;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
		}	
		ul.tabs li:nth-of-type(1) {background: #20b814;}
		ul.tabs li:nth-of-type(2) {background: #1891c4;}
		ul.tabs li:nth-of-type(3) {background: #e38938;}
		ul.tabs li:nth-of-type(4) {background: #cb17bc;}
		ul.tabs li:nth-of-type(5) {background: #d13535;}
		ul.tabs li:nth-of-type(1):hover {background: #229818;}
		ul.tabs li:nth-of-type(2):hover {background: #166e93;}
		ul.tabs li:nth-of-type(3):hover {background: #a85d1a;}
		ul.tabs li:nth-of-type(4):hover {background: #9a138f;}
		ul.tabs li:nth-of-type(5):hover {background: #aa1e1e;}
		div.tab_container {width: 60%; float: left;}
		div.tab_container div p {line-height: 18px;}
		div.tab_container div.overview {}		
		div.tab_container div.starter {display: none;}	
		div.tab_container div.main {display: none;}	
		div.tab_container div.plenary {display: none;}	
		div.tab_container div.additional {display: none;}
		div.tab_container div.overview > strong > p {color: #20b814;}		
		div.tab_container div.starter > strong > p {color: #1891c4;}	
		div.tab_container div.main > strong > p {color: #e38938;}	
		div.tab_container div.plenary > strong > p {color: #cb17bc;}	
		div.tab_container div.additional > strong > p {color: #d13535;}	
		div.resource_img {margin-right: 2em;}
div.additional .btn {margin-bottom: 20px;}
/* Favourites */
ul.tabs li.favourites {
	list-style-type: none;
	display: inline-block;
	float: right;
	}
ul.tabs li.favourites button {
	float: right;
	color: #fff;
	padding-left: 15px;
	padding-right: 40px;
	border: 0px;
	height: 40px;
	line-height: 38px;
	color: #333;
	cursor: pointer;
	font-weight: normal;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright: 4px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	background: url(img/star-outline.svg) center right 10px no-repeat #f9ca55;
	background-size: 20px 20px;
	}
	ul.tabs li.favourites button.active {
		background: url(img/star-icon.svg) center right 10px no-repeat #fbc525;
		background-size: 20px 20px;
		}	
/*------------------------------------*\
    PAGES
\*------------------------------------*/
ul.pagelist {
	padding: 0px; 
	margin: 30px 0px 50px 0px;
	width: 50%;
	}
ul.pagelist li {
	list-style-type:none;
	}
ul.pagelist li a {
	font-weight: normal; 
	color: #444;
	height: 45px;
	line-height: 45px;
	background: #eee;
	padding-left: 20px;
	transition: all ease 0.2s;
	background: #fff;
	}
	ul.pagelist li a:hover {
		text-decoration: none;
		}
ul.pagelist li:nth-of-type(1n) a {border-left: 10px solid #f84237;}	
ul.pagelist li:nth-of-type(2n) a {border-left: 10px solid #7e519e;}	
ul.pagelist li:nth-of-type(3n) a {border-left: 10px solid #be1700;}	
ul.pagelist li:nth-of-type(4n) a {border-left: 10px solid #8a5927;}	
ul.pagelist li:nth-of-type(5n) a {border-left: 10px solid #768d9f;}	
ul.pagelist li:nth-of-type(6n) a {border-left: 10px solid #164b97;}	
ul.pagelist li:nth-of-type(7n) a {border-left: 10px solid #fbc525;}	
ul.pagelist li:nth-of-type(8n) a {border-left: 10px solid #36ce7b;}	
ul.pagelist li:nth-of-type(9n) a {border-left: 10px solid #3b899f;}	
ul.pagelist li:nth-of-type(10n) a {border-left: 10px solid #f77f02;}	
ul.pagelist li:nth-of-type(11n) a {border-left: 10px solid #44c8e7;}	
ul.pagelist li:nth-of-type(12n) a {border-left: 10px solid #f5456b;}	
ul.pagelist li:nth-of-type(13n) a {border-left: 10px solid #c71c5a;}	
ul.pagelist li:nth-of-type(14n) a {border-left: 10px solid #196f2a;}	
ul.pagelist li:nth-of-type(15n) a {border-left: 10px solid #c3d600;}
ul.pagelist li:nth-of-type(1n) a:hover {border-left: 10px solid #f84237; background: #f84237; color: #fff;}	
ul.pagelist li:nth-of-type(2n) a:hover {border-left: 10px solid #7e519e; background: #7e519e; color: #fff;}	
ul.pagelist li:nth-of-type(3n) a:hover {border-left: 10px solid #be1700; background: #be1700; color: #fff;}	
ul.pagelist li:nth-of-type(4n) a:hover {border-left: 10px solid #8a5927; background: #8a5927; color: #fff;}	
ul.pagelist li:nth-of-type(5n) a:hover {border-left: 10px solid #768d9f; background: #768d9f; color: #fff;}	
ul.pagelist li:nth-of-type(6n) a:hover {border-left: 10px solid #164b97; background: #164b97; color: #fff;}	
ul.pagelist li:nth-of-type(7n) a:hover {border-left: 10px solid #fbc525; background: #fbc525; color: #fff;}	
ul.pagelist li:nth-of-type(8n) a:hover {border-left: 10px solid #36ce7b; background: #36ce7b; color: #fff;}	
ul.pagelist li:nth-of-type(9n) a:hover {border-left: 10px solid #3b899f; background: #3b899f; color: #fff;}	
ul.pagelist li:nth-of-type(10n) a:hover {border-left: 10px solid #f77f02; background: #f77f02; color: #fff;}	
ul.pagelist li:nth-of-type(11n) a:hover {border-left: 10px solid #44c8e7; background: #44c8e7; color: #fff;}	
ul.pagelist li:nth-of-type(12n) a:hover {border-left: 10px solid #f5456b; background: #f5456b; color: #fff;}	
ul.pagelist li:nth-of-type(13n) a:hover {border-left: 10px solid #c71c5a; background: #c71c5a; color: #fff;}	
ul.pagelist li:nth-of-type(14n) a:hover {border-left: 10px solid #196f2a; background: #196f2a; color: #fff;}	
ul.pagelist li:nth-of-type(15n) a:hover {border-left: 10px solid #c3d600; background: #c3d600; color: #fff;}	
ul.pagelist li.page-item-16 a {border-left: 10px solid #fbc525;} ul.pagelist li.page-item-16 a:hover {border-left: 10px solid #fbc525; background: #fbc525; color: #fff;}
ul.pagelist li.page-item-19 a {border-left: 10px solid #f77f02;} ul.pagelist li.page-item-19 a:hover {border-left: 10px solid #f77f02; background: #f77f02; color: #fff;}
ul.pagelist li.page-item-21 a {border-left: 10px solid #f5456b;} ul.pagelist li.page-item-21 a:hover {border-left: 10px solid #f5456b; background: #f5456b; color: #fff;}
ul.pagelist li.page-item-23 a {border-left: 10px solid #7e519e;} ul.pagelist li.page-item-23 a:hover {border-left: 10px solid #7e519e; background: #7e519e; color: #fff;}
ul.pagelist li.page-item-25 a {border-left: 10px solid #196f2a;} ul.pagelist li.page-item-25 a:hover {border-left: 10px solid #196f2a; background: #196f2a; color: #fff;}
ul.pagelist li.page-item-27 a {border-left: 10px solid #3b899f;} ul.pagelist li.page-item-27 a:hover {border-left: 10px solid #3b899f; background: #3b899f; color: #fff;}
ul.pagelist li.page-item-29 a {border-left: 10px solid #164b97;} ul.pagelist li.page-item-29 a:hover {border-left: 10px solid #164b97; background: #164b97; color: #fff;}
ul.pagelist > li > ul {display: none;}
ul.children li a {font-weight: normal;}
ul.pagelist li a {
	margin-bottom: 10px;
	display: block;
	}




ul.childpages {
	padding: 0px; 
	margin: 30px 0px 50px 0px;
	width: 100%;
	}
ul.childpages li {
	list-style-type:none;
	-webkit-box-flex: 1;
	    -ms-flex: 1 0 500px;
	        flex: 1 0 500px;
	    margin: 1rem .25em;
	box-sizing: border-box;
	display: flex;
    flex-direction: column;
    justify-content: center;
	}
ul.childpages li a {
	font-weight: normal; 
	color: #444;
	-webkit-transition: all ease 0.2s;
	-o-transition: all ease 0.2s;
	transition: all ease 0.2s;
	background: var(--cc-white);
	padding: 15px 15px;
	color: white;
    font-size: 20px;
    border-top: 10px solid;
	}
	ul.childpages li a:hover {
		text-decoration: none;
	}
	ul.childpages li a:hover h4{
	    color:var(--cc-white);
	}
	.ages-5-7 ul.childpages li a {
	    border-top-color: var(--tt-green);
    }
    .ages-7-9 ul.childpages li a {
        border-top-color: var(--tt-blue);
    }
	.ages-9-11 ul.childpages li a {
	    border-top-color: var(--mb-navy);
    }
	.ages-5-7 ul.childpages li a:hover {
	    border-top-color: var(--tt-green);
        background: var(--tt-green);
    }
    .ages-7-9 ul.childpages li a:hover {
        border-top-color: var(--tt-blue);
        background: var(--tt-blue);
    }
	.ages-9-11 ul.childpages li a:hover {
	    border-top-color: var(--mb-navy);
        background: var(--mb-navy);
    }
/*.childpages picture.imageContainer {
    display: none!important;
}*/
ul.childpages li h4 {
	text-align: center;
	margin-bottom: 0;
	letter-spacing:0;
}
ul.childpages li .imageContainer {
    display: block;
    overflow: hidden;
    padding-top: 100%;
    position: relative;
    width: 100%;
	margin-bottom: .6em;
}
ul.childpages li a img{
	height: 100%;
    left: 0;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
    position: absolute;
    top: 0;
    width: 100%;
}
.grow { 
	transition: all .2s ease-in-out;
		-webkit-transition: all .2s ease-in-out;
		-o-transition: all .2s ease-in-out; }
.grow:hover { 
	transform: scale(1.04); 
		-webkit-transform: scale(1.04);
		-ms-transform: scale(1.04);

}

@media screen and (min-width: 40em) {
	ul.childpages{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
    	-ms-flex-wrap: wrap;
    	    flex-wrap: wrap;
    	justify-content: flex-start;
	}
    ul.childpages li {
       max-width: calc(25% - 1em);
    }
}

@media screen and (min-width: 60em) {
    ul.childpages li {
        max-width: calc(25% - 1em);
        min-height: 94px;
    }
}

/*ul.childpages li:nth-of-type(1n) a {border-top: 10px solid #f84237;}	
ul.childpages li:nth-of-type(2n) a {border-top: 10px solid #7e519e;}	
ul.childpages li:nth-of-type(3n) a {border-top: 10px solid #be1700;}	
ul.childpages li:nth-of-type(4n) a {border-top: 10px solid #8a5927;}	
ul.childpages li:nth-of-type(5n) a {border-top: 10px solid #768d9f;}	
ul.childpages li:nth-of-type(6n) a {border-top: 10px solid #164b97;}	
ul.childpages li:nth-of-type(7n) a {border-top: 10px solid #fbc525;}	
ul.childpages li:nth-of-type(8n) a {border-top: 10px solid #36ce7b;}	
ul.childpages li:nth-of-type(9n) a {border-top: 10px solid #3b899f;}	
ul.childpages li:nth-of-type(10n) a {border-top: 10px solid #f77f02;}	
ul.childpages li:nth-of-type(11n) a {border-top: 10px solid #44c8e7;}	
ul.childpages li:nth-of-type(12n) a {border-top: 10px solid #f5456b;}	
ul.childpages li:nth-of-type(13n) a {border-top: 10px solid #c71c5a;}	
ul.childpages li:nth-of-type(14n) a {border-top: 10px solid #196f2a;}	
ul.childpages li:nth-of-type(15n) a {border-top: 10px solid #c3d600;}
ul.childpages li:nth-of-type(1n) a:hover {border-top: 10px solid #f84237; background: #f84237; color: #fff;}	
ul.childpages li:nth-of-type(2n) a:hover {border-top: 10px solid #7e519e; background: #7e519e; color: #fff;}	
ul.childpages li:nth-of-type(3n) a:hover {border-top: 10px solid #be1700; background: #be1700; color: #fff;}	
ul.childpages li:nth-of-type(4n) a:hover {border-top: 10px solid #8a5927; background: #8a5927; color: #fff;}	
ul.childpages li:nth-of-type(5n) a:hover {border-top: 10px solid #768d9f; background: #768d9f; color: #fff;}	
ul.childpages li:nth-of-type(6n) a:hover {border-top: 10px solid #164b97; background: #164b97; color: #fff;}	
ul.childpages li:nth-of-type(7n) a:hover {border-top: 10px solid #fbc525; background: #fbc525; color: #fff;}	
ul.childpages li:nth-of-type(8n) a:hover {border-top: 10px solid #36ce7b; background: #36ce7b; color: #fff;}	
ul.childpages li:nth-of-type(9n) a:hover {border-top: 10px solid #3b899f; background: #3b899f; color: #fff;}	
ul.childpages li:nth-of-type(10n) a:hover {border-top: 10px solid #f77f02; background: #f77f02; color: #fff;}	
ul.childpages li:nth-of-type(11n) a:hover {border-top: 10px solid #44c8e7; background: #44c8e7; color: #fff;}	
ul.childpages li:nth-of-type(12n) a:hover {border-top: 10px solid #f5456b; background: #f5456b; color: #fff;}	
ul.childpages li:nth-of-type(13n) a:hover {border-top: 10px solid #c71c5a; background: #c71c5a; color: #fff;}	
ul.childpages li:nth-of-type(14n) a:hover {border-top: 10px solid #196f2a; background: #196f2a; color: #fff;}	
ul.childpages li:nth-of-type(15n) a:hover {border-top: 10px solid #c3d600; background: #c3d600; color: #fff;}*/	
ul.childpages li.page-item-16 a {border-top: 10px solid #fbc525;} ul.childpages li.page-item-16 a:hover {border-top: 10px solid #fbc525; background: #fbc525; color: #fff;}
ul.childpages li.page-item-19 a {border-top: 10px solid #f77f02;} ul.childpages li.page-item-19 a:hover {border-top: 10px solid #f77f02; background: #f77f02; color: #fff;}
ul.childpages li.page-item-21 a {border-top: 10px solid #f5456b;} ul.childpages li.page-item-21 a:hover {border-top: 10px solid #f5456b; background: #f5456b; color: #fff;}
ul.childpages li.page-item-23 a {border-top: 10px solid #7e519e;} ul.childpages li.page-item-23 a:hover {border-top: 10px solid #7e519e; background: #7e519e; color: #fff;}
ul.childpages li.page-item-25 a {border-top: 10px solid #196f2a;} ul.childpages li.page-item-25 a:hover {border-top: 10px solid #196f2a; background: #196f2a; color: #fff;}
ul.childpages li.page-item-27 a {border-top: 10px solid #3b899f;} ul.childpages li.page-item-27 a:hover {border-top: 10px solid #3b899f; background: #3b899f; color: #fff;}
ul.childpages li.page-item-29 a {border-top: 10px solid #164b97;} ul.childpages li.page-item-29 a:hover {border-top: 10px solid #164b97; background: #164b97; color: #fff;}
ul.childpages > li > ul {display: none;}
ul.children li a {font-weight: normal;}
ul.childpages li a {
	margin-bottom: 10px;
	display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	}


/* Level Buttons */
div.level-buttons {
	width: 100%;
	margin-top: 30px;
	float: left;
	}
	div.level-buttons a {
		display: block;
		float: left;
		width: 30%;
		margin-right: 5%;
		background: #ddd;
		height: 60px;
		line-height: 58px;
		/*padding-left: 70px;*/
		color: #fff;
		font-size: 24px;
		transition: all ease 0.3s;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		text-align:center;
		font-weight:bold;
		}
		div.level-buttons a:hover {text-decoration: none;}
		div.level-buttons a:nth-of-type(3n) {margin-right: 0;}
		div.level-buttons a.foundation {background: /*url(img/foundation-icon.png) left no-repeat*/ var(--cc-purple);}
		div.level-buttons a.ks1 {background: /*url(img/ks1-icon.png) left no-repeat*/  var(--cc-yellow);}
		div.level-buttons a.ks2 {background: /*url(img/ks2-icon.png) left no-repeat*/  var(--cc-lavendar);}
		div.level-buttons a.foundation:hover {background: /*url(img/foundation-icon.png) left no-repeat #26b969;*/; font-weight:bold;}
		div.level-buttons a.ks1:hover {background: /*url(img/ks1-icon.png) left no-repeat  #e9b10d;*/; font-weight:bold;}
		div.level-buttons a.ks2:hover {background: /*url(img/ks2-icon.png) left no-repeat  #d7271d;*/; font-weight:bold;}
		
		h1.page-title {
             display: none;
        }

        #breadcrumbs {
             display: none;
        }
/*------------------------------------*\
    IMAGES
\*------------------------------------*/
/*------------------------------------*\
	TYPOGRAPHY
\*------------------------------------*/
@font-face {
    font-family: 'open_sanslight';
    src: url('fonts/OpenSans-Light-webfont.eot');
    src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Light-webfont.woff') format('woff'),
         url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Light-webfont.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open_sans';
    src: url('fonts/OpenSans-Regular-webfont.eot');
    src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open_sans';
    src: url('fonts/OpenSans-Bold-webfont.eot');
    src: url('fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Bold-webfont.woff') format('woff'),
         url('fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: bold;
    font-style: normal;
}
/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/
@media only screen and (max-width:1280px) {
div.slider div.slick-slide {background-size: auto 80%!important;}
}
@media only screen and (max-width:1140px) {
}
@media only screen and (max-width:1024px) {
	div.welcome-text {padding: 50px;}
	ul.footer-nav {
		width: 50%;
		margin-bottom: 40px;
		}
		ul.footer-nav:nth-of-type(2n+1) {clear: both;}
}
@media only screen and (min-width:768px) {
	/*nav.nav {display: block!important;}*/
	section.mobile-welcome {display: none;}
	
	nav.nav li a::before {
            content: "";
            position: absolute;
            bottom: -13px;
            right: 0;
            height: 4px;
            background: var(--cc-yellow);
            -webkit-transition: opacity 0.3s ease;
            -moz-transition: opacity 0.3s ease;
            -ms-transition: opacity 0.3s ease;
            -o-transition: opacity 0.3s ease;
            transition:  opacity 0.3s ease-out;
            opacity:0;
        }
        nav.nav li a:hover::before, li.current-menu-item a::before, li.current-page-ancestor a::before {
            width:100%;
            opacity: 1!important;
        } 
	
	}
@media only screen and (max-width:768px) {
	div.welcome-text h1 {font-size: 28px; line-height: 28px;}
	body {font-size: 14px;}
	div#home-feature {height: auto;}
	div.slider {width: 100%;}
	div.welcome-text {width: 100%; padding: 30px;}
	div.slider img {
			min-width: 0px;
			min-height: 0px;
			height: auto;
			}
	section.hero {padding-top: 50px; padding-bottom: 50px;}
	section.hero h2 {font-size: 28px;}
	section.feature div.feature-left {width: 50%;}
	section.feature div.feature-left h2 {font-size: 26px;}
	section.feature div.feature-img {width: 45%; overflow: hidden;}
	section.feature div.feature-img img {min-height: 225px; min-width: 375px;}
	.header div.header-container {padding: 0px;}
	.header div.header-container a.logo {margin-left: 30px;}
	.sticky + #main-wrapper {
        padding-top: 145px;
    }

    .sticky + #home-feature {
        padding-top: 120px;
    }
	nav.nav {
		display: none;
		width: 100%;
		background: var(--cc-dark);
		border-top: 1px solid ##305A77;
		margin-bottom: 0px;
		padding:0px;
		border-radius:0;
		}
		nav.nav ul {
		    padding-left: 0px;
			}
			nav.nav ul li {
				width: 100%;
				display: block;
				}
				nav.nav li:last-child {display: block;}
			nav.nav ul li a {
				display: block;
				width: 100%;
				padding: 0 0 0 20px;
				height: 40px;
				line-height: 40px;
				box-sizing: border-box;
				border-bottom: 1px solid var(--cc-darkgrey);
				font-size: 18px;
				border-radius:0;
				color:white;
				}
				nav.nav ul li a:hover {
					background: var(--cc-yellow);
					color:white;
					}
				nav.nav ul li.current-menu-item a:hover{
				    color: white !important;
				}
		span.mobile-menu-btn {display: block;}
		div.level-buttons a {width: 100%; margin-bottom: 20px;}
		div.resource_img {max-width: 50%; }
		div.tab_container {width: 50%;}
		ul.pagelist {width: 100%;}
		div.login {display: none;}
		div.left-half {width: 100%; margin-bottom: 50px; float: none; margin-right: 0;}
		div.help {width: 100%; float: none; margin-right: 0;}
		div.slider div.slick-slide {height: 250px; margin-left: 40px; background-size: auto 100% !important; }
		/* Favourites */
		ul.tabs li.favourites button{
			padding-left: 0px;
			padding-right: 0px;
			width: 40px;
			}
		ul.tabs li.favourites button span {
			display: none;
			}
}
@media only screen and (max-width:600px) {
	section.feature div.feature-left {width: 100%;}
	section.feature div.feature-img {width: 100%; margin-top: 30px;}
	section.feature div.feature-img img {min-height: 0px; min-width: 0px;}
	ul.privacy-menu {width: 100%; clear: both; margin-top: 30px;}
	div.login {display: none;}
	div.three-col {width: 100%; margin: 0px 0px 30px 0px;}
	div.slider div.slick-slide {height: 250px; margin-left: 40px; background-size: auto 80% !important; }
	div.fav {width: 100%; margin-right: 0!important;}
	}
@media only screen and (max-width:560px) {	
	ul.tabs li span {display: none;}
}
@media only screen and (max-width:520px) {
	ul.footer-nav {width: 100%;}
	div.tab_container {width: 100%;}
	.res-container{display: block;}
	.resource:nth-of-type(odd) .resource_img {
        margin-left: 0;
    }
	div.resource_img {
		max-width: 100%;
		margin-top: 10px;
		}
	div.slider div.slick-slide {height: 200px; margin-left: 20px;}	
  .resource .resource_img {float:none; margin:0; margin-bottom:20px;}
	}	
@media only screen and (max-width:480px) {
	section.hero {padding-top: 50px;}
	.header div.header-container a.logo {width:200px; overflow: hidden; margin-top: 10px; margin-bottom: 10px; margin-left: 20px;}
	.header div.header-container a.logo img {max-height:100%;}
	nav.nav {margin-top: 10px;}
	span.mobile-menu-btn {top: 28px;}
	.res-container{padding:20px;}
}
@media only screen and (max-width:320px) {
}
@media only screen and (max-width:280px) {
	ul.tabs li {margin-right: 2px; padding-right: 12px; padding-left: 12px;}
	}
/*------------------------------------*\
    MISC
\*------------------------------------*/
::selection {
	background:var(--cc-yellow);
	color:#FFF;
	text-shadow:none;
}
::-webkit-selection {
	background:var(--cc-yellow);
	color:#FFF;
	text-shadow:none;
}
::-moz-selection {
	background:var(--cc-yellow);
	color:#FFF;
	text-shadow:none;
}
/*------------------------------------*\
    WORDPRESS CORE
\*------------------------------------*/
.alignnone {
	margin:5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
	display:block;
	margin:5px auto 5px auto;
}
.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
a img.alignnone {
	margin:5px 20px 20px 0;
}
a img.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.aligncenter {
	display:block;
	margin-left:auto;
	margin-right:auto;
}
.wp-caption {
	background:#FFF;
	border:1px solid #F0F0F0;
	max-width:96%;
	padding:5px 3px 10px;
	text-align:center;
}
.wp-caption.alignnone {
	margin:5px 20px 20px 0;
}
.wp-caption.alignleft {
	margin:5px 20px 20px 0;
}
.wp-caption.alignright {
	margin:5px 0 20px 20px;
}
.wp-caption img {
	border:0 none;
	height:auto;
	margin:0;
	max-width:98.5%;
	padding:0;
	width:auto;
}
.wp-caption .wp-caption-text,
.gallery-caption {
	font-size:11px;
	line-height:17px;
	margin:0;
	padding:0 4px 5px;
}
.sticky {
}
.bypostauthor {
}
/*------------------------------------*\
    PRINT
\*------------------------------------*/
@media print {
	* {
		background:transparent !important;
		color:#000 !important;
		box-shadow:none !important;
		text-shadow:none !important;
	}
	a,
	a:visited {
		text-decoration:underline;
	}
	a[href]:after {
		content:" (" attr(href) ")";
	}
	abbr[title]:after {
		content:" (" attr(title) ")";
	}
	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content:"";
	}
	pre,blockquote {
		border:1px solid #999;
		page-break-inside:avoid;
	}
	thead {
		display:table-header-group;
	}
	tr,img {
		page-break-inside:avoid;
	}
	img {
		max-width:100% !important;
	}
	@page {
		margin:0.5cm;
	}
	p,
	h2,
	h3 {
		orphans:3;
		widows:3;
	}
	h2,
	h3 {
		page-break-after:avoid;
	}
}


/*------------------------------------*\
    WORKOUT BOXES
\*------------------------------------*/
.container.workouts {
    text-align: center;
	padding:0;
}
div.workout_answer {
    display: none;
	margin-top: 20px;
	position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}
.container.workouts .res-container {
    padding: 40px;
}
div.workout_answer span{
	font-weight: bold
}
.page-template-workouts h3 {
    font-weight: bold;
}
div.large_word {
    font-size: 30px;
    color: #014a97;
    font-weight: bold;
}
a.showme.view_resource.btn {
    float: none;
    width: 50%;
    margin: 20px auto 0;
	cursor: pointer;
}
a.refresh-link{
	position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.6rem;
    font-weight: bold;
    color: #28a745;
    /*border: 2px solid #28a745;*/
    padding: 5px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
a.refresh-link:hover{
	background:#28a745;
	color: #ffffff;
	text-decoration:none;
}
.fade-in {
  animation: fadeIn ease 1s;
  -webkit-animation: fadeIn ease 1s;
  -moz-animation: fadeIn ease 1s;
  -o-animation: fadeIn ease 1s;
  -ms-animation: fadeIn ease 1s;
}
@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
}
}

/*------------------------------------*\
    OFFER BANNER
\*------------------------------------*/

.announcement {
  display: inline-block;
  height: 100%;
  text-align: center;
  width: 100%;
  background: #36ce7b;
  color: white;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  font-weight: bold;
  /*position: sticky;
  top: 0;
  z-index: 999999999;*/
}

.announcement a {
  color: #fff;
}

.announcement p {
    margin: 8px 0;
}

/*--------------------*\
    MEMBER PRESS
\*--------------------*/

.site-header .site-branding__logo{
    height:80px!important;
}

/*---------------------------*\
    CARD LAYOUT FOR RESOURCES
\*---------------------------*/

.cards .resourceWrapper {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
}

@media screen and (min-width: 40em){
    .cards .resourceWrapper{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (min-width: 60em){
    .cards .resourceWrapper{
        grid-template-columns: repeat(3, 1fr);
    }
    .pricing{
        grid-template-columns: repeat(3, 1fr);
    }
}


.cards .resource{
  margin:0;
  display: flex;
}

.cards .res-container{
    display:flex;
    flex-direction:column !important;
    align-items: flex-start;
    justify-content: flex-start;
    border: 0;
    border-radius: 0;
}

.cards h3.resource_title {
    margin-top: 1rem;
    line-height: 2rem;
}

.cards div.resource_img{
    width:100%;
    max-width: 100%;
    margin:0!important;
}

.cards .slick-slider{
    margin-bottom:0;
}

.cards .slick-list{
    max-height:350px;
}

.cards .join, .cards .view_resource.btn {
    width: 100%;
    text-align: center;
    margin-top:auto;
}

.logged-in .cards .resource:first-of-type .join{
    display:none;
}

.cards .resource:first-of-type .overlay {
    display: none;
}

.cards .overlay{
    background-size: 350px;
}

/*---------------------*\
      READ MORE
\*---------------------*/
.acf-read-more .acf-content-wrapper {
    max-height: 150px; /* Collapsed height */
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
}

.acf-read-more.expanded .acf-content-wrapper {
    max-height: 2000px; /* Expanded height (large enough for the full content) */
}

.acf-content p {
    margin-top: 0;
}

.read-more-btn {
    background-color: white;
    color: #ffa756;
    margin-top: 10px;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 3px;
    border: 2px solid #ffa756;
    font-weight: bold;
}

.read-more-btn:hover {
    background-color: #ffa756;
    color:white;
}

.acf-read-more {
    margin-bottom: 2rem;
}

.acf-read-more .acf-content-wrapper {
    position: relative;
}

.acf-read-more .acf-content-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px; /* Height of the gradient overlay */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.4s ease-in-out;
}

.acf-read-more.expanded .acf-content-wrapper::after {
    opacity: 0;
}