@font-face {
	font-family: 'DB Helvethaica';
	src: url(font/DBHelvethaicaX-45Li.ttf);
}

body { 
	margin: 0;
	font-family: 'DB Helvethaica'; 
	font-weight: 700;
}
h3 {
	margin: 20px 0 0 0;
	font-size: 45px;
	padding: 0 2rem;
	line-height: 1;
}
p {
	font-size: 35px;
	padding: 0 2rem;
	margin: 0;
}
img {
	max-width: 100%;
}
.number {
	margin: 5px 0;
	font-size: 100px;
	line-height: 60px;
}

.header {
	padding: 1rem;
	background-color: black;
	text-align: center;
}

.banner {
	position: relative;
}
.banner-button {
	position: absolute;
	bottom: 5%;
	left: 50%;
	transform: translate(-50%, 0);
}

.feature p { font-weight: 400; }

.features {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.feature {
	background: url('images/rectangle.png') no-repeat;
	background-size: cover;
	width: 390px;
	padding: 2em 0;
	margin: 1%;
	text-align: center;
}

.separator {
	margin: auto;
	border-bottom: 2px solid white;
	width: 70%;
}

/* Footer */
.border-bottom {
    border-bottom: 1px solid #396f87;
}
.footer-title {
    padding: 2rem 0 15px;
    margin-bottom: 10px;
}
.footer-title h2 {
	margin: 0;
    text-align: center;
    color: white;
    font-size: 46px;
    line-height: 1;
}
.footer-sticky {
	position: fixed;
	bottom: 0;
	z-index: 999999;
	display: block;
	left: 0;
	right: 0;
}

.footer-sticky .line {
	padding: .5rem;
	text-align: center;
	background-color: #f4d774;
}

.footer-sticky .line .fa-line {
	width: 35px;
	vertical-align: middle;
}
.footer-sticky .line .fa-line path {
	fill: #a77c00;
}
.bottom-footer { 
	background: url(images/footer-bg.png) no-repeat;
	background-size: cover;
	padding: 2rem 0;
}
.bottom-footer .social { text-align: center; }
.bottom-footer .social > ul { display: inline-block; }
.bottom-footer .social > ul li img { 
	height: 30px;
	vertical-align: middle;
}
.bottom-footer .social ul li, .bottom-footer .payment-method ul li, .bottom-footer .footer-links ul li, .bottom-footer .footer-logo ul li {
	display: inline-block;
	padding: 0px 15px;
}
.bottom-footer .social ul, .bottom-footer .payment-method ul, .bottom-footer .footer-links ul, .bottom-footer .footer-logo ul {
	padding: 10px 0px;
	text-align: center;
	margin-bottom: 0;
	margin: 0;
}
.bottom-footer .payment-method {
	margin-bottom: 1rem;
}
.bottom-footer .payment-method p {
	margin-top: 1rem;
	text-align: center;
	color: #fff;
	font-size: 1rem;
}
.bottom-footer #top-payment > ul li { padding: 0 10px; }
.bottom-footer #top-payment > ul li img{ height: 50px; }
.bottom-footer .payment-method > ul li img{ height: 60px; }
.bottom-footer #top-payment > ul {
	margin: 0;
	padding: 0;
}
.social-icon {
	transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	border-radius: 99px;
}
.social-icon:hover{ background: #f9b104; }
.bottom-footer .footer-mid-content{
	text-align: center;
	max-width: 1200px;
	margin: 0 auto;
}
.bottom-footer .footer-mid-content a{
	color: #777;
	font-size: 11px;
}
.bottom-footer .footer-mid-content a:hover {
	color: #fff;	
}
.bottom-footer .footer-mid-content p {
	color: white;
	font: 12px Arial,Sans serif;
	margin: 0;
}
.bottom-footer .footer-links ul li a, .bottom-footer .footer-links ul li{
	color: #aaa;
	font-size: 14px;
}
.bottom-footer .footer-links ul li:hover, .bottom-footer .footer-links ul li a:hover{ color: #fff; }
.footer-sprt{ display: block; }
.skillonnet{
	background: url(assets/img/footer/skillon.png) no-repeat;
	background-position: 0 -45px;
	width: 151px;
	height: 42px;
}
.skillonnet:hover, .gamcar:hover, .eight_teen:hover, .mga:hover{
	background-position: 0 0;
}
.gamcar{
	background: url(assets/img/footer/gamcar.png) no-repeat;
	width: 37px;
	height: 42px;
	background-position: 0 -45px;
}
.eight_teen {
	background: url(assets/img/footer/18.png) no-repeat;
	width: 39px;
	height: 42px;
	background-position: 0 -45px;
}
.mga {
	background: url(assets/img/footer/mga.png) no-repeat;
	width: 87px;
	height: 45px;
	background-position: 0 -46px;
}

/*TABLET*/

@media only screen and (max-width: 768px) {
	.header { padding: 5px; }
	.header-logo { width: 150px; }
	.features { padding: 1rem; }

}

@media only screen and (min-width: 481px) {
    .mob { display: none; }
    .banner-button img {
        width: 15vw;
    }
}
/*PHONE*/

@media only screen and (max-width: 480px) {
    .des { display: none; }
    .mob { width: 100%; }
	.header-logo { width: 100px; }
	.number { font-size: 60px; }
	.feature { padding: 1rem 0; max-width: 320px; }
	.banner-button { bottom: 50%; }
	.footer-title { padding-top: 1rem; }
	h2, .footer-title h2 { 
		font-size: 30px;
		line-height: 1;
	}
	h3 { font-size: 35px; }
	p { font-size: 25px;; }
	.bottom-footer #top-payment > ul li { padding: 0 5px; }
}