body,
html {
    width: 100%;
    height: 100%;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: #29547f;
    margin: 0;
    padding: 0;
    overflow-x: hidden !important
}

h1,
h2 {
    font-weight: 400
}

a {
    color: #42b983;
    outline: none
}

input {
    box-sizing: border-box
}

.hidden {
    display: none
}

.web_top_title {
    position: absolute;
    text-align: center;
    top: -85px;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    color: #fff;
    border-radius: 3px;
    width: 100%
}

.top_title_main {
    font-size: 40px;
    font-weight: 700
}

.top_title_sub {
    font-size: 21px;
    line-height: 1
}

.top_notification {
    text-align: center;
    top: -25px;
    display: none;
    padding: 5px 8px;
    font-size: 12px;
    background-color: #ca4444;
    color: #fff;
    border-radius: 3px;
    min-width: 200px
}

.floating_container,
.top_notification {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%)
}

.floating_container {
    width: 60%;
    min-width: 300px;
    height: 380px;
    margin: 0 auto;
    top: 50%;
    border-radius: 5px;
    box-shadow: 0 0 40px 5px rgba(0, 0, 0, .4)
}

.container_content {
    width: 100%;
    background-color: #0e2849;
    border-radius: 5px;
    overflow: hidden
}

.bg_image,
.container_content {
    height: 100%;
    position: relative
}

.bg_image {
    width: 50%;
    float: left;
    background-color: #fff;
    /*background: url(./bg.png) no-repeat;*/
    background-position: 50%;
    background-size: cover
}

.bg_image_web {
    width: 50%;
    height: 100%;
    float: left;
    background-color: #fff;
    /*background: url(bg.png) no-repeat;*/
    background-position: 50%;
    background-size: cover;
    position: relative
}

.content_wrapper {
    width: 50%;
    height: 100%;
    float: right;
    position: relative
}

.content_container {
    width: 100%;
    text-align: left;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -70%)
}

.content {
    padding: 0 50px;
    margin-left: auto;
    margin-right: auto;
    max-width: 350px
}

.content_top {
    margin-bottom: 10px;
    overflow: hidden
}

.content_title {
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    float: left
}

.alt_option {
    height: 40px;
    width: 100%;
    position: absolute;
    bottom: 0;
    color: #fff;
    font-size: 14px;
    line-height: 40px;
    background-color: #111;
    text-align: center
}

.login_separator,
.form {
    width: 100%
}

.form_field {
    width: 100%;
    background-color: #fff;
    text-align: left;
    padding: 10px;
    border-radius: 5px;
    border: none;
    font-size: 19px;
    font-weight: 400;
    margin-bottom: 10px;
    opacity: .6;
    outline: none
}

.form_field:focus {
    opacity: 1
}

.tournament_container {
    transform: translate(-50%, -50%);
}

.tournament_rules {
    padding: 0 50px;
    color: #fff;
    line-height: 1.5;
}

.tournament_rules ol {
    list-style-type: 1;
    font-size: 15px;
    display: block;
    columns: 1;
    margin-left: -20px;
}

.tournament_rules li {
    display: list-item;
    float: none;
    background-color: transparent;
    color: #fff;
    overflow: visible;
    margin: 0 0 5px;
    opacity: 1;
    cursor: auto;
}

.tournament_content {
    text-align: center;
}

.tournament_copy_button {
    display: none;
    font-size: 14px;
    text-align: center;
    background-color: #ca4444;
    padding: 15px 50px;
    color: #fff;
    font-weight: bolder;
    border-radius: 8px;
    border: 1px solid #ca4444;
    transition: border-color .25s ease-in-out;
    -moz-transition: border-color .25s ease-in-out;
    -webkit-transition: border-color .25s ease-in-out;
}

.tournament_host_button:hover {
    border: 1px solid #fff;
    cursor: pointer;
}

.tournament_content .disabled {
    background-color: #d57a7a !important;
    cursor: default !important;
}

.tournament_host_button {
    text-align: center;
    background-color: #ca4444;
    padding: 15px 50px;
    font-size: 14px;
    color: #fff;
    font-weight: bolder;
    border-radius: 8px;
    border: 1px solid #ca4444;
    transition: border-color .25s ease-in-out;
    -moz-transition: border-color .25s ease-in-out;
    -webkit-transition: border-color .25s ease-in-out;
}

.tournament_host_button:hover {
    border: 1px solid #fff;
    cursor: pointer;
}

.tournament_copy_button:hover {
    cursor: pointer;
}

.tournament_content .disabled {
    background-color: #d57a7a !important;
    cursor: default !important;
}

.entry_code {
    text-align: left;
    margin: 0 0 5px 3px;
    color: #fff;
    font-size: 15px;
    font-weight: bolder;
}

.tournament_password {
    font-size: 14px;
    font-weight: bolder;
    color: #fff;
    background-color: #123057;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 8px;
}

.tournament_content .default {
    color: #888 !important;
}

.tournament_details_wrapper {
    text-align: left;
    font-size: 12px;
    color: #fff;
    background-color: #123057;
    padding: 10px;
    margin-top: 15px;
    border-radius: 8px;
}

.tournament_details_wrapper span {
    font-size: 14px;
}

.tournament_details_wrapper .title {
    font-weight: bolder;
    font-size: 15px;
    margin: 0 0 10px 0;
}

.tournament_details_wrapper ul {
    list-style-type: disc;
    font-size: 13px;
    display: block;
    columns: 1;
    margin-left: 20px;
}

.tournament_details_wrapper li {
    display: list-item;
    float: none;
    background-color: transparent;
    color: #fff;
    overflow: visible;
    margin: 0 0 5px;
    opacity: 1;
    cursor: auto;
}

.tournament_details_wrapper span {
    font-size: 13px;
}

.colored_bg {
    background-color: #123057;
}

ul {
    list-style-type: none;
    padding: 0;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    font-size: 0
}

li,
ul {
    margin: 0;
    width: 100%
}

li {
    display: inline;
    margin-bottom: 10px;
    float: left;
    background-color: #35537b;
    overflow: hidden;
    opacity: .3;
    cursor: pointer
}

li:hover {
    opacity: .8
}

.submit_button {
    margin-top: 5px;
    width: auto;
    background-color: #ca4444;
    color: #fff;
    padding: 10px;
    text-align: center;
    font-weight: 700;
    border-radius: 5px;
    position: relative;
    cursor: pointer
}

.clippy {
    margin-top: -3px;
    position: relative;
    top: 3px;
}

.offscreen {
    position: absolute;
    left: -9999em;
}


/* RESPONSIVE MEDIA QUERIES*/

@media (max-width: 980px) {
    .floating_container {
        height: 80%;
        width: 90%
    }

    .tournament_password {
        font-size: 12px;
        font-weight: bolder;
        color: #fff;
        background-color: #123057;
        padding: 10px;
        margin-bottom: 15px;
        border-radius: 8px;
    }

    .top_notification {
        width: 100%;
        min-width: 0;
        padding: 5px 0
    }

    .web_top_title {
        display: none
    }

    .bg_image,
    .bg_image_web {
        float: none;
        width: 100%;
        height: 40%
    }

    .content_wrapper {
        width: 100%;
        height: 60%;
        float: none;
        position: relative
    }

    .content_container {
        top: 50% !important
    }

    .content_title {
        font-size: 13px
    }

    .content {
        padding: 50px 40px 0
    }

    .content_container {
        transform: translate(-50%, -60%)
    }

    .bg_image_web img,
    .bg_image img {
        top: 50%
    }

    .facebook_button {
        font-size: 15px
    }

    .facebook_logo img {
        height: 20px
    }

    .alt_option {
        top: 0
    }

    .switch {
        line-height: 1
    }

    .switch a {
        font-size: 9px;
        line-height: .5
    }

    .forgot_password {
        font-size: 13px
    }
}

@media all and (max-width: 526px) {

    .tournament_details_wrapper ul {
        list-style-type: disc;
        font-size: 12px;
        display: block;
        columns: 1;
        margin-left: 20px;
    }

    .tournament_details_wrapper .title {
        font-weight: bolder;
        font-size: 12px;
        margin: 0 0 10px 0;
    }

    .floating_container {
        height: 80%;
        width: 90%;
    }

    .tournament_host_button {
        text-align: center;
        background-color: #ca4444;
        padding: 15px 50px;
        font-size: 12px;
        color: #fff;
        font-weight: bolder;
        border-radius: 8px;
        border: 1px solid #ca4444;
        transition: border-color .25s ease-in-out;
        -moz-transition: border-color .25s ease-in-out;
        -webkit-transition: border-color .25s ease-in-out;
    }

    .tournament_copy_button {
        display: none;
        font-size: 12px;
        text-align: center;
        background-color: #ca4444;
        padding: 15px 50px;
        color: #fff;
        font-weight: bolder;
        border-radius: 8px;
        border: 1px solid #ca4444;
        transition: border-color .25s ease-in-out;
        -moz-transition: border-color .25s ease-in-out;
        -webkit-transition: border-color .25s ease-in-out;
    }

    .entry_code {
        text-align: left;
        margin: 0 0 5px 3px;
        color: #fff;
        font-size: 12px;
        font-weight: bolder;
    }

    .content {
        padding: 65px 40px 0;
        font-size: 12px;
    }

    .tournament_rules ol {
        font-size: 12px;
        display: block;
        columns: 1;
        margin-left: -20px;
    }

    .tournament_rules li {
        display: list-item;
        float: none;
        background-color: transparent;
        color: #fff;
        overflow: visible;
        margin: 0 0 5px;
        opacity: 1;
        cursor: auto;
    }

    .bg_image {
        float: none;
        width: 100%;
        height: 50%;
    }

    .content_wrapper {
        width: 100%;
        height: 50%;
        float: none;
        position: relative;
    }

    .bg_image img {
        top: 25%;
    }
}

@media (max-width: 980px) {
    .floating_container {
        height: 90%;
        width: 90%
    }

    .top_notification {
        width: 100%;
        min-width: 0;
        padding: 5px 0
    }

    .web_top_title {
        display: none
    }

    .bg_image,
    .bg_image_web {
        float: none;
        width: 100%;
        height: 40%
    }

    .content_wrapper {
        width: 100%;
        height: 60%;
        float: none;
        position: relative
    }

    .content_container {
        top: 50% !important
    }

    .content_title {
        font-size: 13px
    }

    .content {
        padding: 50px 40px 0
    }

    .content_container {
        transform: translate(-50%, -60%)
    }

    .bg_image_web img,
    .bg_image img {
        top: 50%
    }

    .facebook_button {
        font-size: 15px
    }

    .facebook_logo img {
        height: 20px
    }

    .alt_option {
        top: 0
    }

    .switch {
        line-height: 1
    }

    .switch a {
        font-size: 9px;
        line-height: .5
    }

    .forgot_password {
        font-size: 13px
    }
}

@media (max-height: 450px) {
    .floating_container {
        box-shadow: none;
    }

    .container_content {
        overflow: initial;
        background-color: transparent;
    }

    .bg_image_web {
        height: 55% !important;
        border-radius: 8px;
    }

    .tournament_rules {
        padding-top: 0px !important;
        max-width: 450px;
    }

    .content_wrapper {
        height: 85% !important;
    }

    .tournament_container {
        transform: translate(-50%, -50%) !important;
    }

    .tournament_content {
        padding: 0 !important;
        max-width: 450px;
    }

    .tournament_details_wrapper {
        padding: 15px 20px 25px;
    }

    ul {
        columns: 3 !important;
    }

    ul li {
        list-style-type: none;
    }
}