@font-face {
 font-family: Roboto-Regular;
 src: url(../fonts/Roboto-Regular.ttf);
}
@font-face {
 font-family: Roboto-Bold;
 src: url(../fonts/Roboto-Bold.ttf);
}

html, body{
 padding:0px;
 margin:0px;
 font-family: "Roboto-Regular";
 background:#000;
 color:#fff;
}


/*
* header
*/
header{

}
header .logo{
 width: 200px;
 height: 70px;
 background: url(/images/logo.png) center no-repeat;
 background-size: contain;
 position: absolute;
 left: calc(50% - 100px);
 top: 30px;
}
header .menu{ 
 float: right;
 text-align: right;
 background: #f46443;
 padding: 10px 15px;
 width: calc(50% - 145px);
 position: relative;
 margin-top: 45px;
}
header .menu:before{
 content:"";
 display:block;
 background: url(/images/left-side-menu.png) center no-repeat;
 width:50px;
 height:100%;
 background-size: contain;
 position: absolute;
 left: -50px;
 top: 0px;
}
header .menu ul{
 margin: 0px;
 display: flex;
 list-style: none;
 padding: 0px;
 justify-content: space-between;
}
header .menu ul li{
 margin: 0px 0.5vw;
}
header .menu ul li a{
 color: #fff;
 text-decoration: none;
 font-size: 0.9vw;
 white-space: nowrap;
 text-transform: uppercase;
 line-height: 1.2vw;
 vertical-align: middle;
}
header .menu ul li:nth-of-type(1) a{
 color: #000;
 font-weight: bold;
 font-size: 1.2vw;
 font-family: Roboto-Bold;
}
header .menu .m-menu{
 display: none;
 background: url(../images/m-menu.png) center center no-repeat;
 width: 40px;
 height: 40px;
 background-size: contain;
 position: absolute;
 right: 15px;
 top: 10px;
 cursor: pointer;
 z-index: 1100;
}


/*
* section main
*/
section.main{
 width: 100%;
 //height: 25vw;
 //max-height:528px;
 background: url(/images/bg-main.png) top center no-repeat;
 background-size: contain;
 text-align: center;
 padding-top: 150px;
}
section.main .header{
 color: #00ad5d;
 font-size: 3.3vw;
 text-transform: uppercase;
}
section.main .sub-header{
 font-size: 2vw;
 text-transform: uppercase;
 margin: 5px 0px 15px;
}
section.main .text{
 width: 90%;
 margin: auto;
 text-align: justify;
 font-size: 14px;
}


/*
* section links
*/
section.links{
 margin-top: 50px;
 text-align: right;
}
section.links .download{
 width: 45%;
 display: block;
 float: left;
 background: #f46443;
 color: #fff;
 text-decoration: none;
 font-size: 2vw;
 text-align: right;
 text-transform: uppercase;
 padding: 8px 10px 7px;
 font-family: Roboto-Bold;
 letter-spacing: 1px;
 box-sizing: border-box;
}
section.links .googleplay, section.links .appstore, section.links .androidtv{
 width: 12vw;
 height: 3.5vw;
 display: inline-block;
 margin: 0px 1vw;
}
section.links .googleplay{
 background: url(/images/googleplay.png) center no-repeat;
 background-size: contain;
}
section.links .appstore{
 background: url(/images/appstore.png) center no-repeat;
 background-size: contain;
}
section.links .androidtv{
 background: url(/images/androidtv.png) center no-repeat;
 background-size: contain; 
 margin: 0px 5vw 0px 1vw; 
}


/*
* section instruction
*/
section.instruction{
 text-align: center;
}
section.instruction .header{
 padding: 60px 0px 40px;
 font-size: 2vw;
 font-family: Roboto-Bold;
 text-transform: uppercase;
 letter-spacing: 0.5px;
}
section.instruction .video{
 width: 100%;
 max-width: 400px;
 margin: auto;
 position: relative; 
}
section.instruction .video a{

}
section.instruction .video a:before{
 content:"";
 display:block;
 width:100%;
 height:100%;
 background: url(/images/play.png) center no-repeat;
 position: absolute;
 background-size: 25% auto;
}
section.instruction .video a img{
 width:100%;
}

/*
* section instruction
*/
section.three-steps{
 text-align:center;
}
section.three-steps .header{
 padding: 60px 0px 40px;
 font-size: 2vw;
 font-family: Roboto-Bold;
 text-transform: uppercase;
 letter-spacing: 0.5px;
}
section.three-steps ul{
 list-style:none;
 display:flex;
 width: 90%;
 margin: auto;
 justify-content: space-between;
 padding: 0px;
}
section.three-steps .step-1, section.three-steps .step-2, section.three-steps .step-3{
 width:30%;
 display: flex;
 font-size: 14px;
 text-align: left;
 box-sizing: border-box;
}
section.three-steps .step-1:before{
 content:"1";
 display:block;
 font-size: 6vw;
 padding: 0px 10px 0px 0px;
}
section.three-steps .step-2{

}
section.three-steps .step-2:before{
 content:"2";
 display:block;
 font-size: 6vw;
 padding: 0px 10px 0px 0px;
}
section.three-steps .step-3{

}
section.three-steps .step-3:before{
 content:"3";
 display:block;
 font-size: 6vw;
 padding: 0px 10px 0px 0px;
}


/*
* section services
*/
section.services{
 width: 100%;
 height: 30vw;
 max-height: 567px;
 background: url(/images/bg-services.png) top center no-repeat;
 background-size: contain;
 text-align: center;
 padding-top: 40px;
 border-top: solid 1px #00ad5d;
 border-bottom: solid 1px #00ad5d;
 margin-top: 50px;
 position: relative;
}
section.services .header{
 background: #f46443;
 width: 40%;
 color: #000;
 font-size: 3vw;
 text-transform: uppercase;
 text-align: right;
 padding: 10px 20px;
 box-sizing: border-box;
 position: relative;
}
section.services .header:before{
 content:"";
 background: #f46443;
 width: 100%;
 height: 10px;
 display: block;
 position: absolute;
 left: 0px;
 top: -20px;
}
section.services ul{ 
 list-style: none;
 display: flex;
 justify-content: center;
 margin-top: 10vw;
}
section.services ul li{
 background: #00ad5d;
 padding: 15px 20px;
 border-radius: 5px;
 margin: 0px 3vw;
}
section.services ul li a{  
 padding-top: 15px;
 color: #000;
 text-decoration: none;
 display: block;
 text-transform: uppercase;
 font-family: Roboto-Bold;
 font-size: 1.2vw;
}
section.services ul li .name{ 
 font-size: 1.5vw;
 font-family: Roboto-Bold;
}


/*
* footer
*/
footer{
 padding: 20px 30px;
 position: relative;
}
footer .left-side{

}
footer .left-side a{
 color: #fff;
 text-decoration: none;
 display: block;
 font-size: 15px;
}
footer .left-side .copyright{
 margin-top: 20px;
}
footer .right-side{
 position: absolute;
 right: 30px;
 bottom: 20px;
}
footer .right-side .payment-systems{
	
}
footer .right-side .payment-systems img{
 width: 120px;
}



@media screen and (max-width: 950px) {

header .menu{
 background: transparent;
 margin-top: 0px;
 width: 100%;
}
header .menu:before{
 display:none;	
}
header .menu .m-menu{
 display:block;	
}
header .menu ul{
 display:none;
 position: absolute;
 width: 100%;
 margin: 0px;
 padding: 0px;
 background: rgba(0,0,0,0.8);
 z-index: 1000; 
 position: absolute;
 top: 0px;
}
header .menu ul li{
 display: block;
 text-align: center;
 padding: 20px;
}
header .menu ul li a{
 color: #fff !important;
 font-size: 18px !important;
 font-family: Roboto-Bold !important;
 font-weight: normal !important;
}
section.services ul{
 margin-top: 5vw;
}

}

@media screen and (min-width: 951px) {
header .menu ul{
 display:flex !important;	
}	
}



@media screen and (max-width: 800px) {
	
section.main, section.services{
 height:auto;
}
section .header{
 font-size: 20px !important;
}
section.services ul li .name{
 font-size:15px;
}
section.services ul li a{
 font-size:12px;
} 
section.services ul{
 display: block;
}
section.services ul li{
 margin: 10px 3vw;
 display: inline-block;
}
footer .right-side{
 top:20px;
 bottom:none;
}
footer .right-side .payment-systems img {
 width: 80px;
}

}