@import "../mixins/mixins";
////////////////////////////////////////////////////////////////////// 
// Grid Containers
/////////////////////////////////////////////////////////////////////
section, header{width:100%; display:block; margin:0; padding:0;}
.site-width{width:100%; margin:0 auto; @include inline-block();}
.copy-width{display:block;}
.copy-inside{display:inline-block;}
.clearboth {clear:both;display:block;font-size:0;height:0;line-height:0;width:100%;}


////////////////////////////////////////////////////////////////////// 
// Common Styles
/////////////////////////////////////////////////////////////////////
* { @include box-sizing(border-box); }
.relative{position:relative;}
.error{color:red !important; }
.hide {display:none !important;}
.right{float:right !important;}
.left{float:left !important;}
.right{float:right !important;}
.mb0{margin-bottom:0 !important;}
.mr0{margin-right:0 !important;}
.ml1{margin-left:$spacer !important;}
.mr1{margin-right:$spacer !important;}
.h0{height:0 !important}
.hauto{height:auto !important}
.no-mp{padding:0 !important; margin:0 !important;}
.hide-tablet{@include breakpoint(tablet) { display:none !important; }}
.show-tablet{@include breakpoint(tablet) { display:block !important; }}
.hide-phone{@include breakpoint(phone) { display:none !important; }}
.show-phone{@include breakpoint(phone) { display:block !important; }}
.left-phone{@include breakpoint(phone) { float:left !important; }}
.DEV{background-color: rbga(0,0,0, 0.2) !important;}


.cover{background:center center no-repeat; @include background-size(cover);}
.contain{background:center center no-repeat; @include background-size(contain);}


.hide-e{@include breakpoint(epsilon) { display:none !important; }}
.hide-d{@include breakpoint(delta) { display:none !important; }}
.hide-g{@include breakpoint(gamma) { display:none !important; }}
.hide-b{@include breakpoint(beta) { display:none !important; }}
.hide-a{@include breakpoint(alpha) { display:none !important; }}

.show-e{@include breakpoint(epsilon) { display:block !important; }}
.show-d{@include breakpoint(delta) { display:block !important; }}
.show-g{@include breakpoint(gamma) { display:block !important; }}
.show-b{@include breakpoint(beta) { display:block !important; }}
.show-a{@include breakpoint(alpha) { display:block !important; }}


//text
.txt-c{text-align:center;}
.txt-r{text-align:right;}
.txt-l{text-align:left;}