<!-- 
     Excited Atom 

     inspired by https://dribbble.com/shots/320237-Excited-Atom?list=users&offset=52
     made by: Rob
     website: http://www.cssgalleries.com
-->
<h1>Excited Atom </h1>
        <p>
                Pure CSS by <a target="blank_" href="http://lloveras.info">Rob</a>
            <br> Inspired by <a target="blank_" class="dribbble" href="https://dribbble.com/shots/320237-Excited-Atom?list=users&offset=52">Ty Wilkins</a> 
        </p>

<div class="simple">
      <div class="bar bar-1"></div>
      <div class="bar bar-2"></div>
      <div class="bar bar-3"></div>
  </div>

body{
  font-family: 'Lato', sans-serif;
  font-size: 100%;
}
h1 {
        font-size: 25px;
        text-align: center;
        font-weight: 300;
        color: #000;
        margin: 0 0 10px;
    }
    p {
        text-align: center;
        font-size: 18px;
        margin: 0 0  70px 0;
        color: #afafaf;
    }
    
    a {
        text-decoration: none;
        color: #000;
        &.dribbble {
            color: #000;
        }
        &:hover {
            text-decoration: underline;
        }
    }
    
@mixin abscenter ($oldBrowser:false){
  @if($oldBrowser){
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;

  }@else{
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
  }

}

.simple{
  background-color: #fff;
  @include abscenter();

  width: 400px;
  height: 300px;
  .bar{
    
    height: 170px;
    border: 18px solid #434345;
    padding: 10px;
    @include abscenter();
    border-radius: 38px;
    transition: all 1s ease 0s;
    background-color: #fff;
    &-1{
      border-color: #F26144;
      left: 183px;
      top: 157px;
    }
    &-2{
      border-color: #2FBEE8;
      left: 156px;
      top: 43px;
      transform: rotate(-61deg);
    }
    &-3{
      left: 156px;
      top: 43px;
      transform: rotate(61deg);
      box-shadow: 12px 0 5px 3px rgba(0, 0, 0, 0.30);
      border-radius: 0 0 38px 38px;
      background-color: rgba(255,255,255,.7);
      &:after{
        content: "";
        position:absolute;
        top: -48px;
        left: 0;
        width: 18px;
        height: 77px;
        background-color: #434345;
        transform: rotate(89deg);
      }
      &:before{
        background-color: transparent;
        border-radius: 50%;
        box-shadow: 32px -11px 0 9px #D3D3D3, -5px -32px 0 1px #D3D3D3;
        content: "";
        height: 20px;
        left: -34px;
        position: absolute;
        top: -50px;
        width: 20px;
      }
    }
  }
}