@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Gabriela&family=Noto+Sans+SC&family=Noto+Serif+SC:wght@200..900&display=swap');
*:focus {
  outline: none;
}
#testimonials, #institutions, #HSK-chinese-exams, #English, #Chinese, #info, #browse, #HSK2, #HSK3, #HSK4, #HSK5, #HSK6, #coloring,#word-search,#pair-off,#spot,#unscramble,#names,#dominoes,#matching,#folktales {scroll-margin-top: 200px}
/*
Changes par rapport a gtl.css: .topbar, .column, nav a#pull, footer responsiveness, blockquote, cite, .topbar .header-icons, .panel.show max-height
Deleted par rapport a gtl.css: .icon, .half-column, .explicatif, .home-explicatif, #cssmenu, .block series, .ingame-logo, media queries for blockquote
Added par rapport a gtl.css: .flat-btn-indigo, .flat-btn-brown, .twinkle, spin keyframes, .medieval-border, .form-sheet, input series, signin page, #card, #sentiment, .mininav, .membership-bg-image series, *:focus, .pinyin, .encadre-jaune
*/

/*What is this? Useless? */
.medieval-border{
	background: url("/images/medieval_border.jpg") repeat-x bottom;
	height:60px;
}
.books{float:left; margin:25px; text-align:center}
.books:first-child{margin-left: 0}
.voc-list {
	float:left;
	margin: 60px 50px 50px 0;
	padding:20px;
	border: 1px solid #CCC;
	width: 120px;
	height: 170px;
	background-color: #fff; 
	box-shadow: 5px 5px 6px 0px rgba(0,0,0,0.2);
	transition: all 0.5s;
}
.voc-list:last-child{margin-right:0}
.button {  
	border: 1px solid #960;
	height: 20px; 
	background: rgb(127,83,1);
	box-shadow:inset 0px -15px 10px -10px rgba(102,2,30, 0.5), 0px 0px 2px 2px rgba(0, 0, 0, 0.1);
	color: #fff;  
	padding: 5px 12px;      
	border-radius: 4px;
	text-decoration: none;
	text-shadow: 0 -1px 0 #333333; 
	cursor: pointer; 
}

/* Logo Animation */
.twinkle{
    width:25px;
    height: 25px;
    position: absolute;
    animation:spin 2s linear infinite;
  }
@keyframes spin {
  0% {opacity: 0; transform: rotate(45deg) scale(0)}
  50% {opacity: 1}
  100% {opacity: 0; transform: rotate(405deg) scale(1.1)}
}
#logo{position: relative; left: 0}
#logo img {position: absolute; left: 0}

/* Membership, Forms */
.membership-bg-image{
	background:#2c0303 url("/images/welcome-members.jpg") no-repeat center top;
	box-shadow:inset 0px -350px 200px -200px rgba(67, 5, 5, 1), inset 0px 350px 200px -200px rgba(67, 5, 5, 1);
}
.membership-bg-image span{
	color:#FFF;
	opacity:0.7;
}
.form-sheet { 
	display: block;
	width: 500px;
	margin:25px auto; 
	padding: 20px;
	box-sizing: border-box;   
}
.form-sheet label{
	font-size: 14px;
	opacity:0.4;
}
.user {position: relative}
.user input {text-indent: 30px}
.user .fa-user, .user .fa-envelope, .user .fa-lock { 
  position: absolute;
  top: 10px;
  left: 15px;
  opacity: 0.6;
}
input:not([type="submit"]) { 
display: block;
font-family: "Helvetica Neue", Arial, sans-serif;
border-style: solid;
border-width: 1px;
border-color: #dedede;
margin-bottom: 20px;
font-size: 1.55em;
padding: 11px 25px;
width: 380px;
color: #777;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
input:focus { 
color: #CCC;
border-color: rgba(41, 92, 161, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
outline: 0 none; 
}
.submit input { 
    width: auto; 
    padding: 9px 15px; 
    background: #d4c88f; 
    border: 0; 
    font-size: 14px; 
    color: #FFFFFF; 
    cursor: pointer;
}

::placeholder {opacity: 0.5}
@media screen and (max-width: 540px) {
	.form-sheet {width: 98%;}
	input:not([type="submit"]) {width: 80%;}
}

/* Start of gtl.css =========================================================================== */
html, html a { -webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004)}
body { 
	background-color:#FFF;	
	font-size: 16px;
	color: #7f5301;
	font-family: Arial, 'Noto Sans SC', "Microsoft YaHei New", "Microsoft Yahei", STXihei, "华文细黑", SimSun, sans-serif;
	text-align:center;
	padding:155px 0 0 0;
	margin:0;
	line-height:25px;
}
.container{
	width:1024px;
	margin: 0 auto;
	text-align:center;
	clear:both
}
.group:after {
  content: "";
  display: table;
  clear: both;
}
a:link, a:visited {
	color: #cc9933;
	font-weight: bold;
	text-decoration: none;
	transition: all 0.5s;
}
a:hover, a:active {color: #069;	text-decoration: none}
h1 {
	font-family: Verdana, Geneva, sans-serif; 
	font-size: 34px;
	color:#353535;
	font-weight:bold;
	line-height:44px;
	background: url('/img/h1-bg.png') no-repeat center bottom; padding-bottom: 45px;
}
h1 span{font-size:16px}
.topbar {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	height:155px;	
	width:100%;
	background: #2c1703;
	background-image: url("/images/medieval_border_reverse.jpg");
	background-image: url("/images/medieval_border_reverse.jpg"), linear-gradient(#663b0b, #110901);
	background-position: bottom;
	background-repeat: repeat-x;
}
.topbar img {margin-left: -45px;transition: 1s}
.topbar img:hover{margin-top: 5px}
.topbar span{font-weight: bold;color: #FFF}
/* Mobile Navbar */
nav {
	height: 40px;
	width: 100%;
	background: #455868;
	font-size: 11pt;
	font-family: 'PT Sans', Arial, sans-serif;
	font-weight: bold;
	position: relative;
	border-bottom: 2px solid #283744;
}
nav i {
	margin: auto 15px auto 0;
}
nav ul {
	padding: 0;
	margin: 0 auto;
	width: 600px;
	height: 40px;
}
nav li {
	display: inline;
	float: left;
}
nav .fa{opacity: 0.7}
nav a {
	color: #fff !important;
	display: inline-block;
	width: 100px;
	text-align: center;
	text-decoration: none;
	line-height: 40px;
	text-shadow: 1px 1px 0px #283744;
}
nav li a {
	border-right: 1px solid #576979;
	box-sizing:border-box;
}
nav li:last-child a {border-right: 0}
nav a:hover, nav a:active {background-color: #8c99a4}
nav a#pull {display: none}

/* flat-btn */
[class*='flat-btn'] {font-size: 14px; font-family: Verdana, sans-serif; padding: 20px 40px; border-radius: 5px; text-transform: uppercase; letter-spacing: 1px; display: inline-block; margin: 30px 20px 40px 0; font-weight: bold; width: 150px; text-align:center; color:#fff !important; line-height: 25px}
[class*='flat-btn']:hover, [class*='flat-btn']:focus {opacity:0.75; color: #fff}
[class*='flat-btn']:last-of-type {margin-right: 0}
.flat-btn-orange {background: #fcba59; box-shadow: 0px 3px 0px 0px #d8a04d}
.flat-btn-pink {background: #e47caf; box-shadow: 0px 3px 0px 0px #c06692}
.flat-btn-green {background: #9C6; box-shadow: 0px 3px 0px 0px #6fa637}
.flat-btn-blue {background: #7cc5e4; box-shadow: 0px 3px 0px 0px #41aad6}
.flat-btn-purple {background: #d3a7e5; box-shadow: 0px 3px 0px 0px #c382de}
.flat-btn-indigo {background: #b5aaf3; box-shadow: 0px 3px 0px 0px #948ad1}
.flat-btn-brown {background: #bf8106; box-shadow: 0px 3px 0px 0px #936200}
}
blockquote {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:18px;
	line-height:28px;
	clear:both;
	text-align:left;
	background-color: #dfdfdf; 
	padding: 50px 40px;
	width: 90%;
	margin:50px auto;
	box-sizing: border-box;
}
cite {font-style:italic; color:#C36}
cite:before {content: "\2014 \2009"}
h2 {
	font-family: 'Gabriela', serif;
	font-size:26px;
	margin-top:50px;
	color: #600;
	line-height:32px;
}
h3{
	font-size:32px;
	font-family:Georgia, "Times New Roman", Times, serif;
	line-height:normal;
}
h4 {
	font-family: 'Gabriela', serif;
	font-size:20px;
	color: #c69;
}
/*owl.carousel.min.css*/
.owl-carousel, .owl-carousel .owl-item {position: relative}
.owl-carousel {display: none;width: 100%;z-index: 1}
.owl-carousel .owl-stage {
    position: relative;
    touch-action: manipulation;
}
.owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0
}
.owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
}
.owl-carousel .owl-item {
    min-height: 1px;
    float: left;
}
.owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled {display: none}
.no-js .owl-carousel, .owl-carousel.owl-loaded {display: block}
.owl-carousel .owl-dot, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-nav .owl-prev {cursor: pointer;user-select: none}
.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel button.owl-dot {
    background: 0 0;
    color: inherit;
    border: none;
    padding: 0 !important;
    font: inherit
}
.owl-carousel.owl-loading {
    opacity: 0;
    display: block
}
.owl-carousel.owl-hidden {opacity: 0}
.owl-carousel.owl-refresh .owl-item {visibility: hidden}
.owl-carousel.owl-drag .owl-item {touch-action: pan-y;user-select: none}
.owl-carousel.owl-grab {cursor: move;cursor: grab}
.owl-carousel.owl-rtl {direction: rtl}
.owl-carousel.owl-rtl .owl-item {float: right}
.owl-carousel .animated {animation-duration: 1s;animation-fill-mode: both}
.owl-carousel .owl-animated-in {z-index: 0}
.owl-carousel .owl-animated-out {z-index: 1}
.owl-carousel .fadeOut {animation-name: fadeOut}
@keyframes fadeOut {0% {opacity: 1} 100% {opacity: 0}}
.owl-height {transition: height .5s ease-in-out}
.owl-carousel .owl-item .owl-lazy {opacity: 0;transition: opacity .4s ease}
.owl-carousel .owl-item .owl-lazy:not([src]), .owl-carousel .owl-item .owl-lazy[src^=""] {max-height: 0}
.owl-carousel .owl-item img.owl-lazy {transform-style: preserve-3d}
.owl-carousel .owl-video-wrapper {
    position: relative;
    height: 100%;
    background: #000
}
.owl-carousel .owl-video-play-icon {
    position: absolute;
    height: 80px;
    width: 80px;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -40px;
    background: url(owl.video.play.png) no-repeat;
    cursor: pointer;
    z-index: 1;
    transition: transform .1s ease
}
.owl-carousel .owl-video-play-icon:hover {transform: scale(1.3, 1.3)}
.owl-carousel .owl-video-playing .owl-video-play-icon, .owl-carousel .owl-video-playing .owl-video-tn {display: none}
.owl-carousel .owl-video-tn {
    opacity: 0;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: opacity .4s ease
}
.owl-carousel .owl-video-frame {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%
}

/*owl carousel customization*/
.owl-carousel .owl-dots {margin-top: 5px}
.owl-carousel .owl-dot {display: inline-block;margin: 0 8px;cursor: pointer}
.owl-carousel .custom-dot {
  display: inline-block;
  width: 36px;
  height: 36px;
  line-height: 36px;
  background-color: #869791;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  border-radius: 50%;
  text-align: center;
  opacity: 0.5;
  transition: all 0.3s ease;
}
.owl-carousel .owl-dot.active .custom-dot,
.owl-carousel .owl-dot:hover .custom-dot {opacity: 1}
.owl-stage{display: flex; margin: 0 auto}
.owl-carousel .owl-item img {width: 100%;height: 100%;object-fit: cover}

.column{text-align:left; float:left; width:50%; padding: 25px; box-sizing: border-box}
hr.style { border: 0; height: 1px; margin:80px 0 50px 0; clear:both; background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); }

/* GAMES */
.animated {animation-duration: 2s;animation-fill-mode: both}
@keyframes flash{from,50%,to{opacity:1}25%,75%{opacity:0}}
.flash{animation-name:flash}
.loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url('/images/page-loader.gif') 50% 50% no-repeat rgb(255,255,255);
}
.loader p{padding-top: 100px}
.box {
	border: 5px solid #fff;
	cursor: pointer;
	height: 180px;
	float: left;
	margin: 12px 12px 20px 12px;
	position: relative;
	overflow: hidden;
	width: 215px;
	box-shadow: 1px 1px 1px 1px #ccc;
}
.box a{
	text-decoration:none;
	font-weight:normal;
}
.box img {
	position: absolute;
	left: 0;
	transition: all 300ms ease-out;
}
.box .caption {
	background-color: rgba(0,0,0,0.8);
	position: absolute;
	color: #fff;
	z-index: 100;
	transition: all 300ms ease-out;
	left: 0;
}
.box .full-caption {
	width: 185px;
	height: 180px;	
	top: -220px;
	text-align: left;
	padding: 15px;
}
.box:hover .full-caption {
	opacity: 1;
	transform: translateY(100%);
}
.box p{margin:0; font-size:16px; line-height:normal}
.box h3{font-size:18px; font-family:Verdana, Geneva, sans-serif; margin-bottom: 10px; opacity: 0.7}

.games [class*='flat-btn'] {
    padding: 20px 20px;
    border-radius: 5px;
    text-transform: none;
    letter-spacing: normal;
    font-weight: normal;
    height: 180px;
    width: 200px;
    font-size: 16px;
}
.games [class*='flat-btn']:hover, [class*='flat-btn']:focus {opacity:1}
.games [class*='flat-btn'] b {opacity: 0.7;font-size: 18px; font-variant: small-caps}

/* LESSONS */
.column-half-game-lesson{text-align:left; float:left; width:50%; padding: 20px 25px 50px 25px; box-sizing: border-box;}
.column-half-game-lesson h4{margin: 50px 0 -8px 0}
.column-half-game-lesson i {opacity: 0.7}
.column-half-game-lesson strong{background-color: #808000; padding:4px 8px; color: #fff; border-radius: 0px 11px; font-variant: small-caps; white-space: nowrap; line-height: 35px}
.column-half-game-lesson em{background-color: #d3a7e5; padding:4px 8px; color: #fff; border-radius: 2px}
.column-third-game-lesson {text-align:left; float:left;padding:0 25px 50px 25px; box-sizing: border-box; width: 33.33%}
.column-third-game-lesson em{font-family: 'Noto Serif SC', serif; font-style: normal;color: #BE055E; font-size: 22px}
.column-third-game-lesson span{color:#3A69C7; margin: 0 12px}
.pinyin{
	box-shadow: 0 0 1px rgba(20,20,20,.6);
	background-color: rgba(0,0,0,.07);
	border-radius: 3px;
	padding: .15em .4em;
	margin-left: .15em;
	margin-right: .15em;
	color: #6c6c6c;
	white-space: nowrap;
}
.mininav [class*='flat-btn']{
	width: 24px;
	padding:6px;
	margin:0 10px 20px 0;
}

/* KIDS, WALLPAPERS */
.kids img {max-width: 92%; height: auto}
hr.grass { border: 0; height: 27px; margin:40px 0 80px 0; clear:both; background: url('/kids/images/grass.png') no-repeat center center}
.white-border{
	padding:8px;
	background-color:#fff; 
	border:1px solid #CCC; 
	box-shadow: 3px 3px 4px #636363;
	margin:25px;
}
.polaroid {
	/*width:300px;
	height: 260px;*/
	padding: 8px;	
	margin:15px 0;	
	border: 1px solid #CCC;	
	background-color: #fff; 
	box-shadow: 5px 5px 6px 0px rgba(0,0,0,0.2);
	transition: all 0.5s;
}
.shopping ul{
	margin: 50px 15px;
  	padding: 0;
  	list-style: none;
	float:left}
.shopping span {font-size: 10px; color:#999;}
.shopping .flat-btn-purple{
	padding:3px;
	margin:10px auto;
}
.shopping a.flat-btn-purple:hover {opacity:0.75; filter: none;}
.shopping b{
	color:#666;
}
.shopping a:hover{
	color:#666;
}
.shopping h4{
	clear: both;
}
.shopping .voc-list {margin:10px auto; background: linear-gradient(135deg,  rgba(255,255,255,0) 0%,rgba(232,232,232,1) 100%)}

 /* VOCAB LISTS */
.encadre-jaune{background-color: #fffbf4;border-radius: 3px; border: 1px solid #f9f6db; padding: 15px}
.categories a {
    box-shadow: 0 0 1px rgb(20 20 20 / 60%);
    background-color: rgba(0,0,0,.07);
    border-radius: 3px;
    padding: .15em .4em;
    margin: .15em;
    line-height: 32px;
    color: #6c6c6c;
    white-space: nowrap;
    font-weight: normal;
}
.categories a:visited{color: #943333}
.categories a:hover{color: #6fa637}

/* Ribbons and NEW sticker */
.ribbon {
  color: #fff !important; 
  display: block;
  font-size: 18px;
  font-variant: small-caps;
  position: absolute;
  top: 24px;
  right: -37px;
  width: 140px;
  height: 25px;
  line-height: 25px;
  letter-spacing: 0.05em;
  text-align: center;
  transform: rotateZ(45deg) translateZ(1px);
  backface-visibility: hidden;
  z-index: 10;
}
.ribbon.vert {background: #63c930;}
.ribbon.vert:before, .ribbon.vert:after {border-bottom: 20px solid #63c930}
.ribbon.jaune {background: #F90}
.ribbon.jaune:before, .ribbon.jaune:after {border-bottom: 20px solid #F90}
.ribbon.vermillon {background: #c0392b}
.ribbon.vermillon:before, .ribbon.vermillon:after {border-bottom: 20px solid #c0392b}
.ribbon::before,
.ribbon::after {
  position: absolute;
  top: -20px;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
}
.ribbon::before {left: -20px; border-left: 20px solid transparent}
.ribbon::after {right: -20px; border-right: 20px solid transparent}
.new{
	background-color:#F39;
	color:#FF3;	
	font-size:14px;
	text-transform: uppercase;
	font-family: Calibri, Verdana, Geneva, sans-serif;
	border-radius: 3px;
	padding: 2px 7px 0 7px;
	margin:0 0 0 5px;
	border: 1px solid #E0E0E0;
	display: inline-block;
	height: 20px;
	line-height: 19px;
    box-shadow: inset 0 0 1px rgba(0,0,0,.4);
	margin-left: 5px;
	position: relative;
	top: -3px;
}

/* Reading Intermediate 1 */
[class*='grid'] {padding: 3% 0 0 0}
[class*='grid']  > div {width: 44px;float: left;font-size: 30px; font-family: "Noto Serif SC", serif;padding-bottom: 15px}
[class*='grid'] span {color: #d00179;font-size: 16px; font-family: "Arial unicode MS", sans-serif}
.column-third-reading {color: #b0b0b0; text-align:left; float:left;padding:0 25px 50px 25px; box-sizing: border-box; width: 33.33%}
.column-third-reading em{font-family: 'Noto Serif SC', serif; font-style: normal;color: #7f5301; font-size: 22px}
.column-third-reading span{color:#d00179; margin: 0 12px}
@media screen and (max-width: 640px){
.column-third-reading {float: none; clear:both; padding-bottom:0; width: 100%}
}
#toggle-pinyin-button, #toggle-english-button  {
    width: 150px;
    border: none;
    padding: 6px 15px;
    background: #d4c88f;
    font-size: 20px;
    color: #FFFFFF;
    cursor: pointer;
    margin: 25px auto;
  }

/* Reading Intermediate 2 is on ebook-formatting.css, intermediate 3 is PDF */

/* Reading Basic */
[class*='gridbasic'] {margin: 0 auto; width: 600px}
[class*='gridbasic']  > div {height: 140px;	width: 60px;font-size: 40px; font-family: "Noto Sans SC", sans-serif; font-weight: bold; line-height: 35px}
[class*='gridbasic'] > div i{font-size: 16px; color: #dd8a04}

/* Reading Advanced */
.advanced-text {
    font-size: 30px;
    text-align: left;
    padding: 0 10%;
    line-height: 48px;
    font-family: 'Noto Serif SC', serif;
    }
.advanced-text p {text-indent: 60px}

/* FAQ (works with the script) */
button.accordion {
    background-color: #DFC695;
    color: #fff;
	font-size:16px;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
    background-color: #C96;
}
div.panel {
    padding: 5px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
	text-align:left;
}
div.panel h4{margin-bottom: 8px}
div.panel.show {
    opacity: 1;
    max-height: 1800px;
}
div.panel em{opacity: 0.6; font-style: normal}
button.accordion:after {
    content: '\0271A'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: #fff;
    float: left;
    margin-right: 15px;	
	padding: 0px 6px 2px 6px;
	background-color:#630;
}

button.accordion.active:after {
    content: "\25AC"; /* Unicode character for "minus" sign (-) */
}

/* FOOTER */
.down-arrow-btn { width: 40px; height: 40px; border-radius: 50%; background: #d4c88f; display: inline-block; margin: 30px auto 0; color: #fff; font-size: 22px; font-weight: normal; line-height: 40px; text-align: center; }
.down-arrow-btn > .fa{color: #fff !important}
.footerbar {
	background: #2c1703;
	background-image: url("/images/medieval_border.jpg");
	background-image: url("/images/medieval_border.jpg"), linear-gradient(#110901,#663b0b);
	background-position: top;
	background-repeat: repeat-x;
	box-sizing: border-box;	
	width:100%;
	padding: 80px 50px 40px 50px;
	margin-top: 50px;	
}
.footerbar .footer-icons a{
	display: inline-block;
	width: 35px;
	height: 35px;
	background-color: #a47411;
	border-radius: 2px;
	font-size: 20px;
	color: #ffffff;
	line-height: 35px;
	margin-right: 8px;
	margin-bottom: 5px;
}
.footerbar .footer-icons a:hover{background-color:#745409}
#footer-copyright-desktop {padding-top: 50px}
#footer-copyright-desktop a {padding-left: 3px;padding-right: 3px}
#footer-mobile2 {padding-top: 25px;	display:none}

/* MOBILE version for games + other MEDIA QUERIES*/
.turnDevice img{display: none}
@media screen and (max-width: 690px) and (orientation : portrait){
	.turnDevice {
	  position:fixed;
	  top: 0;
	  left:0;
	  height:100%;
	  /*width:100%;*/
	  background-color: black;
	  background-repeat: no-repeat;
	  background-position: center;
	  background-attachment: fixed;
	  z-index: 1001;
	}
	.turnDevice img{display: block}
	#navContent{display: none}
}

@media screen and (max-height:570px) {.sticky-nav-container{position: relative}}
@media screen and (max-height:414px) {
	.shrink{transform: scale(0.9);transform-origin: 0 0	}
}
@media screen and (max-height:320px) {
	.shrink{transform: scale(0.8);transform-origin: 0 0	}
}

@media screen and (min-width: 768px) {a[href^="#Top"] {display: none}}

/* for 768px or less */
@media screen and (max-width: 768px) {
	#footer-mobile2 {display: block}
	#footer-copyright-desktop{display:none}
}
/* 1024px and more */
@media only screen and (min-width: 1024px) {nav {display:none}}

/* for 1024px or less*/
@media screen and (max-width: 1024px) {
	.topbar{display:none}
	body {padding:0}
	.container{width:94%}
	.hidenav [class*='flat-btn']{
		width: 81%;
		padding:6px;
		margin:8px auto;
	}
	nav { 
		display:block;
		height: auto;
		border-bottom: 0;
  	}
  	nav ul {
  		width: 100%;
  		height: auto;
		display: none;
  	}
  	nav li {
  		width: 50%;
  		float: left;
  		position: relative;
  	}
  	nav li a {
		border-bottom: 1px solid #576979;
		border-right: 1px solid #576979;
	}
  	nav a {
	  	text-align: left;
	  	width: 100%;
	  	text-indent: 25px;
  	}
	nav a#pull {
		display: block;
		background: #2c1703;
		background-image: url("/images/medieval_border_reverse.jpg");
		background-image: url("/images/medieval_border_reverse.jpg"), linear-gradient(#663b0b, #110901);
		background-position: bottom;
		background-repeat: repeat-x;
		height: 140px;
		text-align: center;
		width: 100%;
		position: relative;
	}
	nav a#pull img{margin: 5px auto 0 -45px; border: none; box-shadow: none; background: black;}
	nav a#pull:after {
	    content:"";
	    background: url('/images/nav-icon.png') no-repeat;
	    width: 30px;
		height: 30px;
	    display: inline-block;
	    position: absolute;
	    left: 35px;
	    top: 30px;
	    opacity: 0.3;
	  }
}

@media only screen and (max-width : 480px) {nav li {float: none; width: 100%}}
@media screen and (max-width: 640px){
.column-third-game-lesson {float: none; clear:both; padding-bottom:0; width: 100%}
}
@media screen and (max-width: 1024px){
.column-half-game-lesson {float: none; clear:both; padding-top:0; padding-bottom: 0; width: 100%}
}
/* Resize h3, and center elements when screen is less than 768 pixels wide */
@media screen and (max-width: 812px) {
	.kids h1{font-size:42px}
	.voc-list, .voc-list:last-child {float: none; margin: 0 auto 15px auto;}
	.box, .books {float: none !important; margin:0 auto 20px auto !important;}
	.column {float: none !important; clear:both; margin: 0 auto 15px auto; padding-top:0 !important; width: 100% !important}
	.shopping ul {float: none !important}
}
@media screen and (max-width: 685px) {
	.polaroid {width:95%;height:auto}
	.polaroid img{width:95%;height:auto;margin-top:6px}
}