@charset "utf-8";
/* CSS Document */
html{
   font-size: 16px;
   font-family: 'Open Sans', verdana, sans-serif !important;
}

body {	
font-family: 'Open Sans', verdana, sans-serif !important;
}
p {
	margin: 0;
	padding: 0;
}
li {
	margin-bottom:15px;
}
.JCU-title {
	font-family: 'Baloo', cursive;
}
.jcu-large {
	font-size:18px!important
	}
.baloo {
		font-family: 'Baloo', cursive;
		font-weight: normal;
}
.big-baloo {
	font-size:1.5em;
	font-family: 'Baloo', cursive;
	    font-weight: normal;
}

.strong {
	font-weight:bold;
}
 >

/*----------------------LAYOUT -------------------------*/
.width-30 {
	width: 33%;
}
.width-40 {
	width: 38%;
}
.width-50 {
	width: 45%;
}
.width-60 {
	width: 50%;
}
.width-70 {
	width: 65%;
}
.width-80 {
	width: 75%;
}
.width-90 {
	width: 85%;
}
.width-95 {
	width: 95%;
}
.width-100 {
	width: 100%;
}
.half-column {
	width:45%;
	float:left;
	    margin-left: 2.5%;
    margin-right: 2%;
}
.one-third {
	float:left;
	
	    text-align: center;
    line-height: 2.5em;
}
.one-third-col {
	float:left;
	width:33%;
	    text-align: center;
}
.one-third-col-b {
    float: left;
    width: 30%;
    text-align: center;
}
.one-quarter {
	float:left;
	width:25%;
	    text-align: center;
    line-height: 2.5em;
}
.one-quarter-nolineheight {
	float:left;
	width:24%;
	    text-align: center;
    line-height: 0em;
}
.jcu-margins-centred {
	margin: 0 auto;
}
.pointer {
	cursor:pointer;
}
.clear-all {
	clear:both;
}
.float-right {
	float:right;
}
.float-left {
	float:left;
}
.margin-0 {
	margin:0px;
}
.float-center {
  margin: 0 auto;	
}
.jcu-display-middle-on-top {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
	z-index:9999;
}
.jcu-bottommiddle {
	/* [disabled]bottom: 0; */
	left: 50%;
	position: absolute;
	}
.margin-15 {
	margin-top: 15px;
	margin-right: 20px;
	margin-bottom: 15px!important;
	margin-left: 20px;
}
.margin-right-15 {
	margin-right: 15px;
}

.column-colours {
	background-image: url(../images/columns-nouns.png);
	background-attachment: scroll;
	background-repeat: repeat-y;
	background-position: center;
	background-size:contain;
}
.max-800px {
	max-width: 800px;
	/* [disabled]min-height: 600px; */
}
.text-centre {
	text-align:center;
}
.top-padding-20 {
	padding-top:2%;
}
.top-padding-10 {
	padding-top:10px;
}
.top-margin-10 {
	margin-top:10px;
}
section h3 {
	margin:0
}
	
.background-cover {
	background-size: cover;
}
.top-left, .bottom-left {
	float: left;
}
.top-right, .bottom-right {
	float: right;
}
.JCU-animate-bottom {
	position: relative;
	animation: animatebottom 0.4s
}
@keyframes animatebottom {
from {
bottom:-30px;
opacity:0;
}
to {
	bottom: 0;
	opacity: 1;
}
}
.JCU-black, .JCU-hover-black:hover {
	color: #fff!important;
	background-color: rgba(0, 0, 0, 0.65)!important;
}
.JCU-blue {
	color: #fff!important;
	background-color: rgba(29, 41, 101, 1)!important;
}
.JCU-white, .JCU-hover-white:hover {
	color: #2f2e2e!important;
	background-color: rgba(255, 255, 255, 0.92)!important;
}
.JCU-padding-16-rounded {
	padding-top: 5px!important;
	padding-bottom: 16px!important;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	margin: 10px;
	z-index: 400;
}
.JCU-padding {
	width: 100%;
        padding: 50px 60px 10px 65px;
}
.JCU-padding2 {
    width: 100%;
    padding: 20px 20px 10px 25px;
}
.JCU-rounded {
	-webkit-border-radius: 8px;
	border-radius: 8px;
}
.JCU-black-disc {
	padding:12px;
	-webkit-border-radius:40px;
	border-radius:40px;
	color: #fff!important;
	background-color: rgba(0, 0, 0, 0.65)!important;
}
.JCU-yellow-disc {
	padding: 12px;
	-webkit-border-radius: 40px;
	border-radius: 40px;
	color: #111!important;
	background-color: rgba(255,204,0,1)!important;
}
.JCU-yellow-disc:hover {
	background-color: rgba(255,255,102,1)!important;
}
.JCU-yellow-disc2 {
	padding: 10px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	color: #111!important;
	background-color: rgba(255,255,102,1)!important;
}
.JCU-boxout {
	background-color: rgba(191, 191, 191, 0.5);
	-webkit-border-radius: 8px;
	border-radius: 8px;
	padding:15px;
}
.JCU-dotted-boxout {
	background-color: rgba(255,255,255,0.5);
    -webkit-border-radius: 8px;
    border-radius: 8px;
    padding: 10px;
    border: 2px dashed rgb(169, 169, 169);
}
.JCU-quarter-image {
	/* [disabled]max-width: 300px;
*/
}
.JCU-tag-speech-bubble {
	position: relative;
	background-color: #fff;
	color: #000;
	display: inline-block;
	padding: 15px;
	text-align: center;
	-webkit-border-radius: 8px;
	border-radius: 20px;
	border: 2px solid rgb(51,51,51);
}
/*.jcu-button {
	border: none;
	display: inline-block;
	outline: 0;
	padding: 4px 8px;
	vertical-align: middle;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background-color: inherit;
	text-align: center;
	cursor: pointer;
	white-space: nowrap;
	font-size: 0.9em;
}*/


.JCU-blue-text {
	color:#0b88ea;
}
.JCU-green-text {
	color: #12922e;
}
.JCU-orange-text {
	color: #FF6600;
}

.margin-top-10px {
	margin-top:10px;
}
.next-button-padding {
margin-right:20px;
margin-bottom:20px !important;
}
.next-button-padding2 {
margin-right:20px;
margin-bottom:50px !important;
}

.pale-yellow-gradient {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9f7bb+0,ffffff+43 */
background: #f9f7bb; /* Old browsers */
background: -moz-linear-gradient(top, #f9f7bb 0%, #ffffff 43%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #f9f7bb 0%,#ffffff 43%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #f9f7bb 0%,#ffffff 43%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f7bb', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */		
}
.pale-green-gradient {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d5ffa4+1,ffffff+43 */
background: #d5ffa4; /* Old browsers */
background: -moz-linear-gradient(top, #d5ffa4 1%, #ffffff 43%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #d5ffa4 1%,#ffffff 43%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #d5ffa4 1%,#ffffff 43%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5ffa4', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
/*----------------------------------ANIMATIONS------------------------------*/

.timeline-graphic {
	width: 1600px;
	height: 280px;
	position: relative;
	-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 55s; /* Safari 4.0 - 8.0 */
	-webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	animation-name: timeline-graphic;
	animation-duration: 55s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	overflow: hidden;
	z-index: 100;
	background-image: url(../images/timeline/clouds.png);
	opacity: 0.3;
}
/* Standard syntax */
@keyframes timeline-graphic {
 0% {
left:0px;
top:20px;
}
 100% {
left:-800px;
top:20px;
opacity:0%
}
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes timeline-graphic {
 0% {
left:0px;
top:20px;
}
 100% {
left:-800px;
top:20px;
opacity:0%
}
}
/*-----timeline 2-----*/
.timeline-graphic2 {
	width: 1600px;
	height: 300px;
	position: relative;
	-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 20s; /* Safari 4.0 - 8.0 */
	-webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	animation-name: timeline-graphic;
	animation-duration: 20s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	z-index: 90;
	background-image: url(../images/timeline/timeline-intro2.png);
}
/* Standard syntax */
@keyframes timeline-graphic2 {
 0% {
left:0px;
top:30px;
}
 100% {
left:-800px;
top:30px;
opacity:0%
}
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes timeline-graphic2 {
 0% {
left:0px;
top:30px;
}
 100% {
left:-800px;
top:30px;
opacity:0%
}
}
/* ----------zoom------------- */
.zoom-in {
	animation: animatezoom 0.6s
}
@keyframes zoom-in {
from {
transform:scale(0.8)
}
to {
	transform: scale(1)
}
}

/* --------zoom spin------- */

.zoom-spin {
	 position: relative;
    z-index: 300;
	-webkit-animation-name: zoom-spin; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
	-webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
	-webkit-animation-timing-function: linear ease-in-out;
	-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
	animation-timing-function: linear forwards;
	animation-name: zoom-spin;
	animation-duration: 1s;
	animation-delay: 2s;
	animation-timing-function: linear ease-in-out;
	animation-fill-mode: forwards; /*end on last frame */	
	animation-iteration-count:1; 

}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes zoom-spin {
    0% {top:0px; transform:rotate(0) scale(1); color: none;}
	100% {top:-100px; transform:rotate(720deg) scale(5); color: white; }
}

/* Standard syntax */
@keyframes zoom-spin {
    0% {top:0px; transform:rotate(0) scale(1); color: none;}
	100% {top:-100px; transform:rotate(720deg) scale(5); color: white; }
}
/* --------360 slow------- */

.jcu-spin {
	animation: jcu-spin 6s infinite linear
}
@keyframes jcu-spin {
0% {
transform:rotate(0deg)
}
100% {
transform:rotate(359deg)
}
}

.counter-spin {
	animation: counter-spin 6s infinite linear
}
@keyframes counter-spin {
0% {
transform:rotate(0deg) !important;
}
100% {
transform:rotate(0deg) !important;
}
}

/* --------burp------- */

.burp {
	 position: relative;
    z-index: 500;
	-webkit-animation-name: burp; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
	-webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
	-webkit-animation-timing-function: linear ;
	-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
	animation-timing-function: linear forwards;
	animation-name: burp;
	animation-duration: 2s;
	animation-delay: 2s;
	animation-timing-function: linear ;
	animation-fill-mode: forwards; /*end on last frame */	
	animation-iteration-count:1; 
	left:40%;
	opacity:0;

}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes burp {
    0% { opacity:0; transform: scale(1);}
	20% { opacity:1;}
	80% { opacity:1;}
	100% { opacity:0; transform: scale(5); }
}

/* Standard syntax */
@keyframes burp {
    0% { opacity:0; transform: scale(1);}
	20% { opacity:1;}
	80% { opacity:1;}
	100% { opacity:0; transform: scale(5); }
}

/* --------explode------- */

.explode {
	 position: relative;
    z-index: 501;
	-webkit-animation-name: explode; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
	-webkit-animation-delay: 4s; /* Safari 4.0 - 8.0 */
	-webkit-animation-timing-function: linear ;
	-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
	animation-timing-function: linear forwards;
	animation-name: explode;
	animation-duration: 4s;
	animation-delay: 4s;
	animation-timing-function: linear ;
	animation-fill-mode: forwards; /*end on last frame */	
	animation-iteration-count:1; 
	opacity: 1;

}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes explode {
     0% {top:0px; transform:rotate(0) scale(1); }
	100% {top:-100px; transform:rotate(720deg) scale(5); color:rgb(0,102,0);  }
}

/* Standard syntax */
@keyframes explode {
     0% {top:0px; transform:rotate(0) scale(1);}
	100% {top:-100px; transform:rotate(720deg) scale(5); color:rgb(0,102,0); }
}

/*---rocking----*/

.rocking {
	position: relative;
	-webkit-animation-name: rocking; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 5s; /* Safari 4.0 - 8.0 */
	-webkit-animation-delay: 0s; /* Safari 4.0 - 8.0 */
	/* [disabled]-webkit-animation-timing-function: linear; */
	/* [disabled]animation-timing-function: linear; */
	animation-name: rocking;
	animation-duration: 5s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	transition-timing-function: ease-in-out;
	overflow: hidden;
	z-index: 100;
}
/* Standard syntax */
@keyframes rocking {
 0% 	{ transform:rotate(10deg); }
 50% 	{ transform:rotate(-30deg); }
 100% 	{ transform:rotate(10deg); }
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes rocking {
 0% 	{ transform:rotate(10deg); }
 50% 	{ transform:rotate(-30deg); }
 100% 	{ transform:rotate(10deg); }

}
/*----green pulse glow-----*/
@keyframes greenPulse {
  from { color: #009900;  }
  50% { color: #91bd09;  }
  to { color: #009900;  }
}
@-webkit-keyframes greenPulse {
  from { color: #009900;  }
  50% { color: #91bd09;  }
  to {	color: #009900;}
}
.greenPulse {
  -webkit-animation-name: greenPulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
}

/*----Orange pulse glow-----*/
@keyframes orangePulse {
  from { color: rgb(153,102,0);  }
  50% { color:  rgb(255,102,0);  }
  to { color: rgb(153,102,0);  }
}
@-webkit-keyframes orangePulse {
  from { color: rgb(153,102,0);  }
  50% { color:  rgb(255,102,0);  }
  to {	color: rgb(153,102,0);}
}
.orangePulse {
  -webkit-animation-name: orangePulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  font-weight:bold;
}

/*----yellow glow-----*/
@keyframes yellowGlow {
  from { color: #009900;  }
  50% { color: #91bd09;  }
  to { color: #009900;  }
}
@-webkit-keyframes greenPulse {
  from { color: #009900;  }
  50% { color: #91bd09;  }
  to {	color: #009900;}
}
.yellowGlow:hover {
  -webkit-animation-name: greenPulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  font-weight:bold;
}

/* fade in -------------------------------------------------*/
/* usage ------ id="fader1" class="JCU-white-box"---------------*/

#fade-in-02 {
	-webkit-animation: 0.3s ease 0s normal forwards 1 fader;
	animation: 0.3s ease 0s normal forwards 1 fader;
}

#fade-in-05 {
	-webkit-animation: 0.5s ease 0s normal forwards 1 fader;
	animation: 0.5s ease 0s normal forwards 1 fader;
}

#fade-in-1 {
	-webkit-animation: 1s ease 0s normal forwards 1 fader;
	animation: 1s ease 0s normal forwards 1 fader;
}

#fade-in-2 {
	-webkit-animation: 1.5s ease 0s normal forwards 1 fader;
	animation: 1.5s ease 0s normal forwards 1 fader;
}

#fade-in-3 {
	-webkit-animation: 2s ease 0s normal forwards 1 fader;
	animation: 2s ease 0s normal forwards 1 fader;
}

#fade-in-4 {
	-webkit-animation: 2.5s ease 0s normal forwards 1 fader;
	animation: 2.5s ease 0s normal forwards 1 fader;
}

#fade-in-5 {
	-webkit-animation: 3s ease 0s normal forwards 1 fader;
	animation: 3s ease 0s normal forwards 1 fader;
}
#fade-in-5 {
	-webkit-animation: 3.5s ease 0s normal forwards 1 fader;
	animation: 3.5s ease 0s normal forwards 1 fader;
}
#fade-in-6 {
	-webkit-animation: 4s ease 0s normal forwards 1 fader;
	animation: 4s ease 0s normal forwards 1 fader;
}
#fade-in-7 {
	-webkit-animation: 4.5s ease 0s normal forwards 1 fader;
	animation: 4.5s ease 0s normal forwards 1 fader;
}
#fade-in-8 {
	-webkit-animation: 5s ease 0s normal forwards 1 fader;
	animation: 5s ease 0s normal forwards 1 fader;
}
#fade-in-9 {
	-webkit-animation: 5.5s ease 0s normal forwards 1 fader;
	animation: 5.5s ease 0s normal forwards 1 fader;
}
#fade-in-10 {
	-webkit-animation: 6s ease 0s normal forwards 1 fader;
	animation: 6s ease 0s normal forwards 1 fader;
}
#fade-in-11 {
	-webkit-animation: 6.5s ease 0s normal forwards 1 fader;
	animation: 6.5s ease 0s normal forwards 1 fader;
}
#fade-in-12 {
	-webkit-animation: 7s ease 0s normal forwards 1 fader;
	animation: 7s ease 0s normal forwards 1 fader;
}
#fade-in-13 {
	-webkit-animation: 7.5s ease 0s normal forwards 1 fader;
	animation: 7.5s ease 0s normal forwards 1 fader;
}
#fade-in-14 {
	-webkit-animation: 8s ease 0s normal forwards 1 fader;
	animation: 8s ease 0s normal forwards 1 fader;
}
#fade-in-15 {
	-webkit-animation: 8.5s ease 0s normal forwards 1 fader;
	animation: 8.5s ease 0s normal forwards 1 fader;
}


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

/* fade out -------------------------------------------------*/
.fadeout {
	-webkit-animation: 3s ease 0s normal forwards 1 fadeout;
	animation: 3s ease 0s normal forwards 1 fadeout;
}
.fadeout-1sec {
	-webkit-animation: 1s ease 0s normal forwards 1 fadeout;
	animation: 1s ease 0s normal forwards 1 fadeout;
}
 @keyframes fadeout {
 0% { opacity:1; }
 100% { opacity:0; }
}
 @-webkit-keyframes fadeout {
 0% { opacity:1; }
 100% { opacity:0; }
}
/* fade out -------------------------------------------------*/
.fadein {
	-webkit-animation: 3s ease 0s normal forwards 1 fadein;
	animation: 3s ease 0s normal forwards 1 fadein;
}
 @keyframes fadeout {
 0% { opacity:0; }
 100% { opacity:1; }
}
 @-webkit-keyframes fadeout {
 0% { opacity:0; }
 100% { opacity:1; }
}
/* fade in and out -------------------------------------------------*/
.fadein-and-out {
	-webkit-animation: 3s ease 0s normal forwards 1 fadein-and-out;
	animation: 3s ease 0s normal forwards 1 fadein-and-out;
}
 @keyframes fadein-and-out {
 0% { opacity:0; transform: scale(0);}
 20% { opacity:1; transform: scale(1);}
  80% { opacity:1; transform: scale(1);}
 100% { opacity:0; transform: scale(0);}
}
 @-webkit-keyframes fadein-and-out {
 0% { opacity:0; transform: scale(0);}
 20% { opacity:1; transform: scale(1);}
  80% { opacity:1; transform: scale(1);}
 100% { opacity:0; transform: scale(0);}
}
/*-------end fade in out-------*/


/* small zoom in -------------------------------------------------*/
.small-zoom {
	-webkit-animation: 2s ease 0s normal forwards 1 small-zoom;
	animation: 2s ease 0s normal forwards 1 small-zoom;
}
 @keyframes small-zoom {
 0% { transform: scale(1);}
 50% { transform: scale(1.5);}
 100% { transform: scale(1);}
}
 @-webkit-keyframes small-zoom {
 0% { transform: scale(1);}
 50% { transform: scale(1.5);}
 100% { transform: scale(1);}
}


/* fade out 'y' in adjectives -------------------------------------------------*/
.fadeout-letters1 {
	-webkit-animation: 1s ease 0s normal forwards 1 fadeout-letters;
	animation: 1s ease 0s normal forwards 1 fadeout-letters;
	-webkit-animation-delay: 4s; /* Safari 4.0 - 8.0 */
    animation-delay: 4s;
}
.fadeout-letters2 {
	-webkit-animation:1s ease 0s normal forwards 1 fadeout-letters;
	animation:1s ease 0s normal forwards 1 fadeout-letters;
	-webkit-animation-delay: 6s; /* Safari 4.0 - 8.0 */
    animation-delay: 6s;
}
.fadeout-letters3 {
	-webkit-animation: 1s ease 0s normal forwards 1 fadeout-letters;
	animation: 1s ease 0s normal forwards 1 fadeout-letters;
	-webkit-animation-delay: 8s; /* Safari 4.0 - 8.0 */
    animation-delay: 8s;
}
 @keyframes fadeout-letters {
 0% { opacity:1; }
 50% { opacity:1; }
 100% { opacity:0; display:none;  transform:scale(0, 0); }
}
 @-webkit-keyframes fadeout-letters {
 0% { opacity:1; }
  50% { opacity:1; }
 100% { opacity:0; display:none; transform:scale(0, 0);}
}
/* fade in 'iest' in adjectives -------------------------------------------------*/

.fadein-letters1 {
	-webkit-animation: 1s ease 0s normal forwards 1 fadein-letters;
	animation: 1s ease 0s normal forwards 1 fadein-letters;
	-webkit-animation-delay: 5s; /* Safari 4.0 - 8.0 */
    animation-delay: 5s;
	opacity:0;
}
 @keyframes fadein-letters {
 0% { opacity:0; }
 50% { opacity:0; }
 100% { opacity:1; left:-20px }
}
 @-webkit-keyframes fadein-letters {
 0% { opacity:0; }
  50% { opacity:0; }
 100% { opacity:1;  left:-20px  }
}

/*---rocking----*/

.fade-in-move-from-left {
	position: relative;
	-webkit-animation-name: fade-in-move-from-left; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
	-webkit-animation-delay: 0s; /* Safari 4.0 - 8.0 */
	/* [disabled]-webkit-animation-timing-function: linear; */
	/* [disabled]animation-timing-function: linear; */
	animation-name: fade-in-move-from-left;
	animation-duration: 3s;
	animation-delay: 0s;
	animation-iteration-count: 1;
	transition-timing-function: ease-int;
	overflow: hidden;
	z-index: 100;
}
/* Standard syntax */
@keyframes fade-in-move-from-left {
 0% 	{ right:20%; opacity:0; }
 100% 	{ right:0%; opacity:1; }
}

/* --------animation magnifying glass------- */

.magnifying {
	 position: absolute;
    z-index: 300;
	-webkit-animation-name: magnifying; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
	-webkit-animation-delay: 0s; /* Safari 4.0 - 8.0 */
	-webkit-animation-timing-function: linear ease-in;
	-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
	
	animation-timing-function: linear forwards;
	animation-name: magnifying;
	animation-duration:3s;
	animation-delay: 0s;
	animation-timing-function: linear ease-in;
	animation-fill-mode: forwards; /*end on last frame */	
	animation-iteration-count:1; 

}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes magnifying {
    0% {bottom:0px; right:50%; transform: scale(4); }
	100% {bottom:0px;  right:0%;  transform: scale(1); }
}

/* Standard syntax */
@keyframes magnifying {
    0% {
    top: 263px;
    right: 20%;
    transform: scale(2);
}
 50% {
    top: 263px;
    right: 26%;
    transform: scale(1);
}
	100% {
    top: 242px;
    right: -40%;
    transform: scale(1);
}
}

/* --------animation kicked ball------- */

.kicked-ball {
	 position: absolute;
    z-index: 300;
	-webkit-animation-name: kicked-ball; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
	-webkit-animation-delay: 0s; /* Safari 4.0 - 8.0 */
	-webkit-animation-timing-function: linear;
	-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
	
	animation-timing-function: linear forwards;
	animation-name: kicked-ball;
	animation-duration:1s;
	animation-delay: 0s;
	animation-timing-function: linear;
	animation-fill-mode: forwards; /*end on last frame */	
	animation-iteration-count:1; 

}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes kicked-ball {
    0% {bottom:0px; right:0%; transform: scale(1) rotate(0); }
	100% {bottom:0px;  right:0%;  transform: scale(4) rotate(359deg); }
}

/* Standard syntax */
@keyframes kicked-ball {
    0% {
    top: 263px;
    right: 100%;
    transform: scale(1) rotate(0deg);
}
	100% {
    top: 70px;
    right: -80%;
    transform: scale(2) rotate(359deg);
}
}

/*-----------------------------------END ANIMATIONS-----------------------------------*/

.w3-display-container {
	position: relative;
	overflow: hidden;
	z-index: 500;
}
.burglar {
	top: 29%;
    position: absolute;
    right: 0%;
}
.notepad {
	background-image:
	url(../images/notepad.png);
	background-repeat:no-repeat;
	background-size:contain;
	padding:45px;
	padding-bottom: 100%;
}

/*-----------------------------------BUTTONS-----------------------------------*/
jcu-btn, .jcu-button {
	padding: 8px 12px;
	/* [disabled]border: 1px solid rgb(153,153,153); */
	    border: 2px solid rgb(74, 65, 65);
	display: inline-block;
	outline: 0;
	vertical-align: middle;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background-color: #fff;
	text-align: center;
	cursor: pointer;
	white-space: nowrap;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	margin-bottom: 7px;
	font-size: 80%;
}
.jcu-btn:hover,
.jcu-button:hover  {
	background-color: #f44336;
	color:#fff;
}
.jcu-blue-button:hover  {
	background-color: #1d2a65;
	color:#fff;
}
.jcu-blue-button {
	padding: 8px 12px;
	border: 2px solid rgb(74, 65, 65);
	display: inline-block;
	outline: 0;
	vertical-align: middle;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background-color: #8de4ff;
	text-align: center;
	cursor: pointer;
	white-space: nowrap;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	margin-bottom: 7px;
	font-size: 80%;
}
.jcu-disabled, .jcu-btn:disabled, .jcu-button:disabled {
	cursor: not-allowed;
	opacity: 0.3;
}
.jcu-disabled *, :disabled * {
	pointer-events: none
}
.jcu-btn.w3-disabled:hover, .jcu-btn:disabled:hover {
	box-shadow: none
}
.jcu-button-small {
	padding: 5px 9px;
	border: 0px solid rgb(153,153,153);
	display: inline-block;
	outline: 0;
	vertical-align: middle;
	overflow: hidden;
	text-decoration: none;
	font-size:90%;
	color: #000;
	background-color: #fff;
	text-align: center;
	cursor: pointer;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	margin-bottom: 4px;
}
.jcu-hover-green:hover {
	background-color: #009933!important;
}
.jcu-green {
	background-color: #fff!important;
}
.jcu-purple, .jcu-hover-purple:hover {
    color: #fff!important;
    background-color: rgb(107, 44, 145)!important;
}
/*-----------------------------------Noun monster quiz -----------------------------------*/
.answer_box {
	display: none;
	/* [disabled]width: 100%; */
	/* [disabled]position: relative; */
	/* [disabled]left: 0; */
	/* [disabled]top: 0; */
	/* [disabled]height: 27.5em; */
}
.JCU-white-box {
	background-color: rgba(255, 255, 255, 0.73);
	padding: 10px 15px;
	color: rgb(51,51,51);
	margin: 10px;
	border-radius: 5px;
	position: relative;
}
.captions {
	left: 0px;
	bottom: 30px;
	display: block;
	position: relative;
	-webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.77);
	width:inherit;
}
.captions-quarter-images {
	left: 0px;
    bottom: 60px;
    display: block;
    position: relative;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    text-align: center;
    background-color: rgb(255, 255, 255);
    width: 80%;
    text-align: center;
    font-size: 105%;
    font-weight: 400;
    padding: 5px;
    margin-left: auto;
    margin-right: auto;
	    border-radius: 22px;
	-webkit-border-radius: 22px;
	font-family: 'Baloo', cursive;
}
.JCU-whitebox-no-margin {
	background-color: rgba(255, 255, 255, 0.73);
	padding: 10px 15px;
	color: rgb(51,51,51);
	margin: 2px;
	border-radius: 5px;
	position: relative;
}
.JCU-white-lozenge {
	background-color: rgb(255, 255, 255);
	padding: 10px 28px;
	color: rgb(51,51,51);
	margin: 5px;
	border-radius: 44px;
	-webkit-border-radius: 44px;
	position: relative;
}

.JCU-display-item {
	color: #000;
	font-size: 1em;
	z-index: 990;
	cursor: pointer;
	text-align: center;
}
.JCU-display-item p {
	opacity: 0;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
}
.jcu-bar .jcu-bar-item {
    padding: 8px 16px;
    float: left;
    width: auto;
    border: none;
    outline: none;
    display: block;
    margin-right: 10px;
}
.jcu-bar-item:active {
	color:#fff;
}

.layout_table {
	width: 100%!important;
}
table, tbody, tr, td {
	margin: 0px;
	padding: 0px;
}
td img {
	width: 80%;
}




.screen-too-small {
	display:none;
}

/*  ------ MEDIA QUERIES was 425px---------------*/
@media only screen and (max-width: 620px) {
    /* For tablets: */
.w3-display-container {
	display:none;
}
.screen-too-small {
	display:block;
	padding:20px;
	font-size:2em;
	text-align:center;
	background-color:rgb(255,255,153);
}
.screen-too-small span {
font-size:5em;
}
}

/*@media screen and (max-width: 1024px) {  

.w3-large {
    font-size:13px!important;
}
}*/
@media screen and (min-width: 1025px) {  

.w3-large {
    font-size:18px!important;
}
}
/* reason margins fix ----------- */
@media only screen and (min-device-width : 991px) and (max-device-width : 1200px) {
/* Styles */
p {
	/*font-size:95%;*/
}
h3{
	/*font-size:20px;*/
}
h1, h2, h5 {
	/* [disabled]font-size: 90%; */
	line-height: 1;
}
.childSlides, 
.childSlides img {
	width:70%;
}
.background-overflow {
	/* [disabled]width: auto!important; */
}
h2 .noun-detective-words {
	font-size: 1.5em;
    padding: 10px 3px;
}
.noun-monster-position {
	/* [disabled]bottom: 12px!important; */
	/* [disabled]position: absolute; */
	/* [disabled]left: 0%; */
	/* [disabled]z-index: -1; */
}
.noun-monster-words {
	/* [disabled]font-size:150%; */
}
}

/*-----------------------------------Speech bubbles-----------------------------------*/

.talk-bubble {
	margin: 0px;
	display: inline-block;
	position: relative;
	height: auto;
	background-color: rgb(255,255,255);
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border: 2px solid #333;
	/* [disabled]font-size:80%; */
	padding: 15px;
}
/*Right triangle, bottom right */
.tri-right.btm-right-in:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: 38px;
	bottom: -20px;
	border: 12px solid;
	border-color: white white transparent transparent;
}
.tri-right.border.btm-right-in:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: 36px;
    bottom: -25px;
    border: 12px solid;
    border-color: #666 #666 transparent transparent;
}
/*Right triangle, bottom left - class= .talk-bubble tri-right border round btm-left-in */
.tri-right.border.btm-left-in:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 35px;
    right: auto;
    top: auto;
    bottom: -27px;
    border: 13px solid;
    border-color: #666 transparent transparent #666;
}
.tri-right.btm-left-in:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 38px;
    right: auto;
    top: auto;
    bottom: -20px;
    border: 12px solid;
    border-color: white transparent transparent white;
}
/* speech bubble bottom middle */
.tri-right.border.middle:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 44.7%;
    right: auto;
    top: auto;
    bottom: -26px;
    border: 12px solid;
    border-color: #333 transparent transparent #292525;
}
.tri-right.middle:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 45%;
    right: auto;
    top: auto;
    bottom: -21px;
    border: 11px solid;
    border-color: white transparent transparent white;
}
.magnifying-glass-cursor {
	opacity:0.0;
	z-index:0;
	display:none;
}
/*------------------video-----------------*/

.video-dimensions {
	width:90%;
	height:auto;
}
video::cue {
     background: white;
     color:  black;
   }
/*------------------video-----------------*/

/*------------------World languages----------------*/

.sub-continent-europe {
	background-color: rgb(0,102,153);
	-webkit-border-radius: 90px;
	border-radius: 90px;
	background-image: url(../images/languages-map/europe.png);
	background-repeat: no-repeat;
	background-size: contain;
	height: 300px;
	padding-top:220px;
	background-position: right top;
}
.sub-continent-asia {
	background-color: rgb(0,102,153);
	-webkit-border-radius: 90px;
	border-radius: 90px;
	background-image: url(../images/languages-map/asia.png);
	background-repeat: no-repeat;
	background-size: cover;
	height: 300px;
	padding-top:220px;
	background-position: left top;
}

/*------------------Detective quiz----------------*/

.noun-detective-words {
	/* [disabled]padding: 8px 10px; */
	color: rgb(34, 139, 222);
	margin: 0px;
	border-radius: 2px;
	position: relative;
	font-size: 1em;
	border: 1px dashed rgb(0, 0, 0);
	margin-bottom: inherit;
	cursor: pointer;
}
.noun-detective-words:hover {
	color: rgb(0,51,153);
}

.quiz_answer_box {
	display: none;
	position: relative;
}
.word-button{ background-color:none;!important;}
.word-button:visited { color: rgb(0,204,255); }
.word-button:hover{color: rgb(0,51,153)!important;}

.word-button{
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;-ms-user-select:none;
user-select:none} 
.word-button:disabled{cursor:not-allowed;opacity:0.3}

.white-on-red {
	background-color:#f44336;
	color:rgb(255,255,255);
}
.det-head {
	float:right;
	 position: absolute;
    right: -70px;
    top: -31px;

}
#overlay {
    position: absolute;
    display: block;
    max-width: 800px;
    max-height: 600px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.7);
    z-index: 2;
	padding:15px;
}
#overlay-text{
    background-color: rgba(0,0,0,0.7);
    color: white;
	padding:15px;
}
.background-overflow {
	width:110%;
}
.noun-monster-position {
	/* [disabled]bottom: -66px; */
	/* [disabled]position: absolute; */
	/* [disabled]left: 0%; */
	/* [disabled]z-index: -1; */
	width:100%;
}
.bluesky-background {
	background-image:url(../images/sky.png);
	background-size: 100% 100%;
    background-repeat: no-repeat;
}
.yellow-background {
	background-image:url(../images/yellow-background.png);
	background-size: 100% 100%;
    background-repeat: no-repeat;
}
.eponyms-background {
	background-image: url(../images/eponyms/eponyms3.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.eponyms-background2 {
	background-image: url(../images/eponyms/eponyms4.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.alex-background1 {
	background-image: url(../images/common-nouns1.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.alex-background4 {
	background-image: url(../images/nouns-alex3.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.alex-background5 {
	background-image: url(../images/sky-field.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.abstract-nouns1 {
	background-image: url(../images/abstract-nouns.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.abstract-nouns2 {
	background-image: url(../images/concrete-nouns.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.abstract-nouns3 {
	background-image: url(../images/abstract-nouns-game-intro.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.collective-nouns1 {
	background-image: url(../images/collective-nouns-back.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.collective-nouns2 {
	background-image: url(../images/collective-nouns-back2.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.monster-intro {
	background-image: url(../images/noun-monster-game/noun-monster-intro.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.monster-intro2 {
	background-image: url(../images/noun-monster-game/noun-monster-intro2.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.monster-library {
	background-image: url(../images/noun-monster-game/library.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.detective-city {
	background-image:url(../images/adjective-detective/cityscape.jpg);
	background-size: 100% 100%;
    background-repeat: no-repeat;
}
.detective-back1 {
	background-image:url(../images/adjective-detective/detective-back1.jpg);
	background-size: 100% 100%;
    background-repeat: no-repeat;
}
.detectives-notepad {
	background-image:url(../images/adjective-detective/document2.jpg);
	background-size: 100% 100%;
    background-repeat: no-repeat;
}