/* --- CSS Reset --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 1rem;
}

[class*=grid] {
  margin: 0;
}

.col, [class*=col-] {
  padding: 0;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

/* --- General Styles --- */

body {
  font-family: 'Open Sans', sans-serif;
}

p {
  margin: 0 1rem 1rem 1rem;
}

a {
  text-decoration: none;
}

nav a:hover {
  color: #fe7c73;
}

img {
  max-width: 100%;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.zoompic:hover img {
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

/* --- Header --- */
header {
  background-color: white;
  z-index: 99;
  top: 0;
  left: 0;
  right: 0;
}

header .site-logo {
  padding: 0;
  text-align: center;
}

header .site-logo img {
  width: 30rem;
}

header nav {
  text-align: center;
}

header .site-nav {
  border-top: 1px solid #0062ab;
  border-bottom: 1px solid #0062ab;
  padding: 0.5rem 0;
  margin-bottom: 1rem;
}

header nav a {
  font-family: 'Quicksand', sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
  color: #0062ab;
  padding: 0.5rem 0.8rem;
  border-radius: 5px;
}


/* --- CALL TO ACTION buttons --- */
.btn {
  padding: 0.5rem 1rem;
  margin: 10px;
  font-size: 1.2rem;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  display: inline-block;
}

.btn-contact {
  background-color: #00ad48;
}

.btn-contact:hover {
  color: #03a9f4;
  background-color: white;
}

.btn-brands {
  background-color: #03a9f4;
}

.btn-brands:hover {
  background-color: #555;
}

/* Dropdown Button */
.dropbtn {
  font-family: 'Quicksand', sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
  color: #0062ab;
  background-color: inherit;
  padding: 0.5rem 0.8rem;
  border: none;
  outline: none;
  border-radius: 5px;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    color: #fe7c73;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border: 1px solid #0062ab;
    border-radius: 5px;
}

/* Links inside the dropdown */
.dropdown-content a {
    font-family: 'Quicksand', sans-serif;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #0062ab;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  color: #fe7c73;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
  display:block;
}


/* --- Homepage --- */

.intro {
  margin: auto;
  width: 80%;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.8rem;
  text-align: center;
  color: white;
  background-color: #0067af;
  padding: 1rem;
  border-radius: 10px;
}

.logo-tile {
  padding: 2rem;
}

.main-tile {
  padding: 0;
  margin: 1rem 1rem 0.5rem 1rem;
  border-radius: 5px;
}

.main-tile h2 {
  font-family: 'Quicksand', sans-serif;
  font-size: 1.5rem;
  color: #555;
}

.main-content {
  color: #555;
  background-color: #5acfce;
  padding: 1rem;
  margin: 0;
  text-align: center;
}

.main-blurb {
  padding: 0 1rem 1rem 1rem;
}

.main-text {
  padding: 0 2rem;
}

.main-image {
  min-height: 15rem;
  background-size: cover;
  background-position: 50% 10%;
}

@media only screen and (max-width: 64em) {
  .main-flip {
      display: -webkit-flex; /* Safari */
      -webkit-flex-direction: column-reverse; /* Safari 6.1+ */
      display: flex;
      flex-direction: column-reverse;
    }
}

/* --- Link to ABL website --- */

.abl-blurb {
  margin: 1rem;
  font-family: 'Quicksand', sans-serif;
  font-size: 1rem;
  text-align: center;
  color: white;
  background-color: #0067af;
  padding: 1.5rem;
  border-radius: 10px;
}

.abl-link {
  margin: 1rem;
  font-family: 'Quicksand', sans-serif;
  font-size: 1rem;
  text-align: center;
  color: white;
  background-color: #0067af;
  padding: 1.5rem;
  border-radius: 10px;
}

.abl-blurb h2 {
  margin: 1rem;
}

/*--ABOUT Page--*/

.intro-about {
  margin: auto;
  width: 20%;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.8rem;
  text-align: center;
  color: white;
  background-color: #0067af;
  padding: 1rem;
  border-radius: 10px;
}

.about-us-page {
  font-size: 1.2rem;
  color: #0062ab;
  margin: 0 auto;
  max-width: 50em;
  text-align: center;
  padding: 2rem 2rem 0 2rem;
}

/*--BRANDS pages--*/
.brands-banner h2{
  font-family: 'Quicksand', sans-serif;
  font-size: 2.5rem;
  color: #03a9f4;
  text-transform: uppercase;
  text-align: center;
  margin: 1rem;
}

.brands-tile {
  font-family: 'Quicksand', sans-serif;
  font-size: 1.2rem;
  color: #555;
  background-color: #5acfce;
  padding: 1rem;
  margin: 1rem;
  text-align: center;
  border-radius: 5px;
}

.brands-tile p{
  margin: 1rem;
}

.brands-image {
  min-height: 15rem;
  background-size: cover;
  background-position: 50% 10%;
  margin: 1rem;
}

/*--STORE FINDER Page--*/

.stores-section{
  color: #0062ab;
  padding: 3rem 8rem;
}

.storeslist-tile{
  padding-bottom: 3rem;
}

.stores-logo {
  max-height: 20rem;
}

.stores-image {
  min-height: 20rem;
  background-size: cover;
  background-position: center;
  padding-bottom: 3rem;
}


/*--SHOP Page--*/

.shop-section{
  padding: 1rem;
}

.shoplist-tile{
  padding: 1rem;
}


/* CONTACT FORMS */

.contact-section {
  margin: 1rem;
}

.message-section{
  margin: auto;
  width: 40%;
  font-size: 1.2rem;
  text-align: center;
  color: white;
  background-color: #0067af;
  padding: 2rem 2rem 1rem 2rem;
  border-radius: 10px;
}


.link-block{
  text-align: center;
}

.padded {
  padding: 1%;
  margin: 1rem;
}

form input,
form textarea {
  width: 100%;
  margin: 0.5rem 0;
  padding: 0.8rem;
  border: 1px solid #555;
  font-size: 1rem;
}

textarea {
  min-height: 7.5rem;
}

form label {
  margin: 1rem 0 0;
  display: inline-block;
  color: #0062ab;
  font-family: 'Quicksand', sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
}

form input[type="submit"] {
  background-color: #00ad48;
  color: white;
  text-transform: uppercase;
  display: inline-block;
  border: none;
  border-radius: 5px;
  margin: 0;
}

form input[type="submit"]:hover {
  color: white;
  background-color: #0062ab;
}

.showroom-details {
  padding: 1%;
  margin: 1rem;
  color: #0062ab;
  font-family: 'Quicksand', sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
}

.map {
  margin: 1rem;
}


/*-- TERMS --*/

.terms-page{
  color: #0062ab;
  margin: 0 auto;
  max-width: 50em;
  text-align: justify;
  padding: 3rem;
}

.terms-page h2{
  margin-bottom: 2rem;
}

.terms-page h3{
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/*-- 404 page --*/

.error-page {
  font-size: 1.2rem;
  text-align: center;
  color: #0062ab;
  margin: 0 auto;
  max-width: 70em;
  padding: 2rem 2rem 0 2rem;
}

/*-- Thanks Page ---*/

.thanks-page {
  font-size: 1.2rem;
  text-align: center;
  color: #0062ab;
  padding: 1rem;
  margin: 1rem;
}

/* --- Footer ---*/
footer {
  color: #0062ab;
  padding: 0.5rem;
  text-align: center;
}

footer .nav-link {
  padding: 1rem;
}

footer nav a {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.9rem;
  text-decoration: none;
  color: #0062ab;
  padding: 0.5rem;
}

.icon {
  width: 3.5rem;
  height: 3.5rem;
  margin: 1rem 1rem;
  }

.icon a{
  fill: currentColor;
  overflow: hidden;
}

.icon:hover nav a{
  color: #03a9f4;
  vertical-align: top;
}

/*--Media Queries--*/

@media only screen and (max-width: 64em) {
  .intro-about {
    margin: auto;
    width: 80%;
    text-align: center;
    color: white;
    background-color: #0067af;
    padding: 1rem;
    border-radius: 10px;
  }

  .message-section{
    margin: auto;
    width: 80%;
    text-align: center;
    color: white;
    background-color: #0067af;
    padding: 1rem;
    border-radius: 10px;
  }

  .stores-section{
    padding: 3rem 2rem;;
  }

}