@import url(//fonts.googleapis.com/css?family=Lato:400,300,700);
@import url(//fonts.googleapis.com/css?family=Crimson+Text);



/* Properties used to obtain the sticky footer. The html and body elements cannot have any padding or margin. Taken from http://getbootstrap.com/examples/sticky-footer/ */

html,
body {
	height: 100%;
	
}



.flag {
	width: 16px;
	height: 11px;
	background:url(../../img/flags.png) no-repeat
}

.flag.flag-de {background-position: -16px 0}
.flag.flag-es {background-position: -32px 0}
.flag.flag-fr {background-position: 0 -11px}
.flag.flag-gb {background-position: -16px -11px}
.flag.flag-pt {background-position: -32px -11px}









/* OVERRIDE AND EXTEND BOOTSTRAP DEFINITIONS */


/* an extension to .input-sm classes (Height sizing for inputs - http://getbootstrap.com/css/#forms-control-sizes )*/

.input-xs {
  height: 28px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

select.input-xs {
  height: 28px;
  line-height: 28px;
}

textarea.input-xs {
  height: auto;
}

/* remove the display property - this will allow to center the image in the container div (why???) */
.img-responsive-2 {
/*  display: block;*/
  height: auto;
max-width: 100%;
border-radius: 0px !important;
}



.btn-xxs {
  font-size: 11px;
  line-height: 1.4;
  border-radius: 2px;
  padding: 0px 8px 2px 8px;
  white-space: normal;
}

/* change the icon of the cursor for disabled elements*/
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  cursor: text;
  background-color: #fff;
}

.label {
	border-radius: 0;
}



.carousel-indicators {
    bottom: 1px;
}

.carousel-indicators li {
  width: 20px;
  height: 20px;
  margin: 2px;
  border: 2px solid #ffffff;
  border-radius: 20px;
}

.carousel-indicators .active {
  width: 22px;
  height: 22px;
}





/* class from the datepicker plugin; used to style the "today" button */

body > div.datepicker.datepicker-dropdown.dropdown-menu > div.datepicker-days > table > tfoot{
	display:none;
	visibility: hidden;
}


.datepicker tfoot tr:first-child th {
  cursor: pointer;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
color: #ffffff;
background-color: #357ebd;
border-color: black;
letter-spacing: 1px;

}
.datepicker tfoot tr:first-child th:hover {
	background-color: #2f71aa;  
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
  background: none;
/*  color: #999999;*/
  color: #adadad;  
  cursor: not-allowed;
}

.btn-lg {
  font-size: 22px;
  padding: 6px 16px;
}

.alert {
	margin-bottom: 0px;
font-size: 12px;
font-weight: 700;
color: #808080;
font-family: Lato,sans-serif;
text-transform: uppercase !important;
}

/* DEBUG CLASSES*/
.debug {
    border: solid;
    border-width: 1px;
}

.border-red {
    border-color: red;
}

.border-blue {
    border-color: blue;
}

.border-green {
    border-color: green;
}

.border-orange {
    border-color: orange;
}

.border-white {
    border-color: white;
}




.view-container {
	padding-top: 20px !important;
}




.overlay {
	background-image: url(../img/texture_overlay.png) 
}

.loading-view-logo {
	display: block;
	margin: auto;
	padding: 10px 0px;
}









/* STEP OFFERS LAYOUT */
.Steps-Show-StepOffersLV {
	margin-bottom: 30px;
}

/* LOGO */

.Logo-LogoLV {
/* TODO: is this a safe way way to make the image centered in the div? Does every browser treats a text as an image?*/
	text-align: center;
	padding: 20px 0px;
	cursor: pointer;
	display:none !important;
}



/* HEADER */

.Header-Show-HeaderLV {
  color: white;
  margin-top: 15px;
}

.Header-Show-ToplinksIV a {
  color: white;	
}

.Header-Show-ToplinksIV {
	text-align: right;
}

.Header-Show-CulturesCV {
	float: right;	 
}

.culture-deselected {
	opacity: 0.4;
}

.Header-Show-HotelNameIV {
	font-size: 150%;
	font-weight: 700;
}


/* we using the input-sm class on the select element; we have to use this on the elements next to it to make the height equal */
.input-sm-neighbour {
  height: 30px;
  padding: 3px 0px;
}



/* PROMOTION */

.Promotion-Show-PromotionIV {
	color: #232323;  
	padding: 10px 10px 15px 10px;
}





.SummaryPanel-Show-SummaryPanelLV {
	padding: 5px 10px 15px 10px;
}


.summary-panel-row {
	padding: 5px 5px;
}


/* an alternate hr element, a little more dark*/
hr.hr-summary-panel {
  margin: 2px 0px 12px 0px;
  border: 0;
  border-top: none !important;
  border-bottom: 1px solid #ddd;
}

.summary-panel-total {
	font-size: 100%;
	font-weight: 400;
}

.summary-panel-price {
	font-weight: 600;
}

/* FOOTER */


.Footer-Show-SocialIconIV {
	margin-right: 10px;
	opacity: 0.8;
}
.Footer-Show-SocialIconIV:hover {
	opacity: 1.0;
}


.opaque {
	opacity: 1.0;
	z-index: 9999;
}





/* OFFER  767, 768 */


/* to be displayed in smarthphones ONLY (and not on larger screens) */
@media (max-width: 767px) {


.overview-corners {
	border-radius: 6px 6px 0 0;
	-moz-border-radius: 6px 6px 0 0;
	-webkit-border-radius: 6px 6px 0 0;
}


/* small adjustment in the column size, to be used in the date range (but only for xs sizes) */
/* NOTE: to make this affect the xs grids and not the other grids, I had to actually place it in this media section */
.col-xs-4-alt {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-xs-4-alt {  
  float: left;
}

.col-xs-4-alt {    
  width: 36%;
}

}


/* to be displayed in tablets and larger screens ONLY (and not on smarthphones) */
@media (min-width: 768px) {

.arrow-box {
	position: relative;
	background: #fff;
}
.arrow-box:after, .arrow-box:before {
	left: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.arrow-box:after {
	border-color: rgba(255, 255, 255, 0);
	border-left-color: #fff;
	border-width: 10px;
	top: 28%;
	margin-top: -10px;
}
.arrow-box:before {
	border-color: rgba(204, 204, 204, 0);
	border-left-color: #ccc;
	border-width: 11px;
	top: 28%;
	margin-top: -11px;
}

.overview-corners {
	border-radius: 0px !important;
	
}


/* small adjustment in the column size, to be used in the date range (but only for xs sizes) */
/* NOTE: to make this affect the xs grids and not the other grids, I had to actually place it in this media section */
.col-sm-4-alt {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-sm-4-alt {  
  float: left;
}

.col-sm-4-alt {    
  width: 34.1%;
}

/*
.modal {
  overflow-x: hidden;
  overflow-y: hidden;
}

.modal-dialog {
    right: auto;
    left: 50%;
    width: 1000px;
    padding-top: 30px;
    padding-bottom: 30px;
  }
*/

}  /* end of the section min-width: 768px*/

@media (min-width: 1200px) {

  .col-lg-2-alt {
    width: 18.0%;
  }  

  .col-lg-6-alt  {
  	width: 48.0%;
  }


}




.overview {
	min-height: 165px;
	background: #fff;
	 border-right: 1px solid #777777;
}




.label-rooms-container {
	padding-top: 5px;
}
.label-rooms-container label {
	font-size: 105%;
}




.offer-img-container {
	text-align: center;
/*	padding: 8px;*/
}

.Offers-List-OfferLV {
	margin-bottom: 10px;
}


.restrictions-apply {
	font-size: 115%;
	font-weight: 500;
}

.restrictions-list {
	padding-left: 25px;
}



/* RANGE DATES */
.color-white {
	color: white;
}



/* CUSTOM CSS - MAKE CHANGES FROM HERE TO THE END OF THE FILE */


.no-units-region.select-no-units-region > div > div.row.hidden-xs{
	diplay: none;
	visibility: hidden;
}

body {
   	background-image: none !important;
  	background-repeat: no-repeat;
  	background-attachment: fixed;
 	font-family: 'Lato', sans-serif;
	color: #808080;
	background-color:#f2f2f2;
}

#text-center{
	color: black;
}

.hotel-name {

	color: #c4ad71;
	display:none;

}








/* OVERRIDE AND EXTEND BOOTSTRAP DEFINITIONS */

/* change the anchor links to be a little darker blue*/
a {
	color: #808080 !important;
text-decoration: none !important;
font-family: "Crimson",serif !important;
font-size: 1.3em;
letter-spacing: -1px;
line-height: 1em;

}


/* the element with id #main-wrapper is doing the role of the div#wrap in the sticky-footer example; we are using the same css properties of bootstrap's container class */

#main-wrapper {
	max-width:1100px !important;
	background: #f2f2f2;
	box-shadow: none !important;
	min-height: 100%;
	height: auto;
	margin:0 auto !important;
	


	/* copy css from bootstrap's .container */	
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;	
	

}

/* copy css from bootstrap's .container */	
#main-wrapper:before,
#main-wrapper:after {
  display: table;
  content: " ";
}

@media (min-width: 768px) {
  #main-wrapper {
    max-width: 750px;
  }
}

@media (min-width: 992px) {
  #main-wrapper {
    max-width: 970px;
  }
}  

@media (min-width: 1200px) {
  #main-wrapper {
    max-width: 1100px;
  }
}



.mybtn {
  height:40px;
    border: none;
    border-radius: 0px !important;
border: none !important;
text-shadow: none !important;
box-shadow: none !important;
color: #fff !important;
background: #BA9F6C;
text-transform:uppercase !important;
font-size:12px !important;
letter-spacing:1px !important;

}


.mybtn:hover {
  height:40px;
    border: none;
    border-radius: 0px !important;
border: none !important;
text-shadow: none !important;
box-shadow: none !important;
color: #fff !important;
background: #232323;
text-transform:uppercase !important;
font-size:12px !important;
letter-spacing:1px !important;

}







button.btn.mybtn.btn-primary.btn-xxs.js-more-info {
	margin-left: -7px !important;
background: none repeat scroll 0% 0% transparent;
color: rgb(35, 35, 35) !important;
text-transform: uppercase !important;
font-weight: 700;
font-size: 12px;
padding-top: 25px;
}

.btn.mybtn.btn-primary.btn-xxs.js-more-info {
	margin-left: -7px !important;
background: none repeat scroll 0% 0% transparent;
color: rgb(35, 35, 35) !important;
text-transform: uppercase !important;
font-weight: 700;
font-size: 12px;
padding-top: 25px;
}


.block {
	background-color:#FFFFFF;
	box-shadow: none !important;
	border:1px solid #ccc !important;
	color:#808080;

	border-radius: 0px !important;
	
}


.overlay {
	background-image: none !important; 
}

.loading-view-logo {
	display: block;
	margin: auto;
	padding: 10px 0px;
}

.alert-warning{ 
	background: none !important;
	border:none !important;
	display:none !important;

}

/* ANIMATIONS */
body { 
/* Addresses a small issue in webkit: http://bit.ly/NEdoDq */
	-webkit-backface-visibility: hidden;
}

.animated {
	-webkit-animation-duration: 0.45s;
	   -moz-animation-duration: 0.45s;
	     -o-animation-duration: 0.45s;
	        animation-duration: 0.45s;
	-webkit-animation-fill-mode: both;
	   -moz-animation-fill-mode: both;
	     -o-animation-fill-mode: both;
	        animation-fill-mode: both;
}


@-webkit-keyframes swing {
	20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }

	20% { -webkit-transform: rotate(-0.7deg); }
	40% { -webkit-transform: rotate(0.6deg); }
	60% { -webkit-transform: rotate(-0.6deg); }
	80% { -webkit-transform: rotate(0.5deg); }
	100% { -webkit-transform: rotate(0deg); }
}

@-moz-keyframes swing {

	20% { -moz-transform: rotate(-0.7deg); }
	40% { -moz-transform: rotate(0.6deg); }
	60% { -moz-transform: rotate(-0.6deg); }
	80% { -moz-transform: rotate(0.5deg); }
	100% { -moz-transform: rotate(0deg); }
}

@-o-keyframes swing {

	20% { -o-transform: rotate(-0.7deg); }
	40% { -o-transform: rotate(0.6deg); }
	60% { -o-transform: rotate(-0.6deg); }
	80% { -o-transform: rotate(0.5deg); }
	100% { -o-transform: rotate(0deg); }
}

@keyframes swing {

	20% { transform: rotate(-0.7deg); }
	40% { transform: rotate(0.6deg); }
	60% { transform: rotate(-0.6deg); }
	80% { transform: rotate(0.5deg); }
	100% { transform: rotate(0deg); }
}

.animated.swing {
	-webkit-transform-origin: top center;
	-moz-transform-origin: top center;
	-o-transform-origin: top center;
	transform-origin: top center;
	-webkit-animation-name: swing;
	-moz-animation-name: swing;
	-o-animation-name: swing;
	animation-name: swing;
}


.summary-panel-background {
background-image: none !important;
box-shadow: none !important;
background-color: #ffffff !important;
border: 1px solid #ccc !important;
}



#footer-wrapper {
	height: 80px;
	background: rgb(200, 54, 54);  /* fallback for IE8 */
	background: rgba(245, 245, 245, 0.5); 
	background: #004586;
	display:none !important;
}

.Footer-Show-DisclaimerIV {
	color: white;
}


.overview {
	min-height: 165px;
background: none repeat scroll 0% 0% #FFF;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
padding:12px !important;
}


.offer {
	background-color: #f2f2f2!important;
background-image: none !important;
border-radius: 0px !important;
margin-bottom: 10px;
border: 1px solid #ccc;
color:#808080;
}



.price2 {
	text-align: center;
	color:#232323; 
	padding-top: 20px;
}

.price2 small {
	color: #232323; 
	font-size: 100%;
}

.price-value {
	font-weight: 700;
	text-shadow: none !important;
	font-size: 100%;
	text-shadow: none !important;
}


.offer-mouseover {
	background-color: #BA9F6C !important;
background-image: none !important;
border-radius: 0px !important;
margin-bottom: 10px;
border: 1px solid #ccc;
}

.offer-selected {
	background-color: #BA9F6C !important;
background-image: none !important;
border-radius: 0px !important;
margin-bottom: 10px;
border: 1px solid #ccc;
}

.dates-range-color {
	color: #808080;
}



.form-control {
    display: block;
width: 100%;
height: 40px !important;
padding: 6px 12px;
font-size: 12px !important;
line-height: 1.42857;
color: #808080;
vertical-align: middle;
background-color: #FFF;
background-image: none !important;
border: 1px solid #CCC;
border-radius: 0px !important;
box-shadow: none !important;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
text-transform: uppercase !important;
font-weight: 700 !important;
letter-spacing: 1px !important;
}


.glyphicon.glyphicon-calendar {
	color:#BA9F6C !important;
}


div#promotion-region {
	margin-top: -20px !important;
}



.input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: normal;
    line-height: 1;
    color: #808080;
    text-align: center;
    background-color: #f2f2f2 !important;
    border: 1px solid #ddd !important;
    border-radius: 0px !important;
    }
    
    
    
.blockx.loading-view-logo-container {
	display:none !important;
}

.container {
	margin:0 auto !important;
	max-width:1100px !important;
}


div.col-xs-12.col-sm-12.offer-descriptionX.debugX.border-redX {
	padding:15px !important;
}


.has-error .form-control {
	border-color:#232323 !important;
}

label.control-label {
	color:#232323 !important;
}


.help-block {
    display: block;
    margin-top: 1px;
    margin-bottom: 10px;
    color: #232323 !important;
    font-size: 80%;
}
    
    
    
 .btn.mybtn.btn-primary.btn-xxs.js-book-now {
	 display:none !important;
 }
 
 
 .alert {
    padding: 15px;
    margin-bottom: 20px;
    border: none !important;
    border-radius: 0px !important;
   }
  
  
   .alert-info { 
color: #808080 !important;
background-color: #EEE !important;
}



/************************************ Calendar ******************************/

.glyphicon.glyphicon-arrow-left {
color: #ba9f6c;
}

.glyphicon.glyphicon-arrow-right {
color: #ba9f6c;
}

.calbtn {
border-radius: 0px !important;
margin: 1px 1px 1px 1px
}

/* Styling for the overall table */
#calendar {        
    table-layout: fixed!important;
    /*border-collapse: collapse;*/        
    border:1px solid white;
    width: 33%!important;
    float:left!important;
    margin:1px 1px 1px 1px;
    }
/* Styling for the column headers (days of the week) */
#calendar th {
    /*padding: 0 0.5em;*/
    text-align: center;        
    padding-left: 1px;
    padding-right: 1px;
    border:1px solid white;
    background-color:#f2f2f2;
    color:#808080;        
    }    

.WeekDay{
    font-size: 90%;    
    }
    
/* Styling for the individual cells (days) */
#calendar td  {     
    font-size: 80%;
    padding: 2px 2px;   
    width: 14%; 
    height: 45px;
    text-align: left;
    vertical-align: top;
    color: darkgray;
    border:1px solid white;
    }

#calendar td a {
    color: #808080;
    font-weight: bolder;
    }
        
.notValid {
    background-color: rgba(128, 128, 128, 0.6);
    }

.Valid {
    background-color: rgba(179, 239, 179, 0.6);
    }

.Valid:hover {
    background-color: rgba(0, 0, 0, 0.6);           
    }

/*.currentDay {
    background-color:cadetblue;                      
}*/

/*.currentDay:hover {
    background-color: #ba9f6c;                     
}*/

.div_withPrice {
    margin-top: 5px!important;
    color: darkgray; 
}
    
.notAvailable {    
    background-color: rgba(255, 0, 0, 0.2)!important;       
}    

#table_container{width:100%;margin:0 auto;display:inline;padding-top:10px!important}
 
/************************************** End Calendar **************************************************/


/** TermsConditions and Map Region **/
#termsExtra-region {
    display: block;
}

#Map-modal-body {
    background-image:url("/areas/booking2/assets/img/DunasDouradasMapa.jpg");
    height:520px;
}
/************************************/