@font-face {
    font-family: 'Segoe-UI-SemiLight';
    src: url('../fonts/segoe-ui-5.woff2') format('woff2'),
         url('../fonts/segoe-ui-5.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
body {
	font-family: 'Segoe-UI-SemiLight';
	font-size: .875rem;
	font-weight: 400;
	line-height: 1.5;
	color: #292b2c;
}



.h1, h1 {
	margin-bottom: 1.3rem;
}

a {
	color: #838383;
}

a:focus, a:hover {
	color: #939393;
}

.col {
	padding: 2vh;
}

.navbar {
	font-size: 1.45vw;
	line-height: 2.6vw;
	padding: 0 1rem;
}

.navbar-light .navbar-nav .nav-link {
	color: #838383;
}

.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
    color: rgba(0,0,0,.5);
}

.container .text-container {
	text-align: left;
	padding-top: 5vw;
}

.container-fluid .text-container, .container-fluid .text-container-german {
	text-align: left;
	padding-top: 5vh;
	margin: 0 auto 0 auto;
}

p {
	font-size: 1.85vw;
	color: #838383;
	line-height: 2.2vw;
	margin-bottom: 2vw;
}

.circles {
	margin: 5vh auto 0 auto;
	width: 107vh;
}

.logo-container {
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	position: relative;
	background-image: url("../images/logo.png");
	background-repeat: no-repeat;
	background-position: 48% 50%;
	background-size: cover;
	/*-webkit-clip-path: circle(25vh);
	clip-path: circle(25vh);*/
}

@media only screen and (max-width: 768px) {
	/* For mobile phones: */
	.logo-container {
		height:80vw;
		width: 80vw;
	}

}

@media only screen and (min-width: 769px) {
	/* For desktop: */
	.logo-container {
		height:50vh;
		width: 50vh;
	}

}

.logo-container.start {
	-webkit-animation-name: circle1;
	animation-name: circle1;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-direction: normal;
	animation-direction: normal;
}

.nav-item  {
    padding-right: 1rem;
    padding-left: 1rem;
}

@keyframes circle1 {
	from {
		transform: scale(0, 0);
	  /*-webkit-clip-path: circle(25vh);
	  clip-path: circle(0%);
	  clip-path: url(#svgPath);*/
	}
	to {
		transform: scale(1, 1);
	  /*-webkit-clip-path: circle(25vh);
	  clip-path: circle(25vh);
	  clip-path: url(#svgPath);*/
	}
}

.center-vertically {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

/*.spot {
	position:  absolute;
	width: 100%;
}

.button {
	position:absolute;
	top: 12.75vh;
	left: 12.75vh;
	width: 8vh;
	height: 8vh;
	background-image: url('../images/play.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.button:hover {
	opacity: 0.77;
    filter: alpha(opacity=77);
}

.button2 {
	position:absolute;
	top: 9vh;
	left: 9vh;
	width: 6vh;
	height: 6vh;
	background-image: url('../images/play.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.button2:hover {
	opacity: 0.75;
    filter: alpha(opacity=50);
}

button2:hover {
	background-color: thistle;
}*/

.instrucciones {
	clip-path: circle(15vh);
	height: 30vh;
	width: 30vh;
}

/*.clip-circle {
	animation-name: circle2;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-direction: normal;
}

.modal {
	will-change: inherit;
}

.modal-dialog {
	max-width: 88%;
	margin: 1.75rem auto;
}

.modal-body {
	position:relative;
	padding:0px;
}

.close {
	position:absolute;
	right:-30px;
	top:0;
	z-index:999;
	font-size:2rem;
	font-weight: normal;
	color:#fff;
	opacity:1;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: hidden;
}
*/


.footer-home {
	display: unset;
	padding: 4vh 0 2vh 0;
	font-size: 6vh;
	color: #838383;
	text-align: center;
	line-height: 4.5vw;
	animation: fadeIn 3s ease-in 0s;
	-moz-animation: fadeIn  3s ease-in 0s; /* Firefox */
    -webkit-animation: fadeIn  3s ease-in 0s; /* Safari and Chrome */
    -o-animation: fadeIn  3s ease-in 0s; /* Opera */
}

@keyframes fadeIn {
	0% { opacity:0; }
    30% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes fadeIn { /* Firefox */
    0% { opacity:0; }
    30% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes fadeIn { /* Safari and Chrome */
    0% { opacity:0; }
    30% { opacity:0; }
    100% { opacity:1; }
}
@-o-keyframes fadeIn { /* Opera */
    0% { opacity:0; }
    30% { opacity:0; }
    100% { opacity:1; }
}

.footer {
	padding: 4vh 0 2vh 0;
	font-size: 2.5vh;
	color: #838383;
	text-align: center;
}

.logo-footer {
	height: 7vw;
	padding: 1vh 0 1vh 0;	
}

.footer-small {
	font-size: 0.8em;
	line-height: 1em;
}

.email-container {
	padding-top: 0;
	height: 1em;
	line-height: 0.2vw;
}

.email {
	height: 0.61em;
	margin-top: 0;
}

.form-signin {
	max-width: 330px;
	padding: 15px;
	margin: 100px auto 0 auto;
}

.logged-in {
	color: white;
	white-space: nowrap;
	font-size: .7rem;
}



@media only screen and (max-width: 768px) {
	body {
		font-size: 1rem;
		font-weight: 400;
		line-height: 1.5;
	}
	p {
		font-size: 4.85vw;
		line-height: 5.2vw;
		margin-bottom: 5vw;
	}
	.navbar {
		font-size: 6vw;
		line-height: 6.6vw;
		padding: 4vw;
	}
	.container-fluid .title {
		font-size: 6vw;
		line-height: 6.6vw;
	}
	.circles {
		width: 90vw;
	}
	.logo-footer {
		height: 9vh;
		padding: 1vh 0 1vh 0;	
	}
	.footer-small {
		font-size: 7.1vw;
		line-height: 12.8vw;
	}
	.modal-dialog {
		max-width: 80%;
		max-height: auto;
		margin: 32vh auto;
	}
}

@media (min-width: 1200px) {
	.container-fluid .text-container {
		max-width: 73vw;
	}
	.container-fluid .text-container-german {
		max-width: 77vw;
	}
}