<section>
  <div class="wrapper">
  <a href="" class="close">X</a>
  <h1>Is this annoying?</h1>
  <p>I wonder if having a pulsing button will entice people to click that little bit more.</p>
  <button>Go on, click me.</button>
</div>
  </section>

//variables

$light-grey: #434343;
$dark-grey: #212121;
$blue:#00adee;
$margin-bottom: 25px;

// body styling

html{
  height:100%;
}
body{
  display:flex;
  justify-content:center;
  align-items:center;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
  background: linear-gradient($light-grey, $dark-grey);
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

body *{
  box-sizing:border-box;
}
section{
      display: flex;
    flex: 0 500px;
}
.wrapper{
  position:relative;
  display:flex;
  flex-flow:column;
  flex:1;
  padding:40px;
  margin:15px;
  border-radius:10px;
  background:#fff;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
  transition:all 0.4s linear;
  &:hover{
    box-shadow: 0px 8px 200px rgba(0, 0, 0, 1);
  }
}

.close {
  position:absolute;
  top:-10px;
  right:-10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
  color:white;
  width:30px;
  height:30px;
  border-radius:50%;
  text-decoration:none;
  transition:all 0.4s linear;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3);
  &:hover{
    background:$blue;
  }
}

h1 {
  font-size:36px;
  font-weight:700;
  margin-bottom:$margin-bottom;
  line-height:1.2;
}
h2 {
  font-size:20px;
  font-weight:700;
  margin-bottom:$margin-bottom;
}
p{
  line-height:1.5;
  margin-bottom:$margin-bottom;
}

button {
  display:flex;
  justify-content:center;
  background:$blue;
  color:white;
  border:none;
  margin-bottom:$margin-bottom;
  padding:15px;
  font-weight:700;
  font-size:14px;
  border-radius:5px;
  transition:all 0.4s linear;
  cursor: pointer;
  &:hover{
    background:darken($blue, 20%);
  }
}

.email-capture{
  display:flex;
  button{
    padding:0px 20px;
  }
  input{
    flex:1;
    padding:0 0 0 20px;
    margin:0;
    border:none;
    height:40px;
    background:#eee;
    border-radius:2px;
  }
}

//animations

$easeOutCust:cubic-bezier(.03,.16,.39,0.99);
$easeInQuad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
$easeOutBack: cubic-bezier(0.175, 0.885, 0.320, 1.275);

$globalDelay: .8; //just so we can see what's going on even when codepen refreshes funny


@keyframes slideIn {
  from {transform:translateY(400px);}
  to {transform:translateY(0);}
}

@keyframes fadeIn {
  from {opacity:0;}
  to{ opaticy: 1;}
}

@keyframes slideDown {
from {transform: translateY(-120px);}
to {transform: translateY(0);}
}

@keyframes slideInShort {
  from {transform:translateY(80px);}
  to {transform:translateY(0);}
}

@keyframes blink {
    0% { box-shadow: 0 0 25px $blue; }
    50% { box-shadow: none; }
}

section {
  animation: 
  slideIn .65s $globalDelay+0s $easeOutBack both,
  fadeIn 0.25s $globalDelay+0s $easeInQuad both;
}

button {
animation: slideDown 0.7s $globalDelay+.35s $easeOutCust both,
  fadeIn .2s $globalDelay+.3s $easeInQuad both, blink 2.0s linear infinite;
}

h1, h2 {
  animation:
slideInShort 0.25s $globalDelay+.25s $easeOutCust both, 
fadeIn 0.1s $globalDelay+.2s $easeInQuad both;
}

p, .email-capture, .close {
animation:
slideInShort 0.25s $globalDelay+.3s $easeOutCust both, 
fadeIn 0.1s $globalDelay+.25s $easeInQuad both;
}