@font-face {
    font-family: 'Lato-Regular';
    src: url('font/Lato-Regular.eot'); /* IE9 Compat Modes */
    src: url('font/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('font/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
         url('font/Lato-Regular.woff') format('woff'), /* Modern Browsers */
         url('font/Lato-Regular.ttf') format('truetype');

    text-rendering: optimizeLegibility;
}

html,body {overflow: auto; margin:0; padding:0; font-family: 'Lato-Regular';}
.login {overflow: auto;}
#wrapper{
    width: 100%;
    height:100%;
    z-index:999;
    position: absolute;
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
    align-content: center;
    right:0; top:0; left:0; bottom:0; 
}
#login_body {display:inline-block;}
form#login_form {background:rgba(0, 0, 0, 0.58); padding:20px; border-radius:5px;min-width:400px; width:100%; max-width:500px; margin:0 auto; margin-bottom:30px;}
#login_form input {
    outline: none;
    margin-bottom: 20px;
    color:#fff;
    padding:10px 15px;
    width: 100%;
    background: rgba(255, 255, 255, 0.08)!important;
    border: none;
    border-radius: 3px;
    font-size: 22px;
}
::-webkit-input-placeholder { /* Edge */
    color: rgb(168, 168, 168);
  }
  
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgb(168, 168, 168);
  }
  
  ::placeholder {
    color: rgb(168, 168, 168);
  }
div.logo {padding:20px; margin-bottom:5%;}
div.logo >a {display:block; line-height: 0; width:100%;}
#submit_button span {padding:5px 15px; display:inline-block; vertical-align: middle;}
#submit_button i {padding:5px 15px; display:inline-block; vertical-align: middle; background:rgba(0, 0, 0, 0.15); line-height: 40px; text-align: center;}
#submit_button:hover {background:#ce9f2e;}
#submit_button {
    cursor: pointer;
    text-align: right;
    font-size:22px;
    border-radius:5px;
    color:#333;
    background:#f7c447;
}

#result_label:empty, #ver_result_label:empty {display:none;}
#result_label, #ver_result_label {
    text-align: center; margin-top:20px;
    font-size:16px;
    border-radius:5px;
    padding:10px;
    color:#fcf6f0;
    background:#e53935;
}

ul.menu {list-style: none; margin:0; padding:0; margin-bottom:5%;}
ul.menu>li {display: inline-block;}
ul.menu>li>a {display:block; padding:5px 15px; text-shadow:0px 1px 4px rgb(0, 0, 0);text-decoration: none; color:rgba(255, 255, 255, 0.60); font-size:14px;}
ul.menu>li>a:hover { color:#fff;}

ul.lang {list-style: none; margin:0;margin-bottom:5%; text-align: center; padding:0; position: relative;}
ul.lang>li {display: inline-block;}
ul.lang>li>a {display:block; padding:4px 10px;  color:#575757; line-height:0;text-decoration: none; font-size:14px; background:rgba(0, 0, 0, 0.58); border-radius:5px;}
ul.lang>li>a>span {display:inline-block; vertical-align: middle; line-height: 24px; padding-left:5px;}
ul.lang>li>a>img {display:inline-block; vertical-align: middle; border-radius: 3px;}
ul.lang>li>a.active {background:#f7c447;}

ul.store {list-style: none; margin:0; padding:0; margin-bottom:5%;}
ul.store>li {display: inline-block; margin:0 10px;}
ul.store>li>a {display:block; padding:10px; text-decoration: none; text-shadow:0px 1px 4px rgb(0, 0, 0); color:rgb(247, 196, 71);font-size:36px;}
ul.store>li>a:hover {color:#fff;}

ul.footer_icons {list-style: none;}
ul.footer_icons>li {display: inline-block;} 

#slogan {display:none;}

* {
    box-sizing: border-box;
  }
  
  html, body {
    height: 100%;
    font-family: 'Roboto Slab', serif;
    text-align: center;
    color: #ccc;
    line-height: 24px;
  }
  
  h1, p {
    padding: 0 3%;
    margin: 1.5% 0;
    word-wrap: break-word;
  }
  
  h1 {
    font-size: 2.7em;
    letter-spacing: 0.18em;
  }
  
  p {
    font-size: 1.5em;
    letter-spacing: 0.1em;
    line-height: 1.4em;
  }
  
  @media only screen and (max-width: 700px) {
    h1, p {
      margin: 2% 0;
    }
  }
  
  @media only screen and (max-width: 550px) {
    h1, p {
      margin: 2.5% 0;
    }
  }
  
  @media only screen and (max-width: 510px) {
    h1, p {
      margin: 3.25% 0;
    }
  }
  
  @media only screen and (max-width: 400px) {
    h1, p {
      margin: 4.5% 0;
    }
  }
  
  @media only screen and (max-width: 320px) {
    h1, p {
      margin: 5.5% 0;
    }
  }
  
  @media only screen and (max-width: 280px) {
    h1, p {
      margin: 6.5% 0;
    }
  }
  
  .video:before {content:''; width:100%; height:100%; left:0; top:0; bottom:0; right:0; position:absolute; background-color: rgba(0, 0, 0, 0.5);}
  .video {
    height: 100%; width:100%;
    z-index:-1;
    position: fixed;
    overflow: hidden;
  }
  
  .video video {
    top: 0;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    background-size: cover;
    transform: translate(-50%);
    z-index: -1;
  }