/*
Theme Name: www.gleohio.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
*/
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
/*--------------------------------------------------------------
## Primary Styles
--------------------------------------------------------------*/

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;
}

/*--------------------------------------------------------------
## 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;
}

/*-------- BODY STYLES --------*/
*{box-sizing:border-box;}
body {font-family:var(--body);}
h1, h2, h3, h4, h5{font-family:var(--heading);}
a{text-decoration:none!important;} 

/*---CSS custom properties ---*/
:root { --primary: #071A37; 
	--secondary: #F3B829; 
	--heading: 'Oswald', sans-serif; 
	--body: 'Arial', sans-serif; }

/*---Utility classes ---*/
.width{max-width:1700px; margin:0 auto!important; width:96%; box-sizing:border-box;}
.width2{max-width:1200px; margin:0 auto!important; width:96%; box-sizing:border-box;}
.btn{display:inline-block; font-weight:500; font-size:15px; margin:3px; padding:10px 20px; align-items:center; text-transform:uppercase; border-radius:4px; transition:background-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease; font-family:var(--heading);}

.yellow::after, .trans::after, .border::after{content:'\f061'; padding-left:10px; font-family:'Font Awesome 5 Free'; font-weight:900; font-size:16px; transition:transform .25s ease;}
.yellow:hover::after, .trans:hover::after, .border:hover::after, .black:hover::after{padding-left:20px; }

.full-width-link{border:none!important; display:flex!important; flex-direction:row; justify-content:space-between; align-items:center; width:100%; padding:10px 10px; transition:.3s ease; text-transform:uppercase; font-family:var(--heading); font-weight:600; font-size:16px; background-color:transparent; color:#000; border-radius:0!important; border-bottom:solid 1px #ccc!important;}
.full-width-link::after{content:'\f061'; color:var(--secondary); font-family:'Font Awesome 5 Free'; font-weight:900; font-size:16px; transition:transform .25s ease;}
.full-width-link:hover{padding:10px 20px;}
.yellow:hover{color:#000;}

.border{background:transparent!important; color:#fff; border:solid 1px #fff!important; transition:.3s ease;}
.yellow{background:var(--secondary)!important; color:#000; border:solid 1px var(--secondary); transition:.3s ease;}
.trans{background:transparent!important; color:var(--secondary); border:none; font-weight:600; padding:10px 0!important; transition:.3s ease;}
.black{background:#000!important; color:#fff; transition:.3s ease; }
.black::after{content:'\f061'; color:var(--secondary); padding-left:10px; font-family:'Font Awesome 5 Free'; font-weight:900; font-size:16px; transition:transform .25s ease;}
.black:hover{color:#fff;}
.trans:hover, .border:hover{color:#fff!important;}

.heading1{font-size:clamp(40px, 7vw, 90px); font-weight:800; font-family:var(--heading); text-transform:uppercase; line-height:1; 
}
.detail{font-size:clamp(20px, 2.5vw, 30px); font-weight:400!important; text-transform:uppercase; font-family:var(--heading); line-height:1.1;
}
.small-detail{font-size:clamp(16px, 2vw, 22px); font-weight:400!important; text-transform:uppercase; font-family:var(--heading); line-height:1.1;
}
.heading2{font-size:clamp(25px, 5vw, 45px); font-weight:600; font-family:var(--heading); text-transform:uppercase; line-height:1;
}

.heading3{font-size:clamp(20px, 2vw, 25px); font-weight:600; font-family:var(--heading); line-height:1.1; text-transform:uppercase;}

.paragraph{font-size:clamp(15px, 2vw, 17px); line-height:24px; font-family:var(--body);}

.pad{padding:clamp(20px, 3vw, 30px) 10px;}




/*--- HEADER STYLES ---------------------*/
.header{width:100%; background:var(--primary); color:#fff;}
.header-row{display:flex; flex-direction:row; justify-content:space-between; align-items:center;}
.logo{width:170px; padding:10px; background:#fff; margin-bottom:-60px; z-index:200;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  img{width:100%; height:auto; display:block;}
}

.header-right{width:calc(100% - 170px); 
  .header-right-top{width:100%; border-bottom:solid 1px #555768; align-items:center;
    a{padding:8px; display:block; font-size:16px; font-family:var(--body);
      i{color:var(--secondary)!important; padding-right:8px;}
    }
  }
  .header-right-bottom{width:100%; display:flex; flex-direction:row; justify-content:flex-end; align-items:center;
  }
}


/*--------Hero---------*/
.hero-text{max-width:1700px; margin:0 auto!important; width:96%!important; color:#fff;
  p{padding:20px 0;}
}

/*-------QLS--------*/
.ql{width:calc(100% - 10px); margin:5px; color:#fff; border-radius:8px; position:relative;
  img{width:100%; height:250px; object-fit:cover; border-radius:8px 8px 0 0;}
  .grad{z-index:10; width:100%; height:250px; position:absolute; top:0; left:0; 
    background:linear-gradient(to bottom, rgba(0,0,0,0) 50%, var(--primary) 100%);}
  .ql-text{width:100%; z-index:20; border-radius:0 0 8px 8px; position:relative; text-align:left!important; background:var(--primary); padding:0 20px 20px; color:#fff; 
    h3{color:#fff; min-height:61px; font-size:clamp(22px, 2.5vw, 28px); align-content:center; display:flex; flex-direction:row; justify-content:flex-start; align-items:center; }
    icon{color:transparent!important; margin-top:-60px; -webkit-text-stroke:1px var(--secondary); display:block; padding:5px; font-size:40px;}
    p{color:#fff; padding:10px 0; margin:0; min-height:92px;}
  }
}
.ql:hover{transform:translateY(-5px); transition:transform .25s ease-in-out;}

/*----About----*/
.yellow-angle{position:relative; min-height:500px;}
.yellow-angle:before{content:""; position:absolute; left:-1px; top:0; width:40%; height:100%; background:var(--secondary);
     clip-path: polygon(0% 0%, 28.25% 0%, 0% 100%, 0% 100%); z-index:1;}

.xcmg-sec{position:absolute; bottom:-540px; height:250px!important; max-width:350px; left:90px; background:rgba(0,0,0,.8)!important; color:#fff; padding:20px; border-left:solid 4px var(--secondary); z-index:10; 
}

.icon-lrg{border-right:solid 1px #000; padding:0 15px; margin-top:70px;
  icon{font-size:45px!important; color:transparent!important; -webkit-text-stroke:2px #000; display:block; padding:5px; margin-top:-50px;}
}
.icon-lrg-last{ padding:0 15px; margin-top:70px;
  icon{font-size:45px!important; color:transparent!important; -webkit-text-stroke:2px #000; display:block; padding:5px; margin-top:-50px;}
}
  .xcmg-img{margin-right:20px!important;}
/*---Industry Links----*/
.ind{display:block; width:calc(100% - 10px); margin:5px; border-radius:8px; position:relative; overflow:hidden;
  img{width:100%; height:250px; object-fit:cover; border-radius:8px 8px 0 0;}
  .grad{z-index:10; width:100%; height:250px; position:absolute; top:0; left:0; 
    background:linear-gradient(to bottom, rgba(0,0,0,.3) 10%, rgba(0,0,0,.9) 100%);}
    .ind-text{position:absolute; text-align:left!important; z-index:20; width:calc(100% - 30px); bottom:15px; left:15px; right:15px;
      h3{color:#fff; margin:0; font-size:clamp(22px, 2.5vw, 28px); text-transform:uppercase; align-content:center; display:flex; flex-direction:row; justify-content:flex-start; align-items:center; }
      p{color:#fff; padding:10px 0; margin:0; width:80%;}
      i{background:var(--secondary); color:#000; padding:5px 10px; position:absolute; right:0; bottom:0; height:50px; width:50px; display:flex; flex-direction:row; justify-content:center; align-items:center; font-size:20px;}
    }
    &:hover img{transform:scale(1.05); transition:transform .25s ease-in-out;}
}



/*---------Pages----------*/
.bread{font-size:16px; color:#dadada; 
  a{color:#dfdfdf; text-decoration:none; transition:color .25s ease;
    &:hover{color:var(--secondary);}
  }
}

.cf{margin-top:30px;}

.boxes{display:flex; flex-direction:row; justify-content:flex-start; flex-wrap:wrap; gap:15px; 
  .yellow-box{border-left:solid 4px var(--secondary); width:calc(50% - 15px); padding:15px; background:#f4f4f4; display:flex; flex-direction:row; gap:10px;}
  i, icon{color:transparent!important; -webkit-text-stroke:1px var(--secondary); font-size:30px; display:block; padding:5px;}
  .box-text{color:#000;
    h3{font-size:clamp(20px, 2.5vw, 25px); margin:0; font-weight:600; text-transform:uppercase;}
    p{font-size:16px; line-height:24px; margin:0; color:#444;}
  }
}
.black-box{border-left:solid 4px var(--secondary); margin:10px 0; padding:15px; background:#182c49!important;
  i, icon{color:transparent!important; -webkit-text-stroke:1px var(--secondary); font-size:30px; display:block; padding:5px;}
    h3{font-size:clamp(20px, 2.5vw, 25px); margin:0; font-weight:600; color:#fff; text-transform:uppercase;}
    p{font-size:16px; line-height:24px; margin:0; color:#c5c6ce;}
    table{background:transparent!important; color:#fff;}
}

/*---404 Page----*/
.error-404.not-found {
  margin: clamp(20px, 4vw, 40px) auto;
}

.error-404 .page-header {
  margin-bottom: 12px;
}

.error-404 .page-title {
  color: var(--primary);
  margin: 0;
}

.error-404 .page-content {
  background: #f4f4f4;
  border-left: solid 4px var(--secondary);
  border-radius: 8px;
  padding: clamp(18px, 3vw, 26px);
}

.error-404 .page-content p {
  margin: 0 0 10px;
  color: #1f2835;
}

.error-404-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

@media only screen and (max-width: 480px) {
  .error-404-actions .btn {
    width: 100%;
    text-align: center;
  }
}

.dark-back{background:var(--primary); color:#fff; }
.form-row{display:flex; flex-direction:row; justify-content:flex-start; flex-wrap:wrap; gap:40px; align-items:start;}
.form-left{position:sticky; width:calc(40% - 20px); top:10px; }
.form-right{width:calc(60% - 20px); }


.agree{width:100%;
	h1{font-size:clamp(25px, 4vw, 35px); font-weight:600; font-family:var(--heading); text-transform:uppercase; line-height:1; }
	h2{font-size:clamp(20px, 2vw, 25px); font-weight:600; font-family:var(--heading); line-height:1.1; text-transform:uppercase;}
	p{font-size:clamp(15px, 2vw, 17px); line-height:24px; font-family:var(--body); color:#333;}
}


/*--------GENERIC FORM TEMPLATE--------------------*/
.dark-form {
  width: 100%; margin: 0 auto 2rem auto; padding: 25px!important; border-radius: 8px; background:#162742; font-size: 15px;

  label {
    display: block; margin-bottom: 0.5rem; font-weight: 600; color: #fff; letter-spacing: 0.02em;
  }
  .reCaptchaPhrase{color:#fff!important;}
h3{font-size:clamp(20px, 2.5vw, 25px); margin:0; font-weight:600; text-transform:uppercase; color:var(--secondary); }
  input,
  select,
  textarea {
    width: 100%; padding: 12px 14px; background:#041125; margin-bottom: 1.2rem; border: 1px solid #2f3955; border-radius: 5px; font-family:var(--body); background:#041125 ; font-size: 15px; color: #fff; transition: border-color 0.2s; box-sizing: border-box;

    &:focus {
      border-color: var(--primary); outline: none;
    }
  }

  textarea {
    min-height: 100px; resize: vertical;
  }


  .form-actions {
    text-align: right;
  }

  
  .sheSubmitButton {
    display: inline-block !important; padding: 14px 28px !important; width: auto !important; background: var(--secondary) !important; color: #fff !important; border: solid 1px var(--secondary) !important; border-radius: 5px !important; font-size: 16px !important; font-family: var(--heading) !important; text-transform: uppercase; cursor: pointer; transition: background 0.2s;

    &:hover {
      background: var(--primary) !important;
    }
  }
}


/*-------- FOOTER STYLES ----------------*/
.footer{width:100%; background:var(--primary); color:#fff;
  .footer-row{padding:25px 0; color:#fff;
    p{color:var(--secondary); }
    ul{margin:0; padding:0;
      li{list-style-type:none!important;
        i{color:var(--secondary); padding-right:10px;}
      }
    }
  }
}
.footer-btm{width:100%;color:#fff; text-align:center; padding:15px 0; border-top:solid 1px #555768;
  p{margin:0; font-size:14px;}
}



/* ---- INVENTORY STYLES - KEEP AT BOTTOM OF CSS ---- */

.listing-top-right, 
    .buy-now-link,
    .check-availability-link,
    .view-listing-details-link,
    .email-seller-link {
    background: var(--primary) !important;
        color: #fff !important;
    
}


.list-error-container .info button,
.mobile-done-button,
a.buy-btn.des-buy-now,
a.buy-btn.gtm-buynow.des-buy-now,
button.selected-facet.ts-button,
.detail-contact-bar .contact-bar-btn,
button.page-nav {
  background: var(--primary) !important;
    color: #fff !important;
}

/* --------------------------------
   Hover states
-------------------------------- */
.view-listing-details-link:hover,
.contact-options a:hover,
.fin-calc-mobile > a:hover,
button.g-recaptcha.button:hover,
.email-seller-link:hover,
.mc-nav-controls .mc-icon-navarrow span,
a.buy-btn.des-buy-now:hover,
a.buy-btn.gtm-buynow.des-buy-now:hover,
.detail-contact-bar .contact-bar-btn:hover {
  background: var(--secondary) !important;
    color: #fff !important;
}
/*==========  Non-Mobile First Method  ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1250px) {		

  .cf{margin-top:65px;}
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 993px) {
	.form-row{flex-direction:column; gap:20px;}
  .form-left{width:100%; position:relative; top:0;}
  .form-right{width:100%;}
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 850px) {
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
	.boxes .yellow-box{width:calc(100% - 15px);}
  .ql img{height:200px;}
  .ql .grad{height:200px;}
  .ql .ql-text p{min-height:0; }
  .yellow-angle::before{clip-path:none!important; }
  .yellow-angle{ min-height:300px;}
  .xcmg-sec{bottom:-250px; left:40px;}
  .xcmg-img{display:block!important; float:none!important;}
    .hero-text{padding-top:80px!important;}
    .hero-text p{padding:10px 0;}

}
/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 550px) {
	.header-right-top{display:none;}
  .logo{width:140px; margin-bottom:-30px;}
  .ql img{height:150px;}
  .ql .grad{height:150px;}
  .ql .ql-text p{min-height:0; padding: 0}
  .ind .ind-text p{display:none;}
  .ind .ind-text i{display:none;}
  .ind img{height:160px!important;}
  .xcmg-sec{left:15px; width:calc(100% - 30px); }
  .cf{margin-top:35px;}
  .hero-text p{padding:5px 0;}
  .hero-text{padding-top:60px!important;}
}
@media only screen and (max-width : 380px) {
	.ind .ind-text h3{font-size:18px;}
}
