body {
    /*background: url("../img/background.jpg") no-repeat fixed center center / 100% auto rgba(0, 0, 0, 0);*/
    background-color: black;
    max-width: 120rem;
    margin: 0 auto;
}
html{
    /*scroll-behavior: smooth;*/
}
nav {
    max-width: 120rem;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    /*position: absolute;*/
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 500;
}

.top-nav ul {
    padding: 0;
}

.logo {
    margin: 0;
    text-align: center;
    width: 100%;
}

.logo.logo-small {
    display: none;
}

.top-nav li a {
    font-size: 0.9rem;
    text-transform: uppercase;
    /*padding-top: 2.14rem;*/
    /*padding-bottom: 2.14rem;*/
}

.top-nav .logo a, .top-nav .logo.active-item a {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1rem;
}

.top-nav .logo a strong {
    font-weight: 800;
    line-height: 1.5;
}

nav {
    /*background: #000000;*/
    /*opacity: 0.5;*/
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.75);
    /*border: #2fcbe0 solid 1px;*/
}

.top-nav {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.top-nav .s-12.l-5 {
    /*background: none repeat scroll 0 0 rgba(0, 0, 0, 0.50);*/
}

.top-nav li a:hover, .top-nav li.active-item a, .top-nav .logo.active-item a:hover {
    /*font-weight: bolder;*/
    /*rgba(227, 27, 41, 1)*/
    background: none repeat scroll 0 0 rgba(227, 27, 41, 1);
}

.top-nav li.logo a, .top-nav li.logo.active-item a, .top-nav .logo {
    background: none repeat scroll 0 0 rgba(227, 27, 41, 1);
    /*background: none repeat scroll 0 0 #2fcbe0;*/
    /*background: none repeat scroll 0 0 rgba(0, 0, 0, 0.50);*/
}

nav ul li ul li {
    text-align: left;
}

.top-nav ul ul {
    background: none repeat scroll 0 0 rgb(0, 30, 34);
}

.top-nav li ul li a {
    background: none repeat scroll 0 0 rgb(0, 30, 34);
}

#fourth-block h2 {
    color: #fff;
}

#fourth-block p {
    color: #fff;
}

#first-block, #second-block, #third-block, #fourth-block {
    text-align: center;
    padding: 4.5rem 0;
}

#third-block .l-3 img {
    display: inline-block;
    /*float: none;*/
    /*margin: 0 auto;*/
}

#carousel {
    background: #000;
}

#first-block {
    padding: 0.3rem 0;
    background: #fff;
}

#second-block {
    background: url("../img/bmk_back_banner.jpg") no-repeat center center rgba(0, 0, 0, 0.8);
    background-size: cover;
    background-blend-mode: multiply;
    padding-bottom: 3.6rem;
}

#third-block {
    background: #000;
}

#fourth-block {
    background: rgb(0, 30, 34);
}

footer {
    background: none repeat scroll 0 0 #2fcbe0;
    padding: 1.5em 0;
}

footer p, footer a:link, footer a:visited, footer a:hover {
    color: #fff;
}

.carousel-text {
    display: block;
    position: absolute;
    top: 25%;
    width: 100%;
    z-index: 999;
}

.carousel-text h2 {
    background: none repeat scroll 0 0 #fff;
    color: rgb(0, 30, 34);
    display: inline-block;
    padding: 0.3125rem 0.625rem;
}

.carousel-text p {
    background: none repeat scroll 0 0 rgba(0, 30, 34, 0.85);
    color: #fff;
    display: inline-block;
    font-size: 1.2rem;
    padding: 0.625rem 0.8rem;
}

#first-block i {
    background: none repeat scroll 0 0 #2fcbe0;
    border-radius: 100px;
    color: #fff;
    display: block;
    line-height: 100px;
    margin: 0 auto;
    width: 100px;
}


p.subtitile {
    font-size: 1.6em;
    color: #FFFFFF;
    text-transform: uppercase;
    font-weight: 300;
    line-height: 1.2em;
    margin-bottom: 1.0em;
    /*background-color: #E61A2B;*/
    /*transform: scale(1.0, 0.7);*/
}

section p {
    font-size: 1.2rem;
}

section h1 {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 600;
    text-transform: uppercase;
}

section h2 {
    font-size: 2.5rem;
    font-weight: 300;
    margin: 0;
    text-transform: uppercase;
}

section h3 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    font-style: italic;
    text-transform: none;
}

section h3 {
    font-size: 1.3rem;
    font-weight: 300;
    margin: 0.8rem 0;
    text-transform: uppercase;
}

@media screen and (max-width: 768px) {
    p.subtitile {
        font-size: 1.4em;
        color: #FFFFFF;
        text-transform: uppercase;
        font-weight: 300;
        line-height: 1.2em;
        margin-bottom: 1.0em;
    }

    section p {
        font-size: 1.2rem;
    }

    section h1 {
        color: #fff;
        font-size: 2.0rem;
        font-weight: 600;
        text-transform: uppercase;
    }

    section h2 {
        font-size: 2.0rem;
        font-weight: 300;
        margin: 0;
        text-transform: uppercase;
    }

    section h3 {
        color: #fff;
        font-size: 1.0rem;
        font-weight: 600;
        font-style: italic;
        text-transform: none;
    }

    section h3 {
        font-size: 1.0rem;
        font-weight: 300;
        margin: 0.8rem 0;
        text-transform: uppercase;
    }

}

@media screen and (max-width: 480px) {
    /*p.subtitile {*/
    /*    font-size: 1.2em;*/
    /*    color: #FFFFFF;*/
    /*    text-transform: uppercase;*/
    /*    font-weight: 300;*/
    /*    line-height: 1.2em;*/
    /*    margin-bottom: 1.0em;*/
    /*}*/
    section p {
        font-size: 1rem;
    }
    /*section h1 {*/
    /*    color: #fff;*/
    /*    font-size: 1.5rem;*/
    /*    font-weight: 600;*/
    /*    text-transform: uppercase;*/
    /*}*/
    /*section h2 {*/
    /*    font-size: 1.5rem;*/
    /*    font-weight: 300;*/
    /*    margin: 0;*/
    /*    text-transform: uppercase;*/
    /*}*/
    /*section h3 {*/
    /*    color: #fff;*/
    /*    font-size: .8rem;*/
    /*    font-weight: 600;*/
    /*    font-style: italic;*/
    /*    text-transform: none;*/
    /*}*/
    /*section h3 {*/
    /*    font-size: .8rem;*/
    /*    font-weight: 300;*/
    /*    margin: 0.8rem 0;*/
    /*    text-transform: uppercase;*/
    /*}*/
}

#second-block p {
    color: #fff;
}
#about_head {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7)), url("../img/BMK_About_TopMain.jpg") no-repeat center center;
}

#adapt_head {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../img/Brands_light.jpg") no-repeat center center;
}

#photo_head {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../img/BMK_Photography_Shoot.jpg") no-repeat center center;
}

#color_head {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../img/Color_Image_A.jpg") no-repeat center center;
}

#print_head {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../img/BMK_Printing_rools.jpg") no-repeat center center;
}

#display_head {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../img/BMK_Display_main.jpg") no-repeat center center;
}

#display_addition {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../img/BMK_Additional_Main.jpg") no-repeat center center;
}

#sus_head {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../img/bmk_home_Sustainability.jpg") no-repeat center center;
}

#about_head, #adapt_head, #photo_head, #color_head, #print_head, #display_head, #display_addition, #sus_head{
    background-size: cover;
    padding: 9em 0 2em;
    text-align: center;
}
@media screen and (max-width: 1366px) {
    #about_head, #adapt_head, #photo_head, #color_head, #print_head, #display_head, #display_addition, #sus_head{
        padding: 7em 0 2em;
    }
}
@media screen and (max-width: 768px) {
    #about_head, #adapt_head, #photo_head, #color_head, #print_head, #display_head, #display_addition, #sus_head{
        padding: 2em 0 2em;
    }
}

.about_p {
    padding-bottom: 1rem;
}

#head {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.0);
    padding: 9rem 0 5rem;
    text-align: center;
}

.content {
    background: none repeat scroll 0 0 #000;
    padding: 5rem 0;
    text-align: center;
    /*border-bottom: 1px solid #f0f0f0;*/
}

.content h2 {
    font-size: 1.5rem;
    font-weight: 400;
    margin: 1rem 0 0.3rem;
    text-transform: none;
}

#content {
    background: none repeat scroll 0 0 #fff;
    padding: 5rem 0;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
}

#content h2 {
    font-size: 1.5rem;
    font-weight: 400;
    margin: 1rem 0 0.3rem;
    text-transform: none;
}

#content_bottom {
    background: url("../img/BMK_about_Contact.jpg") no-repeat center center rgba(0, 0, 0, 0.0);
    background-size: cover;
    /*background: none repeat scroll 0 0 #fff;*/
    padding: 5rem 0;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
}

#content_bottom h2 {
    font-size: 1.5rem;
    font-weight: 400;
    margin: 1rem 0 0.3rem;
    text-transform: none;
}


.content-block {
    background: none repeat scroll 0 0 rgb(0, 30, 34);
    padding: 2.5rem;
}

.content-block h3 {
    color: #fff;
}

.content-block p {
    color: #fff;
}

#content.left-align {
    text-align: left;
}

#content.contact-page h2 {
    margin: 0 0 0.625rem;
}

.contact-page p {
    font-size: 1rem;
    font-style: normal;
}

.contact-page i {
    background: none repeat scroll 0 0 rgb(0, 30, 34);
    border-radius: 100px;
    display: inline-block;
    height: 35px;
    line-height: 35px;
    margin: 0.3125rem 0.3125rem 0.3125rem 0;
    text-align: center;
    width: 35px;
}

form.customform button {
    background: none repeat scroll 0 0 rgb(0, 30, 34);
    border-radius: 5px;
    transition: background 0.20s linear 0s;
    -o-transition: background 0.20s linear 0s;
    -ms-transition: background 0.20s linear 0s;
    -moz-transition: background 0.20s linear 0s;
    -webkit-transition: background 0.20s linear 0s;
}

form.customform button:hover {
    background: none repeat scroll 0 0 #2fcbe0;
}

form.customform input, form.customform select, form.customform textarea {
    border-radius: 5px;
}

#map-block iframe {
    display: block;
}

ul.top-ul {
    display: flex;
    align-items: center;
}

ul.top-ul.right {
    display: flex;
    align-items: center;
}

ul.top-ul a {
    text-align: center;
}

.show-uul {
    display: block;
    height: auto;
}

.back-to-top {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 20px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: 1px solid #333333; /* Remove borders */
    outline: none; /* Remove outline */
    opacity: 0.8;
    background-color: white; /* Set a background color */
    color: black; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 5px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
}

@media screen and (max-width: 1366px) {
    ul.top-ul {
        display: flex;
        align-items: center;
    }

    ul.top-ul.right {
        display: flex;
        align-items: center;
    }

    /*.top-nav {*/
    /*    display: inherit;*/
    /*}*/
    /*.top-nav li a {*/
    /*    padding-top: 1.27rem;*/
    /*    padding-bottom: 1.27rem;*/
    /*}*/

}

@media screen and (max-width: 768px) {
    body {
        background: none repeat scroll 0 0 rgb(0, 30, 34);
        padding-top: 60px;
    }

    .top-nav {
        display: inherit;
    }

    /*.top-nav li a {*/
    /*    padding-top: 1.25rem;*/
    /*    padding-bottom: 1.25rem;*/
    /*}*/
    nav {
        padding: 10px 0;
        height: 60px;
        line-height: 2;
    }

    .logo {
        height: 60px;
    }

    .logo img {
        max-width: 172px;
        max-height: 40px;
        margin: 0 auto;
        width: auto;
    }

    .logo.logo-small {
        display: block;
    }

    .top-nav {
        text-align: left;
    }

    .logo a, .logo.active-item a {
        font-size: 1.2rem;
        color: #fff !important;
    }

    .logo a br {
        display: none;
    }

    .carousel-text h2 {
        font-size: 1.3rem;
    }

    .carousel-text p {
        font-size: 1rem;
    }

    ul.top-ul {
        display: inherit;
        padding: 0;
    }

    ul.top-ul.right {
        display: inherit;
        float: none;
    }

    #head {
        padding: 6rem 0 5rem;
    }

    footer {
        text-align: center;
    }

    footer .right {
        float: none;
    }
}
/*==========IMG SWAP==========*/
.pc {
    display: block;
}

.tablet {
    display: none;
}

.mobile {
    display: none;
}

@media only screen and (max-width: 1366px) {
  .pc {
    display: none;
  }

  .tablet {
    display: block;
  }

  .mobile {
    display: none;
  }
}

@media only screen and (max-width: 480px) {
  .pc {
    display: none;
  }

  .tablet {
    display: none;
  }

  .mobile {
    display: block;
  }
}