/* responsive portrait tablet */
@media (min-width: @responsive_p_tablet_min) and (max-width: @responsive_p_tablet_max) {





  /*  ----------------------------------------------------------------------------
      container
  */
  .td-container {
    width: 756px;
  }


  /*  ----------------------------------------------------------------------------
    main grid - the grid in grid is procentual except for grid in grid td-col-1 that is defined bellow

    'column_padding_left' => 17,
    'column_padding_right' => 16,
  */

  .td-pb-span1 {
    width: 63px;
  }
  .td-pb-span2 {
    width: 126px;
  }
  .td-pb-span3 {
    width: 189px;
  }
  .td-pb-span4 { // td-1-col
    width: 252px;
  }
  .td-pb-span5 {
    width: 315px;
  }
  .td-pb-span6 {
    width: 378px;
  }
  .td-pb-span7 {
    width: 441px;
  }
  .td-pb-span8 { // td-2-col
    width: 504px;

    .td-pb-row {
      width: 504px;
    }

    .td-pb-row div.td-pb-span6 { /* grid in grid td-col-1 */
      width: 252px;
    }
  }
  .td-pb-span9 {
    width: 567px;
  }
  .td-pb-span10 {
    width: 630px;
  }
  .td-pb-span11 {
    width: 693px;
  }
  .td-pb-span12 { // td-3-col
    width: 756px;
  }




  /*  ----------------------------------------------------------------------------
       black edition cells
  */

  // td-1-col - with background - span 8 -> span 6 (when it's in a column + sidebar layout)
  .td-pb-span8 .td-pb-span6 .td-pb-full-cell {
    width: 253px;
  }

  // widget in template sidebar (! the selector does not work for the widget in widgetized column in visual composer !)
  .td-main-sidebar .td-pb-full-cell {
    width: 253px;
  }


  .td-container-border > .td-pb-row {

    // td-1-col - with background - root
    .td-pb-span4 > * > .td-pb-full-cell {
      width: 253px;
    }

    // td-2-col - with background - root
    .td-pb-span8 > * > .td-pb-full-cell {
      width: 505px;
    }

    // td-3-col - with background - root
    .td-pb-span12 > * > .td-pb-full-cell {
      width: 757px;
    }
  }



  /*  ----------------------------------------------------------------------------
       blocks grid
  */



  /* full row (used when the block is on td-1-col ) */
  .td-block-span12 {
    padding-left: 17px;
    padding-right: 16px;
  }


  /* half - used when the block is on td-2-col */
  .td-block-span6 {
    width: 251px; // td-1-col width - 1
    padding-left: 17px;
    padding-right: 16px;
  }

  .td-block-row .td-block-span6:first-child {
    width: 252px; // td-1-col width
    padding-right: 17px;
  }


  /* 1/3 - used when the block is on td-3-col */
  .td-block-span4 {
    width: 252px; // td-1-col width
    padding-left: 17px;
    padding-right: 17px;
  }

  .td-block-row .td-block-span4:last-child {
    width: 251px; // td-1-col width - 1
    padding-right: 16px;
  }

}





/* responsive portrait phone */
@media (max-width: @responsive_p_phone_max) {

  /* container */
  .td-container {
    width: 100%;
  }

  .td-pb-row {
    width: 100% !important;
  }

  //disable the span floats
  .td-pb-row {
    .td-pb-span1,
    .td-pb-span2,
    .td-pb-span3,
    .td-pb-span4,
    .td-pb-span5,
    .td-pb-span6,
    .td-pb-span7,
    .td-pb-span8,
    .td-pb-span9,
    .td-pb-span10,
    .td-pb-span11,
    .td-pb-span12 {
      float: none;
      width: 100% !important;
      margin-bottom: 0px !important;
      padding-bottom: 0px;

      border-left: none; //remove the left border on mobiles
    }
  }

  //disable the span floats in blocks
  .td-block-span4,
  .td-block-span6,
  .td-block-span12 {
    float: none;
    width: 100% !important;
    margin-bottom: 0px !important;
    padding-bottom: 0px;
    padding-left: 10px;
    padding-right: 10px !important;
  }


  //fix full width cells ( black edition )
  .td-pb-full-cell {
    width: 100% !important;
    left:0px !important;
  }


  .td-container-border&:after {
    display: none;
  }


}