@import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');

*, *::before, *::after {
  box-sizing: border-box;
}
  body	{
    background-image: url(./SMlogo.jpg);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
  }

         .btn-grad {background-image: linear-gradient(to right, #1FA2FF 0%, #12D8FA  51%, #1FA2FF  100%)}
         .btn-grad {
            text-align: center;
            transition: 0.5s;
            color: white;            
            box-shadow: 0 0 20px #eee;
            border-radius: 10px;
            display: block;
	    width: 10em;
	    height: auto;
	    margin-bottom: 3px;
          }

          .btn-grad:hover {
            background-position: right center; /* change the direction of the change here */
            color: #fff;
          }
         
main{
	padding: 0;
}
  header{
	  position: sticky;
	  top:0;
	  color : #003300;
	  background: lightblue;
	  text-align: center;
	  display: grid;
	  grid-template-columns: 1fr 6fr 1fr;
  }
  .title-header{
	  grid-column: 2/3;
  }
  .title-header p{
font-weight: normal;
  }
  header h1,p{
	  margin: 0;
  }
  .large-pic{
	  display: block;
	  margin-left:  auto;
	  margin-right:  auto;
	  margin-top: 5rem;
	  text-align: center;
	  width:100%;
	  max-width: 632px;
	  height: auto;
  }
  table {
	  border-collapse: separate;
	  border-spacing: 5px;
  }
 .nav-toggle {
	  position: absolute !important;
	  top: -9999px !important;
	  left: -9999px !important;
  }

  nav a {
            text-decoration: none;
  }
  nav{
	  position: absolute;
	  left: 0;
	  top: 100%;
	  transform: scale(1,0);
	  transform-origin: top;
	  /*height: 8rem;*/
  }
  nav ul {
	  list-style: none;
	  margin: 0;
	  padding: 0;
  }
  nav li{
	  margin: 0;
	  padding: 0;
  }
  .nav-toggle:checked ~ nav{
	  transform: scale(1,1);
  } 
.nav-bar{
  padding: 5px;

  font-size: 0.75rem;
  font-style: italic;
  position: absolute;
  top: 2rem;
  left: 0;
  margin-left: 0.5em;
}
.nav-bar i{
  position: relative;
  font-size: 2rem;
}

  .submenu{
	  display: none;
	  position: relative;
	  left: 10px;
  }
/*
 * .main-menu:hover >.submenu{
	  display: block;
  }
*/
  .submenu .btn-grad
  {
          background-image: linear-gradient(to right, #FF121F 0%, #FF1200  51%, #FF12FF  100%);

  }

@media screen and (min-width: 800px) {
     nav{
	  transform: scale(1,1);
  }
  .nav-toggle:checked ~ nav{
	  transform : scale(1,0);
  } 
}