Template:CCA San Diego/head

• {

 padding: 0;
 margin: 0;

}

body {

 position: relative;
 font-family: 'Open Sans', sans-serif;

} body .wrapper {

 width: 100%;
 height: 100vh;
 background-image: url("igem.jpg"); 
  min-height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

 position: absolute;
 overflow: hidden;

} body .wrapper span {

 z-index: 9999;
 position: absolute;
 top: 20px;
 left: 10px;
 width: 35px;
 height: 4px;
 background: #ffffff;
 cursor: pointer;

} body .wrapper span:before, body .wrapper span:after {

 display: block;
 position: absolute;
 content: ;
 left: 0;
 height: 4px;
 width: 35px;
 background: #ffffff;

} body .wrapper span:before {

 top: -8px;

} body .wrapper span:after {

 bottom: -8px;

} body .wrapper .title {

 position: absolute;
 top: 50%;
 left: 50%;
 height: 100px;
 margin-top: -50px;
 width: 50%;
 margin-left: -25%;
 text-align: center;

} body .wrapper .title h1 {

 color: #30C4C9;

} body .wrapper .overlay {

 position: absolute;
 bottom: -99%;
 height: 100%;
 background: #30C4C9;
 left: 0;
 width: 100%;
 transition: all 0.5s ease;

} body .wrapper .overlay.anim {

 left: 0;
 bottom: 0;
 animation: menu-anim 1.5s 1 ease-out normal;
 width: 25%;
 transition: all 0.5s ease;

} body .wrapper .overlay.anim.reverse-anim {

 left: 0;
 bottom: 0;
 animation: menu-anim 1.5s 1 ease-out reverse;
 width: 25%;
 transition: all 0.5s ease;

} body .wrapper .overlay ul {

 width: 100%;
 text-align: center;
 margin-top: 100px;
 padding-left: 0;
 margin-left: -10px;
 font-size: 2em;
 font-weight: 800;

} body .wrapper .overlay ul li {

 margin: 10px 0;

} body .wrapper .overlay ul li a {

 text-decoration: none;
 color: white;
 position: relative;
 display: inline-block;
 padding: 10px 0;
 overflow: hidden;

} body .wrapper .overlay ul li a:after {

 display: block;
 border-radius: 2px;
 content: ;
 left: 0;
 bottom: -10px;
 height: 5px;
 background: #ffffff;
 transform: translateX(-101%);

} body .wrapper .overlay ul li a:hover {

 text-decoration: none;

} body .wrapper .overlay ul li a:hover:after {

 animation: border-anim 0.5s 1 ease normal;
 transform: translateX(0);

} body .scrolling{ height:800px; background-color:yellow; } @-webkit-keyframes border-anim {

 0% {
   transform: translateX(-100%);
 }
 100% {
   transform: translateX(0);
 }

} @-webkit-keyframes menu-anim {

 0% {
   left: 0;
   bottom: -99%;
   width: 100%;
 }
 33% {
   left: -99.5%;
   bottom: -99%;
   width: 100%;
 }
 66% {
   left: -99.5%;
   bottom: 0;
   width: 100%;
 }
 100% {
   bottom: 0;
   left: 0;
   width: 25%;
 }

}