@charset "UTF-8";

/* yantramanav-300 - latin */
@font-face {
  font-family: 'Yantramanav';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/yantramanav-v11-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/yantramanav-v11-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/yantramanav-v11-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/yantramanav-v11-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/yantramanav-v11-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/yantramanav-v11-latin-300.svg#Yantramanav') format('svg'); /* Legacy iOS */
}

/* yantramanav-regular - latin */
@font-face {
  font-family: 'Yantramanav';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/yantramanav-v11-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/yantramanav-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/yantramanav-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/yantramanav-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/yantramanav-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/yantramanav-v11-latin-regular.svg#Yantramanav') format('svg'); /* Legacy iOS */
}

/* yantramanav-700 - latin */
@font-face {
  font-family: 'Yantramanav';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/yantramanav-v11-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/yantramanav-v11-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/yantramanav-v11-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/yantramanav-v11-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/yantramanav-v11-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/yantramanav-v11-latin-700.svg#Yantramanav') format('svg'); /* Legacy iOS */
}

/*

herriger KF

Author: nexd — new experience design
URL:    http://nexd.de

*/

/* -----  1.2 Reset & Normalization  ---------------------------------------- */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
  list-style: none;
}

article, aside, details, figcaption, figure,
footer, header, main, menu, nav, section, summary {
  display: block;
}


/* -----  1.3 General Typography  ------------------------------------------- */
   

h1, h2, h3, h4, h5, h6,
p, ul, ol, figure, pre {
  /* Reset font-sizes and normalize margins */
  font-size: inherit;
  line-height: inherit;
  margin: 0 0 1.5rem;
}

h1 {
  font-size: 5rem;
  line-height: .85;
  margin-bottom: 3rem;
  font-weight: 300;    
}

h2 {
  font-size: 2rem;
  font-weight: 300;
}

h3 {
  font-size: 1.25em;
  margin-bottom: .4rem
}

h4 {
  font-size: 1em;
}

h5 {
    font-size: 80%;
    text-align: center;
}

strong {
    font-weight: 700;
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
}

a:hover, a:focus, a:active {
/*    opacity: 0.9;*/
}

.btn {
    padding: 0.8rem 1.2rem;
	background: #222;
	border: 1px solid #222;
	color: #fff;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: .6px;
	border-radius: 100px;
	margin-top: 1.5rem;
	display: inline-block;
	transition: all .3s ease-in-out;
}

.btn:hover {
	background: #FFF;
	color: #000;
    border-color: #000;
}

header {
	position: fixed;
	top: 0;
	z-index: 10;
	color: #fff;
	width: 100%;
	font-size: 22px;
	padding: 2.2rem
}

header .logo {
	position: absolute;
	width: 200px;
}

header ul {
	width: auto;
	float: right;
}
header ul li {
	display: inline-block;
	margin-left: 1rem;
	cursor: pointer;
}

.language{
    font-size:1rem; 
}

header ul li a:hover {
	opacity: 0.7;
	transition: all .2s ease-in-out;
}

.link {
	background: #fff;
	border-radius: 100px;
    padding: .2rem 1.3rem;
	color: #000;
}



/* =====  3 Site Layout  ==================================================== */

html, body {
  overflow-y: scroll;
  cursor: default;
  position: relative;
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-family: 'Yantramanav', sans-serif;	
  font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;    
  min-height: 100%;
  color: #000;
  width: 100%; 
  height: 100%; 
  margin: 0; 
  padding: 0; 
	color: #4A4A4A;
	font-weight: 300;
  background-color: #000000;	
}

.wrap {
  box-sizing: content-box;
  margin: 0 auto;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  max-width: 76rem;
}

.close {
  position: absolute;
  right: 32px;
  top: 32px;
  width: 32px;
  height: 32px;
  opacity: 0.3;
  transition: all .3s ease-in-out;
  cursor: pointer;
}

.close:hover {
  opacity: 1;
}
.close:before, .close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 33px;
  width: 2px;
  background-color: #333;
}
.close:before {
  transform: rotate(45deg);
}
.close:after {
  transform: rotate(-45deg);
}

/* =====  content  ==================================================== */

.overlay {
	position: absolute;
	background: #fff;
	margin: 1.5rem;
	left: 0;
	right: 0;
	height: auto;
	padding: 4rem 2rem 4rem 2rem;
	z-index: 100;
	max-width: 80rem;
}

.overlay img {
	margin-bottom: 2rem;
	display: block;
}

.legal {
	width: 30%;
	float: left;
}

.text {
	width: 70%;
	float: left;
}


/* =====  SLIDER  ==================================================== */



#vanilla-slideshow-container { 
	width: 100%; 
	height: 100%; 
	position: fixed; 
	text-align: center;
}

#vanilla-slideshow .vanilla-slide { 
	width: 100%; 
	height: 100%; 
	background-size: cover; 
	background-position: 50% 50%;
	background-repeat: no-repeat;
	position: absolute; 
	top: 0; 
	left: 0; 
	opacity: 0;
}

#vanilla-slideshow .vanilla-slide.vanilla-active { 
    opacity: .75;
}

#vanilla-slideshow .vanilla-slide img {
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { 
  #vanilla-slideshow .vanilla-slide img {
    left: 50%;
    margin-left: -512px; 
  }
}

/* Arrows */

#vanilla-slideshow-previous {
	position: absolute;
	left: 10px;
	top: 40%;
	width: 48px;
	height: 50px;
	background-position: 0 100%;
	cursor: pointer; 
	opacity: 0.7;
	z-index: 5; 
	display: none;
}

#vanilla-slideshow-next {
	position: absolute;
	right: 10px;
	top: 40%;
	width: 48px;
	height: 50px;
	background-position: 100% 100%;
	cursor: pointer; 	
	opacity: 0.7;
	z-index: 5; 
	display: none;
}

#vanilla-slideshow-previous:hover, #vanilla-slideshow-next:hover {
	opacity: 1;
}

/* Indicators */

#vanilla-indicators {
	display: inline-block;
	z-index: 5;
	position: absolute;
	bottom: 50px;
}

.vanilla-indicators {
	box-shadow: 0 0 10px #333333;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid #ffffff;
	float: left;
	margin-right: 3px;
	cursor: pointer;
}

.vanilla-indicators.vanilla-active {
	background-color: #ffffff;
}

/* =====  vue animations  ==================================================== */


.fade-enter-active, .fade-leave-active {
  transition: opacity 0.25s ease-out;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateY(-60px);
  opacity: 0;
}


/* =====  maps ==================================================== */


.map {
	background: #e2e2e2;
	width: 70%;
	float: left;
	height: 32rem;
}

#map_canvas1{
    width: 50%;
    height: 300px;
    border: 1px solid black;
    float:left;
}

#map_canvas2{
    width: 100%;
    height: 100%;
    border: 1px solid black;
}

/* =====  mobile <3  ==================================================== */

@media screen and (min-width: 80rem) {
	.overlay {
		margin: 2rem auto;
	}
	header {
		max-width: 80rem;
		margin-left: auto;
		margin-right: auto;
		left: 0;
		right: 0;
	}
}
@media screen and (max-width: 620px) {

	header ul li {
	display: block;
	margin-bottom: .8rem;
	text-align: right;
	font-size: 1.4rem;
	}
	
	header .logo {
	width: 45%;
	max-width: 220px;
	}
	
	.legal, .text, .map {
		width: 100%;
	}
	
	.overlay {
		margin: .8rem;
	}
	
	h2 {
		font-size: 1.25rem;
	}
}