/* global */

::-webkit-scrollbar {
    width: 5px
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #808184;
    border-radius: 2px
}

::-webkit-scrollbar-thumb {
    border-radius: 2px;
    -webkit-box-shadow: inset 0 0 20px #ff7c08
}

* {
    box-sizing: border-box;
}

.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
    outline: none !important;
}

html {
    overflow: hidden;
    overflow-y: auto;
    height: 100%;
}

html,
body {
    padding: 0;
    margin: 0;
    position: relative;
    width: 100%;
    background-image: url(../images/leaderboard-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    background-position: bottom;
    overflow: hidden;
}
.row{
    height: 100vh;
}
.col-6{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.left img{
    width: 80%;
}

.btn{
    width: 50%;
    background-color: transparent;
    border: none;
    margin: auto;
    display: block;
}
.btn img{
    width: 75%;
}

.form-control{
    margin: 1rem 0;
    background-color: #2e3363f7;
    border: none;
    color: #fff;
    border-radius: 25px;
    height: 2rem;
}
.form-control:focus{
    margin: 1rem 0;
    background-color: #2e3363f7;
    border: none;
    color: #fff;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #fff !important;
    opacity: 1; /* Firefox */
  }

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #fff  !important;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #fff !important;
}

.log-form{
    width: 80% !important;
padding: 1rem;
    background-color: #00000075;
    border-radius: 20px;}


/*rotateMessage*/
.rotateMessage{
    text-align: center;
    display: none;
    position: absolute;
    top: 0;
    background-color: #000000e3;
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    z-index: 11;

}
.rotateMessage-container{
  width: 100%;
  height: 100%;
  position: relative;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;

}
.rotateMessage-content{
  position: relative;
  background-color: #FFF;
  width: 100%;
  max-width: 80%;
  height: 100%;
  max-height: 32%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
}
.rotateMessage-text{
  text-align: center;
  color: #01303f;
  font-family: 'Nexa Bold';
  font-size: 27px;
  line-height: 29px;
}
.validation-email, .validation-name{
    display: none;
}
.err{
    display: none;
    color: red;
    /* margin: 0 1rem; */
}
.error, .back-validation{
    color: red;
}
/* ipad portrait */
@media (orientation:portrait){
    .rotateMessage {
        display: block;
    }
}

@media (max-width: 1024px)  and (orientation:landscape){
   .form-control{
        margin: .5rem 0;
   }
   .err, .error{
       font-size: .7rem;
   }
}