@charset "UTF-8";

/* -- Inter -- */
@font-face {
	font-family: 'inter';
	src: url('../fonts/inter/inter-black.woff2') format('woff2'),
			 url('../fonts/inter/inter-black.woff') format('woff'),
			 url('../fonts/inter/inter-black.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
	}

@font-face {
	font-family: 'inter';
	src: url('../fonts/inter/inter-bold.woff2') format('woff2'),
			 url('../fonts/inter/inter-bold.woff') format('woff'),
			 url('../fonts/inter/inter-bold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	}

@font-face {
	font-family: 'inter';
	src: url('../fonts/inter/inter-medium.woff2') format('woff2'),
			 url('../fonts/inter/inter-medium.woff') format('woff'),
			 url('../fonts/inter/inter-medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	}

@font-face {
	font-family: 'inter';
	src: url('../fonts/inter/inter-regular.woff2') format('woff2'),
			 url('../fonts/inter/inter-regular.woff') format('woff'),
			 url('../fonts/inter/inter-regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	}

@font-face {
	font-family: 'inter';
	src: url('../fonts/inter/inter-light.woff2') format('woff2'),
			 url('../fonts/inter/inter-light.woff') format('woff'),
			 url('../fonts/inter/inter-light.ttf') format('truetype');
	font-weight: 300; 
	font-style: normal;
	}

@font-face {
	font-family: 'inter';
	src: url('../fonts/inter/inter-thin.woff2') format('woff2'),
			 url('../fonts/inter/inter-thin.woff') format('woff'),
			 url('../fonts/inter/inter-thin.ttf') format('truetype');
	font-weight: 100;
	font-style: normal;
	}



.flex--c, .flexc {justify-content:center; align-items:center;}

.transition {
  transition: all 0.45s ease-out 0s;
}

#outintro {
  position: relative;
  z-index: 100;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: #EEE;
}

#wintro {
  flex-direction: column;
  align-content: center;
  justify-content: center;
  width: 80%;
  max-width: 1400px;
  transition-property: opacity;

  opacity: 0;
}

#wintro div, #wintro a {
  opacity: 1;
}

#logo {
  background-image: url( "../../content/i/logo--c.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 2.5rem;
  margin-bottom: 1rem;
  cursor: pointer;
}

#till {
  flex-flow: row wrap;
}

.tiles .button {
  flex:1 0 360px;
  overflow: hidden;
  position: relative;
  max-width: inherit;
  padding-bottom: 26%;
  margin: .3%;
  border: 2px solid rgb(0,115,74);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  cursor: pointer;
}

.tiles .button span {
  display: inline-block;
  position: absolute;
  top: auto;
  right: 0;
  bottom: .5rem;
  left: auto;
  min-width: 65%;
  text-align: left;
  line-height: 1.1;
  padding: .35rem .8rem .25rem;
  background-color: rgba(0,115,74,.98);
}

.tiles .button:hover {
  background-color: rgb(243,111,33);
  color: #fff;
  border: 2px solid rgb(243,111,33);
}

.tiles .button:active {
  background-color: rgb(237,28,36);
  color: #fff;
  border: 2px solid rgb(237,28,36);
}

.tiles .button:hover span {
  background-color: rgba(243,111,33,1);
  -webkit-transition: all .45s ease-out 0s;
  -moz-transition: all .45s ease-out 0s;
  -o-transition: all .45s ease-out 0s;
  transition: all .45s ease-out 0s;
}

.tilesbg {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.tiles .button:hover .tilesbg {
  top: -0.5rem;
  bottom: -0.25rem;

}

/* #gr_01 .tilesbg {
  background-image: url( "../../content/tiles/gr__01.jpg");
}

 #gr_02 .tilesbg {
  background-image: url( "../../content/tiles/gr__02.jpg");
}*/

@media (min-width:2048px) {
 
  #wintro.tiles {
    max-width: 1600px;
  }

  .tiles .button {
    margin: .3%;
  }

  .tiles .button span {
    font-size: 110%;
  }

  #buttons, #tour_end, .button {
    max-width: 560px;
    border-radius: 0;
  }
}


@media screen and (max-width:768px) {
  .tiles .button {
    flex:1 0 280px;
    padding-bottom: 26%;
  }
}


@media (orientation:portrait) and (max-width:1024px) {
  #wintro   { width: 75%; }
  .tiles .button { flex:1 0 100%; padding-bottom: 48%; }
}

@media (orientation:portrait) and (max-width:480px) {
  #wintro   { width:90%; }
  .tiles .button { flex:1 0 100%; padding-bottom: 48%; }
  .tiles .button span { min-width: 85%; }
}


@media (orientation:landscape) and (max-height:1024px) {
  #wintro   { width: 80%; }
  .tiles .button { flex:1 0 48%; padding-bottom: 26%; }
  .btn, .button, .tiles .button { font-size: calc(0.6rem + 0.5vw);
}


@media (orientation:landscape) and (max-height:640px) and (max-width:800px) {
  #wintro   { width: 90%; }
  .tiles .button { flex:1 0 48%; padding-bottom: 24%; }
  .btn, .button, .tiles .button { font-size: calc(0.5rem + 0.5vw); }
}


@media (orientation:landscape) and (max-height:480px) {
  #wintro   { width: 78%; }
  .tiles .button { flex:1 0 48%; padding-bottom: 24%; }
  .btn, .button, .tiles .button { font-size: calc(0.6rem + 0.5vw); }
}

@media (orientation:landscape) and (max-height:480px) and (max-width:720px) {
  #wintro   { width: 88%; }
  .tiles .button { flex:1 0 48%; padding-bottom: 24%; }
  .btn, .button, .tiles .button { font-size: calc(0.5rem + 0.4vw); }
}

@media (orientation:landscape) and (max-height:360px) and (max-width:480px) {
  #wintro   { width: 90%; }
  .tiles .button { flex:1 0 48%; padding-bottom: 24%; }
  .btn, .button, .tiles .button { font-size: calc(0.5rem + 0.4vw); }
}

* {
  font-family: Inter;

}

.visible {
  opacity: 1 !important;
  visibility: visible !important;
}