@keyframes fade-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes rotation {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(1turn)
    }
}

@keyframes modal-appear {
    0% {
        margin-top: 32px
    }

    to {
        margin-top: 0
    }
}

.wp-block-embed {
    margin-bottom: 1em
}

.wp-block-file {
    margin-bottom: 1.5em
}

.wp-block-file *+.wp-block-file__button {
    margin-left: .75em
}

.wp-block-image {
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%
}

.wp-block-image img {
    max-width: 100%
}

.wp-block-latest-comments__comment {
    font-size: 15px;
    line-height: 1.1;
    list-style: none;
    margin-bottom: 1em
}

.wp-block-media-text {
    display: grid
}

.wp-block-media-text {
    align-items: center;
    grid-template-areas: "media-text-media media-text-content";
    grid-template-columns: 50% auto;
    grid-template-rows: auto
}

.wp-block-media-text .has-media-on-the-right {
    grid-template-columns: auto 50%
}

.wp-block-media-text .wp-block-media-text__media {
    grid-area: media-text-media;
    margin: 0
}

.wp-block-media-text .wp-block-media-text__content {
    grid-area: media-text-content;
    padding: 0 8%;
    word-break: break-word
}

.wp-block-media-text.has-media-on-the-right {
    grid-template-areas: "media-text-content media-text-media"
}

p.is-large-text {
    font-size: 36px
}

.wp-block-quote.is-large,
.wp-block-quote.is-style-large {
    margin: 0 0 16px;
    padding: 0 1em
}

.wp-block-quote.is-large p,
.wp-block-quote.is-style-large p {
    font-size: 24px;
    font-style: italic;
    line-height: 1.6
}

.wp-block-quote.is-large footer,
.wp-block-quote.is-style-large footer {
    font-size: 18px;
    text-align: right
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600);

/*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */
html {
    font-family: sans-serif;
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

article,
footer,
header,
nav {
    display: block
}

main {
    display: block
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects
}

a:active,
a:hover {
    outline-width: 0
}

b {
    font-weight: inherit
}

b {
    font-weight: bolder
}

img {
    border-style: none
}

svg:not(:root) {
    overflow: hidden
}

details {
    display: block
}

menu {
    display: block
}

template {
    display: none
}

[hidden] {
    display: none
}

html {
    box-sizing: border-box;
    font-size: 18px
}

*,
::after,
::before {
    box-sizing: inherit
}

body {
    margin: 0;
    padding: 0;
    background: #fefefe;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    line-height: 1.5;
    color: #0a0a0a;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

img {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    height: auto;
    -ms-interpolation-mode: bicubic
}

.is-visible {
    display: block !important
}


blockquote,
div,
form,
h1,
h2,
h3,
h4,
h5,
h6,
li,
p,
ul {
    margin: 0;
    padding: 0
}

p {
    margin-bottom: 1rem;
    font-size: inherit;
    line-height: 1.6;
    text-rendering: optimizeLegibility
}

i {
    font-style: italic;
    line-height: inherit
}

b {
    font-weight: 700;
    line-height: inherit
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Open Sans", sans-serif;
    font-style: normal;
    font-weight: 300;
    color: inherit;
    text-rendering: optimizeLegibility
}

.h1,
h1 {
    font-size: 2.1rem;
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: .5rem
}

.h2,
h2 {
    font-size: 1.7rem;
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: .5rem
}

.h3,
h3 {
    font-size: 1.4rem;
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: .5rem
}

.h4,
h4 {
    font-size: 1rem;
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: .5rem
}

.h5,
h5 {
    font-size: .94444rem;
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: .5rem
}

.h6,
h6 {
    font-size: .88889rem;
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: .5rem
}

@media print,
screen and (min-width:40em) {

    .h1,
    h1 {
        font-size: 2.66667rem
    }

    .h2,
    h2 {
        font-size: 2.22222rem
    }

    .h3,
    h3 {
        font-size: 1.72222rem
    }

    .h4,
    h4 {
        font-size: 1.38889rem
    }

    .h5,
    h5 {
        font-size: 1.11111rem
    }

    .h6,
    h6 {
        font-size: .88889rem
    }
}

a {
    line-height: inherit;
    color: #0a0a0a;
    text-decoration: none;
    cursor: pointer
}

a:focus,
a:hover {
    color: #f49739
}

a img {
    border: 0
}

ul {
    margin-bottom: 1rem;
    list-style-position: outside;
    line-height: 1.6
}

li {
    font-size: inherit
}

ul {
    margin-left: 1.25rem;
    list-style-type: disc
}

ul ul {
    margin-left: 1.25rem;
    margin-bottom: 0
}

blockquote {
    margin: 0 0 1rem;
    padding: .5rem 1.11111rem 0 1.05556rem;
    border-left: 1px solid #cacaca
}

blockquote,
blockquote p {
    line-height: 1.6;
    color: #4d4743
}

.text-left {
    text-align: left
}

.text-right {
    text-align: right
}

@media print,
screen and (min-width:64em) {
    .large-text-left {
        text-align: left
    }

    .large-text-right {
        text-align: right
    }
}

@media print {
    * {
        background: 0 0 !important;
        box-shadow: none !important;
        color: #000 !important;
        text-shadow: none !important
    }

    a,
    a:visited {
        text-decoration: underline
    }

    a[href]:after {
        content: " (" attr(href) ")"
    }

    a[href^='#']:after,
    a[href^='javascript:']:after {
        content: ''
    }

    blockquote {
        border: 1px solid #4d4743;
        page-break-inside: avoid
    }

    img {
        page-break-inside: avoid
    }

    img {
        max-width: 100% !important
    }

    @page {
        margin: .5cm
    }

    h2,
    h3,
    p {
        orphans: 3;
        widows: 3
    }

    h2,
    h3 {
        page-break-after: avoid
    }
}

.help-text {
    margin-top: -.44444rem;
    font-size: .72222rem;
    font-style: italic;
    color: #0a0a0a
}

.menu {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

[data-whatinput=mouse] .menu li {
    outline: 0
}

.menu a {
    line-height: 1;
    text-decoration: none;
    display: block;
    padding: .7rem 1rem
}

.menu a,
.menu select {
    margin-bottom: 0
}

.menu {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row
}

.menu.icon-left a,
.menu.icon-right a,
.menu.icon-top a {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.menu.icon-left li a {
    -webkit-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap
}

.menu.icon-left li a i,
.menu.icon-left li a img,
.menu.icon-left li a svg {
    margin-right: .25rem
}

.menu.icon-right li a {
    -webkit-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap
}

.menu.icon-right li a i,
.menu.icon-right li a img,
.menu.icon-right li a svg {
    margin-left: .25rem
}

.menu.icon-top li a {
    -webkit-flex-flow: column nowrap;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap
}

.menu.icon-top li a i,
.menu.icon-top li a img,
.menu.icon-top li a svg {
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    -ms-grid-row-align: stretch;
    align-self: stretch;
    margin-bottom: .25rem;
    text-align: center
}

.menu .is-active>a {
    background: #f49739;
    color: #fefefe
}

.menu .active>a {
    background: #f49739;
    color: #fefefe
}

.menu .menu-text {
    padding: .7rem 1rem;
    font-weight: 700;
    line-height: 1;
    color: inherit
}

.menu-icon {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 16px;
    cursor: pointer
}

.menu-icon::after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background: #4d4743;
    box-shadow: 0 7px 0 #4d4743, 0 14px 0 #4d4743;
    content: ''
}

.menu-icon:hover::after {
    background: #f49739;
    box-shadow: 0 7px 0 #f49739, 0 14px 0 #f49739
}

.dropdown.menu a {
    padding: .7rem 1rem
}

[data-whatinput=mouse] .dropdown.menu a {
    outline: 0
}

.dropdown.menu .is-active>a {
    background: 0 0;
    color: #fefefe
}

.top-bar {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.top-bar,
.top-bar ul {
    background-color: transparent
}

.top-bar ul ul {
    background-color: #fefefe
}

.top-bar .top-bar-left,
.top-bar .top-bar-right {
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%
}

.top-bar {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
}

.top-bar .top-bar-left {
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    margin-right: auto
}

.top-bar .top-bar-right {
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    margin-left: auto
}

.top-bar-title {
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin: 0
}

.top-bar-left,
.top-bar-right {
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto
}

@media screen and (max-width:63.9375em) {
    .show-for-large {
        display: none !important
    }
}

.site-header {
    position: relative;
    overflow: hidden
}

@media print,
screen and (min-width:40em) {
    .site-title-bar {
        display: none !important
    }
}

.site-desktop-title a {
    font-weight: 700
}

.title-bar-title a {
    font-size: 1rem;
    color: #4d4743
}

.menu-icon {
    position: absolute;
    right: 1rem;
    top: 1.7rem
}

.top-bar .top-bar-title a {
    font-size: 1rem;
    line-height: 1.8
}

.top-bar .menu a {
    padding: 1rem;
    line-height: 1
}
@media screen and (max-width:39.9375em) {
    .top-bar .menu a {
        font-size: 13px;
        padding: 1rem 0.5rem;
    }
}

.top-bar .menu a {
    margin-right: 0.5rem
}

.top-bar .menu li.is-active>a {
    color: #fefefe;
    background: #f49739
}

.top-bar .dropdown.menu:first-child>li.is-dropdown-submenu-parent>a::after {
    display: none
}

@media screen and (max-width:39.9375em) {
    .site-navigation {
        padding: 0
    }
}

.post-navigation::after {
    clear: both
}

.nav-next {
    float: right
}

svg {
    max-width: 100%;
    height: auto
}

#wpox_logo {
    height: 3rem;
    width: auto;
    display: block;
    margin: .25rem 1rem .25rem 5%
}

.menu-icon::after {
    height: 3px !important
}

body.home footer.footer {
    display: none
}

body.home .title-bar-title,
body.home .top-bar-title {
    visibility: hidden
}

body.home .logo-bar-wrapper {
    z-index: -1;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    -webkit-transform-origin: 10vw 40svh;
    -ms-transform-origin: 10vw 40svh;
    transform-origin: 10vw 40svh;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-animation: scale-in cubic-bezier(0, .03, 0, 1.01) 6s;
    animation: scale-in cubic-bezier(0, .03, 0, 1.01) 6s
}

body.home .logo-bar-wrapper .logo-bar {
    top: 30svh;
    height: 25svh;
    max-height: 20vw;
    -webkit-transform-origin: 40vw 50svh;
    -ms-transform-origin: 40vw 50svh;
    transform-origin: 40vw 50svh;
    -webkit-animation-name: wp_fan_front;
    animation-name: wp_fan_front;
}

body.home #front-page-logo {
    -webkit-animation: fade-in ease-out 3s;
    animation: fade-in ease-out 3s;
    opacity: 1;
    background: url(./wpox-logo.svg) no-repeat;
    background-size: contain;
    display: block;
    position: fixed;
    top: 29svh;
    left: 10vw;
    width: 80vw;
    height: 27svh;
}

body.home .main-content-full-width>.page {
    -webkit-animation: fade-in ease 5s;
    animation: fade-in ease 5s;
    opacity: 1;
    position: fixed;
    left: 11vw;
    right: 11vw;
    top: 70svh;
}

@media screen and (max-width:39.9375em) {
    body.home .main-content-full-width>.page {
        top: 60svh;
    }
}

@media screen and (max-width:39.9375em) {
    .logo-bar-wrapper {
        position: absolute;
        top: 0;
        height: 4.5rem
    }
}

.logo-bar {
    background: #f49739;
    width: 150vw;
    height: 2.5rem;
    position: absolute;
    opacity: .4;
    -webkit-animation: wp_fan ease 12s infinite;
    animation: wp_fan ease 12s infinite;
    -webkit-transform-origin: 20% 50%;
    -ms-transform-origin: 20% 50%;
    transform-origin: 20% 50%;
    left: -25vw;
    top: 14%;
    z-index: -1
}

.logo-bar:nth-child(1) {
    -webkit-animation-delay: -1s;
    animation-delay: -1s
}

.logo-bar:nth-child(2) {
    -webkit-animation-delay: -2s;
    animation-delay: -2s
}

.logo-bar:nth-child(3) {
    -webkit-animation-delay: -3s;
    animation-delay: -3s
}

.logo-bar:nth-child(4) {
    -webkit-animation-delay: -4s;
    animation-delay: -4s
}

.logo-bar:nth-child(5) {
    -webkit-animation-delay: -5s;
    animation-delay: -5s
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0
    }

    10% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fade-in {
    0% {
        opacity: 0
    }

    10% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes scale-in {
    0% {
        -webkit-transform: scale(5);
        transform: scale(5)
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes scale-in {
    0% {
        -webkit-transform: scale(5);
        transform: scale(5)
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes wp_fan {
    0% {
        -webkit-transform: rotateZ(-3deg);
        transform: rotateZ(-3deg)
    }

    50% {
        -webkit-transform: rotateZ(3deg);
        transform: rotateZ(3deg)
    }

    100% {
        -webkit-transform: rotateZ(-3deg);
        transform: rotateZ(-3deg)
    }
}

@keyframes wp_fan {
    0% {
        -webkit-transform: rotateZ(-3deg);
        transform: rotateZ(-3deg)
    }

    50% {
        -webkit-transform: rotateZ(3deg);
        transform: rotateZ(3deg)
    }

    100% {
        -webkit-transform: rotateZ(-3deg);
        transform: rotateZ(-3deg)
    }
}

@-webkit-keyframes wp_fan_front {
    0% {
        -webkit-transform: rotateZ(-3deg);
        transform: rotateZ(-3deg)
    }

    50% {
        -webkit-transform: rotateZ(6deg);
        transform: rotateZ(6deg)
    }

    100% {
        -webkit-transform: rotateZ(-3deg);
        transform: rotateZ(-3deg)
    }
}

@keyframes wp_fan_front {
    0% {
        -webkit-transform: rotateZ(-3deg);
        transform: rotateZ(-3deg)
    }

    50% {
        -webkit-transform: rotateZ(6deg);
        transform: rotateZ(6deg)
    }

    100% {
        -webkit-transform: rotateZ(-3deg);
        transform: rotateZ(-3deg)
    }
}

html {
    overflow-y: scroll;
    overflow-x: hidden
}

.main-container {
    padding-right: .55556rem;
    padding-left: .55556rem;
    max-width: 44.44444rem;
    margin: 0 auto
}

@media print,
screen and (min-width:40em) {
    .main-container {
        padding-right: .83333rem;
        padding-left: .83333rem
    }
}

article {
    margin-bottom: 1rem
}

.main-grid {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap
}

.main-grid>main {
    margin-top: 1rem
}

@media print,
screen and (min-width:40em) {
    .main-grid>main {
        margin-top: 3rem
    }
}

.main-grid .main-content-full-width {
    width: calc(100% - 1.66667rem);
    margin-right: .83333rem;
    margin-left: .83333rem
}

.main-grid .main-content {
    width: calc(100% - 1.11111rem);
    margin-right: .55556rem;
    margin-left: .55556rem
}

@media print,
screen and (min-width:40em) {
    .main-grid .main-content {
        width: calc(66.66667% - 1.66667rem);
        margin-right: .83333rem;
        margin-left: .83333rem
    }
}

.main-container-wrapper {
    min-height: calc(100svh - 10.25rem)
}

footer.footer {
    overflow: hidden;
    position: relative;
    color: #4d4743;
    font-size: 90%;
    margin-top: 2rem
}

footer.footer .logo-bar {
    -webkit-transform-origin: 110vw 40svh;
    -ms-transform-origin: 110vw 40svh;
    transform-origin: 110vw 40svh
}

footer.footer .footer-divider {
    padding: 0 1em
}

footer.footer a {
    color: #4d4743;
    text-decoration: underline
}

footer.footer a:hover {
    color: #0a0a0a
}

.footer-container {
    padding-right: .55556rem;
    padding-left: .55556rem;
    max-width: 44.44444rem;
    margin: 0 auto
}

@media print,
screen and (min-width:40em) {
    .footer-container {
        padding-right: .83333rem;
        padding-left: .83333rem
    }
}
@media screen and (max-width: 40em) {
    .footer-grid {
        font-size: 10px;
    }
    .footer.footer .footer-divider {
        visibility: hidden;
        width: 0px;
        padding: 0px 0.5em;
    }
}

.footer-grid {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    padding: 1.66667rem 0
}

.footer-grid ul {
    list-style-type: none;
    margin: 0;
    padding: 0
}

.main-container a {
    position: relative;
    transition: all ease-in-out .2s;
    box-shadow: inset 0 -.25em 0 0 #f49739
}

.main-container a:hover {
    box-shadow: inset 0 -1.5em 0 0 #f49739;
    color: #fefefe
}

.site-header .menu a {
    color: #4d4743;
    font-weight: 700;
    position: relative;
    transition: color, box-shadow ease-in-out .2s;
    box-shadow: inset 0 -.5em 0 0 #f49739;
}

.site-header .menu a:hover {
    box-shadow: inset 0 -4em 0 0 #f49739;
    color: #fefefe;
}

iframe {
    max-width: 100%;
    background: #eee
}