:root {
    --nav-height: 90px;
    --bg-color: #fff;
    --body-color: #000;
    --dark-grey: #575756;
}

body {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
p {
    font-weight: 300;
    margin: 0;
}

a {
    color: inherit;
}

::-moz-selection {
    /* Code for Firefox */
    color: var(--bg-color);
    background: var(--dark-grey);
}

::selection {
    color: var(--bg-color);
    background: var(--dark-grey);
}

.border {
    border-color: var(--dark-grey) !important;
}

.text-dark-grey {
    color: var(--dark-grey) !important;
}

.letter-spacing-1 {
    letter-spacing: 1.4px;
}

.letter-spacing-2 {
    letter-spacing: 2.4px;
}

.letter-spacing-4 {
    letter-spacing: 4px;
}

.swiper-pagination-bullet-active {
    background: var(--dark-grey) !important;
}

/* Start: Helpers */

.font-secondary {
    font-family: 'Roboto', sans-serif;
}

.transition-05 {
    transition: 0.5s;
}

.transition-1 {
    transition: 1s;
}

.dark-body {
    background-color: var(--dark-grey);
    color: var(--bg-color);
}

.h-100vh {
    height: 100vh;
}

.w-100vw {
    width: 100vw;
}

.scale-on-hover {
    transform: scale(1);
}

@media (hover: hover) {
    .scale-on-hover:hover {
        transform: scale(1.1);
    }
}

.show-on-hover {
    opacity: 0;
}

@media (hover: hover) {
    .show-on-hover:hover {
        opacity: 1;
    }
}

.translate-y-on-hover {
    transform: translateY(0%);
    transition: transform 0.5s;
}

@media (hover: hover) {
    .translate-y-on-hover:hover {
        transform: translateY(-20%);
    }
}

.background-attachment-fixed {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    background-attachment: fixed;
}

.underline-hover {
    position: relative;
}

.underline-hover::before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0px;
    height: 2px;
    background-color: var(--dark-grey);
    transition: width 0.5s;
}

.dark-body .underline-hover::before {
    background-color: var(--bg-color);
}

.underline-hover:hover::before {
    width: 30px;
}

.grey-bg-hover {
    background-color: #D9D9D9;

}

@media (hover: hover) {
    .grey-bg-hover:hover {
        background-color: var(--dark-grey);
        color: var(--bg-color);
    }
}

.dark-overlay {
    background-color: rgba(0, 0, 0, 0.3);
}

.z-index-1 {
    z-index: 1;
}

/* End: Helpers */

/* Start: Form */

.custom-alert {
    left: 50%;
    right: auto;
    opacity: 0;
    transform: translate(-50%, 0px);
    transition: transform 0.5s, opacity 0.5s;
    max-width: 400px;
}

.custom-alert.show {
    transform: translate(-50%, 60px);
    opacity: 1;
}

.custom-input {
    border: 1px solid #575756;
    border-radius: 0;
    padding: 12px 18px;
    font-size: 14px;
    outline: none !important;
}

.custom-input:focus {
    border-color: inherit;
    box-shadow: none;
}

/* End: Form */

/* Start: Navbar */

.navbar-height {
    height: var(--nav-height);
}

.search-form-wrapper {
    background-color: var(--bg-color);
}

.dark-body .search-form-wrapper {
    background-color: var(--dark-grey);
}

.search-svg {
    cursor: pointer;
}

.search-svg * {
    stroke: var(--dark-grey);
}

.dark-body .search-svg * {
    stroke: var(--bg-color);
}

.search-form input {
    font-size: 22px;
    background-color: transparent;
}

.dark-body .search-form input {
    color: var(--bg-color);
}

.dark-body .search-form input::placeholder {
    color: var(--bg-color);
    opacity: 0.75;
    /* Firefox */
}

.dark-body .search-form input::-ms-input-placeholder {
    /* Edge 12-18 */
    color: var(--bg-color);
    opacity: 0.75;
}

.custom-burger-button {
    width: 50px;
    height: 30px;
    cursor: pointer;
}

.custom-burger-button div {
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: var(--dark-grey);
    opacity: 1;
}

.dark-body .custom-burger-button div {
    background-color: var(--bg-color);
}

.custom-burger-button div:nth-child(1) {
    top: 0;
    left: 0;
    transform-origin: top left;
}

.custom-burger-button div:nth-child(2) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.custom-burger-button div:nth-child(3) {
    left: 0;
    bottom: 0;
    transform-origin: bottom left;
}

.custom-burger-button.open div:nth-child(1) {
    transform: rotate(30deg);
    width: 114%;
}

.custom-burger-button.open div:nth-child(2) {
    opacity: 0;
}

.custom-burger-button.open div:nth-child(3) {
    transform: rotate(-30deg);
    width: 114%;
}

.custom-menu {
    background-color: var(--bg-color);
    transform: translateY(-110%);
    opacity: 0;
}

.dark-body .custom-menu {
    background-color: var(--dark-grey);
}

.custom-menu.open {
    opacity: 1;
    transform: translateY(0%);
}

.custom-logo-wrapper {
    height: 57px;
    width: 100px;
}

.custom-logo-wrapper .dark {
    opacity: 1;
}

.custom-logo-wrapper .light {
    opacity: 0;
}

.dark-body .custom-logo-wrapper .dark {
    opacity: 0;
}

.dark-body .custom-logo-wrapper .light {
    opacity: 1;
}

.custom-menu-item {
    transition: opacity 1s;
    opacity: 0;
}

.custom-menu.open .custom-menu-item {
    opacity: 1;
}

.custom-menu.open .custom-menu-item:nth-child(1) {
    transition-delay: 0.55s;
}

.custom-menu.open .custom-menu-item:nth-child(2) {
    transition-delay: 0.7s;
}

.custom-menu.open .custom-menu-item:nth-child(3) {
    transition-delay: 0.85s;
}

.custom-menu.open .custom-menu-item:nth-child(4) {
    transition-delay: 1s;
}

.custom-menu.open .custom-menu-item:nth-child(5) {
    transition-delay: 1.15s;
}

.custom-menu.open .custom-menu-item:nth-child(6) {
    transition-delay: 1.3s;
}

.custom-menu.open .custom-menu-item:nth-child(7) {
    transition-delay: 1.45s;
}

.custom-menu.open .custom-menu-item:nth-child(8) {
    transition-delay: 1.6s;
}

.custom-menu.open .custom-menu-item:nth-child(9) {
    transition-delay: 1.75s;
}

.custom-menu.open .custom-menu-item:nth-child(10) {
    transition-delay: 1.9s;
}

.custom-menu.open .custom-menu-item.footer {
    transition-delay: 1.9s;
}

.custom-menu-social-media-wrapper {
    height: 24px;
    width: 24px;
}

.custom-menu-social-media-wrapper .light {
    opacity: 0;
}

.custom-menu-social-media-wrapper .dark {
    opacity: 1;
}

.dark-body .custom-menu-social-media-wrapper .light {
    opacity: 1;
}

.dark-body .custom-menu-social-media-wrapper .dark {
    opacity: 0;
}

.hide-navbar-onscroll {
    transform: translateY(-110%);
}

/* End: Navbar */

/* Start: Header */

.header-overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

.header-ratio {
    /*padding-top: 37.1875%;*/
    height: 50vh;
}

/* End: Header */

/* Start: Button */

.custom-button {
    background-color: var(--bg-color);
    border: 1px solid var(--dark-grey);
    border-radius: 0;
    padding-top: 12px;
    padding-bottom: 12px;
    width: 160px;
    font-size: 14px;
    transition: 0.6s;
    letter-spacing: 1.4px;
}

@media (hover: hover) {
    .custom-button:hover {
        background-color: var(--dark-grey);
        color: var(--bg-color);
    }
}

.custom-button.secondary {
    background-color: transparent;
    border: 1px solid var(--bg-color);
}

@media (hover: hover) {
    .custom-button.secondary:hover {
        background-color: var(--bg-color);
        color: var(--dark-grey);
    }
}

.dark-body .custom-button {
    background-color: var(--dark-grey);
    border-color: var(--bg-color);
    color: var(--bg-color);
}

/* End: Button */

/* Start: Footer */

.footer-border {
    border: 3px solid var(--dark-grey);
    border-right: none;
    border-left: none;
}

/* End: Footer */

/* Start: Home */

.home-text-color {
    color: var(--dark-grey);
}

.dark-body .home-text-color {
    color: var(--bg-color);
}

.home-arrow-wrapper {
    width: 34px;
    height: 65px;
    cursor: pointer;
}

.home-arrow-wrapper .dark {
    opacity: 1;
}

.home-arrow-wrapper .light {
    opacity: 0;
}

.dark-body .home-arrow-wrapper .dark {
    opacity: 0;
}

.dark-body .home-arrow-wrapper .light {
    opacity: 1;
}

.home-grid-view {
    transform: translateY(110%);
    opacity: 0;
}

.home-grid-view.show {
    transform: translateY(0%);
    opacity: 1;
}

.home-grid-image>*:not(img) {
    opacity: 0;
}

@media (hover: hover) {
    .home-grid-image:hover>*:not(img) {
        opacity: 1;
    }

    .home-grid-image:hover>img {
        transform: scale(1.1);
    }
}

/* End: Home */

/* Start: Our Story */

.scrolling-title {
    width: 120vw;
    margin-right: 4vw;
    animation-name: scrollingtitle;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes scrollingtitle {
    from {
        transform: translate(0);
    }

    to {
        transform: translate(-124vw);
    }
}

/* width */
.our-story-about-images::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/* Track */
.our-story-about-images::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
.our-story-about-images::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
@media (hover: hover) {
    .our-story-about-images::-webkit-scrollbar-thumb:hover {
        background: #555;

    }
}

.our-story-about-images {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    max-width: calc(50% + 1365px*4/12/2 - 80px);
}

/* End: Our Story */

/* Start: Contact */

.contact-header-title-wrapper {
    position: relative;
    margin-right: -14px;
}

.contact-header-title-wrapper::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 74px;
    height: 3px;
    border-radius: 3px;
    background: var(--dark-grey);
}

.embedded-iframe-wrapper iframe {
    display: block;
    width: 100%;
}

/* End: Contact */

/* Start: Pagination */

.pagination {
    margin-bottom: 0;
}

.pagination .page-link {
    width: 40px;
    text-align: center;
    border-radius: 0 !important;
    color: inherit;
    border-width: 1px;
    border-color: var(--dark-grey);
    box-shadow: none;
}

.pagination .page-item.active .page-link {
    background: var(--dark-grey);
    color: var(--bg-color);
}

.page-item.disabled {
    display: none;
}

/* End: Pagination */

/* Start: Animation */

[animate] {
    transition: transform 1s 0.5s, opacity 1s 0.5s;
    opacity: 0;
}

[animate].show {
    opacity: 1;
}

[animate="left"] {
    transform: translateX(-15px);
}

[animate="left"].show {
    transform: translateX(0);
}

[animate="right"] {
    transform: translateX(15px);
}

[animate="right"].show {
    transform: translateX(0);
}

[animate="up"] {
    transform: translateY(-15px);
}

[animate="up"].show {
    transform: translateY(0);
}

[animate="down"] {
    transform: translateY(15px);
}

[animate="down"].show {
    transform: translateY(0);
}

/* End: Animation */

/* X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .our-story-about-images {
        position: relative;
        width: 100%;
        max-width: none;
    }

    .background-attachment-fixed {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
        background-attachment: scroll;
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .scrolling-title {
        width: 220vw;
        margin-right: 4vw;
    }

    @keyframes scrollingtitle {
        from {
            transform: translate(0);
        }

        to {
            transform: translate(-224vw);
        }
    }
}

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .scrolling-title {
        width: 320vw;
        margin-right: 4vw;
    }

    @keyframes scrollingtitle {
        from {
            transform: translate(0);
        }

        to {
            transform: translate(-324vw);
        }
    }
}