@media only screen and (max-width: 1024px) {

    #begining{
        font-size: 10px;
     }

    #logo{
        width: 250px;
        text-align: center;
    }
    #stones{
        width: 200px;
    }
    .tesseract {
        background-image: linear-gradient(#ff9d2f, #ff6126);
        transform: skewY(-6deg);
        transform-origin: top left;
        transition: 1s;
      }
    .tesseract-content{
        transform: skewY(6deg);
        transform-origin: top left;
    }
    .tesseract-content p{
        padding-top: 2rem;
        padding-left:1rem;
    }
    .gems{
        width: 150px;
        opacity: 0;
        transition: all 1s ease-out;
    }
    .gems.fade-in{
        opacity: 1;
    }
    .tesseract-text{
        padding-top: 4rem;
    }
    .tesseract h1{
        padding-left: 4%;
        font-size: 40px;
    }
    .tesseract-title{
        opacity: 0;
        -webkit-transform: translateX(0);
        transform: translateX(0);
        transition: all 1s ease-out;
    }
    .tesseract-title.fade-in{
        opacity: 1;
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
      }
    .space{
        opacity: 0;
        -webkit-transform: translateX(0);
        transform: translateX(0);
        transition: all 1s ease-out;
    }
    .space.fade-in{
        opacity: 1;
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
        font-size: 30px;
    }
    .tesseract-info{
        opacity: 0;
        opacity: 0;
        transform: translateY(80px);
        font-size: 15px;
    
    }
    .tesseract-info.fade-in{
        opacity: 1;
        transform: translateY(60px);
        transition: all 1s ease-out;
        margin-bottom: 1rem;
    }
    .tesseract-info-2{
        opacity: 0;
        opacity: 0;
        transform: translateY(80px);
        font-size: 15px;
        margin-bottom: 1rem;
    }
    .tesseract-info-2.fade-in{
        opacity: 1;
        transform: translateY(60px);
        transition: all 1s ease-out;
    }
    h3{
        padding: 1rem;
    }
    .movies{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .movie{
        opacity: 0;
        width: 150px;
        height: 200px;
    }
    .movie.flip{
        opacity: 1;
        -webkit-animation: rotate-diagonal-1 1s linear both;
        animation: rotate-diagonal-1 1s linear both;
    }
    @-webkit-keyframes rotate-diagonal-1 {
        0% {
          -webkit-transform: rotate3d(1, 1, 0, 0deg);
                  transform: rotate3d(1, 1, 0, 0deg);
        }
        50% {
          -webkit-transform: rotate3d(1, 1, 0, -180deg);
                  transform: rotate3d(1, 1, 0, -180deg);
        }
        100% {
          -webkit-transform: rotate3d(1, 1, 0, -360deg);
                  transform: rotate3d(1, 1, 0, -360deg);
        }
      }
    .mind{
        transform: skewY(-6deg);
        transform-origin: top left;
        background-color: #ff6126;
    }
    .tesseract.tesseract-2{
        -webkit-animation: color-change-2x 1s linear 1s alternate both;
        animation: color-change-2x 1s linear 1s alternate both;
    }
    .tesseract.tesseract-2 h1{
        color: white;
    }
    .tesseract.tesseract-2 h3{
        color: white;
        
    }
    .mind.tesseract-2{
        -webkit-animation: color-change-2x 1s linear 1s alternate both;
        animation: color-change-2x 1s linear 1s alternate both;
    }
    @-webkit-keyframes color-change-2x {
        0% {
          background: #ff6126;
        }
        100% {
            background-color:#03031A;
            background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyB3aWR0aD0nNjAwJyBoZWlnaHQ9JzYwMCcgdmlld0JveD0nMCAwIDE1MCAxNTAnPgo8ZmlsdGVyIGlkPSdpJyB4PScwJyB5PScwJz4KCTxmZUNvbG9yTWF0cml4IHR5cGU9J21hdHJpeCcgdmFsdWVzPScxIDAgMCAwIDAgIDAgMSAwIDAgMCAgMCAwIDEgMCAwICAwIDAgMCAwIDAnIC8+CjwvZmlsdGVyPgo8ZmlsdGVyIGlkPSduJyB4PScwJyB5PScwJz4KCTxmZVR1cmJ1bGVuY2UgdHlwZT0ndHVyYnVsZW5jZScgYmFzZUZyZXF1ZW5jeT0nLjcnIHJlc3VsdD0nZnV6eicgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPgoJPGZlQ29tcG9zaXRlIGluPSdTb3VyY2VHcmFwaGljJyBpbjI9J2Z1enonIG9wZXJhdG9yPSdhcml0aG1ldGljJyBrMT0nMCcgazI9JzEnIGszPSctNzMnIGs0PScuMDEnIC8+CjwvZmlsdGVyPgo8cmVjdCB3aWR0aD0nMTAyJScgaGVpZ2h0PScxMDIlJyBmaWxsPScjMDMwMzFhJy8+CjxyZWN0IHg9Jy0xJScgeT0nLTElJyB3aWR0aD0nMTAyJScgaGVpZ2h0PScxMDIlJyBmaWxsPScjZmZmZmZmJyBmaWx0ZXI9J3VybCgjbiknIG9wYWNpdHk9JzEnLz4KPHJlY3QgeD0nLTElJyB5PSctMSUnIHdpZHRoPScxMDIlJyBoZWlnaHQ9JzEwMiUnIGZpbGw9JyMwMzAzMWEnIGZpbHRlcj0ndXJsKCNpKScgb3BhY2l0eT0nMScvPgo8L3N2Zz4=');
     
        }
      }
      @keyframes color-change-2x {
        0% {
          background: #ff6126;
        }
        100% {
            background-color:#03031A;
            background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyB3aWR0aD0nNjAwJyBoZWlnaHQ9JzYwMCcgdmlld0JveD0nMCAwIDE1MCAxNTAnPgo8ZmlsdGVyIGlkPSdpJyB4PScwJyB5PScwJz4KCTxmZUNvbG9yTWF0cml4IHR5cGU9J21hdHJpeCcgdmFsdWVzPScxIDAgMCAwIDAgIDAgMSAwIDAgMCAgMCAwIDEgMCAwICAwIDAgMCAwIDAnIC8+CjwvZmlsdGVyPgo8ZmlsdGVyIGlkPSduJyB4PScwJyB5PScwJz4KCTxmZVR1cmJ1bGVuY2UgdHlwZT0ndHVyYnVsZW5jZScgYmFzZUZyZXF1ZW5jeT0nLjcnIHJlc3VsdD0nZnV6eicgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPgoJPGZlQ29tcG9zaXRlIGluPSdTb3VyY2VHcmFwaGljJyBpbjI9J2Z1enonIG9wZXJhdG9yPSdhcml0aG1ldGljJyBrMT0nMCcgazI9JzEnIGszPSctNzMnIGs0PScuMDEnIC8+CjwvZmlsdGVyPgo8cmVjdCB3aWR0aD0nMTAyJScgaGVpZ2h0PScxMDIlJyBmaWxsPScjMDMwMzFhJy8+CjxyZWN0IHg9Jy0xJScgeT0nLTElJyB3aWR0aD0nMTAyJScgaGVpZ2h0PScxMDIlJyBmaWxsPScjZmZmZmZmJyBmaWx0ZXI9J3VybCgjbiknIG9wYWNpdHk9JzEnLz4KPHJlY3QgeD0nLTElJyB5PSctMSUnIHdpZHRoPScxMDIlJyBoZWlnaHQ9JzEwMiUnIGZpbGw9JyMwMzAzMWEnIGZpbHRlcj0ndXJsKCNpKScgb3BhY2l0eT0nMScvPgo8L3N2Zz4=');
        }
      }
    .mind-content{
        transform: skewY(6deg);
        transform-origin: top left;
    } 
    .sceptre-title{
        opacity: 0;
        -webkit-transform: translateX(0);
        transform: translateX(0);
        transition: all 1s ease-out;
        padding-left: 0.5%;
        padding-top: 1%;
        font-size: 40px;
    }
    .sceptre-title.fade-in{
        color: white;
        opacity: 1;
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
    }
    .gem2{
        width: 300px;
        opacity: 0;
        transform: translateY(0px);
        transition: all 1s ease-out;
        padding-left: 8rem;
    }
    .gem2.fade-in{
        opacity: 1;
        transform: translateY(30px);
    }
    .sceptre-info{
        opacity: 0;
        transform: translateY(80px);
        font-size: 15px;
        padding: 1rem;
    
    }
    .sceptre-info.fade-in{
        opacity: 1;
        color: white;
        transform: translateY(60px);
        transition: all 1s ease-out;
    }
    .sceptre-info-2{
        opacity: 0;
        opacity: 0;
        transform: translateY(80px);
        font-size: 15px;
        padding: 1rem;
    
    }
    .sceptre-info-2.fade-in{
        opacity: 1;
        transform: translateY(60px);
        transition: all 1s ease-out;
        color: #e2dd4d;
    }
    #appears{
        margin:1rem; 
        opacity: 0;
    }
    #appears.show{
        opacity: 1;
    }
    .movie.comein{
        opacity: 1;
        transition: all 1s ease-out;
    }
    .movie.comein2{
        opacity: 1;
        transition: all 1s ease-out;
    }
    .sceptre{
        opacity: 0;
        transition: all 1s ease-out;
        font-size: 30px;
    }
    .sceptre.fadein{
        opacity: 1;
        color: #e2dd4d;
        text-align: center;   
    }
    .footer{
        width: 100%;
        height: 30rem;
        margin-top: -5rem;
        background-color: #fff;
        background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyB3aWR0aD0nNjAwJyBoZWlnaHQ9JzYwMCcgdmlld0JveD0nMCAwIDE1MCAxNTAnPgo8ZmlsdGVyIGlkPSdpJyB4PScwJyB5PScwJz4KCTxmZUNvbG9yTWF0cml4IHR5cGU9J21hdHJpeCcgdmFsdWVzPScxIDAgMCAwIDAgIDAgMSAwIDAgMCAgMCAwIDEgMCAwICAwIDAgMCAwIDAnIC8+CjwvZmlsdGVyPgo8ZmlsdGVyIGlkPSduJyB4PScwJyB5PScwJz4KCTxmZVR1cmJ1bGVuY2UgdHlwZT0ndHVyYnVsZW5jZScgYmFzZUZyZXF1ZW5jeT0nLjcnIHJlc3VsdD0nZnV6eicgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPgoJPGZlQ29tcG9zaXRlIGluPSdTb3VyY2VHcmFwaGljJyBpbjI9J2Z1enonIG9wZXJhdG9yPSdhcml0aG1ldGljJyBrMT0nMCcgazI9JzEnIGszPSctNzMnIGs0PScuMDEnIC8+CjwvZmlsdGVyPgo8cmVjdCB3aWR0aD0nMTAyJScgaGVpZ2h0PScxMDIlJyBmaWxsPScjMDMwMzFhJy8+CjxyZWN0IHg9Jy0xJScgeT0nLTElJyB3aWR0aD0nMTAyJScgaGVpZ2h0PScxMDIlJyBmaWxsPScjZmZmZmZmJyBmaWx0ZXI9J3VybCgjbiknIG9wYWNpdHk9JzEnLz4KPHJlY3QgeD0nLTElJyB5PSctMSUnIHdpZHRoPScxMDIlJyBoZWlnaHQ9JzEwMiUnIGZpbGw9JyMwMzAzMWEnIGZpbHRlcj0ndXJsKCNpKScgb3BhY2l0eT0nMScvPgo8L3N2Zz4=');
        background-size: cover;
        position: absolute;
    }
    .footer h1{
         color: white;
         margin: 2rem;
         text-align: center;
    }
    
    @keyframes spin {
        to {
            background-position: 0 200%;
        }
    }
    
    @keyframes spinMask {
        to {
            -webkit-mask-position: 0 200%;
        }
    }
    
    
    
    .wrapper,
    .wrapper-earth {
    
    }
    .wrapper-earth.show {
        position: fixed;
        width: 100vw;
        height: 100vw;
        bottom: -84vw;
        left: 0;
        border-radius: 100%;
        overflow: hidden;
    }
    
    .wrapper {
        box-shadow: 0.5vw 0 1vw #6dcfff, 1vw 0 5vw rgba(255, 255, 255, 0.5), 3vw -8vw 6vw -9vw rgba(201, 237, 255, 0.5);
    
        &::before,
        &::after {
            content: '';
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 100%;
        }
    
        &::before {
            box-shadow: inset 0 0 3vw 1.5vw rgba(201, 237, 255, 0.83);
        }
    
        &::after {
            top: 200vw;
            box-shadow: -8vw -196vw 10vw black;
        }
    }
    
    .wrapper-earth {
        bottom: -84.5vw;
        box-shadow: 0 0 0 0.5vw rgba(201, 237, 255, 0.5);
        opacity: 0;
    }
    .wrapper-earth.show {
        opacity: 1;
    }
    
    .planet,
    .planet-clouds {
        perspective: 39vw;
    }
    
    .planet-clouds {
        mix-blend-mode: screen;
        opacity: 0;
    }
    .planet-clouds.show {
        opacity: 1;
    }
    .planet,
    .planet-clouds,
    .water,
    .earth,
    .clouds {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    
    .earth {
        background: url(http://www.waterplea.com/codepen//earth.jpg) 0 0;
        background-size: cover;
        animation: spin 10s linear infinite;
        transform-origin: top;
        transform: rotateX(30deg) scale(0.4);
    }
    
    .water {
        -webkit-mask-image: url(http://www.waterplea.com/codepen//water.png);
        -webkit-mask-size: cover;
        animation: spinMask 10s linear infinite;
        transform-origin: top;
        transform: rotateX(30deg) scale(0.4);
        mix-blend-mode: lighten;
    
        &::after {
            content: '';
            position: absolute;
            top: -20%;
            left: 70%;
            width: 40%;
            height: 35%;
            border-radius: 100%;
            box-shadow: 0 0 15vw 20vw #ffb400;
        }
    }
    
    .clouds {
        background: url(http://www.waterplea.com/codepen//clouds.jpg) 0 0;
        mix-blend-mode: screen;
        background-size: cover;
        animation: spin 9s linear infinite;
        transform-origin: top;
        transform: rotateX(30deg) scale(0.4);
    }
    
    .wrapper-earth .clouds {  
        mix-blend-mode: multiply;
        filter: invert(100%);
        opacity: 0.5;
    }
    
        .flare {
            position: fixed;
            width: 6vw;
            height: 68vw;
            right: 34vw;
            bottom: 0;
            overflow: hidden;
            opacity: 0.2;
            filter: blur(2px);
            transform: rotate(30deg);
    
            &:nth-child(2) {
                transform: rotate(-30deg);
            }
    
            &:nth-child(3) {
                transform: rotate(60deg);
            }
    
            &:nth-child(4) {
                transform: rotate(120deg);
            }
    
            &::after {
                content: '';
                position: absolute;
                top: 30vw;
                width: 8vw;
                height: 8vw;
                border-radius: 100%;
                box-shadow: 0 0 30vw white;
            }
        }
    
        &::after {
            content: '';
            position: fixed;
            bottom: 30vw;
            right: 33vw;
            width: 8vw;
            height: 8vw;
            border-radius: 100%;
            background: white;
            box-shadow: 0 0 4vw white, 0 0 10vw fade(orange, 50%), 0 0 10vw fade(white, 20%), 0 0 1vw white, 0 0 2vw white;
        }

       /* REALITY STONE  */

       .realities{
           margin-top: 6rem;
       }

       .reality{
        background-image: url('../pics/dark-world.jpg');
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .void{
        position: absolute;
        width: 100%;
        height: 20%;
        justify-content: center;
        display: flex;
        align-items: center;
    }
    .void h1{
        font-size: 50px;
    }
    .aether{
        font-size: 60px;
        margin: 4rem;
    }

    .ather-known{
        font-size: 40px;
    }
    .aether-info{
        font-size: 15px;
        padding: 1rem;
        color: white;
    }
    .aether-info-2{
        color: white;
        font-size: 15px;
        padding: 1rem;
    }
    .movie-3{
        width: 150px;
        height: 200px;
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
    }
    .movie-padding{
        margin-left: 5rem;
    }

    /* POWER STONE */

    .orb{

        background-image: url('../pics/morag.jpg');
    }

    

    section {
        position: relative;
        height: 100vh;
        width: 100vw;
    }

.grid-12 {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
}

.position-h2 {
    grid-row: 7;
    grid-column: 5 / span 4;
    align-self: center;
}

.power{
    font-size: 40px;
    text-align: center;
    color: white;
}

.orb-image-wrapper {
    height: 100vh;
    width: 100%;
    justify-content: center;
    display: grid;
    grid-auto-columns: 2fr 1fr 2fr;
    grid-template-rows: repeat(1, 1fr);
    align-items: center;
}

.orb-image {
    grid-row: 1;
    grid-column: 2 / span 1;
    align-self: center;
    justify-self:center;
    text-align: center;
    max-width: 100%;
}

.inner-orb {
    position: relative;
}


p {
    color: #FFF;
    font-weight: 600;
    font-size: 20px;
    margin:0 0 8px 0;
}

.orb1-text {
    grid-column: 1;
    text-align: right;
}

.orb2-text {
    grid-column: 3;
}

.orb1-img {
    width: 100%;
 position: absolute;
    z-index: 2;
}

.orb-stick {
    width: 100%;
    display: none;
     position: absolute;
    left: 54.5%;
    -webkit-animation: swirl-in-fwd 0.6s ease-out both;
	        animation: swirl-in-fwd 0.6s ease-out both;
}

.orb2-img {
 width: 100%;
 position: absolute;
    z-index: 2;
}

.orb1-img-behind {
    width: 100%;
    z-index: 1;
    position: relative;
}

.orb2-img-behind {
    width: 100%;
    z-index: 1;
    position: relative;
}

.movie-behind-1 {
    z-index: 2;
    position: absolute;
    width: 100px;
    height: 150px;
}

.movie-behind-2 {
    z-index: 2;
    position: absolute;
    width: 100px;
    height: 150px;
}

.movie-behind-2 {
    z-index: 2;
    position: absolute;
    width: 100%;
}

.orb-text-wrapper {
    margin-top: -20rem;
    width: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

}

.orb-info{
    font-size: 15px;
    margin: 1rem;
    color: white;
}
.orb-info-2{
    color: white;
    font-size: 15px;
    margin: 1rem;
}

  /* TIME STONE */

  .eye{
    background-image: url('../pics/temple.jpg');
}

.time{
    font-size: 40px;
    text-align: center;
    color: white;
}

.appears-time{
    font-size: 20px;
    text-align: center;
    color: white;
}


.time-image-wrapper {
width: 100%;
height: 100vh;
justify-content: center;
display: grid;
grid-auto-columns: 2fr 1fr 2fr;
grid-template-rows: repeat(1, 1fr);
align-items: center;

}

.time-image {
grid-row: 1;
grid-column: 2 / span 1;
align-self: center;
justify-self:center;
text-align: center;
max-width: 100%;
}

.inner-time {
position: relative;
}

.time1-text {
grid-column: 1;
text-align: right;
}

.time1-text p{
font-size:25px;

}

.time2-text {
grid-column: 3;
}
.time2-text p{
font-size:25px;

}

.time1-img {
width: 100%;
position: absolute;
z-index: 2;
}

.time-stick {
width: 100%;
display: none;
position: absolute;
-webkit-animation: swirl-in-fwd 0.6s ease-out both;
        animation: swirl-in-fwd 0.6s ease-out both;
}

.time2-img {
position: absolute;
z-index: 2;
}

.time1-img-behind {
z-index: 1;
position: relative;
width: 100%;
}

.time2-img-behind {
z-index: 1;
position: relative;
width: 100%;
}

.movie-behind-time-1 {
z-index: 2;
position: absolute;
width: 100%;
}

.movie-behind-time-2 {
z-index: 2;
position: relative;
width: 100%;
}

.time-text-wrapper {
    margin-top: -25rem;
    width: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

}

.time-info{
font-size: 15px;
margin: 1rem;
color: white;
}

   /* SOUL STONE */

   .soul{
    background-image: url('../pics/vormir.jpg');
    height: 100%;
}

.soul-title{
    font-size: 40px;
    text-align: center;
    color: white;
}

.soul-info{
    margin-top: -10rem;
    padding: 1rem;
    font-size:15px;
    text-align: center;
}
.gauntlet{
    width: 60%
}
.ready{
    margin-top: 10rem;
    font-size: 20px;
    text-align: center;
    color: white;
}
}