@import 'compass';
@import 'colors';
@import url(//fonts.googleapis.com/css?family=Courgette);

body[data-controller="home"][data-action="index"] {

  h1, h2, h3, h4, h5, h6 { font-weight: 600; }
  .panel h1, h2, h3, h4, h5, h6 { color: $cmPurple; }
}

#coder_welcome {

  .button {
    border: $cmPurple;
    @include background-image(linear-gradient(bottom top, #8e4487, #653060 ));

    &:hover{
      @include background-image(linear-gradient(bottom top, lighten(#8e4487, 10%), lighten(#653060, 10%)));
    }

    margin-left: 75px;

    .fi-social-github {
      font-size: 1.8em;
      margin-right: 3px;
      vertical-align: middle;
    }
  }

  #sign_up p {
    text-align: center;
  }
}

.home-signup {
  margin-top:25px;
}

#mission {

  padding: 15px 0 15px 0;

  img {
    height: 190px;
    width: auto;
  }

  .mission_text {
    font-size: 2em;
    margin-bottom: 100px;
    margin-top: 50px;
    text-align: center;
 }

  #cm_logo_code {
    color: $cmPurple;
    font-family: Rockwell, "Courier New", Courier, Georgia, Times, "Times New Roman", serif;

  }

  #cm_logo_montage {
    color: $cmTeal;
    font-family: Courgette;
  }

}

@media screen and (max-device-width:767px), screen and (max-width:767px) {
  #mission {
    img { display: none; }
    .mission_text { font-size: 1.7em; }
  }
}

@media screen and (max-device-width:854px), screen and (max-width:854px) {
  #mission img {
    width: 12%;
  }
}

#secondary_welcome {
  padding: 10px;
  padding-bottom: 30px;

  .button {
    margin-left: 75px;
  }
}

.index.panel.radius {
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

.index.panel {
  background-image: -ms-linear-gradient(top, #FFFFFF 0%, #F2F2F2 100%);
  background-image: -moz-linear-gradient(top, #FFFFFF 0%, #F2F2F2 100%);
  background-image: -o-linear-gradient(top, #FFFFFF 0%, #F2F2F2 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #F2F2F2));
  background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #F2F2F2 100%);
  background-image: linear-gradient(to bottom, #FFFFFF 0%, #F2F2F2 100%);
  -moz-box-shadow:    inset 0 0 5px #666666;
  -webkit-box-shadow: inset 0 0 5px #666666;
  box-shadow:         inset 0 0 5px #666666;

  h2 a { color: $cmPurple; }
  margin-bottom: 30px;
}

.fi-social-github {
  vertical-align: middle;
}

.index.button.radius {
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  border-radius: 12px;
}

.index.button {
  -moz-box-shadow:    1px 1px 10px 0px #2d2d2d;
  -webkit-box-shadow: 1px 1px 10px 0px #2d2d2d;
  box-shadow:         1px 1px 10px 0px #2d2d2d;

  background: #27a0ad;
  background: -moz-linear-gradient(top,  #27a0ad 0%, #228691 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#27a0ad), color-stop(100%,#228691));
  background: -webkit-linear-gradient(top,  #27a0ad 0%,#228691 100%);
  background: -o-linear-gradient(top,  #27a0ad 0%,#228691 100%);
  background: -ms-linear-gradient(top,  #27a0ad 0%,#228691 100%);
  background: linear-gradient(to bottom,  #27a0ad 0%,#228691 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#27a0ad', endColorstr='#228691',GradientType=0 );
  border: none;
  text-shadow: 1px 1px 1px #2d2d2d;
}

.index.button:hover {
  background: #0ac9de;
  background: -moz-linear-gradient(top, #0ac9de 0%, #33878e 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0ac9de), color-stop(100%,#33878e));
  background: -webkit-linear-gradient(top, #0ac9de 0%,#33878e 100%);
  background: -o-linear-gradient(top, #0ac9de 0%,#33878e 100%);
  background: -ms-linear-gradient(top, #0ac9de 0%,#33878e 100%);
  background: linear-gradient(to bottom, #0ac9de 0%,#33878e 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0ac9de', endColorstr='#33878e',GradientType=0 );
}

/* Back to top scroll */
.scrollup {
  font-size: 60px;
  width: 50px;
  height: 50px;
  opacity: 0.3;
  position: fixed;
  bottom: 155px;
  right: 35px;
  border-radius: 5px;
  display: none;
}
