@charset "utf-8";


body {
overflow: hidden;
}




#quizContent, #quizItself,  #quizTimer, #quizTimerPointer, #quizPreload, #quizStart{
display:none;
}


#quizContent{
	width: 91%;	
	max-width: 1150px;
	min-width: 268px;
	text-align:center; 
	font-family: 'comic', Verdana, Geneva, sans-serif;
	background-size: 100% 300% !important;
	background-position: center 80% !important;
	margin: auto;
	/*2019*/
	position: fixed;
	top: 40px; left: 0; bottom: 0; right: 0;
	box-shadow: none !important;
	/*2019*/
}

#quizMenu {	
width: 100%;
height: 100%;
margin: 0 auto;
padding: 10px;
}

.quizIconHover {
-webkit-animation: shakePic 0.2s linear;
animation: shakePic 0.2s linear;
}

@-webkit-keyframes shakePic { 25% { -webkit-transform: rotate(-10deg);} 75% { -webkit-transform: rotate(10deg);} 100% { -webkit-transform: rotate(0deg);} }
@keyframes shakePic { 25% { transform: rotate(-10deg);} 75% { transform: rotate(10deg);} 100% { transform: rotate(0deg);} }


.quizIconBig {
-webkit-animation: makeBig 0.2s linear forwards;
animation: makeBig 0.3s linear;
}

@-webkit-keyframes makeBig{ 50% { -webkit-transform: scale(1.2);} 100% { -webkit-transform: scale(1);} }
@keyframes makeBig{ 50% {transform: scale(1.2);} 100% {transform: scale(1);} }

.quizIconBigger {
-webkit-animation: makeBigger 0.12s linear forwards;
animation: makeBigger 0.3s linear;
}

@-webkit-keyframes makeBigger{ 50% { -webkit-transform: scale(2);} 100% { -webkit-transform: scale(1.4);} }
@keyframes makeBigger{ 50% { transform: scale(2);} 100% { transform: scale(1);} }

.chooseQuizText {
	font-size:16px;
	margin: 0 0 6px 0;
}

.chooseQuizText2 {
	font-size:13px;
	margin: 6px 0 0 0;
}

.quizType {	
background-color:rgba(0, 0, 0, 0.15);
background-size:95%;
cursor: pointer;
opacity: 0.9;
width: 50%;
position: relative;
}

.smallMedal{	
height: 65px;
width: 40px;
background-size: contain;
position: absolute;
top: 10px;
right: 10px;
font-size:10px;
}

@media screen and (max-width:600px) { .smallMedal{display:none;}}

.smallMedalHover:after{
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    color: #fff;
    content: attr(name);
    left: -160px;
    padding: 10px;
    position: absolute;
    z-index: 98;
    width: 130px;
}


/* START 2019*/
.quizTypeHover {
	opacity: 1;
	background-color: rgba(0, 0, 0, 0.3);
}

/* END 2019*/

.quizTitle {
height: 60px;	
opacity: 0.9;
}

#quizSentenceContainer {
	height: 80px;
}

.quizSentenceWrap {
	height: auto;
	width: 100%;	
	float:left;
	margin-top: 22px;
}


.quizSentenceWrap2 {	
	margin: 10px 0 20px 0;
	width: 100%;	
	float:left;
}

#quizAllItemsB{
margin-left: 5%;
width: 43%;
}

#quizAllItemsC{
margin-left: 5%;
width: 43%;
float: left;
}

@media screen and (orientation:landscape) { 
#quizAllItemsC{
max-width: 500px; 
}
 }
 
#writeAnswerField{
width: 100%;
height: 50px;
margin: 0 0 20px 0;
padding: 0;
background: rgba(0, 0, 0, 0.5);
box-shadow:3px 3px 2px #000;
color: white;
border: 2px solid #FC0;
font-size: 22px;
text-align:center;
-webkit-animation: fieldFlash 1s steps(1) infinite;
animation: fieldFlash 1s steps(1) infinite;
font-family:Arial, Helvetica, sans-serif;
}

#writeAnswerField:focus{
outline: 0;
-webkit-animation: none;
animation: none;

}

@-webkit-keyframes fieldFlash {0% { border: 2px solid #000; } 50% { border: 2px solid #999; } 100% { border: 2px solid #000; }}
@keyframes fieldFlash {0% { border: 2px solid #000; } 50% { border: 2px solid #999; } 100% { border: 2px solid #000; }}

#writeAnswerField::selection {background: #FC0;}
#writeAnswerField::-moz-selection {background: #FC0;} 



@media screen and (max-height:500px) { 
#writeAnswerField{
font-size: 16px;
}
 }

/*2019*/
#writeAnswerBoard{
margin: 0;
padding: 0;
background-image: url(https://www.ouinolanguages.com/assets/French/common/backboard.png);
background-size: 100% 100%;
font-family: 'chawpregular', Verdana, Geneva, sans-serif;
box-shadow: 2px 2px 2px rgba(0,0,0,0.6);
}
/*2019*/

#writeError2{
font-size: 25px;
cursor: pointer;
vertical-align: top;
text-shadow: 2px 2px 0px black;
}

@media screen and (max-width: 470px) , screen and (max-height: 450px) {
#writeError{
font-size: 9px;
}
#writeError2{
font-size: 16px;
}
 }

#boardTable{
padding: 4% 6% 6px 6%;
width: 100%;
height: 100%;
}

.boardTop {
font-size: 12px;
vertical-align: bottom;
white-space: nowrap;
}

.boardChar {
height: 15%;
color: #FC0;
font-size:18px;
opacity: 0.8;
cursor: pointer;
width: 16.6%;
}

#boardMain {
height: 45%;
font-size: 24px;
white-space: nowrap;
cursor: default;
}

.topAlign {
vertical-align: top;
}

#writtenAnswer span{
border-bottom: 2px solid white;
margin: 0 0.8%;
}

#writtenAnswer .spanBlank{
border-bottom: hidden;
}

.boardBottom{
height: 30%;
background-size: contain;
background-repeat:no-repeat;
background-position:center bottom;
cursor: pointer;
opacity: .7;
min-height: 30px;
}

.quizItemsB {
	width: 100%;
	background:#0C0;
	cursor: pointer;
	box-shadow:3px 3px 2px #000;
	background-size: 100% 300% !important;
	background-position: center 70% !important;
	opacity: 0.87;
}

.multiBtnFont {
    font-size: 23px;
	font-weight: bold;
	white-space: nowrap;
}

/*START 2019*/
#quizMultiImg, #quizWriteImg{
	width: 43%;
	margin-right: 5%;
	height: 380px;
	font-size: 21px;
	box-shadow:0px 0px 2px #000;
	float: right;
	background-position:center center;
	background-repeat:no-repeat;
	background-size: cover;
}

.rightArrow, .leftArrow {
background-size: 25% !important;
opacity: 1 !important;
}


#quizMultiImg{
border-radius: 3px;
}

/*END 2019*/


#quizWriteImg{
}

#quizAllItems{
width:100%;
padding: 0 1%;
}

/* START 2019*/

.quizItems {
	margin: 1%;
	position:relative;
	height: 100%;	
	width: 30.7%;
	float: left;
	border-radius:2px;
	box-shadow:2px 2px 1px rgba(0, 0, 0, .6);
	cursor: pointer;
}



.mobileClick {
	box-shadow: none;
	text-shadow: none;
}


.quizItemsPortrait {
	width: 47.2%;
	float: left;
}

.quizItemsTop {
position: absolute;
background-color: rgba(0, 0, 0, 0.1);
    top: -1px;
    left: 0;
    right: 0;
    bottom: 0;
	border-radius:4px;
}

.quizItemsHover {
background-color: rgba(255, 255, 255, 0.1);
border: 3px solid rgba(255, 204, 0, 0.9);
}

/*END 2019*/

#quizItem1, #quizItem2, #quizItem3, #quizItem4, #quizItem5, #quizItem6  {
	background-position:center center;
	background-repeat:no-repeat;
	background-size: cover;
}

.quizEng {
	position:absolute;
	bottom: 0px;
	width:100%;
	padding: 12px 0 10px 0;
	margin: 0 auto;
	font-size:13px;
	border-radius:2px;
	background-color: rgba(0, 0, 0, .7);
	font-weight: bold;
	white-space: nowrap;
}

.quizEng em{
color: white;
font-style: normal;
}


#quizSentence{
	display:inline-block;
	font-size: 38px;
	text-shadow: 0px 2px 2px rgba(0,0,0,0.7), 0px 3px 6px rgba(0,0,0,0.5);
	margin: 0;
	pointer-events: none;
}

#quizSentence2 {
	display:inline-block;
	font-size: 16px;
	text-shadow: 0px 2px 2px rgba(0,0,0,0.7), 0px 3px 6px rgba(0,0,0,0.5);
	margin: 0;
	pointer-events: none;
	font-weight: normal;
}

.quizSentenceHover {
	font-size: 19px;
}

#quizBanner{
cursor: default;
}

.quizBannerItem{
font-size:14px;
float:left;
color: white;
padding-top:8px;
font-weight: bold;
}
.quizBannerImage {
height:30px;
padding: 0 9px 5px 18px;
vertical-align:middle;
}
.tenPaddingLeft {
padding-left: 10px;
}

/*START 2019*/

#quizTimer, #quizTimer2 {
position: absolute;
height: 8px;
width:96%;
max-width: 900px;
left: 0; right: 0;
margin: 0 auto;
bottom:14px;
box-shadow: 0px 0px 2px #000, 0px 0px 3px #000;
z-index: 2;
}
/*END 2019*/

#quizGoBack {
position: absolute;
height: 50px;
width:50px;
left:2px;
top:2px;
cursor:pointer;
display: none;
}

#quizTimerGood, #quizTimerMedium, #quizTimerBad{
width:33%;
height:8px;
float: left;
}


#quizTimerGood2{
width:97%;
height:8px;
float: left;
}

#quizTimerBad2{
width:2.5%;
height:8px;
float: left;
}

#quizTimerGood,#quizTimerGood2{background: linear-gradient(to right, #060, #0C0);}
#quizTimerMedium {background: linear-gradient(to right, #FC0, #F90);}
#quizTimerBad, #quizTimerBad2 {background: linear-gradient(to right, #F00, #900);}

#quizTimerBar {
width:0.5%;
height:8px;
float:left;
background: #000;
}

#quizTimerPointer, #quizTimerPointer2{
width:40px;
height:40px;
overflow:hidden;
position: absolute;
bottom:-15px;
z-index: 100;
}

#quizTimerImage,  #quizTimerImage2{
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}

#quizPreload {
width: 100%;
max-width:600px;
height: 98%;
margin: -1% auto 1% auto;
padding:20px;
}

.quizPreloadTitle {
font-size: 25px;
cursor:default;
font-weight: bold;
}

.quizPreloadText {
cursor:default;
line-height: 26px;
font-weight: normal;
vertical-align: bottom;
padding-bottom:15px;
}

#quizPreloadDescription {
font-size:14px;
font-style:normal;
}


#quizPreloadMedal {
height:50%;
background: url(https://www.ouinolanguages.com/assets/French/common/quizConvo1.svg);
background-position:center center;
background-repeat:no-repeat;
background-size: contain;
}


#quizPreloadStart {
height: 40%;
font-size: 30px;
cursor: pointer;
text-shadow: rgb(0, 0, 0) 3px 2px 0px;
padding-top:20px;
}

#quizStart {
width: 100%;
height: 100%;
}

#quizStartImg {
width:90%;
margin: 0 auto;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background: url(https://www.ouinolanguages.com/assets/French/common/quizConvo1.svg);
background-position:center center;
background-repeat:no-repeat;
background-size: contain;
}

@media screen and (max-height:400px) { 
#quizPreloadMedal {
display: none;
}
 }

/*2019 START*/

#quizStartImg {
background: none !important;
}


#lightTimerDiv{
position:relative;
width: 90% !important;
max-width: 600px !important;
height: 100%;
margin: 0 auto;
}

#lightTimerPic {height:100%; width: 100%; margin-left: 0%;}
#lightTimerAnimation {display: none !important;}
.lightPlay {}

/*2019 END*/


@-webkit-keyframes timerPlay {0% { left: -100%; } 75% { left: -400%; } 100% { left: -400%; }}
@keyframes timerPlay {0% { left: -100%; } 75% { left: -400%; } 100% { left: -400%; }}

.quizLogo{
margin: 0;
padding: 0;
right: 15px;
bottom: 15px;
position: fixed;
width: 150px;
height: auto;
z-index: 50;
opacity: 0;
pointer-events : none;
}

#newHighScore{
margin: 0;
padding: 0;
bottom: 0;
right: -20px;
position: fixed;
width: 25%;
max-width: 300px;
height: auto;
z-index: 50;
pointer-events : none;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}

#newScoreUpdate{
margin: 0;
padding: 0;
left: 0px;
bottom: 0px;
position: fixed;
width: 20%;
max-width: 150px;
height: auto;
z-index: 50;
pointer-events : none;
-webkit-transform: translateX(-110%);
transform: translateX(-110%);
}

#quizScoreBack, #quizScoreIn{
position: relative;
margin: 0 auto;
padding: 0;
height: 80%;
top: 10%;
background-repeat:no-repeat;
background-size:contain;
background-position:center;
}

#quizScoreBack{
height: 80%;
width: 80%;
top: 10%;
background-image: url(https://www.ouinolanguages.com/assets/French/common/scoreBack4.svg);
display: none;
z-index: 100000000000;
}

#quizScoreIn{
width: 100%;
height: 100%;
max-width:500px;
top: 0;
left: 0;
}

#quizScoreImg{
width: 70%;
height: auto;
position: relative;
top: 60%;
-webkit-transform: translate(5%, -50%);
transform: translate(5%, -50%);
}

#quizDone{
width: 96%;
height: 100%;
max-width: 600px;
margin: 0 auto;
cursor: default;
display: none;
}

#quizDoneTitle{
font-size:22px;
}

#quizDoneImg{
background: url(https://www.ouinolanguages.com/assets/French/common/medal4.svg);
background-position:center center;
background-repeat:no-repeat;
background-size: contain;
}

#quizDoneSentence{
padding:0;
margin: 0;
}

#quizDonePercent, #quizDonePts, #quizDoneErrors{
width:50%;
margin: 0;
padding: 0;
}

#quizDonePercent{
font-size:30px;
vertical-align:bottom;
}

#quizDonePts{
font-size:23px;
}

#quizDoneErrors{
font-size:26px;
vertical-align: top;
}

#quizDoneContinue{
font-size:32px;
cursor:pointer;
text-shadow: rgb(0, 0, 0) 3px 2px 0px;
}

.hintPts{
position: absolute;
left: 5px; bottom: 10px;
z-index: 9999; 
pointer-events: none;
opacity: 0;
}

.wrongLogo{
position: absolute;
top: 10px; right: 10px;
width: 20%;
z-index: 99;
pointer-events: none;
display: none;
}

#wrongLogo2{-webkit-transform: translateX(-90%); transform: translateX(-90%);}
#wrongLogo3{-webkit-transform: translateX(-180%); transform: translateX(-180%);}


#wrongAnswerPic, #wrongAnswerPic2, #goodAnswerPic, #goodAnswerPic2, #goodAnswerPic3{
position: absolute;
top: 0; right: 0; left: 0; bottom: 0;
width: 100%;
height: 100%;
z-index: 9999; 
pointer-events: none;
opacity: 0;
}

#wrongAnswerIn, #goodAnswerIn, #goodAnswerIn2, #goodAnswerIn3{
position:relative;
height: 100%;
margin: 0 auto;
width: 90%;
max-width: 500px;
background-position:center;
background-repeat:no-repeat;
background-size: contain;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

#goodAnswerIn2{
background-image: url(https://www.ouinolanguages.com/assets/French/common/quizRight2.svg);
}

#wrongAnswerIn{
background-image: url(https://www.ouinolanguages.com/assets/French/common/quizWrong2.svg);
}

.opacityAnimate{
-webkit-animation: opaAnimate 2s;
animation: opaAnimate 2s;
}

@-webkit-keyframes opaAnimate {0% { opacity: 1; } 50% { opacity: 1; } 100% { opacity: 0; }}
@keyframes opaAnimate {0% { opacity: 1; } 50% { opacity: 1; } 100% { opacity: 0; }}


 @-ms-viewport {
width: device-width;
zoom: 1;
min-zoom: 1;
max-zoom: 1;
zoom: fixed;
}
 @-viewport {
width: device-width;
zoom: 1;
min-zoom: 1;
max-zoom: 1;
zoom: fixed;
}

html {
	width:100%;	
	-ms-touch-action: none; 
	touch-action: none;
}

body {
	font-family: 'encode', Verdana, Geneva, sans-serif;
	font-weight: normal;
	margin: 0 auto;	
	-webkit-tap-highlight-color: rgba(0,0,0,0); 
}

select, input{
	font-family: 'encode', Verdana, Geneva, sans-serif;
	font-weight: normal;
}

select{
-webkit-appearance: none;
}


#loginCover, #registerCover, #passwordWrap, #passwordReset{
	z-index:8888;
}

#warningWrap, #warningWrap2{
	z-index:9999;
}

/*START 2019*/
.loader, .startButtons{
	display: block;
	height:60px;
	font-size: 32px;
	color: #FFF;
	cursor: pointer;
	font-weight: bold;
	text-align: center;
	opacity: 0.6;
	margin: auto;
position: absolute;
left: 0; bottom: 0; right: 0; top: 45px;
z-index: 10;
font-family: "build";
letter-spacing: 0.04em;
}


.loader{
font-family: "build";
letter-spacing: 0.04em;
}

.startButtons {
text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 0px;
opacity: 0.8;
transition: opacity 0.4s;
}

.startButtonsHover {
text-shadow: 1px 1px 1px #FC0;
opacity: 1;
}



#lessonStartBtn{
font-size: 36px;
top:-50px;
}

#quizStartBtn{
top:50px;
}

/*END 2019*/

.lessonStartContainer{
margin: 40px auto;
}

.loader {
	cursor: pointer;
}
.wrapper, .wrapper2, .wrapper3, #verbWrap{
	min-width: 280px;
	width: 100%;
	height: 100%;
	background:rgba(0, 0, 0, 0.7);
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 100;
}
.wrapper2 {
	background:rgba(0, 0, 0, 0);
}

.darkWrap {
	background:rgba(0, 0, 0, 0.8);
}

#verbWrap {
	background:rgba(0, 0, 0, 0.3);
	z-index: 19;
	display: none;
	cursor: pointer;
}

.wrapperOut{
	-webkit-transform: translateX(-110%);
	transform: translateX(-110%);
	-webkit-transition:-webkit-transform 0.5s;
    transition: transform 0.5s;
}

.wrapperOutMobile{
	-webkit-transform: translateX(-110%);
	transform: translateX(-110%);
}

.flagImage {
margin: 0;
padding: 0;
right: 0px;
top: 45px;
position: fixed;
height: 40%;
width: auto;
}

.symbolImage {
margin: 0;
padding: 0;
left: 2%;
bottom: 2%;
position: fixed;
height: 60%;
width: auto;
}

@media screen and (orientation:landscape) { 
.flagImage {
width: 40%;
height: auto;
}
.symbolImage {
height: 90%;
width: auto;
}
 }

.textWrap, .textWrap2, .textWrap3, .textWrap4, .textWrap5, .textWrap6, .menuButtonWrap {
	display: inline-block;
	white-space: nowrap;
}

#optionWrap {
	display:none;
	cursor: pointer;
}
#pauseWrap {
	display:none;
	cursor: pointer;
	opacity: 0.6;
}
#menuWrap {
	display:none;
	cursor: pointer;
}

#pauseWrapLogo {
	height: 150px;
	opacity: 0.7;
}
.menuButtonWrap {
	position:inherit;
	left: inherit;
	top: inherit;
	float: right;
}

#background {
	width: 102%;
	height: 102%;
	background-position:center center;
	background-repeat:no-repeat;
	background-size: cover;
	position: absolute;
	left: -1%;
	top: -1%;
	z-index: -1;
	-webkit-filter: brightness(40%) blur(4px);
filter: brightness(40%) blur(4px);
}

.smallIcon, .smallIcon2{
	padding-right: 10px;
	opacity: 0.7;
	cursor: pointer;
	padding-top: 3px
}

.smallLogo {
	float:left;
	padding-left: 10px;
	cursor: pointer;
	opacity: .85;
}
.menuBar {
	top: 0px;
	background-color: rgba(0, 0, 0, 0.7);
	height: 45px;
	width: 100%;
	position: fixed;
	z-index: 1000;
	visibility: hidden;	
}
.menuTitleContainer {
	display: inline-block;
	font-weight: bold;
	color:#FFF;
	float: left;
	padding-left: 10px;
	font-size: 15px;
	cursor: pointer;
	opacity: 0.8;
}
.menuBtnContainer {
	display: inline-block;
	position: absolute;
	top: 3px;
	right:1px;
}
.alignVerticalItem {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.alignVerticalWin {
margin: auto;
position: absolute;
left: 0; bottom: 0; right: 0; top: 45px;
}
/*OPTIONS*/

.menuLogo {
	float:left;
	padding-right: 10px;
	margin: 0;
	position: absolute;
	opacity: .3;
	height: 120px;
	top: -50px;
	right: -100px;
	pointer-events: none;
}
.menuIcon {
	position: relative;
	padding: 0;
	margin: 0 auto;
}
.menuTitle, .menuTitle2 {
	cursor: default;
	font-size:19px;
	border-bottom: 1px solid #FFF;
	padding-bottom:3px;
	white-space: nowrap;
}
.menuTitle {
	margin: 3px 0 14px 0;
}
.menuTitle2 {
	margin: 3px 0 0 0;
}
.menuBox, .menuBox2 {
	width: 100px;
	padding: 8px 0 11px 0;
	opacity: 0.85;
	cursor: pointer;
}
.menuBox2 {
	height:125px;
}
.menuItem {
	margin: 0;
	font-size:17px;
}
.menuItemDescription {
	margin: 0;
	font-style:italic;
	font-weight: lighter;
}
.leftMenuItems {
	float: left;
}
.centerMenuItems {
	text-align: center;
	font-size:15px;
	font-weight: normal;
	margin: 0;
	padding: 2px 0;
	line-height: 16px;
}
.rightMenuItems {
	width: 34.5%;
	float: right;
}
/*START 2019*/


.selectOptions, .loginOptions {
	cursor: pointer;
	width: 100%;
	border: 0;
	background-color: #000;
	font-size: 15px;
	font-weight: bold;
	margin-bottom:6.5px;
	box-shadow:0px 0px 1px rgba(0,0,0,0.5);
	background-size: 100% 400% !important;
	background-position: center 80% !important;
}


.selectOptions {	
    opacity: .9;
	width: 100%;
	margin-bottom:6.5px;
	padding: 10px 0px 10px 10px;
}
	
.loginOptions {
	width: 100%;
	margin-bottom:6.5px;
	padding: 10px 0px;
}	
	
	
option {
	background-color: #000;
}



.optionsIn {
	padding:25px 2.5%;
	width: 70%;
	min-width: 320px;
	max-width: 600px;
	height: 275px;
	background-color: #00F;
	cursor: default;
	background-size: 100% 300% !important;
	background-position: center 80% !important;
}

/*END 2019*/
.settingTable, .menuTable, .starTable, .loginTable, .registerTable {
	width: 100%;
	min-width: 300px;
	max-width: 500px;
	margin: 0 auto;
}

.offlineTable {
	min-height:190px;
	margin: 0;
	padding: 0 8px 0 0;
	width: 100%;
	border-bottom: 1px solid white;
}

.offlineTable2 {
padding: 5px 8px 0 0;
	width:70%;
	min-width: 300px;
margin: 0 auto;
}

.messageTable {
padding: 0;
width:100%;
max-width: 400px;
margin: 0 auto;
text-align:center;
}

.max300 {
max-width: 300px;
}


.messageCheck{
vertical-align:middle;
padding:0;
}

.messageTitle {
margin:0 0 0 -10px;
}

p {
font-size: 14px;
font-weight: normal;
}

.warningLogo {
	width: 100%;
}

.menuTable {
	text-align: center;
}

.starTable {
	height: 100%;
}
.endTable {
	width: 100%;
	margin: 0 auto;
	text-align: center;
}

#learningTip {
	position: fixed;
	text-align: center;
	text-shadow:none;
	width:95%;
	max-width: 700px;
	min-width: 300px;
	margin: 0 auto;
	left:0;
	right: 0;
	bottom: 5px;
	color: #FFF;
	opacity: .7;
    z-index:8889;
}

#endTip{
font-size: 14px;
margin-top: 5px;
font-weight: normal;
line-height: 16px;
}

.offlineTitle {
	line-height: 5px;
	font-weight: normal;
	text-align:center;
	padding-left: 20px;
}

.offlineWord {
	font-weight: normal;
	font-size: 13px;
	text-align:center;
	padding-left: 20px;
	line-height: 20px;
}

#loginCenter, #loginOffline, #registerCover, #warningWrap, #warningWrap2, #mainMusic, #mainSound, #passwordWrap, #passwordReset, #endWrap, #learningTip, .allSFX, .textWrap5, #quizBanner{
display:none;
}

.loginTable {
	text-align: center;
	max-width: 350px;
	height: 100%;
} 

.registerTable {
	text-align: center;
	max-width: 450px;
	height: 100%;
}

.loginTitle {
margin:6px 0 0 0;
font-weight: normal;
-webkit-transition: color 1s;
transition: color 1s;
}

.loginTitleHover {
color:#F00;}

.smallUnderline, .smallerUnderline{
width: auto;
display:inline-block;
font-weight: normal;
cursor: pointer;
opacity: .8;
font-style:italic;
border-bottom: 1px solid white;
}

.smallUnderline{
margin: 0 auto;
padding-top:10px;
}

.smallerUnderline{
margin: 0 12px;
float:left;
font-size:12px;
}

.loginRemember{
font-weight: normal;
cursor: pointer;
font-size: 13px;
text-align: left;
}

#loginRemember2{
text-align: center;
margin:7px;
}

.rememberCheck{
vertical-align:middle;
padding-right: 5px;
margin: -2px 0 0 10px;
}

#rememberCheck2{
vertical-align:middle;
margin-top: -2px;
padding-right: 5px;
}

.loginField, .registerField{
margin:4px 0;
padding:4px;
width: 90%;
font-size:15px;
text-align:center;
}

.registerField {
width: 94%;
padding: 3px;
}

.rgField1, .rgField2 {
font-size:15px;
text-align:center;
width: 88%;
padding:3px;
}

.rgField1 {
margin: 6px 0 0 0;
}

.rgField2{
margin: 0 0 10px 0;
}

.registerButtons {
width: 300px;
margin: 0 auto;
}

.registerButton {
padding-right: 20px;
}

.questionMark{
vertical-align:middle;
padding-left: 5px;
margin: -4px 0 0 0;
cursor: pointer;
}

.activationField {
margin-bottom: 5px;
}

.registerTitle {
margin: -15px 0 0 0;
padding: 0;
text-align:center;
font-size:22px;
}

.registerText {
line-height: 22px;
font-weight: normal;
}

.loginSubmit {
margin:10px;
width:125%;
float: right;
}

.letterLogo {
	width:100%;
}
.starBackground {
	background: none;
	display:none;
	cursor: pointer;
}
.starTitle {
	font-weight: normal;
	font-size:17px;
	line-height: 3px;
}
.starImages {
position: absolute;
right: 10px;
top: 8px;
}
.starSelect {
	opacity: 0.85;
	cursor: pointer;
}
.starSelectHover {
	opacity: 1;
	background-color: rgba(0, 0, 0, 0.4);
}
.starLeftItems {
	padding-left: 10px;
	position:relative;
}
/*START 2019*/
.gradientColor, .gradientColor2, .gradientColor3{
	color:white;
	font-weight: bold;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.6),  1px -1px 0 rgba(0,0,0,0.6), -1px 1px 0 rgba(0,0,0,0.6), 1px 1px 0 rgba(0,0,0,0.6);
	background: linear-gradient(#F00, #700);
}

.knowledgeBox {
	opacity: 1;
	cursor: pointer;
	padding: 5px;
	text-align: center;
	height: 90px;
}
.tinyText {
	margin:0;
	padding: 0;
	line-height: 12px;
	font-weight: normal;
	opacity: 0.7;
}


.menuBoxHover {
	opacity: 1;
	background-color: rgba(0, 0, 0, 0.1);
	box-shadow:0px 0px 1px 0px #000;
}
/*END 2019*/

.timerMeter {
	height: 10px;
	position: fixed;
	width:102%;
	bottom: -4px;
	left: -5px;
    margin: 0 auto;
	background:#333;
	padding: 0;
	box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3), 0px 0px 10px #000;
	z-index: 90;
}

.timerSpan {
width: 100%;
}

.timerMeter > .timerSpan {
	display: block;
	height: 100%;
	background: #333;
	box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3),  inset 0 -2px 6px rgba(0, 0, 0, 0.4);
	position: relative;
	overflow: hidden;
}

.tooltip{
    display: inline;
    position: relative;
	font-size:12px;
}

.tooltipHover:after{
    background: rgba(0,0,0,.9);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(name);
    left: -230px;
    padding: 10px;
    position: absolute;
    z-index: 98;
    width: 280px;
}

.tooltipHover:before{
    border: solid;
    border-color: #000 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 21px;
    content: "";
    left: 40%;
    position: absolute;
    z-index: 99;
}

.tenPxPadTop{
padding-top: 10px;
}

.floatLeft {float: left;}
.floatRight {float: right;}

.imageAlign{
vertical-align:middle;
}

#versionCover{
	z-index:1000000;
	background: #000;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

.yellowText{
color: #FC0;
}

.redText{
color: #900;
}
.invisible{
visibility: hidden;
}
.selectOff{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.instructions{
position: fixed;
bottom : 10px;
left: -10px;
z-index: 99999;
color: white;
font-size: 14px;
cursor: default;
text-shadow: -1px -1px 0 #000,  1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
display:none;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}

.showDiv{
display:block;
}

#sideNote {
position: absolute;
top: 5px;
right: 5px;
width: 150px;
min-height: 100px;
font-size: 14px;
height: auto;
background: url(https://www.ouinolanguages.com/assets/French/common/sideNote.png);
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 20px 20px 40px 20px;
font-family:Arial, Helvetica, sans-serif;
text-align: center;
z-index:9;
display:none;
}

#sideNote strong{
color: #C00;
}


#extraNote {
position: absolute;
top: 45px;
left: 0px;
width: auto;
max-width: 700px;
font-size: 15px;
height: auto;
background: rgba(0,0,0,0.5);
padding: 20px;
margin: 20px;
border-radius: 8px;
box-shadow: 0px 0px 2px 2px black;
cursor: default;
color: white;
font-family:Arial, Helvetica, sans-serif;
z-index:9;
display:none;
}

#extraNote strong{
color: #FC0;
}

#extraNote em{
color: #FC0;
font-weight: normal;
}

@media screen and (max-width:699px) and (orientation:portrait)  { #extraNote {font-size: 12px;} }
@media screen and (max-width:550px) and (orientation:portrait)  { #extraNote {font-size: 10px;} }
@media screen and (max-height:699px) and (orientation:landscape)   { #extraNote {font-size: 12px;} }

.disableTouch {
	pointer-events: none;
}

#slideCont {
position: absolute;
top:35px; right:0; bottom:0; left:0;
margin: auto auto;
width: 1000px;
height: 670px;
border-radius: 9px;
box-shadow: 0px 0px 3px 1px black;
background: rgba(0,0,0,0.9);
display:none;
}

#slideImg {
position: absolute;
bottom: 0;
width: 94%;
left: 3%;
height: auto;
}

#slideText {
color: white;
text-align: center;
padding: 35px 20px 20px 20px;
font-size: 19px;
user-select: none;
font-weight: bold;
-webkit-user-select: none;
cursor: default;
}

.slideBtn1, .slideBtn2  {
position: absolute;
bottom: 20px;
padding: 5px 15px 7px 15px;
font-weight:bold;
cursor: pointer;
border-radius: 5px;
opacity: 0.85;
}

.slideBtn1 {right: 20px; background-color: #FC0; z-index: 3;}
.slideBtn2 {right: 110px;background-color: #999; z-index: 2;}

@media screen and (max-height:800px),screen and (max-width:1060px) {#slideCont {width: 810px;height: 550px;} #slideText {font-size: 16px; padding: 30px 15px 15px 15px;}}
@media screen and (max-height:650px),screen and (max-width:820px)  {#slideCont {width: 580px;height: 400px;} #slideText {font-size: 14px; padding: 20px 10px 10px 10px;}}
@media screen and (max-width:600px)  {#slideCont {width: 480px;height: 350px;} #slideText {font-size: 13px; padding: 20px 10px 10px 10px;} .engSentence{letter-spacing: -0.06em !important;}}

.fullOpacity {opacity: 1;}

#loadWrap{
position: fixed;	
display: table;
width: 100%;
height: 100%;
background: #000;
z-index: 99999;
}

#loadIn{
display: table-cell;
vertical-align:middle;
text-align:center;
color: white;
font-size: 32px;
font-weight:bold;
}



#startCover{
background: rgba(0,0,0,0.2);
}
/*START 2019*/
.xpro2{}
/*START 2019*/

.ouinoButton{
	-webkit-filter: saturate(80%) !important;
	filter: saturate(80%) !important;
}

.loader strong{
color: white;
}

/*<!--NEW 2019 CODE END-->*/

.wordSelB{
	color: white;
	position: relative;
	float: left;
}

.selContB {
display: inline-block;
position: relative;
padding: 0 30px 10px 0;
width: auto;
height: auto;
min-height: 60px;
margin: auto auto;
list-style-type: none;
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

.wordSelB {
position: relative;
opacity: 0.9;
top: 0px; right: 0px;  bottom: 0px;  left: 0px; 
margin: 3px;
padding: 10px 15px;
float: left;
font-weight: bold;
cursor: pointer;
text-align: center;
font-size: 18px;
background: #2b2d2f;
border-radius: 10px;
font-family: 'comic';
user-select: none;
border:  3px solid #FFCE00;
box-shadow:  inset 1px 1px 2px rgba(255,255,255,0.1), inset -1px -1px 2px rgba(0,0,0,0.4), 3px 3px 2px black;
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

.disPuzz {
opacity: 0.2 !important;
pointer-events: none !important;
}


.disPuzz2 {
opacity: 0 !important;
pointer-events: none !important;
}

@media screen and (max-width:1000px) {
.wordSelB {
padding: 7px 12px;
font-size: 16px;
border:  2px solid #FFCE00;
border-radius: 5px;
}
}

#extra3 .smSentence{
padding:10px 8% 25px 8% !important;
}

.forSentence{
letter-spacing: 0.03em !important;
}

/*2019B*/
.wordSentence .forSentence{
letter-spacing: -0.02em !important;
}
/*2019B*/


#dragImg {
top: 60% !important;
left: -30px !important;
}

#dragImg2 {
position: absolute;
height: 50px;
width: auto;
top: 26px;
left: -30px; right: 0;
margin: auto auto;
}

.hoverPuzz {
background:#3d4145;
}

/*<!--NEW 2019 CODE END-->*/

@media screen and (max-width: 600px){.optionsIn {width: 85%;}}