/**
 * Fourth responsive css file
 * 480>
 * 414>
 * 360>
 *
 * iPhone 6+              414x736
 * iPhone 6               375x667
 * Most androids          360x640
 * iPhone 5               320x568
 * iPhone 4 and earlier   320x480
 */
 

/**
 * 480>
 * All standing phones
 * No min-width, everything is inherited down
 * .mobile-portrait elements are displayed
 */
@media all and (max-width: 479px) {
  
  .not-mobile-portrait {
    display: none;
  }
  .mobile-portrait {
    display: block;
  }
  
  /**
   * General styling (page.css)
   */
  #bottom {
    padding: 40px 20px 60px;
  }
  #footer {
    padding: 20px;
  }
  #footer .title {
    display: none;
  }
  #footer .title .fa {
    margin: 0;
  }
  .floats .form-item {
    width: auto;
    float: none;
    margin-left: 0;
  }
  .form-type-actions .form-item {
    display: block;
    margin: 0 0 10px;
  }
  .actions .btn {
    margin-left: 7px;
  }
  .popup-inner .form-name-cancel {
    display: none;
  }
  .box > .small,
  .box > .col:nth-child(n) {
    padding: 30px 20px;
  }
  .box2 > .header {
    padding: 20px 20px;
  }
  .box-top {
    padding: 0 0 15px;
  }
  .box-top h1 {
    font-size: 16px;
    line-height: 1.3;
  }
  .box-top h1 > :nth-child(n+2) {
    margin-top: 4px;
  }
  .box-top > .right {
    float: none;
    margin: 0;
    padding: 15px 0 0;
    clear: both;
  }
  .box-top > .right > * {
    margin: 0 15px 0 0;
  }
  
  /**
   * Front page
   */
  .page-index .top .inner {
    padding: 30px 20px;
  }
  .page-index .top .actions .btn {
    display: block;
    margin: 0 0 15px;
  }
  .page-index .top .actions .btn:last-child {
    margin-bottom: 0;
  }
  
  /**
   * Course user
   */
  .user-course .col-1 {
    padding: 20px;
  }
  .user-course .col-2 .detail:nth-child(n) {
    width: auto;
    float: none;
    border-right-width: 0;
    border-bottom-width: 1px;
  }
  .user-course .col-2 .detail:last-child {
    border-bottom-width: 0;
  }
  
  /**
   * Course study
   */
  .box-top .right .breaker {
    display: block;
    clear: both;
    float: none;
    margin: 0 0 15px;
  }
  .course-study h2 {
    padding-bottom: 30px;
  }
  .course-study .course-done {
    margin-bottom: 30px;
  }
  .course-study .chapter .details {
    padding: 30px 20px 30px 0;
  }
  .course-study-material .body .content {
    padding: 0 20px 30px;
  }
  .exam-wrap {
    padding: 0 20px 30px;
  }
  .course-study-material .pagination {
    margin: 0 20px;
  }
  .study-nav {
    width: 80%;
  }
  
  /**
   * Checkout
   */
  .cart-checkout .item .image {
    display: none;
  }
  .cart-checkout .item .title {
    padding-left: 0;
  }
  
  /**
   * Account
   */
  .user-settings .order-history .contents {
    display: none;
  }
  .order-popup .top .col {
    width: auto;
    float: none;
  }
  .order-popup .top .col-2 {
    margin-top: 10px;
  }
  
  /**
   * Webinar
   */
  .form-chat-message .form-name-text {
    width: 80%;
  }
  
  /**
   * Messages
   */
  .form-message-send .form-name-text {
    width: 80%;
  }
  .form-message-send .form-name-file-id {
    display: none;
  }
  
  /**
   * Order complete
   */
  .order-complete {
    padding: 50px 0 70px;
  }
  
}

/**
 * 414>
 * No min-width, everything is inherited down
 * Below iPhone6+, mainly for 375px and 360px phones
 */
@media all and (max-width: 413px) {
  
  /**
   * General styling (page.css)
   */
  #logo {
    max-width: 55%;
  }
  .support .top .title {
    font-size: 32px;
  }
  .select-custom-options {
    max-width: 100%;
  }
  
  /**
   * Course item
   */
  .course-item .actions .breaker {
    display: block;
    margin-bottom: 15px;
  }
  .course-item .actions .breaker + .btn {
    margin-left: 0;
  }
  
  /**
   * Course user
   */
  .user-course .actions .breaker {
    display: block;
    margin-bottom: 15px;
  }
  
  /**
   * Course study
   */
  .course-study-material .pagination {
    text-align: center;
  }
  .course-study-material .pagination .breaker {
    display: block;
  }
  .course-study-material .pagination .btn {
    float: none;
  }
  .course-study-material .pagination .btn ~ .btn {
    margin-top: 10px;
  }
  
  /**
   * Order complete
   */
  .order-complete .actions .breaker {
    display: block;
    margin-bottom: 15px;
  }
  .order-complete .actions .breaker + .btn {
    margin-left: 0;
  }
  .helper .bubble {
    margin-left: 10px;
  }
  
}

/**
 * 360>
 * No min-width, everything is inherited down
 * Mainly for the smallest (320px) phones
 */
@media all and (max-width: 359px) {
  
  /**
   * General styling (page.css)
   */
  #logo {
    max-width: 50%;
  }
  a.btn,
  .btn {
    padding: 0 20px;
    min-width: 120px;
  }
  a.btn-text,
  .btn-text {
    padding: 0;
    min-width: 0;
  }
  .cart-message .message {
    width: 236px;
  }
  .msg-show {
    animation: 
      cartMessageWidthSmall 3.3s 0.7s cubic-bezier(0.7,0,0.3,1) both,
      jelly 0.7s linear forwards,
      jelly 0.7s 4s linear reverse forwards;
  }
    
  /**
   * Checkout
   */
  .form-order-checkout .form-name-payment-service .radio-label .logo {
    clear: both;
    float: left;
    margin-left: 52px;
  }
  
  /**
   * Webinar
   */
  .chat-messages {
    height: 180px;
  }
  .form-chat-message .form-name-text {
    width: 75%;
  }
  
  /**
   * Messages
   */
  .messages #thread .items {
    max-height: 250px;
  }
  .form-message-send .form-name-text {
    width: 75%;
  }
  
  /**
   * Order complete
   */
  .helper {
    margin: 0 0 0 50px;
  }
  
}