@charset "UTF-8";
/* CSS Document */

/* Oxford University Press España | ® My Little Playground 2017 */


@font-face {
	font-family: 'BrandonText-Regular';
	src: url('../fonts/BrandonText-Regular.eot') format('embedded-opentype');
	src: url('../fonts/BrandonText-Regular.woff') format('woff'), url('../fonts/BrandonText-Regular.ttf') format('truetype'), url('../fonts/BrandonText-Regular.svg#svgFontName') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: 'Gloria Hallelujah';
    src: url('../fonts/GloriaHallelujah.eot');
    src: url('../fonts/GloriaHallelujah.eot') format('embedded-opentype'),
         url('../fonts/GloriaHallelujah.woff2') format('woff2'),
         url('../fonts/GloriaHallelujah.woff') format('woff'),
         url('../fonts/GloriaHallelujah.ttf') format('truetype'),
         url('../fonts/GloriaHallelujah.svg#GloriaHallelujah') format('svg');
}

html {height:100%;}
body {
	font-family: 'BrandonText-Regular', Arial, Helvetica, sans-serif;
	height:100%;
	overflow-x: hidden !important;
	min-height: 940px;
	overflow-y: auto !important;
}
.aquamarine {
	background-color: #19D3D5;
}
.orange {
	background: #f5bb46;
}
.light-pink {background-color: #f78da9;}
.rose {background-color: #fdb3c7;}
.light-green{    background-color: #82c7ab;
}
.cyan {
	background-color: #40a0c9;
}
.mint {background-color: #a4d2bf;}
.cheese {
	background: #fecc3a;
}
.purple {background: #8c588b;}
.pink {background: #d68bc4;}
.morango {background: #ba79b9;}
.blues{background: #48c0f5;}
.bluesky {
	background-color: #7ccef3;
}
.level-a {background-color: #009fc5;}
.artcolourBG {background-color: #e66487;}
.yellow {background-color: #ef8b5a;}
.green {background-color: #9fca69;}
.light-yellow {background: #ffd47f;}
.cuerpo {
	height: 92%;
}
a {
	cursor: pointer;
	color: #ffffff !important;
}
a:hover{
	cursor: pointer;
	text-decoration: none !important;
	color: #ffffff !important;
	text-shadow: #d68bc4 2px 2px;
}
a:active{
	cursor: pointer;
	text-decoration: none !important;
	color: #ffffff !important;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	font-family: 'Gloria Hallelujah', sans-serif !important;
}
.h2, h2 {
	font-size: 35px !important;
}
.clear {
	clear: both;
}
.text-center {
	text-align: center;
}
.vertical-center {
	display: flex;
	align-items: center;
	justify-content: center;
}
/* HOME */
.light{
	background: url(../../packages/images/phone-MLCW.svg) no-repeat 50% 50%;
	background-size: contain;
	min-height: 14em !important;
	display: none;
	margin-top: 60px;
	}
.spaceship{
	background: url(../../packages/images/saturn-MLCW.svg) no-repeat 60% 45%;
	background-size: contain;
	min-height: 13em !important;
	display: none;
	margin-top: 70px;
	}
.hand-one {
	background: url(../../packages/images/hand1-MLCW.svg) no-repeat 0px -30px;
	top: -20px;
	background-size: contain;
	min-height: 400px !important;
	display: none;
}
.hand-two {
	background: url(../../packages/images/hand2-MLCW.svg) no-repeat 0 -30px;
	top: -20px;
	background-size: c;
	min-height: 400px !important;
	display: none;
}
.logo-img {
	max-width: 500px;
	padding-top: 0;
	width: 100%;
	margin: 0;
}
.level-img {
	position: absolute;
	width: 25%;
	right: 8%;
	z-index: 0;
	padding-top: 25%;
	max-width: 120px;
}


.project-one img, .project-two img, .project-three img {
	width: 100%;
	max-height: 220px;
	min-height: 250px;
	padding: 20px;
	min-width: 250px;
}
.project-one, .project-two, .project-three {
	margin: 0 auto;
	text-align: center;
	min-height: 22em !important;
	color: #ffffff;
	font-variant: all-petite-caps;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 0px;
}
.project-one a, .project-two a, .project-three a {
	color: #fff;
}
.project-one a:hover, .project-two a:hover, .project-three a:active,.project-one a:active, .project-two a:active, .project-three a:active {
	text-decoration: none;
}
.sub-menu {
	padding: 30px;
}
.project-three img {
}
.project-one h1, .project-two h1, .project-three h1 {
	width: 100%;
	font-size: 4em;
	padding-bottom: 20px;
}
 video::-internal-media-controls-download-button {
 display:none;
}
 video::-webkit-media-controls-enclosure {
 overflow:hidden;
}
video::-webkit-media-controls-fullscreen-button {
 display: block;
}
video::-webkit-media-controls-play-button {
 webkit-transform:rotate(360deg);
 width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #ffffff;
}
video::-webkit-media-controls-play-button {
}
video::-webkit-media-controls-timeline {
}
video::-webkit-media-controls-current-time-display {
}
video::-webkit-media-controls-time-remaining-display {
}
video::-webkit-media-controls-time-remaining-display {
}
video::-webkit-media-controls-mute-button {
}
video::-webkit-media-controls-toggle-closed-captions-button {
}
video::-webkit-media-controls-volume-slider {
}
iframe {
	border: none;
	width: 100%;
	min-height: 500px;
}
#container-video {
	margin: 0 auto;
	padding: 20px;
}
#container-games {
	margin: 0 auto;
	padding: 20px;
}
#container-audio {
	margin: 0 auto;
	width: 100%;
}
#container-menu {
	margin: 5% auto;
}
.menu-icons {
	border-radius: 50%;
	box-shadow: #3333335e 0px 5px 20px 2px;
	min-width: 60px;
}

.menu-icons:hover {border: 2px solid #fff}
.full-cont {
	width: 100%;
}

.phase-icon:hover, .icon:hover {
	-webkit-animation: pulse 1s;
	animation: pulse 1s;
}
/* FOOTER */
.footer-menu {
	position: absolute;
	top: -55px;
}
.footer-style {
	text-align: center;
	color: #062d80;
	bottom: 0px;
	position: fixed;
	margin-top: auto;
	margin-bottom: auto;
	width: 100%;
	height: 8%;
	background: white;
	padding: 10px 0 0 0;
}
.logo-OUP {
	margin-right: 10px;
	width: 80px;
	margin-bottom: 5px;
	margin-top: 10px;
}
.legal-footer a {
	text-decoration: none;
	color: #009fc5 !important;
	margin: 0 8px;
	font-size: 14px;
}
.legal-footer a:active {
	text-decoration: none;
	color: #0079c6;
}
.legal-footer a:hover {
	text-decoration: none;
	color: #e6007e !important;
	text-shadow: none;
}
.back-ops {
	text-align: center;
	display: none;
}
.title {
	font-family: 'Gloria Hallelujah', sans-serif !important;
	text-align: center;
	color: #ffffff;
	font-size: 60px;
	letter-spacing: 0;
}
.titulos {
	/* height: 120px !important; */
	display: flex;
	align-items: center;
	justify-content: center;
}
.border-right {
	border-right: #ffffff 2px dashed;
}
.warning-one-ops {
	display: none;
}
.warning-two-rotate {
	display: none;
}
.logo {
	width: 250px;
	float: left;
}
.logo-home {
	max-width: 500px;
	width: 100%;
	cursor: pointer;
}
.return {
	background: url(../../packages/images/home-blue.png) no-repeat;
	width: 100px;
	height: 100px;
	float: right;
	margin: 20px;
	cursor: pointer;
}
.TDL {
	background: url(../../packages/images/thinkdolearn.png) no-repeat;
	width: 121px;
	height: 126px;
	float: right;
	margin: 20px;
}
.box-home {
	text-align: left;
	cursor: pointer;
	padding: 20px 20px 20px 20px !important;
}
.home{float: right;}
.level {
	width: 90%;
	max-width: 228px;
}

.home, .back {
	width: 95%;
	max-width: 85px;
	cursor: pointer;
}

.home:hover, .back:hover {
	-webkit-animation: tada 1s;
	animation: tada 1s;
}
.box-logo {
	margin: 0 auto;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 25em;
}
.clear {
	clear: both;
}
.legal-footer {
	text-align: center;
	color: #062d80;
	bottom: 0px;
	position: fixed;
	margin-top: auto;
	margin-bottom: auto;
	width: 100%;
	min-height: 8%;
	background: white;
	padding: 10px 0 0 0;
}
#zone-header {
	border-bottom: 1px solid #fff;
	height: 12%;
}
.modal-title {font-size: 23px !important;}

.modal-content {
	padding: 0;
	border-radius: 20px !important;
}
.modal-header {
    padding: 15px;
    border-bottom: none;
    background: #0082ad;
    border-radius: 19px 19px 0 0 !important;
    color: #ffffff;
}
.modal-body {
    padding: 25px;
    background: #7ccef373;
	text-align:center;
}
.modal-body audio{
    width: 100%;
    text-align: center;
    margin: 30px 0 10px 0px;
    float: none;
}
.modal-footer {background: #7ccef373;border-radius: 0 0 20px 20px !important;border-top: 0 !important;height: 0;padding: 5px 0 15px 0 !important;}
.audiologo {width: 50%;margin-top: 10px;}

.active {cursor: pointer;}



/* MUSIC */ 
.air {
	margin: 10px 0;
	position: relative;
	width: 100%;
	float: left;
}
.musics-icon {
	width: 55% !important;
}
#track, .button {
	border: 1px #ffffff solid;
	border-radius: 50px;
	font-size: 16px;
	padding: 5px;
}

.button:hover {
	-webkit-animation: pulse 1s;
	animation: pulse 1s;
	background-color:#ffffff;
	color:#009ee3 !important;
}

.button:hover a {
	color:#009ee3 !important;
	text-shadow: none;
}
.musics-header {
}
.set-list {
	margin-top: 30px;
}

.playbutton{background:url(../../packages/images/play-MLCW.svg) no-repeat center;width: 40px;height: 40px;border:  none;border-radius: 50px;margin-right: 10px;}

.pausebutton{
    background: url(../../packages/images/pause-MLCW.svg) no-repeat center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50px;
}
#traditionals {
	text-align: center;
	border-right: 2px white dashed;
	margin-right: 50px;
}
#classics {
	text-align: center;
	margin-right: -50px;
}
#lesson-plans {padding: 40px;height: 100%;color: #ffffff;text-align: center;}

#collection, #phases, #musics {height: 100%;}
#plans {height: 120%;}
.collection-boxes {
	text-align: center;
	font-size: 25px;
	color: #ffffff;
	margin-top: 5%;
}
.space-air {margin: 20px;position: relative;padding: 5px 5px 5px 55px;text-align: left;}
.collection-boxes p {
	margin: 20px 0;
}
.collection-boxes img {
	margin: 0 auto;
	text-align: center;
	width: 75%;
}

.audiothumbnails {
	width: 100%;
	padding-top: 20px;
}

h1.audio.name {
	margin: 40px 0 0 0;
}
.icono-audio {
	text-align: center;
}
.icono-audio:hover {
	-webkit-animation: rubberBand 1s;
	animation: rubberBand 1s;
}
.center {
	text-align: center;
}
.h4title {
	color: #0079c6;
	font-weight: bold;
	text-align: center;
	padding: 1em 0 0 0;
	font-size: 20px;
	display: block;
	margin: 0;
}
.h4title:hover {
	text-decoration: none;
	color: #ffffff;
}
.h3title {
	color: #f04532;
	font-weight: bold;
	text-align: center;
	padding: 1em 0 0 0;
	font-size: 28px;
	display: block;
	margin: 0;
}
.h3title:hover {
	text-decoration: none;
	color: #ffffff;
}
.h3title {
	color: #f04532;
	font-weight: bold;
	text-align: center;
	padding: 1em 0 0 0;
	font-size: 28px;
	display: block;
	margin: 0;
}
.h3title a {
	color: #f04532;
	font-weight: bold;
	text-align: center;
	padding: 1em 0 0 0;
	font-size: 28px;
	display: block;
	margin: 0;
}
.h3title:hover {
	text-decoration: none;
	color: #ffffff;
}
.h3title a:hover {
	text-decoration: none;
	color: #ffffff;
}
.space {
	display: none;
}
/* AUDIO */

#player {
	text-align: center;
	padding: 0 8%;
}
#player a {
	margin: 0 2%;
	float: left;
	width: 5%;
}
audio {
	width: 82%;
	float: left;
}
p.audio.name {
	text-align: center;
}
a.audio.play {
	text-decoration: none;
	font-family: 'BrandonText-Regular', sans-serif !important;
	font-size: 24px;
	letter-spacing: 1px;
	-webkit-text-fill-color: #fff;
	-webkit-text-stroke: 1px #4089c6;
	text-shadow: -1.2px 1.2px #4089c6;
	color: #fff;
}
h1.audio.name {
	text-align: center;
	font-size: 2.1em;
	-webkit-text-fill-color: #0079c6;
	-webkit-text-stroke: 1px #00395d;
	text-shadow: -1.2px 1.2px #00395d;
	color: #0079c6;
	letter-spacing: 1px;
	margin: 0 0 3% 0;
	text-decoration: none;
	font-family: 'Gloria Hallelujah', sans-serif !important;
}
.container-footers {
	white-space: normal;
}
.modals{
	font-family: 'BrandonText-Regular', Arial, Helvetica, sans-serif !important;
}
.close {
    margin-right: 10px;
    opacity: 10 !important;
}
audio {
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
	-moz-border-radius: 7px 7px 7px 7px;
	-webkit-border-radius: 7px 7px 7px 7px;
	border-radius: 7px 7px 7px 7px;
}
audio::-internal-media-controls-download-button {
    display:none;
}

audio::-webkit-media-controls-enclosure {
    overflow:hidden;
}

audio::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Adjust as needed */
}

/* PHASES */

#phase1 {text-align: center;color: #ffffff;padding: 30px;}
#phase2 {height: 100%;box-shadow: #00000047 -1px 4px 15px 0px;text-align: center;color: #ffffff;padding: 30px;}
#phase3 {text-align: center;color: #ffffff;padding: 30px;}

#phase1 h2, #phase2 h2, #phase3 h2 {padding-bottom: 30px;}
.phase-icon {
	width: 100%;
	max-height: 140px;
	margin: 20px 0 0 0;
	min-height: 140px;
}
#phase2 .phase-icon {max-width: 180px;}
#phase3 .phase-icon {max-width: 95px;}
#phase2 .button {font-size: 19px;} 
.videothumb {
	width: 60%;
	cursor: pointer;
	border-radius: 0 90px 90px 90px;
	border: 3px solid #0079c6;
}
.videothumb:hover {
	-webkit-animation: bounce 1s;
	animation: bounce 1s;
}
.boxvideo {
	background: rgba(255, 255, 255, 0.14);
	padding: 1.5em;
	margin-bottom: 1.5em;
	border-radius: 30px;
}
.waterbg {
	background-image: url('../../packages/images/gotasbg.png');
	background-position: 60px 40px;
}
.matbg {
	background-image: url('../../packages/images/matbg.png');
}
.sized {
	background-size: 20%;
}
.icono {
	float: right;
	position: absolute;
	margin: -35px -25px;
}
.icono:hover {
	-webkit-animation: bounce 1s;
	animation: bounce 1s;
}
.copyright {
	margin: 0;
	font-size: 10px;
}
.ico-game {
	max-width: 200px;
	width: 100%;
}
.ico-game:hover {
	-webkit-animation: bounce 1s;
	animation: bounce 1s;
}
.home-nav {
	/* margin-top: -60px; */
}
.pointer {
	cursor: pointer;
}

/* LESSON PLANS */

#lesson-images{margin-top: 30px;}
.left-icon {
    width: 50px;
    position: absolute;
    top: -10px;
    left: -10px;
    }
 
 @media all and (max-width: 1010px) {
.legal-footer {
	padding-bottom: 0;
	text-align: center;
	color: #062d80;
	bottom: 0px;
	position: relative;
	margin-top: auto;
	margin-bottom: auto;
	width: 100%;
	padding-top: 10px;
}

.icono-audio {
	text-align: center;
	padding: 0.5em;
}
.audiothumbnails {
	padding: 0;
}
.audiothumnails:hover {
	-webkit-animation: rubberBand 1s;
	animation: rubberBand 1s;
}
.h4title {
	padding: 20px;
}
.kids {
	position: relative;
}
.aire {
	margin-bottom: 2em;
}
.activo {cursor: pointer;}

.footer-style {
	height: 8%;
	background-color: #FFF !important;
}
}
.sinpadding{padding: 0px !important;}

/* RESPONSIVE */

/* heights */

@media all and (max-height: 768px) {
h1.audio.name {
	text-align: center;
	font-size: 2em;
	-webkit-text-fill-color: #0079c6;
	-webkit-text-stroke: 1px #00395d;
	text-shadow: -1.2px 1.2px #00395d;
	color: #0079c6;
	letter-spacing: 1px;
	text-decoration: none;
	font-family: 'Gloria Hallelujah', sans-serif !important;
}
#container-audio {
	margin: 1.5em 0 1em 0;
}
.h4title {
	padding: 10px 0 0 0;
}
.space {
	height: 3em;
	display: block;
}

}
@media all and (max-height: 940px) {
}
.footer-style-home {}
}
@media all and (min-width: 2000px) {
.ico-game {
	max-width: 180px;
}

}
@media (min-width: 992px) and (max-width: 1024px) {
.ico-game {
	max-width: 180px;
}
.logo-home {
	width: 55%;
}
.level {
	width: 50%;
}

}

@media all and (max-height: 720px) {
.container-kids {
	display: none;
}
.logo-home {
	max-width: 450px;
}
}

/* mobile */
@media all and (max-width:767px) {

.footer-style-home {
    display: block !important;
}
.home {
    float: none;
}

}
/* tablet */
@media all and (max-width:992px) {

#player {
    text-align: center;
    padding: 20px;
}
.title {
	padding: 40px 0;
    font-size: 50px;}


.box-home {text-align: center;width: 50%;float: left;}
.footer-menu {top: auto;}
.footer-style {position: relative;height: auto;margin-top: 30px;}
#collection, #phases, #musics, #plans {
    height: auto;
}
.menu-icons {margin: 25px;}
.blink-menu {
	margin-top: 0px;
}
.box-logo {
	margin: 0 auto 25px auto;
	text-align: center;
	min-height: auto;
	display: block;
}
.home-nav {
    margin-top: 0;
}
.menu-icons {
    min-width: auto;
    max-width: 40%;
    text-align: center;
    margin: 20px auto;
}
.sub-menu {
    padding: 0px;
}
.box-home {
    text-align: center;
}
.home {
    float: none;
}
#traditionals {
    border: none;
    margin: 20px 30px;
}
#classics {
    text-align: center;
    margin: 20px 30px;
}
#phase2 {
    height: auto;
}
.air {
    margin: 10px 0;
    position: relative;
    width: 100%;
    float: none;
}}
}

/* medium desktop */

@media (min-width: 900px) and (max-width: 1440px) {
.ico-game {
 max-width: 200px;
}
.logo {
width: 300px;
}
}
/* desktop */

@media (min-width: 992px) {
.hand-two, .hand-one, .light, .spaceship {display: block;}
.logo-img{padding-top: 0;}
}
/* 1024 x 768 */



@media (max-height: 920px) and (min-width: 992px) {
.light {
    background: url(../../packages/images/light-MLCW.svg) no-repeat 40% 40%;
    min-height: 200px !important;
    margin-top: 40px;
}
.space {height:1em;}
#lesson-plans h2{font-size: 30px !important;}

.title {font-size: 45px;padding: 10px;}

.footer-style-home {
    display: block;
}

.legal-footer {
    position: fixed;

}
.hand-one, .hand-two {min-height: 360px !important;}

.logo-img {
    padding-top: 10%;
}
.box-logo {
    min-height: auto;
}
.project-one, .project-two, .project-three {
    padding: 0px;
    min-height: 10em !important;
}
.project-one img, .project-two img, .project-three img {
    width: 100%;
    max-height: 100px;
    min-height: 130px;
    min-width: 0px;
    padding: 25px 0 5px 0;
}
.project-one h1, .project-two h1, .project-three h1 {
    width: 100%;
    font-size: 3.3em;
}
body {
	min-height: 767px;
	max-height: 768px; 
	overflow: hidden !important;}
	
.collection-boxes {
font-size: 20px;
margin-top: 2%;
}
#phase2 .button {
    font-size: 18px;
}
.phase-icon {
    max-width: 130px;
}
#collection, #musics {padding-top: 40px;}

}
@media (max-height: 750px) and (min-width: 992px) {
body {overflow: scroll;}
.legal-footer{position: relative;}

}

/* modal PDF */
    .iframe-container {    
    padding-bottom: 55%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.iframe-container iframe,
.iframe-container object,
.iframe-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
@media (min-width: 768px){
#MLCWpdf .modal-dialog, #MLCWpdf-map .modal-dialog, #MLCWpdf-poster .modal-dialog {
    /*width: 700px !important;*/
    margin: 30px auto;
    box-shadow: none;
}
#MLCWpdf .modal-content, #MLCWpdf-map .modal-content, #MLCWpdf-poster .modal-content {
	-webkit-box-shadow: none;
    box-shadow: none;
}}
/*new styles*/
.new-green{background-color: #94d2b9;}
.logo-footer {top: 55px; text-align: right;}
.logo-footer img{    max-height: 55px; margin-left: 60px;}
@media (min-width: 992px){
	.mitad {
		width: 12.5% !important;
	}}