@import url('https://fonts.googleapis.com/css?family=Montserrat:400,400i,500,500i,600,600i,700,700i');

body { font-family: 'Montserrat', sans-serif; color: #515255;}

a { color: #2059a2;}
a:hover,
a:focus { color: #043574;}

.btn-darkblue { color: #ffffff; background-color: #2059a2; border-color: #2059a2;}
.btn-darkblue:hover,
.btn-darkblue:focus,
.btn-darkblue.active { color: #ffffff; background-color: #043574; border-color: #043574;}

label.invalid { color: #721c24;}
input.invalid { border-color: #721c24;}

.chzn-container-single .chzn-single { padding: 6px 12px; height: auto; border-radius: 4px;}
.chzn-container-single .chzn-single div b { background: url('chosen-sprite.png') no-repeat 0px 9px;}

.btn-buynow-scroll { width: 145px; font-weight: 600; border-radius: 0; padding: 7px 25px; text-transform: uppercase; margin: 0 auto;}


/* HEADER WRAPPER */

.header-wrapper { 
	background: rgba(0, 0, 0, 0.8);
	-webkit-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.2);
}
.view-featured .header-wrapper { 
	background: rgba(255, 255, 255, 0.2);
	position: fixed;
	top: 0; 
	left: 0;
	width: 100%;
	z-index: 99;
}
.header-wrapper .site-navbar .navbar-brand { }
.header-wrapper .site-navbar .navbar-brand .site-logo { height: 70px;}

.header-wrapper .site-navbar .navbar-nav li a { font-weight: 500; text-transform: uppercase; color: #FFFFFF; padding-right: 0.8rem; padding-left: 0.8rem; font-size: 0.9rem;}
.header-wrapper .site-navbar .navbar-nav li.active a { font-weight: 700;}

.header-wrapper .site-navbar .btn-buynow { margin-left: 70px;}
.header-wrapper.header-dark-wrapper { background: rgba(0, 0, 0, 0.7);}



/* BANNER SECTION */

.banner-section { background: url('../images/bg-banner.png') no-repeat; background-size: cover; padding: 250px 0 250px 0; color: #FFFFFF; overflow: hidden; position: relative;}
.banner-section .container { position: relative;}
.banner-section .banner-title { font-weight: 700; font-size: 2.7em; text-transform: uppercase; margin-bottom: 20px;}
.banner-section .btn-learnmore { margin-top: 40px; font-weight: 600; border-radius: 0; padding: 9px 25px; text-transform: uppercase;}
.banner-section .btn-learnmore:hover { }

.banner-section .banner-image { position: absolute; right: 0; bottom: -275px;}
.banner-section .banner-image .img-handphone { height: 650px;}
.banner-section .banner-image .img-arrow { position: absolute; left: -35%; bottom: 35%;}
.banner-section .triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 130px solid #fcfbf9;
    border-right: 1600px solid transparent;
    position: absolute;
    bottom: 0;
    left: 0;
}



/* WHYYOUNEEDIT SECTION */

.whyyouneedit-section { padding: 60px 0 150px 0; text-align: center; background: url('../images/bg-whyyouneedit.png') no-repeat; background-size: cover; position: relative;}
.whyyouneedit-section .whyyouneedit-container { font-weight: 500;}
.whyyouneedit-section .whyyouneedit-container b,
.whyyouneedit-section .whyyouneedit-container strong { font-weight: 700;}
.whyyouneedit-section .whyyouneedit-container .content-row { margin-bottom: 50px;}
.whyyouneedit-section .whyyouneedit-container .title { color: #2059a2; font-weight: 700; margin-bottom: 30px; font-size: 2.5em; text-transform: uppercase;}
.whyyouneedit-section .triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid #f2f2f2;
    border-left: 1600px solid transparent;
    position: absolute;
    bottom: 0;
    right: 0;
}
.whyyouneedit-section .whyyouneedit-container .why-you-need-reason-ul { list-style: none; margin-bottom: 40px; padding: 0; text-align: left;}
.whyyouneedit-section .whyyouneedit-container .why-you-need-reason-ul li { padding-bottom: 15px; position: relative; padding-left: 30px;}
.whyyouneedit-section .whyyouneedit-container .why-you-need-reason-ul li:before { width: 20px; height: 20px; background: #d1d1d1; content: ''; position: absolute; top: 3px; left: 0; border-radius: 50%;}



/* PLUGINFEATURES SECTION */

.pluginfeatures-section { padding: 60px 0 150px 0; text-align: center; background: #f2f2f2; position: relative; overflow: hidden;}
.pluginfeatures-section .pluginfeatures-container { font-weight: 500;}
.pluginfeatures-section .pluginfeatures-container b,
.pluginfeatures-section .pluginfeatures-container strong { font-weight: 700;}
.pluginfeatures-section .pluginfeatures-container .content-row { margin-bottom: 50px;}
.pluginfeatures-section .pluginfeatures-container .title { color: #2059a2; font-weight: 700; margin-bottom: 30px; font-size: 2.5em; text-transform: uppercase;}

.pluginfeatures-section .pluginfeatures-carousel-div .pluginfeatures-carousel .item img { width: auto;}
.pluginfeatures-section .pluginfeatures-carousel-div .pluginfeatures-carousel .owl-dots { margin: 50px 0; text-align: center;}
.pluginfeatures-section .pluginfeatures-carousel-div .pluginfeatures-carousel .owl-dots .owl-dot { width: 17px; height: 17px; background: #dbdbdb; display: inline-block; margin: 0 12px; border-radius: 50%;}
.pluginfeatures-section .pluginfeatures-carousel-div .pluginfeatures-carousel .owl-dots .owl-dot.active { background: #2059a2;}

.pluginfeatures-section .pluginfeatures-blocks-div { padding-top: 30px;}
.pluginfeatures-section .pluginfeatures-blocks-div .blocks-div { background: #FFFFFF; min-height: 230px; padding: 30px; margin-bottom: 30px; border-radius: 8px; font-weight: 600;}
.pluginfeatures-section .pluginfeatures-blocks-div .blocks-div img { margin-bottom: 30px;}

.pluginfeatures-section .triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 130px solid #FFFFFF;
    border-right: 1600px solid transparent;
    position: absolute;
    bottom: 0;
    left: 0;
}



/* TESTIMONIALS SECTION */

.testimonials-section { padding: 60px 0 30px 0; text-align: center; background: #FFFFFF; position: relative; overflow: hidden; border-bottom: 5px solid #f2f2f2;}
.testimonials-section .testimonials-container { font-weight: 500;}
.testimonials-section .testimonials-container b,
.testimonials-section .testimonials-container strong { font-weight: 700;}
.testimonials-section .testimonials-container .content-row { margin-bottom: 50px;}
.testimonials-section .testimonials-container .title { color: #2059a2; font-weight: 700; margin-bottom: 30px; font-size: 2.5em; text-transform: uppercase;}
.testimonials-section .testimonials-carousel-div { }
.testimonials-section .testimonials-carousel-div .testimonials-carousel { }
.testimonials-section .testimonials-carousel-div .testimonials-carousel .item img { width: auto;}
.testimonials-section .testimonials-carousel-div .testimonials-carousel .item h4 { font-weight: 700; text-transform: uppercase; font-size: 1rem; margin: 20px 0;}
.testimonials-section .testimonials-carousel-div .testimonials-carousel .item .rating { margin-bottom: 20px; color: #f6981d;}
.testimonials-section .testimonials-carousel-div .testimonials-carousel .item .rating i { padding: 0 5px;}
.testimonials-section .testimonials-carousel-div .testimonials-carousel .item .comments { font-weight: 500;}

.testimonials-section .testimonials-carousel-div .testimonials-carousel .owl-dots { margin: 50px 0; text-align: center;}
.testimonials-section .testimonials-carousel-div .testimonials-carousel .owl-dots .owl-dot { width: 17px; height: 17px; background: #dbdbdb; display: inline-block; margin: 0 12px; border-radius: 50%;}
.testimonials-section .testimonials-carousel-div .testimonials-carousel .owl-dots .owl-dot.active { background: #2059a2;}



/* SPONSORS SECTION */

.sponsors-section { padding: 50px 0; text-align: center; background: #FFFFFF;}



/* PRICING SECTION */

.pricing-section { padding: 80px 0 50px 0; text-align: center; background: #f2f2f2;}
.pricing-section .pricing-container { font-weight: 500;}
.pricing-section .pricing-container b,
.pricing-section .pricing-container strong { font-weight: 700;}
.pricing-section .pricing-container .content-row { margin-bottom: 50px;}
.pricing-section .pricing-container .title { color: #2059a2; font-weight: 700; margin-bottom: 30px; font-size: 2.5em; text-transform: uppercase;}

.pricing-section .pricing-container .pricing-blocks-div .pricing-block { 
	font-weight: 500; background: #FFFFFF; padding: 50px; text-align: center;
-webkit-box-shadow: 0px 0px 50px -20px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 50px -20px rgba(0,0,0,0.75);
box-shadow: 0px 0px 50px -20px rgba(0,0,0,0.75);
	margin-bottom: 30px;
	margin-left: 20px;
	margin-right: 20px;
}
.pricing-section .pricing-container .pricing-blocks-div .pricing-block h4 { font-weight: 700; color: #2059a2; font-size: 1.2rem; padding-bottom: 30px; border-bottom: 1px solid #a7a7a7; display: table; margin: 0 auto 50px auto;}
.pricing-section .pricing-container .pricing-blocks-div .pricing-block h2 { font-weight: 700; font-size: 4.5rem;}
.pricing-section .pricing-container .pricing-blocks-div .pricing-block h2 label { font-weight: 600; font-size: 2rem; position: relative;top: -25px; margin-right: 5px;}

.pricing-section .pricing-container .pricing-blocks-div .pricing-block .installation-firsttime { font-weight: 600; margin-bottom: 50px;}
.pricing-section .pricing-container .pricing-blocks-div .pricing-block ul { padding: 0; list-style: none; margin-bottom: 70px;}
.pricing-section .pricing-container .pricing-blocks-div .pricing-block .addtocart-area .addtocart-bar .quantity-box { display: none;}
.pricing-section .pricing-container .pricing-blocks-div .pricing-block .addtocart-area .addtocart-bar .quantity-controls { display: none;}
.pricing-section .pricing-container .pricing-blocks-div .pricing-block .btn-addtocart { font-weight: 600; border-radius: 0; padding: 9px 25px; text-transform: uppercase;}



/* CONTENT SECTION */

.content-section { padding: 60px 0; border-bottom: 5px solid #f2f2f2;}

.content-section .article-wrapper { }
.content-section .article-wrapper .page-header h2 { color: #2059a2; font-weight: 700; margin-bottom: 20px; padding-bottom: 15px; font-size: 2em; text-transform: uppercase; border-bottom: 1px solid #f2f2f2;}
.content-section .contact-wrapper .page-header h2 { color: #2059a2; font-weight: 700; margin-bottom: 20px; padding-bottom: 15px; font-size: 2em; text-transform: uppercase; border-bottom: 1px solid #f2f2f2;}



/* FOOTER WRAPPER */


.footer-wrapper { background: #FFFFFF; text-align: center; padding: 40px 0; font-weight: 500;}



/* CARTPAGE WRAPPER */

.cartpage-wrapper .vm-cart-header h1 { color: #2059a2; font-weight: 700; margin-bottom: 20px; padding-bottom: 15px; font-size: 2em; text-transform: uppercase; border-bottom: 1px solid #f2f2f2;}

.editaddresscart-wrapper .page-header h1 { color: #2059a2; font-weight: 700; margin-bottom: 20px; padding-bottom: 15px; font-size: 2em; text-transform: uppercase; border-bottom: 1px solid #f2f2f2;}
.editaddresscart-wrapper .page-header h2 { color: #2059a2; font-weight: 700; margin-top: 20px; margin-bottom: 20px; padding-bottom: 15px; font-size: 2em; text-transform: uppercase; border-bottom: 1px solid #f2f2f2;}
.editaddresscart-wrapper #userForm .chzn-container { width: 100%!important;}
.chzn-container { width: 100%!important;}


.orderlist-wrapper .page-header h1 { color: #2059a2; font-weight: 700; margin-bottom: 20px; padding-bottom: 15px; font-size: 2em; text-transform: uppercase; border-bottom: 1px solid #f2f2f2;}

.orderdetails-wrapper .page-header h1 { color: #2059a2; font-weight: 700; margin-bottom: 20px; padding-bottom: 15px; font-size: 2em; text-transform: uppercase; border-bottom: 1px solid #f2f2f2;}
.orderdetails-wrapper .vm-orders-items #tabs { display: none;}


.affiliatePanel-wrapper .page-header h1 { color: #2059a2; font-weight: 700; margin-bottom: 20px; padding-bottom: 15px; font-size: 2em; text-transform: uppercase; border-bottom: 1px solid #f2f2f2;}


.affiliateLostPasswordForm-wrapper .page-header h1 { color: #2059a2; font-weight: 700; margin-bottom: 20px; padding-bottom: 15px; font-size: 2em; text-transform: uppercase; border-bottom: 1px solid #f2f2f2;}


.affiliatePanel-wrapper div.affiliatePanelIcon h4 { position: relative; top: 17px;}


.popup .my-groovy-style { text-align: center; padding: 20px;}
.popup .my-groovy-style h4 { margin-bottom: 1.5rem;}
.popup .my-groovy-style .showcart.pull-right { }


@media (max-width: 1200px) {

	.header-wrapper .site-navbar .btn-buynow { margin-left: 0;}
	.header-wrapper .site-navbar .navbar-nav li a { font-size: 0.7rem;}
	
}


@media (max-width: 991px) {

	.header-wrapper .navbar { padding-left: 0; padding-right: 0;}
	.header-wrapper .navbar .navbar-toggler { color: #FFFFFF; font-size: 1.8rem;}
	.header-wrapper .navbar .navbar-collapse.show { border-top: 1px solid rgba(255,255,255,0.2);}
	.header-wrapper .site-navbar .navbar-nav li a { padding-right: 0.5rem; padding-left: 0.5rem;}
	.banner-section { padding-top: 160px;}
	.banner-section .banner-image .img-handphone { height: 510px;}
	.banner-section .banner-image .img-arrow { left: -50%; bottom: 34%;}
	.pluginfeatures-section .pluginfeatures-blocks-div .blocks-div { min-height: 250px; padding: 20px 30px;}
	.pricing-section .pricing-container .pricing-blocks-div .pricing-block { margin-left: 0; margin-right: 0;}
	
}


@media (max-width: 767px) {

	.header-wrapper { background: rgba(0, 0, 0, 0.7);}
	.header-wrapper .site-navbar .navbar-nav li a { font-size: 0.9rem;}
	.banner-section { padding-top: 130px;}
	.banner-section .banner-title { font-size: 1.7em;}
	.banner-section .banner-image { bottom: 0;}
	.banner-section .banner-image .img-handphone { height: 350px;}
	.banner-section .banner-image .img-arrow { width: 140px;}	
	.pricing-section .pricing-container .pricing-blocks-div .pricing-block { padding: 50px 25px;}
	.pluginfeatures-section .pluginfeatures-carousel-div .pluginfeatures-carousel .owl-dots .owl-dot { margin: 0 5px;}
	.testimonials-section .testimonials-carousel-div .testimonials-carousel .owl-dots .owl-dot { margin: 0 5px;}
	
}


@media (max-width: 575px) {

	.banner-section { padding-bottom: 400px;}
	.banner-section .banner-image { bottom: -50px;}
	.banner-section .btn-learnmore { margin-top: 10px;}
	.banner-section .banner-image .img-handphone { height: 400px;}
	.banner-section .banner-image .img-arrow { width: 125px; left: -19%; bottom: 36%;}
	
	.whyyouneedit-section .whyyouneedit-container .title { font-size: 2em;}
	.pluginfeatures-section .pluginfeatures-container .title { font-size: 2em;}
	.testimonials-section .testimonials-container .title { font-size: 2em;}
	.pricing-section .pricing-container .title { font-size: 2em;}
	
}