html,body{
		margin:0;
		padding:0;
		height:100%;
		width:100%;
		overflow:hidden;
		font-family: 'Titillium Web', sans-serif;
	}


@media screen and (max-width: 1000px) { 
		.box {
			width: 70%;
		}
		.popup {
			width: 70%;
		}
		#logos {
			display: none;
		}
		#meteo {
			font-size: 10vw;
		}

	}

	#wrap {
		position: absolute;
		margin: 0;
		padding: 0;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		overflow: hidden;
	}

	.titre {
		margin-bottom: 0px;
		text-transform: uppercase;
		font-size: 2.6vw;
		font-weight: 400;
		letter-spacing: 0.145em;"
	}
	.age {
		margin-top: 0px;
		font-size: 1.8vw;
	}

	.webcam-full {
		max-width: 100%;
    	height: auto;
	}
	
	.data {
		position:absolute;
		left: 12px;
		height: auto;
		z-index:4;
	}
	
	body::-webkit-scrollbar {
		display: none;
	}


	.box {
		width: 40%;
		margin: 0 auto;
		background: rgba(255,255,255,0.2);
		padding: 35px;
		border: 2px solid #fff;
		border-radius: 20px/50px;
		background-clip: padding-box;
		text-align: center;
	}

	.overlay {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.7);
		transition: opacity 500ms;
		visibility: hidden;
		opacity: 0;
	}
	.overlay:target {
		visibility: visible;
		opacity: 1;
		z-index: 9999;
	}

	.popup {
		margin: 70px auto;
		padding: 20px;
		background: rgba(37, 38, 39, 0.78);
		width: 60%;
		position: relative;
		transition: all 5s ease-in-out;
		font-size: 1.2em;
		color: #fff;
		overflow-y:scroll;
		max-height:75%;
	}

	.popup .close {
		position: absolute;
		top: 20px;
		right: 30px;
		transition: all 200ms;
		font-size: 30px;
		font-weight: bold;
		text-decoration: none;
	}

	.popup .content {
		max-height: 30%;
	}

	#logo {
		display: inline;
		width: auto;
		height: 60px;
		position: fixed;
		z-index: 2000;
		left: 20px;
		bottom: 20px;
	}
	
	#meteo {
		display: inline;
		width: auto;
		height: auto;
		position: fixed;
		z-index: 2000;
		right: 20px;
		bottom: 20px;
		font-size: 1.8vw;
	}