//
// Mars page styles
//
// author: Eric Poirier <eric.poirier@eclipse-foundation.org>
//-------------------------------------------------------------------

@import "_mixins.less";
.mars-page-content {
  h1, h2{
    font-family: 'Raleway', Arial, sans-serif;
    font-weight:100;
  }
}

/* HEADER */

.jumbotron{
  background-image:url(../../../images/header-bg.jpg);
  background-size:cover;
  padding:48px 0 30px;
  @media ( max-width : 767px) {
    background-position: bottom right;
  }
  h1, h2, p, li{
    color:#fff;
  }
  h1{
    font-weight:100;
  }
  h2{
    margin-bottom:20px;
  }
  p{
    margin-bottom:0;
    font-size:14px;
    a{
      font-weight:300;
      color:#fff;
    }
  }
  hr{
    opacity:0.6;
  }
  .list-with-arrow{
    padding-left:15px;
    list-style:none;
    li{
      padding-bottom:20px;
      &:before {    
        font-family: 'FontAwesome';
        content: '\f054'; // Chevron-right
        margin:0 5px 0 -15px;
        color: #F7941E;
        font-weight:100;
      }
    }
  }
}

/* Projects section*/

.projects{
  h2{
    text-align:center;
    @media ( max-width : 767px) {
      font-size:32px;
      margin:30px 0 40px;
    }
    @media ( min-width : 768px) {
      font-size:48px;
      margin:60px 0 80px;
    }
  }
  h3{
    font-weight:bold;
  }
  .well{
    padding:0;
    border-radius:0;
    box-shadow:none;
    background-color:#fff;
    h3{
      margin-top:0;
    }
    @media (max-width : 767px) {
      text-align:center;
      .col-left-box, .col-right-box{
        background-color:#f2f2f2;
        padding:20px 0;
      }
    }
    .col-left-box, .col-right-box{
      background-color:#f2f2f2;
      @media (max-width : 767px) {
        padding:20px;
      }
      @media (min-width : 768px) {
        min-height:150px;
        padding:40px;
        &:before, &:after{
          display:block;
          content:"";
          position:absolute;
          width: 0;
          height: 0;
        }
        &:before{
          border-top: 100px solid #fff; 
          top:0;
        }
        &:after{
          border-bottom: 100px solid #fff; 
          bottom:0;
        }
      }
    }
    .col-left-box{
      @media (min-width : 768px) {
        text-align:left;
        &:before, &:after{
          right:0;
          border-left: 100px solid transparent;
        }
      }
    }
    .col-right-box{
      @media (min-width : 768px) {
        text-align:right;
        &:before, &:after{
          left:0;
          border-right: 100px solid transparent;
        }
      }
    }
    .content{
      padding:20px;
    }
  }
}

/* Together section */

.together{
  text-align:center;
  background-color:#e8e8e8;
  margin-top:40px;
  padding:40px 0;
  p{
    line-height:1.8;
    margin-bottom:20px;
  }
}

/* Utilities */

.bold{
  font-weight:700;
}

.btn-border-only{
  background-color:transparent;
  border:1px solid;
  font-weight:300;
  
  &:hover, &:active, &:focus{
    border-color:#ccc;
    color:#ccc;
    background-color:transparent;
  }
}

.btn-border-only.white{
  border-color:#fff;
  .transition;
  &:hover{
    border-color:#ccc;
    color:#ccc;
  }
}

.btn-border-only.black{
  border-color:#858585;
  color:#858585;
  .transition;
  &:hover{
    border-color:#3B3B3B;
    color:#3B3B3B;
  }
}

.vertical-align.for-sm-and-up {
  @media ( min-width : 768px) {
    display: flex;
    align-items: center;
  }
}