body{
    margin:0;
    padding:0;
    background-color:#eeeeee;
    font-family:'Lexend Peta',sans-serif;
    font-weight:400;
}

body.dark{
    background-color:#333333;
    
}

#wrapper{
    position:relative;
    width:100%;
    height:auto;
}

#hero{
    position:relative;
    width:100vw;
    height:100vh;
}

#hero .button{
    position:absolute;
    bottom:30px;
    left:50%;
    width:300px;
    height:60px;
    border:1px solid rgba(127,127,127,1);
    font-family:'Lexend Peta',sans-serif;
    color:rgba(127,127,127,1);
    text-align:center;
    line-height:60px;
    margin-left:-150px;
    cursor:pointer;
}

#hero .button:hover{
    color:#000;
    background-color:white;
    border:1px solid rgba(127,127,127,0);
}

#hero .webgl-container{
    position:absolute;
    width:90vw;
    height:50.625vw;
    left:5vw;
    top:50%;
    margin-top: -25.3125vw;
    box-shadow: 0px 20px 40px rgba(0,0,0,0.2);
}

#hero .caption{
    position:absolute;
    bottom:20px;
    font-size:10px;
    left:20px;
    color:#333333;
    opacity:0.5;
}

.dark #hero .caption{
    color:#eeeeee;
}

.section{
    position:relative;
    width:900px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:200px;
    text-align: center;
}

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

.section#hero{
    margin-bottom: 0px;
}

.section h1{
    position:relative;
    margin:0;
    padding:0;
    font-size:70px;
    letter-spacing: -5px;
    color:#333333;
    font-weight:400;
    text-shadow: 0px 5px 10px rgba(0,0,0,0.2);
}

.dark .section h1{
    color:#eeeeee;
}

@supports (-webkit-text-stroke: 1px black) {
  .section h1 {
       color:white;
        /*text-shadow:
       1px 1px 0 #333,
     -1px -1px 0 #333,  
      1px -1px 0 #333,
      -1px 1px 0 #333,
       1px 1px 0 #333;*/
       background: #333333;
      -webkit-background-clip: text;
      -webkit-text-stroke: 5px transparent;
      /*color: #232d2d;*/
  }

  .dark .section h1{
    /*-webkit-text-stroke: 2px #eeeeee;*/
    background: #eeeeee;
      -webkit-background-clip: text;
      -webkit-text-stroke: 5px transparent;
  }
}

.section p{
    position:relative;
    width:660px;
    margin-left:auto;
    margin-right:auto;
    font-size:16px;
    color:#444444;
    line-height: 1.6em;
}

.section .button{
    position:relative;
    width:300px;
    height:60px;
    font-size:14px;
    margin-left:auto;
    margin-right:auto;
    margin-top:40px;
    border:1px solid #333333;
    font-family:'Lexend Peta',sans-serif;
    color:#333333;
    text-align:center;
    line-height:60px;
    cursor:pointer;
    text-transform: uppercase;
}

.dark .section .button{
    border:1px solid #eeeeee;
    color:#eeeeee;
}

.section a{
    position:relative;
    display: block;
    width:300px;
    margin-left:auto;
    margin-right:auto;
    text-decoration: none!important;
}

.section .button:hover{
    color:#000000;
    background-color:#ffffff;
    border:1px solid rgba(255,255,255,1);
}



.section .anim:nth-child(1){
    opacity:0;
    transform: translate3d(0px,50px,0px);
    transition: all 0s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}

.section .anim:nth-child(2){
    opacity:0;
    transform: translate3d(0px,50px,0px);
    transition: all 0s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}

.section .anim:nth-child(3){
    opacity:0;
    transform: translate3d(0px,50px,0px);
    transition: all 0s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}

.section .anim:nth-child(4){
    opacity:0;
    transform: translate3d(0px,50px,0px);
    transition: all 0s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}

.section.active .anim:nth-child(1){
    opacity:1;
    transform: translate3d(0px,0px,0px);
    transition-duration: 0.5s;
}

.section.active .anim:nth-child(2){
    opacity:1;
    transform: translate3d(0px,0px,0px);
    transition-duration: 0.5s;
    transition-delay: 0.1s;
}

.section.active .anim:nth-child(3){
    opacity:1;
    transform: translate3d(0px,0px,0px);
    transition-duration: 0.5s;
    transition-delay: 0.2s;
}

.section.active .anim:nth-child(4){
    opacity:1;
    transform: translate3d(0px,0px,0px);
    transition-duration: 0.5s;
    transition-delay: 0.3s;
}

.dark .section p{
    color:#dddddd;
}

#intro p{
    width:800px;
    font-size:20px;
    letter-spacing: -2px;
    line-height: 2.2em;
}

.data{
    position:relative;
    width:900px;
    margin-left:auto;
    margin-right:auto;
    display:flex;
    flex-direction:row;
    margin-top:50px;
}

.data-point{
    position:relative;
    width:33%;
    height:auto;
    letter-spacing: -1px;
    color:#444444;
}
.dark .data-point{
    color:#dddddd;
}

.data-eyebrow{
    position:relative;
    font-size:10px;
    text-transform: uppercase;
}
.data-value{
    position:relative;
    font-size:50px;
    letter-spacing:-5px;
}

.charities{
    position:relative;
    width:900px;
    margin-left:auto;
    margin-right:auto;
    display:flex;
    flex-direction:row;
}

.charity{
    position:relative;
    width:33%;
    height:auto;
    letter-spacing: -1px;
    color:#444444;
}

.dark .charity{
    color:#dddddd;
}

.charity-logo{
    position:relative;
    width:80%;
    height:auto;
    margin-left:auto;
    margin-right:auto;
}

.charity-logo img{
    position:relative;
    width:100%;
    height:auto;
    opacity:0.8;
}

.dark .charity-logo img{
    filter:invert(1);
}

.charity-description{
    position:relative;
    font-size:12px;
    width:80%;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    margin-top:-20px;
}

.xr-infos{
    position:relative;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top:40px;
}

.xr-info{
    position:relative;
    width:420px;
    height:auto;
}

.xr-info-title{
    position:relative;
    font-size:40px;
    text-align:center;
    color:#333333;
    text-shadow: 0px 5px 10px rgba(0,0,0,0.2);
}

.dark .xr-info-title{
    color:#eeeeee;
}

.xr-video{
    width:100%;
    height:420px;
    overflow:hidden;
    margin-top:15px;
    box-shadow: 0px 20px 40px rgba(0,0,0,0.5);
}

.xr-video video{
    position:relative;
    height:105%;
    width:auto;
    left:50%;
    transform: translate(-50%,0%);
}

.xr-info-description{
    margin-top:40px;
    font-size:14px;
    letter-spacing: -1px;
    color:#333333;
}

.dark .xr-info-description{
    color:#eeeeee;
}

#process p{
    width:900px;
}

#process img, #process video{
    position:relative;
    width:100%;
    height:auto;
    margin-top:20px;
    margin-bottom:20px;
    box-shadow: 0px 20px 40px rgba(0,0,0,0.5);
}

#footer img{
    display:inline-block;
    width:25px;
    height:25px;
    vertical-align: middle;
}

.dark #footer img{
    filter:invert(1);
}

.arrow{
    position:absolute;
    bottom:20px;
    left:50%;
    margin-left:-10px;
    width:20px;
    height:12px;
    background-image:url(../assets/arrow-down.svg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    opacity:0;
    z-index:999;
    transition: all 0.5s;
    animation-name: bounce;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.dark .arrow{
    filter:invert(1);
}

.arrow.active{
    opacity:1;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(5px);
            transform: translateY(5px);
  }
  60% {
    -webkit-transform: translateY(3px);
            transform: translateY(3px);
  }
}


@media only screen and (min-aspect-ratio: 16/10) {
    #hero .webgl-container{
        position:absolute;
        width:142vh;
        height:80vh;
        bottom:10vh;
        left:50%;
        top:auto;
        margin-left: -71vh;
        margin-top:0px;
        box-shadow: 0px 20px 40px rgba(0,0,0,0.2);
    }
}

@media only screen and (max-width: 1000px) {
    .section{
        width:600px;
    }

    .section h1{
        font-size:60px;   
    }
    
    .xr-info{
        width:290px;
    }

    .xr-video{
        height:290px;
    }

    .xr-info-description{
        font-size:12px;
    }
    
    .charities{
        width:600px;
    }
    
    .data{
        width:600px;
    }

    #intro p{
        width:600px;
    }

    .section p{
        width:600px;
    }

    #process p{
        width:600px;
    }

    #hero{
        height:100%;
    }
}

@media only screen and (max-width: 600px) {
    .section{
        width:300px;
    }

    .section h1{
        font-size:40px; 
        letter-spacing: 0px;  
    }

    .xr-infos{
        display:block;
    }

    .xr-info{
        width:300px;
        margin-bottom: 30px;
    }

    .xr-video{
        height:300px;
    }

    .xr-info-description{
        font-size:12px;
    }
    
    .charities{
        width:300px;
        display: block;
    }

    .charity{
        width:100%;
    }
    
    .data{
        width:300px;
    }

    #intro p{
        width:300px;
        font-size:14px;
    }

    .section p{
        width:300px;
        font-size:14px;
    }

    #process p{
        width:300px;
    }

    .data-eyebrow{
        font-size:8px;
    }

    .data-value{
        font-size:30px;
    }

    .charity-description{
        margin-top:-30px;
    }

    .section h1{
        -webkit-text-stroke: 3px transparent;
    }

    #hero .button{
        bottom:-90px;
        width: 230px;
        margin-left:-115px;
        height: 50px;
        line-height: 50px;
    }

    .section .button{
        font-size:12px;
        width: 230px;
        height: 50px;
        line-height: 50px;
    }

    .section{
        margin-bottom:100px;
    }

    .charity-logo{
        width:60%;
    }

    #hero .webgl-container{
        width:96vw;
        left:2vw;
        height:64vw;
        margin-top: -34vw;
    }
}