/**
 ******************************************************
 ******************************************************
 * {LESS} :: COMMON :: (upplication, 2016)
 ******************************************************
  *****************************************************
 */

@import "../base/_variables.less";
@import "../base/_mixins.less";
// Materialize lib resets
@import "../base/_materialize-resets.less";
// special section blocks
@import "../base/_samples.less";
@import "../base/_multidevices.less";
@import "../base/_showcases.less";
@import "../base/_youtube-player.less";
// all Modals dialogs
@import "../base/_modals.less";
// bottom cookies advise
@import "../base/_cookies.less";
// all blocks in Footer:
@import "../base/_trial.less";
@import "../base/_clients.less";
// only for Telefonica (it goes to deprecated)
@import "_basement.less";
@import "_header-telefonica.less";


/* ... Colors ... */

// Main Movistar color
@telefonica: #00476e;
@telefonica-hover: lighten(@telefonica, 10%);

@main-green: @telefonica;
@accept-btn-hover: @telefonica-hover;

/* ... GENERAL FONTS ... */

@import url('https://fonts.googleapis.com/css?family=Lato:100,400,700,900|Raleway:100,400,600,700,900|Roboto+Slab:100,400,700');

// Main Container with custom fonts
.outer-wrap {
  font-family: "Lato", sans-serif;
}

/* ... (common) TEXT SELECTED COLOR ... */

::selection {
  background: @telefonica;
  color: @white;
}

::-moz-selection {
  background: @telefonica;
  color: @white;
}

/* ... (common) CUSTOM SCROLL BAR ... */

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background: lighten(@light-lilac, 10%);
  cursor: pointer;
}

::-webkit-scrollbar-thumb {
  background: @telefonica;
  border: 0 none @white;
  border-radius: 0;
  height: 4.5em;
}

// MAIN HEADERS (SECTIONS)
.headTitles {
  padding-top: 1.5em;
  color: @darkest-lilac;
  font-family: "Raleway", sans-serif;
  font-size: 2em;
  font-weight: 500;
  line-height: 35px;
  text-align: center;

  span {
    color: @medium-lilac;
  }
}


/**
 ****************************************************************
 * MAIN TOP TEXT :: "_common.less" reset :: (upplication, 2016)
 ****************************************************************
 */

#content.home {
  #register {
    .claim {
      h1,
      p {
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
        font-weight: 600;
      }
    }
    form {
      background-color: @white;

      .btn {
        border-radius: 0;
        line-height: .5em;
        margin-bottom: 20px;
      }

      label {
        width: 90%;
        margin: 0 5%;

        &:first-child {
          input {
            margin-top: 20px;
          }
        }
      }

      input[type=submit] {

      }
    }
  }
}

@media (min-width: 767px) {
  #content.home {
    #register {
      .claim input[type=submit],
      form input[type=submit] {
        padding: 1em;
        line-height: .2em;
        width: 90%;
        margin: 0 5%;
        color: @white;
      }
    }
  }
}


/**
 ****************************************************************
 * Telefonica CONTENT main block :: (upplication, 2016)
 ****************************************************************
 */

@media (max-width: 479px) {
  #content {
    // Home views (mpos)
    &.home {
      margin-top: 145px;
    }
    // Price Plans & Terms views (Aplicateca)
    &.prices,
    &.terms {
      margin-top: 140px;
    }
  }
}

@media (max-width:767px) {
  // common for all Telefonica views
  #content {
    margin-top: 100px;
  }
}


/**
 ****************************************************************
 * Telefonica Aplicateca PRICE View :: (upplication, 2016)
 ****************************************************************
 */

/* ... Aplicatecas Pricing Plans Boxes :: Section ... */

#content.prices,
#content.home {
  section {
    // Section HeadTitles
    h2 {
      font-size: 2.4em;
      text-align: center;
      line-height: 1.3em;
      font-weight: 500;
      padding: .5em 0;
    }

    // each of Pricing Plans
    .plans {
      &.prices-aplicateca {
        width: 100%;

        .plan,
        .plan.plan-professional {
          width: 33.3333%;
          margin-bottom: 3em;

          .plan-header {
            // pricing plan TITLE
            h3 {
              color: @telefonica;
              font-size: 18px;
              padding: 1em 0 .3em 0;
            }
            // pricing plan SURNAME (claim)
            p {
              font-weight: 400;
              text-align: center;
              padding-bottom: 10px;
            }
            // pricing plan IMG
            img {
              margin-top: 10px;
              width: 100px;
              height: auto;
              position: relative;
              left: 50%;
              -webkit-transform: translateX(-50%);
              -moz-transform: translateX(-50%);
              -ms-transform: translateX(-50%);
              -o-transform: translateX(-50%);
              transform: translateX(-50%);
            }
            // pricing plan PRICE
            div.price {
              padding: 1em;

              span {
                &.price {
                  font-size: 35px;
                  font-weight: 500;
                }
                &.most-popular {
                  padding: .8em 0;
                }
                &.price-details {
                  font-weight: 400;
                }
              }
            }
          }

          // pricing plan Features LIST
          .plan-features {
            font-weight: 400;

            .os-list {
              padding-left: .3em;
            }

            ul {
              min-height: 215px;

              .icon {
                color: @medium-lilac;
                position: relative;
                top: 5px;
                padding-right: 10px;
              }
            }
          }

          // pricing plan Upgrade BTN
          a.btn {
            background-color: @telefonica;
            color: @white;

            &:hover {
              background-color: @telefonica-hover;
              color: @white;
            }
          }
        }
      }
    }

    // "Exceptions text" Section block
    .prices-aplicateca-exceptions {
      p {
        text-align: center;
        font-weight: 400;
      }
    }
  }
}


/* ... "Contact Us" Section block ...*/
#content.prices {
  section {
    .custom-app {
      text-align: center;
      padding-top: 6em;

      div {
        width: auto;
        display: inline-block;

        div {
          display: inline-block;
          vertical-align: middle;
          width: auto;
          text-align: left;

          // "Contact Us" TEXT
          h2,
          h3 {
            margin: 0;
            padding: 0;
            width: auto;
          }

          h2 {
            font-size: 1.6em;
            color: #656565;
          }

          h3 {
            font-weight: 400;
            color: #333;
          }

          // "Contact Us" BTN
          a {
            padding: 1.1em 3em;
            text-transform: uppercase;
            margin-left: 2em;
            vertical-align: middle;
            margin-top: -.1em;

            i {
              padding-right: 10px;
            }
          }
        }
      }
    }
  }
}


// MEDIA QUERIES

@media all and (min-width: 1300px) {
  #content.prices {
    section {
      .plans.prices-aplicateca {
        .plan,
        .plan.plan-professional {
          width: 25%;
        }
      }
    }
  }
}


@media all and (max-width: 1080px) {
  #content.prices {
    section {
      .plans.prices-aplicateca {
        .plan,
        .plan.plan-professional {
          width: 50%;

          .plan-features {
            ul {
              width: 68%;
              margin: 0 auto;
            }
          }
        }
      }
    }
  }
}


@media all and (max-width: 980px) {
  #content.prices {
    section {
      .custom-app {
        div {
          display: block;

          &:first-child {
            margin-bottom: 20px;
          }
        }
      }
    }
  }
}


@media all and (max-width: 890px) {
  #content.prices {
    section {
      .plans.prices-aplicateca {
        .plan,
        .plan.plan-professional {
          width: 100%;
          float: none;
          box-shadow: none;

          .plan-features {
            ul {
              width: 40%;
            }
          }
        }
      }
    }
  }
}


@media all and (max-width: 425px) {
  #content.prices {
    section {
      .container {
        padding: 0;
      }
    }
  }
}


/* ... common Features for all Aplicatecas Pricing Plans :: Section ... */

#all-plans-include {
  .icon {
    font-size: 18px;
    color: @medium-lilac;
    position: relative;
    top: 4px;
    padding-right: 10px;
  }

  span {
    color: @darkest-lilac;
    font-weight: 400;
  }
}


/**
 ****************************************************************
 * Telefonica Aplicateca TERMS View :: (upplication, 2016)
 ****************************************************************
 */

#content.terms {
  // Aplicateca�s Terms TITLE
  h5 {
    color: @telefonica;
    margin-top: 2em;
    margin-bottom: 1em;
    font-size: 18px;
    font-weight: 600;
  }

  // Aplicateca�s Terms SubTitle
  h3 {
    margin-top: 1.5em !important;
    margin-bottom: 1em;
    font-size: 18px;
    font-weight: 600;
  }

  // Aplicateca�s Terms TEXT
  p {
    color: #222;
    font-weight: 400;
    text-align: justify;
    line-height: 1.8em;
  }
}


/**
 ***************************************************************************
 * (components) Resets for all Telefonica�s Views :: (upplication, 2016)
 ***************************************************************************
 */

/* ... Main title Headers ... */
.about {
  .headTitles {
    margin: 0 0 2em 0;

    span {
      color: @darkest-lilac;
    }
  }
}


/* ... THREE CARDS GRID (succesful showcases) :: "_common.less" reset ... */
.about-grids {
  .about-grid {
    .about-grid-info {
      p.grid-link {
        // links to showcases views hidden here!
        display: none;
      }
    }

    &.about-grid1 {
      background-color: @telefonica;
    }
  }
}


/* ... "TRY IT FOR FREE 15 DAYS!" (prefooter block) :: "_footer.less" reset ... */
.trial-block {
  .trial-block-left {
    // Text with color default chenged
    h2,
    h3 {
      color: @telefonica;
    }
    h3 {
      margin-top: 20px;
    }
  }
  .trial-block-right {
    a.price-btn {
      background-color: @telefonica;

      &:hover {
        background-color: @telefonica-hover;
      }
    }
  }
}


/* ... CLIENTS CAROUSEL (prefooter block) :: "_footer.less" reset ... */
.clients-section {
  background: rgba(234, 255, 245, 1);
  background: -webkit-linear-gradient(-45deg, rgba(0, 126, 195, 1) 0%, rgba(0, 93, 144, 0.2) 48%, rgba(0, 71, 110, 0.4) 100%);
  background: -ms-linear-gradient(-45deg, rgba(0, 126, 195, 1) 0%, rgba(0, 93, 144, 0.2) 48%, rgba(0, 71, 110, 0.4) 100%);
  background: -webkit-linear-gradient(-45deg, rgba(0, 126, 195, 1) 0%, rgba(0, 93, 144, 0.2) 48%, rgba(0, 71, 110, 0.4) 100%);
  background: linear-gradient(-45deg, rgba(0, 126, 195, 1) 0%, rgba(0, 93, 144, 0.2) 48%, rgba(0, 71, 110, 0.4) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#007ec3', endColorstr='#00476e', GradientType=1);
  padding: 3em 0;
  margin-top: 8em;
}


/* ... COOKIES bottom advise :: "_cookies.less" (common element resets) ... */
#cookies {
  padding: 15px 20px;
  background-color: rgba(0, 71, 110, 0.7);
  border-top: 1px solid @telefonica;
  color: @white;

  i {
    right: 10px;
  }

  p {
    font-weight: 400;

    a {
      font-weight: 600;
      color: white;
      text-decoration: underline;

      &:hover {
        color: @telefonica;
        text-decoration: inherit;
      }
    }
  }
}

// Cookies Media Queries
@media (max-width:480px) {
  #cookies {
    width: 100%;
  }
}

/* ... "FREE TRIAL" MODAL dialog :: "_modals.less" (common element resets) ... */
.modal.modal-upp {
  /* ... to close modal dialog ... */
  a.modal-action.modal-close {
    color: @white;
    &:hover {
      color: @light-lilac;
    }
  }

  &#free-trial.modal {
    .modal-content {
      // Header (modal dialog content)
      h3 {
        background-color: @telefonica;
        color: @white;
        &:after {
          border-top: 15px solid @telefonica;
        }

        span {
          color: @white;
        }
      }

      form {
        button {
          background-color: @telefonica;
          &:hover {
            background-color: @telefonica-hover;
          }
        }
      }
    }

    .modal-terms {
      ul {
        li {
          a:hover {
            color: @telefonica;
          }
        }
      }
    }
  }
}

.lean-modal {
  z-index: -999 !important;
}

// Inputs animation effect
.input-field {
  input {
    &.valid + label {
      color: @telefonica !important;
    }

  }
}


/* ... to MATERIALIZE :: "_materialize-reserts.less" (common element resets) ... */
input[type=text]:focus:not([readonly]),
input[type=password]:focus:not([readonly]),
input[type=email]:focus:not([readonly]),
input[type=url]:focus:not([readonly]),
input[type=time]:focus:not([readonly]),
input[type=date]:focus:not([readonly]),
input[type=datetime-local]:focus:not([readonly]),
input[type=tel]:focus:not([readonly]),
input[type=number]:focus:not([readonly]),
input[type=search]:focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
  border-bottom: 1px solid @telefonica;
  box-shadow: 0 1px 0 0 @telefonica;
}

input[type=text]:focus:not([readonly]) + label,
input[type=password]:focus:not([readonly]) + label,
input[type=email]:focus:not([readonly]) + label,
input[type=url]:focus:not([readonly]) + label,
input[type=time]:focus:not([readonly]) + label,
input[type=date]:focus:not([readonly]) + label,
input[type=datetime-local]:focus:not([readonly]) + label,
input[type=tel]:focus:not([readonly]) + label,
input[type=number]:focus:not([readonly]) + label,
input[type=search]:focus:not([readonly]) + label,
textarea.materialize-textarea:focus:not([readonly]) + label {
  color: @telefonica;
}



/**
 ****************************************************************
 * Telefonica�s Aplicateca FOOTER :: (upplication, 2016)
 ****************************************************************
 */
.footer-container-tlf {
  background-color: @telefonica;
  margin-bottom: -17px;
  padding-top: 1em;
  color: @white;

  a {
    color: @white;
    
    &:hover {
      color: lighten(@telefonica, 20%);
    }
  }
}


/* ... TABS :: components... */

#tabs {
  h5 {
    span {
      font-weight: 600;
    }
  }
}


/* ... "Sucessful Showcase" :: Section... */

#content.home {
  .testimonials {
    li {
      a {
        text-align: center;
      }
    }
  }
}


/* ... APLICATECA :: HOME view ... */

// Main Container
.outer-wrap {
  background: #333;
  overflow: hidden;
  overflow-x: hidden;
  position: absolute;
  width: 100%;
}


// Main Top NAVBAR
.nav-basement {
  background: transparent;
  display: block;
  font-size: 1.05em;
  position: fixed;
  left: 0;
  width: 200px;
  z-index: 100;
  -ms-transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);

  li {
    padding: 1em;
    border-bottom: 1px solid rgba(255,255,255,.2);

    p {
      color: @white;
      font-size: 1em;
    }
  }
}


// Main SubContainer
#main-container {
  min-height: 100%;
}

.slide-pannel {
  background: @white;
  display: block;
  min-height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: 1004;

  &.effects {
    height: 100%;
    box-shadow: 2px 0 2px rgba(0,0,0,.3);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
  }
}

/* ... Register Area ... */
#register {
  position: relative;
  min-height: 450px;
  background-image: url("@@config.base_path/images/aplicateca/header_desktop.jpeg");
  background-size: cover;
  background-position: center;

  .announce {
    width: 85%;
    margin: 0 7.5%;
    background-color: @black;
    color: @white;
  }
}

@media (max-width: 767px) {
  #content.home #register form .btn {
    line-height: 1.5em;
  }
}


// common arrow
.arrow-down-black {
  position: relative;
  margin-bottom: 1em;

  &:after {
    content: " ";
    width: 0;
    height: 0;
    position: absolute;
    border-left: 1em solid transparent;
    border-right: 1em solid transparent;
    border-top: 1em solid @black;
    bottom: -.75em;
    left: 50%;
    margin-left: -.5em;
  }
}

.icon-list span {
  display: none;
}


#main-container {
  #dark-layout {
    display: none;
  }

  &.slide-right {
    #dark-layout {
      background-color: rgba(0,0,0,.5);
      height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      display: block;
    }
  }
}


a.btn-signup {
  margin-left: 10px;
  border: 0;
  padding: 6px 30px;
  display: inline-block;
  font-size: 1em!important;
  text-transform: none!important;
  margin-top: -6px!important;
}


.nav-basement {
  .change-lang-menu {
    display: none;
    visibility: hidden;
  }
}







/* ... MEDIA QUERIES ................................................. */

// Media Queries :: Inputs & Container
@media (max-width:480px) {
  #main-container,
  input {
    font-size: 16px;
  }
}

@media (min-width:480px) and (max-width:767px) {
  #main-container,
  input {
    font-size: 16px;
  }
}

@media (min-width:767px) {
  #main-container,
  input {
    font-size: 16px;
  }
}

@media (max-width:767px) {

  .header-container {
    position: fixed;
    z-index: 6;
  }

  #main-container #dark-layout {
    display: none;
  }

  #main-container.slide-right #dark-layout {
    background-color: rgba(0,0,0,.5);
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: block;
  }

  .nav-basement-options a {
    color: #fff;
  }

  header .icon-list {
    margin: 0;
    position: absolute;
    left: 0;
    top: 0;
    padding: .6em .5em;
    font-size: 1.8em;
    background: 0 0;
    border: 0;
    color: #fff;
  }

  header a {
    text-decoration: none;
  }
}

@media (min-width:768px) {
  .header-container {
    min-height: 4.5em;
    position: relative;
  }

  .header-container .login {
    display: none;
  }

  .icon-list {
    display: none;
  }

  #sections li.lang {
    display: none;
  }

  .main-menu ul,
  .main-menu li {
    display: inline-block;
  }

  .main-menu li {
    margin-right: 1em;
  }

  .main-menu li:last-child {
    margin-right: 0;
  }

  .main-menu .change-lang a {
    margin-right: .25em;
  }

  .main-menu .login_btn a {
    font-size: .95em;
    border: 2px solid rgba(255,255,255,.3);
    padding: 6px 17px;
    -webkit-transition: border-color 200ms ease-in-out;
    transition: border-color 200ms ease-in-out;
  }

  .main-menu .login_btn a:hover {
    border-color: rgba(255,255,255,.5);
  }

  .btn {
    display: inline-block;
    line-height: 1em;
    padding: 1em;
  }
}


/* ... GENERAL FONTS ... */

html,
body {
  font-family: 'Lato', sans-serif;
  font-size: 100%;
  background: @white;
}

/* ... ANIMATIONS ... */

body a {
  transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -ms-transition: 0.5s all;
}

.hover-anim,
.hover-anim li {
  -webkit-transition: all 200ms ease-in;
  -ms-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
}

.total-fix {
  margin: 0 !important;
  padding: 0 !important;
}

/* ... TRANSFORMS ... */

.skew-right {
  -webkit-transform: skew(0deg, -3deg);
  -ms-transform: skew(0deg, -3deg);
  transform: skew(0deg, -3deg);
}

.skew-left {
  -webkit-transform: skew(0deg, 3deg);
  -ms-transform: skew(0deg, 3deg);
  transform: skew(0deg, 3deg);
}

/* ... to Fix Upplication Icons position ... */

i.icon {
  position: relative;
  top: 2px;
  font-weight: 100;
}

/* ... to CENTER Blocks ... */

.centered {
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}

/* ... to CENTER Images ... */

.centerImg img,
.center-img img {
  .centered;
}

/* ... to add BOX SHADOW ... */

.box-shadow {
  -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
  -ms-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
  -o-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
  box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
}

/* ... to add Shadow Hover Effect in images ... */

img.materialboxed:hover {
  .box-shadow;
  .anim(all, 250ms, ease-in-out);
}

/* ... MAIN HEADERS (SECTIONS) ... */

.headTitles,
h4.headTitles,
h2.headTitles {
  color: @darkest-lilac;
  font-family: "Raleway", sans-serif;
  font-size: 2em;
  font-weight: 500;
  line-height: 35px;
  margin: 1em 0;
  padding: 0.5em;

  span {
    color: @medium-lilac;
  }
}

@media all and (max-width: 480px) {
  .headTitles,
  h4.headTitles,
  h2.headTitles {
    font-size: 1.8em;
    margin: 0;
  }
}

h4:not(.head-terms).headTitles + p,
.plans-head p {
  color: @medium-lilac;
  line-height: 1em;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 30px;
  font-size: 1.2em;
}

.headTitles.noMargBot {
  margin-bottom: 0;
}

/* ... PADDING ... */

.sect100 {
  padding: 100px 0;
}

.padTop50 {
  padding-top: 50px;
}

.padTop30 {
  padding-top: 30px;
}

.padBot10 {
  padding-bottom: 10px;
}

.padBot30 {
  padding-bottom: 30px;
}

.padBot50 {
  padding-bottom: 50px;
}

/* ... MARGIN ... */

.margTop30 {
  margin-top: 30px;
}

.marBot50 {
  margin-bottom: 50px;
}

.marBot10 {
  margin-bottom: 10px;
}

.marBot100 {
  margin-bottom: 100px;
}

/* ... UPP MAIN BUTTON ... */

a.btn-upp,
button.btn-upp {
  background-color: @accept-btn;
  color: @white;
  border-radius: 0;
}

a.btn-upp:hover,
button.btn-upp:hover {
  background-color: @accept-btn-hover;
  color: @white;
}

/* ... to add Block styles... */

.block-btn {
  display: block;
  width: 100%;
  padding: 12px 20px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .02em;
}

/* ... FONT WEIGHTS ... */

.strong500 {
  font-weight: 500 !important;
}

/* ... BORDERS ... */

.display-none {
  display: none;
}

.border-bottom {
  border-bottom: 1px solid @bg-lilac-light;
}

/* ... BORDER DIV ... */

.spacer-border-grey {
  width: 100%;
  height: 1px;
  border-bottom: 1px solid @bg-lilac-light;
}


/* ... DIAGONAL BLOCK LAYOUT to Home & Microlandings views ... */

.dippah {
  position: relative;
  bottom: 47px;
  z-index: 100;
  width: 100%;
  height: 90px;
  background-color: white;
}

@media only screen and (max-width: 768px) {
  .dippah {
    display: none;
  }
}



// WE NEED MAKE THIS DEPRECATED:

.width-90 {
  width: 90%;
}