/*
HR - Layout
*/

/*------------------------------------*\
    LAYOUT
\*------------------------------------*/

/*------------------------------------*\
    PADDING MARGIN
\*------------------------------------*/

/* Padding */
.padding8 {
	padding: 8px;
}
.padding16 {
	padding: 8px;
}
.padding-height8 {
	padding-top: 8px;
	padding-bottom: 8px;
}
.padding-height16 {
	padding-top: 16px;
	padding-bottom: 16px;
}
.padding-side16 {
	padding-left: 16px;
	padding-right: 16px
}

.padding32 {
	padding: 32px;
}
.padding-height32 {
	padding-top: 32px;
	padding-bottom: 32px;
}
.padding-side32 {
	padding-right: 8px;
	padding-left: 8px;
}

.padding40 {
	padding: 40px;
}
.padding-height40 {
	padding-top: 40px;
	padding-bottom: 40px;
}
.padding-side40 {
	padding-right: 40px;
	padding-left: 40px;
}

.padding64 {
	padding: 64px;
}
.padding-height64 {
	padding-top: 64px;
	padding-bottom: 64px;
}
.padding-side64 {
	padding-right: 64px;
	padding-left: 64px;
}

/* Margin */
.margin-bottom8 {
	margin-bottom: 8px;
}

.margin-height32 {
	margin-bottom: 32px;
	margin-top: 32px;
}
.margin-bottom16 {
	margin-bottom: 16px;
}
.margin-bottom32 {
	margin-bottom: 32px;
}
.margin-bottom64 {
	margin-bottom: 64px;
}
.margin-bottom96 {
	margin-bottom: 96px;
}

@media screen and (min-width:35.5em) { /* -sm */
	.padding-side32 {
		padding-right: 32px;
		padding-left: 32px;
	}
}

@media screen and (min-width:49em) { /* -md */

}

@media screen and (min-width:64em) {
	.padding16 {
		padding: 16px;
	} /* -lg */
}

@media screen and (min-width:80em) { /* -xl */
}

/*------------------------------------*\
    TEXT
\*------------------------------------*/

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

/*------------------------------------*\
    Images
\*------------------------------------*/

.img-center {
	margin: auto;
}

/*------------------------------------*\
    Media queries
\*------------------------------------*/

@media only screen and (min-width:320px) and (max-width:568px) {
	.hidden-xs {
		display: none !important;
	}
}

@media only screen and (min-width:569px) and (max-width:980px) {
	.hidden-sm {
		display: none !important;
	}
}

@media only screen and (min-width:980px) and (max-width:1096px) {
	.hidden-md {
		display: none !important;
	}
}
@media only screen and (min-width:1096px) {
	.hidden-lg {
		display: none !important;
	}
}