b,
body,
caption,
code,
details,
div,
footer,
form,
header,
html,
i,
img,
li,
nav,
q,
section,
small,
span,
table,
td,
th,
time,
tr,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 16px
}

* {
    box-sizing: border-box
}

body {
    background-color: #101820;
    font-family: 'Poppins', sans-serif;
}

p {
    line-height: 1.618;
    color: #f9f9f9f9;
}

::-webkit-scrollbar {
    //overflow: hidden;
    //width: 1px
}

:-webkit-any(article, aside, nav, section) h1 {
    font-size: 1.5em;
    -webkit-appearance: none;
    margin-block-start: 0em;
    margin-block-end: 0em;
}


input,
textarea {
    -webkit-appearance: none;
    -webkit-appearance: none
}

a {
    text-decoration: none;
    color: inherit
}

.clearance {
    height: 1rem;
}

.clearancex2 {
    height: 2rem;
}

.clearancex4 {
    height: 4rem
}

.clearance-half {
    height: 0.5rem;
}

.outline {
    outline: 3px solid red;
}

.text-center {
    text-align: center;
}

.text-center-p{
    font-size: 1.6rem;
}

@media only screen and (max-width:1024px){
    .text-center-p{
        font-size: 1rem;
    }
}

.mobile-appear {
    display: block;
}

@media only screen and (min-width:767px) {
    .mobile-appear {
        display: none;
    }
}

.full-container {
    width: 100%;
    height: auto;
    position: relative;
    margin: 0;
    padding: 0;
    overflow: hidden;
    scroll-snap-type: y mandatory;
}

.full-height {
    min-height: 100vh;
    height: 100;
    
}

.full-container > div{
    scroll-snap-align:start;
}


.half-height {
    height: 50vh;
}


.box-container {
    width: 100%;
    max-width: 1024px;
    height: auto;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    padding: 64px 32px;
}



label.null {
    display: none !important;
}

[role*=button] {
    cursor: pointer;
}

.blockquote {
    padding: 60px 5% 40px;
    position: relative;
}
.blockquote p {
    font-family: "Utopia-italic";
    font-size: 1.3rem;
    font-weight: 700px;
    text-align: center;
}

@media only screen and (min-width:1024px){
    .blockquote {
        padding: 60px 80px 40px;
    }
    
    .blockquote p{
        font-size: 1.6rem;
    }
}

/*blockquote p::before {
    content: "\f095"; 
    font-family: FontAwesome;
   display: inline-block;
   padding-right: 6px;
   vertical-align: middle;
  font-size: 180px;
 }*/

.blockquote:before {
  position: absolute;
  font-family: 'FontAwesome';
  top: 0;
  z-index: -1;
  content:"❝";
  font-size: 240px;
  color: rgba(0,0,0,0.2);
    left: 50%;
    transform: translateX(-50%);
   
}

.blockquote::after {
    content: "";
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    margin-left: ;
    position: absolute;
    border-bottom: 3px solid #d3d3d3;
    height: 3px;
    width: 200px;
}

section{
    position: relative;
}

.section-step{
    position: absolute;
    bottom: 16px;
    z-index: 999;
    left: 0;
    right: 0;
}

h1,
h2,
h3,
h5,
h6 {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    color: #f9f9f9 !important;
}

h4 {
    font-family: 'Poppins', sans-serif;
    font-size: .8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

h1 {
    font-size: 3rem;
    font-weight: 700;
}

@media only screen and (max-width:768px) {
    h1 {
        font-size: 2.5rem;
    }
}

h2 {
    font-size: 2rem;
    font-weight: 400;
    color: inherit;
}

@media only screen and (max-width:374px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1rem;
    }
}

.social-section {
    width: 90%;
    margin: 0 auto;
    padding: 128px 0 64px 0;
    position: relative;
}

.generic-section {
    width: 90%;
    margin: 0 auto;
    padding: 128px 0;
    position: relative;
}

.generic-section iframe {
    margin-top: 32px;
    width: 100%;
    height: 400px;

}


.questionaire-section {
    width: 90%;
    margin: 0 auto;
    padding: 128px 0;
    position: relative;
    height: 100%;
}

.questionaire-section iframe {
    margin: 32px auto 0 auto;
    width: 100%;
    display: block;
    position: relative;
    height: 100%;
    min-height: 4997px;
}

.flex-apart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.flex-start {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}

.line {
    width: 100%;
    height: 1px;
    background-color: white;
}

.dark-line {
    width: 100%;
    height: 1px;
    background-color: #101820;
    margin: 16px 0;
}


.primary {
    color: #98cccc;
}

.secondary {
    color: #0098cc;
}

.tertiary {
    color: #edb500;
}

.white {
    color: #ffffff;
}

.bg-primary {
    background-color: #99cccc;
}

.bg-dark {
    background-color: #101820;
}

.bg-white {
    background-color: #fafafa;
}

.circular-button {
    width: 72px;
    height: 72px;
    margin: 32px auto 0 auto;
    border-radius: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    font-size: 0.8rem;
    transition: 0.15s all ease-in;
}

.button-primary-color {
    border: 1px solid #99cccc;
    color: #99cccc;
}

.button-primary-color:hover {
    background-color: #99cccc;
    color: #1b1b1b;
    border: 1px solid #99cccc;
}

.button-secondary-color {
    border: 1px solid #1b1b1b;
    color: #1b1b1b;
}

.button-secondary-color:hover {
    background-color: #1b1b1b;
    color: #99cccc;
    border: 1px solid #1b1b1b;
}

.button-subtle {
    color: #edb500;
    font-weight: 700;
    opacity: 0.8;
}

.button-subtle:hover {
    opacity: 1;
}


.temp-holder {
    width: 100%;
    overflow: hidden;
    margin-top: 32px;
    text-align: center;
}

.temp-holder img {
    width: 100%;
    height: auto;
}

.border {
    border: 1px solid yellow;
}


/***************
****************
SECTION IDs AND BACKGROUND
****************
***************/


#firstsection {
    max-height: 1080px;
    height: 100vh;
}

#about_us-section {
    background-color: #101820;
    background-image: url(../images/logogram.svg);
    background-repeat: no-repeat;
    background-position: -200px 80px;
    background-size: ;
}

#thirdsection,
#services-section {
    background-image: url(../images/gradient-bg.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}

#mission-section,
#contact-section {
    background-image: url(../images/gradient-bg-rev.svg);
    background-size: cover;
    background-color: #101820;
    background-blend-mode: soft-light;
    background-repeat: no-repeat;
    background-position: left 300px;
}


/**************
**************
NAVIGATION
**************
**************/

header {
    position: absolute;
    z-index: 3;
    width: 90%;
    margin: 32px 5% 0;

}

header a img {
    width: auto;
    height: 48px;
}

.header-navigation {
    display: none;
}



#main {
    height: auto;
    overflow: auto;
}

#main.fix {
    height: 100vh;
    overflow: hidden;
}

/***************
****************
GENERAL INFORMATION SECTION
****************
***************/



.about-section {
    width: 90%;
    margin: 256px auto;
}

.about-section h2 {
    color: #99cccc;
}

.about-section p {
    color: white;
}




/*****************
******************
CONTACT FORM & SOCIAL MEDIA LINKS
******************
*****************/


form {
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 32px
}


.mc-field-group input,
input {
    width: 100%;
    padding: 8px;
    background-color: rgba(52, 52, 52, 0);
    color: white;
    border-bottom: 1px solid #787878;
    border-top: none;
    border-right: none;
    border-left: none;
    margin: 0 0 16px 0;
    font-size: 1rem;
}

textarea {
    width: 100%;
    background-color: rgba(52, 52, 52, 0);
    border-bottom: 1px solid #787878;
    border-top: none;
    border-right: none;
    border-left: none;
    resize: none;
    padding: 8px;
    font-size: 1rem;
    font-family: sans-serif;
    color: white;
}

#mc_embed_signup_scroll {
    width: 100% !important;
}

.response {
    color: #ffcc00;
}

.input_send {
    border: none;
    margin: 32px auto 0 auto;
    height: 72px;
    width: 72px;
    border-radius: 36px;
    background-color: #0098cc;
    border: 1px solid #0098cc;
    color: #1b1b1b;
    display: block;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    font-size: 0.8rem;
    transition: 0.15s all ease-in;
    cursor: pointer;
}

.input_send:hover {
    background-color: #101820;
    color: #ffffff;
}

.social-carrier {
    width: 60%;
    margin: 16px auto 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

@media only screen and (min-width:768px) {
    .social-carrier {
        width: 40%;
    }
}


.social-link img {
    width: 30px;
    height: 30px;
}





/*****************
******************
FOOTER
******************
*****************/



.footer-container {
    width: 90%;
    margin: 0 auto 32px;
    ;
    text-align: center;
    font-size: 12px;
    border-top: 1px solid white;
}

.footer-container ul {
    width: 40%;
    margin: 0 auto;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

@media only screen and (min-width:768px) {
    .footer-container ul {
        width: 160px;
    }
}

/**************
**************
BREAKPOINT
**************
**************/

@media only screen and (min-width:767px) {

    .hero-header,
    .about-section,
    .generic-section,
    .social-section,
    .footer-section,
    .questionaire-section {
        width: 66%;
    }
}


.column-2 {
    margin: 32px 0;
    column-count: 1;
    column-gap: 32px;
}

@media only screen and (min-width:1024px) {
    .column-2 {
        column-count: 2;
    }
}





/**************
**************
FLICKITY CAROUSEL
**************
**************/




.flickity-enabled {
    position: relative
}

.flickity-enabled:focus {
    outline: 0
}

.flickity-viewport {
    overflow: hidden;
    position: relative;
    height: 100%
}

.flickity-slider {
    position: absolute;
    width: 100%;
    height: 100%
}

.flickity-enabled.is-draggable {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.flickity-enabled.is-draggable .flickity-viewport {
    cursor: move;
    cursor: -webkit-grab;
    cursor: grab
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
    cursor: -webkit-grabbing;
    cursor: grabbing
}

.flickity-button {
    position: absolute;
    background: hsla(0, 0%, 100%, .75);
    border: none;
    color: #333
}

.flickity-button:hover {
    background: #fff;
    cursor: pointer
}

.flickity-button:focus {
    outline: 0;
    box-shadow: 0 0 0 5px #19f
}

.flickity-button:active {
    opacity: .6
}

.flickity-button:disabled {
    opacity: .3;
    cursor: auto;
    pointer-events: none
}

.flickity-button-icon {
    fill: currentColor
}

.flickity-prev-next-button {
    top: 50%;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transform: translateY(-50%)
}

.flickity-prev-next-button.previous {
    left: 10px
}

.flickity-prev-next-button.next {
    right: 10px
}

.flickity-rtl .flickity-prev-next-button.previous {
    left: auto;
    right: 0px
}

.flickity-rtl .flickity-prev-next-button.next {
    right: auto;
    left: 0px
}

.flickity-prev-next-button .flickity-button-icon {
    position: absolute;
    left: 20%;
    top: 20%;
    width: 60%;
    height: 60%
}

.flickity-page-dots {
    position: absolute;
    width: 100%;
    bottom: -25px;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    line-height: 1
}

.flickity-rtl .flickity-page-dots {
    direction: rtl
}

.flickity-page-dots .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 8px;
    background-color: rgba(152, 204, 204, 0.9);
    border-radius: 50%;
    opacity: .25;
    cursor: pointer;
    z-index: 50;
}

.flickity-page-dots .dot.is-selected {
    opacity: 1
}

@media only screen and (max-width:768px) {
    .flickity-page-dots .dot {
        visibility: ;
    }

    .flickity-prev-next-button {
        visibility: hidden;
    }
}




/**************
**************
PORTFOLIO PAGES
**************
**************/

.portfolio-header {
    width: 100%;
    height: auto;
    margin: 128px auto 32px auto;
    text-align: left;
}

@media only screen and (min-width:768px) {
    .portfolio-header {
        width: 66%;
    }
}

#portfoliosection {
    min-height: 550px;
}

.portfolio-section {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

@media only screen and (min-width:768px) {
    .portfolio-section {
        width: 66%;
    }
}



.portfolio-container {
    height: 175px;
    margin: 0 1% 1% 0;
    overflow: hidden;
    display: block;
    position: relative;
}

.portfolio-container:hover .portfolio-item {
    transform: scale(1.2);
}

.p-single {
    width: 49%
}

.p-double {
    width: 49%;
}

@media only screen and (min-width:1024px) {
    .portfolio-container {
        height: 225px;
        margin: 0 .5% .5% 0;
        overflow: hidden;
    }

    .p-single {
        width: 24.5%
    }

    .p-double {
        width: 49.5%;
    }
}

.p-double .portfolio-item {
    width: 100%;
}

.p-single .portfolio-item {
    width: 100%;
}

.portfolio-item {
    height: 100%;
    transition: .15s all ease-in;
}


[id*=portfolio-],
[class*=thumbnail-] {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    transform-origin: center center;
}

[id*=p-] {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    transform-origin: center center;
}


[id*=portfolio-]::before {
    opacity: 0;
    width: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    z-index: 2;
    transition: 0.15s all ease-in;
}

[id*=portfolio-]::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(16, 24, 32, 0.4);
    transition: 0.15s all ease-in;
    opacity: 0;
}

[id*=portfolio-]:hover::before {
    opacity: 1;
}

[id*=portfolio-]:hover::after {
    opacity: 1;
}


#p-1,
.thumbnail-1 {
    background-image: url(../images/thumbnail-first.webp);
}

.thumbnail-2 {
    background-image: url(../images/thumbnail-second.webp);
}

#p-3,
.thumbnail-3 {
    background-image: url(../images/thumbnail-third.webp);
}

#p-4,
.thumbnail-4 {
    background-image: url(../images/thumbnail-fourth.webp);
}


.thumbnail-5 {
    background-image: url(../images/thumbnail-fifth.webp);
}

#p-6,
.thumbnail-6 {
    background-image: url(../images/thumbnail-sixth.webp);
}


.thumbnail-7 {
    background-image: url(../images/thumbnail-seventh.webp);
}

#p-8,
.thumbnail-8 {
    background-image: url(../images/thumbnail-eighth.webp);
}

.thumbnail-9 {
    background-image: url(../images/thumbnail-ninth.webp);
}


.thumbnail-10 {
    background-image: url(../images/thumbnail-tenth.webp);
}

#p-11,
.thumbnail-11 {
    background-image: url(../images/thumbnail-eleventh.webp);
}

#p-12,
.thumbnail-12 {
    background-image: url(../images/thumbnail-twelfth.webp);
}

#p-13,
.thumbnail-13 {
    background-image: url(../images/thumbnail-thirteenth.webp);
}



/**************
**************
PORTRAIT STYLES
**************
**************/

.portrait {
    position: fixed;
    z-index: 1000;
    width: 100%;
    display: none;
    height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(16, 24, 32, 0.8);
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.portrait.active {
    display: flex
}

.portrait-item {
    width: 90%;
    height: auto;
    position: relative;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.3);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 8px solid #fff;
    background-color: #101820;
}

@media only screen and (min-width:1024px) {

    .portrait-item {
        width: 66%;
        margin: 0 auto;
    }
    
    .portrait-copy{
        width: 100%;
    }
}

.portrait-image {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    left: 50%;
    top: -50px;
    transform: translateX(-50%);
    background-color: #fff;
    border: 4px solid #fff;
    z-index: 1;
    overflow: hidden;

}

.portrait-image img {
    width: 100%;
}

.portrait-copy {
    height: 50vh;
    margin: 0;
    background-color: #101820;
    mix-blend-mode: hard-light;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    position: relative;
}

.portrait-inner-copy {
    width: 90%;
    height: 43vh;
    overflow: auto;
    position: relative;
    bottom: 16px;
}

.portrait-copy ul {
    padding-left: 16px;
    list-style-image: url(../images/email.svg);
}

.portrait-copy li {
    margin: 0 0 16px 0;
    color: white;
    list-style: disc;
    width: 100%;
    font-size: 0.8rem;
    line-height: 1.61819;
}

.portrait-copy p {
    width: 100%;
    font-size: 0.8rem;
    line-height: 1.61819;
    display: inline-block;
}



.portrait-close {
    z-index: 1000;
    position: absolute;
    top: -80px;
    right: 0;
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    color: white;
    transition: .15s all ease-in;
    background-color: rgba(16, 24, 32, .6);
    padding: 8px 20px;
    border-radius: 50%;
}

.portrait-close:hover {
    background-color: rgba(152, 204, 204, 0.3);
}


/**************
**************
MODAL STYLES
**************
**************/



.modal {
    position: fixed;
    z-index: 1000;
    width: 100%;
    display: none;
    height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(16, 24, 32, 0.8);
}

.modal.active {
    display: block
}


.modal-item {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
}

@media only screen and (min-width:1024px) {

    .modal {
        width: 100vw;
        height: 100vh;
        background-color: rgba(16, 16, 16, 0.9);


    }

    .modal-item {
        width: 100%;
        margin: 0;
    }
}

.modal-holder {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background-color: #f9f9f9;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    border-radius: 8px;
    overflow: hidden;

}

@media only screen and (min-width:768px) {
    .modal-holder {
        width: 614px;
    }
}


@media only screen and (min-width:1024px) {
    .modal-holder {
        width: 800px;
    }
}

.modal-image {
    width: 100%;
    height: 300px;
    background-color: #d2d2d2;
    object-fit: cover;
}


.modal-video {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center;
}

.modal-info {
    width: 100%;
    height: 100%;
    padding: 32px 16px 108px 16px;
    position: relative;
}

.modal-info-top {
    position: relative;
}


.modal-info-bottom {
    position: absolute;
    bottom: 0;
    width: 90%;
    padding: 16px 0 16px 0;
    text-align: left;
    border-top: 1px solid #d3d3d3;
}

.modal-info-bottom span {
    font-size: .8rem;
    font-weight: 700;
    line-height: 0.5
}

.modal-info-contact {
    margin-top: 8px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.modal-info-contact a {
    width: 50%;
    font-size: 12px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;

}

.modal-info-contact a:hover {
    color: #98cccc;
}

.modal-info-contact img {
    width: 16px;
    height: auto;
    margin-right: 4px;
    display: inline-block;
}

@media only screen and (min-width:768px) {
    .modal-image {
        width: 50%;
        height: 414px;
    }

    .modal-video {
        height: 414px;
    }

    .modal-info {
        width: 50%;
        height: 414px;
        padding: 32px 16px;
    }

    .modal-info-bottom {
        position: absolute;
        text-align: left;
    }

    .modal-info-contact a {
        align-items: flex-start;
        justify-content: flex-start;
    }
}


@media only screen and (min-width:1024px) {
    .modal-image {
        width: 550px;
        height: 550px;
    }

    .modal-video {
        height: 550px;
    }

    .modal-info {
        width: 250px;
        height: 550px;
        padding: 32px 16px;
    }
}

.modal-head {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #101820;
}

.modal-subhead {
    display: block;
    font-size: .8rem;
    color: #989898;
    margin: 0 0 16px 0;
    font-weight: 700;
}

.modal-desc {
    display: block;
    font-size: 0.8rem;
}

.modal-link {
    font-size: 0.8rem;
    padding: 8px 16px;
    margin: 24px 0 0;
    display: inline-block;
    background-color: #0098cc;
    color: white;
    border-radius: 4px;
}

.modal-contact {
    position: absolute;
    height: 72px;
    width: 100%;
    font-size: .75rem;
    bottom: 0;
    padding: 0 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    text-align: center;
}

.modal-contact div {
    color: #101820;
    font-size: .75rem;
    display: block;
    width: 90%;
    font-weight: 700;
}

@media only screen and (min-width:768px) {
    .modal-contact span {}
}

.modal-contact a {
    display: inline-bock;
    text-align: center;
    color: #454545;
    display: flex;
    align-items: center;
    padding: 0 0 16px 0;
}

.modal-contact a:hover {
    color: #101820;
}

.modal-contact a img {
    height: 1rem;
    margin: 0 4px 0 0;
    width: auto;
}

.div-line {
    width: 1px;
    height: 100%;
    background-color: white;
}

@media only screen and (min-width:768px) {
    .modal-contact {
        width: 200px;
        right: 0;
    }
}

@media only screen and (min-width:1024px) {
    .modal-contact {
        width: 800px;
        left: 50%;
        transform: translateX(-50%);
        right: unset;
        align-items: center;
        flex-wrap: wrap;
        justify-content: flex-end;
        background-color: unset;
        padding: 32px 0;
    }

    .modal-contact div {
        position: absolute;
        right: 0;
        width: 250px;
        bottom: 48px;
        font-size: .9rem;
    }

    .modal-contact a {
        font-size: 1rem;
        font-weight: 700;
        width: 110px;
        margin: 0 8px 0 0;

    }
}

.slider {
    width: 80%;
    height: auto;
    margin: 0 auto;
    position: absolute;
    z-index: 1000;
    overflow-x: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media only screen and (max-width:768px) {
    .slider {
        width: 95%;
    }
}

.slider-close {
    z-index: 1000;
    position: fixed;
    top: 0;
    right: 0;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: white;
    transition: .15s all ease-in;
    background-color: rgba(16, 24, 32, .6);
    padding: 8px;
    border: 1px solid white;
}

@media only screen and (min-width:1024px) {
    .slider-close {
        font-size: .75rem;

    }
}

.slider-close:hover {
    background-color: rgba(152, 204, 204, 0.3);
}

.slider-close img {
    width: 20px;
    height: 20px;
}

.slider-inner {
    position: relative;
    width: 1300%;
    height: auto;
    margin-left: 0%;
    -webkit-transition: all .3s ease-in;
    transition: all .3s ease-in;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.slide {
    width: 24.5%;
    height: 100%;
    position: relative;
    display: inline-block;
}



.slider-inner div label.class {
    visibility: hidden;
}

.slider-inner div label {
    position: absolute;
    color: white;
    opacity: 1;
    z-index: 1001;
    cursor: pointer;
    background-color: rgba(16, 24, 32, 0.5);
    width: 40px;
    height: 60px;
    border: 1px solid white;
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    -webkit-transition: .15s all .15s;
    transition: opacity .15s all .15s;
    -webkit-transform: translateY(-25%);
    transform: translateY(-25%);
    top: 25%;
}

.slider-inner div label:hover {
    background-color: rgba(152, 204, 204, 0.3);
}

.slider-inner div label img {
    display: block;
    width: 10px;
    height: auto;
}


.slider-inner div label:nth-of-type(1) {
    left: 0px;
}

.slider-inner div label:nth-of-type(2) {
    right: 0px;
}

@media only screen and (min-width:768px) {
    .slider-inner div label {
        width: 25px;
        top: 50%
    }

    .slider-inner div label img {
        width: 10px;
    }
}


@media only screen and (min-width:1024px) {
    .slider-inner div label {
        width: 50px;
        top: 50%
    }

    .slider-inner div label img {
        width: 10px;
    }
}

.slider-inner div label:hover {}

#first:checked ~ .slider .slider-inner {
    margin-left: 0%;
}

#first:checked ~ .slider .slider-inner #first-slide label {
    opacity: 1;
}

#second:checked ~ .slider .slider-inner {
    margin-left: -100%;
}

#second:checked ~ .slider .slider-inner #second-slide label {
    opacity: 1;
}

#third:checked ~ .slider .slider-inner {
    margin-left: -200%;
}

#third:checked ~ .slider .slider-inner #third-slide label {
    opacity: 1;
}

#fourth:checked ~ .slider .slider-inner {
    margin-left: -300%;
}

#fourth:checked ~ .slider .slider-inner #fourth-slide label {
    opacity: 1;
}

#fifth:checked ~ .slider .slider-inner {
    margin-left: -400%;
}

#fifth:checked ~ .slider .slider-inner #fifth-slide label {
    opacity: 1;
}

#sixth:checked ~ .slider .slider-inner {
    margin-left: -500%;
}

#sixth:checked ~ .slider .slider-inner #sixth-slide label {
    opacity: 1;
}

#seventh:checked ~ .slider .slider-inner {
    margin-left: -600%;
}

#seventh:checked ~ .slider .slider-inner #seventh-slide label {
    opacity: 1;
}

#eighth:checked ~ .slider .slider-inner {
    margin-left: -700%;
}

#eighth:checked ~ .slider .slider-inner #eighth-slide label {
    opacity: 1;
}

#ninth:checked ~ .slider .slider-inner {
    margin-left: -800%;
}

#ninth:checked ~ .slider .slider-inner #ninth-slide label {
    opacity: 1;
}

#tenth:checked ~ .slider .slider-inner {
    margin-left: -900%;
}

#tenth:checked ~ .slider .slider-inner #tenth-slide label {
    opacity: 1;
}

#eleventh:checked ~ .slider .slider-inner {
    margin-left: -1000%;
}

#eleventh:checked ~ .slider .slider-inner #eleventh-slide label {
    opacity: 1;
}

#twelfth:checked ~ .slider .slider-inner {
    margin-left: -1100%;
}

#twelfth:checked ~ .slider .slider-inner #twelfth-slide label {
    opacity: 1;
}

#thirteenth:checked ~ .slider .slider-inner {
    margin-left: -1200%;
}

#thirteenth:checked ~ .slider .slider-inner #thirteenth-slide label {
    opacity: 1;
}


.slider-input {
    display: none;
}



.special-link {
    color: white;
    padding: 12px 32px;
    margin: 36px 0 0 0;
    display: inline-block;
    border: 1px solid white;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: 0.15s all ease-in;
    background-color: inherit;
}

.special-link:hover {
    background-color: #98cccc;
    color: #101820;
    border: 1px solid #98cccc;
}

.special-link-secondary {
    display: block;
    font-size: 14px;
    text-transform: ;
    color: #0098cc;
    font-weight: 400;
    letter-spacing: px;
    padding: 12px 0px;
    text-decoration: underline;
}



/*
DECLARATION BG
*/

.loading {
    filter: invert(48%) sepia(71%) saturate(3667%) hue-rotate(165deg) brightness(99%) contrast(101%);
    display: block;
    margin: 0 auto;
}

.video-center{
    margin: 32px auto 0;
    width: 90%;
    box-shadow: 0 16px 24px 0 rgb(0 0 0 .8);
    border: 8px solid white;
}

@media only screen and (max-width:1023px){
    .video-centern{
        width: 100%;
    }
}

[role="button"] {
    cursor: pointer;
}

.hero-footer-container{
    margin: 128px 0 0;
}

.cta {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    position: relative;
}

.cta h1,
.cta p {
    width: 100%;
    text-align: center;
    text-transform: uppercase;

}

.cta h1 {
    letter-spacing: 16px;
    font-size: 4rem;
    font-family: 'Poppins', sans-serif;
    line-height: 1;
}

.cta p {
    color: #0098cc;
    font-weight: 400;
    letter-spacing: 8px;
    font-family: 'Bebas Neue', sans-serif;
    cursor: pointer !important;
    position: relative;
    line-height: 0;
}

.cta img {
    width: 24px !important;
    position: relative;
    display: table;
}

.cta:hover > img {
    transition: 0.3s all ease;
    transform: translateY(16px);
}

.cta:hover > p {
    letter-spacing: 12px;
    transition: 0.3s all ease;
}

.cta:hover {
    color: #0098cc;
}


.declaration-hero {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}

.declaration-header,
.declaration-footer {
    width: 100%;
    height:100vh;
    position: relative;
}

.declaration-header-item,
.declaration-footer-item {
    width: 80%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    z-index: 2;
    text-align: center;
}

.declaration-header-item img {
    display: block;
    margin: 0 auto 24px;
}

.declaration-header-item img:nth-of-type(1) {
    width: 120px;
}

.declaration-header-item img:nth-of-type(2) {
    width: 60%;
}

.declaration-header-item p {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 8px;
    line-height: 0;
}

.declaration-bg {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    overflow: hidden;
    z-index: 1;
}

.declaration-bg video{
    filter:grayscale();
    transform: rotate(180deg);
}
/*
.bg-color {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 0;
    background-color: rgba(65, 65, 65, 1);
    mix-blend-mode: hue;
    -webkit-mix-blend-mode: hue;
}*/

.declaration-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media only screen and (min-width:1024px) {

    .declaration-header,
    .declaration-footer {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .declaration-bg {
        width: 100%;
        height: 100vh;
    }
}
/*
.bg-highlight {
    background-image: url(../images/gradient-bg-rev.svg);
    background-size: cover;
    background-color: #101820;
    background-blend-mode: soft-light;
    background-repeat: no-repeat;
    background-position: left 300px;
}
*/

.bg-highlight{
    background: #101820;
background: -webkit-linear-gradient(to top, #101820 30%, #1E2A42 50%, #202D47 51%, #101820 75%);
background: -moz-linear-gradient(to top, #101820 30%, #1E2A42 50%, #202D47 51%, #101820 75%);
background: linear-gradient(to top, #101820 30%, #1E2A42 50%, #202D47 51%, #101820 75%);



}


.slogan {
    text-align: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 8px;
    color: #0098cc;
    border-bottom: 3px solid #0098cc;
    display: table;
    margin: 0 auto;
}

.center-container {
    width: 90%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.center-container span {
    width: 100%;
    font-size: 6rem;
    font-family: 'Bebas Neue';
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(155, 155, 155, 0.2);
    position: absolute;
    top: -64px;
}

.center-container p {
    font-family: 'Bebas Neue';
    font-weight: 400;
    letter-spacing: 8px;
}

.box-container.promise {
    position: relative;
}

.promise-carousel {
    margin-bottom: 48px;
}

.promise-item {
    width: 64px;
    height: auto;
    text-align: center;
    display: inline-block;
    margin: 0 2% 0 0;
}

.promise-image {
    width: 64px;
    height: 64px;
    border: 2px solid #fff;
    border-radius: 50%;
}

.promise-label {
    margin: 4px 0 0;
    font-size: 12px;
    letter-spacing: 1px
}

.promise-content {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}

.promise-content-image {
    width: 100%;
    height: 30vh;
    overflow: hidden;
    margin-bottom: 48px;
    border: 8px solid #fff;
    background-image: url(../images/meeting.gif);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 16px 24px 0 rgb(0 0 0 .8);
}

.promise-content-image img {
    width: 100%;
    height: auto;
}

.promise-content-copy {
    width: 100%;
}

.promise-content-copy p {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    color: #ffffff;
    line-height: 2;
    margin-top: 0;
}

@media only screen and (min-width:768px) {
    .promise-content {
        margin: 32px 0 0 0;
    }

    .promise-content-image,
    .promise-content-copy {
        width: 48%;
    }

    .promise-content-copy p {
        font-size: 1rem;
    }
}

@media only screen and (min-width:1024px) {
    .promise-content-image {
        height: 320px;
    }
}

.section-titler {
    width: 100%;
    position: relative;
    text-align: center;
    font-family: 'Poppins', sans-serif;
}

.section-titler span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #0098cc;
    line-height: 0;
    margin: 0;
}

.section-titler p {
    font-size: 20px;
    font-weight: 400;
}


.team-content {
    width: 100%;
    position: relative;
    margin: 48px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}

.team-content-item {
    width: 100%;
    min-height: 240px;
    display: inline-block;
    position: relative;
    border: 8px solid #fff;
    background-size: cover;
    background-repeat: repeat;
    background-position: center center;
    box-shadow: 0 16px 24px 0 rgb(0 0 0 .8);
}

.team-content-item.one {
    margin: 0 0 48px;
    background-image: url(../images/mf-portrait.webp);
}

.team-content-item.one::before,
.team-content-item.two::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #777777;
    mix-blend-mode: color;
}

.team-content-item.two {
    background-image: url(../images/rm-portrait.webp);
}

@media only screen and (min-width:768px) {
    
    .team-content{
        justify-content: center
    }
    
    .team-content-item {
        width: 30%;
        margin: 0 5%;
    }
}

@media only screen and (min-width:1024px) {

}

.team-content-item > p {
    position: absolute;
    bottom: 0;
    left: 16px;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
}

.team-content-item > p span {
    display: block;
    font-size: 12px;
    font-weight: 400;
    font-style: italic;

}

.highlight-content {
    margin: 48px 0 0;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}


.highlight-image {
    width: 100%;
    height: auto;
    border: 8px solid #ffffff;
    box-shadow: 0 16px 24px 0 rgba(0 0 0 0.8);
}

.highlight-accordion {
    margin: 48px 0 0;
}

@media only screen and (min-width:1024px) {

    .highlight-image,
    .highlight-accordion {
        width: 48%;
        margin: 0;
    }
}

.accordion {
    background-color: #14202c;
    cursor: pointer;
    width: 100%;
    border: none;
    padding: 16px;
    text-align: right;
    outline: none;
    transition: 0.4s;
    font-family: 'Poppins', sans-serif;
    position: relative;
    color: #fff !important;
    border-radius: 4px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4);
    margin-bottom: 16px;
}

.accordion:hover {
    background-color: #2b3e50;
}

.accordion span {
    font-size: 22px;
    font-weight: 700;
    line-height: 0;
    margin: 0;
}

.accordion p {
    font-size: 14px;
    line-height: 1;
    margin: 8px 0 0;
    background: transparent;

}

.active.accordion,
.active.accordion:hover {
    background-color: #2b3e50;
    color: #ffffff !important;
}



.accordion:before {
    content: url(../images/arrow.svg);
    position: absolute;
    left: 16px;
    top: 40%;
    transform: translateY(-40%), rotate(0deg);
    transition: 0.3s all ease;
    transform-origin: center center;
    z-index: 5;

}

.active.accordion::before,
.active.accordion:hover::before {
    transform: rotate(90deg);
}



.panel {
    padding: 0 18px;
    background-color: transparent;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.panel p {
    text-align: left;
    font-size: 14px;
    line-height:
}

.client-gallery,
.partner-gallery {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}

.client-gallery img,
.partner-gallery img {
    background-color: #fff;
    margin: 0 0 4% 0;
}

.partner-gallery img {
    width: 48%
}

.partner-gallery img:first-of-type {
    width: 100%;
}

.client-gallery img {
    width: 31%
}

@media only screen and (min-width:1024px) {

    .partner-gallery img,
    .client-gallery img {
        width: 18%;
    }

    .partner-gallery img:first-of-type {
        width: 40%;
    }
}


.pre-portfolio-bg {
    //background-image: url(../images/portfolio-bg.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}


.pre-portfolio-btn {
    text-align: center;
    width: 100%;
    display: inline-block;
    color: white;
    font-size: 1rem;
}

.portfolio-contact-button {
    width: auto;
    padding: 12px 10%;
    margin: 32px auto 0;
    display: table;
    background-color: #0098cc;
    border-radius: 4px;
    color: #fff;
}


#wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
}

#wrap canvas {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 500px;
    height: 500px;
    margin: -250px 0 0 -250px;
    -outline: 1px solid #fff;
}

.info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 12px;
    color: #ccc;
    line-height: 2em;
    text-align: center;
}


.special-p{
    letter-spacing: 6px !important;
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
}

.table{
    width: 100%;
    margin: 0 auto;
    color: white;
}


.income-table{
    width: 66%;
    text-align: left;
    margin: 0 auto;
}

.table tr th:nth-of-type(1),
.table tr td:nth-of-type(1){
    padding: 6px 2% 6px 4%;
    width: 45%;
}

.table tr th:nth-of-type(2),
.table tr td:nth-of-type(2){
    padding: 6px 2% 6px 4%;
    width: 55%;
}

.table tr:nth-of-type(even){
    background-color: rgba(255,255,255,0.1)
}

.table tr:nth-of-type(odd){
    background-color: rgba(255,255,255,0.3)
}