@charset "utf-8";     /* CSS Document
=================================================================================================================================================================
                  Hamburger Menue  -  Navigation
================================================================================================================================================================*/
.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, #00A0CC  ,#FFF ); color: rgba(255,0,0,1); height: 55px; padding: .5rem 1rem;}
.menu                       {display: flex; flex-direction: row; list-style-type: none; margin: 0; padding: 0; color: rgba(255,0,0,1); /*  font-size: 1.1rem; */}
.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: 120px; left: 0; flex-direction: column; width: 70%; 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.5em; padding: 0.5em; transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);}
.menu > li                          {display: flex; justify-content: center; margin: 0; padding: 0.5em 0; width: 80%; color: white; background-color: #00B8F5;}
.menu > li:not(:last-child)         {border-bottom: 1px solid #444;}
}
/*=================================================================================================================================================================
                    Navigation
================================================================================================================================================================*/