/*
 Theme Name:   MD Juan
 Theme URI:    http://mdjuan.com.ph/
 Description:  Cooltech theme
 Author:       Juanxi
 Author URI:   juanxi
 Template:     vantage
 Version:      1.1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  cootech
*/

/* ============================== */
/* SITE */
/* ============================== */
#main {padding-top:0;background: #ffffff;}
body.woocommerce #main, body.woocommerce-account #main {padding-top:30px;}
h3.widget-title, h1#page-title {font-size:44px !important; margin:0; text-transform: uppercase; letter-spacing: -1.5px;}
h3.widget-title:after, h1#page-title:after {content:''; border:3px solid #d60000; width:100px; display:block; margin-top:10px; margin-bottom:10px; background-color:#d60000;}

#secondary h3.widget-title {font-size:20px !important; font-weight:normal !important; letter-spacing: -.5px;}
#secondary h3.widget-title:after {margin-top:5px; margin-bottom:10px; border:0px;}
#secondary aside {border:1px solid #efefef; padding:5px 15px; margin-bottom:20px !important;}

#secondary aside li.current-cat-parent > a {font-weight:bold;}
#secondary aside li.current-cat a {font-weight:bold;}

#secondary aside a {color:#555; line-height:16px !important; display:block; margin-bottom:4px; font-size:12px;}
#secondary aside a:hover {text-decoration: underline !important;}

.contentaligncenter {text-align:center;}
.contentaligncenter h3.widget-title:after {margin: auto;}
.contentwhite, .contentwhite h3 {color:#fff;}
.contentwhite a {color:#fff; text-decoration: none;}
.headspacingfix .so-panel {margin:0 !important;}
.headsmalltxt {margin:0 !important; text-transform: uppercase;letter-spacing:2px;}
/* === TOP SEARCH === */

form.searchform button {display:none;}
/* === WOOCOMMERCE === */
.woocommerce-product-gallery {border:1px solid #efefef;}
h2.woocommerce-loop-product__title, h2.woocommerce-loop-category__title {font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 800; line-height: 16px;padding:0 !important;}
h2.woocommerce-loop-category__title {text-align:center; padding:10px!important; position:absolute; bottom:0px; background-color:#fff; margin:10px!important; color:#333;}
.woocommerce ul.products li.product-category img{margin:0 !Important;}

#secondary aside.widget_aws_widget {border:0;padding:0;background-color:#efefef;}
#secondary aside.widget_aws_widget h3 {display:none;}
#secondary aside.widget_aws_widget input{border:0; padding:10px 10px 10px 35px; background:none;}
#secondary {position:relative;}
#secondary aside.widget_aws_widget:after {content:''; color: #555; position: absolute; top:11px; left:8px; margin-top: 2px; margin-left: 3px; width: 8px; height: 8px; border: solid 3px currentColor; border-radius: 100%;}
#secondary aside.widget_aws_widget:before {color: #555; content: ''; position: absolute; top: 24px; left: 9px; height: 6px; width: 3px; background-color: currentColor; -webkit-transform: rotate(45deg); transform: rotate(45deg);}

.woocommerce .button {border:0 !important;background:#2300fa !important; color:#fff !important; max-width:100% !important; text-align: center; display: inline-block; margin:8px !important; border-radius:20px !important; text-transform: uppercase; font-size: 12px !important; padding:10px 20px !important;}

.woocommerce .single_add_to_cart_button {margin-top:5px !important;}
.woocommerce .button:hover {background:#0052fa !important; color:#fff !important;}
.woocommerce ul.products li {margin-bottom:60px !important;}
.woocommerce ul.products li:hover {box-shadow: 0px 0px 5px #ccc;}
.woocommerce ul.products li .listtitlecont {min-height:65px;}
.woocommerce ul.products li a.woocommerce-LoopProduct-link {display:block;padding:8px !important; color:#555; line-height: 18px;}
.woocommerce ul.products li .attribute-make {text-transform:capitalize; font-size:11px; color:#666;}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {float:left; margin:0 1% 2.992em 0; padding:0; position:relative; width:22.05%; margin-left:0}
.woocommerce ul.products li.first, .woocommerce-page ul.products li.first{clear:both}
.woocommerce ul.products li.last,.woocommerce-page ul.products li.last{margin-right:0}
.woocommerce ul.products.columns-3 li.product,.woocommerce-page ul.products.columns-3 li.product{width:32.55%}
.woocommerce ul.products.columns-5 li.product,.woocommerce-page ul.products.columns-5 li.product{width:19.1%}
@media (max-width: 800px) {
    .woocommerce ul.products.columns-3 li.product,.woocommerce-page ul.products.columns-3 li.product{width:49%;}
    .woocommerce ul.products.columns-5 li.product,.woocommerce-page ul.products.columns-5 li.product{width:49%;}
}
section.related ul.products.columns-4 li{max-width:25% !important; margin-right:0 !important; width:25%;}


/* === HEAD === */
#masthead.masthead-logo-in-menu .logo > img {max-height: 53px; width: auto; height: auto; max-width: 100%; transition: 0.3s;}
/* === STICK MENU === */
.main-navigation.sticky{}
.main-navigation.sticky .logo img {max-height: 33px !important;}

.main-navigation ul li a {padding-left: 10px; padding-right: 10px; font-weight: normal; text-transform: uppercase; font-size:11px;letter-spacing: 1px;}

/* ============================== */
/* HOMEPAGE */
/* ============================== */

/* Main Banner */
.homebanner {text-align:center;position:relative; }
.homebanner h1{font-size:46px !important; font-weight:600; text-transform: uppercase; text-align:center; background-color:rgba(0,0,0,.8); color:#fff; display:inline; line-height:72px !important; margin:0px !important; padding:0 !important; padding-bottom:0px !important;}
.homebanner h1:after {content:''; border:3px solid #d60000; width:100px; display:block; margin: auto; margin-top:10px; margin-bottom:10px;}
.homebannertxtcont {margin:0 auto; width:100%; max-width:500px; padding-top:160px; padding-bottom:160px;}

.mdmountain {position: absolute; bottom:0; max-width:400px;}
.mdmountain img {display:block;}

.mdtuv {position: absolute; bottom:10px; right:20px; max-width:80px;}
.mdtuv img {display:block;}


a.buttonmain {display:inline-block; background-color:#2300fa; text-decoration: none; padding:10px 20px; color:#fff !important; font-weight:bold; border-radius: 5px; width:100px; text-align:center;}
a.buttonsecond {display:inline-block; background-color:rgba(0,0,0,.70); border:2px solid #fff;text-decoration: none; padding:8px 20px; color:#fff; font-weight:bold; border-radius: 5px; width:100px; text-align:center;}

/* 2nd row */

.homepcateg {text-align:center;}
.homepcateg a {color:#666; text-decoration: none; font-size:12px;}
.homepcateg h3.widget-title {font-weight:400 !important;}
.homepcateg h3.widget-title:after {display:none;}

/* 3rd row */

#homeabtrow {background: rgb(18,22,141); background: linear-gradient(180deg, rgba(18,22,141,1) 0%, rgba(23,27,176,1) 35%, rgba(5,7,47,1) 100%);}

.haboutmask {
    -webkit-mask:url("https://mdjuan.com.ph/svg/h-aboutus.png");
    mask: url("https://mdjuan.com.ph/svg/h-aboutus.png");
    /*
    -webkit-mask:url("http://localhost/mdjuannew/svg/h-aboutus.png");
    mask: url("http://localhost/mdjuannew/svg/h-aboutus.png");
    */
    -webkit-mask-size:cover;
    mask-size:cover;   
}
.prodnamevert {z-index:1;top:25%; left:1%; color:#fff; text-transform: uppercase; position:absolute; font-size:10px; letter-spacing: 2px;writing-mode: vertical-rl;text-orientation: use-glyph-orientation; transform: rotate(180deg);}


/* 4th row */

.dealerlogo img {border:1px solid #dedede; border-radius:10px;}
/*dealer page*/
.dealerpgsc img{border:1px solid #dedede; border-radius:10px; overflow: hidden; overflow: hidden;}
.dealerpgsctxt {padding:10px; border-radius:10px; overflow: hidden;}

/* ============================== */


/* ========================================================= */
/* FOOTER */
/* ========================================================= */
.footcateglink {color:#666; text-decoration:none; text-transform: uppercase;}


.footsubcateglink {color:#666; text-decoration:none;font-weight:300;}
.footsubcateglink:after {content:", ";white-space: pre;}
.footsubcateglink:last-child:after {content: ''}

#footer-widgets h3.widget-title {font-size:20px !Important; letter-spacing: .5px;}
#footer-widgets h3.widget-title:after {border:1px solid #d60000;}
#footer-widgets ul.menu li a {border:0 !important;}

/* ========================================================= */
/* ABOUT PAGE */
/* ========================================================= */
.aboutprof {max-width:600px; margin: auto; padding-top:50px; background-color:#efefef; padding:20px; margin-top:40px;}
.aboutprof ul{margin-left:0;}


/* ========================================================= */
/* CONTACT PAGE */
/* ========================================================= */
.pgcontactform input[type=text], .pgcontactform input[type=email], .pgcontactform textarea {border:0; background-color:#efefef; border-radius: 0px; margin-bottom:15px; width:100%;}
.pgcontactrow {clear:both; margin-bottom:20px;}
.pgcontactcl {position:absolute; width:40px;}
.pgcontactcr {margin-left: 40px;}
span.contacticonw {display:inline-block; border:1px solid #fff; width:23px; height:23px; text-align:center; border-radius: 100%; line-height:24px;}


/* ========================================================= */
/* BLOG PAGE */
/* ========================================================= */
.facebook-responsive {overflow:hidden; padding-bottom:56.25%; position:relative; height:0;}
.facebook-responsive iframe {left:0; top:0; height:100%; width:100%; position:absolute;}



body.single-post #primary .site-content {max-width:800px; width:100%; margin: auto; margin-top:50px;}
body.single-post #secondary {padding-top:50px;}
body.category #primary, body.blog #primary {width:100%; }
body.category #primary .site-content, body.blog #primary .site-content {max-width:100%; width:100%; margin: auto; margin-top:50px;}

.vantage-grid-loop {margin-top:50px;}

.vantage-grid-loop article .excerpt{display:none;}
.vantage-grid-loop article .excerpt a {display: block; text-decoration: none; border:1px solid #666; color:#666; padding: 8px; text-align:center; width:150px; margin-top:20px;}
.vantage-grid-loop article h3{font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size:22px; line-height:26px; min-height:80px;}
.vantage-grid-loop article a.grid-thumbnail {border:0; padding:0; box-shadow: none;}
.vantage-grid-loop article a.grid-thumbnail:hover {box-shadow: none;}
.vantage-grid-loop article ul.post-categories {list-style: none; margin:0 !important;}
.vantage-grid-loop article ul.post-categories li {}
.vantage-grid-loop article ul.post-categories li a {text-decoration: none; text-transform: uppercase; font-size:12px; color:#666;}


/* FROSTED GLASS EFFECT */
.homebannerwhitebg {
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px) saturate(160%) contrast(45%) brightness(120%);
    -webkit-backdrop-filter: blur(10px) saturate(160%) contrast(45%) brightness(120%);
    padding:50px 20px !important;
    margin-top:140px !important;
    margin-bottom:140px;
}


.homebannerwhitebg div {position: relative; display:block;  z-index: 1;}
.homebannerwhitebg div img {display:block; width:90%; margin-bottom:3px!important; padding:5px 0; margin:auto;background:inherit;}

.homevidbanner {padding:170px 20px; max-width:500px; margin: auto !important;}
.homevidbanner h1 {background: none; display:block; text-shadow: 2px 2px 30px #000000 !important; font-size:62px !important;}
.homevidbanner div {font-size:24px; color:#fff; clear: both !important; font-weight:300; text-shadow: 2px 2px 70px #000000 !important;}
.homebuttonplay {display:inline-block; background-color:#2300fa; text-decoration: none; padding:10px 20px; color:#fff !important; font-weight:bold; border-radius: 20px; width:150px; text-align:center;}
.homebuttonplayic {display:inline-block; border:2px solid #fff; border-radius: 100%; color:#fff; width:28px !important; height:28px !important; font-size:18px; padding:10px;}
.fbvideopop {width:100%; max-width:1000px !important; background: #000 !important; padding-left:0 !important;padding-right:0 !important;}