@import url('http://fonts.googleapis.com/css?family=Nunito');
*{
  box-sizing: border-box;
}
body{
  margin:0;
  font-family: Nunito;
}
.container{
  width:100%;
  height:100vh;
  background-color: #e3e3e3;
  display:flex;
}
.card{
  width: 25%;
  height:100vh;
  background-color:#a0a0a0;
  background-position:center;
  transition: width 0.5s ease, border 0.5s;
  cursor:pointer;
  &:nth-child(2n){
    background-color: #a5a5a5;
  }
  &:first-of-type{
    background-image: url(http://hiresstock.com/wp-content/uploads/2014/11/Living-Room-In-A-Hotel-Room-3.jpg);
    .cover{
      background-color: rgba(200,150,80,0.6);
    }
  }
  &:nth-of-type(2){
    background-image: url(http://hiresstock.com/wp-content/uploads/2014/12/Various-Kinds-Of-Cake-11.jpg);
    .cover{
      background-color: rgba(20,250,180,0.5);
    }
  }
  &:nth-of-type(3){
    background-image: url(http://hiresstock.com/wp-content/uploads/2014/08/Free-Photo-Stock-Any-Kind-of-Food-113.jpg);
    .cover{
      background-color: rgba(255,150,0,0.5);
    }
  }
  &:last-of-type{
    background-image: url(http://hiresstock.com/wp-content/uploads/2014/10/Hotel-And-Garden-2.jpg);
    .cover{
      background-color: rgba(0,250,0,0.4);
    }
  }
  &:hover{
    width:40%;
  } 
  &.open{
    width: 90%;
    top: 0 !important;
    left: 0 !important;
    z-index: 5;
    cursor: default;
    &:first-of-type{
      border: 5px solid rgba(200,150,80,1);
    }
    &:nth-of-type(2){
      border: 5px solid rgba(20,250,180,1);
    }
    &:nth-of-type(3){
      border: 5px solid rgba(255,150,0,1);;
    }
    &:nth-of-type(4){
      border: 5px solid rgba(0,250,0,1);
    }
    .info{
      top: -95%;
      right:-2%;
      opacity:1;
      padding: 0 15px;
      z-index:10;
      h2{
        top:-10px;
      }
    }
    
  }
}
.cover{
  color: #FFF;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  position:relative;
  width:100%;
  height:100vh;
  padding:0;
  transition: all 0.25s;
  h2{
    position:absolute;
    bottom:0;
    margin-left:25px;
  }
}
.info{
  position:relative;
  color: #fff;
  font-size:1.5em;
  text-shadow:0 1px 2px rgba(0,0,0,0.4);
  transition: all 1s ease 1s;
  opacity:0;
  span{
    cursor:pointer;
    color: #a3a3a3;
    transition: 0.25s ease;
    &:hover{
      color: #efefef;
    }
  }
}