@import url('https://fonts.googleapis.com/css2?family=Vollkorn:wght@500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
:root {
    --maroon: #720000;
    --darkGreen: #006953; /* old green: #003d11 */
    --sand: #d9d6a9;
    --lightSand: #ebead6;
	--darkSand: #a88f59;
    --offWhite: #f5f3e6;
    --darkGrey: #363636;
	--almostWhite: #f2f0e7;
}
body {
    background-color: var(--offWhite);
	color: var(--darkGrey); 
}

h1 {
    font-family: 'Vollkorn', serif;
    text-transform: uppercase;
color: var(--maroon);
font-size: 1.5rem;
}
@media (min-width: 768px) {
  h1 {
font-size: 1.95rem;
}
}
h2 {
  font-family: 'Lato', sans-serif;
    text-transform: uppercase;
color: var(--maroon);
font-size: 1.35rem;
}
@media (min-width: 768px) {
  h2 {
font-size: 1.75rem;
}
}
h3 {
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    font-size: 1.125rem;
}
@media (min-width: 768px) {
  h3 {
font-size: 1.35rem;
}
}
h4 {
  font-family: 'Lato', sans-serif;
  text-transform: uppercase;
  font-size: 1.125rem;
  font-weight: 700;
}
.headerWrapper {
  position:relative;
  background-color: transparent;
  padding: 0px;
  top: 0px;
  z-index: 250;
}
@media (min-width: 768px) {
  .headerWrapper {
    position: relative;
  }
}
header {
  padding-top: 5px;
  padding-bottom: 0px;
  text-align: center;
}
@media (min-width: 768px) {
  header {
    padding-bottom: 12px;
  }
}
header .logo {
	text-align:center;
}
header .logo img {
	max-height:28vh;
}
@media (min-width:768px) { 
	header .logo img {
		max-height:35vh;
	}
}

header .phoneEmail {
  font-size: 1.3rem;
  padding-top: 0px;
  text-align:right;
}
@media (min-width: 768px) {
  header .phoneEmail {
    padding-top: 50px;
	font-size:1.8rem;
	text-align:right;
  }
}
header .phoneEmail i {
  margin-right: 12px;
}
header .phoneEmail a:link,
header .phoneEmail a:visited {
  color: var(--darkGreen);
  text-decoration: none;
}
header .phoneEmail a:hover {
  color: var(--darkSand);
}

.navbar {
  padding-top: 15px;
  padding-bottom: 20px;
  margin-top:-80px;
  border-bottom: 12px double var(--darkGreen);
}
@media (min-width: 768px) {
	.navbar {
		margin-top:0;
		padding-top:5px;
		padding-bottom:5px;
		border-top: 12px double var(--darkGreen);
	}
}
.nav-item {
  margin-left: 20px;
  margin-right: 20px;
}
a:link.nav-link,
a:visited.nav-link {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.25rem;
  color: var(--darkGreen);
}
a:hover.nav-link {
  color: var(--darkSand);
}


.intro {
  margin-top: 20px;
  margin-bottom:50px;
  padding: 0px;
  overflow: hidden;
}
@media (min-width: 768px) {
	.intro {
		margin-bottom:90px;
	}
}
.introText {
  padding: 35px;
  margin-top: 0px;
  text-align: center;
}
@media (min-width: 768px) {
  .introText {
    padding: 30px 0 60px 0;
  }
}
.intro p.doYou {
    font-family: 'Great Vibes', cursive;
    color: var(--darkGreen);
    font-size: 2.9rem;
    font-style: italic;
    
 }
@media (min-width:1200px) {
	 .intro p.doYou {
		font-size:4rem;
	 }
}
		
.intro h2 {
    font-family: 'Lato', sans-serif;
    color: var(--darkGreen);
    text-transform: uppercase;
    font-size: 1.35rem;
    letter-spacing: 3px;
    
}
@media (min-width:1200px) {
	.intro h2 {
		font-size:1.5rem;
	}
}
	
.intro p,
.intro ul {
    font-family: 'Lato', sans-serif;
    color: var(--darkGrey);
    font-size: 1.05rem;
   
}
@media (min-width:1200px) {
	.intro p,
	.intro ul {
		font-size:1.25rem;
	}
}
.intro ul {
	list-style: square;
}
	
.intro a:link,
.intro a:visited {
  color: var(--maroon);
  text-decoration: none;
  font-weight:700;
}
.intro a:hover {
  color: var(--darkGrey);
}
	
.toyCarousel {
	background-color: var(--lightSand);
}
#myCarousel {
	padding-top:50px;
}
@media (min-width:768px) {
	#myCarousel {
		padding-top:90px;
	}
}
.carousel-inner img {
    width:100%;
	padding-bottom:60px;
}
.carousel-indicators [data-bs-target]  {
	background-color: var(--darkGreen);
}

.brandLogos {
	background-color: transparent;
	padding: 50px 0;
	text-align:center;
}
@media (min-width:768px) {
	.brandLogos {
		padding:90px 0;
	}
}
.brandLogos img {
	padding-bottom:25px;
}



#content {
    padding-top: 75px;
    padding-bottom: 75px;
}

#content hr {
	border-top:3px solid var(--darkSand);
	margin-top:20px;
	margin-bottom:20px;
}
#content p,
#content ul {
    font-family: 'Lato', sans-serif;
    color: var(--darkGrey);
    font-size: .95rem;
    font-weight: 300;
}
@media (min-width: 768px) {
  #content p,
  #content ul {
    font-size: 1.25rem;
}
}


.img-stacked {
	margin-bottom:15px;
}
@media (min-width:768px) {
	.img-stacked {
		margin-bottom:0;
	}
}
.img-rounded {
	border-radius:.8rem;
	border: 2px solid var(--sand);
}

#contact .row {
	margin-bottom:15px;
}
  

  #testimonial {
      background-color: var(--sand);
      padding-top: 50px;
      padding-bottom: 50px;
     
  }
  #testimonial span:before {
    content: '\2605\2605\2605\2605\2605';
    color: #cfa30b;
    font-size: 1.5rem;
  }
  #testimonial p:nth-child(2) {
    font-family: 'Vollkorn', serif;
    font-size: 1.25rem;
    font-style: italic;
    color: var(--darkGreen)
}
@media (min-width: 768px) {
    #testimonial p:nth-child(2) {
		font-size: 1.75rem;
	}
}
#testimonial p:nth-child(3) {
    font-family: 'Lato', sans-serif;
    font-size: .975rem;
    color: var(--darkGreen)
}
@media (min-width: 768px) {
    #testimonial p:nth-child(3) {
		font-size: 1.25rem;
    }
}
.location {
  padding: 0px;
  overflow: hidden;
}
.location .building {
  background-image: url(../photos/storefront.jpg);
  background-size: cover;
  padding: 0px;
  height: 320px;
}
@media (min-width: 768px) {
  .location .building {
    height: initial;
  }
}
.location .theMap {
  padding: 0px;
}

footer {
    padding-top:50px;
    padding-bottom: 50px;
    background-color: var(--darkGreen);
    color: var(--sand);
}
footer p {
    font-size: .95rem;
}
footer .social {
	font-size: 1.8rem;
}
footer a:link, footer a:visited {
    color: var(--sand);
    text-decoration: none;
}
footer a:hover {
    color: var(--lightSand);
}