

body
{


  color: #;
  font-family: 'NeueHaasUnicaW1G-Heavy', 'Arial' cursive; 
  font-weight:600;
  
}

#menuToggle
{
  display: block;
  position: fixed;
  top: 30px;
 
  
  z-index: 10001;
  
  -webkit-user-select: none;
  user-select: none;
}
 @media only screen and  (min-width: 1680px) {
#menuToggle
{
right:5%;	
	
}
	  
  }
  @media only screen and  (max-width: 1680px) {
#menuToggle
{
right:5%;	
	
}
	  
  }
  
  @media only screen and  (max-width: 960px) {
#menuToggle
{
right:20px;	
	
}
	  
  }

#menuToggle a
{
  text-decoration: none;
  color: #ccc;
  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: #fff;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  right: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #000;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #666;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
	position: absolute;
	
	width: 100px;
	margin: -60px 0 0 -40px;
	padding: 40px;
	padding-top: 100px;
	background: rgba(0, 0, 0, 0.6);
	list-style-type: none;
	-webkit-font-smoothing: antialiased;
	/* to stop flickering of text in safari */
  
  transform-origin: 50% 0%;
	transform: translate(150%, 0);
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	right: -80px;
	height:100vh;

}

#menu a
{
	text-transform: capitalize;
	font-family: "Arial Narrow", Arial;
}



#menu li
{
  padding: 10px 0;
  font-size: 20px;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}





.sub-menu li {
            list-style-type: none; 
            padding: 4px!important;
            margin-bottom: -5px;
			margin-top:20px;
			margin-left:40px;
            
        }
        .sub-menu li a {
            font-size: 16px;
        }
        .sub-menu {
        display: none;
        margin: 0px 0 0 -41px;
        background: #0000002e;
		
		
		-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;	
	
	
}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
		

    .item-submenu > a:after {
	font: normal normal normal 12px/1 FontAwesome;
  	font-size: 14px;
  	text-rendering: auto;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
      content: "\f078";
	float: right;
    margin-right: 185px;
	
	
}
.item-submenu {
    margin-bottom: -14px;
	
}



#logo1 {
  width: 100%;

  height: 50px;
  margin:0 auto;
  position: fixed;
  	z-index: 9999;
	
}	
#logo2 {
	top:62px;

  width: 100%;

  height: 50px;
  margin:0 auto;
  position:fixed;
  	z-index: 9999;

	
	
	

 
  }
  .logo1:hover {
  
       -webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
         -o-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
			
  }
  
  
  @media only screen and (min-width: 768px) {
 #logo1 img{ 
   max-width: 100%;
  height: auto;
  margin-left:5%;


 



 }
  #logo2 img{ 
   max-width: 100%;
  height: auto;
  margin-left:5%;

  



 }
  }
  
  @media only screen and (max-width: 768px) {
	#logo1 img{ 
   max-width: 70%;
  height: auto;
    margin-left:5%;
	
 } 
 #logo2 img{ 
   max-width: 70%;
  height: auto;
    margin-left:5%;
	margin-top:0%;
	 
	
 } 
  
	  
  }
  
 
  
 #content {
  width:100%;
  margin:0 auto;
  	z-index: 9999;
	position:fixed;
	top:-100px;
	height:200px;
	  background: #000000;
	  left:0px;
	
  } 
  
  header {
  	width: 100%;
 	  padding: 20px 0;
	  background: #000000;
	  	/* dark blue
	  background: #020023;
	  /* animation magic */
  	
  	
  	-webkit-transition: all 0.4s ease-in-out;
  	-moz-transition: all 0.4s ease-in-out ;
	transition: all 0.4s ease-in-out;
  	z-index: 9999;
 	  top: 0;
  	position: fixed;
	left:0px;


	
}

.shrink {
  	padding: 0;
	top: 20px;
	
	
}


  

	
.shrink img {
	
	
 transform: scale(0.8);
 transform-origin: top left; 
	  -moz-transition: all .3s ease-in-out; 
	  -o-transition: all .3s ease-in-out; 
	  -webkit-transition: all .3s ease-in-out; 
	  transition: all .3s ease-in-out;
	 

	 
	  
	  
	  }
	  .grow img {
	
	
		  
 transform: scale(1.0);
 transform-origin: top left; 
	  -moz-transition: all .3s ease-in-out; 
	  -o-transition: all .3s ease-in-out; 
	  -webkit-transition: all .3s ease-in-out; 
	  transition: all .3s ease-in-out;
	  
	  
	  
	  }
	  
	   @media only screen and (min-width: 1400px) {
	  #intro_txt{
		  position: absolute;
		  overflow:auto;
	
	width: 96%;

  margin: 0 auto;
		
	
		 top: 700px;
		 line-height:18px;
 	 
	
	 font-family: "Arial Narrow", "bitter", Arial;
	  font-size:14px;
	  font-weight:600;
	  color:#ccc;
	  z-index:998;
	  padding: 20px;
	  
		  
		  
		  
	  }
		}
		 @media only screen and (max-width: 1400px) {
	  #intro_txt{
		  position: absolute;
		  overflow:auto;
	
		width: 96%;

  margin: 0 auto;
		
	
		 top:  550px;
		 line-height:18px;
 	 
	
	  font-family: "Arial Narrow", "bitter", Arial;
	  font-size:14px;
	  font-weight:600;
	  color:#ccc;
	  z-index:998;
	  padding: 20px;
	  
		  
		  
		  
	  }
		}
		  
	    @media only screen and (max-width: 960px) {
	  #intro_txt{
		  position: absolute;
		  overflow:auto;
		width: 96%;

  margin: 0 auto;
		
	
		 top: 520px;
		 line-height:18px;
 	 
	
	  font-family: "Arial Narrow", "bitter", Arial;
	  font-size:14px;
	  font-weight:600;
	  color:#ccc;
	  z-index:998;
	  padding: 20px;
	  
		  
		  
		  
	  }
		}
	    
	   
	  
	
		
		 @media only screen and (max-width: 700px) {
     #intro_txt{
		  position: absolute;
		  overflow:auto;
	;
		 	width: 96%;
 
  margin: 0 auto;
	
		
		
		top: 550px;
		 line-height:17px;
 	 
	
	  font-family: "Arial Narrow", "bitter", Arial;
	  font-size:13px;
	  font-weight:600;
	  color:#ccc;
	  z-index:998;
	  padding: 20px;
	  
  }
		 }
	  
	  
	  #intro_txt img{
		  width: 100%;
  height: auto;
  
  
		-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;	
	
	
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
  
  
	
	  
	   #about_txt{
		  position: absolute;
		  overflow:auto;
	
		 width: 100%;
	
		 top: 0px;
		 line-height:20px;
 	 
	
	  font-family: "Arial Narrow", "bitter", Arial;
	  font-size:15px;
	  font-weight:600;
	  color:#ccc;
	  z-index:998;
	
	  
		  
		  
		  
	  }
	  
	   #about_txt img{
		  width: 100%;
  height: auto;
  padding-top:40px;
	  
