html {
    scroll-behavior: smooth;
    height: 100%
}

body {
    font-family: Dosis, sans-serif;
    font-size: 1.1rem
}

.header {
    width: 100vw;
    max-width: 100%;
    height: calc(100% - 81px);
    min-height: calc(100vh - 81px);
    background-color: #0e0e13;
    position: relative
}

.header::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: calc(100vh - 81px);
    position: absolute;
    background-image: url(/images/office-min.jpg);
    background-size: cover;
    animation: headerImageAnim 6s infinite;
    -webkit-animation: headerImageAnim 6s infinite
}

.header_web::before {
    background-image: none!important
}

.header_contact::before {
    background-image: url(/images/phone.jpg);
    background-size: cover;
    background-position-y: center
}

.header_web {
    overflow: hidden
}

#web_header_video {
    position: absolute;
    vertical-align: middle;
    bottom: 0;
    width: 100%;
    height: auto;
    max-width: 1920px;
    left: 0;
    right: 0;
    margin: auto;
    filter: opacity(.5) blur(2px)
}

#video_header_video {
    position: absolute;
    vertical-align: top;
    bottom: 0;
    width: 100%;
    height: auto;
    max-width: 1920px;
    left: 0;
    right: 0;
    margin: auto;
    filter: opacity(.2) blur(1px)
}

#coffee_video {
    position: absolute;
    bottom: 0;
    left: 0;
    max-height: 70%;
    max-width: 80%;
    width: auto;
    filter: opacity(.5) blur(1px)
}

.header_info h1 {
    font-size: 1.25rem
}

.bg-transparent {
    background-color: rgba(255, 255, 255, 0)
}

.relative {
    position: relative
}

.font-s {
    font-size: .9rem
}

.content_header,
.content_header::before {
    height: 400px;
    min-height: 400px
}

#myVideo {
    width: 100%
}

.header_content {
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
    color: #f1f1f1;
    width: 100%;
    padding: 20px
}

.header_info {
    background: rgba(0, 0, 0, .5);
    color: #f1f1f1;
    width: 100%;
    padding: 20px
}

.headerBtn {
    width: 200px;
    font-size: 18px;
    padding: 10px;
    border: 1px solid #fff;
    background: #000;
    color: #fff;
    cursor: pointer
}

.headerBtn:hover {
    background: #ddd;
    color: #000
}

.navbar {
    background-color: #000!important;
    background-image: url(/images/pattern1.png);
    background-size: unset;
    background-repeat: repeat
}

.navbar-brand img {
    width: 55px
}

.bg-dark {
    background-color: #141618!important
}

.content {
    margin-top: 81px
}

.anchor {
    display: block;
    position: relative;
    top: -81px;
    visibility: hidden
}

.card_button_container {
    max-width: 300px;
    cursor: pointer
}

.card_button_container:hover {
    opacity: .8
}

.card_button_container:hover .fa-mug-hot {
    animation: shake .82s cubic-bezier(.36, .07, .19, .97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px
}

.border-right-radius-10 {
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px
}

.border-left-radius-10 {
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px
}

.nav-item.active {
    border-top: 1px solid gray;
    border-bottom: 1px solid gray
}

.nav-item i {
    color: #fff
}

.face-side-bg {
    min-height: 600px;
    background-image: url(/images/face-min.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain
}

.divider {
    width: 100%;
    height: 60px;
    display: block;
    background-color: #141618;
    background-image: url(/images/pattern1.png);
    background-size: unset;
    background-repeat: repeat
}

.footer {
    width: 100%;
    min-height: 120px;
    display: block;
    background-color: #141618;
    background-image: url(/images/pattern1.png);
    background-size: unset;
    background-repeat: repeat
}

.footer ul li {
    list-style: none
}

.bg-white-trans {
    background-color: rgba(255, 255, 255, .75)
}

.bg-dark-stripes {
    background-color: #070708;
    background-image: url(/images/pattern1.png);
    background-size: unset;
    background-repeat: repeat
}

.icon-logo {
    width: 17px;
    margin-top: -5px
}

#map {
    height: 200px
}

.some-icons {
    font-size: 20px
}

a.dark {
    color: #d3d3d3
}

a.dark:hover {
    text-decoration: none;
    color: gray
}

a.basic_link {
    color: #4d4d4d
}

a.basic_link:hover {
    color: #131313;
    text-decoration: underline
}

.color-messenger {
    color: #0084ff
}

.color-facebook {
    color: #3b5998
}

.color-skype {
    color: #00aff0
}

.color-instagram {
    color: #3f729b
}

.color-whatsapp {
    color: #43d854
}

.color-youtube {
    color: #cd201f
}

.swiper-container {
    width: 100%;
    height: 300px
}

.swiper-wrapper {
    transition-timing-function: linear
}

.swiper-slide {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center
}

.left-fader {
    position: absolute;
    height: 100%;
    width: 150px;
    z-index: 100;
    background: #fff;
    background: linear-gradient(90deg, #fff 0, rgba(255, 255, 255, 0) 100%)
}

.right-fader {
    position: absolute;
    height: 100%;
    right: 0;
    top: 0;
    width: 150px;
    z-index: 100;
    background: #fff;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, #fff 100%)
}

.website_ref,
.youtube_ref {
    cursor: pointer;
    transition: all .2s ease-in-out
}

.website_ref:hover,
.youtube_ref:hover {
    transform: scale(1.05)
}

.youtube_ref .card-footer {
    min-height: 75px
}

.website_ref .card {
    border: 0
}

.website_ref .card-footer {
    min-height: 30px
}

.website_ref .card-body {
    height: 208px
}

@keyframes shake {
    10%,
    90% {
        transform: translate3d(0, -1px, 0)
    }
    20%,
    80% {
        transform: translate3d(0, 2px, 0)
    }
    30%,
    50%,
    70% {
        transform: translate3d(0, -4px, 0)
    }
    40%,
    60% {
        transform: translate3d(0, 4px, 0)
    }
}

@keyframes headerImageAnim {
    0%,
    100% {
        -webkit-filter: grayscale(1)
    }
    50% {
        -webkit-filter: grayscale(0)
    }
}

@media only screen and (max-width:800px) {
    .header .row:not(.plain) {
        margin-top: 30px!important
    }
    .header .row .col-12:not(.plain) {
        padding-top: 10px!important;
        padding-bottom: 10px!important
    }
    .header .row .col-12 div:not(.plain) {
        padding-top: 10px!important;
        padding-bottom: 10px!important
    }
    .card_button_container {
        max-width: 100%
    }
    .header::before {
        background-image: url(/images/pattern1.png);
        background-size: unset;
        background-repeat: repeat
    }
    .header_contact::before {
        background-image: url(/images/phone.jpg);
        background-size: cover;
        background-position-y: center
    }
}

.show-on-mobile-landscape,
.show-on-mobile-portrait {
    display: none
}

@media (orientation:landscape) and (max-width:800px) {
    .hide-on-mobile-landscape {
        display: none
    }
    .show-on-mobile-landscape {
        display: block
    }
    .header,
    .header::before {
        min-height: 300px
    }
    .content_header,
    .content_header::before {
        height: 300px;
        min-height: 300px
    }
}

@media (orientation:portrait) and (max-width:800px) {
    .hide-on-mobile-portrait {
        display: none
    }
    .show-on-mobile-portrait {
        display: block
    }
    .face-side-bg {
        min-height: 600px;
        background-image: url(/images/face.png);
        background-repeat: no-repeat;
        background-position: right bottom;
        background-position-x: 75px;
        background-size: contain
    }
    .header,
    .header::before {
        min-height: 600px
    }
    .content_header,
    .content_header::before {
        height: 300px;
        min-height: 300px
    }
    #video_header_video,
    #web_header_video {
        height: 100%;
        width: auto
    }
}