@import 'fonts/stylesheet.css';

img{ border: 0px;}
body{ color: #333333;}

a, a:hover,a:active,a:visited{ text-decoration: none;}
.opa50{   opacity: 0.5;}
.w100{ width: 100% !important;}
.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}
.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

.header-container{ position: fixed; width: 100%;  z-index: 100; left: 0px; top: 0px;}

.top-header-container{
	background-color: #ffffff;
	padding: 0px 0px;
	position: relative;
}

.menu-header-container{
		background-color: #7461cf;
		font-family: "db_helvethaica_x55_regular";
		font-size:22px;
		color: #ffffff;
		display: none;
	}
.menu-header-container a, .menu-header-container a:hover , .menu-header-container a:active, .menu-header-container a:visited{ color: #ffffff !important; text-decoration: none!important}
.menu-container{
	
}
.menu-container ul{  background: url(imgs/menu-bar.png) no-repeat left center;}
.menu-container li{ padding: 0px 15px !important; background: url(imgs/menu-bar.png) no-repeat right center;}
.menu-container li a{ display: block !important; padding: 10px 0px;}
.menu-container li:first-child{ }
.menu-container .list-inline, .store-container .list-inline{ margin-bottom: 0px !important;}
.store-container{
	text-align: right;
	padding: 10px 0px;
}
.share-container{
	text-align: right;
	font-family: "db_helvethaica_x55_regular";
	font-size:20px;
	color: #333333;
}
.share-container .list-inline{ margin-bottom: 0 !important;}
.flag-container-mobile {text-align: right}
.flag-container-mobile .list-inline{ margin-bottom: 0 !important;}
.logo-container{font-family: "db_helvethaica_x55_regular"; color: #333333;}
.flag-container{text-align: right;}
.banner-container{ background-color: #7461cf;}
.desktop_banner{ display: none; margin-top: 140px;}
.mobile_banner{ display: block; margin-top: 80px;}
.desktop-bar{ display: none;}
.mobile-bar{ display: block;}
.mobile-button{ padding-right: 0px !important;}
.top-header-container .container-fluid{ padding-left: 0px; padding-right: 0px; margin-left: 0px; margin-right: 0px;}
.mobile-logo-container{ padding-left: 10px; padding-top: 8px;}
.mobile-submenu{position: absolute; width: 100%; z-index: 99999; background-color: #887ad9; display: none;}
.mobile-submenu > ul{ list-style: none; padding: 0px; margin: 0px; text-align: center;}
.mobile-submenu > ul >li{ border-bottom: solid 1px #ffffff;}
.mobile-submenu a{ display: block; text-align: center; 	font-family: "db_helvethaica_x55_regular"; color: #ffffff; font-size: 30px; padding: 10px 0px;}
.easy-container{ background-color: #7461cf; color: #ffffff; font-family: "db_helvethaica_x55_regular"; font-size: 30px; padding: 80px 0px; line-height: 1.0em; }
.easy-image { padding-top: 30px;} 
.easy-image .col-xs-4{ padding-left: 2px !important; padding-right: 2px !important;}

.service-container{ background-color: #e9e8e5;padding-bottom: 60px; padding-top: 80px; position: relative;}
.service-title{ color: #fd1aa3; font-family: "db_helvethaica_x55_regular"; line-height: 1em;font-size: 32px; padding-top: 10px; }
.service-detail{ color: #333333; font-family: "db_helvethaica_x55_regular"; line-height: 1em;font-size: 20px; padding-bottom: 50px; }
.service-head{ 
	background-color:#b70081; 
	color: #ffffff; 
	font-family: "db_helvethaica_x55_regular"; 
	text-align: center; 
	display: inline-block; 
	position: absolute;
	font-size: 35px;
	width: 200px;
	height: 50px;
	left: 50%; 
	top: -25px; 
	margin-left: -100px; }

.video-container{ background-color:#d30085; background-image: url(imgs/bg-video.jpg); background-repeat: no-repeat; background-position: top center; background-size: contain; padding: 40px 0px;}
.video-head{ font-family: "db_helvethaica_x55_regular"; line-height: 1em; padding-bottom: 20px;color: #ffffff; font-size: 48px; display: inline-block;}
.video-title{ font-family: "db_helvethaica_x55_regular"; line-height: 1em; padding-bottom: 30px; color: #ffffff; font-size: 30px; padding-top: 20px;}

.howto-container{ background-color: #cfdcdc;  padding: 40px 0px;}
.howto-head{ font-family: "db_helvethaica_x55_regular"; line-height: 1em;color: #000000;font-size: 48px;}
.howto-item{ padding-top: 40px;}
.howto-title{font-family: "db_helvethaica_x55_regular"; line-height: 1em;color: #fd1aa3;font-size: 28px; padding-top: 20px; padding-bottom: 10px;}
.howto-detail{ display: inline-block; background-color:#8c8c8c; font-family: "db_helvethaica_x55_regular"; line-height: 1em;color: #ffffff; padding: 5px 20px; font-size: 20px; border-radius:30px; margin-bottom: 30px; text-decoration: none;}

.howto-detail:hover, .howto-detail:active, .howto-detail:visited , .howto-detail:focus{color: #ffffff  !important; text-decoration: none  !important; outline: none !important;}
.howto-comment{font-family: "db_helvethaica_x55_regular"; line-height: 1em;color: #333333;font-size: 14px; }
.pbw2{ border-bottom: solid 1px #ffffff; margin-bottom: 30px !important;}

.faq-container{ background-color: #a674d7; padding: 20px 0px;}
.faq-header{font-family: "db_helvethaica_x55_regular"; line-height: 1em;color: #ffffff;font-size: 55px; padding-top: 10px; padding-bottom: 10px;}
a.faq-title{
	color: #333333;
    background-color: #ffffff;
	border: 0px;
	font-family: "db_helvethaica_x55_regular"; 
	line-height: 1em;
	display: block;
	text-decoration: none;
	padding-left: 20px;
	padding-right: 30px;
	padding-top: 5px; 
	padding-bottom: 5px;
	position: relative;
	font-size: 20px;
	background-image: url(imgs/how-close.png) ;
	background-repeat: no-repeat;
	background-position: right center;
}
a.faq-title::before{ content: "Q"; color:#5a3f9f; position: absolute; left: 0px ; top: 0px; padding-top: 5px; padding-bottom: 5px; }

.faq-detail
{
	background-color: #8d50ca;
	font-family: "db_helvethaica_x55_regular"; 
	line-height: 1em;
	font-size: 20px;
	color: #ffffff;
	text-decoration: none !important;
	position: relative;
	padding-left: 20px;
	padding-right: 5px;
}
.faq-detail a
{
 	color: #ffffff;
	text-decoration: none !important;
}
.faq-detail::before{ content: "A"; color:#faa61a; position: absolute; left: 0px ; top: 0px; }

.faq-detail ul{ padding: 0px; margin: 0px; padding-left: 20px; }
.faq-detail ul.remark{ padding: 0px; margin: 0px; list-style: none;  text-indent: -0.4em; padding-left: 0.4em;}
.faq-detail ul.remark > li::before{content: "* "}

.faq-container .panel-group .panel + .panel {
    margin-top: 0px;
}

.faq-container .panel-group .panel {
    margin-bottom: 0;
    border-radius: 0px;
}

.faq-container .panel-default {
    border-color: #ddd;
}

.faq-container .panel-default > .panel-heading {
    background-color: #ffffff;
	border: 0px;
	border-bottom: solid 1px #a674d7;
}

.faq-container .panel-body , .faq-container .panel-body a{
 	background-color: #8d50ca;
	border-width: 0px !important;
}
.faq-container .panel{ border: 0px;}
.faq-container .list-inline{ margin-bottom: 0px !important;}




a.howto-title{
	color: #ffffff;
	border: 0px;
	font-family: "db_helvethaica_x55_regular"; 
	line-height: 1em;
	display: block;
	text-decoration: none;
	padding-top: 5px; 
	padding-bottom: 5px;
	position: relative;
	font-size: 30px;
	text-align: center;
}

.howto-list .panel-group .panel + .panel {
    margin-top: 0px;
}

.howto-list .panel-group .panel {
    margin-bottom: 0;
    border-radius: 0px;
}

.howto-list  .panel-default {
    border-color: #ddd;
}

.howto-list  .panel-default > .panel-heading {
    background-color: #482a8e;
	border: 0px;
	border-bottom: solid 1px #a674d7;
}



.howto-list  .panel-body {
 	background-color: #c5d4d4;
	border-width: 0px !important;
	padding-bottom: 100px;
}
.howto-list  .panel{ border: 0px;}
.howto-list  .list-inline{ margin-bottom: 0px !important;}


.footer-container{
    background-color: #333333;
	font-family: "db_helvethaica_x55_regular"; 
	font-size: 14px;
	padding: 30px 0px;
	color: #ffffff;
}
@media (min-width: 768px) {
	.pbw{ border-bottom: solid 1px #ffffff;}
	.pbw2{ border: 0px; border-bottom: 0px; margin-bottom: 0px;}
	.menu-header-container{font-size:20px; display: block;}
	.menu-container li{ padding: 0px 10px !important;}
	.desktop_banner{ display: block;}
	.mobile_banner{ display: none;}
	.desktop-bar{ display: block;}
	.mobile-bar{ display: none;}
	.top-header-container{
		background-color: #ffffff;
		padding: 13px 0px;
	}
	.easy-container{ font-size: 30px; padding: 40px 0px; padding-bottom: 80px; line-height: 1.0em;}
	.easy-image { padding-top: 10px;}
	.easy-image img:nth-child(1){ width: 88px;}
	.easy-image img:nth-child(2){ width: 96px;}
	.easy-image img:nth-child(3){ width: 104px;}
	
	.service-container{ padding-bottom: 60px; padding-top: 60px;}
	.service-container 
	.service-title{ font-size: 32px; padding-top: 10px; }
	.service-detail{ font-size: 24px;padding-bottom: 0px;}
	.service-head{ font-size: 48px;  position: absolute; width: 350px; left: 50%; top: -30px; margin-left: -175px; height: 60px; line-height: 60px; }
	.service-head-container{}
	
	.howto-title{font-size: 30px; }
	.howto-detail{ font-size: 25px;  }
	
	.howto-container img{ width: 100%;}
	.howto-comment{font-size: 20px; text-align: left;}
	
	a.faq-title
	{
		font-size: 28px;
		padding-left: 30px;
		padding-right: 40px; 
		padding-top: 0px;
		padding-bottom: 0px;
	}
	a.faq-title::before{  padding-top: 0px; padding-bottom: 0px; }
	.faq-detail{font-size: 28px;padding-left: 30px;
	padding-right: 40px;}
	
	.footer-container{

		font-size: 20px;
	}
	.logo-container{ font-size: 18px!important}
	
}

@media (min-width: 992px) {
	.menu-header-container{font-size: 22px;}
	.menu-container li{ padding: 0px 15px}
	.easy-image img:nth-child(1){ width: 110px;}
	.easy-image img:nth-child(2){ width: 120px;}
	.easy-image img:nth-child(3){ width: 131px;}
	.logo-container{ font-size: 22px!important}
	
}