body {
  font-family: Ubuntu, Helvetica, sans-serif;
}

#wrapper {
  text-align: center;
}

#top {
  margin-top: 40px;
}

#top #logo-text {
  font-size: 12px;
  font-family: 'Open Sans', Ubuntu, Helvetica, sans-serif;
}

h1 {
  font-family: 'Raleway', Ubuntu, Helvetica, sans-serif;
  font-size: 32px;
  color: #4272AB;
  margin-top: 50px;
  margin-bottom: 5px;
}

p.title {
  font-family: 'Raleway', Ubuntu, Helvetica, sans-serif;
  font-size: 22px;
  color: #4272AB;
}

p.subtitle {
  font-family: 'Raleway', Ubuntu, Helvetica, sans-serif;
  font-size: 18px;
  color: #4272AB;
}

#text {
  max-width: 500px;
  margin: 0 auto;
  margin-bottom: 30px;
  padding: 0 15px;
  font-family: 'Open Sans', Ubuntu, Helvetica, sans-serif;
}

.nav {
  font-size: 18px;
}

.nav > div {
  display: inline-block;
}

.nav > div:not(:last-child) {
  margin-right: 15px;
}

.nav a,
.nav span {
  padding: 0 10px;
  border: 1px solid #5581B5;
  border-radius: 3px;
}

#cartoon img {
  transition: all .2s linear; 
  -o-transition: all .2s linear; 
  -moz-transition: all .2s linear; 
  -webkit-transition: all .2s linear;

  border: 1px solid #CCCCCC;
}

@media (max-width: 500px) {
  #cartoon img {
    width: 400px;
    height: 400px;
  }  
}

#social {
  margin-bottom: 10px;
  line-height: 20px;
}

#social > div:not(:last-child) {
  margin-right: 10px;
}

#social .social {
  display: inline-block;
  vertical-align: top;
}

#social #facebook {
}

#social #download {
  margin-right: 3px;
}

#email-form {
  margin-top: 10px;
  margin-bottom: 30px;
  display: none;

  background-color: rgb(222, 222, 222);
  padding: 20px 0;
}

#email-form p {
  margin-bottom: 20px;
}

#email-form #email-form-text {
  width: 50px;
  text-align: center;
  display: inline-block;
  font-size: 14px;
}

#email-form #email-form-email {
  display: inline-block;
}

#email-form #email-form-email input[name="email"] {
  width: 200px;
}

#email-form #email-form-submit {
  display: inline-block;
}

#email-form #email-form-error {
  color: red;
  display: none;
}

#email-form #email-form-success {
  color: green;
  display: none;
}

#share {
  margin-top: 40px;
}

#share .share-text {
  width: 200px;
  text-align: center;
  display: inline-block;
  font-size: 14px;
}

#share .share-url {
  display: inline-block;
}

#share .share-url input {
  width: 275px;
  border: 1px solid gray;
}

#subscribe {
  margin-top: 50px;
}

#subscribe-body {
  margin-top: 15px;
}

#subscribe input[name="email"] {
  width: 240px;
  border: 1px solid #78ACE8;
  font-size: 16px;
  padding: 3px;
  border-radius: 2px;
  color: #2E527B;
}

#subscribe #subscribe-error {
  color: red;
  display: none;
}

#subscribe #subscribe-success {
  color: green;
  display: none;
}

#subscribe-rss {
  font-size: 14px;
  margin-top: 15px;
}

#follow-on-twitter {
  margin-top: 50px;
}

#follow-on-twitter-body {
  margin-top: 15px;
}

#follow-on-pinterest {
  margin-top: 50px;
}

#follow-on-pinterest-body {
  margin-top: 15px;
}

#cartoon-formats {
  margin-top: 50px;
}

#cartoon-formats-body {
  margin-top: 15px;
}

#cartoon-download {
  margin-top: 50px;
}

#cartoon-download-body {
  margin-top: 15px;
}

#random-cartoons {
  margin-top: 50px;
}

#random-cartoons-body {
  margin-top: 10px;
}

#random-cartoons-body2 {
  margin-top: 10px;
}

#random-cartoon {
  display: inline-block;
  vertical-align: top;
}

#random-cartoon:not(:last-child) {
  margin-right: 10px;
}

#random-cartoon img {
  border: 1px solid #CCCCCC;
}

#random-cartoons-body2 select {
  font-size: 16px;
  padding: 2px;
  color: #2E527B;
}

#random-cartoons-body2 .random-archive {
  margin-top: 10px;
}

#licence {
  margin: 0 auto;
  margin-top: 50px;
  padding: 0 15px;
  max-width: 500px;
  font-size: 14px;
}

#licence-body {
  margin-top: 15px;
}

#footer {
  font-family: 'Open Sans', Ubuntu, Helvetica, sans-serif;
  margin-top: 70px;
  margin-bottom: 40px;
  font-size: 12px;
}

#footer-text {
  max-width: 500px;
  margin: 0 auto;
  margin-top: 10px;
  padding: 0 15px;
}

#footer-contact {
  max-width: 500px;
  margin: 0 auto;
  margin-top: 10px;
  padding: 0 15px;
}

#footer-discount {
  max-width: 500px;
  margin: 0 auto;
  margin-top: 10px;
  padding: 0 15px;
  color: #C8C8C8;
}

#footer-discount code {
  font-size: 14px;
  color: #ECC6C1;
}

#footer-copyright {
  margin-top: 20px;
  color: #1987f5;
  font-style: italic;
}

