﻿/* 20170929 NTUC */
a:focus {
	outline:0;	
}
.main_right {
	padding:0 70px;
}
.logo {
	display:inline-block;
}
.event-logo {
	height:50px;
	vertical-align:middle;
	margin: 5px 30px;
}
.event-mob-logo {
	height:20px;
	vertical-align:middle;
	margin: 10px 20px;
}
.cardface {
	width: 100%;	
}
.cardface img {
	width: 260px;	
}
.offtxt {
	font-size: 30px;
	text-align:left;
	color:#000;
	line-height:120%;
	margin:20px 0;
}
.offtxt .sp {
	font-size:34px;
}
.offtxt .sp span {
	font-size:40px;
}
.coupon {
	background-color:#f91000;
	font-size:20px;
	text-align:center;
	color:#fff;
	padding:10px 30px;
	display:inline;
	 
}
.coupon b {
	font-size:24px;	
}
.selected-hotel {
	color:#000;	
}
.title {
	font-size:19px;
	font-weight:bold;
	color:#474747;
}
/* tab */
.tab-nav {
	margin: 50px 0;	
}
#tabs {
	border: 1px solid #f91000;
	border-radius: 5px;
	background-color:#fff;
	margin:10px auto;
	display:table;
}
#tabs.nav-tabs > li {	
	
}
#tabs.nav-tabs > li a {
	border:0;
	margin:0;
	padding:10px 30px;
	color:#f91000;
	font-size: 17px;
}
#tabs.nav-tabs > li a:hover {
	border:0;
	background-color:#f91000;
	border-radius:0;
	outline:0;
	color:#fff;
}
#tabs.nav-tabs > li.active a {
	border:0;
	background-color:#f91000;
	border-radius:0;
	outline:0;
	color:#fff;
}
/* hotel list */
#hotel-list {
  background: url(/Content/img/TNUC/images//mid-bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding:40px 0;
}
#hotel-list .tab-content {
	text-align:center;
}
#hotel-list .tab-pane {
	max-width: 1140px;
	margin:0 auto;
}
#hotel-list .hotel-box {
    -moz-transition: all 0.1s;
    -webkit-transition: all 0.1s;
    transition: all 0.1s;
}
#hotel-list .hotel-box:hover {
    -moz-transform: scale(1.03);
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
}
#hotel-list .hotel-box {
	padding:8px;
}
#hotel-list .hotel-img {
	position:relative;	
}
#hotel-list .hotel-img img {
	width:100%;
	max-width: 100%;	
}
#hotel-list .hotel-detail {
	background-color:#fff;
	height:90px;
	padding-top:5px;
}
#hotel-list .hotel-off {
	position: absolute;
	left:-2px;
	bottom:5px;
	background-color: rgba(249, 16, 0, 0.9); 
	padding:5px 40px 5px 10px;
	-webkit-clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
	clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
	text-align:left;
}
#hotel-list .hotel-off .old-price {
	font-size:14px;
	color:#fff;
}
#hotel-list .hotel-off .old-price span {
	text-decoration: line-through;	
}
#hotel-list .hotel-off .new-price {
	font-size:24px;
	color:#fff;	
	display:block;
}
#hotel-list .hotel-off .sub-off {
	font-size:24px;
	color:#fff;
}
#hotel-list .hotel-off .sub-off::after {
	content: " ❯ ";
	font-size:100%;	
}
#hotel-list .new-price::before {
	content: "SGD ";
	font-size:70%;
	color:#fff;
	line-height:110%;	
}
#hotel-list .nation {
	color:#666;
	font-size:12px;	
}
#hotel-list .hotel-name {
	font-size: 17px;
	line-height:120%;
	font-weight:bold;
}
#hotel-list .till-date {
	font-size:12px;
	color:#e2231a;	
}
#hotel-list .hotel-coupon-name {
	font-size:16px;
	font-weight:bold;
	line-height:150%;
}
#hotel-list .hotel-coupon {
	font-size:16px;
	color:#fff;
	background-color:#f91000;
	padding:5px 20px;
	text-align:center;
	display:table;
	margin:0 auto;
}
#hotel-list .hotel-coupon span {
	font-size:18px;
	font-weight:bold;
}
#hotel-list .star, #hotel-list .ta-rank {
	background: url(/Content/img/TNUC/images//rank.png) no-repeat;
	height:18px;
	width:80px;
	display:inline-block;
	background-size: auto 160px;
	vertical-align:bottom;
}
#hotel-list .star.five {
	background-position: 0 0;
}
#hotel-list .star.four-half {
	background-position: 0 -18px;
}
#hotel-list .star.four {
	background-position: 0 -36px;
}
#hotel-list .star.three-half {
	background-position: 0 -54px;
}
#hotel-list .star.three {
	background-position: 0 -72px;
}
#hotel-list .star.two-half {
	background-position: 0 -90px;
}
#hotel-list .star.two{
	background-position: 0 -108px;
}
#hotel-list .star.one-half {
	background-position: 0 -126px;
}
#hotel-list .star.one {
	background-position: 0 -144px;
}
#hotel-list .ta-rank.five {
	background-position: -80px 0px;
}
#hotel-list .ta-rank.four-half {
	background-position: -80px -18px;
}
#hotel-list .ta-rank.four {
	background-position: -80px -36px;
}
#hotel-list .ta-rank.three-half {
	background-position: -80px -54px;
}
#hotel-list .ta-rank.three {
	background-position: -80px -72px;
}
#hotel-list .ta-rank.two-half {
	background-position: -80px -90px;
}
#hotel-list .ta-rank.two{
	background-position: -80px -108px;
}
#hotel-list .ta-rank.one-half {
	background-position: -80px -126px;
}
#hotel-list .ta-rank.one {
	background-position: -80px -144px;
}

#hotel-list a.btn, {
	background-color:#f91000;
	color:#fff;
	font-size:17px;
	font-weight:bold;
	text-align:center;
	padding:5px 25px;
	display:inline-block;
	border-radius:5px;
}
#hotel-list a:hover.btn, {
	background-color:#fff;
	color:#f91000;
	border:1px solid #fff;
}

/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 993px) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .selected-hotel a.btnh {
        display:none;
    }
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 993px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
    .selected-hotel a.btnh {
        display:none;
    }
}

@media (max-width: 992px){
    .selected-hotel a.btnh {
        margin-top: 25px;
	    background-color:#f91000;
	    color:#fff;
	    font-size:17px;
	    font-weight:bold;
	    text-align:center;
	    padding:5px 25px;
	    display:inline-block;
	    border-radius:5px;
    }
}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) {
    .selected-hotel a.btnh {
        margin-top: 25px;
	    background-color:#f91000;
	    color:#fff;
	    font-size:17px;
	    font-weight:bold;
	    text-align:center;
	    padding:5px 25px;
	    display:inline-block;
	    border-radius:5px;
    }
}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3){
    .selected-hotel a.btnh {
        margin-top: 25px;
	    background-color:#f91000;
	    color:#fff;
	    font-size:17px;
	    font-weight:bold;
	    text-align:center;
	    padding:5px 25px;
	    display:inline-block;
	    border-radius:5px;
    }
}

/* ----------- Galaxy S6 ----------- */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) {
    .selected-hotel a.btnh {
        margin-top: 25px;
	    background-color:#f91000;
	    color:#fff;
	    font-size:17px;
	    font-weight:bold;
	    text-align:center;
	    padding:5px 25px;
	    display:inline-block;
	    border-radius:5px;
    }
}

.selected-hotel a.btn {
	background-color:#f91000;
	color:#fff;
	font-size:17px;
	font-weight:bold;
	text-align:center;
	padding:5px 25px;
	display:inline-block;
	border-radius:5px;
}

.selected-hotel a:hover.btn {
	background-color:#fff;
	color:#f91000;
	border:1px solid #f91000;
}
.selected-hotel a.btn.more-hotel {
	margin-top: 15px;	
}
/* tnc */
.tnc {
	width: 100%;	
	color:#666;
	background-color:#f1f1f1;
}
.tnc-title {
	font-size:18px;
	border-bottom:1px solid #ccc;
}
.tnc-title .show-hide-arrow {
	float:right;
	width:40px;
	text-align:center;
	vertical-align:middle;
	display:table;
}
.tnc-title .show-hide-arrow::after {
	content:" ➕ ";
	font-size:24px;
	line-height:100%;
}
.tnc-box.active .show-hide-arrow::after {
	content:" ➖ ";
	font-size:24px;
	line-height:100%;
}
.tnc-box {
	width:1140px;
	margin:0 auto;
	padding:40px 0;
}
.tnc-content {
	padding: 0;	
}
.tnc ul li  {
	list-style:outside decimal none;
	margin-left:25px;
	font-size:12px;
	font-weight:lighter;
}
#hideshow {
	cursor: pointer;	
}
#content {
	display:none;	
}

/* responsive */
@media only screen and (max-width: 1140px) {
	.tnc-box {
		width: 100%;	
	}
	.tnc-content {
		padding:5px;	
	}
	.tnc-title {
		padding-left:5px;	
	}
}
@media only screen and (max-width: 1023px) {
	.main_right {
		padding:20px;
		text-align:center;
		background-color:#fff;
		border-top:1px solid #000;
		border-bottom:1px solid #000;
	}
	.offtxt {
		width:100%;
		text-align:center;
	}
	.coupon {
		width: 90%;
		margin:0 auto;	
	}
	#tabs.nav-tabs > li {
		border:none;
		
	}
	.event-logo {
		height:35px !important;
		width:auto !important;
	}
}
@media only screen and (max-width: 1023px) {
	#tabs.nav-tabs > li a {
		padding: 10px 15px;
		border:none;
	}
}
@media only screen and (max-width: 414px) {	
	.coupon {
		width: 100%;
	}
	#tabs.nav-tabs > li {
		width:100%;	
		border-bottom:1px solid #f91000;
	}
	#tabs {
		border-radius:0;		
	}
}
