@charset "utf-8";





.grid
{
	width:90%;
	padding-left:15px;
	padding-right:15px;
	padding-top:5px;
	padding-bottom:5px;
	
	margin-left:auto;
	margin-right:auto;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	text-align: center;
}



.row {
	display: -ms-flexbox; /* IE10 */
	display: flex;
	-ms-flex-wrap: wrap; /* IE10 */
	flex-wrap: wrap;
	padding: 0 4px;
	padding-top: 3px;
	padding-bottom: 3px;
}

/* Create three equal columns that sits next to each other */
.columns3im {
  -ms-flex: 33%; /* IE10 */
  flex: 33%;
  max-width: 33%;
  padding: 0 4px;
}
.columns2im {
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
  max-width: 50%;
  padding: 0 4px;
}
.columns2thirds {
  -ms-flex: 67%; /* IE10 */
  flex: 67%;
  max-width: 67%;
  padding: 0 4px;
}

.columns3im1 {
  -ms-flex: 33%; /* IE10 */
  flex: 33%;
  max-width: 33%;
  padding: 0 4px;
}
.columns3im2 {
  -ms-flex: 33%; /* IE10 */
  flex: 33%;
  max-width: 33%;
  padding: 0 4px;
}
.columns3alt {
  -ms-flex: 0%; /* IE10 */
  flex: 0%;
  max-width: 0%;
  /*padding: 0 4px;*/
  visibility:hidden;
  height:0%;
}

.columns3inbetween {
  -ms-flex: 0%; /* IE10 */
  flex: 0%;
  max-width: 0%;
  /*padding: 0 4px;*/
  visibility:hidden;
  height:0%;
}
.columns3altsolo {
  -ms-flex: 0%; /* IE10 */
  flex: 0%;
  width:0%;
  max-width: 0%;
  /*padding: 0 4px;*/
  visibility:hidden;
  height:0%;
}
.columns2alt {
  -ms-flex: 0%; /* IE10 */
  flex: 0%;
  max-width: 0%;
  /*padding: 0 4px;*/
  visibility:hidden;
  height:0%;
}

.columns3txt {
  -ms-flex: 33%; /* IE10 */
  flex: 33%;
  max-width: 33%;
  padding: 0 4px;
}

.columns2 {
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
  max-width: 50%;
  padding: 0 4px;
}

.columns2solo {
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
  max-width: 50%;
  padding: 0 4px;
}

.columns1altsolo {
  -ms-flex: 0%; /* IE10 */
  flex: 0%;
  max-width: 0%;
  padding: 0 ;
}

.columns2map {
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
  max-width: 50%;
  padding: 0 4px;
}

.columns2txt {
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
  max-width: 50%;
  padding: 0 4px;
}

.columns1 {
  -ms-flex: 100%; /* IE10 */
  flex: 100%;
  max-width: 100%;
  padding: 0 4px;
}


.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 1150px) {
  .columns3alt {
    -ms-flex: 0%;
    flex: 0%;
    max-width: 0%;
	height:0%;
	 padding: 0;
  }
   .columns3im1 {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
   .columns3im2 {
    -ms-flex: 0%;
    flex: 0%;
    max-width: 0%;
	height:0%;
	 padding: 0;
  }
   .columns3txt {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
  
   .columns3inbetween {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
	height:auto;
	 padding: 0 4px;
	visibility:visible;
  }
     .columns2thirds {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
	margin:auto;
  }


 .columns3altsolo {
  -ms-flex: 0%; /* IE10 */
  flex: 0%;
  max-width: 0%;
  height:0%;
  width:0%;
  padding: 0;
  margin:auto;
  visibility:visible;
}

}

@media screen and (max-width: 850px) {
  .columns3im {
    -ms-flex: 20%;
    flex: 20%;
    max-width: 20%;
  }
   .columns2map {
    -ms-flex: 0%;
    flex: 0%;
    max-width: 0%;
	height:0px;
	 padding: 0;
  }
    .columns3inbetween {
    -ms-flex: 0%;
    flex: 0%;
    max-width: 0%;
	height:0px;
	 padding: 0;
  }
   .columns3im1 {
    -ms-flex: 0%;
    flex: 0%;
    max-width: 0%;
	height:0%;
	 padding: 0;
  }
   .columns3im2 {
     -ms-flex: 0%;
    flex: 0%;
    max-width: 0%;
	height:0%;
	 padding: 0;
  }
    
   .columns3txt {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
	 padding: 0 4px;
  }
  
    .columns2im {
    -ms-flex: 0%;
    flex: 0%;
    max-width: 0%;
	height:0%;
	 padding: 0;
  }
    .columns2txt {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
	margin:auto;
	 padding: 0 4px;
  }
     .columns2thirds {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
	margin:auto;
	 padding: 0 4px;
  }
  .columns2solo {
  -ms-flex: 75%; /* IE10 */
  flex: 75%;
  max-width: 75%;
  padding: 0 4px;
  margin:auto;
}

    .columns3alt {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
	height:auto;
	visibility:visible;
	  padding: 0 4px;
  }
  
  .columns3altsolo {
  -ms-flex: 75%; /* IE10 */
  flex: 75%;
  max-width: 75%;
  padding: 0 4px;
  margin:auto;
  visibility:visible;
}
  .columns1altsolo {
  -ms-flex: 100%; /* IE10 */
  flex: 100%;
  max-width: 100%;
  padding: 0 4px;
  margin:auto;
  visibility:visible;
}

}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 450px) {
  .columns3im1 {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
	 padding: 0 4px;
  }
  
   .columns2 {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
	 padding: 0 4px;
  }
   .columns2solo {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
	 padding: 0 4px;
  }
    .columns2map {
    -ms-flex: 0%;
    flex: 0%;
    max-width: 0%;
	height:0px;
	 padding: 0;
  }
     .columns2im {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
	 padding: 0 4px;
  }
   .columns3im2 {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
	 padding: 0 4px;
  }
    .columns3txt {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
	 padding: 0 4px;
  }
  
   .columns2txt {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
	 padding: 0 4px;
  }
    .columns3alt {
    -ms-flex: 0%;
    flex: 0%;
    max-width: 0%;
	height:0;
	visibility:visible;
	  padding: 0px;
  }
  .columns2alt {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
	visibility:visible;
	padding:0 4px;
	 
  }
  
   .columns3altsolo {
  -ms-flex: 0%; /* IE10 */
  flex: 0%;
  max-width: 0%;
  padding: 0;
  margin:auto;
  visibility:visible;
}


}
.containersquare {
  position: relative;
  overflow: hidden;
  width: 100%;
 padding-top: 100%; /* 1:1 Aspect Ratio */
}

.container169 {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.container87 {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 87.5%; /* 8:7 Aspect Ratio */
}

.container43 {
  position: relative;
  overflow: hidden;
  width: 100%;
 padding-top: 75%; /* 4:3 Aspect Ratio */
}

.container32 {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 66.66%; /* 3:2 Aspect Ratio */
}

.container85 {
  position: relative;
  overflow: hidden;
  width: 100%;
padding-top: 62.5%; /* 8:5 Aspect Ratio */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.containerimage {
  position: relative;
  width: 100%;
  max-width: 450px;
  max-height:300px;
}

.containerimageattractions {
  position: relative;
  width: 100%;
  
  
}
.attractionimage {
	max-width:600px;
	width:100%;
	
	
}
.info{
	padding-left:15px;
	padding-right:15px;
	
}

.imagelink {
  display: block;
  width: 100%;
  height:auto;
  max-height: 300;
}

.overlayim {
	position: absolute;
	bottom: -2px;
	background: rgb(0, 0, 0); /* Black see-through */
	color: #f1f1f1;
	width: 90%;
	transition: .5s ease;
	opacity:0;
	color: white;
	font-size: 15px;
	padding: 15px;
	text-align: center;
	background-color: rgba(204,204,204,0.5);
	height: 27px;
	overflow:hidden;
}
.overlayimattractions {
	position: absolute;
	bottom: -2px;
	background: rgb(0, 0, 0); /* Black see-through */
	color: #f1f1f1;
	width: 95%;
	transition: .5s ease;
	opacity:0;
	color: white;
	font-size: 15px;
	padding: 15px;
	text-align: center;
	background-color: rgba(204,204,204,0.5);
	height: 30px;
	overflow:hidden;
		font-weight: bold;
}

.containerimage:hover .overlayim {
  opacity: 1;
}
.containerimage .overlayim a {
	color: #FFF;
}

.containerimageattractions:hover .overlayimattractions {
  opacity: 1;
}
.containerimageattractions .overlayimattractions a {
	color: #FFF;
}




body {
	color: #333333;
	
	font-style: p;
}

#main .container .content .Intro {
	float:clear;
	text-align: center;
	width: 90%;
	padding-right: 40px;
	padding-bottom: 40px;
	padding-left: 40px;
}


/*.header{
	font-size: 60px;
	color: #FFF;
	text-align:center;
	padding:5px;
	
}*/

.header{
	font-size: 48px;
	color: #000099;
	text-align: center;
}
.iframe {
	height:300;
	width:100%;
}

.fltrt {  
	float: right;
	margin-left: 8px;
	
}
.fltlft { 
	float: left;
	margin-right: 8px;
	padding-top:15px;
}
.menu
{
	font-size:24px;
	background-color:#BDC9D5;
	padding-bottom:3px;
	padding-top:3px;
	padding-left:10px;
	padding-right:10px;
	color:#006;
}

	
td, th {
	color: #333333;
}



h2 {
	color: #FFF;
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    text-decoration-line: overline;
    font-size: 23px;
}

h3, h4 {
	color: #333333;
	font-weight: bolder;
}

h5, h6 {
	color: #6699CC;
}

a {
	color: #333333;

}

.table1 {
	background-image: url(file:///image%201);
}
td{
	background-color:#FFFDEC;
}
/*
#form1 {
	background-image: url(file:///images/7.jpg);
	;
	background-repeat: no-repeat;
	background:center;
	background-size: cover;
}
#form1 p strong {
	color: #9900CC;
}*/

.gobutton {
	padding-top: 5px;
	padding-right: 15px;
	padding-bottom: 5px;
	padding-left: 15px;
	background-color: #606;
	font-size: medium;
	color: #FFF;
}
.city {
	font-size: 36px;
	font-weight: bold;
	background-size: auto;
	clear:left;
	padding-top:15px;
	font-style: italic;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

.table {

}
.subheading {
	font-size: 24px;
}
#hotels table tr td {
	text-align: center;
}
#Main p {
	margin-left:5%;

	}
.indent{
	margin-left:17%;}
	
	
	
#sidetable {
	background-color: #B5C9D2;
}
.sidebar1 #sidetable tr .clear {
	background-color: #B5C9D2;
}
.content #hotels #hotels tr td a img {
	width: 100%;
}

.content #books #traveguides tr td a img {
	
}




.collapsible-nested {
	color: #0051E1;
	cursor: pointer;
	padding: 7px;
	
	border: none;
	text-align: center;
	outline: none;
	font-size: 15px;
	 background-color: #162020f7;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {

}

/* Style the collapsible content. Note: hidden by default */
.colcontent {
	padding: 0 0;
     background-color: #162020f7;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
  
}

/* Style the collapsible content. Note: hidden by default */
.nested-content {
	padding: 0 0;
     background-color: #162020f7;
	font-size: 15px;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
  
}

/*-------------------new bit for lightbox


.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Create four equal columns that floats next to eachother */
.column {
  float: left;
  width: 25%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Caption text */
.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

img.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


@media screen and (max-width: 600px) {
  div.sidebar1 {
    display: none;
  }
  
   div.content {
	  margin-left:3px;
  }
  
  div.linktable {
	  font-size: 12px;
  }
  
 div.transbox {
	  font-size: 20px;
	  top:20px;
	  margin:auto;
	display:none;
  }
  
  div.transboxsmall {
	 
	display:block;  }
  
  div.header {
	  font-size: 25px;
  }
  div.city {
	  font-size: 15px;
  }
  div.slideshow-container {
	  font-size: 25px;
     
  }
  
   div.pagetitle {
	  font-size: 20px;
  }
  
.container .header .slideshow-container .mySlides.fade .transbox .pagetitle {
	font-size: 20px;
}
  
}

@media screen and (min-width: 600px) {
	 div.transboxsmall {
	
	 display:none;
  }
  
}

@media screen and (max-width: 300px) {
 
  
  div.transboxsmall {
	 width:295px;
	display:block;  }
}
#main .container .header .slideshow-container #slider #slideWrap li .transboxsmall .pagetitlesmall {
	font-size: 35px;
}
.container .header .slideshow-container .mySlides.fade .transbox .pagetitle {
	word-spacing: normal;
}
#form {
	background-color: #FFF;
	height:auto;
	width:auto;
	vertical-align: middle;
   
 
}
.container .content #top #MenuBar1 li a #form button {
}
.container .content #main #Europe table tr #clearcell {
	background-color: #B5C9D2;
}
.container .content #main #Europe table tr #clearcell2 {
	background-color: #B5C9D2;
}
#main .container .header .slideshow-container #slider #slideWrap li .transbox .pagetitle {
	font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
}
#main .container .header .slideshow-container #slider #slideWrap li .transbox .pagetitle {
	font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
	font-size: 72px;
	color: #FFFDEC;
	font-weight: bold;
}
#main .container .header .slideshow-container #slider #slideWrap li .transbox .pagetitlesmall {
	font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
	font-size: 40px;
	color: #FFFDEC;
	font-weight: bold;
	text-align:left;
	
}
#main .container .content div .city {
	font-weight: normal;
}
#main .container .content div .city {
	font-weight: bold;
}



/* euhow container */
.eusldeshow-container {
  position: relative;
  z-index:0;
  
}

/* eueu */
.myeu {
	display: none;
	padding: 80px;
	text-align: center;
	padding-top: 0px;
	padding-bottom: 5px;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: #888;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  position: absolute;
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev {
  position: absolute;
  left: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
  color: white;
}

/* The dot/bullet/indicator container */
.dot-container {
	text-align: center;
	padding: 20px;
}

/* The eudots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* Add a background color to the active dot/circle */
.activedot, .dot:hover {
	  background-color: #717171;
}
.navbarnew {
	/*overflow: hidden;*/
	
	font-family: Arial, Helvetica, sans-serif;
    display: flex;
    
    
}




/*from mycitydreams*/

.navbarnew a {
	float: left;
	font-size: 16px;
	color: whitesmoke !important;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	
}

.dropdownnew {
  float: left;
  overflow: hidden;
    
}

.dropdownnew .dropbtnnew {
	font-size: 21px;
	border: none;
	outline: none;
	color: whitesmoke !important;
	padding: 10px 5px;
	background-color: inherit;
	font: inherit;
	margin: 0;
	font-weight: bolder;
    
}


.navbarnew a:hover, .dropdownnew:hover .dropbtnnew:hover {
	background-color:rgba(95, 158, 160, 0.5); /* Cadetblue with 50% transparency /*hover background*/
   
}



.dropdown-contentnew {
	display: none;
	position: absolute;
	background-color: #162020f7; /*prev dddddd=light grey*/
	width: 100%;
	left: 0;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 3;
    color: whitesmoke;
}

.dropdown-contentnew .header {
  background: red;
  padding: 16px;
  color: white;
}

.dropdownnew:hover .dropdown-contentnew {
  display: block;
    background-color: #162020f7;
}


/*test*/
/* Adjusted style for dropdown content during sticky state */
.navbar.sticky .dropdown-contentnew {
    position: fixed;
    top: 50px;/* your desired position */;
}

/* Create three equal columns that floats next to each other */
.columnnew {
	float: left;
	width: 25%;
	padding: 10px;
/*	background-color: #DDD;*/  /*grey background for dropdownca
	height: auto;
 /*   color: #333; */
}

.columnnew a {
	float: none;
	
	color:#333334;
	padding: 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}

.columnnew a:hover {
	background-color: cadetblue;
    color: #333;
}

/* Clear floats after the columns */
.rownew:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .columnnew {
    width: 100%;
    height: auto;
  }
}

/*end top navbar style */
#navbar {
	overflow: hidden;
	background-color: #162020f7;
	z-index: 4;
	height:auto;
    color: whitesmoke !important;
 
}



/*
top nav bar style*/

.fixed {
  position: fixed;
  top: 0;
  width: 100%;
}
body {
  margin: 0;
}




.collapsible {
	 background-color: #162020f7;
	color: whitesmoke;
	cursor: pointer;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 17px;
	padding-top: 8px;
	padding-right: 8px;
	padding-bottom: 8px;
	padding-left: 32px;
}

.collapsible2 {
	 background-color: #162020f7;
	color: whitesmoke;
	cursor: pointer;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 16px;
	padding-top: 8px;
	padding-right: 8px;
	padding-bottom: 8px;
	padding-left: 32px;
}

.collapsible-nested {
	 background-color: #162020f7;
	color: whitesmoke;
	cursor: pointer;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 25px;
	padding-top: 8px;
	padding-right: 8px;
	padding-bottom: 8px;
	padding-left: 32px;
}

.active, .collapsible:hover {
	 background-color:cadetblue;
	color: whitesmoke;
    font-size: 19px;
}

.active, .collapsible2:hover {
	 background-color:cadetblue;
	color: whitesmoke;
    font-size: 19px;
}
.active, .collapsible-nested:hover {
	 background-color: #162020f7;
	color: whitesmoke;
}

.colcontent-with-nest {
  padding: 0 18px;
 max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
   background-color: #162020f7;
}

.colcontent-with-nest2 {
  padding: 0 18px;
 max-height: fit-content;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
   background-color: #162020f7;
}

.nested-content {
  padding: 0 18px;
 max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
   background-color: #162020f7;
}

.nested-content.show {
    max-height: 1000px; /* Adjust the max-height value as needed */
}


.collapsible:after {
  content: '\f078'; /* Unicode character for "chevron down" in Font Awesome */
      font-family: 'Font Awesome 5 Free'; /* Use Font Awesome font family */
      font-weight: 900;
      font-size: 13px;
      color: whitesmoke;
      float: right;
      margin-left: 5px;
      transition: transform 0.2s ease-out;
}

.collapsible2:after {
  content: '\f078'; /* Unicode character for "chevron down" in Font Awesome */
      font-family: 'Font Awesome 5 Free'; /* Use Font Awesome font family */
      font-weight: 900;
      font-size: 13px;
      color: whitesmoke;
      float: right;
      margin-left: 5px;
      transition: transform 0.2s ease-out;
}

 .active:after {
      transform: rotate(180deg); /* Rotate the chevron when the content is expanded */
    }

.collapsible-nested:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: whitesmoke;
  float: right;
  margin-left: 5px;
}

.collapsible-nested.active:after {
/*content: "\2796"; /* Unicode character for "minus" sign (-) */
    }

.active:after {
/*  content: "\2796"; /* Unicode character for "minus" sign (-) */
}




form.example input[type=text] {
  padding: 10px;
  font-size: 17px;
  border: 1px solid grey;
  float: left;
  width: 50%;
     border-radius: 25px;
  background: #f1f1f1;
    color: cadetblue;
   
}

form.example button {
  float: left;
  width: 20%;
  padding: 10px;
  background: #2196F3;
  color: white;
  font-size: 17px;
  border: 1px solid grey;
  border-left: none;
  cursor: pointer;
}

form.example button:hover {
  background: #0b7dda;
}

form.example::after {
  content: "";
  clear: both;
  display: table;
}






/* Style the navbar*/




/*
#navbar a {
	float: left;
	display: block;
	color: #333333;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 21px;
}

#navbar a:hover {
	background-color: #555;
	color: #FFF;
}

#navbar a.active {
	background-color: #CCCCCC;
	color: white;
}
 */
/* Page content */
.content {
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;
}

/*test*/
.topnav::after {
    clear: both;
    content: "";
    display: block;
}

/* end test*/

.sidenav {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
    background-color: #162020f7;
	overflow-x: hidden;
	transition: 0.5s;
	padding-top: 60px;
    color: whitesmoke;
}





.sidenav .closebtn {
	position: absolute;
	top: 4px;
	right: 4px;
	font-size: 36px;
	margin-left: 50px;
	width: 29px;
}

#main {
  transition: margin-left .5s;
  padding: 1px;
}
/*
form {

border-radius: 5px;
display: flex;
flex-direction: row;
align-items: center;
height:25px;
}*/
/*
input {
	all: unset;
	font: 16px system-ui;
	color: #00C;
	height: 100%;
	width: 60%;
}

input#searchbutton {
	all:unset;
	font: 16px system-ui;
	color: #0043B7;
	height: 100%;
	width: auto;
}
	
*/	



.basicbutton {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}



.buttonblue {
	background-color: #C8C8C8;
	color: black;
	border: 2px solid #333333;
}


.buttonblue:hover {
	background-color: #999999;
	color: white;
}


::placeholder {
color: #fff;
opacity: 0.7;
}


.container {
	

	
	
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
}
.content {
	width: 100%;
	float: left;
}
.sidebar1 {
	float: left;
	width: 14%;
	
	padding-top:0px;
	padding-bottom: 10px;
	position:fixed;
	z-index:1;
	background-color: #B5C9D2;
	top:325px;
}



.fltrt {  
	float: right;
	margin-left: 8px;
	
}
.fltlft { 
	float: left;
	margin-right: 8px;
	padding-top:15px;
}
.footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: #162020f7; /* Adjust the background color as needed */
   color: whitesmoke;
   padding: 10px; /* Add padding for better spacing */
}

.social-icons {
   display: flex;
   gap: 10px;
}

.social-icons a {
   text-decoration: none;
   color: whitesmoke;
   font-size: 20px;
}

.footer a {
   text-decoration: none;
   color: whitesmoke;
}



.menu
{
	font-size:24px;
	background-color:#BDC9D5;
	padding-bottom:3px;
	padding-top:3px;
	padding-left:10px;
	padding-right:10px;
	color:#006;
}


body {font-family: Verdana, sans-serif;}

img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
	width:100%;
	height:265px;
	position: relative;
	margin: auto;
	justify-content: center;  
}

/* Caption text */
.text {
 font-size: 48px;
	color: #000099;
	text-align: center;
position: absolute;
 top: 30px;
 z-index:1;
 font-style:strong;
  width: 100%;
  

}

div.transbox {
	width:667px;
	opacity: 0.75;
	font-size: 72px;
	color: #FFFDEC;
	text-align: center;
	top:-44px;
	font-style:strong;
	font-family: "Palatino Linotype", "Book Antiqua", "Palatino", serif;
	left: -59px;
	float: left;
	position: absolute;
	margin-left: 10px;
	height: 79px;
}


div.transboxsmall {
	width:500px;
	opacity: 0.75;
	font-size: 25px;
	color: #FFFDEC;
	text-align: left;
	top:-18px;
	font-style:strong;
	font-family: "Palatino Linotype", "Book Antiqua", "Palatino", serif;
	left: -4px;
	float: left;
	position: absolute;
	margin-left: 10px;
	height: 79px;
	display:hidden;
	padding-left: 15px;
}


div.transbox2 {
	
	
	min-width:400px;

	
display:none;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.55;
  font-size: 48px;
	color: #000099;
	text-align: center;
	position:absolute;
	
	top:40px;
 z-index:1;
 font-style:strong;
  
}

div.transbox p {
	margin: 5%;
	color: #333333;
}


/* Number text (1/3 etc) */

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}

#slider {
  position: relative;
  width: 1700px;
  height: 265px;
 
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
}
#slider ul {
  position: relative;
  list-style: none;
  height: 100%;
  width: 10000%;
  padding: 0;
  margin: 0;
  transition: all 750ms ease;
  left: 0;
}
#slider ul li {
  position: relative;
  height: 100%;
 
  float: left;
}
#slider ul li img{
  width: 1700px;
  height: 265px;
}
 
#slider #prev, #slider #next {
  width: 50px;
  line-height: 50px;
  border-radius: 50%;
  font-size: 2rem;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
  text-align: center;
  color: white;
  text-decoration: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: all 150ms ease;
}
#slider #prev:hover, #slider #next:hover {
  background-color: rgba(0, 0, 0, 0.5);
  text-shadow: 0;
}
#slider #prev {
  left: 10px;
}
#slider #next {
  right: 10px;
}

.responsive {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 1610px) {
  #slider{
	width: 1600px;
  }
  }
  @media screen and (max-width: 1610px) {
  #slider ul li img{
	  width: 1600px;
}
      }
@media screen and (max-width: 1510px) {
  #slider{
	width: 1500px;
  }
  }
  @media screen and (max-width: 1510px) {
  #slider ul li img{
	  width: 1500px;
}
      }
@media screen and (max-width: 1410px) {
  #slider{
    
    width: 1400px;
  }
  }
  @media screen and (max-width: 1410px) {
  #slider ul li img{
	  width: 1400px;
}
}
@media screen and (max-width: 1310px) {
  #slider{
    
    width: 1300px;
  }
  }
  @media screen and (max-width: 1310px) {
  #slider ul li img{
	  width: 1300px;
}
      }
@media screen and (max-width: 1210px) {
  #slider{
    
    width: 1200px;
  }
  }
  @media screen and (max-width: 1210px) {
  #slider ul li img{
	  width: 1200px;
}
      }
@media screen and (max-width: 1210px) {
  #slider{
    
    width: 1200px;
  }
  }
  @media screen and (max-width: 1210px) {
  #slider ul li img{
	  width: 1200px;
}
      }
@media screen and (max-width: 1110px) {
  #slider{
    
    width: 1100px;
  }
  }
  @media screen and (max-width: 1110px) {
  #slider ul li img{
	  width: 1100px;
}}
@media screen and (max-width: 1010px) {
  #slider{
    
    width: 1000px;
  }}
  
  @media screen and (max-width: 1010px) {
  #slider ul li img{
	  width: 1000px;
}}
@media screen and (max-width: 910px) {
  #slider{
    
    width: 900px;
  }}
  
  @media screen and (max-width: 910px) {
  #slider ul li img{
	  width: 900px;
}}
@media screen and (max-width: 810px) {
  #slider{
    
    width: 800px;
  }}
  
  @media screen and (max-width: 810px) {
  #slider ul li img{
	  width: 800px;
}}
@media screen and (max-width: 710px) {
  #slider{
    
    width: 700px;}
.imagelink {
 
  width: 100%;
  height: 100%;
}}
  
  
  @media screen and (max-width: 710px) {
  #slider ul li img{
	  width: 700px;
}}
@media screen and (max-width: 610px) {
  #slider{
    
    width: 600px;
  }
  }
  @media screen and (max-width: 610px) {
  #slider ul li img{
	  width: 600px;
}}
@media screen and (max-width: 510px) {
  #slider{
    
    width: 500px;
  }}
  
  @media screen and (max-width: 510px) {
  #slider ul li img{
	  width: 500px;
}}
@media screen and (max-width: 410px) {
  #slider{
    
    width: 400px;
  }}
  
  @media screen and (max-width: 410px) {
  #slider ul li img{
	  width: 400px;
}}
@media screen and (max-width: 310px) {
  #slider{
    
    width: 300px;
  }}
  
  @media screen and (max-width: 310px) {
  #slider ul li img{
	  width: 300px;
}}



.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 15px;
  color:#dddddd;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
    font-size: 17px;
    background-color: cadetblue;
    
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 4px;
  font-size: 36px;
  margin-left: 50px;
}

#main {
  transition: margin-left .5s;
  
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
 
}



.Intro {
	width:60%;
	padding-right: 60px;
	padding-left: 60px;
	color:#1B1B1B;
	float:clear;
}

#main .container .info div table tr td .facts .title {
	font-style: italic;
	font-weight: bold;
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	
}
.bold {
	font-weight: bold;
}
#main .container .info .grid .row .columns2txt .facts p .bold {
	font-weight: bold;
}
.bold {
	font-weight: bold;
}

.subtitle {
    font-size: 125px;
    text-decoration: overline;
    padding-top: 0px;
    
}



span {
    
}



h1 {

   
  margin: 0;
  padding: 0;
    font-weight: bold;
    font-family:"Quintessential",cursive;
   

}

.title {
    padding-top: 0px;
}


.form-container {
    
    width: 99%;
    /*max-w10dth: 500px; /* Adjust the maximum width as needed */
    margin: 0 auto; /* Center 
    horizontally */
    padding-top: 5px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    color: darkslategrey;
}


.form-group {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  
}

.form-group input::placeholder {
    color: darkslateblue;
    opacity: 0.7;
}

.form-group textarea::placeholder {
    color: darkslateblue;
    opacity: 0.7;
}


.fa-hotel {
    margin-right: 10px;
    font-size: 18px
}

.fa-hotel {
    margin-right: 10px;
    font-size: 18px
}

.fa-car {
    font-size: 18px;
        margin-right: 10px;
}

.radio {
    margin-left: 20px;
    z-index: 1
}

.form-input {
    width: 60%;
    padding: 8px 12px;
    border: 1px solid #333;
    border-radius: 20px;
    font-size: 14px;
    z-index: 1
}

.text1 {
    width: 65%;
    flex: 1;
    padding: 8px 12px;
    margin-right: 10px;
    margin-left: 10px;
    border: 1px solid #ccc;
    border-radius: 20px;
    font-size: 14px;
    margin-bottom: -5px;
    z-index: 1
}

.text2 {
    width: 45%;
    padding: 8px 12px;
    margin-right: 10px;
    margin-left: 10px;
    border: 1px solid #ccc;
    border-radius: 20px;
    font-size: 14px;
    margin-bottom: -13px;
    z-index: 1
}

.text3 {
    width: 65%;
    padding: 8px 12px;
    margin-right: 10px;
    margin-left: 10px;
    border: 1px solid #ccc;
    border-radius: 20px;
    font-size: 14px;
    z-index: 1;
    color: cadetblue;
}

.label {
    margin-left: 10px;
    margin-right: 10px;
    font-size: 14px;
    width: 80px;
}

.dropdown {
    width: 60px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 20px;
    font-size: 14px;
    z-index: 1;
}

.dropdown2 {
    width: 130px;
    padding: 6px 15px;
    border: 1px solid #ccc;
    border-radius: 20px;
    font-size: 14px;
    margin-left: 45px;
    z-index: 1;
}

.dropdown2mobile {
    margin-top: -15px;
    padding: 6px 15px;
    border: 1px solid #ccc;
    border-radius: 20px;
    font-size: 14px;
    flex: 1;
    z-index: 1;
}

.date-selector {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    z-index: 1;
}

.date-selector2 {
    display: flex;
    align-items: center;
    margin-top: -10px;
    margin-bottom: 3px;
    z-index: 1;
}

.date-label {
    margin-right: 5px;
    margin-left: 5px;
    font-size: 14px;
    width: 70px;
    z-index: 1;
}

.search-instruction {
    color: darkslategray;
    font-size: 14px;
    margin: -2px;
}

.time-label {
    margin-right: 10px;
    font-size: 14px;
    width: 40px;
}

.date-input {
    flex: 1;
    width: 150px;
    margin-right: 10px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 20px;
    font-size: 14px;
    z-index: 1;
}

.time-input {
    width: 70px;
    margin-right: 20px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 20px;
    font-size: 14px;
    z-index: 1;
}
/* CSS to hide elements with the class 'hide-mobile' on mobile devices */
@media only screen and (max-width: 1068px) {
    .hide-mobile {
        display: none !important;
    }
}

.pill-input {
    border: none;
    border-radius: 30px;
    padding: 8px 16px;
    background-color: #f0f0f0;
    font-size: 14px;
    z-index: 1;
    -webkit-appearance: textfield;
}

.sticky-tabs-column {
    position: relative;
}

.sticky-tabs-column {
    position: sticky;
    top: 0;
    z-index: 2
}

.sticky-tabs-column {
    margin-top: -125px;
    margin-bottom: -130px
}

.sticky-tabs-column-tab-landscape {
    position: relative;
}

.sticky-tabs-column-tab-landscape {
    position: sticky;
    top: 0;
    z-index: 2
}

.sticky-tabs-column-tab-landscape {
    margin-top: -115px;
    margin-bottom: -90px
}

@media(min-width: 1700px) {
    .following-title-section {
        margin-top:60px
    }
}

@media(min-width: 1200px) and (max-width:1699px) {
    .following-title-section {
        margin-top:30px
    }
}

@media(min-width: 1055px) and (max-width:1200px) {
    .following-title-section {
        margin-top:50px
    }
}

@media(min-width: 1024px) and (max-width:1054px) {
    .following-title-section {
        margin-top:15px
    }
}

@media(max-width: 1023px) {
    .following-title-section {
        margin-top:0
    }
}

.top-card {
    max-height: 150px;
    max-width: 300px;
    min-height: 150px;
    min-width: 300px
}

.top-card2 {
    max-width: 300px;
    min-height: 150px;
    background-size: auto 150px!important;
    background-repeat: no-repeat;
    background-position: 50%
}

#top-gallery .swiper-slide img {
    height: 150px;
    object-fit: cover;
    width: 100%
}

#top-gallery .elementor-lightbox-image {
    height: auto!important
}

.dropdown-contentnewform {
    display: none;
	position: absolute;
/*	background-color: #DDDDDD;*/
	width: 50%;
	left: 0;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

      
   
.dropdownnew:hover .dropdown-contentnewsearch {
  display: block;
}

.dropdown-contentnewsearch {
    width: 50%;
}

/*here to change background search form*/
.dropdown-contentnew-search {
    	display: flex;
	position: absolute;
	background-color: #DDDDDD;
	width: 100%;
     margin: 0 auto; /* Center horizontally */
	
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

#search-panel {
    background-color: #686a6a94;
    position: absolute;
    width: 50%;
    margin-top: -125px;
    margin-bottom: -130px;
    margin-left: 25%;
    margin-right: 25%;
    z-index: 1;
  /*  display: none;*/
    
}

#seach-panel.lower {
    margin-top: 0px;
}

i {
    
}

.fa-plane {
    margin-right: 10px;
}
/* This is your existing CSS for wider screens */
.date-selector {
    display: flex;
}

.date-selector2 {
    display: flex;
}

/* Add a media query to stack the date selector on narrower screens */
@media (max-width: 1064px) {
    .date-selector {
        flex-direction: column;
    }
    
    .date-selector2 {
        flex-direction: column;
    }
    
    .cars-form{
         flex-direction: column;
    }
    
    .group-together {
        padding-top: 10px;
    }
}

/* Add a media query for screens narrower than a certain width */
@media (max-width: 1064px) {
    

    .date-selector {
        margin-top: 10px; /* Add some space between date inputs */
    }
    
    .date-selector2 {
        margin-top: 10px; /* Add some space between date inputs */
    }
}
.cars-form{
         display: flex;
   

    } 

.form-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 400px;
    background: url('https://mly8qiuxzcsh.i.optimole.com/w:auto/h:auto/q:mauto/process:9141/id:e88a2955f06d4a7828a1441ea868896e/https://mycitydreams.com/hotel2-scaled.webp') no-repeat center center;
    background-size: cover;
    opacity: 0.3; /* Adjust the opacity level */
    z-index: -1; /* Place the overlay behind your content */
}

.form-container[data-search-type="Flight"]::before {
  background-image: url('https://mly8qiuxzcsh.i.optimole.com/w:auto/h:auto/q:mauto/process:9143/id:9aae0f7d069aad2d994411c8c2ccf9d1/https://mycitydreams.com/plane-scaled.webp');
}

.form-container[data-search-type="Hotel"]::before {
  background-image: url('https://mly8qiuxzcsh.i.optimole.com/w:auto/h:auto/q:mauto/process:9141/id:e88a2955f06d4a7828a1441ea868896e/https://mycitydreams.com/hotel2-scaled.webp');
}

.form-container[data-search-type="Car-rental"]::before {
  background-image: url('https://mly8qiuxzcsh.i.optimole.com/w:auto/h:auto/q:mauto/process:9138/id:56d59e9f6933c16cbd2d5322f501a493/https://mycitydreams.com/car-hire-scaled-e1693876511802.webp');
}

/*search button carousele*/

.hotel-search-carousel-container {
    width: 100%; /* Adjust the desired width */
    height: 50px;
    overflow: hidden;
     position: relative;
    margin-top: 0px;
    padding: 0px;
    
}

.hotel-search-carousel {
    display: flex;
    transition: transform 0.5s;
    overflow: hidden;
    height: 50px;
    vertical-align: middle;
    
}

.hotel-search-carousel img {
    width: 95px; /* Adjust the desired image width */
    height: 30px;
    object-fit: cover;
    border-radius: 25px;
    border: 2px solid #000; /* Solid border with your preferred color */
   margin: 0px;
    padding: 0px;
}

hotel-search-button {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px; /* Adjust the button width */
    background: rgba(255, 255, 255, 0.5); /* Semi-transparent background */
    border: none;
    cursor: pointer;
    z-index: 1;
}

.hotel-search-prev-button {
    left: 0;
}

.hotel-search-next-button {
    right: 0;
}


.text-buttons {
    width: 100%;
    margin-top: 10px;
    align-items: center;
    align-content: center;
    display: flex;
 
}

.textlink {
    text-decoration-line: none;
    margin: auto;
    color: cadetblue;
}

.textlink:hover {
    font-size: larger;
    font-weight: bolder;
    color: darkslategrey;
}



.hotel-slide {
    flex: 0 0 20%;
}

.hotel-search-carousel-container2 {
    
    flex: 80%; /* Adjust the desired width */
    height: 50px;
    overflow: hidden;
     position: relative;
    margin-top: 0px;
    padding: 0px;
align-items: center;
    align-content: center;
    vertical-align: middle;
    margin: 0px;
    
    

}

.fixed-search-button {
   flex:20%;
    
}

.search-buttons {
    width:100%;
    display: flex;
}

.fixed-button {
    border-radius: 25px;
    border: 2px solid #000;
    height: 37px;
    width: 95px;
  color: whitesmoke;
    background-color: cadetblue;
    
}

.fixed-button:hover {
   
    background-color: darkslategrey;
    
}

.hotel-search-carousel2  {
    display: flex;
    transition: transform 0.5s;
    overflow: hidden;
}







.fa-chevron-right {
    position: relative;
    top: 20px;
  /*  margin-right: 10px;*/
  /*  margin-left: -20px;*/
}


.fa-chevron-left {
    position: relative;
    top: 20px;
   /* margin-left: 20px;*/
    /*margin-right: -10px;*/
}

.Left-buttons {
    flex: 25%;
    display: flex;
    margin-left: 10px;
    text-align: center;
}

.Right-buttons {

    flex: 25%;
    display: flex;
margin-right: 10px;
    text-align: center;
}

.No-buttons {
    flex: 50%;
}

.image-accordian-content-selector {
    width:85%;
    
    align-content: center;
    align-items: center;
    margin: auto;
    
}

.section-heading {
    font-family:"Quintessential";
    color: darkslategray;
    font-size: 29px;
    text-decoration: none;
    margin-top: 55px;
    margin-bottom: 30px;
    align-content: flex-start;
}


#continent-accordion {
    display: flex;
    
    justify-content: space-between;
    align-items: center;
}

.accordion-item {
     position: relative;
    flex: 1;
    overflow: hidden;
    transition: flex 0.5s, width 0.5s;
    cursor: pointer;
    height:350px;
    display: flex; /* Add this line */
    justify-content: center; /* Add this line to center horizontally */
    align-items: center; /* Add this line to center vertically */
}
}

.accordion-item .image {
    flex: 1;
    height: 100%;
    transition: flex 0.5s;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
}

.accordion-item .image img {
    width: auto;
    height: 350px;
    transition: width 0.5s;
    background-size: cover;
    background-position: center center;
    
}

/* Center inactive images vertically and horizontally */
.accordion-item:not(:hover) {
    display: flex; /* Ensure the inactive item is a flex container */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

.accordion-item .item-text {
  
    text-align: center;
    position: absolute;
    top: 0;
    display: none;
    color: white;
    background: rgba(0, 0, 0, 0.3);
    padding: 30px;
    padding-top: 60px;
    width: 100%; /* Set a maximum width as a percentage of the container width */
   opacity: 0;
     height: 350px; /* Added height to fill the container */
   z-index: 1; /* Add this line */
    
}


.accordion-item:hover {
    flex: 3;
    cursor: pointer;
}

.accordion-item:hover .image img {
    width: auto;
    
}




.accordion-item:hover .item-text {
    display: block;
    flex: 3;
    width: 200px;
    padding: 30px;
    opacity: 1;
   
}

accordion-item:hover .item-text .description {
    
    width: 200px;
    
   
}

accordion-item .item-text .description {
    
    width: 200px;
    
   
}

.white {
    color: white;
}

/* Adjust the width of the center column */
.video-column.center {
    width: 65%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center content */
    align-items: center; /* Horizontally center content */
}

/* Update the video-container size */
.video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%; /* Adjust to fill the column width */
    height:0;
    padding-top: 56.25%; /* 16:9 aspect ratio (adjust as needed) */
}
/* Update the overlay-image-for-video size */
.overlay-image-for-video {
    background-image: url('https://mly8qiuxzcsh.i.optimole.com/ikmmxZg-WIlGG3IQ/cb:msOOZp6G.l7gU9tp0/w:auto/id:dd921a1954e44d13ca9b1200c2a45b7c/https/mycitydreams.com/city-frankfurt-cityscape-3660779.webp');
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Set width to 100% */
    padding-top: 56.25%; /* Maintain the 16:9 aspect ratio */
    background-size: cover;
    opacity: 1;
    pointer-events: none;
}

/* Update the play-button-for-video size and position */
.play-button-for-video {
    position: absolute;
    top: 40%; /* Vertically center the play button */
    left: 45%; /* Horizontally center the play button */
    transform: translate(-50%, -50%);
    cursor: pointer;
    animation: pulsate 2s infinite;
}

    .play-button-for-video svg {
            fill: darkslategrey; /* Make the play icon grey */
        }
#play-button-for-video:hover polygon {
    fill: red;
    
}

       @keyframes pulsate {
    0% {
        transform: scale(1);
        opacity: 0.7;
        transform-origin: center;
    }
    50% {
        transform: scale(0.9);
        opacity: 1;
        transform-origin: center;
    }
    100% {
        transform: scale(1);
        opacity: 0.7;
        transform-origin: center;
    }
}

#player {
    position: absolute;
    width: 100%; /* Fill the .video-container */
    height: 100%; /* Fill the .video-container */
     margin-top: -56.25%;
}
.video-selector {
    width:85%;
    align-content: center;
    align-items: center;
    margin: auto;
    
}

.video-column {
            margin: 10px; /* Add spacing between columns */
            text-align: center; /* Center text horizontally */
    align-content: center;
    align-items: center;
    vertical-align: middle;
        }

        /* Left and right columns with 16% width */
        .video-column.left, .video-column.right {
            width: 15%;
        }

        /* Center column with 66% width */
        .video-column.center {
            width: 65%;
        }

        /* Media query for mobile devices */

        @media (max-width: 368px) {
            .column-container-video-menu {
                flex-direction: column; /* Stack columns vertically on mobile */
                margin-top: -15px;
            }
 .video-column.left, .video-column.right {
            width: 80%;
        }
            .video-column {
                width: 100%; /* Full width on mobile */
            }
        }
.column-container-video-menu {
    display: flex;
    justify-content: center;
    height: 100%;
    width: 100%;
        align-items: center;
    vertical-align: middle;
    margin-top: -15px;
    padding-top: -15px;
}

.continent-image-button-label {
    position: absolute;
    top: 40%; /* Vertically align the label */
    left: 50%; /* Horizontally align the label */
    transform: translate(-50%, -50%);
    color: white;
    font-size: 35px;
    font-family: "Quintessential";
    font-weight: bold;
    line-height: 0.8; 
}

  
 @media (min-width: 769px) and  (max-width: 1068px) {
      .continent-image-button-label {
          font-size: 25px;
          
      }
}
@media (min-width: 569px) and (max-width: 768px) {
      .continent-image-button-label {
          font-size: 20px;
          
      }
}
 @media (min-width: 369px) and (max-width: 568px) {
      .continent-image-button-label {
          font-size: 15px;
          
      }
}

 @media  (max-width: 368px) {
      .continent-image-button-label {
          font-size: 35px;
          
      }
}

.image-button img {
    width:100%;
    
}


.image-button {
    position: relative;
    align-content: center;
    margin-top: 15px;
    margin-bottom: 15px;
    
}

.image-link {
    display: block;
    position: relative;
}

.image-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent grey overlay */
    opacity: 0;
    transition: opacity 0.3s;
}

.image-button:hover .image-link::before {
    opacity: 1;
}


/* Container for the video player and overlay */
.video-container-slider {
  width: 100%;
  height: 125px;
  position: relative;
     border-radius: 35px;
   
}

/* Styling the video player (assuming it's an iframe) */
.video-container-slider iframe {
  width: 100%;
  height: 100%;
}

/* Styling for the overlay */
.overlay-image-for-video-slider img{
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: 150px;
  background: rgba(255, 255, 255, 0.8); /* White circle background with opacity */
  display: block;
  justify-content: center;
  align-items: center;
    border-radius: 35px;
}

/* Styling for the play button (grey triangle) */
.play-button-for-video-slider {
  width: 60px; /* Adjust the size as needed */
  height: 60px; /* Adjust the size as needed */
 
  border-radius: 50%; /* Rounded shape for the button */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
    position: absolute;
     top: 50%; /* Vertically center the play button */
    left: 50%; /* Horizontally center the play button */
    transform: translate(-50%, -50%);

}

/* Styling for the play button icon (triangle) */
.play-button-for-video-slider svg {
  width: 40px; /* Adjust the size of the play icon */
  height: 40px; /* Adjust the size of the play icon */
  fill: white; /* White color for the play icon */
}

/* Centering the play button icon in the middle of the button */
.play-button-for-video-slider svg polygon {
  transform: translate(2px, 1px); /* Adjust to center the triangle */
}

/* Cursor pointer for the play button */
.play-button-for-video-slider {
  cursor: pointer;
}

/* Styling for the title */
.title-for-video-slider {
  position: absolute;
  bottom: 5%;
  left: 0;
  width: 70%;
    margin-right: 15%;
    margin-left: 15%;
  background: rgba(0, 0, 0, 0.1); /* Black background with opacity */
  color: white; /* White text color */
  text-align: center;
    
  /* Add padding to the title */
}
.play-button-grey {
  width: 35px;
  height: 35px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.play-button-grey svg {
  fill: darkslategrey;
}

.play-button-grey:hover {
  background: rgba(200, 200, 200, 0.8);
}
/*
.play-button-grey::before {
  content: "";
  width: 35px;
  height: 35px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
}*/
/*
.play-button-grey::before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
}*/

.play-button-grey::before svg {
  fill: darkslategrey;
}

.play-button-grey::before:hover {
  background: rgba(200, 200, 200, 0.8);
}

.play-button-grey::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 17.5px;
  border-color: transparent transparent transparent darkslategrey;
  position: relative;
  top: 1px;
  left: 2px;
}


.swiper-button-next {
   margin-right: -10PX;
       z-index: 2;
}









.video-carousel {
    width: 90%; /* Set your desired width for the visible area */
  overflow: hidden;
  margin: 0 auto; /* To center the container */
}

.swiper-navigation {
    position: relative;
     display: flex;
  justify-content: space-between;
  align-items: center;
    z-index: 2;
  margin-top: -55px; /* Adjust the margin to control the vertical position */
}

.swiper-button-prev {
    margin-left: -10PX;
}




.filter-buttons {
    font-family: "Quintessential";
    margin-top: 70px;
    font-size: 20px;
     display: flex;
     justify-content: space-between;
  align-items: center;
    align-content: center;
}

.activetextbutton {
    color: dodgerblue;
    font-weight: bolder;
}

.filter-button:hover {
    color: cornflowerblue;
    transform: scale(1.05);
}

.slide-transition {
    transition: opacity 0.3s ease-in-out;
}

   .swiper {
      width: 100%;
      height: 100%;
      
    }
     
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
.section-heading-h3{
    font-family:"Quintessential";
    color: darkslategray;
    font-size: 25px;
    text-decoration: none;
    margin-top: 55px;
    margin-bottom: 30px;
    align-content: flex-start;
    
}

.continent-sliders {
    width: 85%;
    align-content: center;
    align-items: center;
    margin: auto;
}

.europe-slider {
    
}



.swiper-button-prev-videos {
    z-index: 2;
    margin-left: -30px;
}

.swiper-button-next-eur {
    margin-right: -10px;
    z-index: 2;
}

.

      #europe-slider{
          height: 450px;
          width:75%;
      }
      #europe-thumbs{
         
          width:60%;
          overflow: hidden;
          height: 130px;
          margin-top: -50px;
         
          
      }
      
   

    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    

    .swiper {
      width: 100%;
    
    }

    .swiper-slide {
      background-size: cover;
      background-position: center;
    }

    .mySwiper2 {
      height: 80%;
      width: 100%;
    }

    .mySwiper {
     width:75%;
      height: 20%;
      box-sizing: border-box;
      padding: 10px 0;
    }

    .mySwiper .swiper-slide {
      width: 25%;
      height: 100%;
      opacity: 1;
        
    }

    .mySwiper .swiper-slide-thumb-active {
      opacity: 0.7;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      }
        
        .image-container-europe {
  position: relative; /* Set the image container to relative position */
}

.text-on-top {
  position: absolute; /* Position the text element absolutely */
  top: 0; /* Adjust the top position as needed */
  left: 0; /* Adjust the left position as needed */
  background: rgba(0, 0, 0, 0.3); /* Background color for better readability */
  color: #fff; /* Text color */
  padding: 5px 10px; /* Add padding for spacing */
}

.column50 {
      flex: 100%;
  padding: 10px;
        }


.columns2equal {
   
   width: 100%;
    align-items: center;
    align-content: center;
    display: flex;
}

.cube {
  position: relative;
}

#aus-cube {
    position: relative;
    margin-top: 170px;
    margin-bottom: 450px;
}

.no-line {
    text-decoration: none
}

.title-on-top {
   
  position: absolute; /* Position the text element absolutely */
  top: 30%; /* Adjust the top position as needed */
  left:30%; /* Adjust the left position as needed */
  background: rgba(0, 0, 0, 0.5); /* Background color for better readability */
  color: #fff; /* Text color */
  padding: 70px  /* Add padding for spacing */

}

.search-flights {
    display: none;
    background-color: aqua;
}



.raised:hover {
    background-color: rgba(95, 158, 160, 0.7); /* Cadetblue with 50% transparency */
 /*set background for hover*/
}




.active-search {
    background-color: rgba(95, 158, 160, 0.7); /* Cadetblue with 50% transparency*/
}





#menu-button {
    width: 5%;
}

#destinations-menu {
    width: 10%;
}

#video-menu {
    width: 10%;
}

#search-bar {
    width: 10%;
    margin-left: 75%;
}



#seach-bar {
    width: 10%;
    align-content: center;
    align-items: center;
    vertical-align: middle;
     display: flex;
            align-items: center;
             vertical-align: middle;
           height:100%;
            justify-content: center;
}

.spacer {
    width: 50%;
}



#spacer {
    width: 50%;
       
}

#language-selector {
    width: 15%;
   
       
}

#language-button {
  
}

.flags {
    width: 70px;
    margin-left: 10px;
     margin-right: 10px;
    margin-top: 5px;
}

.cornflowerblue {
    color:cornflowerblue;
}

.Europe-list {
    display: none;
}

.columnnew6 {
    width: 15%;
    float:left;
    padding-left: 10px;
    display: flex;
    flex-direction: column;
}



#submenus {
    height: 65px;
}

.sub-menu:hover {
    align-content: center;
    background-color: cadetblue;
    color: whitesmoke;
    
}

.sub-menu {
    padding: 10px;
    text-align: center;
}

.arrow {
    display: none;
}

.close-link {
    position: absolute;
    right: 1px;
    top:1px;
   background-color: #162020f7;
    color: whitesmoke;
    display: none;
    
}



.close-x {
    padding-left: 2px;
}

.hotels-only {
    display: block;
}

.flights-only {
    display: none;
}

.cars-only {
    display: none;
}

.not-hotels {
    display: none;
}

.more-button {
    border-radius: 25px;
    background-color: #162020f7;
    color: white;
    padding: 10px;
}

/* For WebKit (Chrome, Safari) */
::-webkit-scrollbar {
  width: 9px; /* Width of the scrollbar */
}

::-webkit-scrollbar-thumb {
  background-color: #888; /* Color of the scrollbar thumb */
  border-radius: 6px; /* Rounded corners of the thumb */
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* Color of the scrollbar track */
}

/* For Firefox */
/* Note: Firefox currently does not support styling the scrollbar directly with CSS, 
         but you can use a combination of pseudo-elements and box-shadow to achieve a similar effect. */
/* Example: */
/* 
   scrollbar-color: thumbColor trackColor;
   scrollbar-width: thin;
*/

/* For both WebKit and Firefox */
/* You can use the following properties for common styling */
/* Example: */
/*
   scrollbar-color: #888 #f1f1f1;
   scrollbar-width: thin;
*/

.scroll {
    overflow: scroll;
    padding: 0;
    margin-right: -22px;
}

/* Hide the horizontal scrollbar */
::-webkit-scrollbar-horizontal {
  display: none;
}
.rownew {
    display: flex;
    justify-content: space-evenly;
}


@media screen and (min-width: 801px) {
  /*  #destinations-menu {
        width: 25%;
    }
    #video-menu {
        width: 0%;
    }
    #spacer {
        width: 60%;
    }*/
    #search-panel {
        width: 50%;
        margin-left:25%;
        margin-right: 25%;
    }
    /*
    #seach-bar {
        width: 0%;
    }
    
    #language-selector {
        width: 25%;
    }
    
    .Left-buttons{
        flex: 20%;
        flex-direction: column;
        font-size: smaller;
    }
    
    .Right-buttons{
        flex: 20%;
        flex-direction: column;
        font-size: smaller;
        margin-left: 15px;
    }
    .No-buttons{
        flex:65%;
    }*/
}


@media screen and (max-width: 800px) {
    #destinations-menu {
        width: 25%;
    }
    #video-menu {
        width: 0%;
    }
    #spacer {
        width: 60%;
    }
    #search-panel {
        width: 60%;
        margin-left:20%;
        margin-right: 20%;
    }
    #seach-bar {
        width: 0%;
    }
    
    #language-selector {
        width: 25%;
    }
    
    .Left-buttons{
        flex: 20%;
        flex-direction: column;
        font-size: smaller;
    }
    
    .Right-buttons{
        flex: 20%;
        flex-direction: column;
        font-size: smaller;
        margin-left: 15px;
    }
    .No-buttons{
        flex:65%;
    }
}

@media screen and (max-width: 500px) {
    #destinations-menu {
        width: 0%;
    }
    #video-menu {
        width: 0%;
    }
    #spacer {
        width: 0%;
    }
    #search-panel {
        width: 80%;
        margin-left:10%;
        margin-right: 10%;
    }
    #seach-bar {
        width: 0%;
    }
    
    #language-selector {
        width: 0%;
    }
    #menu-button {
        width: 10%;
    }
    
    .textlink{
        display: none;
    }
    
    .image-accordian-content-selector{
        margin-top: 130px;
    }
}
.group-together {
    display: flex;
}

.privacy-policy-h2 {
    color: cadetblue;
    text-decoration: none;
    font-size: 17px;
}