*{
	box-sizing: border-box;
}
body, html {
    -webkit-font-smoothing: antialiased;
   }
body{
	font-family: 'Open Sans', sans-serif;
	margin:0;
	padding:0;
	overflow-x: hidden;
}

#bg{
	display: flex;
	background:url(https://www.latmultilingual.com/landing/bg.jpg) center center no-repeat;
	background-size: cover;
	
	flex-wrap: wrap;
	justify-content: center;
	min-height: 100vh;
	width:100vw;
	align-items: center;
}
#bg:after{
content:'';
min-height:inherit;
font-size:0;
}
#box{
	width:80%;
	max-width:700px;
	padding:5%;
	background:#fff;
	-webkit-box-shadow: 10px 10px 29px 0px rgba(0,0,0,0.22);
-moz-box-shadow: 10px 10px 29px 0px rgba(0,0,0,0.22);
box-shadow: 10px 10px 29px 0px rgba(0,0,0,0.22);
}


#box img{
	width:250px;
	height:63px;
	display: block;
	margin:0 auto 30px auto;
}

p{
	font-size:14px;
	line-height:22px;
	color:#333;
}

p a{
	color:#0384ad;
	text-decoration: none;
}

p a:hover{
	color:#01587f;
}

.en #en{
	font-weight:bold;
	color:#0384ad;
}
.fr #fr{
	font-weight:bold;
	color:#0384ad;
}
#switcher{
	font-size:12px;
	text-transform: uppercase;
	float:right;
	margin-right:-8%;
	margin-top:-8%;
	color:#aaa;
}

#switcher span{
	cursor:pointer;
}

#en-content, #fr-content{
	display: none;
}

.en #en-content{
	display: block;
}
.fr #fr-content{
	display: block;
}

#box img.french{
	  	display: none;
}

.fr #box img.english{
	display: none;
}

.fr #box img.french{
	display: block;
}

@media only screen and (max-width: 600px) {
  
  	#box img{
	  	width:200px;
	  	height:50px;
	  	margin-top:10px;
  	}
  	
  
  	
  	
  	#box{
	  	width:100%;
	  	padding:10%;
  	}
  	
  	#bg{
	  	padding:10%;
  	}
	p{
		font-size:12px;
		line-height:19px;
		color:#333;
	}
	#switcher{
	font-size:10px;
	
}

}