/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
/* stylelint-disable*/
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}html{line-height:1}body{line-height:inherit}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
/* stylelint-enable */

/* Begin site styles below */

/* Base Styles */
/*
  Hint: these tend to be
  1. element selectors
  2. concerned with color and typography
  3. basic element presenation
*/
/* site is designed with a Major Third modular scale*/
html {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.125em; /*18/16=1.125*/
  line-height: 1.25em;/*22.5/18=1.25*/
  background-color: #b4d455;
}
#navigation {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
li {
  padding-bottom: 0.512em; /*22.5/43.945=0.512*/
}
#navigation li {
  text-decoration: none;
  float: left;
  width: 33.33333333%;
}
#navigation a {
  font-size: 1.5em;
  display: block;
  color: black;
  background-color: #708729;
  text-decoration: none;
  text-align: center;
  width: 100%;
  padding-top: 0.611em;/*11/18=0.611*/
  padding-bottom: 0.611em;/*11/18=0.611*/
}
#navigation a:hover {
  background-color: #485422;
  color: #DFFF80;
}
#spec-list {
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}
#slideshow{
  margin-left: auto;
  margin-right: auto;
  padding-bottom:  0.611em;
}
.footer{
  display: block;
  color: black;
  background-color: #708729;
  text-decoration: none;
  text-align: center;
  position:absolute;
  left:0;
  width: 100%;
  padding-top: 0.611em;/*11/18=0.611*/
  padding-bottom: 0.611em;/*11/18=0.611*/
  margin-left:0;
  margin-right:0;
}
.body-title {
  text-align: center;
}
.list-title {
  text-align: center;
}
.center-image {
  margin-left: auto;
  margin-right: auto;
}
body {
  padding-top: 3.75em;/*1.25*3=3.75*/
  padding-right: 1.25em;/*22.5/18=1.25*/
  padding-left: 1.25em;/*22.5/18=1.25*/
}
h4, h5, h6, p, figcaption {
  padding-bottom: 1.25em;/*22.5/18=1.25*/
}
h1 {
  font-size: 2.369em; /*43.945/18=2.441*/
  line-height: 1.032em; /*44/43.945 =1.001*/
  padding-bottom: 0.501em; /*22.5/43.945=0.501*/
}
h2 {
  font-size: 1.758em; /*31/18=1.72*/
  line-height: 1.06em; /*33/31=1.06*/
  padding-bottom: 0.709em; /*22/31=0.709*/
}
h3 {
  font-size: 1.563em; /*28.125/18=1.563*/
  font-weight: bold;
  padding-bottom: 0.512em; /*22.5/43.945=0.512*/
}
/* Responsive Media */
img,
video,
audio {
  display: block;
  max-width: 100%;
}
@media screen and (max-width: 6.25em) {
  body::before {
    content: "wow you have a very tiny screen.  you should probably look at this website on a larger screen to properly see it!";
  }
}
@media screen and (min-width: 26.5625em) {
  /*425px grid with two 20px margins*/
  body {
    padding-top: 3.75em; /*67.5/18=3.75*/
    padding-right: 4.705%;/*22.5/18=4.705%*/
    padding-left: 4.705%;/*22.5/18=4.705%*/
  }
}
@media screen and (min-width: 40em) {
  /*
    640px grid with two 40px margins
  */
  html {
    font-size: 1.25em; /*20/16=1.25em*/
  }
  body {
    padding-right: 6.25%; /*40/640=0.0625*/
    padding-left: 6.25%; /*40/640=0.0625*/
  }
}
@media screen and (min-width: 45em) {
  /*
    720px grid with two 80px margins
  */
  body {
    padding-right: 11.111%; /*80/720=11.111%*/
    padding-left: 11.111%; /*80/720=11.111%*/
  }
  .cssgrid #content1{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 11.111%;
    width:auto;
  }
  .cssgrid #primary{
    grid-column:1;
  }
  .cssgrid #supporting{
    grid-column:2;
  }
}
@media screen and (min-height: 52.778em) and (min-width:50em){
/*950x900 grid*/
  #resumehighres{
    bottom:0;
  }
}
@media screen and (min-height: 60em)  and (min-width:58.750em){
  /*
    2560x1440px grid
  */
  #interestshighres{
    bottom:0;
  }
}