@CHARSET "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Varela+Round);

html,body,.container, input {
	background: #1a1a1a;
	height: 100%;
}
body {
	font-family: 'Varela Round',Arial,Verdana,sans-serif;
}
.container-fluid {
	height: 100%;
	box-sizing: border-box;
}
.row
{
    height: 100%;
}
.left-column, .right-column {
	height: 100%
}
.left-column {
	background: #1a1a1a;
	min-height: 100%;
}
h1 {
	text-align: center;
}
h1 img {
	width: 70%;
}
.left-column ul {
	text-align: center;
	text-transform: uppercase;
	margin-top: 30px;
}
p a, p a:hover, p a:link, p a:visited, p a:active, a.back, a.back:hover, a.back:link, a.back:visited, a.back:active {
	color: #ffffff;
}
.left-column ul li {
	border-bottom: 1px solid #1f1f1f;
}
.left-column ul a {
	display:block;
	color: white;
	text-decoration: none;
	transition: all 120ms ease;
	padding: 10px;
	font-size: 0.95em;
}
.left-column ul a:hover {
	background: #4d4d4d;
	color: #a09173;
}
.left-column ul li.booking a {
	background: #a09173;
	color: #1a1a1a;
}
.right-column {
	background-image: url('../img/fond.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding-top: 20px;
}

.right-column-london {
	background-image: url('../img/Bustronome-Westminster.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

.right-column .blck-container {
	background: #1a1a1a;
	color: white;
}
.right-column .blck-container #footer {
	color: #79797A;
	font-size: smaller;
	margin-top: 100px;
	padding: 10px;
	text-align: center;
}
.right-column .blck-container #footer li {
	vertical-align: middle;
}
.right-column .blck-container #footer .glyphicon , .right-column .blck-container #footer a, .right-column .blck-container #footer a:hover, .right-column .blck-container #footer a:link, .right-column .blck-container #footer a:visited, .right-column .blck-container #footer a:active {
	color: #a09173;
}
.steps {
	margin: 0;
	border-bottom: 2px solid #1f1f1f;
	margin-bottom: 20px;
}
.steps li {
	border-right: 1px solid #1f1f1f;
	padding: 15px
}
.steps li.current, .steps li:hover {
	background: #a09173;
	cursoir: pointer;
}
.steps li.done {
	background: #4d4d4d;
}
.servicesForm {
	display: inline-block;
	border: 1px solid #333;
}
.servicesForm li {
	padding: 5px;
	border-right: 1px solid #333;
}
.servicesForm li.notavailable {
	color: #555;
}
.servicesForm li.available:hover, .servicesForm li.available.selected {
	cursor: pointer;
	background: #a09173;
}
.golden {
	color: #a09173;
}
a.validateButton, a.addButton, a.addProductButton {
	background: #a09173;
	color: white;
	display: inline-block;
	padding: 7px 15px;
	border-radius: 3px;
	margin-bottom: 15px;
}
a.validateButton:hover, a.addButton:hover, a.addProductButton:hover {
	background: #b5a382; /* Old browsers */
	background: -moz-linear-gradient(top,  #b5a382 0%, #a09173 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #b5a382 0%,#a09173 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #b5a382 0%,#a09173 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5a382', endColorstr='#a09173',GradientType=0 ); /* IE6-9 */
}
.eightMore a {
	color: #a09173;
}
/************************** CALENDAR ********************************/
.ui-datepicker a {
    text-decoration: none;
}
.ui-datepicker-header {
	background: #4d4d4d;
	border: 1px solid white;
	line-height: 30px;
}
.ui-datepicker-prev:after,.ui-datepicker-next:after {
	color: white;
	cursor: pointer;
} 
.ui-datepicker-prev:after {
	content:"<<";
	text-align: left;
	padding-left: 3px;
}
.ui-datepicker-next:after {
	content:">>";
	float: right;
	padding-right: 3px;
}
.ui-datepicker th {
    text-transform: uppercase;
    font-size: 7pt;
    padding: 5px 0;
    color: white;
}
.ui-datepicker tbody td {
    padding: 0;
    border: 1px solid #333;
}
.ui-datepicker td span, .ui-datepicker td a {
    display: inline-block;
    font-weight: bold;
    text-align: center;
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: white;
    width: 100%;
}
.ui-datepicker-calendar .ui-state-hover {
    background: #4d4d4d;
}
.ui-datepicker-calendar .ui-state-default {
    
}
.ui-datepicker-unselectable .ui-state-default {
    color: #b4b3b3;
}
.ui-datepicker-calendar .ui-state-active {
    background: #a09173;
}
/*********************** END CALENDAR ********************************/
/*********************** START SPINNER ********************************/
.ui-spinner {
	border: 1px solid #444;
}
.ui-spinner:hover {
	border-color: white;
}
.ui-spinner .ui-spinner-input {
	text-align: center;
	width: 20px;
	outline: none;
}
.ui-spinner .ui-icon {
	color: #444;
	top: 8px;
	text-indent: 0;
	width: inherit;
	cursor: pointer;
}
.ui-spinner .ui-icon:hover {
	color: white;
}
/*********************** END SPINNER ********************************/
/************************** MENUS ********************************/
#guestNb {
	color: #a09173;
}
.menus {
	margin-top: 20px;
}
.menu-container {
	display: inline-block;
	min-width: 220px;
	padding: 0px 10px 10px 0px;
	text-align: center;
	vertical-align: top;
}
.menu {
	border: 1px solid white;
	font-size: 16px;
	padding: 0px;
}
.top {
	font-family: "Open Sans";
	padding: 5px;
}
.top p {
	color: #bbb;
}
.menu h3 {
	font-size: 16px;
}
.bottom {
	padding: 5px;
	border-top: 1px solid white;
}
.menu a .glyphicon {
	cursor: pointer;
	color: white;
}
.menu a .glyphicon:hover {
	color: #a09173;
}
.menu .menuNb {
	display: inline-block;
	margin: 0px 20px;
}
/************************ END MENUS ********************************/

.categoryTitle {
	font-family: "Open Sans";
	font-size: 20px;
	border-bottom: 1px solid #444;
	padding-bottom: 5px;
	margin-bottom: 10px;
}
.productListElement {
	font-family: "Open Sans";
	margin-bottom: 15px;
	clear: both;
}
.productListElement img {
	float: left;
	margin-bottom: 15px;
	margin-right: 15px;
	max-height: 200px;
	max-width: 150px;
}
.productName {
	margin-bottom:5px;
}
.productPrice {
	margin-bottom: 5px;
}
.productDescription {
	color: #bbb;
}
.actionToggle {
	color: #666;
	cursor: pointer;
	font-size: 0.7em;
}
input {
	border: 1px solid white;
	padding: 3px;
}
table.table.recap td {
	border-color: #555;
}
select, option {
	color: #333;
}
tr.couponConfirmation td {
	color: #a09173;
	font-style: italic; 
}
.social_links span {
	color: transparent;
	display: inline-block;
	width: 26px;
	height: 26px;
	overflow: hidden;
	position: relative;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-color: transparent;
	border-radius: 50%;
}
.social_links.facebook_account span{
	background-image: url("../img/facebook.png");
}
.social_links.facebook_account:hover span{
	background-color: #3b5998;
}
.social_links.twitter_account span{
	background-image: url("../img/twitter.png");
}
.social_links.twitter_account:hover span{
	background-color: #00c3f4;
}
.social_links.tumblr_account span{
	background-image: url("../img/tumblr.png");
}
.social_links.tumblr_account:hover span{
	background-color: #34526f;
}
.social_links.instagram_account span{
	background-image: url("../img/instagram.png");
}

.social_links.instagram_account:hover span{
	background-color: #99654d;
}
.social_links.linkedin_account span{
	background-image: url("../img/linkedin.png");
}
.social_links.tiktok_account span{
	background-image: url("../img/tiktok.png");
}
.social_links.tiktok_account:hover span{
	background-color: #000000;
}
.social_links.linkedin_account:hover span{
	background-color: #99654d;
}

.servicesTable td {
	vertical-align: top;
}
.servicesTable td, .servicesTable th {
	padding: 5px;
}
.servicesTable td:not(:last-child), .servicesTable th:not(:last-child) {
	border-right: 1px solid #a09173;
}
.servicesTable tr td:not(:first-child), .servicesTable tr:not(.firstService) td, .servicesTable th {
	text-align: center;
}
.servicesTable tr.firstService td {
	border-top: 1px solid #a09173;
}
.servicesTable a, servicesTable a:hover, servicesTable a:link, servicesTable a:visited, servicesTable a:active {
	color: #a09173;
}
.servicesTable i {
	color: #777;
}
.btn-gold {
	background: #a09173;
	color: white;
}
.btn-gold:hover {
	background: #b5a382; /* Old browsers */
	background: -moz-linear-gradient(top,  #b5a382 0%, #a09173 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #b5a382 0%,#a09173 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #b5a382 0%,#a09173 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	color: white;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5a382', endColorstr='#a09173',GradientType=0 ); /* IE6-9 */
	text-decoration: underline;	
}

.reservation-confirmation-header {
	text-align: center;
}

.reservation-confirmation-header {
	text-align: center;
}

#payment-list .panel-title {
	float: left;
}

#payment-list .panel-default, #payment-list .panel-default .panel-heading { 
	background: #1a1a1a;
	border-color: #1a1a1a;
}

.payment-title {
	font-size: 16px;
	color: #FFF;
}

.payment-icon {
	float: right;
	line-height: 80px;
}

.clear {
	clear: both;
}

#payment-list .panel-title {
	line-height: 26px;
}

.form__group {
	position: relative;
	padding: 15px 0 0;
	margin-top: 10px;
	width: 100%;
  }
  
  .form__field {
	font-family: inherit;
	width: 230px;
	border: 0;
	border-bottom: 2px solid #9b9b9b;
	outline: 0;
	font-size: 1.4rem;
	color: #fff;
	padding: 7px 0;
	background: transparent;
	transition: border-color 0.2s;
  }
  .form__field::placeholder {
	color: transparent;
  }
  .form__field:placeholder-shown ~ .form__label {
	font-size: 1.4rem;
	cursor: text;
	top: 20px;
  }
  
  .form__label {
	position: absolute;
	top: 0;
	display: block;
	transition: 0.2s;
	font-size: 2rem;
	color: #fff;
  }
  
  .form__field:focus {
	padding-bottom: 6px;
	font-weight: 700;
	border-width: 3px;
	border-image: linear-gradient(to right, #a09173, #a09173);
	border-image-slice: 1;
  }
  .form__field:focus ~ .form__label {
	position: absolute;
	top: 0;
	display: block;
	transition: 0.2s;
	font-size: 1.3rem;
	color: #a09173;
	font-weight: 700;
  }
  
  /* reset input */
  .form__field:required, .form__field:invalid {
	box-shadow: none;
  }

  .coupon-error {
	color: #ff3e1d;
  }


  #payment-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
  }
  
  #payment-list ul li{
	color: #AAAAAA;
	display: block;
	position: relative;
	float: left;
	width: 100%;
	height: 80px;
	border-bottom: 1px solid #333;
  }

  #payment-list ul li input[type=radio]{
	position: absolute;
	visibility: hidden;
  }
  
  #payment-list ul li label{
	display: block;
	position: relative;
	font-weight: 300;
	font-size: 1.1em;
	padding: 18px 25px 25px 60px;
	margin: 10px auto;
	height: 30px;
	z-index: 9;
	cursor: pointer;
	-webkit-transition: all 0.25s linear;
  }
  
  #payment-list ul li:hover label{
	  color: #FFFFFF;
  }
  
  #payment-list ul li .check{
	display: block;
	position: absolute;
	border: 5px solid #AAAAAA;
	border-radius: 100%;
	height: 20px;
	width: 20px;
	top: 30px;
	left: 20px;
	  z-index: 5;
	  transition: border .25s linear;
	  -webkit-transition: border .25s linear;
  }
  
  #payment-list ul li:hover .check {
	border: 5px solid #FFFFFF;
  }
  
  #payment-list ul li .check::before {
	  display: block;
	  position: absolute;
	  content: '';
	  border-radius: 100%;
	  height: 8px;
	  width: 8px;
	  top: 2px;
	  left: 2px;
	  margin: auto;
	  transition: background 0.25s linear;
	  -webkit-transition: background 0.25s linear;
  }
  
  #payment-list input[type=radio]:checked ~ .check {
	border: 4px solid #a09173;
  }
  
  #payment-list input[type=radio]:checked ~ .check::before{
	background: #a09173;
  }
  
  #payment-list input[type=radio]:checked ~ label{
	color: #a09173	;
  }

  #applepay-bloc {
	display:none !important;
  }
  
  /** MODAL **/
  .bustromodal button.close {
	color: #FFF;
    opacity: 1;
    margin-top: -20px;
  }

  .bustromodal .modal-header,  .bustromodal .modal-body, .bustromodal .modal-footer {
	background: #1a1a1a;
  }

  .bustromodal .modal-footer {
	border-top: 1px solid #1a1a1a;
  }

  .bustromodal .btn {
  	color: #1a1a1a;
  }

  
  @media only screen and (max-width: 400px) {
	#payment-list ul li {
		height: auto;
	}
	.payment-icon {
		clear:both;
		float:none;
		text-align:center;
	}
  }

  @media only screen and (max-width: 280px) {
	#payment-list h2 {
		font-size: 20px;
	}
	
	.form__field:placeholder-shown ~ .form__label {
		font-size:1.1rem;
	}

	a.addButton {
		display:block;
		text-align:center;
	}

	.form__field {
		width: 100%;
	}
  }