.mobilegone{ display: none; }
.mobilehere{ display: block; }

.flex{
  flex-wrap: wrap;
}

.flex .half, .flex .third{
  width: 100%;
  margin-right: 0;
}

.mg1{ display: grid; grid-template-columns: repeat(1, 1fr); gap: 20px; }
.mg2{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.mg3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mg4{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.mg5{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.mg6{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.mg7{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 20px; }
.mg8{ display: grid; grid-template-columns: repeat(8, 1fr); gap: 20px; }
.mg9{ display: grid; grid-template-columns: repeat(9, 1fr); gap: 20px; }
.mg11{ display: grid; grid-template-columns: repeat(10, 1fr); gap: 20px; }
.mg11{ display: grid; grid-template-columns: repeat(11, 1fr); gap: 20px; }
.mg12{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }

.ms1{ grid-column: span 1; }
.ms2{ grid-column: span 2; }
.ms3{ grid-column: span 3; }
.ms4{ grid-column: span 4; }
.ms5{ grid-column: span 5; }
.ms6{ grid-column: span 6; }
.ms7{ grid-column: span 7; }
.ms8{ grid-column: span 8; }
.ms9{ grid-column: span 9; }
.ms10{ grid-column: span 10; }
.ms11{ grid-column: span 11; }
.ms12{ grid-column: span 12; }



#mobilenav {
  width: 45px;
  height: 35px;
  position: absolute;
  z-index: 5;
  right:15px;
  top:30px;
  transform: rotate(0deg);
  transition: .5s ease-in-out;
  cursor: pointer;
}

#mobilenav span {
  display: block;
  position: absolute;
  height: 3px;
  width: 50%;
  background: var(--primary);
  opacity: 1;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

#mobilenav span:nth-child(even) {
  left: 50%;
}

#mobilenav span:nth-child(odd) {
  left:0px;
}

#mobilenav span:nth-child(1), #mobilenav span:nth-child(2) {
  top: 5px;
}

#mobilenav span:nth-child(3), #mobilenav span:nth-child(4) {
  top: 15px;
}

#mobilenav span:nth-child(5), #mobilenav span:nth-child(6) {
  top: 25px;
}

#mobilenav.open span:nth-child(1),#mobilenav.open span:nth-child(6) {
  transform: rotate(45deg);
}

#mobilenav.open span:nth-child(2),#mobilenav.open span:nth-child(5) {
  transform: rotate(-45deg);
}

#mobilenav.open span:nth-child(1) {
  left: 5px;
  top: 8px;
}

#mobilenav.open span:nth-child(2) {
  left: calc(50% - 5px);
  top: 8px;
}

#mobilenav.open span:nth-child(3) {
  left: -50%;
  opacity: 0;
}

#mobilenav.open span:nth-child(4) {
  left: 100%;
  opacity: 0;
}

#mobilenav.open span:nth-child(5) {
  left: 5px;
  top: 21px;
}

#mobilenav.open span:nth-child(6) {
  left: calc(50% - 5px);
  top: 21px;
}

img.block.header-logo{
  width: 200px; 
  display: inline-block;
}

header #nav a{
  display: block;
  width: 100%;
  margin: 0;
  border-top: 1px solid #CCC; 
  padding: 10px; 
  text-align:center; 
  border-bottom:none; 
  background-color: #f1f1f1;
}
header #nav a.current{
  color: var(--primary); 
  border-bottom:none; 
}
header #nav a:last-child{
  border-bottom: 1px solid #CCC; 
}

.mobile-left{
  text-align:left; 
}
.mobile-tight{
  gap: 2px; 
}