/********
***********************
**** RESET
***********************
*********/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/********
***********************
**** FONTS
***********************
*********/
@font-face {
  font-family: 'OpenSans';
  src: url('../assets/fonts/OpenSans/OpenSans-Regular.ttf');
}

@font-face {
  font-family: 'OpenSans';
  src: url('../assets/fonts/OpenSans/OpenSans-Italic.ttf');
  font-style: italic;
}

@font-face {
  font-family: 'OpenSans';
  src: url('../assets/fonts/OpenSans/OpenSans-Semibold.ttf');
  font-weight: 600;
}

@font-face {
  font-family: 'OpenSans';
  src: url('../assets/fonts/OpenSans/OpenSans-SemiboldItalic.ttf');
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: 'OpenSans';
  src: url('../assets/fonts/OpenSans/OpenSans-Bold.ttf');
  font-weight: 700;
}

@font-face {
  font-family: 'OpenSans';
  src: url('../assets/fonts/OpenSans/OpenSans-ExtraBold.ttf');
  font-weight: 800;
}

@font-face {
  font-family: 'OpenSansLight';
  src: url('../assets/fonts/OpenSans/OpenSans-Light.ttf');
}

/********
***********************
**** LAYOUT
***********************
*********/
::-webkit-scrollbar,
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece {
  background-color: transparent;
}

::-webkit-scrollbar-track {
  margin: 10px 0;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 25px;
  background-color: #002157;
}

.white-panel--futurae ::-webkit-scrollbar-thumb {
  background-color: #07eefe;
}


b,
strong {
  font-weight: bold;
}

i,
em {
  font-style: italic;
}

/********
***********************
**** LAYOUT
***********************
*********/
.page-background {
  width: 100%;
  height: 100%;
  background-image: url('../assets/images/background.jpg');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  overflow: hidden;
}

.page-background--futurae {
  --height-header: 160px;
  --height-footer: 80px;
  background-image: url('../assets/images/trace.png');
  background-position: 0 13vh;
  background-color: #08092d;
}

.page-container-inner {
  width: 100%;
  height: calc(100% - 160px);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.page-container-inner--futurae {
  height: calc(100% - (var(--height-header) + var(--height-footer)));
}

.white-panel {
  position: relative;
  margin: auto;
  padding: 80px;
  width: 80%;
  max-width: 900px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1);
  overflow: auto;
  max-height: 100%;
}

/** Futurae style */
.white-panel--futurae {
  position: relative;
  background: transparent;
  /*margin: 20vh 150px 0;*/
  padding: 0;
  /*width: 90%;*/
  /*max-width: 1400px;*/
  height: 100%;
  max-height: none;
  overflow: visible;
  color: white;
}

.white-panel--futurae *,
.support-question {
  color: white !important;
}

.white-panel--futurae > div:before,
.white-panel--futurae > div:after {
  position: absolute;
  width: 70px;
  height: 70px;
  content: ' ';
  border-top: 1px solid rgba(7, 238, 254, 1);
  z-index: 9;
}

.white-panel--futurae > div:before {
  top: 0;
  left: 0;
  transform: rotate(-45deg) translate(0, 20px);
}

.white-panel--futurae > div:after {
  bottom: 0;
  right: 0;
  transform: rotate(135deg) translateY(21px);
}

.white-panel--futurae--download {
  max-width: 1200px;
}

.white-panel--futurae--download .white-panel__inner__scroll {
  display: flex;
  align-items: center;
}

.white-panel__inner {
  height: 100%;
  padding-bottom: 50px;
}

.white-panel__inner__scroll {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 100px 40px 40px;
  overflow: auto;
}

.white-panel__inner__scroll__inner {
  width: 100%;
}


.white-panel__inner__bgc {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  clip-path: polygon(50px 0, 100% 0, 100% 50px, 100% calc(100% - 50px), calc(100% - 50px) 100%, 0px 100%, 0% calc(100% - 50px), 0% 50px);
  padding: 5px 40px 50px;
}

.white-panel__inner__bgc:before {
  position: absolute;
  content: ' ';
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  /*opacity: 0.81;*/
  right: 0;
  background-color: #1b1c3e;
  border: 1px solid rgba(7, 238, 254, 1);
}

.airfrance-logo {
  width: 100%;
  height: 20px;
  min-height: 20px;
  background-image: url('../assets/images/logo-af.svg');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  margin: 30px 0;
}

.futurae-logo {
  --padding-top: 40px;
  width: 100%;
  height: calc(var(--height-header) - 2 * var(--padding-top));
  min-height: 20px;
  background-image: url('../assets/images/logo-futurae.png');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  margin: var(--padding-top) 0;
}



/********
***********************
**** GLOBAL
***********************
*********/
html, body {
  height: 100%;
  overflow: hidden;
  line-height: normal;
}

* {
  box-sizing: border-box;
}

body, a {
  font-family: 'OpenSans', sans-serif;
  color: #383838;
}

h1 {
  font-size: 30px;
  margin-bottom: 20px;
}

h2 {
  font-size: 20px;
  margin-bottom: 20px;
  font-weight: 600;
  color: #002157;
}

h1 a,
h2 a,
h3 a,
h4 a {
  color: #002157;
}

.line-before::before {
  content: "";
  height: 2px;
  position: absolute;
  top: 0;
  background: linear-gradient(to right, rgba(0, 33, 87, 0), rgba(0, 33, 87, 1) 20%, rgba(0, 33, 87, 1) 80%, rgba(0, 33, 87, 0));
}

.white-panel--futurae .line-before::before {
  background: white;
}

/********
***********************
**** OS FLEX CONTAINER
***********************
*********/

.os-container {
  display: flex;
  justify-content: space-evenly;
}

.os-part {
  /*flex-grow: 1;*/
  /*text-align: center;*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.download-btn,
.problems-btn,
.link-btn {
  font-size: 18px;
  color: #383838;
  border: 1px solid #818181;
  border-radius: 10px;
  padding: 10px 30px;
  text-decoration: none;
}

.download-btn:hover,
.problems-btn:hover,
.link-btn:hover {
  background-color: #ddd;
}

.os-logo {
  display: inline-block;
  width: 122px;
  height: 122px;
  min-height: 20px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  margin: 20px 0 40px 0;
}

.os-logo-windows {
  background-image: url('../assets/images/windows.svg');
}

.os-logo-windows-2 {
  background-image: url('../assets/images/windows-2.svg');
}

.os-logo-apple {
  background-image: url('../assets/images/apple.svg');
}

.os-logo-apple-2 {
  background-image: url('../assets/images/apple-2.svg');
}

.os-logo-ubuntu {
  background-image: url('../assets/images/ubuntu.svg');
}

.os-logo-ubuntu-2 {
  background-image: url('../assets/images/ubuntu-2.svg');
}

/********
***********************
**** BUTTON FUTURAE
***********************
*********/


.futurae-button-ctn {
  display: inline-block;
  justify-content: center;
  z-index: 10;
  width: 260px;
  height: 73px;
  position: relative;
  cursor: pointer;
}

.futurae-button-ctn:before,
.futurae-button-ctn:after,
.futurae-button-ctn > :last-child:before,
.futurae-button-ctn > :last-child:after {
  position: absolute;
  width: 41px;
  height: 41px;
  content: ' ';
  z-index: -1;
}

.futurae-button-ctn:before {
  border-top: 1px solid rgba(7, 238, 254, 1);
  top: 0;
  left: 0;
  transform: rotate(-36deg) translateY(12px) translateX(2px);
}

.futurae-button-ctn:after {
  top: -5px;
  right: -5px;
  height: calc(100px / 2);
  width: 100px;
  border-top: 5px solid rgba(7, 238, 254, 1);
  border-right: 5px solid rgba(7, 238, 254, 1);
}

.futurae-button-ctn > :last-child:before {
  border-top: 1px solid rgba(7, 238, 254, 1);
  bottom: 0;
  right: 0;
  transform: rotate(-36deg) translateY(30px) translateX(-2px);
}

.futurae-button-ctn > :last-child:after {
  bottom: -5px;
  left: -5px;
  height: calc(100px / 2);
  width: 100px;
  border-bottom: 5px solid rgba(7, 238, 254, 1);
  border-left: 5px solid rgba(7, 238, 254, 1);
}

.futurae-button-ctn a {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0;
  outline: none;
  cursor: pointer;
  background-color: #08092d;
  opacity: 1;
  width: 100%;
  height: 100%;
  border: solid 1px rgba(7, 238, 254, 1);
  color: rgba(7, 238, 254, 1);
  font-size: 24px;
  font-weight: 600;
  z-index: 9;
  clip-path: polygon(35px 0, 100% 0, 100% calc(100% - 25px), calc(100% - 35px) 100%, 0 100%, 0% 25px);
}

.futurae-button-ctn a div {
  color: rgba(7, 238, 254, 1) !important;
}

.futurae-button-ctn a:hover {
  background-color: #181948;
}

.futurae-button-ctn button[disabled] {
  color: rgba(7, 238, 254, 0.5);
}

.futurae-button-ctn .futurae-button-corners {
  width: 100%;
  height: 100%;
}

.futurae-button-ctn-gradient {
  width: 100%;
  height: 7px;
  background-image: linear-gradient(to right, rgba(7, 238, 254, 0) 20%, rgba(7, 238, 254, 1) 30%, rgba(7, 238, 254, 1) 70%, rgba(7, 238, 254, 0) 80%);
  position: absolute;
  top: calc(50% - 7px);
}


/********
***********************
**** LINEARICONS
***********************
*********/
@font-face {
	font-family: 'Linearicons';
	src:url('../assets/fonts/Linearicons/Linearicons.eot?w118d');
	src:url('../assets/fonts/Linearicons/Linearicons.eot?#iefixw118d') format('embedded-opentype'),
		url('../assets/fonts/Linearicons/Linearicons.woff2?w118d') format('woff2'),
		url('../assets/fonts/Linearicons/Linearicons.woff?w118d') format('woff'),
		url('../assets/fonts/Linearicons/Linearicons.ttf?w118d') format('truetype'),
		url('../assets/fonts/Linearicons/Linearicons.svg?w118d#Linearicons') format('svg');
	font-weight: normal;
	font-style: normal;
}

.lnr {
	font-family: 'Linearicons';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.lnr-home:before {
	content: "\e800";
}
.lnr-apartment:before {
	content: "\e801";
}
.lnr-pencil:before {
	content: "\e802";
}
.lnr-magic-wand:before {
	content: "\e803";
}
.lnr-drop:before {
	content: "\e804";
}
.lnr-lighter:before {
	content: "\e805";
}
.lnr-poop:before {
	content: "\e806";
}
.lnr-sun:before {
	content: "\e807";
}
.lnr-moon:before {
	content: "\e808";
}
.lnr-cloud:before {
	content: "\e809";
}
.lnr-cloud-upload:before {
	content: "\e80a";
}
.lnr-cloud-download:before {
	content: "\e80b";
}
.lnr-cloud-sync:before {
	content: "\e80c";
}
.lnr-cloud-check:before {
	content: "\e80d";
}
.lnr-database:before {
	content: "\e80e";
}
.lnr-lock:before {
	content: "\e80f";
}
.lnr-cog:before {
	content: "\e810";
}
.lnr-trash:before {
	content: "\e811";
}
.lnr-dice:before {
	content: "\e812";
}
.lnr-heart:before {
	content: "\e813";
}
.lnr-star:before {
	content: "\e814";
}
.lnr-star-half:before {
	content: "\e815";
}
.lnr-star-empty:before {
	content: "\e816";
}
.lnr-flag:before {
	content: "\e817";
}
.lnr-envelope:before {
	content: "\e818";
}
.lnr-paperclip:before {
	content: "\e819";
}
.lnr-inbox:before {
	content: "\e81a";
}
.lnr-eye:before {
	content: "\e81b";
}
.lnr-printer:before {
	content: "\e81c";
}
.lnr-file-empty:before {
	content: "\e81d";
}
.lnr-file-add:before {
	content: "\e81e";
}
.lnr-enter:before {
	content: "\e81f";
}
.lnr-exit:before {
	content: "\e820";
}
.lnr-graduation-hat:before {
	content: "\e821";
}
.lnr-license:before {
	content: "\e822";
}
.lnr-music-note:before {
	content: "\e823";
}
.lnr-film-play:before {
	content: "\e824";
}
.lnr-camera-video:before {
	content: "\e825";
}
.lnr-camera:before {
	content: "\e826";
}
.lnr-picture:before {
	content: "\e827";
}
.lnr-book:before {
	content: "\e828";
}
.lnr-bookmark:before {
	content: "\e829";
}
.lnr-user:before {
	content: "\e82a";
}
.lnr-users:before {
	content: "\e82b";
}
.lnr-shirt:before {
	content: "\e82c";
}
.lnr-store:before {
	content: "\e82d";
}
.lnr-cart:before {
	content: "\e82e";
}
.lnr-tag:before {
	content: "\e82f";
}
.lnr-phone-handset:before {
	content: "\e830";
}
.lnr-phone:before {
	content: "\e831";
}
.lnr-pushpin:before {
	content: "\e832";
}
.lnr-map-marker:before {
	content: "\e833";
}
.lnr-map:before {
	content: "\e834";
}
.lnr-location:before {
	content: "\e835";
}
.lnr-calendar-full:before {
	content: "\e836";
}
.lnr-keyboard:before {
	content: "\e837";
}
.lnr-spell-check:before {
	content: "\e838";
}
.lnr-screen:before {
	content: "\e839";
}
.lnr-smartphone:before {
	content: "\e83a";
}
.lnr-tablet:before {
	content: "\e83b";
}
.lnr-laptop:before {
	content: "\e83c";
}
.lnr-laptop-phone:before {
	content: "\e83d";
}
.lnr-power-switch:before {
	content: "\e83e";
}
.lnr-bubble:before {
	content: "\e83f";
}
.lnr-heart-pulse:before {
	content: "\e840";
}
.lnr-construction:before {
	content: "\e841";
}
.lnr-pie-chart:before {
	content: "\e842";
}
.lnr-chart-bars:before {
	content: "\e843";
}
.lnr-gift:before {
	content: "\e844";
}
.lnr-diamond:before {
	content: "\e845";
}
.lnr-linearicons:before {
	content: "\e846";
}
.lnr-dinner:before {
	content: "\e847";
}
.lnr-coffee-cup:before {
	content: "\e848";
}
.lnr-leaf:before {
	content: "\e849";
}
.lnr-paw:before {
	content: "\e84a";
}
.lnr-rocket:before {
	content: "\e84b";
}
.lnr-briefcase:before {
	content: "\e84c";
}
.lnr-bus:before {
	content: "\e84d";
}
.lnr-car:before {
	content: "\e84e";
}
.lnr-train:before {
	content: "\e84f";
}
.lnr-bicycle:before {
	content: "\e850";
}
.lnr-wheelchair:before {
	content: "\e851";
}
.lnr-select:before {
	content: "\e852";
}
.lnr-earth:before {
	content: "\e853";
}
.lnr-smile:before {
	content: "\e854";
}
.lnr-sad:before {
	content: "\e855";
}
.lnr-neutral:before {
	content: "\e856";
}
.lnr-mustache:before {
	content: "\e857";
}
.lnr-alarm:before {
	content: "\e858";
}
.lnr-bullhorn:before {
	content: "\e859";
}
.lnr-volume-high:before {
	content: "\e85a";
}
.lnr-volume-medium:before {
	content: "\e85b";
}
.lnr-volume-low:before {
	content: "\e85c";
}
.lnr-volume:before {
	content: "\e85d";
}
.lnr-mic:before {
	content: "\e85e";
}
.lnr-hourglass:before {
	content: "\e85f";
}
.lnr-undo:before {
	content: "\e860";
}
.lnr-redo:before {
	content: "\e861";
}
.lnr-sync:before {
	content: "\e862";
}
.lnr-history:before {
	content: "\e863";
}
.lnr-clock:before {
	content: "\e864";
}
.lnr-download:before {
	content: "\e865";
}
.lnr-upload:before {
	content: "\e866";
}
.lnr-enter-down:before {
	content: "\e867";
}
.lnr-exit-up:before {
	content: "\e868";
}
.lnr-bug:before {
	content: "\e869";
}
.lnr-code:before {
	content: "\e86a";
}
.lnr-link:before {
	content: "\e86b";
}
.lnr-unlink:before {
	content: "\e86c";
}
.lnr-thumbs-up:before {
	content: "\e86d";
}
.lnr-thumbs-down:before {
	content: "\e86e";
}
.lnr-magnifier:before {
	content: "\e86f";
}
.lnr-cross:before {
	content: "\e870";
}
.lnr-menu:before {
	content: "\e871";
}
.lnr-list:before {
	content: "\e872";
}
.lnr-chevron-up:before {
	content: "\e873";
}
.lnr-chevron-down:before {
	content: "\e874";
}
.lnr-chevron-left:before {
	content: "\e875";
}
.lnr-chevron-right:before {
	content: "\e876";
}
.lnr-arrow-up:before {
	content: "\e877";
}
.lnr-arrow-down:before {
	content: "\e878";
}
.lnr-arrow-left:before {
	content: "\e879";
}
.lnr-arrow-right:before {
	content: "\e87a";
}
.lnr-move:before {
	content: "\e87b";
}
.lnr-warning:before {
	content: "\e87c";
}
.lnr-question-circle:before {
	content: "\e87d";
}
.lnr-menu-circle:before {
	content: "\e87e";
}
.lnr-checkmark-circle:before {
	content: "\e87f";
}
.lnr-cross-circle:before {
	content: "\e880";
}
.lnr-plus-circle:before {
	content: "\e881";
}
.lnr-circle-minus:before {
	content: "\e882";
}
.lnr-arrow-up-circle:before {
	content: "\e883";
}
.lnr-arrow-down-circle:before {
	content: "\e884";
}
.lnr-arrow-left-circle:before {
	content: "\e885";
}
.lnr-arrow-right-circle:before {
	content: "\e886";
}
.lnr-chevron-up-circle:before {
	content: "\e887";
}
.lnr-chevron-down-circle:before {
	content: "\e888";
}
.lnr-chevron-left-circle:before {
	content: "\e889";
}
.lnr-chevron-right-circle:before {
	content: "\e88a";
}
.lnr-crop:before {
	content: "\e88b";
}
.lnr-frame-expand:before {
	content: "\e88c";
}
.lnr-frame-contract:before {
	content: "\e88d";
}
.lnr-layers:before {
	content: "\e88e";
}
.lnr-funnel:before {
	content: "\e88f";
}
.lnr-text-format:before {
	content: "\e890";
}
.lnr-text-format-remove:before {
	content: "\e891";
}
.lnr-text-size:before {
	content: "\e892";
}
.lnr-bold:before {
	content: "\e893";
}
.lnr-italic:before {
	content: "\e894";
}
.lnr-underline:before {
	content: "\e895";
}
.lnr-strikethrough:before {
	content: "\e896";
}
.lnr-highlight:before {
	content: "\e897";
}
.lnr-text-align-left:before {
	content: "\e898";
}
.lnr-text-align-center:before {
	content: "\e899";
}
.lnr-text-align-right:before {
	content: "\e89a";
}
.lnr-text-align-justify:before {
	content: "\e89b";
}
.lnr-line-spacing:before {
	content: "\e89c";
}
.lnr-indent-increase:before {
	content: "\e89d";
}
.lnr-indent-decrease:before {
	content: "\e89e";
}
.lnr-pilcrow:before {
	content: "\e89f";
}
.lnr-direction-ltr:before {
	content: "\e8a0";
}
.lnr-direction-rtl:before {
	content: "\e8a1";
}
.lnr-page-break:before {
	content: "\e8a2";
}
.lnr-sort-alpha-asc:before {
	content: "\e8a3";
}
.lnr-sort-amount-asc:before {
	content: "\e8a4";
}
.lnr-hand:before {
	content: "\e8a5";
}
.lnr-pointer-up:before {
	content: "\e8a6";
}
.lnr-pointer-right:before {
	content: "\e8a7";
}
.lnr-pointer-down:before {
	content: "\e8a8";
}
.lnr-pointer-left:before {
	content: "\e8a9";
}