* {margin:0; padding:0;}

html, body
{
  height: 100%;
  font-size: 100%;
  text-align: center;
  scroll-behavior: smooth;
}

h1 { 
  font-family: Helvetica,Arial,sans-serif; 
  color: white; 
  font-weight: bold; 
  text-shadow: black 2px 2px;
}

h2 {
  text-align: justify; 
  color: rgb(0, 255, 0); 
  text-shadow: black 2px 2px; 
  font-family: Helvetica,Arial,sans-serif;
  font-size: 100%;
}

h3 {
  text-align: justify; 
  color: rgb(0, 255, 0); 
  text-shadow: black 2px 2px; 
  font-family: Helvetica,Arial,sans-serif;
  font-size: 100%;
}

hr { 
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 2px;
} 

@media screen and (max-width: 800px) { body {font-size: 110%;} }
@media not screen and (max-width: 800px) { body {font-size: 110%;} }
@media screen and (max-width: 400px) { body {font-size: 90%;} }

/* Text on the index.html page */
@media screen and (max-width: 800px) { .indextext { transform: translate(-55%, -50%); -ms-transform: translate(-55%, -50%); font-size: 100%; width: 65%;} } /* smartphone */
@media not screen and (max-width: 800px) { .indextext { transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); font-size: 100%; width: 60%;} } /* computer */
@media screen and (max-width: 400px) { .indextext { transform: translate(-60%, -50%); -ms-transform: translate(-60%, -50%); font-size: 80%; width: 60%;} } /* old mobile */

/* Summary text on page */
@media screen and (max-width: 800px) { .sumtext {font-size: 110%;} }
@media not screen and (max-width: 800px) { .sumtext {font-size: 110%;} }

/* Buttons to change site summer/winter theme */
@media screen and (max-width: 800px) { .sitethemeindex {width: 45px;} }
@media not screen and (max-width: 800px) { .sitethemeindex {width: 55px;} }
@media screen and (max-width: 400px) { .sitethemeindex {width: 45px;} }

/* Symbol of Menu button -- the three lines */
@media screen and (max-width: 800px) { .menu {height: 60px;} }
@media not screen and (max-width: 800px) { .menu {height: 60px;} }
@media screen and (max-width: 400px) { .menu {height: 50px;} }

/* Symbol of Menu button for newsletter.html -- the three lines */
@media screen and (max-width: 800px) { .menunews {height: 60px;} }
@media not screen and (max-width: 800px) { .menunews {height: 60px;} }
@media screen and (max-width: 400px) { .menunews {height: 50px;} }

/* Logo Landscape BAP1 */
@media screen and (max-width: 800px) { .logo {width: 600px; left: 0px;} }
@media not screen and (max-width: 800px) { .logo {height: 600px; left: 0px;} }
@media screen and (max-width: 400px) { .logo {height: 350px; left: 0px;} }

/* Important notice */
@media screen and (max-width: 800px) { .importantnotice {left: 29px; top: 110px; width: 333px;} }
@media not screen and (max-width: 800px) { .importantnotice {left: 29px; top: 110px; width: 333px;} }
@media screen and (max-width: 400px) { .importantnotice {left: 29px; top: 100px; width: 272px;} }

/* Social media buttons */
@media screen and (max-width: 800px) { .socialmedia {width: 45px;} }
@media not screen and (max-width: 800px) { .socialmedia {width: 45px;} }
@media screen and (max-width: 400px) { .socialmedia {width: 40px;} }

/* Contact options images */
@media screen and (max-width: 800px) { .contact {height: 125px;} }
@media not screen and (max-width: 800px) { .contact {height: 75px;} }
@media screen and (max-width: 400px) { .contact {height: 75px;} }

/* Plus images */
@media screen and (max-width: 800px) { .plusimg {height: 50px;} }
@media not screen and (max-width: 800px) { .plusimg {height: 30px;} }
@media screen and (max-width: 400px) { .plusimg {height: 30px;} }

/* Text on page */ /*don't forget that the image gallery margins depend on this - search "slideshow-container" */
@media screen and (max-width: 800px) { .infotxt {padding: 25px;} }
@media not screen and (max-width: 800px) { .infotxt {padding: 50px;} }

/* Price table */
@media screen and (max-width: 800px) { .pricetable {width: 330px;} }
@media not screen and (max-width: 800px) { .pricetable {width: 350px;} }
@media screen and (max-width: 400px) { .pricetable {width: 100%;} }

/* Cookie consent */
@media screen and (max-width: 800px) { .modalcookie-content { font-size: 110%; width: 350px;} } /* smartphone */
@media not screen and (max-width: 800px) { .modalcookie-content { font-size: 110%; width: 350px;} } /* computer */
@media screen and (max-width: 400px) { .modalcookie-content { font-size: 110%; width: 250px;} } /* old mobile */

/* Kp 3 days forecast */
@media screen and (max-width: 800px) { .kp3 { font-size: 80%;} } /* smartphone */
@media not screen and (max-width: 800px) { .kp3 { font-size: 100%;} } /* computer */
@media screen and (max-width: 400px) { .kp3 { font-size: 70%;} } /* old mobile */

div.loading-invisible { display:none; }
div.loading-visible { display:block; position:absolute; top: 50%; left:0; width:100%; text-align:center; z-index: 1; }

a {text-decoration: underline; color: rgb(0, 255, 0);}
a:hover {text-decoration: none;}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: black;
    overflow-x: hidden;
    transition: 0.5s;
    /*padding-top: 10px;*/ /* asta am anulat cand am facut bannerul */
    text-align:center;
}

.sidenav a {
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    /*display: block;*/
    transition: 0.3s;

}

.sidenav a:hover{
    color: #f1f1f1;
}

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

@media screen and (max-width: 800px) {
  /*.sidenav {padding-top: 15px;}*/ /* asta am anulat cand am facut bannerul */
  .sidenav a {font-size: 25px;}
}



/* MENU and MENU-LOW BREAKPOINT */

[class*="col-"] {
    float: left;
}

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media screen and (max-width: 800px) {
    [class*="col-"] {width: 100%;}
}

/* END OF BREAKPOINT */

/* ================= SIDE (MAIN) MENU ===================== */

.menustyle {
	font-family: Helvetica,Arial,sans-serif; 
	color: grey; 
	font-weight: bold; 
	text-align: center;
}

/* ================= END OF SIDE (MAIN) MENU ===================== */

/* ================= LOW MENU ===================== */

.menulow {
	font-family: Helvetica,Arial,sans-serif; 
	color: rgb(153, 153, 153); 
	font-weight: normal; 
	text-align: center;
}

a.menulow:link { text-decoration: none; color: rgb(153, 153, 153); font-weight: normal; }
a.menulow:visited { text-decoration: none; color: rgb(153, 153, 153); font-weight: normal; }
a.menulow:hover { text-decoration: none; color: white; font-weight: normal; }
a.menulow:active { text-decoration: none; color: rgb(153, 153, 153); font-weight: normal; }

/* ================= END OF LOW MENU ===================== */

/* ================= PRICE OVERLAY ===================== */

#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.8);
    z-index: 2;
    cursor: pointer;
}

#text{
    position: absolute;
    top: 50%;
    left: 50%;
    color: white;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
}

/* ================= END OF PRICE OVERLAY ===================== */

/* ================= PICTURE GALLERY ===================== */


* {box-sizing: border-box}

.slideshow-container {
  position: relative;
  margin: auto;
  width: 100%;
  height: 100vh;
  z-index: 0;
}

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

.Bckg2 {
  object-fit: cover;
  width: 100%;
  height: 100vh;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%); 
  -ms-transform: translate(0, -50%);
  width: auto;
  color: white;
  font-weight: bold;
  font-size: 26px;
  transition: 0.6s ease;
  padding-top: 60px;
  padding-bottom: 60px;
  padding-left: 25px;
  padding-right: 25px;
  user-select: none;
}

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

.prev {
  left: 0;
  border-radius: 0 15px 15px 0;
}

/* 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);
}

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

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* ================= END OF PICTURE GALLERY ===================== */

/* ================= FEATURE (HELP) TOUR ===================== */

#featuretour {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.9);
	z-index: 2;
	cursor: pointer;
}

/* Access the main menu here */
#featuretext1 {
	font-family: Helvetica,Arial,sans-serif;
	font-size: 16px;
	position: absolute;
	top: 4px;
	left: 10px;
	color: grey;
	background-color: black;
	padding: 10px;
	z-index: 11;
}
	
/* Change page theme here */
#featuretext2 {
	font-family: Helvetica,Arial,sans-serif;
	font-size: 16px;
	position: absolute;
	top: 30%;
	right: 70px;
	color: grey;
	background-color: black;
	padding: 10px;
	z-index: 11;	
}
	
/* Click anywhere to start browsing */
#featuretext3 {
	font-family: Helvetica,Arial,sans-serif;
	font-size: 110%;
	position: absolute;
	bottom: 25px;
	left: 50%;
	text-align: center;
	color: white;
	background-color: green;
	padding: 10px;
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	z-index: 11;
}	
	
/* Scroll each page */
#featuretext4 {
	font-family: Helvetica,Arial,sans-serif;
	position: absolute;
	bottom: 1%;
	left: 50%;
	text-align: center;
	color: grey;
	font-size: 16px;
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
}	
	
/* ================= END OF FEATURE (HELP) TOUR ===================== */

/* ================= sizeSize ===================== */

/* Popup container - can be anything you want */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* The actual popup */
.popup .popuptext {
    visibility: hidden;
    width: 260px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 6;
    top: 15px;
    right: 25px;
    margin-left: -80px;
}

/* Popup arrow
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}*/

/* Toggle this class - hide and show the popup */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}

/* ================= END OF sizeSize ===================== */

/* ================= CHANGE LANGUAGE ===================== */

#changelanguage {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,1);
	z-index: 3;
	cursor: pointer;
}

#changelanguage1 {
	font-family: Helvetica,Arial,sans-serif;
	font-size: 22px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: 0;
	margin-right: -50%;
	text-align: left;
	color: white;
	background-color: black;
	padding: 10px;
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
}	

a.changelanguagetext:link {
	color: grey; 
	font-weight: bold; 
	text-decoration: none;
	font-size: 25px;
}

a.changelanguagetext:visited {
	color: grey; 
	font-weight: bold; 
	text-decoration: none;
	font-size: 25px;
}

a.changelanguagetext:active {
	color: grey; 
	font-weight: bold; 
	text-decoration: none;
	font-size: 25px;
}

a.changelanguagetext:hover {
	color: white;
}

/* ================= END OF CHANGE LANGUAGE ===================== */

/* ================= COLLAPSIBLE TERMS ===================== */
.collapsible {
    background-color: darkgreen;
    color: white;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: center;
	text-shadow: black 2px 2px;
    outline: none;
	font-size: 100%;
	font-weight: bold;
}

.collapsible:hover {
    background-color: green;
}

.active:hover {
    background-color: darkgreen;
}

.collapsible:after {
    content: '\002B';
    color: white;
    font-weight: bold;
    float: left;
    margin-left: 5px;
}

.active:after {
    content: "\2212";
}

.content {
    padding: 0 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: rgb(0, 60, 0);
    font-family: Helvetica,Arial,sans-serif;
    color: white;
    text-align: justify;
}

/* ================= END COLLAPSIBLE TERMS ===================== */

/* ================= COLLAPSIBLE PLUS TERMS ===================== */
.collapsibleplus {
    background-color: darkred;
    color: white;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: center;
	text-shadow: black 2px 2px;
    outline: none;
	font-size: 100%;
	font-weight: bold;
}

.activeplus, .collapsibleplus:hover {
    background-color: firebrick;
}

.collapsibleplus:after {
    content: '\002B';
    color: white;
    font-weight: bold;
    float: left;
    margin-left: 5px;
}

.activeplus:after {
    content: "\2212";
}

.contentplus {
    padding: 0 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: rgb(0, 60, 0);
    font-family: Helvetica,Arial,sans-serif;
    color: white;
    text-align: justify;
}

/* ================= END COLLAPSIBLE PLUS TERMS ===================== */

/* ================= COLLAPSIBLE KP SPONSORS ===================== */
.collapsiblekp {
    background-color: darkgreen;
    cursor: pointer;
    padding: 20px;
    width: 100%;
    border: none;
    text-align: center;
	text-shadow: black 0px 0px;
    outline: none;
	font-size: 100%;
	font-weight: bold;
}

.collapsiblekp:hover {
    
}

.activekp:hover {
    
}

.collapsiblekp:after {
    
}

.activekp:after {
   
}

.contentkp {
    padding: 0 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: rgb(0, 60, 0);
    font-family: Helvetica,Arial,sans-serif;
   	text-shadow: black 0px 0px;
}

/* ================= END COLLAPSIBLE KP SPONSORS ===================== */

/* ================= COLLAPSIBLE BASE PRICE ===================== */
.collapsibleprice {
    background-color: lightgrey;
    color: black;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: center;
	text-shadow: black 2px 2px;
    outline: none;
	font-size: 100%;
	font-weight: bold;
}

.activeprice:hover {
    background-color: grey;
}

.collapsibleprice:hover {
    background-color: grey;
}

.collapsibleprice:after {
    content: '\002B';
    color: black;
    font-weight: bold;
    float: left;
    margin-left: 5px;
}

.activeprice:after {
    content: "\2212";
}

.contentprice {
    padding: 0 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: rgb(0, 60, 0);
    font-family: Helvetica,Arial,sans-serif;
    color: white;
    text-align: justify;
}

/* ================= END COLLAPSIBLE BASE PRICE ===================== */

/* ================= COLLAPSIBLE ARCTIC ESSENTIALS QUESTIONS ===================== */
.collapsible3 {
    background-color: darkgreen;
    color: white;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: center;
	text-shadow: black 2px 2px;
    outline: none;
	font-size: 100%;
	font-weight: bold;
}

.collapsible3:hover {
    background-color: green;
}

.active3:hover {
    background-color: darkgreen;
}

.collapsible3:after {
    /*content: '\002B';*/
    color: white;
    font-weight: bold;
    float: left;
    margin-left: 5px;
}

.active3:after {
    /*content: "\2212";*/
}

.content3 {
    padding: 0 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: rgb(0, 60, 0);
    font-family: Helvetica,Arial,sans-serif;
    color: white;
    text-align: justify;
}

/* ================= END COLLAPSIBLE TERMS ===================== */

/* ================= COLLAPSIBLE BANNER ===================== */
.collapsiblebanner {
    background-color: darkorange;
    color: white;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: center;
	text-shadow: black 2px 2px;
    outline: none;
	font-size: 100%;
	font-weight: bold;
}

@-webkit-keyframes glowing {
  0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
}

@-moz-keyframes glowing {
  0% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; -moz-box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
}

@-o-keyframes glowing {
  0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
}

@keyframes glowing {
  0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
}
	
.collapsiblebanner:hover {
    background-color: orange;
}

.activebanner:hover {
    background-color: orange;
}

.collapsiblebanner:after {
    color: white;
    font-weight: bold;
    float: left;
    margin-left: 5px;
}

.contentbanner {
    padding: 0 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.8s ease-out;
    background-color: rgb(0, 60, 0);
    font-family: Helvetica,Arial,sans-serif;
    color: white;
    text-align: justify;
}

.contentbannertext {
    background: darkorange;
}

@media screen and (max-width: 1000px) { .contentbannertext { padding-right: 25px; padding-left: 31px; padding-bottom: 10px;} } /* smartphone */
@media not screen and (max-width: 1000px) { .contentbannertext { padding-right: 50px; padding-left: 50px; padding-bottom: 10px;} } /* computer */
@media screen and (max-width: 400px) { .contentbannertext { padding-right: 25px; padding-left: 26px; padding-bottom: 10px;} } /* old mobile */

/* ================= END COLLAPSIBLE BANNER ===================== */

/* ================= BOOK NOW BUTTON ===================== */

.bbtn {
  border: none;
  background-color: lightgrey;
  color: black;
  padding: 14px 28px;
  font-size: 100%;
  cursor: pointer;
}

.bbtnscroll {
  border: none;
  background-color: lightgrey;
  color: black;
  padding: 14px 28px;
  font-size: 100%;
  cursor: pointer;
}

.booknow {
  border-color: #4CAF50;
  color: green;
}

.booknow:hover {
  background-color: green;
  color: white;
}

.booknowplus {
  border-color: darkred;
  color: darkred;
}

.booknowplus:hover {
  background-color: lightcoral;
  color: white;
}

/* ================= END BOOK NOW BUTTON ===================== */

/* ================= COOKIE CONSENT ===================== */

/* The Modal (background) */
.modalcookie {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  bottom: 0px;
  right: 0px;
  z-index: 10; /* Sit on top */
  /*overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0); /* Black w/ opacity */
  border-radius: 0px;
}

/* Modal Content */
.modalcookie-content {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  text-align: left;
  background-color: rgb(40,40,40);
  color: white;
  padding: 20px;
  width: 100%;
  height: 100%;
}

/* The Close Button */
.closecookie {
  display: block;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  float: bottom;
  font-size: 100%;
  font-weight: bold;
  background: rgb(0, 200, 0);
  padding: 10px;
  border-radius: 20px;
}

.closecookie:hover,
.closecookie:focus {
  text-decoration: none;
  cursor: pointer;
  background: rgb(0, 230, 0);
}

/* ================= END COOKIE CONSENT ===================== */

/* ================= BOOKING MODAL ===================== */

/* The Modal (background) */
.modalbooking {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 11; /* Sit on top */
  padding-top: 20px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content */
.modalbooking-content {
  /*background-color: #fefefe;*/
  margin: auto;
  /*padding: 20px;*/
  /*border: 1px solid #888;*/
}

@media screen and (max-width: 1000px) { .modalbooking-content { width: 100%;} } /* smartphone */
@media not screen and (max-width: 1000px) { .modalbooking-content { width: 48%;} } /* computer */
@media screen and (max-width: 400px) { .modalbooking-content { width: 100%;} } /* old mobile */

/* The Close Button */
.closebooking {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.closebooking:hover,
.closebooking:focus {
  color: grey;
  text-decoration: none;
  cursor: pointer;
}

.booknowAbtn {
  border: none;
  background-color: coral;
  color: white;
  padding-top: 5px;
  padding-bottom: 15px;
  padding-right: 20px;
  padding-left: 20px;
  font-size: 100%;
  cursor: pointer;
  position: fixed;
  bottom: -10px;
  right: 20px;
  border-radius: 10px;
  z-index: 2;
  box-shadow: 0.2px -0.2px 3px black;
}

.booknowAbtn:hover {
  background-color: chocolate;
  color: lightgrey;
}

@media screen and (max-width: 800px) { .booknowAbtn { font-size: 100%;} } /* smartphone */
@media not screen and (max-width: 800px) { .booknowAbtn { font-size: 100%;} } /* computer */
@media screen and (max-width: 400px) { .booknowAbtn { font-size: 80%;} } /* old mobile */

.booknowAbtnplus {
  border: none;
  background-color: firebrick;
  color: white;
  padding-top: 5px;
  padding-bottom: 15px;
  padding-right: 20px;
  padding-left: 20px;
  font-size: 100%;
  cursor: pointer;
  position: fixed;
  bottom: -10px;
  right: 20px;
  border-radius: 10px;
  z-index: 2;  
  box-shadow: 0.2px -0.2px 3px black;
}

.booknowAbtnplus:hover {
  background-color: darkred;
  color: lightgrey;
}

@media screen and (max-width: 800px) { .booknowAbtnplus { font-size: 100%;} } /* smartphone */
@media not screen and (max-width: 800px) { .booknowAbtnplus { font-size: 100%;} } /* computer */
@media screen and (max-width: 400px) { .booknowAbtnplus { font-size: 80%;} } /* old mobile */

/* ================= END BOOKING MODAL ===================== */

/* ================= READ MORE ================= */

#more {display: none;}

.morebtn {
  border: none;
  background-color: rgb(0, 70, 0);
  color: lightgrey;
  padding: 8px 16px;
  font-size: 100%;
  cursor: pointer;
  border-radius: 20px;
  box-shadow: 1.5px 1.5px black;
}

.morebtn:hover {
  background-color: rgb(0, 120, 0);
  color: white;
}

.morebtnplus {
  border: none;
  background-color: firebrick;
  color: lightgrey;
  padding: 8px 16px;
  font-size: 100%;
  cursor: pointer;
}

.morebtnplus:hover {
  background-color: darkred;
  color: white;
}

/* ================= END OF READ MORE ================= */

/* ================= INDEX BUTTONS ================= */

.ixbtn {
  border: none;
  background-color: green;
  color: white;
  padding: 4px 12px;
  cursor: pointer;
  border-color: #4CAF50;
  font-size: 90%;
  font-family: Arial, Helvetica, sans-serif;
  text-shadow: black 2px 2px; 
  border-radius: 25px;
}

.ixbtn:hover {
  background-color: darkgreen;
  color: white;
}  
    
/* ================= END OF INDEX BUTTONS ================= */

/* ================= ALERT BOX =================== */

.alertbox {
  padding: 20px;
  background-color: #f44336;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

.alertboxclosebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.alertboxclosebtn:hover {
  color: black;
}

/* ================= END OF ALERT BOX =================== */

/* ================= SCROLL FOR MORE INFO BUTTON =================== */

.moreinfoscrollbtn {
  border: none;
  background-color: rgba(200,200,200,0.4);
  color: white;
  padding: 5px;
  cursor: pointer;
  position: fixed;
  bottom: 50px;
  border-radius: 20px;
  z-index: 2;
}

.moreinfoscrollbtn:hover {
  background-color: chocolate;
  color: lightgrey;
}

@media screen and (max-width: 800px) { .moreinfoscrollbtn { font-size: 100%;} } /* smartphone */
@media not screen and (max-width: 800px) { .moreinfoscrollbtn { font-size: 100%;} } /* computer */
@media screen and (max-width: 400px) { .moreinfoscrollbtn { font-size: 80%;} } /* old mobile */

.moreinfohide {
    opacity: 0;
    left: -100%;
}
.moreinfoshow {
    opacity: 1;
    left: 50%;
}

/* ================= END OF SCROLL FOR MORE INFO BUTTON =================== */

/* ================= BOX CARDS APPLI =================== */

* {
  box-sizing: border-box;
}

/* Float four columns side by side */
.column {
  float: left;
  width: 33.33%;
  padding: 3px 5px;
}

/* Remove extra left and right margins, due to padding */
.row {margin: 2px 5px;}

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

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  border-radius: 10px;
}

.flip-card {
  background-color: #4d4d4d;
  width: 100%;
  height: 135px;
  perspective: 2000px;
  border-radius: 10px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

/*
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
*/

input[type='checkbox'] {
    display: none;
}

:checked + .flip-card-inner {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}



.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 10px;
}

.flip-card-front {
  background-color: #4d4d4d;
  color: white;
}

.flip-card-back {
  background-color: #4d4d4d;
  color: white;
  transform: rotateY(180deg);
}

/* ================= END OF BOX CARDS APPLI =================== */

/* ================= NOTIFICATION BADGE =================== */

.badge {
  background-color: red;
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  position: absolute;
  z-index: 9;
  font-weight: bold;
  left: 20px;
  font-family: Helvetica,Arial,sans-serif;
  font-size: 80%;
}

/* ================= END OF NOTIFICATION BADGE =================== */

/* ================= COUNTRY CODE =================== */

.countrycode {
	text-align: left;
	color: black;
	text-shadow: black 1px 1px;
	font-family: Helvetica,Arial,sans-serif;
	font-size: 60%;
	font-weight: normal;
	background-color: lightgrey;
	border-radius: 10px;
	padding: 4px 3px;
	vertical-align: 4px;
}

/* ================= END OF COUNTRY CODE =================== */

/* ================= MESSAGE AREA REPORT AURORA =================== */

.messagearea {
	text-align: justify !important;
	padding-left: 10px;
	padding-right: 10px;
	color: white;
	text-shadow: black 1px 1px;
	font-family: Helvetica,Arial,sans-serif;
	font-size: 60%;
	line-height: 100% !important;
}

/* ================= END OF MESSAGE AREA REPORT AURORA =================== */