html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    max-width:100vw;
    overflow-x:hidden;
    font-family: 'Rubik', sans-serif;
}

#menu {
    position:fixed;
    z-index:999;
    width: 100%;
}

#menu.scrolling {
    background: #f7f4f1f0;
    box-shadow: 0 3px 7px -6px #0000008f;
}

#logo {
    position: absolute !important;
    display: flex;
    overflow: hidden;
    margin: 13px 0 0 14px;
    pointer-events: all;
}

#logo img {
    max-width: 126px;
    display: inline-block;
}

#logo p {
    font-family: 'Rubik Mono One', sans-serif;
    font-weight: 800;
    align-self: center;
    margin: 0;
    font-size: 15px;
    letter-spacing: 6px;
    margin-left: 3px;
    color: #a39a8e;
    text-shadow: -1px -.5px #fff;
}

#logo p span {
    display:none;
}

#navigation {
    display: block;
    width: calc(100% - 320px);
    transform:translateY(-100%);
    opacity:0;
    pointer-events:none;
    transition:all .25s ease;
    margin: 0 auto !important;
    max-width: 870px;
    position: relative;
}

#navigation.scrolling {
    transform:translateY(0);
    opacity:1;
    pointer-events:all;
}

#navigation h3 {
    margin: 19px 35px;
    display: inline-block;
    text-align: center;
}

#navigation h3 a {
    text-decoration: none;
    font-family: 'Rubik', sans-serif;
    font-weight: 450;
    color: #348891;
}

#socialLinks {
    width: 210px;
    position: absolute;
    right: 0;
    top: 16px;
    cursor:pointer;
}

#socialLinks img {
    width: 24px;
    display: inline-block;
    margin: 0 10px;
    filter: drop-shadow(0 0 2px #6c8299);
    border: 5px solid #6d8298e3;
    border-radius: 50%;
}

.top-cont {
    background: #e9edef;
}

.parallax-container {
    position: relative;
    width: 100%;
    height: 100vh;
    z-index: 0;
}

.parallax {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    will-change: transform;
    pointer-events: none;
}

.text-layer {
    position: absolute;
    top: 26%;
    width: 100%;
    text-align: center;
    color: #449ba4;
    font-size: 2.7rem;
    font-weight: bold;
    pointer-events: none;
    text-shadow: 0 0 20px rgb(247, 244, 241);
    font-family: 'Rubik', sans-serif;
}

.text-layer h2 {
    margin-bottom: 0;
}

.text-layer p {
    font-size: 18px;
    margin-top: 5px;
    color: #717d80;
}

.button-layer {
    margin-top:190px;
    pointer-events:all;
}

.button-layer p {
    margin-top: 190px;
}

.button-layer .button {
    font-size: 21px;
    display: inline-block;
    background: #2d727987;
    padding: 5px 13px;
}

.button-layer .button:last-child {
    margin-left:40px;
    background: #862d2d91;
}

.button-layer .button a {
    color:#fff;
    text-decoration:none;
}

.page-content {
    position: relative;
    z-index: 1;
    padding: 2rem;
}

.bird {
  position: absolute;
  width: 60px;
  top: 7vw;
  left: -100px;
  transform-origin: center center;
  animation: flyRight 13s linear .9s infinite;
}

@keyframes flyRight {
    0% {
        transform: translate(0, 0) scale(1) scaleX(1);
        opacity: 0.7;
    }
    20% {
        transform: translate(83vw, 110px) scale(0.95) scaleX(1);
        opacity: 0.46;
    }
    30% {
        transform: translate(120vw, 80px) scale(0.85) scaleX(1);
        opacity: 0.7;
    }
    40% {
        opacity: 0; /* fade while offscreen */
    }
    50% {
        transform: translate(120vw, 80px) scale(0.85) scaleX(-1);
        opacity: 0.7;
    }
    80% {
        transform: translate(0vw, 220px) scale(1.1) scaleX(-1);
        opacity: 0.56;
    }
    100% {
        transform: translate(0vw, 220px) scale(1.1) scaleX(1);
        opacity: 0.7;
    }
}

.beaver-wrapper {
    position: absolute;
    width: 221px;
    height: 180px;
    overflow-y: hidden;
    top: -50px;
    right: 31vw;
    transition: transform 0.2s ease;
    will-change: transform;
}

.beaver {
    position: absolute;
    bottom: -190px;
}

.beaver img {
    width: 100%;
    opacity:0.8;
}

#hosting {
    transform:translateY(-100px);
}

#hostingMat {
    margin-top:190px;
}

#hostTitle {
    width: 810px;
    text-align: center;
    margin: 0 0 40px;
    font-family: 'Rubik', sans-serif;
    font-size: 29px;
    margin-left: 11%;
    color: #a47e6c;
}

.tiersBox {
    display: block;
    margin-left: 10%;
    max-width: 839px;
}

.box {
    position: relative;
    display: inline-block;
    width: calc(32% - 20px);
    margin: 0 14px;
    background: #fffbf8;
    box-sizing: border-box;
    vertical-align: top;
    border-radius: 9px;
}

.box:before {
    content:' ';
    position:absolute;
    left: 9px;
    right: -8px;
    top: 11px;
    bottom: -11px;
    border-radius: 9px;
    z-index:-1;
    opacity: 0.7;
    --s: 23px;
    --c1: #dadfdc;
    --c2: #449ba3;
    --_s: 37.5% 12.5% at 62.5%;
    --_g: 34% 99%,#0000 101%;
    --g1: radial-gradient(var(--_s) 100%,#0000 32%,var(--c1) var(--_g));
    --g2: radial-gradient(var(--_s) 0 ,#0000 32%,var(--c1) var(--_g));
    --g3: radial-gradient(var(--_s) 100%,#0000 32%,var(--c2) var(--_g));
    --g4: radial-gradient(var(--_s) 0 ,#0000 32%,var(--c2) var(--_g));
    background: var(--g1), var(--g2) 0 calc(3*var(--s)), var(--g3) var(--s) calc(3*var(--s)), var(--g4) var(--s) calc(6*var(--s)), var(--g1) calc(2*var(--s)) calc(6*var(--s)), var(--g2) calc(2*var(--s)) calc(9*var(--s)), var(--g3) calc(3*var(--s)) calc(9*var(--s)), var(--g4) calc(3*var(--s)) 0, repeating-linear-gradient(var(--c1) 0 25%,var(--c2) 0 50%);
    background-size: calc(4*var(--s)) calc(12*var(--s));
    border: .8px solid #dbe3ec;
    box-shadow: -6px 0px 20px -6px #000000e5;
}

.priceBox {
    transition: all .3s ease;
}

.pBoxHead {
    background: #ffc75c;
    padding:1px 14px;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
    text-align: center;
    font-family: 'Rubik', sans-serif;
    font-size: 18px;
    letter-spacing: 1.5px;
    color: #1a77bb;
    background-image: repeating-radial-gradient( circle at 0 8px, #ffcc6e 0, #ffda98 9px ), repeating-linear-gradient( #ffc75ca1, #ffd15c );
}

.pBoxP {
    padding:0 17px;
    font-family: 'Rubik', sans-serif;
    text-align: left;
    font-size: 15px;
    height: 265px;
}

.expanded {
    height: auto !important;
}

.boxPriceSub {
    position:absolute;
    bottom:10px;
    width: 100%;
    text-align: center;
    margin-bottom:40px;
    transition:.3s ease;
}

#month1-mo,
#month12-mo,
#month36-mo,
#month1-yr,
#month12-yr,
#month36-yr,
#month1-tri,
#month12-tri,
#month36-tri {
    opacity:0;
    pointer-events:none;
}

#month1-mo.selected,
#month12-mo.selected,
#month36-mo.selected,
#month1-yr.selected,
#month12-yr.selected,
#month36-yr.selected,
#month1-tri.selected,
#month12-tri.selected,
#month36-tri.selected {
    opacity:1;
    pointer-events:all;
}

.boxOpt {
    display: inline-block;
    width: calc(33.33% - .33px);
    text-align: center;
    font-weight: 600;
    cursor: pointer;
    background: #e8ebee91;
    border-bottom-right-radius: 9px;
    border-bottom-left-radius: 9px;
    font-size: 14px;
    border-top: .5px solid #c6c6c6;
}

#mth12mo-op,
#mth12yr-op,
#mth12tri-op {
    border-left: .5px solid #d1d3df;
    border-right: .5px solid #d2d0d0;
}

.boxOpt p {
    font-weight: 600;
    color: #737272;
}

.currentPrice p {
    font-weight: 800;
    color: #449ba4;
    font-size: 33px;
    margin: 0;
    letter-spacing: 2px;
}

.switchP p {
    font-size: 15px;
    font-weight: 500;
}

.subP p {
    font-size: 14px;
    font-style: italic;
    letter-spacing: .3px;
    font-weight: 400;
    margin-top: 3px;
    opacity: .6;
}

.oldPrice p {
    margin-bottom: 5px;
    font-weight: 400;
    font-size: 20px;
    color: #879091;
    position: relative;
    width: 100%;
}

.oldPrice p span {
    position: absolute;
    top: -29px;
    left: 50%;
    transform: translateX(-50%);
}

.oldPrice p span:after {
    content:' ';
    width: 90%;
    height: 1.6px;
    display: block;
    background: #f009;
    margin-top: -12px;
    transform: rotate(-16deg);
    margin-left: 5%;
}

.pFootChoose {
    font-size: 0px;
    background: #d1d7d2;
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
}

#mth1mo-op.selected,
#mth12mo-op.selected,
#mth36mo-op.selected,
#mth1yr-op.selected,
#mth12yr-op.selected,
#mth36yr-op.selected,
#mth1tri-op.selected,
#mth12tri-op.selected,
#mth36tri-op.selected {
    background: #ffda98;
}

#mth1mo-op.selected p,
#mth12mo-op.selected p,
#mth36mo-op.selected p,
#mth1yr-op.selected p,
#mth12yr-op.selected p,
#mth36yr-op.selected p,
#mth1tri-op.selected p,
#mth12tri-op.selected p,
#mth36tri-op.selected p {
    color: #167680;
    font-size: 16px;
    margin: 12.5px;;
}

.footBord {
    margin-bottom: 157px;
    width: 90%;
    margin-left: 5%;
    height: 1px;
    background: #00000026;
}

.extraShow {
    display:none;
}

.seeMore {
    width: 140px;
    text-align: center;
    margin: 1px auto 16px;
    background: #7ea8ac;
    color: #fff;
    height: 24px;
    line-height: 24px;
    outline: 1px solid #3783b0;
    border-radius: 1px;
    cursor: pointer;
}

.fishTurning {
    width: 300px;
    position: absolute;
    height: 80px;
    overflow: hidden;
    right: 10%;
}

.mid {
    transform: scale(-0.7, 0.7);
    right: unset;
    left: 20%;
    margin-top: 0;
    opacity:0;
}

.back {
    transform: scale(0.5);
    right: 21%;
    margin-top: 0;
    opacity:0;
}

.fishTurning img {
    width: 33%;
    opacity: .6;
    transform: translate(76%, 150%) rotate(40deg);
    animation: fishesTurn 8s linear infinite;
}

.mid img {
    animation: fishesTurnFlip 8s linear .5s infinite;
}

.back img {
    animation: fishesTurn 8s linear 1s infinite;
}

@keyframes fishesTurn {
    0% {
        transform: translate(200%, 260%) rotate(40deg);
    }
    
    5% {
        transform: translate(95%, 30%) rotate(0deg);
    }
    
    10% {
        transform: translate(-10%, 260%) rotate(-40deg);
    }
    
    100% {
        transform: translate(-10%, 260%) rotate(-40deg);
    }
}

@keyframes fishesTurnFlip {
    0% {
        transform: translate(200%, 260%) rotate(40deg) scaleX(-1);
    }
    
    5% {
        transform: translate(95%, 30%) rotate(0deg) scaleX(-1);
    }
    
    10% {
        transform: translate(-10%, 260%) rotate(-40deg) scaleX(-1);
    }
    
    100% {
        transform: translate(-10%, 260%) rotate(-40deg) scaleX(-1);
    }
}