* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }
  
  body {
  font-family: "Poppins", sans-serif;
  width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  }

  .top-container {
    display: flex;
  }
  
  .container {
  display: none;
  }

  .side-company {
    display: none;
    }
  
  
  /*===============================================*/
  /*      ADD'L INDEX PAGE CSS                    */
  /*===============================================*/
  
  .back-video {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -9;
  }
  
  
  .company {
    text-align: center;
    left: 75px;
    top: 70px;
  }  
  
  .company h1 {
    display: flex;
    position: relative;
    font-size: 6;
    color: #fff;
    font-weight: 600;
    width: 100%;
    height: 0 auto; 
    transition: 0.5s easeout;
  }
  
  .company h1:hover {
    -webkit-text-stroke: 2px #fff;
    color: transparent;	
  }
  
  .copyright {
    position: absolute;
    bottom: 0;
      left: 0;
    font: 5px;
    color: #2e1245;
  }
  
  /*===============================================*/
  /*               TOP NAVIGATION BAR              */
  /*===============================================*/
  
  .wrapper {
    position: absolute;
    top: 0px;
    width: 100%;
   /*  margin-left: auto;  */
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.5rem;
    background-color: black;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
    height: 110px;
    vertical-align: center;
    align-items: center;
    justify-content: center;
  }
  
  .wrapper ul {
    position: relative;
    width: 100%;
    list-style: none;
    display: flex;
    background-color: black;
    align-items: center;
  }
  
  .wrapper li {
    height: 75px;
    display: flex;
    margin: 0 auto;
  }
  
  .wrapper a {
    height: 100%;
    padding: 10px 10px;
    text-decoration: none;
    display: flex;
    align-items: center;
    color: white;
    font-size: 20px;
  }
  
  .wrapper li:first-child {
    margin-right: auto;
  }
  
  .coName {
    padding-top: 10px;
    padding-left: 70px;
    font-size: 20px;
    color: gold;
  }

  
  /*===============================================*/
  /*      TOP NAVIGATION BAR  DROPDOWN              */
  /*===============================================*/
  
  .wrapper  ul li ul {
    display: none;
    padding: 0px;
    margin: 0px;
    height: 70px;
    position: absolute;	
    font-size: 15px;
    vertical-align: center;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background-color: black;
    border-radius: 10px 10px 10px 10px;
  }
  
  .wrapper  ul li:hover ul  {
    display: block;
  }
  
  .wrapper  ul li ul li {
     width: 210px;	
     height: 45px;
  }
  
  .wrapper ul li ul li  a {
    display: flex;
    width: 200px;
    margin: 0px;
    color: white;
    padding: 10px; 
    font-size: 15px;
    font-style: bold;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    background-color: black;
  }
  
  
  .wrapper  ul li ul li a:hover {
    background-color:green;
  }

  
  
  /*===============================================*/
  /*                SIDEBAR DROPDOWN               */
  /*===============================================*/
  
  .container {
    position: absolute;
    width: 225px;
    left: 0;
    background: #1b1b1b;
    height: 100vh;
    color: #fff;
    text-align: center;
    transition: 0.5s ease;
    transform: translateX(-225PX);
  }
  
  .outer {
    width: 100%;
    padding: 25px;
    position: relative;
  }
  
  .logo, .top-Image {
    width: 100px;
    height: 100px;
    border: 3px solid #0190ff;
    border-radius: 50px;
    background: url("../images/phoenix.png");
    background-position: center;
    background-size: cover;
    text-align: center;
    position: relative;
    left: 50px;
    transform: translate(-20%);
  }
  
  .title {
    width: 100%;
    text-align: center;
    font-size:  15px;
    font-weight: bold;
    margin-top: 20px;
    color: gold;
  }
  
  ol {
    width: 100%;
  }
  
  ol li {
    display: block;
    cursor: pointer;
    width: 100%;
    height: 40px;
    line-height: 40px;
    position: relative;
    letter-spacing: 1px;
    border-top: 0.5px solid rgba(255, 2ff, 255, 0.05);
    border-bottom: 0.5 solid black;
  }
  
  ol li a {
    text-decoration: none;
    color: #fff;
    display: block;
  }
  
  ol li a:focus {
    background: black;
    border-left: 4px solid #00fcff;
  }
  
  ol li span {
    position: absolute;
    right: 10px;
    top: 30%;
    font-size: 13px;
    cursor: pointer;
    transition: 0.4s;
  }
  
               ol #nesteda, ol #nestedb, ol #nested1,
                ol #nested2,ol #nested3,ol #nested4,
               ol #nested5, ol #nested6, ol #nested7, 
               ol #nested8, ol #nested9, ol #nested10,
                ol #nested11, ol #nested12,  ol #nested13,
                ol #nested14, ol #nested15, ol #nested16,
                ol #nested17, ol #nested18 , ol #nested19,
                ol #nested20,  ol #nested30, ol #nested50,
                ol #nested51, ol #nested52,  ol #nested53, 
                ol #nested54, ol #nested55, ol #nested56, 
                ol #nested57, ol #nested58 , ol #nested59,
                ol #nested60, #nested61 {
        background: black;
        cursor: pointer;
        display: none;    
    }
    #nesteda a,  #nestedb a, #nested1 a,  #nested2 a,
     #nested3 a, #nested4 a,
    #nested5 a, #nested6 a, #nested7 a, #nested8 a,
    #nested9 a, #nested910 a, #nested11 a, #nested12 a, 
    #nested13 a, #nested14 a, #nested15 a, #nested16 a,
    #nested17 a, #nested18 a, #nested19 a, #nested20 a ,
    #nested30 a ,  #nested50 a, #nested51 a, #nested52 a,  #nested53 a, #nested54 a, #nested55 a, #nested56 a,
     #nested57 a,  #nested58 a, #nested59 a, #nested60 a, #nested61 a
    {
      color: yellow;
    }
    #nesteda a:hover,  #nestedb a:hover, 
    #nested1 a:hover,  #nested2 a:hover, #nested3 a:hover, #nested4 a:hover,   #nested5 a:hover, #nested6 a:hover, #nested7 a:hover,  #nested8 a:hover, #nested9 a:hover, #nested10 a:hover, #nested11 a:hover, #nested12 a:hover ,  #nested13 a:hover, #nested14 a:hover, #nested15 a:hover, #nested16 a:hover,     #nested17 a:hover, #nested18 a:hover, #nested19 a:hover,  #nested20 a:hover,  #nested30 a:hover,#nested50 a:hover, #nested51 a:hover, #nested52 a:hover ,  #nested53 a:hover, #nested54 a:hover, #nested55 a:hover, #nested56 a:hover, #nested57 a:hover, #nested58 a:hover, #nested59 a:hover, #nested60 a:hover ,  #nested61 a:hover    
     {
      letter-spacing: 2px;
    }
  
  
    input {
    -webkit-apperance: none;
    visibility: hidden;
    display: none;
    }
  
  #times {
    position: absolute;
    right: -55px;
    top: 5px;
    height: 45px;
    width: 45px;
    padding: 10px;
    color: white;
    font-size: 35px;
    background: black;
    line-height: 25px;
   cursor: pointer;
   border-radius: 2px;
   }
  
   #bars {
    position: absolute;
    right: -85px;
    top: 25px;
    height: 45px;
    width: 55px;
    padding: 10px;
    font-size: 35px;
    color: white;
    background: black;
    line-height: 15px;
   cursor: pointer;
   align-content: center;
   border-radius: 2px;
   }
  
   #times {
     display: none;
   }
  
   #r1:checked ~ .container {
      transform: translateX(0px);
   }
  
  #r1:checked ~ .container #times{
    display: block;
  }
  
  #r1:checked ~ .container #bars{
    display: none;
    
  }
  
  #r2:checked ~ .container #times{
    display: none;
  }


  
    
  /*===============================================*/
  /*      RIGHT SIDE BAR                          */
  /*===============================================*/

  .side-company{
    position: absolute;
    padding-top:100px;
    top: 0;
    right: 0;
    width: 90px;
    height: 100vh;
    font-size: 1.5rem;
    align-items: center;
    align-content: center;
    color: gold;
    letter-spacing: 0;
    background: #1b1b1b;
    writing-mode: vertical-rl;
    text-orientation:  upright;
    box-shadow: 0 5px rgba(0, 0, 0, 0.25);
    
  }
  
  /*=======================================================*/
  /*               MEDIA QUERIES                           */
  /*======================================================*/
  
  
  @media (min-width: 320px) {
    
    .company h1 {
      display: none;		
    }
  
    .wrapper{
      display: none;
    }
    
      .container {
        display: unset;
    }

    .side-company  {
      display: unset;
    }
  
  }
  
  @media screen and (max-width: 390px) {
  
  
    .company h1 {
      display: none;		
    }
  
    .wrapper{
      display: none;
    }
    
      .container {
        display: unset;
    }

    .side-company  {
      display: unset;
    }
  }

  @media screen and (max-width: 400px) {

    .side-company  {
      display: unset;
      font-size: 28px;
    }

  }
  
  
  @media screen and (max-width: 576px) {
  
  
    .company h1 {
      display: none;
    }
    .wrapper{
      display: none;
    }

    .side-company  {
      display: unset;
      font-size: 17px;
    }
  
    .container {
      display: unset;
    }
  
  }
  
  
  @media screen and (min-width: 768px) {
  
  
    .company h1 {
      display: none;
    }
  
    .wrapper {
      display: none;
    }
  
    .container {
      display: unset;
    }

    .side-company  {
      display: unset;
    }
  
  }
  
  @media screen and (min-width: 820px) {
  
    .company h1 {
      display: unset;
      font-size: 2.5rem;
    }

    .wrapper {
      display: unset;
    }

    .services, .staff, .insure, .mission, .resources {
      font-size: 1rem;
    }

    .side-company  {
      display: none;
    }
  
    .container {
      display: none;
    }
  
  }
  
  @media screen and (min-width: 992px) {
  
    .company h1 {
      display: unset;
      font-size: 4rem;
    }

    .services, .staff, .insure, .mission, .resources {
      font-size: 1.5rem;
    }

    .wrapper {
      display: unset;
    }


    .side-company  {
      display: none;
    }
  
    .container {
      display: mone;
    }
  }
  
  @media screen and (min-width: 1024px) {
  
    .co   .company h1 {
      display: unset;
      font-size: 5rem;
    }

    .wrapper {
      display: unset;
    }

    .services, .staff, .insure, .mission, .resources {
      font-size: 1.5rem;
    }

    .side-company  {
      display: none;
    }
  
    .container {
      display: mone;
    }
  }
  
  
  @media screen and (min-width: 1200px) {
  
    .company h1 {
      display: unset;
      font-size: 4.5rem;
    }

    .wrapper {
      display: unset;
    }

    .services, .staff, .insure, .mission, .resources {
      font-size: 1.5rem;
    }

    .side-company  {
      display: none;
    }
  
    .container {
      display: mone;
    }
  }
  
  @media screen and (min-width: 1280px) {
    .company h1 {
      display: unset;
      font-size: 5rem;
    }

    .wrapper {
      display: unset;
    }

    .side-company  {
      display: none;
    }
  
    .container {
      display: mone;
    }
    }