html, body { 
    height: 100%;
}
body{
    margin:0;
    background-color:#1E1E1E;
}

.container{
    font-family: 'Montserrat', sans-serif;
    width:100%;
    height: 100%;
}
.header{
    background-color:#5A086B;    
    height:10%;     
    min-height: 70px;
}
.logo{
    background: url("../images/BETDAQ_Logo.svg") no-repeat  center;    
    float:left;               
    height: 100%;
    min-width: 199px;
    margin-left: 25px;
}
.login{
    float:right;
    margin:20px; 
}
.loginbutton{
    font-family: 'Arial';
    font-weight:700;    
    font-size: 16px;
    display: inline-block;
    padding: 12px 50px 13px 26px;
    background: #40b2bd;
    border: none;
    color: white;
    text-decoration:none;
    border-radius: 6px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 85px 10px;
    background-image: url(../images/lock.png);
}


.joinnowbutton{
    display: inline-block;
    padding: 12px 20px 12px 20px;
    background: #40b2bd;
    border: none;
    color: white;
    text-decoration:none;
    border-radius: 24px;
    font-size: 20px;
    cursor: pointer;
    white-space: nowrap;
}


.backdrop{
    background: url("../images/backdrop.jpg") no-repeat  center; 
    width: 100%;
    height: 78%;
    padding:5% 0 0 5%;
    box-sizing: border-box;
    background-color:black;
    min-height: 360px;
}

.backdrop2{
    background: url("../images/2Perc-Bkg.jpg") no-repeat  center; 
    width: 100%;
    height: 78%;
    padding:5% 0 0 5%;
    box-sizing: border-box;
    background-color:black;
    min-height: 360px;
}
.backdrop3{
    background: url("../images/Masters-Bkg1.jpg") no-repeat  center; 
    width: 100%;
    height: 78%;
    padding:5% 0 0 5%;
    box-sizing: border-box;
    background-color:black;
    min-height: 360px;
}
.backdrop4{
    background: url("../images/AintreeBkg.jpg") no-repeat  center; 
    width: 100%;
    height: 78%;
    padding:5% 0 0 5%;
    box-sizing: border-box;
    background-color:black;
    min-height: 360px;
}
.backdrop5{
    background: url("../images/PUNCH-B20G20-Bkg.jpg") no-repeat  center; 
    width: 100%;
    height: 78%;
    padding:5% 0 0 5%;
    box-sizing: border-box;
    background-color:black;
    min-height: 360px;
}
.backdrop6{
    background: url("../images/WCDaqback-Bkg.jpg") no-repeat  center; 
    width: 100%;
    height: 78%;
    padding:5% 0 0 5%;
    box-sizing: border-box;
    background-color:black;
    min-height: 360px;
}
.box{
    background:rgba(0, 0, 0, 0.76);
    padding: 3%;
    color:#fff;
    width: 65%;
    text-transform: uppercase; 
    max-width: 815px;
}
.box2{
    background:rgba(126, 10, 175, 0.76);
    padding: 3%;
    color:#fff;
    width: 60%;
    text-transform: uppercase; 
    max-width: 815px;
}
.headline{
    font-weight:900;
    font-size:50px;
}

.highlight{
    color:#F7D501;
}

.subtext{
    font-weight:500;
    margin-top: 10px;
}

 .promo-row {
    
 }
.promo-row .promo,
.promo-row .joinnow,
.promo-row .commission{
    box-sizing: border-box;
}
.promo-row .promo{
    font-weight:normal;
    float:left;
    width: 35%;
    padding-top: 5%;
    display:none;
}

.promo-row .msg{
    font-weight:normal;    
    font-size:12px;
    white-space: nowrap;
}

.promo-row .code{
    color:#6BC6E2;
    font-size: 20px;
    font-weight: bold;
    margin-top: 8px;
}

.promo-row .joinnow{
    float:left;
    padding-top: 4%;
}

.promo-row .commission{
    float:left;
    width:30%;  
    padding-top: 3%;
    padding-left: 5%;
}
.promo-row .stamp{
    background-size: auto;
    width: 84px;
    height: 70px;
    background: url("../images/promo-stamp.png") no-repeat;
}
 /* Clear floats after the columns */
.promo-row:after {
    content: "";
    display: table;
    clear: both;
}

.tcs-row{ 
}
.tcs-row .icon{
    background: url("../images/18-Icon.svg") no-repeat ;
    width: 30px;
    height: 30px;
    display: inline-block;
}
.tcs-row .msg{
    display: inline-block; 
    font-size:12px;
    vertical-align: top;
    padding-top: 10px;
    padding-left: 5px;
}
.footer{
    height:12%;      
    text-transform: uppercase; 
    background-color:#7D3A88;   
}

.footer .tcs1,.footer .tcs2{    
    float:left;
    height: 100%;
    color:#fff;
    width: 50%;
    box-sizing: border-box; 

}
.footer .tcs1{
    background-color:#5A086B;
    font-size: 28px;
    font-weight: 900;
}
.footer .tcs1 span{
    display: inline-block;
} 
.footer .tcs2 span{ 
    display: inline-block;
} 
.footer .tcs2{    
    background-color:#5A086B;
    padding-left: 5%;
    font-size: 12px;
}
.footer .tcs2:after {
    content: "";
    display: table;
    clear: both;
}

.terms3 {
	color: #fff;
}

@media only screen and (max-width: 1024px)  {
    .box{
        padding: 1%;
    }
    .promo-row .promo{
        width: 100%;
        padding-top: 1%;
    } 
    .promo-row .joinnow{
        padding-top: 5%;
    }
    .promo-row .commission {
        padding-top: 3%;
        padding-left: 15%;
    }
    .footer .tcs1{    
        font-size:22px;
    }
}

@media only screen and (max-width: 840px) {
    .footer .tcs1{    
        font-size:18px;
    }
}

@media only screen and (max-width: 800px) {
    .footer .tcs1{     
    }
    .footer .tcs2{     
        font-size: 11px;
    }
}

@media only screen and (max-width: 790px) {
    .footer .tcs1,.footer .tcs2{    
        width:100%;
        height:50%;
    }
}

@media only screen and (max-width: 780px), screen and (max-height: 780px) {
    .logo{
        background-size: 90% 90%;
        min-height: 25px;
        min-width: 131px;    
    }
    .loginbutton{
        padding: 7px 29px 6px 14px;
        background-position: 67px 5px;
        border-radius: 3px;
    }
    .login{
        min-height: 25px;
        min-width: 89px;
    }
    .headline{
        font-size: 32px;
    }
    .box{
        margin: 0;
        width: 90%;
        padding: 5%;
    }
    .backdrop{
        padding: 5%;
    }
}
@media only screen and (max-width: 540px) , screen and (max-height: 540px){
    .footer .tcs1{
        font-size: 18px
    }
    .footer .tcs2{
        font-size: 9px
    }
    .footer{
        height:18%;
    }
    .backdrop{
        height:72%;
    }
}