/*   @font-face {
   font-family: Fonarto XT;
   src: url(Fonarto XT.ttf);
}

@font-face {
   font-family: Fonarto XT;
   src: url(Fonarto XT.ttf);
   font-weight: bold;
}
*/

* {
    box-sizing: border-box;
}
.row:after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
html {
    font-family:geomanist-regular-webfont;
}
.header {
  /*  background-color: #9933cc;*/
    color: black;
    padding: 0px;
	text-align:center;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;

   
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  
}
.menu li:hover {
    background-color: #0099cc;
}
.aside {
    background-color: #33b5e5;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;
     
        }
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;
         
        }
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;
         text-align:center;
         
         }
         @media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%; text-align:center;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;
               font-size:10px;
               }
               h1
               {
                   font-size:72px;
                 
                   margin-top:25px;
                
               }
               	.Empcode
	{
	    background-color:rgb(0, 164, 196);
	    opacity:0.5;
	    width:280px;
	    height:40px;
	    margin:5px;
	    border:0px;
	    margin-top:0%;
	    color:White;
	      text-align:center;
	      border-radius:5px;
	     /* font-family:Roboto Condensed;*/
	     /* font-family:Langdon;*/
	     font-size:15px;
	       border-style: double;
    border-width: thick;
     font-family:geomanist-regular-webfont;
      text-transform:capitalize;
	}
    .Password
    {
           background-color:rgb(0, 164, 196);
	   opacity:0.5;
	    width:280px;
	    height:40px; 
	     margin:5px;
	       border:0px;
	      margin-top:7%;
	     
	        text-align:center;
	          border-radius:5px;
	         /* font-family:Roboto Condensed;*/
	          /* font-family:Langdon;*/
	          font-size:15px;
	             color:White;
	               border-style: double;
    border-width: thick;
     font-family:geomanist-regular-webfont;
        }
        
                    p { width:34%; text-align:center;   margin-left:280px; color:rgb(0, 164, 196);font-size:15px;} 
p span { background:white; padding:0 10px; font-size:15px;  color:rgb(0, 164, 196);}
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
     h1
               {
                   font-size:25px;
               }
               	.Empcode
	{
	    background-color:rgb(0, 164, 196);
	    opacity:0.5;
	    width:150px;
	    height:40px;
	    margin:5px;
	    border:0px;
	    margin-top:8%;
	    color:White;
	      text-align:center;
	      border-radius:5px;
	     /* font-family:Roboto Condensed;*/
	     /* font-family:Langdon;*/
	     font-size:15px;
	       border-style: double;
    border-width: thick;
     font-family:geomanist-regular-webfont;
      text-transform:capitalize;
	}
    .Password
    {
           background-color:rgb(0, 164, 196);
	   opacity:0.5;
	    width:150px;
	    height:40px; 
	     margin:5px;
	       border:0px;
	      margin-top:10%;
	     
	        text-align:center;
	          border-radius:5px;
	     
	          font-size:15px;
	            border-style: double;
    border-width: thick;
     font-family:geomanist-regular-webfont;
        }
        
                    p { text-align:center; margin-left:0px; color:rgb(0, 164, 196);font-size:15px;} 
p span { background:white; padding:0 10px; font-size:15px;  color:rgb(0, 164, 196);}
}

 #first
{
   width:6%;
   height:100%; 
  
  
 
 background-color:#ee5433;
   float: left;
   font-family:geomanist-regular-webfont;
   position:fixed;
   border-right:0px solid #f5f2ec;

}


     #second
{
   width:6%;
   height:100%; 
  
 
  background-color: #fec80a;
   float: left;
   font-family:geomanist-regular-webfont;
   position:fixed;
   border-right:0px solid #f5f2ec;
   margin-left:6%;
   /*  opacity:0.5;
    filter: brightness(120%);*/

}

#third
{
   width:6%;
   height:100%; 
   
 

background-color:#00ffff;
           
            
  
   float: left;
font-family:geomanist-regular-webfont;
 position:fixed;
 margin-left:12%;
 border-right:0px solid #f5f2ec;

   
}

#four
{
    width:6%;
   height:100%; 



   float:left;

font-family:geomanist-regular-webfont;
 position:fixed;
 margin-left:18%;

 background-color:#ff8da1;
 
}

#five
{
    width:6%;
   height:100%; 


   float:left;

font-family:geomanist-regular-webfont;
 position:fixed;
 margin-left:24%;


 background-color: #d7de1a ;
 border-right:0px solid #f5f2ec;   
  
}


#six
{
    width:6%;
   height:100%; 



   float:left;

font-family:geomanist-regular-webfont;
 position:fixed;
 margin-left:30%;

background-color:#149ba5;
 border-right:0px solid #f5f2ec;   
    
}

#seven
{
      width:64%;
   height:100%; 

background-color:white;
 

   float:left;
 font-family:geomanist-regular-webfont;
  position:fixed;
   margin-left:36%;
   /*border-left:1px solid #00a4c4;*/
 
    }



body{
width:100%;
height:100%;
margin:0px;




}
   
    ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:white;
  font-family:geomanist-regular-webfont;
   /*font-family:Langdon;*/
    font-size:15px;
    text-align:center;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
 color:white;
   opacity:  1;
   font-family:geomanist-regular-webfont;
  /* font-family:Langdon;*/
   font-size:15px;
     text-align:center;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color:white;
   opacity:  1;
 font-family:geomanist-regular-webfont;
  /*font-family:Langdon;*/
   font-size:15px;
     text-align:center;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color:white;
 font-family:geomanist-regular-webfont;
 /*font-family:Langdon;*/
font-size:15px;
  text-align:center;
}

    .cart { /*background-color: #CCC; */
           margin-top:5%; 
            }

#sidebar {
    display: none;
}
.cart:hover #sidebar {
    display:block;
}


#feonediv
{
        margin-left:92.5%;

           background-color:white; 
           
            
    width:10%;
    height:100%;
   
}
#fetwodiv
{
        margin-left:92.5%;

           background-color:white; 
           
            
    width:10%;
    height:100%;

}

#fethreediv
{
       margin-left:92.5%;

           background-color:white; 
    
            
    width:10%;
    height:100%;
  
}
#fefourdiv
{
        margin-left:90%;

           background-color:white; 
    
            
    width:100%;
    height:100%;
 
}


#seonediv
{
    margin-left:92.5%;

           background-color:white; 
       
            
    width:10%;
    height:100%;

}

#setwodiv
{
    margin-top:190%;
    background-color:white;
 
    width:100%;
    height:5px;

}

#sethreediv
{
       margin-top:190%;
       background-color:white; 

    width:100%;
    height:5px;

}
#sefourdiv
{
       margin-top:190%;
       background-color:white; 

    width:100%;
    height:5px;

}

#thonediv
{
       margin-left:92.5%;
   background-color:white; 
     
    width:10%;
    height:100%;

}

#thtwodiv
{
       margin-top:150%;
       background-color:white;
 
            
    width:100%;
    height:5px;

     
}
#ththreediv
{
         margin-top:150%;
background-color:white;

    width:100%;
    height:5px;

}
#thfourdiv
{
  margin-left:92.5%;

            
           background-color:white; 
         
              width:100%;
    height:5px;

}
#fouonediv
{
 margin-left:92.5%;

            
           background-color:white; 
          
              width:10%;
    height:100%;   
}
#foutwodiv
{
 margin-top:190%;

            
           background-color:white; 
            
       
              width:100%;
    height:5px;   
}
#fouthreediv
{
 margin-top:190%;

            
           background-color:white; 
            
       
              width:100%;
    height:5px;   
}
#foufourdiv
{
 margin-top:190%;

            
           background-color:white; 
  
              width:100%;
    height:5px;   
}
#fivonediv
{
    margin-left:92.5%;

            
           background-color:white; 
            
          
              width:10%;
    height:100%; 
}
#fivtwodiv
{
     margin-top:150%;

            
           background-color:white; 
            
          
              width:100%;
    height:5px; 
}
#fivthreediv
{
       margin-top:150%;
background-color:white;
        
              width:100%;
    height:5px; 
}
#fivfourdiv
{
       margin-top:150%;
background-color:white;
        
              width:100%;
    height:5px; 
}
#sixdivone
{
    margin-left:92.5%;
            
           background-color:white; 
            
              width:10%;
    height:100%; 
}
h1
{
    
  font-family:Fonarto XT;
 /* font-family:Nautilus Pompilius;*/

  
    color:rgb(0, 164, 196);
    text-transform:none;

   
    
}

a
{
   color:rgb(0, 164, 196);
    text-decoration:none; 
      font-size:15px;
}