<section class="container">   
  <div class="column column__background column--active" data-column-item>
    <h1 class="column-heading">About</h1> 
      <div class="column-inner">      
        <p>Apple pie candy canes pudding icing icing jelly beans chocolate. Jelly cotton candy oat cake cotton candy tootsie roll. Marzipan oat cake jujubes chocolate cake jelly wafer liquorice bear claw danish. Candy dessert sugar plum cotton candy gingerbread. Gingerbread tootsie roll dragée dessert caramels. Toffee chocolate topping macaroon sugar plum donut.</p>
      </div>   
  </div>    
  <div class="column column__background" data-column-item>
       <h1 class="column-heading">Portfolio</h1>  
       <div class="column-inner">     
         <p>Tart candy oat cake. Ice cream liquorice oat cake jelly beans wafer sweet. Oat cake chocolate icing. Chocolate cake marzipan pudding. Topping sesame snaps sweet roll lemon drops chupa chups. Pie macaroon lemon drops topping cheesecake muffin gummies caramels wafer. Fruitcake topping topping caramels. Liquorice pudding donut marzipan.</p>
       </div> 
  </div>
  <div class="column column__background" data-column-item>
      <h1 class="column-heading">Resume</h1>  
      <div class="column-inner">   
        <p>Topping pudding croissant cupcake cake cookie lemon drops chocolate bar gingerbread. Donut lemon drops gummies danish. Jelly-o danish croissant wafer soufflé. Biscuit bonbon candy canes brownie marshmallow. Cupcake croissant chupa chups sweet caramels chocolate powder cake. Bear claw lemon drops chocolate cake sweet roll donut toffee. Cupcake sweet roll chocolate jujubes biscuit marzipan cheesecake. Topping sweet candy canes macaroon liquorice chocolate bar.</p>
      </div> 
  </div>
</section>   

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600');

$plain: #FFFFFF;
$bright: #0083ff;
$overlay: rgba(3, 1, 1, 0.39);
$touch: transparent;

html, 
body {
  height: 100%;
}

html {
  font-size: 10px;
  
  @media (max-width: 991px) {
    font-size: calc(5px + .4vw);
  }
  
  @media (max-width: 768px) {
    font-size: calc(6px + .4vw);
  }
}

body {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
}

h1 {
  color: $plain;
  font-size: 3rem;
  font-weight: 400;
}

p {
  line-height: 1.4;
  letter-spacing: 1.2px;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  
  @media only screen and (min-width: 768px) { 
    flex-direction: row;
  }
}

.column {
  flex-basis: 100%;
  padding: 2rem;
  flex: 1;
  transition: flex 0.4s linear;
  
  .column-inner {
    visibility: hidden;
  }
}

.column__background {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    
    &:after {
      content: '';
      background: $overlay; 
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
  
  &.column--active { 
    &:after {
      background-color: transparent;
    }
  }
  
  &:hover {
      cursor: pointer;
      
      &:after {
        background: $touch;
      }
  }  
    
 }

.column--active {
  flex: 100%;
  
  .column-inner {
    background: #000000;
    color: $plain;
    font-size: 1.6rem;
    visibility: visible;
    transition: visibility 0.5s linear  0.3s;
    max-width: 100%;
    padding: 20px;
    
    @media only screen and (min-width: 768px) { 
      width: 70%;
    }
  }
  
  &:hover {
    cursor: initial;
  }
}

.column-heading {
  padding: 0 20px;
}

var cards = document.querySelectorAll("[data-column-item]"); 

var images = ['https://images.pexels.com/photos/38278/tiger-head-wildlife-animal-38278.jpeg', 'https://images.pexels.com/photos/219943/pexels-photo-219943.jpeg', 'https://images.pexels.com/photos/1106452/pexels-photo-1106452.jpeg', 'https://images.pexels.com/photos/1238248/pexels-photo-1238248.jpeg', 'https://images.pexels.com/photos/148182/pexels-photo-148182.jpeg', 'https://images.pexels.com/photos/50988/ape-berber-monkeys-mammal-affchen-50988.jpeg', 'https://images.pexels.com/photos/53261/pexels-photo-53261.jpeg',  'https://images.pexels.com/photos/213399/pexels-photo-213399.jpeg'];

function onlyUnique(value, index, self) { 
    return self.indexOf(value) === index;
}

var real = images.filter( onlyUnique );

if(cards !== null) {
  for (i = 0; i < cards.length; i++) {
    var card = cards[i];
    
    var set = Math.floor(Math.random() * real.length);
    var random = real.splice(set, 1)[0];
    
    card.style.backgroundImage = "url('" + random + "')";
    
  } 
 
  for (var i = 0; i < cards.length; i++) {
    cards[i].addEventListener("click", function() {
      var current = document.getElementsByClassName("column--active");
      if (current.length > 0) { 
        current[0].className = current[0].className.replace(" column--active", "");
      }
      this.className += " column--active";
    });
  }
}