/***** BEGIN RESET *****/
@import url("https://use.typekit.net/zry0wkx.css");
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;  
} 

/*-------- COLORS --------*/
:root {
  --yellow: #FFCA00;
  --dark-blue: #1A2836;
  --grey: #F9F9F9;
}

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

h1, h2, h3 {
	font-family: 'ddt', sans-serif;
}

#home p, #thankyou p, #contact p, footer p, header a, .inventory-hero p  {
	font-family: 'golos-text', sans-serif;
	font-size: 20px; 
	line-height: 35px;
	color: var(--dark-blue);
}

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

body {

}

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


hr{border:#000 1px solid;}

/*-------- FOOTER STYLES ----------------*/
.my-site-footer{background: var(--dark-blue);}
.my-site-footer .footer-logo .img-height img {max-width: 400px;width: 100%;}
.my-site-footer .wrapper {padding-top:80px!important;}
.my-site-footer .wrapper > div:first-child {padding-bottom: 100px; justify-content: space-between; gap: 30px;}
.my-site-footer .links > .flex {gap: 160px;}
.my-site-footer .links > .flex .flex {gap: 100px;}

.my-site-footer .links a {font-family: 'golos-text', sans-serif; color: #fff; font-size: 20px;transition: all .4s ease-out;}
.my-site-footer .links a:hover {color: var(--yellow);}
.my-site-footer .links li {margin-bottom: 30px;}
.my-site-footer .links a i {margin-right: 15px;}
.my-site-footer .heading-footer {font-family: 'ddt', sans-serif!important; color: #fff!important; font-size: 25px!important; margin-bottom: 50px; font-weight: 700;}


.my-site-footer .social-links {padding-top: 30px; padding-bottom: 30px; border-top: solid #fff 1px; justify-content: flex-end; gap: 25px;}
.my-site-footer .social-links a {color: #fff; font-size: 20px; transition: all .4s ease-out;}
.my-site-footer .social-links a:hover {color: var(--yellow);}

/*-------- UNIVERSAL STYLES ----------------*/
.wrapper {
	padding: 0 15px; 
	margin: 0 auto;
	max-width: 1830px;
}

.flex {display: flex;}
.btn-top {margin-top: 60px;}

/*---Buttons---*/

.btn-yellow-light, .btn-yellow-dark {
	display: inline-block;
    border: none;
    border-radius: 10px;
    width: 230px;
    color: var(--dark-blue)!important;
    background: var(--yellow);
    padding: 20px 0;
    text-align: center;
    font-weight: 700;
    font-size: 20px;
    transition: all .4s ease-out;
    font-family: 'ddt', sans-serif;
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.btn-yellow-light:hover {background: #fff;}
.btn-yellow-dark:hover {background: var(--dark-blue); color: #fff!important;}



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

@media only screen and (max-width: 1300px) {
	.my-site-footer .links > .flex {gap: 50px;}
	.my-site-footer .links > .flex .flex {gap: 38px;}
}

@media only screen and (max-width: 1160px) {
	.my-site-footer .wrapper > div:first-child {flex-direction: column; gap: 60px;}
	.my-site-footer .links > .flex {gap: 60px;}
}

@media only screen and (max-width: 680px) {
	.my-site-footer .links > .flex {flex-direction: column;}
}

@media only screen and (max-width: 500px) {
	.my-site-footer .wrapper > div:first-child {padding-bottom: 80px;}
}

@media only screen and (max-width: 370px) {
	.my-site-footer .links > .flex .flex {gap: 0px; flex-direction: column;}
}