@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');

/* start css variables */

:root {
    --gold: #fad201;
	--gold2: #e7c200;
	--gold3: #c7a700;
    --lightGrey: rgba(122, 122, 122, 0.09);
    --medGrey: #7a7a7a;
	--green: #458D45;
	--darkGreen: #356c35;
}

/* end css variables */


body {
    background-color: #ffffff;
	color: #111111;
    font-family: 'Roboto', sans-serif;
}

h1 {
    font-family: 'Roboto', sans-serif;
    color: #ffffff;
    font-weight: 700;
	font-size:2.25rem;
}

@media (min-width:768px) {
    h1 {
        font-size: 2.75rem;
    }
}

h2 {
    font-family: 'Alegreya Sans SC', sans-serif;
    color: #000000;
    font-weight: 700;
	font-size:1.75rem;
}

@media (min-width:768px) {
    h2 {
        font-size: 2.0rem;
    }
}

h3 {
    font-family: 'Alegreya Sans SC', sans-serif;
    color: #000000;
    font-weight: 700;
}

@media (min-width:768px) {
    h3 {
        font-size: 1.75rem; 
    }
}

h4 {
    font-family: 'Alegreya Sans SC', sans-serif;
    color: #000000;
    font-weight: 700;
}

#headerWrapper {
	background-color: #000000;
	background-image:url(../images/back-asphalt-dark.jpg);
	background-size:cover;
}

#header {
	max-width: 1200px;
	padding-top:10px;
	padding-bottom:10px;
	margin-left:auto;
	margin-right:auto;
}
#header .left {
	text-align:center;
}
@media (min-width:992px) {
	#header .left {
		text-align:left;
	}
}
#header .right {
	text-align:center;
	padding-top:1rem;
}
@media (min-width:992px) {
	#header .right {
		text-align:right;
	}
}
#header h1 {
	color:#ffffff;
}
#header h4 {
	color:#ffffff;
}
#header p {
	color:#ffffff;
}
#header a:link, #header a:active {
	color:#ffffff;
}
#header a:hover {
	color: var(--gold);
}

#mainNav {
    font-family: 'Alegreya Sans SC', sans-serif;
    font-weight: 700;
	font-size:1.2rem;
	background-color:#000000;
}

#mainNav .navbar {
	text-align:center;
}

#mainNav .nav-item {
	padding:0;
}
@media (min-width:768px) {
	#mainNav .nav-item {
		padding:0px 20px;
	}
}

#mainNav .nav-link {
	padding: .5rem .75rem;
}
#mainNav a:link,
#mainNav a:visited {
    color: var(--gold);
	text-decoration:none;
}

#mainNav a:hover {
    color: #ffffff;
}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1.0)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
  border:2px solid #ffffff;
} 

#myCarousel {
	position:relative;
	max-height:600px;
	overflow:hidden;
}

#myCarousel img {
	width:100%;
}

@media (min-width:768px) {
	#myCarousel img {
		width:100%;
	}
}

#myCarousel .overlay {
    position: absolute;
	top:8%;
	left: 5%;
	right: 5%;
	width:90%;
    z-index: 20;
    color: #ffffff;
	text-align:center;
}
@media (min-width:992px) {
	#myCarousel .overlay {
		top:25%;
	}
}

#myCarousel .overlay p:first-child {
	font-family: 'Roboto', sans-serif;
	font-size: 1.5rem;
	font-weight:500;
	text-transform:uppercase;
	text-shadow: 4px 5px 0 rgba(0, 0, 0, 0.3);
	margin-bottom:0;
}
@media (min-width:768px) {
	#myCarousel .overlay p:first-child {
		font-size:2.7rem;
	}
}
@media (min-width:1200px) {
	#myCarousel .overlay p:first-child {
		font-size:3.8rem;
	}
}
@media (min-width:1380px) {
	#myCarousel .overlay p:first-child {
		font-size:4.4rem;
	}
}


#myCarousel .overlay p:nth-child(3) {
	font-family: 'Alegreya Sans SC', sans-serif;
	font-size:1.25rem;
	font-weight:500;
	line-height:120%;
	text-transform:uppercase;
}
@media (min-width:768px) {
	#myCarousel .overlay p:nth-child(3) {
		font-size:1.75rem;
		text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
	}
}
@media (min-width:1200px) {
	#myCarousel .overlay p:nth-child(3) {
		font-size:2.5rem;
		text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
	}
}
@media (min-width:1380px) {
	#myCarousel .overlay p:nth-child(3) {
		font-size:2.8rem;
		text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
	}
}
@media (min-width:1600px) {
	#myCarousel .overlay p:nth-child(3) {
		font-size:3.0rem;
		text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
	}
}



#myCarousel .divider {
	height:10px;
	border-bottom: 8px dashed #ffffff;
	width:20%;
	margin-left:auto;
	margin-right:auto;
	margin-top:8px;
	margin-bottom:12px;
}
@media (min-width:768px) {
	#myCarouse .divider {
		margin-top:20px;
		margin-bottom:30px;
	}
}

#hero {
	position:relative;
	max-height:600px;
	
}

#hero img.main {
	min-height:300px;
}

@media (min-width:768px) {
	#hero img.main {
		width:100%;
		max-height:600px;
	}
}

#hero img.bag {
	max-width:80%;
	max-height:250px;
}
@media (min-width:600px) {
	#hero img.bag {
		max-width:90%;
	}
}
@media (min-width:768px) {
	#hero img.bag {
		max-height:300px;
	}
}
#hero .overlay {
    position: absolute;
	top:10%;
	left: 5%;
	right: 5%;
	width:90%;
    z-index: 20;
    color: #ffffff;
	text-align:center;
}
@media (min-width:768px) {
	#hero .overlay {
		top:15%;
	}
}
@media (min-width:1200px) {
	#hero .overlay {
		top:25%;
	}
}
#hero .overlay p.title {
	font-family: 'Roboto', sans-serif;
	font-size: 1.9rem;
	font-weight:500;
	text-transform:uppercase;
	text-shadow: 4px 5px 0 rgba(0, 0, 0, 0.3);
	margin-bottom:0;
	padding-top:2rem;
}
@media (min-width:768px) {
	#hero .overlay p.title {
		font-size:3.0rem;
	}
}
@media (min-width:992px) {
	#hero .overlay p.title {
		text-align:left;
		padding-top:75px;
	}
}
@media (min-width:1200px) {
	#hero .overlay p.title {
		padding-top:100px;
	}
}

#hero .overlay p.tagline {
	font-family: 'Alegreya Sans SC', sans-serif;
	font-size:1.25rem;
	font-weight:500;
	line-height:1.5rem;
	text-transform:uppercase;
	text-shadow: 3px 4px 0 rgba(0, 0, 0, 0.3);
}
@media (min-width:768px) {
	#hero .overlay p.tagline {
		font-size:1.75rem;
	}
}

#hero .divider {
	height:10px;
	border-bottom: 8px dashed #ffffff;
	width:20%;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	margin-bottom:30px;
}

#worldwide {
	text-align:center;
	padding-top:25px;
	padding-bottom:20px;
}




#intro {
    background-color: var(--lightGrey);
	background-image:url(../images/back-asphalt-40percent.jpg);
	background-size:cover;
	padding-top:25px;
	padding-bottom:15px;
}
@media (min-width:768px) {
	#intro {
		padding-top:40px;
		padding-bottom:25px;
	}
}

#intro .row {
	max-width:1200px;
}

#intro .divider {
	height:10px;
	border-bottom: 6px dashed var(--gold);
	width:25%;
	margin-top:20px;
	margin-bottom:30px;
}

#intro .btn {
    color: #000000;
	background-color:var(--gold);
    border-color: var(--gold);
    border-radius: 0px;
	padding:10px 15px;
	margin-top:10px;
	margin-bottom:25px;
	font-family: 'Alegreya Sans SC', sans-serif;
	font-weight:700;
    -webkit-transition: background .65s ease-in-out;
    -moz-transition: background .65s ease-in-out;
    -ms-transition: background .65s ease-in-out;
    -o-transition: background .65s ease-in-out;
    transition: background .65s ease-in-out;
}

@media (min-width:768px) {
    #intro .btn {
        margin-top: 35px;
    }
}

#intro .btn:hover {

    color: #ffffff;
    border-color: #000000;
    background-color: #000000;
}

#content,
#content-2,
#leadIns {
	padding-top:25px;
	text-align:center;
}
@media (min-width:768px) {
	#content,
	#content-2,
	#leadIns {
		padding-top:40px;
		padding-bottom:15px;
	}
}

#content .row,
#leadIns .row {
	max-width:1200px;
}

#content-2 .row.full-width {
	margin-left:-30px;
	margin-right:-30px;
}

#content .divider,
#content-2 .divider,
#leadIns .divider {
	height:10px;
	border-bottom: 6px dashed var(--gold);
	width:25%;
	margin-top:20px;
	margin-bottom:30px;
	margin-left:auto;
	margin-right:auto;
}

@media (min-width:768px) {
	#content .left,
	#content-2 .left {
		text-align:left;
	}
}

#content.index h1,
#content.pot-hole-patch h1,
#content-2.pot-hole-patch h1 {
	color:#000000;
}


#content h3 a:link,
#content h3 a:visited {
	color:#000000;
}
#content h3 a:hover {
	color:var(--gold);
}

@media (min-width:1200px) {
	#content.pot-hole-patch ul {
		padding-top:15px;
	}
}

#content.pot-hole-patch ul li {
	text-align:left;
	font-size:1.1rem;
}
@media (min-width:1200px) {
	#content.pot-hole-patch ul li {
		font-size:1.2rem;
	}
}

#content-2.pot-hole-patch p {
	padding-left:15px;
	padding-right:15px;
}

@media (min-width:1400px) {
	#content-2.pot-hole-patch p {
		font-size:1.1rem;
	}
}

#content img.bag {
	padding-bottom:10px;
	max-height:60vh;
}

#content .btn,
#content-2 .btn {
    color: #000000;
	background-color:var(--gold);
    border-color: var(--gold);
    border-radius: 0px;
	padding:10px 15px;
	margin-top:10px;
	margin-bottom:25px;
	font-family: 'Alegreya Sans SC', sans-serif;
	font-weight:700;
    -webkit-transition: background .65s ease-in-out;
    -moz-transition: background .65s ease-in-out;
    -ms-transition: background .65s ease-in-out;
    -o-transition: background .65s ease-in-out;
    transition: background .65s ease-in-out;
}

#content.pot-hole-patch .btn {
	font-size:1.2rem;
}

#content-2.pot-hole-patch .btn {
	width:90%;
	font-size:1.2rem;
}

@media (min-width:768px) {
    #content .btn,
	#content-2 .btn {
        margin-top: 35px;
    }
}

#content .btn:hover,
#content-2 .btn:hover {

    color: #ffffff;
    border-color: #000000;
    background-color: #000000;
}

.green {
	color: var(--green);
}

#leadIns .btn {
    color: #000000;
	background-color:var(--gold);
    border-color: #000000;
    border-radius: 0px;
	padding:10px 15px;
	margin-top:10px;
	margin-bottom:25px;
	font-size:1rem;
	font-family: 'Alegreya Sans SC', sans-serif;
	font-weight:700;
    -webkit-transition: background .65s ease-in-out;
    -moz-transition: background .65s ease-in-out;
    -ms-transition: background .65s ease-in-out;
    -o-transition: background .65s ease-in-out;
    transition: background .65s ease-in-out;
}

#leadIns .btn:hover {

    color: #000000;
    border-color: var(--gold);
    background-color: #ffffff;
}

#leadIns {
	background-image:url(../images/back-asphalt-dark.jpg);
	background-size:cover;
}
		
#leadIns h2,
#leadIns h4 {
	color:#ffffff;
}

#leadIns .leadIns {
	background-color:#ffffff;
	text-align:center;
	width:98%;
	height: 450px;
	max-width:300px; /* this is the image size */
	margin-left:auto;
	margin-right:auto;
	margin-bottom:25px;
	margin-top:25px;
	padding:0;
	box-shadow:2px 0px 20px 0px rgba(0, 0, 0, .5);
}
@media (min-width:992px) {
	#leadIns .leadIns {
		height:425px;
		margin-bottom:50px;
	}
}
#leadIns .leadIns h3:nth-child(2) {
	padding:20px 0 0 0;
}
#leadIns .leadIns h3:nth-child(3) {
	color: var(--gold3);
	padding:10px 8px;
}
	

#earthpatch {
	background-color: var(--green);
	padding-top:25px;
	text-align:center;
	margin-top: -50px;
}
@media (min-width:768px) {
	#earthpatch {
		padding-top:40px;
		padding-bottom:15px;
	}
}

#earthpatch .row {
	max-width:1200px;
}

#earthpatch .divider {
	height:10px;
	border-bottom: 6px dashed var(--gold);
	width:25%;
	margin-top:20px;
	margin-bottom:30px;
	margin-left:auto;
	margin-right:auto;
}

#earthpatch .bordered {
	border:3px solid var(--darkGreen);
	padding:0;
}
	

#earthpatch .btn {
    color: #ffffff;
	background-color:#000000;
    border-color: #000000;
    border-radius: 0px;
	padding:10px 15px;
	margin-top:10px;
	margin-bottom:25px;
	font-family: 'Alegreya Sans SC', sans-serif;
    -webkit-transition: background .65s ease-in-out;
    -moz-transition: background .65s ease-in-out;
    -ms-transition: background .65s ease-in-out;
    -o-transition: background .65s ease-in-out;
    transition: background .65s ease-in-out;
}

@media (min-width:768px) {
    #earthpatch .btn {
        margin-top: 35px;
    }
}

#earthpatch .btn:hover {

    color: #ffffff;
    border-color: var(--gold);
    background-color: var(--gold);
}

#earthpatch img {
	padding-top:20px;
	padding-bottom: 25px;
}

@media (min-width:768px) {
	#earthpatch .left {
		text-align:left;
	}
}

@media (min-width:768px) {
	#earthpatch .push-down {
		padding-top:75px;
	}
}

#contact {
	padding-top:25px;
	text-align:center;
}
@media (min-width:768px) {
	#contact {
		padding-top:40px;
		padding-bottom:15px;
	}
}

#contact .row {
	max-width:1200px;
}

#contact a:link, 
#contact a:visited {
	color: #000000;
}
#contact a:hover {
	color: var(--gold);
}



@media (min-width:768px) {
	#contact .left {
		text-align:left;
	}
}

#contactColorBack {
	background-color: var(--lightGrey);
}

.aboutReason {
	padding-top:10px;
	padding-bottom:10px;
}
@media (min-width:768px) {
	.aboutReason {
		padding-top:15px;
		padding-bottom:25px;
	}
}

.patchReason {
	padding-top:10px;
	padding-bottom:10px;
	text-align:center;
}
@media (min-width:768px) {
	.patchReason {
		padding-top:15px;
		padding-bottom:25px;
		width:60%;
	}
}

.answer {
	text-align:left;
}

.question {
	background-color:var(--lightGrey);
	font-weight:500;
	text-align:left;
}


.answer, .question {
	padding:10px 15px;
}

@media (min-width:768px) {
	.answer, .question {
		padding:15px 25px 15px 25px;
	}
}

#privateLabel {
	padding-top:25px;
}
@media (min-width:768px) {
	#privateLabel {
		padding-top:60px;
	}
}
@media (min-width:1600px) {
	#privateLabel {
		padding-top:75px;
	}
}
#privateLabel {
	background-image:url(../images/front-end-loader-50.png);
	 background-size:cover;
	 background-position:bottom right;
	 background-repeat:no-repeat;
}
@media (min-width:768px) {
	#privateLabel {
		background-image:url(../images/front-end-loader.png);
		background-size:cover;
		background-position:bottom right;
	}
}
#privateLabel .btn {
    color: #000000;
	background-color:var(--gold);
    border-radius: 0px;
	padding:10px 15px;
	margin-top:10px;
	margin-bottom:25px;
	font-size:1rem;
	font-family: 'Alegreya Sans SC', sans-serif;
	font-weight:700;
    -webkit-transition: background .65s ease-in-out;
    -moz-transition: background .65s ease-in-out;
    -ms-transition: background .65s ease-in-out;
    -o-transition: background .65s ease-in-out;
    transition: background .65s ease-in-out;
}
#privateLabel .btn.wide {
	width:100%;
}
	
#privateLabel .btn:hover {

    color: #000000;
    background-color: #ffffff;
}
@media (min-width:596px) {
	.sizes {
		padding-top:10px;
	}
}
@media (min-width:768px) {
	.sizes {
		padding-top:25px;
	}
}
@media (min-width:992px) {
	.sizes {
		padding-top:50px;
	}
}
@media (min-width:1200px) {
	.sizes {
		padding-top:100px;
	}
}

#we-ship ul {
	list-style:none;
	font-size:1.1rem;
}
#we-ship a:link,
#we-ship a:visited {
	text-decoration: none;
	color:#111111;
}
#we-ship a:hover {
	color:var(--gold3);
	text-decoration:underline;
}

#sitemap ul,
#sitemap ul li ul {
	list-style:none;
	font-size:1.1rem;
	text-align:left;
}
#sitemap a:link,
#sitemap a:visited {
	text-decoration: none;
	color:#111111;
}
#sitemap a:hover {
	color: var(--gold3);
	text-decoration:underline;
}

#footer {
	background-color:#000000;
	background-image:url(../images/back-asphalt-dark.jpg);
	background-size:cover;
	padding-top:15px;
	padding-bottom:25px;
}
#footer h1, #footer h2, #footer h3, #footer h4, #footer p {
	color:#ffffff;
	text-align:left;
}
#footer a:link, 
#footer a:visited {
	color: var(--gold);
}
#footer a:hover {
	color:#ffffff;
}

#footer .flag {
	max-width:60%;
}
@media (min-width:768px) {
	#footer .flag {
		max-width:50%;
	}
}
@media (min-width:1200px) {
	#footer .flag {
		max-width:250px;
	}
}

#footer .visit {
	text-align:left;
}
@media (min-width:768px) {
	#footer .visit {
		text-align:center;
	}
}
	

#footer .credits {
	text-align:center;
	font-size:.9rem;
	padding-top:25px;
}
#footer .credits p {
	color: #ffffff;
	text-align:center;
	
}
#footer .credits a:link, 
#footer .credits a:visited {
	color: var(--gold);
}
#footer .credits a:hover {
	color:#ffffff;
}