body {
  font-family: 'Raleway', sans-serif;
  margin-left: auto;
  margin-right: auto; }
  body .loader {
    left: calc(50% - 60px);
    top: calc(50% - 30px);
    position: absolute; }
    body .loader .loader-pic {
      width: 60px;
      display: inline;
      -webkit-transform-origin: bottom;
              transform-origin: bottom; }
      body .loader .loader-pic:nth-child(1) {
        -webkit-animation: wave1 2s ease-in-out infinite;
                animation: wave1 2s ease-in-out infinite; }

@-webkit-keyframes wave1 {
  0% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg); }
  50% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg); }
  100% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg); } }

@keyframes wave1 {
  0% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg); }
  50% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg); }
  100% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg); } }
      body .loader .loader-pic:nth-child(2) {
        -webkit-animation: wave2 2s ease-in-out infinite;
                animation: wave2 2s ease-in-out infinite; }

@-webkit-keyframes wave2 {
  0% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg); }
  50% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg); }
  100% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg); } }

@keyframes wave2 {
  0% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg); }
  50% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg); }
  100% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg); } }
  body .loader-text {
    text-align: center;
    margin-top: calc(50vh + 60px);
    display: block; }
  body .whole-page {
    display: none; }

.picturepage .arrowword {
  position: relative;
  bottom: 20vh;
  text-align: center;
  -webkit-animation: bounce 2s infinite;
          animation: bounce 2s infinite;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  display: none;
  background-position: 50% 50%; }

@-webkit-keyframes bounce {
  20%, 53%, 80% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(-5px, -30px, 0);
            transform: translate3d(-5px, -30px, 0); }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(5px, -15px, 0);
            transform: translate3d(5px, -15px, 0); }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
            transform: translate3d(0, -4px, 0); } }

@keyframes bounce {
  20%, 53%, 80% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(-5px, -30px, 0);
            transform: translate3d(-5px, -30px, 0); }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(5px, -15px, 0);
            transform: translate3d(5px, -15px, 0); }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
            transform: translate3d(0, -4px, 0); } }

.picturepage .content .container .img-fullwidth {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  max-width: 90%;
  height: auto;
  background-color: transparent;
  border-radius: 3%; }

.picturepage .content .container .img-halfwidth {
  display: block;
  max-width: 40%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 20px;
  margin-bottom: 20px;
  float: left;
  border-radius: 3%; }

.picturepage .content .container .iframediv {
  display: block;
  height: 48vw;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px; }
  .picturepage .content .container .iframediv .video {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    border: none;
    width: 90%;
    height: 100%;
    z-index: 100;
    border-radius: 5%; }

.picturepage .parallax {
  height: 100vh;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: contain; }
  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .picturepage .parallax {
      background-attachment: scroll; } }
  @media only screen and (min-device-width: 320px) and (max-device-width: 667px) {
    .picturepage .parallax {
      background-attachment: scroll; } }

.picturepage .parallax-1 {
  background-image: url("schedule-bg.png"); }

.picturepage .parallax-2 {
  background-image: url("milk-bg.png"); }

.picturepage .parallax-3 {
  background-image: url("fork-bg.png"); }

.picturepage .parallax-4 {
  background-image: url("movie-bg.png"); }

.picturepage .parallax-5 {
  background-image: url("puzzle-bg.png"); }

.picturepage .parallax-6 {
  background-image: url("dessert.png"); }

.picturepage .parallax-7 {
  background-image: url("guitar.png"); }

.picturepage .parallax-8 {
  background-image: url("speech.png"); }

.picturepage .parallax-9 {
  background-image: url("bus-bg.png"); }

.button {
  text-align: center;
  text-decoration: none;
  display: block;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
  margin-top: 10px;
  padding: 6px 0px;
  border-radius: 5px;
  color: white;
  width: 40vw; }
  .button:hover {
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.4); }

.scrollToTop {
  background-color: #4eb9b9;
  clear: both;
  float: left;
  margin-left: 5vw; }

.backHome {
  background-color: #4eb9b9;
  float: right;
  margin-right: 5vw; }

#footer {
  text-align: center;
  clear: both;
  display: block;
  text-decoration: none;
  color: gray;
  padding-top: 10px; }
  #footer:hover {
    color: #B6b6b6; }