/* IOL Match landing page - Vent d'Autan */

/* Document */

	html { font-family:"Poppins", sans-serif; font-size:16px; font-weight:400; font-style:normal; color:#222; background-color:#839FBD; margin:0; padding:0; width:100%; }
	body { margin:0; padding:0; width:100%; overflow-x:hidden; overflow-y:auto; }

/* Generic */

	.container { width:1600px; max-width:100%; padding:0 30px; margin:0 auto; }

	.columns { display:flex; justify-content:center; align-items:center; }
	.columns .column { flex:1 1 auto; }

	.centered { text-align:center; }

	.button { display:inline-block; padding:10px 45px; border-radius:22.5px; background-color:#436C9B; color:#FFF;
		font-size:18px; line-height:24px; font-weight:300; text-decoration:none; text-shadow:none; }
	.button:hover { background-color:#FFF; color:#000; box-shadow:0 0 15px #839FBD; }

	.insert { padding:45px 60px; border-radius:5px; background-color:rgba(0,0,0,0.5); box-shadow:0 0 45px 15px rgba(0,0,0,0.25); }
	.insert p { margin:0 0 15px 0; }
	.insert p:last-child { margin:0; }

	.icon { vertical-align:middle; filter:drop-shadow(0 5px 10px rgba(0,0,0,0.5)); }

	.screen { display:block; }
	.mobile { display:none; }

/* Header */

	/* Structure */

	header { position:fixed; z-index:2; top:0; left:0; right:0; padding:18px 0 14px 0; background-color:#2220; transition:background-color .3s ease; text-shadow:0 1px 2px rgb(0,0,0); }
	header.active { background-color:#222; box-shadow:0 5px 15px rgba(0,0,0,0.5); }
	header .container { display:flex; justify-content:space-between; align-items:flex-start; padding:0; }

	/* Title */

	header .title { flex:0 0 auto; padding:0 30px; font-size:24px; line-height:25px; font-weight:400; }
	header .title a { display:inline-block; color:#FFF; text-decoration:none; transition:opacity 0.15s ease; }
	header .title a:hover { opacity:.75; }
	header .title a img { display:block; height:88px; width:auto; margin:0; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
	header .title a svg { display:inline-block; vertical-align:top; margin:0 5px 0 0; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.6)); }

	/* Menu */

	header nav { flex:1 1 auto; padding:0 30px; margin:15px 0; display:flex; justify-content:flex-end; align-items:center; }

	header nav > a { flex:0 0 auto; display:block; margin:5px 0; padding:10px 15px; font-size:18px; line-height:25px; font-weight:200; color:#FFF; text-decoration:none; }
	header nav > a:hover { background-color:#0008; color:#FFF; }

	header a.button { margin:5px 0 5px 15px; padding:10px 45px; border-radius:22.5px; background-color:#436C9B; line-height:25px; font-weight:300; text-shadow:none; }
	header a.button:hover { background-color:#FFF; color:#000; box-shadow:0 0 15px #839FBD; }
	header a.button .fas { display:inline-block; vertical-align:top; font-size:16px; line-height:25px; margin:0 10px 0 0; opacity:0.5; }

	header .header-nav .spacer,
	header .nav-toggle { display:none; }

	/* Lang */

	header .language { flex:0 0 auto; align-self:center; display:block; position:relative; margin:0 30px 0 0; padding:10px; 
		border:1px solid rgba(255,255,255,0.4); border-radius:10px; cursor:pointer; }
	header .language .selector { display:flex; flex-direction:column; opacity:0; position:absolute; top:-1px; right:-1px; 
		padding:10px; background-color:#FFF; border:1px solid #FFF; border-radius:10px; pointer-events:none; transition:opacity 0.15s ease; }

	header .language .current img { display:none; width:auto; height:18px; cursor:pointer; pointer-events:none; }
	header .language .current img.active { display:block; }

	header .language.open .selector { opacity:1; pointer-events:all; }
	
	header .language .selector a.lang { display:block; text-shadow:none; cursor:pointer; opacity:1; transition:opacity 0.15s ease; order:2; }
	header .language .selector a.lang:not(.active) { margin-top:10px; }
	header .language .selector a.lang.active { order:1; }
	header .language .selector a.lang:hover { opacity:0.75; }
	header .language .selector a.lang img { display:block; width:auto; height:18px; }

/* Content */

	main { display:block; width:100%; background-image:linear-gradient(-120deg, #839FBD 0%, #436C9B 100%); }
	main section { width:100%; display:flex; justify-content:center; align-items:center; padding:0; margin:0; color:#FFF; }

	main section h2 { font-size:48px; line-height:60px; font-weight:400; margin:0 0 30px 0; }
	main section h3 { font-size:24px; line-height:45px; font-weight:300; }
	main section h4 { font-size:16px; line-height:30px; font-weight:300; letter-spacing:2px; margin:0 0 30px 0; }

	main section p { font-size:16px; line-height:30px; font-weight:300; }

	main section ul li { list-style:disc; font-size:15px; line-height:30px; font-weight:300; margin:0 0 30px 0; }
	main section ul li::marker { color:#FB0; font-size:16px; line-height:30px; }
	main section ul li:last-child { margin:0; }
	
	main section strong { font-weight:600; }

	/* Fullscreen video */

	#video { height:100vh; background:transparent; justify-content:flex-start; align-items:flex-end; }
	#video .container { margin-bottom:60px; text-shadow:0 1px 2px rgb(0,0,0); }
	#video .title { margin-bottom:0; }
	#video .title .logo { filter:drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
	#video .background-video { position:fixed; z-index:-1; left:0; top:0; object-fit:cover; width:100%; height:100vh; }

	/* Preview */

	#apercu { height:100vh; background-image:linear-gradient(-120deg, #839FBD 0%, #436C9B 100%); }
	#apercu .columns  { justify-content:center; margin-top:5%; }
	#apercu .columns .column { flex:0 1 80%; margin-left:15vw; }
	#apercu .columns .column + .column { flex:0 0 20%; }
	#apercu .image { display:block; margin:0 auto 0 -30vw; transform:rotate(350deg); filter:drop-shadow(0 20px 30px rgba(0,0,0,0.5)); }
	#apercu .insert .title { font-size:72px; line-height:75px; margin:0; }
	#apercu .insert .button { margin:15px 0 0 0; }

	/* Patients */

	#patients { min-height:calc(100vh - 120px); background-color:#839FBD; background-attachment:fixed; background-position:center 30px; background-repeat:no-repeat; background-size:cover; }
	@media (min-width:769px) { #patients { background-image:url("../img/iol_match_preview.jpg"); } }
	#patients .insert { width:35%; margin-left:5vw; backdrop-filter:blur(6px); margin:270px 0 0 0; }

	/* Checklist */

	#checklist { height:calc(100vh - 120px); align-items:stretch; background:#436C9B; }
	#checklist .container { flex:1 0 100%; align-items:stretch; }
	#checklist .columns .column { flex:1 0 30%; display:flex; flex-direction:column; justify-content:center; align-items:center; background-image:linear-gradient(90deg, #436C9B 0%, #839FBD 100%); }
	#checklist .columns .column + .column { flex:1 0 70%; background:#839FBD url("../img/back_dark.png") center center no-repeat; background-size:cover; }
	#checklist .image { z-index:1; margin-left:50%; width:auto; max-height:80%; filter:drop-shadow(-20px 20px 20px rgba(0,0,0,0.5)); }
	#checklist .item { width:50%; margin-right:10%; }
	#checklist .item h4 { color:#73B4FF; }
	#checklist .icon { margin:0 30px 0 0; }

	/* Steps */

	#etapes { min-height:calc(100vh - 120px); align-items:flex-end; background-color:#839FBD; 
		background-attachment:fixed; background-position:center 60px; background-repeat:no-repeat; background-size:cover; }
	@media (min-width:769px) { #etapes { background-image:url("../img/back_steps.jpg"); } }
	#etapes .insert { width:65%; margin:0 auto 5% auto; background-color:rgba(0,0,0,0.6); backdrop-filter:blur(6px); }
	#etapes .title { text-align:center; }

	/* Informations */

	#informations { min-height:calc(100vh - 120px); flex-direction:column; padding:30px 0;
		background:#839FBD center center no-repeat; background-image:linear-gradient(120deg, #839FBD 0%, #436C9B 100%); background-size:cover; }
	#informations .icon { margin:0 auto; }
	#informations .title { text-align:center; margin:0; }
	#informations .columns .column { flex:0 0 35%; margin:0 5% 0 0; text-align:right; }
	#informations .columns .column + .column { flex:0 0 45%; text-align:left; }
	#informations .image { margin:0 auto 15px auto; max-width:100%; height:auto; }
	#informations ul { margin:45px auto; }
	#informations .button { padding:18px 60px; margin:0 0 0 30px; border-radius:30px; font-size:20px; background-color:#222; box-shadow:0 0 30px rgba(255,255,255,0.25); }
	#informations .button:hover { background-color:#436C9B; color:#FFF; box-shadow:0 0 15px #839FBD; }

	/* Learning */

	#apprentissage { min-height:75vh; padding:5% 0 0 0; background:#839FBD url("../img/back_learning.jpg") center center no-repeat; align-items:flex-end;
		background-attachment:fixed; background-position:center 60px; background-repeat:no-repeat; background-size:cover; }
	#apprentissage .insert { width:80%; margin:0 auto 60px auto; text-align:left; background-color:rgba(0,0,0,0.6); backdrop-filter:blur(6px); }
	#apprentissage .icon { margin:0 auto; }
	#apprentissage .title { text-align:center; }
	#apprentissage .button { margin-top:20px; padding:18px 60px; border-radius:30px; font-size:20px; }

	/* Newsletter */

	#newsletter { min-height:40vh; padding:5% 0; background-image:linear-gradient(90deg, #436C9B 0%, #839FBD 100%); }
	#newsletter form { display:block; margin:30px auto; }
	#newsletter form div { display:inline; }
	#newsletter form label { display:block; margin:0 0 15px 0; font-size:16px; font-weight:300; line-height:30px; }
	#newsletter form label svg { display:inline-block; vertical-align:top; margin:3px 12px 0 0; line-height:30px; height:22px; width:auto; opacity:0.5; }
	#newsletter form input { min-width:400px; max-width:100%; vertical-align:top; border-width:0; border-radius:30px; padding:12px 200px 12px 30px; font-size:16px; line-height:30px; }
	#newsletter form button { vertical-align:top; margin:5px 0 0 -165px; width:160px; border-width:0; padding:10px 15px; border-radius:30px; font-size:18px; font-weight:300; box-shadow:none; 
		transition:background-color .3s ease, color .3s ease; }
	#newsletter form button:hover { background-color:#222; color:#DDD; cursor:pointer; }

	/* Forms */

	.response { display:inline-block; padding:15px 30px; font-size:16px; font-weight:300; line-height:30px; border-radius:5px; background-color:rgba(0,0,0,0.5); margin:0 0 30px 0; }
	.response.success { color:#0F8; }
	.response.invalid { color:#FB0; }
	.response.error { color:#FB0; }

	.grecaptcha-badge { display:none !important; }
	.grecaptcha-badge.visible { display:block !important; }

/* Footer */

	footer { padding:30px 60px; background:transparent url("../img/back_footer.jpg") center bottom no-repeat; background-size:cover; }

	footer .container { max-width:calc(100% - 60px); display:flex; justify-content:space-between; align-items:flex-end; }

	footer .social { flex:0 0 auto; display:flex; justify-content:flex-start; align-items:flex-start; }
	footer .social a { display:block; margin:0; padding:10px; font-size:24px; line-height:30px; color:#FFF; text-decoration:none; white-space:nowrap; }
	footer .social a:hover { background-color:#0008; color:#FFF; }

	footer .legal { flex:1 1 auto; display:flex; justify-content:flex-end; align-items:flex-start; }
	footer .legal a { display:block; margin:0; padding:5px 15px; font-size:14px; line-height:30px; font-weight:200; color:#FFF; text-decoration:none; white-space:nowrap; }
	footer .legal a:hover { background-color:#0008; color:#FFF; }

	footer .copyrights { text-align:center; font-size:13px; font-weight:200; line-height:25px; color:#CCC; }
	footer .container + .copyrights { margin:30px 0 0 0; padding:30px 0 0 0; border-top:1px solid rgba(255,255,255,0.25); }

/* Cookies */

	body .termsfeed-com---nb { z-index:6; font-family:"Poppins", sans-serif; width:600px; max-width:100%; }
	body .termsfeed-com---nb .cc-nb-main-container { padding:15px; }
	body .termsfeed-com---nb .cc-nb-title-container { display:none; }
	body .termsfeed-com---palette-dark.termsfeed-com---nb { background-color:#436C9B; }
	body .termsfeed-com---nb .cc-nb-okagree, 
	body .termsfeed-com---nb .cc-nb-reject, 
	body .termsfeed-com---nb .cc-nb-changep { margin-bottom:0 !important; box-shadow:none !important; }
	body .termsfeed-com---palette-dark .cc-nb-okagree { background-color:#222; color:#FFF; }
	body .termsfeed-com---palette-dark .cc-nb-changep { background-color:rgba(0,0,0,0.25); color:#FFF; font-weight:300; }
	body .termsfeed-com---palette-dark .cc-nb-text { font-size:13px; line-height:25px; font-weight:300; }

	body .termsfeed-com---pc-dialog { font-family:"Poppins", sans-serif; }
	body .termsfeed-com---palette-dark .cc-pc-head-close:active,
	body .termsfeed-com---palette-dark .cc-pc-head-close:focus { border-color:transparent; }
	body .termsfeed-com---palette-dark .cc-pc-head { background-color:#436C9B; }
	body .termsfeed-com---palette-dark .cc-cp-foot-save { background-color:#436C9B; color:#FFF; font-size:16px; font-weight:500; text-transform:uppercase; }
	body .termsfeed-com---palette-dark .cc-pc-head-lang select { font-size:14px; font-weight:400; height:40px; box-shadow:none !important; }
	body .termsfeed-com---pc-dialog .cc-cp-body-content-entry-text { font-size:14px; line-height:25px; font-weight:300; }
	body .termsfeed-com---pc-dialog input[type=checkbox].cc-custom-checkbox:checked+label:before { background-color:#68B; }
	body .termsfeed-com---palette-dark .cc-cp-body-content-entry a { color:#8BF; box-shadow:none !important; }
	body .termsfeed-com---palette-dark .cc-cp-body-tabs { background-color:#68B; }
	body .termsfeed-com---palette-dark .cc-cp-body-tabs-item-link { border-width:0; box-shadow:none !important; color:#222; }
	body .termsfeed-com---palette-dark .cc-cp-body-tabs-item { border-width:0; }
	body .termsfeed-com---palette-dark .cc-cp-body-tabs-item[active=true] button { border-width:0; box-shadow:none !important; }
	body .termsfeed-com---palette-dark .cc-cp-foot-byline { font-size:12px; line-height:20px; font-weight:300; color:#AAA; }
	body .termsfeed-com---palette-dark .cc-cp-foot-byline a { color:#DDD; box-shadow:none !important; }

	#open_preferences_center { position:fixed; z-index:5; bottom:0; left:15px; padding:6px 12px 4px 12px; border-radius:10px 10px 0 0; background-color:#436C9B; color:#FFF;
		font-size:12px; line-height:20px; font-weight:300; text-decoration:none; border:1px solid #222; border-bottom-width:0; }
	#open_preferences_center:hover { background-color:#FFF; color:#000; }

/* Popups */

	#notice { position:fixed; z-index:10; top:0; left:0; right:0; bottom:0; background-color:rgba(0,0,0,0.75); opacity:1; overflow:hidden; transition:opacity 0.3s ease; }
	#notice.hidden { pointer-events:none; opacity:0; }

	#notice .content { position:absolute; z-index:11; top:30px; left:30px; right:30px; bottom:30px; overflow:auto; background-color:#FFF; border:20px solid #FFF; padding-right:20px; }

	.content h1 { font-size:36px; line-height:45px; font-weight:600; color:#000; margin-bottom:15px; }
	.content h2 { font-size:28px; line-height:40px; font-weight:500; color:#000; margin-bottom:15px; }
	.content h3 { font-size:24px; line-height:30px; font-weight:500; color:#000; margin-bottom:15px; }

	.content p { font-size:14px; line-height:30px; font-weight:400; color:#444; margin-bottom:15px; }
	.content p:last-child { margin-bottom:0; }

	.content ul { list-style:none; margin-bottom:15px; }
	.content ul:last-child { margin-bottom:0; }
	.content ul li { list-style:none; margin-bottom:0; font-size:14px; line-height:30px; font-weight:400; color:#444; }
	.content ul li:before { content:"\2022"; display:inline-block; vertical-align:top; margin-right:10px; font-size:20px; line-height:30px; font-weight:600; color:#436C9B; }

	.content a:not(.button),
	.content a:not(.button):visited { text-decoration:underline; color:#436C9B; }
	.content a:not(.button):focus,
	.content a:not(.button):hover { color:#000; }

	.content strong { font-weight:600; color:#222; }
	.content label { font-weight:500; color:#222; }

	.close-button { position:absolute; z-index:12; top:15px; right:15px; width:30px; height:30px; border-radius:20px; background-color:#436C9B; color:#FFF; border:2px solid #222; 
		text-align:center; font-size:24px; font-weight:300; line-height:32px; text-decoration:none; cursor:pointer; overflow:hidden; }
	.close-button:hover { background-color:#FFF; color:#436C9B; cursor:pointer; }

	.content .button { margin-top:15px; border:1px solid #436C9B; }
	.content .button:hover { box-shadow:none; }

/* Pages */

	/* Legal */

	#legal { padding:120px 0 45px 0; }
	#legal .container > h2 { text-align:center; }

	#legal .summary { text-align:center; margin:0 0 45px 0; }
	#legal .summary a,
	#legal .summary a:visited { display:inline-block; vertical-align:top; font-size:15px; line-height:25px; color:#FFF; text-decoration:none;
		margin:0 7.5px; padding:5px 15px; background-color:rgba(0,0,0,0.5); border-radius:10px; }
	#legal .summary a:hover,
	#legal .summary a:focus { color:#FFF; background-color:rgba(0,0,0,0.75); }

	#legal .content { background-color:#FFF; padding:40px 45px; border-radius:30px; }
	#legal .content .part + .part { border-top:1px solid #839FBD; padding-top:30px; margin-top:35px; }

	/* Contact */

	#contact { padding:120px 0 45px 0; }
	#contact .container { text-align:center; display:flex; flex-wrap:wrap; justify-content:center; }

	#contact .title { flex:0 0 100%; }

	#contact .form { flex:0 1 720px; display:block; min-width:0; box-sizing:border-box; }

	#contact .form label { display:block; text-align:left; font-size:14px; line-height:30px; font-weight:300; margin:5px 0; }

	#contact .form input { display:block; text-align:left; width:100%; max-width:100%; border:1px solid #436C9B; padding:5px 10px; background-color:rgba(255,255,255,0.6); 
		font-family:"Poppins", sans-serif; font-size:15px; line-height:30px; min-width:0; border-radius:0; box-sizing:border-box; outline:0; }
	#contact .form input:focus { border-color:#FFF; background-color:rgba(255,255,255,0.8); outline:0; }

	#contact .form textarea { display:block; width:100%; max-width:100%; min-width:100%; min-height:150px; border:1px solid #436C9B; padding:5px 10px; background-color:rgba(255,255,255,0.6);
		font-family:"Poppins", sans-serif; font-size:15px; line-height:25px; border-radius:0; resize:vertical; box-sizing:border-box; outline:0; }
	#contact .form textarea:focus { border-color:#FFF; background-color:rgba(255,255,255,0.8); outline:0; }

	#contact .form button { margin:30px 0 0 0; padding:10px 30px; border-radius:22.5px; background-color:rgba(0,0,0,0.6); color:#FFF; 
		font-size:16px; line-height:25px; font-weight:300; text-transform:uppercase; border-width:0; }
	#contact .form button:hover,
	#contact .form button:focus { background-color:rgba(0,0,0,0.8); color:#FFF; cursor:pointer; }

	#contact .form .response { width:calc(100% - 30px); padding:15px; margin-bottom:15px; }

	#contact .form .required { border-color:#D00; background-color:rgba(255,225,225,0.6); }

	#contact .form .form-row { display:flex; justify-content:space-between; align-items:flex-start; }
	#contact .form .form-row .form-cell { flex:0 0 calc(50% - 10px); }

/* Debug */

	.debug { display:block !important; font-family:console, monospace; background:#FFF; padding:15px; border:1px solid #F80; text-align:left; color:#444; }

/* Responsive */

	/* Tablet */

	@media (max-width:768px) {

		/* Generic */

			.container { width:100%; flex:0 0 100%; padding:0; overflow:visible; }

			.insert { padding:30px 45px; }

			main section h2 { font-size:36px; line-height:45px; }
			main section h3 { font-size:20px; line-height:35px; }

			.screen { display:none; }
			.mobile { display:block; }

		/* Header */

			header { right:initial; width:100vw; padding:0; text-shadow:none; transition:all .15s ease; height:80px; }
			header.active { box-shadow:0 5px 15px rgba(0, 0, 0, 0.15); }

			header .container { align-items:stretch; flex-wrap:wrap; }

			header .title { order:1; flex:1 0 auto; padding:12px 15px; }
			header .title a img { height:55px; }

			header .language { order:3; margin-right:30px; }

			header .nav-toggle { order:4; display:flex; align-items:center; flex:0 0 auto; background-color:transparent; border-width:0; position:relative; width:30px; margin-right:30px; }
			header .nav-toggle .toggle-icon { position:absolute; width:30px; height:20px; top:50%; left:50%; transform:translate(-50%, -50%); }

			header .header-nav { order:5; flex:0 1 100%; max-height:0; overflow:hidden; margin:0; padding:0 15px; justify-content:flex-start; background-color:#436C9B; transition:all .15s ease; }
			header .header-nav.opened { max-height:calc(100vh - 80px); }

			header .header-nav > a { margin:15px 0; padding:5px 20px; }
			header .header-nav > a.button { margin:10px 0 10px 20px; padding:10px 20px; background-color:#222; }

			header .app-button { order:2; flex:0 0 auto; align-self:center; margin:0 15px 0 0; }
			header .app-button a.button { padding:10px 30px; }

			header .header-nav .spacer { display:block; flex:1 0 auto; height:100%; }

			/* Toggle */

			.nav-toggle .toggle-icon .icon-line { position:absolute; left:0; background-color:#FFF; height:2px; width:100%; border-radius:2px; pointer-events:none; 
				-webkit-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; }
			.nav-toggle .toggle-icon .icon-line-1 { top:0; }
			.nav-toggle .toggle-icon .icon-line-2 { top:0; bottom:0; margin:auto; }
			.nav-toggle .toggle-icon .icon-line-2:before { content:''; position:absolute; left:0; width:100%; height:2px; background-color:#FFF; border-radius:2px; }
			.nav-toggle .toggle-icon .icon-line-3 { bottom:0; }

			.nav-toggle.active .toggle-icon .icon-line.icon-line-1 { opacity:0; -webkit-transform:translate3d(-2*(18px)/2,0,0); transform:translate3d(-2*(18px)/2,0,0); }
			.nav-toggle.active .toggle-icon .icon-line.icon-line-2 { -webkit-transform:rotate(45deg); transform:rotate(45deg); }
			.nav-toggle.active .toggle-icon .icon-line.icon-line-2:before { -webkit-transform:rotate(-90deg); transform:rotate(-90deg); }
			.nav-toggle.active .toggle-icon .icon-line.icon-line-3 { opacity:0; -webkit-transform:translate3d(2*(18px)/2,0,0); transform:translate3d(2*(18px)/2,0,0); }

		/* Footer */

			footer { padding:15px 0; }

			footer .container { max-width:calc(100% - 30px); align-items:center; }
			footer .container + .copyrights { margin-top:15px; padding-top:15px; }

			footer .social a { padding:10px; line-height:20px; }

			footer .legal a { font-size:13px; line-height:20px; }

			footer .copyrights { font-size:12px; line-height:20px; }

		/* Content */

			#apercu .columns .column { flex:0 1 65%; margin-left:0; }
			#apercu .columns .column + .column { flex:0 0 35%; }
			#apercu .image { max-width:140%; height:auto; margin:0 0 0 -45%; }
			#apercu .insert { margin-left:30px; }
			#apercu .insert .title { font-size:54px; line-height:60px; }
			#apercu .insert .button { margin:30px 0 15px 0; }
			#apercu .button.mobile { display:none; }

			#patients { min-height:calc(100vh - 80px); background-image:url("../img/iol_match_preview_mobile.jpg"); background-position:center 60px; align-items:flex-end; }
			#patients .insert { width:calc(100% - 90px); margin:0; padding:45px; border-radius:0; }

			#checklist { height:calc(100vh - 80px); }
			#checklist .item { width:60%; margin:0 0 0 5%; }

			#etapes { height:calc(100vh - 80px); background-image:url("../img/back_steps_mobile.jpg"); }
			#etapes .insert { width:calc(100% - 90px); height:calc(100vh - 80px - 60px); display:flex; align-items:center; margin:0; border-radius:0; box-shadow:none; }

			#informations .columns { flex-direction:column; }
			#informations .columns .column { flex:0 0 100%; margin:0; }
			#informations .columns .column + .column { flex:0 0 auto; padding:0 30px 0 45px; }
			#informations .image { max-height:52vh; height:52vh; width:auto; margin:30px 0 20px 0; }
			#informations ul { margin:45px 0 15px 0; }

			#apprentissage { height:calc(100vh - 80px); padding:0; background-image:url("../img/back_learning_mobile.jpg"); }
			#apprentissage .insert { width:calc(100% - 90px); height:calc(100vh - 80px - 60px); display:flex; align-items:center; margin:0; border-radius:0; box-shadow:none; }

			#newsletter form { max-width:80%; margin:30px auto 10px auto; }
			#newsletter form input { min-width:500px; max-width:100%; width:100%; box-sizing:border-box; padding-right:180px; }

		/* Popup */

			#notice .content { top:20px; left:20px; right:20px; bottom:20px; border:20px solid #FFF; }

			.close-button { top:3px; right:3px; }

		/* Pages */

			#contact { padding-top:80px; }
			#contact .title { font-size:30px; margin-bottom:15px; }

			#legal { padding:80px 0 0 0; }
			#legal .title { font-size:30px; margin-bottom:15px; }
			#legal .summary { margin-bottom:20px; }
			#legal .summary a,
			#legal .summary a:visited { font-size:13px; margin:0 5px 10px 5px; }
			#legal .content { padding:30px; border-radius:0; }

			body .termsfeed-com---pc-dialog { display:flex !important; align-items:center; margin:15px; width:calc(100% - 30px); max-width:calc(100% - 30px); min-height:calc(100vh - 30px); }
			body .termsfeed-com---pc-dialog .cc-pc-container { box-shadow:0 0 30px rgba(0,0,0,0.75); }
			body .termsfeed-com---pc-overlay { background:rgba(0,0,0,0.75); }

		}

	/* Smartphone */

	@media (max-width:480px) {

		/* Header */

			header .header-nav { display:block; position:relative; padding:0; text-align:center; background-color:#222; }

			header .header-nav.opened { overflow:visible; }
			header .header-nav.opened:after { display:block; content:""; position:absolute; bottom:-30px; left:0; right:0; height:30px; 
				background-image:linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 100%); }
			
			header .header-nav .spacer { display:none; }

			header .header-nav a { margin:0; padding:15px; background-color:#436C9B; border-bottom:1px solid #222; }
			header .header-nav a.button { margin:30px 0; padding:15px 30px; background-color:#436C9B; border-radius:28px; font-size:20px; }

		/* Footer */

			footer .container { flex-wrap:wrap; }

			footer .social { flex:0 0 100%; justify-content:center; }
			footer .social a { font-size:36px; line-height:36px; margin:10px 0 15px 0; }

			footer .legal { flex:0 0 100%; flex-wrap:wrap; justify-content:flex-start; }
			footer .legal a { flex:0 0 calc(50% - 30px); }

			footer .container + .copyrights { margin-top:30px; }

		/* Content */

			#apercu .image { max-width:250%; margin:0 0 0 -77.5%; }
			#apercu .insert { margin-left:0; border-radius:0; padding:30px; }
			#apercu .insert .title { font-size:42px; line-height:50px; margin:15px 0; }
			#apercu .insert .button { margin:20px 0 10px 0; padding:10px 20px; }

			#patients .insert { width:calc(100% - 60px); padding:45px 30px; }

			#checklist { height:auto; min-height:calc(100vh - 80px); }
			#checklist .columns { flex:0 0 auto; flex-wrap:wrap; }
			#checklist .columns .column { flex:0 0 100%; }
			#checklist .columns .column + .column { flex:0 1 100%; padding:50% 30px 45px 30px; }
			#checklist .image { width:60%; height:auto; max-height:initial; margin:10% 0 -40% 0;  }
			#checklist .item { width:100%; margin:0; text-align:center; }
			#checklist .item h4 { margin:0 0 15px 0; }

			@keyframes sliding { from { background-position:left 15% center; } to { background-position:right center; } }

			#etapes { height:auto; min-height:calc(100vh - 80px); background-position:left 15% center; animation:sliding 12s ease-in-out infinite alternate-reverse; }
			#etapes .insert { width:calc(100% - 60px); height:auto; min-height:calc(100vh - 80px - 60px); padding:30px; }

			#informations .title { padding:0 15px; }

			#apprentissage { height:auto; min-height:calc(100vh - 80px); }
			#apprentissage .insert { width:calc(100% - 60px); height:auto; min-height:calc(100vh - 80px - 60px); padding:30px; }
			#apprentissage .button { margin-bottom:15px; }

			#newsletter { padding:45px 0; }
			#newsletter .title { font-size:30px; padding:0 15px; }
			#newsletter form { max-width:100%; padding:0 30px; }
			#newsletter form input { display:block; min-width:100%; padding:10px 15px; text-align:center; font-size:14px; }
			#newsletter form button { margin:20px auto 0 auto; padding:15px 30px; background-color:#222; }

		/* Pages */

			#legal .container > h2 { padding:0 15px; }

			#contact .form { flex:0 0 100%; padding:0 15px; }
			#contact .form .form-row { display:block; }

		}

	/* Small smartphone */

	@media (max-width:400px) {

		/* Generic */

			main section h3 { font-size:18px; line-height:30px; }

		/* Content */

			#apercu { flex-wrap:wrap; align-content:center; }
			#apercu .columns { flex:0 0 100%; margin-top:15%; }
			#apercu .columns .column { flex:0 1 70%; }
			#apercu .columns .column + .column { flex:0 0 30%; }
			#apercu .insert { padding:30px 60px 30px 20px; }
			#apercu .insert .title { font-size:36px; line-height:45px; }
			#apercu .insert .button { display:none; }
			#apercu .image { max-width:280%; margin-left:-90%; }
			#apercu .button.mobile { display:block; flex:0 0 auto; margin:45px auto 0 auto; background-color:#222; padding:15px 30px; border-radius:27px; }

			#informations .columns .column { padding:0 15px; }
			#informations .columns .column + .column { padding:0 20px 0 35px; }
			#informations .image { max-height:initial; height:auto; max-width:100%; }
			#informations .button { padding:18px 30px; margin:0; }

		/* Footer */

			footer .social a { margin:10px 0; }
			footer .legal a { flex:0 0 100%; text-align:center; padding:10px 0; }

			footer .copyrights { padding-bottom:30px !important; }

		}