/* ROBOTO FAMILY */
@font-face {
  font-family: Roboto;
  src: url("fonts/Roboto-Regular.ttf") format("truetype")
}

@font-face {
  font-family: Roboto-Light;
  src: url("fonts/Roboto-Light.ttf") format("truetype")
}

@font-face {
  font-family: Roboto-Thin;
  src: url("fonts/Roboto-Thin.ttf") format("truetype")
}

@font-face {
  font-family: Roboto-Medium;
  src: url("fonts/Roboto-Medium.ttf") format("truetype")
}

@font-face {
  font-family: Roboto-Bold;
  src: url("fonts/Roboto-Bold.ttf") format("truetype")
}

@font-face {
  font-family: Roboto-Italic;
  src: url("fonts/Roboto-Italic.ttf") format("truetype")
}

@font-face {
  font-family: Roboto-BoldItalic;
  src: url("fonts/Roboto-BoldItalic.ttf") format("truetype")
}


body {margin: 0; color: #FFF; font-family: Roboto; letter-spacing: 0.04em; font-size: 14px; background-color: #000;}

.mainContainer {position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.swan {display: block; margin: 0 auto;}
.pageTitle {font-family: Roboto; font-size: 20px; text-align: center; position: relative; top: -45px;}

.earlyAccess {margin-top: 40px; min-height: 145px;}
.earlyAccessCaption {text-align: center; margin-bottom: 20px; font-size: 16px; color: rgba(255,255,255,0.7);}
.earlyAccessEmail {display: block; margin: 0 auto 20px; width: 345px; border: 1px solid rgba(255,255,255,0.3); border-radius: 15px; color: #FFF; background-color: rgba(255,255,255,0.15); text-align: center; font-family: Roboto-Light; font-size: 14px; padding: 10px 0;}
.wrongEmail { border-color: red; background-color: red;}
.earlyAccessBtn {display: block; margin: 0 auto; padding: 6px 2px 4px 12px; min-width: 120px; text-align: center; font-size: 16px; color: #FFF; background-color: rgba(232,232,232,0.1); border: 1px solid rgba(232,232,232,0.1); border-radius: 40px; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -o-user-select: none; -webkit-tap-highlight-color: transparent;}
.earlyAccessBtn:hover {background-color: rgba(232,232,232,0.3); border-color: rgba(232,232,232,0.3);}
.arrow {vertical-align: middle; margin-left: 10px; position: relative; top: -1px;}

.confirmation {display: none; margin-top: 40px; min-height: 145px;}
.confirmationLine1 {text-align: center; margin-bottom: 20px; font-size: 16px; color: rgba(255,255,255,0.7);}
.tick {width: 40px; height: 40px; border-radius: 20px; background-color: rgba(232,232,232,0.1); background-image: url(../images/tick.png); background-size: 32px; background-repeat: no-repeat; background-position: center; margin: 0 auto;}