// Global //
//= require reset
//= require elements
//= require header
//= require fonts

// Sections //
//= require home

@import "bourbon";

html,body{ overflow-x: hidden; }

body{
  font-family: "AvenirNextRegular", sans-serif;
  background-color: #f8f8f8;
  position: relative;
}

em{ font-style: italic; }

img{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none; 
}

.module, footer, .mobl{
  opacity: 0;
  @include transition (opacity 100ms ease-in);
} 

a{ outline: 0; }

.page {
  position: relative;
  overflow-x: hidden;
  .mobile{
    display:block;
    background-color: #333;
  }
  .desktop{
    display:none;
    background-color: #333;
  }
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
  -webkit-transition: -webkit-transform 200ms ease;
     -moz-transition:    -moz-transform 200ms ease;
      -ms-transition:     -ms-transform 200ms ease;
       -o-transition:      -o-transform 200ms ease;
          transition:         transform 200ms ease;
}

.clearfix{ clear: both; }

/* About Section ------ */
#team, #faq, #news, #news-item{
  height: auto;
  @include box-sizing(border-box);
}
#team, #news, #faq{
  padding-left: 24px;
  padding-right: 24px;
}
#team .intro, #faq .intro, #news .intro, #news-item .intro{
  padding-top: 24px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  background: transparent asset_url("team_divider.png") bottom center no-repeat;
}
#team .intro h1, #team .intro h2, #team .intro h1, #faq .intro h1, #news .intro h1, #news-item .intro h2{
  font-size: 32px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
}
#team{
  .header{
    margin: 20px 0 20px;
    font-size: 32px;
    padding: 0 20px;
  }

  ul.team_list{
    margin-bottom: 42px;
      li{
      width: 50%;
      display: inline-block;
      margin-bottom: 32px;
      vertical-align: top;
      a{
        padding: 0 6px;
        display: block;
        text-align: center;
        @include box-sizing(border-box);
        img{ width: 100%; }
        p{
          color: #333;
          font-size: 1.25em;
          margin: 4px 0 6px;
        }
        span{
          color: #999;
          font-size: 1em;
        }
      }
    }
  }
  .person{
    .details .name{
      margin-bottom: 32px;
      h1{
        font-size: 1.5em;
        font-weight: 600;
        text-transform: uppercase;
        margin-bottom: 2px;
      }
      p{
        font-size: 1.25em;
      }
    }
    .bio{
      p{
        margin-bottom: 24px;
        font-size: 1.125em;
        line-height: 1.5em;
      }
    }
    .photo{
      float: none;
      margin: 0 0 24px 0;
      img{
        width: 100%;
      }
    }
  }
  .team_back{
    background: transparent asset_url("team_divider.png") bottom center no-repeat;
    padding: 32px 0 50px;
    a{
      font-size: 20px;
      color: #3798c0;
    }
  }
}

#faq .left, #faq .right{
  display: block;
  a{ color: #3798c0; }
}
#faq h3{
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.5em;
  line-height: 1.25em;
  margin-bottom: 8px;
}
#faq p{
  margin-bottom: 12px;
  line-height: 24px;
}
#faq div{
  margin-bottom: 44px;
}
#faq ul li{
  margin-bottom: 8px;
}
#news{
  width: 100%;
  margin: 0 auto;
}
#news .post{
  margin-bottom: 24px;
  padding-bottom: 24px;
  background: transparent asset_url("news_divider.png") bottom center no-repeat;
  a{ color: #3798c0; }
}
#news .post .post-image{
  width: 100%;
  display: block;
  img{ width: 100%; }
}
#news .post .details{
  display: block;
  width: 100%;
  vertical-align: top;
  @include box-sizing(border-box);
}
#news .post.left .details, #news .post.right .details{
  padding-left: 0;
}
#news .post.right .post-image{
  float: right;
}
#news .post.left .post-image{
  float: left;
}
#news .post .details h2, #news-item .post-indiv .details h1{
  font-size: 1.6em;
  line-height: 1.25em;
  margin-bottom: 12px;
  font-weight: 600;
  text-transform: uppercase;
}
#news .post .details p, #news-item .post-indiv .details p{
  font-size: 1.125em;
  line-height: 24px;
}
#news .post .details span, #news-item .post-indiv .details span{
  display: block;
  margin-top: 20px;
  font-size: 0.875em;
  color: #999;
}
#news-item{
  width: 100%;
  -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  .intro, .post-indiv{
    padding-left: 24px;
    padding-right: 24px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  }
  .post-indiv{
    margin-bottom: 36px;
    padding-bottom: 36px;
    .details{
      width: 100%;
      @include box-sizing(border-box);
      h3{ font-size: 2em; }
      p{ margin-bottom: 24px; }
      img.alignright{
        float: right;
        margin: 0 0 12px 12px;
      }
      img.alignleft{
        float: left;
        margin: 0 12px 12px 0;
      }
      a{ color: #3798c0; }
    }
  }
  .news_back{
    background: transparent asset_url("team_divider.png") bottom center no-repeat;
    padding: 42px 0 50px;
    a{ font-size: 20px; color: #3798c0; }
  }
}

#news-item .related{
  margin-bottom: 48px;
}
#news-item .related h2{
  font-size: 1.5em;
  margin-bottom: 20px;
  font-weight: 600;
  text-transform: uppercase;
  padding-left: 80px;
  padding-right: 80px;
}
#news-item .related .posts{
  padding-left: 48px;
  padding-right: 48px;
}
#news-item .related .post-related{
  display: inline-block;
  width: 33%;
  vertical-align: top;
  color: #000;
  padding: 0 28px;
  @include box-sizing(border-box);
}
#news-item .related .post-related .inner{
  background-color: #fff;
  text-align: center;
  padding: 12px;
  -webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.2);
  @include box-sizing(border-box);
}
#news-item .related .post-related .inner img{
  margin-bottom: 8px;
  border: 1px solid #ccc;
}
#news-item .related .post-related .inner h1{
  text-transform: uppercase;
  margin-bottom: 8px;
}
#news-item .related .post-related .inner p{
  font-size: 0.875em;
}
#news-item .post-indiv strong{
  font-family: AvenirNextSemibold;
}

.prop_subnav{
  .link{
    display: block;
    padding: 20px 0;
    text-align: center;
    max-width: 300px;
    width: 90%;
    margin: 24px auto 24px;
    text-transform: uppercase;
    background-color: #2e75e4;
    letter-spacing: 1px;
  }
  p{
    text-align: left;
    padding: 32px 12px 20px;
    font-size: 1.125em;
    color: #b9b9b9;
    font-weight: 600;
    border-bottom: 1px solid #eee;
  }
  ul{
    li{
      display: block;
      width: 100%;
      text-align: left;
      a{
        display: block;
        padding: 20px 12px;
        color: #3798c0;
        text-transform: uppercase;
        border-bottom: 1px solid #eee;
        @include box-sizing(border-box);
        label{ display: block; }
        img{ display: none; }
      }
      &:first-child{
        border-top: 1px solid #eee;
      }
    }
  }

  // Star Wars
  &.rb li.rb{ display: none; }
  &.cw li.cw{ display: none; }
  &.epi6 li.epi6{ display: none; }
  &.epi5 li.epi5{ display: none; }
  &.epi4 li.epi4{ display: none; }
  &.epi3 li.epi3{ display: none; }
  &.epi2 li.epi2{ display: none; }
  &.epi1 li.epi1{ display: none; }

  // Indiana Jones
  &.kcs li.kcs{ display: none; }
  &.yij li.yij{ display: none; }
  &.tod li.tod{ display: none; }
  &.rla li.rla{ display: none; }
  &.lc li.lc{ display: none; }

  // Campuses
  &.ldac li.ldac{ display: none; }
  &.swr li.swr{ display: none; }
  &.scs li.scs{ display: none; }

}

footer{
  padding: 32px 24px 32px;;
  text-align: center;
  @include box-sizing(border-box);
  p{
    a{
      color: #3798c0;
      display: inline-block;
    }
    &.terms{
      font-size: 0.875em;
      a{
        margin: 0 12px 16px;
        color: #666;
      }
    }
    &.social{
      margin-bottom: 32px;
      a{ 
        padding: 4px 0 0 32px;
        height: 20px;
        &.fb{ background: transparent asset_url("footer_social_fb_sm.png") bottom left no-repeat; }
      }
    }
  } 
  span{
    font-size: 0.875em;
    color: #a1a1a1;
    display: block;
    margin-bottom: 16px;
  }
}

.desktop{ display: none; }
.mobl{ display: block; }

#e404, #e500{
  max-width: 1200;
  img{
    width: 100%;
  }
}

.third-part-legal{
  padding: 12px 12px 24px;
  @include box-sizing(border-box);
  p{
    font-size: 0.8em;
    line-height: 1.2em;
    color: #999;
    text-align:center;
  }
}

@media screen and (max-width: 900px){
  body.noscroll{
    .page_content{
      cursor: pointer;
      &:after{
        position: fixed;
        content: "";
        top: 0; right: 0; bottom: 0; left: 0;
        background-color: rgba(0,0,0,0.6);
      }
    }
  }
}

@media screen and (max-width: 460px){
  #news-item{
    .post-indiv{
      .details{
        p{
          img.alignright, img.alignleft{
            display: block;
            width: 100%;
            height: auto;
            margin: 0 0 16px 0;
            float: none;
          }
        }
      }
    }
  }
}

@media screen and (min-width: 460px){
  #news{
    width: 100%;
    .post{
      margin-bottom: 42px;
      padding-bottom: 42px;
    }
  }
}

@media screen and (min-width: 768px) {

  .page{
    .mobile{display:none}
    .desktop{display:block}
  }

  .desktop{ display: block; }
  .mobl{ display: none; }

  #home{
    .rslides {
      li {
        img{ top: -42px; }
      }
    }
  }

  #team .intro, #faq .intro, #news .intro, #news-item .intro{
    padding-top: 40px;
    padding-bottom: 40px;
    margin-bottom: 50px;
  }
  #team, #news, #faq{
    padding-left: 40px;
    padding-right: 40px;
  }
  #team{
    ul.team_list li{
      width: 33%;
      a{
        padding: 0 16px;
      }
    }
    .person{
      .photo{
        float: right;
        margin: 0 0 24px 24px;
      }
    }
  }
  #news{
    width: 90%;
    .post{
      .post-image{
        width: 28%;
        max-width: 242px;
        height: 156px;
        display: inline-block;
        img{ width: 100%; }
      }
      .details{
        display: inline-block;
        width: 72%;
        vertical-align: top;
        @include box-sizing(border-box);
      }
      &.left .details{
        padding-left: 20px;
      }
      &.right .details{
        padding-right: 20px;
      }
    }
  }

  .prop_subnav{
    ul{ text-align: center; }
    p{
      text-align: center;
      padding: 42px 0 24px;
      font-size: 1.125em;
      color: #b9b9b9;
      font-weight: 600;
      border-bottom: none;
    }
    ul{
      li{
        display: inline-block;
        width: 25%;
        text-align: center;
        margin-bottom: 16px;
        a{
          display: block;
          padding: 0 12px;
          border-bottom: none;
          @include box-sizing(border-box);
          img{
            display: block;
            width: 100%;
          }
          label{ display: none; }
        }
      }
    }
  }
}

@media screen and (min-width: 900px) {
  body{ overflow: auto; }

  #team .intro, #faq .intro, #news .intro, #news-item .intro{
    padding-top: 160px;
  }
  #team, #faq{
    padding-left: 80px;
    padding-right: 80px;
  }
  #team{
    ul.team_list.exec{
      text-align: center;
      li{ width: 25%; }
    }
    ul.team_list li{
      width: 20%;
      a{
        padding: 0 20px;
      }
    }
  }

  #news{
    max-width: 1200px;
    width: 90%;
  }
  #news .post{
    background: transparent asset_url("news_divider.png") bottom center no-repeat;
  }
  #news .post .post-image{
    width: 28%;
    max-width: 242px;
    height: 156px;
    display: inline-block;
    img{ width: 100%; }
  }
  #news .post .details{
    display: inline-block;
    width: 70%;
    vertical-align: top;
    @include box-sizing(border-box);
  }

  #faq .left, #faq .right{
    display: inline-block;
    vertical-align: top;
    width: 50%;
  }
  #faq .left{
    padding-right: 48px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  }
  #faq .right{
    padding-left: 48px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  }
  #news-item{
    width: 80%;
    .intro, .post-indiv{
      padding-left: 80px;
      padding-right: 80px;
    }
    .post-indiv{
      margin-bottom: 36px;
      padding-bottom: 36px;
      .details{
        width: 100%;
        h1{ font-size: 2.5em; font-weight: 600; }
        p{ margin-bottom: 24px; }
        strong{ font-family: AvenirNextSemibold; }
      }
    }
  }
}

@media screen and (min-width: 1024px) {
  #team .intro, #faq .intro, #news .intro, #news-item .intro{
    padding-top: 160px;
  }
  #news{
    width: 80%;
    padding: 0 40px;
  }
}

@media screen and (min-width: 1200px){
  #news{
    width: 72%;
    padding: 0 80px;
  }
}