@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200,700,300);
@import url(https://fonts.googleapis.com/css?family=Roboto+Mono:400,100,400italic,500,300italic,500italic,700,700italic,300,100italic);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300,100);
  * {
  	margin: 0;
  	padding: 0;
  	box-sizing: border-box;
  }
      body {
      	background:white;
        font-size: 16px;/*1 rem*/
        font-family: 'Yanone Kaffeesatz', sans-serif;
        font-weight: 400;
      }
      /* Start container */
        .container {
          max-width: 1024 px;
          max-height:900 px;
          padding-top: 20%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        hr{
          color: black;
          width: 320px;
          margin: 20px;
          border-style:solid;
          border-color:black;
        }
         ul {
           margin-top:10px;
           display:flex;
           flex-direction:row;
           align-items: center;
           justify-content: center;

         }
         a{
           text-decoration: none;
           font-size: 20px;/*1 rem*/
           font-family: 'roboto', sans-serif;
           font-weight: 200;
           color: black;
         }
         a:hover {
         color: black;
         font-size: 20px;/*1 rem*/
         font-family: 'roboto', sans-serif;
         font-weight: 400;
         }
         li {
           float:center;
           list-style:none;
           margin: 20px;
         }
         img {
         width: 320px;
         }

        /*----- Start Responsive -----*/

      @media screen and (max-width: 600px) {
        .container {
          max-width: 1024 px;
          max-height:900 px;
          padding-top: 40%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }

        hr{
          color: black;
          width: 260px;
          margin: 20px;
          border-style:solid;
          border-color:black;
        }

         ul {
           margin-top:10px;
           display:flex;
           flex-direction:column;
           align-items: center;
           justify-content: center;

         }
         a{
           text-decoration: none;
           font-size:18px;
           font-family: 'roboto', sans-serif;
           font-weight: 200;
           color: black;
         }
         a:hover {
         color: black;
         font-size: 18px;
         font-family: 'roboto', sans-serif;
         font-weight: 400;
         }

         li {
           float:center;
           list-style:none;
           margin: 20px;
         }

         img {
         width: 180px;
         }
        }