#fontPreload2{
font-family: 'Roboto', sans-serif;
position: fixed;
top: -3000px;
}

body:before {
  display: none;
content: url('../images/background0.png') url('../images/background1.png') url('../images/background3.png') url('../images/close.png') url('../images/goal1.png') url('../images/goal2.png') url('../images/goal3.png') url('../images/goalOuino.png') url('../images/resultBack.png') url('../images/fact1.svg') url('../images/fact2.svg') url('../images/fact3.svg') url('../images/fact4.svg') url('../images/fact5.svg') url('../images/fact6.svg') url('../images/fact7.svg') url('../images/fact12.svg') url('../images/fact13.svg');
}


body {
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	margin: 0 auto;	
	padding-bottom: 90px !important; 
	-webkit-tap-highlight-color: rgba(0,0,0,0); 
	background: white
}


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

#backCover {
	position: fixed;
	left: 0px;
	top: 0px;
	z-index:-1;
	width:100%;
	height:100%;
	cursor: default;
}

.explanations{
color: black;
width: 95%;
max-width: 550px;
max-height: 500px;
padding: 20px;
position: fixed;
margin: auto auto;
top: -10%; bottom: 0; left:0; right:0;
z-index: 998;
cursor: pointer;
display: none;
}

.quesBtn{
width: 25px;
height: auto;
vertical-align:middle;
padding: 0 8px 6px 10px;
cursor: pointer;
display:none;
}


.explanations p{
font-size: 15px;
line-height: 24px;
margin: 20px;
}


.exBack{
height: 120%;
width: 100%;
z-index:-1;
position: absolute;
margin: auto auto;
top: 20%; bottom: 0; left:-2%; right:0;
background: white;
}

@media only screen and (max-height: 700px)  {.explanations{max-width: 750px; max-height: 400px;}}


.blackCover{
height: 180%;
width: 180%;
z-index:-2;
position: fixed;
left: -5%;
top: 0;
background: rgba(255,255,255,0.4);
}

.iconLogo{
vertical-align: middle;
height: 40px;
margin: -10px 10px 0 0;
width: auto;
}

.iconLogo2{
vertical-align: middle;
height: 30px;
margin: -6px 10px 0 0;
width: auto;
}

.bullet{
vertical-align: middle;
height: 13px;
margin: -3px 10px 0 0;
width: auto;
}



#bg0{background-image: url(../images/background0.png);}
#bg1{background-image: url(../images/background1.png); display:none; z-index: -1;}
#bg3{background-image: url(../images/background3.png); display:none; z-index: -1;}

#calBack, #goalBack{	
position: fixed;
	left: 0px;
	top: 0px;
	z-index:-1;
	width:100%;
	height:100%;
	cursor: pointer;
	display:none; 
}

#goalBack{	
background-color: rgba(255,255,255,0.2);
z-index:1;
}


#volDiv{
position: relative;
top: 22px; right: 25px;
float:left;
width: 50px;
height: 2px;
z-index: 2;

}

#volDiv #sliderTrack{
position: absolute;
width: 100%; height: 100%;
top: 2px; left:8px;
z-index: -1;
cursor: pointer;
background: #CCC;
border-radius: 10px;
}

#volDiv #sliderText{
position: absolute;
width: 100%;
text-align:center;
  height:10px;
  top: -15px;
  left: auto; right: auto;
  margin: auto 6px;
  color: black;
  cursor: default;
  font-size:11px;
}

#volDiv .ui-slider-handle {
    background:#999;
    width: 10px;
    height: 10px;
	top: -2px;
	border-radius: 50%;
    position: absolute;
	border: 1px solid black;
	opacity: 0.8;
}

#volDiv .ui-slider-handle:focus {
outline: 0;
opacity: 1;
background: #2980b9;
}


#volDiv .ui-slider-range {
    position: absolute;
    border: 0;
    top: 0;
	width: 40px;
}


.awards, .calendar, .progress, .progress2 {
    position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	top: 0;
	margin: auto auto;
	background: white;
	text-align:center;
	padding: 0%;
	width: 94%;
	height: 90%;
	color: black;
	font-size: 25px;
	display: none;
	
}

.progress2, .progress {left: 0; right: 0; margin: auto auto; top: 0; bottom: 0; padding: 2% 0 2% 0; height: 98%; width: 100%;}



.progress3 {
position: fixed;
left: 0; 
right: 0; 
margin: auto auto; 
bottom: auto; 
top: 65px; 
height: 25px; 
width: 88%; 
max-width: 1000px; 
padding: 10px;
display: none;
}

.mainTitle{
top: 0;
position: absolute;
color: black;
margin: 0;
font-size: 17px;
width: 50%;
font-weight:bold;
text-align:center;
background: rgba(0,0,0,0.05);
padding: 10px 0 10px 0;
border-radius: 10px 10px 0 0;
height: 100%;
cursor: pointer;
}

#prog1{right:0px; opacity: 0.8;}
#prog2{left:0px;}

.calendar-table, .awards table{
width: 100%;
height: 100%;
margin-bottom: 10%;
border-spacing: 0;
table-layout: fixed;
padding:2%;
}

.calendar-header{

}

.calendar-header-day{
border: 1px solid rgba(0,0,0,0.3);
height: 5%;
font-size: 18px;
}



#calMonth{
padding: 1% 0 2% 0;
height: 5%;
font-size: 22px;
}


.goalIcon{
width: 20px;
height: auto;
vertical-align:middle;
padding: 0 8px 3px 20px;
}


#calProg{
height: 5%;
font-weight: normal;
font-size: 15px;
padding: 20px 0 10px 0;

}

#calProg strong{color: black;font-size: 18px;}
#calProg b{font-weight: normal;} 
#calProg i{font-style:normal;} 

@media only screen and (max-height: 725px)  {.calendar-header-day{font-size: 16px;} #calMonth{font-size: 22px;} }
@media only screen and (max-width: 1150px)  {#calProg b{display: none;} }
@media only screen and (max-width: 720px)  {#calProg i{display: none;} }

.calendar-day{
border: 1px solid rgba(0,0,0,0.3);
vertical-align: top;
text-align: left;
padding: 0 0 0 5px;
cursor: default;
position: relative;
font-weight: bold;
font-size: 22px;
}


@media only screen and (orientation: portrait)  {#horTable {display: none;}}
@media only screen and (orientation: landscape)  {#verTable {display: none;}}

.awards td{
border: 1px solid rgba(255,255,255,0.3);
vertical-align: top;
text-align: left;
position: relative;
font-weight: bold;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
}

.award1{background-color: rgba(255,255,255,0.1); background-image:url(https://www.ouinolanguages.com/assets/French/common/prize1b.png); box-shadow:inset 0px 0px 0px 3px gold; }
.award2{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize2a.png);}
.award3{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize3a.png);}
.award4{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize4a.png);}
.award5{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize5a.png);}
.award6{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize6a.png);}
.award7{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize7a.png);}
.award8{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize8a.png);}
.award9{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize9a.png);}
.award10{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize10a.png);}
.award11{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize11a.png);}
.award12{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize12a.png);}
.award13{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize13a.png);}
.award14{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize14a.png);}
.award15{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize15a.png);}
.award16{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize16a.png);}
.award17{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize17a.png);}
.award18{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize18a.png);}
.award19{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize19a.png);}
.award20{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize20a.png);}

.outImg{
position: relative;
width: 0%;
height: 100%;
margin: 0;
padding: 0;
overflow:hidden;
background: rgba(255,255,255,0.1);
}

.inImg{
position: absolute;
width: 100%;
height: 100%;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
}

.award2 .inImg{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize2b.png);}
.award3 .inImg{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize3b.png);}
.award4 .inImg{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize4b.png);}
.award5 .inImg{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize5b.png);}
.award6 .inImg{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize6b.png);}
.award7 .inImg{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize7b.png);}
.award8 .inImg{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize8b.png);}
.award9 .inImg{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize9b.png);}
.award10 .inImg{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize10b.png);}
.award11 .inImg{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize11b.png);}
.award12 .inImg{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize12b.png);}
.award13 .inImg{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize13b.png);}
.award14 .inImg{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize14b.png);}
.award15 .inImg{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize15b.png);}
.award16 .inImg{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize16b.png);}
.award17 .inImg{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize17b.png);}
.award18 .inImg{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize18b.png);}
.award19 .inImg{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize19b.png);}
.award20 .inImg{background-image: url(https://www.ouinolanguages.com/assets/French/common/prize20b.png);}


.awards p{
position: absolute;
bottom: 10px; left: 0; right: 0;
text-align: center;
width: 85%;
background: rgba(0,0,0,0.05);
font-size: 11px;
padding: 10px 2% 10px 2%;
margin: auto auto;

cursor: default;
color: rgba(255,255,255,0.86);
border-radius: 5px;
box-shadow:inset 0px 0px 1px 1px gray;
z-index: 2;
display: none;
}

.award1 p{display: block;}

.awards h2{
position: absolute;
top: 10px;
right: 10px;
text-align: center;
margin: 0;
font-size: 13px;

cursor: default;
padding: 5px 10px;
color: rgba(255,255,255,0.86);
background: rgba(0,0,0,0.05);
border-radius: 5px;
box-shadow:inset 0px 0px 1px 1px gray;
z-index: 2;
display: none;
}

.gold{box-shadow:inset 0px 0px 0px 3px gold;}
.silver{box-shadow:inset 0px 0px 0px 3px silver;}
.bronze{box-shadow:inset 0px 0px 0px 3px #A75B10;}


.noHover:hover{background: none;}

.goalCont {
    position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto auto;
	background: #101010;
	text-align:center;
	padding: 10px;
	color: black;
	width: 700px;
	height: 420px;
	display: none;
	z-index:2;
}


.btnGoals {
    width: 80px; height: 80px; padding: 5px; cursor: pointer; opacity: 0.9; float: left; margin-right: 20px;
}

.goals {
    position: relative; width: 47%; height: 90px; padding: 1%; margin: 0.5%; cursor: pointer; opacity: 0.9; background-color: #1d1d1d; float: left; text-align:left; color: black; font-size: 18px;
}

#goal5 {
    margin: 0.5% 23.5% 0.5% 23.5%;
}


@media only screen and (max-width: 725px)  {
.goalCont h2{font-size: 20px; line-height: 20px;}
.goalCont {width: 470px; height: 475px;}
.btnGoals {width: 50px; height: 50px; padding: 5px; margin-right: 10px;}
.goals {width: 97%; height: 60px; font-size: 12px;}
#goal5 { margin: 0.5%;}
.awards p{font-size: 10px;}
}

.goals h3{
line-height: 0px; 
}

.goalActive{
box-shadow: 0px 0px 0px 3px #2980b9;
}


.checkGoal{
position: absolute;
bottom: 5px;
right: 5px;
width: 20px;
height: 20px;
display: none;
}

.iconGoal{
position: absolute;
right: 5px;
bottom: 5px;
width: 20%;
min-width: 20px;
max-width: 28px;
height: auto;
opacity: 0.05;
image-rendering: -moz-crisp-edges;         /* Firefox */
image-rendering:   -o-crisp-edges;         /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
z-index: -1;
}

.iGoal1{left: 13%;}
.iGoal2{left: 28%;}
.iGoal3{left: 43%;}
.iGoal4{left: 58%;}
.iGoal5{left: 73%;}
.iGoal6{right: 2px; bottom: auto; top: 2px; min-width: 29px; max-width: 29px;}

.closeWin{
position: absolute;
bottom: 15px;
right: 15px;
width: 60px;
padding: 7px 3px;
background:#FFBE00;
opacity: 0.8;
color: black;
border-radius: 2px;
cursor: pointer;
font-weight: bold;
font-size: 18px;
}

.calNext{
position: fixed;
top: 8%;
right: 8%;
width: 25px;
height:auto;
z-index: 5;
cursor: pointer;
opacity: 0.8;
-webkit-transform: scaleX(-1);
        transform: scaleX(-1);
}


.calPrev{
position: fixed;
top: 8%;
left: 8%;
width: 25px;
height:auto;
z-index: 5;
cursor: pointer;
opacity: 0.8;
}

.closeAll{
position: fixed;
top: 50px;
right: -7px;
width: 100px;
height:auto;
z-index: 5;
cursor: pointer;
opacity: 0.8;
display: none;
}


.hide{left: -1000%;}


.choices {
    position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto auto;
	background: rgba(0,0,0,0.05);
	box-shadow: 0px 0px 4px 1px;
	text-align:center;
	padding: 10px;
	width: 490px;
	height: 410px;
}

.choices h1 {
color: black;
font-size: 26px;

}


.btnActs {
    width: 80px; height: auto; padding: 2px 5px 5px 5px; cursor: pointer; opacity: 0.8; float: left; margin-right: 20px;
}


.acts {
 width: 96%; height: 90px; padding: 2%; margin: 2px 0 2px 0; cursor: pointer; opacity: 0.8; background: rgba(255,255,255,0.08); float: left; text-align:left; color: black; font-size: 18px;
}

.acts h3{
line-height: 6px; 
margin-top: 10px;
}

.insideProg{
overflow-y: auto;
overflow-x: hidden;  
width: 98%;
position: relative;
float: right;
height: 100%;
-webkit-overflow-scrolling: touch;
}

.progOverview{

position: relative;
max-width: 820px;
-webkit-overflow-scrolling: touch;
padding: 30px 0 30px 0;
width: 90%;
margin: 0 auto;
height: auto;
text-align:center;
cursor: default;
}


.fact{
color: #202020;
margin: 0;
font-size: 17px;
padding-left: 95px;
font-weight: 500 !important;	
}

.fact strong{color: #202020; font-size: 1.3em; font-weight: 700 !important;}

.mainLogoImg1{
width: 50px;
height: auto;
position: absolute;
top: 0; bottom: 0; left: 0;
padding: 0 20px;
margin: auto auto;
border-right: 1px solid grey;
}


.mainLogoImg2{
width: 40px;
height: auto;
vertical-align:middle;
padding: 0 5px 8px 0;
}


.insideProg::-webkit-scrollbar{
width:12px;
background-color: rgba(0,0,0,0.05);
} 

.insideProg::-webkit-scrollbar-thumb{background-color: rgba(0,0,0,0.2); border-radius: 3px;}
.insideProg::-webkit-scrollbar-track{background-color: rgba(0,0,0,0.05);} 
.insideProg::-webkit-scrollbar-thumb:hover{background-color: #F90;}
.insideProg::-webkit-scrollbar-thumb:active{background-color: #F60;} 

.pMeters{
position: relative;	
height: 110px;
width: 95%;
padding: 15px 10px 25px 10px;
margin: 30px 0 20px 0;
color: black;
background: rgba(0,0,0,0.05);
border-radius: 5px;
z-index: 1;
}


.factCont{
position: relative;	
height: auto;
width: 95%;
padding: 20px;
margin: 15px 0 15px -15px;
color: white;
background: rgba(0,0,0,0.05);
border-radius: 5px;
z-index: 1;
}

.calClick{
cursor: pointer;
}


.pMeters .progTitle{
font-family: 'Fjalla One', sans-serif;	
font-size: 18px;	
text-align: left;
color:black;
}


#pMeter9 .progTitle{
font-size: 20px;
top: 5px;	
color:black;
}

.progDiv{
position: relative;
float: right;
font-size: 19px;
margin:0 10px 0 0

}
.progDiv b{
font-weight: normal;
}

.progTitle{
position: absolute;
width: 100%;
font-weight: bold;
text-align: center;
font-size: 19px;
left: 20px;
}

.progText{
position: relative;
width: 580px;
height: 30px; 
margin: 20px auto 0 auto;
font-size: 16px;
}

.progText span{
position:absolute;
left:0;
top: 7px;
}



.progMeter{
position: relative;
width: 580px;
height: 6px; 
background: #333;
margin: 2px auto 0 auto;
}

.starMeter, .scoreMeter{
position: absolute;
width: 30%;
height: 100%;
left:0; top: 0; 
background: #2980b9;
}

.progIcons{
height: 23px; 
width: 23px;
padding: 0 5px 0 10px;
margin-top: -6px;
vertical-align:middle;
}

sup{
font-size:15px;
}

.medalTotal{
padding-left: 5px;
font-size:15px;
}

.pMeters {
padding-top: 50px;
padding-bottom: 30px;
}


.pMeters .progTitle{
text-align: left;
top: 20px;
color: black;
}


#pMeter9 .progTitle{
font-size: 20px;
top: 20px;	
color: black;
}

.progLogo{
position: absolute;
top: -10px; 
left: auto;
right: -10px;
width: 40px;
height: 40px;
z-index: 2;
}

@media screen and (max-width: 700px), screen and (max-height: 600px){
.unitTitles{font-size: 17px;}
.unitTitles2{font-size: 19px;}
.sectionPs{font-size: 18px;}
.sectionPs2{font-size: 15px;}
.fact{font-size: 15px;}
.fact strong{font-size: 18px;}
}

@media screen and (max-width: 700px){
.sectionOptions{
width: 50px;
height: 50px;
top: 10px;
right:10px;
}	
.sectionOptions img{
width: 30px;
height: 30px;
}
}

.progMeter, .progText, .pMeters{width: 94%;}

@media only screen and (max-width: 800px)  {
.calNext{top: 7%;width: 15px;}
.calPrev{top: 7%;width: 15px;}
.calendar-day{font-size: 20px;}
.iGoal6{min-width: 24px; max-width: 24px;}
.progIcons{height: 20px; width: 20px;padding: 0 5px 0 5px;}
.progDiv i, .medalTotal{display:none;}
}


@media only screen and (max-height: 625px)  {
.calendar-day{font-size: 20px;}
.calNext{top: 8%;width: 15px;}
.calPrev{top: 8%;width: 15px;}
.iconGoal{max-width: 20px;}
.iGoal1{left: 4%;}
.iGoal2{left: 19%;}
.iGoal3{left: 34%;}
.iGoal4{left: 49%;}
.iGoal5{left: 64%;}
.iGoal6{left: 79%; right: auto; bottom: 5px; top: auto; min-width: 20px; max-width: 20px;}
}

@media only screen and (max-width: 800px)  {.progress2, .progress {height: 98%;}}

@media only screen and (max-width: 530px)  {
.progText strong{display:none;}
.progDiv{margin:0 2px 0 0; }
sup{ font-size: 14px;}
}

@media screen and (max-width: 700px){.mainTitle{font-size: 18px;}}


body {
    -webkit-animation: fadein 2s;
       -moz-animation: fadein 2s;
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


.fullOpacity2 {opacity: 1; background-color: rgba(0,0,0,0.06);}
.fullOpacity {opacity: 1;}


@media screen and (max-width: 750px)  {
.progIcons{height: 20px; width: 20px;padding: 0 5px 0 5px;}
.progDiv i, .medalTotal{display:none;}

.calendar-day{font-size: 16px;}
.iconGoal{width: 10px !important; min-width: 1px; right: 10px !important; left: auto;}	
.goalIcon{width: 15px;}	
.iGoal1{top: 9px;}
.iGoal2{top: 21px;}
.iGoal3{top: 33px;}
.iGoal4{top: 45px;}
.iGoal5{top: 57px;}	
.iGoal6{min-width: 20px; max-width: 20px; top: auto; left: 7px; bottom: 7px;}		
}


iframe{border-radius: 10px !important;}