<div class="container">
  <div class="row">
    <div class="col-md-12">
        <center>
          <h1>Our services</h1>    
        </center>
    </div>
  </div>
  <div class="row">
    
    <div class="col-md-3">
      <div class="box">
        <div class="content">
          <img src="https://www.e-bureauet.dk/media/1062/competency-cms.svg" alt="">
          <br>
          <p>Platform</p>
        </div>
        <div class="content-hover">
            <h1>Platform</h1>
            <p>We are specialised in different CMS platforms so we can offer the best advice for our clients</p>
        </div>
      </div>
    </div>
    
    <div class="col-md-3">
      <div class="box">
        <div class="content">
          <img src="https://www.e-bureauet.dk/media/1065/competency-webshop.svg" alt="">
          <br>
          <p>Platform</p>
        </div>
        <div class="content-hover2">
            <h1>E ECOMMERCE</h1>
            <p>We are specialised in different CMS platforms so we can offer the best advice for our clients</p>
        </div>
      </div>
    </div>
    
    <div class="col-md-3">
      <div class="box">
        <div class="content">
          <img src="https://www.e-bureauet.dk/media/1063/competency-integration.svg" alt="">
          <br>
          <p>INTEGRATION</p>
        </div>
        <div class="content-hover">
            <h1>Platform</h1>
            <p>We are specialised in different CMS platforms so we can offer the best advice for our clients</p>
        </div>
      </div>
    </div>
    
    <div class="col-md-3">
      <div class="box">
        <div class="content">
          <img src="https://www.e-bureauet.dk/media/1062/competency-cms.svg" alt="">
          <br>
          <p>Platform</p>
        </div>
        <div class="content-hover2">
            <h1>Platform</h1>
            <p>We are specialised in different CMS platforms so we can offer the best advice for our clients</p>
        </div>
      </div>
    </div>
    
  </div>
  
  <div class="row">
    <div class="col-md-12">
        <center>
          <h1>Our cases</h1>    
        </center>
    </div>
  </div>
  
  <div class="row">
      <div class="col-md-4">
          <div class="box2" style="background-image:url('https://www.e-bureauet.dk/media/1351/case-hjv.jpg');">
              <div class="hover">
                <h1>Hjemmeværnet</h1>
                <p>The site is based on parallax ribbons 
and is fully responsive.</p>
            </div>
          </div>
      </div>
    
    <div class="col-md-4">
          <div class="box2" style="background-image:url('https://www.e-bureauet.dk/media/1351/case-hjv.jpg');">
              <div class="hover">
                <h1>Hjemmeværnet</h1>
                <p>The site is based on parallax ribbons 
and is fully responsive.</p>
            </div>
          </div>
      </div>
    
    <div class="col-md-4">
          <div class="box2" style="background-image:url('https://www.e-bureauet.dk/media/1351/case-hjv.jpg');">
              <div class="hover">
                <h1>Hjemmeværnet</h1>
                <p>The site is based on parallax ribbons 
and is fully responsive.</p>
            </div>
          </div>
      </div>
  </div>
  
  <div class="row">
    <div class="col-md-12">
        <center>
          <h1>Technologies</h1>    
        </center>
    </div>
  </div>
  <div class="row">
    
    <div class="col-md-3">
      <div class="box-tech">
        <div class="content">
          <center><img src="https://www.e-bureauet.dk/media/1360/icon-dynamicweb.png" alt=""></center>
          <p>DYNAMICWEB</p>
          <div class="desc">
            <center><div class="line"></div></center>
            <p>Out-of-the box CMS, E-commerce, PIM and Marketing platform.</p>
          </div>
        </div>
      </div>
    </div>
    
    <div class="col-md-3">
      <div class="box-tech">
        <div class="content">
          <center><img src="https://www.e-bureauet.dk/media/1357/icon-sitecore.png" alt=""></center>
          <p>SITECORE</p>
          <div class="desc">
            <center><div class="line"></div></center>
            <p>Out-of-the box CMS, E-commerce, PIM and Marketing platform.</p>
          </div>
        </div>
      </div>
    </div>
    
    <div class="col-md-3">
      <div class="box-tech">
        <div class="content">
          <center><img src="https://www.e-bureauet.dk/media/1358/icon-umbraco.png" alt=""></center>
          <p>UMBRACO</p>
          <div class="desc">
            <center><div class="line"></div></center>
            <p>Out-of-the box CMS, E-commerce, PIM and Marketing platform.</p>
          </div>
        </div>
      </div>
    </div>
    
    <div class="col-md-3">
      <div class="box-tech">
        <div class="content">
          <center><img src="https://www.e-bureauet.dk/media/1300/icon-abobe-captivate.png" alt=""></center>
          <p>ADOBE CAPTIVATE</p>
          <div class="desc">
            <center><div class="line"></div></center>
            <p>Adobe Captivate is one of the leading eLearning authoring tools.</p>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</div>

@import url("https://fonts.googleapis.com/css?family=Patua+One");

body {
  text-align: center;

  .container {
    padding-top: 1%;

    padding-bottom: 4%;
  }

  h1 {
    margin-top: 4%;
    margin-bottom: 4%;
    font-family: "Patua One", cursive;
  }

  .box2 {
    max-height: 350px;
    height: 350px;
    background-color: #eeeeee;
    background-size: cover;
    background-position: center center;
    transition: all 0.5s ease-in-out;
    display: flex;
    align-content: center;
    justify-content: center;

    .hover {
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      opacity: 0;
      display: flex;
      justify-content: center;
      flex-flow: column;
      transition: all 0.5s ease-in-out;
      padding: 2em 2em;

      h1 {
        color: #ffffff;
        font-size: 1.8em;
        text-transform: uppercase;
        font-family: "Patua One", cursive;
      }

      p {
        color: #ffffff;
      }
    }

    &:hover {
      filter: grayscale(100%);
      .hover {
        opacity: 1;
        cursor: pointer;
      }
    }
  }

  .box {
    position: relative;
    max-height: 255px;
    height: 255px;
    background-color: #eeeeee;
    display: flex;
    align-content: center;
    justify-content: center;
    overflow: hidden;

    .content-hover2 {
      transform: scale(0, 0);
      position: absolute;
      height: 100%;
      width: 100%;
      background-color: #d32222;
      // box-shadow: inset 0 0 0 15px #C01E1E;
      transition: all 0.2s ease-in-out;
      display: flex;
      justify-content: center;
      flex-flow: column;
      padding: 2em 2em;

      h1 {
        color: #ffffff;
        font-size: 1.5em;
        text-transform: uppercase;
        font-family: "Patua One", cursive;
        font-style: italic;
      }

      p {
        color: #ffffff;
      }
    }

    .content-hover {
      transform: scale(0, 0);
      position: absolute;
      height: 100%;
      width: 100%;
      background-color: #252525;
      // box-shadow: inset 0 0 0 15px #1B1B1B;
      transition: all 0.2s ease-in-out;
      display: flex;
      justify-content: center;
      flex-flow: column;
      padding: 2em 2em;

      h1 {
        color: #ffffff;
        font-size: 1.5em;
        text-transform: uppercase;
        font-family: "Patua One", cursive;
        font-style: italic;
      }

      p {
        color: #ffffff;
      }
    }

    .content {
      display: flex;
      justify-content: center;
      flex-flow: column;

      img {
        width: 160px;
      }

      p {
        font-size: 1.2em;
        font-weight: 600;
        text-transform: uppercase;
        margin-top: -2em;
      }
    }

    &:hover >  {
      .content-hover,
      .content-hover2 {
        transform: scale(1, 1);
        cursor: pointer;
      }
    }
  }
  
  .box-tech {
    position: relative;
    max-height: 255px;
    height: 255px;
    background-color: #eeeeee;
    display: flex;
    align-content: center;
    justify-content: center;
    overflow: hidden;
    padding:2em;
    
    .content {
      
        display: flex;
        align-content: center;
        justify-content: center;
        flex-flow: column;
        padding-top:5em;
      transition:all 0.2s ease-in-out;

      img {
        width: 140px;
        transition:all 0.2s ease-in-out;
        filter: grayscale(100%) brightness(75%);
      }

      p {
        font-size: 1.2em;
        font-weight: 700;
        color:#8E8E8E;
        text-transform: uppercase;
        margin-top: 0em;
        transition:all 0.2s ease-in-out;
      }
      
      .desc {
         transform: scale(0,0);
         transition:all 0.2s ease-in-out;
        
        .line {
           border-top:1px solid #000000;
            width:0px;
          margin-top:0em;
          margin-bottom:1em;
          
          transition:all 0.2s ease-in-out;
        }
         p {
          font-size: 1em !important;
          font-weight: 600;
          text-transform: none;
          margin-top: 0em;
        }
      }
    }
    
    &:hover {
      .content {
        padding-top:0em;
        cursor:pointer;
        
        img {
          width: 60px;
          filter: none;
        }
        
        p {
          color:#111111;
        }
        
        .desc {
          display: block !important;
          transform: scale(1,1);
          
          .line {
            width:50px;  
          }
          
        }
      }
    }
  }
}