/**
 * Profound Grid
 * 
 * Built in Sass (SCSS) this responsive/adaptive grid supports both fixed and fluid layouts, 
 * relative and fixed gutters, as well as your choice of semantic markup or generic '.grid-x' classes.
 * 
 * The biggest difference to other grid systems is the use of negative margins for column
 * placements, avoiding the subpixel rounding issues that usually break/uglify fluid layouts
 * in some browsers.
 * 
 * Nested columns are supported too, without having to reset the grid on each level. 
 *
 * Credits/Inspiration:
 * -------------------
 * Semantic Grid: http://www.semantic.gs
 * Susy: http://susy.oddbird.net
 * Negative Grid: http://chrisplaneta.com/freebies/negativegrid-fluid-css-grid-by-chris-planeta/
 *
 * @author Profound Creative Studio
 * @url http://www.profoundgrid.com
 * @url http://www.weareprofound.com 
 */
/**
 * Clearfix
 */
/**
 * Legacy Clearfix
 */
/**
 * Establish the grid-containing element.
 */
/**
 * Align an element to the grid.
 */
/**
 * Apply to any column to make it the last one of the current row.
 */
html {
  overflow-x: hidden; }

.col-left {
  margin-bottom: 30px; }

#phone_image {
  width: 250px;
  position: absolute;
  left: 0;
  top: 0; }

#phone_wrapper, #text_wrapper {
  position: relative;
  display: inline-block;
  margin-bottom: 10px; }

#phone_wrapper {
  width: 250px; }

#text_wrapper {
  vertical-align: top;
  width: 100%; }
  #text_wrapper h3 {
    line-height: 32px;
    font-size: 20px;
    font-weight: 300; }

#slick {
  margin-top: 32px;
  margin-left: 30px;
  background: transparent; }
  #slick img {
    width: 190px; }

.slick-slider {
  margin-bottom: 0;
  background: transparent; }

.slick-prev {
  left: 0; }

.slick-next {
  right: 0; }

.slick-prev, .slick-next {
  z-index: 1001; }
  .slick-prev:before, .slick-next:before {
    color: #666666; }
  .slick-prev:hover:before, .slick-next:hover:before {
    color: #2D2D2D; }

.slick-dots {
  bottom: -85px;
  margin-left: -20px; }

@media (min-width: 450px) {
  #slick_text {
    margin-top: 155px; }

  .col-left {
    float: left;
    margin-right: -100%;
    width: 21.25%; }

  .col-right {
    float: left;
    margin-right: -100%;
    margin-left: 280px;
    width: calc(100% - 250px);
    box-sizing: border-box; } }
@media (min-width: 600px) {
  #phone_image, #phone_wrapper {
    width: 350px; }

  #phone_wrapper {
    margin-bottom: 30px; }

  #slick {
    margin-top: 47px;
    margin-left: 42px; }
    #slick img {
      width: 266px; }

  #slick_text {
    margin-top: 225px; }

  .col-right {
    margin-left: 380px;
    width: calc(100% - 350px); } }

/*# sourceMappingURL=phone.css.map */