@import"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap";

@-webkit-keyframes slideOut {
    0% {
        width: 300px
    }

    100% {
        width: 330px
    }
}

@keyframes slideOut {
    0% {
        width: 300px
    }

    100% {
        width: 330px;
    }
}

@-webkit-keyframes slideUp {
    0% {
        opacity: .1
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@keyframes slideUp {
    0% {
        opacity: .1
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@-webkit-keyframes fadeUp {
    0% {
        opacity: .1;
        background-position: center 15%
    }

    100% {
        opacity: 1;
        background-position: center 40%
    }
}

@keyframes fadeUp {
    0% {
        opacity: .1;
        background-position: center 15%
    }

    100% {
        opacity: 1;
        background-position: center 40%
    }
}

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

* {
    font-family: "Montserrat",sans-serif;
    font-size: 18px;
    font-weight: 300
}

@media screen and (min-width: 1600px) {
    * {
        font-size: 20px
    }
}

@media screen and (max-width: 1150px) {
    * {
        font-size: 16px
    }
}

.bg-white {
    background-color: white !important;
}

strong {
    font-weight: 700
}

h3, h4 {
    font-weight: 600;
    color: #fff;
    margin: 0
}

h4 {
    font-size: 28px
}

@media screen and (max-width: 1480px) {
    h4 {
        font-size: 22px
    }
}

body {
    margin: 0
}

#header {
    height: 570px;
    width: 100%
}

#header .header_bg {
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
    -webkit-animation: fadeUp 2.5s;
    animation: fadeUp 2.5s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    opacity: .1
}

#header .header_txt {
    position: relative;
    display: inline-block;
    padding: 50px 150px 60px 280px;
    background-color: #c43f21;
    mix-blend-mode: multiply;
    top: -80px;
    max-width: 95%;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px
}

@media screen and (max-width: 1480px) {
    #header .header_txt {
        padding: 50px 50px 60px 280px;
        width: 95%
    }
}

#header .header_txt h1 {
    margin: 30px 0 0;
    color: #fff;
    text-transform: uppercase;
    font-size: 45px;
    font-weight: 600
}

@media screen and (max-width: 1480px) {
    #header .header_txt h1 {
        font-size: 40px
    }
}

#intro {
    background-color: rgba(32,0,112,.04);
    margin-top: 150px
}

#intro .intro {
    width: 45%;
    margin: 0 auto;
    padding: 100px 0
}

#intro .intro p {
    max-width: 95%
}

#intro .intro .vertical_bar {
    display: flex;
    margin-bottom: 50px;
    align-items: center
}

#intro .intro .vertical_bar span {
    height: 120px;
    width: 7px;
    background-color: #cb5e48;
    border-radius: 5px;
    margin-right: 50px;
    padding-left: 3px
}

#intro .intro .vertical_bar h3 {
    max-width: 70%;
    margin: 0;
    font-size: 44px;
    font-weight: 400;
    font-style: italic;
    color: #000
}

@media screen and (max-width: 1480px) {
    #intro .intro .vertical_bar h3 {
        max-width: unset
    }
}

.spacer {
    height: 100px
}

.spacer_sml {
    height: 50px
}

#modules {
    display: flex;
    flex-direction: column
}

#modules .row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 90%;
    margin: 0 auto
}

#modules .row * {
    flex: 1
}

#modules .row .left, #modules .row .right {
    background-color: rgba(32,0,112,.04);
    display: flex;
    margin-right: 25px
}

#modules .row .left .text_box, #modules .row .right .text_box {
    display: block;
    position: relative;
    padding-left: 25px;
    height: 600px;
    text-align: center
}

#modules .row .left .text_box .mob_img, #modules .row .right .text_box .mob_img {
    display: none
}

#modules .row .left .text_box .num_bar, #modules .row .right .text_box .num_bar {
    text-align: left;
    margin-top: 50px;
    background-color: #bd3d20;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px
}

#modules .row .left .text_box .num_bar h3, #modules .row .right .text_box .num_bar h3 {
    padding: 5px 0;
    margin-left: 25px;
    color: #fff
}

#modules .row .left .text_box .text, #modules .row .right .text_box .text {
    padding-top: 50px;
    margin: 0 auto;
    width: 80%
}

#modules .row .left .text_box .text h4, #modules .row .right .text_box .text h4 {
    color: #000
}

#modules .row .left .text_box .more_btn, #modules .row .right .text_box .more_btn {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%)
}

#modules .row .left .text_box .more_btn a, #modules .row .right .text_box .more_btn a {
    margin: 0 auto;
    text-decoration: none;
    text-transform: uppercase;
    color: #bd3d20;
    background-color: #fff;
    padding: 5px 45px;
    border: 1px solid #999;
    border-radius: 50px;
    filter: drop-shadow(3px 3px 6px #999999)
}

#modules .row .left .text_box .more_btn a:hover, #modules .row .right .text_box .more_btn a:hover {
    color: #fff;
    background-color: #bd3d20
}

#modules .row .left .img, #modules .row .right .img {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat
}

#module_container {
    background-color: rgba(32,0,112,.04)
}

.odd {
    background-color: #e9e7ec
}

.module {
    padding: 50px 0
}

.module .contain {
    height: 420px;
    max-width: 70%;
    margin: 0 auto;
    position: relative
}

.contain--h-auto {
    height: auto !important;
}

@media screen and (min-width: 1600px) {
    .module .contain {
        max-width: 60%
    }
}

@media screen and (max-width: 1280px) {
    .module .contain {
        height: 380px;
        max-width: 75%
    }
}

.module .contain .wrapper {
    margin-left: 200px
}

.module .contain .wrapper .mod_title {
    background-color: #c43f21;
    padding: 10px 50px 10px 240px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px
}

.module .contain .wrapper .mod_title h3 {
    margin: 0;
    color: #fff
}

.module .contain .wrapper .mod_text {
    padding-left: 240px;
    padding-right: 25px
}

.module .contain .mod_img {
    position: absolute;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 400px;
    height: 400px;
    border: 8px solid #c43f21;
    border-radius: 50%
}

@media screen and (max-width: 1480px) {
    .module .contain .wrapper {
        margin-left: 150px
    }

    .module .contain .mod_img {
        width: 300px;
        height: 300px
    }
}

#bottom_nav {
    padding: 50px 0
}

#bottom_nav h4 {
    color: #200070
}

#bottom_nav a {
    text-decoration: none;
    color: #200070
}

#bottom_nav .back {
    background-image: url(arrow.png);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
    padding-left: 50px
}

#bottom_nav .forward {
    background-image: url(right-arrow.png);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
    padding-right: 50px
}

#bottom_nav .nav_wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around
}

.menu-main-container {
    position: absolute;
    right: 0;
    z-index: 5
}

.menu-main-container ul {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end
}

.menu-main-container ul li {
    margin: 5px 0;
    padding: 10px;
    width: 300px;
    background-color: #333
}

.menu-main-container ul li a {
    display: block;
    text-decoration: none;
    color: #a9a9a9
}

.menu-main-container ul li.current_page_item {
    background-color: #c43f21;
    -webkit-animation: slideOut 1s ease;
    animation: slideOut 1s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.menu-main-container ul li.current_page_item a {
    color: #fff;
    font-weight: 700
}

.menu-main-container #nav_mobile {
    display: none
}

#footer .container {
    padding: 75px;
    background-color: #c43f21;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between
}

#footer .container .copyright, #footer .container .cookies a {
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: #fff;
    font-size: 12px;
    font-weight: 400
}

.hideme {
    opacity: .1;
    transform: translateY(10vh)
}

.showme {
    -webkit-animation: slideUp 1s ease;
    animation: slideUp 1s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@media screen and (max-width: 1024px) {
    #header {
        height: 400px
    }

    #header .header_bg {
        height: 100%
    }

    #header .header_txt {
        padding: 50px 150px 60px 80px
    }

    #module_container .module .contain {
        height: 420px;
        max-width: 80%
    }

    #intro .intro {
        width: 75%
    }
}

@media screen and (max-width: 960px) {
    * {
        font-size: 22px
    }

    #nav_mobile {
        display: block;
        position: fixed;
        z-index: 5;
        width: 100%;
        height: 40px;
        background-color: rgba(230,230,250,.8);
        transition: transform 500ms
    }

    #nav_mobile.hideMenu {
        transform: translateY(-50px)
    }

    #nav_mobile #menu {
        position: absolute;
        top: 15px;
        left: 25px;
        display: block;
        width: 22px;
        height: 19px;
        z-index: 15
    }

    #nav_mobile #menu span {
        position: absolute;
        top: 30%;
        left: 0;
        display: block;
        width: 100%;
        height: 3px;
        margin-top: -2px;
        background-color: #c43f21;
        font-size: 0px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        transition: background-color .3s
    }

    #nav_mobile #menu span:before, #nav_mobile #menu span:after {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        background: #c43f21;
        content: "";
        transition: transform .3s
    }

    #nav_mobile #menu span:before {
        transform: translateY(-230%)
    }

    #nav_mobile #menu span:after {
        transform: translateY(230%)
    }

    #nav_mobile .open span {
        background-color: rgba(0,0,0,0) !important
    }

    #nav_mobile .open span:before {
        transform: translateY(0) rotate(45deg) !important
    }

    #nav_mobile .open span:after {
        transform: translateY(0) rotate(-45deg) !important
    }

    .menu-main-container {
        display: none;
        background-color: rgba(255,255,255,.8);
        box-shadow: 0 0 30px #000;
        width: 100%
    }

    .menu-main-container ul li {
        width: 70%
    }

    .menu-main-container ul li.current_page_item {
        -webkit-animation: unset;
        animation: unset;
        width: 80%
    }

    #header {
        height: 350px;
        position: relative
    }

    #header .header_bg {
        background-size: 100%
    }

    #header .header_txt {
        position: absolute;
        top: unset;
        bottom: 0;
        padding: 0;
        mix-blend-mode: unset;
        opacity: .8;
        max-width: unset;
        width: 100%;
        border-radius: unset;
        text-align: center
    }

    #header .header_txt h1 {
        margin: 0;
        padding: 15px;
        font-size: 32px
    }

    #intro {
        margin: 0
    }

    #intro .intro {
        width: 100%;
        padding: 5%
    }

    #intro .intro .vertical_bar {
        margin: unset
    }

    #intro .intro .vertical_bar span {
        height: 60px;
        width: 3px;
        margin-right: 5%
    }

    #intro .intro .vertical_bar h3 {
        font-size: 28px;
        max-width: unset
    }

    .spacer {
        height: 5%
    }

    #modules .spacer_sml {
        height: 0
    }

    #modules .row {
        width: 100%;
        flex-direction: column
    }

    #modules .row .left, #modules .row .right {
        margin-right: unset;
        margin-bottom: 25px;
        flex-direction: column
    }

    #modules .row .left .img, #modules .row .right .img {
        display: none
    }

    #modules .row .left .text_box, #modules .row .right .text_box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 0
    }

    #modules .row .left .text_box .mob_img, #modules .row .right .text_box .mob_img {
        display: block;
        padding-top: 56.25%;
        width: 100%;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat
    }

    #modules .row .left .text_box .num_bar, #modules .row .right .text_box .num_bar {
        margin-top: 5%;
        border-radius: unset;
        width: 100%
    }

    #modules .row .left .text_box .text, #modules .row .right .text_box .text {
        padding-top: 5%
    }

    #modules .row .left .text_box .text h4, #modules .row .right .text_box .text h4 {
        font-size: 26px
    }

    #modules .row .left .text_box .more_btn, #modules .row .right .text_box .more_btn {
        position: unset;
        bottom: unset;
        left: unset;
        transform: unset;
        margin: 10% 0
    }

    .hideme {
        transform: translateY(15vh)
    }

    #module_container {
        display: flex;
        flex-direction: column
    }

    #module_container .module {
        padding: 5% 0
    }

    #module_container .module .contain {
        width: 100%;
        height: auto;
        max-width: unset
    }

    #module_container .module .contain .wrapper {
        margin: 0
    }

    #module_container .module .contain .wrapper .mod_title {
        border-radius: unset;
        padding: 5%;
        text-align: center
    }

    #module_container .module .contain .wrapper .mod_title h4 {
        font-size: 26px
    }

    #module_container .module .contain .wrapper .mod_text {
        padding: 0 5%
    }

    #module_container .module .contain .mod_img {
        position: relative;
        border: unset;
        border-radius: unset;
        width: 100%;
        height: unset;
        padding-top: 56.25%
    }

    #bottom_nav {
        padding: 10% 0
    }

    #bottom_nav h4 {
        font-size: 22px
    }

    #footer .container {
        padding: 5%;
        flex-direction: column;
        justify-content: space-between
    }

    #footer .container .copyright, #footer .container .cookies {
        font-size: 14px;
        margin: 5px 0
    }

    #footer .container .copyright a, #footer .container .cookies a {
        font-size: 14px
    }
}

@media screen and (max-width: 640px) {
    * {
        font-size: 14px
    }

    #nav_mobile {
        display: block;
        position: fixed;
        z-index: 5;
        width: 100%;
        height: 40px;
        background-color: rgba(230,230,250,.8);
        transition: transform 500ms
    }

    #nav_mobile.hideMenu {
        transform: translateY(-50px)
    }

    #nav_mobile #menu {
        position: absolute;
        top: 15px;
        left: 25px;
        display: block;
        width: 22px;
        height: 19px;
        z-index: 15
    }

    #nav_mobile #menu span {
        position: absolute;
        top: 30%;
        left: 0;
        display: block;
        width: 100%;
        height: 3px;
        margin-top: -2px;
        background-color: #c43f21;
        font-size: 0px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        transition: background-color .3s
    }

    #nav_mobile #menu span:before, #nav_mobile #menu span:after {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        background: #c43f21;
        content: "";
        transition: transform .3s
    }

    #nav_mobile #menu span:before {
        transform: translateY(-230%)
    }

    #nav_mobile #menu span:after {
        transform: translateY(230%)
    }

    #nav_mobile .open span {
        background-color: rgba(0,0,0,0) !important
    }

    #nav_mobile .open span:before {
        transform: translateY(0) rotate(45deg) !important
    }

    #nav_mobile .open span:after {
        transform: translateY(0) rotate(-45deg) !important
    }

    .menu-main-container {
        display: none;
        background-color: rgba(255,255,255,.8);
        box-shadow: 0 0 30px #000;
        width: 100%
    }

    .menu-main-container ul li {
        width: 70%
    }

    .menu-main-container ul li.current_page_item {
        -webkit-animation: unset;
        animation: unset;
        width: 80%
    }

    #header {
        height: 230px;
        position: relative
    }

    #header .header_bg {
        background-size: 130%
    }

    #header .header_txt {
        position: absolute;
        top: unset;
        bottom: 0;
        padding: 0;
        mix-blend-mode: unset;
        opacity: .8;
        max-width: unset;
        width: 100%;
        border-radius: unset;
        text-align: center
    }

    #header .header_txt h1 {
        margin: 0;
        padding: 5px;
        font-size: 22px
    }

    #intro {
        margin: 0
    }

    #intro .intro {
        width: 100%;
        padding: 5%
    }

    #intro .intro .vertical_bar {
        margin: unset
    }

    #intro .intro .vertical_bar span {
        height: 60px;
        width: 3px;
        margin-right: 5%
    }

    #intro .intro .vertical_bar h3 {
        font-size: 20px;
        max-width: unset
    }

    .spacer {
        height: 5%
    }

    #modules .spacer_sml {
        height: 0
    }

    #modules .row {
        width: 100%;
        flex-direction: column
    }

    #modules .row .left, #modules .row .right {
        margin-right: unset;
        margin-bottom: 25px;
        flex-direction: column
    }

    #modules .row .left .img, #modules .row .right .img {
        display: none
    }

    #modules .row .left .text_box, #modules .row .right .text_box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 0
    }

    #modules .row .left .text_box .mob_img, #modules .row .right .text_box .mob_img {
        display: block;
        padding-top: 56.25%;
        width: 100%;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat
    }

    #modules .row .left .text_box .num_bar, #modules .row .right .text_box .num_bar {
        margin-top: 50px !important;
        border-radius: unset;
        width: 100%
    }

    #modules .row .left .text_box .text, #modules .row .right .text_box .text {
        padding-top: 5%
    }

    #modules .row .left .text_box .text h4, #modules .row .right .text_box .text h4 {
        font-size: 26px
    }

    #modules .row .left .text_box .more_btn, #modules .row .right .text_box .more_btn {
        position: unset;
        bottom: unset;
        left: unset;
        transform: unset;
        margin: 10% 0
    }

    .hideme {
        transform: translateY(15vh)
    }

    #module_container {
        display: flex;
        flex-direction: column
    }

    #module_container .module {
        padding: 5% 0
    }

    #module_container .module .contain {
        width: 100%;
        height: auto;
        max-width: unset
    }

    #module_container .module .contain .wrapper {
        margin: 0
    }

    #module_container .module .contain .wrapper .mod_title {
        border-radius: unset;
        padding: 5%;
        text-align: center
    }

    #module_container .module .contain .wrapper .mod_title h4 {
        font-size: 20px
    }

    #module_container .module .contain .wrapper .mod_text {
        padding: 0 5%
    }

    #module_container .module .contain .mod_img {
        position: relative;
        border: unset;
        border-radius: unset;
        width: 100%;
        height: unset;
        padding-top: 56.25%
    }

    #bottom_nav {
        padding: 10% 0
    }

    #bottom_nav h4 {
        font-size: 18px
    }

    #footer .container {
        padding: 5%;
        flex-direction: column;
        justify-content: space-between
    }

    #footer .container .copyright, #footer .container .cookies {
        font-size: 10px;
        margin: 5px 0
    }

    #footer .container .copyright a, #footer .container .cookies a {
        font-size: 10px
    }
}