@font-face {
    font-family: 'Frutiger-Black';
    font-weight: 900;
    font-style: normal;
    font-stretch: normal;
    src: url('./../fonts/ftbl/Frutiger-Black_gdi.eot');
    src: url('./../fonts/ftbl/Frutiger-Black_gdi.eot?#iefix') format('embedded-opentype'),
    url('./../fonts/ftbl/Frutiger-Black_gdi.woff') format('woff'),
    url('./../fonts/ftbl/Frutiger-Black_gdi.ttf') format('truetype'),
    url('./../fonts/ftbl/Frutiger-Black_gdi.otf') format('opentype'),
    url('./../fonts/ftbl/Frutiger-Black_gdi.svg#Frutiger-Black') format('svg');
    unicode-range: U+0020-FFFD;
}

@font-face {
    font-family: 'HelveticaNeueLTStd';
    src: url('./../fonts/HNLTStd-Roman/HelveticaNeueLTStd-Roman.eot');
    src: url('./../fonts/HNLTStd-Roman/HelveticaNeueLTStd-Roman.eot?#iefix') format('embedded-opentype'),
    url('./../fonts/HNLTStd-Roman/HelveticaNeueLTStd-Roman.woff2') format('woff2'),
    url('./../fonts/HNLTStd-Roman/HelveticaNeueLTStd-Roman.woff') format('woff'),
    url('./../fonts/HNLTStd-Roman/HelveticaNeueLTStd-Roman.ttf') format('truetype'),
    url('./../fonts/HNLTStd-Roman/HelveticaNeueLTStd-Roman.svg#HelveticaNeueLTStd-Roman') format('svg');
    font-weight: normal;
    font-style: normal;
}

/** Bootstrap */
.form-control {
    font-size: 14px;
    line-height: 1.42857143;
    display: block;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
       -moz-box-sizing: border-box;    /* Firefox, other Gecko */
            box-sizing: border-box;         /* Opera/IE 8+ */
    width: 100%;
    height: auto;
    padding: 17px;
    text-align: center;
    border: 0;
    border-radius: 0;
    background: rgba(255,255,255,.8);
}

.form-group {
    margin-bottom: 5px;
}
.form-group label {
    font-family: 'Frutiger-black', sans-serif;
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    color: #00345f;
    cursor: pointer;
}
input:focus, textarea:focus, keygen:focus, select:focus {
    outline: 0;
}
.list-unstyled {
    list-style: none;
}
.has-error .checkbox, .has-error .checkbox-inline, .has-error .control-label, .has-error .help-block, .has-error .radio, .has-error .radio-inline, .has-error.checkbox label, .has-error.checkbox-inline label, .has-error.radio label, .has-error.radio-inline label {
    color: #a94442;
}
span.help-block {
    position: absolute;
    right: 0;
    left: 0;
}
.help-block li {
    font-family: 'Frutiger-black', sans-serif;
    font-size: 11px;
    line-height: 11px;
    margin-top: -12px;
}

* {
    margin: 0;
    padding: 0;
} /* to remove the top and left whitespace */

html, body {
    width: 100%;
    height: 100%;
}

body {
    font-family: 'Frutiger-black', sans-serif;
    font-size: 28px;
    text-align: center;
}
a {
    text-decoration: none;
}
p, a {
    color: #fff;
}

label {
    font-weight: 700;
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
}
.text-center {
    text-align: center;
}
.content-wrapper {
    position: relative;
    overflow: hidden;
    width: 800px;
    height: 1207px;
    margin: 0 auto;
}

.content-half {
    width: 348px;
}

.hidden {
    display: none;
}
/* Screen 01 */
body.inscription .content-wrapper {
    background-color: #464646;
    background-image: url('./../images/screens/01/background.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
}
body.inscription .header {
    position: relative;
    top: 0;
    right: 0;
    left: 0;
    display: block;
    height: 503px;
    background-repeat: no-repeat;
}
body.lang-fr.inscription .header {
    background-image: url('./../images/screens/01/header.png');
}
body.lang-de.inscription .header {
    background-image: url('./../images/screens/01/header-de.png');
}
body.lang-it.inscription .header {
    background-image: url('./../images/screens/01/header-it.png');
}

body.inscription #body-container {
    position: relative;
    z-index: 2;
    top: 0;
    margin-top: -200px;
    padding: 0 20px;
}

body.inscription #inscription {
    position: relative;
    margin-bottom: 12px;
}
body.inscription .footer {
    position: absolute;
    z-index: 1;
    bottom: 0;
    display: block;
    width: 800px;
    height: 188px;
    background-repeat: no-repeat;
}
body.lang-fr.inscription .footer {
    background-image: url('./../images/screens/01/footer.png');
}
body.lang-de.inscription .footer {
    background-image: url('../images/screens/01/footer-de.png');
}
body.lang-it.inscription .footer {
    background-image: url('./../images/screens/01/footer-it.png');
}

.btn-start, .btn-start:focus, .btn-start:active {
    width: 148px;
    height: 148px;
    text-indent: -9999px;
    border: 0;
    outline: none !important;
    background-color: transparent !important;
    background-image: url('./../images/screens/01/start-btn.png');
    box-shadow: none;
}


/** Screen 2 */
body.create .content-wrapper {
    background-color: #464646;
    background-image: url('./../images/screens/02/background.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
}

body.create .header {
    position: relative;
    top: 0;
    right: 0;
    left: 0;
    display: block;
    height: 305px;
    background-repeat: no-repeat;
}
body.lang-fr.create .header {
    background-image: url('./../images/screens/02/header.png');
}
body.lang-de.create .header {
    background-image: url('./../images/screens/02/header-de.png');
}

body.lang-it.create .header {
    background-image: url('./../images/screens/02/header-it.png');
}

body.create #body-container {
    z-index: 2;
}
body.create #stage-container {
    position: relative;
    z-index: 1001;
    top: -60px;
    left: -34px;
    width: 460px;
    min-height: 850px;
}

body.create #stage-container {
    right: 45%;
}
body.create .controls-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50%;
    padding: 0;
}
body.create .avatarSwimsuit {
    text-align: right;
    padding-right: 23px;
}
body.create .controls-container img {
    width: 89px;
}
body.create .controls-container .avatarGender img {
    width: 161px;
}
body.create .form-submit {
    position: absolute;
    z-index: 2000;
    right: 0;
    bottom: 0;
    left: 42%;
    padding: 20px;
}

.avatarGender {
    margin-top: 44px;
    margin-bottom: 130px;
    text-align: center;
}

.control {
    margin-top: 20px;
    text-align: center;
}
.control h4 {
    font-family: 'Frutiger-black', sans-serif;
    font-size: 28px;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    color: #00345f;
}

.control button {
    margin-right: 3px;
    border: 0;
    background-color: transparent;
}

.control button:active, .control button:focus {
    opacity: .5;
}
.controls-container label > input {
    position: absolute;
    visibility: hidden;
}
.controls-container label img.selected {
    display: none;
}
.controls-container label input.activated ~ img.unselected, .controls-container label input:checked ~ img.unselected, .controls-container label input.selected ~ img.unselected {
    display: none;
}
.controls-container label input.activated ~ img.selected, .controls-container label input:checked ~ img.selected, .controls-container label input.selected ~ img.selected {
    display: block;
}
body.create .footer {
    position: absolute;
    z-index: 1000;
    bottom: 0;
    display: block;
    width: 800px;
    height: 156px;
    background-image: url('./../images/screens/02/footer.png');
    background-repeat: no-repeat;
}
body.create .btn-ok {
    position: absolute;
    bottom: 85px;
    left: calc(50% - 74px);
    width: 148px;
    height: 148px;
    z-index: 3000;
    text-indent: -9999px;
    border: 0;
    background-color: transparent;
    background-image: url('./../images/screens/02/btn-ok.png');
}

/** Screen 3 */
body.play .content-wrapper {
    background-color: #464646;
    background-image: url('./../images/screens/03/background.png');
    background-repeat: no-repeat;
    background-position: bottom center;
}

body.play .header {
    position: relative;
    top: 0;
    right: 0;
    left: 0;
    display: block;
    height: 342px;
    background-repeat: no-repeat;
}
body.lang-fr.play .header {
    background-image: url('./../images/screens/03/header.png');
}
body.lang-de.play .header {
    background-image: url('./../images/screens/03/header-de.png');
}
body.lang-it.play .header {
    background-image: url('./../images/screens/03/header-it.png');
}

body.play .header img {
    width: 100%;
    height: auto;
}
body.play #stage-container {
    height: 626px;
    margin-bottom: 148px;
    margin-top: -65px;
}
body.play .footer .btn-stop {
    position: absolute;
    bottom: 86px;
    left: calc(50% - 74px);
    width: 149px;
    height: 149px;
    text-indent: -9999px;
    border: 0;
    background-color: transparent;
    background-image: url('./../images/screens/03/stop-btn.png');
}

body.play #container-result {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 43px;
    width:100%;
    z-index: 3000;
}
body.play #container-result .inner {
    height: 91px;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position: center center;
    padding: 5px 0;
    width: 100%;
}
body.lang-fr.play #container-result .inner {
    background: url('./../images/screens/04/footer-result-txt-fr.png') no-repeat center center transparent;
}
body.lang-de.play #container-result .inner {
    background: url('./../images/screens/04/footer-result-txt-de.png') no-repeat center center transparent;
}
body.lang-it.play #container-result .inner {
    background: url('./../images/screens/04/footer-result-txt-it.png') no-repeat center center transparent;
}


/* Default style */
body.agent .header h1, body.home .header h1 {
    color: #fff;
    font-size: 41px;
}
body.agent .content-wrapper, body.home .content-wrapper {
    background-color: rgba(0, 52, 95, 1);
}
body.agent #body-container, body.home #body-container {
    font-family: 'HelveticaNeueLTStd', sans-serif;
    font-size: 25px;
    padding: 20px;
}
body.home .content-wrapper li {
    margin-bottom: 10px;
}
body.home .content-wrapper li a {
    margin-bottom: 10px;
}
body.home #bottom-menu {
    display: none;
}
body.agent .form-group label {
    color: #fff;
}
body.agent p {
    margin: 7px 0 15px 0;
}
body.agent .btn {
    border: 0;
    color: #000;
    padding: 10px 20px;
    background: rgba(255, 255, 255, .8);
}
body.agent .btn:hover {
    background: rgba(255,255,255,1);
}
body.agent span.help-block {
    position: relative;
}

body.admin .header h1, body.home .header h1 {
    color: #fff;
    font-size: 41px;
}
body.admin .content-wrapper, body.home .content-wrapper {
    background-color: rgba(0, 52, 95, 1);
}
body.admin #body-container, body.home #body-container {
    font-family: 'HelveticaNeueLTStd', sans-serif;
    font-size: 25px;
    padding: 20px;
}
body.admin .form-group label {
    color: #fff;
}
body.admin p {
    margin: 7px 0 15px 0;
}
body.admin .btn {
    border: 0;
    color: #000;
    padding: 10px 20px;
    background: rgba(255, 255, 255, .8);
}
body.admin .btn:hover {
    background: rgba(255,255,255,1);
}
body.admin span.help-block {
    position: relative;
}
/** Other */
#languages {
    position: absolute;
    top: -10px;
    z-index: 100;
    right: 0;
}
#languages li {
    float: left;
    list-style: none;
}

#languages li a {
    color: #fff;
    font-size: 15px;
    padding: 3px 5px;
}
#languages li.active a {
    color: rgba(255, 255, 255, 0.7);
}

.bottom-menu {
    position: absolute;
    z-index: 10000;
    bottom: 0;
}
.bottom-menu.left-menu {
    left: 0;
}
.bottom-menu.right-menu {
    right: 0;
    left: initial;
}

.bottom-menu li {
    display: inline-block;
    float: left;
    margin-bottom: 0 !important;
}
.bottom-menu li a {
    font-size: 20px;
    padding: 5px;
    color: rgba(255,255,255,.2);
}
.bottom-menu-agent a {
    display: block;
    width: 50px;
    height: 23px;
}#bottom-menu .bottom-menu-agent a {
    display: block;
    width: 50px;
    height: 23px;
}
.alert-container {
    position: absolute;
    z-index: 10000;
    top: 0;
    width: 100%;
    padding: 5px;
}
.loading {
    font-size: 45px;
    position: absolute;
    z-index: 1000;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
    display: none;
    width: 50px;
    height: 50px;
}
.error {
    color: #a94442;
}