/* Base style
   ========================================================================== */
   
/* Fonts */
@font-face {
   font-family: 'muroregular';
   src: url('fonts/muro-webfont.woff2') format('woff2'),
        url('fonts/muro-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'Moonhouse';
   src: url('fonts/Moonhouse-yE5M.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
}

html{ -webkit-user-select: none; -ms-user-select: none; user-select: none; background:#f8f8f8;}

/*-- Percent Loader -- */
#mainLoader{position:absolute;z-index:5; display:none; font-size:25px; line-height:25px; color:#2F1B14; text-align:center; width:100%; font-family:'muroregular';}

/*-- Content Wrapper -- */
#mainHolder{position:absolute; width:100%;height:100%;}

/*-- Browser Not Support -- */
#notSupportHolder{ width:90%; margin:5% auto; position:relative; color:#fff; text-align:center; font-size:25px; font-family:'muroregular'; display:none;}

/*-- Rotate Screen -- */
#rotateHolder{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f8f8f8;
    z-index: 10;
    display: none;
}

.rotateScreen{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: 'muroregular';
}

.rotateTitle{
    font-size: 32px;
    color: #2F1B14;
    margin-bottom: 15px;
    font-weight: bold;
}

.rotateDesc{
    font-size: 20px;
    color: #666666;
    margin-bottom: 30px;
}

.rotateIcon{
    font-size: 48px;
    animation: rotateAnimation 2s ease-in-out infinite;
}

@keyframes rotateAnimation {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(90deg) scale(1.1); }
    50% { transform: rotate(90deg) scale(1); }
    75% { transform: rotate(90deg) scale(1.1); }
    100% { transform: rotate(0deg) scale(1); }
}

/*-- Rotate Animation -- */
@-moz-keyframes spin { 50% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(0deg); } }
@-webkit-keyframes spin { 50% { -webkit-transform: rotate(90deg); } 100% { -webkit-transform: rotate(0deg); } }
@keyframes spin { 50% { -webkit-transform: rotate(90deg); transform:rotate(90deg); } 100% { -webkit-transform: rotate(90deg); transform:rotate(90deg); } }

/*-- Canvas Wrapper -- */
#canvasHolder{ display:none; width:100%; max-width:1280px; height:100%; margin:auto; position:relative;}
canvas{ position:fixed;}

/*-- Sign In Form Inputs -- */
#signInEmail, #signInPassword {
    position: absolute;
    width: 300px;
    height: 45px;
    border-radius: 10px;
    border: 2px solid #ac702c;
    background: #ffffff;
    font-family: 'Moonhouse';
    font-size: 20px;
    color: #333333;
    padding: 0 15px;
    box-sizing: border-box;
    outline: none;
    z-index: 1000;
}

#signInEmail::placeholder, #signInPassword::placeholder {
    color: #999999;
    font-family: 'Moonhouse';
}

/*-- Registration Form Inputs -- */
#registerEmail, #registerPassword, #registerConfirmPassword {
    position: absolute;
    width: 300px;
    height: 45px;
    border-radius: 10px;
    border: 2px solid #ac702c;
    background: #ffffff;
    font-family: 'Moonhouse';
    font-size: 20px;
    color: #333333;
    padding: 0 15px;
    box-sizing: border-box;
    outline: none;
    z-index: 1000;
}

#registerEmail::placeholder, #registerPassword::placeholder, #registerConfirmPassword::placeholder {
    color: #999999;
    font-family: 'Moonhouse';
}