@import "reset.css";

html{
    height: 100%;
    background: #FFF linear-gradient(to bottom,  rgba(225,225,225,1) 0%,rgba(255,255,255,1) 44%,rgba(255,255,255,1) 70%,rgba(239,239,239,1) 100%);
}
body{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    color: #222222;
    background: url("collage.png") no-repeat right top;
    margin: 0;
    height: 100%;
    min-height: 100%;
}

/*
    Common styles
*/
a{
    color: #D27700;
}
a:hover{
    color: #F08A00;
    text-decoration: none;
}
a:active{
    color: #FB9100;
}
#content p{color: #222222; line-height: 20px; margin-bottom: 20px;}

/*
    Header
*/
header{
    height: auto;
    margin-bottom: 20px;
}
header .logo{
    padding-top: 10px;
    font-family: "Myriad Pro", Gadget, sans-serif;
    font-weight: bold;
    font-size: 36px;
    line-height: 40px;
    color: #4E1D0E;
    text-align: left;
    transition: all 0.5s ease;
	white-space:nowrap;
	text-shadow: 0px 1px 5px #fff;
}
header .logo img{
    vertical-align: -50%;
}
header .logo span{
    font-weight: normal;
}
header .top-content{
    background: rgba(255, 255, 255, 0.8);
    height: auto;
    border: 1px solid #DBDBDB;
    border-radius: 10px;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
header .top-content:after{
    display: block;
    content: "";
    height: 15px;
    position: relative;
    bottom: -36px;
    background: url("block-shadow.png") no-repeat center bottom;
}
header .top-text{
    font-size: 14px;
    text-align: justify;
    line-height: 20px;
}

header menu, footer menu, menu.brand-list{
    width: 100%;
    text-align: center;
    background: #FFF;
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(244,244,244,1) 100%);
    border: 1px solid #DBDBDB;
    border-radius: 5px;
	text-transform: capitalize;
}
header menu:after, footer menu:after, menu.brand-list:after{
    display: block;
    position: relative;
    bottom: -15px;
    content: "";
    height: 15px;
    background: url("block-shadow.png") no-repeat center bottom;
}
header menu>li, footer menu>li, menu.brand-list>li{
    list-style-type: none;
    display: inline-block;
}
header menu>li>a, footer menu>li>a, menu.brand-list>li{
    display: inline-block;
    padding: 5px 10px 5px 10px;
    margin-right: 0px;
    margin-top: 10px;
    color: #000;
    font-size: 13px;
    font-weight: bold;
    line-height: 13px;
    text-decoration: none;
    transition: all 0.5s ease;
    border-right: 1px solid #C3C3C3;
}
header menu>li:last-child>a, footer menu>li:last-child>a, menu.brand-list>li:last-child{
    border-right: none;
}
header menu>li>a:hover, footer menu>li>a:hover{
    background-color: #000000;
    color: #ffffff;
    border-color: #ffffff;
    border-radius: 5px;
}
header menu.mini{width: 600px; text-align: left;}
header menu.mini>li>a{font-size: 11px; font-weight: bold;}

/*
    Footer
*/
footer{text-align: right; margin-top: 30px;}
footer menu{background: none; border: none;}
footer menu:after{background: none;}

.wrapper{
    width: 960px;
	min-width: 300px;
    margin: auto;
    padding: 0 20px 0 20px;
    box-sizing: border-box;
}

#content{
}

/*
    Brands
*/
menu.brand-list{
    text-align: left;
}
menu.brand-list li{
    text-align: center;
}
menu.brand-list .number{
    width: 48px;
}
menu.brand-list .logo{
    width: 120px;
}
menu.brand-list .offer{
    /*width: 173px;*/
    width: 448px;
}
menu.brand-list .rating{
    width: 71px;
}
menu.brand-list .play-now{
    width: 80px;
}

.brand-list{
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	width: 100%;
}
.brand-list .brand{
    padding-right: 10px;
    display: block;
    font-size: 21px;
    font-weight: bold;
    color: #000;
    transition: all 0.5s ease;
}
.brand-list .brand:hover, .brand-list .brand:nth-child(2n):hover{
    background: #fffed6;
}
.brand-list .brand:last-child{
    background:none;
    padding-bottom: 0;
    border-bottom: none;
}
.brand-list .brand:nth-child(2n){
    background: #F7F7F7;
    border: 1px solid #DBDBDB;
    border-radius: 5px;
}
.brand-list .brand>div{
    display: inline-block;
    background: url("col-delim.gif") no-repeat right center;
    vertical-align: middle;
    padding: 10px;
    height: auto;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.brand-list .brand .number{
    font-size: 24px;
    background: url("number-bg.png") no-repeat center center;
    height: 57px;
    width: 62px;
    padding: 17px 0 0 25px;
    margin: 0;
    color: #000;
}
.brand-list .brand:first-child .number{
    background-image: url("number-bg-first.png");
    color: #FFF;
}
.brand-list .brand .logo{height: auto;}
.brand-list .brand .logo img{
    border: 4px solid #fff;
    border-radius: 10px;
    box-shadow: #000 2px 2px 4px;
    transition: all 0.5s ease;
}
.brand-list .brand .logo img:hover{border-color: #FFB260;}
.brand-list .brand .offer{ 
/*width: 191px;*/
	width: 466px;
	text-align: center;

}
.brand-list .brand span{
    display: block;
  /*  font-size: 11px;
	font-size: 13px;*/
	font-size: 16px;
    font-weight: normal;
    margin-bottom: 5px;
	text-transform: capitalize;
}
.brand-list .brand .label{
    font-size: 11px;
    font-weight: bold;
}
.brand-list .brand .currency{}
.brand-list .brand .rating{}
.brand-list .brand .play-now{padding: 0; background: none; margin-left: 10px;}
.brand-list .brand .play-now a{
    display: inline-block;
    /*color: #257100;*/
	color: #fff;
    /*background: #FFF;*/
    background: #38c900;
    border: 1px solid #E5E5E5;
    border-radius: 10px;
    height: auto;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: bolder;
    transition: all 0.5s ease;
	width: auto;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.brand-list .brand .play-now a:hover{
    border-color: #38c900;
    /*color: #257100;*/
	color: #fff;
}
.brand-list .brand .play-now span{
    font-size: 17px;
    font-weight: bold;
}

/*
    Stars
*/
.brand-list .stars{
    background: url("star-empty.png") repeat-x;
    height: 20px;
    width: 70px;
    text-align: left;
    display: inline-block;
    margin-top: 10px;
}
.brand-list .stars>i{
    background: url("star-full.png") no-repeat;
    display: inline-block;
    height: 20px;
    width: 14px;
    border: none;
}
.brand-list .stars>i.half{background-image: url("star-half.png");}

/** News **/

h1{
font-size:18px;
margin-top: 15px;
margin-bottom:15px
}

.news{
    display: inline-block;
    margin-top: 10px;
    margin-left: 10px;
    background: #FFF linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(244,244,244,1) 100%);
    border: 1px solid #DBDBDB;
    border-radius: 10px;
    width: 273px;
    padding: 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.news li{
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #E3E3E3;
}
.news li:last-child{border-bottom: none;}
.news h1{
    margin-bottom: 20px;
    font-size: 17px;
    font-weight: bold;
    font: Arial, Helvetica, sans-serif;
}
.news p{
    font-size: 13px;
    text-align: justify;
}
.news a{
    display: inline-block;
    padding: 10px;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    background: #FFF;
    border: 1px solid #E5E5E5;
    border-radius: 5px;
    color: #000;
}
.news a:hover{ color: #257100; border-color: #38c900;}

@media only screen and (max-width: 900px) {
    body{
        background-size: 25%;
    }
    .wrapper{
        width: 100%;
    }
    .news{
        display: block;
        width: 100%;
        margin-left: 0;
    }
    .brand-list{width: 100%;}
	.payout, .total-bonus, .info-box, .top-text{display: none !important;}
	.rating{display: none !important;}
	header .top-content, header menu{display: none;}
    body{background-size: 35%;}
}
@media only screen and (max-width: 885px) {
    .payout, .total-bonus, .info-box, .top-text{display: none !important;}
    header .top-content, header menu{display: none;}
    body{background-size: 25%;}
	.number {display: none !important;}
	
}
@media only screen and (max-width: 815px) {
    .total-bonus, .rating{display: none !important;}
    /*header{height: auto;}*/
    header{height: 100px;}
    header .logo{font-size: 24px;}
    header .logo img{height: 50px; vertical-align: middle;}
	/*{display: none !important;}*/
}
@media only screen and (max-width: 815px) {
    body{background-size: 30%;}
    .wrapper{padding: 5px;}
    header{margin-bottom: 0;}
    .number, menu.brand-list{display: none !important;}

    .brand-list .brand{padding-right: 0;}

    .brand-list .brand:nth-child(2n){
        border: none;
    }

    .brand-list .brand>div{background: none;}

    .brand-list .brand .logo{
        width: 30%;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        padding: 2px;
    }
    .brand-list .brand .logo a{
        display: inline-block;
        box-sizing: border-box;
        width: 100%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    .brand-list .brand .logo img{
        width: 100%;
        border: none;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    .brand-list .brand .offer{
        width: 60%; box-sizing: border-box; padding: 2px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    .brand-list .brand .offer span{font-size: 14px;}

    .brand-list .brand .play-now{
        display: block;
        width: 100%;
        height: 30px;
        margin: 5px 0 5px 0;
    }

    .brand-list .brand .play-now a{
        width: 100%;
        box-sizing: border-box;
        height: auto;
        padding: 8px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    .brand-list .brand .play-now span{
        display: inline-block;
        padding: 0;
        margin: 0;
    }
}
@media only screen and (max-width: 500px) {
    body{background: none;}
    header .logo{font-size: 16px;}
}
.add_text h1 
{
text-align: center;
}
.clearfix::after{content:"";display:table;clear:both}