// content-feature
.content-feature{
  display:flex;
  
  &.reverse{
    flex-direction:row-reverse;
    
    .content-40{
      &:last-child{
        padding-left:200px;
        padding-right:100px;
      }
    }
  }
  
  &:not(.reverse){
    .content-40{
      &:last-child{
        padding-left:130px;
        padding-right:200px;
      }
    }
  }
  
  &.border-top-blue{
    border-top:10px solid $blue;
  }

  &.has-small-image{
    .content-60{
      width:38%;
    }
    
    .content-40{
      width:62%;
    }
  }
  
  .content-60{
    position:relative;
    width:62%;
  }
  
  .content-40{
    position:relative;
    width:38%;
    background-color:$white;
    
    &.clouds{
      @include bg('../../assets/images/texture/clouds-blue-bg-reverse.jpg', 
                  '../../assets/images/texture/clouds-blue-bg-reverse@2x.jpg');
      background-size:cover;
      background-repeat:no-repeat;
      background-position:right middle;
    }

    &.blue-dark-bokeh{
      background-color:$path-bg-color !important;
      @include bg('../../assets/images/texture/path-bg.jpg',
                  '../../assets/images/texture/path-bg@2x.jpg');
    }
  
  }

  &.bg-blue-dark-bokeh{
    background-color:$path-bg-color !important;
    @include bg('../../assets/images/texture/path-bg.jpg',
                '../../assets/images/texture/path-bg@2x.jpg');
    background-size:100% auto;
    background-position:center top;
    background-repeat:no-repeat;
  }
  
  .content-60,
  .content-40{
    padding-top:100px;
    padding-bottom:100px;
    color:$grey-med;
    
    .title{
      @extend %title;
      font-size:41px;
      line-height:46px;
      padding-right:70px;
      margin-bottom:50px;

      &.medium{
        font-size:65px;
        line-height:69px;
      }
    }
    
    .description{
      @extend %description;
      font-size:19px;
      line-height:34px;
      padding-right:25px;
      margin-bottom:25px;
      
      p:first-child{
        margin-bottom:15px;
      }

      &:last-child{
        margin-bottom:0;
      }

      ul{
        margin-bottom:25px;
        
        li{
          position:relative;
          margin-left:35px;
  
          &:before{
            content:'';
            position:absolute;
            display:block;
            top:11px;
            left:-19px;
            width:7px;
            height:7px;
            background-color:$blue-grey-med;
            background-color:$blue;
            border-radius:100%;
          }
        }
      }
    }
    
    .actions{
      display:inline-flex;
      margin-bottom:12px;

      .button{
        margin-right:15px;

        &:last-child{
          margin-right:0;
        }
      }
    }
  }
  
  .content-60,
  .content-40{
    &.grey-faint{
      background-color:$grey-faint;
    }
  }

  .photo-cover{    
    &.yellow{
      border-bottom:9px solid $yellow;
    }
  }

}

@include breakpoint($desktop){
  .content-feature{
    &.reverse{
      .content-40{
        &:last-child{
          padding-left:140px;
        }
        
        .title{
          padding-right:0;
        }
      }
    }
    
    &:not(.reverse){
      .content-40{
        &:last-child{
          padding-left:140px;
          padding-right:140px;
        }
        
        .title{
          padding-right:0;
        }
      }
    }
    
    .content-60,
    .content-40{
      .title{
        font-size:37px;
        line-height:46px;
        margin-bottom:30px;
      }
    }
    
  }
}

@include breakpoint($laptop){
  .content-feature{
      
    &.reverse{
      .content-40{
        &:last-child{
          padding-left:100px;
          padding-right:80px;
        }
        
      }
    }
    
    &:not(.reverse){
      .content-40{
        &:last-child{
          padding-left:80px;
          padding-right:100px;
        }
      }
    }
    
    .content-60,
    .content-40{
      padding-top:90px;
      padding-bottom:90px;
      
      .title{
        font-size:33px;
        line-height:39px;
      }
      
      .description{
        padding-right:0;
        font-size:18px;
        line-height:31px;
      }
    }
  }
}

@include breakpoint($laptop-tablet){
  .content-feature{
      
    &.reverse{
      .content-40{
        &:last-child{
          padding-left:80px;
          padding-right:80px;
        }
      }
    }
    
    &:not(.reverse){
      .content-40{
        &:last-child{
          padding-left:80px;
          padding-right:80px;
        }
      }
    }
    
    .content-60,
    .content-40{
      padding-top:80px;
      padding-bottom:80px;
      
      .description{
        font-size:17px;
        line-height:29px;
      }
    }
  }
}


@include breakpoint($tablet-landscape){
  .content-feature{
      
    &.reverse{
      .content-40{
        &:last-child{
          padding-left:60px;
          padding-right:60px;
        }
      }
    }
    
    &:not(.reverse){
      .content-40{
        &:last-child{
          padding-left:60px;
          padding-right:60px;
        }
      }
    }
    
    .content-60,
    .content-40{
      padding-top:70px;
      padding-bottom:70px;
      
      .title{
        font-size:29px;
        line-height:35px;
      }
      
      .description{
        font-size:17px;
        line-height:29px;
      }
    }
  }
}


@include breakpoint($tablet-portrait){
  .content-feature{
      
    &.reverse{
      .content-40{
        &:last-child{
          padding-left:50px;
          padding-right:50px;
        }
        
      }
    }
    
    &:not(.reverse){
      .content-40{
        &:last-child{
          padding-left:50px;
          padding-right:50px;
        }
      }
    }
    
    .content-60{
      width:50%;
    }
    
    .content-40{
      width:50%;
    }
    
    .content-60,
    .content-40{
      padding-top:50px;
      padding-bottom:50px;
      
      .title{
        font-size:28px;
        line-height:35px;
        margin-bottom:20px;
      }
      
      .description{
        font-size:16px;
        line-height:27px;
        padding-right:10px;
      }
    }
    
  }
}

@include breakpoint($phone){
  .content-feature{
    display:block;
    
    &.reverse{
      .content-40{
        &:last-child{
          padding-left:30px;
          padding-right:30px;
        }
        
      }
    }
    
    &:not(.reverse){
      .content-40{
        &:last-child{
          padding-left:30px;
          padding-right:30px;
        }
      }
    }

    &.has-small-image{
      .content-60{
        width:100%;
      }

      .content-40{
        width:100%;
      }
    }
    
    .content-60,
    .content-40{
      padding-top:50px;
      padding-bottom:50px;
      
      .description{
        margin-bottom:35px;
      }
    }
    
    .content-60{
      width:100%;
      padding:0;
    }
    
    .content-40{
      width:100%;
    }
  
  
  .photo-cover {
    margin-bottom:-60px;
    padding-bottom: 75%;
  }
}

}

