/*********
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 {
  font-size: 1.5rem;
}

h2 {
  font-size: 1.25rem;
}

h4 {
  font-size: 0.75rem;
  }


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

.main {
  padding-top: 15px;
}


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

.fa {font-size: 2.25rem;}

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

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

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

div [data-type="itemRow"] {
  margin-bottom: 45px;
}

.itemImg {
  padding-top: 7px;
  padding-bottom: 10px;
}

th {
  text-align: left;
  width: 75px;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  color: #CC0000;
  border-right: 1px solid black;
}

.smallQuoteButton {
  font-family: 'Roboto', sans-serif;
}  

.accordion-title, .templateHead {
  color: #CC0000;
}

.thanksHead {
  font-size: 3rem;
  line-height: 3.5rem;
}

ul.templates li {
    padding: 0;
    list-style-type: none;
    margin-top: 0;
}

ul.templates a {
    color: #000;
    line-height: 1.25rem;
}

ul.templates a:hover {
color: #CC0000;
  }

/*********
FORM STYLES
**********/

fieldset legend {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
}

fieldset label {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  color: #CC0000;
}


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

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


div [data-type="templates"] .fa, 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) {

.sticky, .leftNav {
  display: none;
  }

  div [data-num] {
  height: 105px;
  }

}


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

.leftNav {
  margin-left: 0;
  padding-left: 0;
}

.leftNav ul li a {
  color: #CC0000;
}

.leftNav li a {
  display: block;
  padding: 7px 10px;
}

.leftNav a {
  color: #000;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
}

.leftNav a:hover { 
    background-color: #CC0000;
    color: #FFF;
}


.smallQuoteButton {
  display: none;
}


}


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


  div [data-num] {
  height: 100px;
  }

}

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


  div [data-num] {
  height: 80px;
  }


}

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