/*********************************************************/
/* aurea-custom.css                                      */
/* Controlled by ConSoft Ltd                             */
/*                                                       */
/* Version 18/03/2021                                    */
/*********************************************************/

/* ===================== */
/* Breakpoints           */
/* LG  1170px onwards    */
/* MD   970px - 1169px   */
/* SM   750px -  969px   */
/* XS   480px -  749px   */ 
/* XXS  up to    479px   */
/* ===================== */

/* MAIN CAROUSEL GALLERY SLIDER (HOME PAGE, Wakeboard page, Dental, Trekking, etc. */
/* jQuery Responsive Slider - Used together with javascript slider-CSCSbjqs.js */
/* Slider full image size: 826x350 px preferrable upload is 1656x700 */
ul.CSbjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.CSbjqs-slide{position:absolute; display:none; background-image: none; background-position: 0px; padding-left: 0px;}
ul.CSbjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ul.CSbjqs-controls.v-centered li a{position:absolute;}
ul.CSbjqs-controls.v-centered li a:focus {outline: none;}
ul.CSbjqs-controls.v-centered li.CSbjqs-next a{top: 90px; right: 0px;text-shadow: 1px 1px 0 #666;} 
ul.CSbjqs-controls.v-centered li.CSbjqs-prev a{top: 90px; left:initial;text-shadow: 1px 1px 0 #666;}
p.CSbjqs-caption{font-size: 18px;display:block;width:100%;margin:0;padding:8px 10px 12px 8px;position:absolute;bottom:0; text-align: center;}
p.CSbjqs-caption{ background: rgba(0,0,0,0.3); color: #fff; text-shadow: 1px 1px 0px #555; }
p.CSbjqs-caption a { color: #fff; text-decoration: none; }
ul.CSbjqs-controls.v-centered li a{position:absolute; display:block; padding:60px 20px; color:#fff; font-size: 3rem; text-decoration: none; }
ul.CSbjqs-controls.v-centered li a:hover{ color:#F9DE9B; }
.CSslider-photos {  border: 1px solid #E2E2E2; background: #FFF none repeat scroll 0% 0%; padding: 9px; overflow: hidden; }
.CSbanner-fade ul li { position: static; margin-left: -15px; margin-right: 0;}
.CSbanner-fade ul > li:before { content: ''; }
@media (min-width: 970px) and (max-width: 1169px) { p.CSbjqs-caption{font-size: 16px;} } /* slider caption reduced for md */
/* Position prev/next arrows differently vertically depending on slider size */
@media (min-width: 970px) and (max-width: 1169px) { ul.CSbjqs-controls.v-centered li.CSbjqs-next a, ul.CSbjqs-controls.v-centered li.CSbjqs-prev a {top: 55px!important;} } /* md */
@media (min-width: 750px) and (max-width: 969px) { ul.CSbjqs-controls.v-centered li.CSbjqs-next a, ul.CSbjqs-controls.v-centered li.CSbjqs-prev a {top: 10px!important;} } /* sm */
@media (min-width: 650px) and (max-width: 749px) { ul.CSbjqs-controls.v-centered li.CSbjqs-next a, ul.CSbjqs-controls.v-centered li.CSbjqs-prev a {top: 60px!important;} } /* xs */
@media (min-width: 550px) and (max-width: 649px) { ul.CSbjqs-controls.v-centered li.CSbjqs-next a, ul.CSbjqs-controls.v-centered li.CSbjqs-prev a {top: 40px!important;} } /* xs */
@media (min-width: 450px) and (max-width: 549px) { ul.CSbjqs-controls.v-centered li.CSbjqs-next a, ul.CSbjqs-controls.v-centered li.CSbjqs-prev a {top: 10px!important;} } /* xs */
@media screen and (max-width: 449px) { ul.CSbjqs-controls.v-centered li.CSbjqs-next a, ul.CSbjqs-controls.v-centered li.CSbjqs-prev a {top: -15px!important;} } /* xs */
/* End of Carousel Responsive jQuery Slider */

/* slider caption formatting for slider on the map page below Google map */
.CSmap-slider p.CSbjqs-caption {background: none; padding-left:3%; padding-right:15%; color:#147bb3;text-shadow:none;}

/* ------------------------------------------------------------------------------------------------------------ */

/* Beaches Page jQuery Slider. Responsive version. Has buttons under the slider and map and watter tempearature
/* Used together with javascript slider-bjqs.js  Ideal image sizes: 700x380 or 1400x760 px */
.beachwatertemp {width: 99.4%; height: 99.5%; border: 1px solid #a6cade; background-color: #e5f3f8; background-image: url("images/bluewave.jpg"); overflow:hidden; padding-left:2em; }
.beachframe { padding: 1em; width: 250px; height: 200px; margin: auto; border: none; }
ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{position:absolute; display:none; background-image: none; background-position: 0px; padding-left: 0px;}
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ul.bjqs-controls.v-centered li a{position:absolute;}
ul.bjqs-controls.v-centered li a:focus {outline: none;}
ul.bjqs-controls.v-centered li.bjqs-next a{right: 0; padding-left: 120px; text-shadow: 1px 1px 12px #999;}
ul.bjqs-controls.v-centered li.bjqs-prev a{left:initial; padding-right: 120px; text-shadow: 1px 1px 12px #999;}
ol.bjqs-markers{list-style: none; padding: 0; margin: 0; /* width: 189px; */ }
ol.bjqs-markers.withseatemp { }
ol.bjqs-markers.h-centered{text-align: center;}
ol.bjqs-markers li{display:inline;}
ol.bjqs-markers li a{display:inline-block;}
p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}
.banner-fade, .banner-slide { margin-bottom: 60px; height: 300px; background-image: url("images/loading-image.gif"); background-repeat: no-repeat; background-position: center; }
/* ul.bjqs-controls.v-centered li a{ display:block; padding:30px 14px 40px 16px; color:#fff; font-size: 4rem; text-decoration: none; } */
ul.bjqs-controls.v-centered li a{ display:block; padding:50px 20px; color: rgba(255, 255, 255, 0.5); font-size: 5.5rem; text-decoration: none; font-weight: bold; }
ul.bjqs-controls.v-centered li a:hover{  }
ol.bjqs-markers li a{ padding:6px 10px;  margin-right: 15px; margin-top: 16px; text-decoration: none; }
ol.bjqs-markers li.active-marker a {}  
ol.bjqs-markers.ispodwt { margin-top: -60px; margin-left: 350px; min-width: 235px; }
ol.bjqs-markers.ispod { margin-top: -60px; margin-left: 200px; min-width: 235px; }
ol.bjqs-markers.ispodwt li a{ margin-right: 5px!important; }
ol.bjqs-markers.ispod li a{ margin-right: 5px!important; }
p.bjqs-caption{ background: rgba(255,255,255,0.5); color: #333; }
.slider-photos { /* padding: 0 6.5em; */ }
.banner-fade ul li { position: static; margin-left: -15px; margin-right: 0; width:unset!important;}
.banner-fade ul > li:before { content: ''; }

/* End of Beaches jQuery Slider */
/* ------------------------------------------------------------------------------------------------------------ */

.page-inner-content h2, .page-inner-content h3 { margin-top: 25px; }
.page-inner-content h3.panel-title { margin-top: 0; }

div.page-inner-content.page-putovanja h1 { text-align: center; }

div.page-inner-content { text-align: justify; }
div.page-inner-content h1, div.page-inner-content h2, div.page-inner-content h3, 
div.page-inner-content h4, div.page-inner-content h5, div.page-inner-content h6 {
 text-align: left;
} 

div.page-inner-content h1.text-center, div.page-inner-content h2.text-center, div.page-inner-content h3.text-center, 
div.page-inner-content h4.text-center, div.page-inner-content h5.text-center, div.page-inner-content h6.text-center {
 text-align: center;
} 

/* Headings inline default setting, overriden later on for mobile */
h1.CSheadingInline, h2.CSheadingInline, h3.CSheadingInline, 
h4.CSheadingInline, h5.CSheadingInline, h6.CSheadingInline   { margin-top: 0; } 

/* to center panel title, add text-center into the class*/
.panel-title.text-center { text-align: center; }


/* HP only, heading below slider */
h2.CShomePage { font-size: 1.8rem; margin-top:6px; text-align: center!important;}

/* invite box on the home page above Featured Accommodation*/
.hp-invite-box img {padding-bottom: 10px;}
.hp-invite-box a { color: #0493D8; text-decoration: none; }
.hp-invite-box a:hover { text-decoration: none; color: #ee8209; }


h2.CSunderline { border-bottom: 1px solid; padding-bottom: 4px;}
h3.CSunderline { border-bottom: 1px solid; padding-bottom: 3px;}
h4.CSunderline { border-bottom: 1px solid; padding-bottom: 3px;}
h5.CSunderline { border-bottom: 1px solid; padding-bottom: 3px;}

h6.CSsmallHeading { font-family: Arial; font-size: 14px; letter-spacing: -1px; color: #555; }

.CSnotBold { font-weight: normal; }
.CSsetBold { font-weight: bold; }
.CSstrikeThrough { text-decoration: line-through; }

.CSsmallerFont p, .CSsmallerFont th, .CSsmallerFont td, .CSsmallerFont li { font-size: 13px; line-height: 18px; }
.CSfontSmall { font-size: 0.85em; line-height: 1.2em; } /* Small font, set at 0.85 of what it would be. This is why uses em not rem */
.CSfontSizeNormal { font-size: inherit!important; line-height: inherit!important; } /* Return font to normal */

.btn.CSbtnWrap {white-space: pre-wrap;}

.CSitalic { font-style: italic; }

/* colours */
.orange { color: #eb670a; }  /* used in SearchResultsOptions, was before #e4751c */
.CSorange { color: #eb670a!important; }
.CSblue, a.CSblue { color: #0065A1!important; }
.CSblue a  { color: #0065A1!important; }
.CSgrey { color: #444; } 
.CSgreen { color: #76953C; }
.CSred { color: #E80000; }
.color-danger {color: #bb4640!important;}

/* HR menu option for putovanja - highlight it in Yellow, the option name in CMS has span on which this styling is attached */
ul.nav li a span.cs-putovanja { background-color: #FCDE00; color: #006699; padding: 6px; }
ul.nav li a span.cs-putovanja:hover { background-color: #DFC217; color: #024F76; }

 /* Used for images within the text, instead of pull-left / pull-right as this classes have margins set too */
img.CSimgRight { float: right; margin-left: 10px; margin-bottom: 6px; }
img.CSimgLeft { float: left; margin-right: 10px; margin-bottom: 6px; } 
img.CSimgCenter  { margin:0 auto; }

img.CSimgLeftNarrow { float: left; margin-right: 6px; margin-bottom: 6px; } 
img.CSimgRightNarrow { float: right; margin-left: 6px; margin-bottom: 6px; }

.CSyouTube {margin-left:40px; margin-right:40px}

div.CSclearBoth, div.CSclearfix  { clear: both; }

.CSnoMarginBottom, .cs-no-margin-bottom { margin-bottom: 0!important;}
.CSmarginBottomSmall, .cs-margin-bottom-small { margin-bottom: 6px!important; }
.CSmarginBottom, .cs-margin-bottom { margin-bottom: 15px!important; }
.CSmarginBottomBig, .cs-margin-bottom-big { margin-bottom: 25px!important; }
.CSmarginBottomHuge, .cs-margin-bottom-huge { margin-bottom: 40px!important; }

.CSmarginTopNegative, .cs-margin-top-negative { margin-top: -10px!important; }
.CSnoMarginTop, .cs-no-margin-top { margin-top: 0!important; }
.CSmarginTopSmall, .cs-margin-top-small, h2.CSmarginTopSmall { margin-top: 6px!important; }
.CSmarginTop, .cs-margin-top { margin-top: 15px!important; }
.CSmarginTopBig, .cs-margin-top-big { margin-top: 25px!important; }
.CSmarginTopHuge, .cs-margin-top-huge { margin-top: 40px!important; }
.CSmarginTopExtraHuge, .cs-margin-top-extra-huge { margin-top: 60px!important; }


.CSmarginLeftNone, .cs-margin-left-none { margin-left: 0px!important; }
.CSmarginLeftSmall, .cs-margin-left-small { margin-left: 6px!important; } 
.CSmarginLeft, .cs-margin-left { margin-left: 16px!important; } /* Used for indented bullets */

.CSmarginTopMobile, .cs-margin-top-mobile { margin-top: 0!important; } /* Default setting, overriden later on for mobile */

a.btn.CSmarginLeftNone, a.cs-margin-left-none { margin-left: 0px; }
a.CSnoUnderline { text-decoration: none; }
.CSnoUnderline a { text-decoration: none!important; }

.CSaureaEmail a { text-decoration: none; font-size: 12px; }

.CSaureaEmail a:before {
    content: "\f003" ;
    font-family: 'FontAwesome';
    font-size: 18px;
	margin-right: 5px;
	margin-left: 7px;
}

.CSaureaPhone span:before {
    content: "\f095" ;
    font-family: 'FontAwesome';
    font-size: 18px;
	margin-right: 5px;
	margin-left: 7px;
}

.CSaureaFax span:before {
    content: "\f1ac" ;
    font-family: 'FontAwesome';
    font-size: 18px;
	margin-right: 5px;
	margin-left: 7px;
}

/* New sticker "stay safe in Croatia" for SearchResults page */
.staysafe {
    background: url(/Content/images/sticker-staysafe.png) 0 0 no-repeat;
    background-size: 80px;
	width: 80px; 
	height: 88px;
	overflow: hidden;
    margin-bottom: 10px;
}

.table-confirm-end.CSnoBorderBottom > tbody > tr > td { border-bottom: none; }

hr.CSblueSolid  { border-color: #9cc9e8; border-style: solid none none; border-top-width: 1px; }
hr.CShrWide { margin-top: 30px; margin-bottom: 30px; }
hr.CSxsSep { border-color: #fff; margin-top: 10px; margin-bottom: 10px; }  /* this hr line is only visible when mobile width */
hr.CSsimpleOpenClose { border-color: #fff;  padding: 0; margin: 0; } /* hr separator visible only on mobile */

ul.CSinlineLiMarginLeft  { padding-left: 0px; } 
ul.CSinlineLiMarginLeft li { margin-left: 8px; margin-right: 4px; padding-left: 10px; } 
ul.CSspacing li { margin-top: 10px; }
ul.CSnoBullet li::before { content: ''; }

/* map image on destination page, class probably not needed, different class should be used, to check */
/*.CSimgDestinationMap { float: left; border: 1px solid #b4cfef; padding: 4px; margin: 4px 10px 6px 0px; }


/* Aurea old design of Default Table, another possible table layout */
table.CSdefaultTable { margin-top: 15px; }
table.CSdefaultTable th, .table.CSdefaultTable td { padding: 3px 6px 3px 2px; white-space: nowrap; }
table.CSdefaultTable td { border-bottom: 1px solid #CAE8EF; }

.table.CSdefaultTable > thead:first-child > tr:first-child > th, .table.CSdefaultTable th {
    border-bottom: 1px solid #0065A1;
    border-top: 1px solid #0065A1;
    color: #0065A1;
    font-weight: bold;
    text-align: left;
	padding-left: 0;
}

.table th.CSwrap, .table td.CSwrap {  white-space: normal!important; }

.CSstars { vertical-align: baseline; } /* Formatting for stars image on Camping/LuxuryVillas/FamilyHotels page */

/* 27/10/2019 Selected accommodation price on Room.aspx right to the calendar  */
.panel-offer h5 { font-size: 18px; margin-bottom: -8px !important; margin-top: 4px; color: #069; }

/* Box with blue border */
div.CSblueBorder  { border: 1px solid #3498D3; padding: 6px 10px; }

/* Restaurants page, box with town name */
.CSrestaurantBox { 
    border: 1px solid #a1d7fb; 
    background: #d8eaf6;
    padding: 12px 10px;
    margin: 40px 0 20px;
    color: #444;
}

/* Additional class for btn-buy when used at the bottom of the Room.aspx*/
.CSbtnBuyBottom { font-size: 14px; padding-top: 14px; padding-bottom: 14px; }

a.js-modal { cursor: pointer; } 

/* Set the colour otherwise bullets in panels are not visible */
.page-inner-content .panel-danger > .panel-body > ul > li:before { color: #444; }
.page-inner-content .panel-primary > .panel-body > ul > li:before { color: #444; }
.page-inner-content .panel-success > .panel-body > ul > li:before { color: #444; }

/* Discount sticker on Search Results, class used in Search Result opcije */
div.cs-discount span { color: #fff; background-color: #FF0000; padding: 3px 7px; border-radius: 4px; }
div.cs-discount { margin: 5px 0 10px 0; }

/* Room.aspx price list, special offers - add <span> element around it to style it differently */
table.table-pricelist tbody tr td span { background-color: #EE6E03; padding: 2px 10px; color: #fff; display: inline-block; border-radius:4px; }

/* used in Room descriptions for units where price is not displayed */
.no-prices-message { font-style: italic; margin-bottom: 20px; font-size: 1.3rem; }

/* MyAccount page */
.cs-btn-reservations { width: 100% }
.cs-btn-reservations:after { top: 8px; right: unset;}

.child-date { line-height: 2.3; } /* UpitDoplate*/

h1 > br.cs-nobr { display: none; }

/* ----------- */
/* PUTOVANJA   */
/* Posljednja mjesta yellow banner over the image on PUTOVANJA boxes */
.putovanja-image { position: relative; }
.last-places {
    position: absolute;
	top: 20px;
	left: 20px;
    background: #FFDD00;
    color: #000;
    padding: 8px 10px;
    font-weight: bold;
    text-align: center;
}
/* Sold Out red banner over the image on PUTOVANJA boxes */
.sold-out {
    position: absolute;
	top: 90px;
	left: 90px;
    background: #E80000;
    color: #fff;
    padding: 8px 10px;
    font-weight: bold;
    text-align: center;
	transform: rotate(-30deg);
	font-size: 26px;
}

/* Red sticker on Prosla Putovanja images - smaller font */
.putovanja-prosla .sold-out { font-size: 18px; }

/* for when we need relative positioning */
.CSposRel { position: relative; }

/* adapt reviews to be open/close for other stuff */
.CSsimpleOpenCloseHead { border-top: none; border-bottom: none; margin-bottom: 0; padding: 10px 0 10px 0; }
.CSsimpleOpenCloseHead h5.review-title { padding-right: 24px; }
.CSsimpleOpenCloseBody { border-top: none; border-bottom: none; margin-bottom: 0; padding: 0; }

/* News back button div holder at the bottom of the page */
.backbutton-placeholder {margin: 10px 0; }

/* Weather page table */
.weather-table { font-size: 11px; font-family: verdana; }
.weather-table th { background-color: #e5e5e5; }
table.weather-table3 >tbody > tr > td {
    padding: 4px;
	vertical-align: middle;
}
	
/* Destination pages, accommodation/beaches/restaurants buttons below the gallery */
.cs-destination-accommodation, .cs-destination-beach, .cs-destination-restaurant { position: relative; padding-left: 45px; margin-bottom: 10px; width: 100%; }
.cs-destination-accommodation::before { content: ""; position: absolute; width: 37px; height: 34px; border: 1px solid #98cef2; left: -1px; top: -1px; overflow: hidden; background: url(/Content/images/svg/accomodationType-shadow.svg),rgba(172,217,247,.6); background-size: auto 21px; background-repeat: no-repeat; background-position: 5px 5px; }	
.cs-destination-beach::before { content: ""; position: absolute; width: 37px; height: 34px; border: 1px solid #98cef2; left: -1px; top: -1px; overflow: hidden; background: url(/Content/images/beach.png),rgba(172,217,247,.6); background-size: auto 21px; background-repeat: no-repeat; background-position: 5px 5px; }
.cs-destination-restaurant::before { content: ""; position: absolute; width: 37px; height: 34px; border: 1px solid #98cef2; left: -1px; top: -1px; overflow: hidden; background: url(/Content/images/restaurant.png),rgba(172,217,247,.6); background-size: auto 21px; background-repeat: no-repeat; background-position: 5px 5px; }	


/* 28/10/2019 Book Now modal box */
.cs-clicker { outline:none; cursor:pointer; position:relative;}
.cs-hiddendiv{ display:none; }
.cs-clicker:focus + .cs-hiddendiv{ display:block; }
.row-inner ul li.cs-no-dates-error { font-size: 1.8rem; padding-left: 30px;}
.cs-clicker h3 { padding: 16px; border: 1px solid #789145; background-color: #99b267; color: #fff; }
.cs-clicker h3:after { position: absolute; font-family: 'FontAwesome'; font-size: 34px; content: "\f107"; right: 16px; top: calc(50% - 19px)}
.cs-noindent-xxs { margin-left: 20px; }
.cs-booking-dates p {margin-bottom: 6px;}

/* Specially for rooms of VLM hotels, see Prijevod NoResultsService */
span.std-msg {} /* standard message, default */
span.enq-msg { display: none;} /* hide everywhere by default, will inline show for units with enquiry button only */

/* 04/12/2019 Room.aspx, when no prices for selected dates, make it bold but also hide word "Daily" when not in pricelist */
.book-restriction { font-weight: bold; text-transform: uppercase; }
span.book-restriction b.book-restriction-hide { display: none; }
b.book-restriction-hide { font-weight: normal; }

/* 05/12/2019 Hide price list, to make it visible add &price=price to URL for specific unit         */
/* This will use javascript to set class within the acc unit Opisi to display: block to be visible  */
#PricelistContainerDiv { display: none; }

/* 28/04/2020 and 30/09/2020 Prodajni popusti (selling discounts) lines below price table */
.prod-discounts { color: #eb670a; margin-top: -12px;}
.prod-discounts hr { margin-top: 8px; }
.prod-discounts ul li { margin: 6px 8px 0 -15px; padding-left: 32px; font-size: 13.5px; letter-spacing: -0.4px; }
.prod-discounts ul > li:before { top: 4px; font-family: 'FontAwesome'; content: '\f005\f005\f005'; color: #eb670a; font-size: 9px;}
.prod-discounts ul > li > span { background-color: #EE6E03; padding: 1px 10px 3px; color: #fff; display: inline-block; border-radius:3px; text-shadow: 1px 1px 2px #b05310; letter-spacing: normal; }
.prod-discounts .faw-3star:before { position: absolute; margin-top: 4px; font-family: 'FontAwesome'; content: "\f005\f005\f005"; font-size: 9px; font-style: normal; }


/***********************************************************************************************/
/*                          OVERRIDE OF AUREA MAIN CSS                                         */
/***********************************************************************************************/

/* A bit smaller "gototop" icon as it covers too much screen on the mobile */
#goToTop:after { font-size: 30px; }
#goToTop { bottom: 10px; right: 5px; width: 50px; height: 50px; }

/* remove text shadow from buttons in heading because it looks better */
.head-buttons .btn  { text-shadow: none; }

/* a bit of visual styling of logged-in user */
.head-username {  padding-top: 3px; text-shadow: none; } 

/* make cursor hand if hover over gallery arrows */
.gallery-control:hover, .carousel-control:hover { cursor: pointer; }

/* give weather button margin-top of 20px */
.btn-weather { margin-top: 10px; float: right; }

/* news listing heading */
.special-news h4 {margin-top: 3px;}
.special-news .news-line-title {text-decoration: underline;}

/* home page right column banners  */
.banner-blue .text { font-size: 12px; line-height: 16px; padding: 7px 3px; font-family: Arial; }
.banner-white .text { line-height: 16px; font-family: Arial;}
.availability { margin-bottom: 30px; }  /* A little bit bigger spacing between availability and Pricelist Table */

/* This class is only used on Destination pages. Move breadcrumbs on the right as we removed find accommodation link from there via "Visible=False" */
.breadcrumb { color: #069; float:right; margin-top: 10px; }

/* Move map title heading and show/hide accommodation button a bit lower on Location.aspx */
.map-title { margin-top: 30px; }
.swithxHolder { margin-top: 20px; }

/* testimonials and other in-context open/close adjustment to have bigger chevron */
.review-head:after { font-size: 30px; right: 5px; top: calc(50% - 22px); }

/* Fix panel-instructions for booking steps to make panel danger title orange with white letters as it is otherwise overriden by other classes */
.panel-instructions >.panel-body>.panel-danger>.panel-heading h3.panel-title { color: #fff; border-bottom: none; padding-bottom: 0px; margin-top: 0; margin-bottom: 0; }

/* Booking steps boxes change 24/01/2021 */
.step-box { background: #fff; color: #006699c2; }
.step-box.active { background: #e0f0fb; color: #069; }

/* Passenger List at RezervacijaOsnovno 24/01/2021 */
.cs-line-pass-number { font-weight: bold; padding-bottom: 16px; }
.cs-line-pass-label { padding-top: 6px; }
.cs-line-pass-form { margin-bottom: 6px; }
.cs-date-inline .form-control { display: inline-block; width: auto; vertical-align: middle; }
hr.cs-blue {border-top-color: #a8cade;}
h5.cs-all-passengers { margin-top: 20px; }

.location-name { margin-bottom: 16px; } /* Object heading, used on Location.aspx & Room.aspx */
.unit-box { margin-top: 20px; } /* Box that holds 'Back to acc. obj' link on Room.aspx */

/* Change colours of calendar to make scrolling more obvious, as it cannot be seen on the phone */
.kalendarTable .CalendarScroll .scrollLeft, .kalendarTable .CalendarScroll .scrollRight { height: 56px; background: #0E7BB1; }
.kalendarTable .CalendarScroll .scrollLeft:hover, .kalendarTable .CalendarScroll .scrollRight:hover { background: #85B9DD; }
.kalendarTable .CalendarScroll .scrollLeft:before, .kalendarTable .CalendarScroll .scrollRight:before { color: #fff; }

/* Change modal header to be more as per design. Change modal footer to center X Close button otherwise it is hidden by big round up-arrow */
.modal-header {background-color: #006699;}
.modal-header h4 { color: #fff;}
.modal-header .close { color: #fff; opacity: 1; filter: alpha(opacity=99); font-size: 30px; margin-top: -5px }
.modal-footer .close {float: left; text-align: center;}
.modal-content {border: none;}

.table-pricelist>thead>tr>th, .table-pricelist>tbody>tr>th,
.table-pricelist>tfoot>tr>th, .table-pricelist>thead>tr>td, 
.table-pricelist>tbody>tr>td, .table-pricelist>tfoot>tr>td { padding: 2px 6px; }

/* Style 'What is CVV' as a link */
label > span.js-modal { text-decoration: underline; cursor: pointer; }

/* Adjustment of the orange "discount" overlay on Special Offers on Home Page */
.white-box .img-box .details::before { top: 11px; left: 10px; }
.white-box .img-box .details { padding: 8px 10px 8px 22px; }

/* Used on Restaurants page */
.CSnoBullet { padding-left: 0px!important;}

.subota { background-color: #e5eff8; }
	
/* h1 and h2 within open/close, adjust bottom margin */
.review-head h1.review-title { margin-bottom: 6px; }
.review-head h2.review-title { margin-bottom: 6px; }

.special-news { padding: 15px 0 }
.col-no-left-padding { padding-left: 0; }


/* Map hide/show formatting */
.cs-map-section { border-bottom: 1px solid #dcdcdc; padding-bottom: 16px; border-top: 1px solid #dcdcdc; margin-top: 20px; }	
.btn-map:after { font-family: 'FontAwesome'; font-size: 32px; content: "\f107"; position: absolute; top: -6px; right: 6px; }
.btn-map { padding-right: 32px; }


/* Underline accommodation unit links  on Object/Rooms page, but not for active unit */
a.roomLink { text-decoration: underline; }
a.roomLink:hover { color: #ee8209; }
a.roomLink.active { text-decoration: none; }
.room-line.active a { text-decoration: none; color: #10496b; }
h1.room-name { margin-top: 26px; } /* Accommodation Unit heading */
h1.location-name { line-height: 1.2; } /* Object heading on Location.aspx */

/* 03/11/2019 List smjestajnih jedinica na Location.aspx & Room.aspx */
.roomLink:before {
    font-size: 12px;
    position: absolute;
    left: 10px;
    background-color: #fff;
    color: #0d74a1; 
    border-radius: 3px;
	border: 1px solid #0d74a1; 
    padding: 2px 10px;
}

.roomLink { padding-left: 46px; }
/* accommodation unit, active line */
.room-line.active { background: #98cef2; }
h2.location-name a { text-decoration: underline; }

.panel-offer .error { padding: 10px; }
.panel-offer .error ul { margin-bottom: 0; }
.btn-inquiry {padding: 12px; margin-top: 10px;}



/* --------------------------------------------------------------- */
/*                 MEDIA QUERIES                                   */
/* --------------------------------------------------------------- */

@media screen and (min-width: 1170px) {
/* LG */

.page-header .head-logo .head-logo-text { font-size: 14px; } /* reduce by 1px otherwise DE and HU strapline drops down */

} /*End of media queries for desktop */

/* ************ XS SM MD *************************** */
@media screen and (max-width: 1169px) {

   /* reduce by 1px otherwise DE and HU strapline drops down */
   .page-header .head-logo  .head-logo-text { font-size: 14px; }

   /* Reduce padding and font size on booking steps */
   .step-box .step-name { padding: 12px 2px 12px 10px; font-size: 13px;}

  /* selling discounts, hide the three stars at the end of discount line when not on large screen, otherwise too busy with stars */    
    .prod-discounts .faw-3star:before { display: none; }	   
} 

/* ********** MD & LG size ***************************** */
@media screen and (min-width: 970px) {
   /* reduce top/bottom margin when acc. units are one liners on search results */
   .room-separator { margin: 0; } 

} /*End of media queries for desktop and tablet landscape */

/* ********** MD size only ***************************** */
@media screen and (min-width: 970px) and (max-width: 1169px) {
   /* smaller spacing in MD nav so that we can fit "Home" link on EN/DE */
   .nav > li > a { padding-left: 5px; padding-right: 5px; letter-spacing: -0.6px; }
   .nav > li:first-child > a {padding-left: 0;}
   .nav > li:last-child > a {padding-right: 0;}
   
   .sold-out { top: 70px; left: 70px; font-size: 20px; }
   .putovanja-prosla .sold-out { font-size: 16px; }
   
}

/* ************ SM MD LG *************************** */
@media screen and (min-width: 750px) {

   /* not visible on sm/md/lg */
   .hidden-sm-md-lg { display: none!important; }
   
   /* up-arrow for closing section not visible on sm/md/lg */
   .review-head.cs-noV.active::after { display: none; }
   
} 

/* ********** SM size only ***************************** */
@media screen and (min-width: 750px) and (max-width: 969px) {

 /* Push language box to the right */
    .language-box { float: right; width: 45px; margin-top: 14px; margin-right: 5px; margin-left: 10px; }
    .head-buttons ul.dropdown-menu { margin-left: -25px;}
    .head-user-data {width: 390px;} 
 
}


/* ************** XS & SM ************************* */
@media screen and (max-width: 969px) {

 .CSyouTube {margin-left:0px; margin-right:0px} /* Youtube sm and xs goes full width */
  
 .sold-out { top: calc(100% / 3); left: calc(100% / 4); font-size: 26px; }
 .putovanja-prosla .sold-out { font-size: 18px; }

  /* Booking steps, down arrow for open/close on Mobile and Tablet Portrait */
  .panel-instructions .panel-body h6.js-toggle-trigger-small:after {
    position: absolute;
    font-family: 'FontAwesome';
    font-size: 18px;
    content: "\f107";
    right: 0px;
    top: calc(50% - 10px);
   }

/* Add padding on the right so that we can see the little arrow pointing down  */
  h4.roomsLinks.js-toggle-trigger-small { padding-right: 30px;}
  .roomsLinks {padding-left: 0px;}
  .roomsLinks::after { right: 6px; }

  /* Add two pixels pading to search results room list > to align with the row below */
  .row-unitlist > div.second:before { padding-right: 2px; } 

  /* Burger colouring adjustment to be dark blue */
  .navbar-collapse { background: #006699; }
  .burger-menu.active { background-image: linear-gradient(to bottom,#006699 0%,#006699 80%) }
  .navbar-default .navbar-nav > li > a { color: #fff; text-shadow: unset; }
  .navbar-nav > li > a.nav-link.active { color: #ebc324; }
  .nav > li.nav-subitem.active > a:hover, .nav > li.nav-subitem.active > a { color: #ebc324; }
  .nav > li.nav-subitem.active > a::before { color: #ebc324;}
  .nav > li.nav-subitem > a { color: #ddd; }
  .nav > li.nav-subitem > a::before { color: #ddd; }

	
  /* Unset pannel box min height when panel boxes are in single column - used on putovanja page */
  .cs-min-height-400, .cs-min-height-425, .cs-min-height-450, .cs-min-height-475, .cs-min-height-500, .cs-min-height-525, .cs-min-height-550,
  .cs-min-height-575, .cs-min-height-600, .cs-min-height-625, .cs-min-height-650, .cs-min-height-675, .cs-min-height-700, .cs-min-height-725, 
  .cs-min-height-750, .cs-min-height-775, .cs-min-height-800, .cs-min-height-825, .cs-min-height-850, .cs-min-height-875, .cs-min-height-900
	{ min-height: unset;}
	  
  /* single box grid on putovanja page */
  .putovanja { grid-template-columns: 1fr; }

  /* disable br when on sm  <br class="cs-nobr"> */    
    .cs-nobr { display: none;}
	  
} /*End of media queries XS&SM */


/* ************** XS ************************* */
@media screen and (max-width: 749px) {

/* Add below class changes for mobile version */

   h1.CSheadingInline, h2.CSheadingInline, h3.CSheadingInline, h4.CSheadingInline, h5.CSheadingInline, h6.CSheadingInline   { margin-top: 14px!important; } 
   .CSmarginTopMobile, .cs-margin-top-mobile {margin-top: 10px!important; }
   .CSmarginTopMobileBig, .cs-margin-top-mobile-big {margin-top: 16px!important; }
   hr.CSxsSep { border-color: #dcdcdc;  margin-top: 20px; margin-bottom: 20px; } /* hr separator visible only on mobile */
   hr.CSsimpleOpenClose { border-color: #dcdcdc; margin-bottom: 1px; } /* hr separator visible only on mobile */

  /* Make pricelist table wrap otherwise we have problem with first column being too wide */
    .table-pricelist > thead > tr > th, .table-pricelist > tbody > tr > th, 
    .table-pricelist > tfoot > tr > th, .table-pricelist > thead > tr > td, 
    .table-pricelist > tbody > tr > td, .table-pricelist > tfoot > tr > td { white-space: normal;}

  /* ...but because it wraps, force min width to 200px */
    .table-pricelist .firstCol { min-width: 160px; }

  /* reduced padding so that more text fits and more of the photo shows */
    .white-box .img-box .discount { padding: 0 8px 0 3px; letter-spacing: -1px; width: initial; }
    .rooms-list { margin-top: 0px; } /* Remove margin above "Accommodation Units" on Mob because it creates empty space right now */

  /* A bit smaller headings when on mobile phone, looks better and fits more text... */
    h1, .h1 { margin-bottom: 25px; letter-spacing: -1px; font-size: 20px; }
    h2, .h2 { margin-bottom: 20px; letter-spacing: -1px; font-size: 18px; }
    h2.location-name { font-size: 20px; letter-spacing: -1px; margin-top: 10px; margin-bottom: 10px; line-height: 1.1 }
    h1.room-name { font-size: 18px; letter-spacing: -1px; }
    h4, .h4 { letter-spacing: -1px; }

    .row-search { padding-bottom: 0; margin-bottom: 25px; }

  /* Booking steps, down arrow for open/close on Mobile and Tablet Portrait */
    .panel-instructions .panel-body h6:after { position: absolute; font-family: 'FontAwesome'; font-size: 18px; content: "\f107"; right: 0px; top: calc(50% - 10px); }

  /* Find accommodation and list of acc. units, down arrow for open/close  */
    .panel-submenu .panel-heading:after, .panel-search .panel-heading:after { font-size: 30px; top: 2px; font-weight: bold; }
    .roomsLinks:after { font-size: 30px; top: calc(50% - 16px); }
    .collapse-roomsTrigger:after, .collapse-descriptionTrigger:after { font-size: 30px; top: -3px; }

  /* SEARCH RESULTS ON MOBILE - adjustment */
  /* Stickers a bit smaller on mobile */
    .row-search .sticker-holder { width: 60px; max-height: 60px; margin-top: -10px; }
    .familyfriendly, .offer, .offer76, .pets, .lastminute, .video, .staysafe { width: 60px; background-size: 60px; margin-bottom: 0; }

   /* A bit stronger border when on mobile to see better one object */
    .row-search { border-color: #d7d7d7; } 
    .collapse-roomsTrigger, .collapse-descriptionTrigger { border-top: 1px solid #d7d7d7; }
    .row-unitlist { border-top: 1px solid #d7d7d7; }

  /* col-xs adds 15px margin left and right. Remove it on mobile for row-search to get bigger photo */
    .row-search { margin-left: -15px; margin-right: -15px; border-left: none; border-right: none; }
  /* also remove img border on mobile and adjust the "more details" sticker on bottom right */
    .row-search img.img-border { border: none; padding: 0px; }
    .img-search .call-to-action { bottom: 0px; right: 0px; }

  /* Reduce panel-search bottom, currently has big gap at the end of object */
    div.panel.panel-search { margin-bottom: 6px; }
	div.carousel-holder {margin-top: 8px;}
	
  /* mobile gallery on Location.aspx */
    #xsGallery {margin-left: -15px; margin-right: -15px;}
    .slide .gallery-item-link {border: none;}
    .gallery-control.right, .carousel-control.right { right: 16px; }
    .gallery-control.left, .carousel-control.left  { left: 16px; }
    .gallery-control, .carousel-control { top: 2%; height: 92%; width: 40%; background: none; font-size: 50px; color: #eee; overflow: hidden; }
    .gallery-control.right::before, .carousel-control.right::before, .gallery-control.left::before, .carousel-control.left::before { top: calc(50% - 40px);}
    .gallery-control:hover, .carousel-control:hover { color: #eee; }

    .gallery { margin-top: 0; } /* Location.aspx, this is empty div on xs but has margin, remove margin top  */

	#roomsLinksInRoom { padding-bottom: 20px; border-bottom: 1px solid #e2e2e2; margin: 0 0 20px 0; } /* if rooms opened on xs, add margin bottom */
    .room-line { margin-left: -15px; } /* need this because of setting left margin to zero above in #roomLinksInRoom */

    h4.roomsLinks.js-toggle-trigger-small.active { border-bottom: none; } /* no border bottom if units list opened */

  /* slider on pages inner */
    .CSslider-photos { border: none; padding: 0;}
    ul.CSbjqs-controls.v-centered li.CSbjqs-prev a { left: -10px; }
    ul.CSbjqs-controls.v-centered li.CSbjqs-next a { right: -10px; }

  /* main slider */
    .carousel-holder { border: none; 	padding: 0; }

  /* Stretch anything on the mobile */  
    .stretch-xs { width: 100%; }
  
  /* Do not display destination breadcrumbs on the mobile */
    .breadcrumb {display:none;} 

  /* Add margin to myreservation box on MyAccount.aspx when on mobile */
    #gotomyres { margin-top: 20px; }

  /* Remove MyReservation button on mobile and push language button right. Adjust the rest */
    .btn-logout span.btn-text { display: none; }
    .btn-reservations { display: none; }
    .head-user-data { width: calc(100% - 45px); }
    .head-user-data .btn { width: 30px; padding-left: 30px; }
    .language-box { float: right; margin-right: 5px; }
    .head-buttons ul.dropdown-menu { margin-left: -25px;}
	
    .putovanja-main-col { padding-left:0; padding-right:0; }
	.putovanja-image img {width:100%;}
	
	/* news listing adjustment */
	.special-news { margin-top: 30px;}
    .special-news h4 {margin-top: 12px;}
	
    .table-responsive > .table.xs-wrap > thead > tr > th,
    .table-responsive > .table.xs-wrap > tbody > tr > th, 
    .table-responsive > .table.xs-wrap > tfoot > tr > th, 
    .table-responsive > .table.xs-wrap > thead > tr > td, 
    .table-responsive > .table.xs-wrap > tbody > tr > td, 
    .table-responsive > .table.xs-wrap > tfoot > tr > td {
        white-space: normal;
	    text-align: left;
    }

    .col-no-left-padding { padding-left: 15px; }
    .cs-nobr { display: none;} /* disable br when on xs  <br class="cs-nobr"> */ 
	.panel-instructions { margin-bottom: 7px; }  /* Fix spacing on booking step instructions 24/01/2021 */
  
	
} /*END of media queries on XS (mobile) */



/* ************** XXS ************************* */
@media (max-width: 479px) {
/* Media queries for mobile portrait only. Uses xxs suffix. */
/* We go up to 479 since iPhone4 is 480 width when in landscape. */
/* Smaller phones (if any) will not be good neither in landscape so in smaller phones even landscape will be blocked */

/* Hide only on small mobiles */	
  .hidden-xxs { display: none !important; }

/* visible on xxs 29/05/2018 */
  .visible-xxs {display: block !important; }  
  
/* Stretch the image on mobile portraits to full screen width */  
  img.img-stretch-xxs {	width: 100%; }

/* Stretch anything on the mobile */  
  .stretch-xxs { width: 100%; }

/* Make h2 a bit smaller */
  h2, .h2 { margin-bottom: 20px; letter-spacing: -1px; font-size: 17px; }
  
  .sold-out { top: calc(100% / 3); left: calc(100% / 4); font-size: 16px; }  
  .putovanja-prosla .sold-out { top: calc(100% / 3); left: calc(100% / 4); font-size: 14px; }
  .last-places { top: 8px; left: 8px;}

  .cs-map-section .map-title { float: unset; }
  .cs-map-section .btn-map { width: 100%;}
  
  .cs-clicker h3 { letter-spacing: -1px;}
  .row-inner ul li.cs-no-dates-error { letter-spacing: -1px; }

  .cs-noindent-xxs {margin-left: 0;}

  
} /*End of media queries on XXS (mobile portrait) */

/* *************************************** */

/* ************** OTHER ************************* */
/* Do not hide logout button when mobile less than 370px */
@media screen and (max-width: 370px) {
    .btn-logout { display: unset; }
}