@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700");
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:700');
body {
    margin: 0;
    padding: 0
}
::-webkit-scrollbar {
    display: none
}
.header {
    width: 100vw;
    height: 80px;
    background: #082c47;
    position: relative;
    display: flex;
    flex-direction:row;
    justify-content: flex-start;
}
.header-container {
    width: calc(66.66667% - 33.33333px);
    float: left;
    margin-left: 20px;
    margin-left: calc(16.66667% - 23.33333px + 40px);
    display: flex;
    flex-direction:row;
    justify-content: flex-start;
}
@media screen and (max-width: 780px) {
    .header-container{
        width: 100%;
        margin-left: 0px;
    }
}
.line {
    position: absolute;
    width: 100vw;
    height: 5px;
    background: #9ed436;
    z-index: 2
}
.thumbnail-container {
    background: rgba(0, 0, 0, 0.5);
    width: calc(100% - 40px);
    float: left;
    margin-left: 20px;
    height: 200px;
    position: relative
}
.hero-container {
    margin-top: 0px;
    width: 100vw;
    height: 75vh;
    background: url(/Assets/webclient/home/Blue/img/heroimg.png);
    background-size: cover;
    background-repeat: none;
    background-position: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.players {
    width: 100%;
    height: 80%;
    background-repeat:no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    filter: brightness(1);
    background-attachment: scroll
}
input {
    width: 150px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid #ddd;
    padding-left: 30px;
    outline: none
}
.login {
    padding: 7px 15px;
    border-radius: 8px;
    border: none;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    background-color: #9ed436;
    outline: none;
    cursor: pointer
}
.registerArea {
    width: 350px;
    height: 450px;
    background: rgba(255, 255, 255, 0.6);
    float: right;
    position: relative
}
.container {
    margin-bottom: 30px;
    width: calc(66.66667% - 33.33333px);
    margin-left: 20px;
    display: flex;
    justify-content: center;
}
.registerInput {
    width: 80%;
    height: 40px;
    margin: 25px;
    font-size: 1em
}
.registerButton {
    padding: 10px 50px;
    text-transform: uppercase;
    border-radius: 8px;
    border: none;
    background: #9ed436;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 1em;
    outline: none;
    color: white;
    cursor: pointer;
    margin-left: 40px;
    margin-top: 20px
}
.text {
    font-family: 'Roboto', sans-serif;
    display: inline;
    text-align: center;
    perspective: 1000px;
    float: left;
}
.text h1 {
    position: relative;
    font-size: 8em;
    color: palegoldenrod;
    letter-spacing: 0.0625em;
    user-select: none;
    margin-top: 50px;
    margin-bottom: 0px;
    color: #aaf21f
}
@keyframes drop-shadows {
    0% {
        text-shadow: -1px 0 0 #9ed436, 0px 0 0 #9ad22e, 0px 0 0 #9cd332, 0px 0 0 #9ed436
    }
    25% {
        text-shadow: -1px 0 0 #9ed436, -2px 0 0 #9ad22e, -3px 0 0 #97cf2c, -4px 0 0 #94ca2b, -5px 0 0 #91c62a, -6px 0 0 #8ec229, -7px 0 0 #8bbe29, -8px 0 0 #88ba28, -9px 0 0 #85b527, -10px 0 0 #82b126, -11px 0 0 #7ead25, -12px 0 0 #7ba924, -13px 0 0 #78a523, -14px 0 0 #75a022, -15px 0 0 #729c21, -16px 0 0 #6f9820, -17px 0 0 #6c9420, -18px 0 0 #69901f, -19px 0 0 #668b1e, -20px 0 0 #63871d, -21px 0 0 #60831c, -22px 0 0 #5d7f1b, -23px 0 0 #5a7a1a, -24px 0 0 #577619, -25px 0 0 #537218, -26px 0 0 #506e18, -27px 0 0 #4d6a17, -28px 0 0 #4a6516, -29px 0 0 #476115, -30px 0 0 #445d14;
        transform: rotateY(25deg)
    }
    75% {
        text-shadow: -1px 0 0 #9ed436, 2px 0 0 #9ad22e, 3px 0 0 #97cf2c, 4px 0 0 #94ca2b, 5px 0 0 #91c62a, 6px 0 0 #8ec229, 7px 0 0 #8bbe29, 8px 0 0 #88ba28, 9px 0 0 #85b527, 10px 0 0 #82b126, 11px 0 0 #7ead25, 12px 0 0 #7ba924, 13px 0 0 #78a523, 14px 0 0 #75a022, 15px 0 0 #729c21, 16px 0 0 #6f9820, 17px 0 0 #6c9420, 18px 0 0 #69901f, 19px 0 0 #668b1e, 20px 0 0 #63871d, 21px 0 0 #60831c, 22px 0 0 #5d7f1b, 23px 0 0 #5a7a1a, 24px 0 0 #577619, 25px 0 0 #537218, 26px 0 0 #506e18, 27px 0 0 #4d6a17, 28px 0 0 #4a6516, 29px 0 0 #476115, 30px 0 0 #445d14;
        transform: rotateY(-25deg)
    }
    100% {
        text-shadow: -1px 0 0 #9ed436, 0px 0 0 #9ad22e, 0px 0 0 #9cd332, 0px 0 0 #9ed436;
        transform: rotateY(0deg)
    }
}
.undertext {
    -webkit-clip-path: polygon(0 19%, 100% 8%, 100% 95%, 0 69%);
    clip-path: polygon(0 19%, 100% 8%, 100% 95%, 0 69%);
    width: 450px;
    height: 150px;
    margin-top: -20px;
    background: #173751;
    position: relative;
}
.undertext h2 {
    color: white;
    position: absolute;
    top: -15px;
    font-size: 3.5em;
    margin-left: 45px;
    letter-spacing: 5px
}
.secundertext {
    -webkit-clip-path: polygon(0 8%, 100% 23%, 100% 71%, 0 84%);
    clip-path: polygon(0 8%, 100% 23%, 100% 71%, 0 84%);
    width: 450px;
    height: 150px;
    background: #0c283f;
    position: relative;
    margin-top: -30px;
    margin-left: 10px
}
.secundertext h2 {
    color: white;
    position: absolute;
    top: 0px;
    font-size: 3.1em;
    margin-left: 10px;
    letter-spacing: 5px
}
.shadow {
    width: 95%;
    height: 5px;
    background: #000;
    transform: rotateZ(4deg);
    filter: blur(8px);
    margin-top: -40px;
    margin-left: 10px
}
.thumbnail-inner {
    width: calc(66.66667% - 33.33333px);
    float: left;
    margin-left: 20px;
    margin-left: calc(16.66667% - 23.33333px + 40px)
}
.thumbnail {
    width: calc(33.33333% - 26.66667px);
    float: left;
    margin-left: 20px;
    height: 70%;
    background: #80b220;
    border-radius: 10px;
    margin-top: 35px;
    text-align: center
}
.thumbnail h1 {
    font-family: 'Roboto', sans-serif;
    color: white;
    font-weight: 500;
    text-transform: uppercase;
    color: #173751
}
.thumbnail h2 {
    font-family: 'Roboto', sans-serif;
    color: white;
    font-weight: 400
}
.footer {
    width: 100vw;
    height: 170px;
    background: #082c47;
}
.footer-container {
    margin-top: 15px;
    width: calc(66.66667% - 33.33333px);
    float: left;
    margin-left: 20px;
    margin-left: calc(16.66667% - 23.33333px + 40px)
}
.footer-container p {
    color: #a0a0a0;
    font-family: 'Roboto', sans-serif;
    float: left;
    margin-right: 70px;
    cursor: pointer
}
.footer-container p:hover{
    color: white;
}
.menu-container {
    width: 100%;
    height: 40px;
    position: relative;
    text-align: center;
    background: #214968;
}
.menu-container a {
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: white;
    padding: 8px 25px;
    position: relative;
    font-size: 1.1em;
    transition: all .3s
}
.menu-container a::after {
    position: absolute;
    content: '';
    width: 0%;
    height: 3px;
    background: #74d600;
    left: 0;
    right: 0;
    bottom: -1px;
    margin: auto;
    transition: all .3s
}
.menu-container a:hover::after {
    width: 100%
}
.menu-container a:hover {
    color:  #74d600
}
.link{
    color: #a5a5a5;
    font-family: 'Roboto', sans-serif;
    font-size: .9em;
    text-decoration: none;
    line-height: 25px;
    transition: all .3s ease;
    cursor: pointer;
    user-select: none;
}
.link:hover{
    color: white;
}
.bonus{
    font-size: 10em;
    color: #74d600;
    font-family: 'Source Sans Pro', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1px;
    letter-spacing: 20px;
    text-shadow:     0 2px 0 hsl(88, 100%,30%),
	                 0 5px 0 hsl(88, 100%,30%),
	                 0 4px 0 hsl(88, 100%,30%),
	                 0 6px 0 hsl(88, 100%,30%),
	                 0 9px 0 hsl(88, 100%,30%),
	                 0 6px 0 hsl(88, 100%,30%),
	                 0 7px 0 hsl(88, 100%,30%),
	                 0 8px 0 hsl(88, 100%,30%),
	
	                 0 0 5px rgba(0,0,0,.05),
	                0 1px 3px rgba(0,0,0,.2),
	                0 3px 5px rgba(0,0,0,.2),
	               0 5px 10px rgba(0,0,0,.2),
	              0 10px 10px rgba(0,0,0,.2),
	              0 20px 20px rgba(0,0,0,.3);
    user-select: none;
    margin-bottom: 100px
}
.bonus-text{
    font-size: 2.5em;
    font-family:'Roboto', sans-serif;
    color: white;
    text-transform: uppercase;
    margin: 0;
    line-height: -5px;
    letter-spacing:2px;
    font-weight: 400;
    user-select:none
}