﻿/* BEGIN RESET */
* {background:transparent; border:0; margin:0; padding:0; font-family: 'Roboto Condensed', sans-serif; font-style:normal; line-height:normal; -webkit-text-size-adjust: none;}
ol, ul, li {list-style: none; font-size:15px; line-height:25px;}
.clear {clear: both; height:0px; margin:0;}

h1 {font-size:48px; color:#f13300; margin-bottom:5px;}
h2 {font-size:36px; color:#fff;}
h3 {font-size:28px; color:#f13300;}
h4 {font-size:20px; color:#000; text-transform:uppercase;}
h6 {font-size:16px; color:#FF5123;}
p {font-size:16px; line-height:24px; margin-bottom:10px;}

.redheader {font-size:16px; color:#fff; font-weight: 700 !important;}

a {text-decoration:none;}

.ts-modal-header > h2 {color: black !important;}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}

.dbg {background-image: url("../siteart/new/diamondplate.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center;}

.bolder {font-weight: 700;}

.style1 {font-size:11px;}

.img-responsive {
   max-width: 100%; height: auto; display:block; 
} 

/* BASIC STYLES */
body {overflow-x:hidden;}
#contentwrap {width:90%; margin:0 auto;}
#contentwraptwo {width:100%; margin:0 auto;}
#pagewrap {width:75%; margin:2% auto 30px;}
#pagewrap a {color:#D12C00;}
#pagewrap a:hover {color:#000;}

#colorblock {background:#282828;}

/* HEADER */
#topbar {background:#000; text-align:right; color:#fff; font-size:28px; font-weight:700; padding:8px 0;}
#topbar a {color:#fff;}
#topbar img {height:25px;}
header {
	background: #fff; 
    background: -webkit-linear-gradient(#fff);
    background: -o-linear-gradient(#dd2f00, #fff);
    background: -moz-linear-gradient(#fff);
    background: linear-gradient(#fff);
}
.logo {float:left; width: 250px; padding: 15px 0;}
.logo img {width:100%;}
.navwrap {float:right; width: calc(100% - 250px); text-align:right;}

.location {display:inline-block; box-sizing:border-box; vertical-align:top; width:14%; padding:16px 0 20px; text-align:center; color:#fff; font-size:14px; line-height: 24px;  }
.location img {height:20px;}
.locationbtn {background:#f13300; width:115px; margin:10px auto 5px; padding: 8px; font-size:14px; font-weight:700; color:#000;}
.locationbtn:hover {
	background: #dd2f00; 
    background: -webkit-linear-gradient(#dd2f00, #f73400);
    background: -o-linear-gradient(#dd2f00, #f73400);
    background: -moz-linear-gradient(#dd2f00, #f73400);
    background: linear-gradient(#dd2f00, #f73400);
}

.location > h4 {color: #ff5123 !important; text-shadow: 2px 2px 4px #000000;}

/* CONTENT STYLES */
.pageleft {float:left; width:55%;}
.pageright {float:right; width:45%;}  
.pageright img {width:100%;} 

.cat {display:inline-block; width:24%; vertical-align:top; text-align:center; padding:1% 0;}
.cat img {width:40%; margin:0 auto; border:1px solid #ccc; padding:15%}

#main {width:100%; margin:30px 0 -5px 0;}
#main img {width:100%;}

.tagline {background: url(../siteart/bottom.jpg) no-repeat; background-size: cover; width: 100%; background-color: black;}
.tagline #contentwrap{padding: 150px 50px 150px 0; width: 100%; max-width: 820px; margin: 0; float: right;}
.tagline #contentwrap p{color: #fff !important}


.mainbtn {
	background: #dd2f00; 
    background: -webkit-linear-gradient(#dd2f00, #f73400);
    background: -o-linear-gradient(#dd2f00, #f73400);
    background: -moz-linear-gradient(#dd2f00, #f73400);
    background: linear-gradient(#dd2f00, #f73400);
    max-width: 400px; text-align:center; font-size:18px; color:#fff; font-weight:700; padding: 20px; margin-top:15px; box-sizing: border-box;
}
.mainbtn2 {
	background: #dd2f00; 
    background: -webkit-linear-gradient(#dd2f00, #f73400);
    background: -o-linear-gradient(#dd2f00, #f73400);
    background: -moz-linear-gradient(#dd2f00, #f73400);
    background: linear-gradient(#dd2f00, #f73400);
    max-width: 350px; text-align:center; font-size:18px; color:#fff; font-weight:700; padding: 14px; margin-top:15px; box-sizing: border-box;
}
.promobtn {
	background: #dd2f00; 
    background: -webkit-linear-gradient(#dd2f00, #f73400);
    background: -o-linear-gradient(#dd2f00, #f73400);
    background: -moz-linear-gradient(#dd2f00, #f73400);
    background: linear-gradient(#dd2f00, #f73400);
    max-width: 400px; text-align:center; font-size:18px; color:#fff; font-weight:700; padding: 10px 0; margin-top:15px; box-sizing: border-box;
}

.leftpage {float:left; width:65%;}
.rightpage {float:right; width:30%;}

.videowrap {display:inline-block; width:24%; margin:.25%; text-align:center; vertical-align:top;}
.videowrap img {width:100%;}

.wrapper {padding: 15px 0; border-bottom:1px solid #ccc;}
.videoleft {float:left; width:30%;}
.videoleft img {width:100%;}
.videoright {float:right; width:65%;}
.backbtn {float:right; margin-top:-25px;}
.back {display:inline-block;}

.hosted-content .listings-wrapper .listings-list .listing-banner h2 {color:#000!important; font-size:20px!important;}

.dealer-contact__heading {color: gray !important;}



/* ICON BUTTONS */
.homeinventory {width:25%; float:left; color:#fff; margin-bottom:30px; background-color: black;}
.homeinventory img {width:100%;}

.hovereffect {width: 100%; height: 100%; float: left; overflow: hidden; position: relative; text-align: left; cursor: default;}
.hovereffect .overlay {width: 100%; position: absolute; overflow: hidden; top: 40%; text-align:center;}

.hovereffect img {display: block; position: relative; -webkit-transition: all 0.4s ease-in; transition: all 0.4s ease-in;}
.hovereffect:hover img {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /><feGaussianBlur stdDeviation="3" /></filter></svg>#filter');
  filter: grayscale(1) blur(3px);
  -webkit-filter: grayscale(1) blur(3px);
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}

.hovereffect a.info {display:inline-block; font-size:28px; font-weight:800; width:90%; color:#fff; line-height:30px; padding-top:2%; text-align:center;}

/* ZOOM */
.zoom-container {float:left; width: 20%; position: relative; overflow: hidden; display: inline-block; border: 1px solid #fff; box-sizing: border-box; -moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
.zoom-container img {display: block; width: 100%; height: auto; -webkit-transition: all .5s ease; /* Safari and Chrome */ -moz-transition: all .5s ease; /* Firefox */  -ms-transition: all .5s ease; /* IE 9 */ -o-transition: all .5s ease; /* Opera */ transition: all .5s ease;}
.zoom-container .zoom-caption {position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; background: rgba(0, 0, 0, .6); -webkit-transition: all .5s ease; /* Safari and Chrome */ -moz-transition: all .5s ease; /* Firefox */ -ms-transition: all .5s ease; /* IE 9 */ -o-transition: all .5s ease; /* Opera */ transition: all .5s ease;}
.zoom-container .zoom-caption h4 {display: block; text-align: center; font-family: 'Roboto Condensed', sans-serif; font-size: 20px; text-transform: uppercase; color: #fff; text-shadow: 0px 0px 5px rgba(0, 0, 0, 1); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.zoom-container:hover .zoom-caption {background: none;}

/* FORM */
#formpage {vertical-align:top; margin:20px auto;}
#formpage div {vertical-align:top; padding:5px 5px;}

#formpage input {padding:6px 5px; border:1px solid #8e8d8d; color:#8e8d8d; font-size:12px;}
#formpage textarea {padding:6px 5px; border:1px solid #8e8d8d; color:#8e8d8d; font-size:12px;}

 
/* selects have similar styles to input & textarea fields, but with no padding. Text in a dropdown select is positioned differently */
#formpage select {border:1px solid #8e8d8d; color:#3B3B3B; vertical-align:middle; font-size:12px; line-height:normal; padding:5px; width:100%;}
#formpage input  {width:100%;}
#formpage input.larger  {width:100%;}
#formpage textarea {width:100%; height:85px;}

#formpage input.checkbox {padding:0;  border:0; margin:0 5px 0 0; width:13px; height:13px; display:inline;  background-color:#fff;}
#formpage input.radio {padding:0;  border:0; margin:0 5px 0 0; width:15px; height:15px; display:inline;}

/* focus states of various types of fields */
#formpage input:focus,#formpage textarea:focus,#formpage select:focus {background:#FFF;  color:#000; border:1px solid #f13300; outline-style:none;}
#formpage input.radio:focus,#formpage input.checkbox:focus {background:none;  border:0; outline-style:none;}
 
#formpage input.button,#formpage input.button:focus {
	background: #dd2f00; 
    background: -webkit-linear-gradient(#dd2f00, #f73400);
    background: -o-linear-gradient(#dd2f00, #f73400);
    background: -moz-linear-gradient(#dd2f00, #f73400);
    background: linear-gradient(#dd2f00, #f73400);
	width:200px; margin:0; padding:10px 0; border:2px #dd2f00 solid; font-size:14px; line-height:14px; font-weight:bold; color:#fff;}
#formpage input.button:hover {background:#f13300; color:#fff text-shadow:none; border:2px #f13300 solid;}

/* for plain text next to an input field, if not using a table structure */
#formpage label.basic { color:#212121; font-size:13px; text-align:left;}
#formpage label.checkbox {/*  color:#212121;*/ font-size:13px; text-align:left; display:inline; padding:0;}

/*control the Captcha */
.captcha {width:350px; margin:0;}
.CaptchaPanel {margin:0 0 0 0 !important; padding:0 0 0 0 !important; text-align: left !important; line-height:normal !important;}
.CaptchaImagePanel {margin:0 0 0 0; padding:0 0 0 0;}
.CaptchaMessagePanel {padding:0 0 0 0 !important; margin:0 0 0 0 !important; font-weight:normal !important; font-size:12px; line-height:14px;}
.CaptchaAnswerPanel {margin:0 0 0 0; padding:2px 0px 2px 0px !important;}
.CaptchaWhatsThisPanel {line-height:0; margin:0 0 0 0; padding:8px 0 8px 0 !important;}
.CaptchaWhatsThisPanel a {color:#000!important;}
.CaptchaWhatsThisPanel a:hover {text-decoration:none;}  

/* FOOTER */
footer {
	background: #dd2f00; 
    background: -webkit-linear-gradient(#dd2f00, #f73400);
    background: -o-linear-gradient(#dd2f00, #f73400);
    background: -moz-linear-gradient(#dd2f00, #f73400);
    background: linear-gradient(#dd2f00, #f73400);
	padding:1.5% 0 1.5%; color:#fff;
}
.top-footer{background: #fff; padding: 35px 0;}
.fourcolumn {float:left; width:12%; color:#282828; font-size:13px; line-height:20px;font-weight:550;}
.footlogo {float:right; width:15%;}
.footlogo img {width:75%;}
.sandhillsfooter {float:left; width:50%; clear: both;}
a.footerlink:link, a.footerlink:visited, a.footerlink:active{font-size:12px; color:#fff;}
a.footerlink:hover {font-size:12px; text-decoration:underline; color:#FF3500;}
.footertext{font-size:12px; color:#fff;}
.smallfootertext{font-size:12px; color:#fff;}
.divfooter {width:100%;}

.socialmedia {float:left; width:20%; text-align:left;}
.socialmedia img {width:12%; margin:5% .5% 0;}


/************************************************ Responsive Styles **/
@media screen and (max-width: 1730px)  {
}

@media screen and (max-width: 1480px)  {

#pagewrap {width:90%;}

.zoom-container .zoom-caption h4 {font-size:18px;}
}

@media screen and (max-width: 1280px)  {
h1 {font-size:32px;}
h2 {font-size:20px;}	
h3 {font-size:17px;}
h4 {font-size:14px;}
h6 {font-size:12px;}	
#pagewrap {width:90%; margin:1% auto;}
.location {font-size:12px; width:13.9%;}
.location img {height:15px;}

.navwrap {padding-top:0;}

.pageleft {width:70%; margin-bottom:15px;}
.pageright {width:28%;}

#main {margin-bottom:10px;}

.zoom-container {width: 25%;}

.sandhillsfooter {width:70%;}
.socialmedia {width:25%;}
.socialmedia img {width:18%;}
}

@media screen and (max-width: 1080px)  {

.logo {width:200px;}
.navwrap {width: calc(100% - 200px); padding-top:0; margin-top:0;}
.zoom-container .zoom-caption h4 {font-size:16px;}
	
.locationbtn {width:50%;}
    .location {font-size:9.5px;}

	.tagline #contentwrap{max-width: 90%; margin: 0 auto; float: none; padding: 150px 0;}	
	.location { width: 13.8%;}
}


@media screen and (max-width: 780px)  {
h1 {font-size:26px;}
h2 {font-size:20px;}	
h3 {font-size:18px;}
h4 {font-size:16px;}	
h6 {font-size:12px;}
.location {width:49%;}
.pageleft {float:none; width:100%; padding:10px 0;}
.pageright {display:none;}

.homeinventory {width:50%; margin:0;}

.cat {width:49%;}

.leftpage {float:none; width:100%;}
.rightpage {float:none; width:100%;}

.videowrap {width:49%;}
.videoleft {float:none; width:100%;}
.videoright {float:none; width:100%;}

#main {margin-bottom:10px;}

    .hidethis {display: none !important;}
	
.mainbtn {width:100%; font-size:12px;}
.mainbtn2 {width:100%; font-size:12px;}
.promobtn {width:100%; font-size:12px;}

.zoom-container {width: 50%;}
	
.locationbtn {width:75%;}
	

.fourcolumn {width:50%; font-size:14px; margin:0 0 15px;}
.fourcolumn a {color:#fff;}
.footlogo {float:left; width:30%; margin:0 0 10px;}
.sandhillsfooter {float:none; width:100%;}
.socialmedia {float:none; width:100%; text-align:left;}
.socialmedia img {width:7%; margin:5% .25% 0;}
}

@media screen and (max-width: 400px)  {
h1 {font-size:22px;}
h2 {font-size:18px;}	
h3 {font-size:18px;}
h4 {font-size:12px;}	
p {font-size:14px;}
#topbar {font-size:18px;}
#topbar img {height:15px;}
header {padding:5px 0;}
header #contentwrap{width: 100%;}
.logo {float:none; width:100%; margin:0 auto;}
.logo img{display: block; max-width: 200px; margin: 0 auto;}
.navwrap {padding-top:0; width:100%;}
.location {display:block; width:100%; padding:10px 0; font-size:14px;}
.location img {height:15px;}

	
.leftpage {float:none; width:100%;}
.rightpage {float:none; width:100%;}

.videowrap {display:block; margin:1% auto; width:100%;}

.captcha {width:90%; margin:0 auto;}
.CaptchaPanel {text-align: center !important;}
#formpage input.button,#formpage input.button:focus {width:100%;}

.zoom-container {float:none; width: 100%;}

.fourcolumn {float:none; width:100%; margin:15px auto; text-align: center;}
.footlogo {float:none; width:100%; margin:0 auto;}

.socialmedia img {width:18%; margin:5% .25% 0;}
}
