/*biotech squad website custom css using the bootstrap framework*/

/* General styles */



#main-body {
    position:relative;
    background-color:#eaeb8f;
}

body {
    background-color:#eaeb8f;
}
.screenreader-text {
  position: absolute;
  left: -999px;
  width:1px;
  height: 1px;
  top: auto;

  &:focus {
    color: $background-color;
    display: inline-block;
    height: auto;
    width: auto;
    position: static;
    margin: auto;
  }
}

p, li {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
}


h1, h2, h3 {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.collapsing {
-webkit-transition: all 0 ease;
-o-transition: all .5s ease;
transition: all 0 ease;
}

/*color-palette*/

.teal-bg {
    background-color:#295f49;
}
.white-bg {
    background-color:#eaeb8f;
}

.blue-bg {    
    background-color:#1d4db5;
}
.brown-bg {    
    background-color:#6F4821;
}

.violet-bg {    
    background-color:#732172;
}

.lime-green-bg {
    background-color:#26F005;
}

.pink-bg {
    background-color:#F42E99;
}

.purple-bg {
    background-color:#531472;
}
.aqua-bg {
    background-color:#2BD8D5;
}
.yellow-bg {
     background-color:#D6E240;
}
/* buttons  */
.btn {
    text-transform:uppercase;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight:bold;
}

.btn-primary {
    font-size:2rem;
    padding:.5rem 2rem; 
    display:inline-block; 
    overflow:hidden; 
    background-size:cover;
    background-repeat: no-repeat;
    background-image:url(img/button_primary-raised.png);
    transition:transform ease-out .5s;
    border-radius:0;
    background-color:transparent !important;
    border:1px solid transparent !important;
    text-transform: none;
    color:#333;
}
.btn-primary:hover {
    transform:scale(1.02);
    background-image:url(img/button_primary-hover.png);
        color:#333;

}
.btn-primary:active {
    transform:scale(.98);
    background-image:url(img/button_primary-pressed.png) !important;
}
.btn .oi {
    top:.3rem;
    font-size:105%;
    margin-left:1rem;
}

.btn-pink-outline {
    padding:.5rem 3.5rem;
    background:rgba(66, 63, 107);
    border:5px  rgba(123, 122, 198) solid;
    color:white !important;
    transition:all ease-out .5s;

}

.btn-pink-outline:hover {
    box-shadow: rgba(234, 233, 148,.9) 0 0 20px;

         background:rgba(123, 122, 198);
    border:5px  rgba(66, 63, 107)solid;
    transform:scale(1.1);        
}

.btn-pink-outline:active {
    transform:scale(.9); 
}

.btn-outline-secondary {
    border-color:#211346;
    color:#211346;
}

.btn-outline-secondary:hover {
    background-color:#312356;
        border-color:#211346;

}
.btn-outline-secondary.focus, .btn-outline-secondary:focus {
            border-color:rgba(33,19,70,.8);
        box-shadow: 0 0 0 0.2rem rgba(33,19,70,.3);

}
.btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .show>.btn-outline-secondary.dropdown-toggle:focus {
        box-shadow: 0 0 0 0.2rem rgba(33,19,70,.3);
}

.btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active, .show>.btn-outline-secondary.dropdown-toggle {    background-color:#211346;
    
}

/* Header Nav */
header {
    position:absolute;
    top:0;
    left:0;
    background-color:transparent;
    color:#fff;
    width:100%;
    z-index:10;
}


#menu-toggler {
    position:absolute;
    font-family:'M PLUS Rounded 1c';
    font-weight:bold;
    font-size:30px;
    padding:5px;
    text-transform: uppercase;
    top:5px;
    left:5px;
    z-index:20;
    color:#fff; 
    transition:background ease-out 1s;
}


.navbar-light #menu-toggler[aria-expanded="false"] {
    color:#222;
}

.navbar-light #menu-toggler[aria-expanded="false"]:active {
    background:#453452;
    color:white;
}

.navbar-light #menu-toggler[aria-expanded="true"] {
     background:#453452;
    color:white;
}

#menu-toggler[aria-expanded="true"] {
position:fixed;
}

.navbar-light .navbar-toggler-icon,
.navbar-light .navbar-toggler-icon::after {
    color: #222; /* Set the color to black */
}

#menu-toggler .d-none.d-md-inline {
    color: #453452;
}
#title-brand {
    position:relative;
    top:0;
    left:40px;
    font-family:'M PLUS Rounded 1c';
    font-weight:bold;
    font-size:24px;
color: #453452;
}

#menu-toggler .hamburger-inner, #menu-toggler .hamburger-inner::before, #menu-toggler .hamburger-inner::after {
    background-color: #453452;
}

#menu-toggler[aria-expanded="true"] .hamburger-inner, #menu-toggler[aria-expanded="true"] .hamburger-inner::before, #menu-toggler[aria-expanded="true"] .hamburger-inner::after {
    background-color:white;
    
    
}

#social-media-container {
    position:absolute; 
    top:8px;
    right:10px;
    width:auto;
    display:flex;
    align-items:flex-start;
}

a.social-icon  {
    display:block;
    height:48px;
    padding:6px;
    margin:0 5px;
    cursor:pointer;
}

.social-icon img {
    height:100%;
    width:auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#biotech-nav {
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:100%;
    top:-90vh;
    height:100vh;
    padding:0;
    align-items:center;
    background-repeat:no-repeat;
    background-color:#440044;
    background-image: url(documents/background.jpg);
    background-size:cover;
    transition-timing-function:ease-out;
    transition-duration: .2s;
    transition-property:all;
/*    overflow:hidden;*/
    z-index:10;
}

#biotech-nav.show {
    top:0;
    display:flex;
}

#biotech-nav div  {
    position:relative;
    height:auto;
    margin:60px 10%;
    width:80%;
    transition-timing-function:ease-in-out;
    transition-duration: .3s;
    transition-property:all;
}

#biotech-nav .navbar-nav {
    width:100%;
    border: 1px solid #000000;
    border-bottom:0;

}

.navbar-dark {
    background:#4e4c70;
}

#biotech-nav .navbar-nav .nav-link{
    width:100%;
    border:8px solid transparent;
    background:rgba(66, 63, 107);
    border-bottom:8px solid rgba(0,0,0,.3);
    border-left:8px solid rgba(0,0,0,.1);
    border-top:8px solid rgba(255,255,255,.3);
    border-right:8px solid rgba(255,255,255,.1);
    align-content:center;
    padding:1.5rem 0;
    line-height:1;
    text-align:center;
    height:auto;
    font-family:'M PLUS Rounded 1c';
    font-weight: bold;
    font-size:2rem;
    text-transform:uppercase;
    color:#fff;
    transition:all ease-out .3s;
    
}
#biotech-nav .navbar-nav .nav-item .nav-link:hover {
        background-color:rgba(123, 122, 198,1) ; 
}
#biotech-nav .navbar-nav .nav-item .nav-link:active {
        background-color:rgba(143, 142, 208,1) ;
    color:#202;
}

header .navbar {
    height:60px;
}
header.sticky {
    background-color:rgba(255,255,255,.95);
    box-shadow: 0 4px 10px rgba(0,0,0,.2);
}



/* Jumbotron style */
.cover {
    position:relative;
    width:100%;
    background-size:180%;
    background-repeat: no-repeat;
    background-position:top;
    overflow:hidden;
}

#hero.cover {
    height:375px;
    background-image:url('documents/background.jpg');     
}

#hero-subpage.cover {
    display:flex;
/*    height:20vh;*/
    min-height:90px;
    background-color:rgba(0,0,0,.2);
    background-image:url('documents/background.jpg');  
        background-size:auto;
    background-position:top;
    color:#000;
    align-content: center;
    align-items:center;
    justify-content: center;
}
#hero-subpage.cover #subpage-title {
    font-size:2rem;
    letter-spacing: .12rem;

    margin:50px 0 25px; 
}


.parallax {    
    background-attachment:fixed;
}

#title {
    position:absolute;
    top:50px;
    width:60%;
    left:20%;
    z-index:2;
    transition:all ease-out .3s;
    text-align:center;
}

#title img {
    width:100%;
}


#title-small {
    position:absolute;
    top:0px;
    width:250px;
    left:calc(50% - 125px);
    padding:55px 0;
    background:url('documents/Title_1.png') no-repeat;
    background-position:center;
    background-size:100%;
    z-index: 5;
}

#characters{
     position:absolute;
    width:120%;
    left:-10%;
    bottom:0;
    transition:all ease-out .3s;
    text-align: center;
}
#characters img{ 
    width:100%;
}

#play-button-container {
    position:absolute;
    top:290px;/*345*/
    width:80%;
    height:auto;
    left:10%;
    text-align:center;
    z-index:2;
    transition:all ease-out .3s;
    display:flex;
    align-content: center;
    align-items: center;
    flex-flow:wrap;
}

#play-button-container .btn {
    font-size:1.5rem;
    margin:5px auto;
}



#play-button-header{
    position:absolute;
    top:10px;
    right:10px;
}

#play-button-header .btn {
    padding-right:40px;
    padding-left:40px;
}

#survey-button-header{
    position:absolute;
    top:6px;
    width:100%;
    display:flex;
    align-content: center;
        justify-content:center;
}


.section {
    background:#D9E6FF;
}

.section .lead {
    font-size:1.5rem;
}

.section h2 {
    font-size: 2.4rem;
}
#meet-squad-section {
 background:#fff;
}


.section .row {
   min-height:650px;
}

.section .row.row-top {
    align-items: flex-start !important;
    align-content: flex-start;
}
.section .row [class *= 'col-']{
}

 .section .row .row.definition-list {
        min-height:auto !important;
        }
    section .row .row.definition-list [class*='col-']{
        min-height:auto !important;
        }

#meet-biotech-section {
    background-image:url(img/section-bg-md.png);
    background-repeat: no-repeat;
    background-size:cover;
    color:#fff;
}


#text-section .row, #accessibility-section .row {
    align-content: left;
    align-items: left;
    text-align:left;
    padding: 40px 50px;
    background:rgba(127, 124, 173,.4);
}

#accessibility-section .row#grid-row {
    padding-top:0;
    display:flex;
    
}
#accessibility-section .row#grid-row [class*='col-']{
    flex-grow: 1;
    height:100%;
    padding-bottom:10px;
    display:flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
}

.game-heading-label {
    text-transform:uppercase;
    margin:0 0 5px 0;
    font-weight:500;
    text-decoration: underline;
}
.game-statement {
    font-size:90%;
    font-style:italic;
}

#video-section .row {
    align-content: center;
    align-items: center;
    text-align:center;
    padding:50px 0;
    background:rgba(127, 124, 173,.4);
}
#video-section .video-container {
   width:80%;
   height:45vw; /**added 4-6-21**/
    margin:auto;
    background:#7f7cad;
}
/**added 4-6-21**/
#video-section .video-container iframe {
    height:100%; 
    width:100%;
}

main {
    overflow-x:hidden;
}

.characters,
.biotechs {
    min-height:295px;
    pointer-events: none;
    
         -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */  
}


/*characters*/

.character img,
.biotech img {
    height:auto;
    width:100%;
}

#enforcement img {
    width:115%;
}

#healthcare {
    }

#education {
    }

#research {
    }

#meet-squad-section .character {
    position:absolute;
    left:0;
    width:29%;    
}

#meet-squad-section .show-on-scroll .character  {
    opacity:0;
}

#meet-squad-section #enforcement {
    left:40%;
    bottom:10%;
}

#meet-squad-section #education {
    bottom:10%;
    left:0%;
}

#meet-squad-section #healthcare {
    bottom:-5%;
    left:10%;
}

#meet-squad-section #research {
    bottom:0%;
    left:-20%;
}


.color-strip {
    position:absolute;
    top:0;
    left:0;
    height:140px;
    width:100%;
}
.character-section,.biotech-section {
    position:relative;
    border-bottom:1px solid #e5e28e;
    padding:0; 
} 



.character-section .text {
    margin:0 2rem ;
}

.character-section h2,
.biotech-section h2 {
    font-style:italic;
}
.character-section .character{
    width:40%;
    margin:auto;
     transform:translateX(-30%);
}

.biotech-section .biotech {
    width:90%;
    margin:auto;
    transform:translateX(30%);
    
         text-align:center;
}

.biotech-section .text {
    padding-left:1rem;
}

/*
.character-section #enforcement img {
    width:150%;
}
*/
.pull-block {
    color:#e5e28e;
    padding:1.5rem;
}

.character-section p {
    margin-right:2rem;
}

.character-section .pull-block h3 {
    font-style:italic;
    letter-spacing: .08rem;
      text-shadow: 10px 10px 50px rgba(0,0,0,.8);
    font-size:2rem;
}
.character-section .pull-block dl {
    font-size:1rem;
     margin-right:0;
}
.character-section .pull-block dt {
    line-height:1.3;
    font-size:1.1rem;
}
.character-section .pull-block dd {    
    margin-bottom:1rem;
    line-height:1.4;
}

.character-section .is-visible .character{
   
     transform:translateX(0%);
}

.biotech-section .is-visible .biotech{
   
     transform:translateX(0%);
}
/*   biotechs */

.biotech-section #burger img{
    width:90%;
    }
#pizza img,
#salsa-queso img {
    width:70%;
}
#leafy-greens img {
    width:75%;
}

#meet-biotech-section .biotech {
    position:absolute;
    right:-80%;
    bottom:5%;
    width:100%;
    opacity:0;
}
/*    animations */

.show-on-scroll div {
    transition:all ease-out .5s;
}

#meet-squad-section .is-visible .character {
    opacity:1;
}
#meet-biotech-section .is-visible .biotech {
    right:0%;
    opacity:1;
}

#meet-squad-section .is-visible #enforcement {
    left:66%;
}

#meet-squad-section .is-visible #education {
    left:21%;
}

#meet-squad-section .is-visible #healthcare {
    left:43%;
}

#meet-squad-section .is-visible #research {
    left:2%;
}

.show-on-scroll.text {
    transform:translateY(30px);
    opacity:0;
    transition:all ease-out 1s;
}
.is-visible.text {
    transform:translateY(0);
    opacity:1;
}


/*footer*/


.footer-container {
    padding: 50px;
    background-color: #fff;
}


.footer-spacer {
    height:100px;
    background:url(img/city-bg-md.png) bottom center no-repeat;
    background-color: rgba(0,0,0,.5);
    background-blend-mode: darken;
    background-size:cover;
    background-attachment: fixed;
}
.footer-statements {
    padding:50px;
    background-color: #fff;
}
footer .logo-container {
    display:flex;
    flex-flow:row;
    flex-wrap: wrap;
    justify-content:flex-start;
    align-items: center;
    gap:15px;
}
footer .logo  {
    text-align:center;
    flex-grow:0;
    width:calc(50% - 30px);
}
footer .logo.logo-wide  {
    width:calc(100% - 30px);
}

footer .logo img {
    height:auto;
    width:100%;
    min-width:200px;
}
footer .logo.logo-wide  img {
    max-width: 500px;
}

footer .logo#clover-logo img {
    max-width:110px;
    min-width:90px;
    
}

a.footer:link {
    color:#6361b8;
    text-decoration:underline;
}
a.footer:visited {color:#c9c87f;}
a.footer:hover {
    color:#c9c87f;
    font-weight: bold;}



#unityContainer {
    
}
/*accessibilty statement*/
#accessibility-section{
    
}

#game-section{
    background: #583c5b;
}
/*game*/
main.subpage-main {
    margin-top:20px;
}

.game-container {
    padding:0;
    align-items:center;
    justify-content: center;
    text-align: center;
    background:#101;
}
#unityContainer {
    height:270px;
    width:480px;
    margin:5px auto !important;
}


#video-section .video-container #gameplay-video {
    width:100%;
    }
    #video-section .row {
        min-height: 70vmin;
        
        padding-top:10px; padding-bottom:10px;
    }


#accessibility-section-head .row {
    min-height:70vmin;
    align-content: center;
    font-size:1.1rem;
    
        padding-top:10px; padding-bottom:10px;
}

/*Survey Button STyles*/


.research-survey-container {
    
}

a#research-survey-button {
    padding:8px 10px;
/*    display:flex;*/
    margin:auto;
    color:#e5e28e;
    font-weight:bold;
    text-transform: none;

    border-color:#00aaaa;
}

a#research-survey-button span.oi{
    margin-left:5px;
}

#research-survey-section {
    padding:10px 0 20px 0;
}


ol.survey-form-btns {
    padding:0px;
    margin-bottom:20px;
  list-style: none;
  counter-reset: my-awesome-counter;
}
ol.survey-form-btns ul {
}
ol.survey-form-btns li.numbered {
    margin-top:20px;
  counter-increment: my-awesome-counter;
      
    padding:0;
    padding-left:40px; 
    letter-spacing:.04em;
    font-size:28px;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight:bold; 
    position:relative;
}

ol.survey-form-btns li:before {
    position:absolute;
    top:7px;
    left:0px;
  content: counter(my-awesome-counter) ;
  color: rgba(255,255,255, .7);
  font-weight: bold;
padding:0 5px;

    height:30px;
    width:30px;
    text-align: center;
    font-size:44px;
    line-height:28px;
    font-family:'M PLUS Rounded 1c';
}
ol.survey-form-btns li a{
    align-items: center;
    text-align: left; 
    color:#fff;
    text-decoration:underline;
}
ul.survey-form-btns li a .oi{
    margin-right:15px; margin-left:10px;
    padding-left:10px;
}
/**/
/**/
/*media queries*/
/**/
/**/
/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { 
    
      #play-button-container {
    top:340px;    
    }
    #hero.cover {
    height:450px;
        background-size:130%;
    }
    
       #title {        
          top:60px;
    }
          #characters {        
        width:110%;
        left:-5%;
    }
    
    #meet-biotech-section .biotech {
    right:-80%;
    bottom:-20%;
    width:100%;
    }

    #hero-subpage.cover #subpage-title {
        font-size:2.6rem;
    }
 .section .row {
   min-height:750px;
}
    .characters,
    .biotechs {
        min-height:375px;
    }
    
       #meet-biotech-section .biotech {
    right:-80%;
    bottom:0;
    width:90%;
}
    
    #meet-biotech-section .is-visible .biotech {
    right:5%;
}
    
    
   
    
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { 
    #hero.cover {
        height:460px;
    }
    #title {        
        width:50%;
        left:25%;
        top:50px;
    }
    
    #characters {        
        width:100%;
        left:0;
    }

    
    footer .logo {
        width:calc(25% - 30px);
    }
    footer .logo.logo-wide  {
        width:calc(50% - 30px);;
    }
   
    #meet-biotech-section {
    background-image:url(img/section-bg-md.png);
    }
    .footer-statements {
        padding:30px;
    }
    #biotech-nav div {
        margin:60px 20%;
        width:60%;
    }
    .section .row {
        min-height:450px;
    }
    
    #accessibility-section-head .row {
        min-height:25vmin;
    }
   
    .characters,
    .biotechs {
        min-height:225px;
    }
    
    #meet-squad-section #enforcement {

    bottom:30%;
}

#meet-squad-section #education {
    bottom:30%;

}

#meet-squad-section #healthcare {
    bottom:-25%;

}

#meet-squad-section #research {
    bottom:-20%;

}
    
    #meet-biotech-section .biotech {
    right:-100%;
    bottom:-40%;
    width:170%;
}
    
    #meet-biotech-section .is-visible .biotech {
    right:-30%;
}
    
    .section .lead {
    font-size:1.6rem;
}
    .section h1 {
        font-size: 2.8rem;
    }
.section h2 {
    font-size: 2.6rem;
}
    

    #video-section .video-container {
        width:calc(60% - 4px);
        height:33vw;
        margin:4px auto;
        border:2px solid rgba(0,0,0.5);
 }  


    #nmsu-logo {
        width:70%;
    }
    .character-section {
        padding-top:20px; 
    }
    .character-section .character{
        width:90%;
    }
    .character-section .text {
    margin:.5rem ;
}
        .character-section .pull-block {
        margin-left:33.333%
    }
    .color-strip {
    top:0;
    left:0;
    height:2%;
    width:100%;
}
    #unityContainer {
    height:432px;
    width:768px;
}
    #play-button-container  {
    top:370px;   
        justify-content: center;
    }
     #play-button-container .btn {
    margin:10px;
    }
}


/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 
#hero.cover {
/*        background-image: url('img/bg.png');*/
        height:500px;
    
    }
    
     #title {        
        width:46%;
        left:26%;
    }
    
    #characters {        
        width:90%;
        left:5%;
    }
   #meet-biotech-section .biotech {
    right:-110%;
    bottom:-45%;
    width:160%;
    }
   
        .character-section .character{
        width:60%;
    }
    .character-section .text {
    margin:0;
}
     footer .logo {
        width:calc(16.6% - 30px);
    }
    footer .logo.logo-wide  {
        width:calc(33% - 30px);;
    }
    .color-strip {
    top:0;
    left:0;
    height:100%;
    width:2%;
}
    
    .character-section {
        padding:20px 0; 
    }
    
    #hero-subpage.cover #subpage-title {
        font-size:3.2rem;
    }
    .biotech-section {
        padding:2rem 0 2rem 4%;
    }
     .biotech-section .biotech {
        width:120%;
        margin:auto -10%;
    }
    #unityContainer {
    height:540px;
    width:960px;
}
    
        #meet-squad-section #enforcement {

    bottom:10%;
}

#meet-squad-section #education {
    bottom:10%;

}

#meet-squad-section #healthcare {
    bottom:-35%;

}

#meet-squad-section #research {
    bottom:-30%;

}
      #play-button-container  {
    top:400px;   
    }
    
    #play-button-container .btn {
        font-size:1.6rem;
    }

}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    #hero.cover {
/*        background-image: url('img/bg.png');*/
        height:550px;
        
        background-size:100%;
    }
    
     #title img {            
        max-width:550px;
        }
        #characters img {
        max-width:1180px;
    }
    
    #hero-subpage.cover {
        background-size:100%;
    }
    #meet-biotech-section {
/*    background-image:url(img/section-bg.png);*/
    }
    
    #video-section .video-container {
        width:50%;
        height:28.125vw; /**added 4-6-21**/
 }
    #meet-biotech-section .biotech {
    right:-110%;
    bottom:-50%;
    width:140%;
    }
    #meet-biotech-section .is-visible .biotech {
    right:-10%;
    }
    
    #unityContainer {
        height:720px;
        width:1280px;
    }
}
@media (min-width: 1440px) {
     #hero.cover {
/*        background-image: url('img/bg.png');*/
        height:620px;
    }
    
 #meet-biotech-section .biotech {
    right:-110%;
    bottom:-50%;
    width:115%;
         max-width:700px;
    }
    #meet-biotech-section .is-visible .biotech {
    right:0%;
    }
    
    #meet-squad-section .character {
        width:21%;
        max-width:210px;
    }
            #meet-squad-section #enforcement {

    bottom:5%;
}

#meet-squad-section #education {
    bottom:5%;

}

#meet-squad-section #healthcare {
    bottom:-40%;

}

#meet-squad-section #research {
    bottom:-35%;

}
    #play-button-container  {
    top:520px;   
    }
}

/***************************/

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  padding: 15px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger:hover {
    opacity: 0.7; }
  .hamburger.is-active:hover {
    opacity: 0.7; }
  .hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after {
    background-color: #e5e28e; }

.hamburger-box {
  width: 28px;
  height: 22px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top:-2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 28px;
    height: 3px;
    background-color: #e5e28e;
    border-radius: 3px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -10px; }
  .hamburger-inner::after {
    bottom: -10px; }

/*
   * Elastic
   */
.hamburger--elastic .hamburger-inner {
  top: 2px;
  transition-duration: 0.275s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
  .hamburger--elastic .hamburger-inner::before {
    top: 10px;
    transition: opacity 0.125s 0.275s ease; }
  .hamburger--elastic .hamburger-inner::after {
    top: 20px;
    transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); }

.hamburger--elastic.is-active .hamburger-inner,
.hamburger--elastic[aria-expanded="true"] .hamburger-inner{
  transform: translate3d(0, 10px, 0) rotate(135deg);
  transition-delay: 0.075s; }
  .hamburger--elastic.is-active .hamburger-inner::before,
 .hamburger--elastic[aria-expanded="true"] .hamburger-inner::before {
    transition-delay: 0s;
    opacity: 0; }
  .hamburger--elastic.is-active .hamburger-inner::after,
.hamburger--elastic[aria-expanded="true"] .hamburger-inner::after {
    transform: translate3d(0, -20px, 0) rotate(-270deg);
    transition-delay: 0.075s; }