/**
 * SkyPlanner - 
 * CSS Framework for spcaing (maring, padding)
 * @author 		Fernando Gomez
 * @created 	8/25/2016
 * @updated 	8/25/2016 by Fernando Gomez
 */
/* Text */
.sp-txt-left {
	text-align: left;
}

.sp-txt-center {
	text-align: center;
}

.sp-txt-middle {
	vertical-align: middle;
}

.sp-txt-right {
	text-align: right;
}

.sp-txt-all-caps {
	text-transform: uppercase;
}

.sp-txt-reset-caps {
	text-transform: initial;
}

.sp-txt-no-caps {
	text-transform: lowercase;
}

.sp-txt-decor-none {
	text-decoration: none;
}

.sp-txt-underlined,
.sp-txt-hover-underlined:hover {
	text-decoration: underline;
}

.sp-txt-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

.sp-txt-no-wrap {
	white-space: nowrap;
}

.sp-txt-break-word {
	word-break: break-all;
}

/* Clear line-height */
.sp-clear-line-height {
	line-height: 0;
}

.sp-line-height-sm {
	line-height: 70%;
}

.sp-line-height-lg {
	line-height: 200%;
}

/* Vertical align */
.sp-align-top {
	vertical-align: top;
}

.sp-align-middle {
	vertical-align: middle;
}

.sp-align-bottom {
	vertical-align: bottom;
}

/* Letter spacing */
.sp-txt-space-none {
	letter-spacing: 0;
}

.sp-txt-space-xxx-sm {
	letter-spacing: 0.5px;
}

.sp-txt-space-xx-sm {
	letter-spacing: 1px;
}

.sp-txt-space-x-sm {
	letter-spacing: 2px;
}

.sp-txt-space-sm {
	letter-spacing: 3px;
}

.sp-txt-space-md {
	letter-spacing: 4px;
}

.sp-txt-space-lg {
	letter-spacing: 8px;
}

.sp-txt-space-x-lg {
	letter-spacing: 10px;
}

.sp-txt-space-xx-lg {
	letter-spacing: 14px;
}

/* Background */
.sp-bck-none {
	background: none;
}

.sp-bck-repeat {
	background-repeat: all;
}

.sp-bck-repeat-x {
	background-repeat: repeat-x;
}

.sp-bck-repeat-y {
	background-repeat: repeat-y;
}

.sp-bck-no-repeat {
	background-repeat: no-repeat;
}

.sp-bck-hor-left {
	background-position-x: left;
}

.sp-bck-hor-center {
	background-position-x: center;
}

.sp-bck-hor-right {
	background-position-x: right;
}

.sp-bck-vert-top {
	background-position-y: top;
}

.sp-bck-vert-center {
	background-position-y: center;
}

.sp-bck-vert-bottom {
	background-position-y: bottom;
}

.sp-bck-center {
	background-position: center;
}

.sp-bck-cover {
	background-size: cover;
}

.sp-bck-contain {
	background-size: contain;	
}

.sp-bck-fixed {
	background-attachment: fixed;
}

/* Border */
.sp-border-none {
	border: none;
}

/* Margin */
/* -Left */
.sp-m-none,
.sp-m-left-none,
.sp-m-hor-none {
	margin-left: 0;
}

.sp-m-xxx-sm,
.sp-m-left-xxx-sm,
.sp-m-hor-xxx-sm {
	margin-left: 2px;
}

.sp-m-xx-sm,
.sp-m-left-xx-sm,
.sp-m-hor-xx-sm {
	margin-left: 4px;
}

.sp-m-x-sm,
.sp-m-left-x-sm,
.sp-m-hor-x-sm {
	margin-left: 8px;
}

.sp-m-sm,
.sp-m-left-sm,
.sp-m-hor-sm {
	margin-left: 12px;
}

.sp-m-md,
.sp-m-left-md,
.sp-m-hor-md {
	margin-left: 16px;
}

.sp-m-lg,
.sp-m-left-lg,
.sp-m-hor-lg {
	margin-left: 24px;
}

.sp-m-x-lg,
.sp-m-left-x-lg,
.sp-m-hor-x-lg {
	margin-left: 32px;
}

.sp-m-xx-lg, 
.sp-m-left-xx-lg,
.sp-m-hor-xx-lg {
	margin-left: 48px;
}

/* -right */
.sp-m-none,
.sp-m-right-none,
.sp-m-hor-none {
	margin-right: 0;
}

.sp-m-xxx-sm,
.sp-m-right-xxx-sm,
.sp-m-hor-xxx-sm {
	margin-right: 2px;
}

.sp-m-xx-sm,
.sp-m-right-xx-sm,
.sp-m-hor-xx-sm {
	margin-right: 4px;
}

.sp-m-x-sm,
.sp-m-right-x-sm,
.sp-m-hor-x-sm {
	margin-right: 8px;
}

.sp-m-sm,
.sp-m-right-sm,
.sp-m-hor-sm {
	margin-right: 12px;
}

.sp-m-md,
.sp-m-right-md,
.sp-m-hor-md {
	margin-right: 16px;
}

.sp-m-lg,
.sp-m-right-lg,
.sp-m-hor-lg {
	margin-right: 24px;
}

.sp-m-x-lg,
.sp-m-right-x-lg,
.sp-m-hor-x-lg {
	margin-right: 32px;
}

.sp-m-xx-lg, 
.sp-m-right-xx-lg,
.sp-m-hor-xx-lg {
	margin-right: 48px;
}

/* -top */
.sp-m-none,
.sp-m-top-none,
.sp-m-vert-none {
	margin-top: 0;
}

.sp-m-xxx-sm,
.sp-m-top-xxx-sm,
.sp-m-vert-xxx-sm {
	margin-top: 2px;
}

.sp-m-xx-sm,
.sp-m-top-xx-sm,
.sp-m-vert-xx-sm {
	margin-top: 4px;
}

.sp-m-x-sm,
.sp-m-top-x-sm,
.sp-m-vert-x-sm {
	margin-top: 8px;
}

.sp-m-sm,
.sp-m-top-sm,
.sp-m-vert-sm {
	margin-top: 12px;
}

.sp-m-md,
.sp-m-top-md,
.sp-m-vert-md {
	margin-top: 16px;
}

.sp-m-lg,
.sp-m-top-lg,
.sp-m-vert-lg {
	margin-top: 24px;
}

.sp-m-x-lg,
.sp-m-top-x-lg,
.sp-m-vert-x-lg {
	margin-top: 32px;
}

.sp-m-xx-lg, 
.sp-m-top-xx-lg,
.sp-m-vert-xx-lg {
	margin-top: 48px;
}

/* -bottom */
.sp-m-none,
.sp-m-bottom-none,
.sp-m-vert-none {
	margin-bottom: 0;
}

.sp-m-xxx-sm,
.sp-m-bottom-xxx-sm,
.sp-m-vert-xxx-sm {
	margin-bottom: 2px;
}

.sp-m-xx-sm,
.sp-m-bottom-xx-sm,
.sp-m-vert-xx-sm {
	margin-bottom: 4px;
}

.sp-m-x-sm,
.sp-m-bottom-x-sm,
.sp-m-vert-x-sm {
	margin-bottom: 8px;
}

.sp-m-sm,
.sp-m-bottom-sm,
.sp-m-vert-sm {
	margin-bottom: 12px;
}

.sp-m-md,
.sp-m-bottom-md,
.sp-m-vert-md {
	margin-bottom: 16px;
}

.sp-m-lg,
.sp-m-bottom-lg,
.sp-m-vert-lg {
	margin-bottom: 24px;
}

.sp-m-x-lg,
.sp-m-bottom-x-lg,
.sp-m-vert-x-lg {
	margin-bottom: 32px;
}

.sp-m-xx-lg, 
.sp-m-bottom-xx-lg,
.sp-m-vert-xx-lg {
	margin-bottom: 48px;
}

/* Padding */
/* -Left */
.sp-p-none,
.sp-p-left-none,
.sp-p-hor-none {
	padding-left: 0;
}

.sp-p-xxx-sm,
.sp-p-left-xxx-sm,
.sp-p-hor-xxx-sm {
	padding-left: 2px;
}

.sp-p-xx-sm,
.sp-p-left-xx-sm,
.sp-p-hor-xx-sm {
	padding-left: 4px;
}

.sp-p-x-sm,
.sp-p-left-x-sm,
.sp-p-hor-x-sm {
	padding-left: 8px;
}

.sp-p-sm,
.sp-p-left-sm,
.sp-p-hor-sm {
	padding-left: 12px;
}

.sp-p-md,
.sp-p-left-md,
.sp-p-hor-md {
	padding-left: 16px;
}

.sp-p-lg,
.sp-p-left-lg,
.sp-p-hor-lg {
	padding-left: 24px;
}

.sp-p-x-lg,
.sp-p-left-x-lg,
.sp-p-hor-x-lg {
	padding-left: 32px;
}

.sp-p-xx-lg, 
.sp-p-left-xx-lg,
.sp-p-hor-xx-lg {
	padding-left: 48px;
}

/* -right */
.sp-p-none,
.sp-p-right-none,
.sp-p-hor-none {
	padding-right: 0;
}

.sp-p-xxx-sm,
.sp-p-right-xxx-sm,
.sp-p-hor-xxx-sm {
	padding-right: 2px;
}

.sp-p-xx-sm,
.sp-p-right-xx-sm,
.sp-p-hor-xx-sm {
	padding-right: 4px;
}

.sp-p-x-sm,
.sp-p-right-x-sm,
.sp-p-hor-x-sm {
	padding-right: 8px;
}

.sp-p-sm,
.sp-p-right-sm,
.sp-p-hor-sm {
	padding-right: 12px;
}

.sp-p-md,
.sp-p-right-md,
.sp-p-hor-md {
	padding-right: 16px;
}

.sp-p-lg,
.sp-p-right-lg,
.sp-p-hor-lg {
	padding-right: 24px;
}

.sp-p-x-lg,
.sp-p-right-x-lg,
.sp-p-hor-x-lg {
	padding-right: 32px;
}

.sp-p-xx-lg, 
.sp-p-right-xx-lg,
.sp-p-hor-xx-lg {
	padding-right: 48px;
}

/* -top */
.sp-p-none,
.sp-p-top-none,
.sp-p-vert-none {
	padding-top: 0;
}

.sp-p-xxx-sm,
.sp-p-top-xxx-sm,
.sp-p-vert-xxx-sm {
	padding-top: 2px;
}

.sp-p-xx-sm,
.sp-p-top-xx-sm,
.sp-p-vert-xx-sm {
	padding-top: 4px;
}

.sp-p-x-sm,
.sp-p-top-x-sm,
.sp-p-vert-x-sm {
	padding-top: 8px;
}

.sp-p-sm,
.sp-p-top-sm,
.sp-p-vert-sm {
	padding-top: 12px;
}

.sp-p-md,
.sp-p-top-md,
.sp-p-vert-md {
	padding-top: 16px;
}

.sp-p-lg,
.sp-p-top-lg,
.sp-p-vert-lg {
	padding-top: 24px;
}

.sp-p-x-lg,
.sp-p-top-x-lg,
.sp-p-vert-x-lg {
	padding-top: 32px;
}

.sp-p-xx-lg, 
.sp-p-top-xx-lg,
.sp-p-vert-xx-lg {
	padding-top: 48px;
}

/* -bottom */
.sp-p-none,
.sp-p-bottom-none,
.sp-p-vert-none {
	padding-bottom: 0;
}

.sp-p-xxx-sm,
.sp-p-bottom-xxx-sm,
.sp-p-vert-xxx-sm {
	padding-bottom: 2px;
}

.sp-p-xx-sm,
.sp-p-bottom-xx-sm,
.sp-p-vert-xx-sm {
	padding-bottom: 4px;
}

.sp-p-x-sm,
.sp-p-bottom-x-sm,
.sp-p-vert-x-sm {
	padding-bottom: 8px;
}

.sp-p-sm,
.sp-p-bottom-sm,
.sp-p-vert-sm {
	padding-bottom: 12px;
}

.sp-p-md,
.sp-p-bottom-md,
.sp-p-vert-md {
	padding-bottom: 16px;
}

.sp-p-lg,
.sp-p-bottom-lg,
.sp-p-vert-lg {
	padding-bottom: 24px;
}

.sp-p-x-lg,
.sp-p-bottom-x-lg,
.sp-p-vert-x-lg {
	padding-bottom: 32px;
}

.sp-p-xx-lg, 
.sp-p-bottom-xx-lg,
.sp-p-vert-xx-lg {
	padding-bottom: 48px;
}

/* Positioning */
.sp-static {
	position: static;
}

.sp-relative {
	position: relative;
}

.sp-absolute {
	position: absolute;
}

.sp-fixed {
	position: fixed;
}

/* Float */
.sp-float-left {
	float: left;
}

.sp-float-right {
	float: right;
}

.sp-float-none {
	float: none;
}

.sp-clear-left {
	clear: left;
}

.sp-clear-right {
	clear: right;
}

.sp-clear-both {
	clear: both;
}

/* Display */
.sp-block {
	display: block;
}

.sp-inline {
	display: inline;
}

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

.sp-hide {
	display: none;
}

.sp-visible,
.sp-hover-visible:hover {
	visibility: visible;
}

.sp-invisible,
.sp-hover-invisible:hover {
	visibility: hidden;
}

/* Overflow (scroll bars) */
.sp-overflow-hidden {
	overflow: hidden;
}

.sp-overflow-visible {
	overflow: visible;
}

.sp-overflow-auto {
	overflow: auto;
}

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

.sp-overflow-x-hidden {
	overflow-x: hidden;
}

.sp-overflow-x-visible {
	overflow-x: visible;
}

.sp-overflow-x-auto {
	overflow-x: auto;
}

.sp-overflow-x-scroll {
	overflow-x: scroll;
}

.sp-overflow-y-hidden {
	overflow-y: hidden;
}

.sp-overflow-y-visible {
	overflow-y: visible;
}

.sp-overflow-y-auto {
	overflow-y: auto;
}

.sp-overflow-y-scroll {
	overflow-y: scroll;
}

/* z axis order */
.sp-z-index-neg-1 {
	z-index: -1;
}

.sp-z-index-1 {
	z-index: 1;
}

.sp-z-index-2 {
	z-index: 2;
}

.sp-z-index-3 {
	z-index: 3;
}

.sp-z-index-4 {
	z-index: 4;
}

.sp-z-index-5 {
	z-index: 5;
}

/* Pointers and events events */
.sp-pointer-off {
	pointer-events: none;
}

/* Position anchors */
.sp-dock-all,
.sp-dock-top {
	top: 0;
}

.sp-dock-top-end {
	top: 100%;
}

.sp-dock-all,
.sp-dock-bottom {
	bottom: 0;
}

.sp-dock-bottom-end {
	bottom: 100%;
}

.sp-dock-all,
.sp-dock-left {
	left: 0;
}

.sp-dock-left-end {
	left: 100%;
}

.sp-dock-all,
.sp-dock-right {
	right: 0;
}

.sp-dock-right-end {
	right: 100%;
}