body {
    background: #1e1e1e;
  }

  @font-face {
    font-family: HelveticaNeueLT;
    src: url(/Fonts/HelveticaNeueLTW01-55Roman.woff);
  }

  body,
  body > * {
    margin: 0;
    padding: 0;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:normal;
  }

 
  * {
    transition: all .3s ease 0s;
  }
  
  
  /* Background colours */
  
  div article:nth-child(1) {
    background: #e8e8e8;
  
  }
  
div article:nth-child(2) {
    background:  #e8e8e8;
   
  }
  
  div article:nth-child(3) {
    background:  #e8e8e8;
    
  }
  
div article:nth-child(4) {
    background:  #e8e8e8;
    
  }
  
 div article:nth-child(5) {
    background:  #e8e8e8;
   
  }
  div article:nth-child(6) {
    background:  #e8e8e8;

  }
  div article:nth-child(7) {
    background:  #e8e8e8;
    
  }
  /* Main layout */
  
  html,
  body {
    width: 100vw;
    height: 100vh;
    justify-content: center;
    display: flex;
  }
  
  .main {
    margin-top: 20px;
    width: 1440px;
    height: 90vh;

    list-style: none;
    position:relative;

    display:flex;
    flex-direction:row;
    flex-wrap: nowrap;
    align-items:stretch;
    overflow:hidden;
	  cursor:pointer;

  }
  
  
  /* Articles */
  
  div article {
    flex:content;
    width: 10%;
    height: 90vh;
    
    padding: 100px 0;
    margin:5px;
    position:relative;

    color: rgb(11, 11, 11);

    text-decoration: none;
    vertical-align: bottom;
    box-sizing: border-box;

    border-radius: 20px;
	  
	  cursor:pointer;
  }
  
  div img {
    width: 100px;
  }

  /* Big Headings */
  
  body > div:first-child {

    width: 1440px;
    position:relative;
    height: 90vh;

    background:#1e1e1e;
    text-align: center;

    padding: 10px;
	  cursor:pointer;

  }
  
  /*
  body > div:first-child h2 {
   
  }
  */
  
  
  /* Hover interaction */

  
  div:hover article {
    flex:auto;
    width: 10%;
  }
  
   div article:hover {
    width: 30%;
    height: 90vh;
    background: #EB8C00;

  }

  article > div {
    opacity: 0;
    transition: opacity .2s ease 0;
   
  }
  
 div article:hover > div {
    opacity: 1;
    transition: opacity .3s ease .3s;
 
  }
  

  /* navigation */
  div article h2 {
    position: absolute;
    width: 100%;
    height: auto;
    margin: 0;

    bottom: 30%;
   
    text-align:left;

    font-size: 3vh;
    transform: rotate(-90deg);

  }
 

  
  /* Article layouts */
  
  article div {
    text-align: left;
    width: 90%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  
  }
  
  article div p,
  article div h2,
  article div h3 {
    width: 100%;
    margin: 10px auto;
  }
  
  h1,
  h2,
  h3 {
	  font-family:Arial, Helvetica, sans-serif;
    font-weight:normal;
    text-transform: uppercase;
  }
  
  article div p {
    width: 100%;
    height: 100%; 
    font-size: 16px;
	  font-family:Arial, Helvetica, sans-serif;
    font-weight:normal;
  }



  /*
  @media (max-width: 900px) {
   div article {
      padding: 2vh 3vw;
    }
    div article > h2 {
      transform: rotate(90deg);
      bottom: 23vh;
      min-width: 12em;
      text-align: left;
      transform: rotate(-90deg);
      transform-origin: 0 0 0;
      opacity: 1;
    }
   div article:hover > h2 {
      opacity: 0;
    }
    article div p {
      width: 50vw;
    }
    article div {
      max-height: calc(72%);
      overflow-y: auto;
    }
  }
  */


  @media only screen and (max-width: 1000px) {
    div img {
        width: 60px;
      }

  
  }


  @media only screen and (max-width: 896px) {
    div img {
        width: 60px;
      }

      div article h2 {
     
        bottom: 140px;
        font-size: 20px;
    
      }
      article div p,
      article div h3 {
        font-size: 14px;
      }


  div article {
    padding: 20px 0;
  }

  .main {
    margin-top: 0px;
  }
  
  }