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);
}