/**
* USED Colors
* Main: #cc0000;
* Second: #5C9FC0
* Button: #00A300 #97C300 (#00A300)
* #34D134 #4FE169
**/


.ft-yii-widget-top-cards{
    padding: 0;
/*background-color: #f00;*/
/*background-repeat: no-repeat;*/
/*background-size: cover;*/
/*background-position: center;*/
/*background-image: url("data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' width='800' height='500' viewBox='0 0 211.66666 132.29167' version='1.1' id='svg8'%3E%3Cdefs id='defs2'%3E%3ClinearGradient inkscape:collect='always' id='linearGradient4524'%3E%3Cstop style='stop-color:%23690000;stop-opacity:1' offset='0' id='stop4520' /%3E%3Cstop style='stop-color:%23ff0101;stop-opacity:0.99141634' offset='1' id='stop4522' /%3E%3C/linearGradient%3E%3ClinearGradient inkscape:collect='always' xlink:href='%23linearGradient4524' id='linearGradient4528' x1='107.44235' y1='297' x2='107.44235' y2='164.70831' gradientUnits='userSpaceOnUse' /%3E%3C/defs%3E%3Cg inkscape:label='Layer 1' inkscape:groupmode='layer' id='layer1' transform='translate(0,-164.70832)'%3E%3Crect style='opacity:1;fill:url(%23linearGradient4528);fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke' id='rect4518' width='211.66666' height='132.29167' x='0' y='164.70831' ry='0' /%3E%3Cpath style='opacity:1;fill:%23ffffff;fill-opacity:0.22317597;fill-rule:nonzero;stroke:none;stroke-width:13.22929668;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke' d='M 71.304688 0 L 243.29883 500 L 263.69727 500 L 75.283203 0 L 71.304688 0 z M 156.74609 0 L 281.24609 500 L 301.43945 500 L 161.38477 0 L 156.74609 0 z M 238.42188 0 L 317.45703 500 L 337.49414 500 L 243.48828 0 L 238.42188 0 z M 317.75 0 L 352.55859 500 L 372.50391 500 L 323.05664 0 L 317.75 0 z M 395.99805 0 L 387.11719 500 L 407.0332 500 L 401.37891 0 L 395.99805 0 z M 474.37109 0 L 421.66406 500 L 441.61328 500 L 479.66406 0 L 474.37109 0 z M 554.08008 0 L 456.73047 500 L 476.77734 500 L 559.12305 0 L 554.08008 0 z M 636.42578 0 L 492.88867 500 L 513.09375 500 L 641.02539 0 L 636.42578 0 z M 722.89062 0 L 530.7832 500 L 551.20117 500 L 726.80859 0 L 722.89062 0 z M 800 31.210938 L 571.17969 500 L 591.85156 500 L 800 40.119141 L 800 31.210938 z M 0 34.486328 L 0 43.990234 L 202.86328 500 L 223.51758 500 L 0 34.486328 z M 800 192.38867 L 615.03906 500 L 635.99805 500 L 800 208.37109 L 800 192.38867 z M 0 196.30078 L 0 212.92188 L 159.01562 500 L 179.95117 500 L 0 196.30078 z M 800 312.41602 L 663.625 500 L 684.85156 500 L 800 331.52734 L 800 312.41602 z M 0 316.27539 L 0 335.98438 L 110.55664 500 L 131.76562 500 L 0 316.27539 z M 800 406.47461 L 718.65039 500 L 740.07617 500 L 800 426.92188 L 800 406.47461 z M 0 409.97852 L 0 430.95898 L 55.873047 500 L 77.289062 500 L 0 409.97852 z M 800 483.17773 L 782.56836 500 L 796.4707 500 C 798.42557 500 800 498.42557 800 496.4707 L 800 483.17773 z M 0 486.18164 L 0 496.4707 C -2.9605947e-16 498.42557 1.5744303 500 3.5292969 500 L 14.134766 500 L 0 486.18164 z ' transform='matrix(0.26458333,0,0,0.26458333,0,164.70832)' id='path4532' /%3E%3C/g%3E%3C/svg%3E");*/
}

.ft-yii-widget-top-cards h2 {
    /*font-size: 27px;*/
    text-align: center;
    /*color: #fff;*/
    /*margin: 0;*/
    /*border-bottom: none;*/
    /*line-height: 60px;*/
    /*box-shadow: 0 10px 20px -13px #000;*/
    /*background: #FF0000;*/
}

.ft-yii-widget-top-cards ul{
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 20px;
}

.ft-yii-widget-top-cards li{
  width: calc((100% - 40px)/3);      
  padding-bottom: 15px; 
  border-radius: 5px;
  background-color: #fff;
  display: block;
  vertical-align: middle;
  font-size: 16px;
  /*margin: 16px;*/
  position: relative;
  box-shadow: 0 10px 10px rgba(0,0,0,.1);
  transition: all .3s;
  border: solid 2px silver;
}
.ft-yii-widget-top-cards li.top-rated{
  margin: 0 20px 20px;
  border: solid 2px orange;
  box-shadow: 0 10px 10px rgba(248,225,135,1);
}
.ft-yii-widget-top-cards li.card-1,
.ft-yii-widget-top-cards li.card-2 {
  margin: 0;
}
.ft-yii-widget-top-cards li.top-rated {
    margin: 0 20px 20px 20px;
}

/*.ft-yii-widget-top-cards li.card-2 {
  margin: 0 0 0 20px;
}*/

.ft-yii-widget-top-cards li:hover .rating-star {
    height: 11px;
}

.ft-yii-widget-top-cards .position-marker,
.ft-yii-widget-top-cards .top-rated-text-marker {
    position: absolute;
    top: -15px;
    left: calc(50% - 15px);
    background-color: orange;
    width: 30px;
    height: 30px;
    line-height: 22px;
    border-radius: 15px;
    border: solid 4px #fff;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    color: #fff;
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
    z-index: 1;
}

.ft-yii-widget-top-cards .top-rated-text-marker {
    box-shadow: 0 0 7px rgba(248,225,135,1);
}

.ft-yii-widget-top-cards .img-hover{
    position: relative;
    display: block;
    border-radius: 3px 3px 0 0;
    overflow: hidden;
}

.ft-yii-widget-top-cards .img-hover>img{
  vertical-align: middle;
}

.ft-yii-widget-top-cards .img-hover.no-image{
    background: #aaa;
    width: 100%;
    height: 125px;
}

/*Rating start*/
.ft-yii-widget-top-cards .rating {
    position: relative;
    margin: 15px 0;
    text-align: center;
    color:orange;
    line-height: 25px;
    /*font-size: large;*/
    font-size: 1.3em;
}
.ft-yii-widget-top-cards .rating .brand-rating-text {
    color: #A1A1A1;
    font-size: 0.8em;
}
/*Rating end*/

/*Bonus start*/
.ft-yii-widget-top-cards .bonus-area {
    /*font-size: 1em;*/
    margin: 0;
    text-align: center;
    height: 90px;
    font-weight: bold;
    color: #b5b5b5;
}
.ft-yii-widget-top-cards .bonus-amount {
    font-size: 2.5em;
    font-weight: bold;
    margin-right: 5px;
    margin-bottom: 5px;
    color: #585858;
}

/*Bonus end*/


/*Games start*/
.ft-yii-widget-top-cards .games {
    text-align: center;
}
/*Games end*/

/*Payment methods start*/
.ft-yii-widget-top-cards .payment {
    text-align: center;
    height: 80px;
    width: 240px;
    margin: 0 auto;
    /*overflow-y: auto;*/
    line-height: 10px;
}

.ft-yii-widget-top-cards .payment .payment-logo {
/*    display: inline-block;
    padding: 5px;
    background-color: #FFF;
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
    margin: 5px;
    min-width: 10px;
    vertical-align: middle;*/

    float: left;
    width: 70px;
    height: 30px;
    display: inline-block;
    padding: 5px;
    background-color: #FFF;
    border-radius: 2px;
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
    margin: 4px;
    min-width: 10px;
    vertical-align: middle;
}
.ft-yii-widget-top-cards .top-rated .payment {
}

.ft-yii-widget-top-cards .payment i {
    /*display: inline-block;*/
    margin: 0 auto;
}
/*Payment methods end*/

/*Buttons start*/
.ft-yii-widget-top-cards .buttons {
    padding: 15px 0 0;
    border-radius: 0 0 8px 8px;
}

.ft-yii-widget-top-cards .buttons,
.ft-yii-widget-top-cards .bonus-area,
.ft-yii-widget-top-cards .buttons,
.ft-yii-widget-top-cards .bonus-area {
  font-weight: 700;
  text-align: center;
  width: 240px;
  margin: auto;
  display: block;    
  /*letter-spacing: 2px;*/
}

.ft-yii-widget-top-cards .buttons {
    height: 90px;
}

.ft-yii-widget-top-cards a .card-btn {line-height: 30px; width: 100%; display: block;}
.ft-yii-widget-top-cards .card-btn {line-height: 70px; width: 100%;}
.ft-yii-widget-top-cards .read-btn {
    /*margin: 18px 0 10px 0;*/
    color: #7e7e7e;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    /* text-decoration: underline; */
}

.ft-yii-widget-top-cards .play-btn{
  border-radius: 20px;
  color:#ffffff;
  background: #E00D0B;
  line-height: 40px;
  margin-bottom: 15px;
}

.ft-yii-widget-top-cards .play-btn:hover {
  background: red;
/*  border-color: #34D134;
  border-top-color: #444;
  border-left-color: #444;
  border-bottom-color: #34D134;
  border-right-color: #34D134;*/
  box-shadow: 0px 0px 5px red;
}
.ft-yii-widget-top-cards .read-btn:hover {
    color: #585858;
}

@media (max-width: 991px) {
    .ft-yii-widget-top-cards li {font-size: 13px;}
    /*.ft-yii-widget-top-cards .card-btn {font-size: 13px;}*/
    .ft-yii-widget-top-cards .payment{
        height: 110px;
    }
    .ft-yii-widget-top-cards .bonus-area,
    .ft-yii-widget-top-cards .payment, 
    .ft-yii-widget-top-cards .buttons {
        width: 160px;
    }
}

@media (max-width: 767px) {
    .ft-yii-widget-top-cards li {
        width: calc((100% - 10px)/3);
    }
    .ft-yii-widget-top-cards li.top-rated {
        margin: 0 5px 20px;
    }
}

@media (max-width: 639px) {
    .ft-yii-widget-top-cards li.card-1,
    .ft-yii-widget-top-cards li.card-0,
    .ft-yii-widget-top-cards li.card-0 {
        margin:0 0 30px 0;
    }
    
    .ft-yii-widget-top-cards [class^="card"] {
        width: 80%;
        max-width: 356px;
    }
    
    .ft-yii-widget-top-cards li.top-rated {order:-1;}
    
    .ft-yii-widget-top-cards li.top-rated {
        margin: 0 0 30px 0;
    }

    .ft-yii-widget-top-cards li.card-2 {
      margin: 0;
    }
    .ft-yii-widget-top-cards .bonus-area, .ft-yii-widget-top-cards .payment, .ft-yii-widget-top-cards .buttons {
        width: 240px;
    }
}
@media (max-width: 479px) {
    .ft-yii-widget-top-cards [class^="card"] {width: 100%;}
    .casinowatch .ft-yii-widget-top-cards li.top-rated {margin: 0 0 30px 0;}
}