﻿/***** BEGIN RESET *****/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;	
}

ol, ul {
	list-style: none;
}

table{border-collapse:collapse; width:100%;}
td{vertical-align:top;}

/* Make HTML 5 elements display block-level for consistent styling */  
header, nav, article, footer, address {  
	display: block;  
} 

html {scroll-behavior: smooth;}

/*-------- COLORS --------

*/

/***** END RESET *****/
::-moz-selection {
    background: #000; 
    color: #fff;
    text-shadow: none;
}
::selection {
    background: #000;
    color: #fff;
    text-shadow: none;
}


/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

/*-------- BODY STYLES --------*/
:root {
	--white: #fff;
	--black: #000000;
	--darkgrey: #212121;
	--red: #ED1C24;
	--header: futura-pt-condensed, sans-serif !important;
	--body: proxima-nova, sans-serif !important;
}

body {font-family: var(--body);}

h1,h2,h3,h4,h5,h6 {font-family:var(--header);}

p {font-family:var(--body);font-size:16px;line-height: 1.5;}

a:link, a:visited, a:active {text-decoration:none;color:#444;}
a:hover {text-decoration:none;color:#000;}

hr{border:#000 1px solid;}

/*--- HEADER STYLES ---------------------*/
header {box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);position: relative;}
header .wid90 {padding: 10px 0;}
.logo {width: 250px;max-width: 100%;}
.logo a {display:inline-block;}
.logo img {width: 100%;max-width: 100%;}
header p {font-size: 22px;}
.social-wrap {gap: 15px;font-size: 22px;}

/*---BODY--------------------------------*/

.breadcrumb-links a { line-height: 2; display: inline-block;}
.sub-pg {background-image: radial-gradient(circle, #ffffff, #f9f9f9);color: #111 !important;}
.sub-pg h1 {text-transform: uppercase;font-weight: 800;font-size: 42px;}
.sub-pg h2 {text-transform: uppercase;font-weight: 600;font-size: 28px;}
.white-bg {background-color:var(--white);}
.offwhite {background-color:var(--offwhite)}
.wid90 {width:90%;margin:0 auto;}
.flex-container {display: flex;}
.grid-container {display: grid;}
.page-wid{max-width: 1400px;}
.center {text-align: center;}
.pad-xl{padding-top:90px;padding-bottom:90px;}
.pad-l{padding-top:50px;padding-bottom:50px;}
.relative {position: relative;}
.base-align {align-items: baseline;}
.align-center {align-items:center !important;}
.just-center{justify-content: center;}
.space-between{justify-content: space-between;}
.align-right {text-align: right !important;}
.align-left {text-align: left !important;}
.block,#block {display: block !important;}
.grid-cat {grid-template-columns: repeat(4, 1fr);gap: 2px;background:#000;}


nav[aria-label="breadcrumb"] ul {font-size: 15px;display: flex;list-style: none;padding: 0;margin: 0;width: 100%;margin-bottom: 10px;}
nav[aria-label="breadcrumb"] li {padding: 0;}
nav[aria-label="breadcrumb"] a{padding: 8px 0;border-radius: 90px;font-size: 15px;color: var(--red);font-weight: 800;transition: .3s all;opacity: .85;text-decoration: none;box-sizing: border-box;}
nav[aria-label="breadcrumb"] a:hover {color:var(--darkgrey)}
nav[aria-label="breadcrumb"] li+li:before {content: "|";padding: 8px 10px;opacity:.75;}
nav[aria-label="breadcrumb"] span {padding: 8px 0;font-size: 15px;font-weight: 500;text-decoration: none;box-sizing: border-box;}

.box-item{position:relative;background:#000;height: 65vh;display: flex;justify-content: center;flex-direction: column;min-height: 500px;}
.overlay {position:absolute;top:0;bottom:0;left:0;right:0;height:100%;width:100%;overflow: hidden;}
.overlay img {filter:brightness(.5);width:100%;height: 100%;object-fit: cover;transition: transform 0.4s ease;}
.box-item:hover > .overlay img{transform: scale(1.2);}
.content-wrap {position: relative; z-index: 1; padding: 50px;box-sizing: border-box;justify-content: space-between;align-items: center;display: flex;flex-direction: column;padding: 25% 50px;gap: 30px;}
.content-wrap img {max-width: 100%;width: 270px;margin: 0 auto;}
.service-btns {margin-top: 10px;display: flex;flex-wrap: wrap;justify-content: center;gap: 5px;align-items: center;}
.service-btns span {display: inline-block;padding: 10px;background: rgb(242 242 242 / 20%);border-radius: 90px;font-size: 16px;border: 2px solid var(--white);color: var(--white);min-width: 50px;box-sizing: border-box;line-height: 1;}
.content-wrap .black-btn,.content-wrap a{width: 100%;}

/*--------Button STYLES--------------------*/
button.black-btn {background:var(--white);border: 1px solid var(--white);padding: 20px;width: 100%;border-radius: 5px;font-family:var(--header);text-transform: uppercase;color:var(--black);letter-spacing: 1px;font-weight: 800;font-size: 16px;cursor:pointer;transition:.4s all;}
button.black-btn:hover {background:var(--black);border-color:var(--black);color:var(--white)}
#myBtn {z-index: 2; font-family: graphie, sans-serif !important;color: inherit;border: none;font: inherit;cursor: pointer;outline: inherit;position: fixed;bottom: 16px;left: 16px;width: 48px;height: 48px;background: rgba(242, 242, 242, 0.8);transition: background 0.3s ease-out 100ms;border-radius: 48px;padding: 12px;display: none;}
#myBtn:hover {background-color: #555;}

/*-------- FOOTER STYLES ----------------*/
footer{padding: 15px 0;}
footer .flex-container.logo-wrap {align-items: center;}
footer .flex-container.logo-wrap img {max-width: 100px;width: 100%;}
.foot-left,footer .flex-container.logo-wrap {gap: 45px;}
.foot-nav nav ul li {display: inline-block;margin: 0 auto;padding: 10px 0;}
.foot-nav nav ul li a {padding: 5px 10px; line-height: 1.5;font-size: 15px;transition:.3s all;color:var(--black);}
.foot-nav nav ul li a:hover {color:#333;}
.copyright p {font-size: 15px;}




/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/







/*---------- RESPONSIVE STYLES ----------*/

@media only screen and (max-width: 1350px) {
	.content-wrap{padding: 25% 25px;}
}

@media only screen and (max-width: 1150px) {
	.grid-cat {grid-template-columns: repeat(2, 1fr);}
	.box-item {height: auto !important;min-height: auto !important;}
	.content-wrap{padding: 50px;}
	.foot-left,footer .flex-container.logo-wrap {gap: 20px;}
}


@media only screen and (max-width: 1000px) {
	footer .flex-container.wid90{flex-wrap:wrap;justify-content: center;gap: 15px;}
	.foot-left {flex-basis: 100%;justify-content: center;}
	
}

@media only screen and (max-width: 767px) {
	.content-wrap{padding: 50px 25px;}
	.social-wrap{display: none;}
	
}


@media only screen and (max-width: 650px) {
	.grid-cat {grid-template-columns: repeat(1, 1fr);}
	.foot-nav nav ul li{display: block;text-align: center;}
	.foot-left {flex-wrap:wrap;}
	header .wid90 {gap: 50px;}
}






