osem-fcy/app/assets/stylesheets/osem-splash.css.scss

@import "breakpoints.css.scss";

#splash {
  // Counter the general padding for #content
  margin-bottom: -60px;
  section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  section:nth-child(even) {
    background: none repeat scroll 0 0 #e0e0e0;
    color: #555;
  }
  section:nth-child(odd) {
    background: none repeat scroll 0 0 #ffffff;
    color: #7b7b7b;
    .thumbnail {
      background: none repeat scroll 0 0 #e0e0e0;
    }
  }

  .cta-button {
    padding-top: 30px;
  }

  #banner{
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    margin-top: -10px;
    padding-top: 100px;
    padding-bottom: 100px;
    .container {
      #header  {
        background-color: rgba(224, 224, 224,.80);
        padding-top: 20px;
        padding-bottom: 20px;
      }
    }
  }

  #program {
    h3 {
      padding-left: 5px;
    }
    .track {
      padding: 20px;
    }
    .track:hover{
      background-color: #F0FFFF;
    }
  }

  #callforpapers {
    .timer-box{
      width: 130px;
      margin: 35px 24px 20px 0;
      border-radius: 50%;
      border:4px solid #989797;
    }
  }

  #venue {
    padding-top: 0px;
  }

  #lodging {
    @include breakpoint(xs) {
      .img-lodging{
        max-width: 280px;
      }
    }
    @include breakpoint(sm) {
      .img-lodging{
        max-width: 200px;
      }
    }
    @include breakpoint(sm) {
      .img-lodging{
        max-width: 260px;
      }
    }
    @include breakpoint(lg) {
      .img-lodging{
        max-width: 300px;
        max-height: 200px;
      }
    }
  }

  #sponsors {
    .img-sponsor {
      max-height: 100px;
    }
    .img-sponsor-1 {
      max-height: 200px;
    }
    .img-sponsor-2 {
      max-height: 150px;
    }
    .img-sponsor-3 {
      max-height: 120px;
    }
    @include breakpoint(xs) {
      .img-sponsor, .img-sponsor-1, .img-sponsor-3, .img-sponsor-3{
        max-height: unset;
        max-width: 280px;
      }
    }
  }

  #social-media{
    background: none repeat scroll 0 0 #2f2f2f;
    padding-top: 60px;
    padding-bottom: 60px;
    i{
      color: #4a4a4a;
    }
    i:hover{
      color: #16a085;
    }
    a{
      padding-left: 100px;
    }
    a:nth-child(-n+1) {
      padding-left: 0px;
    }
    @include breakpoint(xs) {
      a{
        padding-left: 10px;
      }
    }
  }

  .scroll-top-wrapper {
    position: fixed;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    text-align: center;
    z-index: 99999999;
    background-color: #424242;
    width: 50px;
    height: 48px;
    line-height: 48px;
    right: 30px;
    bottom: 30px;
    padding-top: 2px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    i.fa {
      line-height: inherit;
    }
    &.show {
      visibility:visible;
      cursor:pointer;
      opacity: 1.0;
    }
    a {
      color: white;
    }
  }
}