/* describes modals */
#modal{
    width:100%;
    height:100%;
    position:fixed;
    bottom:-100%;
    background-color:rgba(244,244,244,0);
    z-index:900;
    box-shadow:0px 2px 10px rgba(0,0,0,.2);
    box-sizing:border-box;
    padding:60px 30px 0 30px;
    transition:all .5s;
    overflow-y:auto;
}

body.showSignup #modal,
body.showLogin #modal{
    bottom:0px;
    background-color:rgba(244,244,244,1);
}
body.showLogin nav .menu-base,
body.showLogin nav .menu-content,
body.showSignup nav .menu-base,
body.showSignup nav .menu-content{
    transform:translateY(0px) !important;
    transition-delay:0s;
}

body.showLogin nav .menu-base,
body.showSignup nav .menu-base{
    /*background-color:rgba(238,0,0,1);*/
    background:linear-gradient(to left, #4e46c4, #00a2ff);
    background:linear-gradient(to left, #00e3a6, #00edc9);
}

/* login */
#modal--login{
    width:100%;
    height:100%;
    position:relative;
    bottom:0px;
    left:0px;
    box-sizing:border-box;
    padding:120px 0 0 0;
    opacity:0;
    color:#fff;
    transition:all 1s;
    transform:translateY(10%);
}
body.showLogin #modal--login{
    transform:translateY(0%);
    opacity:1;
    transition-delay:.5s;
}
#modal--login .login--wrapper{
    display:block;
    width:100%;
    max-width:600px;
    margin:0 auto;
    padding:0 0 30px 0;
}
#modal--login .login--wrapper h1{
    text-align:center;
    width:100%;
    display:block;
    font-size:3em;
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:4px;
    color:#575757;
    line-height:110%;
    box-sizing:border-box;
    padding-left:4px;
}
#modal--login .login--wrapper h2{
    text-align:center;
    width:100%;
    display:block;
    font-weight:300;
    color:#575757;
    font-size:1.8em;
    padding:10px 0;
    text-transform:lowercase;
    letter-spacing:2px;
}
.login--wrapper form{
    display:block;
    width:100%;
    max-width:400px;
    background-color:#fff;
    box-shadow:0px 2px 4px rgba(0,0,0,.2);
    margin:20px auto 0 auto;
    box-sizing:border-box;
    border-radius:2px;
    padding:30px 42px 30px 42px;
    transition:all 1s;
    transform:translateY(10%);
}
body.showLogin #modal--login .login--wrapper form{
    transition-delay:.5s;
    transform:translateY(0%);
}
.login--wrapper form .login--icon{
    height:150px;
    width:100px;
    background-image:url('../img/hugo_account.png');
    background-repeat:no-repeat;
    background-size:auto 100%;
    background-color:#fff;
    background-position:center center;
    display:block;
    margin:20px auto;
    border-bottom:2px solid rgba(0,156,246,1);
    border-bottom:2px solid rgba(0,227,166,1);
    border-radius:2px;
}
form .input-wrapper{
    width:100%;
    display:block;
    margin:5px 0 0 0;
    padding:11px 0 0 0;
    position:relative;
}
form .input-wrapper label{
    position:absolute;
    bottom:100%;
    height:0px;
    width:100%;
    margin-bottom:-18px;
    display:block;
    line-height:14px;
    overflow:hidden;
    font-size:1em;
    text-transform:lowercase;
    letter-spacing:2px;
    color:rgb(0,156,246);
    color:#272727;
    opacity:0;
    transition:all .3s;
}
form .input-wrapper.hasInput label{
    opacity:.4;
    height:14px;
}
form .input-wrapper input{
    width:100%;
    border:none;
    border-bottom:1px solid #cacaca;
    box-sizing:border-box;
    display:block;
    margin:0px;
    padding:0 0;
    height:48px;
    font-size:1.8em;
    color:#272727;
    transition:all .3s;
    outline:none;
    -webkit-box-shadow:0 0 0 500px white inset;
}
form .input-wrapper input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 500px white inset;
}
form .input-wrapper input:focus{
    padding:0 0 0 10px;
    border-bottom:2px solid rgba(0,156,246,1);
    border-bottom:2px solid rgba(0,227,166,1);
}
form .input-wrapper input::-webkit-input-placeholder {
    font-weight:300;
    text-transform:lowercase;
    letter-spacing:2px;
}

form .input-wrapper input:-moz-placeholder {
    font-weight:300;
    text-transform:lowercase;
    letter-spacing:2px;
}

form .input-wrapper input::-moz-placeholder {
    font-weight:300;
    text-transform:lowercase;
    letter-spacing:2px;
}

form .input-wrapper input:-ms-input-placeholder {
    font-weight:300;
    text-transform:lowercase;
    letter-spacing:2px;
}
form .submit-wrapper{
    width:100%;
    text-align:center;
    padding:20px 0 0px 0;
}
form .submit-button{
    display:inline-block;
    box-sizing:border-box;
    padding:0;
    border:none;
    background-color:transparent;
    height:60px;
    width:60px;
    position:relative;
    cursor:pointer;
}
div.modal-switch--wrapper{
    width:100%;
    text-align:center;
    margin:20px auto;
}
a.modal--switch{
    color:#272727;
    font-size:1.6em;
    font-weight:normal;
    text-align:center;
    display:inline-block;
    text-transform:lowercase;
    opacity:.4;
    transition:all .3s;
    letter-spacing:3px;
}
a.modal--switch.ui_touch{
    opacity:1;
}
div.modal--exit{
    display:block;
    height:46px;
    width:46px;
    position:absolute;
    left:50%;
    top:100px;
    margin:0 0 0 -23px;
    z-index:100;
}

.xt-lightbox {
  z-index: 1000;
  background-color: #fff;
}