/* YOUR CUSTOM STYLES */
body {
    background: #ffffff;
    padding:0;
}

.nopadding {
    padding:0;
}

.mt30 {
    margin-top:30px;
}

.mb30 {
    margin-bottom: 30px;
}

.pt15 {
    padding-top:15px;
}

.pb15 {
    padding-bottom:15px;
}

.mt15 {
    margin-top:15px;
}

.mb15 {
    margin-bottom:15px;
}

.m0 {
    margin:0px;
}

#videografi {
    background: url('../img/cover-videografi.jpg') no-repeat center center / 100% 100% ;
}

#videophoto {
    background: url('../img/cover-video-foto.jpg') no-repeat center center / 100% 100% ;
}



.lineheadergradient {
    height:10px;
    /*background: #ec1d25; !* For browsers that do not support gradients *!
    background: -webkit-linear-gradient(left, #f8a88d , #ec1d25); !* For Safari 5.1 to 6.0 *!
    background: -o-linear-gradient(right, #f8a88d, #ec1d25); !* For Opera 11.1 to 12.0 *!
    background: -moz-linear-gradient(right, #f8a88d, #ec1d25); !* For Firefox 3.6 to 15 *!
    background: linear-gradient(to right, #f8a88d , #ec1d25); !* Standard syntax *!*/
    background: #c4e17f linear-gradient(to right, #f8a88d, #f8a88d 20%, #f69477 20%, #f69477 40%, #f47d5d 40%, #f47d5d 60%, #f0776c 60%, #f0776c 80%, #f05a3f 80%, #f05a3f 100%, #eb1c24 100%, #eb1c24) repeat;
}



.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}



.header {
    background: #f8f8f8;
    width: 100%;
    z-index:1002;
    height:115px;
    position: fixed;
    top:0;
    transition:height .5s ease-in-out !important;
    -webkit-transition:height .5s ease-in-out !important;
    -moz-transition:height .5s ease-in-out !important;
    -o-transition:height .5s ease-in-out !important;
}



.header .active {

    animation:slide-down 0.7s;

}


/**::-webkit-media-controls-panel {
  display: none!important;
  -webkit-appearance: none;
}

*::--webkit-media-controls-play-button {
  display: none!important;
  -webkit-appearance: none;
}

*::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none;
}*/


@keyframes slide-down {

    0% {

        opacity: 0;

        transform: translateY(-100%);

    }

    100% {

        opacity: 1;

        transform: translateY(0);

    }

}



.boxlogo {

    padding-left:40px; padding-top:5px;

}



#langcurrent {

    color: #F11C22;

}



#langcurrentmobile {

    color: #F11C22 !important;

}



.boxlogo img {

    height:85px;

    transition:All .5s ease-in-out !important;

    -webkit-transition:All .5s ease-in-out !important;

    -moz-transition:All .5s ease-in-out !important;

    -o-transition:All .5s ease-in-out !important;

}



.menu {

    display: inline-block; color:#0c78c1;  text-align: center; font-weight: 300;

}



.menu a {

    border-radius: 0 !important;

    color: #bababa !important;

    font-size: 18px !important;

    margin-top: -1px !important;

    text-align: center !important;

    text-transform: capitalize !important;

    border-top: 2px solid transparent !important;

    width: 100% !important;

    margin-bottom:0 !important;

    transition:All .5s ease-in-out !important;

    -webkit-transition:All .5s ease-in-out !important;

    -moz-transition:All .5s ease-in-out !important;

    -o-transition:All .5s ease-in-out !important;

}



.menu a:hover {

    border-top: 2px solid #ea222c !important;

}



.menu a.current {

    border-top: 2px solid #ea222c !important;

}



.btn-flat {

    border: medium none;

    margin: 10px;

    outline: 0 none !important;

    padding: 8px 30px;

    position: relative;

    text-decoration: none;

}

.btn-flat, .btn-flat:focus {

    background-color: transparent;

}

.btn, .btn-flat, .classic-tabs li a, footer.page-footer .title {

    text-transform: uppercase;

}



video {

    width:100%;

    height:100%;

    object-fit:fill;

}



.mt115 {

    padding-top:115px;

}



.mt83 {

    padding-top:83px;

}



.navmobilesosmed {

    padding:0 10px; text-decoration: none;

}



.navsosmed a {

    padding-top:10px; padding-right:10px; display: inline-block; color: #b4b4b4; font-size:18px; position: relative;



}



a:hover .fa-facebook{

    transition:All .5s ease-in-out !important;

    -webkit-transition:All .5s ease-in-out !important;

    -moz-transition:All .5s ease-in-out !important;

    -o-transition:All .5s ease-in-out !important;

    color:#3B5999;

    text-decoration:none;

}



a:hover .fa-twitter{

    transition:All .5s ease-in-out !important;

    -webkit-transition:All .5s ease-in-out !important;

    -moz-transition:All .5s ease-in-out !important;

    -o-transition:All .5s ease-in-out !important;

    color:#55ACEE;

    text-decoration:none;

}



a:hover .fa-youtube{

    transition:All .5s ease-in-out !important;

    -webkit-transition:All .5s ease-in-out !important;

    -moz-transition:All .5s ease-in-out !important;

    -o-transition:All .5s ease-in-out !important;

    color:#bb0000;

    text-decoration:none;

}



a:hover .fa-instagram{

    transition:All .5s ease-in-out !important;

    -webkit-transition:All .5s ease-in-out !important;

    -moz-transition:All .5s ease-in-out !important;

    -o-transition:All .5s ease-in-out !important;

    color:#9b6954;

    text-decoration:none;

}



.navsosmed img {

    width:28px;

}



.text-md-center, .text-xs-center {

    text-align: center;

}



.text-md-right {

    text-align: right;

}



.text-md-left {

    text-align: left;

}



.boxnavmenu {

    border-top: 1px solid #cfcfcf;

}



.productTitle {

    color: #eb222c;  font-size:20px; font-weight:300; text-transform: uppercase;

}



.productLine {

    width:40px; height: 2px; background: #eb222c; margin:10px 0;

}



.productDetail {

    font-size: 16px; font-weight: 300;

}



.totop {

    color:#b9b9b9;

    cursor: pointer;

    transition:All .5s ease-in-out !important;

    -webkit-transition:All .5s ease-in-out !important;

    -moz-transition:All .5s ease-in-out !important;

    -o-transition:All .5s ease-in-out !important;

}



.totop:hover {

    color: #eb222c;

}



.textlabel {

    font-size: 19px;

    font-weight:300;

}



.col-mobile {

    float:left;

    width:20%;

    padding-left:15px;

    padding-right:15px;

    text-align: center;

}



.linebordertop {

    border-top: 1px solid #cfcfcf;

}



.titleboxAll {

    text-transform: uppercase; font-size: 24px; color:#939393;

}



.summboxAll {

    text-transform: capitalize; font-size: 20px; color:#939393; font-weight: 300;

}



.dottedboxAll {

    border-left:4px dotted #eb222c; height:35px; margin:10px auto; width:0; -webkit-border-left: 4px dotted #eb222c;

}



.boxabout {

    font-weight: 300; font-size:28px; color:#939393;

}



.footer {

    background: #2f2f2f; color:#b9b9b9; border-top: 1px solid #d5c5ab;

}



.boxcontainerFooter {

    border-top: 1px solid #eb222c; margin-top:5px;

}



.boxlogofooter {

    position: absolute; bottom: 15px; left:-60px; z-index:1;

}



.boxfooter {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    border-bottom:1px solid #484848;

}



.boxaddrfooter {

    border-right:1px solid #484848;

}



.navsosmedfooter a {

    padding-top:10px; padding-right:10px; display: inline-block; color: #b4b4b4; font-size:20px; position: relative;

}



.boxlistproduct {

    padding:15px;

}



.headlinebanner {

    font-size: 40px; font-weight:bold; color:#ffffff; text-shadow:0px 0px 10px #000000;

}



.descriptionbanner {

    font-size: 26px; font-weight: 300; color:#ffffff; text-shadow:0px 0px 10px #000000;

}



.videobox1 {

    padding-right:5px;

}



.videobox2 {

    padding-left:5px;

}



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

    .boxwrapmenunav {

        padding: 0;

    }

    .navsosmed a {

        font-size:16px;

        padding-right: 6px;

    }

    .navsosmedfooter a {

        font-size:16px;

    }

    .menu a {

        font-size: 16px !important;

    }

    .navsosmed img {

        width:24px;

    }

}



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

    .mt115 {

        padding-top:83px;

    }

    .header {

        height : 83px;

    }

    .boxlogo {

        padding-left:15px; padding-top:10px;

    }



    .boxlogo img {

        height:53px;

    }



    .monopadding {

        padding: 0;

    }



    .col-mobile {

        width:100%;

        padding:0;

    }



    .row-eq-height {

        display: inline-block;

    }



    .boxnavmenu {

        border-top: 0;

    }



    .navsosmed {

        display: none;

    }



    #nav-toggle {

        display: block;

        position: absolute;

        right: 50px;

        top: 20px;

        z-index: 600;

    }



    #nav-toggle span, #nav-toggle span::before, #nav-toggle span::after {

        background: #484848 none repeat scroll 0 0;

        border-radius: 1px;

        content: "";

        cursor: pointer;

        display: block;

        height: 5px;

        position: absolute;

        width: 35px;

    }



    #nav-toggle span::before {

        top: -10px;

    }



    #nav-toggle span::after {

        bottom: -10px;

    }



    #nav-toggle span, #nav-toggle span::before, #nav-toggle span::after {

        transition: all 500ms ease-in-out 0s;

    }



    #nav-toggle.active span {

        background-color: transparent;

    }



    #nav-toggle.active span::before, #nav-toggle.active span::after {

        top: 0;

    }



    #nav-toggle.active span::before {

        transform: rotate(45deg);

    }



    #nav-toggle.active span::after {

        transform: rotate(-45deg);

    }



    nav {

        background: #ffffff none repeat scroll 0 0;

        display: none;

        position: fixed;

        text-align: left;

        width: 100%;

        z-index: 1001;

        top: 83px;

        right: -100%;

    }



    .boxaddrfooter {

        padding-left:0;

    }



    .boxlistproduct {

        padding:15px 0;

    }



    .menu {

        display: block; width:100%; height: 50px; border-top: 1px solid #bababa;

    }



    .menu:last-child {

        border-bottom: 1px solid #bababa;

    }



    .menu a {

        font-size: 18px !important;

        margin-top: 0px !important;

        border-top: 0px solid transparent !important;

        text-decoration: none;

    }





    .menu a:hover {

        border-top: 0px solid #ea222c !important;

    }



    .menu a.current {

        border-top: 0px solid #ea222c !important;

    }



    .headlinebanner {

        font-size: 24px;

    }



    .descriptionbanner {

        font-size: 14px;

    }



    .videobox1, .videobox2 {

        padding:0;

    }



}