@charset "UTF-8";
@font-face {
    font-family: 'Gotham Black';
    src: url('assets/fonts/Gotham-Pro-Black.woff2') format('woff2'), url('assets/fonts/Gotham-Pro-Black.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham Black Italic';
    src: url('assets/fonts/Gotham-Pro-Black-Italic.woff2') format('woff2'), url('assets/fonts/Gotham-Pro-Black-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham Medium';
    src: url('assets/fonts/Gotham-Pro-Medium.woff2') format('woff2'), url('assets/fonts/Gotham-Pro-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham Medium Italic';
    src: url('assets/fonts/Gotham-Pro-Medium-Italic.woff2') format('woff2'), url('assets/fonts/Gotham-Pro-Medium-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham Book';
    src: url('assets/fonts/gotham-book.woff2') format('woff2'), url('assets/fonts/gotham-book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*
Theme Name: KOTUG Theme
Version: 1.0
Author: DodoTech
Author URI: https://dodotech.dev
Description: The KOTUG Theme
Text Domain: kotug
*/

/* == THEME == */
:root {
    --color-default: #000000;
    --color-default-light: #313131;
    --color-default-inactive: var(--color-default) 0.25;
    --color-action: #e30b17;
    --color-action-dark: #ad0911;
    --color-action-inactive: var(--color-action) 0.25;
    --color-support: #005a96;
    --color-support-dark: #0e3b57;
    --color-support-inactive: var(--color-support) 0.25;
    --color-whites: #ffffff;
    --color-whites-dark: #e3e3e3;
    --color-whites-inactive: var(--color-whites) 0.25;
}

html {
    height: 100vh;
}

#page {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-main {
    flex-grow: 1;
}

body {
    background-color: var(--color-whites-dark);
}

h1 {
    font-family: "Gotham Black", sans-serif;
    font-size: 84px;
    line-height: 68px;
    letter-spacing: -2px;
    margin: 20px 0;
    color: var(--color-support);
}

h2 {
    font-family: "Gotham Black", sans-serif;
    font-size: 58px;
    letter-spacing: -2px;
    line-height: 52px;
    margin: 20px 0;
    text-transform: uppercase;
    color: var(--color-support);
}

h3 {
    font-family: "Gotham Black", sans-serif;
    font-size: 32px;
    line-height: 28px;
    letter-spacing: -1px;
    margin: 20px 0;
    color: var(--color-support);
}

h4 {
    font-family: "Gotham Black", sans-serif;
    font-size: 24px;
    line-height: 22px;
    margin: 15px 0;
    color: var(--color-support);
}

h5 {
    font-family: "Gotham Black", sans-serif;
    font-size: 20px;
    line-height: 18px;
    margin: 15px 0;
}

h6 {
    font-family: "Gotham Black", sans-serif;
    font-size: 16px;
    line-height: 15px;
    margin: 0;
}

.sub-title {
    font-family: "Gotham Black", sans-serif;
    font-size: 18px;
    color: var(--color-support);
    margin-bottom: 25px;
}

body {
    font-family: "Gotham Book", sans-serif;
    font-size: 16px;
    line-height: 25px;
}

p {
    font-family: "Gotham Book", sans-serif;
    font-size: 16px;
    line-height: 25px;
    margin: 15px 0;
}

p > small {
    color: var(--color-support);
    font-size: 13px;
    line-height: 20px;
    margin: 10px 0;
}

p > li {
    font-size: 16px;
    line-height: 25px;
    margin: 10px 0;
}

a.btn {
    font-family: "Gotham Black", sans-serif;
}

.btn {
    font-family: "Gotham Black", sans-serif;
    border-radius: 0;
    text-transform: uppercase;
}

.btn:disabled {
    opacity: 25%;
}

.btn.goal, .wp-block-button__link  {
    transition: 0.35s;
    background-color: var(--color-support);
    color: var(--color-whites);
    border-radius: 0;
}

.btn.goal:hover,.btn.goal:focus, .wp-block-button__link:hover,.wp-block-button__link:focus  {
    transition: 0.15s;
    -moz-box-shadow:    0 3px 0 0 var(--color-support-dark);
    -webkit-box-shadow: 0 3px 0 var(--color-support-dark);
    box-shadow:         0 3px 0 var(--color-support-dark);
    color: var(--color-whites);
}

.btn.goal:active, .wp-block-button__link:active {
    transition: 0.075s;
    background-color: var(--color-support-dark);
}

.wp-block-button a:hover {
    color: var(--color-whites);
}

.pum-content.popmake-content:focus-visible,
.pum-content *:focus,
.pum-overlay .pum-content {
    outline: none !important;
}

.btn.white {
    transition: 0.35s;
    background-color: var(--color-whites);
    color: var(--color-support);
}

.btn.white:hover,.btn.white:focus {
    transition: 0.15s;
    -moz-box-shadow:    0 3px 0 0 var(--color-support);
    -webkit-box-shadow: 0 3px 0 var(--color-support);
    box-shadow:         0 3px 0 var(--color-support);
}

.btn.white:active {
    transition: 0.075s;
    background-color: var(--color-support-dark);
}

.btn.ghost {
    transition: 0.35s;
    background-color: var(--color-whites);
    color: var(--color-support);
    border-color: var(--color-support);
    border-width: 2px;
}

.btn.ghost:hover,.btn.ghost:focus {
    transition: 0.15s;
    -moz-box-shadow:    0 3px 0 0 var(--color-support-dark);
    -webkit-box-shadow: 0 3px 0 var(--color-support-dark);
    box-shadow:         0 3px 0 var(--color-support-dark);
}

.btn.ghost:active {
    transition: 0.075s;
    background-color: var(--color-support-dark);
}

.btn.red {
    transition: 0.35s;
    background-color: var(--color-action);
    color: var(--color-whites);
}

.btn.red:hover,.btn.red:focus {
    transition: 0.15s;
    -moz-box-shadow:    0 3px 0 0 var(--color-action-dark);
    -webkit-box-shadow: 0 3px 0 var(--color-action-dark);
    box-shadow:         0 3px 0 var(--color-action-dark);
}

.btn.red:active {
    transition: 0.075s;
    background-color: var(--color-action-dark);
}

.btn.red:disabled {
    opacity: 25%;
}

a {
    transition: 0.35s;
    color: var(--color-support);
    text-decoration: none;
    text-transform: none;
}

a:hover, a:focus {
    transition: 0.15s;
    color: var(--color-support);
    text-decoration: underline;
}

a:active {
    transition: 0.075s;
    color: var(--color-support-dark);
    text-decoration: underline;
}

a:disabled {
    color: var(--color-whites);
}

.form-check-input[type=checkbox] {
    border-radius: 0;
}

.form-check-input[type=checkbox]:hover:not(:checked):not(:disabled) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23005a96' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.form-check-input[type=checkbox]:checked {
    background-color: var(--color-support);
}

.form-check-input:disabled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cline x1='7' y1='7' x2='13' y2='13' fill='none' stroke='grey' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3E%3Cline x1='13' y1='7' x2='7' y2='13' fill='none' stroke='grey' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3E%3C/svg%3E");
}

.form-check-input:disabled~.form-check-label, .form-check-input[disabled]~.form-check-label {
    text-decoration: line-through;
    text-decoration-color: var(--color-support);
    text-decoration-style: solid;
}

.form-check-input[type=radio]:hover:not(:checked):not(:disabled) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23005a96'/%3e%3c/svg%3e");
}

.form-check-input[type=radio]:checked {
    background-color: var(--color-whites);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23005a96'/%3e%3c/svg%3e");
}

input {
    border-color: #707070;
    border-style: solid;
    border-width: 2px;
    border-radius: 0;
    -webkit-box-shadow: inset -2px 2px 0 0 rgba(0,0,0,0.35);
    -moz-box-shadow: inset -2px 2px 0 0 rgba(0,0,0,0.35);
    box-shadow: inset -2px 2px 0 0 rgba(0,0,0,0.35);
}

input:active, input:focus {
    outline: 0;
    border-color: var(--color-support);
    border-style: solid;
    border-width: 2px;
    border-radius: 0;
    -webkit-box-shadow: inset -2px 2px 0 0 var(--color-support-dark);
    -moz-box-shadow: inset -2px 2px 0 0 var(--color-support-dark);
    box-shadow: inset -2px 2px 0 0 var(--color-support-dark);
}

input:disabled {
    border-color: rgba(112, 112, 112, 0.35);
    border-style: solid;
    border-width: 2px;
    border-radius: 0;
    -webkit-box-shadow: inset -2px 2px 0 0 rgba(0,0,0,0.35);
    -moz-box-shadow: inset -2px 2px 0 0 rgba(0,0,0,0.35);
    box-shadow: inset -2px 2px 0 0 rgba(0,0,0,0.35);
}

select {
    font-family: "Gotham Book", sans-serif;
    color: var(--color-support);
    border-color: #707070;
    border-style: solid;
    border-width: 3px;
    border-radius: 0;
    padding: 5px;
}

select:active, select:focus {
    outline: 0;
    border-color: var(--color-support);
}

/* == END THEME == */


/* == WORDPRESS COLORS == */

/* TEXT COLOR */
.has-default-kotug-black-color {
    color: var(--color-default);
}
.has-light-kotug-black-color {
    color: var(--color-default-light);
}
.has-default-kotug-red-color {
    color: var(--color-action);
}
.has-dark-kotug-red-color {
    color: var(--color-action-dark);
}
.has-default-kotug-blue-color {
    color: var(--color-support);
}
.has-dark-kotug-blue-color {
    color: var(--color-support-dark);
}
.has-default-kotug-white-color {
    color: var(--color-whites);
}
.has-dark-kotug-white-color {
    color: var(--color-whites-dark);
}

/* BACKGROUND COLOR */
.has-default-kotug-black-background-color {
    background-color: var(--color-default);
}
.has-light-kotug-black-background-color {
    background-color: var(--color-default-light);
}
.has-default-kotug-red-background-color {
    background-color: var(--color-action);
}
.has-dark-kotug-red-background-color {
    background-color: var(--color-action-dark);
}
.has-default-kotug-blue-background-color {
    background-color: var(--color-support);
}
.has-dark-kotug-blue-background-color {
    background-color: var(--color-support-dark);
}
.has-default-kotug-white-background-color {
    background-color: var(--color-whites);
}
.has-dark-kotug-white-background-color {
    background-color: var(--color-whites-dark);
}

/* == END WORDPRESS COLORS == */


a.no-style {
    color: inherit;
    text-decoration: inherit;
}

.bg-blue {
    background-color: var(--color-support);
}

#breadcrumbs {
    padding-top: 25px;
    padding-bottom: 25px;
    text-transform: none;
    margin: 0;
}
.breadcrumb_last {
    display: none;
}

.content {
    padding-top: 50px;
    padding-bottom: 50px;
}

.content-body {
    text-transform: none;
}

.content-body h3 {
    margin-top: 50px;
}

.page-content {
    display: flex;
    flex-direction: row;
}

.page-timeline {
    border-left-color: var(--color-whites);
    border-left-style: solid;
    border-left-width: 2px;
}

.container-dodo, .container-dodo-desktop {
    width: 100%;
    margin: 0;
    position: relative;
}

.container-dodo {
    padding-left: 20px;
    padding-right: 20px;
}

.container-dodo-desktop {
    padding-left: 0;
    padding-right: 0;
}

.container-dodo.fill-right {
    padding-right: 0;
}
@media (min-width: 700px) {
    .container-dodo {
        padding-left: 40px;
        padding-right: 40px;
    }
    .container-dodo-desktop {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (min-width: 1000px) {
    .container-dodo, .container-dodo-desktop {
        padding-left: 4vw;
        padding-right: 4vw;
    }
}

@media (min-width: 1280px) {
    .container-dodo, .container-dodo-desktop {
        padding-left: 8vw;
        padding-right: 8vw;
    }
}

@media (min-width: 1441px) {
    .container-dodo, .container-dodo-desktop {
        padding-left: 15vw;
        padding-right: 15vw;
    }
}

.page-template-page-project article {
    background-color: var(--color-whites);
}

.anchor-section {
    display: flex;
    flex-direction: column;
    text-transform: none;
}
.anchor-section > span {
    color: grey;
    padding-bottom: 15px;
}
.anchor-section hr {
    height: 2px;
    width: 60px;
}
.anchor-item {
    color: var(--color-support);
    padding-bottom: 0;
}
.anchor-item i {
    padding-left: 5px;
}
.anchor-item.blue {
    padding-bottom: 5px;
}
/* == END THEME == */

/* == NAV BAR == */
.navbar > .container-dodo {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
}

#mobile-nav .accordion-button {
    background-color: var(--color-support);
    border-radius: 0;
    font-size: 20px;
    text-transform: uppercase;
}

#mobile-nav .accordion-button::after {
    background-image: none !important;
}

#mobile-nav h2 {
    margin-top: 0;
}

.accordion-body {
    font-size: 20px;
}

.accordion-body a {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
/* == END NAV BAR == */


/* == TOPBAR == */
#topbar {
    background-color: var(--color-support);
    flex-basis: 64px;
    flex-grow: 0;
    flex-shrink: 0;
    z-index: 21;
}

#topbar.active {
    padding: 10px;
    background-color: var(--color-support-dark);
}

#topbar .navbar-brand {
    position: absolute;
    top: 0;
    padding: 0;
    z-index: 10;
}
.nav-item.header {
    font-family: "Gotham Black", sans-serif;
    color: white;
    cursor: pointer;

    &:hover{
        background-color: var(--color-support);

        .sub-menu{
            display: flex;
        }
    }
}

#topbar.active.active-nav .expertise-btn {
    background-color: var(--color-support);
    position: absolute;
    top: -12px;
    padding: 12px 0;
}

#topbar #search-toggle {
    cursor: pointer;
    font-weight: bold;
    color: var(--color-whites);
    margin-top: 3px;
}

#topbar.active.active-search .search-btn {
    position: relative;
    top: -12px;
    width: 32px;
}

#topbar.active.active-search #search-toggle {
    position: absolute;
    top: 0;
    margin: 0;
    padding: 24px 15px;
    background-color: var(--color-support);
}

.sub-menu{
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    background-color: var(--color-support);

    ul{
        padding-right: 0;
        padding-top: 100px;
        padding-bottom: 100px;
    }

    li:not(:last-child) {
        margin-bottom: 10px;
    }
}
.second-nav-item{
    padding-top: 15px;
    padding-bottom: 15px;
    transition: padding-left 0.1s ease-in-out;
    list-style: none;
    font-family: "Gotham Black", sans-serif;
    color: white;

    i{
        transition: unset;
        color: white;
    }

    h3,h6{
        color: white;
    }

    &:hover, &.active{
        padding-left: 10px;
        background-color: white;
        color: var(--color-support);

        h3, h6, i, p{
            color: var(--color-support);
        }
    }
}

.third-nav-item{
    transition: padding-left 0.1s ease-in-out;
    list-style: none;
    padding-top: 15px;
    padding-bottom: 15px;
    font-family: "Gotham Black", sans-serif;
    color: var(--color-support);

    h6, p, i{
        color: var(--color-support);
    }

    &:hover, &.active{
        padding-left: 10px;
    }

}

.search-container {
    padding-top: 50px;
    padding-bottom: 50px;
}

.search-container .search-input {
    background-color: var(--color-support);
    border: unset;
    box-shadow: unset;
    border-width: 0 0 1px 0;
    border-color: var(--color-whites);
    border-style: solid;
    color: var(--color-whites);
    padding-bottom: 15px;
    width: 100%;
}

.search-container .search-input-group i {
    position: relative;
    left: -20px;
    top: 10px;
}

.search-container .search-input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    text-transform: uppercase;
    color: var(--color-whites);
    opacity: 1; /* Firefox */
    font-style: italic;
}

.search-container .search-input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    text-transform: uppercase;
    color: var(--color-whites);
    font-style: italic;
}

.search-container .search-input::-ms-input-placeholder { /* Microsoft Edge */
    text-transform: uppercase;
    color: var(--color-whites);
    font-style: italic;
}

.search-container .activities {
    margin-top: 50px;
}

.search-container .activities .pillar-group {
    flex-basis: 0;
    flex-grow: 1;
    margin-top: 50px;
    margin-right: 100px;
}

.page-overlay {
    height: 0;
    width: 100%;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    background-color: var(--color-support);
    overflow-x: hidden;
    transition: 0.5s;
}

.menu-overlay {
    width: 80%;
    position: absolute;
    z-index: 20;
    top: 110px;
    overflow-x: hidden;

    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transition: transform 0.1s ease-in-out;
}

.menu-overlay.active {
    transform: translateX(0);
    -webkit-transform: translateX(0);
    transition: transform 0.1s ease-in-out;
}

.menu-overlay .menu {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--color-support);
    width: 100%;
    height: auto;
    min-height: 100%;
}

.menu-overlay .top-bar {
    height: 64px;
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    color: var(--color-whites);
    position: relative;
}

.menu-overlay .top-bar .kotug-logo {
    position: absolute;
    top: 0;
    left: 0;
}

.menu-overlay .menu-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 50px;
    padding-bottom: 25px;
    flex-grow: 1;
}

.menu-overlay .accordion-item {
    background-color: var(--color-support);
}

.menu-overlay .accordion-item .item-title {
    font-family: "Gotham Black", sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 0 !important;
    padding: 0 0 10px 0;
    border-bottom: var(--color-support-dark) solid 1px;
}

.menu-content .sub-items {
    display: flex;
    flex-direction: column;
}

.menu-content .sub-items > a {
    padding: 0.75rem 1.25rem;
}

.bottom-border {
    padding: 1rem 1.25rem;
}

.menu-overlay .accordion-body {
    background-color: var(--color-whites);
}

.menu-overlay .accordion-button:not(.collapsed) {
    color: var(--color-whites);
    background-color: var(--color-support);
    text-decoration: underline;
}

.menu-overlay .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.menu-overlay .accordion-body a {
    padding-top: 0;
    padding-bottom: 0;
}

.menu-item .item-body {
    display: flex;
    flex-direction: column;
    background-color: var(--color-whites);
    padding-top: 20px;
    padding-left: 25px;
    padding-right: 25px;
    font-family: "Gotham Medium", sans-serif;
    font-size: 20px;
}

.menu-item .item-body a {
    border-bottom: 1px solid #cccccc;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

.nav-overlay-content.pillars {
    display: flex;
    flex-direction: row;
    align-content: stretch;
}

.nav-overlay-content.pillars > div {
    overflow: auto;
}

#nav-overlay i.close {
    font-size: 32px;
    float: right;
    margin-top: 20px;
    cursor: pointer;
    padding-top: 64px;
}

.nav-overlay-content {
    height: calc(100vh);
    color: var(--color-whites);
}

.nav-overlay-content .pillar-links {
    flex: 3;
    padding-top: 150px;
    padding-left: 15px;
    overflow: auto;
    max-width: 375px;
}

.nav-overlay-content .pillar-links .nav-pillar-btn {
    margin-left: -25px;
    padding: 15px 0 15px 25px;
    font-family: "Gotham Black", sans-serif;
    font-size: 36px;
}

.nav-overlay-content .pillar-links .nav-pillar-btn:hover {
    cursor: pointer;
}

.nav-overlay-content .pillar-links .nav-pillar-btn.active {
    background-color: var(--color-whites);
    color: var(--color-support);
}

.nav-overlay-content #pillar-sub-links {
    flex: 2;
    padding-top: 205px;
    padding-left: 50px;
    padding-right: 50px;
    display: flex;
    max-width: 400px;

    transform: scaleX(0);
    transform-origin: left;
    transition: transform .1s ease-in-out;
}

.nav-overlay-content #pillar-sub-links hr {
    color: var(--color-support);
}

.nav-overlay-content #pillar-sub-links.active {
    background-color: var(--color-whites);
    transform: scaleX(1);
}

.nav-overlay-content #pillar-sub-links .sub-link {
    display: none;
}

.nav-overlay-content #pillar-sub-links .sub-link.active {
    display: flex;
}

.nav-overlay-content #pillar-sub-links .sub-link .main-items a {
    font-size: 24px;
}

.nav-overlay-content #pillar-photo {
    flex: 2;
    background-size: cover;
    background-position: center center;
}

/* == END TOPBAR == */

/* == YOUTUBE == */
#yt-overlay {
    display: none;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
}
#yt-overlay > div {
    height: 100%;
}
#yt-overlay iframe {
    padding-top: 100px;
    padding-bottom: 100px;
    height: 100%;
    width: 100%;
}

#yt-overlay-close {
    position: absolute;
    top: 50px;
    right: 0;
    color: var(--color-whites);
    font-size: 32px;
}
#yt-overlay-close:hover {
    cursor: pointer;
}
/* == END YOUTUBE == */

.homepage .row {
    padding-bottom: 75px;
    padding-top: 75px;

}

/* == Main Header == */

#bg-video-embed {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
}

#bg-video-embed video {
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 1000ms ease-in-out;
}

#main-header h1 {
    color: var(--color-whites);
}

#main-header .container, #main-header .container > div  {
    height: inherit;
}

#main-header p {
    color: var(--color-whites);
    font-weight: bold;
    font-family: "Gotham Black", sans-serif;
}

.pillar {
    background-color: var(--color-support);
    color: var(--color-whites);
    padding: 15px 20px 10px 20px;
    flex-basis: 20%;

    &:hover {
        cursor: pointer;
    }
}

#pillars, #pillar-links {
    display: flex;
    flex-direction: row;
}

#mobile-nav {
    display: none;
}

@media (min-width: 993px) {
    .mobile-only {
        display: none !important;
    }

    .desktop-only {
        display: block;
    }
}

.mobile-img-header {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
}

@media (max-width: 992px) {
    h1 {
        font-size: 48px;
        line-height: 38px;
    }

    h2 {
        font-size: 32px;
        line-height: 28px;
    }

    #pillars, #pillar-links {
        display: none;
    }
    #mobile-nav {
        display: block;
    }
    .mobile-only {
        display: block;
    }
    .desktop-only {
        display: none !important;
    }
    .timeline-photo .icon-block {
        left: 0!important;
    }
}

@media (max-width: 1200px) {
    .map-row {
        position: relative;
    }
    #office-popup {
        z-index: 100;
        padding: 40px;
        background-color: transparent !important;
        border-right: none !important;
    }
    #office-popup .popup-close {
        margin-right: 40px;
    }
}

@media (min-width: 1200px) {
    .map-info {
        position: relative;
    }
    .position-relative-lg {
        position: relative;
    }
}

/* == END Main Header == */

.pillar-sub {
    flex-basis: 20%;
    background-color: var(--color-whites);
    padding: 20px 20px 0 20px;
}

/* == Map Row == */
.map-row {
    align-items: center;
    display: flex;
}

.map-row h2 {
    color: var(--color-support);
}

.map-row p {
    text-transform: none;
}

.map-row .btn-list {
    margin-top: 50px;
}

.map-row .btn-list .btn {
    margin-bottom: 10px;
    margin-right: 10px;
}

.map-row .pin-container {
    width: 100%;
}
.map-row .pin-container object {
    width: 100%;
}
/* == END Map Row == */

/* == Map Card == */

#office-popup {
    width: 100%;
    height: 100%;
    border-right: 2px solid var(--color-action);
    display: none;
    background-color: var(--color-whites);


    flex-direction: column;
}

#office-popup h4 {
    color: var(--color-action);
}

#office-popup .popup-close {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px 10px;
    font-weight: bold;
    color: var(--color-whites);
}

#office-popup .popup-close:hover {
    cursor: pointer;
}

#office-img {
    width: 100%;
    max-height: 300px;
    height: 100%;
    object-fit: cover;
}
/* == END Map Card == */

.navbar a {
    color: var(--color-whites);
}

.navbar a:hover {
    text-decoration: underline;
}

.navbar-left a {
    font-weight: bold;
}

.page-header-img {
    background: #16315b no-repeat 50% 50%;
    background-size: cover;
    height: calc(100vh - 64px);
    min-height: 400px;
    position: relative;
}

footer {
    color: var(--color-whites);
    background-color: var(--color-support);
}

footer i {
    font-size: 20px;
    margin-right: 15px;
}

footer .footer-menu-item {
    color: var(--color-whites);
}

footer .footer-menu-item > ul {
    list-style: none;
    padding-left: 0;
}
footer .footer-menu-item > ul li {
    padding-bottom: 12px;
}

.footer-item{
    padding-bottom: 6px;
    line-height: 1.563;
}

footer .activities .pillar-group {
    min-width: 275px;
}

hr.fat {
    height: 3px;
    opacity: 1;
}

small.sub-text {
    color: var(--color-support);
    text-transform: none;
}
.sub-text-title {
    padding-right: 15px;
}

a.white, button.white, .menu-item > a {
    text-decoration: none;
    text-transform: none;
    color: var(--color-whites);
}

a.white:hover, a.white:focus,
button.white:hover, button.white:focus,
.menu-item > a:hover, .menu-item > a:focus {
    color: var(--color-whites);
    text-decoration: underline;
}

a.white:active, button.white:active, .menu-item > a:active {
    color: var(--color-whites);
    text-decoration: underline;
}

a.blue, span.blue {
    text-decoration: none;
    text-transform: none;
    color: var(--color-support);
    padding-bottom: 20px;
}

a.blue:hover, span.blue:hover {
    text-decoration: underline;
    cursor: pointer;
}

.activities {
    justify-content: space-between;
}

.activities .activities-title {
    margin-bottom: 15px;
}

.activities .pillar-list {
    margin-top: 15px;
    margin-bottom: 15px;
}


.activities .pillar-list .pillar-list-item {
    margin-bottom: 15px;
}

.excerpt {
    overflow: hidden;
    text-transform: none;
    position: relative;
    flex-grow: 1;
    max-height: 175px;
}

.post-item-text > .excerpt {
    max-height: 275px;
}

.excerpt-scroll {
    overflow-y: auto;
}
.fleet-excerpt {
    height: 100px;
    position: relative;
}
.tug-row.active .fleet-excerpt {
    height: auto;
    padding-bottom: 50px;
    max-height: none;
}

.tug-row .contact-block {
    display: none;
}
.tug-row.active .contact-block {
    display: block;
}

.tug-row .timeline-photo {
    height: auto;
    min-height: 350px;
}

.fade-out {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 25px 0;

    /* "transparent" only works here because == rgba(0,0,0,0) */
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.001) 0%, white);
}

.show-specs {
    padding-top: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.show-specs > hr {
    flex-grow: 1;
}

.show-specs > span {
    padding: 0 25px;
}

.tug-specs-block {
    padding-top: 25px;
    text-transform: uppercase;
}

.tug-specs-block h6 {
    color: var(--color-support);
}

.tug-specs-block .tug-specs {
    display: flex;
    flex-direction: column;
    padding-top: 10px;
}

.spec {
    display: flex;
    flex-direction: row;
}

.tug-specs-block .spec-title {
    width: 150px;
}

.tug-specs-block .spec-body {
    flex-grow: 1;
    flex-basis: 0;
    text-transform: none;
}

.tug-specs a {
    margin: 25px 0;
    width: 250px;
}

a.link-readmore {
    color: var(--color-action);
}


/* == AWARDS == */
.post-row {
    display: flex;
    flex-wrap: wrap;
    margin-top: 25px;
    margin-bottom: 50px;
}

.post-row:first-child {
    margin-top: 0;
}

.timeline-photo {
    min-height: 350px;
    height: 100%;
    background: #16315b no-repeat 50% 50%;
    background-size: cover;
}
.timeline-photo.h-100 {
    min-height: 400px;
}

.timeline-photo .icon-block {
    position: relative;
    left: -20px;
    top: 0;
}

.award-icon-block {
    position: relative;
    left: 0;
    top: 0;
}

.timeline-text-block {
    background-color: var(--color-whites);
    padding: 25px;
}
.timeline-image-block {
    padding: 0;
}


.timeline-image-block .kotug-logo {
    width: 40px;
    height: 40px;
}

.award-icon-block .trophy-block {
    width: 40px;
    height: 40px;
    background-color: #C7A100;
    color: var(--color-whites);
    font-size: 26px;
    text-align: center;
}
.timeline-image-block .year-block {
    font-family: "Gotham Black", sans-serif;
    font-size: 13px;
    align-self: start;
    color: var(--color-support);
    background-color: var(--color-whites);
    padding: 0 5px;
}

/* == END AWARDS == */

/* == CONTACT BLOCK == */
.contact-block {
    background-color: var(--color-action);
    border-bottom: var(--color-action-dark) 3px solid;
    padding: 50px;
    color: var(--color-whites);
}

.contact-block .contact-title {
    font-family: "Gotham Black", sans-serif;
    font-size: 36px;
    line-height: 32px;
    color: var(--color-whites);
    margin-bottom: 25px;
}

.contact-block-blue {
    background-color: var(--color-support);
    border-bottom: var(--color-support-dark) 3px solid;
}

.contact-block-blue .contact-title {
    font-size: 58px;
    line-height: 52px;
}

.contact-block .contact-content {
    font-family: "Gotham Medium", sans-serif;
    text-transform: none;
    font-size: 18px;
}

.contact-img img {
    width: 100%;
    object-fit: cover;
    max-height: 500px;
    height: 50vh;
}

.socials {
    margin-top: 25px;
    font-size: 1.75em;
}
/* == END CONTACT BLOCK == */

/* == POST GALLERY == */
.post-gallery {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: nowrap;
}

.post-item {
    display: none;
    flex-direction: column;
    margin-left: 25px;
    width: 100%;
}

.post-item:nth-child(1) {
    margin-left: 0;
}

.post-item:nth-child(1) {
    display: flex;
}

@media (min-width: 750px) {
    .post-gallery .post-item:nth-child(-n+2) {
        display: flex;
    }
}

@media (min-width: 1000px) {
    .post-gallery .post-item:nth-child(-n+3) {
        display: flex;
    }
}

@media(min-width: 1750px) {
    .post-gallery .post-item:nth-child(-n+5) {
        display: flex;
    }
}

.post-gallery .post-item img {
    width: 100%;
    height: 15vw;
    min-height: 200px;
    object-fit: cover;
}

.post-item-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
    background-color: var(--color-support);
    padding: 25px;
    overflow: auto;
}

.post-item-text {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.post-item-footer {
    display: flex;
    flex-direction: column;
}

.post-item-footer p {
    margin: 0;
}

.post-item-footer .tags-links {
    font-weight: bold;
    margin-left: 15px;
}

.btn-more {
    margin-top: 8px;
    width: 170px;
    align-self: flex-end;
}
/* == END POST GALLERY == */


/* == HELPERS == */
.fill-height {
    min-height: 100%;
}

.btn.load-more {
    margin-bottom: 25px;
}
/* == HELPERS == */


svg:hover rect {
    fill: purple;
}

.sticky {
    position: fixed;
    top: 0;
    right: 0;
    width: calc(33.3333333333% - 1rem);
}
.abs {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    padding-left: 1rem;
}

.contact-contact-block {
    height: 100%;
}
.contact-contact-block > * {
    height: 100%;
    padding-top: 100px;
}

.wp-block-image img {
    height: auto;
}

.office-block {
    width: 400px;
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    border-bottom: var(--color-action) 5px solid;
}

.office-block.show-text .office-photo {
    display: none;
}
.office-block.show-text .office-block-content {
    display: flex;
}

.office-photo {
    min-height: 400px;
    background: #16315b no-repeat 50% 50%;
    background-size: cover;
}

.office-block-body {
    background-color: var(--color-whites);
    padding: 15px 25px;
    flex-grow: 1;
}

.office-block-content {
    display: none;
    flex-direction: column;
    background-color: var(--color-whites);
    padding: 0 25px;
    overflow-y: auto;
    text-transform: none;
}

.office-expander:hover {
    text-decoration: underline;
    cursor: pointer;
}

.office-grid {
    width: 100%;
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

.office-content {
    display: flex;
    height: 400px;
}

.office-content > * {
    flex-grow: 1;
}

figcaption a {
    color: var(--color-action);
    font-weight: bold;
    font-size: 14px;
}

/* tweak front-page map */
.map-wrapper {
    height: 100%;
}
.map-outer-wrapper {
    height: 500px;
}
@media screen and (min-width: 1200px) {
    .map-wrapper {
        padding-left: 150px;
        padding-top: 25px;
        padding-bottom: 50px;
    }
    .map-outer-wrapper {
        height: 100%;
    }
}

.leaflet-container {
    background-color: var(--color-whites-dark) !important;
}

.leaflet-bottom.leaflet-right {
    display: none;
}
.wp_mapit_multipin_map {
    height: 100% !important;
}

a[href^=tel] {
    text-decoration: inherit;
    color: inherit;
}

.row-gap-3{
    row-gap: 1rem !important;
}

.row-gap-4{
    row-gap: 1.3rem !important;
}

.row-gap-5{
    row-gap: 1.6rem !important;
}

.column-gap-3{
    column-gap: 1rem !important;
}

.vr {
    display: inline-block;
    height: 10px;
    width: 1px;
    min-height: 1em;
    background-color: white;
}

.emergency-flyout {
    position: fixed;
    right: -300px;
    z-index: 19;
    top: 50vh;
    display: flex;
    flex-direction: row-reverse;
    transition: right 0.5s;
    align-items: start;
    overflow: hidden;
}

.emergency-flyout:hover {
    right: 0;
}

.emergency-flyout .content {
    border: 1px solid #e3e3e3;
    background-color: white;
    padding: 20px;
    width: 300px;
}

.emergency-flyout .trigger {
    box-shadow: gray 0 0 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-action);
    color: white;
    width: 75px;
    height: 75px;
    cursor: pointer;
}

.world-map-container{
    padding: 3vw;
    border: 2px solid var(--color-support);
}