

@font-face {
	font-family: headline;
	src: url(SourceSansPro-Regular.ttf);
	font-weight: bold;
}
@font-face {
	font-family: text;
	src: url(SourceSansPro-Regular.ttf);
}

/* For info.php */

h1 {
	font-family: headline;
	color: #FFFFFF;
	text-shadow: 2px 2px 2px #000000;
	text-align: center;
	text-transform: uppercase;
	font-size: 28pt;
	line-height: 28pt;
	margin-bottom:0;
}
.imgContainer {
	margin: 30px auto;
	/*
	background-image: url(graphics/T_UI_popup_pictureframe.png);
	background-position: center center;
	*/
	width: 350px;
	height: 350px;
}

.text {
	width: 98%;
	margin: 10px;
	font-family: text;
	color: #FFFFFF;
	font-size: 13pt;
	text-shadow: 2px 2px 2px #000000;
	text-align: center;
}
.textLandscape {
	font-size: 20pt;
	margin: 10px;
	font-family: text;
	color: #FFFFFF;
	text-shadow: 2px 2px 2px #000000;
	text-align: center;
}
.textLanguage {
	font-size: 40pt;
	margin: 10px;
	font-family: text;
	color: #FFFFFF;
	text-shadow: 2px 2px 2px #000000;
	text-align: left;
}

.clip-circle {
  /* Kreis */
  -webkit-clip-path: circle(175px at 175px 175px);
  clip-path: circle(175px at 175px 175px);
  width: 350px;
  height: 350px;
}


/* For landscape.php */

.button-bar {
	position:absolute;
	bottom: 24px;
	width:100%;
	z-index:100;
	text-align:center;
}

.btn {
	font-family: headline;
	display: inline-block;
	background: #333;
	width:160px;
	padding: 14px;
	margin-right:4px;
	color: white;
	border-radius: 4px;
	text-decoration: none;
	opacity: 0.7;
	box-shadow: 2px 2px 3px #000;
	font-size: 22px;
}

.btn-mountains.active {
	background: #FF0000;
}

.btn-glaciers.active {
	background: #0B68FC;
}

.btn-valleys.active {
	background: #FF00FF;
}

.btn-communes.active {
	background: #06BC06;
}

.btn-pois.active {
	background: #D8CE0B;
}

.pulse {
  /* animation: pulse 3s infinite; */
}

.pulse:hover {
  /* animation: none; */
}

@-webkit-keyframes pulse {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 0.7;
  }
}

@keyframes pulse {
  0% {
	opacity: 0.7;
  }
  50% {
    opacity: 0.3;
  }
  100% {
     opacity: 0.7;
  }
}