:root {
    --accent: #D32026;
    --yellow: #FAFF00;
}

/*-------------------------- General --------------------------*/
     *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; }
    html { font-family: 'Roboto', sans-serif; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

    body { font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: normal; color: rgba(0, 0, 0, 1); }

    ::-moz-selection { background: #000000; color: #ffffff; }
    ::selection { background: #000000; color: #ffffff; }

    a { 
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
    }
    a:focus, a:hover { 
        outline: none; 
        text-decoration: none;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
    }

    p { padding: 0; margin: 0 0 30px 0; }

    h1, h2, h3, h4, h5, h6 { color: #000000; }

    /* Back to top button */
    .back-to-top {
        position: fixed;
        display: none;
        background: linear-gradient(45deg, #1de099, #1dc8cd);
        color: #fff;
        padding: 2px 20px 8px 20px;
        font-size: 16px;
        border-radius: 4px 4px 0 0;
        right: 15px;
        bottom: 0;
        transition: none;
    }
    .back-to-top:focus { background: linear-gradient(45deg, #1de099, #1dc8cd); color: #fff; outline: none; }
    .back-to-top:hover { background: #1dc8cd; color: #fff; }

    .list-unstyled { padding-left: 0; list-style: none; }
    .list-inline { padding-left: 0; list-style: none; }
    .list-inline-item { display: inline-block; }
    .list-inline-item:not(:last-child) { margin-right: 0.5rem; }

    .text-lowercase { text-transform: lowercase !important; }
    .text-uppercase { text-transform: uppercase !important; }
    .text-capitalize { text-transform: capitalize !important; }

    .font-weight-200 { font-weight: 200 !important; }
    .font-weight-light { font-weight: 300 !important; }
    .font-weight-lighter { font-weight: lighter !important; }
    .font-weight-normal { font-weight: 400 !important; }
    .font-weight-500 { font-weight: 500 !important; }
    .font-weight-600 { font-weight: 600 !important; }
    .font-weight-bold { font-weight: 700 !important; }
    .font-weight-800 { font-weight: 800 !important; }
    .font-weight-900 { font-weight: 900 !important; }
    .font-weight-bolder { font-weight: bolder !important; }
    .font-italic { font-style: italic !important; }

    .text-white { color: #ffffff !important; }
    .text-black { color: #232327 !important; }
    .text-accent { color: var(--accent) !important; }
    .text-yellow { color: var(--yellow) !important; }

    .font-10 { font-size: 10px !important; }
    .font-11 { font-size: 11px !important; }
    .font-12 { font-size: 12px !important; }
    .font-13 { font-size: 13px !important; }
    .font-14 { font-size: 14px !important; }
    .font-15 { font-size: 15px !important; }
    .font-16 { font-size: 16px !important; }
    .font-17 { font-size: 17px !important; }
    .font-18 { font-size: 18px !important; }
    .font-19 { font-size: 19px !important; }
    .font-20 { font-size: 20px !important; }
    .font-21 { font-size: 21px !important; }
    .font-22 { font-size: 22px !important; }
    .font-23 { font-size: 23px !important; }
    .font-24 { font-size: 24px !important; }
    .font-25 { font-size: 25px !important; }

    .fira-sans { font-family: 'Fira Sans', sans-serif; }
    .sansita-one { font-family: 'Sansita', sans-serif; }

    .section-lg { padding: 120px 0; }
    .section-md { padding: 80px 0; }
    .section-sm { padding: 60px 0; }

    .section-heading { font-weight: 900; font-size: 45px; line-height: 55px; color: var(--black); }
    .section-subheading { font-weight: normal; font-size: 24px; line-height: 34px; letter-spacing: 0.01em; color: var(--accent); }
    .section-description { font-weight: normal; font-size: 16px; line-height: 26px; letter-spacing: 0.01em; color: var(--black); }

    @media (max-width: 767px) {
        .section-lg { padding: 80px 0; }
        .section-md { padding: 60px 0; }
        .section-sm { padding: 40px 0; }

        .section-heading { font-size: 35px; line-height: 42px; }
        .section-subheading { font-size: 20px; line-height: 26px; }
        .section-description { font-size: 16px; line-height: 26px; }
    }

    .has-error { font-weight: normal; font-style: italic; font-size: 13px; line-height: 16px; color: #ffffff; }
/*-------------------------- End General --------------------------*/



/*-------------------------- navigation --------------------------*/
    .navbar-custom { background: var(--accent); box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25); transition: all 0.6s; }

    .navbar-custom .navbar-brand .logo-image { width: auto; height: 50px; -webkit-backface-visibility: hidden; }
    .navbar-custom .navbar-brand span { text-transform: uppercase; font-weight: 400; font-size: 14px; line-height: 14px; color: var(--black); }

    .navbar-custom .nav-item .nav-link {
        font-weight: 600;
        font-size: 16px;
        line-height: 16px;
        letter-spacing: 0em;
        color: var(--black);
        margin-left: 25px;
        transition: all 0.4s ease;
    }

    .navbar-custom .nav-item .nav-link:hover { color: var(--accent); }
    .navbar-custom .nav-item .nav-link.active { color: var(--accent) !important; }

    .navbar-custom .nav-item .btn.nav-link { padding: 8px 20px; }

    .navbar-custom .navbar-toggler { border: none; outline: none; color: var(--white); font-size: 25px; }

    .navbar-custom button[aria-expanded='false'] .navbar-toggler-awesome.fa.fa-times { display: none; }
    .navbar-custom button[aria-expanded='false'] .navbar-toggler-awesome.fa.fa-bars { display: inline-block; }
    .navbar-custom button[aria-expanded='true'] .navbar-toggler-awesome.fa.fa-bars { display: none; }
    .navbar-custom button[aria-expanded='true'] .navbar-toggler-awesome.fa.fa-times { display: inline-block; margin-right: 0.125rem; }

    @media (min-width: 768px) {
        .navbar-custom { padding: 0.7rem 1.5rem 0.7rem 2rem; box-shadow: none; background: var(--white); }
        .navbar-custom .navbar-brand .logo-image { width: auto; height: 50px; -webkit-backface-visibility: hidden; }
        .navbar-custom .navbar-brand span { text-transform: uppercase; font-weight: 400; font-size: 14px; line-height: 14px; }
        .navbar-custom .navbar-nav { margin-top: 0; }
        .navbar-custom .nav-item .nav-link { color: var(--black); }

        .navbar-custom.top-nav-collapse { padding: 0.2rem 1.5rem 0.2rem 2rem; box-shadow: 0 0.0625rem 0.375rem 0 rgba(0, 0, 0, 0.1); background-color: var(--accent); }
        .navbar-custom.top-nav-collapse .navbar-brand.logo-text { color: #ffffff; }
        .navbar-custom.top-nav-collapse .nav-item .nav-link { color: #ffffff; }
        .navbar-custom.top-nav-collapse .nav-item .nav-link:hover { color: var(--yellow); } 
        .navbar-custom.top-nav-collapse .nav-item .nav-link.active { color: var(--yellow) !important; }

        .navbar-custom .dropdown-menu { box-shadow: 0 0.25rem 0.375rem 0 rgba(0, 0, 0, 0.03); }
        .navbar-custom .dropdown-item { padding-top: 0.25rem; padding-bottom: 0.25rem; }
        .navbar-custom .dropdown-items-divide-hr { width: 84%; }
    }

    @media (min-width: 1200px) {
        .navbar-custom { padding: 0.7rem 5rem 0.7rem 5rem; }
        .navbar-custom.top-nav-collapse { padding: 0.2rem 5rem 0.2rem 5rem; }
    }

    @media only screen and (max-width: 767px) {
        .navbar-custom { padding: 0.3rem 1rem 0.3rem 1rem; }
        .navbar-custom .navbar-brand .logo-image { height: 40px; }
        .navbar-custom .navbar-brand span { font-size: 12px; line-height: 12px; }

        .navbar-custom .navbar-nav { margin-top: 10px; padding: 20px 0; }

        .navbar-custom .nav-item .nav-link { color: var(--white); margin-left: 0; padding: 15px 0; }
        .navbar-custom .nav-item .nav-link:hover { color: var(--yellow); }
        .navbar-custom .nav-item .nav-link.active { color: var(--yellow) !important; }

        .navbar-custom .nav-item .btn.nav-link { margin-top: 10px; }
    }
/*-------------------------- end navigation --------------------------*/



/*-------------------------- Intro --------------------------*/
    #intro { 
        position: relative; 
        height: 100vh; 
        max-height: 800px; 
        z-index: 10; 
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top;
        background-attachment: fixed;
        align-items: center;
        align-self: center;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -moz-flex;
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
    }
    #intro .block-text .heading { font-weight: 900; font-style: italic; font-size: 65px; line-height: 72px; letter-spacing: -0.0em; color: #FAFF00; }

    @media (max-width: 767px) {
        #intro { background-position: right 20% center; }
        #intro::before {
            content:"";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: block;
            background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .55), rgba(0, 0, 0, 0.1));
        }
        #intro .block-text .heading { font-size: 42px; line-height: 52px; }

    }
/*-------------------------- End Intro --------------------------*/


    #about { background-size: cover; background-position: center; background-repeat: no-repeat; }
    #about .block-text .heading { color: #4F4F4F; }
    #about .block-text .section-description { font-size: 18px; line-height: 28px; }
    #about .block-thumbnails img { box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); z-index: 999; }

    @media (max-width: 767px) {
        #about .block-thumbnails img { max-height: 300px; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3); }
    }


    #join { padding: 0px; overflow-y: visible; background: linear-gradient(270deg, #C00007 61.22%, rgba(237, 28, 36, 0.34) 91.66%); }
    #join .block-thumbnails { position: relative; }
    #join .block-thumbnails img { position: absolute; top: -30px; max-height: 300px; }
    #join h2 { font-weight: bold; font-size: 44px; line-height: 52px; color: #FAFF00; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); }
    #join .btn-join { color: var(--accent); background: #C4C4C4; border-color: #C4C4C4; font-weight: bold; font-size: 18px; line-height: 18px; letter-spacing: 0.02em; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); }
    #join .btn-join:hover { color: var(--yellow); background: transparent; border-color: var(--yellow); box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2); }

    @media screen and (max-width: 767px) {
        #join .block-thumbnails img { display: none; }
        #join h2 { font-size: 38px; line-height: 44px; text-align: center; margin-bottom: 20px; }
    }



    #superior { position: relative; overflow: hidden; padding-bottom: 0; background-size: cover; background-position: center; background-repeat: no-repeat; }
    #superior .card { border: 0; padding: 0; background: transparent; }
    #superior .card-header { border: 0; padding: 20px; padding-bottom: 0; background: transparent; text-align: center; }
    #superior .card-header img { max-height: 80px; margin-bottom: 15px; }
    #superior .card-header .heading { font-weight: 900; font-size: 25px; line-height: 32px; letter-spacing: 0.02em; margin-bottom: 0; color: var(--accent); }
    #superior .card-header .subheading { font-weight: 600; font-size: 18px; line-height: 28px; letter-spacing: 0.01em; color: #4F4F4F; margin-bottom: 0; }
    #superior .card-body { padding: 10px 20px; background: transparent; text-align: center; }
    #superior .card-body p { font-weight: normal; font-size: 16px; line-height: 26px; color: #4F4F4F; margin-bottom: 0; }
    #superior .block-bottom img { width: 100%; }

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



    #product { position: relative; overflow: hidden; padding-bottom: 200px; background-size: cover; background-position: center; background-repeat: no-repeat; }
    #product.topping { padding-bottom: 100px; }
    #product .img-thumbnails-abs { position: absolute; bottom: 0; right: -20px; max-width: 600px; }
    #product .card { border: 0; padding: 0; background: transparent; display: flex; flex-direction: row; margin-bottom: 50px; }
    #product .card .card-image img { max-width: 230px; margin-right: 40px; }
    #product .card .card-text { padding-right: 30px; }
    #product .card .card-text h2 { font-weight: 900; font-size: 22px; line-height: 26px; color: #000000; }
    #product .card .card-text p { font-weight: normal; font-size: 16px; line-height: 26px; color: #000000; }

    @media (max-width: 767px) {
        #product { padding-bottom: 40px; }
        #product .img-thumbnails-abs { display: none; }
        #product .card { display: block; margin-bottom: 60px; text-align: center; padding-left: 20px; padding-right: 20px; }
        #product .card .card-image img { margin-right: 0px; margin-bottom: 20px; }
        #product .card .card-text { padding-right: 0px; }

        #product.topping .card .card-image img { box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); }
    }



    #instagram { position: relative; overflow: hidden; background: #C00007; background-size: cover; background-position: center; background-repeat: no-repeat; }



    #testimoni { position: relative; overflow: hidden; }
    #testimoni .card { border: 0; background: transparent; padding: 10px 40px; }
    #testimoni .card .media img { width: 60px; height: 60px; margin-right: 20px; }
    #testimoni .card .media .title { font-weight: bold; font-size: 18px; line-height: 24px; color: var(--black); margin-bottom: 0; }
    #testimoni .card .media .subtitle { font-weight: normal; font-size: 14px; line-height: 20px; color: var(--black); margin-bottom: 0; }
    #testimoni .card .media .testimonial { font-weight: normal; font-size: 16px; line-height: 25px; color: var(--black); }

    @media (max-width: 767px) {
        #testimoni .card .media { display: block; text-align: center; }
        #testimoni .card .media img { margin-left: auto; margin-right: auto; margin-bottom: 10px; }
    }


 
    #contact { padding: 6em 0 3em 0; position: relative; overflow: hidden; box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1); background: #C00007; background-size: cover; background-position: center; background-repeat: no-repeat; }
    #contact h2 { font-weight: bold; font-size: 28px; line-height: 34px; color: var(--yellow); }
    #contact .block-info {  }
    #contact .block-info .info {  }
    #contact .block-info .info .icon { width: 30px; height: 30px; font-size: 25px; color: #ffffff; float: left; line-height: 1; margin-right: 10px; }
    #contact .block-info .info a { font-weight: normal; font-size: 16px; line-height: 20px; color: #ffffff; }
    #contact .block-info .info a:hover { color: var(--yellow); }

    #contact .block-form {  }

    @media (max-width: 767px) {
        #contact { padding: 4em 0 2em 0; }
        #contact h2 { font-size: 25px; line-height: 25px; }
        #contact .block-info { margin-bottom: 60px; }
        #contact .block-info .info i { font-size: 25px; }
        #contact .block-info .info p { font-size: 14px; line-height: 24px; padding: 0 0 0 25px; }

        #contact .block-form { text-align: center; }
    }


    .form-style {  }
    .form-style .form-group { margin-bottom: 10px; }
    .form-style .form-group .form-control {
        font-size: 14px;
        line-height: 24px;
        color: #2D2D2D;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
        border-radius: 5px;
        border: 1px solid rgba(222, 226, 230, 0.5);
        background: rgba(255, 255, 255, 1);
    }
    .form-style .form-group .form-control::placeholder { font-weight: normal; font-size: 12px; color: rgba(0, 0, 0, 0.5); }
    .form-style .form-group .form-control::-webkit-input-placeholder { font-weight: normal; font-size: 12px; color: rgba(0, 0, 0, 0.5); }
    .form-style .form-group .form-control::-moz-placeholder { font-weight: normal; font-size: 12px; color: rgba(0, 0, 0, 0.5); }
    .form-style .form-group .form-control:-ms-input-placeholder { font-weight: normal; font-size: 12px; color: rgba(0, 0, 0, 0.5); }
    .form-style .form-group .form-control:-moz-placeholder { font-weight: normal; font-size: 12px; color: rgba(0, 0, 0, 0.5); }
    .form-style .form-group textarea.form-control { height: inherit !important; }



    .btn-accent { color: #ffffff; background-color: var(--accent); border-color: var(--accent); font-size: 14px; letter-spacing: 0.06em; }
    .btn-accent:hover { color: #ffffff; opacity: 0.9; }
    .btn-accent:focus, .btn-accent.focus { color: #ffffff; -webkit-box-shadow: none; box-shadow: none; }
    .btn-accent.disabled, .btn-accent:disabled { color: #ffffff; background-color: var(--accent); border-color: var(--accent); }
    .btn-accent:not(:disabled):not(.disabled):active, 
    .btn-accent:not(:disabled):not(.disabled).active,
    .show > .btn-accent.dropdown-toggle {
        color: #ffffff;
        background-color: var(--accent);
        border-color: var(--accent); 
    }

    .btn-blue { color: #ffffff; background-color: #0545EB; border-color: #0545EB; font-size: 14px; letter-spacing: 0.06em; }
    .btn-blue:hover { color: #ffffff; opacity: 0.9; }
    .btn-blue:focus, .btn-blue.focus { color: #ffffff; -webkit-box-shadow: none; box-shadow: none; }
    .btn-blue.disabled, .btn-blue:disabled { color: #ffffff; background-color: #0545EB; border-color: #0545EB; }
    .btn-blue:not(:disabled):not(.disabled):active, 
    .btn-blue:not(:disabled):not(.disabled).active,
    .show > .btn-blue.dropdown-toggle {
        color: #ffffff;
        background-color: #0545EB;
        border-color: #0545EB; 
    }

    /*#contact .php-email-form .validate {
        display: none;
        color: red;
        margin: 0 0 15px 0;
        font-weight: 400;
        font-size: 13px;
    }

    #contact .php-email-form .error-message {
        display: none;
        color: #fff;
        background: #ed3c0d;
        text-align: center;
        padding: 15px;
        font-weight: 600;
    }

    #contact .php-email-form .sent-message {
        display: none;
        color: #fff;
        background: #18d26e;
        text-align: center;
        padding: 15px;
        font-weight: 600;
    }

    #contact .php-email-form .loading {
        display: none;
        background: #fff;
        text-align: center;
        padding: 15px;
    }

    #contact .php-email-form .loading:before {
        content: "";
        display: inline-block;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        margin: 0 10px -6px 0;
        border: 3px solid #18d26e;
        border-top-color: #eee;
        -webkit-animation: animate-loading 1s linear infinite;
        animation: animate-loading 1s linear infinite;
    }

    #contact .php-email-form input, #contact .php-email-form textarea {
        border-radius: 0;
        box-shadow: none;
        font-size: 14px;
    }

    #contact .php-email-form input::focus, #contact .php-email-form textarea::focus {
        background-color: #1dc8cd;
    }

    #contact .php-email-form button[type="submit"] {
        background: linear-gradient(45deg, #1de099, #1dc8cd);
        border: 0;
        border-radius: 20px;
        padding: 8px 30px;
        color: #fff;
    }

    #contact .php-email-form button[type="submit"]:hover {
      cursor: pointer;
    }

    @-webkit-keyframes animate-loading {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes animate-loading {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }*/


/* ------------------------------------ rounded ------------------------------------ */
    .rounded-sm { border-radius: 0.2rem !important; }

    .rounded { border-radius: 0.25rem !important; }

    .rounded-top { border-top-left-radius: 0.25rem !important; border-top-right-radius: 0.25rem !important; }

    .rounded-right { border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; }

    .rounded-bottom { border-bottom-right-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; }

    .rounded-left { border-top-left-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; }

    .rounded-lg { border-radius: 0.3rem !important; }

    .rounded-circle { border-radius: 50% !important; }

    .rounded-pill { border-radius: 50rem !important; }

    .rounded-0 { border-radius: 0 !important; }
    .rounded-5 { border-radius: 5px !important; }
    .rounded-8 { border-radius: 8px !important; }
    .rounded-10 { border-radius: 10px !important; }
    .rounded-15 { border-radius: 15px !important; }
    .rounded-20 { border-radius: 20px !important; }
    .rounded-50 { border-radius: 50% !important; }
/* ------------------------------------ end rounded ------------------------------------ */


    .btn {
        outline: 0;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }

    .btn:hover .btn:focus, .btn.focus { 
        outline: 0;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }