/* Base - Misc
------------------------------------------------------- */

/* Clearfix
------------------------------------------------------- */
.cf {}
.cf:before,
.cf:after {
  content: " ";
  display: table
}
.cf:after { clear: both }

// bullet-proof clearfix option when needed
.cfx { 
	border: none; 
	border: 0; 
	height: 0px; 
	max-height: 0px; 
	font-size: 0px; 
	line-height: 0px; 
	clear: both; 
}
/* 
Form select elements (drop-downs) don't respect margin settings, 
and are resistant to display setting changes, so we force-clear it, and add a bottom margin
*/
.cfxmb { 
  @extend .cfx; 
  margin-bottom: $cfxmb-margin-bottom; 
}

/* Animation 
------------------------------------------------------- */

.animated {
  -webkit-animation-duration: .4s;
  animation-duration: .4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

/* Position 
------------------------------------------------------- */

.hide { display: none !important; }

.inline       { display: inline; }
.block        { display: block; }
.inline-block { display: inline-block; }

.overflow-hidden { overflow: hidden; }
.overflow-scroll { overflow: scroll; }

.fleft  { float: left; }
.fright { float: right; }

.fit { max-width: 100%; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }

.top-0    { top: 0; }
.right-0  { right: 0; }
.bottom-0 { bottom: 0; }
.left-0   { left: 0; }

.z1 { z-index: 1; }
.z2 { z-index: 2; }
.z3 { z-index: 3; }
.z4 { z-index: 4; }

// This never works:
.absolute-center {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: table;
}

// Center content horizontally
.h-center-holder {
  width: 100% !important;
  text-align: center !important;
}
.h-center-content {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* White Space
------------------------------------------------------- */

.m0  { margin:        0; }
.mt0 { margin-top:    0; }
.mr0 { margin-right:  0; }
.mb0 { margin-bottom: 0; }
.ml0 { margin-left:   0; }

.m1  { margin:        1rem; }
.mt1 { margin-top:    1rem; }
.mr1 { margin-right:  1rem; }
.mb1 { margin-bottom: 1rem; }
.ml1 { margin-left:   1rem; }

.m2  { margin:        2rem; }
.mt2 { margin-top:    2rem; }
.mr2 { margin-right:  2rem; }
.mb2 { margin-bottom: 2rem; }
.ml2 { margin-left:   2rem; }

.m3  { margin:        3rem; }
.mt3 { margin-top:    3rem; }
.mr3 { margin-right:  3rem; }
.mb3 { margin-bottom: 3rem; }
.ml3 { margin-left:   3rem; }

.m4  { margin:        4rem; }
.mt4 { margin-top:    4rem; }
.mr4 { margin-right:  4rem; }
.mb4 { margin-bottom: 4rem; }
.ml4 { margin-left:   4rem; }

.p0  { margin:        0rem; }
.pt0 { margin-top:    0rem; }
.pr0 { margin-right:  0rem; }
.pb0 { margin-bottom: 0rem; }
.pl0 { margin-left:   0rem; }

.p1  { margin:        1rem; }
.pt1 { margin-top:    1rem; }
.pr1 { margin-right:  1rem; }
.pb1 { margin-bottom: 1rem; }
.pl1 { margin-left:   1rem; }

.p2  { margin:        2rem; }
.pt2 { margin-top:    2rem; }
.pr2 { margin-right:  2rem; }
.pb2 { margin-bottom: 2rem; }
.pl2 { margin-left:   2rem; }

.p3  { margin:        3rem; }
.pt3 { margin-top:    3rem; }
.pr3 { margin-right:  3rem; }
.pb3 { margin-bottom: 3rem; }
.pl3 { margin-left:   3rem; }

.p4  { margin:        4rem; }
.pt4 { margin-top:    4rem; }
.pr4 { margin-right:  4rem; }
.pb4 { margin-bottom: 4rem; }
.pl4 { margin-left:   4rem; }