/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

.page{
    --parallax: 0
}
header.section{
    _background-color:#FFC7F1;
    background-image:linear-gradient(180deg, #4DBEF7 0%, #4A316E 60%);
    _background-color:#f7c934;
    _background-color:#B1E2FF;
    color:#363636;
    text-align:center;
    padding:0;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align:center;
    align-items:center;
    -ms-flex-pack:distribute;
    justify-content:space-around;
    _height:20em;
    text-align:center;
    _height:100vh;
    _height:calc(100vh - 2em)
}
@media screen and (min-width: 480px){
    header.section{
        height:60vh
    }
}
header.section h1,header.section h2{
    margin:0
}
header.section h1{
    color:#EA1C4C;
    line-height:.7;
    position:absolute;
    top:50%;
    display:table;
    font-size:0;
    transform:translate(0, -50%);
    transform:translate(0, calc(var(--parallax) * 6px)) translate(0, -50%)
}
header.section h1 div{
    animation:slide-in-headline 800ms cubic-bezier(.175, .885, .32, 1.275) forwards
}
header.section h1 div>span{
    display:inline-block
}
header.section h1 div>span span{
    font-size:14vw;
    display:block
}
header.section h1 .s span{
    animation:s-explode 500ms cubic-bezier(.25, .46, .45, .94) 1500ms forwards
}
header.section h1 .u span{
    animation:u-explode 500ms cubic-bezier(.25, .46, .45, .94) 1500ms forwards
}
header.section h1 .p span{
    animation:p-explode 500ms cubic-bezier(.25, .46, .45, .94) 1500ms forwards
}
header.section h1 .e span{
    animation:e-explode 500ms cubic-bezier(.25, .46, .45, .94) 1500ms forwards
}
header.section h1 .r span{
    animation:r-explode 500ms cubic-bezier(.25, .46, .45, .94) 1500ms forwards
}
header.section h1 .u2 span{
    animation:u2-explode 500ms cubic-bezier(.25, .46, .45, .94) 1500ms forwards
}
header.section h1 .n span{
    animation:n-explode 500ms cubic-bezier(.25, .46, .45, .94) 1500ms forwards
}
header.section h1 .k span{
    animation:k-explode 500ms cubic-bezier(.25, .46, .45, .94) 1500ms forwards
}
header.section h1 .n2 span{
    animation:n2-explode 500ms cubic-bezier(.25, .46, .45, .94) 1500ms forwards
}
header.section h1 .o span{
    animation:o-explode 500ms cubic-bezier(.25, .46, .45, .94) 1500ms forwards
}
header.section h1 .w span{
    animation:w-explode 500ms cubic-bezier(.25, .46, .45, .94) 1500ms forwards
}
header.section h1 .n3 span{
    animation:n3-explode 500ms cubic-bezier(.25, .46, .45, .94) 1500ms forwards
}
header.section h2{
    font-weight:600;
    font-size:2em;
    letter-spacing:.1em;
    animation:blend-in 2000ms cubic-bezier(.165, .84, .44, 1) forwards;
    z-index:2
}
header.section .header__menu{
    list-style:none;
    width:100%;
    text-align:center;
    margin:0;
    position:absolute;
    top:1em;
    animation:slide-in-menu 2000ms cubic-bezier(.165, .84, .44, 1) forwards
}
header.section .header__menu ul{
    margin:0
}
header.section .header__menu li{
    display:inline-table;
    margin:.5em 1.5em;
    padding:0
}
header.section .header__menu a{
    color:#363636;
    text-transform:uppercase;
    letter-spacing:.1em;
    text-decoration:none;
    font-weight:600;
    font-size:.85em
}
header.section .header__arrow{
    position:absolute;
    bottom:1em;
    left:50%;
    transform:translate(-50%, 0);
    padding:1em;
    animation:slide-in-arrow 2000ms cubic-bezier(.165, .84, .44, 1) forwards
}
header.section .header__arrow svg{
    fill:none;
    width:2em;
    height:1em
}
header.section .header__arrow:hover{
    transform:translate(-50%, 0) scale(1.1)
}
@keyframes slide-in-headline{
    0%{
        transform:translate(0, -80vh)
    }
    50%{
        transform:translate(0, -80vh)
    }
    100%{
        transform:translate(0, 0)
    }
}
@keyframes blend-in{
    0%{
        opacity:0;
        transform:scale(.7)
    }
    75%{
        opacity:0;
        transform:scale(.7)
    }
    100%{
        opacity:1;
        transform:scale(1)
    }
}
@keyframes slide-in-menu{
    0%{
        opacity:0;
        transform:translate(0, -110%)
    }
    75%{
        opacity:0;
        transform:translate(0, -110%)
    }
    100%{
        opacity:1;
        transform:translate(0, 0)
    }
}
@keyframes slide-in-arrow{
    0%{
        opacity:0;
        transform:translate(-50%, 110%)
    }
    75%{
        opacity:0;
        transform:translate(-50%, 110%)
    }
    100%{
        opacity:1;
        transform:translate(-50%, 0)
    }
}
@keyframes s-explode{
    from{
        transform:translate(0, 0) rotate(0deg)
    }
    to{
        transform:translate(0em, -30vh) rotate(-25deg)
    }
}
@keyframes u-explode{
    to{
        transform:translate(1em, 40vh) rotate(10deg)
    }
}
@keyframes p-explode{
    to{
        transform:translate(1em, -25vh) rotate(120deg)
    }
}
@keyframes e-explode{
    to{
        transform:translate(-1em, 0) rotate(0deg)
    }
}
@keyframes r-explode{
    to{
        transform:translate(0, 14vh) rotate(0deg)
    }
}
@keyframes u2-explode{
    to{
        transform:translate(-2em, 21vh) rotate(-45deg)
    }
}
@keyframes n-explode{
    to{
        transform:translate(.5em, -15vh) rotate(-10deg)
    }
}
@keyframes k-explode{
    to{
        transform:translate(0, 50vh) rotate(70deg)
    }
}
@keyframes n2-explode{
    to{
        transform:translate(2em, -30vh) rotate(20deg)
    }
}
@keyframes o-explode{
    to{
        transform:translate(1em, -5vh) rotate(190deg)
    }
}
@keyframes w-explode{
    to{
        transform:translate(0, 8vh) rotate(180deg)
    }
}
@keyframes n3-explode{
    to{
        transform:translate(.5em, 0) rotate(5deg)
    }
}

header.section div.scale-up-bottom {
	-webkit-animation: scale-up-bottom 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-bottom 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

header.section div.scale-up-bottom2 {
	-webkit-animation: scale-up-bottom 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-bottom 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;animation-delay: 2s;
}

/* ----------------------------------------------
 * Generated by Animista on 2022-10-1 19:1:51
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-up-bottom
 * ----------------------------------------
 */
 @-webkit-keyframes scale-up-bottom {
    0% {
      -webkit-transform: scale(0.5);
              transform: scale(0.5);
      -webkit-transform-origin: 50% 100%;
              transform-origin: 50% 100%;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-transform-origin: 50% 100%;
              transform-origin: 50% 100%;
    }
  }
  @keyframes scale-up-bottom {
    0% {
      -webkit-transform: scale(0.5);
              transform: scale(0.5);
      -webkit-transform-origin: 50% 100%;
              transform-origin: 50% 100%;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-transform-origin: 50% 100%;
              transform-origin: 50% 100%;
    }
  }
  

  .main-nav {
    padding-top: 15.2em;
  }

  .fp-hd-bg h2 {
    font-family: Poppins;
    font-size: 2.5em;
    color: #f7c934;
  }