/* Custom Template Styles */

/* ==========================================================================
   Custom Header Styles
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    /* Colors */
   --asu-gold: #FFC627; /* ASU Gold */
   --asu-maroon: #8C1D40; /* ASU Maroon */
   --asu-gray: #747474; /* ASU Gray */
   --asu-blue: #00A3E0; /* ASU Blue */

   /* Breakpoints */
    --break-2xl: 1536px;
    --break-xl: 1280px;
    --break-lg: 1024px;
    --break-md: 768px;
    --break-sm: 0;
}

.bg-asu-gold {
   background-color: var(--asu-gold);
}
.bg-asu-maroon {
   background-color: var(--asu-maroon);
}
.border-asu-gold {
   border-color: var(--asu-gold) !important;
}
.border-asu-maroon {
   border-color: var(--asu-maroon) !important;
}
.border-asu-gray {
   border-color: var(--asu-gray) !important;
}
.text-asu-gold {
   color: var(--asu-gold) !important;
}
.text-asu-gray {
   color: var(--asu-gray) !important;
}
.hidden {
   position: inherit;
   visibility: visible;
}
html {
   @media (min-width: 768px) {
      overflow-x: unset !important;
   }
}

html,
body {
   background-color: transparent !important;
   font-family: "Roboto", sans-serif !important;
   height: 100%;

   ::-moz-selection { /* Code for Firefox */
        color: #000;
        background: var(--asu-gold);
   }

   ::selection {
        color: #000;
        background: var(--asu-gold);
   }

   a:hover {
      cursor: pointer !important;
   }
}

body {
   background-color: black !important;

   h1,
   h2,
   h3 {
      &:after {
         display: none !important;
      }
   }
}

.responsive .container {
   max-width: 1523px !important;
   padding-left: 0 !important;
   padding-right: 0 !important;
   width: 100% !important;
}
#main {
   background: none !important;
}
.header_bg {
   background-color: transparent !important;
   pointer-events: none;
}
.container_wrap.main_color {
   background-color: transparent;
}


#top h1.headline {
   @media (min-width: 0px) {
      font-size: 42px !important;
   }
   @media (min-width: 768px) {
      font-size: 56px !important;
   }
   @media (min-width: 1024px) {
      font-size: 56px !important;
   }
   @media (min-width: 1280px) {
      font-size: 65px !important;
   }
   /* @media (min-width: 0px) {
      font-size: 64px !important;
   }
   @media (min-width: 768px) {
      font-size: 85px !important;
   }
   @media (min-width: 1024px) {
      font-size: 92px !important;
   }
   @media (min-width: 1280px) {
      font-size: 120px !important;
   } */
}

#page-top-content {
   h1 {
      color: #fff;
      text-transform: uppercase;

      @media (min-width: 0px) {
         font-size: 42px !important;
      }
      @media (min-width: 768px) {
         font-size: 56px !important;
      }
      @media (min-width: 1024px) {
         /* font-size: 64px !important; */
      }
      @media (min-width: 1280px) {
         font-size: 65px !important;
         /* font-size: 78px !important; */
      }
   }
   h2 {
      color: #fff;
      text-transform: uppercase;

      @media (min-width: 0px) {
         font-size: 24px !important;
      }
      @media (min-width: 768px) {
         font-size: 28px !important;
      }
      @media (min-width: 1280px) {
         font-size: 32px !important;
      }

      &:after {
         display: none !important;
      }
   }
}


#top h3[id*="modal-title"] {
   @media (min-width: 0px) {
      font-size: 16px !important;
   }
   @media (min-width: 768px) {
      font-size: 24px !important;
   }
}

.main-button,
.secondary-button,
.nav-button {
   display: inline-block;
   padding: 5px 25px;
   border: 1px solid var(--asu-gold);
   border-radius: 100px;
   text-decoration-line: none !important;
   font-size: 16px;
   transition: .2s;
   min-width: 125px;
   text-align: center;

   &:hover {
      color: var(--asu-gold) !important;
      border-color: rgba(255,255,255,.25);
      background-color: #000;
   }
}
.main-button {
   transition: .2s;
   color: #000 !important;
   background-color: var(--asu-gold);
}
.secondary-button {
   transition: .2s;
   color: #fff !important;
   background-color: rgba(0,0,0,.5);

   &:hover {
      color: #000 !important;
      background-color: var(--asu-gold) !important;
   }
}

.media-card {
   &:hover {
      .secondary-button {
         color: #000 !important;
         background-color: var(--asu-gold);
      }
   }
}

#subscribe-button {
   @media (min-width: 0px) {
      display: none !important;
   }
   @media (min-width: 1024px) {
      display: block !important;
   }
}

a.nav-button {
   padding: 10px 20px 5px 20px !important;
   min-width: none;
   background-color: var(--asu-gold);
   max-height: 40px;
   font-weight: 500 !important;
   color: #000 !important;
   transition: .2s !important;

   @media (min-width: 0px) {
      display: none !important;
   }
   @media (min-width: 1024px) {
      display: inline-block !important;
   }

   &:hover {
      background-color: rgba(255,255,255,.15);
   }
}
a.square-button {

}

#gallery-search {
   background: url('../src/img/ico-search.svg') no-repeat;
   background-size: 1.25rem auto;
   background-position: right center;
}

.media-feature {
   @media (min-width: 0px) {
      display: none !important;
   }
   @media (min-width: 1024px) {
      display: flex !important;
   }
}

.av-burger-overlay-active {
   #header {
      height: 100vh !important;
   }
}
#top #header #header_main .container .main_menu .av-main-nav-wrap .av-burger-overlay .av-burger-overlay-scroll .av-burger-overlay-inner #av-burger-menu-ul {
   padding: 0 !important;
   padding-top: 100px !important;
}
.avia-menu.av-main-nav-wrap {
   /* display: none !important; */
}

/* Navigation */
#top #header #header_main .container .main_menu .av-main-nav>li.av-burger-menu-main {
   @media (max-width: 768px) {
      margin-top: 0 !important;
   }
}
#header_meta {

}

#top {
   #header {
      overflow: visible;

      #header_main {
         max-width: 1523px !important;

         .container {
            &.av-logo-container {
                  width: fit-content !important;
                  justify-content: center;

                  @media (min-width: 768px) {
                     display: none;
                  }
            }
            .avia-standard-logo {
               display: none !important;
            }

            .main_menu {
               .av-main-nav-wrap {
                  ul#avia-menu {
                     li {
                        padding-bottom: 10px;
                        a {
                           padding: 13px 0 25px 0;

                           @media (min-width: 1024px) {
                              margin-left: 15px;
                              margin-right: 15px;
                           }
                           @media (min-width: 1280px) {
                              margin-left: 20px;
                              margin-right: 20px;
                           }
                        }

                        ul {
                           margin-top: -10px;
                        }
                     }
                  }

                  /* HAMBURGER */
                  .av-burger-menu-main .av-hamburger:not(.is-active) .av-hamburger-inner,
                  .av-burger-menu-main .av-hamburger:not(.is-active) .av-hamburger-inner:before,
                  .av-burger-menu-main .av-hamburger:not(.is-active) .av-hamburger-inner:after {
                     background-color: #fff;
                  }
               }
            }
         }
      }
   }
}

#header_main {
   @media (min-width: 768px) {
      border-bottom: 1px solid rgba(255,255,255,.25) !important;
   }

   .av-logo-container {
      margin: 0 !important;

      @media (min-width: 768px) {
         width: fit-content !important;
      }
   }

   #header_main_alternate {
      /* max-width: 1523px !important; */
      width: fit-content !important;
      margin: 0 0 0 auto !important;
      /* border-bottom: 1px solid rgba(255,255,255,.25); */

      .container {
         margin-top: 0 !important;

         .main_menu {
            .menu {
               display: flex;
               align-items: center;

               li {
                  a {
                     color: #fff !important;
                     font-weight: 400 !important;

                     &.nav-button {
                        color: #000 !important;
                        border: none;

                        &:hover {
                           color: var(--asu-gold) !important;
                        }
                     }
                  }
               }

               .sub-menu {
                  li {
                     a {
                        color: #000 !important;
                        margin: 0px !important;
                        padding-left: 0px !important;
                     }

                     &.current_page_item,
                     &.current-menu-item {
                        a {
                           font-weight: bold !important;
                        }
                     }
                  }
               }
            }
         }
      }
   }
}


#header {
   transition: .4s;

   @media (min-width: 0px) {
      background: rgba(0,0,0,.5);
      border-bottom: 1px solid rgba(255,255,255,.1) !important;
   }

   @media (min-width: 768px) {
      background: rgba(0,0,0,0);
      border-bottom: 1px solid rgba(255,255,255,0) !important;
   }

   &.scrolled {
      background: rgba(0,0,0,.5);
      border-bottom: 1px solid rgba(255,255,255,.1) !important;

      #header_main {
         border: none !important;

         .header_logo_container {
            gap: 1rem;

            .asuam-logo {
               width: 3.5rem;
            }

            .asu-logo {
               @media (min-width: 1024px) {
                  width: 4.1rem;
               }
            }
         }
      }
   }
}


#gallery-container {
   .media-link {

      &.active {
         border-color: var(--asu-gold);
         position: relative;

         &:after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -11px;
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 10px solid var(--asu-gold);
         }
      }
   }
}



/* FOOTER */
#footer {
   a {
      text-decoration: none;
   }
}

footer {
   background: #000 !important;

   a {
      text-decoration: none !important;

      &:hover {
         text-decoration: underline !important;
      }
   }

   .social_bookmarks {
      margin-right: 0 !important;

      &:before {
         display: none;
      }

      li {
         margin-right: 10px;

         &:last-child {
            margin-right: 0px;
         }

         a {
            background: #fff !important;
            color: #000 !important;
            font-size: 16px;

            &:hover {
               color: #fff !important;
               background: var(--asu-maroon) !important;
               text-decoration: none !important;
            }
         }
      }
   }
}