/*@import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap');*/
@import url("https://use.typekit.net/umj5ibl.css");

/* ITALIC LIGHT */
@font-face {
	font-family: 'Editorial New Thin';
	src: url('_fonts/PPEditorialNew-ThinItalic.woff2') format('woff2'),
		url('_fonts/PPEditorialNew-ThinItalic.woff') format('woff');
	font-weight: normal;
	font-style: italic;
}

/* REGULAR */
@font-face {
	font-family: 'Editorial New';
	src: url('_fonts/PPEditorialNew-Regular.woff2') format('woff2'),
		url('_fonts/PPEditorialNew-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

/* ITALIC */
@font-face {
	font-family: 'Editorial New';
	src: url('_fonts/PPEditorialNew-Italic.woff2') format('woff2'),
		url('_fonts/PPEditorialNew-Italic.woff') format('woff');
	font-weight: normal;
	font-style: italic;
}

/* BOLD */
@font-face {
	font-family: 'Editorial New Bold';
	src: url('_fonts/PPEditorialNew-Bold.woff2') format('woff2'),
		url('_ftons/PPEditorialNew-Bold.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

/* BOLD ITALIC */
@font-face {
	font-family: 'Editorial New Bold';
	src: url('_fonts/PPEditorialNew-BoldItalic.woff2') format('woff2'),
		url('_fonts/PPEditorialNew-BoldItalic.woff') format('woff');
	font-weight: normal;
	font-style: italic;
}

/* HEAVY */
@font-face {
	font-family: 'Editorial New Heavy';
	src: url('_fonts/PPEditorialNew-Heavy.woff2') format('woff2'),
		url('_fonts/PPEditorialNew-Heavy.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

/* HEAVY ITALIC */
@font-face {
	font-family: 'Editorial New Heavy';
	src: url('_fonts/PPEditorialNew-BoldItalic.woff2') format('woff2'),
		url('_fonts/PPEditorialNew-BoldItalic.woff') format('woff');
	font-weight: normal;
	font-style: italic;
}


* {
	-webkit-font-smoothing: antialiased;
/*	transition: all 0.05s;
	transition-delay: 0s;*/

	-webkit-overflow-scrolling: touch;

	margin: 0;
	padding: 0;
}

*:focus {
	outline: none;
}

:root {
	--black: #2D2928;
	--white: #FFF;
	
	--offwhite: #F8EED5;
	
	--green: #C2E6E3;
	--orange: #EE997C;

	--red: #EF4035;
}

html {
	height: 100%;
}

body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;

	font-family: freight-sans-pro,sans-serif;
	font-weight: 400;
	font-style: normal;
	/*line-height: 1.8vw;*/

	color: var(--black);
}

/* BACKGROUNDS */
.bg-offwhite {
	background-color: var(--offwhite);
	color: var(--black);
}

.bg-white {
	background-color: var(--white);
	color: var(--black);
}

.bg-black {
	background-color: var(--black);
	color: var(--white);
}

.bg-red {
	background-color: var(--red);
	color: var(--white);
}

.bg-green {
	background-color: var(--green);
	color: var(--black);
}

.bg-orange {
	background-color: var(--orange);
	color: var(--black);
}

/* BUTTON */

.button-huge {
	position: relative;
	padding: 0 1.6vw;

	font-family: 'Editorial New';
	font-size: 1.4vw;
	line-height: 3.2vw;

	border-radius: 2.4vw;

	display: inline-block;
	margin: auto 0.4vw;

	text-decoration: none;

	transform: translateY(-0.2vw);
	box-shadow: 0 0.2vw var(--black);

	transition-duration: 0.1s;
}

.button-huge:hover {
	transform: translateY(-0vw);
	box-shadow: 0 0vw var(--black);
}

.button-large {
	position: relative;
	padding: 0 1.6vw;

	font-family: 'Editorial New';
	font-size: 1.2vw;
	line-height: 2.6vw;

	border-radius: 2vw;

	display: inline-block;
	margin: auto 0.4vw;

	text-decoration: none;	
}

.button-small {
	position: relative;
	padding: 0 1.4vw;
	padding-top: 0.1vw;

	color: var(--black);
	font-family: 'Editorial New';
	font-size: 1.1vw;
	line-height: 2vw;

	border-radius: 2vw;

	display: inline-block;
	margin: auto 0.4vw;

	text-decoration: none;	
}

.button-link {
	padding: 0;
	margin: 0;
	border-radius: 0;

	border-bottom: 1px solid rgba(0, 0, 0, 0);
}

.button-link:hover {
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.button-secondar {
	border: 1px solid rgba(0, 0, 0, 0.2);
}

.news__item .button-secondar {
	margin-left: -0.2vw;
}

/* HERO INTRO PAGE */

.page__hero {

}

.page__hero--margin {
	position: absolute;
		top: calc(50% + 1.6vw);
		left: 50%;

	width: calc(100% - 19.2vw);
	padding: 3.2vw 9.6vw;

	transform: translate(-50%, -50%);
}

.page__hero--headline {
	position: relative;
	width: 100%;

	z-index: 2;
}

.page__hero--headline h1 {
	font-family: 'Editorial New Heavy';
	font-size: 7.2vw;
	line-height: 7.8vw;
	letter-spacing: -0.04em;
}

.logo-type-hero {
	position: absolute;
		top: -2.6vw;
		left: 3.6vw;

	display: flex;
}

.logo-type-hero span {
	display: inline-block;
	line-height: 2.4vw;
	padding-left: 0.8vw;
}

.logo-type-hero img {
	width: 2.4vw;
	height: auto;
}

.page__hero--intro {
	position: relative;
	width: 30vw;
	padding-left: 6.8vw;
	padding-top: 0.8vw;
}

.page__hero--intro p {
	padding-bottom: 2.4vw;
}

.page__hero--intro a:first-of-type {
	margin-left: -0.4vw;
}

.page__hero--airballoon {
	position: absolute;
		bottom: 9.6vw;
		right: 8vw;

	width: 20vw;

	z-index: 4;
}

.page__hero--airballoon img {
	width: 100%;
	height: auto;

	animation-name: airballoon_floating;
	animation-duration: 14s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-out;
}

@keyframes airballoon_floating {
	0% { transform: translateY(-1.6vw) rotate(0deg); }
	50% { transform: translateY(0vw) rotate(0deg); }
	100% { transform: translateY(-1.6vw) rotate(0deg);  }
}

.obj__hero-view {
	position: absolute;
		bottom: 3.2vw;
		right: 9.6vw;

	width: 40%;

	z-index: 0;

}

.obj__hero-bino {
	position: relative;
	width: 100%;
	padding-bottom: 55.44%;

	clip-path: url(#mask__bino);
	/*mask-image: url(#mask__bino);
	mask-size: cover;*/
}

.obj__skyline {
	position: absolute;
		top: 0;
		left: 0;

	width: 100%;
	height: 100%;

	background-image: url('_images/skyline.png');
	background-size: 200%;
	background-repeat: repeat-x;
	background-position: left bottom 0%;

	animation-name: skyline_move;
	animation-duration: 80s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;

	opacity: 0.7;
}

@keyframes skyline_move {
	0% { background-position: left bottom; }
	50% { background-position: left -100% bottom 0%; }
	100% { background-position: left -200% bottom; }
}

.obj__skyline-clouds {
	position: absolute;
		top: 0;
		left: 0;

	width: 100%;
	height: 100%;

	background-image: url('_images/_skyline_clouds.png');
	background-size: 200%;
	background-repeat: repeat-x;
	background-position: left bottom 0%;

	animation-name: skyline_move;
	animation-duration: 50s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;

	opacity: 1;
	z-index: 2;
}

@keyframes skyline_move {
	0% { background-position: left bottom; }
	50% { background-position: left -100% bottom 0%; }
	100% { background-position: left -200% bottom; }
}


@media screen and (max-width: 768px){

	.button-huge {
		padding: 0 4.8vw;
		font-family: 'Editorial New';
		font-size: 4.8vw;
		line-height: 9.6vw;
		border-radius: 5.6vw;
		display: inline-block;
		margin: 1.6vw;
	}

	.button-large {
		position: relative;
		padding: 0 4.8vw;
		font-family: 'Editorial New';
		font-size: 4vw;
		line-height: 8vw;
		border-radius: 5vw;
		display: inline-block;
		margin: auto 0.4vw;
		text-decoration: none;
	}

	.button-small {
		padding: 0 3.2vw;
		font-size: 3.2vw;
		line-height: 6.4vw;
		border-radius: 6.4vw;
		padding-top: 0.4vw;
	}

	.page__hero--margin {
		top: unset;
		left: unset;
		width: calc(100% - 19.2vw);
		padding: 24vw 9.6vw;
		transform: none;
		padding-top: 32vw;
	}

	.page__hero--headline h1 {
		font-size: 9.6vw;
		line-height: 9.6vw;
		letter-spacing: -0.04em;
	}

	.logo-type-hero {
		position: absolute;
			top: -7.2vw;
			left: 0.8vw;
		display: flex;
	}

	.logo-type-hero img {
		width: 6.4vw;
		height: auto;
	}

	.logo-type-hero span {
		display: inline-block;
		line-height: 6.4vw;
		padding-left: 1.6vw;
	}

	.page__hero--intro {
		position: relative;
		width: 64vw;
		padding-left: 8.8vw;
		padding-top: 18vw;
		z-index: 4;
	}

	.obj__hero-view {
		position: absolute;
		bottom: unset;
		right: 9.6vw;
		width: calc(100% - 19.2vw);
		z-index: 0;
		top: 16vw;
	}

	.page__hero--airballoon {
		position: absolute;
			top: 4.8vw;
			bottom: unset;
			right: 3.2vw;

		width: 40vw;
		z-index: 4;
	}

	.home .badge__20years {
		right: calc(50% - 8vw) !important;
	}

	.badge__20years {
		top: 0 !important;
		right: 6.4vw !important;
		width: 16vw !important;
		height: 16vw !important;
	}

	.page__hero--intro a {
		margin-left: -0.4vw;
	}

}