body { 
	font-family: "proxima-nova-soft", 'Proxima Nova Soft', sans-serif;
	font-weight: 500;
	font-size: 14pt;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
}

div > .fa, span {
	color: #9B9B9B;
}

div.g-recaptcha {
  margin: 0 auto;
  width: 304px;
}

/* Cut out effect*/

.cutout {
    background-color: #fff;
    position: relative;
}

.cutout:before {
    content:"";
    position: absolute;
    left: 180px;
    width: 32%;
    height: 50px;
    top: -30px;
    background-color: #fff;
    -webkit-transform: skew(45deg);
    -moz-transform: skew(45deg);
    -o-transform: skew(45deg);
    -ms-transform: skew(45deg);
    transform: skew(45deg);
    z-index: 10;
}

.cutout:after {
    content:"";
    position: absolute;
    right: 180px;
    width: 32%;
    height: 50px;
    top: -30px;
    background-color: #fff;
    -webkit-transform: skew(-45deg);
    -moz-transform: skew(-45deg);
    -o-transform: skew(-45deg);
    -ms-transform: skew(-45deg);
    transform: skew(-45deg);
    z-index: 10;
}

.borders {
    position: absolute;
    width: 100%;
    top: 450px;
}

.borders:before {
    content:"";
    position: absolute;
    left: 0px;
    width: 35%;
    height: 40px;
    top: -30px;
    background-color: #fff;
    z-index: 10;
}

.borders:after {
    content:"";
    position: absolute;
    right: 0px;
    width: 35%;
    height: 40px;
    top: -30px;
    background-color: #fff;
    z-index: 10;
}

@media(max-width: 992px) {
    .cutout:before {
        width: 25.5%;
    }

    .cutout:after {
        width: 25.5%;
    }
}

@media(min-width: 1200px) {
    .cutout:before {
        width: 34.5%;
    }

    .cutout:after {
        width: 34.5%;
    }
}

.white {
    background-color: white;
}

/* Start of Sliding Nav Bar*/

.nav-booking {
	border-radius: 6px;
	border: 1px solid #eee;
	margin: 5px 10px;
}

.nav-other {
	margin-top: 7px;
	border-radius: 6px;
	transition: background-color 0.35s, color 0.35s;
	-webkit-transition: background-color 0.35s, color 0.35s;
}

.navbar-custom a {
	color: white;
	font-size: 17px;
	font-family: "proxima-nova-soft", 'Proxima Nova Soft', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
}

.navbar-custom .nav-booking:hover {
	color: #555;
}

.nav>li>.nav-other:hover {
	background-color: transparent;
}

ul li, ul > span, .nav-booking {
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
	position: relative;
}

ul li.active {
	color: white;
}

ul > span {
	position: relative;
	top: 50px;
	left: 3px;
	display: block;
	width: 70px;
	height: 3px;
	border-radius: 6px;
	background: white;
	opacity: 0.5;
}

li.inactive:hover > span, li.active:hover > span {
	opacity: 1;
}
 
ul li.active:nth-child(2) ~ span,
ul li.inactive:nth-child(2):hover ~ span {
	left: 4px;
	width: 70px;
}
 
ul li.active:nth-child(3) ~ span,
ul li.inactive:nth-child(3):hover ~ span {
	left: 85px;
	width: 75px;
}

ul li.active:nth-child(4) ~ span,
ul li.inactive:nth-child(4):hover ~ span {
	left: 175px;
	width: 91px;
}

/* ZH Version */
ul.zh li.active:nth-child(2) ~ span,
ul.zh li.inactive:nth-child(2):hover ~ span {
	left: 4px;
	width: 55px;
}
 
ul.zh li.active:nth-child(3) ~ span,
ul.zh li.inactive:nth-child(3):hover ~ span {
	left: 70px;
	width: 83px;
}

ul.zh li.active:nth-child(4) ~ span,
ul.zh li.inactive:nth-child(4):hover ~ span {
	left: 165px;
	width: 55px;
}
/* ZH Version Ends*/

ul li.active:hover ~ span,
ul li.inactive:hover ~ span {
	opacity: 1;
}

ul li.active:nth-child(5) ~ span {
	opacity: 0;
}

/*End of Sliding Nav Bar*/

.logo {
	background-color: white;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	height: 70px;
	margin-left: 10px;
}

.logo2 img {
	width: 40px;
}

.hotel-name2 {
	color: white;
	text-transform: uppercase;
	font-weight: bold;
	margin-top: 20px;
	margin-left: 50px;
	width: 200px;
}

.logo img {
	width: 50px;
	margin-left: -10px;
	margin-top: -5px;
}

.hotel-name {
	color: white;
	text-transform: uppercase;
	font-weight: bold;
	margin-top: 20px;
	margin-left: 50px;
	width: 200px;
}

.content {
	margin-top: -50px;
	background-color: white;
}

.content .row {
	margin-top: 20px;
	margin-bottom: 20px;
}

.fa-bars {
	color: white;
}

.carousel {
	width: 100%;
	height: 450px;
	margin-bottom: 30px;
	color: white;
	background-color: gray;
}

.carousel-control.left, .carousel-control.right {
    background-image: none;
}

.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}

/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}

.item {
	height: 450px;
    background-position: left center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.booking-icon {
	position: absolute;
	font-size: 30px;
	left: 0;
	bottom: -3px;
}

.room-icon {
	position: absolute;
	font-size: 30px;
	left: -5px;
	bottom: -1px;
}

.calendar-icon {
	position: absolute;
	font-size: 25px;
	left: -3px;
	bottom: 0px;
}

.sbooking-icon {
	position: relative;
	font-size: 30px;
	left: 0;
	bottom: -3px;
}

.sroom-icon {
	position: relative;
	font-size: 30px;
	bottom: -3px;
}

.scalendar-icon {
	position: relative;
	font-size: 25px;
	left: -3px;
	bottom: 0px;
}

.form-option {
	border: 1px solid #ccc; 
	border-radius: 6px;
	padding: 10px; 
	width: 100%;
	padding-left: 20px;
	margin-bottom: 20px;
	color: #9B9B9B;
}

.form-option:hover {
	background-color: #ECEBEB;
}

.check-icon {
	opacity: 0;
	position: absolute;
	font-size: 20px;
	color: #3B99FC;
	right: 10%;
	top: 50%;
	transform: translateY(-50%);
}

/*.radio-option + .form-option {
	transition: all 0.35s;
	-webkit-transition: all 0.35s;
}*/

.radio-option:disabled + .form-option {
	color: #ccc;
	background-color: #EEEEEE;
	cursor: not-allowed;
}

.radio-option:checked + .form-option {
	border: 1px solid #9B9B9B;
	color: #555;
}

.radio-option:checked + .form-option > .check-icon {
	opacity: 1;
	transition: all 0.35s;
	-webkit-transition: all 0.35s;
}

input[type="radio"] {
	visibility: hidden;
	position: absolute;
	bottom: 38%; 
	left: 90%;
}

.form-control {
	margin-top: -10px;
	-webkit-appearance: none;
	-moz-appearance: none;
}

#txtHint > a > table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #ccc;
	border-bottom: 5px dashed #ccc;
	opacity: 0.5;
}

#txtHint > a {
	color: #999999;
	cursor: pointer;
}

.carousel-indicators {
	z-index: 9;
}

td {
	padding: 0;
}

.legend, .legend-title, .legend-available, .legend-taken {
	border-radius: 6px;
	width: 100%;
	font-size: 20px;
	padding: 8px 0 5px 0;
	margin-top: 10px;
	color: #999999;
	cursor: help;
}

.legend {
	border: 3px solid #ccc;
	background-color: #EEEEEE;
}

.legend-title {
	border: 3px solid transparent;
}

.legend-available {
	border: 3px solid #ccc;
	color: #ccc;
}

.legend-taken {
	border: 3px solid #ef9a9a;
	color: #ef9a9a;
	background-color: #ffebee;
}

td > label > .fa, .legend > .fa {
	font-size: 25px;
}

.utility-room {
	border: 2px solid #ccc;
	color: #999999;
	width: 100%;
	height: 105%;
	margin-top: -2px!important;
	margin-bottom: 0!important;
	padding-top: 5px;
	padding-bottom: 10px;
	background-color: #EEEEEE;
	cursor: vertical-text;
}

.double-utility {
	height: 103%;
}

.corridor {
	width: 100%;
	height: 100%;
	margin-top: 0!important;
	margin-bottom: 0!important;
	padding-top: 10px;
	padding-bottom: 10px;
	color: white;
}

.room-option {
	border: 2px solid #ccc;
	width: 100%;
	height: 105%;
	margin-top: -2px!important;
	margin-bottom: 0!important;
	padding-top: 5px;
	padding-bottom: 10px;
	color: #ccc;
	cursor: pointer;
}

.reception {
	background-color: #EEEEEE;
}

.windowed-room {
	border-bottom: 2px solid transparent;
}

.windowed-room-top {
	border-bottom: 5px dashed #ccc;
}

.room-option:hover {
	background-color: #EEEEEE;
}

.radio-option:checked + .room-option {
	border-color: #2C91FC;
	color: white;
	background-color: #3B99FC;
	transition: color 0.35s;
	-webkit-transition: color 0.35s;
}

.radio-option:disabled + .room-option {
	color: #ef9a9a;
	background-color: #ffebee;
	cursor: not-allowed;
}

.selected-room {
	border: 1px solid #9B9B9B; 
	border-radius: 6px;
	padding: 10px; 
	width: 100%;
	padding-left: 20px;
	margin-bottom: 20px;
	color: #555;
}

label {
	margin-bottom: 0!important;
}

#location {
	position: absolute;
	font-size: 30px;
	color: #555;
	bottom: 38%; 
	left: 70%;
}

/* Loading Spinner */
#spinner {
	position: absolute;
	margin-top: 3%;
	margin-left: 18%;
}

.cssload-loader {
	position: relative;
	left: calc(50% - 31px);
	width: 62px;
	height: 62px;
	border-radius: 50%;
		-o-border-radius: 50%;
		-ms-border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
	perspective: 780px;
}

.cssload-inner {
	position: absolute;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	border-radius: 50%;
		-o-border-radius: 50%;
		-ms-border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;	
}

.cssload-inner.cssload-one {
	left: 0%;
	top: 0%;
	animation: cssload-rotate-one 1.15s linear infinite;
		-o-animation: cssload-rotate-one 1.15s linear infinite;
		-ms-animation: cssload-rotate-one 1.15s linear infinite;
		-webkit-animation: cssload-rotate-one 1.15s linear infinite;
		-moz-animation: cssload-rotate-one 1.15s linear infinite;
	border-bottom: 3px solid rgb(85,85,85);
}

.cssload-inner.cssload-two {
	right: 0%;
	top: 0%;
	animation: cssload-rotate-two 1.15s linear infinite;
		-o-animation: cssload-rotate-two 1.15s linear infinite;
		-ms-animation: cssload-rotate-two 1.15s linear infinite;
		-webkit-animation: cssload-rotate-two 1.15s linear infinite;
		-moz-animation: cssload-rotate-two 1.15s linear infinite;
	border-right: 3px solid rgb(85,85,85);
}

.cssload-inner.cssload-three {
	right: 0%;
	bottom: 0%;
	animation: cssload-rotate-three 1.15s linear infinite;
		-o-animation: cssload-rotate-three 1.15s linear infinite;
		-ms-animation: cssload-rotate-three 1.15s linear infinite;
		-webkit-animation: cssload-rotate-three 1.15s linear infinite;
		-moz-animation: cssload-rotate-three 1.15s linear infinite;
	border-top: 3px solid rgb(85,85,85);
}







@keyframes cssload-rotate-one {
	0% {
		transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
	}
	100% {
		transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
	}
}

@-o-keyframes cssload-rotate-one {
	0% {
		-o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
	}
	100% {
		-o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
	}
}

@-ms-keyframes cssload-rotate-one {
	0% {
		-ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
	}
	100% {
		-ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
	}
}

@-webkit-keyframes cssload-rotate-one {
	0% {
		-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
	}
	100% {
		-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
	}
}

@-moz-keyframes cssload-rotate-one {
	0% {
		-moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
	}
	100% {
		-moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
	}
}

@keyframes cssload-rotate-two {
	0% {
		transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
	}
	100% {
		transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
	}
}

@-o-keyframes cssload-rotate-two {
	0% {
		-o-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
	}
	100% {
		-o-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
	}
}

@-ms-keyframes cssload-rotate-two {
	0% {
		-ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
	}
	100% {
		-ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
	}
}

@-webkit-keyframes cssload-rotate-two {
	0% {
		-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
	}
	100% {
		-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
	}
}

@-moz-keyframes cssload-rotate-two {
	0% {
		-moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
	}
	100% {
		-moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
	}
}

@keyframes cssload-rotate-three {
	0% {
		transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
	}
	100% {
		transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
	}
}

@-o-keyframes cssload-rotate-three {
	0% {
		-o-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
	}
	100% {
		-o-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
	}
}

@-ms-keyframes cssload-rotate-three {
	0% {
		-ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
	}
	100% {
		-ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
	}
}

@-webkit-keyframes cssload-rotate-three {
	0% {
		-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
	}
	100% {
		-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
	}
}

@-moz-keyframes cssload-rotate-three {
	0% {
		-moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
	}
	100% {
		-moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
	}
}