.gradientLeft { 
background-image: -webkit-linear-gradient(right, #F2F2F2 , #FFFFFF); /* For Safari 5.1 to 6.0 */
background-image: -o-linear-gradient(left, #F2F2F2, #FFFFFF); /* For Opera 11.1 to 12.0 */
background-image: -moz-linear-gradient(left, #F2F2F2, #FFFFFF); /* For Firefox 3.6 to 15 */
background-image:linear-gradient(to left, #F2F2F2, #FFFFFF);
width: 5%;
height: 100%;
background-color: #FFFFFF;
}
.gradientRight {
background-image: -webkit-linear-gradient(left, #F2F2F2 , #FFFFFF); /* For Safari 5.1 to 6.0 */
background-image: -o-linear-gradient(right, #F2F2F2, #FFFFFF); /* For Opera 11.1 to 12.0 */
background-image: -moz-linear-gradient(right, #F2F2F2, #FFFFFF); /* For Firefox 3.6 to 15 */
background-image:linear-gradient(to right, #F2F2F2, #FFFFFF);
width: 5%;
height: 100%;
background-color: #FFFFFF;
}


.caret {border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid #ffffff;}
.caret.caret-up {border-left: 10px solid transparent;border-right: 10px solid transparent;border-top-width: 0;border-bottom: 10px solid #ffffff;}
.btn1 {width: 100%; background-color: #000; font-size: 22px; padding: 8px;}
.btn1.btn-primary {background-color: #000;border: none;color: white;padding: 8px 8px;text-align: center;text-decoration: none;display: inline-block;font-size: 22px;}
.btn1.btn-primary:hover {background-color:#999999;}
.btn2 {width: 100%; background-color: #000; font-size: 22px; padding: 8px;}
.btn2.btn-primary {background-color: #000;border: none;color: white;padding: 8px 8px;text-align: center;text-decoration: none;display: inline-block;font-size: 22px;}
.btn2.btn-primary:hover {background-color:#999999;}
p.ex2 {padding: 0cm 0.3cm 0cm ;}
.btnFooter {width: 100%; background-color: #000; font-size: 17px; padding: 8px;}
a.buttonFooter {
	width: 100%;
    background-color: #000000;
    padding: 8px;
    text-align: center;
    text-decoration: none;
	border: 4px;
    display: inline-block;
    font-size: 17px;
    cursor: pointer;
	border-style:ridge;
    border-width: 2px;
    border-color:#CCCCCC;    
}

html {
    padding: 0;
    margin: 0;
}
body {
padding-top:0px;
padding-right:0px;
padding-bottom: 0px;
padding-left: 0px;
background-color:#000000;
}
.header {position: fixed; top: 0px; left: 0px; cellspacing: 0; cellpadding:0; border:0; width:100%; }
.bodyEdit {background-color:#FFFFFF; margin-top: 140px; width: 100%; padding-left: 2%; padding-right: 2%;}
.footer {background-color:#000000; padding: 0px 0px 0px 0px; width: 100%;}
.style1 {font-family: 'Open Sans', sans-serif;font-size:calc(14px + 0.5vw); color: #6E6E6E; font-weight: bold;}
.style2 {font-family: 'Open Sans', sans-serif;font-size:calc(14px + 0.2vw); color: #6E6E6E;}
.style3 {font-family: 'Open Sans', sans-serif;font-size:calc(14px + 0.1vw); color: #6E6E6E;}
.style9 {font-family: 'Open Sans', sans-serif;}
.style10 {font-family: "Brush Script MT"; font-size: calc(24px + 0.8vw);color: #6E6E6E;}
.style11 {font-family: "Brush Script MT"; font-size: calc(18px + 0.8vw);color: #6E6E6E;}
.styleh1 {font-family: "Brush Script MT"; padding-top: 130px; margin-top: -130px; font-size: calc(24px + 0.8vw); color: #6E6E6E;}
.styleh2 {font-family: "Brush Script MT"; padding-top: 130px; margin-top: -130px; font-size:calc(22px + 0.8vw); color: #6E6E6E;}
.styleh3 {font-family: "Brush Script MT"; font-size:calc(20px + 0.8vw); color: #6E6E6E;}

.imgBox { height: 100;} 
.imgBox:hover { -moz-box-shadow: 0 0 10px #ccc; -webkit-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc; } 
p.ex1 {max-height: 4px; padding-top: 4px; padding-bottom: 0px}
p.ex2 {padding: 0cm 0.3cm 0cm ;}

.row {display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;padding: 0 20px;}
.column {-ms-flex: 25%; flex: 25%;max-width: 25%;padding: 0 4px;}

.row100{display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%;}
/*.column25 {-ms-flex: 25%; flex: 25%;max-width: 25%;}*/
.column25{flex: 0 1 auto; display: flex; flex-direction: column; width: 25%;}
.column50{flex: 0 1 auto; display: flex; flex-direction: column; width: 50%;}
.column100{flex: 0 1 auto; display: flex; flex-direction: column; width: 100%;}

.topnav {display:table; /* centers modern browsers */margin:0 auto; /* centers modern browsers */text-align:center; /* centers IE6/7 */background-color: #000000;}
.topnav ul {list-style:none;display:inline-block; /* IE6/7 haslayout trip-switch */}
.topnav ul {display:inline; /* IE6/7 haslayout trip-switch, and IE6/7 only need ul to be display inline, yet does no harm to others */}
.topnav .icon {display: none;}
.topnav .textSize {font-size:17px;}
.topnav li {display:inline;}
.topnav a {font-family: 'Open Sans', sans-serif; float:left;display: block;color: #FFFFFF;background-color: #000000;text-align: center; padding: 10px 12px;text-decoration: none;font-size: calc(14px + 0.5vw);}
.topnav a:hover {background-color:#999999;color: black;}

.accomodationCard {padding: 4px 8px 0px 8px;}
.card {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); max-width: 300px;margin: auto;text-align: center;font-family: arial;padding: 8px;}

a.button {border: none;outline: 0;display: inline-block; padding-top: 4px; padding-bottom: 4px;color: white;background-color: #000;text-align: center;cursor: pointer;width: 100%;font-size: 16px;}
a.button {text-decoration: none;font-size: 22px;color: #FFFFFF;}
a.button:hover, a:hover {opacity: 0.7;background-color: #999999;}


.column50Padding {4px 8px 4px 8px;}

.furtherInfo {height:120px}
.enquiryStyle {padding-top: 20px; padding-left: 8px;}
.mapStyle {width:90%;height:350px}
.closeModalStyle {padding-top: 80px; cursor:pointer}
.imgRadius30 {border-radius: 30%;}
.layoutItemStyle {text-align:center; margin-left: 4px}
.topPadding2 {padding-top: 2px}
.topPadding4 {padding-top: 4px}
.padding10 {padding: 10px}
.specialsColour {color:#339999}
.priceCardColour {background-color:#FFFFFF}
a.buttonWhite {background-color:#FFFFFF; color:#000000}
.dontDisplay {display:none}
.rowPadding120 {padding-top: 120px;}

div.2 {font-family: 'Open Sans', sans-serif;color: #6E6E6E;font-size: 12px;padding: 2px 5px 2px 10px;} 
div.title {font-family: 'Open Sans', sans-serif;color: #6E6E6E;font-size: 16px;font-weight:bold;padding: 2px 5px 2px 10px;}

.btnclose { background-color: #555555; border: none; color: white; padding: 10px 15px; text-align: center; font-size: 16px; margin: 4px 2px; opacity: 0.6; transition: 0.3s; display: inline-block; text-decoration: none;  cursor: pointer;  border-radius: 12px; width: 100%;}
tab1 { padding-left: 4em; }
.responsive2 { width: 80%; height: auto;}
p.amenities { text-align: left;}

@media screen and (max-width: 600px) {
	p.amenities {padding-left: 4em;}
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
	.column25{flex: 1 1 auto; display: flex; flex-direction: column; width: 50%;}
}
@media screen and (max-width: 600px) {
	.topnav {display:block;}
	.column25{flex: 1 1 auto; display: flex; flex-direction: column; width: 100%;}
	.column50{flex: 1 1 auto; display: flex; flex-direction: column; width: 100%;}
}
@media screen and (max-width: 600px) {
	.topnav a {display: none;}
	.topnav a.icon {float: right;display: block;}
}
@media screen and (max-width: 600px) {
	.topnav.responsive {position: relative;}
	.topnav.responsive .icon {position: absolute;right: 0;top: 0;}
	.topnav.responsive a {float: none;display: block;text-align: left;}
	.btn1.btn-primary {font-size: 18px;}
	.btn2.btn-primary {font-size: 18px;}
}
@media (max-width: 600px) {
	.reverse-column-order {flex-direction: column-reverse;}
	.column-order {flex-direction: column;}
}
.content {max-width: 600px;margin: auto;background: white;padding: 10px;}
.maxPicWidth {max-width:1200px}
.header{z-index: 10000; position: fixed; top: 0; width: 100%; background-color:#000000}
.picPadding {padding: 4px 4px 4px 4px; width: 100%}


input[type=text], select, textarea {width: 100%;padding: 10px;border: 1px solid #ccc;border-radius: 4px;resize: vertical;}
label {padding: 10px 10px 10px 0;display: inline-block;}
input[type=submit] {background-color: #000000;color: white;padding: 10px 20px;border: none;border-radius: 4px;cursor: pointer;float: right;}
input[type=reset] {background-color: #000000;color: white;padding: 10px 20px;border: none;border-radius: 4px; cursor: pointer; float: right;}
input[type=submit]:hover {background-color: #999999;}
input[type=reset]:hover {background-color: #999999;}

.container2 {border-radius: 5px;background-color: #f2f2f2;padding: 20px; width:	100%}
.col-25 {float: left;width: 25%;margin-top: 6px;}
.col-33 {float: left;width: 33.3%;margin-top: 6px;}
.col-50 {float: left;width: 50%;margin-top: 6px;}
.col-75 {float: left;width: 75%; margin-top: 6px;}

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

.casaJohnModal{padding-top: 180px;overflow-y: auto;width: 100%;height: 100%;}
.casaAmareloModal{padding-top: 180px;overflow-y: auto;width: 100%;height: 100%;}
.no-scroll{position: fixed;top: 0;bottom: 0;left: 0;right: 0;}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.col-25, .col-50, .col-75, input[type=submit], input[type=reset], .row {width: 100%;margin-top: 0; overflow-y: auto}
}
.divider{width:5px;height:auto;display:inline-block;}


.sidespecials {height: 100%;width: 0;position: fixed;z-index: 1;top: 0;left: 0;background-color: #111;overflow:hidden;overflow-x: hidden;transition: 0.5s; padding-top: 60px;}
.sidespecials a {text-decoration: none;font-size: 25px;color: #818181;display: block;transition: 0.3s;}
.sidespecials a:hover {color: #f1f1f1;}
.sidespecials .closebtn {position: absolute;top: 0;right: 25px;font-size: 36px;margin-left: 50px;padding-top: 120px;}

.lb1itemsContainer {position: absolute;width: 100%; height: 100%;white-space: nowrap;}
.lb1itemsContainer > li:last-child {margin: 0 !important;}
.lb1[data-state~="mobileView"] .lb1itemsContainer {position: absolute;width: 100%;height: 100%;white-space: normal;}
.lblStyle {top: -52px; bottom: 0px; right: 38px; width: 60px; position: fixed; margin: auto; z-index: 50; visibility: inherit; height: 91px;}
.lb1 a {display: block;height: 100%;}
.lb1imageItemlink {cursor: pointer;}
.lb1imageItem{width: 42px; height: 42px; margin-bottom: 7px; margin-right: 10px; display: block;}
.lb1imageItemimage {width: 42px; height: 42px; position: absolute; position: static;box-shadow: #000 0 0 0;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.lblimageItemImageImg {border-radius: 30% 0px 0px 30%;width: 60px; height: 42px; object-fit: cover;}

.footernavbar {display: none;overflow: hidden;background-color:#000000;position: fixed;bottom: 0; left: 0; width: 100%;}
.footernavbar a {float: left; padding: 4px 6px; display: block;color: #f2f2f2;text-align: center;text-decoration: none;font-size: 17px; width:33%; cursor: pointer;}
.footernavbar a:hover {background: #f1f1f1;color: black;}

@media screen and (max-width: 600px) {
	.lblStyle {display:none;}
	.footernavbar{display: block}
}