@font-face 
	{
	font-family: 'superstar';
	src: url('Unibet-pro.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	}
html
	{
	bottom:0;
	height: 100%;
	}
html
	{
	padding:0;
	margin:0;
	height: 100%;
	background-color:white;
	overflow-y: scroll;
	}
body 
	{
    padding:0;
    margin:0;
    /* Remove any browser-default margins. */
    margin: auto;
    min-height: 100% !important;
    height: 100%; 
    background-color: #2a2a2a;  
    }
h1
	{
    font-family: 'superstar';
    color:white;
    font-size:4.2vw;
    margin:0;
    line-height:90%;
	}
#h1main
	{
    padding-top:2%;
	}
h2
	{
    font-family: 'superstar';
    font-size:3.3vw;
    margin:0;
    line-height:90%;  
	}
h3
	{
    color:white;
    font-family: 'Roboto';
    text-align:center;
    font-size:1.1vw;
    margin:0 auto;
    width: 96%;  
    font-weight: bold;    
    margin-top:20px;
    margin-bottom:6px;    
    line-height:130%;
	}
h3 span
	{
	font-weight:900;
	color:#ffe71e !important;
    }
h4
	{
    margin:0 !important;
	}
p
	{
    font-size:1.35vw;
    font-family: 'Roboto', sans-serif;
    color:#333;
    margin-top: 1.5%;    
	}
#terms
	{
	font-size:9px;
    clear:both;
    color:white;
	}
hr.style 
	{
    border: 0;
    height: 2px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    clear:both;
    margin:3% 0;
	}
#diamond
	{
    position: absolute;    
    left: 3%;
    width: 26%;
    top: 40%;
	}    
#main-banner
	{
    position:relative;
    width:100%;
    height:70%;
    background-color:grey;
    background-image:url('bg2.jpg');
    background-size:cover;
	}
#twinspin
	{
    position:relative;
    width:32%;
    height:100%;
    text-align:center;
    margin-left:10%;
    padding-top:2%;
	}
.twingif
	{
    display: none;    
	}   
.twingif-portrait
	{
    display: none;    
	}  
#desktoplogo
    {
    display:inline-block;
    }
#mobilelogo
    {
    display:none;
    }
#content-container
    {
    width:100%;
    height:78%;
    background-color:#2a2a2a;
	}
#header-content
    {
    position:absolute;
    height:100%;
    width:52%;
    padding:3% 3% 0 0;
    box-sizing:border-box;
	right:0;
    top:0;
    background-image:url('green-bg.png');
    background-size:cover;
    text-align:center;    
    /*text-align:right;*/
    }
#header-inner
	{
    position:relative;
    width:70%;
    height:100%;
    float:right;
    padding-top: 5%;    
	}
#header-image
    {
    position:relative;
    height:100%;
    }
.left
	{
	position:absolute;
	top:0;
	left:0
	}
.right
	{
	position:absolute;
	top:0;
	right:0
	}
#content
    {
    position:relative;
    height:100%;
    width:55%;
    float:left;
    padding:3%;
    box-sizing:border-box;
    }
#button 
	{
    max-width: 35%;
    height: auto;
    -moz-border-radius: 7px;
    border-radius: 7px;
    background:#ffe71e; 
    padding:3.5% 8%;
    margin-bottom:3%;
    position:relative;
    margin:0 auto;
	}
#button:hover 
	{ 
    background-color: #ffed4b;
	}
#button p 
	{
	font-family: 'Roboto';
    text-align: center;
    font-weight: 600;
    color:#000;
    font-size:1.5vw;    
    text-decoration:none;
    margin: 0;
	}
#bottom-content
	{
    width:100%;
    height:22%;
    position: relative;
    clear: both;    
    }
#steps-bg
	{
    width:100%;
    height:100%;
    background-color:black;
    opacity:0.8;
    position:relative;
	float:left;
    }
#steps
	{
    width:100%;
    height:100%;
    position:absolute;
	}
#steps-container
	{
	width:80%;
    height:100%;
    margin:0 auto;
    position:relative;
    padding:1%;
    box-sizing: border-box;
    }
.steps-box
	{
	width:33.3%;
	height:100%;
	position:relative;
	float:left;
	}
.number-box
	{
    width:22%;    
    height:100%;
    position:relative;
    float:left;
	}
.number-box:before
	{
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
	}
.number-box img 
	{
    width:100%;
    position: relative;
	display: inline-block;
    vertical-align: middle;
    margin:0 auto;
    max-width: 75px;    
	}
.steps-grow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
	}
.steps-grow:hover, .steps-grow:focus, .steps-grow:active {
    -webkit-transform: scale(1.1) rotate(4deg);
    transform: scale(1.1) rotate(4deg);
    }
.contenet-box
	{
    width:65%;
    height:100%;
    position:relative;
    float:left;
    padding-left:3%;
    padding-top:0px;
    }
.contenet-box h3
	{
    color:white;
    text-align:left;
	font-size:1.5vw;
    font-family: 'Roboto', sans-serif;
    margin:0;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    line-height:110%;
    font-weight: 500;
    }
#frame_footer 
	{
	margin:0 auto;
	width:100%;
	min-width:300px;
	max-height: 60px;
    }
#mfooter 
	{
	width:100%;
	overflow:visible;
	text-align:center;
	background-color: #333;
	position: relative;
    vertical-align: baseline;
    display:block;
    float:left;
    }
#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    background:#007a44;
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
	}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
	}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
    background:#00934b;
	}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
	}

@media only screen and (max-width: 768px) and (orientation : portrait)
{
h1
	{
    font-size:10vw;
	}
#h1main
	{
    padding-top:5%;
	}
h2
	{
    font-size:5.1vw;  
    }    
h3
	{
    font
    }
p
	{
    font-size:3.2vw;
    }  
hr.style 
	{
    float:none;
    margin:0 auto;
    margin-top: 1%;    
	}
#main-banner
	{
    height:80%;
	} 
#twinspin
	{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:auto;
    text-align:center;
    margin-left:0;
    padding-bottom: 4%;
	}
#twinspin img
    {
    width:80% !important; 
    text-align:center !important;
    }
#desktoplogo
    {
    display:none;
    }
#mobilelogo
    {
    display:inline-block;
    }
#header-content
    {
    width:100% !important;
    height:75%;
    background-image:url('green-bg-mob.png');
    padding-left: 0;
    background-size: 100% 100%;
    text-align:center;
    padding:0;
    }
#spinvideo
    {
    display:none;
    }
    
.secondary-image 
    {
    display:none;
    }
/*.twingif-portrait
	{
    display: block;
    width: 97%;
    margin: 0 auto;
    margin-top: -7vh;
	}*/ 
.twingif-portrait {
    display: block;
    width: 72%;
    margin: 0 auto;
    /* margin-top: -7vh; 
    float: left;*/
    position: relative;
}    
#header-inner
    {
    width:92%;
    height:100%; 
    padding-top:8%;
    margin:0 auto;
    float: none;    
    }
#content-container
    {
    height:100%;
    padding-bottom: 0;
    }
.left
	{
	position:absolute !important;
    height:100% !important;
	top:0;
	left:0
	}
.right
	{
	position:relative;
	top:0;
	right:0
	}
#content
    {
    width:95%;
    height:50%;
    margin:0 auto;
    float:none;
    padding-top:10%;
    }
#button 
    {
    max-width: 35%;
    height: auto;
    -moz-border-radius: 7px;
    border-radius: 7px;
    background: #ffe71e;
    float: none;
    padding: 5% 8%;
    margin:0 auto;  
    margin-top:2%;    
    margin-bottom:5%;
	}
#button p 
	{
    font-size:4vw;
	}
#bottom-content
	{
    height:70vh;
    position:relative;
    float:left;
    bottom:0;
    }
#steps-bg
	{
    }
.steps-box
	{
	width:100%;
	height:33.3%;
	}   

.number-box
	{
    width:100%;
    height:auto;
	}
.number-box img 
	{
    width:20%;
    position: relative;
    top: 0;
    transform: none;
    display:block;
    margin:0 auto;
	}
.contenet-box
	{
    width:100%;
	height:auto;
    padding-left:0;
    padding-top:30px;
    } 
.contenet-box h3
	{
    text-align:center;
    font-size:4.4vw;
    }
.contenet-box
	{
    width:100%;
	height:auto;
    padding-left:0;
    padding-top:30px;
    } 
.contenet-box h3
	{
    text-align:center;
    font-size:4.4vw;
    }   
#diamond
    {
    width:20% !important;
    margin:3%;
    top: 0;
    left: 0;    
    }    
}

@media only screen and (max-width: 568px) and (orientation : portrait)
{
   #content-container
    {
	height:92%;
    padding-bottom: 0;
    } 
.twingif-portrait {
    width: 98%;
    }
}
@media only screen 
/*and (min-device-width : 375px) */
and (max-device-width : 768px) 
and (orientation : landscape)
{
 
.video
    {
    display:none;
    }   
.twingif
	{
    display: block;    
	}
.twingif-portrait
	{
    display: none;    
	}  
.terms-landscape-mobile
    {
    font-size:6px !important;
	}
#button 
    {
    padding: 4% 10%;
    max-width:50%;
	}
#steps-container {
    width: 94%;
    }
.contenet-box h3
	{
	font-size:1.8vw;
    }
p
	{
    font-size:1.8vw;
	}
#header-content
    {
    width:55%;
    }
}