/* Gestion du Menu pour petits écrans */

.mobile { display: none; }
body, div, ul { width: auto; margin: 0; padding: 0; }



#menu { display: table;
width: 60%;
margin: 10px auto;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
background: dodgerblue;
background: linear-gradient(white, dodgerblue);
background: -webkit-linear-gradient(white, dodgerblue);
background: -moz-linear-gradient(white, dodgerblue);
background: -ms-linear-gradient(white, dodgerblue);
background: -o-linear-gradient(white, dodgerblue);
background: linear-gradient(white, dodgerblue);
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .3),
0 3px 5px rgba(0, 0, 0, .2),
0 5px 10px rgba(0, 0, 0, .2),
0 20px 20px rgba(0, 0, 0, .15);
   }


@media screen and (max-width:999px) {


ul#menu.drop {padding:2%;}
ul#menu.drop > li > a {border-radius: 0.1em;}

ul#menu.drop ul, ul#menu.drop li:hover > ul, ul#menu.drop li.hover > ul { left:0;}
ul#menu.drop ul { padding-top:0;position:relative;}
ul#menu.drop ul a, ul#menu.drop ul li:last-child a { border-left:0; border-right:0!important;border-top:0!important;}
ul#menu.drop ul li:first-child a {border-top:1px solid #dadada;}
ul#menu.drop ul a {width:auto;}
}

@media screen and (max-width:640px) {
ul#menu > li {display: block;margin-top:0.1em;}

.compass {
        display: none;
      }

.presentation {
        display: none;
      }

	  .intro {
		  width: auto; margin-left: 0px;
	  }
	  
	  .ships {
		  width: auto; margin-left: 0px;
	  }
	  
	  .box {
		  width: auto; margin-left: 0px;
	  }
	  
	  .box2 {
		  width: auto; margin-left: 0px;
	  }
	  
}

@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
}