
/* Backgrounds */
  .container-404-1a {
    background-color: #ed8b00
  }
  .container-404-1b {
    background-color: #eeeeee
  }
  .container-404-2a {
    background-color: #ffcd00
  }
  .container-404-2b{
    background-color: #cdd600
  }
  .container-404-3{
    background-color: #cdd600
  }
  .container-404-4 {
    background-color: #97999b
  }
/* images */
.page404 .img.p1a,
.page404 .img.p1b {
  margin-top: 5.625em;
  width: 100%;
}
.page404 .img.p2a,
.page404 .img.p2b {
  margin-top: 2.1875em;
  margin-bottom: 6.5625em;
}
.page404 .img.p3 {
  margin-top: 0.9375em;
  margin-bottom: 3.125em;
}
.page404 .img.p4 {
  position: absolute;
  top: 2.125em;
  right: 3.125em;
  z-index: -1;
}
/* titles */
.page404 .title.p1b,
.page404 .title.p1a {
  margin-top: 7.8125em;
}
.page404 .title.p2a,
.page404 .title.p2b {
  margin-top: 7.1875em;
}
.page404 .title.p4{
  margin-top: 8.4375em;
  margin-bottom: 0.625em;
}
/* texts */
.page404 .text.p1a,
.page404 .text.p1b,
.page404 .text.p2a,
.page404 .text.p2b,
.page404 .text.p3,
.page404 .text.p4 {
  font-size: 2em;
  line-height: 1.1em;
  margin-top: 1.875em;
}
.page404 .text.p1a,
.page404 .text.p1b {
  margin-bottom: 5.625em;
}
.page404 .text.p1a,
.page404 .text.p4 {
  color: #fff;
}
.page404 .text.p1b {
  color: #002d71
}
.page404 .text.p2a {
  color: #000
}
.page404 .text.p2b {
  color: #53565a
}
.page404 .text.p2b,
.page404 .text.p3 {
  color: #53565a;
}
.page404 .text.p3 {
  margin-top: 0;
}
/* buttons */
.page404 .buttons.p1a,
.page404 .buttons.p1b {
  margin: 4.375em 0 0;
  margin-bottom: 5.625em;
}
.page404 .buttons.p2a,
.page404 .buttons.p2b {
  margin: 4.375em 0 0;
}
.page404 .buttons.p3 {
  margin: 1.875em 0 4.25em;
}
.page404 .buttons.p4 {
  margin-top: 4.6875em;
  margin-bottom: 7.75em;
}
.btn-404:first-child {
  margin-right: 1.875em;
}
.btn-404 {
  border-radius: 0.3125em;
  font-size: 1.5em;
  width: 11.25em;
}
.btn-404.p1a,
.btn-404.p2b,
.btn-404.p3,
.btn-404.p4 {
  background-color: #eee;
  color: #008ce6;
}
.btn-404.p1b {
  background: #002d71;
  color: #fff;
}
.btn-404.p2a {
  background: #eee;
  color: #008ce6;
}



/* Extra small devices (portrait phones, less than 576px) */
/* No media query since this is the default in Bootstrap */
@media (max-width: 575px) {
  .page404 .img.p1a, .page404 .img.p1b{
    margin-top: 0.625em;
  }
  .page404 .img.p2a, .page404 .img.p2b {
    margin-top: 2.1875em;
    margin-bottom: 6.5625em;
    width: 100%;
  }
  .page404 .img.p3 {
    width:100%;
  }
  .page404 .title.p1b, .page404 .title.p1a{
    margin-top: 2.8125em;
  }
  .page404 .title.p2a, .page404 .title.p2b {
    margin-top:0;
  }
  .page404 .text.p1a, .page404 .text.p1b, .page404 .text.p2a, .page404 .text.p2b, .page404 .text.p3, .page404 .text.p4{
    margin-top: 0.875em;
  }
  .page404 .text.p1a, .page404 .text.p1b {
    margin-bottom: 0;
  }
  .page404 .buttons.p1a, .page404 .buttons.p1b {
    margin: 2.375em 0 0.625em 0;
  }
  .btn-404:first-child{
    margin-bottom: 1em;
  }
}


  /* Small devices (landscape phones, 576px and up) */
  @media (min-width: 576px) and (max-width: 767px) {
  .page404 .img.p1a,
  .page404 .img.p1b {
    margin-top: 1.875em;
  }
  .page404 .img.p2a, .page404 .img.p2b {
    margin-top: 0;
    margin-bottom: 4em;
  }
  .page404 .img.p3 {
    width: 100%;
  }
  .page404 .title.p1b,
  .page404 .title.p1a{
    margin-top: 3.125em;
  }
  .page404 .title.p2a, .page404 .title.p2b {
    margin-top: 0;
  }
  .page404 .text.p1a,
  .page404 .text.p1b{
    margin-bottom: 1.375em;
  }
  .page404 .buttons.p1a,
  .page404 .buttons.p1b {
    margin-bottom: 1.875em;
  }
  .btn-404 {
    width: 100%;
    font-size: 1.6em;
  }
  .btn-404:first-child {
    margin-right: 1.875em;
    margin-bottom: 0.9375em;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .page404 .img.p1a, .page404 .img.p1b {
    margin-top: 2.5em;
  }
  .page404 .img.p2a, .page404 .img.p2b {
    display: block;
    margin: 0 auto;
    width: 100%;
  }
  .page404 .img.p3 {
    width: 100%;
  }
  .page404 .title.p1b, .page404 .title.p1a {
    margin-top: 3.375em;
  }
  .page404 .title.p2a, .page404 .title.p2b {
    margin-top: 3.75em;
  }
  .page404 .text.p1a, .page404 .text.p1b {
    margin-bottom: 1.75em;
  }
  .page404 .buttons.p1a, .page404 .buttons.p1b {
    margin: 0.375em 0 5.625em 0 ;
  }

  .page404 .buttons.p2a, .page404 .buttons.p2b {
    margin: 2.5em 0 7.375em;
  }
  .btn-404.p1a, .btn-404.p1b {
    width: 40%;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}

