@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root{
    --c01: #153147;
    --c02: #031523;
    --c03: #374f63;
    --c04: #bbb;
}

body{margin:0;padding:0;font-family:"Nunito", Helvetica, Arial, sans-serif;font-size:12px;min-height:100vh;color:#fff;}
p,li{padding:0;margin:0;line-height:1.6;text-align:justify;}
p:not(:last-child){margin:0 0 20px 0;}
div{box-sizing:border-box;}
a{color:#34552b;outline: none;text-decoration: underline;}
.noscroll{overflow:hidden;}
.table{}
.table .tr{display:flex;flex-flow:row wrap;}
.cc{display:flex;flex-flow:row wrap;justify-content:center;align-items:center;}
.blocked{overflow:hidden;}
.hidden{display:none;}
h1{font-size:160%;font-weight:normal;margin:10px 0;padding:10px 0;text-align:center;border-bottom:1px solid var(--с01);}

body{background-image: url(images/backdef.jpg);background-size:cover;background-attachment:fixed;background-color:#0a0a14;}



.wrap{background: var(--c01);width:100%;max-width:800px;margin:0 auto;min-height:100vh;}
.header{background:#021c2c;background-image:url(images/front01.jpg);height:80px;padding:10px;display:flex;flex-flow:row wrap;justify-content:center;align-items:center;background-position: center;background-size:cover;}
.header .logo{margin:0 auto;}
.header .logo a{}
.header .logo a img{display:block;}

.header,.textbox,.footer,.features{padding:0 10px;}

.casino{}
.casino a.img{position:relative;margin-bottom:40px;display:block;}
.casino a.img .back{overflow:hidden;aspect-ratio:4/3;position:relative;border-bottom:1px solid var(--c03);}
.casino a.img .back img{width:100%;height:100%;object-fit:cover;object-position: top center;display: block;}
.casino a.img .back::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:30%;background:linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));}
.casino a.img .btn{position:absolute;bottom:-20px;z-index:10;left:50%;transform:translateX(-50%);text-transform:uppercase;font-weight:bold;color:#fff;text-shadow:1px 1px #000;width:85%;}
.casino a.img .btn span{padding:10px 15px;text-align:center;}


.textbox{}

/*border-bottom:1px solid var(--c01);*/
.listbox{}
.listbox .item{background:var(--c03);display:flex;flex-flow:row wrap;justify-content:center;align-items:center;margin:10px;position:relative;padding:10px 10px 10px 0px;}
.triangle{width:50px;height:50px;background:#175214;color:#fff;display:flex;justify-content:flex-start;align-items:flex-start;font-weight:bold;position:absolute;top:-3px;left:-3px;clip-path: polygon(0 0, 0 100%, 100% 0);}
.triangle span{position:absolute;top:4px;left:4px;font-size:16px;width:22px;text-align:center;}
.listbox .item .logo{display:block;width:30%;padding:10px;}
.listbox .item .logo img{display:block;max-width:100%;margin:0 auto;}
.listbox .item .logo .img{display:none;}
.listbox .item .logo .img img{display:block;max-width:100%;margin:0 auto;}

.listbox .item .logo .rating{text-align:center;margin-top:10px;}
.listbox .item .logo .rating .rating_name{text-transform:uppercase;color:var(--c04);}
.listbox .item .logo .rating .line{background:#992828;margin:3px 0;}
.listbox .item .logo .rating .line .val{height:6px;background:#51b851;}
.listbox .item .logo .rating .ratingVal{font-size:85%;font-weight:bold;color:var(--c04);}

.listbox .goall{margin:30px auto 10px;text-align: center;width:200px;text-transform: uppercase}


.listbox .item .data{flex:1;}
.listbox .item .data .name{font-weight: bold;font-size:120%;}
.listbox .item .data .name a{color:#fff;text-decoration:none;}
.listbox .item .data .short{padding:20px 0;color:var(--c04);}
.listbox .item .data .bonus{display:flex;flex-flow:row wrap;justify-content:center;align-items:center;background:var(--c01);padding:5px;}
.listbox .item .data .bonus .bonustxt{flex:1;padding:10px;font-weight: bold;}
.listbox .item .data .bonus .bonusbtn{}
.greenBtn{border:1px solid #268a16;background:#80df32;background:linear-gradient(180deg,rgba(128, 223, 50, 1) 0%, rgba(87, 176, 14, 1) 100%);}
.greenBtn a,.greenBtn span{padding:10px;color:var(--bg5);display:block;background:#ffffff;background:linear-gradient(120deg,rgba(255, 255, 255, 0) 59%, rgba(255, 255, 255, 0.3) 61%, rgba(255, 255, 255, 0.1) 100%);font-weight:bold;box-shadow:0 1px 0 0 rgb(255,255,255,0.5) inset;text-decoration:none;text-shadow:1px 1px #000;}
.greenBtn a:hover,.greenBtn span:hover{color:#000;text-shadow:1px 1px #fff;}


.bonusBox{background:red;margin:30px 10px;background: url(images/bonusbg.jpg);background-position: center;background-size:cover;display:flex;flex-flow:column;justify-content:center;align-items:center;padding:15px 10px;font-size:120%;}
.txtBonus{background:rgb(0,0,0,0.7);padding:15px;text-align:center;font-weight:bold;}
.getBonus{margin:10px auto 0;max-width:210px;text-transform:uppercase;}

.features{}
.features .tr{margin:1px;}
.features .td{padding:10px;}
.features .td{background:#374f63;}
.features .td:nth-child(1){width:140px;margin-right:1px;}
.features .td:nth-child(2){flex:1;}

.footer{background:var(--c02);height:200px;margin-top:10px;border-top:1px solid var(--c03);padding:20px 10px 10px;}
.footer ul.menu{list-style: none;margin:0;padding:0;display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center;}
.footer ul.menu li{padding:3px 7px;margin:0;}
.footer ul.menu li a{text-decoration:none;color:var(--c04);}
.footer ul.menu li a:hover{text-decoration:underline;}

@media screen and (min-width:600px){
    body{font-size:14px;}
    .textbox,.features{padding:0 20px 20px;}
    .listbox .item .logo{width:20%;padding:10px;}

    .casino .img{aspect-ratio:9/5;}
    .casino a.img .btn{width:auto;}
    .casino a.img .btn span{padding:10px 35px;}

    .bonusBox{margin:30px 20px;}
}