@import "reset.css";

/*
MOBILE-FIRST. BREAK-POINTS:
    min-width:768px
    min-width:1024px
    min-width:1920px
*/

/* TEXT */
a{
    text-decoration:none;
    color:#999;
    cursor:pointer;
}
a:hover{
    color:#fff;
}
h1,h2 {
    text-transform:uppercase;
    font-weight:700;
    font-family:Roboto Condensed,sans-serif;
}
h1{
    font-size:30px;
    line-height:35px
}
@media screen and (min-width:768px){
    h1{
        font-size:50px;
        line-height:58px;
    }
}
@media screen and (min-width:1024px){
    h1{
        font-size:52px;
        line-height:60px;
    }
}
@media (-webkit-min-device-pixel-ratio:2) and (min-width:1024px),(min-resolution:192dpi) and (min-width:1024px),screen and (min-width:1366px){
    h1{
        line-height:80px;
        font-size:3.4rem
    }
    h1 img{
        top:14px;
        margin-bottom:-2px;
        max-height:95px
    }
}
@media screen and (min-width:1920px){
    h1{
        margin-top:5px!important;
        margin-bottom:0!important;
    }
}
h2{
    font-size:20px;
    line-height:23px;
    margin-bottom:20px;
}
@media screen and (min-width:1024px){
    h2{
        font-size:24px;
        line-height:28px
    }
}
@media screen and (min-width:1920px){
    h2{
        font-size:40px;
        line-height:47px;
    }
}

/* BUTTON */
.button-login{
    background:linear-gradient(180deg,#139997,#075a59);
    box-shadow:0 2px 5px rgba(0,0,0,.8),inset 0 1px 0 #3fb5b3;
    border-radius: 3px;
    display: inline-block;
    padding: 14px 14px 14px 14px;
    margin:10px 0;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #fff;
    cursor: pointer;
}
@media screen and (min-width:768px){
    .button-login {
        padding: 14px 28px 14px 28px;
    }
}
.wotx-background .button-login{
    background:linear-gradient(180deg,#f68059,#fe5000);
    box-shadow:0 2px 5px rgba(0,0,0,.8),inset 0 1px 0 #f68059;
}
.cw-background .button-login{
    background:#ffefd0;
    box-shadow:none;
    border: 3px solid transparent;
    outline: rgba(255,239,208,.8) solid 3px;
    outline-offset: 3px;
    border-radius: 0;
    padding: 16px 50px;
    font-size: 22px;
    line-height: 28px;
    letter-spacing: 3px;
    color: #000;
    transition: outline-color .2s ease-in-out, color .2s ease-in-out, background-color .2s ease-in-out;
}
.wg-background .button-login{
    background:linear-gradient(180deg,#ff0033,#cf2127);
    box-shadow:0 2px 5px rgba(0,0,0,.8),inset 0 1px 0 #fd3c43;
}
.button-login:hover{
    box-shadow:0 2px 5px rgba(0,0,0,.8),0 2px 30px rgba(0,255,251,.5),inset 0 1px 0 #3fb5b3;
}
.wotx-background .button-login:hover{
    box-shadow:0 2px 5px rgba(0,0,0,.8),0 2px 30px rgba(246,128,89,.5),inset 0 1px 0 #f68059;
}
.cw-background .button-login:hover{
    box-shadow: none;
    background-color: #fef5e2;
    outline-color: #fef5e2;
}
.wg-background .button-login:hover{
    box-shadow:0 2px 5px rgba(0,0,0,.8),0 2px 30px rgba(225,25,50,.5),inset 0 1px 0 #fd3c43;
}

/* LAYOUT */
html{
    height:100%;
}
body {
    color: #fff;
    min-height: 100%;
    font-family: Roboto,sans-serif;
    font-size: 16px;
    line-height: 19px;
    background: #001428;
    background-size: auto,cover;
    background-blend-mode: unset;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 20px;
}
@media screen and (min-width:768px){
    body{
        padding:0 60px;
    }
}
header{
    padding-top:24px;
    display:flex;
    flex-direction:column;
    align-items: center;
    position:relative;
    z-index:0;
}
@media screen and (min-width:1024px){
    header{
        flex-direction:row;
        align-items: unset;
        justify-content:space-between;
        margin-bottom:5vh;
    }
}
.logo{
    margin-bottom:7px;
}
.logo-img {
    width: 500px;
}
@media screen and (max-width:1920px){
    .logo-img {
        width: 280px;
    }
}
.header-text {
    font-weight: 500;
    font-family: Roboto Condensed,sans-serif;
    text-align: center;
}
.wrapper{
    position:relative;
}
@media screen and (min-width:768px){
    .wrapper{
        display:flex;
        justify-content:center;
        flex-direction:column;
        align-items:center;
    }
}
.main{
    text-align:center;
    background-blend-mode:normal;
    margin:18px 0;
    z-index:1;
    max-width:950px;
    position:relative;
}
@media screen and (min-width:768px){
    .main{
        width:100%;
    }
}
.section-inner {
    max-height: none;
    height: auto;
    position:relative;
}
@media screen and (min-width:768px){
    .section-inner{
        padding:0 40px;
        max-width:950px;
        margin:25px auto;
    }
}

/* SECTION-LOGIN */
.section-login-region{
    display: flex;
    flex-direction: column;
    gap: 18px;
}
@media screen and (min-width:768px){
    .section-login-region{
        flex-direction: row;
        flex-wrap:wrap;
        justify-content:center;
    }
}
.section-login-block{}
.section-login-subsection{}

.section-login-button{
    box-shadow:0 5px 25px rgba(0,0,0,.6),0 1px 20px #075a59;
    border-radius:5px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    padding:0 18px;
    min-height:70px;
}
@media screen and (min-width:768px){
    .section-login-button{
        width:40%;
    }
}
@media screen and (min-width:1024px){
    .section-login-button{
        width:46%;
        min-height:auto;
        padding:20px 0;
        box-shadow:0 5px 25px rgba(0,0,0,.6),0 4px 30px #075a59;
    }
}
.wg-background .section-login-button {
    box-shadow:none;
}
@media screen and (min-width:1024px){
    .wg-background .section-login-button {
        box-shadow:none;
    }
}

.section-login-button:after,.section-login-button:before{
    content:"";
    display:block;
    position:absolute;
    border-radius:5px;
    opacity:1;
}
.section-login-button:after {
    background: linear-gradient(180deg,rgba(7,24,39,.85),rgba(7,24,39,.85)),url("texture.jpg");
    background-position: 0 0,bottom;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}
.wg-background .section-login-button:after {
    background: #141414;
}
.section-login-button:hover:after{
    background:linear-gradient(90deg,rgba(187,49,1,.8),rgba(200,80,3,.84)),url("texture.jpg");
    background-position:0 0,bottom;
}
.wg-background .section-login-button:hover:after{
    background:#999;
}

.section-login-button:before{
    background:linear-gradient(90deg,#e2e4e6 0,#109290);
    width:calc(100% + 4px);
    height:calc(100% + 4px);
    top:-2px;
    left:-2px;
    z-index:0;
}
.wg-background .section-login-button:before{
    background:#fff;
}
.section-login-button:hover:before{
    background:linear-gradient(90deg,#bb3101 0,#f09f00);
}
.wg-background .section-login-button:hover:before{
    background:#fff;
}

.section-login-button span{
    position:relative;
    z-index:2;
    font-family:Roboto Condensed,sans-serif;
    font-weight:700;
    font-size:20px;
    line-height:22px;
    text-transform:uppercase;
}
@media (-ms-high-contrast:none){
    .section-login-button{
        border:1px solid
    }
    .section-login-button,.section-login-button:after,.section-login-button:before,.section-login-button:hover{
        background:none!important
    }
}

/* FOOTER */
footer{
    box-sizing: border-box;
    background:#000;
    padding:20px;
    position:relative;
    z-index:2;
    margin:auto -20px 0 -20px;
}
@media screen and (min-width:768px){
    footer{
        margin-left:-60px;
        margin-right:-60px;
        padding:20px 60px 20px 60px;
    }
}
.footer-wrapper{
    display:flex;
    flex-direction:column;
}
@media screen and (min-width:1024px){
    .footer-wrapper{
        flex-direction:row;
        flex-wrap:nowrap;
        justify-content:space-between;
    }
}
.footer-logo{
    margin-bottom:17px;
}
@media screen and (min-width:1024px){
    .footer-logo{
        flex:0 0 auto;
        margin-bottom:0;
        margin-right:35px;
    }
}
.footer-logo-link{
    display: inline-block;
}
.footer-logo-img{
    vertical-align: top;
    width: 135px;
}
@media screen and (min-width:1920px){
    .footer-logo-img{
        width: 193px;
    }
}
.footer-copyright{
    font-size:10px;
    line-height:14px;
    color:#999;
}
@media screen and (min-width:1024px){
    .footer-copyright{
        flex:1 1 auto;
    }
}
@media (-webkit-min-device-pixel-ratio:2) and (min-width:1024px),(min-resolution:192dpi) and (min-width:1024px),screen and (min-width:1366px){
    .footer-copyright{
        font-size:12px;
        line-height:18px;
    }
}

.footer-menu{
    display:flex;
    flex-direction:column;
    margin-top:20px;
}
@media screen and (min-width:768px){
    .footer-menu{
        flex-basis:100%;
        flex-direction:row;
        flex-wrap:wrap;
        justify-content:start;
        gap: 0 15px;
    }
}
@media screen and (min-width:1024px){
    .footer-menu{
        flex:1 1 auto;
        margin-top:0;
        margin-left: 35px;
        justify-content:flex-end;
        text-align: right;
    }
}
.footer-menu-item{
    font-size:12px;
    line-height:20px;
    font-family:Roboto Condensed,sans-serif;
    text-transform: uppercase;
}
@media screen and (min-width:1024px){
    .footer-menu-item{
        margin-right:0;
    }
}