/* ================================================================= */
/* Custom css for Jadranka campsites by Consoft: jadranka-custom.css */
/* The same for ALL 5 domains                                        */
/*                                                                   */
/* Version 29-04-2025                                                */
/*                                                                   */
/* Old web clases mostly commented out                               */
/* WEB 2021 classes start around line 570. Search for 'NEW WEB'      */
/*                                                                   */
/* Jadranka WEB 2021, breakpoints                                    */
/*                                                                   */
/* $mob-xs  (       -  420px)  CSS: mob-xs-c 1-24  (in custom css)   */
/* $mob-xl  ( 421px -  767px)                                        */
/* $mob     (       -  767px)  CSS: mob-c 1-24                       */
/* $tbl     ( 768px -  959px)  CSS: tablet-c 1-24                    */
/* $dsk:    ( 960px -       )  CSS: c 1-24                           */
/* $dsk-xs: ( 960px - 1229px)                                        */
/* $dsk-xl: (1230px -       )                                        */
/*                                                                   */
/* ================================================================= */

.site-main h1, .site-main  h2 {font-weight: 500;}
.site-main .content-button {font-weight: 500;}

.cs-text-center { text-align: center!important;}
.cs-center {margin-left: auto!important; margin-right: auto!important;}
.cs-img-stretch { width: 100%; }

.cs-intro-narrow {
    max-width: 730px;
    margin: 0 auto;
    text-align: center;
}

.cs-link-underline { text-decoration: underline; }
.cs-semi-bold { font-weight: 500; }

/* -------------------------------------------------------------------------- */
/* Panorama wrapper  (background image)                                       */
/*
.panoramaWrapper { position: relative; background-image: url('/EasyEdit/UserFiles/Panorama/panorama-3d.jpg'); background-repeat: no-repeat; height: 500px; overflow: hidden; }
.panoramaWrapper object, .panoramaWrapper embed,  { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/* -------------------------------------------------------------------------- */
/* virtual tours - main page                                                  */
.virtual-tour-wrapper { position: relative; overflow: hidden; width: 1150px; }
.virtual-tour-wrapper  object, .panoramaWrapper embed  { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* -------------------------------------------------------------------------- */
/* virtual tours WEM css override to put the CLOSE button at the top          */
/*.cbox-panorama #cboxClose {top: 0;}
.cbox-panorama #cboxClose:after {content: "X"; font-size:14px; margin-left:8px;}
.cbox-panorama #cboxLoadedContent {height: 100% !important;}

/* -------------------------------------------------------------------------- */
/* Price table - tablica za cijene                                                          */
.tablicaCjenik { border-width: 0px; border-style: none; border-collapse: collapse; }
.tablicaCjenik th { vertical-align: middle; border: 1px solid #ffffff; font-family: arial; font-weight: bold; color: #ffffff; padding: 8px 3px; line-height: 16px; border-bottom: none; }
.tablicaCjenik th.bkColorGreen { background-color: #78BC34; }
.tablicaCjenik th.bkColorRed { background-color: #c00000; }
.tablicaCjenik th.bkColorBlue { background-color: #548dd4; }
.tablicaCjenik th.bkColorOrange { background-color: #e36c09; }
.tablicaCjenik tr { border-bottom: 1px solid #dfdfdf; }
.tablicaCjenik tr.colorGreen { color: #76923c; }	
.tablicaCjenik tr.colorRed { color: #c00000; }	
.tablicaCjenik tr.colorBlue { color: #548dd4; }	
.tablicaCjenik tr.colorOrange { color: #e36c09; }	
.tablicaCjenik td { padding: 6px 2px; vertical-align: middle; font-family: arial; }
.tablicaCjenik td.leftCol, th.leftCol { padding-left: 6px; text-align: left; line-height: 16px; } 
.tablicaCjenik td.middleCol, th.middleCol { text-align: center; }	

/* -------------------------------------------------------------------------- */
/* Price calc buttons                                                         */
.buttonCalcOrange { float: left; overflow: hidden;  padding: 1px; }
.buttonCalcOrange a { display: block;  width: 170px;  height: 37px; overflow: hidden; line-height: 38px; font-size: 12px; color: #fff!important; font-weight: bold; text-decoration: none; background: url(/EasyEdit/UserFiles/Gumbi/button-calc-orange.png) no-repeat 0 0; background-size: 146px 37px; text-align: center; padding-right:10px; }
.buttonCalcOrange a:hover { background: url(/EasyEdit/UserFiles/Gumbi/button-calc-orange-hover.png) no-repeat 0 0;  background-size: 146px 37px; color: #fff!important; }
.buttonCalcGreen { float: left; overflow: hidden;  padding: 1px; }
.buttonCalcGreen a { display: block;  width: 170px;  height: 37px; overflow: hidden; line-height: 38px; font-size: 12px; color: #fff!important; font-weight: bold; text-decoration: none; background: url(/EasyEdit/UserFiles/Gumbi/button-calc-green.png) no-repeat 0 0; background-size: 146px 37px; text-align: center; padding-right:10px; }
.buttonCalcGreen a:hover { background: url(/EasyEdit/UserFiles/Gumbi/button-calc-green-hover.png) no-repeat 0 0;  background-size: 146px 37px; color: #fff!important; }

/* -------------------------------------------------------------------------- */
/* Clearfix, float right, etc. Used for price calc buttons and elsewhere                    */
div.clearBoth, .cs-clear-both { clear: both; }
.fltRight, .cs-float-right { float: right; }
.fltLeft, .cs-float-left { float: left; }


/* -------------------------------------------------------------------------- */
/* Two columns                                                                */

/* OLD WAY */
.cs-one-row { margin-top: 20px; }
.cs-one-row:after { content: ""; display: table; clear: both; }

.cs-half-half {width: 48%; margin-right:2%; float: left; }
.cs-half-half:last-child { margin-left: 2%; margin-right: 0;}
.cs-half-half img { width: 100%; display: block; }
.cs-half-half p { margin-top: 6px; }

.cs-first-half, .cs-second-half {width: 48%; margin-right:2%; float: left; }
.cs-second-half { margin-left: 2%; margin-right: 0;}
.cs-first-half img, .cs-second-half img { width: 100%; display: block; }
.cs-first-half p, .cs-second-half p { margin-top: 6px; }

/* Spacing between rows, without the line */

hr.cs-invisible-divider { background: #fff; color: #fff; }

/* ----------------------------------------------------------------------------------------------- */
/*  Half/half, can have text over image */
/*  cs-half-left must be used in conjuction with other classes to work, example:
       class="cs-half-left content col c12 tablet-c12 mob-c24 typ cf"
    And the image within the half part must have class cs-img-stretch
	For the text over image use div with cs-txt-over-img below the image 
*/

.cs-row {
    width: 100%;
    display: block;
	margin-left: auto;
	margin-right: auto;
}
.cs-row:before, .cs-row:after {
    content: "";
    display: table;
	clear: both;
}

.cs-half-left, .cs-half-right { position: relative; }
.cs-half-right { float: right; }

.cs-txt-over-img {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translate(0%, -50%);
    padding: 15px;
    color: #fff;
	text-shadow: 0 2px 2px #000;
}

.cs-txt-over-img h1, .cs-txt-over-img h2, .cs-txt-over-img h3, .cs-txt-over-img p {
    color: #fff;
	text-shadow: 0 2px 2px #000;
}

.cs-txt-over-img-bottom-right {
    position: absolute;
    top: 80%;
    right: 10%;
    transform: translate(0%, -50%);
    padding: 15px;
    color: #fff;
	text-shadow: 0 2px 2px #000;
}

.cs-txt-over-img-bottom-left {
    position: absolute;
    top: 80%;
    left: 2%;
    transform: translate(0%, -50%);
    padding: 15px;
    color: #fff;
	text-shadow: 0 2px 2px #000;
}

/* -------------------------------------------------------------------------- */
/* Darken image on hover                                                      */
 
.cs-hover-img { display: block; margin: 0; padding: 0; border: 0; cursor: pointer; background-color: white; }
/* .cs-hover-img:hover .cs-img-wrap { background-color: black; } */
.cs-hover-img:hover .cs-img-wrap { background-color: none; } 
.cs-hover-img:hover img { opacity: 0.8; }

/* -------------------------------------------------------------------------- */
/* Special Offers grid using <div> instead of table                           */
/*
.specOffersGridCol1 { width: 25%; float: left; text-align: center; padding: 0px 10px; }
.specOffersGridCol2 { width: 39%; float: left; padding-right: 5px; }
.specOffersGridCol3 { width: 36%; float: left; padding-right: 10px;}
.specOffersGridRowLight:after, .specOffersGridRowDark:after { content: ""; display: table; clear: both; }
.specOffersGridRowLight, .specOffersGridRowDark { padding: 20px 0px 14px 0px; border-top: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5; }
.specOffersGridRowLight { background-color: #ffffff; }
.specOffersGridRowDark { background-color: #F8F8F8; }

.specOffersGridCol2 p.naslov { color: #7f7f7f; font-size: 16px; font-weight: bold; margin-top: 0px; }
.specOffersGridCol3 p { color: #e36c09; font-size: 16px; font-weight: bold; margin-top: 0px; margin-bottom: 10px; text-align: right; }
.specOffersGridCol3 p.maliFont { font-size: 11px; line-height: 12px; font-weight: normal; }

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

/* remove underline from special offers boxes on the main domain */
.site-main .catalog-special-offers a { text-decoration: none; }


/* Blue and Orange and other buttons                                                    */
.cs-btn { background: none repeat scroll 0px 0px; border: 1px solid #CFCFCF; border-bottom: 1px solid #767676; border-radius: 4px 4px 4px 4px; cursor: pointer; display: inline-block; margin: 2px; outline: 0px none; padding: 3px 10px; text-decoration: none; transition: all 0.3s ease 0s; 	font-family: Arial,Helvetica,sans-serif; font-size: 14px; }
a.cs-btnOrange:hover { color: #ffffff; background-color: #C66300; }
a.cs-btnBlue:hover { color: #ffffff; background-color: #175BF5; }
a.cs-btnBlue { color: #ffffff; background-color:  #4379E6; border-top: #4379E6; margin-bottom: 10px!important; }
a.cs-btnOrange { color: #ffffff; background-color:  #E87E14; border-top: #E87E14; }
a.cs-btnGrey  { color: #666666; border-color: #bbbbbb; box-shadow: 0 1px 1px #1f242b; background: linear-gradient(to bottom, #ffffff 0%, #bbbbbb 100%) repeat scroll 0% 0% transparent; }

/*  Loyalty buttons - large*/
.cs-btn-loyalty {
    font-size: 18px;
	padding: 20px 40px;
	background-color: #0950AB;
  }

  .cs-btn-loyalty:hover {
	background-color: #3175CB;
  }

/* turneo excursions widget 2025-04-29 */
    .cs-widget-block { margin-top: 40px; }
    .cs-article h2 { margin-bottom: 0; }

 
/* buttons, existed in the old site stylesheet and used in JDR content */
span.btn a, span.btn-2 a, span.btn-3 a, span.btn-4 a   {
    display: inline-block;
    font-size: 16px;
    color: #3f7ac4;
    text-decoration: none;
    padding: 10px 20px;
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
    border-color: transparent;
}

/* use to center add this class to center above buttons */
span.cs-btn-centered {
    display: table;
    margin: 0 auto;
}


.btn, .btn-2, .btn-3, .btn-4 {
	display: inline-block;
}	

span.btn-2 a  {
    background-color: #3588f3;
    color: #fff;
}

.btn a, .btn-2 a, .btn-3 a, .btn-4 a {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.site-cikat .btn-3 a { 
	background-color: #69a809;
    color: #fff;
}

.site-cikat .btn-4 a { 
	background-color: #ff7e00;
    color: #fff;
}

.site-slatina .btn-3 a, .site-slatina .btn-4 a  { color: #fff; }




/* -------------------------------------------------------------------------- */
/* Colours of four campsites for headings/text etc                            */

.slatinaGreen { color: #76923c; }
.baldarinBlue { color: #4f81bd; }
.bijarRed { color: #c00000; }
.cikatOrange { color: #e36c09; }


hr.slatinaGreen { background: none repeat scroll 0% 0% #76923c; }
hr.baldarinBlue { background: none repeat scroll 0% 0% #4f81bd; }
hr.bijarRed { background: none repeat scroll 0% 0% #c00000; }
hr.cikatOrange { background: none repeat scroll 0% 0% #e36c09; }

.border-slatina {border: 1px solid #76923c;}
.border-baldarin {border: 1px solid #1f497d;} 
.border-bijar {border: 1px solid #c00000;}
.border-cikat {border: 1px solid #e36c09;}
.border-camps-cres-losinj {border: 1px solid #3976c3;}

/* -------------------------------------------------------------------------- */
/* 3 divs jedan do drugog za HappyFerien kontakt                              */
/*
div.happyFerien { float: left; text-align: center; display: inline; height: 250px; width: 220px; background-color: #f3f3f3; border: 2px solid #ffffff; padding-top: 30px; }

/* -------------------------------------------------------------------------- */
/* divovi jedan do drugog bez specificirane sirine                            */
/*
div.sideBySide { float: left; display: inline; margin-right: 10px; }

/* -------------------------------------------------------------------------- */
/*  Override: Makni fading background sa glavnih slika. Ovo se moze komentirat ako se hoce vratiti background na glavnim slikama */
/*
.slider-image-mask { background: none; }

/* -------------------------------------------------------------------------- */
/* Tablica za air & sea temperatures - smanji padding                         */
/*
.tablicaTemperatures td { padding: 10px 6px; text-align: center; }

/* -------------------------------------------------------------------------- */
/* Adjustment/override za reljefni side meni selected opciju                  */
/*
.sidemenu .on, 
.sidemenu .on:hover, 
.sidemenu .open, 
.sidemenu .open:hover { 
    border-color: #aaaaaa !important; 
    background: linear-gradient(to bottom, #ffffff 0%, #aaaaaa 100%) repeat scroll 0% 0% transparent !important; 
    box-shadow: 0 1px 1px #1f242b !important;	
}

/* -------------------------------------------------------------------------- */
/* Dog table for Cikat page                                                   */
/*
.dog-table-wrapper { max-width: 540px; margin: 0 auto;}
.dog-table-wrapper table { width: 540px; text-align: center;}
.dog-table-wrapper table td {text-align: center; vertical-align: top; width: 33%; }
.dog-table-wrapper table td p {text-align: center; vertical-align: top; margin-top: 8px; font-size: 14px;}
.dog-table-wrapper table td img { width: 128px;}


/* ------------- Legend icons for pitch page -----------------------------------*/
.camp-map-equipment ul.pitch-legend  { list-style-type: none; }
.camp-map-equipment ul.pitch-legend li {background-repeat: no-repeat; margin: 0 0 5px; padding:6px 0 0 40px; min-height: 40px; background-position-y: 6px;}

.legend-accessible-parcelled-pitch { background: url(/EasyEdit/UserFiles/LegendImages/accesible-parcelled-pitch.png); }
.legend-air-condition { background: url(/EasyEdit/UserFiles/LegendImages/air-condition.png); }
.legend-animation-point { background: url(/EasyEdit/UserFiles/LegendImages/animation-point.png); }
.legend-baby-bath-area { background: url(/EasyEdit/UserFiles/LegendImages/baby-bath-area.png); }
.legend-baby-room { background: url(/EasyEdit/UserFiles/LegendImages/baby-room.png); }
.legend-bakery { background: url(/EasyEdit/UserFiles/LegendImages/bakery.png); }
.legend-barbecue-area { background: url(/EasyEdit/UserFiles/LegendImages/barbecue-area.png); }
.legend-basketball { background: url(/EasyEdit/UserFiles/LegendImages/basketball.png); }
.legend-beach-volleyball { background: url(/EasyEdit/UserFiles/LegendImages/beach-volleyball.png); }
.legend-bicycles-for-rent { background: url(/EasyEdit/UserFiles/LegendImages/bicycles-for-rent.png); }
.legend-blue-flag { background: url(/EasyEdit/UserFiles/LegendImages/blue-flag.png); }
.legend-boat-slip { background: url(/EasyEdit/UserFiles/LegendImages/boat-slip.png); }
.legend-boats-depo { background: url(/EasyEdit/UserFiles/LegendImages/boats-depo.png); }
.legend-boat-mooring { background: url(/EasyEdit/UserFiles/LegendImages/moorings.png); }
.legend-caffe-bar { background: url(/EasyEdit/UserFiles/LegendImages/caffe-bar.png); }
.legend-camper-service { background: url(/EasyEdit/UserFiles/LegendImages/camper-service.png); }
.legend-camper-winter-depo { background: url(/EasyEdit/UserFiles/LegendImages/campers-parking-lot-winter-depo.png); }
.legend-car-park { background: url(/EasyEdit/UserFiles/LegendImages/parking-lot.png); }
.legend-car-washing-area { background: url(/EasyEdit/UserFiles/LegendImages/car-washing-area.png); }
.legend-caravans-for-rent { background: url(/EasyEdit/UserFiles/LegendImages/caravans-for-rent.png); }
.legend-cash-machine { background: url(/EasyEdit/UserFiles/LegendImages/cash-machine.png); }
.legend-chemical-toilet { background: url(/EasyEdit/UserFiles/LegendImages/chemical-toilette.png); }
.legend-childrens-playground { background: url(/EasyEdit/UserFiles/LegendImages/childrens-playground.png); }
.legend-childrens-toilet { background: url(/EasyEdit/UserFiles/LegendImages/childrens-toilette.png); }
.legend-currency-exchange { background: url(/EasyEdit/UserFiles/LegendImages/currency-exchange.png); }
.legend-disabled-toilet { background: url(/EasyEdit/UserFiles/LegendImages/toilette-for-wheelchair-users.png); }
.legend-dryer { background: url(/EasyEdit/UserFiles/LegendImages/dryer.png); }
.legend-dishwashing-area { background: url(/EasyEdit/UserFiles/LegendImages/dishwashing-area.png); }
.legend-diving-centre { background: url(/EasyEdit/UserFiles/LegendImages/diving-centre.png); }
.legend-dog-area { background: url(/EasyEdit/UserFiles/LegendImages/dog-running-area-dog-beach.png); }
.legend-dog-beach { background: url(/EasyEdit/UserFiles/LegendImages/dog-beach.png); }
.legend-dog-shower { background: url(/EasyEdit/UserFiles/LegendImages/dog-shower.png); }
.legend-dog-walking-area { background: url(/EasyEdit/UserFiles/LegendImages/dog-walking-area.png); }
.legend-drainage { background: url(/EasyEdit/UserFiles/LegendImages/drainage.png); }
.legend-eco-zone { background: url(/EasyEdit/UserFiles/LegendImages/eco-zone.png); }
.legend-electricity-connection { background: url(/EasyEdit/UserFiles/LegendImages/electricity-connection.png); }
.legend-fast-food { background: url(/EasyEdit/UserFiles/LegendImages/fast-food.png); }
.legend-family-bathroom { background: url(/EasyEdit/UserFiles/LegendImages/family-bathroom.png); }
.legend-fire-extinguisher { background: url(/EasyEdit/UserFiles/LegendImages/fire-extinguisher.png); }
.legend-firefighting-equipment { background: url(/EasyEdit/UserFiles/LegendImages/firefighting-equipment.png); }
.legend-first-aid-kit { background: url(/EasyEdit/UserFiles/LegendImages/first-aid-kit.png); }
.legend-football { background: url(/EasyEdit/UserFiles/LegendImages/football.png); }
.legend-frigo-box { background: url(/EasyEdit/UserFiles/LegendImages/frigo-box.png); }
.legend-fruit-stand { background: url(/EasyEdit/UserFiles/LegendImages/fruit-stand.png); }
.legend-garbage-disposal { background: url(/EasyEdit/UserFiles/LegendImages/garbage-disposal.png); }
.legend-garbage-separation { background: url(/EasyEdit/UserFiles/LegendImages/garbage-separation.png); }
.legend-gas-filling-station { background: url(/EasyEdit/UserFiles/LegendImages/gas-filling-station.png); }
.legend-glamping-tents-for-rent { background: url(/EasyEdit/UserFiles/LegendImages/glamping-tents-for-rent.png); }
.legend-grocery-store { background: url(/EasyEdit/UserFiles/LegendImages/grocery-store.png); }
.legend-hidrant { background: url(/EasyEdit/UserFiles/LegendImages/hidrant.png); }
.legend-hydrant { background: url(/EasyEdit/UserFiles/LegendImages/hydrant.png); }
.legend-hand-wash { background: url(/EasyEdit/UserFiles/LegendImages/hand-wash.png); }
.legend-ice-maker { background: url(/EasyEdit/UserFiles/LegendImages/icemaker.png); }
.legend-ice-cream { background: url(/EasyEdit/UserFiles/LegendImages/ice-cream.png); }
.legend-information-point { background: url(/EasyEdit/UserFiles/LegendImages/informations.png); }
.legend-internet { background: url(/EasyEdit/UserFiles/LegendImages/internet-point.png); }
.legend-ironing-area { background: url(/EasyEdit/UserFiles/LegendImages/ironing-area.png); }
.legend-journal { background: url(/EasyEdit/UserFiles/LegendImages/journal.png); }
.legend-manual-dishwashing { background: url(/EasyEdit/UserFiles/LegendImages/dishwashing-area.png); }
.legend-massage { background: url(/EasyEdit/UserFiles/LegendImages/massage.png); }
.legend-mobile-homes-for-rent { background: url(/EasyEdit/UserFiles/LegendImages/mobile-homes-for-rent.png); }
.legend-no-camping { background: url(/EasyEdit/UserFiles/LegendImages/no-camping.png); }
.legend-non-plotted-pitch-with-electricity { background: url(/EasyEdit/UserFiles/LegendImages/non-plloted-pitch-with-electricity.png); }
.legend-phone { background: url(/EasyEdit/UserFiles/LegendImages/phone.png); }
.legend-reserved { background: url(/EasyEdit/UserFiles/LegendImages/reservations.png); }
.legend-restaurant { background: url(/EasyEdit/UserFiles/LegendImages/restaurant.png); }
.legend-toilet { background: url(/EasyEdit/UserFiles/LegendImages/sanitary-facility.png); }
.legend-sanitary-facility { background: url(/EasyEdit/UserFiles/LegendImages/sanitary-facility2.png); }
.legend-satellite-tv { background: url(/EasyEdit/UserFiles/LegendImages/sattelite-tv.png); }
.legend-showers { background: url(/EasyEdit/UserFiles/LegendImages/showers.png); }
.legend-shower { background: url(/EasyEdit/UserFiles/LegendImages/showers.png); }
.legend-table-tennis { background: url(/EasyEdit/UserFiles/LegendImages/table-tennis.png); }
.legend-tennis { background: url(/EasyEdit/UserFiles/LegendImages/tennis.png); }
.legend-tourist-ambulance { background: url(/EasyEdit/UserFiles/LegendImages/tourist-ambulance.png); }
.legend-trailers-depo { background: url(/EasyEdit/UserFiles/LegendImages/trailers-depo.png); }
.legend-washing-machine { background: url(/EasyEdit/UserFiles/LegendImages/washing-machine.png); }
.legend-warm-cold-water { background: url(/EasyEdit/UserFiles/LegendImages/warm-cold-water.png); }
.legend-water-connection { background: url(/EasyEdit/UserFiles/LegendImages/water-connection.png); }
.legend-access-for-the-disabled { background: url(/EasyEdit/UserFiles/LegendImages/access-for-the-disabled.png); }
.legend-boats-for-rent { background: url(/EasyEdit/UserFiles/LegendImages/boats-for-rent.png); }
.legend-fitness { background: url(/EasyEdit/UserFiles/LegendImages/fitness.png); }
.legend-sun-loungers-and-parasols-for-rent { background: url(/EasyEdit/UserFiles/LegendImages/sun-loungers-and-parasols-for-rent.png); }
.legend-forbidden-anchorage { background: url(/EasyEdit/UserFiles/LegendImages/forbidden-anchorage.png); }
.legend-vital-one-zone { background: url(/EasyEdit/UserFiles/LegendImages/Vital-one-zone.png); }
.legend-excursions { background: url(/EasyEdit/UserFiles/LegendImages/excursions.png); }
.legend-ice-cream { background: url(/EasyEdit/UserFiles/LegendImages/ice-cream.png); }
.legend-weather-station { background: url(/EasyEdit/UserFiles/LegendImages/weather-station.png); }
.legend-scuba-diving { background: url(/EasyEdit/UserFiles/LegendImages/scuba-diving.png); }
.legend-wi-fi-zone { background: url(/EasyEdit/UserFiles/LegendImages/wi-fi-zone.png); }
.legend-dog-parkour-park { background: url(/EasyEdit/UserFiles/LegendImages/dog-parkour-park.png); }


/* *************************************************************************** */
/*                             MEDIA QUERIES (OLD WEB)                         */
/* *************************************************************************** */

/* Large Desktop breakpoint                                                    */
@media screen and (min-width:1230px) {

    .cs-first-half {width: 48.3%; margin-right:1.7%; }
    .cs-second-half {width: 48.3%;  margin-left: 1.7%; margin-right: 0;}
    .cs-first-half img, .cs-second-half img { width: unset; max-width: unset; }

}

/* --------------------------------------------------------------------------- */
/* Only show on mobile                                                         */
@media screen and (min-width:768px) {
   .tablet-desktop-hide, .cs-tablet-desktop-hide { display: none!important; }
}

/* --------------------------------------------------------------------------- */
/* Show on mobile and tablet portrait, hide on desktop                         */
@media screen and (min-width:960px) {
   .desktop-hide, .cs-desktop-hide { display: none!important; }
}

/* --------------------------------------------------------------------------- */
/* Images right to the text - responsive, for viewport 768px (was 784) or more */
@media screen and (min-width: 768px) {
     .image-right-or-top {  float: right; margin-left: 14px; margin-bottom: 10px; }
     .image-left-or-top {  float: left; margin-right: 14px; margin-bottom: 10px; }
}

/* --------------------------------------------------------------------------- */
/* Image that moves centered on top - for viewport 767px (was 783) or less     */
@media screen and (max-width: 767px) {
    .image-right-or-top, .image-left-or-top  { float: none; margin-top: 20px; margin-bottom: 20px; margin-left: auto; margin-right: auto; display: block; }
}

/* --------------------------------------------------------------------------- */
/* Set larger margin bottom for images on pitches page                         */
/* when the image is still on the right (with was before set to 784px)         */
/* otherwise the price calculator does not wrap properly                       */
@media screen and (min-width:768px) {
    .cs-pitches-image { margin-bottom: 30px;}
}

/* --------------------------------------------------------------------------- */
/* Smaller h1 when on small screens                                            */
/*
@media screen and (max-width: 420px) {

    h1 { font-size: 26px; letter-spacing: -1px; }
    h2 { font-size: 22px; letter-spacing: -1px; }
    h3 { font-size: 20px; letter-spacing: -1px; }
    h4 { font-size: 19px; letter-spacing: -1px; }
	
}	

/* --------------------------------------------------------------------------- */
/* Two columns into one when on small mobile                                   */
@media screen and (max-width: 767px) {
    .cs-half-half, .cs-half-half:last-child {width: 100%; margin-right:0; margin-left: 0; float: left; }
	.cs-half-half:last-child { margin-top: 10px; }
    .cs-first-half, .cs-second-half {width: 100%; margin-right:0; margin-left: 0; float: left; }
	.cs-second-half { margin-top: 10px; }
}

/* --------------------------------------------------------------------------- */
/* Smaller h1 when on portrait of small screens                                */
/*
@media screen and (min-width: 421px) and (max-width: 767px) {
    h1 { font-size: 28px; letter-spacing: -1px; }
    h2 { font-size: 24px; letter-spacing: -1px; }
    h3 { font-size: 22px; letter-spacing: -1px; }
    h4 { font-size: 20px; letter-spacing: -1px; }
}	

/* --------------------------------------------------------------------------- */
/* Dog table for Cikat page - media queries                                    */
/*
@media screen and (min-width: 321px) and (max-width: 767px) {
    .dog-table-wrapper { max-width: 320px; margin: 0 auto;}
    .dog-table-wrapper table { width: 320px; text-align: center;}
    .dog-table-wrapper table td { max-width: 100px; padding: 15px 10px; }
}

@media screen and (max-width: 320px) {
    .dog-table-wrapper { max-width: 300px; margin: 0 auto;}
    .dog-table-wrapper table { width: 300px; text-align: center;}
    .dog-table-wrapper table td { max-width: 100px; padding: 15px 10px; }
    .dog-table-wrapper table td img { width: 78px;}
}

/* --------------------------------------------------------------------------- */
/* virtual tour wrapper - new web has no left column, use 100% width for all   */
.virtual-tour-wrapper, .cs-virtual-tour-wrapper { 
	width: 100%; 
}

/*
@media screen and (min-width: 1800px) {.virtual-tour-wrapper {  width: 1150px; }}
@media screen and (min-width: 1700px) and (max-width: 1799px) {.virtual-tour-wrapper {  width: 1100px; }}
@media screen and (min-width: 1600px) and (max-width: 1699px) {.virtual-tour-wrapper {  width: 1050px; }}
@media screen and (min-width: 1500px) and (max-width: 1599px) {.virtual-tour-wrapper {  width: 1000px; }}
@media screen and (min-width: 1400px) and (max-width: 1499px) {.virtual-tour-wrapper {  width: 950px; }}
@media screen and (min-width: 1300px) and (max-width: 1399px) {.virtual-tour-wrapper {  width: 900px; }}
@media screen and (min-width: 1231px) and (max-width: 1299px) {.virtual-tour-wrapper {  width: 850px; }}
@media screen and (min-width: 1200px) and (max-width: 1230px) {.virtual-tour-wrapper {  width: 800px; }}
@media screen and (min-width: 1100px) and (max-width: 1199px) {.virtual-tour-wrapper {  width: 750px; }}
@media screen and (min-width: 1000px) and (max-width: 1099px) {.virtual-tour-wrapper {  width: 700px; }}
@media screen and (min-width: 960px) and (max-width: 999px) {.virtual-tour-wrapper {  width: 670px; }}
@media screen and (min-width: 768px) and (max-width: 959px) {.virtual-tour-wrapper {  width: 728px; }}
@media screen and (min-width: 480px) and (max-width: 767px) {.virtual-tour-wrapper {  width: 460px; }}
@media screen and (min-width: 320px) and (max-width: 479px) {.virtual-tour-wrapper {  width: 300px; }}

/* --------------------------------------------------------------------------- */
/* Divs side by side used in EuropaRally                                       */
/*
  .cse-orange-bg {background-color: #FFF6ED; padding:18px;}
  .cse-grey-bg {background-color: #fbfbf8; padding:18px;}  

/* --------------------------------------------------------------------------- */
/* Two columns when wider than 569+                                            */

@media screen and (min-width: 569px) {
    .cse-one-row { margin-top: 20px; }
    .cse-one-row:after { content: ""; display: table; clear: both; }
    .cse-half-half {width: 49.6%; margin-right:0.4%; float: left; }
    .cse-half-half:last-child { margin-left: 0.4%; margin-right: 0;}
    .cse-half-half img { float: left; margin-right: 10px; margin-bottom: 6px; }
    .cse-half-half p { margin-top: 6px; }
}

/* --------------------------------------------------------------------------- */
/* Two columns into one when on smaller mobile                                 */

@media screen and (max-width: 568px) {
    .cse-half-half, .cse-half-half:last-child {width: 100%; margin-right:0; margin-left: 0; float: left; }
	.cse-half-half { margin-top: 10px!important; }  
    .cse-half-half img { float: left; margin-right: 10px; margin-bottom: 6px; }
    .cse-first-half img, .cse-second-half img {  float: left; margin-right: 10px; margin-bottom: 6px; } 
}
/* --------------------------------------------------------------------------- */


/* =========================================================================== */
/* NEW WEB      NEW WEB      NEW WEB      NEW WEB      NEW WEB      NEW WEB    */    
/* =========================================================================== */

/* --------------------------------------------------------------------------- */
/* text shadow class for white text over image                                 */
	.cs-text-shadow {
		text-shadow: 4px 4px #000;
	}	

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

/* Backgrounds of camp colours, use for button background etc */
.bg-slatina-green { background-color: #76923c!important; }
.bg-baldarin-blue { background-color: #4f81bd!important; }
.bg-bijar-red { background-color: #c00000!important; }
.bg-cikat-orange { background-color: #e36c09!important; }



/* footer coordinates column                                                   */
.cs-footer-coordinates {
	max-width: 300px;
}

.cs-footer-coordinate-left {
	float: left;
	width: 120px;
	margin-bottom:30px;
}

.cs-footer-coordinate-right {
	float: right;
	width: 160px;
	margin-bottom:10px;
}

@media (min-width:960px) and (max-width:1070px) {
	.cs-footer-coordinate-right {width: 130px;} 
	.cs-footer-coordinate-right {width: 120px;} 
}
	
@media (max-width:959px) {
	.cs-footer-coordinates { margin: 0 auto;} 
}


/* --------------------------------------------------------------------------- */
/* Hide the row with print icon as agreed with Petar                           */
.share-content.share-footer {
    display: none;
}



	
/* --------------------------------------------------------------------------- */
/* breakpoints for small mobile                                                */
@media(max-width:420px) {

	.mob-xs-c1 {
		width: 1.7094%!important
	}
	.mob-xs-c2 {
		width: 5.98291%!important
	}
	.mob-xs-c3 {
		width: 10.25641%!important
	}
	.mob-xs-c4 {
		width: 14.52991%!important
	}
	.mob-xs-c5 {
		width: 18.80342%!important
	}
	.mob-xs-c6 {
		width: 23.07692%!important
	}
	.mob-xs-c7 {
		width: 27.35043%!important
	}
	.mob-xs-c8 {
		width: 31.62393%!important
	}
	.mob-xs-c9 {
		width: 35.89744%!important
	}
	.mob-xs-c10 {
		width: 40.17094%!important
	}
	.mob-xs-c11 {
		width: 44.44444%!important
	}
	.mob-xs-c12 {
		width: 48.71795%!important
	}
	.mob-xs-c13 {
		width: 52.99145%!important
	}
	.mob-xs-c14 {
		width: 57.26496%!important
	}
	.mob-xs-c15 {
		width: 61.53846%!important
	}
	.mob-xs-c16 {
		width: 65.81197%!important
	}
	.mob-xs-c17 {
		width: 70.08547%!important
	}
	.mob-xs-c18 {
		width: 74.35897%!important
	}
	.mob-xs-c19 {
		width: 78.63248%!important
	}
	.mob-xs-c20 {
		width: 82.90598%!important
	}
	.mob-xs-c21 {
		width: 87.17949%!important
	}
	.mob-xs-c22 {
		width: 91.45299%!important
	}
	.mob-xs-c23 {
		width: 95.7265%!important
	}
	.mob-xs-c24 {
		margin-right: 0!important;
		width: 100%!important
	}	
}	


/* --------------------------------------------------------------------------- */
/* 'side menu' options for supporting menu, example is on about-us-test page   */
/* put cs-supporting-menu class on first container-row                         */


.cs-supporting-sub-menu a {
	display: inline-block;
	margin: 0 0 10px 0;
	padding: 10px;
	background-color: #3588F3;
	color: #fff;
	border-radius: 5px;
	width: 100%;
	text-decoration: none;
}

.cs-supporting-sub-menu a:hover {
	background-color: #104F9F;
}

.cs-supporting-sub-menu a.cs-active {
	background-color: #999;
	color: #fff;
}

/* ---------- BLOG ---------- */
.cs-related-articles {
	background-color: #F2F2F2;
	padding: 12px;
}	



/* *************************************************************************** */
/*                    OVERRIDES OVERRIDES OVERRIDES                            */
/* *************************************************************************** */

/* OVERRIDE: Adjust colour and remove bold from text links as it does not look good */ 
.main a   {color: #0572fc; font-weight:500;} 
.site-baldarin main a   {color: #104F9F; font-weight:500;}
.site-bijar main a   {color: #b41926; font-weight:500;}
.site-cikat main a   {color: #d84f04; font-weight:500;}
.site-slatina main a   {color: #417e02; font-weight:500;}


/* Links in slider on hover to change colour to be in the colour of campsite as per Petar's email from 13/11/20*/
.site-baldarin  .slide-content a:hover  { color: #104F9F; text-decoration: underline; }
.site-bijar  .slide-content a:hover  { color: #b41926; text-decoration: underline; }
.site-cikat  .slide-content a:hover { color: #ff973b; text-decoration: underline; }
.site-slatina  .slide-content a:hover  { color: #9ECE3D; text-decoration: underline; }


/* Used with span for camp name in offers. All within span shown on main site but not on camp sites */
.site-baldarin .cs-camp-hide, 
.site-bijar .cs-camp-hide, 
.site-cikat .cs-camp-hide, 
.site-slatina .cs-camp-hide {display: none;}


/* Do not underline h1 link in slider on hoveras per Petar's email from 17/11/20*/
.slide-content h1 a:hover  { text-decoration: none!important; }

/* --------------------------------------------------------------------------- */
/* OVERRIDE: LOGO, MENUS                                                       */

/* ALL BREAKPOINTS                                                             */
/* set logo colour explicitely as per Petar's email from 13/11/20*/
.site-baldarin #logo a .logo-text-2 { color: #003960; }
.site-bijar #logo a .logo-text-2 { color: #9b231c; }
.site-cikat #logo a .logo-text-2 { color: #e77817; }
.site-slatina #logo a .logo-text-2 { color: #68b92e; }

#menu > li > a { padding: 6px 12px; }
#menu > li.sub > a { padding-right: 30px;}
#menu > li.sub > a span { right: 12px;}


/* --------------------------------------------------------------------------- */
/* Desktop large */
@media (min-width: 1230px) {

	#logo a .logo-img { width: 80px; }
	#logo a .logo-text { width: 185px; }
	#logo a .logo-text .logo-text-1 { font-size: 26px; }
	#logo a .logo-text .logo-text-2 { font-size: 30px; }
	#logo a .logo-text .logo-text-3 { font-size: 12px; margin-bottom: 6px; }

	.small-nav > ul li a {letter-spacing: -0.3px; }
	#menu > li > a { letter-spacing: -0.3px;}

	.header-weather { }
	
}

/* --------------------------------------------------------------------------- */
/* Desktop small (above it is desktop large, which is default */
@media (min-width: 960px) and (max-width: 1229px) {

	#logo a .logo-img { width: 60px;}
	#logo a .logo-text { width: 185px; }
	#logo a .logo-text .logo-text-1 { font-size: 24px; }
	#logo a .logo-text .logo-text-2 { font-size: 30px; }
	#logo a .logo-text .logo-text-3 { display: none; }
	
	.small-nav > ul li a {letter-spacing: -0.3px; }
	#menu > li > a { letter-spacing: -0.3px;}
	
	.header-weather { display: block; }
	
}

/* --------------------------------------------------------------------------- */
/* Tablet - menu already drops into hamburger */
@media (min-width: 768px) and (max-width: 959px) {

.site-baldarin #logo a  {}
}

/* --------------------------------------------------------------------------- */
/* Mobile and below - menu drops into hamburger */
@media (max-width: 767px) {

    #logo a .logo-img { display: block; width: 34px; margin-top: 2px; }
    #logo a .logo-text { width: 100px; }
    #logo a .logo-text .logo-text-1 { font-size: 16px; }
    #logo a .logo-text .logo-text-2 { font-size: 20px; }
	#logo a .logo-text .logo-text-3 { display: none; }

}


/* --------------------------------------------------------------------------- */
/* Small screens to include logo image                                        */
@media (max-width: 600px) { 

    #logo a .logo-img { display: block; width: 34px; margin-top: 2px; }
    #logo a .logo-text { width: 100px; top: 14px; margin-left: 40px;}
    #logo a .logo-text .logo-text-1 { font-size: 16px; }
    #logo a .logo-text .logo-text-2 { font-size: 20px; }
	#logo a .logo-text .logo-text-3 { display: none; }

	
} 


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


/* ---------------- 2024-03-12 columns/images in the row ----------------------*/

/* One column: one image in the row, either full width or 60% of width  */

.cs-one-col { width: 100%; display: block; }
.cs-one-col p { margin-top: 6px; }
.cs-one-col  img { width: 100%; }

.cs-img-smaller {
	width:47%;
	margin-left: auto;
	margin-right: auto;
}	
 
@media (min-width: 1230px) {
     .cs-one-col {
       width: 100%;
       margin-right: 0;
       float:left;
     }
}


@media (min-width: 551px) and (max-width: 767px) {
  .cs-img-smaller {
    width: 60%;
    margin-right: auto;
	margin-left: auto;
    margin-top: 12px;	
  }
}


@media (max-width: 550px) {
    .cs-img-smaller {
	    width:100%;
	    margin-left: 0;
	    margin-right:0;
    }	
}


/* Two columns: two images in the row */

.cs-two-col img, .cs-two-col-last img { width: 100%; display: block; }
.cs-two-col p, .cs-two-col-last p { margin-top: 6px; }


@media (min-width: 1230px) {
  .cs-two-col, .cs-two-col-last {
    width: 48.3%;
    margin-right: 1.7%;
	float:left;  
  }
  .cs-two-col-last {
    margin-right: 0;
  }
}

@media (min-width: 768px) and (max-width: 1229px) {
  .cs-two-col, .cs-two-col-last {
    width: 48.3%;
    margin-right: 1.7%;
	float:left;  

  }
  .cs-two-col-last {
    margin-right: 0;
  }
}


@media (min-width: 551px) and (max-width: 767px) {
  .cs-two-col, .cs-two-col-last {
    width: 60%;
    margin-right: auto;
	margin-left: auto;
    margin-top: 12px;	
  }
}


@media (max-width: 550px) {
  .cs-two-col, .cs-two-col-last {
    width: 100%;
    margin-right: 0;
	margin-left: 0;
	float:left; 
    margin-top: 12px;	
  }
}


/* Three columns: three images in the row */

.cs-three-col img, .cs-three-col-last img { width: 100%; display: block; }
.cs-three-col p, .cs-three-col-last p { margin-top: 6px; }


@media (min-width: 1230px) {
  .cs-three-col, .cs-three-col-last {
    width: 31.63%;
    margin-right: 1.7%;
	float:left;  
  }
  .cs-three-col-last {
    margin-right: 0;
  }
}

@media (min-width: 768px) and (max-width: 1229px) {
  .cs-three-col, .cs-three-col-last {
    width: 31.63%;
    margin-right: 1.7%;
	float:left;  

  }
  .cs-three-col-last {
    margin-right: 0;
  }
}


@media (min-width: 551px) and (max-width: 767px) {
  .cs-three-col, .cs-three-col-last {
    width: 60%;
    margin-right: auto;
	margin-left: auto;
    margin-top: 12px;	
  }
}


@media (max-width: 550px) {
  .cs-three-col, .cs-three-col-last {
    width: 100%;
    margin-right: 0;
	margin-left: 0;
	float:left; 
    margin-top: 12px;	
  }
}


/* Four columns: four images in the row */

.cs-four-col img, .cs-four-col-last img { width: 100%; display: block; }
.cs-four-col p, .cs-four-col-last p { margin-top: 6px; }


@media (min-width: 1230px) {
  .cs-four-col, .cs-four-col-last {
    width: 23.3%;
    margin-right: 1.7%;
	float:left;  
  }
  .cs-four-col-last {
    margin-right: 0;
  }
}

@media (min-width: 768px) and (max-width: 1229px) {
  .cs-four-col, .cs-four-col-last {
    width: 48.3%;
    margin-right: 1.7%;
	float:left;  
    margin-top: 10px!important;	

  }
  .cs-four-col-last {
    margin-right: 0;
  }
}



@media (min-width: 551px) and (max-width: 767px) {
  .cs-four-col, .cs-four-col-last {
    width: 60%;
    margin-right: auto;
	margin-left: auto;
    margin-top: 12px;	
  }
}


@media (max-width: 550px) {
  .cs-four-col, .cs-four-col-last {
    width: 100%;
    margin-right: 0;
	margin-left: 0;
	float:left; 
    margin-top: 12px;	
  }
}


/* five columns: five images in the row */

.cs-five-col img, .cs-five-col-last img { width: 100%; display: block; }
.cs-five-col p, .cs-five-col-last p { margin-top: 6px; }


@media (min-width: 1230px) {
  .cs-five-col, .cs-five-col-last {
    width: 18.3%;
    margin-right: 1.7%;
	float:left;  
  }
  .cs-five-col-last {
    margin-right: 0;
  }
}

@media (min-width: 768px) and (max-width: 1229px) {
  .cs-five-col, .cs-five-col-last {
    width: 31.63%;
    margin-right: 1.7%;
	float:left;  
    margin-top: 10px!important;	

  }
  .cs-five-col-last {
    margin-right: 0;
  }
}


@media (min-width: 551px) and (max-width: 767px) {
  .cs-five-col, .cs-five-col-last {
    width: 60%;
    margin-right: auto;
	margin-left: auto;
    margin-top: 12px;	
  }
}


@media (max-width: 550px) {
  .cs-five-col, .cs-five-col-last {
    width: 100%;
    margin-right: 0;
	margin-left: 0;
	float:left; 
    margin-top: 12px;	
  }
}


/* six columns: six images in the row */

.cs-six-col img, .cs-six-col-last img { width: 100%; display: block; }
.cs-six-col p, .cs-six-col-last p { margin-top: 6px; }


@media (min-width: 1230px) {
  .cs-six-col, .cs-six-col-last {
    width: 14.96%;
    margin-right: 1.7%;
	float:left;  
  }
  .cs-six-col-last {
    margin-right: 0;
  }
}

@media (min-width: 768px) and (max-width: 1229px) {
  .cs-six-col, .cs-six-col-last {
    width: 31.63%;
    margin-right: 1.7%;
	float:left;  
    margin-top: 10px!important;	

  }
  .cs-six-col-last {
    margin-right: 0;
  }
}


@media (min-width: 551px) and (max-width: 767px) {
  .cs-six-col, .cs-six-col-last {
    width: 60%;
    margin-right: auto;
	margin-left: auto;
    margin-top: 12px;	
  }
}



@media (max-width: 550px) {
  .cs-six-col, .cs-six-col-last {
    width: 100%;
    margin-right: 0;
	margin-left: 0;
	float:left; 
    margin-top: 12px;	
  }
}


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