:root {
  --max-content-width: 1240px;
  --max-content-secondary-width: 1640px;
}

body {
  font-family: 'Source Sans Pro', sans-serif;
  font-size:2.0rem;
  background:#fff;
  color:#000;
}

header {
  background:#ccc;
  display:grid;
  grid-template-columns: 
    minmax(10px, 1fr) 
    minmax(auto, 200px) 
    minmax(0, calc(var(--max-content-width) )) 
    minmax(10px, 1fr);
  grid-template-areas: "header-left header-logo header-nav header-right";
  align-items: center;
  height:90px;
}

.logo {
  grid-area: header-logo;
  background: url(images/logo.svg) no-repeat center center / contain;
  height: 50px;
}

/*-- STICKY HEADER STYLES --*/
header {
  position:sticky;
  top:0;
  z-index:100;
  transition: all .25s ease-out;
}

.sticky-header .logo {
  height: 30px;
  margin: 10px 0;
  transition: all .25s ease-out;
}

header.sticky-header {
  height:50px;
  background:#b4b4b4;
}

header.sticky-header  nav {
  transition: all .25s ease-out;
}

header.sticky-header nav a, header.sticky-header nav a:visited, header.sticky-header nav a:hover {
  line-height: 40px;
}
/*--STICKY HEADER STYLES: END --*/

nav {grid-area: header-nav;}

main {
  min-height: calc(100vh - 100px);
  background:#fff;
  padding:20px 0;
  align-content: start;
}

footer {
  background: #333;
  color:#fff;
  min-height: 100px;
  display:grid;
  grid-template-areas: "footer-left  footer footer footer  footer-right";
  grid-template-columns: 
    minmax(10px, .75fr) 
    minmax(0, calc(var(--max-content-secondary-width) / 3)) 
    minmax(0, calc(var(--max-content-secondary-width) / 3)) 
    minmax(0, calc(var(--max-content-secondary-width) / 3)) 
    minmax(10px, .75fr);
  grid-column-gap: 40px;
}

a, a:hover, a:visited,a:hover {color:#0094FF;text-decoration:none;}
a:hover {color:#66BFFF;}

h1,h2,h3 {font-weight:300;margin: 1rem 0;line-height:1;}
h1 {font-size: 5.0rem;}
h2 {font-size: 4.0rem;}
h3 {font-size: 3.0rem;}

.hero {grid-column: 1 / -1;}
.hero-slidshow {grid-column: 1 / -1;}

@media (max-width:800px),(max-device-width: 800px){
  /* Mobile devices breakpoint */
  header {
    grid-template-columns: minmax(40px, 10%) 1fr;
    grid-template-areas: "header-nav header-logo";
  }
 
  /* Make entire layout 1 column */
  .grid-columns-2 > :first-child, .grid-columns-2 > *
  ,.grid-column-2-1,.grid-column-2-2
  ,.grid-column-3-1,.grid-column-3-2,.grid-column-3-3
  {grid-column: 2 / 5;}
  
  
}