/**
 * 47admin - Admin Bootstrap Skin
 * 
 * Author: @geedmo
 * Website: http://geedmo.com
 * License: Codecanyon Regular License
 */

// Bootstrap styles
@import "../bootstrap/variables";
@import "../bootstrap/mixins";
// ReUse components from the app
@import "../app/bootstrap-reset";
@import "../app/button-extra";


// Taken from bootstrap variables
// to match all components media queries
// 
// EDIT this media queries to customize the landing page 
// avoid to affect app media queries

@mq-desktop-lg:                           @screen-lg-desktop; // Usually 1200px
@mq-desktop:                              @screen-desktop;    // Usually 992px
@mq-tablet:                               @screen-sm-min;     // Usually 768px
@mq-mobile:                               @screen-phone;      // Usually 480px

@desktop-lg:                              ~"only screen and (min-width: @{mq-desktop-lg})";
@desktop:                                 ~"only screen and (min-width: @{mq-desktop})";
@tablet:                                  ~"only screen and (min-width: @{mq-tablet})";
@mobile:                                  ~"only screen and (min-width: @{mq-mobile})";


// 
// LANDING PAGE STYLES
// 

body {
  background-color: #f0f0f0;
  
  // consistent spacing
  > section,
  > footer {
    padding: 80px 0;
  }
}


// HEADER LAYOUT

header {
  min-height: 100%;
  padding-bottom: 60px;
  text-align: center;
  background-image: url('../img/landing/background.jpg');
  background-repeat: no-repeat;
  background-color: #fff;
  background-attachment: fixed;

  > .container {
    height: 100%;
  }

  nav {
    padding: 40px 0 20px;
  }

  .app-logo, 
  .app-buttons {
    text-align: center;
    margin-bottom: 30px;
  }

  @media @desktop {
    
    background-size: 100% 100%;
    height: 100%;
    padding-bottom: 0;
    
    .app-logo {
      text-align: left;
      margin-bottom: 0;
    }
    .app-buttons {
      text-align: right;
    }
  }
}

// CONTENT INSIDE THE HEADER

.header-content {
  height: 80%;
  color: #fff;
  
  // reset row table on mobiles
  .row-table {
    &, & > [class*="col-"]  {
      display: block;
    }
  }

  @media @desktop {

    color: #888;
    
    // restore row table on desktops
    .row-table {
      display: table;
      > [class*="col-"] {
        display: table-cell;
      }
    }

    .browser-presentation {
      margin-right: -12%;
      box-shadow: -20px 30px 20px rgba(0,0,0,.25);
    }
    .side-presentation {
      text-align: left;
      padding-left: 15%;
    }
  }
}


.logo-wrapper {
  display: inline-block;
  max-width: 90px;
  height: auto;
  border: 2px solid #fff;
  padding: 10px 8px 8px;
  border-radius: 3px;
}

.store-list {
  margin: 80px 0;
  > li {
    max-width: 140px;
  }
}

.section-header {
  text-align: center;
  margin-bottom: 80px;
}

// CLIENT / PARTNERS LOGO

#clients {
  img {
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
  }
}

// TESTIMONIAL SLIDER

#testimonial {
  .carousel {
    min-height: 200px;
    .item {
      text-align: center;
      margin: 0 auto;
      > .row {
        margin-bottom: 50px;
      }
      h4 {
        font-weight: normal;
        font-style: italic;
        line-height: 1.4;
      }
    }
  }
}


// CALLUOT WITH BG IMAGE

#callout {
  background-image: url('../img/landing/callout.jpg');
  background-repeat: no-repeat;
  background-color: #fff;
  background-attachment: fixed;
  @media @desktop {
    background-size: 100% auto;
  }
}

// LIST AROUND BIG IMAGES

.feature-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  > li {
    margin-bottom: 30px;
    &:last-child {
      margin-bottom: 0;
    }
    @media @desktop {
      margin-bottom: 70px;
    }
  }
  .point {
    margin-bottom: 1px;
  }
}

// FOOTERS 

.footer-1 {
  form, nav {
    > h5 {
      color: #fff;
      font-size: 14px;
      font-weight: bold;
    }
  }
  nav > ul > li > a {
    color: #989898;
    &:hover, &:focus {
      color: #fff;
      text-decoration: none;
    }
  }
}

.footer-2 {
  padding-top: 0 !important;
  padding-bottom: 30px;
  background-color: #333;
  text-align: center;
  a {
    color: #989898;
  }
  p {
    margin: 0;
  }
  [class*="col-"] {
    padding-top: 30px;
  }
  .logo-column {
    text-align: center;
    padding-top: 30px;
  }

  @media @desktop {
    text-align: left;
  }
}