html{
overflow-x:hidden;
}
body{
overflow-x:hidden;
}
:root {
  --jumbotron-padding-y: 3rem;
}

.jumbotron {
  padding-top: var(--jumbotron-padding-y);
  padding-bottom: var(--jumbotron-padding-y);
  margin-bottom: 0;
  background-color: #fff;
}
@media (min-width: 768px) {
  .jumbotron {
    padding-top: calc(var(--jumbotron-padding-y) * 2);
    padding-bottom: calc(var(--jumbotron-padding-y) * 2);
  }
}

.jumbotron p:last-child {
  margin-bottom: 0;
}

.jumbotron-heading {
  font-weight: 300;
}

.jumbotron .container {
  max-width: 40rem;
}

footer {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

footer p {
  margin-bottom: .25rem;
}

.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
@media (min-width: 768px) {
.head{
    padding: 0px;
    background: black;
    position: relative;
    top: -56px;
    z-index: -100;
border-radius:0px;
    height: 100%;
background:url(../img/ivana-cajina-378753-unsplash.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
}
@media (max-width: 767px) {
.head{
    padding: 0px;
    background: black;
    position: relative;
    top: -56px;
    z-index: -100;
border-radius:0px;
    height: 100%;
background:url(../img/ivana-cajina-378753-unsplash.jpg);
background-repeat: no-repeat;
background-size: 300%;
background-attachment: fixed;
}
}
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700);

.hoja {
  color: #dcdce2;
  position: relative;
  top: 50%;
  left: 50%;
  margin-left: -140px;
  margin-top: 40px;
  width: 280px;
  height: 280px;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 35px;
  line-height: 80px;
  -webkit-font-smoothing: antialiased;
}
.hoja:after,
.hoja:before {
  content: "";
  border-radius: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
.hoja:after {
  -webkit-box-shadow: inset 0 17.5px 0 rgba(250, 250, 0, 0.6), inset 17.5px 0 0 rgba(250, 200, 0, 0.6), inset 0 -17.5px 0 rgba(250, 150, 0, 0.6), inset -17.5px 0 0 rgba(250, 100, 0, 0.6);
          box-shadow: inset 0 17.5px 0 rgba(250, 250, 0, 0.6), inset 17.5px 0 0 rgba(250, 200, 0, 0.6), inset 0 -17.5px 0 rgba(250, 150, 0, 0.6), inset -17.5px 0 0 rgba(250, 100, 0, 0.6);
  -webkit-animation: rotar 2s -0.5s linear infinite;
          animation: rotar 2s -0.5s linear infinite;
}
.hoja:before {
  -webkit-box-shadow: inset 0 17.5px 0 rgba(0, 250, 250, 0.6), inset 17.5px 0 0 rgba(0, 200, 200, 0.6), inset 0 -17.5px 0 rgba(0, 150, 200, 0.6), inset -17.5px 0 0 rgba(0, 200, 250, 0.6);
          box-shadow: inset 0 17.5px 0 rgba(0, 250, 250, 0.6), inset 17.5px 0 0 rgba(0, 200, 200, 0.6), inset 0 -17.5px 0 rgba(0, 150, 200, 0.6), inset -17.5px 0 0 rgba(0, 200, 250, 0.6);
  -webkit-animation: rotarIz 2s -0.5s linear infinite;
          animation: rotarIz 2s -0.5s linear infinite;
}
@-webkit-keyframes rotar {
  0% {
    -webkit-transform: rotateZ(0deg) scaleX(1) scaleY(1);
            transform: rotateZ(0deg) scaleX(1) scaleY(1);
  }
  50% {
    -webkit-transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95);
            transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95);
  }
  100% {
    -webkit-transform: rotateZ(360deg) scaleX(1) scaleY(1);
            transform: rotateZ(360deg) scaleX(1) scaleY(1);
  }
}
@keyframes rotar {
  0% {
    -webkit-transform: rotateZ(0deg) scaleX(1) scaleY(1);
            transform: rotateZ(0deg) scaleX(1) scaleY(1);
  }
  50% {
    -webkit-transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95);
            transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95);
  }
  100% {
    -webkit-transform: rotateZ(360deg) scaleX(1) scaleY(1);
            transform: rotateZ(360deg) scaleX(1) scaleY(1);
  }
}
@-webkit-keyframes rotarIz {
  0% {
    -webkit-transform: rotateZ(0deg) scaleX(1) scaleY(1);
            transform: rotateZ(0deg) scaleX(1) scaleY(1);
  }
  50% {
    -webkit-transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85);
            transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85);
  }
  100% {
    -webkit-transform: rotateZ(-360deg) scaleX(1) scaleY(1);
            transform: rotateZ(-360deg) scaleX(1) scaleY(1);
  }
}
@keyframes rotarIz {
  0% {
    -webkit-transform: rotateZ(0deg) scaleX(1) scaleY(1);
            transform: rotateZ(0deg) scaleX(1) scaleY(1);
  }
  50% {
    -webkit-transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85);
            transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85);
  }
  100% {
    -webkit-transform: rotateZ(-360deg) scaleX(1) scaleY(1);
            transform: rotateZ(-360deg) scaleX(1) scaleY(1);
  }
}
#content {
  position: absolute;
  width: 100%;
  height: 100%; 
}
#scroll-proxy { height: 4000px; }

#content section {
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: 100%;
  background-color: transparent;
  background-position: center bottom;
  background-repeat: no-repeat;
}

#environment {
  position: fixed;
  width: 100%;
  height: 100%;
  -webkit-perspective: 800px;
     -moz-perspective: 800px;
      -ms-perspective: 800px;
       -o-perspective: 800px;
          perspective: 800px;
}

#content {
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

#first {
  background-image: url(https://treehouse-codepen.s3.amazonaws.com/multiplane/landscape1.svg);
  -webkit-transform: translate3d( 0, 0, -11500px) scale(16);
     -moz-transform: translate3d( 0, 0, -11500px) scale(16);
      -ms-transform: translate3d( 0, 0, -11500px) scale(16);
       -o-transform: translate3d( 0, 0, -11500px) scale(16);
          transform: translate3d( 0, 0, -11500px) scale(16);
}

#second {
  background-image: url(https://treehouse-codepen.s3.amazonaws.com/multiplane/landscape2.svg);
  -webkit-transform: translate3d( 0, 0, -24000px ) scale(32);
     -moz-transform: translate3d( 0, 0, -24000px ) scale(32);
      -ms-transform: translate3d( 0, 0, -24000px ) scale(32);
       -o-transform: translate3d( 0, 0, -24000px ) scale(32);
          transform: translate3d( 0, 0, -24000px ) scale(32);
}

#third {
  background-image: url(https://treehouse-codepen.s3.amazonaws.com/multiplane/landscape3.svg);
  -webkit-transform: translate3d( 0, 0, -48000px ) scale(64);
     -moz-transform: translate3d( 0, 0, -48000px ) scale(64);
      -ms-transform: translate3d( 0, 0, -48000px ) scale(64);
       -o-transform: translate3d( 0, 0, -48000px ) scale(64);
          transform: translate3d( 0, 0, -48000px ) scale(64);
}

#fourth {
  background-image: url(https://treehouse-codepen.s3.amazonaws.com/multiplane/landscape4.svg);
  -webkit-transform: translate3d( 0, 0, -64000px ) scale(128);
     -moz-transform: translate3d( 0, 0, -64000px ) scale(128);
      -ms-transform: translate3d( 0, 0, -64000px ) scale(128);
       -o-transform: translate3d( 0, 0, -64000px ) scale(128);
          transform: translate3d( 0, 0, -64000px ) scale(128);
}