body {
    background: #442D1A;
  }
  


.cairo-rajhi {
  font-family: "Cairo", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  
}
  
  h1 {
      position: absolute;
      width: 100%;
  top: 0%;
      left: 0%;
  bottom: 100%;
      display: inline-block;
    color: white;
      background: black;
      font-size: 1.5vw;
      font-family: "Cairo", sans-serif;
    text-align: center;
      font-weight: bold;
  
    white-space: nowrap;
  
  }
  
  h2 {
      position: absolute;
      font-size: 6vw;
      font-weight: bold;
      padding: 10px;
      color:white;
      font-family: Sans-Serif;
      text-shadow: 2px 2px 0px rgba(150, 150, 150, 1);
      
  }
  
  .title {
    font-family: "Cairo", sans-serif;
      top: 45% !important;
      opacity: 0;
      font-size: 1vw;
      padding: 20px !important;
  }
  
  .active .title {
    font-family: cairo-rajhi;
      top: 0% !important;
      opacity: 1;
  font-size: 7em;
  }
  
  
  
  p {
      /* font-family: Sans-Serif; */
      font-family: "Cairo", sans-serif;
      text-align: center;
       line-height: 1.5;
      padding: 10px;
  color: black;
      font-size: 3.4vh;
  
  }
  
  
  #wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
  #wrap .column {
      overflow: hidden;
      position: relative;
    float: left;
    height: 100%;
    width: 16%;
  
    transition: all 0.4s cubic-bezier(0.84, 0.01, 0.19, 0.93) 0s;
  
  cursor:pointer;
  }
  
  #wrap .column > .header {
      padding-top: 10px;
  transition: all .2s ease-in-out;
      bottom: 42.5%;
      top:50%;
  -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none; 
  cursor:pointer;
  
  }
  
  #wrap .column.active {
    /* width: 70% !important; */
    width: 50% !important;
  }
  
  .hover-state {
      width: 20% !important;
      
      transition: width .3s, opacity 5s;
      opacity: 1;
  
  }
  
  .unhover {
      width: 16% !important;
    
          transition: width .3s, opacity 5s;
      opacity: 0.6;
  }
  
  .unhover.active {
      opacity: 1;
  }
  
  
  
  
  
  
  
  #wrap .column.active > .header {
      transform: scale(1.5);
      bottom: 0;
      top:85%;
   left: 30%
  }

  #wrap .col1.active > .header , #wrap .col6.active > .header{
    transform: scale(1.5);
    bottom: 0;
    top: 85%;
    left: 20%;

}
  #wrap .column.nonactive > .header {
      transform: scale(.4);
      width: 180%;
      position: absolute;
      top: 0;
      bottom: 91%;
      left: -38%;
      
  }
  
  #wrap .column.nonactive {
    width: 10% !important;
  }
  #wrap .col1 {
    background-image: url("../img/back6.jpg");
    /* background: url("https://mechanicjobs.files.wordpress.com/2013/11/carmechanicpic1.jpg"); */
      background-size: cover;
      background-repeat: no-repeat;
  }
  
  
  
  #wrap .col1:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
    /* background-image: linear-gradient(to bottom right, #ffef3d, #ff6000); */
    opacity: .6;
  }
  #wrap.col3.active .header {
          background-color: #e17320;
   
  }

  
  #wrap .col2 {
    background-image: url("../img/back5.jpg");
    /* background: url("http://www.itabc.ca/sites/default/files/welder_large.jpg"); */
      background-size: cover;
      background-position: center; 
      background-repeat: no-repeat;
  }
  #wrap .col2:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to bottom right, #7b007c, #ff99fa);
    opacity: .6;
  }
  #wrap .col3 {
    background-image: url("../img/back4.jpg");
    /* background: url("http://scrubsmag.mindovermediallc.netdna-cdn.com/wp-content/uploads/tatted.jpg"); */
      background-size: cover;
      background-position: center; 
      background-repeat: no-repeat;
  }
  #wrap .col3:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
    /* background-image: linear-gradient(to bottom right, #e8210b, #fb9735); */
    opacity: .6;
  }
  
  
  #wrap .column > .title {
      padding-top: 10px;
  transition: all .2s ease-in-out;
      bottom: 42.5%;
      top: 50%;
      
      
  }
  
  #wrap .column.active > .title {
      top:1%;
      opacity: 1;
  }
  
  #wrap .column.nonactive > .title {
          padding-top: 10px;
  transition: all .2s ease-in-out;
      bottom: 42.5%;
      top:50%;
      opacity:0;
  }
  
  .column .body-text{
      position: absolute;
      left: 100%;
      opacity: 0;
      
    -webkit-transition-delay: 0s; /* Safari */
      transition-delay: 0s;
  }
  
  .column.active  .body-text{
      position: absolute;
      opacity: 1;
      left: 0%;
    -webkit-transition-delay: .4s; 
      transition-delay: .4s;
      opacity: 1;
  
  
  
  }
  
  
  
  
  
  
  #wrap .column > .paragraph-box {
      background: rgba(255,255,255, 0);
  
      transition: all .3s cubic-bezier(0,.68,.6,1.01);
      position: absolute;
   top:20%;
      width: 100%;
      height: 0%;
  }
  
  #wrap .column.active .paragraph-box > .container {
    /* background-color: #cfcfcf; */
    display: flex;
    align-items: center;
    opacity: 1;
    /* overflow: hidden; */
}
#wrap .column .paragraph-box > .container {
    opacity: 0;
}
  #wrap .column.active > .paragraph-box {
      /* background: rgba(255,255,255,.71); */
      transition: all .3s cubic-bezier(0,.68,.6,1.01);
      position: absolute;
    top:20%;
      width: 100%;
      height: 60%;
  }
  #wrap .col4 {
    background-image: url("../img/back3.jpg");
    /* background: url("http://www.bilfinger.com/fileadmin/corporate_webseite/investor_relations/ogb/2013/_bilder/bilfinger_report_13_pretoria_06.jpg"); */
      background-size: cover;
      background-position: center; 
      background-repeat: no-repeat;
  }
  #wrap .col4:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
    /* background-image: linear-gradient(to bottom right, #95ff24, #00763d); */
    opacity: .6;
  }
  

  #wrap .col5 {
    background-image: url("../img/back2.jpg");
    /* background: url("https://mechanicjobs.files.wordpress.com/2013/11/carmechanicpic1.jpg"); */
      background-size: cover;
      background-repeat: no-repeat;
  }
  
  
  
  #wrap .col5:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
    /* background-image: linear-gradient(to bottom right, #ffef3d, #ff6000); */
    opacity: .6;
  }
  
  
  
  #wrap .col6 {
    background-image: url("../img/back1.jpg");
    /* background: url("/img/back1.jpg"); */
      background-size: cover;
      background-repeat: no-repeat;
  }
  
  
  
  #wrap .col6:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
    /* background-image: linear-gradient(to bottom right, #ffef3d, #ff6000); */
    opacity: .6;
  }