/*********
BASE STYLES
**********/

html {
  box-sizing: border-box;
	width: 100%;
}
*, *:before, *:after {
  box-sizing: inherit;
}

ul {list-style-type: none;}

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

header, h1, h2, h4 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}

h1 {
  padding-left: 25px;
  margin-left: 0;
  margin-bottom: 15px;
  background-color: #bababa;
  font-size: 1.5rem;
}

h2 {
  font-size: 1.25rem;
  padding-top: 5px;
}

h4 {font-size: 0.75rem;}

h3 {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 1rem;
}

div[data-sellers="topSellers"] {
  padding-top: 10px;
  vertical-align: center;
}

.row {
  max-width: 100%;
  margin-left: 0px;
  margin-right: 0px;
}

/*********
HEADER STYLES
**********/

header {
  background-color: #000;
  color: #FFF;
}

.off-canvas {
  background-color: #000;
  color: #fff;
}

.off-canvas a {color: #FFF;}

.button {margin: 0 auto;}

.button.alert {
    background-color: #bf1e2e;
    }


/*********
MAIN ELEMENT STYLES
**********/

.sm-logo {width: 250px;}

.mainAd {
  width: 100%;
  object-fit: contain;
}

.ad-top {
	padding: 0;
}

div [data-ad] {
  height: 100%;
  background-color: #FFF;
  } 

div [data-num] {
  height: 125px;
  text-align: center;
  padding: 10px;
  }

  div [data-num] a {
  color: #fff;
  }

.fa {font-size: 2.25rem;}

div[data-num="1"],[data-num="2"],[data-num="3"] {
color: #fff;
}

div[data-num="1"] {background-color: #3ab54a;}
div[data-num="2"] {background-color: #35a7db;}
div[data-num="3"] {background-color: #bf1e2e;}
.smallQuoteButton {font-family: 'Roboto', sans-serif;}  

div[data-sellers] {
	padding-top: 0;
}

div[data-sellers] a {
  color: #000;
  }

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

footer {
  background: #D4D4D4;
  height: auto;
  font-family: 'Roboto', sans-serif;
  font-size: 0.85rem;
  padding: 10px;
}


footer .fa {
  font-size: 1rem;
  padding-right: 10px;
}

.copyright {
  font-size: 0.5rem;
}


.map-responsive {
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
  }

.map-responsive iframe {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
  }


/*********
MEDIA QUERIES
**********/

/* Small only */
@media screen and (max-width: 39.9375em) {
}


/* Medium and up */
@media screen and (min-width: 40em) {

.lg-logo {
    width: 300px;
    padding: 10px 0;
  }

 .headerInfo {
  margin-top: 25px;
 } 

.primary-menu {
  padding-left: 10px;
  margin: 0;
  background-color: #3a3a3a;
}

.primary-menu a {
  text-decoration: none;
  color: #fff;
  padding: 0 15px;
  line-height: 40px;
}

.primary-menu li.menu-item-has-children > a:after {
   color: #fff;
   content: ' ▾';
}

nav ul li.menu-item-has-children {
  position: relative;
}
  
nav ul li {
  display: inline-block;
  }

nav ul li.menu-item:hover {background: #222;}
nav ul li.menu-item-has-children:hover .submenu {
  display: inline-block;
  }

nav ul li.menu-item-has-children:hover .submenu a:hover {
color: #CC0000;
  }

ul.submenu {
  display:none;
  position: absolute;
  left: 0;
  margin-left: 0;
  width: 210px;
  z-index: 99;
  }

ul.submenu li {
  display:block;
  background-color: #222;
  }


.smallQuoteButton {
  display: none;
}

}


/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {

  div [data-num] {
  height: 100px;
  text-align: center;
  padding: 10px;
  }

}

/* Large and up */
@media screen and (min-width: 64em) {

  div [data-num] {
  height: 80px;
  text-align: center;
  padding: 10px;
  }


}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {}