/*
 * Theme Name: VDS Child Theme for Twentyseventeen
 * Description: Twenty Seventeen Child Theme 2018 Templates
 * Template: twentyseventeen
 * Author(s): VDS Developers
 * Here's The One You Need...
 */


/* mobile menu fix - CL - 9/3/21 */
@media (max-width: 979px) {
    .main-navigation.display-tablet.toggled-on ul#top-menu ul.sub-menu {
        width: 100%;
    }
}

/*-------- Header --------*/

/* New 2018 Pro Additions */

/* Top Nav */

ul#sidebar {
    margin-bottom: 0;
}

/*@media (min-width: 980px) {
    .display-tablet {
        display: none !important;
    }
}*/

@media (max-width: 767px) {
    /*.hide-tablet {
        display: none;
    }*/
    .top-widget .span6.left,
    .top-widget .span6.right {
        width: 50%;
        padding: 0;
    }
}

.top-widget a,
.top-widget .span6.right a {
    box-shadow: none !important;
    letter-spacing: 0.5px;
    text-shadow: none;
}

header .top-widget p {
    margin: 0;
}

ul.social li:last-child {
    margin-right: 0;
}

/* Menu Links */

ul#top-menu ul.sub-menu {
    padding: 10px 0px;
}

#top-menu ul.sub-menu li {
    padding: 5px 15px;
}


/* Fix admin bar overlap */

@media (min-width: 768px) {
    .admin-bar {
        margin-top: 32px;
    }
}

@media (max-width: 767px) {
    .admin-bar {
        margin-top: 0px;
    }
    #wpadminbar {
        display: none;
    }
}

/* HEADER STYLES */


/* mobile toggle */
.toggled-on ul#top-menu button.dropdown-toggle {
    top: 30px;
}

.toggled-on ul#top-menu li a { /* fixes fullwidth link */
    width: fit-content;
}


/* Logo Left + Nav Right */
.site-header {
    background-color: transparent;
}
header {
    z-index: 1;
}
#top-menu li {
    padding: 24px 10px; /* Work with the top/bottom padding to make it fill out to the top/bottom edge of the .top-header */
}
ul#top-menu li a {
    padding: 0;
}
body .left-right-header .site-branding {
    padding: 0;
    top: 15px; /* this will need adjusting based on header height + logo size! */
}
body .left-right-header .navigation-top {
    background: transparent;
    position: relative;
    border-bottom: 0;
    border-top: 0;
    float: right;
    width: 86%;
}
.left-right-header .nav-and-button {
    float: right;
}
@media (min-width: 980px) {
    .top-header.left-right-header nav {
        float: left;
        padding-right: 15px;
    }
}
.left-right-header .header-button {
    float: left;
}

.left-right-header .header-button .btn-default {
    position: relative;
    top: 12px;
}
body .left-right-header .logo {
    float: left;
    width: 14%;
}
.left-right-header .menu-toggle {
    font-size: 43px;
    display: block;
    float: right;
    padding: 0;
    margin-top: 0;
}
.left-right-header .menu-toggle .icon {
    margin-right: 0;
    top: 0;
}
.left-right-header .menu-toggle:hover,
.left-right-header .menu-toggle:focus {
    box-shadow: none;
    -webkit-box-shadow: none;
    background-color: transparent;
}
.left-right-header .menu-toggle:focus {
    outline: none;
}

@media (max-width: 767px) {
    .left-right-header .header-button {
        margin-right: 25px;
    }
    body .left-right-header .menu-toggle {
        margin-top: 12px;
    }
    .left-right-header .header-button .btn-default {
        top: 10px;
    }
    .left-right-header nav#site-navigation {
        position: absolute;
        width: 100%;
        left: 0;
    }
    .js .left-right-header .main-navigation.toggled-on > div > ul {
        display: block !important;
        padding: 10px 30px;
        background: rgba(0, 0, 0, 0.94);
    }
    .left-right-header .main-navigation.toggled-on ul#top-menu li a {
        color: #FFF;
    }
    .left-right-header .main-navigation.toggled-on ul.top-menu {
        display: block;
    }
}

/* End Logo Left + Nav Right */



/* Logo Top + Nav Bottom */

.top-bottom-header .site-branding {
    padding: 0;
}

.top-bottom-header .logo {
    justify-content: center;
    padding: 15px 0px;
    display: flex;
    width: 100%;
}

.top-bottom-header .navigation-top {
    background: transparent;
    position: relative;
    max-width: 768px;
    border-bottom: 0;
    margin: 0 auto;
    border-top: 0;
    width: 100%;
}

.top-bottom-header .nav-and-button {
    border-top: 2px solid #bababa;
    justify-content: center;
    display: flex;
}

.top-bottom-header .header-button {
    float: left;
}

.top-bottom-header .navigation-top nav {
    float: left;
}

.top-bottom-header .header-button .btn-default {
    position: relative;
    top: 12px;
}

.js .top-bottom-header .main-navigation.toggled-on > div > ul {
    display: block !important;
    padding: 10px 30px;
    background: rgba(0, 0, 0, 0.94);
}

.top-bottom-header .main-navigation.toggled-on ul#top-menu li a {
    color: #FFF;
}

@media (max-width: 767px) {
    .top-bottom-header .navigation-top {
        max-width: 300px;
    }
    body .top-bottom-header .menu-toggle {
        margin: 0px 0px 0px 0px;
    }
    .top-bottom-header .header-button {
        margin-right: 25px;
    }
    .top-bottom-header .nav-and-button {
        padding: 15px 0px;
    }
    .top-bottom-header .header-button .btn-default {
        top: 0px;
    }
    .top-bottom-header nav#site-navigation {
        position: absolute;
        width: 100%;
        left: 0;
    }
    .top-bottom-header .menu-toggle .icon {
        margin-right: 0;
    }
}


/* End Logo Top + Nav Bottom */


/* Logo Left + Hamburger Right */

body .hamburger-header .site-branding {
    padding: 0;
    top: 15px; /* this will need adjusting based on header height + logo size! */
}
body .hamburger-header .navigation-top {
    background: transparent;
    position: relative;
    border-bottom: 0;
    border-top: 0;
    float: right;
    width: 86%;
}
.hamburger-header .nav-and-button {
    float: right;
}
.top-header.hamburger-header nav {
    float: left;
    /*padding-right: 15px;*/
}
.hamburger-header .header-button {
    float: left;
    margin-right: 25px;
}
.hamburger-header .header-button .btn-default {
    position: relative;
    top: 12px;
}
body .hamburger-header .logo {
    float: left;
    width: 14%;
}

@media (min-width: 1px) {
    .js .hamburger-header .menu-toggle {
        font-size: 43px;
        display: block;
        float: right;
        padding: 0;
    }
    .hamburger-header .main-navigation ul ul.toggled-on {
        display: block;
    }
    .hamburger-header .menu-toggle .icon {
         margin-right: 0;
         top: 0;
    }
    .hamburger-header .menu-toggle:hover,
    .hamburger-header .menu-toggle:focus {
        box-shadow: none;
        -webkit-box-shadow: none;
        background-color: transparent;
    }
    .hamburger-header .menu-toggle:focus {
        outline: none;
    }
    .hamburger-header .dropdown-toggle.toggled-on .icon {
        transform: rotate(-180deg);
        -ms-transform: rotate(-180deg); /* IE 9 */
        -webkit-transform: rotate(-180deg); /* Chrome, Safari, Opera */
    }
    .hamburger-header .toggled-on .menu-toggle .icon-bars,
    .hamburger-header .menu-toggle .icon-close {
        display: none;
    }
    .js .hamburger-header .main-navigation ul,
    .hamburger-header .main-navigation .menu-item-has-children > a > .icon,
    .hamburger-header .main-navigation .page_item_has_children > a > .icon,
    .hamburger-header .main-navigation ul a > .icon {
        display: none !important;
    }
    .js .hamburger-header .main-navigation.toggled-on > div > ul {
        display: block !important;
        padding: 10px 30px;
        background: rgba(0, 0, 0, 0.94);
    }
    .hamburger-header .main-navigation.toggled-on ul#top-menu li a {
        color: #FFF;
    }
    .hamburger-header .main-navigation.toggled-on ul.top-menu {
        display: block;
    }
}

@media (min-width: 768px) {
    .hamburger-header nav#site-navigation {
        position: absolute;
        width: 100%;
        left: 0;
    }
    .js .hamburger-header .main-navigation.toggled-on ul.sub-menu {
        display: block !important;
    }
    .js .hamburger-header .main-navigation.toggled-on li .dropdown-toggle {
        display: block;
        left: 14px;
        top: 35px;
    }
}

@media (max-width: 767px) {
    body .hamburger-header .menu-toggle {
        margin-top: 12px;
    }
    .hamburger-header .header-button .btn-default {
        top: 10px;
    }
    .hamburger-header nav#site-navigation {
        position: absolute;
        width: 100%;
        left: 0;
    }
    .js .hamburger-header .main-navigation.toggled-on ul.sub-menu {
        display: none;
    }
    .hamburger-header .main-navigation ul ul.toggled-on {
        display: block !important;
    }
}

/* End Logo Left + Hamburger Right */

/* Top Banners */

.home .row.default-header {
    text-align: center;
}

.home .page-title {
    margin-top: 350px;
}

.row.default-header {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top left;
}

.row.default-header .wrapper {
    max-width: none;
    width: 90%;
}

.vds-builder {
    /*margin-top: -80px;*/
}

/* Headings */

h1 {
    font-family: Raleway;
}

/* Footer */

footer#colophon .row {
    padding-top: 40px;
    padding-bottom: 20px;
}

footer#colophon a:hover,
footer .widget a {
    box-shadow: none;
}

footer .widget {
    padding: 0;
}

footer .widget {
    margin-bottom: 15px;
}

footer .widget h5 {
    margin-bottom: 5px;
}

footer ul.social li a {
    transition: 0.3s ease-in-out;
}

footer ul.social li a:hover {
    transition: 0.3s ease-in-out;
}


/* End New 2018 Pro Additions */




body .site-branding a:hover,
body .site-branding a:focus {
    opacity: 1;
}



body .main-navigation ul li.menu-item-has-children.focus:before,
body .main-navigation ul li.menu-item-has-children:hover:before,
body .main-navigation ul li.menu-item-has-children.focus:after,
body .main-navigation ul li.menu-item-has-children:hover:after,
body .main-navigation ul li.page_item_has_children.focus:before,
body .main-navigation ul li.page_item_has_children:hover:before,
body .main-navigation ul li.page_item_has_children.focus:after,
body .main-navigation ul li.page_item_has_children:hover:after {
    display: none;
}

body .navigation-top ul ul {
    border: none;
}

.navigation-top.site-navigation-fixed {
    display: none;
}

.custom-logo-link img {
    max-height: 100px;
}

.top-widget a {
    transition: 0.3s ease-in-out;
}

.top-widget a:hover,
.top-widget a i:hover {
    transition: 0.3s ease-in-out;
    box-shadow: none;
}

.top-widget .widget {
    padding-bottom: 0;
}

.top-widget ul.social {
    text-align: right;
    margin: 0;
}

/*-------Products - Individual ------------*/

.product-hero {
    height: 453px;
}

#tab-description h2 {
	display: none;
}


/*--------Products - Cateogory -------*/

ul.products li.product {
    display: flex;
    flex-direction: column;
    height: 615px;
}

ul.products li.product p {
	margin-bottom: auto;
}

.product-hero h1 {
    margin-top: 82px;
}

@media (max-width: 767px) {
	.product-hero h1 {
		margin-top: 40px;
		font-size: 35px;
		line-height: 1.2;
	}
}

@media (min-width: 979px) and (max-width:1100px) {
        ul.products li.product {
        height: 715px;
    }
}

@media (min-width: 767px) and (max-width:978px) {
        ul.products li.product {
        height: 740px;
    }
}



/*-------- End Header --------*/

/* Copyright Row */

.copyright-text.centered p {
    text-align: center;
    margin: 0;
}

.copyright ul.social {
    line-height: 0;
}

.copyright ul.social li a i {
    font-size: 16px;
}

@media (max-width: 767px) {
    .copyright .span6 {
        margin: 5px 0px;
        float: none;
    }
}

@media (max-width: 480px) {
    .copyright .span6 {
        clear: both;
    }
    div.row.copyright .span6 p,
    div.row.copyright .span6 ul {
        text-align: center;
        float: none;
    }
}

.woocommerce-product-gallery .woocommerce-product-gallery__image img {
	height: auto;
	max-width: 100%;
	max-height: 413px;
	width: auto;
}

@media(min-width: 767px) {
	.woocommerce-loop-product__title {
		/*min-height: 120px;*/
	}
}

.page-id-1620 p.woocommerce-shipping-destination {
    display: none;
}

/*Reposition the checkout button*/
@media screen and (min-width: 768px){
    .page-id-1620 .wc-proceed-to-checkout {
        float: right;
        width: 50%;
    }
}

/*Override the light button*/
a.lightButton {
    color: #ffffff !important;
    font-size: 14px !important;
    background-color: #000000 !important;
}
a.lightButton:hover{
	color: #000000 !important;
    background-color: #ffffff !important;
}


.top-widget {
    line-height: 0px;
}