/*
=========================================================
04 GRID
=========================================================
*/

*,
*:after,
*:before {
	margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

// Media queries

// Usage sample
// @include breakpoint(large) { background-color: red; }
// @include breakpoint(medium) { background-color: black; }
// @include breakpoint(small) { background-color: yellow; }
// @include breakpoint(xsmall) { background-color: green; }

@mixin breakpoint($point) {

  @if $point == large {
    @media #{$breakpoint-large} { @content; }
  }
  @else if $point == medium {
    @media #{$breakpoint-medium} { @content; }
  }
  @else if $point == small {
    @media #{$breakpoint-small}  { @content; }
  }
  @else if $point == xsmall {
    @media #{$breakpoint-xsmall}  { @content; }
  }
}    

.#{$p}wrapper:after,
.#{$p}row:after {
      content: "";
      display: table;
      clear: both; 
}    

[class*='vf-col'] {
    float: left;
    width: 100%;
    padding: $column-padding;
    min-height: 1px; 
}   

.#{$p}row {
	max-width: $row-width;
	margin: 0 auto;
}

.#{$p}wrapper {
	max-width: $grid-width;
	margin: 0 auto;
}

.#{$p}wrapper .#{$p}wrapper {
	padding: 0px;
	clear: both;
}

.#{$p}wrapper-full {
	width: $grid-width-full;
	margin: 0;
	overflow: hidden;
}

.#{$p}row-full {
	width: $grid-width-full;
	padding: 0 $wrapper-padding 0 $wrapper-padding;
	overflow: hidden;
}

.#{$p}custom-padding {
	padding-left: 1px !important;
	padding-right: 1px !important;
}

@for $i from 1 through $grid-columns {
	.#{$p}col-#{$i} {
		width: 100% / $grid-columns * $i;
	}
}

@include breakpoint(medium) { 
	@for $i from 1 through $grid-columns {
	.#{$p}col-#{$i}-md {
		width: 100% / $grid-columns * $i;
		}
	}
 }

 @include breakpoint(small) { 
	@for $i from 1 through $grid-columns {
	.#{$p}col-#{$i}-sm {
		width: 100% / $grid-columns * $i;
		}
	}
 }

 @include breakpoint(xsmall) { 

 	.#{$p}wrapper {
 		padding: 0 #{$wrapper-padding / 2} 0 #{$wrapper-padding / 2};
 	}

	@for $i from 1 through $grid-columns {
	.#{$p}col-#{$i}-xs {
		width: 100% / $grid-columns * $i;
		}
	}
 }

 .#{$p}row-center {
 	text-align: center;
 }

 .#{$p}center {
 	display: inline-block;
 	float: none;
 	margin: 0 auto;
 }

.#{$p}fixed {
	position: fixed;
	width: 200px;
	margin-top: 40px;
}

.#{$p}fixed-main {
	padding-left: 220px;
}

.#{$p}clearing:after {
	content: " ";
	width: 100%;
	float: left;
	clear: left;
	height: 1px;
	margin-top: -1px;
}

div.vf-highlight {
	width: 100%;
	background-color: #7a7eed;
	padding: 20px;
	display: block;
}