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

.flex{
  flex-wrap: wrap;
}

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


.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; }
.mg10{ 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 {
  right:15px;
  top:30px;

  width: 45px;
  height: 35px;
  position: absolute;
  z-index: 5;
  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:0}#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}


.mobile-left{ text-align:left; }
.mobile-center{ text-align:center; }
.mobile-right{ text-align:right; }