/*!

 * Bootstrap v4.0.0 (https://getbootstrap.com)

 * Copyright 2011-2018 The Bootstrap Authors

 * Copyright 2011-2018 Twitter, Inc.

 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

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

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent
}

@-ms-viewport {
    width: device-width
}

footer,header,nav,section {
    display: block
}

body {
    margin: 0;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff
}

[tabindex="-1"]:focus {
    outline: 0!important
}

ul ul {
    margin-bottom: 0
}

b {
    font-weight: bolder
}

a {
    color: #007bff;
    background-color: transparent;
    -webkit-text-decoration-skip: objects
}

a:hover {
    color: #0056b3
}

a:not([href]):not([tabindex]),a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover {
    color: inherit;
    text-decoration: none
}

a:not([href]):not([tabindex]):focus {
    outline: 0
}

img {
    vertical-align: middle;
    border-style: none
}

button {
    border-radius: 0
}

button:focus {
    outline: dotted 1px;
    outline: -webkit-focus-ring-color auto 5px
}

button,input,select,textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

button,input {
    overflow: visible
}

button,select {
    text-transform: none
}

[type=submit],button,html [type=button] {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner {
    padding: 0;
    border-style: none
}

input[type=time] {
    -webkit-appearance: listbox
}

textarea {
    overflow: auto;
    resize: vertical
}

[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
    height: auto
}

::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button
}

.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
    margin-bottom: .5rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: inherit
}

.h1,h1 {
    font-size: 2.5rem
}

.h2,h2 {
    font-size: 2rem
}

.h3,h3 {
    font-size: 1.75rem
}

.h4,h4 {
    font-size: 1.5rem
}

.h5,h5 {
    font-size: 1.25rem
}

.h6,h6 {
    font-size: 1rem
}

.img-fluid {
    max-width: 100%;
    height: auto
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

@media (min-width: 576px) {
    .container {
        max-width:540px
    }
}

@media (min-width: 768px) {
    .container {
        max-width:720px
    }
}

@media (min-width: 992px) {
    .container {
        max-width:960px
    }
}

@media (min-width: 1200px) {
    .container {
        max-width:1140px
    }
}

.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px
}

.col-12,.col-lg-12,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-8,.col-lg-9,.col-md-12,.col-md-5,.col-md-7 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px
}

.col-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%
}

@media (min-width: 768px) {
    .col-md-5 {
        -webkit-box-flex:0;
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%
    }

    .col-md-7 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%
    }

    .col-md-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }
}

@media (min-width: 992px) {
    .col-lg-3 {
        -webkit-box-flex:0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-lg-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }

    .col-lg-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%
    }

    .col-lg-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-lg-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%
    }

    .col-lg-9 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-lg-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }
}

.valid-tooltip {
    position: absolute;
    top: 100%;
    z-index: 5;
    display: none;
    max-width: 100%;
    padding: .5rem;
    margin-top: .1rem;
    font-size: .875rem;
    line-height: 1;
    color: #fff;
    background-color: rgba(40,167,69,.8);
    border-radius: .2rem
}

.custom-select.is-valid~.valid-tooltip,.form-control.is-valid~.valid-tooltip,.was-validated .custom-select:valid~.valid-tooltip,.was-validated .form-control:valid~.valid-tooltip {
    display: block
}

.form-check-input.is-valid~.valid-tooltip,.was-validated .form-check-input:valid~.valid-tooltip {
    display: block
}

.custom-control-input.is-valid~.valid-tooltip,.was-validated .custom-control-input:valid~.valid-tooltip {
    display: block
}

.custom-file-input.is-valid~.valid-tooltip,.was-validated .custom-file-input:valid~.valid-tooltip {
    display: block
}

.invalid-tooltip {
    position: absolute;
    top: 100%;
    z-index: 5;
    display: none;
    max-width: 100%;
    padding: .5rem;
    margin-top: .1rem;
    font-size: .875rem;
    line-height: 1;
    color: #fff;
    background-color: rgba(220,53,69,.8);
    border-radius: .2rem
}

.custom-select.is-invalid~.invalid-tooltip,.form-control.is-invalid~.invalid-tooltip,.was-validated .custom-select:invalid~.invalid-tooltip,.was-validated .form-control:invalid~.invalid-tooltip {
    display: block
}

.form-check-input.is-invalid~.invalid-tooltip,.was-validated .form-check-input:invalid~.invalid-tooltip {
    display: block
}

.custom-control-input.is-invalid~.invalid-tooltip,.was-validated .custom-control-input:invalid~.invalid-tooltip {
    display: block
}

.custom-file-input.is-invalid~.invalid-tooltip,.was-validated .custom-file-input:invalid~.invalid-tooltip {
    display: block
}

.show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #0062cc;
    border-color: #005cbf
}

.show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.5)
}

.show>.btn-secondary.dropdown-toggle {
    color: #fff;
    background-color: #545b62;
    border-color: #4e555b
}

.show>.btn-secondary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(108,117,125,.5)
}

.show>.btn-success.dropdown-toggle {
    color: #fff;
    background-color: #1e7e34;
    border-color: #1c7430
}

.show>.btn-success.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(40,167,69,.5)
}

.show>.btn-info.dropdown-toggle {
    color: #fff;
    background-color: #117a8b;
    border-color: #10707f
}

.show>.btn-info.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(23,162,184,.5)
}

.show>.btn-warning.dropdown-toggle {
    color: #212529;
    background-color: #d39e00;
    border-color: #c69500
}

.show>.btn-warning.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(255,193,7,.5)
}

.show>.btn-danger.dropdown-toggle {
    color: #fff;
    background-color: #bd2130;
    border-color: #b21f2d
}

.show>.btn-danger.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(220,53,69,.5)
}

.show>.btn-light.dropdown-toggle {
    color: #212529;
    background-color: #dae0e5;
    border-color: #d3d9df
}

.show>.btn-light.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(248,249,250,.5)
}

.show>.btn-dark.dropdown-toggle {
    color: #fff;
    background-color: #1d2124;
    border-color: #171a1d
}

.show>.btn-dark.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(52,58,64,.5)
}

.show>.btn-outline-primary.dropdown-toggle {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff
}

.show>.btn-outline-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.5)
}

.show>.btn-outline-secondary.dropdown-toggle {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d
}

.show>.btn-outline-secondary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(108,117,125,.5)
}

.show>.btn-outline-success.dropdown-toggle {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745
}

.show>.btn-outline-success.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(40,167,69,.5)
}

.show>.btn-outline-info.dropdown-toggle {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8
}

.show>.btn-outline-info.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(23,162,184,.5)
}

.show>.btn-outline-warning.dropdown-toggle {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107
}

.show>.btn-outline-warning.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(255,193,7,.5)
}

.show>.btn-outline-danger.dropdown-toggle {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545
}

.show>.btn-outline-danger.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(220,53,69,.5)
}

.show>.btn-outline-light.dropdown-toggle {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa
}

.show>.btn-outline-light.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(248,249,250,.5)
}

.show>.btn-outline-dark.dropdown-toggle {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40
}

.show>.btn-outline-dark.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(52,58,64,.5)
}

.fade {
    opacity: 0;
    transition: opacity .15s linear
}

.fade.show {
    opacity: 1
}

.collapse {
    display: none
}

.collapse.show {
    display: block
}

tr.collapse.show {
    display: table-row
}

tbody.collapse.show {
    display: table-row-group
}

.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    transition: height .35s
}

.dropdown {
    position: relative
}

.dropdown-toggle::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent
}

.dropdown-toggle:empty::after {
    margin-left: 0
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem
}

.dropup .dropdown-menu {
    margin-top: 0;
    margin-bottom: .125rem
}

.dropup .dropdown-toggle::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: 0;
    border-right: .3em solid transparent;
    border-bottom: .3em solid;
    border-left: .3em solid transparent
}

.dropup .dropdown-toggle:empty::after {
    margin-left: 0
}

.dropright .dropdown-menu {
    margin-top: 0;
    margin-left: .125rem
}

.dropright .dropdown-toggle::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .255em;
    content: "";
    border-top: .3em solid transparent;
    border-bottom: .3em solid transparent;
    border-left: .3em solid;
    vertical-align: 0
}

.dropright .dropdown-toggle:empty::after {
    margin-left: 0
}

.dropleft .dropdown-menu {
    margin-top: 0;
    margin-right: .125rem
}

.dropleft .dropdown-toggle::after {
    width: 0;
    height: 0;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    display: none
}

.dropleft .dropdown-toggle::before {
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: .255em;
    content: "";
    border-top: .3em solid transparent;
    border-right: .3em solid;
    border-bottom: .3em solid transparent;
    vertical-align: 0
}

.dropleft .dropdown-toggle:empty::after {
    margin-left: 0
}

.dropdown-divider {
    height: 0;
    margin: .5rem 0;
    overflow: hidden;
    border-top: 1px solid #e9ecef
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: .25rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0
}

.dropdown-item:focus,.dropdown-item:hover {
    color: #16181b;
    text-decoration: none;
    background-color: #f8f9fa
}

.dropdown-item.active,.dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: #007bff
}

.dropdown-item.disabled,.dropdown-item:disabled {
    color: #6c757d;
    background-color: transparent
}

.dropdown-menu.show {
    display: block
}

.dropdown-header {
    display: block;
    padding: .5rem 1.5rem;
    margin-bottom: 0;
    font-size: .875rem;
    color: #6c757d;
    white-space: nowrap
}

.dropdown-toggle-split {
    padding-right: .5625rem;
    padding-left: .5625rem
}

.dropdown-toggle-split::after {
    margin-left: 0
}

.btn-group-sm>.btn+.dropdown-toggle-split,.btn-sm+.dropdown-toggle-split {
    padding-right: .375rem;
    padding-left: .375rem
}

.btn-group-lg>.btn+.dropdown-toggle-split,.btn-lg+.dropdown-toggle-split {
    padding-right: .75rem;
    padding-left: .75rem
}

.nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none
}

.nav-link {
    display: block;
    padding: .5rem 1rem
}

.nav-link:focus,.nav-link:hover {
    text-decoration: none
}

.nav-tabs .dropdown-menu {
    margin-top: -1px;
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.navbar {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: .5rem 1rem
}

.navbar>.container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.navbar-brand {
    display: inline-block;
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap
}

.navbar-brand:focus,.navbar-brand:hover {
    text-decoration: none
}

.navbar-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none
}

.navbar-nav .nav-link {
    padding-right: 0;
    padding-left: 0
}

.navbar-nav .dropdown-menu {
    position: static;
    float: none
}

.navbar-collapse {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.navbar-toggler {
    padding: .25rem .75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: .25rem
}

.navbar-toggler:focus,.navbar-toggler:hover {
    text-decoration: none
}

.navbar-toggler:not(:disabled):not(.disabled) {
    cursor: pointer
}

.navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    content: "";
    background: center center/100% 100% no-repeat
}

@media (min-width: 576px) {
    .navbar-expand-sm .navbar-nav .dropdown-menu {
        position:absolute
    }

    .navbar-expand-sm .navbar-nav .dropdown-menu-right {
        right: 0;
        left: auto
    }

    .navbar-expand-sm .navbar-collapse {
        display: -webkit-box!important;
        display: -ms-flexbox!important;
        display: flex!important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto
    }

    .navbar-expand-sm .dropup .dropdown-menu {
        top: auto;
        bottom: 100%
    }
}

@media (min-width: 768px) {
    .navbar-expand-md .navbar-nav .dropdown-menu {
        position:absolute
    }

    .navbar-expand-md .navbar-nav .dropdown-menu-right {
        right: 0;
        left: auto
    }

    .navbar-expand-md .navbar-collapse {
        display: -webkit-box!important;
        display: -ms-flexbox!important;
        display: flex!important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto
    }

    .navbar-expand-md .dropup .dropdown-menu {
        top: auto;
        bottom: 100%
    }
}

@media (max-width: 991.98px) {
    .navbar-expand-lg>.container {
        padding-right:0;
        padding-left: 0
    }
}

@media (min-width: 992px) {
    .navbar-expand-lg {
        -webkit-box-orient:horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start
    }

    .navbar-expand-lg .navbar-nav {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }

    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute
    }

    .navbar-expand-lg .navbar-nav .dropdown-menu-right {
        right: 0;
        left: auto
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem
    }

    .navbar-expand-lg>.container {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap
    }

    .navbar-expand-lg .navbar-collapse {
        display: -webkit-box!important;
        display: -ms-flexbox!important;
        display: flex!important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto
    }

    .navbar-expand-lg .navbar-toggler {
        display: none
    }

    .navbar-expand-lg .dropup .dropdown-menu {
        top: auto;
        bottom: 100%
    }
}

@media (min-width: 1200px) {
    .navbar-expand-xl .navbar-nav .dropdown-menu {
        position:absolute
    }

    .navbar-expand-xl .navbar-nav .dropdown-menu-right {
        right: 0;
        left: auto
    }

    .navbar-expand-xl .navbar-collapse {
        display: -webkit-box!important;
        display: -ms-flexbox!important;
        display: flex!important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto
    }

    .navbar-expand-xl .dropup .dropdown-menu {
        top: auto;
        bottom: 100%
    }
}

.navbar-expand .navbar-nav .dropdown-menu {
    position: absolute
}

.navbar-expand .navbar-nav .dropdown-menu-right {
    right: 0;
    left: auto
}

.navbar-expand .navbar-collapse {
    display: -webkit-box!important;
    display: -ms-flexbox!important;
    display: flex!important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto
}

.navbar-expand .dropup .dropdown-menu {
    top: auto;
    bottom: 100%
}

.media {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5
}

.close:focus,.close:hover {
    color: #000;
    text-decoration: none;
    opacity: .75
}

.close:not(:disabled):not(.disabled) {
    cursor: pointer
}

button.close {
    padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none
}

.modal-open {
    overflow: hidden
}

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    display: none;
    overflow: hidden;
    outline: 0
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: .5rem;
    pointer-events: none
}

.modal.fade .modal-dialog {
    transition: transform .3s ease-out;
    transition: transform .3s ease-out,-webkit-transform .3s ease-out;
    -webkit-transform: translate(0,-25%);
    transform: translate(0,-25%)
}

.modal.show .modal-dialog {
    -webkit-transform: translate(0,0);
    transform: translate(0,0)
}

.modal-dialog-centered {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: calc(100% - (.5rem * 2))
}

.modal-content {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem;
    outline: 0
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000
}

.modal-backdrop.fade {
    opacity: 0
}

.modal-backdrop.show {
    opacity: .5
}

.modal-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #e9ecef;
    border-top-left-radius: .3rem;
    border-top-right-radius: .3rem
}

.modal-header .close {
    padding: 1rem;
    margin: -1rem -1rem -1rem auto
}

.modal-title {
    margin-bottom: 0;
    line-height: 1.5
}

.modal-body {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1rem
}

.modal-footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 1rem;
    border-top: 1px solid #e9ecef
}

.modal-footer>:not(:first-child) {
    margin-left: .25rem
}

.modal-footer>:not(:last-child) {
    margin-right: .25rem
}

.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width:500px;
        margin: 1.75rem auto
    }

    .modal-dialog-centered {
        min-height: calc(100% - (1.75rem * 2))
    }

    .modal-sm {
        max-width: 300px
    }
}

@media (min-width: 992px) {
    .modal-lg {
        max-width:800px
    }
}

.tooltip {
    position: absolute;
    z-index: 1070;
    display: block;
    margin: 0;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    white-space: normal;
    line-break: auto;
    font-size: .875rem;
    word-wrap: break-word;
    opacity: 0
}

.tooltip.show {
    opacity: .9
}

.tooltip .arrow {
    position: absolute;
    display: block;
    width: .8rem;
    height: .4rem
}

.tooltip .arrow::before {
    position: absolute;
    content: "";
    border-color: transparent;
    border-style: solid
}

.bs-tooltip-auto[x-placement^=top],.bs-tooltip-top {
    padding: .4rem 0
}

.bs-tooltip-auto[x-placement^=top] .arrow,.bs-tooltip-top .arrow {
    bottom: 0
}

.bs-tooltip-auto[x-placement^=top] .arrow::before,.bs-tooltip-top .arrow::before {
    top: 0;
    border-width: .4rem .4rem 0;
    border-top-color: #000
}

.bs-tooltip-auto[x-placement^=right],.bs-tooltip-right {
    padding: 0 .4rem
}

.bs-tooltip-auto[x-placement^=right] .arrow,.bs-tooltip-right .arrow {
    left: 0;
    width: .4rem;
    height: .8rem
}

.bs-tooltip-auto[x-placement^=right] .arrow::before,.bs-tooltip-right .arrow::before {
    right: 0;
    border-width: .4rem .4rem .4rem 0;
    border-right-color: #000
}

.bs-tooltip-auto[x-placement^=bottom],.bs-tooltip-bottom {
    padding: .4rem 0
}

.bs-tooltip-auto[x-placement^=bottom] .arrow,.bs-tooltip-bottom .arrow {
    top: 0
}

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,.bs-tooltip-bottom .arrow::before {
    bottom: 0;
    border-width: 0 .4rem .4rem;
    border-bottom-color: #000
}

.bs-tooltip-auto[x-placement^=left],.bs-tooltip-left {
    padding: 0 .4rem
}

.bs-tooltip-auto[x-placement^=left] .arrow,.bs-tooltip-left .arrow {
    right: 0;
    width: .4rem;
    height: .8rem
}

.bs-tooltip-auto[x-placement^=left] .arrow::before,.bs-tooltip-left .arrow::before {
    left: 0;
    border-width: .4rem 0 .4rem .4rem;
    border-left-color: #000
}

.tooltip-inner {
    max-width: 200px;
    padding: .25rem .5rem;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: .25rem
}

.popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1060;
    display: block;
    max-width: 276px;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    white-space: normal;
    line-break: auto;
    font-size: .875rem;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem
}

.popover .arrow {
    position: absolute;
    display: block;
    width: 1rem;
    height: .5rem;
    margin: 0 .3rem
}

.popover .arrow::after,.popover .arrow::before {
    position: absolute;
    display: block;
    content: "";
    border-color: transparent;
    border-style: solid
}

.bs-popover-auto[x-placement^=top],.bs-popover-top {
    margin-bottom: .5rem
}

.bs-popover-auto[x-placement^=top] .arrow,.bs-popover-top .arrow {
    bottom: calc((.5rem + 1px) * -1)
}

.bs-popover-auto[x-placement^=top] .arrow::after,.bs-popover-auto[x-placement^=top] .arrow::before,.bs-popover-top .arrow::after,.bs-popover-top .arrow::before {
    border-width: .5rem .5rem 0
}

.bs-popover-auto[x-placement^=top] .arrow::before,.bs-popover-top .arrow::before {
    bottom: 0;
    border-top-color: rgba(0,0,0,.25)
}

.bs-popover-auto[x-placement^=top] .arrow::after,.bs-popover-top .arrow::after {
    bottom: 1px;
    border-top-color: #fff
}

.bs-popover-auto[x-placement^=right],.bs-popover-right {
    margin-left: .5rem
}

.bs-popover-auto[x-placement^=right] .arrow,.bs-popover-right .arrow {
    left: calc((.5rem + 1px) * -1);
    width: .5rem;
    height: 1rem;
    margin: .3rem 0
}

.bs-popover-auto[x-placement^=right] .arrow::after,.bs-popover-auto[x-placement^=right] .arrow::before,.bs-popover-right .arrow::after,.bs-popover-right .arrow::before {
    border-width: .5rem .5rem .5rem 0
}

.bs-popover-auto[x-placement^=right] .arrow::before,.bs-popover-right .arrow::before {
    left: 0;
    border-right-color: rgba(0,0,0,.25)
}

.bs-popover-auto[x-placement^=right] .arrow::after,.bs-popover-right .arrow::after {
    left: 1px;
    border-right-color: #fff
}

.bs-popover-auto[x-placement^=bottom],.bs-popover-bottom {
    margin-top: .5rem
}

.bs-popover-auto[x-placement^=bottom] .arrow,.bs-popover-bottom .arrow {
    top: calc((.5rem + 1px) * -1)
}

.bs-popover-auto[x-placement^=bottom] .arrow::after,.bs-popover-auto[x-placement^=bottom] .arrow::before,.bs-popover-bottom .arrow::after,.bs-popover-bottom .arrow::before {
    border-width: 0 .5rem .5rem
}

.bs-popover-auto[x-placement^=bottom] .arrow::before,.bs-popover-bottom .arrow::before {
    top: 0;
    border-bottom-color: rgba(0,0,0,.25)
}

.bs-popover-auto[x-placement^=bottom] .arrow::after,.bs-popover-bottom .arrow::after {
    top: 1px;
    border-bottom-color: #fff
}

.bs-popover-auto[x-placement^=bottom] .popover-header::before,.bs-popover-bottom .popover-header::before {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: 1rem;
    margin-left: -.5rem;
    content: "";
    border-bottom: 1px solid #f7f7f7
}

.bs-popover-auto[x-placement^=left],.bs-popover-left {
    margin-right: .5rem
}

.bs-popover-auto[x-placement^=left] .arrow,.bs-popover-left .arrow {
    right: calc((.5rem + 1px) * -1);
    width: .5rem;
    height: 1rem;
    margin: .3rem 0
}

.bs-popover-auto[x-placement^=left] .arrow::after,.bs-popover-auto[x-placement^=left] .arrow::before,.bs-popover-left .arrow::after,.bs-popover-left .arrow::before {
    border-width: .5rem 0 .5rem .5rem
}

.bs-popover-auto[x-placement^=left] .arrow::before,.bs-popover-left .arrow::before {
    right: 0;
    border-left-color: rgba(0,0,0,.25)
}

.bs-popover-auto[x-placement^=left] .arrow::after,.bs-popover-left .arrow::after {
    right: 1px;
    border-left-color: #fff
}

.popover-header {
    padding: .5rem .75rem;
    margin-bottom: 0;
    font-size: 1rem;
    color: inherit;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
    border-top-left-radius: calc(.3rem - 1px);
    border-top-right-radius: calc(.3rem - 1px)
}

.popover-header:empty {
    display: none
}

.popover-body {
    padding: .5rem .75rem;
    color: #212529
}

.carousel {
    position: relative
}

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden
}

.carousel-item {
    position: relative;
    display: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    transition: transform .6s;
    transition: transform .6s,-webkit-transform .6s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px
}

.carousel-item-next,.carousel-item-prev,.carousel-item.active {
    display: block
}

.carousel-item-next,.carousel-item-prev {
    position: absolute;
    top: 0
}

.carousel-item-next.carousel-item-left,.carousel-item-prev.carousel-item-right {
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

@supports ((-webkit-transform-style: preserve-3d) or (transform-style:preserve-3d)) {
    .carousel-item-next.carousel-item-left,.carousel-item-prev.carousel-item-right {
        -webkit-transform:translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }
}

.active.carousel-item-right,.carousel-item-next {
    -webkit-transform: translateX(100%);
    transform: translateX(100%)
}

@supports ((-webkit-transform-style: preserve-3d) or (transform-style:preserve-3d)) {
    .active.carousel-item-right,.carousel-item-next {
        -webkit-transform:translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }
}

.active.carousel-item-left,.carousel-item-prev {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%)
}

@supports ((-webkit-transform-style: preserve-3d) or (transform-style:preserve-3d)) {
    .active.carousel-item-left,.carousel-item-prev {
        -webkit-transform:translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0)
    }
}

.carousel-control-next,.carousel-control-prev {
    position: absolute;
    top: 0;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 15%;
    color: #fff;
    text-align: center;
    opacity: .5
}

.carousel-control-next:focus,.carousel-control-next:hover,.carousel-control-prev:focus,.carousel-control-prev:hover {
    color: #fff;
    text-decoration: none;
    outline: 0;
    opacity: .9
}

.carousel-control-prev {
    left: 0
}

.carousel-control-next {
    right: 0
}

.carousel-control-next-icon,.carousel-control-prev-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: center center/100% 100% no-repeat
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E")
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E")
}

.carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 10px;
    left: 0;
    z-index: 15;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none
}

.carousel-indicators li {
    position: relative;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    width: 30px;
    height: 3px;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    background-color: rgba(255,255,255,.5)
}

.carousel-indicators li::before {
    position: absolute;
    top: -10px;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 10px;
    content: ""
}

.carousel-indicators li::after {
    position: absolute;
    bottom: -10px;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 10px;
    content: ""
}

.carousel-indicators .active {
    background-color: #fff
}

.carousel-caption {
    position: absolute;
    right: 15%;
    bottom: 20px;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center
}

.d-flex {
    display: -webkit-box!important;
    display: -ms-flexbox!important;
    display: flex!important
}

.flex-row {
    -webkit-box-orient: horizontal!important;
    -webkit-box-direction: normal!important;
    -ms-flex-direction: row!important;
    flex-direction: row!important
}

.align-items-center {
    -webkit-box-align: center!important;
    -ms-flex-align: center!important;
    align-items: center!important
}

.mx-auto {
    margin-right: auto!important;
    margin-left: auto!important
}

.text-center {
    text-align: center!important
}

@media print {
    *,::after,::before {
        text-shadow: none!important;
        box-shadow: none!important
    }

    a:not(.btn) {
        text-decoration: underline
    }

    img {
        page-break-inside: avoid
    }

    h2,h3,p {
        orphans: 3;
        widows: 3
    }

    h2,h3 {
        page-break-after: avoid
    }

    @page {
        size: a3
    }

    .container,body {
        min-width: 992px!important
    }

    .navbar {
        display: none
    }
}

.fancybox-active {
    height: auto
}

.fancybox-is-hidden {
    left: -9999px;
    margin: 0;
    position: absolute!important;
    top: -9999px;
    visibility: hidden
}

.fancybox-container {
    -webkit-backface-visibility: hidden;
    height: 100%;
    left: 0;
    outline: 0;
    position: fixed;
    -webkit-tap-highlight-color: transparent;
    top: 0;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    transform: translateZ(0);
    width: 100%;
    z-index: 99992
}

.fancybox-container * {
    box-sizing: border-box
}

.fancybox-bg,.fancybox-inner,.fancybox-outer,.fancybox-stage {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.fancybox-outer {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto
}

.fancybox-bg {
    background: #1e1e1e;
    opacity: 0;
    transition-duration: inherit;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(.47,0,.74,.71)
}

.fancybox-is-open .fancybox-bg {
    opacity: .9;
    transition-timing-function: cubic-bezier(.22,.61,.36,1)
}

.fancybox-caption,.fancybox-infobar,.fancybox-navigation .fancybox-button,.fancybox-toolbar {
    direction: ltr;
    opacity: 0;
    position: absolute;
    transition: opacity .25s,visibility 0s .25s;
    visibility: hidden;
    z-index: 99997
}

.fancybox-show-caption .fancybox-caption,.fancybox-show-infobar .fancybox-infobar,.fancybox-show-nav .fancybox-navigation .fancybox-button,.fancybox-show-toolbar .fancybox-toolbar {
    opacity: 1;
    transition: opacity .25s,visibility;
    visibility: visible
}

.fancybox-infobar {
    color: #ccc;
    font-size: 13px;
    -webkit-font-smoothing: subpixel-antialiased;
    height: 44px;
    left: 0;
    line-height: 44px;
    min-width: 44px;
    mix-blend-mode: difference;
    padding: 0 10px;
    pointer-events: none;
    top: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.fancybox-toolbar {
    right: 0;
    top: 0
}

.fancybox-stage {
    direction: ltr;
    overflow: visible;
    transform: translateZ(0);
    z-index: 99994
}

.fancybox-is-open .fancybox-stage {
    overflow: hidden
}

.fancybox-slide {
    -webkit-backface-visibility: hidden;
    display: none;
    height: 100%;
    left: 0;
    outline: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 44px;
    position: absolute;
    text-align: center;
    top: 0;
    transition-property: transform,opacity;
    white-space: normal;
    width: 100%;
    z-index: 99994
}

.fancybox-slide:before {
    content: "";
    display: inline-block;
    font-size: 0;
    height: 100%;
    vertical-align: middle;
    width: 0
}

.fancybox-is-sliding .fancybox-slide,.fancybox-slide--current,.fancybox-slide--next,.fancybox-slide--previous {
    display: block
}

.fancybox-slide--image {
    overflow: hidden;
    padding: 44px 0
}

.fancybox-slide--image:before {
    display: none
}

.fancybox-slide--html {
    padding: 6px
}

.fancybox-content {
    background: #fff;
    display: inline-block;
    margin: 0;
    max-width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 44px;
    position: relative;
    text-align: left;
    vertical-align: middle
}

.fancybox-slide--image .fancybox-content {
    animation-timing-function: cubic-bezier(.5,0,.14,1);
    -webkit-backface-visibility: hidden;
    background: 0 0/100% 100% no-repeat;
    left: 0;
    max-width: none;
    overflow: visible;
    padding: 0;
    position: absolute;
    top: 0;
    transform-origin: top left;
    transition-property: transform,opacity;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 99995
}

.fancybox-can-zoomOut .fancybox-content {
    cursor: zoom-out
}

.fancybox-can-zoomIn .fancybox-content {
    cursor: zoom-in
}

.fancybox-can-pan .fancybox-content,.fancybox-can-swipe .fancybox-content {
    cursor: grab
}

.fancybox-is-grabbing .fancybox-content {
    cursor: grabbing
}

.fancybox-container [data-selectable=true] {
    cursor: text
}

.fancybox-image,.fancybox-spaceball {
    background: 0 0;
    border: 0;
    height: 100%;
    left: 0;
    margin: 0;
    max-height: none;
    max-width: none;
    padding: 0;
    position: absolute;
    top: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%
}

.fancybox-spaceball {
    z-index: 1
}

.fancybox-slide--iframe .fancybox-content,.fancybox-slide--map .fancybox-content,.fancybox-slide--pdf .fancybox-content,.fancybox-slide--video .fancybox-content {
    height: 100%;
    overflow: visible;
    padding: 0;
    width: 100%
}

.fancybox-slide--video .fancybox-content {
    background: #000
}

.fancybox-slide--map .fancybox-content {
    background: #e5e3df
}

.fancybox-slide--iframe .fancybox-content {
    background: #fff
}

.fancybox-iframe,.fancybox-video {
    background: 0 0;
    border: 0;
    display: block;
    height: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 100%
}

.fancybox-iframe {
    left: 0;
    position: absolute;
    top: 0
}

.fancybox-error {
    background: #fff;
    cursor: default;
    max-width: 400px;
    padding: 40px;
    width: 100%
}

.fancybox-error p {
    color: #444;
    font-size: 16px;
    line-height: 20px;
    margin: 0;
    padding: 0
}

.fancybox-button {
    background: rgba(30,30,30,.6);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    display: inline-block;
    height: 44px;
    margin: 0;
    padding: 10px;
    position: relative;
    transition: color .2s;
    vertical-align: top;
    visibility: inherit;
    width: 44px
}

.fancybox-button,.fancybox-button:link,.fancybox-button:visited {
    color: #ccc
}

.fancybox-button:hover {
    color: #fff
}

.fancybox-button:focus {
    outline: 0
}

.fancybox-button.fancybox-focus {
    outline: dotted 1px
}

.fancybox-button[disabled],.fancybox-button[disabled]:hover {
    color: #888;
    cursor: default;
    outline: 0
}

.fancybox-button div {
    height: 100%
}

.fancybox-button svg {
    display: block;
    height: 100%;
    overflow: visible;
    position: relative;
    width: 100%
}

.fancybox-button svg path {
    fill: currentColor;
    stroke-width: 0
}

.fancybox-button--fsenter svg:nth-child(2),.fancybox-button--fsexit svg:first-child,.fancybox-button--pause svg:first-child,.fancybox-button--play svg:nth-child(2) {
    display: none
}

.fancybox-progress {
    background: #ff5268;
    height: 2px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scaleX(0);
    transform-origin: 0;
    transition-property: transform;
    transition-timing-function: linear;
    z-index: 99998
}

.fancybox-close-small {
    background: 0 0;
    border: 0;
    border-radius: 0;
    color: #ccc;
    cursor: pointer;
    opacity: .8;
    padding: 8px;
    position: absolute;
    right: -12px;
    top: -44px;
    z-index: 401
}

.fancybox-close-small:hover {
    color: #fff;
    opacity: 1
}

.fancybox-slide--html .fancybox-close-small {
    color: currentColor;
    padding: 10px;
    right: 0;
    top: 0
}

.fancybox-slide--image.fancybox-is-scaling .fancybox-content {
    overflow: hidden
}

.fancybox-is-scaling .fancybox-close-small,.fancybox-is-zoomable.fancybox-can-pan .fancybox-close-small {
    display: none
}

.fancybox-navigation .fancybox-button {
    background-clip: content-box;
    height: 100px;
    opacity: 0;
    position: absolute;
    top: calc(50% - 50px);
    width: 70px
}

.fancybox-navigation .fancybox-button div {
    padding: 7px
}

.fancybox-navigation .fancybox-button--arrow_left {
    left: 0;
    left: env(safe-area-inset-left);
    padding: 31px 26px 31px 6px
}

.fancybox-navigation .fancybox-button--arrow_right {
    padding: 31px 6px 31px 26px;
    right: 0;
    right: env(safe-area-inset-right)
}

.fancybox-caption {
    background: linear-gradient(0deg,rgba(0,0,0,.85) 0,rgba(0,0,0,.3) 50%,rgba(0,0,0,.15) 65%,rgba(0,0,0,.075) 75.5%,rgba(0,0,0,.037) 82.85%,rgba(0,0,0,.019) 88%,transparent);
    bottom: 0;
    color: #eee;
    font-size: 14px;
    font-weight: 400;
    left: 0;
    line-height: 1.5;
    padding: 75px 44px 25px;
    pointer-events: none;
    right: 0;
    text-align: center;
    z-index: 99996
}

@supports (padding: max(0px)) {
    .fancybox-caption {
        padding:75px max(44px,env(safe-area-inset-right)) max(25px,env(safe-area-inset-bottom)) max(44px,env(safe-area-inset-left))
    }
}

.fancybox-caption--separate {
    margin-top: -50px
}

.fancybox-caption__body {
    max-height: 50vh;
    overflow: auto;
    pointer-events: all
}

.fancybox-caption a,.fancybox-caption a:link,.fancybox-caption a:visited {
    color: #ccc;
    text-decoration: none
}

.fancybox-caption a:hover {
    color: #fff;
    text-decoration: underline
}

.fancybox-loading {
    animation: 1s linear infinite a;
    background: 0 0;
    border: 4px solid #888;
    border-bottom-color: #fff;
    border-radius: 50%;
    height: 50px;
    left: 50%;
    margin: -25px 0 0 -25px;
    opacity: .7;
    padding: 0;
    position: absolute;
    top: 50%;
    width: 50px;
    z-index: 99999
}

@keyframes a {
    to {
        transform: rotate(1turn)
    }
}

.fancybox-animated {
    transition-timing-function: cubic-bezier(0,0,.25,1)
}

.fancybox-fx-slide.fancybox-slide--previous {
    opacity: 0;
    transform: translate3d(-100%,0,0)
}

.fancybox-fx-slide.fancybox-slide--next {
    opacity: 0;
    transform: translate3d(100%,0,0)
}

.fancybox-fx-slide.fancybox-slide--current {
    opacity: 1;
    transform: translateZ(0)
}

.fancybox-fx-fade.fancybox-slide--next,.fancybox-fx-fade.fancybox-slide--previous {
    opacity: 0;
    transition-timing-function: cubic-bezier(.19,1,.22,1)
}

.fancybox-fx-fade.fancybox-slide--current {
    opacity: 1
}

.fancybox-fx-zoom-in-out.fancybox-slide--previous {
    opacity: 0;
    transform: scale3d(1.5,1.5,1.5)
}

.fancybox-fx-zoom-in-out.fancybox-slide--next {
    opacity: 0;
    transform: scale3d(.5,.5,.5)
}

.fancybox-fx-zoom-in-out.fancybox-slide--current {
    opacity: 1;
    transform: scaleX(1)
}

.fancybox-fx-rotate.fancybox-slide--previous {
    opacity: 0;
    transform: rotate(-1turn)
}

.fancybox-fx-rotate.fancybox-slide--next {
    opacity: 0;
    transform: rotate(1turn)
}

.fancybox-fx-rotate.fancybox-slide--current {
    opacity: 1;
    transform: rotate(0)
}

.fancybox-fx-circular.fancybox-slide--previous {
    opacity: 0;
    transform: scale3d(0,0,0) translate3d(-100%,0,0)
}

.fancybox-fx-circular.fancybox-slide--next {
    opacity: 0;
    transform: scale3d(0,0,0) translate3d(100%,0,0)
}

.fancybox-fx-circular.fancybox-slide--current {
    opacity: 1;
    transform: scaleX(1) translateZ(0)
}

.fancybox-fx-tube.fancybox-slide--previous {
    transform: translate3d(-100%,0,0) scale(.1) skew(-10deg)
}

.fancybox-fx-tube.fancybox-slide--next {
    transform: translate3d(100%,0,0) scale(.1) skew(10deg)
}

.fancybox-fx-tube.fancybox-slide--current {
    transform: translateZ(0) scale(1)
}

@media (max-height: 576px) {
    .fancybox-slide {
        padding-left:6px;
        padding-right: 6px
    }

    .fancybox-slide--image {
        padding: 6px 0
    }

    .fancybox-close-small {
        right: -6px
    }

    .fancybox-slide--image .fancybox-close-small {
        background: #4e4e4e;
        color: #f2f4f6;
        height: 36px;
        opacity: 1;
        padding: 6px;
        right: 0;
        top: 0;
        width: 36px
    }

    .fancybox-caption {
        padding-left: 12px;
        padding-right: 12px
    }

    @supports (padding: max(0px)) {
        .fancybox-caption {
            padding-left:max(12px,env(safe-area-inset-left));
            padding-right: max(12px,env(safe-area-inset-right))
        }
    }
}

.fancybox-share {
    background: #f4f4f4;
    border-radius: 3px;
    max-width: 90%;
    padding: 30px;
    text-align: center
}

.fancybox-share h1 {
    color: #222;
    font-size: 35px;
    font-weight: 700;
    margin: 0 0 20px
}

.fancybox-share p {
    margin: 0;
    padding: 0
}

.fancybox-share__button {
    border: 0;
    border-radius: 3px;
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    line-height: 40px;
    margin: 0 5px 10px;
    min-width: 130px;
    padding: 0 15px;
    text-decoration: none;
    transition: .2s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap
}

.fancybox-share__button:link,.fancybox-share__button:visited {
    color: #fff
}

.fancybox-share__button:hover {
    text-decoration: none
}

.fancybox-share__button--fb {
    background: #3b5998
}

.fancybox-share__button--fb:hover {
    background: #344e86
}

.fancybox-share__button--pt {
    background: #bd081d
}

.fancybox-share__button--pt:hover {
    background: #aa0719
}

.fancybox-share__button--tw {
    background: #1da1f2
}

.fancybox-share__button--tw:hover {
    background: #0d95e8
}

.fancybox-share__button svg {
    height: 25px;
    margin-right: 7px;
    position: relative;
    top: -1px;
    vertical-align: middle;
    width: 25px
}

.fancybox-share__button svg path {
    fill: #fff
}

.fancybox-share__input {
    background: 0 0;
    border: 0;
    border-bottom: 1px solid #d7d7d7;
    border-radius: 0;
    color: #5d5b5b;
    font-size: 14px;
    margin: 10px 0 0;
    outline: 0;
    padding: 10px 15px;
    width: 100%
}

.fancybox-thumbs {
    background: #ddd;
    bottom: 0;
    display: none;
    margin: 0;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    padding: 2px 2px 4px;
    position: absolute;
    right: 0;
    -webkit-tap-highlight-color: transparent;
    top: 0;
    width: 212px;
    z-index: 99995
}

.fancybox-thumbs-x {
    overflow-x: auto;
    overflow-y: hidden
}

.fancybox-show-thumbs .fancybox-thumbs {
    display: block
}

.fancybox-show-thumbs .fancybox-inner {
    right: 212px
}

.fancybox-thumbs__list {
    font-size: 0;
    height: 100%;
    list-style: none;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
    position: relative;
    white-space: nowrap;
    width: 100%
}

.fancybox-thumbs-x .fancybox-thumbs__list {
    overflow: hidden
}

.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar {
    width: 7px
}

.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0,0,0,.3)
}

.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-thumb {
    background: #2a2a2a;
    border-radius: 10px
}

.fancybox-thumbs__list a {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: rgba(0,0,0,.1);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    float: left;
    height: 75px;
    margin: 2px;
    max-height: calc(100% - 8px);
    max-width: calc(50% - 4px);
    outline: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    width: 100px
}

.fancybox-thumbs__list a:before {
    border: 6px solid #ff5268;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .2s cubic-bezier(.25, .46, .45, .94);
    z-index: 99991
}

.fancybox-thumbs__list a:focus:before {
    opacity: .5
}

.fancybox-thumbs__list a.fancybox-thumbs-active:before {
    opacity: 1
}

@media (max-width: 576px) {
    .fancybox-thumbs {
        width:110px
    }

    .fancybox-show-thumbs .fancybox-inner {
        right: 110px
    }

    .fancybox-thumbs__list a {
        max-width: calc(100% - 10px)
    }
}

@font-face {
    font-family: FontAwesome;
    src: url(../fonts/fontawesome-webfont.eot?v=4.7.0);
    src: url(../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0) format('embedded-opentype'),url(../fonts/fontawesome-webfont-subset.woff2?v=4.7.0) format('woff2'),url(../fonts/fontawesome-webfont.woff?v=4.7.0) format('woff'),url(../fonts/fontawesome-webfont.ttf?v=4.7.0) format('truetype'),url(../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular) format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

.fa {
    display: inline-block;
    font: 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.fa-times:before {
    content: "\f00d"
}

.fa-map-marker:before {
    content: "\f041"
}

.fa-calendar:before {
    content: "\f073"
}

.fa-chevron-up:before {
    content: "\f077"
}

.fa-twitter:before {
    content: "\f099"
}

.fa-facebook:before {
    content: "\f09a"
}

.fa-bars:before {
    content: "\f0c9"
}

.fa-linkedin:before {
    content: "\f0e1"
}

.fa-instagram:before {
    content: "\f16d"
}

.fa-long-arrow-right:before {
    content: "\f178"
}

.fa-pinterest-p:before {
    content: "\f231"
}

.animated {
    animation-duration: 1s;
    animation-fill-mode: both
}

.animated.infinite {
    animation-iteration-count: infinite
}

@keyframes pulse {
    from,to {
        transform: scale3d(1,1,1)
    }

    50% {
        transform: scale3d(1.05,1.05,1.05)
    }
}

.pulse {
    animation-name: pulse
}

@keyframes rubberBand {
    from,to {
        transform: scale3d(1,1,1)
    }

    30% {
        transform: scale3d(1.25,.75,1)
    }

    40% {
        transform: scale3d(.75,1.25,1)
    }

    50% {
        transform: scale3d(1.15,.85,1)
    }

    65% {
        transform: scale3d(.95,1.05,1)
    }

    75% {
        transform: scale3d(1.05,.95,1)
    }
}

.rubberBand {
    animation-name: rubberBand
}

@keyframes slideInUp {
    from {
        transform: translate3d(0,100%,0);
        visibility: visible
    }

    to {
        transform: translate3d(0,0,0)
    }
}

.slideInUp {
    animation-name: slideInUp
}

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0
}

.slick-list:focus {
    outline: 0
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand
}

.slick-slider .slick-list,.slick-slider .slick-track {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0)
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto
}

.slick-track:after,.slick-track:before {
    display: table;
    content: ''
}

.slick-track:after {
    clear: both
}

.slick-loading .slick-track {
    visibility: hidden
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px
}

[dir=rtl] .slick-slide {
    float: right
}

.slick-slide img {
    display: block
}

.slick-slide.slick-loading img {
    display: none
}

.slick-slide.dragging img {
    pointer-events: none
}

.slick-initialized .slick-slide {
    display: block
}

.slick-loading .slick-slide {
    visibility: hidden
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent
}

.slick-arrow.slick-hidden {
    display: none
}

.slick-loading .slick-list {
    background: #fff
}

@font-face {
    font-family: slick;
    font-weight: 400;
    font-style: normal;
    src: url(fonts/slick.eot);
    src: url(fonts/slick.eot?#iefix) format('embedded-opentype'),url(fonts/slick.woff) format('woff'),url(fonts/slick.ttf) format('truetype'),url(fonts/slick.svg#slick) format('svg');
    font-display: swap
}

.slick-next,.slick-prev {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    transform: translate(0,-50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: 0;
    background: 0 0
}

.slick-next:focus,.slick-next:hover,.slick-prev:focus,.slick-prev:hover {
    color: transparent;
    outline: 0;
    background: 0 0
}

.slick-next:focus:before,.slick-next:hover:before,.slick-prev:focus:before,.slick-prev:hover:before {
    opacity: 1
}

.slick-next.slick-disabled:before,.slick-prev.slick-disabled:before {
    opacity: .25
}

.slick-next:before,.slick-prev:before {
    font-family: slick;
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.slick-prev {
    left: -25px
}

[dir=rtl] .slick-prev {
    right: -25px;
    left: auto
}

.slick-prev:before {
    content: '←'
}

[dir=rtl] .slick-prev:before {
    content: '→'
}

.slick-next {
    right: -25px
}

[dir=rtl] .slick-next {
    right: auto;
    left: -25px
}

.slick-next:before {
    content: '→'
}

[dir=rtl] .slick-next:before {
    content: '←'
}

.slick-dotted.slick-slider {
    margin-bottom: 30px
}

.slick-dots {
    position: absolute;
    bottom: -25px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center
}

.slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer
}

.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: 0;
    background: 0 0
}

.slick-dots li button:focus,.slick-dots li button:hover {
    outline: 0
}

.slick-dots li button:focus:before,.slick-dots li button:hover:before {
    opacity: 1
}

.slick-dots li button:before {
    font-family: slick;
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: .25;
    color: #000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.slick-dots li.slick-active button:before {
    opacity: .75;
    color: #000
}

/*! jQuery UI - v1.12.1 - 2016-09-14
* http://jqueryui.com
* Includes: core.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, draggable.css, resizable.css, progressbar.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Arial%2CHelvetica%2Csans-serif&fsDefault=1em&fwDefault=normal&cornerRadius=3px&bgColorHeader=e9e9e9&bgTextureHeader=flat&borderColorHeader=dddddd&fcHeader=333333&iconColorHeader=444444&bgColorContent=ffffff&bgTextureContent=flat&borderColorContent=dddddd&fcContent=333333&iconColorContent=444444&bgColorDefault=f6f6f6&bgTextureDefault=flat&borderColorDefault=c5c5c5&fcDefault=454545&iconColorDefault=777777&bgColorHover=ededed&bgTextureHover=flat&borderColorHover=cccccc&fcHover=2b2b2b&iconColorHover=555555&bgColorActive=007fff&bgTextureActive=flat&borderColorActive=003eff&fcActive=ffffff&iconColorActive=ffffff&bgColorHighlight=fffa90&bgTextureHighlight=flat&borderColorHighlight=dad55e&fcHighlight=777620&iconColorHighlight=777620&bgColorError=fddfdf&bgTextureError=flat&borderColorError=f1a899&fcError=5f3f3f&iconColorError=cc0000&bgColorOverlay=aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=666666&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=5px&offsetTopShadow=0px&offsetLeftShadow=0px&cornerRadiusShadow=8px
* Copyright jQuery Foundation and other contributors; Licensed MIT */
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
    cursor: pointer
}

.ui-tooltip {
    padding: 8px;
    position: absolute;
    z-index: 9999;
    max-width: 300px
}

body .ui-tooltip {
    border-width: 2px
}

.ui-icon-folder-collapsed {
    background-position: 0 -96px
}

@font-face {
    font-family: "Faktum Test";
    src: url("../fonts/FaktumTest-Regular.eot?#iefix") format("embedded-opentype"),url("../fonts/FaktumTest-Regular.woff2") format("woff2"),url("../fonts/FaktumTest-Regular.woff") format("woff"),url("../fonts/FaktumTest-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Faktum Test";
    src: url("../fonts/FaktumTest-Bold.eot?#iefix") format("embedded-opentype"),url("../fonts/FaktumTest-Bold.woff2") format("woff2"),url("../fonts/FaktumTest-Bold.woff") format("woff"),url("../fonts/FaktumTest-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

html {
    scroll-behavior: smooth;
    scroll-behavior: smooth;
    font-family: "Faktum Test";
    scroll-behavior: smooth;
    overflow-x: hidden
}

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

@media screen and (min-width: 320px) and (max-width:600px) {
    .navbar {
        padding-top:29px
    }

    .about {
        padding-bottom: 0
    }

    .navbar-brand {
        width: 180px!important;
        padding: 0!important
    }

    .header-main__menu {
        top: 45px
    }

    .startBtn {
        display: none
    }

    .about-content__heading {
        font-size: 2rem;
        line-height: 1.25;
        padding-right: 0
    }

    .about-content__subHeading {
        margin-bottom: .5rem;
        line-height: 1.5
    }

    .about-services__single .title {
        font-size: 1.35rem;
        padding-left: 1.75rem
    }

    .about-services__single .counting::after {
        font-size: 1rem
    }

    .about-services__single p {
        font-size: .9rem;
        margin: .75rem 0
    }

    .about-services__single a {
        font-size: .9rem;
        gap: .25rem
    }

    .about-services__single a>i {
        font-size: 1.25rem
    }

    .about-services__single {
        padding: 1.25rem
    }

    .about-services {
        margin: 2rem 0
    }

    .product-paragraph .heading {
        font-size: 2rem
    }

    .ServicesSec p {
        font-size: 16px;
        line-height: 32px
    }

    .latestProject h2 {
        font-size: 35px;
        margin-bottom: 2rem
    }

    .latestProject h2 span::after {
        height: 10px
    }

    .categories {
        padding: 1.5rem 0 .75rem;
        transform: rotate(0) translate(0);
        top: -3rem;
        left: 0
    }

    .categoriesWrapper::after {
        transform: skewY(0)
    }

    .categories-list {
        line-height: 1
    }

    .categories-list__single {
        display: flex!important;
        align-items: center;
        justify-content: center;
        max-width: initial!important
    }

    .categories-list__single>a {
        font-size: .75rem;
        padding: 0 1.15rem
    }

    .categories-list__single:not(:first-child)>a::after {
        left: 0;
        width: 10px;
        height: 10px
    }

    .categories--bottom {
        top: auto!important;
        bottom: -4rem;
        transform: rotate(0) translate(0)
    }

    section.the-agency {
        padding: 4rem 0;
        margin: 6rem 0 0
    }

    .agency-quotes h3 {
        font-size: 30px;
        padding: 14px 0
    }

    .blog-content {
        padding: .5rem 1rem
    }

    .agency-blog {
        margin: 2rem 0;
        padding-inline:1rem}

    .blog-content p {
        font-size: 16px
    }

    .blog-content h4 {
        font-size: 15px;
        padding-top: 10px
    }

    .agency-quotes {
        padding-inline:1rem}

    .agency-quotes .btn-quote {
        margin-top: .75rem
    }

    .ServicesSec {
        padding: 3rem 1rem 0
    }

    .templatesWrapper {
        transform: rotate(0) translateY(0);
        margin: -194px 0 8rem
    }

    .templatesSlider .slick-list.draggable {
        padding: 0
    }

    footer {
        padding: 1rem 1rem 0
    }

    .footer-sec {
        padding: 0
    }

    .footer-content h4 {
        margin: 1rem 0;
        padding: 0
    }

    .footer-content p {
        font-size: 16px
    }

    .footer-content.pd-3.clr-3 {
        padding: 0
    }

    .get-it-quote h3 {
        font-size: 24px;
        margin-bottom: 0
    }

    footer .footer-logo {
        margin: 1rem auto
    }

    .copyright-sec {
        text-align: center
    }

    .copyright-sec p {
        margin-bottom: .25rem
    }

    body #headband.headband--home {
        padding: 10rem 0 14rem!important;
        clip-path: polygon(0 0,100% 0,100% 90%,0% 90%);
        min-height: auto
    }

    .row.main-boxSlider.slick-initialized.slick-slider .slick-track {
        display: flex;
        flex-direction: column
    }

    .row.main-boxSlider.slick-initialized.slick-slider .slick-track .col-12 {
        width: 100%!important
    }

    .brandsBarDiv {
        padding: 0
    }

    .brandsBar {
        margin: 2rem 0;
        padding: 0 1rem;
        display: flex;
        gap: 2rem;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center
    }

    .brandsBarDiv img {
        object-fit: contain;
        width: 100px
    }

    :is(.main-box.main-box1,.main-box.main-box2,.main-box.main-box3,.main-box.main-box4) {
        transform: translate(0)!important
    }

    .main-box {
        margin: 1rem 0
    }

    .main-boxSlider .slick-list.draggable {
        padding-bottom: 3rem
    }

    .latestProject {
        padding: 3rem 1rem
    }

    header .header-main__menu {
        display: block
    }

    footer .btn-quote a {
        display: block;
        margin: 2rem 0
    }

    a.navbar-brand {
        padding: 0
    }
}

@media screen and (min-width: 481px) and (max-width:520px) {
    .startBtn {
        display:none
    }

    .about-content__heading {
        font-size: 2rem;
        line-height: 1.25;
        padding-right: 0
    }

    .about-content__subHeading {
        margin-bottom: .5rem;
        line-height: 1.5
    }

    .about-services__single .title {
        font-size: 1.35rem;
        padding-left: 1.75rem
    }

    .about-services__single .counting::after {
        font-size: 1rem
    }

    .about-services__single p {
        font-size: .9rem;
        margin: .75rem 0
    }

    .about-services__single a {
        font-size: .9rem;
        gap: .25rem
    }

    .about-services__single a>i {
        font-size: 1.25rem
    }

    .about-services__single {
        padding: 1.25rem
    }

    .about-services {
        margin: 2rem 0
    }

    .product-paragraph .heading {
        font-size: 2rem
    }

    .ServicesSec p {
        font-size: 16px;
        line-height: 32px
    }

    .latestProject h2 {
        font-size: 35px;
        margin-bottom: 2rem
    }

    .latestProject h2 span::after {
        height: 10px
    }

    .categories {
        padding: 1.5rem 0 .75rem;
        transform: rotate(0) translate(0);
        top: -3rem;
        left: 0
    }

    .categoriesWrapper::after {
        transform: skewY(0)
    }

    .categories-list {
        line-height: 1
    }

    .categories-list__single {
        display: flex!important;
        align-items: center;
        justify-content: center;
        max-width: initial!important
    }

    .categories-list__single>a {
        font-size: .75rem;
        padding: 0 1.15rem
    }

    .categories-list__single:not(:first-child)>a::after {
        left: 0;
        width: 10px;
        height: 10px
    }

    .categories--bottom {
        top: auto!important;
        bottom: -4rem;
        transform: rotate(0) translate(0)
    }

    section.the-agency {
        padding: 4rem 0;
        margin: 6rem 0 0
    }

    .agency-quotes h3 {
        font-size: 30px;
        padding: 14px 0
    }

    .blog-content {
        padding: .5rem 1rem
    }

    .agency-blog {
        margin: 2rem 0;
        padding-inline:1rem}

    .blog-content p {
        font-size: 16px
    }

    .blog-content h4 {
        font-size: 15px;
        padding-top: 10px
    }

    .agency-quotes {
        padding-inline:1rem}

    .agency-quotes .btn-quote {
        margin-top: .75rem
    }

    .ServicesSec {
        padding: 3rem 1rem 0
    }

    .templatesWrapper {
        transform: rotate(0) translateY(0);
        margin: -194px 0 8rem
    }

    .templatesSlider .slick-list.draggable {
        padding: 0
    }

    footer {
        padding: 1rem 1rem 0
    }

    .footer-sec {
        padding: 0
    }

    .footer-content h4 {
        margin: 1rem 0;
        padding: 0
    }

    .footer-content p {
        font-size: 16px
    }

    .footer-content.pd-3.clr-3 {
        padding: 0
    }

    .get-it-quote h3 {
        font-size: 24px;
        margin-bottom: 0
    }

    footer .footer-logo {
        margin: 1rem auto
    }

    .copyright-sec {
        text-align: center
    }

    .copyright-sec p {
        margin-bottom: .25rem
    }

    body #headband.headband--home {
        padding: 10rem 0 14rem!important;
        clip-path: polygon(0 0,100% 0,100% 90%,0% 90%);
        min-height: auto
    }

    .row.main-boxSlider.slick-initialized.slick-slider .slick-track {
        display: flex;
        flex-direction: column
    }

    .row.main-boxSlider.slick-initialized.slick-slider .slick-track .col-12 {
        width: 100%!important
    }

    .brandsBarDiv {
        padding: 0
    }

    .brandsBar {
        margin: 2rem 0;
        padding: 0 1rem;
        display: flex;
        gap: 2rem;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center
    }

    .brandsBarDiv img {
        object-fit: contain;
        width: 100px
    }

    :is(.main-box.main-box1,.main-box.main-box2,.main-box.main-box3,.main-box.main-box4) {
        transform: translate(0)!important
    }

    .main-box {
        margin: 1rem 0
    }

    .main-boxSlider .slick-list.draggable {
        padding-bottom: 3rem
    }

    .latestProject {
        padding: 3rem 1rem
    }

    header .header-main__menu {
        display: block
    }

    footer .btn-quote a {
        display: block;
        margin: 2rem 0
    }

    a.navbar-brand {
        padding: 0
    }
}

@media screen and (min-width: 501px) and (max-width:769px) {
    .startBtn {
        display:none
    }

    .about-content__heading {
        font-size: 2rem;
        line-height: 1.25;
        padding-right: 0
    }

    .about-content__subHeading {
        margin-bottom: .5rem;
        line-height: 1.5
    }

    .about-services__single .title {
        font-size: 1.35rem;
        padding-left: 1.75rem
    }

    .about-services__single .counting::after {
        font-size: 1rem
    }

    .about-services__single p {
        font-size: .9rem;
        margin: .75rem 0
    }

    .about-services__single a {
        font-size: .9rem;
        gap: .25rem
    }

    .about-services__single a>i {
        font-size: 1.25rem
    }

    .about-services__single {
        padding: 1.25rem
    }

    .about-services {
        margin: 2rem 0
    }

    .product-paragraph .heading {
        font-size: 2rem
    }

    .ServicesSec p {
        font-size: 16px;
        line-height: 32px
    }

    .latestProject h2 {
        font-size: 35px;
        margin-bottom: 2rem
    }

    .latestProject h2 span::after {
        height: 10px
    }

    .categories {
        padding: 1.5rem 0 .75rem;
        transform: rotate(0) translate(0);
        top: -3rem;
        left: 0
    }

    .categoriesWrapper::after {
        transform: skewY(0)
    }

    .categories-list {
        line-height: 1
    }

    .categories-list__single {
        display: flex!important;
        align-items: center;
        justify-content: center;
        max-width: initial!important
    }

    .categories-list__single>a {
        font-size: .75rem;
        padding: 0 1.15rem
    }

    .categories-list__single:not(:first-child)>a::after {
        left: 0;
        width: 10px;
        height: 10px
    }

    .categories--bottom {
        top: auto!important;
        bottom: -4rem;
        transform: rotate(0) translate(0)
    }

    section.the-agency {
        padding: 4rem 0;
        margin: 6rem 0 0
    }

    .agency-quotes h3 {
        font-size: 30px;
        padding: 14px 0
    }

    .blog-content {
        padding: .5rem 1rem
    }

    .agency-blog {
        margin: 2rem 0;
        padding-inline:1rem}

    .blog-content p {
        font-size: 16px
    }

    .blog-content h4 {
        font-size: 15px;
        padding-top: 10px
    }

    .agency-quotes {
        padding-inline:1rem}

    .agency-quotes .btn-quote {
        margin-top: .75rem
    }

    .ServicesSec {
        padding: 3rem 1rem 0
    }

    .templatesWrapper {
        transform: rotate(0) translateY(0);
        margin: -180px 0 8rem
    }

    .templatesSlider .slick-list.draggable {
        padding: 0
    }

    footer {
        padding: 1rem 1rem 0
    }

    .footer-sec {
        padding: 0
    }

    .footer-content h4 {
        margin: 1rem 0;
        padding: 0
    }

    .footer-content p {
        font-size: 16px
    }

    .footer-content.pd-3.clr-3 {
        padding: 0
    }

    .get-it-quote h3 {
        font-size: 24px;
        margin-bottom: 0
    }

    footer .footer-logo {
        margin: 1rem auto
    }

    .copyright-sec {
        text-align: center
    }

    .copyright-sec p {
        margin-bottom: .25rem
    }

    body #headband.headband--home {
        padding: 10rem 0 14rem!important;
        min-height: auto;
        clip-path: polygon(0 0,100% 0,100% 90%,0% 90%)
    }

    .row.main-boxSlider.slick-initialized.slick-slider .slick-track {
        display: flex;
        flex-direction: column
    }

    .row.main-boxSlider.slick-initialized.slick-slider .slick-track .col-12 {
        width: 100%!important
    }

    .brandsBarDiv {
        padding: 0
    }

    .brandsBar {
        margin: 2rem 0;
        padding: 0 1rem;
        display: flex;
        gap: 2rem;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center
    }

    .brandsBarDiv img {
        object-fit: contain;
        width: 100px
    }

    :is(.main-box.main-box1,.main-box.main-box2,.main-box.main-box3,.main-box.main-box4) {
        transform: translate(0)!important
    }

    .main-box {
        margin: 1rem 0
    }

    .main-boxSlider .slick-list.draggable {
        padding-bottom: 3rem
    }

    .latestProject {
        padding: 3rem 1rem
    }

    header .header-main__menu {
        display: block
    }

    footer .btn-quote a {
        display: block;
        margin: 2rem 0
    }

    a.navbar-brand {
        padding: 0
    }
}

@media screen and (min-width: 770px) and (max-width:1024px) {
    .startBtn {
        display:none
    }

    .about-content__heading {
        font-size: 2rem;
        line-height: 1.25;
        padding-right: 0
    }

    .about-content__subHeading {
        margin-bottom: .5rem;
        line-height: 1.5
    }

    .about-services__single .title {
        font-size: 1.35rem;
        padding-left: 1.75rem
    }

    .about-services__single .counting::after {
        font-size: 1rem
    }

    .about-services__single p {
        font-size: .9rem;
        margin: .75rem 0
    }

    .about-services__single a {
        font-size: .9rem;
        gap: .25rem
    }

    .about-services__single a>i {
        font-size: 1.25rem
    }

    .about-services__single {
        padding: 1.25rem
    }

    .about-services {
        margin: 2rem 0
    }

    .product-paragraph .heading {
        font-size: 2rem
    }

    .ServicesSec p {
        font-size: 16px;
        line-height: 32px
    }

    .latestProject h2 {
        font-size: 35px;
        margin-bottom: 2rem
    }

    .latestProject h2 span::after {
        height: 10px
    }

    .categories {
        padding: 1.5rem 0 .75rem;
        transform: rotate(0) translate(0);
        top: -3rem;
        left: 0
    }

    .categoriesWrapper::after {
        transform: skewY(0)
    }

    .categories-list {
        line-height: 1
    }

    .categories-list__single {
        display: flex!important;
        align-items: center;
        justify-content: center;
        max-width: initial!important
    }

    .categories-list__single>a {
        font-size: .75rem;
        padding: 0 1.15rem
    }

    .categories-list__single:not(:first-child)>a::after {
        left: 0;
        width: 10px;
        height: 10px
    }

    .categories--bottom {
        top: auto!important;
        bottom: -4rem;
        transform: rotate(0) translate(0)
    }

    section.the-agency {
        padding: 4rem 0;
        margin: 6rem 0 0
    }

    .agency-quotes h3 {
        font-size: 30px;
        padding: 14px 0
    }

    .blog-content {
        padding: .5rem 1rem
    }

    .agency-blog {
        margin: 2rem 0;
        padding-inline:1rem}

    .blog-content p {
        font-size: 16px
    }

    .blog-content h4 {
        font-size: 15px;
        padding-top: 10px
    }

    .agency-quotes {
        padding-inline:1rem}

    .agency-quotes .btn-quote {
        margin-top: .75rem
    }

    .ServicesSec {
        padding: 3rem 1rem 0
    }

    .templatesWrapper {
        transform: rotate(0) translateY(0);
        margin: 0 0 8rem
    }

    .templatesSlider .slick-list.draggable {
        padding: 0
    }

    footer {
        padding: 1rem 1rem 0
    }

    .footer-sec {
        padding: 0
    }

    .footer-content h4 {
        margin: 1rem 0;
        padding: 0
    }

    .footer-content p {
        font-size: 16px
    }

    .footer-content.pd-3.clr-3 {
        padding: 0
    }

    .get-it-quote h3 {
        font-size: 24px;
        margin-bottom: 0
    }

    footer .footer-logo {
        margin: 1rem auto
    }

    .copyright-sec {
        text-align: center
    }

    .copyright-sec p {
        margin-bottom: .25rem
    }

    body #headband.headband--home {
        padding-top: 10rem!important;
        min-height: 80vh;
        clip-path: polygon(0 0,100% 0,100% 90%,0% 90%)
    }

    .row.main-boxSlider.slick-initialized.slick-slider .slick-track {
        display: flex;
        flex-direction: column
    }

    .row.main-boxSlider.slick-initialized.slick-slider .slick-track .col-12 {
        width: 100%!important
    }

    .brandsBarDiv {
        padding: 0
    }

    .brandsBar {
        margin: 2rem 0;
        padding: 0 1rem;
        display: flex;
        gap: 2rem;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center
    }

    .brandsBarDiv img {
        object-fit: contain;
        width: 100px
    }

    :is(.main-box.main-box1,.main-box.main-box2,.main-box.main-box3,.main-box.main-box4) {
        transform: translate(0)!important
    }

    .main-box {
        margin: 1rem 0
    }

    .main-boxSlider .slick-list.draggable {
        padding-bottom: 3rem
    }

    .latestProject {
        padding: 3rem 1rem
    }

    header .header-main__menu {
        display: block
    }

    footer .btn-quote a {
        display: block;
        margin: 2rem 0
    }

    a.navbar-brand {
        padding: 0
    }
}

@media screen and (min-width: 900px) and (max-width:1000px) {
    body #headband.headband--home {
        min-height:145vh;
        padding-top: 12rem!important
    }

    .categories--bottom {
        bottom: -5rem
    }

    .templatesWrapper {
        bottom: 5rem
    }

    footer .btn-quote a {
        display: block;
        margin: 2rem 0
    }

    a.navbar-brand {
        padding: 0
    }
}

@media screen and (min-width: 1000px) and (max-width:1300px) {
    body #headband.headband--home {
        min-height:145vh;
        padding-top: 12rem!important
    }

    .categories--bottom {
        bottom: -5rem
    }

    .templatesWrapper {
        bottom: 5rem
    }

    footer .btn-quote a {
        display: block;
        margin: 2rem 0
    }

    a.navbar-brand {
        padding: 0
    }
}

@media screen and (min-width: 1301px) and (max-width:1400px) {
    body #headband.headband--home {
        min-height:120vh;
        padding-top: 12rem!important
    }

    .categories--bottom {
        bottom: -5rem
    }

    .templatesWrapper {
        bottom: -1rem
    }

    footer .btn-quote a {
        display: block;
        margin: 2rem 0
    }

    a.navbar-brand {
        padding: 0
    }
}

@media screen and (min-width: 1401px) and (max-width:1700px) {
    body #headband.headband--home {
        min-height:130vh;
        padding-top: 14rem!important
    }

    .categories--bottom {
        bottom: -5rem
    }

    .templatesWrapper {
        bottom: -1rem
    }

    .categories-list__single {
        display: flex!important;
        justify-content: center;
        align-items: center
    }

    .categories-list__single>a {
        font-size: .9rem;
        padding: 0 2rem
    }

    html {
        overflow-x: hidden
    }

    footer .btn-quote a {
        display: block;
        margin: 2rem 0
    }

    a.navbar-brand {
        padding: 0
    }
}

.sideBar__nav>li :is(a,button) {
    align-items: center
}

@media screen and (max-width: 1179px) {
    .HeadBtn,.headNav {
        display:none!important
    }

    header .header-main__menu {
        top: 50%;
        right: clamp(15px,3vw,32px);
        display: block
    }

    header .navbar-toggler {
        display: none
    }

    header .container {
        width: 100%;
        max-width: none;
        padding-right: clamp(15px,3vw,32px);
        padding-left: clamp(15px,3vw,32px)
    }

    header .navbar {
        padding-right: 0;
        padding-left: 0
    }

    a.navbar-brand {
        width: clamp(180px,36vw,280px)!important;
        margin-right: 0
    }
}

.work-page .book-work-slider .slick-list {
    padding: 8px 0 0
}

.work-page .work-audio-slider .slick-list {
    padding: 7px 0 34px
}

.work-page .book-work-slider .slick-track,.work-page .work-audio-slider .slick-track {
    display: flex!important
}

.work-page .book-work-slider .slick-track {
    transition-timing-function: linear!important
}

.work-page .work-slider-arrow.slick-disabled {
    opacity: .35;
    cursor: default
}

.work-page .book-work-slider .slick-dots,.work-page .work-audio-slider .slick-dots {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0
}

.work-page .book-work-slider .slick-dots li,.work-page .work-audio-slider .slick-dots li {
    width: auto;
    height: auto;
    margin: 0
}

.work-page .book-work-slider .slick-dots button,.work-page .work-audio-slider .slick-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #b9c9ca;
    font-size: 0;
    transition: width .25s,background .25s
}

.work-page .book-work-slider .slick-dots button::before,.work-page .work-audio-slider .slick-dots button::before {
    display: none
}

.work-page .book-work-slider .slick-dots .slick-active button,.work-page .work-audio-slider .slick-dots .slick-active button {
    width: 27px;
    background: #00bba8
}

.book-work-intro {
    grid-template-columns: minmax(0,1.25fr) minmax(280px,0.75fr);
    align-items: end
}

body.white header .wrapper .site-title svg path:not(#pixel_logo),body.white header .wrapper .site-title svg text {
    fill: rgb(17,33,56)!important
}

body.blue_light header .wrapper .site-title svg path:not(#pixel_logo),body.blue_light header .wrapper .site-title svg text {
    fill: rgb(17,33,56)!important
}

body.blue header .wrapper .site-title svg path:not(#pixel_logo),body.blue header .wrapper .site-title svg text,body.call_to_action_open header .wrapper .site-title svg path:not(#pixel_logo),body.call_to_action_open header .wrapper .site-title svg text {
    fill: rgb(255,255,255)!important
}

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

.sideBar__nav>li :is(a,button) {
    align-items: center
}

@media screen and (max-width: 767px) {
    header {
        top:31px
    }

    a.navbar-brand {
        width: clamp(165px,54vw,220px)!important
    }

    .container {
        padding-right: max(15px,env(safe-area-inset-right));
        padding-left: max(15px,env(safe-area-inset-left))
    }

    :is(input,select,textarea,button) {
        max-width: 100%
    }

    footer .row {
        row-gap: 12px
    }
}

.about-section .about-img--alt img {
    height: 570px!important
}

.work-page .portfolio-tabs {
    width: 100%;
    scroll-margin-top: 120px
}

.work-page .main-tabs {
    width: max-content;
    max-width: 100%;
    display: flex;
    justify-content: center;
    gap: 7px;
    margin: 0 auto 52px!important;
    padding: 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
    border: 1px solid #dce7e6;
    border-radius: 18px;
    background: #f5f9f8;
    box-shadow: 0 16px 45px rgba(21,41,67,.08);
    scrollbar-width: none
}

.work-page .main-tabs::-webkit-scrollbar {
    display: none
}

.work-page .main-tabs .nav-item {
    flex: 0 0 auto;
    margin-left: 0!important
}

.work-page .main-tabs .nav-link {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 17px;
    border-radius: 50px!important;
    color: #314355;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap
}

.work-page .main-tabs .nav-item.active .nav-link,.work-page .main-tabs .nav-link.active,.work-page .main-tabs .nav-link:hover {
    background: #152943!important;
    color: #fff!important
}

.work-page .tab-content>.book-work-pane.active {
    opacity: 1!important
}

.work-page .main-tabs .nav-link[id^=book-]::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 50%;
    background: #00bba8;
    box-shadow: 0 0 0 4px rgba(0,187,168,.12)
}

.book-work-pane {
    padding: 12px 0 25px
}

.book-work-intro {
    grid-template-columns: minmax(0,1.25fr) minmax(280px,0.75fr);
    align-items: end;
    gap: 55px;
    margin-bottom: 38px;
    padding: 34px 38px;
    overflow: hidden;
    position: relative;
    border-radius: 24px 5px;
    background: #0a1b31;
    color: #fff
}

.book-work-intro::after {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -145px;
    width: 310px;
    height: 310px;
    border: 58px solid rgba(0,216,189,.1);
    border-radius: 50%
}

.book-work-intro>* {
    position: relative;
    z-index: 1
}

.book-work-intro span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: #63ead8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase
}

.book-work-intro span::before {
    content: "";
    width: 28px;
    height: 2px;
    background: currentColor
}

.book-work-intro h3 {
    max-width: 690px;
    color: #fff;
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.025em
}

.book-work-intro p {
    color: #b9c8d6;
    font-size: 15px;
    line-height: 1.7
}

.book-work-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 24px
}

.book-work-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e0e8e7;
    border-radius: 18px 4px;
    background: #fff;
    box-shadow: 0 17px 45px rgba(21,41,67,.1);
    transition: transform .35s,box-shadow .35s
}

.book-work-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 26px 58px rgba(21,41,67,.17)
}

.book-work-card__visual {
    position: relative;
    aspect-ratio: 4/5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 22px;
    background: radial-gradient(circle at 78% 16%,rgba(0,216,189,.17),transparent 27%),linear-gradient(145deg,#f7faf9,#eaf1f1)
}

.book-work-card__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,rgba(8,23,44,.88),rgba(8,23,44,.06) 55%);
    opacity: 0;
    transition: opacity .35s
}

.book-work-card__visual img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 14px 16px rgba(10, 27, 49, .2));
    transition: transform .45s
}

.book-work-card__view {
    position: absolute;
    left: 50%;
    bottom: 22px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    transform: translate(-50%,12px);
    border-radius: 999px;
    background: #00cdb7;
    color: #071a2c;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity .35s,transform .35s
}

.book-work-card:hover .book-work-card__view,.book-work-card:hover .book-work-card__visual::after {
    opacity: 1
}

.book-work-card:hover .book-work-card__view {
    transform: translate(-50%,0)
}

.book-work-card:hover .book-work-card__visual img {
    transform: scale(1.04)
}

.book-work-card__meta {
    min-height: 82px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 17px 19px
}

.book-work-card__meta strong {
    color: #0a1b31;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25
}

.book-work-card__meta small {
    color: #70808f;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .035em
}

@media screen and (max-width: 1199px) {
    .work-page .main-tabs {
        width:100%;
        justify-content: flex-start
    }

    .book-work-grid {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }
}

@media screen and (max-width: 767px) {
    .work-page .portfolio-tabs {
        padding-inline:15px
    }

    .work-page .main-tabs {
        margin-bottom: 32px!important;
        border-radius: 14px
    }

    .work-page .main-tabs .nav-link {
        padding: 9px 14px;
        font-size: 12px
    }

    .book-work-intro {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 28px 24px
    }

    .book-work-intro h3 {
        font-size: 32px
    }

    .book-work-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 14px
    }

    .book-work-card__visual {
        padding: 14px
    }

    .book-work-card__meta {
        min-height: 74px;
        padding: 13px 14px
    }

    .book-work-card__meta strong {
        font-size: 14px
    }
}

@media screen and (max-width: 420px) {
    .book-work-grid {
        grid-template-columns:1fr
    }

    .book-work-card__visual {
        aspect-ratio: 5/6
    }
}

.navbar-brand {
    width: 280px!important
}

nav.navbar .row {
    justify-content: space-between!important;
    width: 109%!important
}

.about-img--alt:before,.about-img--inner:before {
    display: none
}

.about-img--inner img {
    height: 494px!important;
    object-position: 33%
}

.main-tabs {
    display: none
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

.imgFluid {
    max-width: 100%;
    height: auto
}

body {
    overflow-x: hidden;
    position: relative;
    font-family: "Faktum Test"
}

a,button {
    transition: .5s ease-in-out;
    text-decoration: none;
    outline: 0;
    border: none;
    cursor: pointer
}

a:hover,button:hover {
    text-decoration: none
}

h1,h2,h3,h4,h5,h6,p,small,span {
    font-family: "Faktum Test";
    margin: 0
}

input,select,textarea {
    font-family: "Faktum Test"
}

ul,ul.list-inline {
    margin: 0;
    padding: 0
}

li {
    padding: 0;
    list-style: none;
    font-family: "Faktum Test"
}

li a {
    font-family: "Faktum Test"
}

.mc-b-1 {
    padding-bottom: 10px
}

.mc-b-2 {
    padding-bottom: 20px
}

.mc-b-3 {
    padding-bottom: 30px
}

@keyframes mymove {
    0%,100% {
        opacity: .1
    }

    50% {
        opacity: 1
    }
}

.primary-heading h3 {
    font-family: "Faktum Test";
    font-size: 35px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #0e0d0d
}

.primary-heading h4 {
    font-family: "Faktum Test";
    font-size: 30px
}

.primary-heading h6 {
    font-family: "Faktum Test";
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #000
}

.primary-heading p {
    font-family: "Faktum Test";
    font-size: 22px;
    font-weight: 500;
    line-height: 33px;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    color: #000;
    padding: 10px 0 20px
}

.primary-heading h2 {
    font-family: "Faktum Test";
    font-size: 66px;
    font-weight: 500;
    line-height: 80px;
    text-align: left;
    color: #152943;
    letter-spacing: 1px
}

.primary-btn a {
    background-color: #fff;
    padding: 12px 30px;
    border-radius: 50px;
    font-family: "Faktum Test";
    color: #000;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 23px;
    text-align: center;
    border: 1px solid #fff;
    display: inline-block
}

.btn-quote a {
    background-color: #fff;
    padding: 12px 30px;
    border-radius: 50px;
    font-family: "Faktum Test";
    color: #000;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 23px;
    text-align: center;
    border: 1px solid
}

.btn-quote a:hover,.primary-btn a:hover {
    text-decoration: none;
    border: 1px solid #d8d7d7;
    transition: .2s ease-in-out
}

.primar-btn {
    display: inline-block;
    position: relative;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 35px;
    text-align: center;
    text-transform: uppercase;
    transition: 1s ease-in-out;
    border: 2px solid;
    outline: 0;
    border-radius: 10px
}

.primar-btn.primar-bg {
    background: linear-gradient(139deg,#004c89,rgba(0,255,209,.48));
    color: #fff;
    border: transparent;
    border-radius: 50px;
    font-weight: 600
}

.primar-btn.primar-bg:hover {
    color: #fff;
    background: linear-gradient(303deg,#004c89,rgba(0,255,209,.48))
}

header {
    position: absolute;
    width: 100%;
    left: 0;
    z-index: 888;
    top: 37px
}

header.header--inner {
    position: relative;
    background: #152943
}

header .navbar-nav {
    background: rgba(255,255,255,.14);
    padding: 14px 10px;
    border-radius: 50px;
    flex-wrap: wrap;
    gap: 0 .5rem;
    align-items: center;
    justify-content: center
}

a.navbar-brand {
    filter: brightness(0) invert(1);
    padding: 30px 0
}

header .container {
    max-width: 1300px
}

header .nav-link {
    display: block;
    padding: .25rem 5rem;
    color: #fff!important
}

header .navbar-collapse {
    float: right;
    padding: 40px 0
}

header .row {
    width: 100%
}

header .navbar-collapse li {
    padding: 0 2px
}

header .navbar-collapse li a:hover {
    color: #00ffc7!important
}

.startBtn {
    background: 0 0;
    padding: 16px 40px;
    border-radius: 50px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    float: right;
    margin: 0;
    z-index: 1111;
    position: relative
}

.startBtn:focus,.startBtn:hover {
    background: #000;
    color: #fff
}

.fireBox {
    margin: 80px auto;
    width: 60px;
    height: 60px;
    position: relative;
    transform-origin: center bottom;
    animation-name: flicker;
    animation-duration: 3ms;
    animation-delay: .2s;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
    animation-direction: alternate
}

.flame {
    bottom: 0;
    position: absolute;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    border-top-left-radius: 50%;
    transform: rotate(-45deg) scale(1.5,1.5)
}

.yellow {
    left: 15px;
    width: 30px;
    height: 30px;
    background: gold;
    box-shadow: gold 0 0 9px 4px
}

.orange {
    left: 10px;
    width: 40px;
    height: 40px;
    background: orange;
    box-shadow: orange 0 0 9px 4px
}

.red {
    left: 5px;
    width: 50px;
    height: 50px;
    background: #ff4500;
    box-shadow: #ff4500 0 0 5px 4px
}

.white {
    left: 15px;
    bottom: -4px;
    width: 30px;
    height: 30px;
    background: #fff;
    box-shadow: #fff 0 0 9px 4px
}

.circle {
    border-radius: 50%;
    position: absolute
}

.blue {
    width: 10px;
    height: 10px;
    left: 25px;
    bottom: -25px;
    background: #6a5acd;
    box-shadow: #6a5acd 0 0 15px 10px
}

.black {
    width: 40px;
    height: 40px;
    left: 10px;
    bottom: -60px;
    background: #000;
    box-shadow: #000 0 0 15px 10px
}

@keyframes flicker {
    0%,40% {
        transform: rotate(-1deg)
    }

    100%,20% {
        transform: rotate(1deg)
    }

    60% {
        transform: rotate(1deg) scaleY(1.04)
    }

    80% {
        transform: rotate(-2deg) scaleY(.92)
    }
}

.transition,body,body #clients .wrapper .filtres ul li,body #clients .wrapper .filtres ul li::before,body #lets_talk .wrapper .form_container form .champ .input input,body #lets_talk .wrapper .form_container form .champ .input textarea,body #lets_talk header .wrapper .form_container form input[type=submit],body .projets .grid_projets a .titre_projet::before,body header,body header #lets_talk .wrapper .form_container form input[type=submit],body header .wrapper .bouton,body header .wrapper nav ul li a {
    transition: .5s ease-out
}

.bouton::after,.cubic,a,a:active,a:hover,a:link,a:visited,body #clients .wrapper .grid_clients .single_client a .verso,body #clients .wrapper .grid_clients .single_client a .verso span img,body #clients .wrapper .intro,body #clients .wrapper h3,body #competences,body #lets_talk,body #lets_talk .wrapper .form_container form input[type=submit],body #lets_talk .wrapper .form_container form input[type=submit]::after,body #lets_talk .wrapper>div,body #navigation_mobile_container,body #navigation_mobile_container nav.mobile-navigation,body .a_propos_pourquoi,body .a_propos_pourquoi .pourquoi .slider .slide_container .slide,body .a_propos_pourquoi .pourquoi .slider .slide_container .slide .chapitre,body .a_propos_pourquoi .pourquoi .slider .slide_container .slide h5,body .a_propos_pourquoi .pourquoi .slider .slide_container .slide p,body .a_propos_pourquoi .pourquoi .title_container .slider_nav span::before,body .modales,body .projets .grid_projets a .titre_projet,body .projets h3,body header .wrapper .site-title a svg path:not(#pixel_logo),body header .wrapper .site-title a svg text,body.call_to_action_open #lets_talk .wrapper .form_container form header input[type=submit],body.call_to_action_open header,body.call_to_action_open header #lets_talk .wrapper .form_container form input[type=submit],body.call_to_action_open header .bouton,footer .wrapper .bottom_footer ul li,footer .wrapper .coordonnees li {
    transition: .75s cubic-bezier(.16, 1, .3, 1)
}

.absolute,body #clients .wrapper .grid_clients .single_client a .verso,body #headband .wrapper .logo_headband #svg_masque_headband,body .modales .overlay,body .projets .grid_projets a .covers_container .verso,body header .wrapper .site-title a .logo_seo {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0
}

figure.image_container {
    height: 100%;
    width: 100%;
    line-height: 0;
    font-size: 0px
}

figure.image_container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center
}

@-webkit-keyframes change_color {
    0%,100% {
        fill: rgb(249,185,100)
    }

    50% {
        fill: rgb(249,85,83)
    }

    33% {
        fill: rgb(41,108,224)
    }
}

body.white header {
    background: #fff
}

body.white header .wrapper nav ul li a {
    color: #112138
}

body.white header .wrapper nav ul li a.ancre_on::before,body.white header .wrapper nav ul li a:hover::before {
    background: #112138
}

body.white header .wrapper nav ul li a.ancre_on::after,body.white header .wrapper nav ul li a:hover::after {
    background: 0 0
}

body.white header .wrapper .site-title svg path:not(#pixel_logo),body.white header .wrapper .site-title svg text {
    fill: rgb(17,33,56)!important
}

body.blue_light header {
    background: #e8eef8
}

body.blue_light header .wrapper nav ul li a {
    color: #112138
}

body.blue_light header .wrapper nav ul li a.ancre_on::before,body.blue_light header .wrapper nav ul li a:hover::before {
    background: #112138
}

body.blue_light header .wrapper nav ul li a.ancre_on::after,body.blue_light header .wrapper nav ul li a:hover::after {
    background: 0 0
}

body.blue_light header .wrapper .site-title svg path:not(#pixel_logo),body.blue_light header .wrapper .site-title svg text {
    fill: rgb(17,33,56)!important
}

body.blue header,body.call_to_action_open header {
    background: #112138
}

body.blue header .wrapper nav ul li a,body.call_to_action_open header .wrapper nav ul li a {
    color: #fff
}

body.blue header .wrapper nav ul li a.ancre_on::before,body.blue header .wrapper nav ul li a:hover::before,body.call_to_action_open header .wrapper nav ul li a.ancre_on::before,body.call_to_action_open header .wrapper nav ul li a:hover::before {
    background: #fff
}

body.blue header .wrapper nav ul li a.ancre_on::after,body.blue header .wrapper nav ul li a:hover::after,body.call_to_action_open header .wrapper nav ul li a.ancre_on::after,body.call_to_action_open header .wrapper nav ul li a:hover::after {
    background: 0 0
}

body.blue header .wrapper .site-title svg path:not(#pixel_logo),body.blue header .wrapper .site-title svg text,body.call_to_action_open header .wrapper .site-title svg path:not(#pixel_logo),body.call_to_action_open header .wrapper .site-title svg text {
    fill: rgb(255,255,255)!important
}

body #headband {
    position: relative;
    min-height: 100vh;
    display: -webkit-box;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    color: #fff;
    z-index: 2;
    background: url("../images/bgg-optimized.webp") 0 0/cover no-repeat;
    padding-top: 0
}

body #headband.headband--home {
    min-height: 110vh;
    -webkit-box-align: start;
    padding-top: 20rem!important
}

.frankfurt-marquee {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 110;
    width: 100%;
    overflow: hidden;
    color: #fff;
    background: #d51f3e;
    font-family: Montserrat,"Faktum Test",Arial,sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap
}

.frankfurt-marquee__track {
    display: flex;
    width: max-content;
    animation: 28s linear infinite frankfurt-marquee-scroll;
    will-change: transform
}

.frankfurt-marquee__group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 12px 0
}

.frankfurt-marquee__group span {
    display: flex;
    align-items: center
}

.frankfurt-marquee__group span::after {
    width: 7px;
    height: 7px;
    margin: 0 34px;
    border-radius: 50%;
    background: #fff;
    content: ""
}

@keyframes frankfurt-marquee-scroll {
    to {
        transform: translateX(-50%)
    }
}

@media (prefers-reduced-motion:reduce) {
    .categories-list--css-marquee,.frankfurt-marquee__track {
        animation-play-state: paused
    }
}

body #headband.headband--home.headband--event {
    min-height: min(56.25vw,1080px);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
    padding: 0!important;
    background: linear-gradient(90deg,rgba(26,57,104,.97) 0,rgba(28,62,112,.89) 25%,rgba(28,64,115,.35) 49%,rgba(20,58,104,0) 67%),linear-gradient(0deg,rgba(27,57,105,.45) 0,rgba(27,57,105,0) 36%),url("../images/home-frankfurt-book-fair-background-optimized.webp") center center/cover no-repeat
}

body #headband.headband--event::after,body #headband.headband--event::before {
    display: none;
    content: none
}

.event-hero__content {
    position: relative;
    z-index: 2;
    width: 37%;
    margin: 14.6% 0 0 6.2%;
    color: #fff;
    text-align: center;
    font-family: Montserrat,"Faktum Test",Arial,sans-serif
}

.event-hero__edition,.event-hero__eyebrow {
    margin: 0;
    color: #fff;
    font-size: clamp(15px, 1.55vw, 30px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: .12em;
    text-transform: uppercase
}

.event-hero__title {
    display: inline-block;
    margin: .45vw 0 .55vw;
    padding: .15em .18em .11em;
    color: #fff;
    background: #d51f3e;
    font-family: Impact,"Arial Narrow",sans-serif;
    font-size: clamp(52px, 7.2vw, 138px);
    font-weight: 400;
    line-height: .88;
    letter-spacing: -.025em;
    text-transform: uppercase
}

.event-hero__copy {
    margin: 1.65vw auto 0;
    color: #fff;
    font-size: clamp(13px, 1.12vw, 22px);
    font-weight: 400;
    line-height: 1.32
}

.event-hero__details {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.15vw;
    width: max-content;
    max-width: 100%;
    margin: 2.05vw auto 0
}

.event-hero__detail {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(33px,1.55vw,38px);
    padding: .25em 1em .25em 4em;
    border: 1px solid rgba(255,255,255,.88);
    border-radius: 999px;
    color: #fff;
    font-size: clamp(13px, 1.2vw, 23px);
    line-height: 1;
    white-space: nowrap
}

.event-hero__detail-icon {
    position: absolute;
    left: -1px;
    top: 50%;
    display: grid;
    place-items: center;
    width: clamp(40px,3.9vw,75px);
    height: clamp(40px,3.9vw,75px);
    border-radius: 50%;
    background: #d51f3e;
    font-size: clamp(18px, 1.65vw, 32px);
    transform: translateY(-50%)
}

@media (max-width: 767px) {
    .frankfurt-marquee {
        font-size:11px
    }

    .frankfurt-marquee__group {
        padding: 10px 0
    }

    .frankfurt-marquee__group span::after {
        margin: 0 22px
    }

    .home-frankfurt-page>header {
        top: 31px
    }

    body #headband.headband--home.headband--event {
        min-height: 720px;
        background-position: 62% center;
        background-image: linear-gradient(90deg,rgba(26,57,104,.97) 0,rgba(28,62,112,.89) 25%,rgba(28,64,115,.35) 49%,rgba(20,58,104,0) 67%),linear-gradient(0deg,rgba(27,57,105,.45) 0,rgba(27,57,105,0) 36%),url("../images/home-frankfurt-book-fair-background-mobile.webp")
    }

    body #headband.headband--home.headband--event::after {
        display: block;
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        height: auto;
        background: rgba(21,52,96,.7);
        animation: none
    }

    .event-hero__content {
        width: calc(100% - 36px);
        margin: 170px 18px 50px
    }

    .event-hero__title {
        margin: 8px 0 10px;
        font-size: clamp(58px, 19vw, 88px)
    }

    .event-hero__copy {
        max-width: 470px;
        margin-top: 24px;
        font-size: 15px;
        line-height: 1.5
    }

    .event-hero__desktop-break {
        display: none
    }

    .event-hero__details {
        gap: 17px;
        margin-top: 32px
    }

    .event-hero__detail {
        min-height: 48px;
        padding-left: 58px;
        font-size: 14px
    }

    .event-hero__detail-icon {
        width: 50px;
        height: 50px;
        font-size: 21px
    }
}

body #headband::after {
    background: url("../images/pattern-30.webp") 0 0/100%;
    content: "";
    top: 0;
    width: 100%;
    position: absolute;
    left: 0;
    z-index: 0;
    height: 100%;
    animation: 5s infinite mymove;
    pointer-events: none
}

body #headband::before {
    background: url("../images/pattern-29.webp") right/100%;
    content: "";
    top: 0;
    left: auto;
    width: 100%;
    position: absolute;
    right: 0;
    z-index: 0;
    height: 100%;
    animation: 5s infinite mymove;
    pointer-events: none
}

body #headband ::selection {
    text-shadow: none;
    color: inherit;
    background-color: transparent
}

body #headband ::-webkit-selection {
    text-shadow: none;
    color: inherit;
    background-color: transparent
}

body #headband canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1
}

body #headband .wrapper {
    text-align: center;
    max-width: 95%;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    font-family: Satoshi-Medium
}

body #headband .wrapper .logo_headband {
    position: relative;
    overflow: visible;
    z-index: -1;
    transition: 1s ease-in-out .75s;
    opacity: 1
}

body #headband .wrapper .logo_headband #svg_masque_headband {
    z-index: -1
}

body #headband .wrapper .logo_headband #svg_logo_headband svg,body #headband .wrapper .logo_headband #svg_masque_headband svg {
    width: 100%
}

body #headband .wrapper .logo_headband #svg_logo_headband svg path {
    opacity: 0
}

body #headband .wrapper .texte_headband {
    position: relative;
    display: table;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: baseline;
    pointer-events: none
}

body #headband .wrapper .texte_headband .titre {
    font-size: 22px;
    margin-bottom: 0;
    line-height: 1.2;
    max-width: 100%;
    font-family: "Faktum Test";
    text-align: center
}

body #headband .wrapper .texte_headband .titre .bleu {
    color: #296ce0
}

body #headband .wrapper .texte_headband .titre .jaune {
    color: #f9b964
}

body #headband .wrapper .texte_headband h2 {
    font-family: "Faktum Test";
    font-size: 63.5px;
    max-width: calc(200%);
    font-weight: 100;
    text-align: center;
    line-height: 85px;
    letter-spacing: -2px
}

body #headband .wrapper .texte_headband h2 b {
    font-weight: 900;
    background-image: linear-gradient(to right bottom,#0bc2b5,#05beb7,#17afb5,#00b6bb,#08d7b1);
    -webkit-background-clip: text;
    color: transparent;
    text-transform: capitalize
}

.ServicesSec {
    position: relative;
    padding: 175px 0 0
}

.ServicesSec .container-fluid {
    width: 100%;
    padding-right: 0;
    padding-left: 0
}

.ServicesSec .container-fluid .servicesSlider {
    padding-left: 10%
}

.ServicesSec .container-fluid .servicesSlider .main-box {
    margin: 0 50px 0 0
}

.main-boxSlider .slick-list.draggable {
    padding-bottom: 8rem
}

.categoriesWrapper {
    position: relative;
    padding-bottom: 90px;
    z-index: 99
}

.categoriesWrapper::after,.categoriesWrapper::before {
    content: "";
    width: 100%;
    height: 95%;
    position: absolute;
    left: 0;
    top: 0;
    background: #152943
}

section.ServicesSec.ServicesSec--bg {
    padding: 6rem 0 3rem
}

.ServicesSec--bg {
    background: #152943
}

.categoriesWrapper::after {
    transform: none;
    z-index: -8
}

.ServicesSec .container {
    position: relative;
    z-index: 2222;
    max-width: 1300px;
    padding: 0
}

.ServicesSec p {
    color: #fff;
    font-size: 22px;
    line-height: 35px;
    font-weight: 500;
    padding: 0;
    text-align: center
}

.brandsBar {
    margin-top: 70px;
    padding: 0 150px;
    margin-bottom: 90px!important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 21px
}

.brandsBar .slick-dots {
    display: none
}

.brandsBarDiv {
    padding: 0;
    filter: brightness(0) invert(1);
    width: 19%
}

.brandsBarDiv img {
    height: 50px;
    object-fit: contain;
    width: 100%
}

.main-box {
    background-color: #08172c;
    padding: 40px 30px;
    margin-top: 0;
    min-height: 410px;
    width: 100%;
    --box-dimension: 180px;
    border-radius: 0 50px
}

.main-boxWrapper .slick-list.draggable {
    padding: 0 0 12rem
}

.main-box:hover {
    background-image: linear-gradient(to right bottom,#004c89,#0070a9,#0094ba,#00b6bb,#08d7b1)
}

.main-box:hover .main-content {
    padding-top: 10px
}

.main-box:hover .main-button {
    opacity: 1
}

.main-box .main-img img {
    width: 22%;
    margin-bottom: 0
}

.main-box .main-content h2 {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px
}

.main-box .main-content p,.main-box .main-content ul li {
    font-size: 14px;
    font-weight: 300;
    color: #fff;
    line-height: 24px;
    text-align: left
}

.main-content {
    padding-bottom: 0;
    padding-top: 40px;
    transition: 1s
}

.main-box .main-button {
    opacity: 0;
    transition: transform .3s
}

.main-box .main-button a {
    color: #000;
    text-decoration: none;
    padding: 11px 20px;
    background-color: #fff;
    border-radius: 38px;
    font-size: 12px;
    position: absolute;
    bottom: 8%;
    font-weight: 600
}

.latestProject {
    padding: 90px 0;
    background: #fefefe;
    position: relative
}

.latestProject:after {
    content: "";
    top: 0;
    width: 100%;
    position: absolute;
    left: 0;
    z-index: 0;
    height: 100%;
    animation: 5s infinite mymove;
    pointer-events: none
}

.latestProject:before {
    background: url(../images/pattern-29.webp) right/contain no-repeat;
    content: "";
    top: 0;
    left: auto;
    width: 100%;
    position: absolute;
    right: 0;
    z-index: 0;
    animation: 5s infinite mymove;
    pointer-events: none;
    height: 100%
}

.latestProject .container {
    position: relative;
    z-index: 2222;
    max-width: 1300px;
    padding: 0
}

.browsBtn {
    background: #000;
    padding: 12px 30px;
    border-radius: 50px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    margin: 40px 0;
    display: block;
    width: fit-content;
    border: 1px solid
}

.browsBtn:focus,.browsBtn:hover {
    background: #fff;
    color: #000;
    border: 1px solid #000
}

.latestProject h2 span {
    position: relative
}

.latestProject h2 span::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 20px;
    left: 0;
    bottom: 9px;
    z-index: -1;
    background: linear-gradient(105.34deg,rgba(0,76,137,.64) .74%,rgba(0,255,209,.64) 94.7%),#a265eb
}

.latestProject h2 {
    font-size: 68px;
    font-weight: 600;
    font-family: "Faktum Test";
    color: #000;
    text-transform: capitalize;
    margin-bottom: 115px
}

.latestBox h5 {
    padding: 20px 0;
    color: #189718
}

footer {
    background: #0e3554;
    position: relative;
    padding-top: 4rem;
    font-family: "Faktum Test";
    z-index: 999
}

.news-letter-sec {
    border-bottom: 1px solid #464646
}

.news-letter-sec .social-list li:not(:last-child) {
    margin-right: 20px
}

.news-letter-sec .social-list li a {
    border: none;
    font-size: 20px;
    width: auto;
    color: #fff
}

.news-letter-sec .form-group {
    margin-bottom: 0;
    position: relative;
    background-color: #f3f6f9;
    padding: 10px;
    border-radius: 5px
}

.news-letter-sec .form-group input {
    background-color: transparent;
    border: none
}

.news-letter-sec .form-group input::placeholder {
    color: #6e6e6e
}

.news-letter-sec .form-group button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    background-color: transparent;
    color: #6e6e6e;
    font-size: 20px
}

.news-letter-sec .form-group button:hover {
    right: 15px;
    color: #502b21
}

footer .footer-logo {
    width: 70px;
    display: block;
    margin: 0 0 0 auto
}

footer .footer-logo img {
    width: 100%;
    object-fit: cover;
    display: block
}

.footer-content h4 {
    color: #fff;
    font-size: 16px;
    padding-bottom: 30px;
    line-height: 28px;
    text-transform: uppercase;
    font-weight: 600
}

.footer-content p {
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
    margin-bottom: 10px
}

.footer-content ul li a {
    color: #fff;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 500
}

.footer-content ul li:hover a {
    color: rgb(29 161 242)
}

.footer-content ul li:not(:last-child) {
    padding-bottom: 10px
}

.footer-content .social-list li a {
    color: #fff;
    font-size: 20px;
    margin-right: 10px
}

.footer-content .social-list li a i {
    color: #fff;
    transition: .5s ease-in-out
}

.footer-content .social-list li:hover a i {
    color: rgb(29 160 241)
}

.contact-list li a span {
    color: #fff;
    margin-right: 5px
}

.copyright-sec p {
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px
}

.copyright-sec {
    justify-content: space-evenly;
    padding: 10px
}

.copyright-sec ul li,.copyright-sec ul li a {
    color: #6e6e6e;
    font-size: 14px;
    line-height: 24px
}

.copyright-sec ul li:not(:last-child) {
    margin-right: 20px
}

.copyright-sec ul li a:hover {
    color: #fff
}

.get-it-quote h3 {
    font-size: 28px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 30px
}

.footer-sec {
    padding: 4rem 0
}

.footer-content .addres {
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
    border-bottom: 1px solid
}

.mc-t-2 {
    margin-top: 20px!important
}

.pd-3 {
    padding-left: 40px
}

.clr-1 h4 {
    color: #ff322e
}

.clr-2 h4 {
    color: #27ae60
}

.clr-3 h4 {
    color: #2f80ed
}

.clr-4 h4 {
    color: #9b51e0
}

.social-list {
    display: flex;
    gap: 1rem
}

section.the-agency {
    padding: 13rem 0 4rem
}

section.the-agency .container {
    position: relative;
    z-index: 2222
}

.agency-quotes h4 {
    font-size: 14px;
    font-weight: 600
}

.agency-quotes {
    color: #fff
}

.agency-quotes h3 {
    font-size: 40px;
    font-weight: 600;
    padding: 24px 0;
    line-height: 1.5
}

.testimonialsSec .container,footer .container,section.the-agency .container {
    max-width: 1300px;
    padding: 0
}

.blog-content h4 {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase
}

.blog-content {
    color: #fff;
    padding-bottom: 3rem
}

.blog-content p {
    font-size: 21px;
    font-weight: 600;
    padding-top: 20px
}

.blog-twitter {
    color: #fff;
    background: #1da1f2;
    padding: 1rem;
    height: 380px;
    position: relative;
    min-height: 380px
}

.blog-twitter h4 {
    font-size: 14px;
    font-weight: 600
}

.blog-twitter p {
    padding-top: 30px;
    font-size: 16px;
    line-height: 1.8
}

.twitter-list {
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 30px;
    width: 90%
}

.testimional-img img {
    object-fit: contain;
    object-fit: contain;
    display: block;
    width: 100%;
    height: auto
}

.testimonialsSec .container {
    position: relative;
    z-index: 2222;
    max-width: 1300px
}

.testmional-title h2 {
    font-size: 65px;
    font-family: "Faktum Test";
    font-weight: 600
}

.testmional-title p {
    font-size: 21px;
    font-weight: 600;
    padding: 20px 0
}

.testimional-section {
    background: url("../images/testibg.png") 0 0/cover no-repeat;
    width: 100%;
    height: 100%;
    padding: 10rem 0;
    position: relative
}

.testimional-content {
    background-color: #eaeaea;
    padding: 2rem;
    border-radius: 20px;
    margin: 30px;
    position: relative
}

.testimional-content p {
    margin-bottom: 15px
}

.test-team h4 {
    -webkit-text-fill-color: transparent;
    font-weight: 600
}

.test-team li {
    color: #000;
    font-size: 18px
}

.test-border {
    position: absolute;
    bottom: -20px;
    left: 50%;
    right: 0;
    transform: translate(-50%);
    width: 0;
    height: 0;
    border-top: 20px solid #eaeaea;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent
}

.testimional-items {
    padding: 2rem 0
}

.testimional-img {
    width: 57px;
    height: 57px;
    object-fit: contain;
    margin: 0 auto
}

.test-title_content {
    padding: 3rem 0
}

.testimional-section::before {
    position: absolute;
    content: "";
    background-image: url("../images/ball.png");
    width: 292px;
    height: 300px;
    background-size: contain;
    right: 0;
    top: 0
}

.sliderPortfolio {
    position: absolute
}

.sliderPortfolioImages {
    padding: 0 20px 0 10px;
    margin-bottom: 0!important
}

.portfolioBox {
    padding: 0 10px
}

.portfolioBoxImage {
    height: 310px;
    padding: 15px;
    background: #fff
}

.portfolioBox img {
    width: 100%
}

.sliderPortfolioBaR {
    background: #fff;
    padding: 13px 0;
    margin-bottom: 0
}

.slideText {
    text-align: center;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 22px;
    color: #999;
    position: relative
}

.slideText::after {
    position: absolute;
    left: auto;
    content: "";
    background: #ff7e21;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    right: -10px;
    top: 12px
}

.join-button {
    background-image: linear-gradient(to right bottom,#004c89,#0070a9,#0094ba,#00b6bb,#08d7b1);
    overflow: hidden;
    position: relative;
    border-radius: 50px;
    margin: 0 0 0 auto;
    display: table
}

.join-button span {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 80px;
    background-color: inherit;
    transition: transform .4s linear,top 1s linear;
    overflow: hidden;
    display: inline-block;
    z-index: 0
}

.join-button span::after,.join-button span::before {
    content: "";
    position: absolute;
    width: 433px;
    height: 510px;
    top: -60px;
    left: 50%;
    transform: translate(-50%,-75%)
}

.join-button span::before {
    border-radius: 46%;
    background: url("../images/pattern-30.webp");
    animation: 12s linear infinite joinButton
}

.join-button span::after {
    border-radius: 40%;
    background: url("../images/pattern-30.webp");
    animation: 32s linear infinite joinButton
}

@keyframes joinButton {
    0% {
        transform: translate(-50%,-75%) rotate(0)
    }

    100% {
        transform: translate(-50%,-75%) rotate(360deg)
    }
}

.join-button:active,.join-button:hover,.join-button:visited {
    box-shadow: rgba(0,0,0,.8) 0 10px 25px
}

.mc-b-4 {
    margin-bottom: 40px!important
}

.col-center {
    margin: 0 auto
}

.port-top {
    padding: 6% 0
}

.main-tabs {
    border: none;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap
}

.main-tabs li a {
    color: #000;
    background-color: transparent;
    text-transform: capitalize;
    transition: .5s ease-in-out;
    padding: 10px 35px;
    font-size: 17px;
    border: none!important;
    border-radius: 3px!important
}

.main-tabs li a.active,.main-tabs li a:hover {
    background-color: #0e0e0e!important;
    color: #fff!important
}

.main-tabs li:not(:first-child) {
    margin-left: 30px
}

.gallery-box {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    height: 250px;
    box-shadow: rgba(201,192,192,.74) 0 0 30px;
    transition: .5s ease-in-out;
    margin: 15px 0
}

.gallery-box .gallery-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .5s ease-in-out
}

.gallery-box .gallery-content a i {
    color: #fff;
    font-size: 50px
}

.gallery-box .gallery-img img {
    width: 100%;
    object-fit: cover;
    display: block;
    min-height: 250px;
    transition: .5s ease-in-out
}

.gallery-box:hover .gallery-img img {
    filter: brightness(.5)
}

.gallery-box:hover .gallery-content {
    opacity: 1
}

.about-section {
    position: relative;
    color: #000
}

.about-section .about-img {
    position: relative
}

.about-section .about-img::before {
    content: "";
    position: absolute;
    background: url("../images/about-img-2.jpg") 0 0/cover no-repeat;
    width: 386px;
    height: 300px;
    left: -17%;
    top: 55%;
    border-radius: 10px
}

.about-section .about-img img {
    display: block;
    width: 100%;
    height: 530px;
    object-fit: cover;
    border-radius: 7px
}

.about-section .text-list {
    position: relative;
    font-size: 16px;
    font-weight: 400;
    line-height: 2.125em
}

.about-section .text-list ul li {
    line-height: 30px;
    margin-bottom: 10px;
    padding-left: 35px;
    color: rgba(0,0,0,.8);
    position: relative
}

.about-section .text-list ul li::before {
    content: "*";
    font-size: 0;
    font-family: FontAwesome;
    position: absolute;
    left: 10px;
    top: 11px;
    background: #ff7e21;
    font-weight: 400;
    width: 10px;
    height: 10px;
    border-radius: 100%
}

.lower-text {
    color: #000;
    padding: 20px 0;
    font-size: 20px;
    text-transform: capitalize;
    font-weight: 500
}

.desciption-text p {
    color: #000;
    font-size: 15px;
    line-height: 25px
}

.pc-p-4 {
    padding: 4% 0
}

.working-card-box .working-img {
    overflow: hidden
}

.working-card-box .working-img img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: .7s ease-in-out;
    display: block
}

.working-card-box:hover .working-img img {
    filter: brightness(.8);
    transform: scale(1.2)
}

.working-content {
    transition: .5s ease-in-out;
    background-color: #fff;
    padding: 10px
}

.working-content:hover {
    transition: .5s ease-in-out;
    background-image: linear-gradient(to right bottom,#004c89,#0070a9,#0094ba,#00b6bb,#08d7b1)
}

.working-content:hover :is(h6,p) {
    color: #fff
}

.working-tilte.primary-heading p {
    color: #000
}

.working-content h6 {
    font-size: 26px;
    font-weight: 600;
    padding-bottom: 10px;
    text-transform: capitalize
}

.working-content p {
    font-size: 16px;
    line-height: 26px;
    color: #000;
    padding-bottom: 14px
}

.pc-p-6 {
    padding: 6% 0
}

.contact-sec {
    background: url("../images/testibg.png") 0 0/cover no-repeat;
    width: 100%;
    height: 100%;
    padding: 10rem 0;
    position: relative
}

.contact-sec .form-box-main form select {
    width: 100%;
    margin: 0;
    border: 1px solid #b2b9c1;
    background: #fff;
    padding: 15px;
    color: #112138;
    font-size: 15px;
    font-weight: 600;
    border-radius: 5px
}

.contact-head {
    text-align: center
}

.contact-head p {
    padding-top: 10px;
    font-size: 20px;
    line-height: 30px
}

.contact-head .p-link {
    color: #091e42;
    font-weight: 500
}

.contact-head h3 {
    padding-top: 30px;
    text-align: center;
    font-size: 40px
}

.contact-sec .form-box-main {
    background: rgba(158,158,158,.06);
    padding: 0 15px
}

.form-box-main form,.form-box-main form .form-group {
    padding-bottom: 18px
}

.form-box-main form label.field-txt {
    font-weight: 600;
    font-size: 16px;
    color: #091e42;
    margin: 0 0 5px;
    width: 100%;
    display: block
}

.form-box-main form input[type=email],.form-box-main form input[type=number],.form-box-main form input[type=tel],.form-box-main form input[type=text],.form-box-main form textarea {
    width: 100%;
    margin: 0;
    border: 1px solid #b2b9c1;
    background: #fff;
    padding: 18px 15px;
    color: #000;
    font-size: 16px;
    font-weight: 500;
    height: 55px;
    border-radius: 5px
}

.form-box-main form label.field-txt span {
    color: #e91e63
}

.form-box-main form textarea {
    width: 100%;
    margin: 0;
    padding: 8px 12px;
    height: 100px
}

.BlueBar {
    background: #061528
}

.BlueBar .sliderPortfolioBaR {
    background: #061528;
    padding: 20px 0;
    margin-bottom: 0
}

.BlueBar .slideText {
    color: #fff
}

.servicesSliderList .slick-list {
    padding-left: 0!important
}

.imgListWrapper>.scrollNext {
    color: #000;
    font-size: .9rem;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-flex;
    justify-content: flex-start;
    gap: .25rem;
    margin-bottom: 1.25rem;
    line-height: 1;
    user-select: none
}

.imgListWrapper>.scrollNext:hover {
    transform: translateX(5px)
}

.imgListWrapper>.scrollNext>i {
    font-size: 1.25rem
}

#sync1 .item {
    background: #0c83e7;
    padding: 80px 0;
    margin: 5px;
    color: #fff;
    border-radius: 3px;
    text-align: center
}

#sync2 .item {
    background: #c9c9c9;
    padding: 10px 0;
    margin: 5px;
    color: #fff;
    border-radius: 3px;
    text-align: center;
    cursor: pointer
}

#sync2 .item h1 {
    font-size: 18px
}

#sync2 .current .item {
    background: #0c83e7
}

.owl-theme .owl-nav [class*=owl-] {
    transition: .3s
}

.owl-theme .owl-nav [class*=owl-].disabled:hover {
    background-color: #d6d6d6
}

#sync1.owl-theme {
    position: relative
}

#sync1.owl-theme .owl-next,#sync1.owl-theme .owl-prev {
    width: 22px;
    height: 40px;
    margin-top: -20px;
    position: absolute;
    top: 50%
}

#sync1.owl-theme .owl-prev {
    left: 10px
}

#sync1.owl-theme .owl-next {
    right: 10px
}

.ifrm {
    border: none;
    width: 100%;
    margin-top: 50px
}

.about {
    color: #000;
    background: #fff;
    margin: 0 0 5rem;
    padding: 0 0 8rem;
    position: relative
}

.about:before {
    background: url("../images/pattern-29.webp") right/contain no-repeat;
    content: "";
    top: 0;
    left: auto;
    width: 100%;
    position: absolute;
    right: 0;
    z-index: 0;
    animation: 5s infinite mymove;
    pointer-events: none;
    height: 100%
}

.about-content__subHeading {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem
}

.about-content__heading {
    color: #152943;
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1.05;
    padding-right: 4rem
}

.about-content>p {
    font-size: 1rem;
    font-weight: 500;
    line-height: 28px;
    margin: 1rem 0 1.5rem
}

.about-content__btn {
    color: #fff;
    background: linear-gradient(127.11deg,#2e5484 -43.38%,#3f93ff 100%),#000;
    font-size: .75rem;
    font-weight: 500;
    text-transform: uppercase;
    padding: .75rem 1.5rem
}

.about-content__btn:hover {
    color: #fff
}

@media screen and (min-width: 992px) {
    body.home-frankfurt-page {
        overflow-x:clip
    }

    .about .about-content-column {
        align-self: stretch
    }

    .about .about-content-column .about-content {
        position: sticky;
        top: 40px
    }
}

.about-services {
    counter-reset: categories-counter 0
}

.about-services__single {
    background: #fff;
    padding: 1.5rem;
    margin-bottom: 2rem
}

.about-services__single:has(.show) {
    box-shadow: rgba(0,0,0,.125) 0 0 10px 5px
}

.about-services__single:has(.show) .title {
    color: #3c88e8
}

.about-services__single:has(.show) .counting::after {
    color: #3c88e9
}

.about-services__single .title.collapsed i {
    transform: rotate(180deg)
}

.about-services__single :is(.title,.counting,.title i) {
    transition: .3s ease-in-out
}

.about-services__single .counting::after {
    counter-increment: categories-counter 1;
    content: counter(categories-counter,decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    color: #000;
    font-size: 1.25rem;
    font-weight: 600
}

.about-services__single .title {
    color: #152943;
    font-size: 2.5rem;
    font-weight: 600;
    text-transform: capitalize;
    position: relative;
    padding-left: 2.5rem;
    cursor: pointer;
    background: 0 0;
    user-select: none;
    outline: 0;
    line-height: 1
}

.about-services__single p {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.75;
    margin: 1.25rem 0
}

.about-services__single a {
    color: #000;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .5rem;
    line-height: 1
}

.about-services__single a:hover {
    color: #3c88e8;
    transform: translateX(5px)
}

.about-services__single a>i {
    font-size: 1.5rem;
    margin-top: .25rem
}

.product-paragraph .heading {
    color: #fff;
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 1.5rem
}

.categories.categories--light {
    background: rgb(247 247 247)
}

.categories {
    background: #061528;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0;
    transform: none;
    padding: 2rem 5rem;
    z-index: -1
}

.categories--bottom {
    top: auto;
    bottom: -5rem;
    transform: none
}

.categories-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1
}

.categories-list.categories-list--css-marquee {
    width: max-content;
    justify-content: flex-start;
    animation: 32s linear infinite categoriesMarquee;
    will-change: transform
}

.categories-list--css-marquee .categories-list__single {
    flex: 0 0 auto;
    margin: 0
}

@keyframes categoriesMarquee {
    to {
        transform: translateX(-50%)
    }
}

.categories.categories--light .categories-list__single>a {
    color: #000
}

.categories-list__single {
    margin: auto;
    max-width: none!important
}

.categories-list.slick-initialized .categories-list__single {
    display: flex!important;
    align-items: center;
    justify-content: center;
    max-width: none!important;
    margin: 0
}

.categories-list.slick-initialized .categories-list__single>a {
    display: block;
    white-space: nowrap
}

.categories-list__single>a {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0 3rem;
    position: relative
}

.categories-list__single:not(:first-child)>a::after {
    content: "";
    width: 12px;
    height: 12px;
    background: #ff7e21;
    border-radius: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%)
}

.categoriesWrapper::before {
    height: 70%;
    bottom: 0;
    top: auto
}

.the-agency.categoriesWrapper::after,.the-agency.categoriesWrapper::before {
    background: #14171a
}

.templatesSlider .slick-list.draggable {
    padding: 4rem 0 0
}

.templatesWrapper {
    position: relative;
    transform: translateY(-100%);
    z-index: 10
}

.templatesWrapper.templatesWrapper--marquee-only {
    width: 100%;
    margin: -80px 0 72px;
    bottom: auto;
    transform: none;
    overflow: hidden
}

.templatesWrapper--marquee-only .templates {
    position: relative
}

.templatesWrapper--marquee-only .categories--bottom {
    width: 100%;
    position: relative;
    inset: auto;
    padding: 2rem 0;
    transform: none
}

.templatesWrapper--marquee-only .categories-list--book .categories-list__single {
    width: auto!important;
    margin: 0!important
}

.templatesWrapper--marquee-only .categories-list--book .categories-list__single>a {
    display: block;
    padding: 0 clamp(1.4rem,3.2vw,3.25rem);
    font-size: clamp(.78rem, 1.3vw, 1.2rem);
    white-space: nowrap
}

.templatesWrapper--marquee-only .categories-list--book .categories-list__single>a::after {
    display: block;
    left: 0
}

.templates {
    padding: 0
}

.templates .categories {
    padding-inline:1rem}

.templates-card {
    margin-inline:auto}

.templates-card.odd {
    width: 100%;
    position: relative;
    animation: 7s infinite mymovesSecond
}

@keyframes mymovesSecond {
    0%,100% {
        bottom: 0
    }

    50% {
        bottom: -10px
    }
}

.templates-card.even .templates-card__img {
    width: 98%;
    height: 275px;
    margin-top: auto;
    transform: translateY(15%);
    position: relative
}

.templates-card__img {
    width: 100%;
    height: 275px;
    animation: 2s infinite mymoves
}

@keyframes mymoves {
    0%,100% {
        bottom: 0
    }

    50% {
        bottom: -10px
    }
}

.templates-card__img>img {
    width: 100%;
    height: 100%
}

.latestBox {
    margin: 0 1rem
}

.latestBox h3 {
    font-size: 15px
}

a.browsBtn {
    margin-bottom: -6px
}

.WorkList .slick-list.draggable {
    padding: 0!important
}

.alphabet-img {
    padding: 6rem 1rem
}

.teamWrapper {
    margin: 6rem 0
}

.team {
    height: 100%;
    color: #000;
    position: relative
}

:is(.team__socialLinks,.team__categories,.team-content-list,.imgListWrapper > .scrollNext) {
    display: flex;
    align-items: center
}

.team__socialLinks {
    min-height: 100%;
    justify-content: flex-start;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    padding: 0
}

.team__socialLinks::after {
    content: "";
    width: 2px;
    height: 9rem;
    background: #000;
    position: absolute;
    top: -105px;
    left: 50%;
    transform: translate(-50%,-50%)
}

.team__socialLinks>li>a {
    color: #000;
    font-size: 1.25rem;
    transition: .3s ease-in-out
}

.team__socialLinks>li>a:hover {
    scale: 1.5
}

.team-person {
    position: relative
}

.team-person__img {
    width: 100%;
    height: 650px;
    background: #fff;
    position: relative
}

.team-person__img::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background: linear-gradient(200deg,transparent,#000);
    opacity: .75
}

.team-person__img>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top
}

.team-person__details {
    position: absolute;
    left: 4rem;
    bottom: 1.5rem;
    color: #fff
}

.team-person__details :is(.designation,.name) {
    font-weight: 600;
    line-height: 1
}

.team-person__details>.name {
    font-size: 1.25rem;
    text-transform: capitalize;
    letter-spacing: 2px;
    margin-bottom: .5rem
}

.team-person__details>.designation {
    font-size: .75rem;
    text-transform: uppercase
}

.team-content {
    padding: 0 .75rem;
    overflow: hidden
}

.teamContentWrapper {
    width: 100%;
    position: absolute;
    top: 30%;
    right: -57.85%;
    transform: translateY(-50%);
    z-index: 100
}

.team__title {
    font-size: 3.5rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.35
}

:is(.imgListWrapper .scrollNext) {
    padding-left: 5rem
}

.team__title>span {
    font-weight: 600;
    display: block
}

.team__categories {
    justify-content: flex-start;
    gap: 1.45rem;
    margin: 2rem 0 0
}

.team__categories>li>a {
    color: #000;
    font-size: .9rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: .5rem 0;
    position: relative
}

.team__categories>li>a::after {
    content: "";
    width: 0;
    height: 2px;
    background: #000;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: .3s ease-in-out
}

.team__categories>li>a:where(:hover,.active)::after {
    width: 100%
}

.carousel-indicators.team-content-list {
    width: 100%;
    position: static;
    margin: 0
}

.carousel-indicators li.team-content-list__img {
    width: 130px;
    height: 160px;
    cursor: pointer;
    margin-right: .65rem;
    background: #fff;
    text-indent: 0
}

.team-content-list__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top
}

.team-personWrapper {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end
}

.team__socialLinks {
    flex: 0.15 1 0%
}

.team-person {
    flex: 1 1 0%
}

.compensate-for-scrollbar {
    margin: 0!important;
    padding: 0!important;
    overflow: inherit!important
}

li.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgb(255 255 255);
    border-radius: 0;
    color: #fff
}

li.nav-item.dropdown .dropdown-menu a {
    border-bottom: 1px solid #ccc;
    color: #999;
    padding: 8px 20px
}

li.nav-item.dropdown .dropdown-menu a:hover {
    background-image: linear-gradient(to right bottom,#004c89,#0070a9,#0094ba,rgb(0 167 186),rgb(0 142 183));
    color: #fff
}

li.nav-item.dropdown .dropdown-menu a:last-child {
    border: 0
}

.btnLeft {
    float: left;
    margin: 0
}

.main-box {
    position: relative
}

.main-box:before {
    background: url(../images/pattern-29.webp) center/cover;
    content: "";
    top: 0;
    left: auto;
    width: 100%;
    position: absolute;
    right: 0;
    z-index: 0;
    height: 100%;
    animation: 3s infinite mymoveservice;
    pointer-events: none
}

@keyframes mymoveservice {
    0%,100% {
        opacity: .1
    }

    50% {
        opacity: 1
    }
}

.ContestsBtn {
    background-image: linear-gradient(to right,#363bd3,#6b20bf);
    padding: 20px 40px;
    margin: 50px auto;
    display: table;
    color: #fff;
    font-weight: 600;
    border-radius: 50px
}

.ContestsBtn:focus,.ContestsBtn:hover {
    background: #464646!important;
    color: #fff
}

.ContestsModal {
    position: relative
}

.ContestsModal h2 {
    color: rgb(17 33 56);
    margin: 15px 0 10px;
    font-weight: 800;
    font-family: "Faktum Test";
    font-size: 35px;
    line-height: 42px
}

.ContestsModal .col-md-12,.ContestsModal .col-md-6 {
    padding: 0
}

.padding-left {
    padding-left: 8px!important
}

.padding-right {
    padding-right: 8px!important
}

.ContestsModal h2 span {
    font-size: 18px;
    color: #000;
    display: block;
    font-weight: 100;
    font-family: "Faktum Test"
}

.ContestsModal input,.ContestsModal select,.ContestsModal textarea {
    background-color: #fff;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 5px;
    border-color: #02010114!important;
    height: 45px;
    font-size: 14px;
    margin-bottom: 15px;
    width: 100%;
    outline: 0;
    border: 1px solid
}

.ContestsModal textarea {
    height: 100px
}

.ContestsModal .modal-dialog {
    max-width: 900px;
    margin: 0 auto;
    border-radius: 0 0 0 40px;
    overflow: hidden;
    top: 50%;
    transform: translatey(-50%)!important
}

.ContestsModal .modal-content {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 0 solid rgba(0,0,0,.2);
    border-radius: 0;
    outline: 0;
    background-position: center left;
    background-repeat: no-repeat;
    background-size: cover
}

.ContestsModal button.close {
    padding: 0;
    background-color: #ededed;
    border: 0;
    -webkit-appearance: none;
    position: absolute;
    right: 0;
    width: 45px;
    height: 45px;
    font-size: 16px;
    z-index: 22;
    opacity: 1;
    top: 0;
    font-weight: 100;
    outline: 0;
    text-shadow: none;
    color: #0091b8;
    border-radius: 0 0 0 20px
}

.ContestsModal .modal-body {
    position: relative;
    -webkit-box-flex: 0;
    -ms-flex: 0;
    flex: 0;
    padding: 0 30px 0 0;
    border: 0
}

.ContestsModal .img-fluid {
    max-width: 440px;
    height: 600px;
    object-fit: cover;
    object-position: center center;
    width: 340px
}

.loginFormInner {
    padding: 70px 20px 0
}

.ContestsModal .join-button {
    margin: 5px 0;
    width: 100%;
    text-align: center
}

.ContestsModal .join-button a {
    margin: 0 auto;
    display: table;
    width: 100%
}

.modal-open {
    padding: 0!important;
    margin: 0!important;
    overflow-y: inherit!important
}

.teamBanner img {
    width: 100%
}

.innerHeader {
    position: relative;
    background: url(../images/bgg-optimized.webp) 0 0/cover no-repeat
}

.ServicesSec .join-button {
    margin: 0 auto
}

.innerServices {
    margin-top: -60px;
    position: relative;
    z-index: 22
}

.modal-backdrop.show {
    opacity: .9;
    background-color: rgb(17 33 56)
}

.innerBannerName {
    min-height: 75vh!important;
    padding: 130px 0 0!important
}

.innerBannerName canvas {
    display: none
}

.sideBar {
    backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    width: 280px;
    position: fixed;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
    transition: .3s ease-in-out;
    padding: .5rem 0;
    transform: translateX(-100%);
    backdrop-filter: blur(10px);
    overflow-y: scroll
}

.sideBar.show {
    transform: translateX(0);
    box-shadow: 20px 0 55px rgba(6,21,40,.28)
}

.sideBar__logo {
    width: 200px;
    display: block;
    margin: 3rem auto 2rem
}

.sideBar__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.sideBar__close {
    position: absolute;
    top: .5rem;
    right: .75rem;
    font-size: 1.25rem;
    background: #d9d9d9;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.sideBar__close:hover {
    color: #fff;
    background: #0bc2b5
}

.sideBar__nav>li>a:hover {
    color: #0bc2b5
}

.sideBar__nav {
    padding: 0 2rem
}

.header-main__menu {
    display: none;
    position: absolute;
    top: 40%;
    right: 1rem;
    transform: translateY(-50%);
    z-index: 100
}

.header-main__menu a>i {
    color: #fff;
    font-size: 2.5rem
}

.portfolio-img,.portfolio-img a {
    width: 100%;
    height: 100%
}

.portfolio-img a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top
}

.topBarAddress ul {
    border-bottom: 1px solid #cccccc2b;
    padding: 10px 0;
    width: 100%
}

.topBarAddress ul li {
    margin-left: 50px;
    color: #fff;
    float: right
}

@media screen and (min-width: 320px) and (max-width:600px) {
    .about-img:before {
        display:none
    }

    .navbar {
        padding-top: 29px
    }

    .templates-card.even .templates-card__img {
        transform: none;
        height: 170px
    }

    .about {
        padding-bottom: 0
    }

    .templates-card__img {
        height: auto
    }

    .navbar-brand {
        width: 180px!important;
        padding: 0!important
    }

    .primary-heading h3 {
        font-size: 18px
    }

    .about-section .text-list ul li,.lower-text {
        font-size: 14px
    }

    .header-main__menu {
        top: 45px
    }

    .about-section .about-img img {
        height: 300px!important
    }

    .startBtn {
        display: none
    }

    nav.navbar.navbar-expand-lg .row :is(.col-md-3:not(:has(.navbar-brand)),.col-md-6) {
        display: none
    }

    .topBarAddress ul li {
        float: none;
        font-size: 11px;
        text-align: center
    }

    .about-content__heading {
        font-size: 2rem;
        line-height: 1.25;
        padding-right: 0
    }

    .about-content__subHeading {
        margin-bottom: .5rem;
        line-height: 1.5
    }

    .about-services__single .title {
        font-size: 1.35rem;
        padding-left: 1.75rem
    }

    .about-services__single .counting::after {
        font-size: 1rem
    }

    .about-services__single p {
        font-size: .9rem;
        margin: .75rem 0
    }

    .about-services__single a {
        font-size: .9rem;
        gap: .25rem
    }

    .about-services__single a>i {
        font-size: 1.25rem
    }

    .about-services__single {
        padding: 1.25rem
    }

    .about-services {
        margin: 2rem 0
    }

    .product-paragraph .heading {
        font-size: 2rem
    }

    .ServicesSec p {
        font-size: 16px;
        line-height: 32px
    }

    .latestProject h2 {
        font-size: 35px;
        margin-bottom: 2rem
    }

    .latestProject h2 span::after {
        height: 10px
    }

    .categories {
        padding: 1.5rem 0 .75rem;
        transform: rotate(0) translate(0);
        top: -3rem;
        left: 0
    }

    .categoriesWrapper::after {
        transform: skewY(0)
    }

    .categories-list {
        line-height: 1
    }

    .categories-list__single {
        display: flex!important;
        align-items: center;
        justify-content: center;
        max-width: initial!important
    }

    .categories-list__single>a {
        font-size: .75rem;
        padding: 0 1.15rem
    }

    .categories-list__single:not(:first-child)>a::after {
        left: 0;
        width: 10px;
        height: 10px
    }

    .categories--bottom {
        top: auto!important;
        bottom: -4rem;
        transform: rotate(0) translate(0)
    }

    section.the-agency {
        padding: 4rem 0;
        margin: 6rem 0 0
    }

    .agency-quotes h3 {
        font-size: 30px;
        padding: 14px 0
    }

    .blog-content {
        padding: .5rem 1rem
    }

    .agency-blog {
        margin: 2rem 0;
        padding-inline:1rem}

    .blog-content p {
        font-size: 16px
    }

    .blog-content h4 {
        font-size: 15px;
        padding-top: 10px
    }

    .agency-quotes {
        padding-inline:1rem}

    .agency-quotes .btn-quote {
        margin-top: .75rem
    }

    .ServicesSec {
        padding: 3rem 1rem 0
    }

    .templatesWrapper {
        transform: rotate(0) translateY(0);
        margin: -194px 0 8rem
    }

    .templatesSlider .slick-list.draggable {
        padding: 0
    }

    .column {
        flex-direction: column
    }

    footer {
        padding: 1rem 1rem 0
    }

    .footer-sec {
        padding: 0
    }

    .footer-content h4 {
        margin: 1rem 0;
        padding: 0
    }

    .footer-content p {
        font-size: 16px
    }

    .footer-content.pd-3.clr-3 {
        padding: 0
    }

    .get-it-quote h3 {
        font-size: 24px;
        margin-bottom: 0
    }

    footer .footer-logo {
        margin: 1rem auto
    }

    .copyright-sec {
        text-align: center
    }

    .copyright-sec p {
        margin-bottom: .25rem
    }

    body #headband.headband--home {
        padding: 10rem 0 14rem!important;
        clip-path: polygon(0 0,100% 0,100% 90%,0% 90%);
        min-height: auto
    }

    body #headband .wrapper {
        max-width: 95%
    }

    body #headband .wrapper .texte_headband h2 {
        font-size: 1.6rem;
        line-height: 1.5
    }

    body #headband .wrapper .texte_headband .titre {
        font-size: 20px;
        margin-bottom: 1rem
    }

    .row.main-boxSlider.slick-initialized.slick-slider .slick-track {
        display: flex;
        flex-direction: column
    }

    .row.main-boxSlider.slick-initialized.slick-slider .slick-track .col-12 {
        width: 100%!important
    }

    .brandsBarDiv {
        padding: 0
    }

    .brandsBar {
        margin: 2rem 0;
        padding: 0 1rem;
        display: flex;
        gap: 2rem;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center
    }

    .brandsBarDiv img {
        object-fit: contain;
        width: 100px
    }

    :is(.main-box.main-box1,.main-box.main-box2,.main-box.main-box3,.main-box.main-box4) {
        transform: translate(0)!important
    }

    .main-box {
        margin: 1rem 0
    }

    .main-boxSlider .slick-list.draggable {
        padding-bottom: 3rem
    }

    .latestProject {
        padding: 3rem 1rem
    }

    header .header-main__menu {
        display: block
    }

    footer .btn-quote a {
        display: block;
        margin: 2rem 0
    }

    .sec-title.primary-heading {
        margin: 2rem 0 1rem
    }

    .innerBannerName {
        min-height: 60vh!important;
        padding-top: 0!important
    }

    .teamWrapper {
        margin: 10rem 0
    }

    .teamContentWrapper {
        top: -4rem;
        left: 55%;
        transform: translate(-50%,-50%)
    }

    .team__title {
        font-size: 2.5rem
    }

    .team__title>span {
        display: inline-block
    }

    .imgListWrapper>.scrollNext {
        margin: 2.25rem 0
    }

    .contact-sec {
        padding: 1rem 0;
        background: 0 0
    }

    a.navbar-brand {
        padding: 0
    }

    header.header--inner {
        position: relative;
        background: #152943;
        height: 125px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 1rem
    }
}

@media screen and (min-width: 481px) and (max-width:520px) {
    .startBtn {
        display:none
    }

    nav.navbar.navbar-expand-lg .row :is(.col-md-3:not(:has(.navbar-brand)),.col-md-6) {
        display: none
    }

    .topBarAddress ul li {
        float: none;
        font-size: 11px;
        text-align: center
    }

    .about-content__heading {
        font-size: 2rem;
        line-height: 1.25;
        padding-right: 0
    }

    .about-content__subHeading {
        margin-bottom: .5rem;
        line-height: 1.5
    }

    .about-services__single .title {
        font-size: 1.35rem;
        padding-left: 1.75rem
    }

    .about-services__single .counting::after {
        font-size: 1rem
    }

    .about-services__single p {
        font-size: .9rem;
        margin: .75rem 0
    }

    .about-services__single a {
        font-size: .9rem;
        gap: .25rem
    }

    .about-services__single a>i {
        font-size: 1.25rem
    }

    .about-services__single {
        padding: 1.25rem
    }

    .about-services {
        margin: 2rem 0
    }

    .product-paragraph .heading {
        font-size: 2rem
    }

    .ServicesSec p {
        font-size: 16px;
        line-height: 32px
    }

    .latestProject h2 {
        font-size: 35px;
        margin-bottom: 2rem
    }

    .latestProject h2 span::after {
        height: 10px
    }

    .categories {
        padding: 1.5rem 0 .75rem;
        transform: rotate(0) translate(0);
        top: -3rem;
        left: 0
    }

    .categoriesWrapper::after {
        transform: skewY(0)
    }

    .categories-list {
        line-height: 1
    }

    .categories-list__single {
        display: flex!important;
        align-items: center;
        justify-content: center;
        max-width: initial!important
    }

    .categories-list__single>a {
        font-size: .75rem;
        padding: 0 1.15rem
    }

    .categories-list__single:not(:first-child)>a::after {
        left: 0;
        width: 10px;
        height: 10px
    }

    .categories--bottom {
        top: auto!important;
        bottom: -4rem;
        transform: rotate(0) translate(0)
    }

    section.the-agency {
        padding: 4rem 0;
        margin: 6rem 0 0
    }

    .agency-quotes h3 {
        font-size: 30px;
        padding: 14px 0
    }

    .blog-content {
        padding: .5rem 1rem
    }

    .agency-blog {
        margin: 2rem 0;
        padding-inline:1rem}

    .blog-content p {
        font-size: 16px
    }

    .blog-content h4 {
        font-size: 15px;
        padding-top: 10px
    }

    .agency-quotes {
        padding-inline:1rem}

    .agency-quotes .btn-quote {
        margin-top: .75rem
    }

    .ServicesSec {
        padding: 3rem 1rem 0
    }

    .templatesWrapper {
        transform: rotate(0) translateY(0);
        margin: -194px 0 8rem
    }

    .templatesSlider .slick-list.draggable {
        padding: 0
    }

    .column {
        flex-direction: column
    }

    footer {
        padding: 1rem 1rem 0
    }

    .footer-sec {
        padding: 0
    }

    .footer-content h4 {
        margin: 1rem 0;
        padding: 0
    }

    .footer-content p {
        font-size: 16px
    }

    .footer-content.pd-3.clr-3 {
        padding: 0
    }

    .get-it-quote h3 {
        font-size: 24px;
        margin-bottom: 0
    }

    footer .footer-logo {
        margin: 1rem auto
    }

    .copyright-sec {
        text-align: center
    }

    .copyright-sec p {
        margin-bottom: .25rem
    }

    body #headband.headband--home {
        padding: 10rem 0 14rem!important;
        clip-path: polygon(0 0,100% 0,100% 90%,0% 90%);
        min-height: auto
    }

    body #headband .wrapper {
        max-width: 95%
    }

    body #headband .wrapper .texte_headband h2 {
        font-size: 2rem;
        line-height: 1.5
    }

    body #headband .wrapper .texte_headband .titre {
        font-size: 20px;
        margin-bottom: 1rem
    }

    .row.main-boxSlider.slick-initialized.slick-slider .slick-track {
        display: flex;
        flex-direction: column
    }

    .row.main-boxSlider.slick-initialized.slick-slider .slick-track .col-12 {
        width: 100%!important
    }

    .brandsBarDiv {
        padding: 0
    }

    .brandsBar {
        margin: 2rem 0;
        padding: 0 1rem;
        display: flex;
        gap: 2rem;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center
    }

    .brandsBarDiv img {
        object-fit: contain;
        width: 100px
    }

    :is(.main-box.main-box1,.main-box.main-box2,.main-box.main-box3,.main-box.main-box4) {
        transform: translate(0)!important
    }

    .main-box {
        margin: 1rem 0
    }

    .main-boxSlider .slick-list.draggable {
        padding-bottom: 3rem
    }

    .latestProject {
        padding: 3rem 1rem
    }

    header .header-main__menu {
        display: block
    }

    footer .btn-quote a {
        display: block;
        margin: 2rem 0
    }

    .sec-title.primary-heading {
        margin: 7rem 0 1rem
    }

    .innerBannerName {
        min-height: 60vh!important;
        padding-top: 0!important
    }

    .teamWrapper {
        margin: 10rem 0
    }

    .teamContentWrapper {
        top: -4rem;
        left: 55%;
        transform: translate(-50%,-50%)
    }

    .team__title {
        font-size: 2.5rem
    }

    .team__title>span {
        display: inline-block
    }

    .imgListWrapper>.scrollNext {
        margin: 2.25rem 0
    }

    .contact-sec {
        padding: 1rem 0;
        background: 0 0
    }

    a.navbar-brand {
        padding: 0
    }

    header.header--inner {
        position: relative;
        background: #152943;
        height: 125px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 1rem
    }
}

@media screen and (min-width: 501px) and (max-width:769px) {
    .startBtn {
        display:none
    }

    nav.navbar.navbar-expand-lg .row :is(.col-md-3:not(:has(.navbar-brand)),.col-md-6) {
        display: none
    }

    .topBarAddress ul li {
        float: none;
        font-size: 11px;
        text-align: center
    }

    .about-content__heading {
        font-size: 2rem;
        line-height: 1.25;
        padding-right: 0
    }

    .about-content__subHeading {
        margin-bottom: .5rem;
        line-height: 1.5
    }

    .about-services__single .title {
        font-size: 1.35rem;
        padding-left: 1.75rem
    }

    .about-services__single .counting::after {
        font-size: 1rem
    }

    .about-services__single p {
        font-size: .9rem;
        margin: .75rem 0
    }

    .about-services__single a {
        font-size: .9rem;
        gap: .25rem
    }

    .about-services__single a>i {
        font-size: 1.25rem
    }

    .about-services__single {
        padding: 1.25rem
    }

    .about-services {
        margin: 2rem 0
    }

    .product-paragraph .heading {
        font-size: 2rem
    }

    .ServicesSec p {
        font-size: 16px;
        line-height: 32px
    }

    .latestProject h2 {
        font-size: 35px;
        margin-bottom: 2rem
    }

    .latestProject h2 span::after {
        height: 10px
    }

    .categories {
        padding: 1.5rem 0 .75rem;
        transform: rotate(0) translate(0);
        top: -3rem;
        left: 0
    }

    .categoriesWrapper::after {
        transform: skewY(0)
    }

    .categories-list {
        line-height: 1
    }

    .categories-list__single {
        display: flex!important;
        align-items: center;
        justify-content: center;
        max-width: initial!important
    }

    .categories-list__single>a {
        font-size: .75rem;
        padding: 0 1.15rem
    }

    .categories-list__single:not(:first-child)>a::after {
        left: 0;
        width: 10px;
        height: 10px
    }

    .categories--bottom {
        top: auto!important;
        bottom: -4rem;
        transform: rotate(0) translate(0)
    }

    section.the-agency {
        padding: 4rem 0;
        margin: 6rem 0 0
    }

    .agency-quotes h3 {
        font-size: 30px;
        padding: 14px 0
    }

    .blog-content {
        padding: .5rem 1rem
    }

    .agency-blog {
        margin: 2rem 0;
        padding-inline:1rem}

    .blog-content p {
        font-size: 16px
    }

    .blog-content h4 {
        font-size: 15px;
        padding-top: 10px
    }

    .agency-quotes {
        padding-inline:1rem}

    .agency-quotes .btn-quote {
        margin-top: .75rem
    }

    .ServicesSec {
        padding: 3rem 1rem 0
    }

    .templatesWrapper {
        transform: rotate(0) translateY(0);
        margin: -180px 0 8rem
    }

    .templatesSlider .slick-list.draggable {
        padding: 0
    }

    .column {
        flex-direction: column
    }

    footer {
        padding: 1rem 1rem 0
    }

    .footer-sec {
        padding: 0
    }

    .footer-content h4 {
        margin: 1rem 0;
        padding: 0
    }

    .footer-content p {
        font-size: 16px
    }

    .footer-content.pd-3.clr-3 {
        padding: 0
    }

    .get-it-quote h3 {
        font-size: 24px;
        margin-bottom: 0
    }

    footer .footer-logo {
        margin: 1rem auto
    }

    .copyright-sec {
        text-align: center
    }

    .copyright-sec p {
        margin-bottom: .25rem
    }

    body #headband.headband--home {
        padding: 10rem 0 14rem!important;
        min-height: auto;
        clip-path: polygon(0 0,100% 0,100% 90%,0% 90%)
    }

    body #headband .wrapper {
        max-width: 95%
    }

    body #headband .wrapper .texte_headband h2 {
        font-size: 2rem;
        line-height: 1.5
    }

    body #headband .wrapper .texte_headband .titre {
        font-size: 20px;
        margin-bottom: 1rem
    }

    .row.main-boxSlider.slick-initialized.slick-slider .slick-track {
        display: flex;
        flex-direction: column
    }

    .row.main-boxSlider.slick-initialized.slick-slider .slick-track .col-12 {
        width: 100%!important
    }

    .brandsBarDiv {
        padding: 0
    }

    .brandsBar {
        margin: 2rem 0;
        padding: 0 1rem;
        display: flex;
        gap: 2rem;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center
    }

    .brandsBarDiv img {
        object-fit: contain;
        width: 100px
    }

    :is(.main-box.main-box1,.main-box.main-box2,.main-box.main-box3,.main-box.main-box4) {
        transform: translate(0)!important
    }

    .main-box {
        margin: 1rem 0
    }

    .main-boxSlider .slick-list.draggable {
        padding-bottom: 3rem
    }

    .latestProject {
        padding: 3rem 1rem
    }

    header .header-main__menu {
        display: block
    }

    footer .btn-quote a {
        display: block;
        margin: 2rem 0
    }

    .sec-title.primary-heading {
        margin: 7rem 0 1rem
    }

    .innerBannerName {
        min-height: 60vh!important;
        padding-top: 0!important
    }

    .teamWrapper {
        margin: 10rem 0
    }

    .teamContentWrapper {
        top: -4rem;
        left: 55%;
        transform: translate(-50%,-50%)
    }

    .team__title {
        font-size: 2.5rem
    }

    .team__title>span {
        display: inline-block
    }

    .imgListWrapper>.scrollNext {
        margin: 2.25rem 0
    }

    .contact-sec {
        padding: 1rem 0;
        background: 0 0
    }

    a.navbar-brand {
        padding: 0
    }

    header.header--inner {
        position: relative;
        background: #152943;
        height: 125px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 1rem
    }
}

@media screen and (min-width: 770px) and (max-width:1024px) {
    .startBtn {
        display:none
    }

    nav.navbar.navbar-expand-lg .row :is(.col-md-3:not(:has(.navbar-brand)),.col-md-6) {
        display: none
    }

    .about-content__heading {
        font-size: 2rem;
        line-height: 1.25;
        padding-right: 0
    }

    .about-content__subHeading {
        margin-bottom: .5rem;
        line-height: 1.5
    }

    .about-services__single .title {
        font-size: 1.35rem;
        padding-left: 1.75rem
    }

    .about-services__single .counting::after {
        font-size: 1rem
    }

    .about-services__single p {
        font-size: .9rem;
        margin: .75rem 0
    }

    .about-services__single a {
        font-size: .9rem;
        gap: .25rem
    }

    .about-services__single a>i {
        font-size: 1.25rem
    }

    .about-services__single {
        padding: 1.25rem
    }

    .about-services {
        margin: 2rem 0
    }

    .product-paragraph .heading {
        font-size: 2rem
    }

    .ServicesSec p {
        font-size: 16px;
        line-height: 32px
    }

    .latestProject h2 {
        font-size: 35px;
        margin-bottom: 2rem
    }

    .latestProject h2 span::after {
        height: 10px
    }

    .categories {
        padding: 1.5rem 0 .75rem;
        transform: rotate(0) translate(0);
        top: -3rem;
        left: 0
    }

    .categoriesWrapper::after {
        transform: skewY(0)
    }

    .categories-list {
        line-height: 1
    }

    .categories-list__single {
        display: flex!important;
        align-items: center;
        justify-content: center;
        max-width: initial!important
    }

    .categories-list__single>a {
        font-size: .75rem;
        padding: 0 1.15rem
    }

    .categories-list__single:not(:first-child)>a::after {
        left: 0;
        width: 10px;
        height: 10px
    }

    .categories--bottom {
        top: auto!important;
        bottom: -4rem;
        transform: rotate(0) translate(0)
    }

    section.the-agency {
        padding: 4rem 0;
        margin: 6rem 0 0
    }

    .agency-quotes h3 {
        font-size: 30px;
        padding: 14px 0
    }

    .blog-content {
        padding: .5rem 1rem
    }

    .agency-blog {
        margin: 2rem 0;
        padding-inline:1rem}

    .blog-content p {
        font-size: 16px
    }

    .blog-content h4 {
        font-size: 15px;
        padding-top: 10px
    }

    .agency-quotes {
        padding-inline:1rem}

    .agency-quotes .btn-quote {
        margin-top: .75rem
    }

    .ServicesSec {
        padding: 3rem 1rem 0
    }

    .templatesWrapper {
        transform: rotate(0) translateY(0);
        margin: 0 0 8rem
    }

    .templatesSlider .slick-list.draggable {
        padding: 0
    }

    .column {
        flex-direction: column
    }

    footer {
        padding: 1rem 1rem 0
    }

    .footer-sec {
        padding: 0
    }

    .footer-content h4 {
        margin: 1rem 0;
        padding: 0
    }

    .footer-content p {
        font-size: 16px
    }

    .footer-content.pd-3.clr-3 {
        padding: 0
    }

    .get-it-quote h3 {
        font-size: 24px;
        margin-bottom: 0
    }

    footer .footer-logo {
        margin: 1rem auto
    }

    .copyright-sec {
        text-align: center
    }

    .copyright-sec p {
        margin-bottom: .25rem
    }

    body #headband.headband--home {
        padding-top: 10rem!important;
        min-height: 80vh;
        clip-path: polygon(0 0,100% 0,100% 90%,0% 90%)
    }

    body #headband .wrapper {
        max-width: 95%
    }

    body #headband .wrapper .texte_headband h2 {
        font-size: 2rem;
        line-height: 1.5
    }

    body #headband .wrapper .texte_headband .titre {
        font-size: 20px;
        margin-bottom: 1rem
    }

    .row.main-boxSlider.slick-initialized.slick-slider .slick-track {
        display: flex;
        flex-direction: column
    }

    .row.main-boxSlider.slick-initialized.slick-slider .slick-track .col-12 {
        width: 100%!important
    }

    .brandsBarDiv {
        padding: 0
    }

    .brandsBar {
        margin: 2rem 0;
        padding: 0 1rem;
        display: flex;
        gap: 2rem;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center
    }

    .brandsBarDiv img {
        object-fit: contain;
        width: 100px
    }

    :is(.main-box.main-box1,.main-box.main-box2,.main-box.main-box3,.main-box.main-box4) {
        transform: translate(0)!important
    }

    .main-box {
        margin: 1rem 0
    }

    .main-boxSlider .slick-list.draggable {
        padding-bottom: 3rem
    }

    .latestProject {
        padding: 3rem 1rem
    }

    header .header-main__menu {
        display: block
    }

    footer .btn-quote a {
        display: block;
        margin: 2rem 0
    }

    .sec-title.primary-heading {
        margin: 7rem 0 1rem
    }

    .innerBannerName {
        min-height: 60vh!important;
        padding-top: 0!important
    }

    .teamWrapper {
        margin: 10rem 0
    }

    .teamContentWrapper {
        top: -4rem;
        left: 55%;
        transform: translate(-50%,-50%)
    }

    .team__title {
        font-size: 2.5rem
    }

    .team__title>span {
        display: inline-block
    }

    .imgListWrapper>.scrollNext {
        margin: 2.25rem 0
    }

    .contact-sec {
        padding: 1rem 0;
        background: 0 0
    }

    a.navbar-brand {
        padding: 0
    }

    header.header--inner {
        position: relative;
        background: #152943;
        height: 125px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 1rem
    }
}

@media screen and (min-width: 900px) and (max-width:1000px) {
    body #headband.headband--home {
        min-height:145vh;
        padding-top: 12rem!important
    }

    .categories--bottom {
        bottom: -5rem
    }

    .templatesWrapper {
        bottom: 5rem
    }

    footer .btn-quote a {
        display: block;
        margin: 2rem 0
    }

    .sec-title.primary-heading {
        margin: 7rem 0 1rem
    }

    .innerBannerName {
        min-height: 60vh!important;
        padding-top: 0!important
    }

    .teamWrapper {
        margin: 10rem 0
    }

    .teamContentWrapper {
        top: -4rem;
        left: 55%;
        transform: translate(-50%,-50%)
    }

    .team__title {
        font-size: 2.5rem
    }

    .team__title>span {
        display: inline-block
    }

    .imgListWrapper>.scrollNext {
        margin: 2.25rem 0
    }

    .contact-sec {
        padding: 1rem 0;
        background: 0 0
    }

    a.navbar-brand {
        padding: 0
    }

    header.header--inner {
        position: relative;
        background: #152943;
        height: 125px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 1rem
    }
}

@media screen and (min-width: 1000px) and (max-width:1300px) {
    body #headband.headband--home {
        min-height:145vh;
        padding-top: 12rem!important
    }

    .categories--bottom {
        bottom: -5rem
    }

    .templatesWrapper {
        bottom: 5rem
    }

    footer .btn-quote a {
        display: block;
        margin: 2rem 0
    }

    .sec-title.primary-heading {
        margin: 7rem 0 1rem
    }

    .innerBannerName {
        min-height: 60vh!important;
        padding-top: 0!important
    }

    .teamWrapper {
        margin: 10rem 0
    }

    .teamContentWrapper {
        top: -4rem;
        left: 55%;
        transform: translate(-50%,-50%)
    }

    .team__title {
        font-size: 2.5rem
    }

    .team__title>span {
        display: inline-block
    }

    .imgListWrapper>.scrollNext {
        margin: 2.25rem 0
    }

    .contact-sec {
        padding: 1rem 0;
        background: 0 0
    }

    a.navbar-brand {
        padding: 0
    }

    header.header--inner {
        position: relative;
        background: #152943;
        height: 125px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 1rem
    }
}

@media screen and (min-width: 1301px) and (max-width:1400px) {
    body #headband.headband--home {
        min-height:120vh;
        padding-top: 12rem!important
    }

    .categories--bottom {
        bottom: -5rem
    }

    .templatesWrapper {
        bottom: -1rem
    }

    footer .btn-quote a {
        display: block;
        margin: 2rem 0
    }

    .sec-title.primary-heading {
        margin: 7rem 0 1rem
    }

    .innerBannerName {
        min-height: 60vh!important;
        padding-top: 0!important
    }

    .teamWrapper {
        margin: 10rem 0
    }

    .teamContentWrapper {
        top: -4rem;
        left: 55%;
        transform: translate(-50%,-50%)
    }

    .team__title {
        font-size: 2.5rem
    }

    .team__title>span {
        display: inline-block
    }

    .imgListWrapper>.scrollNext {
        margin: 2.25rem 0
    }

    .contact-sec {
        padding: 1rem 0;
        background: 0 0
    }

    a.navbar-brand {
        padding: 0
    }

    header.header--inner {
        position: relative;
        background: #152943;
        height: 125px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 1rem
    }
}

@media screen and (min-width: 1401px) and (max-width:1700px) {
    body #headband.headband--home {
        min-height:130vh;
        padding-top: 14rem!important
    }

    .categories--bottom {
        bottom: -5rem
    }

    .templatesWrapper {
        bottom: -1rem
    }

    .categories-list__single {
        display: flex!important;
        justify-content: center;
        align-items: center
    }

    .categories-list__single>a {
        font-size: .9rem;
        padding: 0 2rem
    }

    html {
        overflow-x: hidden
    }

    footer .btn-quote a {
        display: block;
        margin: 2rem 0
    }

    .sec-title.primary-heading {
        margin: 7rem 0 1rem
    }

    .innerBannerName {
        min-height: 65vh!important;
        padding-top: 100px!important
    }

    .teamWrapper {
        margin: 10rem 0
    }

    .teamContentWrapper {
        top: -4rem;
        left: 55%;
        transform: translate(-50%,-50%)
    }

    .team__title {
        font-size: 2.5rem
    }

    .team__title>span {
        display: inline-block
    }

    .imgListWrapper>.scrollNext {
        margin: 2.25rem 0
    }

    .contact-sec {
        padding: 1rem 0;
        background: 0 0
    }

    a.navbar-brand {
        padding: 0
    }

    header.header--inner {
        position: relative;
        background: #152943;
        height: 125px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 1rem
    }
}

.main-boxSlider .col-lg-3:nth-child(odd) .main-box {
    transform: translatey(60px)
}

.brandsBarDiv:nth-child(5) img {
    scale: 1.4;
    transform: translatey(-4px)
}

.latestBox img {
    width: 100%;
    height: 320px;
    border-radius: 40px 0
}

.join--alt {
    background: linear-gradient(to right bottom,rgb(208 11 63),rgb(245 54 104),rgb(223 67 108),rgb(223 22 22),rgb(208 11 63))
}

.book-work-intro {
    display: none
}

.mainHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%
}

.headNav {
    width: 55%
}

@media screen and (max-width: 991px) {
    .HeadBtn,.headNav {
        display:none
    }

    header .header-main__menu {
        display: block
    }

    header .navbar-toggler {
        display: none
    }
}

.about-services__single .title i {
    position: absolute;
    right: 0
}

.sideBarBackdrop {
    position: fixed;
    inset: 0;
    z-index: 998;
    display: block;
    padding: 0;
    border: 0;
    background: rgba(6,21,40,.72);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s,visibility .25s
}

.sideBar {
    width: min(340px,88vw);
    z-index: 999;
    overscroll-behavior: contain;
    scrollbar-width: thin
}

.sideBar__close {
    width: 42px;
    height: 42px;
    border: 0;
    line-height: 1
}

.sideBar__nav>li :is(a,button) {
    font-size: .9rem;
    font-weight: 500;
    padding: .5rem 0;
    display: block;
    background: 0 0;
    color: #335883;
    min-height: 44px;
    display: flex;
    align-items: center
}

.side-bar-open {
    overflow: hidden
}

.side-bar-open .sideBarBackdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

.header-main__menu button {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 10px;
    color: #fff;
    background: rgba(8,35,65,.92);
    box-shadow: 0 6px 18px rgba(6,21,40,.28)
}

.header-main__menu button>i {
    color: inherit;
    font-size: 1.75rem
}

.mainHeader>*,.row>[class*=col-] {
    min-width: 0
}

canvas,img,svg,video {
    max-width: 100%
}

@media screen and (max-width: 1179px) {
    .HeadBtn,.headNav {
        display:none!important
    }

    header .header-main__menu {
        top: 50%;
        right: clamp(15px,3vw,32px);
        display: block
    }

    header .navbar-toggler {
        display: none
    }

    header .container {
        width: 100%;
        max-width: none;
        padding-right: clamp(15px,3vw,32px);
        padding-left: clamp(15px,3vw,32px)
    }

    header .navbar {
        padding-right: 0;
        padding-left: 0
    }

    a.navbar-brand {
        width: clamp(180px,36vw,280px)!important;
        margin-right: 0
    }

    body #headband.innerBannerName {
        min-height: max(360px,60svh)!important
    }

    body #headband .wrapper {
        width: calc(100% - 32px);
        max-width: 720px
    }

    body #headband .wrapper .texte_headband {
        width: 100%;
        display: block
    }

    body #headband .wrapper .texte_headband .titre,body #headband .wrapper .texte_headband h2 {
        width: 100%;
        max-width: 100%;
        overflow-wrap: anywhere
    }
}

@media screen and (max-width: 767px) {
    header {
        top:31px
    }

    a.navbar-brand {
        width: clamp(165px,54vw,220px)!important
    }

    body #headband .wrapper .texte_headband .titre {
        font-size: clamp(16px, 5.25vw, 20px)
    }

    body #headband .wrapper .texte_headband h2 {
        padding-inline:4px;font-size: clamp(24px, 8vw, 32px);
        line-height: 1.25;
        letter-spacing: -.04em
    }

    .container,.container-fluid {
        padding-right: max(15px,env(safe-area-inset-right));
        padding-left: max(15px,env(safe-area-inset-left))
    }

    :is(input,select,textarea,button) {
        max-width: 100%
    }

    footer .row {
        row-gap: 12px
    }
}

@media screen and (min-width: 768px) and (max-width:1107px) {
    body #headband.headband--home.headband--event {
        min-height:620px
    }
}

@media screen and (max-width: 319px) {
    .frankfurt-marquee {
        font-size:10px
    }

    .event-hero__content {
        width: calc(100% - 24px);
        margin-right: 12px;
        margin-left: 12px
    }

    .event-hero__title {
        font-size: clamp(48px, 18.5vw, 58px)
    }

    .event-hero__copy {
        font-size: 14px
    }

    .event-hero__detail {
        font-size: 13px
    }
}

@media (hover: none),(pointer:coarse) {
    .book-work-card:hover,.book-writing-card:hover,.book-writing-portfolio-card:hover {
        transform:none
    }
}

.main-boxSlider,.main-boxSlider .slick-list {
    padding-bottom: 60px
}

@media screen and (max-width: 479px) {
    .latestProject .WorkList .latestBox {
        margin-right:8px;
        margin-left: 8px
    }

    .latestProject .latestBox img {
        height: 240px;
        object-fit: cover
    }

    .latestProject .latestBox h5 {
        padding: 14px 0 10px;
        font-size: 16px
    }

    .latestProject .latestBox h3 {
        font-size: 15px;
        line-height: 1.55
    }
}