body {
    margin:0px;
    padding:0px;
    font-family: "gilroy", sans-serif;
    background-color: #ffffff;
    color:#000;
    font-size:15px;
    font-style: bold;
    font-family: 'Roboto', sans-serif;
}


h1 {
    color:#CE403E;
    font-size:2rem;
    margin:10px 0px;
}
.main-h1-ios,.main-h1-android,.main-h1-desktop{
    font-family: 'Roboto', sans-serif;
}
.container {
    max-width:960px;
    margin:0px auto;
    display: block;
}
.main-header{
    background-color: black;
    
}
header {
    display: block;
    height: 64px;
    background-image: linear-gradient(to bottom, #262d33, rgba(71, 80, 89, 0));
    border-bottom: 1px solid #4B555E;
}
.logo {
    height: 42px;
    margin-top:16px;
}
.main {
    /*background-image: url(../images/poster-m.png);*/
    background-position: top;
    background-size: contain;
    background-repeat: no-repeat;
    flex:1;
    width:100%;
    display: inline-block;
}
.main p {
    line-height: 1.5rem;
    margin:0px;
    padding-top: 10px;
}


.main .container {
    display: flex;
    flex-direction: row;
    padding:30px 0px;
    align-items: center;
}
.install-buttons {
    display: flex;
    flex-direction: column-reverse;
    margin-top:20px;
}
.install-buttons a {
    display: flex;
    color:#fff;
    text-decoration: none;
    align-items: center;
    border-radius:12px;
    font-size:20px;
    width:150px;
    padding: 15px;
    margin-right:20px;
    flex-direction: row;
    justify-content: center;
}
.install-buttons a.ios {
    background: #000;
}
.install-buttons a.android {
    background: #00820f;
}

.install-buttons a i {
    font-size:40px;
    margin-right:15px;
}

.install-buttons a small {
    display: block;
    font-size:0.9rem;
}
.banner-left {
    width:75%;
}
.banner-right {
    width:25%;
}
.banner-right-desktop {
    width:45%;
}
.banner-right-desktop img {
    display: block;
    width:100%;
}
.banner-right img {
    display: block;
    width:100%;
}
h2.title {
    font-size:2rem;
    display: block;
    margin:0px auto;
    text-align: center;
    font-weight: normal;
    color: #000;
}
h2.title:after {
    content: '';
    display: block;
    margin:15px auto;
    height: 4px;
    background:#1A1A1A;
    width:100px;
    border-radius:12px;
    opacity:0.6;
}
.steps {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.steps-desktop {
    display: flex;
    flex-direction: row;
    
    
}
.step-desktop {
    padding: 0px 20px;
    text-align: center;
    flex-grow: 2;
    width: 35%;
    max-width:50%;
    
    margin-bottom:15px;
}
.step {
    padding: 0px 20px;
    text-align: center;
    flex-grow: 1;
    width: 20%;
    max-width:20%;
    border-radius:12px;
    margin-bottom:15px;
}
.step h4 {
    font-size:1.3rem;
    font-weight: normal;
    margin:10px 0px;
    color:#000;
}
.step-desktop h4 {
    font-size:1.3rem;
    font-weight: normal;
    margin:10px 0px;
    color:#000;
}
.step img {
    display: block;
    width:100%;
    border-radius:12px;
}
.step-desktop img {
    display: block;
    width:100%;
    
}
.step:hover {
    background:rgba(223,134,132,0.2);
}
.step-desktop:hover {
    background:rgba(223,134,132,0.2);
}
/* .steps-container {
    margin-top:60px;
} */
footer {
    
    text-align: center;
    margin: 20px 20px 0px 20px;
    padding:20px;
    border-top:rgba(255,255,255,0.1) solid 1px;
}
.footer-bg{
    background-color: #000;
}
.footer-payment-header{
    font-size: 24px;
}
.main-footer{
    margin: 0px;
    padding: 0;
}

 
 /* .desktop-steps , .android-steps, .ios-steps{
    display: none;
}  */
.footer-payment-img-desktop{
    /* background: url("../assets/images/casinoper-payment-methods-footer-dekstop.png") no-repeat; */
    width: 100%;
    min-height: 100px;
    margin:auto;
    background-repeat: no-repeat;
    background-size: 100%;
   
}

.footer-provider-img-desktop{
    /* background: url("../assets/images/casinoper-providers-footer-desktop.png") no-repeat; */
    width: 100%;
    min-height: 100px;
    margin: auto;
    background-repeat: no-repeat;
    background-size: 100%;
    
}

.Panel {
	width: 100%;
	max-width: 600px;
	margin: 30px auto 30px;
    font-size: 20px;
}

.Panel__body {
		background-color: #f2f2f2;
		padding: 10px 20px;
	}

.Tabs {
	position: relative;
	background-color: #fff;

}

.Tabs:after {
		content: ' ';
		display: table;
		clear: both;
	}

.Tabs {
	margin: 0;
	padding: 0;
	list-style: none;
}

/**
	 * UPDATE: better to animate "transform" property than "left"
	 * property. You can see old code lower down for reference.
	 */

.Tabs__tab {
		float: left;
		width: 33.333%;
		text-align: center;
	}

.Tabs__tab:first-child.active ~ .Tabs__presentation-slider {
			transform: translateX(0) scaleX(0.333);
		}

.Tabs__tab:nth-child(2).active ~ .Tabs__presentation-slider {
			transform: translateX(33.333%) scaleX(0.333);
		}

.Tabs__tab:nth-child(3).active ~ .Tabs__presentation-slider {
			transform: translateX(calc(33.333% * 2)) scaleX(0.333);
		}

.Tabs__presentation-slider {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #CE403E;
		transform-origin: 0 0;
		transition: transform .25s;
	}



.Tab > a {
		display: block;
		padding: 10px 12px;
		text-decoration: none;
		color: #666;
		transition: color .15s;
	}

.Tab.active > a {
			color: #222;
		}

.Tab:hover > a {
			color: #222;
		}



  
  .container--tabs .tab-content > .tab-pane {
    display: none;
  }
  .container--tabs .tab-content > .tab-pane.active {
    display: block;
    /* padding: 2.5% 3.5%; */
    
  }
  .container--tabs .tab-content > .active {
    display: block;
  }









/* ****************** TABS END ****************** */




@media(max-width:1024px) {
     /* .container {
        display: block;
        width:100%;
    }  */
    
    header {
        display: block;
        height: 32px;
        padding:16px 15px;
    }
    .logo {
        height: 38px;
        margin:0px;
    }
    .main {
        flex-direction: column;
        padding:0px 30px;
        box-sizing: border-box;
    }
    .main p {
        display: block;
        width:100%;
        padding-top: 8px;
        padding-bottom: 12px;
    }
    .main .container {
        display: block;
        flex-direction: column;
        padding: 0px;
    }
    .banner-left {
        width:100%;
        flex:1;
    }
    .banner-right {
        margin-top:40px;
        width:100%;
        flex:1;
    }
    .banner-right img {
        display: block;
        width:100%;
    }
    
    .install-buttons a {
        flex:1;
        width:auto;
    }
    .install-buttons a:last-child {
        margin: 0px;
    }

    .steps {
        display: flex;
        flex-direction: column;
    }
    .steps-desktop {
        display: flex;
        flex-direction: column;
    }
    .step {
        box-sizing: border-box;
        padding: 0px 20px;
        text-align: center;
        flex-grow: 1;
        width:100%;
        max-width:100%;
        border-radius:12px;
        margin-bottom:45px;
    }
    .step-desktop {
        box-sizing: border-box;
        padding: 0px 20px;
        text-align: center;
        flex-grow: 1;
        width:100%;
        max-width:100%;
        border-radius:12px;
        margin-bottom:45px;
    }
    .step img {
        margin:0px auto;
        width:75%;
    }
    /* .step-desktop img {
        margin:0px auto;
        width:75%;
    } */

    
    
}
@media(max-width:849px){
    .footer-mobil-img{
        width: 100%;
    min-height: 100px;
    margin: auto;
    background-repeat: no-repeat;
    padding: 0px 20px;
    box-sizing: border-box;
    }
    .mobil-img{
        width: 100%;
        
    }
    .footer-desktop-img{
        display: none;
    }
}
@media(min-width:850px){
    .footer-mobil-img{
        display: none;
    }
}


 

@media(max-width:524px){
    .Panel {
        width: 100%;
       
        margin: 10px auto 1px;
        font-size: 12px;
    }
    .banner-right-desktop {
        width:100%;
        margin-top: 10px;
        
    }
    .step-desktop img {
        margin:0px auto;
        width:100%;
        
    }
    
    
}