body
{


  
 font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight:normal;
  
}

#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: 768px) {
#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: #cdcdcd;
  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
 */
 



 .drop{
   
 display: none;
	 position: absolute;
	 width:100%;
	 top:35px;
	 left: 0px;
	line-height:22px; 
	 list-style-type:none;
	 font-size:16px;
	float:right;
	    padding: 0px 10px;
	  text-decoration: none;
  }

  .drop_halo{
   
 display: none;
	 position: absolute;
	 width:100%;
	 top:35px;
	 left: 0px;
	line-height:22px; 
	 list-style-type:none;
	 font-size:14px;
	float:right;
	    padding: 0px 10px;
	  text-decoration: none;
  }
 
#filter
{
	position: absolute;
	
	width:100%;
	


	list-style-type:none;
	-webkit-font-smoothing: antialiased;
	left: 0px;
	/* to stop flickering of text in safari */
 margin-top: 25px;

}

#filter a
{
	text-transform: uppercase;
	 font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
	
  padding: 0px 13px;
  
	

}



#filter li{
float:left;
	
}

	@media only screen and (max-width: 768px) {
		
		#filter{
			
			 margin-top: 15px;
			
			
		}
		#filter a{
		  padding: 0px 5px;		
}
#filter li{		
		font-size: 13px;
	line-height: 14px;
	float:left;

}
		
		 .drop{
   

	 top:15px;
	 left: -5px;
	line-height:14px; 
	 list-style-type:none;
	 font-size:12px;
	float:right;
	    padding: 10px 7px;
	  text-decoration: none;
  }
		
		.drop_halo{
   
 display: none;
	 position: absolute;
	 width:100%;
	 top:20px;
	 left: 0px;
	line-height:13px; 
	 list-style-type:none;
	 font-size:11px;
	float:right;
	    padding: 0px 10px;
	  text-decoration: none;
  }
		
		.drop_halo a{
			 font-size:11px;
			line-height:13px; 
}
}


#filter2
{
	position: absolute;
	
	width: 200px;
	margin: -55px -30px 0 -40px;
	padding: 40px;
	padding-top: 100px;
	background: rgba(0, 0, 0, 0.8);
	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: -70px;
	height:100vh;

}

#filter2 a
{
	text-transform: uppercase;
	 font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
}



#filter2 li
{
  padding: 10px 0;
  font-size: 18px;
}

@media only screen and (max-width: 768px) {
	#filter2{
	
		width: 80px;
			margin: -80px 30px 0 10px;
		
	}
		
		#filter2 li{
  padding: 5px 0;
  font-size: 14px;
			margin-left:-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;
	
}

@media only screen and (min-width: 768px) {
	  
	  #logo1 {
  width: 100%;

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

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

  #logo2{ 

	  display:none;

  



 }
  }
  
  @media only screen and (max-width: 768px) {
	#logo1{ 
display:none;
	
 } 
 #logo2 img{ 
max-width: 75%;
	 height: auto;
    margin-left:5%;
	margin-top:0%;
	 
	
 } 
  
	  
  }
  
 
  
 #content {
  width:100%;
  margin:0 auto;
  	z-index: 9999;
	position:fixed;
	top:0px;

	 
	  left:0px;
	
  } 
  
  header {
  	width: 100%;
	
 	  padding: 20px 0;
	  
	background: rgba(0, 0, 0, 0.7);
	height:60px;
	  	/* 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: 20px 0;
	top: 0px;
	background: rgba(0, 0, 0, 0.7);
	height:40px;
	
}


  

	
.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 (max-width: 768px) {
     #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;
}