@media all and (min-width: 800px)
{ 
      
      article {     
		position: fixed; 	
		width: 90%; 
		height: 82%;/* 92 */
		/*bottom: 2%;*/
		right: 4%;
		top:13%;
		text-align: center;
      }  

	section aside
	{
		display: inline;
		position:fixed;
		right : 60px;
		top: 8%; /* 6 */
		z-index: 1;
	}

	label {
		display: inline;
	    width: 0;
	    float: none;
	}

        form
        {
                display:inline;
        }
        
        p[class="20"]
	{	
		text-align:left;
		margin-left: 20%;
	}
	
	p[class="25"]
	{	
		text-align:left;
		margin-left: 25%;
	}
	p[class="30"]
	{	
		text-align:left;
		margin-left: 30%;
	}
	p[class="35"]
	{	
		text-align:left;
		margin-left: 35%;
	}
	p[class="40"]
	{	
		text-align:left;
		margin-left: 40%;
	}
	p[class="45"]
	{	
		text-align:left;
		margin-left: 45%;
	}
        
	
	input[type="submit"]
	{
		font-size:1.5em;
		padding : 20px20px20px20px ;
                border-radius: 3px;
	}
	
	input[type="button"]
	{
		font-size: 1.6em;
		border-radius: 10px;
		line-height: 200%;
	}
        	


        #fin
        {
            right: 15px;
            position: absolute;
            border-radius: 5px;
            background-color : #82FA58;
        }
        
        #valider
        {
             font-size : 1.6em;
            line-height : 150%;
        }
        
        #previous
        {
            border-radius: 5px;
            left: 15px;
            position: absolute;
            background-color : #FA5858;
        }
        
	#s
	{
		left: 85%;
		bottom: 5%;
		position: absolute;
	}
	
	#o
	{
		left: 40%;
		bottom: 55%;
		position: absolute;
	}
	
	#p
	{
		left: 75%;
		bottom: 35%;
		position: absolute;
	}
	
	#pa
	{
		left: 20%;
		bottom: 65%;
		position: absolute;
	}
	
	#pp
	{
		left: 30%;
		bottom: 10%;
		position: absolute;
	}
	
	#v
	{
		left: 57%;
		bottom: 27%;
		position: absolute;
	}
	
	#t
	{
		left:65%;
		bottom: 67%;
		position: absolute;
	}
	
	#a
	{
		left: 10%;
		bottom: 20%;
		position: absolute;
	}
	
	#c
	{
		left: 23%;
		bottom: 40%;
		position: absolute;
	}
	
	#f
	{
                height:2%;
                bottom:6%; /* 3 */
                left:10%;
                position:absolute;
	}
	
	#fff
	{
                height:2%;
                bottom:3%; /* 3 */
                left:10%;
                position:absolute;
	}        
	
	h1
	{
		font-size: 2em;
	}
      /*  
        #hop {
            height:89%;
            bottom:4%;
        }

    aside {
        left:96%;
        top:5%;
        position:absolute;
    } */
}
@media only all and (max-width: 800px) 
{

    input {
        display:inline;
    }
    #fin
    {
        border-radius: 5px;
        background-color : #82FA58;
    }

    #valider
    {
         font-size : 1.2em;
        line-height : 150%;
    }

    #previous
    {
        border-radius: 5px;
        background-color : #FA5858;
    }
         
    form
    {
            display:inline;
    }
	
	input[type="submit"]
	{
		font-size:1.5em;
		padding : 20px20px20px20px ;
                border-radius: 3px;
	}
	
	input[type="button"]
	{
		font-size: 1.6em;
		border-radius: 10px;
		line-height: 200%;
	}
}