/*=================
Common Codes
=================*/
body {
overflow-x:hidden;
}
body,html {
margin:0;
min-width:320px;
line-height:1.1
}
a,a:hover {
 text-decoration:none
}
h2.heading {
text-align: center;
color: #418bca;
font-weight:normal;
margin:0 0 30px 0;
font-size:34px;
}
.section {
padding: 60px 0;
float: left;
width: 100%;
}
.gray{
background: #eef5fa;
}
a.btn{
width: 90%;  
background: url(../img/right-arrow-white.png) 98% 50% no-repeat #fb963a;
font-size: 1.5rem;
font-weight: 700;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 10px 40px;
color: #fff;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
margin: 10px 20px 20px;
position: relative;
overflow: hidden;
text-transform:none;
}
a.btn:hover, a.btn:focus{
color:#fff;
background-color: #C9922F;
cursor: pointer;
}
/*====================
HEADER
=====================*/
.header {
padding: 10px 0;
float:left;
width:100%;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 99;
background:#fff;
box-shadow: 0 0px 10px #333;
}
/*left*/
.header .left {
padding: 20px 0 0;
}
.header .left a {
color: #418bca;
font-weight:bold;
}
.header .left img {
float: left;
padding-right: 8px;
width: 30px;
}
/*center*/
.header .center {
text-align: center;
}
.header .center img {
max-width: 200px;
width: auto;
}
/*right*/
.header .right {
text-align: right;
padding: 15px 0 0;
}
/*====================
BANNER
=====================*/
.banner{
background:url(../img/banner-for-desktop.jpg)no-repeat;
height:418px;
background-size:cover;
}
.banner .col-md-12{
max-width:1140px;
margin:auto;
}
.desc {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 24px;
padding:10px;
}
.desc b {
color: #00E2FF;
text-decoration: underline;
font-weight: normal;
}
.desc h1 {
font-size: 56px;
text-transform: capitalize;
font-weight:bold;
}
.desc a.btn{
padding:10px 20px;
font-size:25px;
width:35%;
text-transform: uppercase;
letter-spacing: 1px;
}
.desc a.btn img{
width:auto;
display: inline-block;
}
/*====================
LIST
=====================*/
.list.section.gray {
padding: 30px 0;
}
.list ul{
float:left;
padding:0;
margin:0;
}
.list ul li{
float:left;
list-style:none;
padding: 0 16px 0 25px;
background:url(../img/tick.png)no-repeat;
background-position: 0px 2px;
font-size:16px;
}
/*====================
HOW IT WORKS
=====================*/
.how-it-works .col-md-3 {
background: #fff;
border-radius: 10px;
border: 1px solid #eee;
padding:20px;
margin: 0 5px;
max-width: 24.1%;
}
.how-it-works .col-md-3 .icon{
float:left;
width:30%;
padding-right:15px;
}
.how-it-works .col-md-3 .icon img{
width:100%;
float:left;
}
.how-it-works .col-md-3 .text{
float:right;
width:70%;
color:#418bca;
font-size:22px;
line-height: 24px;
}
/*====================
BUY
=====================*/
.buy{
text-align:center;
}
.buy .row{
max-width: 800px;
margin: 50px auto;
}
.buy .text{
font-size:22px;
line-height: 26px;
margin: 15px 0 0;
}
/*====================
BLOCK 4
=====================*/
.block4.section {
padding: 0;
z-index: 99;
position: relative;
}
/*====================
FOOTER
=====================*/
.footer{
background:url("../img/footer.jpg")no-repeat;
padding: 60px 0 40px;
float:left;
width:100%;
height:229px;
margin: -50px 0 0;
color:#fff;
background-size:cover;
}
/*Left*/
/*cards*/
.cards {
float: left;
width:100%;
padding:25px 0 0;
}
.cards img {
float: left;
padding: 0 5px 0 0;
width:80px;
}
/*copyright*/
.copyright{
float:left;
width:100%;
font-size:16px;
padding:0 15px;
}
/*Right*/
.footer .col-md-3{
text-align:right;
}
/*=======================
Responsive
========================*/
@media screen and (max-width: 1199px) and (min-width:920px) {
/*Common Codes*/
h2.heading{
font-size:30px;
}
a.btn{
font-size:24px;
padding: 10px;
}
/*Header*/
/*Banner*/
.desc a.btn{
float:none;
}
/*List*/
.list ul{
padding:0 30px;
}
.list ul li{
padding:0 34px 15px 30px;
width: 50%;
}
/*How it works*/
.how-it-works .col-md-3{
margin: 0 2px;
max-width: 24.4%;
padding: 15px;
}	
.how-it-works .col-md-3 .icon{
padding-right:10px;
}	
.how-it-works .col-md-3 .text{
width:70%;
font-size: 14px;
line-height: 16px;
}
/*Buy Now*/
.buy img{
width:50px;
}
.buy .text {
font-size: 18px;
line-height: 20px;
}
/*Footer*/
.footer{
margin:-45px 0 0;
}
.footer .col-md-3{
padding-top:15px;
}
.footer .col-md-3 img{
width:50%;
}
}
@media screen and (max-width: 919px) and (min-width:768px) {
/*Common Codes*/
h2.heading{
font-size:30px;
}
a.btn{
font-size:24px;
padding: 10px;
}
/*Banner*/
.desc a.btn{
float:none;
width:50%;
}
/*List*/
.list ul{
padding:0 40px;
}
.list ul li{
padding:0 34px 15px 30px;
width: 50%;
}
/*How it works*/
.how-it-works .col-md-3{
margin: 0 2px;
max-width: 24%;
padding: 15px;
}	
.how-it-works .col-md-3 .icon{
padding-right:15px;
}	
.how-it-works .col-md-3 .icon img{
width:45px;
}
.how-it-works .col-md-3 .text{
width:65%;
font-size: 16px;
line-height: 18px;
}
/*Buy Now*/
.buy img{
width:50px;
}
.buy .text {
font-size: 18px;
line-height: 20px;
}
/*Footer*/
.footer{
margin:-45px 0 0;
}
.footer .col-md-3 img{
width:50%;
}
.cards{
padding: 10px 0 0;
}
}
@media screen and (max-width: 767px) and (min-width: 480px) {
/*Common Codes*/
h2.heading{
font-size:28px;
}
/*Banner*/
.desc{
font-size:18px;
}
.desc h1{
font-size: 36px;
}
.desc a.btn{
font-size:20px;
width:100%;
}
/*Buy*/
.buy .text{
font-size: 15px;
line-height: 16px;
margin: 5px 0 30px;
}
.buy .row{
margin:auto;
}
.buy .row .col-md-4 {
width: 33%;
}
/*How it works*/
.how-it-works .col-md-3 .icon img{
width:auto;
}
/*Block-4*/
a.btn{
font-size:20px;
}
/*Footer*/
.footer{
margin:-40px 0 0;
padding:50px 0 40px;
}
}
@media screen and (max-width: 479px) and (min-width: 320px) {
/*Header*/
.header .center img {
max-width: 80%;
}
.header .left img{
width:25px;
}
.header .left {
padding: 15px 0 0;
}
/*Footer*/
.cards img{
width:65px;
}
/*Common Codes*/
h2.heading{
font-size:24px;
}
/*Banner*/
.desc{
font-size:13px;
}
.desc h1{
font-size: 25px;
}
.desc a.btn {
letter-spacing: 0;
font-size:14px;
padding:10px;
width:100%;
}
/*How it Works*/
.how-it-works .col-md-3 .text{
font-size: 18px;
margin: 0px 0 0;
}
.how-it-works .col-md-3{
margin:0 0 5px;
}
/*Buy*/
.buy .text{
font-size: 12px;
line-height: 13px;
margin: 5px 0 10px;
}
.buy .row{
margin:auto;
}
.buy .col-md-4{
width: 33%;
padding: 0 10px;
}
.buy .col-md-4 img{
width:60%;
}
/*Block-4*/
a.btn{
font-size:14px;
}
/*Footer*/
.footer{
margin:-40px 0 0;
padding:50px 0 40px;
}
.copyright{
font-size:14px;
}
}
@media screen and (max-width: 319px) and (min-width: 0px) {
/*Header*/
.header .center img {
max-width: 100%;
}
.header .left img{
width:25px;
}
/*Footer*/
.cards img{
width:60px;
}
/*Common Codes*/
h2.heading{
font-size:24px;
}
/*Banner*/
.desc{
font-size:16px;
}
.desc h1{
font-size: 25px;
}
.desc a.btn {
letter-spacing: 0;
font-size:14px;
padding:10px;
width:100%;
}
/*How it Works*/
.how-it-works .col-md-3 .text{
font-size: 18px;
margin: 0px 0 0;
}
.how-it-works .col-md-3{
margin:0 0 5px;
}
/*Buy*/
.buy .text{
font-size: 18px;
line-height: 20px;
margin: 5px 0 30px;
}
.buy .row{
margin:auto;
}
/*Block-4*/
a.btn{
font-size:14px;
}
/*Footer*/
.footer{
margin:-30px 0 0;
padding:70px 0 40px;
}
.copyright{
font-size:14px;
}
}
@media screen and (max-width: 1199px) and (min-width:0px) {
/*Banner*/
.top.block {
background:url("../img/banner-for-desktop.jpg")repeat;
background-position: top center;
float: left;
width: 100%;
background-size:cover;
}
.banner{
background:none;
padding:0!important;
height:auto;
}
.desc{
padding:20px;
}
.desc a.btn{
float:none;
margin: 0 0 10px;
text-transform: none;
letter-spacing: 0px;
}
.list.section.gray{
background:transparent;
padding:0;
color:#fff;
}
}
@media screen and (max-width: 767px) and (min-width:0px) {
/*Common Codes*/
.section{
padding: 30px 0;
}
/*Header*/
.header{
background-color:#fff;
}
.header .row{
margin-left:0;
margin-right:0;
}
.header .left{
width:20%;
}
.header .left span{
display:none;
}
.header .center{
width:60%;
}
.header .right{
width:20%;
}
.header .right img{
width:100%;
}
/*List*/
.list ul{
padding:0 40px;
}
.list ul li{
padding: 0 0 10px 30px;
width:100%;
}
/*How it works*/
.how-it-works .col-md-3{
margin: 5px 20px;
max-width: 100%;
}
.how-it-works .col-md-3 .icon{
width:20%;
padding-right:15px;
}
.how-it-works .col-md-3 .text{
width:80%;
}
/*Footer*/
.footer{
height:auto;
}
.cards{
text-align:center;
padding:0;
}
.cards img{
float:none;
}
.copyright{
text-align:center;
margin: 10px 0 0;
line-height: 16px;
}
.footer .col-md-3{
text-align: center;
margin:15px 0 0;
}
.footer .col-md-3 img{
width:70px;
}
}