/*
* Template Name : Luckii - Responsive Home Page
* Version : 1.0.0
* Created by :  Luckii
* File: Main Css 
*/

body{
	font-family: 'Oswald', sans-serif;
	background-color:#000;
}

h1{
	color:#fff;
	font-weight:800;
	font-size:68px;
	line-height: 70px;
}

img{
	max-width:100%;
}
.g-recaptcha {
    padding-left: 35px;
    padding-top: 18px;
}

/*====Header=======*/
.top-header {
    background-color: #1b713e !important;
    padding: 20px 0px !important;
    text-align: center;
}

.top-header .container{
	display:block;
}

#mySidenav li a{
	font-size:23px;
	font-weight:600;
	color:#fff !important;
}

#mySidenav li a:hover{
	color:#00c1d5 !important;
}

.navbar-nav {
    margin-left: 192px;
    border-bottom: none;
}

.navbar .col-lg-4{
	text-align: left;
}

.navbar .col-lg-8{
	text-align: right;
}

.join-now-btn{
	display: inline;
	background-color: #28bd67;
	font-size:18px;
	color:#fff;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	border:0px;
	font-weight:400;
	width:110px !important;
	padding-top:10px;
	padding-bottom:10px;
}

span.mobile-btn {
	display: none;
	}

.navbar-brand {
    margin-right: 0px;
}
/*====Hero Section=======*/

	.hero-header{
		background-image: url(../img/background1.jpg);
		background-position: top center;
		background-repeat: no-repeat;
		background-color: #000000;
		padding-bottom: 30px;
		background-size: cover;
	}

	.slider .col-lg-6{
		float:left;
		padding: 0px;
	}

	.slider-text {
		margin-top: 150px;
		margin-bottom: 150px;
	}

	.line-1, .line-2, .line-3{
		text-shadow: 0px 0px 20px #000000;
	}

	.slider-main-image{
		margin-top:0px;
		margin-bottom:00px;
	}


	.slick-track{
	 background-color: #000;
	}

.line-1{
	color:#fff;
	font-size:35px;
	line-height: 40px;
	text-transform: uppercase;
	font-weight:500;
	display: block;
	text-align: left;
}

.line-2{
	color:#fff;
	font-size:100px;
	line-height: 84px;
	text-transform: uppercase;
	font-weight:500;
	display: block;
	text-align: left;
}

.line-2.green{
	color:#c3fc44;
	line-height: 94px;
}

.line-2.blue{
	color:#00c1d5 !important;
}

.line-2.orange{
	color:#ebae29 !important;
}

.line-3{
	color:#fff;
	font-size:30px;
	font-weight:600;
	line-height: 50px;
	display: block;
	text-align: left;
}

.line-cta a{
	color:#fff;
	background-color:#28bd67;
	font-size:36px;
	font-weight:600;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	padding-top:10px;
	padding-bottom:10px;
	text-align: center;
	display:block;
	max-width:268px;
	margin-top:20px;
	margin-bottom:20px;
}

.line-text-content{
	color:#fff;
	font-size:20px;
	line-height:26px;
}

.user-form{
	width:375px;
	max-width:375px;
	display: inline-block;
    margin-top: 70px;
	margin-left: auto;
	background-color: rgba(38, 36, 35, 0.9);
	padding-bottom: 24px;
	-webkit-border-bottom-right-radius: 15px;
	-webkit-border-bottom-left-radius: 15px;
	-moz-border-radius-bottomright: 15px;
	-moz-border-radius-bottomleft: 15px;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
	float: right;
	
}

.form-header{
	font-size:25px;
	background-color:#1b713e;
	color:#fff;
	text-align: center;
	padding-top:5px;
	padding-bottom:5px;
	font-weight: 400;
	-webkit-border-top-left-radius: 15px;
	-webkit-border-top-right-radius: 15px;
	-moz-border-radius-topleft: 15px;
	-moz-border-radius-topright: 15px;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	margin-top:-15px;
	margin-bottom:14px;
}

.form-group {
    padding-left: 30px;
    padding-right: 30px;
	margin-bottom: 0px;
}

label {
    display:block;
   	margin-bottom: 0rem;
    margin-top: 10px;
	font-size:18px;
	color:#fff;
	font-family: 'Roboto', sans-serif;
	text-align: left;
}

.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 17px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #101010;
    background-clip: padding-box;
    border: 1px solid #4d4d4d;
    border-radius: 0px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn-success {
    color: #101010;
    background-color: #ffcc00;
    border:0px;
    width: 100%;
	font-size:35px;
    text-align: center;
    margin: 0 auto;
    display: block;
	margin-top: 15px;
	-webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
	text-transform: uppercase;
	font-weight:400;
}

.all-registered{
	text-align: center;
	margin-top:15px;
	text-decoration: underline;
}

.all-registered a{
	color:#fff;
	text-align: center;
	font-family: 'Roboto', sans-serif;
}

.form-check {
    position: relative;
    display: block;
    padding-left: 1.25rem;
    padding-left: 56px;
}

.form-check-input {
    position: absolute;
    margin-top: 0rem;
    margin-left: -26px;
}

.form-check-label {
    margin-bottom: 0;
    font-size: 14px;
}

input#exampleCheck1 {
    width: 20px;
    height: 20px;
}

/*POPUP*/

/*Offers*/
	.offer-title{
		background-image: url(../img/offers-bg.jpg);
		background-position: top center;
		background-repeat: no-repeat;
		background-color: #000000;
		padding-bottom: 60px;
	    padding-top:60px;
		background-size: cover;
		color:#fff;
		
	}

	.offer-title .col-lg-12{
		text-align: center;
		padding-bottom:40px;
	}

	.offer-title .col-lg-12 p{
		font-family: 'Roboto', sans-serif;
		font-size:20px;
		line-height:24px;
	}

	.offer-title .col-lg-12 h1{
		font-size:65px;
		line-height:65px;
		text-transform: uppercase;
		font-weight:500;
	}

    .offer-title .col-lg-12 h1 span{
		color:#c3fc44;
	}

	.offer-title .col-lg-6{
		text-align: center;
	}

	.offer-title .col-lg-6 img{
		border:4px solid #389b60;
	}

	.offer-title .col-lg-6 h2{
		font-size:28px;
		line-height:28px;
		color:#fff;
		margin-top:33px;
	}

    .offer-title .col-lg-6 h2 span{
		color:#ffcc00;
	}

	.offer-title .col-lg-6 .offer-code{
		color:#c3fc44;
		font-size:20px;
		font-family: 'Roboto', sans-serif;
	}

    .offer-title .col-lg-6 .offer-code{
		color:#c3fc44;
		font-size:20px;
		line-height:20px;
		font-family: 'Roboto', sans-serif;
		margin-top: 20px;
	}

    .offer-title .col-lg-6 .plain-text{
		color:#fff;
		font-size:17px;
		line-height:22px;
		font-family: 'Roboto', sans-serif;
	}

	.claim-btn{
		color: #101010;
		background-color: #ffcc00;
		border: 0px;
		font-size: 24px;
		text-align: center;
		margin: 0 auto;
		display: inline-block;
		margin-top: 0px;
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		border-radius: 30px;
		text-transform: uppercase;
		font-weight: 500;
		padding:8px;
		padding-left:30px;
		padding-right:30px;
	}

	.claim-btn:hover{
		color: #fff;
    	background-color: #218838;
		text-decoration: none;
	}



/*Offers*/

.page-wrapper{
  width:100%;
  height:100%;
 background:url(https://i.imgur.com/2ZgHKbQ.jpg) center no-repeat;
  background-size:cover;
}

.blur{
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.btn.trigger.login-btn{
	display: inline-block;
	text-align: center;
	background-color: #c3fc44;
	font-size:20px !important;
	color:#1b713e;
	-webkit-border-radius: 24px;
	-moz-border-radius: 24px;
	border-radius: 24px;
	border:0px;
	font-weight:500;
	width:144px !important;
	padding-top:10px;
	padding-bottom:10px;
	margin-top: 5px;
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
}

.modal-wrapper{
  width:100%;
  height:100%;
  position:fixed;
  top:0; left:0;
  background:rgba(0,0,0,0.9);
  visibility:hidden;
  opacity:0;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
	z-index: 1;
}

.modal-wrapper.open{
  opacity:1;
  visibility:visible;
}

.modal{
  width: 380px;
  height: auto;
  display: block;
  margin: 50% 0 0 -190px;
  position: relative;
  top: 50%;
  left: 50%;
  background: transparent;
  opacity:0;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  color:#fff;	
}

.modal-wrapper.open .modal{
  margin-top:-200px;
  opacity:1;
}

.head{
  width:100%;
  height:50px;
  padding:10px;
  overflow:hidden;
  background:#1b713e;
  font-size:22px;
  -webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;	
}

/*.btn-close{
  width:32px;
  height:32px;
  display:block;
  float:right;
}*/

.btn-close {
    width: 20px;
    height: 20px;     
    display: block;
    float: none;
    position: absolute;
    top: 13px;
    right: 16px;
}

.btn-close::before, .btn-close::after{
  content: '';
    width: 20px;
    height: 3px;
    display: block;
    background: #fff;
}

.btn-close::before{
  margin-top:12px;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
}

.btn-close::after{
  margin-top:-3px;
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  transform:rotate(-45deg);
}

.content{
  padding:5%;
  padding-bottom: 25px;	
  background: #13522d;
  -webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
	
	
}

.form-control.green{
	background-color:#0e3c21;
	border:1px solid #1b713e;
	color:#38a163;
}

.form-label-group.left label{
	margin-top:10px;
}

.btn.btn-lg.btn-primary.btn-block{
	color: #101010;
    background-color: #ffcc00;
    border: 0px;
    width: 100%;
    font-size: 25px;
    text-align: center;
    margin: 0 auto;
    display: block;
    margin-top: 0px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    text-transform: uppercase;
    font-weight: 500;
}

/*POPUP*/

/*====FOOTER=======*/
.footer{
	background-color:#1b713e;
	text-align: center;
	padding-top:0px;
	padding-bottom:0px;
}

.footer .container{
	padding-top:32px;
	padding-bottom:32px;
}


.footer .logo img{
	vertical-align: center;
	padding-top:44px;
}

.footer .small-grey{
	font-size:14px;
	color:#45835c;
	font-family: 'Roboto', sans-serif;
	line-height:26px;
}

.footer .links a{
	color:#bababa;
	font-size:14px;
	line-height:18px;
}

.footer .payment-social img{
	margin-right:10px;
}

.col-lg-6.slider-text.mobile{
	display:none;
}


/*====RESPONSIVE=======*/

@media (min-width: 1200px){
.container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1280px;
}
}

@media (max-width: 1199px) {
	.navbar-brand {
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-right: 1rem;
    font-size: 0px;
	}
	
	.slider-main-image {
    	margin-top: 30px;
	}
}


@media (max-width: 1024px) {
	.navbar-nav {
    	margin-left: 100px !important;
	}
	
	.static-text {
    	margin-right: 60px;
	}
	
}

@media (max-width: 991px) {
	
	.hero-header {
    	background-image: url(../img/offers-bg.jpg);
		padding-bottom: 50px;
	}
	
	.col-lg-8 {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}

	.col-lg-4 {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
	
	.top-header {
   	 	padding: 10px 0px !important;
	}
	
	.row{
		margin-right:0px;
		margin-left:0px;
	}
	
	.slider-text {
		margin-top: 50px;
		margin-bottom: 50px;
		text-align: center;
	}
	
	.line-1 {
    	display: block;
	}
	
	.line-2 {
    	display: inline-block;
		line-height: 56px !important;
	}
	
	
	.col-lg-6.slider-text.desktop{
		display:none;
	}
	
	.col-lg-6.slider-text.mobile{
		display:block;
	}
	
	.btn.trigger.login-btn {
    	margin-top: 10px;
	}
	
	.user-form {
		display: flow-root;
		margin-top: 0px;
		margin-left: auto;
		margin-right: auto;
		float:none;
	}
	
	.mdi-menu:before {
		content: "\F35C";
		font-size: 45px;
		color: #fff;
	}
	
	.container{
	    width: 100%;
    	max-width: 100%;
	}
	
	
	.slider .col-lg-6{
      	margin-top: 0px;
		float: none;
    	padding: 0px;
    	text-align: center;
	}
	
	.slider-main-image{
		text-align: center;
	}
	
	
	.line-1, .line-2, .line-3{
		text-align: center;
	}
	
	.line-1 {
		font-size: 40px;
		line-height: 36px;
	}
	
	.line-2.blue br{
		display: none;
	}
	
	.line-2.orange br{
		display: none;
	}
	
	.line-2 {
		color: #ebae29;
		font-size: 56px;
		line-height: 56px;
	}
	
	.line-3 {
		font-size: 26px;
    	line-height: 30px;
	}
	
	.line-cta a {
		font-size: 30px;
		padding-top: 5px;
		padding-bottom: 5px;
		text-align: center;
		display: block;
		max-width: 250px;
		margin:0 auto;
		margin-top: 15px;
    	margin-bottom: 15px;
	}
	
	.line-text-content {
    text-align: center;
    width: 100%;
    display: inline-block;
	}
	
	.offer-title .col-lg-12 h1 {
		font-size: 56px;
		line-height: 56px;
	}
	
	.claim-btn.margin-sep{
		margin-bottom:45px !important;
	}
	
	
}

@media (max-width: 767px) {
	
	.navbar .col-lg-8 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
		text-align: center;
		margin-bottom: 10px;
	}

	.navbar .col-lg-4 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
		text-align: center;
	}
	
	.test-bg .float-right{
		float: none !important;
		margin-top: 150px;
	}
	
	.line-1, .line-2, .line-3, .line-cta{
		text-align: center;
	}
	
	.line-cta a{
		margin: 0 auto;	
	}
	
	.test-bg {
		height: 524px;
		background-position: 25% center;
	}
	
	.line-1{
		text-shadow: 0px 0px 20px #000000;	
	}
	
	.line-2 {
		font-size: 50px;
		line-height: 50px;
		text-shadow: 0px 0px 20px #000000;	
	}
	
	.line-2 br{
		display: none;
	}
	
	.line-3 {
    font-size: 25px;
    margin-top: 0px;
    margin-bottom: 15px;
    text-shadow: 0px 0px 20px #000000;
    line-height: 25px;

	}
	
	.offer-title .col-lg-12 h1 {
		font-size: 45px;
		line-height: 45px;
	}
	
	.register-title {
		flex: 0 0 100%;
		max-width: 100%;
	}
	
	.register-title strong {
   	 	padding-top: 34px;
	}	
	
	.register-title .circle {
    	margin-top: 22px;
		margin-bottom: 22px;
	}
	
	section#getting-started .container {
    	max-width: 420px;
	}
	
	h1 {
		font-size: 50px;
		line-height: 50px;
	}
	
	#reel-fun em {
		font-size: 28px;
		line-height: 28px;
	}
	
	#jackpots .total-jack-amount {
		font-size: 80px;
		line-height: 80px;
	}
	
}

@media (max-width: 600px) {
	
	.register-title {
		flex: 0 0 100%;
		max-width: 100%;
	}
	
	.margin-extra{
		margin-top:25px;
	}
	
	.icon-image {
    	margin-bottom: 10px;
	}
	
	.line-1 {
		font-size: 38px;
		line-height: 38px;
	}
	
	.line-2 {
		display: contents;
		font-size: 38px;
    	line-height: 38px !important;
	}
	
	.line-3 {
		font-size: 25px;
		line-height: 30px;
	}
	
	.login-btn, .join-now-btn  {
		font-size: 15px;
		width: 90px !important;
	}
	
	.user-form {
		width: 300px;
		max-width: 375px;
	}
	
	.navbar-brand {
    	margin-right: 0px;
	}
	
	span.mobile-btn {
    	top: 18px;
		right: 17px;
	}
	
	a.navbar-brand.logo.text-uppercase {
    	padding-top: 10px;
	}
	
	#jackpots .total-jackpot {
		font-size: 36px;
		line-height: 29px;
	}
	
	#jackpots .total-jack-amount {
		font-size: 41px;
		line-height: 31px;
	}
	
	#jackpots .jackpot-text {
		font-size: 22px;
		line-height: 22px;
	}
	
	#jackpots .btn a {
    	padding: 15px 42px;
	}
	
	#jackpots .btn {
    	margin-top: 0px;
	}
	
	.join-now-btn, .login-btn  {
		font-size: 14px;
		width: 100px !important;
    }
	
	.test-bg {
    	background-position: 27% center;
	}
	
	h1 {
		font-size: 40px;
		line-height: 40px;
	}
	
	#reel-fun em {
		font-size: 23px;
		line-height: 23px;
	}
	
	.extra-margin{
		margin-top:-20px;
	}
}

@media (max-width: 400px) {
	.top-header {
    	padding: 5px 0px !important;
	}
	
	span.mobile-btn {
    	top: 15px;
	}
	
	a.navbar-brand.logo.text-uppercase {
    	margin-left: 0px;
	}
	
	.mdi-menu:before {
    	font-size: 37px;
	}
	
	#mySidenav li a {
		font-size: 18px;
		color: #fff !important;
	}
	
	.login-btn, .join-now-btn {
		font-size: 12px;
		width: 85px !important;
		padding-top: 5px;
    	padding-bottom: 5px;
	}
	
	.login-btn {
    	margin-right: 0px !important;
		width:60px !important;
	}
	
	.join-now-btn {
		width: 85px !important;
	}
	
	.navbar-white .navbar-toggler {
    	margin-top: -39px;
	}
	
	.slider-main-image img {
    margin: 0 auto;
    margin-top: 10px;
	}	
	
	.line-1 {
		font-size: 33px;
		line-height: 33px;
	}
	
	.line-2 {
		font-size: 34px;
		line-height: 34px;
	}
	
	.line-3 {
    	font-size: 22px;
	}
	
	.user-form {
		width: 264px;
		max-width: 375px;
	}
	
	.btn-success {
    	font-size: 26px;
	}
	
	.offer-title .col-lg-12 h1 {
		font-size: 33px;
		line-height: 33px;
	}
	
	.form-check-label {
    	line-height: 14px;
	}
	
	.form-check {
    	padding-right: 10px;
	}
	
	.form-check-input {
		position: absolute;
		margin-top: 0px;
		margin-left: -25px;
	}
	
	.modal {
		width: 290px;
		height: auto;
		display: block;
		margin: 50% 0 0 -145px;
	}
	
	.head {
		text-align: left;
		padding-left: 15px;
	}
}