@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot?-waqnr0');
	src:url('../fonts/icomoon.eot?#iefix-waqnr0') format('embedded-opentype'),
		url('../fonts/icomoon.woff?-waqnr0') format('woff'),
		url('../fonts/icomoon.ttf?-waqnr0') format('truetype'),
		url('../fonts/icomoon.svg?-waqnr0#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

body {
	background: url(../images/bck.jpg);
	background-size: 200vh;
	font:14px/1.5em Verdana, Geneva, sans-serif;
	color:#444;
}

@media (min-width:1024px) {
body {
	background-size: 100vw 100vh;
	background-repeat: repeat;
 }
}

a
{
   text-decoration:none;
   outline:none;
}


a img {
  border:none;
}

.container
{
  margin: 3% auto;
  position:relative;
  min-height:600px;
}

@media (min-width:1024px){
.container{
	width:960px;
 }
}

.cf:after{
	content:"";
	display:table;
	clear:both;
}

.off
{
  display:none;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.no-show{
  visibility:hidden;
  opacity: 0;
}

.transition{
  -webkit-transition: all 1s ease-in;
  -moz-transition: all 1s ease-in;
  -ms-transition: all 1s ease-in;
  -o-transition: all 1s ease-in;
  transition: all 1s ease-in;
}

.loading
{
  font-size:1.5em;
  font-weight:bold;
  width:100%;
  position:absolute;
  top:30%;
  left:30%;
}

#progressbar
{
  border:2px solid #777;
  width:50%;
}

#progressbar p
{
  margin:0;
  padding:1% 0;
  width:0;
  background-color:#f5f80c;
}


.side-nav{
	list-style:none;
	padding-left:0;
}

.side-nav li{
	float:left;
	width:25%;
	text-align:center;
}

@media(min-width:992px){
.side-nav{
	float:left;
	list-style:none;
	width:15%;
	padding-left:0;
}
.side-nav li{
	float:none;
	margin-bottom:15px;
	width: 100%;
}
}

@media(min-width:1024px){
.side-nav li{
	margin-bottom:0;
}
}

.side-nav li a img{
	width:80%;
}

@media (min-width:1200px){
.side-nav li a img{
	width:100%;
}
}

.side-nav li:hover img{
  -moz-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  transform: rotate(-20deg);
}


.main_content{
	clear: both;
	margin:0 auto 3%;
	width:95%;
	padding:2% 5%;
	border:3px solid #7b8f8e;
	border-radius:15px;
	background: #c7dcda; /* Fall back for browsers that donot support transparency */
	background: rgba(199, 220, 218, 0.8);
}
@media(min-width:992px){
.main_content{
	float:right;
	width:80%;
	clear:none;
}
}

h1,
h2,
h3{
	text-align:center;
	line-height: 1.4;
}

.main_content a{
	color:#00B;
}

.main_content a:hover{
	text-decoration:underline;
}

.slide{
	width:50%;
	float:left;
	text-align:center;
}

.slide img{
	border-radius:12px;
	border:1px solid #7b8f8e;
	width:70%;
}

.games-slide a img,
.learning-slide a img{
	width:100%;
}

.note{
	clear:both;
	text-align:center;
	font-size:small;
}

.box-wrap{
	float:left;
	width:50%;
	margin:0 auto;
}
.box{
	padding:0 9% 5%;
}

@media(min-width: 768px){
.box-wrap{
	width:33.33%;
}
}

.box h4{
	text-align:center;
	color:#900;
	margin:10px auto;
	line-height: normal;
}

.box img{
	width:100%;
	text-align:center;
	border-radius:12px;
	border:4px solid #bbb;
	-webkit-box-shadow: 0px 3px 5px -1px #333;
    box-shadow: 0px 3px 5px -1px #333;  
}

.box img:hover{
   -webkit-transform: rotate(5deg);
   -moz-transform: rotate(5deg);
   -o-transform: rotate(5deg);
   -ms-transform: rotate(5deg);
    transform: rotate(5deg);
}

.scratch_games{
	clear:both;
	float:right;
}

.scratch_games a{
	color:#fff;
	font-weight:bold;
	display:inline-block;
	padding:10px;
	line-height:20px;
	background-color:#09F;
	border-radius:30%/100%;
	margin-left:5px;
}

#win-img,
#game-over-img
{
  width:100%;
  position:absolute;
  top:20%;
  left:10%;
  display:none;
  text-align:center;
}

#win-img img,
#game-over-img img
{
	width:70%;
}

@media(min-width:600px){
#win-img img,
#game-over-img img
{
	width:50%;
}
}

.button-box{
	margin: 5px auto 10px;
	position:relative;
}

.game-button{
  font-size: 20px;
  font-weight:bold;
  color:white;
  background-color:#005387;
  border:2px solid #fff;
  border-radius:5px;
  padding:15px 40px;
}

.game-button:hover{
  background-color:#0092bf;
  cursor:pointer;
}

.speaker-controls{
	position:absolute;
	top:-5px;
	left:150px;
}

.note{
 clear:both;
 text-align: justify; 
}

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  border: 0;
}

.embed-responsive.embed-responsive-4by3 {
   padding-bottom: 75%;
}

.slides{
	position:relative;
}

#prev{
	position:absolute;
	top:40%;
	left:-7%;
}

#next{
	position:absolute;
	top:40%;
	right:-7%;
}

.icons{
    font-family: 'icomoon';
	font-size:20px;
	cursor:pointer;
	color:#444;
}

@media(min-width:768px){
#prev{
	left:-4%;
}

#next{
	right:-4%;
}
	
.icons{
	font-size:25px;
}
}

.icon-speaker:before {
	content: "\e601";
}

.icon-prev:before {
	content: "\f053";
}
.icon-next:before {
	content: "\f054";
}

.icon-arrow-left:before {
	content: "\f060";
}
.icon-arrow-right:before {
	content: "\f061";
}

.icons span{
	display:none;
}

.hide{
	visibility:hidden;
}

#slide-indicator{
	clear:both;
	margin-top:20px;
}

.facebook-like{
	clear:both;
	float:left;
	margin:10px;
}

p.less-margin{
	margin:0 auto 5px;
}

.hidden-xs{
	display: none;
}
.visible-sm{
	clear:both;
	display: block;
}

@media (min-width:768px){
.hidden-xs{
	display: block;
}
.visible-sm{
	display: none;
}
}