.main-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex; }
  .main-nav__list {
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    min-width: 0;
    align-items: center;
    flex: 1 1 auto; }
    .main-nav__list li a {
      color: #000000;
      text-decoration: none;
      font-size: 15px;
      font-family: "Commissioner", sans-serif; }
    .main-nav__list li a:hover {
      color: #555;
      text-decoration: none; }
  .main-nav__sub {
    position: absolute;
    z-index: 100;
    top: 26px;
    left: 0;
    background-color: #CFEFFA;
    padding: 10px 14px;
    border-radius: 0 8px 8px 8px;
    width: 295px;
    height: auto;
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s ease-in-out; }
    .main-nav__sub li {
      margin-left: 16px;
      color: black; }
    .main-nav__sub a {
      color: #000;
      font-size: 18px; }
  .main-nav__item {
    position: relative;
    padding: 3px 14px; }
    .main-nav__item.is-additional {
      padding-right: 24px; }
      .main-nav__item.is-additional:hover {
        border-radius: 8px 8px 0 0;
        background-color: #CFEFFA; }
        .main-nav__item.is-additional:hover .arrow:before {
          transform: translateY(-5px) translateX(-4px) rotate(-45deg); }
    .main-nav__item a {
      font-weight: 600; }
    .main-nav__item .selected {
      color: #014453; }
  .main-nav__item:hover .main-nav__sub, .main-nav__sub:hover {
    visibility: visible;
    opacity: 1;
    transition: all 0.5s ease-in-out; }
  .main-nav .arrow {
    position: absolute;
    right: 5px;
    top: -15px;
    display: block;
    height: 100%;
    width: 15px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    -webkit-transition: background-color .2s;
    -moz-transition: background-color .2s;
    transition: background-color .2s; }
    .main-nav .arrow:before, .main-nav .arrow:after {
      content: '';
      position: absolute;
      top: 24px;
      right: 6px;
      width: 1px;
      height: 6px;
      background-color: #000000; }
    .main-nav .arrow:before {
      -webkit-transform: translateY(-9px) rotate(-45deg);
      -moz-transform: translateY(-9px) rotate(-45deg);
      -ms-transform: translateY(-9px) rotate(-45deg);
      -o-transform: translateY(-9px) rotate(-45deg);
      transform: translateY(-9px) rotate(-45deg); }
      .main-nav .arrow:before:hover {
        transform: translateY(-9px) rotate(90deg); }
    .main-nav .arrow:after {
      -webkit-transform: translateY(-5px) rotate(45deg);
      -moz-transform: translateY(-5px) rotate(45deg);
      -ms-transform: translateY(-5px) rotate(45deg);
      -o-transform: translateY(-5px) rotate(45deg);
      transform: translateY(-5px) rotate(45deg); }

.social-button {
  background-color: #014453;
  border-radius: 25px;
  font-size: 14px;
  color: azure;
  white-space: nowrap;
  border: none;
  padding: 5% 10%;
  margin-right: 20px;
  width: 154px; }

.social {
  display: flex;
  padding-right: clamp(30px, 3vw, 35px); }
  .social img {
    width: 32px;
    height: 30px;
    margin: 2% 4% 0 0; }
  .social a {
    margin-left: auto;
    flex-shrink: 0;
    margin-top: 5px;
    display: flex;
    padding-right: clamp(6px, 2vw, 9px); }

@media (min-width: 1530px) {
  .main-nav__list li {
    font-size: 1rem; } }

@media screen and (max-width: 1200px) {
  .main-nav {
    position: fixed;
    z-index: 80;
    right: -100%;
    top: 25px;
    width: 223px;
    background-color: #CFEFFA;
    border-radius: 15px 0 0 15px;
    padding: 38px 14px 18px;
    transition: all 0.5s ease-in-out;
    flex-direction: column; }
    .main-nav.is-open {
      right: 0;
      transition: all 0.5s ease-in-out; }
    .main-nav__list {
      flex-direction: column;
      align-items: flex-start; }
      .main-nav__list li a {
        font-size: 10px;
        line-height: 11px;
        font-weight: 600; }
    .main-nav__sub {
      position: relative;
      visibility: visible;
      opacity: 1;
      padding: 0;
      top: 0; }
      .main-nav__sub li {
        margin-left: 0; }
        .main-nav__sub li a {
          font-size: 8px;
          line-height: 9px;
          font-weight: 400; }
    .main-nav .arrow {
      display: none; }
  .social {
    width: 116px;
    flex-wrap: wrap;
    margin: 20px 13px; }
    .social a {
      margin: 0 0 6px 0; }
    .social img {
      width: 12px;
      height: 12px; }
    .social .social-button {
      flex: 0 0 100%;
      font-size: 10px; }
  .icon-x {
    display: block; } }