.navigation {
  background-color: #fff;
 
  display: flex;
}

.navigation__col {
  display: flex;
  flex: 1;
  justify-content: center;
  min-width: calc(50% - 200px);
  /* 50% minus flex-basis of logo column */
  text-align: center;
  
}
.navigation__col > a {
  color: #3498db;
  line-height: 4rem;
  padding: 1rem 1.5rem;
  text-decoration: none;
  font-size:13px;
  color:#9cbeb1;
}
.navigation__col > a:hover, .navigation__col > a:focus {
  color: #769187;
}
.navigation__col--left {
  justify-content: flex-end;
}
.navigation__col--right {
  justify-content: flex-start;
}






.navigation__col--logo {
  flex-basis: 20rem;
  flex-grow: 0;
  min-width: 0;
}
.navigation__col--logo > a {
  color: #9b59b6;
  flex-basis: 100%;
  font-size: 2.8rem;
}
.navigation__col--logo > a:hover, .navigation__col--logo > a:focus {
  color: #769187;
}

.center-guide {
  text-align: center;
}



@media only screen { 

  } /* Define mobile styles */

/*small screens*/
@media only screen and (max-width: 40em) { 
    .navigation {
    display:none;

 }

 } /* max-width 640px, mobile-only styles, use when QAing mobile issues */


/*medium*/
@media only screen and (min-width: 40.063em) {
.navigation__col > a {
  color: #3498db;
  line-height: 4rem;
  padding: 1rem 1.5rem;
  text-decoration: none;
  font-size:13px;
  color:#9cbeb1;
}

 } /* min-width 641px, medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) { 
  .navigation__col > a {
  color: #3498db;
  line-height: 4rem;
  padding: 1rem 1.5rem;
  text-decoration: none;
  font-size:15px;
  color:#9cbeb1;

}} /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */









/*A NEW CENTERED MENU FOR MEDIUM SCREEN*/
#rc_logo {
 left: 30px;
 padding: 22px;
 position: absolute;
 color: #9cbeb1;
 font-size: 19px;
 font-family: Poppins;
 text-decoration: none;

}

#rc_logo a { 
color: inherit; 
text-decoration: none;
} 

.rc_nav {
  overflow: hidden;
  background-color: ;
  text-align: center;
  z-index: 6;

}

.rc_nav a {
 display: inline-block;
 margin-right: -4px;  /* inline-block gap fix */
 color: #f8efef;
 padding: 22px 22px;
 text-decoration: none;
 font-family: Poppins;
 font-size: 16px;
 -webkit-transition: background 0.3s linear;
 -moz-transition: background 0.3s linear;
 -ms-transition: background 0.3s linear;
 -o-transition: background 0.3s linear;
 transition: background 0.3s linear;
 z-index: 9;
}

.rc_nav a:hover {
 
  color: white;
}

.rc_nav .icon {
  display: none;
}

.rc_content {
  text-align: center; 
  padding-left:14px; 
  font-family: Poppins; 
  margin-top: 100px;  
  color: #8e909b;

}


/*MENU ICON FOR MOBILE*/
@media screen and (max-width: 820px) {
  .rc_nav a {display: none;}
  .rc_nav a.icon {
    float: right;
    display: block;
    width: 60px;
    color:black;

  }
}

@media screen and (max-width: 820px) {
  .rc_nav.responsive {position: relative; top: 73px;}
  .rc_nav.responsive .icon {
    position: fixed;
    right: 0;
    top: 0;

  }
  .rc_nav.responsive a {
    float: none;
    display: block;
    text-align: center;
  }

}