/*
Theme Name: LP Theme
Theme URI: https://literacyplanet.com
Author: Literacy Planet
Version: 6.0.4
*/

/* GENERAL
################################################################################### */

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	padding: 0;
	margin: 0;
}

img, svg {
	max-width: 100%;
	height: auto;
	width: auto;
	vertical-align: bottom;
}

*:first-child {
	margin-top: 0;
}

*:last-child {
	margin-bottom: 0;
}

@media only screen and (max-width: 1023px) {

	.hidemobile {
		display: none!important;
	}

}

@media only screen and (min-width: 1024px) {

	.hidedesktop {
		display: none!important;
	}

}

/* COMPONENTS
################################################################################### */

/* Call Out */

.call-out {
	background-color: var(--light-blue-lighter-x3);
	padding: calc(var(--layout-unit)*2);
	border-radius: 1rem;
	text-align: center;
}

/* Button Group */

.btn-group {
	display: inline-flex;
	flex-wrap: wrap;
	margin: -0.4rem;
}

.btn-group > div {
	flex-grow: 1;
	flex-shrink: 0;
	padding: 0.4rem;
}

.btn-group > div .btn {
	width: 100%;
}

/* Buttons or Video */

.buttons-or-video {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	margin: -0.4rem;
}

.buttons-or-video > div {
	padding: 0.4rem;
}

.buttons-or-video .or {
	padding: 0.4rem 1rem;
	opacity: 0.8;
}

@media (max-width: 1023px) {

	.buttons-or-video {
		flex-direction: column;
		margin-bottom: 1rem;
	}

	.buttons-or-video .or {
		padding: 1rem 0 0 0;
		opacity: 0.8;
	}

}

@media (min-width: 1024px) {

	.buttons-or-video .btn-group {
		flex-direction: column;
	}

}

/* Video Button */

.video-btn {
	display: flex;
	align-items: center;
	cursor: pointer;
}

.video-btn .text {
	padding-left: 1rem;
	font-size: 1.2rem;
	color: var(--blue);
}

.video-btn:hover .play-btn {
	transform: scale(1.1);
}

.video-btn:hover .text {
	text-decoration: underline;
}

.video-btn:hover .play-btn .inner svg {
	color: var(--orange);
}

/* Play Button */

.play-btn {
	width: 4rem;
	height: 4rem;
	padding: 0.5rem;
	border-radius: 4rem;
	background-color: white;
	box-shadow: 0 0.3rem 0.7rem rgba(0,50,100,0.3);
	transition: transform 200ms;
}

.play-btn .inner {
	width: 3rem;
	height: 3rem;
	border-radius: 3rem;
	background-color: white;
	box-shadow: 0 0.2rem 0.5rem rgba(0,50,100,0.2);
}

.play-btn .inner svg {
	font-size: 1.3rem;
	position: absolute;
	top: 50%;
	left: 55%;
	transform: translate(-50%, -50%);
	color: var(--blue);
	transition: color 200ms;
}

/* Blobs */

.blob,
.blob-desktop,
.blob-mobile {
	position: absolute;
	z-index: -1;
	max-width: none;
}

@media (max-width: 1023px) {
	.blob-desktop {
		display: none;
	}
}

@media (min-width: 1024px) {
	.blob-mobile {
		display: none;
	}
}

/* Img */

img.alignnone,
img.alignleft,
img.alignright,
img.aligncenter,
.alignnone img,
.alignleft img,
.alignright img,
.aligncenter img {
	border-radius: 0.5rem;
}


.img-crop {
	display: block;
	position: relative;
	border-radius: 0.5rem;
	overflow: hidden;
}

.img-crop:before {
	display: block;
	content: " ";
}

.img-crop img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-position: center center;
	object-fit: contain;
	/* object-fit: cover; */
}

.img-1x1:before {
	padding-bottom: 100%;
}

.img-3x2:before {
	padding-bottom: 66.66%;
}

.min-space .img-3x2:before {
	padding-bottom: 85.66%;
}

.img-2x1:before {
	padding-bottom: 50%;
}

.img-9x4:before {
	padding-bottom: 44.444444%;
}

.img-7x3:before {
	padding-bottom: 43%;
}

.img-5x2:before {
	padding-bottom: 40%;
}

.img-4x1:before {
	padding-bottom: 25%;
}

.img-3x4:before {
	padding-bottom: 133.33%;
}

.img-hover img {
	transition: opacity 200ms, transform 200ms;
}

.img-hover:hover img {
	opacity: 0.9;
	transform: scale(1.05);
}

.img-shadow {
	box-shadow: 0.4rem 0.4rem 0 rgba(0,0,0,0.1);
}

/* Laptop */

.laptop {
	left: 0;
	top: 0;
	width: 100%;
	max-width: none;
}

.laptop .bg {
	width: 100%;
}

.laptop .screen {
	position: absolute;
	top: 6%;
	left: 13%;
	z-index: 10;
	width: 74%;
	height: 0;
	background-color: white;
}

.laptop .screen-shot {
	width: 100%;
	overflow: hidden;
}

.laptop .screen-shot:before {
	padding-bottom: 62%;
	content: " ";
	display: block;
}

.laptop .screen img {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 101%;
	height: 101%;
	object-fit: cover;
	object-position: center top;
}

@media (max-width: 499px) {
	.laptop {
		width: 120%;
		margin-left: -10%;
	}
}

@media (min-width: 500px) and (max-width: 767px) {
	.laptop {
		width: 115%;
		margin-left: -7.5%;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.laptop {
		width: 100%;
	}
}

/* Tablet */

.tablet .border {
	background-color: #000;
	border: #555 solid 0.2rem;
	padding: 4%;
	border-radius: 1.5rem;
	box-shadow: 0.3rem 0.5rem 0 rgba(0,0,0,0.1);
	z-index: 10;
}

.tablet .screen {
	border-radius: 0.5rem;
	overflow: hidden;
}

.tablet .screen.video-screen iframe {
	position:absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.tablet .screen:before {
	display: block;
	content: " ";
	padding-top: 66.66%;
}

.tablet .screen.video-screen:before {
	padding-top: 56.25%;
}

.tablet .screen img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.tablet .tablet-buttons {
	display: flex;
	justify-content: space-between;
	position: absolute;
	z-index: 1;
	top: -3px;
	left: 10%;
	width: 13%;
}

.tablet .tablet-buttons > div {
	width: 45%;
	height: 10px;
	border-radius: 2px;
	background-color: #444;
}

@media (max-width: 549px) {

	.tablet .border {
		border-radius: 1.25rem;
	}

	.tablet .screen {
		border-radius: 0.3rem;
	}

	.tablet .tablet-buttons {
		top: -2px;
	}

}

/* Stats */

.stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.stats > div {
	width: 33.33%;
	text-align: center;
	padding: 0 1rem;
}

.stats .number {
	font-size: 4rem;
	line-height: 1em;
	margin: 0.5rem 0;
	color: var(--purple);
	font-weight: 900;
	font-family: 'Mikado', museo-sans-rounded, sans-serif;
}

.stats img {
	max-height: 5rem;
	max-width: 8rem;
	object-position: center;
	object-fit: contain;
}

@media (max-width: 499px) {

	.stats > div {
		width: 100%;
		text-align: center;
	}

	.stats .percentage {
		margin-bottom: 0.5rem;
	}

	.stats .stat {
		margin-bottom: 1.5rem;
	}

}

@media (max-width: 699px) {

	.section-1 .stats .number {
		font-size: 3rem;
	}

}

/* Panel */

.panel {
	background-color: var(--white);
	box-shadow: 0.75rem 0.75rem 0 rgba(0,0,0,0.1);
	border-radius: 1rem;
	padding: calc(var(--layout-unit)*2);
}

.panel:before {
	position: absolute;
	content: " ";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
	z-index: 1;
}

.panel > * {
	position: relative;
	z-index: 10;
}

/* Sidebar more info panel */

.sidebar .more-info-panel {
	padding: 3rem 2rem;
	background-color: var(--light-blue-lighter-x3);
	text-align: center;
	border-radius: 1rem;
}

/* Responsive video */

.video-full-width {
	padding: 56.25% 0 0 0;
}

.video-full-width iframe,
.video-full-width img {
	position:absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video-full-width p {
	display: none;
}

/* SUBJECTS GRID
################################################################################### */

.subjects hr {
	margin: 0 0 calc(var(--layout-unit)*4);
}

.subjects .grid {
	justify-content: center;
}

.subjects .grid > a {
	display: block;
}

.subjects .grid > a:hover {
	color: var(--dark-blue)!important;
}

.subjects .grid > a img {
	transition: transform 100ms;
	transform: scale(1);
	height: 10rem;
	object-fit: contain;
	object-position: center;
	margin-bottom: 0.5rem;
}

.subjects .grid > a:hover img {
	transform: scale(1.1);
}

.subjects .icon {
	max-width: 10rem;
}

.subjects .grid > a span {
	display: block;
	font-size: 1.5rem;
	line-height: 1.1em;
	font-weight: 900;
	color: var(--dark-blue);
}

@media (max-width: 499px) {

	.subjects .grid > a img {
		height: 7rem;
	}

	.subjects .grid > a span {
		font-size: 1.2rem;
		line-height: 1.1em;
	}
}

@media (max-width: 500px) and (max-width: 767px) {
	.subjects .grid > a {
		width: 50%;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.subjects .grid > a {
		width: 33.33%;
	}
}

@media (min-width: 1024px) {
	.subjects .grid > a {
		width: 25%;
	}
}



/* CALL TO ACTION FOOTER
################################################################################### */

.call-to-action-footer {
	background-color: var(--light-blue-lighter-x3);
	text-align: center;
	z-index: 100;
	margin-top: calc(var(--layout-unit)*3);
}

.home .call-to-action-footer {
	margin-top: 0;
}

.call-to-action-footer .buttons  {
	z-index: 10;
}

.call-to-action-footer .buttons .btn {
	margin: 0.25rem;
}

.call-to-action-footer .blobs-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.call-to-action-footer .blob {
	position: absolute;
	z-index: 5;
	max-width: none;
}

.call-to-action-footer .blob-2 {
	position: absolute;
	z-index: 5;
	max-width: none;
}


.call-to-action-footer .socials {
	margin-top: 2rem;
}

.call-to-action-footer .socials a {
	text-decoration: none;
	font-size: 3rem;
	margin: 0 0.3rem;
}

.call-to-action-footer .socials a:hover {
	filter: brightness(110%);
}


@media (max-width: 499px) {

	.call-to-action-footer .avatar {
		position: relative;
		z-index: 10;
		max-width: 14rem;
		transform: translateX(4%);
		margin-top: calc(var(--layout-unit)*-2);
		margin-bottom: 2rem;
	}

}

@media (min-width: 500px) and (max-width: 1023px) {

	.call-to-action-footer .avatar {
		position: relative;
		z-index: 10;
		max-width: 18rem;
		transform: translateX(4%);
		margin-top: calc(var(--layout-unit)*-2);
		margin-bottom: 4rem;
	}

}

@media (max-width: 1023px) {

	.call-to-action-footer .penguin {
		position: relative;
		z-index: 10;
		max-width: 20rem;
		margin-top: 4rem;
		margin-bottom: -1rem;
	}

	.call-to-action-footer .blob {
		top: 0;
		right: 0;
		width: 90%;
		transform: translate(0%, -30%);
	}

	.call-to-action-footer .blob-2 {
		bottom: 0;
		left: -20%;
		width: 90%;
	}

	.call-to-action-footer .buttons  {
		margin-top: 3rem;
	}

}

@media (min-width: 1024px) {
	.call-to-action-footer .container {
       	padding-top: calc(var(--layout-unit)*6);
		padding-bottom: calc(var(--layout-unit)*6);
     }
	.section .call-to-action-footer.common-footer .container {
		/* padding-top: calc(var(--layout-unit)*6);
		padding-bottom: calc(var(--layout-unit)*6); */
		padding-top: 5px !important;
		padding-bottom: 60px !important;
	}

	.call-to-action-footer .avatar {
		position: absolute;
		z-index: 10;
		top: 0;
	}

	.call-to-action-footer .penguin {
		position: absolute;
		z-index: 10;
		bottom: 0;
	}

	.call-to-action-footer .buttons  {
		margin-top: 3rem;
		z-index: 10;
	}

}

@media (min-width: 1024px) and (max-width: 1199px) {

	.call-to-action-footer .info {
		z-index: 100;
		width: 75%;
		margin: auto;
	}

	.call-to-action-footer .avatar {
		right: -2rem;
		top: -2rem;
		width: 20%;
	}

	.call-to-action-footer .penguin {
		left: 0;
		width: 20%;
		transform: translate(-1rem, 1rem);
	}

	.call-to-action-footer .blob {
		top: 0;
		left: 70%;
		width: 70rem;
		min-width: 30%;
		transform: translate(0%, -20%);
		margin-top: 0;
		max-width: none;
	}

	.call-to-action-footer .blob-2 {
		bottom: 0;
		right: 65%;
		width: 50rem;
		min-width: 35%;
		margin-top: 0;
	}

}

@media (min-width: 1200px) {

	.call-to-action-footer .info {
		z-index: 100;
		width: 50%;
		margin: auto;
	}

	.call-to-action-footer .avatar {
		right: calc(var(--layout-unit)*2);
		width: 22%;
		transform: translate(1rem, -3rem);
	}

	.call-to-action-footer .penguin {
		left: calc(var(--layout-unit)*2);
		width: 20%;
		transform: translate(-1rem, 1rem);
	}

	.call-to-action-footer .blob {
		top: 0;
		left: 70%;
		width: 70rem;
		min-width: 30%;
		transform: translate(0%, -20%);
		margin-top: 0;
		max-width: none;
	}

	.call-to-action-footer .blob-2 {
		bottom: 0;
		right: 65%;
		width: 50rem;
		min-width: 35%;
		margin-top: 0;
	}

}


/* FOOTER
################################################################################### */
.site-footer {
	background: linear-gradient(90deg, #1D7BCC 0%, #1e86d0 50%, #1D7BCC 100%);
	color: #c5eeff;
}

.site-footer .shadow {
	position: absolute;
	top: 0;
	left: 0;
	height: 0.5rem;
	width: 100%;
	background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 100%);
}

.site-footer h6 {
	color: #fff;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid rgba(255,255,255,0.2);
}

.site-footer a {
	color: #c5eeff;
}

.site-footer a:hover {
	color: #fff;
}

.site-footer ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.site-footer li {
	margin: 0;
	padding: 0.1rem 0;
}

.site-footer .socials {
	font-size: 1.4rem;
}

.site-footer .socials a {
	margin: 0 0.1rem;
}

.site-footer .socials a:hover {
	text-decoration: none;
}

.footer-logo {
	max-width: 14rem;
	transform: translateX(-0.3rem);
	margin-bottom: 1rem;
}

@media only screen and (max-width: 499px) {

	.footer-logos .grid > div {
		width: 50%;
	}

	.site-footer .grid > div:not(.col-1) {
		width: 100%;
	}

	.site-footer .col-1 {
		width: 100%;
		text-align: center;
		padding-bottom: 2rem;
	}

}

@media only screen and (min-width: 500px) and (max-width: 767px) {

	.footer-logos .grid > div {
		width: 33.33%;
	}

	.site-footer .grid > div:not(.col-1) {
		width: 50%;
	}

	.site-footer .col-1 {
		width: 100%;
		text-align: center;
		padding-bottom: 2rem;
	}

}

@media only screen and (min-width: 768px) and (max-width: 1023px) {

	.site-footer .grid > div:not(.col-1) {
		width: 25%;
	}

	.site-footer .col-1 {
		width: 100%;
		text-align: center;
	}

}

@media only screen and (min-width: 1024px) {

	.site-footer .grid > div {
		width: 16.66%;
	}

	.site-footer .col-1 {
		text-align: center;
	}


}

/* MODAL
################################################################################### */

.modal-wrapper {
	position: fixed;
	z-index: 2000;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	overflow-x: scroll;
	transition: opacity 400ms 0ms, top 0ms 0ms;
}

.modal-wrapper.hide {
	top: -9999px;
	transition: opacity 400ms 0ms, top 0ms 400ms;
	opacity: 0;
}

.modal-scroll {
	display: flex;
	align-items: center;
	position: absolute;
	min-height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	padding: calc(var(--layout-unit)*2) var(--layout-unit);
	overflow: hidden;
}

.modal {
	position: relative;
	z-index: 2000;
	margin: auto;
	background-color: #fff;
	width: 40rem;
	max-width: 85%;
	min-height: 20rem;
	border-radius: 1rem;
	box-shadow: 0.75rem 1rem 0 rgba(0,0,0,0.15);
}

.modal-header {
	padding: calc(var(--layout-unit)*2) calc(var(--layout-unit)*2) 0;
}

.modal-header .icon {
	font-size: 3.5rem;
	margin-bottom: 0.5rem;
	color: var(--dark-blue);
}

.modal-header .close-btn {
	position: absolute;
	top: 0;
	right: 0;
	padding: calc(var(--layout-unit)*1);
	font-size: 2rem;
	cursor: pointer;
	color: var(--royal-blue);
	transition: opacity 200ms;
}

.modal-header .close-btn:hover {
	opacity: 0.8;
}

.modal-body {
	padding: calc(var(--layout-unit)*2);
}

.modal-black-out {
	position: absolute;
	z-index: 1500;
	top: 0;
	left: 0;
	opacity: 1;
	width: 100%;
	height: 150%;
	background-color: rgba(0,0,0,0.4);
	transition: opacity 400ms 0ms, top 0ms 0ms;
}

.modal-black-out.hide {
	top: -9999px;
	transition: opacity 400ms 0ms, top 0ms 400ms;
	opacity: 0;
}

/* Language modal */

.modal-language .modal-header {
	margin-bottom: -1rem;
}

.modal-language .flags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.modal-language .flag {
	border: 2px solid rgba(0,0,0,0);
	padding: 0.8rem 0.8rem 0.5rem;
	margin: 0.2rem;
	width: 9rem;
	border-radius: 1rem;
	cursor: pointer;
}

.modal-language .flag:hover {
	background-color: var(--light-blue-lighter-x3);
}

.modal-language .flag.active {
	border: 2px solid var(--light-blue);
	background-color: var(--light-blue-lighter-x3);
	color: var(--dark-blue);
	font-weight: 700;
}

.modal-language .flag img {
	border-radius: 0.5rem;
	box-shadow: 0.2rem 0.3rem 0 rgba(0,0,0,0.15);
	display: block;
	transition: transform 200ms;
}

.modal-language .flag p {
	margin-top: 0.5rem;
}

.modal-language .flag .check {
	display: none;
	position: absolute;
	top: -1.7rem;
	left: 50%;
	transform: translateX(-50%);
	font-size: 2rem;
	color: var(--green);
}

@media (max-width: 599px) {

	.modal {
		max-width: 100%;
	}

	.modal-language .flag {
		width: 8rem;
	}

}
iframe{
border:0
}
/* Video modal */

.modal-video .modal {
	width: 60rem;
	max-width: 100%;
}

.modal-video .modal-header {
	padding: calc(var(--layout-unit)*1) calc(var(--layout-unit)*2) 0;
}

.modal-video .modal-body {
	padding: var(--layout-unit);
}

.modal-popup .modal{
    width: 100% !important;
    border-radius: 100px;
    height: 50rem;
    max-width: 1440px;
}

#popup-iframe::-webkit-scrollbar {
  display: none !important;
}
#popup-iframe{
-ms-overflow-style: none;
  scrollbar-width: none;
}
.custom-popup{
    width: 100%;
    min-height: 1000px;
}
.button-tagline{
	margin-top:15px;
}
/* SANITIZE
################################################################################### */

*:focus {
	outline:none;
}

/* WP ADMIN
################################################################################### */

#wpadminbar {
	display: none;
}

body.admin-bar {
	margin-top: -32px!important;
}

@media only screen and (max-width: 782px) {

	body.admin-bar {
		margin-top: -46px!important;
	}

}
.d-infx{
	display: inline-flex;
}
.w-100{
	width:100%;
}
.modal-video .modal-header{
        padding: 0px 8px 0px 0px;
}
.modal-video .modal-body{
    margin-top: -25px;
    padding: 16px;
}
.modal-header .close{
	float: right;
    background: none;
    color: #e5dfdf;
    font-size: 28px;
    width: 32px;
    border: none;
    box-shadow: none;
    padding: 0px 0px 0px 0px;
    margin: 0px;
    z-index: 1000;
}
.modal-header .close:hover {
    filter: brightness(1);
}
.button-tagline-image{
	width:100%;
}