body{
	 	background:#ccc;
	 }
	    *{
	    	padding: 0px;
	    	margin: 0px;

	    }
      
     .head{
     	background: white;
     	color: RGB(225,66,0);
     	padding: 10px 70px;
     	font-family: sans-serif;
     	font-size: 30px;
     	border-top:10px solid #37f;	
     }




	    .nav{
	    	padding: 10px 0px;
	    	/*background: #000080; *//* #37f; sky color */
			/* background-image: linear-gradient(#213FFF,#020936,#051DB5); */
			background-image: linear-gradient(#2efbf2,#020936,#2efbf2); 
	    	text-align: center;
			    z-index: 2;
    position: relative;
	    }

         .main-menu>li{
         	display: inline-block;
         	width: 120px;
         	padding: 0px 0px;
         	margin-left: 0px;
         	text-align: center;
         	color: white;
         	font-size:1.4vw;
         	border-left: 1px solid grey;
         	transition: .4s;
         	cursor: pointer;
         	box-sizing: border-box;

         }
         .main-menu li:hover{
			font-size:1.4vw;
text-decoration: underline;
	         }

         .main-menu li:hover .sub-menu{
              display: block;
	transform:scaleY(1);
	
         }
 
         .sub-menu{
            	position: absolute;
         	padding: 0px;
         	margin-top: 30px;
         	margin-left: -10px;	
         	float: left;
         	width: 400px; 
         	text-align: left;
         	box-sizing: border-box;
         	/*stop border border:2px solid white;*/
         	box-shadow: 10px 10px 10px grey;
         
	transform:scaleY(0); /*conjust sub menu */
	transform-origin:top;/*from top to bottom */
	transition:0.3s; /*transform time */
       
         }

         .sub-menu:before{
                 content:"";
                 width: 0px;
                 height:0px;
                 border-left:20px solid transparent;
                 border-right:20px solid transparent;
                 border-bottom:30px solid white;
                 position: absolute;
                 margin:-30px 0px 0px 60px; /*up arrow */
         }

         .sub-menu li{
         	list-style-type: none;
         	/* padding: 10px; stopped for blinking*/
         	color: white;
         	font-size:1.4vw;
         	background:#000080; /* #37f; sky off*/
			margin-top:5px;/*for gaps between menu */
	         }

/* stop the section
     .main-menu>li:hover, .sub-menu>li:hover{
         	background:black; /* #35c; stop blue 
			transform:scale(1.1);
	         }
			 */
.main-menu>a li:hover, .sub-menu>a li:hover{
         	background:	#231F20;/* #35c; stop blue */
			transform:scale(1.1);
			color:yellow;
			text-align:center;
	         }