/* Fonts */
body{
    overflow-x: hidden;
}
@font-face {
    font-family: lato;
    src: url(../fonts/Lato-Regular.woff);
}
@font-face {
    font-family: bebas;
    src: url(../fonts/BebasNeue.otf);
}
@font-face {
    font-family: bebasBook;
    src: url(../fonts/BebasNeueBook.ttf);
}
@font-face {
    font-family: ralewayReg;
    src: url(../fonts/Raleway-Regular.ttf);
}
@font-face {
    font-family: ralewaySemiBold;
    src: url(../fonts/Raleway-SemiBold.ttf);
}
@font-face {
    font-family: robotoLight;
    src: url(../fonts/Roboto-Light.ttf);
}
@font-face {
    font-family: robotoMedium;
    src: url(../fonts/Roboto-Medium.ttf);
}
@font-face {
    font-family: robotoReguler;
    src: url(../fonts/Roboto-Regular.ttf);
}
@font-face {
    font-family: robotoItalic;
    src: url(../fonts/Roboto-Italic.ttf);
}
@font-face {
    font-family: ralewayBlack;
    src: url(../fonts/Raleway-Black.ttf);
}
@font-face {
    font-family: ralewayBold;
    src: url(../fonts/Raleway-Bold.ttf);
}

.lato{font-family: lato;}
.bebas{font-family: bebas;}
.bebasBook{font-family: bebasBook;}
.ralewayReg{font-family: ralewayReg;}
.ralewaySemiBold{font-family: ralewaySemiBold;}
.blue{
    color: #35287b;
}
.grey{
    color: #707070;
}
.font30{
    font-size: 38px;
}
.font25{
    font-size: 31px;
}
.circle{
    border-radius: 50px;

    margin: 9px 4px 0 0;
    font-size: 24px !important;
}
.fa-twitter{
    background: #ffffff;
    color: #000000;
    padding: 6px 7px;
}
.fa-instagram{
    background: #ffffff;
    color: #000000;
    padding: 6px 8px;
}
.fa-facebook{
    background: #ffffff;
    color: #000000;
    padding: 6px 11px;
}
.fa-youtube{
    background: #ffffff;
    color: #000000;
    padding: 6px 7px;
}
#container{
    margin: 0 auto;
}

/*Top Style*/
.topcontainer{
    width: 1240px;
    margin: 0 auto;
}
#top{
    position: relative;
}
#top-address{
    background-color: #35287a;
    color: #ffffff;
    height: 45px;
}
#top-address p {
    padding: 12px 0;
}
#top-contact{
    color: #ffffff;
    position: absolute;
    top: 0;
    right: 76px;
    width: 285px;
    background-color: #4d3f96;
    -webkit-box-shadow: 7px 7px 18px 2px rgba(0,0,0,0.53);
    -moz-box-shadow: 7px 7px 18px 2px rgba(0,0,0,0.53);
    box-shadow: 7px 7px 18px 2px rgba(0,0,0,0.53);
    padding: 10px 15px;
    z-index: 1;
}
#top-contact i.phones {
    margin-right: 0;
    display: none;
}
#top-contact .phone{
    float: left;
}
#top-contact .contact{
    float: right;
    width: 78%;
}
#top-contact p{
    font-size: 18px;
    text-align: justify;
}
#cusNavbar .bebas li a{
    font-size: 22px;
    color: #594ba3;
}
#cusNavbar .bebas li .active{
/*    color: #000000;*/
}
#menu{
    padding: 60px 0 20px 0;
}
.phone,.phones{
  width: 40px;
  height: 40px;
  background: url(../img/phone.svg);
  background-size: 40px 40px;
}
.phones{
    display: inline-block;
    vertical-align: middle;
}
.download-bg{
    background: url(../img/download-bg.png) no-repeat;
    background-size: 100% 100%;
}


/*Footer Style*/
#footer-pricelist{
    color: #ffffff;
    text-align: center;
    font-size: 40px;
    height: 276px;
}
#footer-pricelist p{
    padding-bottom: 27px;
    padding-top: 30px;
}
#footer-pricelist a{
    color: #ffffff;
    font-size: 26px;
    padding: 15px;
    border-radius: 20px;
    border: 2px solid #ffffff;
}
#download-btn{
    margin-bottom: 30px;
}
#footer-connect{
    height: 274px;
}
#footer-connect .topcontainer{
    padding-top: 60px;
}
#footer-connect .noico{
    padding-top: 30px !important;
}
#footer-connect .ico{
    text-align: center;
    font-family: ralewaySemiBold;
    color: #35287b;
}
#footer-connect .ico p{
    padding-top: 10px;
}
#footer-menu {
    background-color: #252525;
    color: #ffffff;
    font-family: robotoReguler;
    padding: 35px 0;
}

#footer-menu #product{
    margin-left: 18px;
    margin-top: 10px;
}
#footer-menu #product li{
    list-style:disc;
    font-size: 16px;
    padding-top: 10px;
}
#footer-menu h4{
    font-size: 20px;
}
#footer-menu ul li a{
    color: #ffffff;
}
#footmenu li{
    padding-bottom: 10px;
}
#footmenu li a{
    font-size: 20px;
}
.subscribe h4{
    margin-bottom: 10px;
}

#footer-copyright{
    font-family: ralewayReg;
    text-align: center;
    color: #ffffff;
    background-color: #35287b;
    padding: 10px 0;
}
#content{
/*    background: red;*/
}


/* Edit Now */
#menus{
    padding: 60px 0 20px 0;
}
#menus .navbar-form{
    padding: 7px 0 !important;
}
#cuslogo{
/*    background: cyan;*/
    margin-right: 15px;
}
.navbar{
/*    background: blue;*/
    min-height: 47px !important;
}
.nav>li>a{
    padding: 0 !important;
    padding: 17px 15px 10px 15px !important;
}
.nav>li:hover a{
/*    background: #35287b;*/
    color: #000000 !important;
}
#cusNavbar{
/*    background: green;*/
    padding: 0 15px !important;
    overflow-x: hidden;
}


/* wawa */
#contact-us{
/*    height: 702px;*/
/*    background-color: bisque;*/
}
#contact-form{
/*    background: blue;*/
}
#contact-form form{
/*    background: yellow;*/
    padding: 15px 0 0px 0;
}
#contact-form form label{
    font-family: robotoReguler;
    color: #35287b;
}
#contact-form form input,#contact-form form textarea{
    font-family: robotoReguler;
    background: #ededed;
    border-radius: 0;
    border-color: #ededed;
}
#contact-form form input:focus,#contact-form form textarea:focus{
    background: #ffffff;
    border-color: #35287b;
}
#contact-form form button{
    border-radius: 0;
    border-color: #35287b;
    color: #35287b;
    padding: 10px 40px;
}
#contact-form form button:hover{
    background: #35287b;
    border-color: #35287b;
    color: #ffffff;
}
#contact-form-header{
/*    background: red;*/
    padding: 18px 15px 15px 15px;
}
#contact-form-header-main{
    text-align: center;
    width: 429px;
/*    background: red;*/
    margin: 0 auto;
}
#contact-form-header h3, #contact-form-header-main h3{
    font-family: ralewaySemiBold;
    text-transform: uppercase;
    font-size: 30px;
    color: #35287b;
}
#contact-form-header h4, #contact-form-header-main h4{
    font-family: ralewayReg;
    font-size: 25px;
    padding: 10px 0 20px 0;
    border-bottom: 3px solid #35287b;
    color: #707070;
}

#contact-img{
/*    background: red;*/
}
#contact-img img{
    margin: 0 auto;
}
.removes{
    display: none;
}
.separator{
    height: 30px;
}

/* Carousel Hack */
.carousel-indicators .active{
    margin: 10px 5px;
}
.carousel-indicators li{
    display: inherit;
     margin: 10px 6px;
}
.carousel-indicators {
    bottom: 20px;
    top: 27%;
    right: 10%;
    margin-right: -64%;
    left: initial;
}
.glyphicon-chevron-right:before,.glyphicon-chevron-left:before {
    background: #35287b;
    padding: 10px;
}
.carousel-control.left,.carousel-control.right{
    background-image: none;
}
.carousel-caption{
    right: 10%;
    bottom: 25%;
}
.carousel-caption h3{
    font-family: ralewayBlack;
    text-transform: uppercase;
    font-size: 35px;
    text-align: right;
}
.carousel-caption p{
    font-family: ralewaySemiBold;
    text-transform: uppercase;
    font-size: 25px;
    text-align: right;
}
.glyphicon-chevron-down:before {
    background: #35287b;
    padding: 12px 15px;
}
#down{
    position: absolute;
    left: 0;
    margin-left: calc(50% - 27.5px);
    bottom: -10px;
    font-size: 25px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    background-color: #35287b;
}
#overview{
/*    background: red;*/
    padding: 60px 0 20px 0;
}
#overview h2 {
    text-align: center;
    margin-bottom: 20px;
    font-family: ralewaySemiBold;
    text-transform: uppercase;
    color: #35287b;
}
#overview p {
/*    background: blue;*/
    text-align: justify;
    font-family: robotoLight;
    color: #000000;
}
#inner-overview{
    width: 75%;
    margin: 0 auto;
}

#product-section{

}
#latest,#product-a,#product-b, #product-c>div:nth-child(1), #product-c>div:nth-child(2){
    position: relative;
    overflow: hidden;
/*    background: red;*/
}
#latest-caption{
/*    background: yellow;*/
    position: absolute;
    top: 50%;
    left: 30px;
    text-transform: uppercase;
    color: #ffffff;
}
#latest-caption p{
    font-family: ralewaySemiBold;
    font-size: 30px;
}
#latest-caption a{
    font-family: ralewayReg;
    color: #ffffff;
    text-transform: capitalize;
    border-top: 1px solid #ffffff;
    font-size: 20px;
}
#product-a, product-b,product-c>div{
    position: relative;
}
.product-caption hr{
    width: 30%;
    margin: 0;
    padding-bottom: 10px;
    border-top: 4px solid #ffffff;
}
.product-caption{
    position: absolute;
    bottom: 20px;
    left: 20px;
/*    background: yellow;*/
    font-family: ralewaySemiBold;
    font-size: 20px;
    text-transform: uppercase;
    color: #ffffff;
}

#latest .mobile, #product-a .mobile, #product-b .mobile, #product-c .mobile{
        display: none;
}

#section-head{
    background-color: #35287b;
    position: relative;
}
#section-head img{
    margin: 0 auto;
}
#section-title{
    font-family: ralewayBlack;
    position: absolute;
    bottom: 60px;
    left: 5%;
}
#section-title h2{
    text-transform: uppercase;
    color: #ffffff;
    font-size: 40px;
}
#client-list{
    margin: 30px 0;
}
#client-list>div{
    background-color: #f9fafb;
    padding: 20px 10px 0 10px;
}
#client-list>div>div{
/*    background-color: orange;*/
    margin-bottom: 15px !important;
}
#client-list>div>div.cb{
    margin-bottom: 0 !important;
}
#client-list>div>div>div{
/*    width: 100%;*/
    width: 251px;
    margin: 0 auto;
    border: 1px solid #ededed;
}
.client-title-a{
    font-family: ralewaySemiBold;
    color: #35287b;
    text-transform: uppercase;
    font-size: 15px;
}
.client-title-b{
    font-family: ralewayReg;
    color: #898989;
    text-transform: capitalize;
    font-size: 12px;
}

.client-title{
    background-color: #ffffff;
    padding: 10px;
}
.client-desc p{
    background-color: #ffffff;
    font-family: ralewayReg;
    color: #898989;
    font-size: 12px;
    padding: 10px;
}
div.client-img>img{
    margin: 0 auto;
}
#testimonial-title{
    margin-bottom: 20px;
}

#testimonial-title h3{
    font-size: 30px;
    font-family: ralewayReg;
    text-transform: uppercase;
    text-align: center;
/*    background-color: yellow;*/
}

#testimonial-title hr{
    background: #35287b;
    border-top: 13px solid #ffffff;
    padding-bottom: 3px !important;
}
#testimonial-list{
    margin-bottom: 20px;
}

#testimonial-list p{
    font-family: ralewayReg;
    text-align: center;
    padding: 0 150px;
}

#testimonial-list p span.testi-head{
    font-size: 25px;
    text-transform: capitalize;
    color: #898989;
}
#testimonial-list p span.testi-name{
    font-family: robotoItalic;
    color: #35287b;
    text-transform: capitalize;
    font-size: 15px;
}
#testimonial-list p span.testi-comp{
     font-family: robotoReguler;
    color: #35287b;
    text-transform: capitalize;
}
#testimonial-list p span.testi-comp::after{
    content: " -";
}
#testimonial-list p span.testi-comp::before{
    content: "- ";
}

.product-tabs {
/*    background: yellow;*/
    margin: 20px 0;
}
.product-tabs ul{
/*    background: red;*/
}
.product-tabs ul>li>a{
    font-family: ralewayReg;
    text-transform: uppercase;
/*    font-size: 22px;*/
}
.product-detail {
    width: 80%;
    margin-bottom: 50px;
}

.product-detail-a{
/*    background-color: aquamarine;*/
}

.product-detail-a h4{
    font-family: ralewayBold;
    font-weight: 500;
    text-transform: uppercase;
/*    background-color: beige;*/
    font-size: 25px;
    display: table;
    padding: 10px 0;
    border-bottom: 3px solid #35287b;
}

.product-detail-a p{
/*    background: red;*/
    padding: 10px 100px 10px 0;
    text-align: justify;
}

.product-detail-b{
/*    background-color: coral;*/
}
.product-detail-b img{
    margin: 0 auto;
}
.product-button{
    margin: 10px 0;
}
.product-button>a:nth-child(1){
    //margin-right: 20px;
}
.buttoncus{
    background-color: #35287b;
    color: #fff;
    padding: 15px;
    display: inline-block;
    font-family: ralewayReg;
    text-transform: uppercase;
}
.buttoncus:hover{
    color: #ffffff;
}

.list-product{
    border-top: 5px solid #35287b;
}
.product-list {
/*    background-color: red;*/
    padding-top: 50px;
}
.box-product{
    width: 339px;
    margin: 0 auto;
}
.box-product>div{
        //-webkit-box-shadow: 10px 10px 41px -15px rgba(0,0,0,0.75);
        //-moz-box-shadow: 10px 10px 41px -15px rgba(0,0,0,0.75);
        //box-shadow: 10px 10px 41px -15px rgba(0,0,0,0.75);
/*
     -webkit-box-shadow: 17px 19px 17px -8px rgba(0,0,0,0.75);
     -moz-box-shadow: 17px 19px 17px -8px rgba(0,0,0,0.75);
     box-shadow: 17px 19px 17px -8px rgba(0,0,0,0.75);
*/


}
.box-product p{
    font-family: ralewayBold;
    text-transform: capitalize;
    text-align: center;
    margin: 20px 0;
    font-size: 25px;
}

.box-product .boxhead {
    color: #35287b;
}

.box-product .boxprice{
    color: #000000;
}

.box-img{
    position: relative;
    //background: yellow;
}
.box-img img{
    height: 377px;
}

/* produk */

.demo .item{
/*    margin-bottom: 20px;*/
}
.content-sliders{
/*    height: auto !important;*/
/*    height: 1800px !important;*/
    padding: 10px 0;
}
.demo{
/*    width: 1240px;*/
    margin-top: 50px;
}

/* End of produk */

.box-img img{
    display:block;
    position:relative;
}

.box-img .box-hover{
    width:100%;
    height:100%;
    position:absolute;
    overflow:hidden;
    top:0;
    left:0;
    opacity:0;
    background-color:rgba(53,40,123,0.9);
    -webkit-transition:all .4s ease-in-out;
    transition:all .4s ease-in-out
}

.box-img:hover .box-hover {
    opacity:1;
    filter:alpha(opacity=100);
}
.box-hover a{
    display: inline-block;
    color: #ffffff;
    text-transform: capitalize;
    padding-bottom: 50%;
    padding-top: 50%;
    font-size: 25px;
    width: 100%;
    text-align: center;
    text-decoration: underline !important;
}

.product-tabs .nav-pills>li:hover, .product-tabs .nav>li:hover a{
        background: #35287b;
        color: #ffffff !important;
}

.product-tabs .nav-pills>li.active:hover, .product-tabs .nav>li.active:hover a{
        color: #35287b !important;
}

.non-mobile{

  max-width: 100%;

  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.non-mobile:hover{
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}