@import 'reset.css';

@primary_color_600: rgba(245, 245, 245, 1);
@primary_color_600_fade: rgba(25, 136, 111, 0.5);
@primary_color_400: #00AA8D;
@primary_color_200: #B4E5DD;

@secondary_color_600: rgba(25, 136, 111, 1);
@secondary_color_600_fade: rgba(25, 136, 111, 0.5);


.logo_l_mixin {
  background-position: 0 0;
  height: 165px;
  margin-left: -130px;
  margin-top: -82.5px;
  width: 260px;
}

.logo_s_mixin {
  background-position: -113px -212px;
  background-size: 374%;
  height: 85px;
  margin-left: -42.5px;
  margin-top: -42.5px;
  width: 85px;
}

.logo_xs_mixin {
  background-position: -98px -245px;
  background-size: 450%;
  height: 56px;
  margin-left: -28px;
  margin-top: -28px;
  width: 56px;
}



/************
 * Animation - Keyframes
 ************/
@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/************
 * body
 ************/
body {
  background-color: @primary_color_600;
  font-family: 'Raleway';

  &.transition-to-details, &.sidenav-open, &.openDetailsView {
    overflow: hidden;
  }

  base-view, ng-view {
    display: block;
    height: inherit;
  }

  &[view="details-view"] {
    overflow: hidden;
  }
}


/************
 * common-component-edits
 ************/
.md-button.md-icon-button {
  margin: 0;
}

md-menu-content {
  .md-button {
    img {
      height: auto;
      margin: auto 16px auto 0;
      width: 24px;
      vertical-align: middle;
    }
  }
}

md-bottom-sheet {
  padding-left: 0;
  padding-right: 0;

  md-list {
    padding: 10px 0;

    .md-button {
      img {
        height: auto;
        margin: auto 32px auto 0;
        width: 24px;
        vertical-align: middle;
      }
    }
  }
}

md-toolbar:not(.md-menu-toolbar) {
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12), 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
  background-color: @primary_color_400;
  height: 280px;
  overflow: hidden;
  position: fixed;
  top: 0;
  transform: transale3d(0,0,0);
  transition-timing: cubic-bezier(0.4, 0.0, 1, 1);
  width: 100%;
  z-index: 5;

  .scroll & {
    height: 58px;
    transition: height .3s cubic-bezier(0.4, 0.0, 0.2, 1);
    width: 100%;
  }
}


/************
 * base-view
 ************/
base-view {
  display: block;

  base-backdrop {
    background-color: rgba(0,0,0,.5);
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    transition: opacity, z-index, .3s cubic-bezier(0.4, 0.0, 0.2, 1);
    visibility: hidden;
    width: 100%;
    z-index: -1;

    .transition-to-details & {
      opacity: 1;
      visibility: visible;
      z-index: 500;
    }
  }

  .openDetailsView & {
    display: none;
  }
}

/************
 * main-view
 ************/
main-view {
  background-color: @primary_color_600;
  display: block;

  card-element {
    transform: transale3d(0,0,0);

    .transition-to-details &.card-selected {
      transform: scale(1.1);
      transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1);
      z-index: 550;

      .card-info {
        transition: opacity .3s cubic-bezier(0.4, 0.0, 0.2, 1);
        opacity: 0;
      }
    }
  }

  drawer-button {
    color: @primary_color_200;
    display: inline-block;
    padding: 17px;
  }

  search-button {
    color: @primary_color_200;
    display: inline-block;
    padding: 17px;
    right: 0;
    position: absolute;
  }

  #main-section {
    background-color: @primary_color_600;
    position: relative;
    top: 280px;
    transform: transale3d(0,0,0);
    transition: top .3s cubic-bezier(0.4, 0.0, 0.2, 1);

    .scroll & {
      top: 95px;
    }
  }

  logo-container {
    background-image: url('https://gstatic.com/angular/material-adaptive/pesto/logo_all.svg');
    background-repeat: no-repeat;
    background-position:0;
    background-size: 100%;
    display: inline-block;
    height: 200px;
    left: 50%;
    margin-left: -125px;
    margin-top: -85px;
    position: absolute;
    top: 50%;
    width: 250px;


    & > img {
      width: 100%;
    }
  }


  layout-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 15px auto 0 auto;
    width: 680px;

    card-element {
      &:nth-child(2n + 1) {
        margin-right: 1%;
      }
    }
  }

  card-element {
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 2px;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12), 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    display: inline-block;
    height: 270px;
    margin-bottom: 1%;
    position: relative;
    width: 49.5%;

    .card-button.md-button {
      height: 100%;
      line-height: inherit;
      margin: 0;
      padding: 0;
      text-align: start;
      width: 100%;
    }

    .card-info {
      align-items: flex-start;
      background-color: #fff;
      bottom: 0;
      display: flex;
      flex-direction: row;
      height: 87px;
      padding: 21px 0 0 21px;
      position: absolute;
      width: 100%;

      span {
        height: 36px;
        display: inline-block;
        width: 36px;

        img {
          height: 100%;
          opacity: 0.87;
          width: auto;
        }
      }

      .right-content {
        flex: 1;
        padding-left: 16px;
        position: relative;
      }

      p.title {
        color: rgba(0,0,0,.87);
        cursor: pointer;
        font-size: 24px;
        font-weight: 500;
        outline: none;
        text-decoration: none;
        text-transform: none;
        white-space: nowrap;
      }

      .author {
        color: rgba(0,0,0,.54);
        font-size: 13px;
        font-weight: 400;
        padding-top: 4px;
        text-transform: none;
      }
    }
  }
}

/************
 * sidenav
 ************/
md-backdrop.md-sidenav-backdrop {
  display: none;
  z-index: -1;
}

sidenav-backdrop {
  background-color: rgba(0, 0, 0, .5);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  visibility: hidden;
  width: 100%;
  z-index: -1;

  .sidenav-open & {
    visibility: visible;
    z-index: 10;
  }
}

main-view md-sidenav, main-view md-sidenav.md-locked-open {
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;

  md-toolbar:not(.md-menu-toolbar) {
    background-color: white;
    border-bottom: 1px solid rgba(0,0,0,.1);
    box-shadow: none;
  }

  .header {
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,.1);
    display: flex;
    flex-direction: column;
    margin: 0 20px;
    padding: 20px;

    .avatar-container {
      border: 2px solid @primary_color_400;
      border-radius: 50%;
      height: 90px;
      padding: 2px;
      position: relative;
      width: 90px;

      .image {
        background-image: url('https://www.gstatic.com/angular/material-adaptive/pesto/avatar.jpg');
        background-repeat: no-repeat;
        background-size: contain;
        border-radius: 50%;
        height: 100%;
        width: 100%;
      }
    }

    .contact-info {
      font-size: 14px;
      margin-top: 20px;
      text-align: center;

      .name {
        font-weight: 600;
      }

      .email {
        color: rgba(0,0,0,.5);
        padding-top: 5px;
      }
    }
  }

  .options {
    text-align: center;

    li {
      color: rgba(63, 63, 63, 1);
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
      outline: none;
      padding: 20px;

      &.selected {
        color: @primary_color_400;
      }

      &[disabled] {
        cursor: not-allowed;
        opacity: .5;
      }
    }
  }

  md-content {
    position: relative;
  }
}

md-sidenav.md-locked-open, md-sidenav.md-locked-open.md-closed, md-sidenav.md-locked-open.md-closed.md-sidenav-left, md-sidenav.md-locked-open.md-closed {
  display: none;

  .sidenav-open & {
    display: block;
  }
}

md-sidenav.md-locked-open {
  z-index: -1;
  visibility: hidden;

  md-toolbar:not(.md-menu-toolbar) {
    background-color: white;
  }

  .sidenav-open & {
    visibility: visible;
    z-index: 50;
  }
}

adaptive-controls {
  bottom: auto;
  margin: 10px auto 0;
  height: 60px;
  top: 195px;
  width: 100%;
  position: fixed;
  transform: transale3d(0,0,0);
  transition: top,bottom, .3s cubic-bezier(0.4, 0.0, 0.2, 1);
  z-index: 6;

  & > * {
    position: absolute;
    right: 6px;
  }

  .scroll & {
    bottom: 20px;
    top: auto;
  }
}

.md-button.md-fab, .md-button.md-fab:hover, .md-button.md-fab.md-focused, .md-button.md-fab:not([disabled]):hover {
  background-color: #EF5458;
  color: #fff;
  position: absolute;
}


/************
 * details-view
 ************/
details-view {
  md-icon {
    color: #fff;
  }

  .header {
    align-items: center;
    background: linear-gradient(to bottom, rgba(0,0,0,.4), transparent);
    color: white;
    display: flex;
    padding: 0 5px 0 5px;
    position: absolute;
    width: 100%;
    z-index: 2;

    .actions-right {

      & > * {
        margin: 0;
      }
    }

    .flex {
      flex: 1;
    }
  }

  #animate-card {
    visibility: hidden;

    &.animated {
      visibility: visible;
    }
  }

  .card-info {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    background-color: white;
    border-radius: 2px 2px 0 0;
    bottom: 0;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12), 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    display: inline-block;
    height: 50%;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 680px;
    min-height: 350px;
    padding: 0;
    position: absolute;
    right: 0;
    width: 80%;
    z-index: 2;

    .main-container {
      background-color: white;
      padding: 20px 20px 0 20px;
    }

    .main-info {
      display: flex;
      flex-direction: row;
      margin-top: 25px;

      & > span {
        height: 30px;
        display: inline-block;
        margin-right: 25px;
        width: 35px;

        img {
          height: 100%;
          opacity: 0.87;
          width: auto;
        }
      }

      .title {
        font-size: 34px;
        text-transform: none;
      }

      .descr {
        color: rgba(0,0,0,.5);
        font-size: 13px;
        line-height: 18px;
        margin: 15px 0;
        position: relative;
        text-align: left;
        text-transform: none;
        top: 10px;
      }
    }

    .ingredients {
      margin-top: 30px;

      ul li {
        margin: 20px 0;

        .lbs {
          color: @primary_color_400;
          font-size: 12px;
          height: 10px;
          margin-right: 8px;
          width: 40px;
        }

        .name {
          font-size: 14px;
          height: 10px;
          left: 15px;
          line-height: 25px;
          position: relative;
        }
      }
    }

    .editable {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }

    .editing {
      border: 1px solid rgba(0,0,0,.3);
      padding-left: 10px;
      padding-right: 60px;
    }

    adaptive-controls {
      position: absolute;
      right: 25px;
      top: -40px;
      width: 50px;
    }

  }

  .bg {
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }


  .openDetailsView & {
    display: block;
  }
}


/************
 * settings-view
 ************/
settings-view {
  background-color: @secondary_color_600;
  display: block;
  height: inherit;

  .header {
    align-items: center;
    color: white;
    display: flex;
    padding: 15px 5px 0 5px;
    position: absolute;
    width: 100%;
    z-index: 2;

    .title {
      font-size: 20px;
      left: 0;
      position: absolute;
      text-align: center;
      top: 24px;
      width: 100%;
      z-index: 1;
    }

    .flex {
      flex: 1;
    }

    .md-button {
      height: 40px;
      line-height: 40px;
      width: 45px;
      z-index: 5;

      md-icon {
        color: #fff;
        height: 32px;
        font-size: 32px;
        width: 32px;
      }
    }
  }

  .card-info {
    background-color: #fff;
    border-radius: 2px 2px 0 0;
    bottom: 0;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12), 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    display: inline-block;
    height: 87%;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 680px;
    min-height: 350px;
    padding: 20px 36px;
    position: absolute;
    right: 0;
    width: 80%;
    z-index: 2;

    p {
      color: #878787;
      font-size: 14px;

      &.active {
        color: @secondary_color_600;
        font-weight: 500;
      }
    }

    md-list-item .md-no-style {
      padding: 0;
    }

    .option-header {
      align-items: center;
      border-bottom: 1px solid rgba(0,0,0,.1);
      display: flex;
      height: 50px;
      margin-bottom: 20px;
      outline: none;

      p {
        color: rgba(0, 0, 0, .65);
        font-size: 16px;
        font-weight: 500;

        &.active {
          color: @secondary_color_600;
        }
      }

      md-icon {
        font-size: 32px;
        height: 32px;
        width: 32px;
      }
    }

    .option-item {
      margin-bottom: 25px;

      .user-info {
        align-items: center;
        display: flex;

        .avatar-container {
          border-radius: 50%;
          height: 40px;
          margin-right: 15px;
          position: relative;
          width: 40px;

          .image {
            background-image: url('https://www.gstatic.com/angular/material-adaptive/pesto/avatar.jpg');
            background-repeat: no-repeat;
            background-size: contain;
            border-radius: 50%;
            height: 100%;
            width: 100%;
          }
        }

        span {
          color: @secondary_color_600;
          font-size: 20px;
          font-weight: 500;
        }
      }

      md-list {
        margin-top: 15px;
      }
    }

    .action-buttons {
      margin-top: 35px;
      display: flex;
    }
  }
}

md-switch.md-checked .md-bar, md-switch.md-checked.md-focused .md-thumb:before, md-checkbox.md-checked.md-focused .md-container:before {
  background-color: @secondary_color_600_fade;
}

md-switch.md-checked .md-thumb, md-checkbox.md-checked .md-icon, .md-button.md-raised:not([disabled]), .md-button.md-primary.md-raised:not([disabled]):hover {
  background-color: @secondary_color_600;
}



/**
 * Media queries
 */

/*** Desktop queries ***/

/* Window XXLG - 1600px */
@media only screen
  and (min-width: 1600px) {

  main-view {
    md-toolbar:not(.md-menu-toolbar) {
      height: 240px;

      .scroll & {
        height: 120px;
      }
    }

    logo-container {
      .logo_l_mixin;

      .scroll & {
        .logo_s_mixin;
      }
    }

    layout-cards {
      margin-top: 0;
      width: 1170px;

      card-element {
        height: 300px;
        width: 32.5%;

        .card-info {
          height: 80px;
        }

        &:nth-child(2n + 1) {
          margin-right: 0;
        }

        &:nth-child(3n + 1), &:nth-child(3n + 2) {
          margin-right: 1%;
        }
      }
    }

    md-sidenav, md-sidenav.md-locked-open {
      min-width: 240px;
      width: 240px;
    }
  }

  settings-view {
    .header {
      .md-button {
        display: none;
      }
    }
  }
}

/* Window XLG - 1440px */
@media only screen
  and (max-width: 1599px)
  and (min-width: 1440px) {

  main-view {
    md-toolbar:not(.md-menu-toolbar) {
      height: 240px;

      .scroll & {
        height: 120px;
      }
    }

    logo-container {
      .logo_l_mixin;

      .scroll & {
        .logo_s_mixin;
      }
    }

    layout-cards {
      margin-top: 0;
      width: 1170px;

      card-element {
        height: 300px;
        width: 32.5%;

        .card-info {
          height: 80px;
        }

        &:nth-child(2n + 1) {
          margin-right: 0;
        }

        &:nth-child(3n + 1), &:nth-child(3n + 2) {
          margin-right: 1%;
        }
      }
    }

    md-sidenav, md-sidenav.md-locked-open {
      min-width: 240px;
      width: 240px;
    }
  }

  settings-view {
    .header {
      .md-button {
        display: none;
      }
    }
  }
}


/* Window LG - 1280px  */
@media only screen
  and (max-width: 1439px)
  and (min-width: 1280px) {

  main-view {
    md-toolbar:not(.md-menu-toolbar) {
      height: 240px;

      .scroll & {
        height: 120px;
      }
    }

    logo-container {
      .logo_l_mixin;

      .scroll & {
        .logo_s_mixin;
      }
    }

    layout-cards {
      margin-top: 0;
      width: 1170px;

      card-element {
        height: 300px;
        width: 32.5%;

        .card-info {
          height: 80px;
        }

        &:nth-child(2n + 1) {
          margin-right: 0;
        }

        &:nth-child(3n + 1), &:nth-child(3n + 2) {
          margin-right: 1%;
        }
      }
    }

    md-sidenav, md-sidenav.md-locked-open {
      min-width: 240px;
      width: 240px;
    }
  }

  settings-view {
    .header {
      .md-button {
        display: none;
      }
    }
  }
}


/* Window MED - 960px */
@media only screen
  and (max-width: 1023px)
  and (min-width: 960px) {

   main-view {
    md-toolbar:not(.md-menu-toolbar) {
      height: 240px;

      .scroll & {
        height: 120px;
      }
    }

    logo-container {
      .logo_l_mixin;

      .scroll & {
        .logo_s_mixin;
      }
    }

    #main-section {
      top: 240px;
    }

    adaptive-controls {
      top: 196px;
    }

    layout-cards {
      margin-top: 10px;
      width: 930px;

      card-element {
        height: 280px;
        width: 32.5%;

        .card-info {
          height: 80px;
        }

        &:nth-child(2n + 1) {
          margin-right: 0;
        }

        &:nth-child(3n + 1), &:nth-child(3n + 2) {
          margin-right: 1%;
        }
      }
    }

    md-sidenav, md-sidenav.md-locked-open {
      min-width: 300px;
      width: 300px;
    }
  }

  settings-view {
    .header {
      .md-button {
        display: none;
      }
    }
  }
}


/* Window SM - 840px */
@media only screen
  and (max-width: 959px)
  and (min-width: 840px) {

  main-view {
    md-toolbar:not(.md-menu-toolbar) {
      height: 240px;

      .scroll & {
        height: 120px;
      }
    }

    #main-section {
      top: 220px;
    }

    logo-container {
      .logo_l_mixin;

      .scroll & {
        .logo_s_mixin;
      }
    }

    layout-cards {
      margin-top: 35px;
      width: 810px;

      card-element {
        height: 350px;
        width: 49.5%;

        &:nth-child(2n + 2) {
          margin-right: 0;
        }
      }
    }

    md-sidenav, md-sidenav.md-locked-open {
      min-width: 300px;
      width: 300px;
    }
  }

  settings-view {
    .header {
      .md-button {
        display: none;
      }
    }
  }
}


/* Window XSM - 600px */
@media only screen
  and (max-width: 719px)
  and (min-width: 600px) {

  &[view="details-view"] {
    overflow: hidden;
  }

  md-toolbar:not(.md-menu-toolbar) {
    height: 240px;

    .scroll & {
      height: 120px;
    }
  }

  adaptive-controls {
    top: 196px;
  }

  main-view {
    logo-container {
      .logo_l_mixin;

      .scroll & {
        .logo_s_mixin;
      }
    }

    #main-section {
      top: 240px;
    }

    layout-cards {
      margin-top: 15px;
      width: 570px;

      card-element {
        height: 455px;
        margin-right: 0;
        width: 100%;


        &:nth-child(2n + 2) {
          margin-right: 0;
        }
      }
    }

    md-sidenav, md-sidenav.md-locked-open {
      min-width: 300px;
      width: 300px;
    }

  }


  details-view {
    .bg {
      background-attachment: inherit;
      background-position: 0 0;
      background-repeat: no-repeat;
      height: 360px;
    }

    .card-info {
      border-radius: initial;
      height: ~'calc(100% - 360px)';
      max-width: 100%;
      width: 100%;

      &.animated {
        -webkit-animation-duration: 0s;
        animation-duration: 0s;
      }
    }
  }

  settings-view {
    .header {
      padding: 13px 5px 14px 5px;

      .md-button {
        height: 36px;
        line-height: 20px;
        width: 46px;

        md-icon {
          height: 24px;
          font-size: 24px;
          width: 24px;
        }
      }
    }

    .card-info {
      border-radius: initial;
      height: ~'calc(100% - 63px)';
      padding: 0;
      max-width: 100%;
      width: 100%;

      .option-header {
        height: 60px;
      }

      .option-header, .option-content {
        padding: 0 20px;
      }

      .action-buttons {
        display: none;
      }
    }
  }
}


/* Window XS - 480px */
@media only screen
  and (max-width: 599px)
  and (min-width: 480px) {

  &[view="details-view"] {
    overflow: hidden;
  }

  adaptive-controls {
    bottom: 20px;
    top: auto;
  }

  md-toolbar:not(.md-menu-toolbar) {
    height: 120px;
  }

  main-view {
    logo-container {
      .logo_s_mixin;

      .scroll & {
        .logo_xs_mixin;
      }
    }

    #main-section {
      top: 120px;
    }

    layout-cards {
      margin-top: 16px;
      width: 450px;

      card-element {
        height: 380px;
        margin-bottom: 1.5%;
        margin-right: 0;
        width: 100%;

        &:nth-child(2n+1) {
          margin-right: 0;
        }
      }
    }

    md-sidenav, md-sidenav.md-locked-open {
      min-width: 300px;
      width: 300px;
    }
  }

  details-view {
    .bg {
      background-attachment: inherit;
      background-position: 0 0;
      background-repeat: no-repeat;
      height: 360px;
    }

    .card-info {
      border-radius: initial;
      height: ~'calc(100% - 360px)';
      max-width: 100%;
      width: 100%;

      &.animated {
        -webkit-animation-duration: 0s;
        animation-duration: 0s;
      }
    }
  }

  settings-view {
    .header {
      padding: 13px 5px 14px 5px;

      .md-button {
        height: 36px;
        line-height: 20px;
        width: 46px;

        md-icon {
          height: 24px;
          font-size: 24px;
          width: 24px;
        }
      }
    }

    .card-info {
      border-radius: initial;
      height: ~'calc(100% - 63px)';
      padding: 0;
      width: 100%;

      .option-header {
        height: 60px;
      }

      .option-header, .option-content {
        padding: 0 20px;
      }

      .action-buttons {
        display: none;
      }
    }
  }
}

@media screen
    and (max-width: 479px)
    and (min-width: 361px) {
  main-view {
    md-toolbar:not(.md-menu-toolbar) {
      height: 120px;
    }

    #main-section {
      top: 120px;
    }

    logo-container {
      .logo_s_mixin;

      .scroll & {
        .logo_xs_mixin;
      }
    }

    layout-cards {
      margin-top: 16px;
      width: 331px;

      card-element {
        height: 305px;
        margin-bottom: 16px;
        margin-right: 0;
        width: 100%;

        &:nth-child(2n+1) {
          margin-right: 0;
        }
      }
    }

    md-sidenav, md-sidenav.md-locked-open {
      min-width: 302px;
      width: 302px;
    }
  }

  adaptive-controls {
    bottom: 20px;
    top: auto;
  }

  md-toolbar:not(.md-menu-toolbar) {
    height: 120px;
  }

  details-view {
    .bg {
      background-attachment: inherit;
      background-position: 0 0;
      background-repeat: no-repeat;
      height: 360px;
    }

    .card-info {
      border-radius: initial;
      height: ~'calc(100% - 360px)';
      max-width: 100%;
      width: 100%;

      &.animated {
        -webkit-animation-duration: 0s;
        animation-duration: 0s;
      }
    }
  }

  settings-view {
    .header {
      padding: 13px 5px 14px 5px;

      .md-button {
        height: 36px;
        line-height: 20px;
        margin: 0;
        width: 36px;

        md-icon {
          height: 24px;
          font-size: 24px;
          width: 24px;
        }
      }
    }

    .card-info {
      border-radius: initial;
      height: ~'calc(100% - 63px)';
      padding: 0;
      width: 100%;

      .option-header {
        height: 60px;
      }

      .option-header, .option-content {
        padding: 0 16px;

        .md-button.md-icon-button {
          margin: 0;
        }
      }

      .action-buttons {
        display: none;
      }
    }
  }
}



/*** Mobile queries ***/

/* Tablet Landscape - 1024px */
@media only screen
  and (max-width: 1279px)
  and (min-width: 1024px) {

  &[view="details-view"] {
    overflow: hidden;
  }

  main-view {
    md-toolbar:not(.md-menu-toolbar) {
      height: 240px;

      .scroll & {
        height: 120px;
      }
    }

    logo-container {
      .logo_l_mixin;

      .scroll & {
        .logo_s_mixin;
      }
    }

    #main-section {
      top: 221px;
    }

    adaptive-controls {
      top: 196px;
    }

    layout-cards {
      margin-top: 35px;
      width: 994px;

      card-element {
        height: 295px;
        width: 32.5%;

        .card-info {
          height: 80px;
        }

        &:nth-child(2n + 1) {
          margin-right: 0;
        }

        &:nth-child(3n + 1), &:nth-child(3n + 2) {
          margin-right: 1%;
        }
      }
    }

    md-sidenav, md-sidenav.md-locked-open {
      min-width: 300px;
      width: 300px;
    }
  }

  settings-view {
    .header {
      .md-button {
        display: none;
      }
    }
  }
}


/* Tablet Portrait - 720px */
@media only screen
  and (max-width: 839px)
  and (min-width: 720px) {

  main-view {
    md-toolbar:not(.md-menu-toolbar) {
      height: 240px;

      .scroll & {
        height: 120px;
      }
    }

    #main-section {
      top: 240px;
    }

    logo-container {
      .logo_l_mixin;

      .scroll & {
        .logo_s_mixin;
      }
    }

    layout-cards {
      margin-top: 15px;
      width: 690px;

      card-element {
        height: 300px;
        width: 49.5%;

        &:nth-child(2n + 2) {
          margin-right: 0;
        }
      }
    }

    md-sidenav, md-sidenav.md-locked-open {
      min-width: 300px;
      width: 300px;
    }
  }

  settings-view {
    .header {
      .md-button {
        display: none;
      }
    }
  }
}


/* Handset Landscape - 600px */
@media only screen
  and (max-width: 600px)
  and (min-width: 0)
  and (orientation: landscape) {

  adaptive-controls {
    bottom: 35px;
    top: auto;
  }

  md-toolbar:not(.md-menu-toolbar) {
    height: 58px;
    transition: height .3s cubic-bezier(0.4, 0.0, 0.2, 1);
    width: 100%;

    .scroll & {
      height: 58px;
    }
  }

  main-view {
    logo-container {
      .logo_xs_mixin;

      .scroll & {
        .logo_xs_mixin;
      }
    }

    #main-section {
      top: 60px;
    }

    layout-cards {
      margin-top: 16px;
      width: 568px;

      card-element {
        height: 465px;
        margin-bottom: 1.5%;
        margin-right: 0;
        width: 100%;

        &:nth-child(2n+1) {
          margin-right: 0;
        }
      }
    }

  }


  details-view .card-info {
    box-shadow: none;
    height: 80px;
    min-height: 170px;
  }

  settings-view .card-info {
    box-shadow: none;
    min-height: 50px;
    height: ~'calc(100% - 70px)';
  }
}


/* Handset Portrait - 360px */
@media only screen
  and (max-width: 360px) {

  main-view {
    md-toolbar:not(.md-menu-toolbar) {
      height: 120px;
    }

    #main-section {
      top: 120px;
    }

    logo-container {
      .logo_s_mixin;

      .scroll & {
        .logo_xs_mixin;
      }
    }

    layout-cards {
      margin-top: 16px;
      width: 330px;

      card-element {
        height: 305px;
        margin-bottom: 16px;
        margin-right: 0;
        width: 100%;

        &:nth-child(2n+1) {
          margin-right: 0;
        }
      }
    }

    md-sidenav, md-sidenav.md-locked-open {
      min-width: 302px;
      width: 302px;
    }
  }

  adaptive-controls {
    bottom: 20px;
    top: auto;
  }

  md-toolbar:not(.md-menu-toolbar) {
    height: 120px;
  }

  details-view {
    .bg {
      background-attachment: inherit;
      background-position: 0 0;
      background-repeat: no-repeat;
      height: 360px;
    }

    .card-info {
      border-radius: initial;
      height: ~'calc(100% - 360px)';
      max-width: 100%;
      width: 100%;

      &.animated {
        -webkit-animation-duration: 0s;
        animation-duration: 0s;
      }
    }
  }

  settings-view {
    .header {
      padding: 13px 5px 14px 5px;

      .md-button {
        height: 36px;
        line-height: 20px;
        margin: 0;
        width: 36px;

        md-icon {
          height: 24px;
          font-size: 24px;
          width: 24px;
        }
      }
    }

    .card-info {
      border-radius: initial;
      height: ~'calc(100% - 63px)';
      overflow-y: auto;
      padding: 0;
      width: 100%;

      .option-header {
        height: 60px;
      }

      .option-header, .option-content {
        padding: 0 16px;

        .md-button.md-icon-button {
          margin: 0;
        }
      }

      .action-buttons {
        display: none;
      }
    }
  }
}

