@font-face {
  font-family: SFPixelate;
  src: url("../font/SFPixelate.ttf");
}

body {
  padding: 0;
  margin: 0;
  background-color: #0094C8;
  font: 400 15px/1.8 "SFPixelate", sans-serif;
  color: #777;
  overflow-x: hidden;  
}

.text-content {
  padding: 20px 80px 20px 80px;
  text-align: justify;
  max-width: 1920px;
  width: 100%;
}

.text-color {
  color:#ddd;
  background-color:#0094c8;
}

.no-max-width {
  max-width: none;
}

.social-icons {
  height: 84px;
  width: 50%;
  display: flex;
  justify-content: space-between;
}

.center-div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box-shadow {
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2), 0px 0px 20px 20px rgba(0, 0, 0, 0.19);
}

.text-shadow {
  text-shadow: -2px -2px #129dce, 2px -2px #129dce, -2px 2px #129dce, 2px 2px #129dce;
}

.caption-title {
  position: absolute;
  top: 60%;
  width: 100%;
  transform: translateZ(0px) scale(1);
  z-index: 2;
}

a {
  font: 400 22px/1.8 "SFPixelate", sans-serif;
  color: #fff;
}

.darkify-background {
  opacity: 0.40;
  width: 100%;
  height: 100%;
  min-height: 800px;
  min-width: 100%;
  background-image: url('../img/pattern.jpg');
  background-repeat: repeat;
  z-index: 2;
}

.parallax-1-layer-0, .parallax-2-layer-0 {
  position: relative;
  opacity: 1.0;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  width: 100%;
  min-height: 800px;
  min-width: 100%;
  left: 0;
  top: 0px;
  text-align: center;
  color: #000;
}

.parallax-1-layer-0 {
  background-image: url("../img/parallax-1-layer-0.png");
}

.parallax-2-layer-0 {
  background-image: url("../img/parallax-2-layer-0.png");
}

.caption {
  position: relative;
  left: 0;
  top: 50%;
  text-align: center;
  color: #000;
}

.caption span.border {
  background-color: #111;
  color: #ffe495;
  padding: 18px;
  font-size: 40;
  letter-spacing: 10px;
}

h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 25px "SFPixelate", sans-serif;
  color: #111;
}

#parallax {
  height: 1080px;
  overflow: hidden;
  position: relative;
}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
  .parallax-1-layer-0, .parallax-2-layer-0 {
    background-attachment: scroll;
  }
}

@media only screen and (max-width: 768px) {
  #parallax {
    display: none;
  }
  #parallax-mobile {
    display: block;
  }
  #parallax-title {
    display: none;
  }
}

#parallax-mobile {
  display: none;
  background: url("../img/parallax-0-layer-0-mobile.png") no-repeat center bottom / cover;
  height: 320px;
}

#parallax, .parallax-layer {
  min-height: 800px;
}

.parallax-layer {
  background-position: bottom center;
  background-size: auto;
  background-repeat: no-repeat;
  width: 100%;
  height: 1080px;
  position: fixed;
  z-index: -1;
}

.layer-bg {
  background-image: url('../img/parallax-0-layer-3.png');
}
.layer-1 {
  background-image: url('../img/parallax-0-layer-2.png');
}
.layer-2 {
  background-image: url('../img/parallax-0-layer-1.png');
}
.layer-overlay {
  background-image: url('../img/parallax-0-layer-0.png');
}

/* centre the content in the parallax layers */
.title {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.cover {
  color: #777;
  background-color:white;
  text-align: justify;
  position: relative;
  top: 0px;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2), 6px 6px 10px 10px rgba(0, 0, 0, 0.19);

  z-index: 1;
}