@charset "utf-8"; /* CSS Document */
/*===============================================================================================================================================*/

.top-nav                    {display: flex; flex-direction: row; align-items: center; justify-content: space-between; background-color: rgba(0,102,255,1);
                             background: linear-gradient(to right, rgba(229, 0, 109, 1.0),#FFF); color: rgba(255,0,0,1); height: 55px; padding: .5rem;}

.menu                       {display: flex; flex-direction: row; list-style-type: none; margin: 0; padding: 0; color: rgba(255,0,0,1);}

.menu > li                  {margin: 0 1rem; overflow: hidden;}

.menu-button-container      {display: none; height: 100%; width: 40px; cursor: pointer; flex-direction: column; justify-content: center; align-items: center;}

#menu-toggle                {display: none;}

.menu-button,
.menu-button::before,
.menu-button::after         {display: block; background-color: #fff; position: absolute; height: 4px; width: 40px;
                             transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1); border-radius: 5px;}

.menu-button::before        {content: ''; margin-top: -8px;}
.menu-button::after         {content: ''; margin-top:  8px;}

#menu-toggle:checked + .menu-button-container .menu-button::before  {margin-top: 0px; transform: rotate(405deg);}
#menu-toggle:checked + .menu-button-container .menu-button          {background: rgba(255, 255, 255, 0);}
#menu-toggle:checked + .menu-button-container .menu-button::after   {margin-top: 0px; transform: rotate(-405deg);}

@media (max-width: 900px) {
.menu-button-container          {display: flex;}
.menu                           {position: absolute; top: 0; margin-top: 112px; right: 0; flex-direction: column; width: 60%; justify-content: center; align-items: center;}
#menu-toggle ~ .menu li         {height: 0; margin: 0; padding: 0; border: 0; transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);}
#menu-toggle:checked ~ .menu li {border: 1px solid #333; height: 2.5rem; padding: 0.5rem; transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);}
.menu > li                      {display: flex; justify-content: center; margin: 0; padding: 0.5rem 0; width: 80%; color: white; background-color: #E5006D;}
.menu > li:not(:last-child)     {border-bottom: 1px solid #444;}
}