html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,u,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0;padding:0;}
a{text-decoration:none;}
img{max-width:100%;}

body {
	font-family:trebuchet ms, arial, sans-serif;
}
@keyframes rotate-up {
	0%{
		opacity: 0;
		transform: rotateX(-90deg);
	}
  100% {
  	opacity: 1;
    transform: rotateX(0deg);
  }
}

@keyframes rotate-down {
	0%{
		opacity: 1;
		transform: rotateX(0deg);
	}
  100% {
  	opacity: 0;
    transform: rotateX(-90deg);
  }
}


.header-bg.fixed{
	transform-origin:top;
	box-shadow: 9px 9px 9px 0 rgba(47, 44, 44, 0.2);
	animation: rotate-up 0.5s 0s ease-in-out forwards;
}

.header-bg.not-fixed{
	transform-origin:top;
	box-shadow: 9px 9px 9px 0 rgba(47, 44, 44, 0.2);
	animation: rotate-down 0.5s 0s ease-in-out forwards;
}

.main-header.fixed{
	position: fixed;
	top:0;
	width: 100%;
}

.main-header{
	z-index: 2000;
	perspective:500px;
}
.wrap_h{
	margin:0 auto;
	width:95%;
}
.chip2{
	perspective:700px;
}
/*header-bg*/
.header-bg{
	
	background-color: #222;
	padding: 5px;
	overflow: hidden;
	-webkit-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
	box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);

}

.dividerli{
	width: 0%;
	height: 2px;
	display: none;
}
.navicon{
	height: 45px;
	border-radius: 6px;
	width: 45px;
	box-shadow: 0px 2px 5px rgba(0,0,0,0.9);
    border: 1px solid grey;
}

.header{
	padding:2px 4px;
	transition:height 200ms;
}

.logo{
	float:left;
	margin: 10px 0px 10px -30px;
}

/*menu*/
.menu{
	position: relative;
	margin: 20px 0px;
	float:right;
}



.kwicks {
	max-height: 60px;
	transition:0.5s ease-in;
	list-style: none;
}

.kwicks li.kwicks-collapsed{
	height: 50px;
	display: block;
	float: left;
	margin-left: 5px;
	border-radius: 5px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	transition:all 0.3s ease-in;
	transition: all 0.1s linear 0s; 
	
}

.kwicks-collapsed.active a{
	color:white;
}

.kwicks-collapsed{
	width: 90px;
}

.eight.kwicks-collapsed{
	width: 110px;
}

.kwicks-collapsed:hover{
	background-color:#4B8ED4;
	color: white;
}

.kwicks .active{
	color:white;
	position: relative;
	top:0px;
	background-color: black;
	box-shadow: 0px 3px 1px #444;
}

.kwicks .active:hover{
	  top: 1px;
	  box-shadow: 0px 0px 0px transparent;
}

.kwicks > li a{
	font-family: 'Open Sans', sans-serif;
	text-align: center;
	display: block;
	color: #777;
	font-size: 1.2em;
	line-height: 2.2em;
	padding: 4px 0;
}

.kwicks > li a:hover{
	color: white;
}

.first,.second,.third,.fourth,.fifth,.six,.seven,.eight{
    	transform:translateX(0px);
    	opacity: 1;
    }

img.acm{
	float: left;
  	width: 120px;
  	height: 75px;
}

hr.hrh{
	border-width:0px;
	height:0px;
}

figcaption.head{
	color: white;
	float: left;
	margin: 20px 0px;
	line-height: 10px;
	font-family: "Oxygen",serif;
}

strong{
	font-size: 18px;
}

.h6h{
	font-size: 10px;

}

.iconbar {
  display: block;
  width: 22px;
  background: white;
  box-shadow: 0px 3px 8px black;
  height: 2px;
  border-radius: 4px;
}
.iconbar + .iconbar {
  margin-top: 4px;
}

.divider{
	display: block;
	height: 1px;
  overflow: hidden;
  background-color: rgba(0,0,0,0.9);
   box-shadow: 0px 0.1px 0px white;

}
img.text_h{
	width: 300px;
}


/* Hide the link that should open and close the topnav on small screens */
.menu .icon {
    display: none;
}

@media (max-width: 1200px){
	.wrap_h {
	    width: 95%;
	}
	img.acm{
		width: 110px;
		height: 65px;
	}
	figcaption.head{
		margin: 15px 0px;
	}

	img.text_h{
		width: 250px;
	}
	.kwicks-collapsed{
		width: 80px;
	}
	.eignt.kwicks-collapsed{
		width: 110px;
	}
}


@media (max-width: 1100px){
	.menu{
		margin: 10px 0px;
	}
	strong{
		font-size: 16px;
	}
	.h6h{
		font-size: 9px;
	}
}

@media (max-width: 940px){
	.wrap_h {
	    width: 95%;
	}
	.logo{
	    width:90%;
	    float:left;
	}

	.menu{top:15px; margin: 0px}
	.menu ul.kwicks li.kwicks-collapsed{display: none;opacity:0;}
	.menu a.icon{
	    float: right;
	    background: transparent;
	    border-radius: 4px;
	    border:1px solid #333;
	    padding: 9px 10px;
	    display: block;
	}
	.menu a.icon:hover{
		background: #444;
	}
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media (max-width: 940px){
  .menu.responsive{position: relative;float: none;}
   .menu.responsive .icon{
    position: absolute;
    right: 0;
    top: 0;
  }
  .menu.responsive ul.kwicks li.kwicks-collapsed{
    float: left;
    width: 100%;
    opacity: 1;
    display: block;
  }
    .menu.responsive ul.kwicks li.kwicks-collapsed a{
    float: none;
    margin-left: 5%;
    display: block;
    }
	.dividerli{
		display: block;
		height: 2px;
		margin-bottom: 10px;
		width: 0%; 
	}

	.kwicks .active{
		box-shadow: 0px 0px 0px transparent;
	}
	.first,.second,.third,.fourth,.fifth,.six,.seven,.eight{
    	transform:translateX(-800px);
    	opacity: 0;
    }
    .kwicks li.kwicks-collapsed{
    	height: 40px;
    	margin-left: 0;
    	-webkit-box-shadow: 0 0px rgba(58,87,175,.75); 
		-moz-box-shadow: 0 0px rgba(58,87,175,.75); 
		box-shadow: 0 0px rgba(58,87,175,.75);
    }

    .kwicks > li a{
    	padding: 0;
    	text-align: left;
    	font-size: 1.1em;
    	line-height: 2.1em;
    }
    .header-bg{
    	padding: 2px;
    }
    .header{
    	padding: 0% 5%;
    }
    .eight{
    	margin-bottom: 20px;
    }
}

@media (max-width:500px){
	img.acm{
		width:80px;
		height: 45px;
	}
    .logo{
	    width:90%;
	}
	.divider{
		box-shadow: 0px 0.3px 0px white;
	}
	strong{font-size: 13px;}
	.h6h{font-size: 7.2px;}
	figcaption.head{
		margin: 10px 0px;
	}
}

@media (max-width: 350px){
	.wrap_h,.header{
		width: 95%;
	}
	.h6h{font-size: 5.2px;}
	strong{font-size: 10px;}
	.logo{
		width: 92%;
		margin-top: 10px;
	}
}