h1 {
  margin-top: -108px;
  padding: 55px;
  font-size: 20px;}

.nav {
  width: auto;
  height: 20px;
  padding: 15px;
  transition: 0.5s;}

.menu {
  margin-top: -40px;
  padding: 0;
  width: 0;
  overflow: hidden;
  transition: 0.5s;}

.nav input:checked ~ .menu {
  width: 700px;}

.menu li {
  list-style: none;
  margin: 0 25px;}

.menu li a {
  text-decoration: none;
  color: #666;
  text-transform: uppercase;
  font-weight: 600;
  transition: 0.5s;}

.menu li a:hover {
  color: #161919;}

.nav input {
  width: 40px;
  height: 40px;
  cursor: pointer;
  opacity: 0;}

.nav span {
  position: absolute;
  left: 30px;
  width: 30px;
  height: 4px;
  border-radius: 50px;
  background-color: #666;
  pointer-events: none;
  transition: 0.5s;}

.nav input:checked ~ span {
  background-color: #666;}

.nav span:nth-child(2) {
  transform: translateY(-8px);}

.nav input:checked ~ span:nth-child(2) {
  transform: translateY(0) rotate(-45deg);}

.nav span:nth-child(3) {
  transform: translateY(8px);}

.nav input:checked ~ span:nth-child(3) {
  transform: translateY(0) rotate(45deg);}

  .col-sm-1 {width: 8.33%;}
  .col-sm-2 {width: 16.66%;}
  .col-sm-3 {width: 25%;}
  .col-sm-4 {width: 33.33%;}
  .col-sm-5 {width: 41.66%;}
  .col-sm-6 {width: 50%;}
  .col-sm-7 {width: 58.33%;}
  .col-sm-8 {width: 66.66%;}
  .col-sm-9 {width: 75%;}
  .col-sm-10 {width: 83.33%;}
  .col-sm-11 {width: 91.66%;}
  .col-sm-12 {width: 100%;}

  @media only screen and (min-width: 700px){ 
    .col-md-1{width: 8.33%}
    .col-md-2{width: 16.66%}
    .col-md-3{width: 25%}
    .col-md-4{width: 33.33%}
    .col-md-5{width: 41.66%}
    .col-md-6{width: 50%}
    .col-md-7{width: 58.33%}
    .col-md-8{width: 66.66%}
    .col-md-9{width: 75%}
    .col-md-10{width: 83.33%}
    .col-md-11{width: 91.66%}
    .col-md-12{width: 100%}

    h1 {margin-top:-1px;      
      padding: 1px;
      font-size: 20px;}

    .nav {
  
      width: auto;
      height: 20px;
      display: flex;
      align-items: center;
      padding: 15px;
      transition: 0.5s;}
    
    .menu {
      display: flex;
      align-items: center;
      margin: 0;
      padding: 0;
      width: 0;
      overflow: hidden;
      transition: 0.5s;}
    
    .nav input:checked ~ .menu {
      width: 700px;}
    
    .menu li {
      list-style: none;
      margin: 0 25px;}
    
    .menu li a {
      text-decoration: none;
      color: #666;
      text-transform: uppercase;
      font-weight: 600;
      transition: 0.5s;}
    
    .menu li a:hover {
      color: #161919;}
    
    .nav input {
      width: 40px;
      height: 40px;
      cursor: pointer;
      opacity: 0;}
    
    .nav span {
      position: absolute;
      left: 30px;
      width: 30px;
      height: 4px;
      border-radius: 50px;
      background-color: #666;
      pointer-events: none;
      transition: 0.5s;}
    
    .nav input:checked ~ span {
      background-color: #666;}
    
    .nav span:nth-child(2) {
      transform: translateY(-8px);}
    
    .nav input:checked ~ span:nth-child(2) {
      transform: translateY(0) rotate(-45deg);}
    
    .nav span:nth-child(3) {
      transform: translateY(8px);}
    
    .nav input:checked ~ span:nth-child(3) {
      transform: translateY(0) rotate(45deg);}
    
  }

  @media only screen and (min-width: 1200px){
    .col-lg-1{width: 8.33%}
    .col-lg-2{width: 16.66%}
    .col-lg-3{width: 25%}
    .col-lg-4{width: 33.33%}
    .col-lg-5{width: 41.66%}
    .col-lg-6{width: 50%}
    .col-lg-7{width: 58.33%}
    .col-lg-8{width: 66.66%}
    .col-lg-9{width: 75%}
    .col-lg-10{width: 83.33%}
    .col-lg-11{width: 91.66%}
    .col-lg-12{width: 100%}

    h1 {margin-top:-1px;      
      padding: 1px;
      font-size: 20px;}
 
    .nav {
    
      width: auto;
      height: 20px;
      display: flex;
      align-items: center;
      padding: 15px;
      transition: 0.5s;}
    
    .menu {
      display: flex;
      align-items: center;
      margin: 0;
      padding: 0;
      width: 0;
      overflow: hidden;
      transition: 0.5s;}
    
    .nav input:checked ~ .menu {
      width: 700px;}
    
    .menu li {
      list-style: none;
      margin: 0 25px;}
    
    .menu li a {
      text-decoration: none;
      color: #666;
      text-transform: uppercase;
      font-weight: 600;
      transition: 0.5s;}
    
    .menu li a:hover {
      color: #161919;}
    
    .nav input {
      width: 40px;
      height: 40px;
      cursor: pointer;
      opacity: 0;}
    
    .nav span {
      position: absolute;
      left: 30px;
      width: 30px;
      height: 4px;
      border-radius: 50px;
      background-color: #666;
      pointer-events: none;
      transition: 0.5s;}
    
    .nav input:checked ~ span {
      background-color: #666;}
    
    .nav span:nth-child(2) {
      transform: translateY(-8px);}
    
    .nav input:checked ~ span:nth-child(2) {
      transform: translateY(0) rotate(-45deg);}
    
    .nav span:nth-child(3) {
      transform: translateY(8px);}
    
    .nav input:checked ~ span:nth-child(3) {
      transform: translateY(0) rotate(45deg);}
    
 
  }