/*==============================================================================================
  CSS reset/normalize 
==============================================================================================*/

/* Correct `block` display not defined in IE 8/9. */
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {display: block;} pre {white-space: pre-wrap;} small {font-size: 80%;} svg:not(:root) {overflow: hidden;} 
/* Hides giant arrows that show up on inventory pages on Chrome *smh* */
.container.cf .widgets svg[class*="fa"], .container.cf .widgets-details svg[class*="fa"] {display: none !important;}
/* Moves "x" button on full-screen image preview on inventory pages down as to not be hidden under nav */
.mc-btn.mc-zoom-exit {top: 70px !important;}
/* Hide Contact Information section on listings */
/*.cf.contact-info-section {display: none !important;}*/

/*============================================================================================== 
  Base Styles
================================================================================================*/
* {box-sizing: border-box;} .clear {clear: both;} img {border: 0;max-width:100%;} 
html {font-size: 16px;}
@media screen and (max-width: 768px) {html {font-size: 14px;}}
@media screen and (max-width: 575px) {html {font-size: 18px;}}
body {font-family: 'Roboto', sans-serif; margin: 0; padding: 0; background-color: #fff; color: #111; font-size: 1.0rem;}
.z-100 {z-index: 100;} .z-200 {z-index: 200;} .z-300 {z-index: 300;} .z-400 {z-index: 400;} .z-500 {z-index: 500;} .z-600 {z-index: 600;} .z-700 {z-index: 700;} .z-800 {z-index: 800;} .z-900 {z-index: 900;}

/*============================================================================================== 
  Typography
===============================================================================================*/
.roboto {font-family: 'Roboto',sans-serif; font-weight: 400;}
.roboto-bold {font-family: 'Roboto',sans-serif; font-weight: 700;}
.roboto-bold-italic {font-family: 'Roboto',sans-serif; font-weight: 700; font-style: italic;}
.roboto-italic {font-family: 'Roboto',sans-serif; font-weight: 400; font-style: italic;}
.roboto-light {font-family: 'Roboto',sans-serif; font-weight: 300;}

.titillium-light {font-family: 'Titillium Web',sans-serif; font-weight: 300;}
.titillium {font-family: 'Titillium Web',sans-serif; font-weight: 400;}
.titillium-bold {font-family: 'Titillium Web',sans-serif; font-weight: 700;}

.montserrat {font-family: 'Montserrat',sans-serif; font-weight: 400;}
.montserrat-bold {font-family: 'Montserrat',sans-serif; font-weight: 700;}


.white {color: #fff;}
.grey {color: #666;}
.light-grey {color: #999;}
.yellow {color: #FFCC33;}
.left {float: left;}

h1.extralarge {font-size: 4em;}

.text-shadow {text-shadow: 2px 2px 2px rgba(0,0,0,0.6);}
.text-capitalize {text-transform: uppercase !important;}
.underline {text-decoration: underline;}

h1 {font-size: 2.4rem;} h2 {font-size: 2.0rem;} h3 {font-size: 1.7rem;} h4 {font-size: 1.4rem;} h5 {font-size: 1.2rem;} h6 {font-size: 0.8rem;}
h1,h2,h3,h4,h5,h6 {font-family: 'Titillium Web'; font-weight: 700;}
.container.cf h1 {font-size: 2.2rem !important; font-family: 'Roboto',sans-serif !important; font-weight: 700 !important; line-height: 2.6rem !important;}
.container.cf h2 {font-size: 1.8rem !important; font-family: 'Roboto',sans-serif !important; font-weight: 700 !important; line-height: 2.2rem !important;}
.container.cf h3 {font-size: 1.5rem !important; font-family: 'Roboto',sans-serif !important; font-weight: 700 !important; line-height: 1.9rem !important;}
.container.cf h4 {font-size: 1.2rem !important; font-family: 'Roboto',sans-serif !important; font-weight: 700 !important; line-height: 1.6rem !important;}
.container.cf h5 {font-size: 1.0rem !important; font-family: 'Roboto',sans-serif !important; font-weight: 700 !important; line-height: 1.4rem !important;}
.container.cf h6 {font-size: 0.6rem !important; font-family: 'Roboto',sans-serif !important; font-weight: 700 !important; line-height: 1.0rem !important;}

.large {font-size: 1.6rem;} .medium {font-size: 1.2rem;} .small {font-size: 0.8rem;}

.navbar-dark .navbar-nav .nav-link {color:#fff!important;}

@media screen and (min-width: 992px) {
	.text-right-lg {text-align: right !important;} .text-left-lg {text-align: left !important;} .text-center-lg {text-align: center !important;}
}

@media screen and (min-width: 768px) {
	.text-right-md {text-align: right !important;} .text-left-md {text-align: left !important;} .text-center-md {text-align: center !important;}
}

@media screen and (min-width: 575px) {
	.text-right-sm {text-align: right !important;} .text-left-sm {text-align: left !important;} .text-center-sm {text-align: center !important;}
}

/*==============================================================================================
  Borders, Backgrounds, Shadows
==============================================================================================*/
.white-bg {background-color: white;}
.dark-bg {background-color: #333;}
.black-bg {background-color: #111;}
.yellow-bg {background-color: #FFCC33;}
.light-grey-bg {background-color: #F9F9F9;}

.border-thick {border-width: 5px !important;}
.border-dark {border-color: #666 !important;}

.drop-shadow {box-shadow: 1px 1px 2px 3px rgba(0,0,0,0.2);}

hr.thick {border-width: 5px;}
hr.white {border-color: white;}
hr.yellow {border-color: #FFCC33;}

/*==============================================================================================
  Link Styles
==============================================================================================*/
a {text-decoration: none; color: #FFCC33;}
a:hover  {color: #333;}
a.white, .white a {color: #fff !important;}
a.dark, .dark a {color: #333 !important;}
a.dark:hover, .dark a:hover {color: #555 !important;}
a.grey, .grey a {color: #aaa !important;}
a.yellow, .yellow a {color: #FFCC33 !important;}
a.text-underline {text-decoration: underline;}

/*==============================================================================================
  Header Styles
==============================================================================================*/
header{background-color: #fff;}

/* Shrink the hamburger icon a little on mobile */
.navbar-toggler {padding: 0.2rem;}
.navbar-toggler-icon {width: 1.2rem; height: 1.2rem;}
/* Edit Nav Items */
nav .nav-item {padding: 0.8rem 0.8rem; text-transform: uppercase; font-family: 'Titillium Web', sans-serif; font-weight: 400;}
nav .nav-item > .nav-link {padding: 0 0;}
/* Edit Active Nav */
nav .nav-item.active > a, nav .nav-item:hover > a {color: #FFCC33 !important;}
nav .nav-item.active {background-color: #111;}
/* Edit Subnav */
a.dropdown-item { text-transform: capitalize !important;}

@media screen and (max-width: 768px) {
    nav {width: 100%;}
    nav .nav-item {
        padding: 15px 0.8rem 15px 2.0rem;
    }
}

/*==============================================================================================
  Carousel Styles
==============================================================================================*/
/* Fixes issue with transition in Firefox */
.carousel-item {transition: -webkit-transform 0.5s ease; transition: transform 0.5s ease; transition: transform 0.5s ease, -webkit-transform 0.5s ease; -webkit-backface-visibility: visible; backface-visibility: visible;}

/*==============================================================================================
  Form Styles
==============================================================================================*/
form.my-form input, form.my-form textarea, form.my-form select, form.my-form input#CaptchaAnswer {
	width: 100%;
	padding: 5px 10px;
	margin: 6px 0;
	border: 1px solid #ddd;
	border-radius: 0;
}
form.my-form select {color: #6f6f6f;}
input[type="date"]:not(.has-value):before{color: lightgray; content: attr(placeholder);}
form.my-form textarea {height: 150px;}
form.my-form input, form.my-form textarea {-webkit-appearance: none;}
form.my-form input[type="checkbox"] {
	width: 15px;
	height: 15px;
	border: 1px solid #aaa;
	border-radius: 0;
	background-color: white;
	outline-color: rgba(255,127,0,0.7);
	padding: 0;
}
form.my-form input[type="checkbox"]:checked {border: 1px solid #aaa; background-color: #FF7F00;	box-shadow: inset -1px -1px 1px 0px #fff, inset 1px 1px 1px 0px #fff;}
form.my-form input:focus, form.my-form textarea:focus {border: 1px solid #bbb;}

/*==============================================================================================
  Scrolling Inv Styles
==============================================================================================*/
.scrolling-wrap {width:100%; height:90px; overflow:hidden;}
.scrolling {width:100%; height:92px;}

/*==============================================================================================
  Inventory Tile Styles
==============================================================================================*/
.inventory-tile {
    background-color: #ffcc33;
    font-family: 'Titillium Web', 'Helvetica', 'Arial', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: #111 !important;
    font-size: 1.2rem;
    text-align: center;
    padding: 2.0rem 3px;
    transition: 0.3s;
}

.inventory-tile:hover {background-color: #E5AC00;}

/*==============================================================================================
  Spinng Gear Background Styles
==============================================================================================*/
.gear-bg {color: #eee;position: absolute;}
.gear-bg-one {font-size: 28.0rem; top: -24.0rem; right: 3.0rem;}
.gear-bg-two {font-size: 34.0rem; bottom: -34.0rem; left: 7.0rem;}
.fa-spin.spin-slow {animation-duration: 12s !important;}