/***** 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;  
} 
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
.roboto-<uniquifier> {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.roboto-condensed-<uniquifier> {
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

/*-------- 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 --------*/

body {
font-family: "Roboto", sans-serif;
}

a:link, a:visited, a:active {text-decoration:none;}
a:hover {text-decoration:none;}

h1, h2, h3, h4, h5 a{font-family: "Roboto Condensed", sans-serif;}
hr{width: 100px; background:#EA2126; height: 5px; border:0; text-align: left; margin: 20px 0;}

.width-90 {width: 90%; margin: 0 auto}
.width-80 {width: 80%; margin: 0 auto;}
#padding25 {padding-top: 15px;}
#padding50 {padding: 50px 0;}
#padding75 {padding: 75px 0;}
#padding100 {padding: 100px 0;}

.red-btn {background: #EA2126; color:#fff; padding: 10px 40px; width: 100%; max-width: 300px; transition: .3s ease;}
.red-btn:hover {background:#3868A9; color:#fff;}
/*--- HEADER STYLES ---------------------*/
.contact-bar {background: #333; width: 100%; padding: 7px 0;  text-align: right;}
.contact-bar a{color:#fff; font-size: 15px; letter-spacing: .5px; font-weight: 300; transition: .3s ease;padding: 7px 10px;}
.contact-bar a:hover{background: #3868A9; padding: 7px 10px;  }
.contact-bar .fas {padding: 0 5px 0 5px;}
.flex-header {display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-evenly;
	align-items: center;
	align-content: space-between; width: 90%; margin: 0 auto; padding: 5px 0;}
.saitta-logo {margin: 0 auto; text-align: center; padding-top: 25px;}
.saitta-nav {width: 70%; text-align: center;}
.saitta-btn {width:15%; text-align: right;}



/*---BODY--------------------------------*/


/* LANDING PAGE */
.flex-container-parent {
	display: flex;
    
}
.flex-container {
	display: flex;
	align-items: center;
	margin-top: 25px;
}
.flex-50 {width: 50%; padding: 3% 2%; margin: 0 auto; text-align: center;}
.flex-50 .blue-bg:hover, .flex-50 .red-bg:hover {transition: .5s; transform: translateY(-6px);}
.location-pin {width: 60px; margin-bottom: 15px;}
.center {
	text-align: center;
}

.landing-bg {background-image: url("../siteart/saitta-bg.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover; margin: 0; padding: 0;}
.landing-bg h2, .landing-bg h3, .landing-bg p {color:#fff; font-family: "Roboto Condensed", sans-serif; }
.landing-bg h2 {font-family: 'roboto-condensed', sans-serif; font-size: 48px; line-height: 48px; font-weight: 600; text-transform: uppercase;}
.landing-bg h3 {font-size: 30px; line-height: 45px; font-family: 'roboto-condensed', sans-serif; text-transform: uppercase; padding: 10px 0 5px 0;}
.landing-bg p {font-family: 'poppins', sans-serif; font-size: 16px; line-height: 28px; font-weight: 400;}
.landing-bg a {color: #fff; font-family: 'poppins', sans-serif;}
a.underline {text-decoration: underline}
.loc-info .flex-50 img {width: 90%; max-width: 300px; margin: 0 auto; text-align: center;}
.red-bg {background:rgba(237,32,36,0.80); margin: 2% 1%; padding: 3% 0 6% 0;}
.blue-bg {background:rgba(51,103,176,0.85); margin: 2% 1%; padding: 3% 0 6% 0;}

.loc-info a:hover p {text-decoration: underline; transition: .5s;}

.landing-overlay {background: rgba(25,25,25,0.25);}

/* HOME PAGE */
.hero {background-image: url("/siteart/hero-storefront.jpg"); width: 100%; height: 45vh; background-position: top right; background-size: cover; background-repeat: no-repeat}
.hero-text {margin-top:50px;}
.hero-text h1 {font-size: 50px; line-height: 55px; color:#fff; letter-spacing: .5px;}
.hero-text p {font-size: 20px; color:#fff; line-height: 29px;  letter-spacing:.5px; max-width: 600px; padding-bottom: 25px;}

/* POLICY PAGE */
.policy {background: #fff; margin-top: 50px;}
.policy > div {width: 90%; margin: 0 auto; padding: 80px 0;}
.policy h1, .policy h2, .policy p {color: #000;}
.policy h1 {font-family: 'roboto-condensed', sans-serif; font-size: 40px; line-height: 50px; text-transform: uppercase; font-weight: 700;}
.policy h2 {font-family: 'roboto-condensed', sans-serif; font-size: 22px; line-height: 30px; text-transform: uppercase; font-weight: 700; margin-bottom: 8px;}
.policy p {font-size: 18px; line-height: 30px; font-family: 'poppins', sans-serif; margin-bottom: 10px;}
.policy hr {border: 1px #EA1F24 solid; width: 90px; margin: 0; margin-top: 10px; margin-bottom: 30px;}

/* PRIVACY PAGE */
.policy li {font-size: 18px; line-height: 30px; font-family: 'poppins', sans-serif; margin-bottom: 5px; list-style: circle;}
.policy ul {margin-left: 30px; margin-bottom: 20px;}
.policy p a {color: #EA1F24;}
.policy p a:hover {color: #3064B2; transition: .5s;}

/*--------FORM STYLES--------------------*/




/*-------- FOOTER STYLES ----------------*/

footer {background: #252525;}
.footer-wrap {width: 95%; margin: 0 auto; display: flex; justify-content: center; gap: 20px; padding: 20px 0;}
footer a {color: #fff; font-size: 15px; line-height: 22px; font-family: 'poppins', sans-serif;}
footer a:hover {color: #B6CBEB; transition: .5s;}




/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/







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

@media only screen and (max-width: 1050px) {
    .landing-bg {height: auto;}
    .landing {margin: 0 auto; text-align: center;padding: 10px 0;}
    .flex-container-parent {display:block;}
    .flex-50 {width: 98%; margin: 0 1%; padding: 20px 0 40px 0;}
    .loc-info .flex-50 img {width: 100%;}
	.policy > div {text-align: left !important;}
}

@media only screen and (max-width: 500px) {
	.policy h1 {font-size: 35px; line-height: 45px;}
	.policy h2 {font-size: 20px; line-height: 30px;}
	.policy p, .policy li {font-size: 17px; line-height: 27px;}
	.policy p span a {font-size: 16px;}
}

@media only screen and (max-width: 450px) {
	.flex-container {flex-wrap: wrap; gap: 15px;}
	.saitta-logo img {width: 60%;}
	.policy p span a {font-size: 15px;}
}

@media only screen and (max-width: 400px) {
	.policy h1 {font-size: 32px; line-height: 42px;}
	.policy p, .policy li {font-size: 16px; line-height: 26px;}
	.policy p span a {font-size: 14px;}
}

@media only screen and (max-width: 350px) {
	.policy p span a {font-size: 12px;}
}

@media only screen and (max-width: 300px) {
	.policy h1 {font-size: 30px; line-height: 40px;}
	.policy p, .policy li {font-size: 15px; line-height: 25px;}
	.policy p span a {font-size: 11px;}
}