/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: smooth !important;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
    margin-block-start: 0;
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}


body[data-aos-duration='4000'] [data-aos], [data-aos][data-aos][data-aos-duration='4000']{
    transition-duration: 4000ms;
}
body[data-aos-duration='3200'] [data-aos], [data-aos][data-aos][data-aos-duration='3200']{
    transition-duration: 3200ms;
}
.textCenter{
    text-align: center !important;
}
.marginBottom10vh{
    margin-bottom: 10vh;
}
.pointable{
    pointer-events: all;
}
.fullOpacity{
    opacity: 1 !important;
}
/* #model3D{
    height: 700px;
    width: 500px;
}
.logo3D{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}
#logo img{
    padding: 10px
} */
body {
    margin: 0;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #1E1E1E;
}
body,
button{
    font-family: "Open Sans", sans-serif !important;
    font-weight: 300;
}
/* .blur{
    position: relative;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 1;
    pointer-events: none;
} */

.lock {
    height:100vh;
    overflow: hidden;
    padding-right:15px;
}
.lock .header-flat {
    width:calc(100% - 15px);
}

.intro-container {
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 100vh;
    background-color: #1E1E1E;
    transform-origin: 50% 50%;
}

.center-bar {
    position: absolute;
    left: 0;
    top:50%;
    transform: translateY(-50%);    
    background-color: #1E1E1E;
    width: 100%;
    height: 220px;
}

.intro-logo {
    position: absolute;
    width: 100%;
    height: 100vh;
    background: url('./img/logo/GAF_Logo.svg') center no-repeat;
    background-size: 380px 200px;
    opacity: 0;
    transform: scale(0.5);
}

.line-container {
    position: absolute;
    display: flex;
    flex-direction: row;
    left: calc(50% - 20px);
    top:0;
    transform: translateX(-50%) skew(15deg);
}

.intro-line {
    position: relative;
    top:0;
    transform: scaleY(0);
    transform-origin: top center;
    width: 60px;
    height: 100vh;
}

.green { background: #7fcb2b}
.orange { background: #f47920; left:10px;}
.red { background: #ED1B24; left:20px}

.container {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    scroll-snap-type: y mandatory;
}
section{
    position: relative;
    padding: 0 5vw;
}
section.mobile {
    z-index: 2;
}
.header{
    position: fixed;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    /* background-image: linear-gradient(black, rgb(20,20,20), transparent); */
}
.header-flat{
    position: fixed;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    pointer-events: none;
    /* background-image: linear-gradient(black, rgb(20,20,20), transparent); */
}
.headerBG-fade{
    position: fixed;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    pointer-events: none;
    background-image: linear-gradient(black, rgb(20,20,20), transparent);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}
.navbar{
    display: block;
}
.navbar-flat{
    display: block;
    position: absolute;
    top:30px;
    right: 2%;
}
.navbar-flat ul, 
.navbar ul{ 
    padding: 0;
    margin: 0;
}
.navbar-flat li,
.navbar li{
    float: left;
    list-style: none;
}
.navbar-flat li a,
.navbar li a{
    display: inline-block;
    padding: 10px;
    color: white !important;
    text-decoration: none;
    pointer-events: initial;
    font-weight: 400;
    text-transform: uppercase;
}
.navbar-flat li a:hover,
.navbar li a:hover{
    color: #ED1B24 !important;
    border-bottom: 1px solid #ED1B24;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
.hamburger{
    height: 40px;
    opacity: 0.0;
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
}
.hamburger img{
    height: 40px;
    pointer-events: none;
    position: absolute;
    top: 15px;
    right: 15px;
}
.hamburgerClose{
    height: 40px;
    display: none;
}
.hamburgerClose img{
    height: 25px;
    pointer-events: all;
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 3;
}
#Home{
    scroll-margin-top: 20vh;
    scroll-snap-align: start;
}
#AboutUs,
#Services,
#GlobalPortal,
#Projects,
#Team,
#WhyUs,
#Group,
#Contact{
    scroll-margin-top: 10vh;
    scroll-snap-align: start;
}
/* #Projects{
    display: none;
} */
.navMenu.current {
    color: #ED1B24 !important;
    border-bottom: 1px solid #ED1B24;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
.logo{
    position: relative;
    width: 12rem;
    -webkit-transition: width .4s cubic-bezier(0,0,0,.2);
    -moz-transition: width .4s cubic-bezier(0,0,0,.2);
    -o-transition: width .4s cubic-bezier(0,0,0,.2);
    transition: width .4s cubic-bezier(0,0,0,.2);
    margin: auto;
}
.logo-flat{
    position: relative;
    width: 12rem;
    -webkit-transition: width .4s cubic-bezier(0,0,0,.2);
    -moz-transition: width .4s cubic-bezier(0,0,0,.2);
    -o-transition: width .4s cubic-bezier(0,0,0,.2);
    transition: width .4s cubic-bezier(0,0,0,.2);
    top:6px;
    left: 2%;
}
.logo a,
.logo-flat a{
    pointer-events: all;
}
section a,
section p,
section ul>li,
section h2,
section h3,
section h4,
footer{
    position: relative;
    /* pointer-events: initial; */
    pointer-events: none;
    color: white;

    /* background-color: rgba(19,19,19, 0.2);
    box-shadow: 0px 0px 20px rgba(19,19,19, 0.4); */
    z-index: 2;
}
section ul>li{
    text-align: initial;
    font-size: 1.5em;
    font-weight: 200;
}
section ul>li::marker{
    color: #ED1B24;
}
section p{
    text-align: initial;
    font-size: 1.7em;
    font-weight: 200;
}
.main-bg-image {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: 31% 100%;
    pointer-events: none;
    opacity: 0.5;
}
.head-title {
    position: relative;
    pointer-events: none;
    color: white;
    font-weight: 100;
    font-size: 4em;
    margin-left: -3px;
    letter-spacing:-0.05rem;
    /* text-shadow: 0px 0px 10px black;
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4); */
    z-index: 2;
}
.title {
    position: relative;
    pointer-events: none;
    color: white;
    margin-top: 20px;
    line-height: 1.6rem;
    font-size: 1.4rem;
    font-weight: 300;
    /* text-shadow: 0px 0px 10px black;
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4); */
    z-index: 2;
}
.main-body {
    position: relative;
    pointer-events: none;
    font-size: 1rem;
    color:#d4d4d4;
    font-weight: 300;
    margin-top: 20px;
    max-width: 600px;
    /* text-shadow: 0px 0px 10px black;
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4); */
    z-index: 2;
}

.full-width {
    max-width: 100% !important;
    margin-bottom: 30px;
}


.subtitle {
    text-align: initial;
    position: relative;
    pointer-events: none;
    color: white;
    margin-top: 10px;
    margin-bottom: 50px;
    max-width: 600px;
    line-height: 1.6rem;
    font-size: 1.2rem;
    font-weight: 300;
    color:#cbcbcb;
    /* text-shadow: 0px 0px 10px black;
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4); */
    z-index: 2;
}
.subtitle-red {
    text-align: initial;
    position: relative;
    pointer-events: none;
    color: #ED1B24;
    margin-top: 10vh;
    margin-bottom: 0vh;
    font-size: 1.7em;
    font-weight: 400;
    /* text-shadow: 0px 0px 10px black;
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4); */
    z-index: 2;
}
.section-title {
    text-align: left;
    position: relative;
    font-family: "Open Sans", sans-serif;
    font-style: normal;
    font-weight: 100;
    text-transform: uppercase;
    /* overflow: hidden; */
    pointer-events: none;
    margin-top: 8vh;
    font-size: 4em;
    color: #ED1B24;
    z-index: 2;
}
#Home{
    height:100vh;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: center;
}
#nzmap{
    position: absolute;
    z-index: 1;
    top: 0;
    right: 2%;
    opacity: 0.4;
    pointer-events: none;
    width: 35%;
}
canvas {
    position: fixed;
    width: 100vw !important;
    height: 100vh !important;
    left: 0%;
    top: 0%;
    opacity: 0.9;
    z-index: 1;
    pointer-events: all;
}

.aboutUs{
    position: relative;
    /* backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); */
    pointer-events: none;
    z-index: 2;
}
.aboutUs ul {
    padding:0;
    margin: 0;
    margin-left:15px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.aboutUs ul li {
    font-size: 1.2rem;
    padding-right: 35px;
}

.aboutUs .subsection{
    position: relative;
    display: flex;
    flex-direction: row;
}
.aboutUs .subsection p {
    /* width: 60%; */
    width: 33.33%;
    padding: .5%;
    margin: auto;
    text-align: center;
    font-size: 1.4em;
}
.gl-logo-pointer {
    height: 20px;
}
.aboutUs .subsection .img-container {
    width: 33.33%;
    padding: .5%;
    margin: auto;
}
.aboutUs .subsection .img-container img {
    width: 100%;
}
.aboutUs .image-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center
}

.image-flow-container {
    position: relative;
    z-index: 2;
}

.image-flow {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    animation: spin 30s linear infinite;
}

.image-flow img {
    max-width:inherit;
    height: 350px;
}

/* #AboutUs>div:last-of-type ul,
#AboutUs>div:last-of-type p:last-of-type{
    margin-top: 10vh;
} */
/* #references{
    margin-top: 10vh;
    margin-bottom: 10vh;
    display: flex;
    align-items: center;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    position: relative;
    pointer-events: none;
    z-index: 2;
}
.quote{
    text-align: initial;
    position: relative;
    width: 50%;
    margin: 0;
    padding: 5vw;
    font-weight: 200;
    font-size: 2em;
    pointer-events: none;
    color: white;
    z-index: 2;
    display: flex;
    flex-direction: column;
}
.quote::after,
.quote::before {
    position: relative;
    display: block;
    background: url(./img/logo/close_white_quote.svg) 50% no-repeat;
    content: "";
    width: 3vw;
    height: 3vw;
    z-index: 2;
}
.quote::before{
    bottom: 10px;
    transform: rotate(180deg);
}
.quote::after{
    left: 86%;
} */

#Services{
    position: relative;
    display: flex;
    flex-direction: column;
}
.servicesContainer{
    padding: 10px 0;
    /* backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); */
    z-index: 2;
    pointer-events: none;

}
.services{
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid white;
    padding-bottom: 1.8vh;
    margin-bottom: 1.8vh;
    margin-top: 1.8vh;
    pointer-events: all;
    transition-delay: 0.2s;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    overflow: hidden;
}
/* .services.active{
    opacity: 1;
    transition-delay: 0.0s;
    -webkit-transition: 0.0s;
    -moz-transition: 0.0s;
    -o-transition: 0.0s;
    transition: 0.0s;
} */
img.expandIcon {
    position: relative;
    width: 30px;
    padding: 4px;
    float: right;
    pointer-events: all;
    cursor: pointer;
    z-index: 2;
}
img.expandIcon.director {
    margin-left: 10px;
    }
img.expandIcon.director.active {
    animation-name: bounce-button;
    -webkit-animation-name: bounce-button;
    -moz-animation-name: bounce-button;
    -o-animation-name: bounce-button;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-iteration-count: 2;
    -webkit-animation-iteration-count: 2;
    -moz-animation-iteration-count: 2;
    -o-animation-iteration-count: 2;
}
@keyframes bounce-button {
    0% {transform:scale(1);}
    50% {transform:scale(1.2);}
    100% {transform:scale(1);}
}
img.expandIcon.active {
    animation-name: bounce-button;
    animation-duration: 1s;
    animation-iteration-count: 2;
}
.services.mobile{
    opacity: 1 !important;
}
.services .subtitle-red{
    width: fit-content;
    float: left;
}
.services .subtitle-red:nth-of-type(1){
    margin-top: 0vh;
}
/* .services:nth-of-type(1) .subtitle-red{
    left: calc(100% / 6 * 0);
}
.services:nth-of-type(2) .subtitle-red{
    left: calc(100% / 6 * 1);
}
.services:nth-of-type(3) .subtitle-red{
    left: calc(100% / 6 * 2);
}
.services:nth-of-type(4) .subtitle-red{
    left: calc(100% / 6 * 3);
}
.services:nth-of-type(5) .subtitle-red{
    left: calc(100% / 6 * 4);
}
.services:nth-of-type(6) .subtitle-red{
    left: calc(100% / 6 * 5);
} */
.services p{
    position: relative;
    opacity: 0 !important;
    font-size: 1.5rem;
    line-height: 1.8rem;
    top: -30px;
    margin: 0;
    max-height: 0vh;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: all 0.5s;
}
.services p {
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.services p img {
    width: 30%;
    margin-right: 30px;
}

.services p.active{
    opacity: 1 !important;
    padding-top: 20px;
    top: 0px;
    max-height: 100vh;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}
.GlobalPortal{
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 3vh 0;
    margin: 4vh 0;
    width: 100%;
    /* backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); */
    z-index: 2;
    pointer-events: none;
}
.img-container{
    max-width: 80%;
    max-height: 80%;
    margin: auto;
}
video{
    position: relative;
    width: 100%;
    height: 100%;
    /* max-width: 1500px; */
    z-index: 2;
    pointer-events: none;
}

.GlobalPortal p{
    font-size: 1.3em;
    padding-top: 5vh;
    /* width: 80%; */
}

.GlobalPortalInfo{
    display: flex;
}
.GlobalPortalInfo .info{
    width: 50%;
    padding: 0 30px;
    display: inherit;
    flex-direction: column;
}.GlobalPortalInfo .info p{
    font-size: 1.3em;
    color: #d4d4d4;
}

.GlobalPortalInfo .info ul{
    position: relative;
    z-index: 2;
    padding:0;
    padding-left:22px;
    margin:0;
    margin-top:20px;
    text-align: left;
}
.GlobalPortalInfo .info ul>li{
    font-size: 1.3em;
}
.GlobalPortalInfo .img-container{
    width: 50%;
    position: relative;
    z-index: 2;
}
.GlobalPortalInfo .img-container img{
    width: 100%;
}

/* Carousel */
.carousel{
    pointer-events: none;
    margin: 10vh 0;
    width: 120%;
}
.owl-carousel{
    position: relative;
    z-index: 2;
    /* backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); */
    pointer-events: all;
    right: 10%;
}
.owl-carousel a {
    pointer-events: all;
    text-decoration: none;
}
.owl-carousel .item{
    position: relative;
    /* width: 100%; */
    max-width: 90vw;
    min-width: 400px;
    padding-top: 10px;
    padding-bottom: 10px;
    opacity: 0.8;
    /* backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px); */
    z-index: 3;
}
.owl-carousel .item.mobile{
    opacity: 1 !important;
}
.owl-carousel .item .imgWindow{
    height: 500px;
    overflow: hidden;
}
.owl-carousel .item img{
    height: 600px;
}
.owl-carousel p{
    font-size: 1.5em;
}
.owl-theme .owl-dots .owl-dot.active span {
    background: white !important;
}
.owl-theme .owl-dots .owl-dot span {
    background: #7a7a7a !important;
}

#WhyUs .list {
    position: relative;
    z-index: 2;
}

#WhyUs .list li {
    font-size:1.2rem;
}

#request-survey {
    padding-top: 5vh;
}

#surveyForm {
    position: relative;
    display: grid;
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(12, 1fr);
    gap: 10px;
    padding-top: 50px;
    flex-flow: wrap;
    z-index: 2;
    pointer-events: none;
}

#surveyForm * {
    pointer-events: all;
}

#surveyForm input, #surveyForm textarea, #surveyForm select {
    width: 100%;
    padding: 12px 20px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}

.request-button {
    margin-top: 20px;
    position: relative;
    background-color: #da4141;
    color: white;
    padding: 14px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    text-transform: uppercase;
    z-index: 2;
    pointer-events: all
}

#surveyForm .request-button {
    width: 100%;
    margin-top:0;
}

#surveyForm .col-12 {
    grid-column: auto / span 12;
}

@media (min-width: 768px) {
    #surveyForm .col-md-6 {
        grid-column: auto / span 6;
    }
}

@media (min-width: 1680px) {
    #surveyForm .col-lg-3 {
        grid-column: auto / span 3;
    }
}


/* Magnific Popup Zoom */
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
    opacity: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* ideally, transition speed should match zoom duration */
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.mfp-with-zoom.mfp-ready .mfp-container {
    opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
    opacity: 0.8;
}
.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
    opacity: 0;
}

.teamSection,
.teamSection h3,
.teamSection h4 {
    font-weight: 300 !important;
}
.teamTab {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(244, 121, 32, 0.1);
    background-color: rgba(244, 121, 32, 0.1);
    width: fit-content;
    z-index: 2;
}
.teamTab button {
    color: white;
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    pointer-events: all;
}
.teamTab button:hover {
    background-color: rgba(237, 27, 36, 0.8);
}
.teamTab button.active {
    background-color: rgba(237, 27, 36, 0.6);
}
.tabContent {
    /* display: none; */ /* commented out for hiding team tab */
    position: relative;
    padding: 6px 12px;
    /* border-top: 1px solid rgba(244, 121, 32, 0.6); */ /* commented out for hiding team tab */
    z-index: 2;
    pointer-events: none;
    text-align: left;
    /* backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); */
}
.tabContent h3{
    font-size: 1.7em;
}
.jobCategory{
    margin-top: 30px;
    margin-bottom: 15px;
    color: #ED1B24 !important;
    font-size: 1.6em;
}
.teamSection h4.jobCategory{
    display: flex;
    align-items: end;
    font-weight: 200 !important;
}
.jobCategoryContainer{
    display: flex;
    flex-direction: column;
}
.staffContainer {
  display: grid;
  gap: 25px;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto;
  position: relative;
  width: 100%;
}
/* 3 columns on medium screens */
@media (max-width: 1920px) {
  .staffContainer {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 3 columns on medium screens */
@media (max-width: 1200px) {
  .staffContainer {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 2 columns on tablets */
@media (max-width: 768px) {
  .staffContainer {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 1 column on mobile */
@media (max-width: 480px) {
  .staffContainer {
    grid-template-columns: repeat(1, 1fr);
    gap: 0px;
    row-gap: 20px;
  }
}
.staffContainer.director{
    opacity: 0;
    max-height: 0px;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}
.staffContainer.director.active{
    opacity: 1;
    max-height: 100%;
}
.staff{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    pointer-events: all;
}
.staff .imageContainer{
    position: relative;
    pointer-events: all;
    min-width: 220px;
}
.staff img{
    filter:grayscale(1) brightness(0.8);
    transition: filter 0.5s;
    width: 100%;
}
.staff:hover img{
    filter:grayscale(0) brightness(1);
}
.staffInfo{
    color: rgba(255, 255, 255, 0.8);
    text-align: right;
    font-weight: 500;
    font-size: 17px;
    position: absolute;
    bottom: 0px;
    width: 100%;
    padding: 10px 15px;
    background-color: rgba(0, 0, 0, 0.4);
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
    transition: background-color 0.5s;
}
.imageContainer:hover .staffInfo{
    background-color: rgba(237, 27, 36, 0.8)
}

#Group h4{
    font-family: "Basic", sans-serif;
    font-size: 3em;
    margin-bottom: 15px;
}
.group{
    display: flex;
    flex-direction: row;
    margin-bottom: 5vh;
}
.groupInfoText{
    width: 60%;
    padding-right: 1%;
    font-size: .8em;
    display: inherit;
    flex-direction: column;
    justify-content: center;
}
.groupInfoText .subtitle {
    margin-bottom: 0;
}
.groupInfoText .subtitle a{
    color: #f47920;
    font-weight: 400;
    text-decoration: none;
    pointer-events: all;
    position: relative;
    -webkit-transition: margin-left 0.5s;
    -moz-transition: margin-left 0.5s;
    -o-transition: margin-left 0.5s;
    transition: margin-left 0.5s;
}
.group:nth-of-type(1) .groupInfoText .subtitle a,
.group:nth-of-type(1) h4 {
    color: #f47920;
}
.group:nth-of-type(2) .groupInfoText .subtitle a,
.group:nth-of-type(2) h4 {
    color: #7FCB2C
}
.group:nth-of-type(3) .groupInfoText .subtitle a,
.group:nth-of-type(3) h4 {
    color: #ED1B24
}
.groupInfoText .subtitle a:hover{
    margin-left: 10px;
}
.groupInfoText svg{
    height: 24px;
    position: relative;
    bottom: -4px;
}
.group .imageContainer{
    margin: auto;
    width: 40%;
    position: relative;
    z-index: 2;
    display: flex;
    pointer-events: none;
}
.justifyLeft{
    justify-content: left;
}
.justifyRight{
    justify-content: right;
}
.group .imageContainer img{
    text-align: center;
}

#Contact .contactInfo{
    display: flex;
    flex-direction: row;
}
#Contact .contactInfo a{
    text-decoration: none;
}
.contactInfoText{
    font-size: .8em;
    display: inherit;
    flex-direction: column;
    justify-content: center;
}
.contactInfoText .subtitle-red{
    margin: 0;
    padding-top: 10px;
}
.contactInfoText p{
    font-size: 1.5em;
}
.contactInfoText a{
    pointer-events: all;
}
.contactInfoText,
.mapContainer{
    width: 50%;
}
.mapContainer{
    position: relative;
    border: 1px solid #9a9a9a;
    z-index: 2;
    pointer-events: all;
}
.mapContainer{
    margin-bottom: 5vh;
}
.mapContainer .map{
    min-height: 50vh;
}

.footer {
    position: relative;
    background-image: linear-gradient(transparent, rgb(20,20,20));
    /* backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); */
    min-height: 50vh;
    padding: 100px 5vw 0;
    color: #818181;
}
.footer a{
    text-decoration: none;
    color: inherit;
    pointer-events: all;
}
.footerContainer{
    display: flex;
}
.footerLeft {
    width: 80%;
}
.footerLeft img {
    max-width: 300px;
}
.leftTop{
    padding: 40px 0;
}
.leftBottom ul.association-list{
    display: flex;
    width: 80%;
    padding: 40px 0 0;
    margin-top: 0;
    border-top: 1px solid #ED1B24;
}
ul.association-list li{
    width: 20%;
    text-align: center;
    padding: 0 0.4vw;
    list-style-type: none;
}
ul.association-list li img{
    width: 100%;
    border: 2px solid #888;
    border-radius: 50%;
}
.footerRight{
    display: flex;
    width: 20%;
}
.bottom-nav {
    padding: 0;
}
.footerRight ul.bottom-nav li{
    font-size: 1.5em;
    font-weight: 200;
    padding: 5px 0;
    list-style-type: none;
    width: fit-content;
    -webkit-transition: border-bottom, color 0.5s;
    -moz-transition: border-bottom, color 0.5s;
    -o-transition: border-bottom, color 0.5s;
    transition: border-bottom, color 0.5s;
}
.footerRight ul.bottom-nav li:hover{
    color: #ED1B24;
}

.footerBottom{
    padding: 5vh 0;
    text-align: center;
}
.qualityPolicy{
    color: white;
    font-size: 1.1em;
}
.red-font{
    color: red;
}
ul.association-list li p{
    color: white;
    font-size: 0.8vw;
}

@keyframes spin {
    from {translate: -2347.08px;}
    to {translate: -4694.16px;}
}