html, body{
         font-family: 'Roboto Slab', sans-serif;
         font-size: 16px;
		 line-height:16px;
      }

      h2.head-line, .line{
         text-align: center;
         font-size: 20px;
         font-weight: normal;
         margin: 10px 0 45px;
         position: relative;
         color: #4c4c4c;
      }

.titel {
	 font-family: 'Roboto Slab', serif;
    font-size: 14px;
	line-height:16px;
	margin: 0;
	padding: 0;
   color:#333333;
   -webkit-appearance: none; 
    font-weight:700;
      }
	  
      .line{
        margin: 0 0 45px;
      }

      /*  h2.head-line:after, .line:after{
         border-top: 2px solid #000000;
         content: "";
         display: block;
         height: 0;
         left: 0;
         position: absolute;
         top: 16px;
         width: 100%;
         z-index: 1;
      }  */

      .line:after{
        top: 0px;
      }

      h2.head-line span {
          background: #FFFFFF;
          padding: 0 18px;
          position: relative;
          z-index: 2;
      }

      li.project {
          background: #ECF0F4;
          float: left;
          list-style: none outside none;
          margin: 0 20px 20px 0;
      }

      li.project:nth-child(3n+3) {
          margin-right: 0;
      }

      li.project a {
          display: block;
          height: 300px;
          position: relative;
          width: 300px;
      }

      li.project a:after {
          background: none repeat scroll 0 0 rgba(133, 133, 133, 0);
          border-radius: 3px 3px 3px 3px;
          content: "";
          display: block;
          height: 100%;
          left: 0;
          position: absolute;
          top: 0;
          transition: background 180ms ease-out 0s;
          width: 100%;
          z-index: 2;
      }
      li.project a:hover:after {
          background: none repeat scroll 0 0 rgba(133, 133, 133, 0.2);
      }

      li.project a img {
          display: block;
          left: 0;
          opacity: 0;
          position: absolute;
          top: 0;
          transition: opacity 300ms linear 0s;
      }

      li.project a img.project-bg {
          border-radius: 2px;
          height: 100%;
          width: 100%;
          z-index: 1;
      }

      li.project a img.project-logo {
          z-index: 3;
          width: 100%;
          height: 100%;
      }

      li.project a img {
          opacity: 1;
      }

 /*     @media only screen and (max-width: 639px) {
         li.project {
             margin-right: 0;
         }
      }*/
      @media only screen and (min-width: 640px) and (max-width: 959px) {
         li.project {
          margin-right: 0;
         }

         li.project:nth-child(2n+1) {
             margin-right: 20px;
         }
      }

      .clear{
         clear: both;
      }

      .project-wrapper{
         text-align: center;
      }

      .group:after {
          clear: both;
          content: ".";
          display: block;
          height: 0;
          visibility: hidden;
      }

      #home-projects{
        padding-top: 50px;
      }

      ul{
        padding: 0;
      }




      /* SKILLS */

.skill-wrapper{
	positio: relative;
	top: 40px;
	 font-family: 'Roboto Slab', serif;
    font-size: 14px;
	line-height: 16px;
    min-height: 100px;
    resize: vertical;
   color:#333333;
   -webkit-appearance: none; 
    font-weight:300;
         
      }

      .skill-wrapper ul{
          list-style: none outside none;
      }

      .skill-wrapper ul li {
          float: left;
          margin-left: 20px;
          text-align: center;
          width: 300px;
      }

      .skill-wrapper ul li p, #footer-in-wrapper, #footer-in-wrapper a{
          color: #ababab;
      }

      .skill-wrapper ul li:first-child {
          margin-left: 0;
      }

      
     


     

      @media only screen and (max-width: 639px) {
        .skill-wrapper ul li {
            float: none;
            margin: 0 auto 40px;
        }
        .skill-wrapper ul li:last-child {
            margin-bottom: 0;
        }
      }

      @media only screen and (min-width: 640px) and (max-width: 980px) {
        
      }

      /* PONG */

      #canvas_colorping{
        border-radius: 3px 3px 3px 3px;
        cursor: none;
      }

      #canvas_colorping{
         position: relative;
      }

      /* FOOTER */

      .left{
        float: left;
      }

      .right{
        float: right;
      }

      #footer-in-wrapper{
        padding-top: 120px;
        padding-bottom: 30px;
        font-size: 13px;
      }


      /* MOBILE */

      #mobile-nav > div{
        /*margin-top: 70px;*/
      }

      #mobile-nav ul li a{
        font-size: 26px;
      }

      #mobile-nav ul {
          padding-top: 10px;
      }

      #mobile-nav li {
          display: inherit;
          line-height: 58px;
      }

      nav#mobile-nav {
          background: #ECF0F4;
          bottom: 0;
          right: 0;
          overflow: auto;
          position: fixed;
          top: 0;
          visibility: hidden;
          width: 0px;
          z-index: 110;
          box-shadow: 0 1px 0 #DCE3E8, 1px 1px 0 #DCE3E8, -1px 1px 0 #DCE3E8;
      }

      body.nav-open {
          overflow-x: hidden;
      }

      body.nav-open nav#mobile-nav{
        visibility: visible;
      }

      body.nav-open #slider_wrapper, body.nav-open header {
          left: -260px;
      }

      body.nav-open #content-wrapper {
          margin-left: -260px;
      }

      body.nav-open #footer-wrapper footer{
        margin-left: -260px;
      }

      body.nav-open nav#mobile-nav{
        width: 260px;
      }

      #mobile-nav-collapse{
        width: 37px;
        height: 27px;
        margin-top: 24px;
        cursor: pointer;
      }

      body.nav-open #mobile-nav-collapse{
        opacity: 0.2;
      }

      body #footer-wrapper,
      body #content-wrapper,
      body #slider_wrapper,
      body header,
      nav#mobile-nav{
        -moz-transition:    all 0.12s ease-out;  /* FF4+ */
        -o-transition:      all 0.12s ease-out;  /* Opera 10.5+ */
        -webkit-transition: all 0.12s ease-out;  /* Saf3.2+, Chrome */
        -ms-transition:     all 0.12s ease-out;  /* IE10 */
        transition:         all 0.12s ease-out; 
      }

      /*** TEAM ***/

      .team{
        text-align: center;
      }

      .team .player{
        display: inline-block;
        margin: 0 100px;
        width: 250px;
      }

      .team .player .face{
        width: 250px;
        height: 250px;
        background: #ECF0F4;
        border-radius: 50%;
      }

      /*** FORM ***/

      input:focus,
      select:focus,
      textarea:focus,
      button:focus{
          outline: none;
      }