/*
HR - Layout
*/

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

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

/* Padding */
.padding8 {
	padding: 8px;
}
.padding16 {
	padding: 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: 32px;
	padding-left: 32px;
}

.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;
}
.padding-side80 {
	padding-right: 80px;
	padding-left: 80px;
}
.padding-side96 {
	padding-right: 96px;
	padding-left: 96px;
}

/* 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 */

}

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

@media screen and (min-width:64em) { /* -lg */
}

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

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

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

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

.img-center {
	margin: auto;
}

/*------------------------------------*\
    DIV
\*------------------------------------*/

.v-center {
	display: flex;
	height: 100%;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

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

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

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

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