body { background-color: #f0eeec; padding: 0; margin: 0; font-family: Helvetica, Arial, sans-serif; }

#top { height: 20px; width: 100%; xbackground-color: #e0dddb; }

#teaser-wrapper { padding-top: 40px; text-align: center; width: 85%; margin-left: auto; margin-right: auto; }

h1 { font-size: 28px; color: #a4b15e; }

.domain { color: #fd704c; }

#main { width: 75%; max-width: 960px; margin-left: auto; margin-right: auto; font-size: 22px; margin-bottom: 20px; }

button {
    font-size: 14px; 
    color: white; 
    display: block; 
    text-align: center; 
    cursor: pointer; 
    vertical-align: middle; 
    padding: 0.5rem 0; 
    background-color: #a7bb45; 
    border-radius: 3px;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
    height: 40px;
    width: 240px;
    margin-left: auto;
    margin-right: auto;
}
button:hover {box-shadow: none;}

#benefit { margin-left: auto; margin-right: auto; width: 410px; margin-top: 20px; }
#benefit-img-wrapper { width: 200px; height: 173px; display: inline-block; vertical-align: middle; }
#benefit-msg { width: 200px; display: inline-block; vertical-align: middle; font-size: 20px; }

@media screen and (max-width: 420px)
{
  #top { height: 0px; }
  #benefit { margin-left: auto; margin-right: auto; width: 308px; margin-top: 20px; }
  #benefit-img-wrapper { width: 150px; height: 130px; display: inline-block; vertical-align: middle; }
  #benefit-img { width: 150px; height: 130px;  }
  #benefit-msg { width: 150px; display: inline-block; vertical-align: middle; font-size: 16px; }
}


.exiting {
  -webkit-animation: exiting 300ms ease-in;
  animation: exiting 300ms ease-in;
}

@-webkit-keyframes exiting { 
  0% { opacity: 1;}
  100% { opacity: 0;}
}

@keyframes exiting { 
  0% { opacity: 1;}
  100% { opacity: 0;}
}

.entering {
  -webkit-animation: entering 300ms ease-out;
  animation: entering 300ms ease-out;
}

@-webkit-keyframes entering { 
  0% { opacity: 0;}
  100% { opacity: 1;}
}

@keyframes entering { 
  0% { opacity: 0;}
  100% { opacity: 1;}
}