/*
Header stylem sheet.
Author: Aaron W Jones
Website: aaronwjones.com
Date: 07/12/2020

Extended and rewritten from a
http://www.freecsstemplates.org/
template.
*/

/* Transparent overlay for use in sidebar
and other things */
#overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

#gwwrapper {
    margin: 0;
    padding: 0;
    height: auto;
    background: linear-gradient(to bottom, #F5F7F6, #DBDBDB);
    border-bottom: 5px solid;
    border-top:0px solid;
    border-color: #ffffff;
}

#gwheader {
    position: relative;
    max-width: 920px;
    margin: 0 auto;
    /*border: 5px solid red;*/
}

.gwmenu_buttons{
  border: none; /* Remove borders */
  background-color:  transparent;
  color: #3C3C3C; /* Text color same as main background */
  padding: 30px; /* Some padding */
  font-size: 32px; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
  /*border: 5px solid blue;*/
  display: none; /* hidden until enabled by media query */
}

/* Darker background on mouse-over */
.gwmenu_buttons:hover {
  color: blue;
}

#gwlogo {
    /*border: 3px solid yellow;*/
    padding: 23px;
    padding-left: 3px;
}

.logo_main {
    /*border: 3px solid green;*/
    max-width: 60%;/*630px;*/
    height: auto;
}

#gwlogowide {display: block;}
#gwlogotall {display: none;}

#goto_top {
  display: block; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #D00000; /* Same as 'optics' */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
}

#goto_top:hover {
  background-color: #3C3C3C; /* Add a dark-grey background on hover */
}


@media screen and (max-width: 950px) {
  .gwmenu_buttons{display: block;} /* show */
}

@media screen and (max-width: 850px) {
  #gwlogowide {display: none;}
  #gwlogotall {display: block;}
  #gwlogo {padding: 5px;}
  .logo_main {
    width: 375px; /* Matches height of `gwoptics` around transition */
                  /* When div gets narrow, max-width will shrink it again */
  }
}

@media screen and (max-width: 500px) {
  #gwlogo {padding: 2px;}
  .gwmenu_buttons{  
    padding: 15px; /* Some padding */
    font-size: 20px; /* Set a font size */
  }
}