/* trbl */
/* Mashable */
* {
  border: .3px solid rgba(249, 1, 184, 0.44);
}
#sticky:active /* causes floating nav, when clicked. Remove :active to make permanent */{
position: fixed;
left: 0;
right: 0;
top: 0;
}
nav.mash-navbar {
  display: block;
  width: 100%;
  background-color: #00aeef;
  overflow: hidden;
  /* padding & margin */
  padding-left: 0;
  margin: 0 auto;
  min-height: 44px;
  line-height: 44px;
  z-index: 10000;
}
div.mash-inner-navbar {
  color: #fff;
  height: 44px;
  min-height: 44px;
  line-height: 44px;
  margin: auto;
  max-width: 1440px;
  padding: 0;
  font-size: 1.1rem;
}
ul.mash-main-menu {
  width: 100%;
  padding: 0;
}
.mash-navbar .mash-nav {
  left: 0;
  display: block;
  float: left;
  margin: 0 10px 0 0;
  list-style: none;
}
li {
  display: block;
  float: left;
  margin: 0;
}
.mash-submenu>a, .logo>a {
  display: block;
  float: left;
  font-family: sans-serif;
  font-size: 9px;
  text-transform: uppercase;
  color: #fff;
}

nav.mash-nav a:hover {
  background-color: #19c0ff;
}

/**logo**/
a.mash-brand {
  text-transform: none;
  font-family: 'Myriad-pro', sans-serif;
  font-size: 30px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: -1.5px;
  padding-left: 25px;
  padding-right: 25px;
  padding-bottom: 0px;
}
.mash-brand::after {
  content: '\f0d7';
   font-family: "Font Awesome 5 Free";
   font-weight: 900;/* Don't change */
   font-style: normal;
   margin:0px 0px 0px 8px;
   text-decoration:none;
   font-size: 18px;
}

li.logo>div.geos-content {
  font-size: 14px;
  background: #ddf0f9;
  border-bottom: 5px solid #00aeef;
  color: #0698dd;
  display: none;
  font-weight: bold;
  padding: 0 25px;
}

.logo:hover .geos-content {
  display: block;
}


/* mash END */
.box-test>div {
  width: 100%;
  height: 500px;
}

.red {
  background-color: #999;
}
.yellow {
  background-color: fff;
}
.black{
  background-color: #333;
}