@font-face {
    font-family: 'Nunito';
    src: url('/fonts/nunito-v32-latin-regular.woff2') format('woff2');    
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Nunito';
    src: url('/fonts/nunito-v32-latin-italic.woff2') format('woff2');    
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Nunito';
    src: url('/fonts/nunito-v32-latin-700.woff2') format('woff2');    
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Nunito';
    src: url('/fonts/nunito-v32-latin-800.woff2') format('woff2');    
    font-weight: 800;
    font-style: normal;
}
body
{
    width :100% ;
	margin:auto;
	text-align:center;	
	font-family: 'Nunito', sans-serif;
    font-weight: 400;
	background: #f4f8fc;
}

#global
{
    width :100% ;
    margin :auto ;
    padding :0px ;
}

h1
{
   font-size: 4vw;
}
h2
{
   font-size: 2.9vw;
}

h4
{
   font-size: 2vw;
}

header
{
    width :100% ;
}


.ttexte{
background: white;
border-radius: 16px; 
border: 1px solid #dde7f2;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
a {
    color: #1976d2;
}
.soustitre
{
   font-weight:bold;
   font-size: 1.4vw;
   text-align:center;
}

.preheader
{
    width :100% ;
  background-color: #f4f8fc;
}
.pub
{
    width :100% ;
}

.pepsia
{
	display:inline-block;
	width:406px;
}

.pr2
{
	display:inline-block;
	min-width:580px;
}

.header {
	width :100% ;
  overflow: hidden;
  padding: 0px 0px;
}

.header-right a {
  float: left;
  color: black;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  font-size: 16px; 
  line-height: 25px;
  border-radius: 4px;
}

.logo {
  float: left;
  width:30%;
}

.log {
  width:70%;
  float: right;
}
.champsconnect {
  width:100%;
  float: right;
  text-align: right;
}

.nompseudo
{   float: left;
	display:inline-block;
	width:30%;
	vertical-align:top;
   font-size: 2.8vw;
}
.params
{   float: left;
	display:inline-block;
	width:60%;
  color:#000088;
 vertical-align:top;
   font-size: 1.5vw;
}
.imgavat {
  float: left;
  width:5%;
 display:inline-block;
	 vertical-align:top;
  padding:0px;
  border:0px solid grey;
}
.log a{
  color: black;
  text-align: center;
  padding: 5px;
  text-decoration: none;
  font-size: 12px; 
  line-height: 12px;
  border-radius: 4px;
}
.log a:hover {
  background-color: #ddd;
  color: black;
}
.header-right a:hover {
  background-color: #ddd;
  color: black;
}

.header-right a.active {
  background-color: dodgerblue;
  color: white;
}

.header-right {
  text-align: center;
  width:100%;
}


.pdf {float:left;
  width:48%;  
   font-size: 1.2vw;
}

#titre
{
   width :100%;
   font-size: 4vw;
}
 

#menu-gauche
{
	text-align:center;
    width :17% ;
    float :left ;
}
 
#openfl-content { background: #ffffff; width: 100%; height: 100%; }
		@font-face {
			font-family: 'Arial';
			src: url('https://www.jeuxmaths.fr/fonts/arial.ttf') format('truetype');
			font-weight: normal;
			font-style: normal;
		}
 
#contenu
{ 
    width :68% ;
    float :left ;
}


#sidebar-droite
{	
	margin:auto;
	text-align:center;
	vertical-align:top;
    width :15% ;
	float :left ;
}

#commentaire
{
	width :100% ;
    float :left ;
}
#textcomment
{
	display:inline-block;
	padding:3px;
	text-align:justify;
	font-size:3vw;
	width:60%;
	border-radius:5px 5px 5px 5px ;
	border: 1px solid black;background-color:#ffffff;
	vertical-align:middle
}
#jeuprecedent
{
	display:inline-block;
	font-size:2.6vw;
	width:15%;
	vertical-align:middle
}
#jeusuivant
{
	display:inline-block;
	font-size:2.6vw;
	width:15%;
	vertical-align:middle
}

#barre
{
	width :100%;
}
#leclassement
{
    width :50%;	
    float :left;
}

#contenucorrespondant
{
    width :45%;
    float :right;
}
#barreprem
{
	width :100%;
	margin:auto;
	text-align:center;
}
#leclassementprem
{
    width :50%;	
	margin:auto;
	text-align:center;
}


#menubas
{
	width :100%;
	margin:auto;
	text-align:center;
}
#exosenplus
{
	width :100%;
	height:20%;
	margin:auto;
	text-align:center;
	display:block;
	vertical-align:bottom;
}
.vignettebas
{
	width :16.5%;
	float:left;	
	vertical-align:bottom;
}

.boutonniveau
{
	width:9%;
	float:left;
}

footer
{
    width :100%;
}


#smiley
{
	width:30%;
	float:left;
}
#infojeuconnect
{
	width:70%;
	float:left;
}
#infojeu
{
	width:100%;
	float:left;
}
#lespdfs
{
	width:100%;
	float:left;
}



@media(min-width: 601px) and (max-width: 1000px)
{ 

h1
{
   font-size: 6vw;
}

h2
{
   font-size: 2.5vw;
}
h4
{
   font-size: 2.5vw;
}

#titre
{
	font-size: 4.5vw;
}
#global
{
    width :100% ;
    padding :0px ;
}

#menu-gauche
{
    width :20% ;
}
#contenu
{
    width :80% ;
}

#sidebar-droite
{
    width :0%;
	display:none;
}

.soustitre
{
   font-size: 2.2vw;
}
.pdf {
  width:10%;
  
   font-size: 1.0vw;
  display:inline-block;
}
#textcomment
{
	font-size:4vw;
}

 
#jeuprecedent
{
	font-size:3vw;
}
#jeusuivant
{
	font-size:3vw;
}


#smiley
{
	width:10%;
	float:left;
}
#infojeuconnect
{
	width:30%;
	float:left;
}
#infojeu
{
	width:40%;
	float:left;
}
#lespdfs
{
	width:60%;
	float:left;
}

#leclassementprem
{
    width :75%;	
}


.pepsia
{
	display:none;
}
.pr2
{
	width:100%;
}

}



@media(max-width: 600px)
{ 


.pepsia
{
	display:inline-block;
	width:406px;
}

.pr2
{
	width:100%;
}

h1
{
   font-size: 8vw;
}

h2
{
   font-size: 5vw;
}

h4
{
   font-size: 3vw;
}

#titre
{
	font-size: 6vw;
}
#global
{
    width :100% ;
    padding :0px ;
}

#menu-gauche
{
    width :0% ;
}

#contenu
{
    width :100% ;
}

#sidebar-droite
{
    width :0% ;
}

.pdf {
  float: right;
  width:16%;
}
#textcomment
{
	font-size:5vw;
}
 
 
#jeuprecedent
{
	font-size:3.4vw;
}
#jeusuivant
{
	font-size:3.4vw;
}
/*
 .header a {
    float: none;
    display: block;
    text-align: left;
  }
  
  .header-right {
    float: none;
  }
  */
.logo {
  float: left;
  width:30%;
}
  
.log {
  float: right;
  width:70%;
}
.nompseudo
{  
	width:30%;
	font-size: 4vw;
}
  
  
.nompseudo input
{   
   font-size: 2.2vw;
}
  
.boutonniveau
{
	width:16%;
}
.params
{  
	
   font-size: 3vw;
}


#smiley
{
	width:5%;
	float:left;
}
#infojeuconnect
{
	width:95%;
	float:left;
}
#infojeu
{
	width:100%;
	float:left;
}
#lespdfs
{
	width:0%;
	float:left;
}


#leclassement
{
    width :100%;	
}

#contenucorrespondant
{
    width :100%;
}

#leclassementprem
{
    width :100%;	
}
}