html,body{
    font-family: Quicksand, sans-serif!important;
    font-weight: 500;
    background: #000;
}

*{
    font-family: Quicksand, sans-serif;
    font-weight: 500;
}

h1,h2,h3,h4,h5,h6{
    font-family: Quicksand, sans-serif!important;
    text-transform: uppercase!important;
    font-weight: 700;
}

.centered{
    text-align: center;
    margin-left:auto;
    margin-right:auto;
}

.counter{
    font-size:34px;
    color:#5ee887;
}

#top-logo-container{
    width:500px;
    overflow: hidden;
    position: absolute;
    display: none;
}
#mobile-logo-container{
    width:290px;
    overflow: hidden;
    position: absolute;
    display: none;
    left:50%;
    margin-left:-145px;
}

.green{
    color:#5ee887;
}

.action-button {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 12px 24px;
    border: 1px solid #398d52;
    border-radius: 8px;
    background: #5ee887;
    background: -webkit-gradient(linear, left top, left bottom, from(#5ee887), to(#398d52));
    background: -moz-linear-gradient(top, #5ee887, #398d52);
    background: linear-gradient(to bottom, #5ee887, #398d52);
    -webkit-box-shadow: #31a855 0px 0px 40px 0px;
    -moz-box-shadow: #31a855 0px 0px 40px 0px;
    box-shadow: #31a855 0px 0px 40px 0px;
    text-shadow: #1f3325 0px 0px 10px;
    font: normal normal 700 20px Raleway;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase
}
.action-button:hover {
    border: 1px solid #52ca75;
    background: #71ffa2;
    round: -webkit-gradient(linear, left top, left bottom, from(#71ffa2), to(#44a962));
    background: -moz-linear-gradient(top, #71ffa2, #44a962);
    background: linear-gradient(to bottom, #71ffa2, #44a962);
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase
}
.action-button:active {
    background: #398d52;
    background: -webkit-gradient(linear, left top, left bottom, from(#398d52), to(#398d52));
    background: -moz-linear-gradient(top, #398d52, #398d52);
    background: linear-gradient(to bottom, #398d52, #398d52);
    text-transform: uppercase
}
.action-button:focus {
    text-transform: uppercase;
    color: #ffffff;
}

input[type=text],
input[type=email]
{
    width:95%!important;
    margin: 0;
    height: 50px;
    border-radius: 8px;
    background: rgba(200, 230, 204, 0.8);
    color:#444;
    border: 1px solid rgb(127, 145, 128);
    font-weight: 500;
}
input[type=text]:focus,
input[type=email]:focus
{
    background: rgba(200, 230, 204, 0.95);
    color:#000;
    border: 1px solid rgb(89, 102, 90);
}
input[type=submit]{
    cursor: pointer;
    width:100%;
}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#555!important}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#555!important;}input::placeholder,textarea::placeholder{color:#555!important}

.pleftright{
    padding-left:20px;
    padding-right:20px;
}

.fw700{
    font-weight: 700;
}

.section
{
    width:100%;
}

#error-message{
    padding-bottom: 20px;
    font-size:22px;
    line-height: 32px;
    color: #e04940;
    text-shadow: 0 0 2px #000;
    text-align: center;
}

#page-pitch{
    background: url(../images/pitch.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
}

@media only screen and (max-width: 1024px)  {
    #page-pitch{
        background: url(../images/pitch.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
}

#main-menu,
#main-logo,
#logo-text,
#logo-text #logo-name,
#logo-text #logo-desc,
#mobile-main-logo,
#mobile-logo-text,
#mobile-logo-text #mobile-logo-name,
#mobile-logo-text #mobile-logo-desc
{
    transition: all 0.05s linear;
    -o-transition: all 0.05s linear;
    -ms-transition: all 0.05s linear;
    -moz-transition: all 0.05s linear;
    -webkit-transition: all 0.05s linear;
}

#main-menu{
    padding: 5px;
    position: fixed;
    left:0;
    top:0;
    height: 138px;
    background: rgba(20, 20, 20, 0);
    border-bottom: 1px solid rgba(50, 50, 50, 0);
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0);
    /*
    background: rgba(20, 20, 20, 0.8);
    border-bottom: 1px solid rgba(50, 50, 50, 1);
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 1);
     */
    z-index: 99999;
}

#main-menu.ref-section{
    background: rgba(20, 20, 20, 1);
}

#main-menu #logo-text{
    color: #dde1ed;
    padding-left:15px;
}
#main-menu #logo-text #logo-name{
    font-family: 'Raleway', sans-serif!important;
    font-weight: 700!important;
    font-size: 55px;
    line-height: 45px;
    padding-top: 28px;
}
#main-menu #logo-text #logo-desc{
    font-family: 'Raleway', sans-serif!important;
    font-weight: 700!important;
    font-size: 33px;
    padding-left: 3px;
}

#main-menu #mobile-logo-text{
    color: #dde1ed;
    padding-left:15px;
}
#main-menu #mobile-logo-text #mobile-logo-name{
    font-family: 'Raleway', sans-serif!important;
    font-weight: 700!important;
    font-size: 32px;
    line-height: 22px;
    padding-top: 12px;
}
#main-menu #mobile-logo-text #mobile-logo-desc{
    font-family: 'Raleway', sans-serif!important;
    font-weight: 700!important;
    font-size: 19px;
    padding-left: 3px;
}

#main-menu #button-top-register{
    padding-top: 5px;
    display: none;
    text-align: right;
}

#main-menu #button-top-register img{
    height:58px;
    width:auto!important;
    max-width: none;
}

#main-register,
#main-description,
#main-features
{
    background: rgba(0,0,0,0.5);
}

#main-referrer-data h1,
#main-referrer h1,
#main-features h1,
#desc-top h1
{
    font-size:40px!important;
    font-weight: 700!important;
    color:#fff!important;
    text-shadow: 3px 3px 5px #000!important;
}
#desc-top h2{
    font-size:32px!important;
    font-weight: 700!important;
    color:#fff!important;
    text-shadow: 3px 3px 5px #000!important;
    text-transform: uppercase;
    padding-bottom:40px;
}

#catenaccio-logo{
    width:372px;
}

@media only screen and (max-width: 640px)  {
    #catenaccio-logo{
        margin:0 auto;
    }
}

#main-register{
    height:auto;
    padding-top:190px;
}

#main-referrer{
    background: transparent;
    height:auto;
    padding-top:160px;
    padding-bottom:40px;
}

@media only screen and (max-width: 640px)  {
    #main-register,
    #main-referrer
    {
        padding-top:94px;
    }
    .share-details{
        padding-left:15px;
        padding-right:15px;
    }
}

#main-engage{
    background: #fff;
    color:#333;
    font-size:28px;
    text-align: center;
    font-weight: 500;
    padding-top:40px;
    padding-bottom:40px;
}

#main-engage #button-register{
    padding-top:30px;
    padding-bottom:30px;
}

#main-talkaboutus{
    background: #333;
    color:#ddd;
    font-size:28px;
    text-align: center;
    font-weight: 500;
    padding-top:40px;
    padding-bottom:40px;
}

#main-talkaboutus .get-it-btn{
    padding-top:30px;
    padding-bottom:30px;
}

#main-talkaboutus .get-it-btn img{
    max-width: 100%;
}

#game-specs{
    padding-top:25px;
}

#main-description{
    font-size:26px;
    line-height:40px;
    text-align: left;
    color:#fff;
    text-shadow: 0 0 2px #000;
    font-weight:400!important;
    overflow: hidden;
}
#main-features{
    width: 100%;
    position: relative;
    padding-top:10px;
    padding-bottom:50px;
}

#main-footer{
    background: rgb(27, 27, 27) url(../footer.png) no-repeat center bottom;
    width: 100%;
    color:#fff;
    padding-bottom:15px;
}

h1{
    color:#000;
}

#main-footer h1{
    color:#fff;
    font-size:48px;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 3px 3px 5px #000;
    font-weight: 700;
    padding-top:20px;
}

#main-footer #copy{
    font-size:12px;
    color: #777;
    width:90%;
    text-align: left;
    margin:0 auto;
}
#main-footer #copy a {
    font-size:12px;
    color: #fff;
    transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -webkit-transition: all 0.1s linear;
}
#main-footer #copy a.grayed {
    color: #777;
}
#main-footer #copy a:hover,
#main-footer #copy a.grayed:hover
{
    font-size:12px;
    color: #44a962;
}

#main-footer #button-register{
    height:110px;
    padding-top:20px;
    text-align: center;
}

#main-referrer-data{
    padding-top:30px;
    padding-bottom:30px;
    background: transparent;
}
#main-platforms{
    padding-top:30px;
    background: #eee;
}

#main-platforms h1{
    text-align:center;
    padding-bottom: 30px;
}

.platform-icon{
    text-align: center;
    padding-bottom:28px;
}
.platform-description{
    text-align: center;
    font-size:13px;
    color:#666;
    padding-top:10px;
}

#register-legal{
    font-size: 12px;
    color:#eee;
    text-shadow: 0 0 2px #000;
    text-align: center;
    padding-top:10px;
    padding-left:20px;
    padding-right:20px;
}

#register-legal a{
    color:#ccc;
}
#register-legal a:hover{
    color:#fff;
}

#platforms-support{
    width:500px;
}

#center-features{
    width:128px;
    height:168px;
    padding-top:20px;
    padding-bottom:20px;
    text-align: center;
    margin:0 auto;
}

.features{
    width:100%;
    font-size:22px;
    line-height:32px;
    font-weight: 500;
    color:#fff;
    text-shadow: 0 0 2px #000;
    text-align: center;
}

#features-slider{
    margin:20px auto 50px auto;
    width:95%;
    padding-bottom:10px;
}

#features-slider div.slick-slide{
    border: 1px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
    -webkit-box-shadow: #eee 0 0 20px 0;
    -moz-box-shadow: #eee 0 0 20px 0;
    box-shadow: #eee 0 0 20px 0;
    position:relative;
    margin:20px 15px;
    background: #000;
}

#features-slider .slick-slide img{
    display: block;
    overflow: hidden;
}

.slider-caption{
    overflow: hidden!important;
    padding:7px 10px!important;
    background: #222;
    color:#fff;
    text-shadow: 0 0 2px #000;
    background: #0f2027; /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #0f2027, #192d34, #213e4b); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #0f2027, #192d34, #213e4b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    font-size: 17px;
    line-height: 20px;
    width: 100%!important;
    height: 40px!important;
    vertical-align: middle;
    text-align: center;
    border-top: 1px solid #777!important;
}

#features-slider table,
#features-slider table tr,
#features-slider table thead,
#features-slider table tbody,
#features-slider table tr td{
    border:none;
    margin:0;
    padding: 0;
}

#features-slider table{
    border:none;
    margin:0;
    padding: 0;
}

@media only screen and (max-width: 640px)  {
    .slider-caption {
        margin:0 auto;
        font-size: 15px;
        line-height: 26px;
    }
}
@media only screen and (min-width: 980px)  {
    #features-slider {
        width: 85%;
    }
}

@media only screen and (max-width: 640px)  {
    #register-form{
        text-align: center;
    }

    #r-nickname,
    #r-email,
    #r-submit
    {
        width:80%!important;
        margin: 0 auto;
        margin-bottom:15px;
    }

    #main-register{
        height:auto;
        padding-bottom:50px;
    }
    #main-referrer{
        height:auto;
        padding-bottom:50px;
    }
    .main-description-text{
        padding-left: 15px;
        padding-right: 15px;
    }
}

.main-description-text{
    display: table-cell!important;
    vertical-align: middle!important;
    height:400px;
}

#main-referrer-data h1,
#main-referrer h1,
#main-features h1,
#desc-top h1
{
    font-size:40px!important;
    font-weight: 700!important;
    color:#fff!important;
    text-shadow: 3px 3px 5px #000!important;
}

#ref-table tbody, #ref-table tfoot, #ref-table thead,
#ref-table tr thead,
#ref-table tr tbody{
    border:none!important;
    background: transparent!important;
}

#ref-table th,
#ref-table td
{
    font-size:14px;
    border:none;
}
#ref-table td{
    font-size:12px;
}

#ref-table th {
    background: rgba(57, 141, 82, 0.85);
    color:#fff!important;
    text-shadow: 0 0 1px #000;
}

#ref-table td {
    background: rgba(81, 201, 117, 0.95);
}

#social-footer{
    padding-top:30px;
    padding-bottom:20px;
}

.share-details,
#main-share h1,
#main-referrer-data h1
{
    color:#fff;
    text-align: center;
    font-size:40px;
}

.share-details{
    font-size:14px;
    padding:10px 0 15px 0;
}

.share-copy{
    display: inline-block;
    font-size: 18px;
    padding:10px;
    margin-bottom:30px;
    border:1px solid #44a962;
    color: #72e186;
    background: #444;
    font-weight: bold;
}

#trainer-container{
    text-align: center;
}
#trainer-container img{
    height: 400px;
    width: auto!important;
    max-width: none;
}

.get-it-btn{
    text-align: center;
}

.get-it-btn img{
    height:100px;
    width: auto;
}