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

body {
  font-family: 'Raleway', sans-serif;
  font-size:1.75rem;
  background:#fff;
  color:#000;
  display: grid;
  /*background:linear-gradient(to right, #3d3d3d, #bababa 50%, #bababa 75%, #3d3d3d 100%);*/
  background: linear-gradient(to right, #3d3d3d, #bababa calc((100vw - var(--max-content-width)) * .40), #bababa calc((100vw - var(--max-content-width)) * .40 + var(--max-content-width)), #3d3d3d 100%);
}

::placeholder {font-family: 'Raleway', sans-serif;}

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

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

/*-- STICKY HEADER STYLES --*/
header {
  position:-webkit-sticky;
  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;
  will-change:size;
}

header.sticky-header {height:50px;}
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;}

.header-contact {
  white-space:nowrap;
  grid-area: header-contact;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}

main {
  min-height: calc(100vh - 600px); 
  padding:20px 0;
  display:grid;
  grid-template-columns: 
    minmax(10px, 1fr) 
    minmax(0, calc(var(--max-content-width) / 3))
    minmax(0, calc(var(--max-content-width) / 3)) 
    minmax(0, calc(var(--max-content-width) / 3)) 
    minmax(10px, 1fr);

  grid-template-areas: "main-left  main main main  main-right";
  grid-gap: 0;
}

main > * {padding:40px 50px;background:#fff;}

footer {
  background: #13294b;
  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;
  padding: 30px 0;
}

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

footer a, footer a:hover, footer a:visited, footer a:hover 
,.header-contact a,.header-contact a:visited, .header-contact a:hover
{color: #7bafd4;font-weight: bold;}

h1,h2,h3 {font-weight:400;margin: 2.5rem 0;line-height:1;}
h1 {font-size: 4.5rem; padding-bottom: 0px;}
h2 {font-size: 3.7rem;}
h3 {font-size: 2.7rem;}

.grid-columns-1 > * {grid-column: main;}
.grid-columns-2 > :first-child {grid-column: 2 / 4;}

.grid-column-2-1 {grid-column: 2 / 4;}
.grid-column-2-2 {grid-column: 4;}
.grid-column-3-1 {grid-column: 2;}
.grid-column-3-2 {grid-column: 3;}
.grid-column-3-3 {grid-column: 4;}

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

.google_map {
 min-height:200px;
  width:100%;
}

@media (max-width:800px),(max-device-width: 800px){
  /* Mobile devices breakpoint */
  body > header {
    height:80px;
    grid-template-columns: minmax(40px, 10%) 1fr max-content;
    grid-template-areas: "header-nav header-logo header-contact";
  }

  .logo {height: 60%;}
  .header-contact {text-align: center;grid-gap: 8px;padding-right: 0px;}
  
  .mobile-top-nav-show {display: flex; padding-left: 20px;}

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

  footer a, footer a:hover, footer a:visited, footer a:hover 
,.header-contact a,.header-contact a:visited, .header-contact a:hover
{color: #7bafd4;font-weight: bold;}

h1,h2,h3 {font-weight:400;margin: 0rem 0;line-height:1;}
h1 {font-size: 3.8rem; padding-bottom: 0px;}
h2 {font-size: 3rem;}
h3 {font-size: 2rem;}

}