/* ---------------------------------------------------------------------------- */
/* --- 2. BASICS
/* ----------------------------------------------------------------------------- */

.relative { position: relative; z-index: 2; }
.block { display: block; } 
.dark { color: #fff; }

@for $k from 0 through 10 {
	$value: $k*5;
    .pull-up-#{$value} {
   		margin-top: -#{$value}px !important;
    }
}

@for $k from 0 through 10 {
	$value: $k*5;
    .push-down-#{$value} {
   		margin-bottom: -#{$value}px !important;
    }
}

.mb-6 {
	margin-bottom: 5rem !important;
}

.animated { visibility: hidden; }
.animated.visible { visibility: visible; }

.border { border: 1px solid $color-line; }
.dark .border { border: 1px solid $color-line-light; }

.border-top { border-top: 1px solid $color-line; }
.dark .border-top, .dark.border-top { border-top: 1px solid $color-line-light; }

.border-bottom { border-bottom: 1px solid $color-line; }
.dark .border-bottom, .dark.border-bottom { border-bottom: 1px solid $color-line-light; }

.shadow { 
	@include box-shadow(5px 5px 20px 0px rgba(0,0,0,0.08));
}

.row.gutters-sm { margin-left: -7.5px; margin-right: -7.5px; }
.row.gutters-sm > *[class^='col'], .row.gutters-sm > *[class*=' col'] { padding-left: 7.5px; padding-right: 7.5px; }

.row.gutters-lg { margin-left: -25px; margin-right: -25px; }
.row.gutters-lg > *[class^='col'], .row.gutters-lg > *[class*=' col'] { padding-left: 25px; padding-right: 25px; }

.row.with-separator { 
	margin-left: -30px; 
	margin-right: -30px; 

	@media #{$screen-sm} {
		margin-left: -15px;
		margin-right: -15px;
	}

	> *[class^='col'], > *[class*=' col'] { 
		padding-left: 30px; 
		padding-right: 30px;

		&:not(:last-child) {
			border-right: 1px solid $color-line;

			@media #{$screen-sm} {
				border-right: none;
			}
		}

		@media #{$screen-sm} {
			padding-left: 15px;
			padding-right: 15px;
			
		}
	}
}

.h-100 { height: 100px; }
.h-200 { height: 200px; }
.h-300 { height: 300px; }
.h-400 { height: 400px; }
.h-500 { height: 500px; }
.h-600 { height: 600px; }
.h-700 { height: 700px; }
.h-800 { height: 800px; }
.h-900 { height: 900px; }

.h-sm { height: 40vh; }
.h-md { height: 60vh; }
.h-lg { height: 80vh; }
.h-min-fullheight { min-height: 100vh; }

.header-vertical .h-fullheight { 
	height: 100vh; 

	@media #{$screen-lg} {
		height: calc(100vh - #{$navigation-mobile-height});
	}

	@media #{$screen-height-sm} {
		height: auto;
	}
}

.header-horizontal .h-fullheight { 
	height: calc(100vh - #{$header-horizontal-height});

	@media #{$screen-height-sm} {
		height: auto;
	}
}


.pos-v-center {
	position: relative;
	top: 50%;
	@include translate3d(0,-50%,0);
	@include transition(all 0.3s ease-out)

	@media #{$screen-height-sm} {
		top: 0;
		@include translate3d(0,0,0);
	}
}

.pos-v-bottom {
	position: relative;
	top: 80%;
	@include translate3d(0,-100%,0);
	@include transition(all 0.3s ease-out)
}


@media #{$screen-height-sm} {
	.h-sm, .h-md, .h-lg, .h-fullheight {
		height: auto;
	}
}