/* Basic */
body {
  margin: 0;
  font-family: 'Helvetica Neue', 'Nimbus Sans L', Arial, sans-serif;
}
img {
  max-width: 100%;
}

/* Containers */
@-webkit-keyframes moveStars {
  0% { background-position: 0 0; }
  33% { background-position: 266px 798px; }
  66% { background-position: 0 0; }
  100% { background-position: -266px 798px; }
}
@keyframes moveStars {
  0% { background-position: 0 0; }
  33% { background-position: 266px 798px; }
  66% { background-position: 0 0; }
  100% { background-position: -266px 798px; }
}
.container-top,
.container-mail-list-bg,
.container-footer-bg {
  background-image: url(http://subtlepatterns.com/patterns/stardust.png);
  background-position: 0 0;
  background-repeat: repeat;

  -webkit-animation: moveStars 60s infinite;
          animation: moveStars 60s infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;

  text-align: center;
  overflow: hidden;
  padding: 8px;
  color: white;
}
.container-alt-links,
.container-main-activities,
.container-mail-list,
.container-footer,
.conatiner-sugar {
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
}

/* Multi colored link section */
.alt-link {
  display: block;
  width: calc(100% / 3);
  width: 33.3333%;
  height: 70px;
  float: left;

  text-align: center;
  padding-top: 50px;

  transition: 0.5s ease all;

  background-color: #FF4136; /* Just for old browsers */
}
.alt-link:hover {
  -webkit-transform: scale(0.9);
     -moz-transform: scale(0.9);
      -ms-transform: scale(0.9);
       -o-transform: scale(0.9);
          transform: scale(0.9);
}
.container-alt-links a {
  text-decoration: none;
  font-weight: bold;
  text-size: 20px;
  color: #FFF;
  text-shadow 2px 2px 0 #FFF;
}
a:nth-child(1) .alt-link { background-color: #FF4136; }
a:nth-child(2) .alt-link { background-color: #FF851B; }
a:nth-child(3) .alt-link { background-color: #FFDC00; }
a:nth-child(4) .alt-link { background-color: #85144B; }
a:nth-child(5) .alt-link { background-color: #F012BE; }
a:nth-child(6) .alt-link { background-color: #b10dc9; }

/* Sugar Repos */
.container-sugar-bg {
  /* background: url("http://subtlepatterns.com/patterns/purty_wood.png"); */
  background: url(res/faces.jpg);
}
.container-sugar {
  padding: 10px;
  color: white;
  text-align: center;
}
.container-sugar h2 {
  text-shadow: 2px 2px 2px #DDD;
}
.container-sugar  .divider {
  display: block;
  margin: 0 auto;
}
.sugar-platform-links-container {
  text-align: center;
}
.sugar-palatform-link {
  display: inline-block;
  *display: inline;

  padding: 10px;
  margin-left: 5px;
  margin-top: 5px;
  border-radius: 20px;

  background: rgba(180, 180, 200, 0.6);

  text-decoration: none;
  color: white;
}
.sugar-palatform-link:nth-child(1) {
  margin-left: 0;
}
@-webkit-keyframes link-hover {
  0%, 100% {
    -webkit-transform: scale(1);
  }
  33% {
    -webkit-transform: scale(1.1);
  }
  44% {
    -webkit-transform: scale(1.12);
  }
  66% {
    -webkit-transform: scale(0.95);
  }
}
@keyframes link-hover {
  0%, 100% {
    transform: scale(1);
  }
  33% {
    transform: scale(1.1);
  }
  44% {
    transform: scale(1.12);
  }
  66% {
    transform: scale(0.95);
  }
}
.sugar-palatform-link:hover {
  -webkit-animation: link-hover 1s infinite;
          animation: link-hover 1s infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

/* Main Activities */
.container-main-activities-bg {
  background: url(http://subtlepatterns.com/patterns/textured_paper.png);
}
.container-main-activities {
  padding: 10px;
}
.main-icon {
  z-index: 2;
  vertical-align: middle;
  margin-right: 5px;
}
.main-icon-before {
  position: float;
  z-index: 1;
  display: block;
  width: 100px;
  height: 100px;
  background-size: 100px 100px;
  background-image: url(res/computer.png);

  transition: 0.4s ease all;
  -webkit-transform: scale(0);
     -moz-transform: scale(0);
      -ms-transform: scale(0);
       -o-transform: scale(0);
          transform: scale(0);
}
.main-activity-link:hover > .main-icon-before {
  -webkit-transform: scale(1);
     -moz-transform: scale(1);
      -ms-transform: scale(1);
       -o-transform: scale(1);
          transform: scale(1);
}
.main-activity-link {
  display: block;
  margin-bottom: 15px;

  text-decoration: none;
  font-weight: bold;
  font-size: 20px;
  color: black;

  transition: 0.4s ease all;
}
.main-activity-link:after {
  content: " ";
  width: 55px;
  height: 55px;
  background-image: url(res/go.svg);

  opacity: 0;
  float: right;
  margin-right: 55px;

  transition: opacity 1s linear 0.2s, margin-right 1s;
}
.main-activity-link:hover:after {
  opacity: 1;
  margin-right: 0px;
}

/* Mailing list */
.container-mail-list {
  padding: 10px;
}
.button { /* Thanks http://cssdeck.com/labs/fancy-3d-button */
	position: relative;
  color: rgba(255,255,255,1);
  text-decoration: none;
  background-color: rgba(219,87,5,1);
  font-family: Sans, sans-serif;
  font-weight: 700;
  font-size: 20px;
  display: block;
  padding: 4px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
  -moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
  box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
  margin: 0 auto;
  margin-bottom: 10px;
	width: 20%;
	text-align: center;

	-webkit-transition: all .1s ease;
	-moz-transition: all .1s ease;
	-ms-transition: all .1s ease;
	-o-transition: all .1s ease;
	transition: all .1s ease;
}
.button:hover,
.button:active {
    -webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    -moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    position: relative;
    top: 6px;
}

/* Footer */
ul {
  list-style: none;
}
li {
  display: inline-block;
  float: left;
  margin-right: 5px;
}
li a {
  color: #DDD;
  text-decoration: none;
  transition: 0.5s ease all;
}
li a:hover {
  text-decoration: underline;
}
.container-footer .right {
  height: 60px;
  width: auto;

  margin-top: -20px;

  float: right;
}

/* Location Icons */
github, gslo {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-size: 16px 16px;
  margin-bottom: -4px;
}
github {
  background-image: url(https://github.com/github/media/blob/master/octocats/blacktocat-16.png?raw=true);
}
gslo {
  background-image: url(https://git.sugarlabs.org/favicon.ico);
}