.logo {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 800px; }
  .logo p {
    margin-top: -16px;
    text-align: center;
    font-size: 2em; }

.content-page .logo {
  margin-bottom: -32px; }

@media (max-width: 800px) {
  nav {
    margin-top: -2.5em; } }
nav {
  text-align: center;
  margin-bottom: 2.3em; }
  nav div {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto; }
    nav div a {
      display: block;
      float: left;
      width: 33.33333%;
      width: -webkit-calc(100% / 3);
      width: calc(100% / 3);
      height: 1.75em;
      padding-top: 0.5em;
      color: #fff;
      font-weight: bold;
      font-size: 1em;
      text-decoration: none;
      transition: 0.3s ease all; }
      nav div a:hover {
        transform: scale(0.9); }
    nav div a.red {
      background-color: #E6000A; }
    nav div a.blue {
      background-color: #00BEFF; }
    nav div a.orange {
      background-color: #FF7800; }
    nav div a.purple {
      background-color: #A700FF; }
    nav div a.last {
      clear: right; }

ul.activities > .activity.category-game {
  background-color: #E6000A; }

ul.activities > .activity.category-game:hover {
  transform: scale(0.9) rotate(-3.6deg); }

ul.activities > .activity.category-programming {
  background-color: #FFD732; }

ul.activities > .activity.category-programming:hover {
  transform: scale(0.9) rotate(-3deg); }

ul.activities > .activity.category-robotics {
  background-color: #111; }

ul.activities > .activity.category-robotics:hover {
  transform: scale(0.9) rotate(-2.4deg); }

ul.activities > .activity.category-science {
  background-color: #008009; }

ul.activities > .activity.category-science:hover {
  transform: scale(0.9) rotate(-1.8deg); }

ul.activities > .activity.category-internet {
  background-color: #00BEFF; }

ul.activities > .activity.category-internet:hover {
  transform: scale(0.9) rotate(-1.2deg); }

ul.activities > .activity.category-maths {
  background-color: #00A0FF; }

ul.activities > .activity.category-maths:hover {
  transform: scale(0.9) rotate(-0.6deg); }

ul.activities > .activity.category-language {
  background-color: #78E600; }

ul.activities > .activity.category-language:hover {
  transform: scale(0.9) rotate(-0.2deg); }

ul.activities > .activity.category-geography {
  background-color: #00B20D; }

ul.activities > .activity.category-geography:hover {
  transform: scale(0.9) rotate(0.2deg); }

ul.activities > .activity.category-documents {
  background-color: #00588C; }

ul.activities > .activity.category-documents:hover {
  transform: scale(0.9) rotate(0.6deg); }

ul.activities > .activity.category-music {
  background-color: #FF7800; }

ul.activities > .activity.category-music:hover {
  transform: scale(0.9) rotate(1.2deg); }

ul.activities > .activity.category-media {
  background-color: #A700FF; }

ul.activities > .activity.category-media:hover {
  transform: scale(0.9) rotate(1.8deg); }

ul.activities > .activity.category-art {
  background-color: #FF2B34; }

ul.activities > .activity.category-art:hover {
  transform: scale(0.9) rotate(2.4deg); }

ul.activities > .activity.category-teacher {
  background-color: #111; }

ul.activities > .activity.category-teacher:hover {
  transform: scale(0.9) rotate(3deg); }

ul.activities > .activity.category-system {
  background-color: #111; }

ul.activities > .activity.category-system:hover {
  transform: scale(0.9) rotate(3.6deg); }

ul.activities {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  list-style: none;
  overflow: hidden; }
  ul.activities .activity {
    display: block;
    float: left;
    width: 32.666%;
    box-sizing: border-box;
    margin-right: 1%;
    margin-bottom: 2%;
    padding: 1%;
    border-radius: 5px;
    text-align: center;
    background-color: #00BEFF;
    text-decoration: none;
    transition: 0.25s ease all; }
    ul.activities .activity:nth-child(3n) {
      margin-right: 0%; }
    ul.activities .activity:hover {
      transform: scale(0.9); }
    ul.activities .activity img.icon {
      display: block;
      margin-left: auto;
      margin-right: auto;
      background-color: rgba(255, 255, 255, 0.5);
      padding: 5px;
      border-radius: 5px;
      width: 55px;
      height: 55px; }
    ul.activities .activity span {
      display: block;
      height: 1.3em;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #fff;
      font-weight: bold;
      font-size: 1.25em; }

body {
  margin: 0;
  background: #fff;
  font: 1em sans, sans-serif;
  color: #282828; }

body > *:not(.no-center),
.center {
  margin-left: auto;
  margin-right: auto;
  max-width: 800px; }

p {
  text-align: justify; }

a {
  color: #282828;
  text-decoration: underline; }

address {
  font-style: normal; }

ul a {
  text-decoration: none; }

nobold {
  font-weight: normal; }

h1 {
  text-align: center; }

.headerbox {
  margin-top: 1em !important;
  padding-top: 1em;
  padding-bottom: 1em;
  background: #00BEFF;
  color: #fff;
  font: 1em "Sans", sans-serif;
  line-height: 1.5; }

.standardbox {
  clear: both;
  margin-top: 2em;
  padding: 1em;
  text-align: justify; }
  .standardbox#about {
    margin-top: 0;
    background: #78E600; }
  .standardbox#what-is-sugarlabs {
    background: #00BEFF;
    clear: both; }
  .standardbox#activities {
    padding-bottom: 0;
    background: #FFD732; }
  .standardbox#contact {
    background: #78E600; }
  .standardbox#get-sugar {
    background: #FF7800;
    padding-bottom: 0; }
  .standardbox h1 {
    margin-top: 0; }

#this-is-sugar {
  margin-top: 2em;
  padding-right: 2em; }
  #this-is-sugar p {
    width: calc(100% + 2em);
    margin: 0;
    padding: 1em;
    border: 2px solid #282828;
    border-top: none;
    box-sizing: border-box; }
  #this-is-sugar .from-white {
    background-color: #fff;
    color: #282828; }
  #this-is-sugar .from-toolbar {
    background-color: #282828;
    color: #fff; }
  #this-is-sugar img {
    margin-top: 2em;
    width: calc(100% + 2em);
    margin-bottom: -7px;
    border: 2px solid #282828;
    border-bottom: none;
    box-sizing: border-box; }
  #this-is-sugar h1 {
    padding: 0.5em;
    width: 100%;
    margin-bottom: 0; }
  #this-is-sugar img.first-of-type {
    margin-top: 0; }

a .star-link {
  color: white;
  text-decoration: none; }

a:hover .star-link {
  text-decoration: underline; }

.star-link {
  width: 60%;
  margin: 6% 17%;
  margin-bottom: 2em;
  padding: 3%;
  float: left; }
  .star-link.orange {
    background-color: #FF7800; }
  .star-link.lime {
    background-color: #78E600; }
  .star-link.maroon {
    background-color: #5E008C; }

form {
  text-align: center; }

footer {
  margin-top: 1em;
  font-size: 0.6em; }

.grid {
  padding-top: 0.5em; }
  .grid:after {
    content: "";
    display: table;
    clear: both; }
  .grid *, .grid *:after, .grid *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }

.col {
  float: left;
  padding-right: 0.5em; }
  .col:first-child {
    text-align: right; }
  .col:last-child {
    padding-right: 0;
    text-align: left; }

.col-padding-top {
  padding-top: 1em; }

.col-1-2 {
  width: 50%; }

.col-2-3 {
  width: 66.66%; }

.col-1-3 {
  width: 33.33%; }

.col-3-4 {
  width: 75%; }

.col-1-4 {
  width: 25%; }

@media (max-width: maxw) {
  .grid:not(.grid-stay-mobile) .col-1-2, .grid:not(.grid-stay-mobile) .col-2-3, .grid:not(.grid-stay-mobile) .col-1-3, .grid:not(.grid-stay-mobile) .col-3-4, .grid:not(.grid-stay-mobile) .col-1-4 {
    width: 100%;
    text-align: justify; }
  .grid:not(.grid-stay-mobile) .col {
    padding-right: 0; }
  .grid:not(.grid-stay-mobile) p.col {
    padding-left: 0.5em;
    padding-right: 0.5em; }
  .grid:not(.grid-stay-mobile):not(.grid-no-bottom-border) {
    padding-bottom: 0.5em;
    border-bottom: 2px solid #808080; } }
ul.press li {
  margin-bottom: 0.5em; }
  ul.press li a:hover {
    text-decoration: underline; }

.ui-icon,
.ui-widget-content .ui-icon {
  background-image: url("/assets/jquery-ui/ui-icons_444444_256x240.png"); }

.ui-widget-header .ui-icon {
  background-image: url("/assets/jquery-ui/ui-icons_444444_256x240.png"); }

.ui-state-default .ui-icon {
  background-image: url("/assets/jquery-ui/ui-icons_777777_256x240.png"); }

.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
  background-image: url("/assets/jquery-ui/ui-icons_555555_256x240.png"); }

.ui-state-active .ui-icon {
  background-image: url("/assets/jquery-ui/ui-icons_ffffff_256x240.png"); }

.ui-state-highlight .ui-icon {
  background-image: url("/assets/jquery-ui/ui-icons_777620_256x240.png"); }

.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
  background-image: url("/assets/jquery-ui/ui-icons_cc0000_256x240.png"); }

.ui-widget-content a {
  color: #4285f4; }