@charset "utf-8";
/* CSS Document */

body	{
	font-family: Arial, Helvetica, sans-serif, "Microsoft JhengHei;", "微軟正黑體", "Lato"; 
	font-size:16px;
	height: 100%;
	}
@media screen and (min-width:1199px)	{
	.container	{
		width:850px;
		}
	}	
.row-height	{
	height:5px;
	}	
ul.menu	{
	padding:0px;
	font-size:14px;
	}
.nav-pills .nav-link	{
	padding:10px;
	}	
.hutchgo_link.active{
	color:#FFF !important;
	background-color:#ed1c24 !important;
	text-decoration:none !important;
	}
.hutchgo_link{
	color:#333 !important;
	text-decoration:none !important;
}
img.welcome-msg	{
	width:100%;
	max-width:420px;
	}
@media screen and (min-width:320px)	{
	img.title	{
		width:90%;
		padding-top:55px;
		}
	}
@media screen and (min-width:414px)	{
	img.title	{
		width:90%;
		padding-top:45px;
		}
	}	
@media screen and (min-width:576px)	{
	img.title	{
		max-width:420px;
		}
	}		
.Q1-img	{
	background:#efefef url("images/Q1_img.jpg") no-repeat center top;
	height:480px;
	background-size:cover;
	}
.Q2-img	{
	background:#efefef url("images/Q2_img.jpg") no-repeat center top;
	height:480px;
	background-size:cover;
	}
.Q3-img	{
	background:#efefef url("images/Q3_img.jpg") no-repeat center top;
	height:480px;
	background-size:cover;
	}
.headbanner	{
	background:#efefef url("images/headbanner.jpg") no-repeat top;
	height:500px;
	background-size:cover;
	}
@media screen and (max-width:1200px)	{
	.headbanner	{
	height:490px;
	margin-top:-30px;
	}
	}	
@media screen and (min-width:768px)	{
	.headbanner	{
	height:505px;
	margin-top:-50px;
	}
	}	
@media screen and (max-width:320px)	{
	.headbanner	{
	height:430px;
	}
	}	
@media screen and (max-width:375px)	{
	.headbanner	{
	height:460px;
	}
	}		
.question-box	{
	padding:15px;
	padding-top:15px;
	background-color: rgba(68, 36, 10, 0.6);
	color:#FFF;
	height:450px;
	margin:15px;
	}
@media screen and (min-width:1024px)	{
	.question-box	{
	padding-top:60px;
	}
	}		
span	{
	display:block;
	}
.Q-til	{
	font-size:40px;
	padding:15px 20px 10px 20px;
	}
.Question	{
	font-size:20px;
	}	
.button {
    border: 1px solid #FFF;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}
.A-button {
    color: #FFF;
    border: 1px solid #FFF;
}
@media screen and (max-width:414px)	{
	div.A-button {
		margin:5px;
}
	}

.A-button:hover {
	background-color: #fcaa06;
	color:#FFF;
	border: 1px solid #fcaa06;
	}
.r-button {
    background-color: #0a81bc;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}	
.button-rAnswer {
	background-color: #fcaa06;
	border-radius: 20px;
	margin:10px auto;
	}
.button-next {
	border-radius: 20px;
	}			
.answer-til	{
	font-size:20px;
	color:#42210b;
	font-weight:bold;
	padding:20px 10px 15px 10px;
	margin:10px auto;
	}		
div.answer-content	{
	font-size:16px;
	color:#42210b;
	line-height:25px;
	padding:10px;
	}	
span.answer-content	{
	font-weight:bold;
	}	
.A-img	{
	width:100%;
	}
.A-img2n3	{
	width:100%;
	max-width:410px;
	}
@media screen and (min-width:320px)	{
	.A-img2n3	{
	width:100%;
	}
	}	
@media screen and (min-width:768px)	{
	.A-img2n3	{
	width:90%;
	max-width:345px;
	}
	}	
@media screen and (min-width:1024px)	{
	.A-img2n3	{
	width:90%;
	max-width:465px;
	}
	}
@media screen and (min-width:1199px)	{
	.A-img2n3	{
	width:100%;
	max-width:410px;
	}
	}	
.footer-img {
    /* The image used */
    background-image: url("images/footer.png");
    background-position: center;
    background-repeat: no-repeat;
	height: 266px;
	background-size: cover;
}	
div.footer	{
	background-color:#3F0606;
	padding:10px;
	line-height:20px;
	color:#FFF;
	font-size:8px;
	}
a.tnc	{
	color:#FFF; 
	font-size:14px;
	text-decoration:underline;
	}
div.tax-tnc	{
	color:#FFF; 
	font-size:12px;
	}					
@media screen and (max-width:375px){
	img.logo-qatar	{
		width:50px;
		}
	}
.header-logo	{
	border-top:10px solid #FFF;
	position: fixed;
	top:0;
	left:0;
	z-index:1;
	width:100%;
	}		
.logo-container	{
	background:url("images/header_logo.png") no-repeat left top;
	width:100%;
	display:block;
	float:left;
	height:70px;
	}
@media screen and (max-width:320px)	{
	.logo-container	{
	background:url("images/header_logo2.png") no-repeat left top;
	width:100%;
	display:block;
	float:left;
	height:43px;
	}	
	}	
@media screen and (min-width:375px)	{
	.logo-container	{
	background:url("images/header_logo2.png") no-repeat left top;
	width:100%;
	display:block;
	float:left;
	height:43px;
	}	
	}
@media screen and (min-width:768px)	{
	.logo-container	{
	background:url("images/header_logo.png") no-repeat left top;
	width:100%;
	display:block;
	float:left;
	height:100px;
	}	
	}
@media screen and (max-width:320px)	{
	img.logo-hutchgo	{
		width:100px;
		}
	img.logo-qatar	{
		width:80px;
		}
	}

@media screen and (max-width:414px)	{
	img.logo-hutchgo	{
		width:100px;
		}
	img.logo-qatar	{
		width:100px;
		}
	}
.lang 	{
	position: fixed;
	top:0;
	right:0;
	padding-top:20px;
	padding-right:20px;
	width:40;
	z-index:100;
	}			
@media screen and (max-width:414px)	{
	.lang 	{
	position: fixed;
	top:0;
	right:2%;
	padding-top:18px;
	padding-right:2px;
	z-index:1;
	}	
	}	
h1	{
	font-size:25px;
	font-weight:bold;
	color:#FFF;
	line-height:35px;
	}
h2	{
	font-size:16px;
	}
.travel-tips-box	{
	padding:10px;
	}
.travel-tips-til	{
	font-size:16px;
	font-weight:bold;
	}	
.box-padding	{
	padding:20px;
	border:1px solid #CCC;
	}	
a	{
	text-decoration:none;
	color:#FFF;
	}	
a:hover	{
	Text-decoration:none;
	color:#FFF;
	}
.answerB-container	{
	background-color:#e6e6e6;
	}
.pointer {
	cursor: pointer;
	}	
.modal-title {
	text-align:left;
	font-weight:bold;
	color:#4d4d4d;
	}
.modal-title2	{
	text-align:left;
	font-weight:bold;
	color:#4d4d4d;
	font-size:18px;
	padding-bottom:5px;
	}		
.modal-body	{
	text-align:left;
	color:$4d4d4d;
	}	
.next	{
	image:url("images/icon_next.png") no-repeat;
	position:fixed;
	bottom:50%;
	right:0;
	z-index:1;
	display:none;
	}
.previous	{
	image:url("images/icon_previous.png") no-repeat;
	position:fixed;
	bottom:50%;
	left:0;
	z-index:1;
	display:none;
	}	
.GoQatar	{
	image:url("images/icon_GoQatar.png") no-repeat;
	position:fixed;
	bottom:50%;
	right:0;
	z-index:1;
	display:none;
	}			
@media screen and (max-width:320px)	{
	.next	{
	position:fixed;
	bottom:0;
	right:0;
	z-index:1;
	}
	.previous	{
	position:fixed;
	bottom:0;
	left:0;
	z-index:1;
	}	
	.GoQatar	{
	image:url("images/icon_GoQatar.png") no-repeat;
	position:fixed;
	bottom:0;
	right:0;
	z-index:1;
	}				
	}
@media screen and (max-width:375px)	{
	.next	{
	position:fixed;
	bottom:0;
	right:0;
	z-index:1;
	}
	.previous	{
	position:fixed;
	bottom:0;
	left:0;
	z-index:1;
	}	
	.GoQatar	{
	image:url("images/icon_GoQatar.png") no-repeat;
	position:fixed;
	bottom:0;
	right:0;
	z-index:1;
	}					
	}
@media screen and (max-width:414px)	{
	.next	{
	position:fixed;
	bottom:0;
	right:0;
	z-index:1;
	}
	.previous	{
	position:fixed;
	bottom:0;
	left:0;
	z-index:1;
	}
	.GoQatar	{
	image:url("images/icon_GoQatar.png") no-repeat;
	position:fixed;
	bottom:0;
	right:0;
	z-index:1;
	}						
	}
.btp	{
	text-align:right;
	color:#42210b;
}
a.btp	{
	text-decoration:none;
	color:#42210b;
	}