/*
Theme Name: www.syncagg.com
Theme URI: https://sandhills.com
Author: Sandhills
Author URI: https://sandhills.com
Description: Sandhills default template.
Version: 1.0
Text Domain: sandhills
Tags: Sandhills default
*/

/*--------------------------------------------------------------
## Primary Styles
--------------------------------------------------------------*/

:root {
		
	--blue: #0079D0; 
	
	--bright-blue: #0191FD;
	--cyan: #04FEFC;
	--dark-gray: #1C2024;
}

html, body {
	width:100%;
}
.wp-custom-header iframe,
.wp-custom-header img,
.wp-custom-header video {
	display: block;
	height: auto;
	max-width: 100%;
}
.wp-custom-header {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.wp-custom-header iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* Class for Google Map widget */
.google_map {
	width:100%; 
	min-height:58vh;
}
.navbar-default { 
	background-color:transparent!important;
	border-color:transparent!important;
}
.navbar {
	min-height:auto!important;
	margin-bottom:0!important;
}
.navigation-top {
	width:100%;
}
.menu li {
	width:auto!important;
	padding-right:6%;
	display:inline-block;
}
.menu li:last-child {
	padding-right:0!important;
} 
.menu li > a {
	color:#000;
	font-size:1.5em;
}
.dropdown-menu {
	background-color: rgba(0,0,0,0.7);
	color:orange;
	border-radius:0px;
}
.navbar-default .navbar-nav>li>a {
    color: #000;
	font-size:18px;
}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
	color:#e68a24;
}
.dropdown-menu:not(.head-list)>li>a {
    color: #000;
	font-size:16px;
	font-weight:400;
}
.dropdown-menu:not(.head-list)>li>a:hover {
    background-color: #e68a24;
    transition: linear 0.2s;
}

/* MY GLOBAL BODY STYLES */

* {box-sizing: border-box;}

.wid-90 {width: 90%; margin: 0 auto; max-width: 1750px;}

.flex {display: flex;}

.flex-1 {width: 100%;}

.center-block {display: block; margin: 0 auto;}


/*** MY TEXT STYLES ***/

h1, h2, h3, h4, h5, h6 { font-family: "Khand", sans-serif; }

p, li {
	font-family: "Figtree", sans-serif;
}

.bold-link {font-family: "Figtree", sans-serif; font-weight: 800;-webkit-transition:.3s ease-in;  
	-moz-transition:.3s ease-in;  
	-o-transition:.3s ease-in;  
	transition:.3s ease-in;}

.bold-link:hover {color: var(--blue) !important;}

.body-text {
	line-height: 2;
	font-weight: 400;
}

.lg-heading {font-size: 48px;
	font-weight: 700;
	line-height: 1;
}

.xl-heading {font-size: 64px;
	font-weight: 700;
	line-height: 1;
}

.sm-heading {font-family: Figtree;
font-size: 20px; letter-spacing: 2.2px;
text-transform: uppercase; font-weight: 500;}

p.sm-heading {margin-bottom: 5px;}

.white {color: #fff;}

.gradient-line {
	width: 100%;
	max-width: 500px;
	border: 0;
	height: 5px;
	background: linear-gradient(90deg, var(--bright-blue), var(--cyan));
	opacity: 1 !important;
}

/* BUTTONS */

.blue-btn {
	color: #FFF !important;
	font-family: "Figtree", sans-serif;
	font-size: 20px;
	font-weight: 800;
	text-transform: uppercase;
	background-color: var(--blue) !important;
	background-image: url("/wp-content/themes/www.syncagg.com/images/button-detail.svg");
	background-repeat: no-repeat;
	background-position: 0%;
	background-size: 50%;
	padding: 10px 26px;
	border-radius: 5px;
	position: relative;
	border: none;
	overflow: hidden;
	transition: all .5s;
}

.blue-btn:hover {
	background-color: var(--blue);
	color: #fff;
	background-size: 100%;
}

/*--------------------------------------------------------------
## HEADER
--------------------------------------------------------------*/

header {position: relative; z-index: 5;}

.top-header {background-color: var(--dark-gray); padding: 10px 0;}

.top-header .wid-90.flex {justify-content: space-between; gap: 20px 5%;}

.top-header .wid-90.flex div {width: 100%; max-width: 600px;}

.flex.header-socials {gap: 20px; justify-content: flex-end;}

.main-header {
	position: absolute; width: 100%;
background-image: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0));}

.main-header .wid-90.flex { justify-content: space-between; gap: 5px;}

.main-header .logo {max-width: 185px;}

.pri-menu-container {margin-top: 30px;}

/*--------------------------------------------------------------
## WIDGET STYLES
--------------------------------------------------------------*/

.left-gear {position: relative;}

.left-gear::before {
	content: "";
	position: absolute;
	bottom: -20%;
	left: -20%;
	width: 80%;
	max-width: 750px;
	aspect-ratio: 1 / 1;
	background-image: url("/wp-content/themes/www.syncagg.com/images/gear.svg");
	background-size: contain;
	background-repeat: no-repeat;
	
	/* Link the animation to the scroll container's scroll progress */
  animation-name: rotateOnScroll;
  animation-timeline: scroll(); /* Link to the document scroll */
  animation-iteration-count: 1;
  animation-fill-mode: both;
	animation-timing-function: ease-out;
}

.center-gear {position: relative; display: block;}

.center-gear::before {
	content: "";
	position: absolute;
	top: 10%;
	left: 50%;
	translate: -50%;
	width: 80%;
	max-width: 1000px;
	aspect-ratio: 1 / 1;
	background-image: url("/wp-content/themes/www.syncagg.com/images/gear.svg");
	background-size: contain;
	background-repeat: no-repeat;
	
	/* Link the animation to the scroll container's scroll progress */
  animation-name: rotateOnScroll;
  animation-timeline: scroll(); /* Link to the document scroll */
  animation-iteration-count: 1;
  animation-fill-mode: both;
	animation-timing-function: ease-out;
}

@keyframes rotateOnScroll {
  to {
    transform: rotate(190deg);
  }
}


.left-gear .top-content {position: relative; z-index: 10px;}

.abstract-bg {
	background-color: var(--dark-gray);
	background-image: url("/wp-content/themes/www.syncagg.com/images/abstract-bg.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/*--------------------------------------------------------------
## HOME PAGE TEMPLATE LAYOUT
--------------------------------------------------------------*/

.sync-service.flex {
	gap: 30px 5%;
	background: #000;
}

/*--------------------------------------------------------------
## SUB PAGE TEMPLATE LAYOUT
--------------------------------------------------------------*/



/*--------------------------------------------------------------
## SUB PAGE TEMPLATE LAYOUT
--------------------------------------------------------------*/

.contact-form {padding: 120px 0; max-width: 1000px;}
.contact-form h2, .contact-form label, .contact-form i {color: #fff;}

.contact-form h2 {font-weight: 600;}

/*--------------------------------------------------------------
## SERVICE CPT STYLES
--------------------------------------------------------------*/
.post-container-services {
	justify-content: center !important;
}

.service-tile {position:relative; display: block; margin: 0 10px 10px; overflow: hidden !important;
}

.service-tile .img-wrap {position: relative; border-radius: 5px; overflow: hidden;}

.service-tile img {display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 5px;}

.service-tile .img-wrap::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4));
	border-radius: 5px;
}

.service-title {
	position: absolute;
	bottom: 0;
	text-align: center;
	padding: 5px;
	width: 100%;
	transition: all .3s ease;
}

.service-info {position: absolute; bottom: -100%; transition: all .3s ease; z-index: -1; padding: 5px 5px 0;}

.service-title h3 {font-size: 24px; font-weight: 700; transition: all .3s ease;}

.service-info h3 {font-size: 24px; font-weight: 700;}

.service-tile:hover .service-info {margin-bottom: 0; opacity: 1; bottom: 0%; z-index: 0;}
.service-tile:hover .service-title {opacity: 0;}

/*--------------------------------------------------------------
## FEATURED EQUIPMENT CPT STYLES
--------------------------------------------------------------*/

.equip-card {
	background: #fff;
	padding: 30px;
	margin: 20px;
	height: calc(100% - 40px);
}

.equip-card img {
	display: block;
	width: 100%;
}

/*--------------------------------------------------------------
## QUALITIES CPT STYLES
--------------------------------------------------------------*/

.flex.quality {
	border-radius: 20px;
	border: 3px solid var(--blue);
	background: var(--dark-gray);
	padding: 25px;
	align-items: center;
	justify-content: center;
	gap: 15px 25px;
	margin: 40px;
	min-height: 300px;
	height: calc(100% - 80px);
}

.flex.quality .icon {
	font-size: 100px;
}

.flex.quality .desc { text-align: left;}
.flex.quality .desc h3 { font-size: 32px; font-weight: 700;}

/*--------------------------------------------------------------
## SLIDER STYLES
--------------------------------------------------------------*/

.dark-slider {position: relative; display: block;}

/*
.dark-slider::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-image: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0.3) 50%);
	z-index: 1;
}
*/

.top-content {position: relative !important; z-index: 3 !important;}

.dark-slider .slick-arrow i {
	padding: 5px 10px !important;
	border-radius: 20px !important;
}

.dark-slider .customSliderSlide { background-blend-mode: normal !important;}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/


.site-main .comment-navigation, .site-main
.posts-navigation, .site-main
.post-navigation {
	margin: 0 0 1.5em;
	overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	float: left;
	width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	float: right;
	text-align: right;
	width: 50%;
}

#wp-admin-bar-new-content-default {
	display: none;
}

/*--------------------------------------------------------------
## FOOTER
--------------------------------------------------------------*/
footer {
	background-color: #000;
	border-style: solid;
	border-top: 10px solid;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
	border-image: linear-gradient(90deg, var(--bright-blue), var(--cyan));
	border-color: #fff;
	border-image-slice: 1;
} 

.footer-bottom.flex {
	padding-bottom: 120px;
	width: 75%;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
}

.footer-bottom.flex .social-wrapper {
	width: 100%;
	max-width: 300px;
}

.footer-bottom.flex .social-wrapper #socials-flex {
	gap: 20px;
	justify-content: flex-end;
}

#socials-flex a {
	display: flex;
	height: 40px;
	width: 40px;
	justify-content: center;
	align-items: center;
	border: 2px solid var(--blue);
	border-radius: 20px;
	background-color: var(--dark-gray);
	transition: all .3s ease;
}

#socials-flex a icon {transition: all .3s ease;}

#socials-flex a:hover {border: 2px solid #fff;}

#socials-flex a:hover icon {
	color: #fff !important;
}

/*--------------------------------------------------------------
## INVENTORY
--------------------------------------------------------------*/


/*----INVENTORY STYLES ----*/

.container.cf {
	padding: 0 5% !important;
}

#inventory-wrapper, .body-wrapper {background-color: #000 !important; padding-top: 60px;}

.inv-header {
	padding-bottom: 30px;
	border-style: solid;
	border-bottom: 3px solid;
	border-left: 0;
	border-right: 0;
	border-top: 0;
	border-image: linear-gradient(90deg, var(--bright-blue), var(--cyan));
	border-color: #fff;
	border-image-slice: 1;
}

/*LISTINGS STYLES*/

.list-top-section .list-title .list-title-text, .list-content .listing-portion-title, .selected-header.cf, .faceted-section-title, .grouped-faceted-header, .linking-buttons a, span.price, .detail__specs-label {font-family: "Khand", sans-serif !important;}

.faceted-search-content .selected-facets-container .selected-facet, .list-content .list-error-container .info button:not(.login-button), span.option-name, .faceted-search-content .faceted-section-box .faceted-search, .faceted-search-content .faceted-section-box .faceted-btn-container .faceted-show-all-btn  {font-family: "Figtree", sans-serif !important;}



.faceted-search-content .faceted-search__top-section {border-bottom: none !important;}

.faceted-search-content .faceted-section-box .faceted-search, .faceted-search-content .faceted-section-box .faceted-btn-container .faceted-show-all-btn {background-color: var(--blue) !important;}

.faceted-search-content .selected-facets-container .selected-facet, .view-listing-details-link, .faceted-search-content .mobile-done-button-container .mobile-done-button, .list-content .list-error-container .info button:not(.login-button), .list-content .list-container .email-seller {background: var(--blue) !important;}

.list-listing-card-wrapper {background-color: #fff !important;}

.view-listing-details-link:hover, .faceted-search-content .mobile-done-button-container .mobile-done-button:hover, .list-content .list-container .email-seller:hover {background: #000 !important;}

.list-top-section .list-listings-count, .list-content .price-container .price {color: var(--blue) !important;}

.faceted-search-content .selected-facets-container .selected-header, .faceted-search-content .faceted-section-head .faceted-section-title {color: var(--blue);}

a.view-listing-details-link.des-view-listingDetails.template-branded-button {color: #fff !important;}

/*DETAIL PAGE STYLES*/

.listing-prices__retail-price, .listing-prices__discount-formatted-price, .listing-prices__alternate-retail-price, .listing-prices__exclusive-wholesale-price, .bread-crumbs-heading .return-links .return-links-link span, .bread-crumbs-heading .return-links .return-links-link i, .compare-listings-container .compare-container .comp-header-img .comp-title-close-cont .compare-title, .compare-listings-container .compare-container .compare-price, #no-compare-listings {color: var(--blue) !important;}

.cs-btns .ts-button, button#compare-page-print-this {background: var(--blue)!important;}

.cs-btns .ts-button:hover, button#compare-page-print-this:hover {background: #000 !important;}

button#detail-page-email-seller {border-radius: 3px;}

/*PARTS LISTINGS STYLES*/

.parts-list-content .parts-listing-container .part-list-price, .parts-list-content .parts-title-and-breadcrumbs .parts-listings-count {color: var(--blue) !important;}

.parts-redesign .parts-list-content .grid .parts-listing-container .view-listing-details-link {color: #fff !important;}

/*DARK THEME INVENTORY*/

h1.list-title, .faceted-search-field .fas, p.disclaimer, .faceted-search-content .faceted-section-box .faceted-date-range, .faceted-search-content .faceted-section-box .faceted-range .faceted-range-divider, .detail__specs-heading, .detail__title, .detail__category, .options-popper-div .options-popper-btn, .detail__details .payments-as-low-as-link, .detail__specs-value, .breadcrumbs__link, .detail__machine-location-label-text, h2.no-listings-found, p.ts-disclaimer.des-disclaimer, a#detail-page-print-this  {color: #fff !important;}

.faceted-search-content.visible .faceted-search-field .faceted-section-head, .faceted-search-content.visible .faceted-section-box, .faceted-search-content.visible .faceted-section-head .faceted-section-title, .faceted-search-content.visible .faceted-search__top-section {background-color: #fff !important;}

.faceted-search-content.visible button.ts-button.faceted-section-head.section-head .fas, .faceted-search-content.visible .faceted-search-field .fas,.list-listing-card-wrapper .options-popper-div .options-popper-btn, .show-all-modal .faceted-option-checkbox-container, h2#dialog-label, .show-closest-first-container .sort-button-spoof .sort-option-container .sort-option, .faceted-search-content.visible .faceted-section-head .faceted-section-title, .faceted-search-content.visible .selected-facets-container .selected-header, .bottom-region span, .bottom-region strong, span.section-title-text  {color: #000 !important;}

/*---------- RESPONSIVE STYLES ----------*/

@media only screen and (max-width: 1000px) {
	
}

/*==========  Non-Mobile First Method  ==========*/
@media only screen and (max-width : 1550px) {		
	.sync-service.flex, .flex.quality {flex-wrap: wrap;}
}

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {		
	.xl-heading {font-size: 56px;}
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 993px) {
	
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
	.sm-heading {font-size: 18px;}
	.lg-heading {font-size: 36px;}
	.xl-heading {font-size: 48px;}
	
	.flex.quality .desc h3 { font-size: 28px;}
}

@media screen and (max-width: 1200px) {
	.top-header{display: none;}
	.main-header {position: static; background-image: none; background-color: var(--dark-gray);}
	.main-header .wid-90.flex {align-items: center;}
	.pri-menu-container {margin-top: 0;}
}

/* Small Devices, Tablets */
@media only screen and (max-width : 767px) {
	.main-header .logo {max-width: 100px;}
	
	.footer-bottom.flex {width: 90%;}
	
	.sm-heading {font-size: 16px;}
	.lg-heading {font-size: 28px;}
	.xl-heading {font-size: 36px;}
	
	.flex.quality .desc h3 { font-size: 24px;}
	
	.contact-form {padding: 60px 0;}
}

@media only screen and (max-width : 700px) {
	.footer-bottom.flex, .footer-bottom.flex .social-wrapper #socials-flex {justify-content: center;}
	.footer-bottom.flex .white.body-text, .social-wrapper {width: 100%; text-align: center;}
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
	.blue-btn {width: 100%;}
	
	.xl-heading {font-size: 32px;}
}