.page-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

header div.logos {
    display: flex;
    align-items: center;
}

header div.logos > img {
    margin-left: 45px;
    height: 53px;
}

header {
    position: relative;
}




.before-navigation {
    display: flex;
}

.before-navigation > a {
    width: 33%;
    box-sizing: border-box;
    margin-left: 0;
    background-color: rgb(250,138,59);
}

.before-navigation > div {
    width: 66.8%;
    box-sizing: border-box;
    margin-left: 9px;
    margin-bottom: 4px;
    background: rgb(223,213,190);
    font-family: TradeGothicLTPro-BdCn20, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 22px;
    color: rgb(30,67,83);
    padding: 3px 8px;
}

.before-navigation a {
    color: rgb(240, 229, 201);
    padding: 3px 8px;
    margin-bottom: 4px;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-size: 20px;
    line-height: 22px;
    font-family: TradeGothicLTPro-BdCn20, sans-serif;
    font-weight: normal;
    font-style: normal;
    text-transform: uppercase;
}

.forrest-skyline {
    position: relative;
}

.forrest-skyline .forrest {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: url("/resources/images/forest-full@2x.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: auto 90%;
}

.forrest-skyline .skyline {
    background-image: url("/resources/images/skyline@2x.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
}

.forrest-skyline img {
    width: 100%;
    object-fit: contain;
}

.no-bottom-padding {
    padding: 0;
}
.navigation > div {
    margin-left: 9px;
}
.navigation > div.nav-orange {
    margin-left: 0;
}

.navigation {
    margin-bottom: 4px;
}

header > div {
    padding-bottom: 5px;
}

.bike {
    bottom: 7px;
    width: 100%;
    position:absolute;
    left: 0;
    height: 20%;
}

.bike > img {
    position:absolute;
    left: -150px;
    height: 100%;
    width: auto;
    -webkit-animation:linear infinite;
    -webkit-animation-name: run;
    -webkit-animation-duration: 24s;
}

@-webkit-keyframes run {
    0% { left: -150px;}
    25%{ left : 100%; }
    100%{ left : 100%; }
}

.bike.reverse > img {
    right: -150px;
    left: auto;
    -webkit-animation-name: run-reverse;
    transform: scaleX(-1);
}

@-webkit-keyframes run-reverse {
    0% { right: -150px;}
    25%{ right : 100%; }
    100%{ right : 100%; }
}

#birds {
    position:absolute;
    left: 100%;
    top: 210px;
    -webkit-animation:linear;
    -webkit-animation-name: fly;
    -webkit-animation-duration: 10s;
}

@-webkit-keyframes fly {
    0% { left: 100%; top: 210px;}
    100%{ left : 60%; top: -165px; }
}

.front-width {
    max-width: 1048px;
    padding: 0 16%;
}

@media (max-width: 767px) {
    .navigation > div {
        margin-left: 0;
    }
    .navigation {
        margin-bottom: 0;
    }

    .front-width {
        max-width: 975px;
        padding: 0;
    }
}

@media (min-width: 768px) {



    .navigation .dropdown {
        width: auto;
        flex-grow: 1;
        box-sizing: border-box;
    }

    .dropdown-content {
        background-color: rgb(240, 229, 201);
        display: block;
        position: relative;
        width: 100%;
        padding-top: 4px;
        z-index: auto;
    }

    .dropbtn {
        cursor: default;
    }


}

.navigation a.news { display: none; }


.flow-wrapper {
    position: relative;
    max-width: 1445px;
    margin: 0 auto;
}
.flow-wrapper .flow {
    position: relative;
    width: 100%;
    left: 0;
    top: 0;
}
.flow-wrapper svg {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

.flow-wrapper .flow-text {
    position: absolute;
    width: 58.14%;
    top: 1.40%;
    left: 21.8%;
}

.mobile-front {
    position: relative;
}
.mobile-front img,
.mobile-front #coloring img {
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 0;
    width: 100%;
    overflow: hidden;
    object-position: right 0 top -431px;
}

.mobile-front #coloring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    height: 500px;
}

#line-path1 {
    -webkit-animation: linear;
    -webkit-animation-name: grow-orange;
    -webkit-animation-duration: 2s;
}

@-webkit-keyframes grow-orange {
    0% { stroke-dashoffset: 3452; }
    100%{ stroke-dashoffset: 3427; }
}

#line-path2 {
    -webkit-animation: linear;
    -webkit-animation-name: grow-blue;
    -webkit-animation-duration: 0.4s;
}

@-webkit-keyframes grow-blue {
    0% { stroke-dashoffset: 3452; }
    100%{ stroke-dashoffset: 3447; }
}

#line-path3 {
    -webkit-animation: linear;
    -webkit-animation-name: grow-green;
    -webkit-animation-duration: 1.2s;
}

@-webkit-keyframes grow-green {
    0% { stroke-dashoffset: 3452; }
    100%{ stroke-dashoffset: 3437; }
}


.mobile-front svg {

}

#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: rgb(250,138,59); /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
}

#myBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}