de.vidok.com/layout/style-scss/_mixins.scss

$breakpoints: (
	xs: 576px,
	sm: 768px,
	md: 992px,
	lg: 1200px,
	xl: 1360px,
	xxl: 1620px,
);

@mixin respond-above($breakpoint) {
	@if map-has-key($breakpoints, $breakpoint) {
		$breakpoint-value: map-get($breakpoints, $breakpoint);

		@media (min-width: $breakpoint-value) {
			@content;
		}
	} @else {
		@warn 'Invalid breakpoint: #{$breakpoint}.';
	}
}

@mixin respond-below($breakpoint) {
	@if map-has-key($breakpoints, $breakpoint) {
		$breakpoint-value: map-get($breakpoints, $breakpoint);

		@media (max-width: ($breakpoint-value - 1)) {
			@content;
		}
	} @else {
		@warn 'Invalid breakpoint: #{$breakpoint}.';
	}
}

@mixin respond-between($lower, $upper) {
	@if map-has-key($breakpoints, $lower) and map-has-key($breakpoints, $upper) {
		$lower-breakpoint: map-get($breakpoints, $lower);
		$upper-breakpoint: map-get($breakpoints, $upper);

		@media (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1)) {
			@content;
		}
	} @else {
		@if (map-has-key($breakpoints, $lower) ==false) {
			@warn 'Your lower breakpoint was invalid: #{$lower}.';
		}

		@if (map-has-key($breakpoints, $upper) ==false) {
			@warn 'Your upper breakpoint was invalid: #{$upper}.';
		}
	}
}

@mixin border-radius($px: 0) {
	-webkit-border-radius: $px;
	-moz-border-radius: $px;
	border-radius: $px;
}

@mixin box-shadow($value) {
	-webkit-box-shadow: $value;
	-moz-box-shadow: $value;
	box-shadow: $value;
}

@mixin transition($element: all, $time: 0.5s, $option: ease) {
	-webkit-transition: $element $time $option;
	transition: $element $time $option;
}

@mixin opacity($value) {
	$IEValue: $value * 100;
	opacity: $value;
	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + $IEValue +
		')';
	filter: alpha(opacity=$IEValue);
}

@mixin flexbox() {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

@mixin flex($values) {
	-webkit-box-flex: $values;
	-moz-box-flex: $values;
	-webkit-flex: $values;
	-ms-flex: $values;
	flex: $values;
}

@mixin flex-direction($direction) {
	-webkit-flex-direction: $direction;
	-moz-flex-direction: $direction;
	-ms-flex-direction: $direction;
	flex-direction: $direction;
}

@mixin flex-wrap($wrap) {
	-webkit-flex-wrap: $wrap;
	-moz-flex-wrap: $wrap;
	-ms-flex-wrap: $wrap;
	flex-wrap: $wrap;
}

@mixin flex-flow($flow) {
	-webkit-flex-flow: $flow;
	-moz-flex-flow: $flow;
	-ms-flex-flow: $flow;
	flex-flow: $flow;
}

@mixin order($val) {
	-webkit-box-ordinal-group: $val;
	-moz-box-ordinal-group: $val;
	-ms-flex-order: $val;
	-webkit-order: $val;
	order: $val;
}

@mixin flex-grow($grow) {
	-webkit-flex-grow: $grow;
	-moz-flex-grow: $grow;
	-ms-flex-grow: $grow;
	flex-grow: $grow;
}

@mixin flex-shrink($shrink) {
	-webkit-flex-shrink: $shrink;
	-moz-flex-shrink: $shrink;
	-ms-flex-shrink: $shrink;
	flex-shrink: $shrink;
}

@mixin flex-basis($width) {
	-webkit-flex-basis: $width;
	-moz-flex-basis: $width;
	-ms-flex-basis: $width;
	flex-basis: $width;
}

@mixin justify-content($justify) {
	-webkit-justify-content: $justify;
	-moz-justify-content: $justify;
	-ms-justify-content: $justify;
	justify-content: $justify;
	-ms-flex-pack: $justify;
}

@mixin align-content($align) {
	-webkit-align-content: $align;
	-moz-align-content: $align;
	-ms-align-content: $align;
	align-content: $align;
}

@mixin align-items($align) {
	-webkit-align-items: $align;
	-moz-align-items: $align;
	-ms-align-items: $align;
	align-items: $align;
}

@mixin align-self($align) {
	-webkit-align-self: $align;
	-moz-align-self: $align;
	-ms-align-self: $align;
	align-self: $align;
}

@font-face {
	font-family: 'URW Form';
	src: url('/layout/URWForm-LightItalic.woff2') format('woff2'),
		url('/layout/URWForm-LightItalic.woff') format('woff');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'URW Form';
	src: url('/layout/URWForm-ExtraLightItalic.woff2') format('woff2'),
		url('/layout/URWForm-ExtraLightItalic.woff') format('woff');
	font-weight: 200;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'URW Form';
	src: url('/layout/URWForm-Medium.woff2') format('woff2'),
		url('/layout/URWForm-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'URW Form';
	src: url('/layout/URWForm-MediumItalic.woff2') format('woff2'),
		url('/layout/URWForm-MediumItalic.woff') format('woff');
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'URW Form Demi';
	src: url('/layout/URWForm-Demi.woff2') format('woff2'),
		url('/layout/URWForm-Demi.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'URW Form';
	src: url('/layout/URWForm-Italic.woff2') format('woff2'),
		url('/layout/URWForm-Italic.woff') format('woff');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'URW Form';
	src: url('/layout/URWForm-Light.woff2') format('woff2'),
		url('/layout/URWForm-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'URW Form';
	src: url('/layout/URWForm-ThinItalic.woff2') format('woff2'),
		url('/layout/URWForm-ThinItalic.woff') format('woff');
	font-weight: 100;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'URW Form';
	src: url('/layout/URWForm-Bold.woff2') format('woff2'),
		url('/layout/URWForm-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'URW Form';
	src: url('/layout/URWForm-BoldItalic.woff2') format('woff2'),
		url('/layout/URWForm-BoldItalic.woff') format('woff');
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'URW Form';
	src: url('/layout/URWForm-Thin.woff2') format('woff2'),
		url('/layout/URWForm-Thin.woff') format('woff');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'URW Form';
	src: url('/layout/URWForm-Regular.woff2') format('woff2'),
		url('/layout/URWForm-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'URW Form Extra';
	src: url('/layout/URWForm-ExtraBoldItalic.woff2') format('woff2'),
		url('/layout/URWForm-ExtraBoldItalic.woff') format('woff');
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'URW Form Extra';
	src: url('/layout/URWForm-ExtraBold.woff2') format('woff2'),
		url('/layout/URWForm-ExtraBold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

//* ~~~~ Colors ~~~~ *//
$cWhite: #fff;
$cMilk: #fafafa;
$cSand: #e7dcd0;
$cSandLight: #e6dccf;
$cGray: #d8d8d8;
$cYellow: #ffe604;
$cIron: #b2b3b7;
$cLightBlue: #4ca8e6;
$cDarkNight: #343431;
$cDeepDark: #1d1d1b;
$cBlack: #000;

$cTxtWhite: #fff;
$cTxtCloud: #d8d8d8;
$cTxtLightBlue: #4ca8e6;
$cTxtDark: #2c2d2f;
$cTxtBlack: #000;
//* ~~~~ Mixins ~~~~ *//

@mixin btn_classic($f_size, $color, $h_color, $bg, $h_bg) {
	text-align: center;
	font-size: $f_size;
	font-weight: 700;
	font-family: $font2;
	color: $color;
	background: $bg;
	text-transform: uppercase;
	line-height: 22px;
	padding: 12px 15px;
	display: inline-block;
	min-width: 210px;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;

	&:hover {
		background: $h_bg;
		color: $h_color !important;
	}
}

//* ~~~~ Global ~~~~ *//
.hidden {
	display: none !important;
}

.box {
	padding-top: 125px;
	padding-bottom: 125px;

	@include respond-below(sm) {
		padding-top: 90px;
		padding-bottom: 90px;
	}
}

.box_title {
	font-family: 'URW Form', sans-serif;
	font-weight: 700;
	font-size: 35px;
	line-height: 1.25;
	margin-bottom: 28px;
	text-transform: uppercase;
	text-align: right;
	letter-spacing: 0.15em;
}

.box_subtitle {
	font-family: 'URW Form';
	font-style: normal;
	font-weight: 400;
	font-size: 30px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #000000;
}