<!-- 
     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;
			}
		}
	}
}