/**********************************
 * The body's background color 
 * will change, not the section's
 */
 body {
    color: #24366E;
    background-color: #EFF2EC;
    transition: all 480ms ease-in-out;
}

 body.page-template-page-impact-report-php .impact-report{ background-color: none !important}


 /**********************************
 * Prevent the page from jumping
 * around when the user scrolls.
 */
@media screen and (min-width: 1100px) {
    body.scrolledNav {
        padding-top: 0 !important;
    }

   .uagb-block-5f3be5fd.wp-block-uagb-section {
        margin-top: 100px;
    }
}
.main-header { position: fixed !important; }
.admin-bar .main-header { top: 30px; }

/**********************************
 * Make sure the .wp-block-columns
 * has a transparent background
 * for the body's color to change.
 */
.ir-section .uagb-section__overlay,
.ir-section.wp-block-columns {
    background-color: transparent !important;
}

/************************************
 * Makes body not-scrollable
 * during the introduction animation.
 */
body {
    overflow: hidden;
}

/************************************
 * Fixes the arrow-top weirdness
 */
.arrow-top {
    width: 100%;
    text-align: right;
    position: fixed;
    bottom: 50px;
    right: 50px;
    z-index: 20;
}
.arrow-top img {
    width: 61px;
    height: 46px;
}

/************************************
 * Force the Justification in
 * the buttons (overriding wide
 * template's styles.
 */
.wp-block-buttons.is-content-justification-left {
    justify-content: flex-start !important;
}
.wp-block-buttons.is-content-justification-right {
    justify-content: flex-end !important;
}

/************************************
 * Intro Image Animation
 */

.ir-intro {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    z-index: 99;

    min-height: 780px;

    padding-top: 200px;

    background-color: #24366E;

    transform: translateY(0%);

    animation-name: introOut;
    animation-delay: 3.5s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-duration: 1s;
}

/* All elements are above the images */
.ir-intro-text-1,
.ir-intro-text-2 {
    position: relative;
    z-index: 5;
}

/* Base styles for the intro images */
.ir-intro:before,
.ir-intro:after {
    content: "";

    position: absolute;    
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    z-index: 3;

    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;

    transition: all 2s ease-in-out;
}

/** Intro Images **/
.ir-intro:before { background-image: url(/wp-content/uploads/2021/05/intro-buildings.svg) !important; } /** Replace for the according image **/
.ir-intro:after { background-image: url(/wp-content/uploads/2021/05/intro-buildings-active.svg) !important; } /** Replace for the according image **/

.ir-intro:after { opacity: 0; }
.ir-intro.active:after { opacity: 1; }

/** Intro Text **/
.ir-intro-text-1,
.ir-intro-text-2 {
    opacity: 0;
    animation-fill-mode: forwards;
    animation-direction: normal;
    animation-duration: 480ms; /** Adjust the speed of the hands-in **/
    animation-timing-function: ease-in-out;
}

.ir-intro.active .ir-intro-text-1,
.ir-intro.active .ir-intro-text-2 { 
    animation-name: opacity;
    animation-delay: .8s;
}
.ir-intro.active .ir-intro-text-2 {
    animation-name: opacity;
    animation-delay: 1.2s;
}

@keyframes introOut {
    0% {
        transform: translateY(0%);
    }
    
    100% {
        transform: translateY(-100%);
    }
}



/**********************************
 * Transitions Basic Styles
 */
 .transition-01,
 .transition-02,
 .transition-03,
 .transition-04,
 .transition-05,
 .transition-06,
 .transition-07,
 .transition-08,
 .transition-09,
 .transition-10 {
     position: relative;
     overflow: hidden;

     min-height: 100vh;
 }
 .transition-01:before,
 .transition-01:after,
 .transition-02:before,
 .transition-02:after,
 .transition-03:before,
 .transition-03:after,
 .transition-04:before,
 .transition-04:after,
 .transition-05:before,
 .transition-05:after,
 .transition-06:before,
 .transition-06:after,
 .t7-col,
 .transition-08:before,
 .transition-08:after,
 .transition-09:before,
 .transition-09:after,
 .transition-10:before,
 .transition-10:after {
     content: "";
 
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
 
     background-size: 100%;
     background-repeat: no-repeat;
     background-position: center;
 }
 
 /**********************************
  * Transition #01 - Images
  */
 
 .transition-01:before,
 .transition-01:after {
     background-image: url(/wp-content/uploads/2021/05/hands.svg); /** Replace for the image **/
     transform: scale(1.1) translateX(100%);
 
     /* animation-delay: 320ms; */
     animation-fill-mode: forwards;
     animation-duration: 3.2s; /** Adjust the speed of the hands-in **/
     animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 
 .transition-01:before { transform: scale(1.1) translateX(100%) rotateY(180deg); }
 
 .transition-01.show:before {
     animation-name: rightHandsIn;
     
 }
 .transition-01.show:after {
     animation-name: leftHandsIn;
 }
 
 /**********************************
  * Transition #01 - Keyframes
  */
 @keyframes leftHandsIn {
     0% { transform: scale(1.1) translateX(-100%); }
     100% { transform: scale(1) translateX(0%); }
 }
 
 @keyframes rightHandsIn {
     0% { transform: scale(1.1) translateX(100%) rotateY(180deg); }       
     100% { transform: scale(1) translateX(0%) rotateY(180deg); }
 }
 /*
  * End Transition #01
  **********************************/
 
 
 /**********************************
  * Transition #02
  */
 
  .transition-02 {
     background-image: url(/wp-content/uploads/2021/05/bridge-canyon.svg); /** Replace for the image **/
     background-size: 100%;
     background-repeat: no-repeat;
     background-position: center;
 }
 .transition-02:before,
 .transition-02:after {
     opacity: 0;
 
     /* animation-delay: 320ms; */
     animation-fill-mode: forwards;
     animation-duration: 2s; /** Adjust the speed of the hands-in **/
     animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 
 .transition-02:before {
     background-image: url(/wp-content/uploads/2021/05/bridge-base.svg);
 }
 .transition-02:after {
     background-image: url(/wp-content/uploads/2021/05/bridge-middle.svg);
 }
 
 .transition-02.show:before {
     animation-name: bridgeBase;
     animation-delay: 280ms;
 }
 .transition-02.show:after {
     animation-name: bridgeMiddle;
     animation-delay: 480ms;
 }
 
 
 /**********************************
  * Transition #02 - Keyframes
  */
  @keyframes bridgeBase {
     0% { opacity: 0; }
     100% { opacity: 1; }
 }
 @keyframes bridgeMiddle {
     0% { 
         transform: translateY(-50%);
         opacity: 0; 
     }
     25% { opacity: 1; }
     100% { 
         transform: translateY(0%);
         opacity: 1; 
     }
 }
 /*
  * End Transition #02
  **********************************/
 
 
 /**********************************
  * Transition #03
  */
  
  .transition-03,
  .transition-03:before,
  .transition-03:after {     
      animation-fill-mode: both;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-duration: 1.2s; /** Adjust the speed of the hands-in **/
      animation-timing-function: ease-in-out;
 }
         
 .transition-03 {
     height: 100vh;
     background-image: url(/wp-content/uploads/2021/05/network-01.svg); /** Replace for the image **/
 
     background-size: 100%;
     background-repeat: no-repeat;
     background-position: center;
 }
 .transition-03:before {
     background-image: url(/wp-content/uploads/2021/05/network-02.svg); /** Replace for the image **/
     animation-delay: 2.4s;
     animation-name: opacity;
 }
 .transition-03:after {
     background-image: url(/wp-content/uploads/2021/05/network-03.svg); /** Replace for the image **/
     animation-delay: 3.6s;
     animation-name: opacity;
 }
 
 /*
  * End Transition #03
  **********************************/
 
 
 
  /**********************************
  * Transition #04
  */
  .transition-04 {
      height: 100vh;
  }
 
 .transition-04:before,
 .transition-04:after {
     animation-delay: 1s;
     animation-fill-mode: forwards;
     animation-duration: 2s; /** Adjust the speed of the hands-in **/
     animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  }
 
 .transition-04:before {
     background-image: url(/wp-content/uploads/2021/05/skyline.svg);
     animation-duration: 3s;
     transform: scale(1.2);
 }
 .transition-04:after {
     background-image: url(/wp-content/uploads/2021/05/houses.svg);
     transform: scale(8);
 }
 
 .transition-04.show:before {
     animation-name: skyline;
 }
 .transition-04.show:after {
     animation-name: houses;
 }
 
 @keyframes skyline {
     0% {
         transform: scale(1.2);
         opacity: 1;
     }
     100% {
         transform: scale(1);
         opacity: .3;
     }
 }
 
 @keyframes houses {
     0% { transform: scale(8); }
     100% { transform: scale(1); }
 }
 /*
  * End Transition #04
  **********************************/
 
 
 
 /**********************************
  * Transition #05
  */
 .transition-05 {
     height: 100vh;
 }
 
 .transition-05:before,
 .transition-05:after {
    animation-delay: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 
 .transition-05:before {
     background-image: url(/wp-content/uploads/2021/05/hats.svg);
 }
 .transition-05:after {
     background-image: url(/wp-content/uploads/2021/05/phone.svg);
 }
 
 .transition-05.show:before {
     animation-name: hatsOff;
     animation-delay: 1.4ms;
     animation-duration: 3s;
     transform: scale(0) translateY(-100%);
 }
 
 .transition-05.show:after {
     animation-name: phoneWiggle;
     animation-delay: 1s;
     animation-duration: 1s; /** Adjust the speed of the hands-in **/
 }
 
 @keyframes phoneWiggle {
     10%, 90% { transform: translate3d(-3px, 0, 0); }
     20%, 80% { transform: translate3d(6px, 0, 0); }
     30%, 50%, 70% { transform: translate3d(-12px, 0, 0); }
     40%, 60% { transform: translate3d(12px, 0, 0); }
 }
 
 @keyframes hatsOff {
     0% { transform: scale(0) translateY(-100%); }
     100% { transform: scale(1) translateY(0%); }
 }
 
 
 /*
  * End Transition #05
  **********************************/
 
 
 /**********************************
  * Transition #06
  */
@media screen and (min-width: 1100px) {
 .transition-06 {
     height: 100vh;
 }
}
 .transition-06:before {
     background-image: url(/wp-content/uploads/2021/05/lock.svg);
 }
 .transition-06:after {
     background-image: url(/wp-content/uploads/2021/05/lock-active.svg);
     opacity: 0;
     animation-delay: 1s;
     animation-duration: 2s;
     animation-fill-mode: forwards;
     animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 
 .transition-06.show:after {
     animation-name: opacity;
 }
 
 
 /*
  * End Transition #06
  **********************************/
 
 
 /**********************************
  * Transition #07
  */ 
 .transition-07 {
     height: 100vh;
 }

 .transition-07 .uagb-section__inner-wrap {
    position: static;
}
 
 .t7-col {
     display: flex;
     flex-direction: column;
     justify-content: center;
 
     padding: 120px 5%;
 }
 
 .t7-col.--left {
     align-items: flex-start;
 }
 
 .t7-col.--right {
     align-items: flex-end;
 }
 
 .t7-node {
     width: 120px;
     height: 24px;
     flex-shrink: 0;
 
     margin: 1em 0;
     border-radius: 8px;
 
     background-color: #3578D2;
     transition: all 2s ease-in-out;
     transition-delay: 1.2s;
 }
 
 .t7-col.--left .t7-node:nth-child(4) {
     background-color: #EECA4A;
 }
 
 .show .t7-node {
     margin: 6em 0;
 }
 /*
  * End Transition #07
  **********************************/
 
 
 
 /**********************************
  * Transition #08
  */
 .transition-08 {
     height: 100vh;
 
     background-image: url(/wp-content/uploads/2021/05/building-unconnected.svg); /** Replace for the image **/
     background-size: 100%;
     background-repeat: no-repeat;
     background-position: center;
 }
 
 .transition-08:before {
     background-image: url(/wp-content/uploads/2021/05/building-connectivity.svg); /** Replace for the image **/
     
     transform: translateX(-100%);
 }
 .transition-08:after {
     background-image: url(/wp-content/uploads/2021/05/building-lights.svg); /** Replace for the image **/
     
     opacity: 0;
 }
 
 .transition-08.show:before {
     animation-name: connecting;
     animation-duration: 3s;
     /* animation-delay: 1s; */
     animation-fill-mode: forwards;
 }
 .transition-08.show:after {
     animation-name: opacity;
     animation-duration: 720ms;
     animation-delay: 3s;
     animation-fill-mode: forwards;
 }
 
 
 @keyframes connecting {
     /** 15 nodes = 6.66% */
     
     0%, 5.99%      { transform: translateX(-100%); }
     6%, 13.31%     { transform: translateX(-70%); }
     13.32%, 19.97% { transform: translateX(-65%); }
     19.98%, 26.63% { transform: translateX(-60%); }
     26.64%, 33.32% { transform: translateX(-55%); }
     33.33%, 39.98% { transform: translateX(-50%); }
     39.99%, 46.64% { transform: translateX(-45%); }
     46.65%, 53.30% { transform: translateX(-40%); }
     53.31%, 59.96% { transform: translateX(-35%); }
     59.97%, 66.62% { transform: translateX(-30%); }
     66.63%, 73.28% { transform: translateX(-25%); }
     73.29%, 79.94% { transform: translateX(-20%); }
     79.95%, 86.60% { transform: translateX(-15%); }
     86.61%, 93.26% { transform: translateX(-10%); }
     93.27%, 99.99% { transform: translateX(-5%); }
     100%           { transform: translateX(0%); }
 
 }
 
 /*
  * End Transition #08
  **********************************/
 
 
 /**********************************
  * Transition #09
  */
.transition-09 {
    height: 500px;
    min-height: 0;
    padding: 120px 0 !important;
}
 
 .transition-09:before,
 .transition-09:after {
     background-size: auto 100%;
     background-position: center right;
 }
 
 .transition-09:before {
     background-image: url(/wp-content/uploads/2021/05/cornerstone.svg);
 }
 .transition-09:after {
     background-image: url(/wp-content/uploads/2021/05/cornerstone-active.svg);
 
     opacity: 0;
     animation-delay: 1s;
     animation-duration: 1s;
     animation-fill-mode: forwards;
     animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 
 .transition-09.show:after {
     animation-name: opacity;
 }
 
 /*
  * End Transition #09
  **********************************/
 
 
 /**********************************
  * Transition #10
  */
 .transition-10 { }
 
 .transition-10:before {
     background-image: url(/wp-content/uploads/2021/05/dominoes.svg);
     background-position: center bottom;
 }
 .transition-10:after {
     background-image: url(/wp-content/uploads/2021/05/domino.svg);
     background-position: center bottom;
 
     transform: translateY(-40%);
     
     animation-delay: 1.4s;
     animation-duration: 1s;
     animation-fill-mode: forwards;
     animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 
 .transition-10.show:after {
     animation-name: domino;
 }
 
 @keyframes domino {
     0% { transform: translateY(-40%); }
     100% { transform: translateY(0%); }
 }
 
 /*
  * End Transition #10
  **********************************/
 
 
 
 
 @keyframes opacity {
     0% { opacity: 0; }
     100% { opacity: 1; }
 }



 
 /**********************************
  * Mobile Fixes
  */

 @media screen and (max-width:768px) {
    .ir-intro:before, .ir-intro:after {
        background-size: auto 70%;
        background-position: center 50%;
    }


    .transition-01:before, .transition-01:after {
        background-position: center 34%;
    }

    .t7-node {
        width: 80px;
        height: 20px;
        border-radius: 6px;
    }

    .transition-09 {
        height: auto;
        padding-bottom: 300px !important;
    }

    .transition-09:before, .transition-09:after {
        background-size: 50%;
        background-position: center 100%;
    }

   .uagb-block-5f3be5fd.wp-block-uagb-section {
        margin-top: 0px;
    }

   .uagb-block-25a0e84f.wp-block-uagb-section {
    margin-top: -150px; margin-bottom:-150px;
   }

   .page-template-page-wide .content .transition-08 {
    margin-bottom:-250px; margin-top:-250px;
   }

}

@media screen and (max-width: 450px) {
	
	figure.wp-block-image.size-large.is-resized.icon.arrow-top.is-style-default {
		width: 100vw;
		text-align: right;
		right: unset;
		bottom: 10px;
	}

		
	body {
		width: 100vw;
		}
		
	head {
	    width: 100vw;
	}
	
	.main-header, .controls, .wp-block-uagb-columns{
		width: 100vw;
		overflow-x: hidden;
		}
	
    .transition-01:before, .transition-01:after {
        background-position: center 70%;
    }

    .t7-node {
        width: 40px;
        height: 10px;
        border-radius: 4px;
    }

    .transition-09:before, .transition-09:after {
        background-size: 100%;
        background-position: center 100%;
    }

}