@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700|Pangolin');
@import url('https://use.fontawesome.com/releases/v5.0.13/css/all.css');

*{margin: 0;padding: 0;}
body{font: normal normal normal 120%/135% 'Montserrat', sans-serif; color: #036;}
p{ margin: 10px 0; }
ul, ol{ margin: 10px 30px; }
ul li{ list-style: none; background: rgba(0,0,0,.2); padding: .5em; line-height: 1.5; }
ul li:nth-child(even){ background: rgba(0,0,0,.3); }
h1{ font: normal normal normal 2.0rem/1.5 'Pangolin', sans-serif; margin: 10px 0; text-align: center; color: #6cc0d8; }
h2,h3,h4{ font: normal normal normal 2.0rem/1.5 'Pangolin', sans-serif; margin: 10px 0; text-align: center; color: #6cc0d8; }
a{ color: #fc8; transition: 2s color; }
a:hover{ color: #f60; font-weight: bold; }
label{ width: 200px; display: inline-block; }
#booking-form label, .booking-form label{ width: 400px; max-width: 100%; }
button, a.button{ font-size: 1.2em; color: #fff; background-color: #678; border-radius: 2px; border: none; cursor: pointer; transition: 1400ms background-color; line-height: 2; padding: 0 .5em; box-shadow: 1px 1px 5px #999; display: inline-block; text-decoration: none; }
button:hover, a.button:hover{ background-color: #777; box-shadow: 1px 3px 7px #999; }
input, textarea{ width: 500px; max-width: 100%; border: 1px solid #bbf; border-radius: 3px; box-shadow: 1px 1px 5px rgba(0,0,0,0.2); line-height: 2; }
input, textarea, select{ font: inherit; }
input[type="number"], input[type="checkbox"]{ width: auto; }
textarea{ vertical-align: top; border-radius: 7px; }
img{ max-width: 100%; height: auto !important; }
p.searchbar{ margin: 5px 0 0; position: absolute; right: 0; top: 0; }
p.searchbar input{ width: 300px; }
p.searchbar button{ font-size: .9em; }
p.notifier{
  color: #fff;
  background-color: #d00;
  font-weight: 700;
  padding: .3em;
  line-height: 2;
}

#footer{ padding: 20px 0; font-size: .75rem; line-height: 1.35; }
#footer h2{ text-align: left; color: #000; }
#footer a{ text-decoration: none; }

#menu{ text-align: right; font-family: 'Pangolin', sans-serif; font-size: 1.3rem; line-height: 1.5; height: 1.5em; position: absolute; top: 10px; left: 0; width: 100%; }
#menu-list{ box-sizing: border-box; }
#menu a{ color: #fff; text-decoration: none; display: inline-block; padding: 0 10px; height: 1.5em; background-color: #714d8d; transform: skewX(-10.5deg); transform-origin: left; border-radius: 6px;}
#menu a.tel{ color: #e9438d; background: transparent; font-size: 2em; line-height: 1.2; transform: none; }
#menu a.tel.fb{ color: #3b5998; }
#menu a:hover, #menu li.on>a{ background-color: #e9438d; }
#menu a.tel:hover{ background-color: transparent; font-weight: normal; color: #714d8d; }
#menu ul li{ list-style: none; display: inline-block; margin: 0; position: relative; height: 1.5em; margin: 0 2px; background: transparent; padding: 0; }
#menu>ul{ height: 2em; }
#menu ul{ position: relative; }
#menu ul ul{ display: none; position: absolute; top: 2em; left: 0; white-space: nowrap; margin: 0; z-index: 2; }
#menu ul li.live ul{ display: block; }
#menu li.live i{ visibility: hidden; }
#menu p{ margin: 10px auto 0; }

#card-element{
  max-width: 100%;
  width: 600px;
  margin: 25px 0;
  box-shadow: 2px 2px 5px rgba(0,0,0,.3);
}

.holder{ width: 80%; position: relative; margin: 0 auto; }
.hon{ display: none; }
.right{ float: right; }
.clearfix{ display: table; content: ""; clear: both; }
.col2{ float: left; width: 50%; }
.col4{ width: 25%; float: left; }
.centre{ text-align: center; }
.comment{ border: 1px solid #ccc; margin: 0 0 10px 0; box-shadow: 1px 1px 12px #ddd; }
.comment h3{ text-transform: uppercase; color: #99f; font-size: 1rem; font-weight: bold; }
.commentpara{ white-space: pre-line; font-size: .9rem; }
.testimonial em{ display: block; }
.testimonial{ white-space: pre-wrap; }
.back-lb, .card.back-lb{ background: #6cc0d8; color: #f2f2f2; }
.back-lb a{ color: #000; }
.back-lb a:hover{ color: #666; }
.back-lb h1, .back-lb h2, .back-lb h3{ color: #cf0; }
.back-purp, .card.back-purp{ background: #714d8d; color: #ddd; }
.back-purp h1, .back-purp h2, .back-purp h3{ color: #f4942d; }
.back-or, .card.back-or{ background: #f4942d; color: #000; }
.back-or a{ color: #733; }
.back-or a:hover{ color: #000; }
a.tel{ color: inherit; text-decoration: none; }
.balloons{ position: relative; padding: 0 90px; }
.balloons:before, .balloons:after{ content:""; display: inline-block; width: 86px; height: 50px; background: url('i/balloons.png'); vertical-align: middle; position: absolute; left: 0; top: 0; }
.balloons:after{ right: 0; left: auto; }
.whitebreak{ white-space: pre-line; }
.news-item{ margin: 1em auto; width: 800px; max-width: 100%; box-shadow: 0 0 18px rgba(0,0,0,.25); border-radius: 3px; display: grid; grid-template-columns: auto 1fr; font-size: .9em; box-sizing: border-box; }
.news-item>div{ padding: .5em; box-sizing: border-box; }
.news-item p.whitebreak{ height: 100px; overflow: hidden; width: 100%; margin: 0; position: relative; }
.news-item p.whitebreak:after{ content: ""; display: block; box-sizing: border-box; width: 100%; height: 40px; background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1)); position: absolute; left: 0; bottom : 0; }
ul.paginate li{ display: inline; background: transparent; color: inherit; padding: 0; font-size: .75em; line-height: 1.2; margin-right: .25em; }
ul.paginate a:hover{ font-weight: normal; }
ul.paginate a.button:not([href]){ cursor: default; }

table{ background: #714d8d; color: #fff; box-shadow: 1px 3px 10px rgba(0,0,0,.8); margin: 1em auto; }
th{ text-align: left; background: #637; padding: .5em; }
td{ padding: .5em; }
table a.button{ line-height: 1.5; font-size: 1em; box-shadow: none; background-color: #526; }
table a.button:hover{ font-weight: normal; }

.fadegall{ width: 600px; max-width: 100%; position: relative; margin: 10px auto; }
.fadegall img{ position: absolute; top: 0; left: 0; }
.fadegall img:first-of-type{ position: relative; }

.slope{ position: relative; z-index: 1; margin: 50px 0; padding: 0 0 20px; }
.slope:after{ background: inherit; bottom: 0; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; transform: skewY(1.2deg); transform-origin: 0; z-index: -1; }
.slope:before{ background: inherit; top: 0; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; transform: skewY(1.2deg); transform-origin: 100% 0; z-index: -1; }
.slope.lr:after, .slope.inlr:after{ transform: skewY(-1.2deg); transform-origin: 100% 0; }
.slope.lr:before, .slope.inrl:before{ transform: skewY(-1.2deg); transform-origin: 0; }

.card{ width: 30%; background: #e9438d; border-radius: 14px; font: normal normal normal 1.4rem/1.3 'Pangolin', sans-serif; padding: 8px; box-sizing: border-box; }
.card ul{ margin: 0; }
.card ul li{ list-style: none; margin: .1em 0; padding: .3em; background: transparent; }
.w60{ width: 65%; }

.right{ float: right; margin: 0 0 10px 10px; }
.left{ float: left; margin: 0 10px 10px 0; }

#menutoggle, #menutogglelabel{ display: none; visibility: hidden; }
label#menutogglelabel{ background: #714d8d; padding: 0 10px; color: #fff; cursor: pointer; line-height: 2; width: auto; }

@media all and (max-width: 1279px){
  .holder{ width: 85%; }
}

@media all and (max-width: 1023px){
  .holder{ width: 94%; }
  .balloons:before, .balloons:after{ width: 43px; }
  .balloons{ padding: 0 45px; }
}

@media all and (max-width: 799px){
  .holder{ width: 96%; }
}

@media all and (max-width: 1400px){
  #menu{ font-size: 1rem; line-height: 1.5; }
}

@media all and (max-width: 1140px){
  #title{ text-align: center; }
  #menu{ position: relative; text-align: center; top: 0; height: auto; }
  #menu-list{ padding: 0; }
  .card{ width: 40%; font-size: 1.2em; line-height: 1.3; }
  .w60{ width: 55%; }
  h1{ font-size: 1.9em; line-height: 1.5; }
  h2, h3, h4{ font-size: 1.9em; line-height: 1.5; }
}

@media all and (max-width: 700px){
  .card{ width: 100%; }
  .w60{ width: 100%; }
  .right, .left{ margin: 0; float: none; }
  h1{ font-size: 1.2em; line-height: 1.5; }
  h2, h3, h4{ font-size: 1.2em; line-height: 1.5; }
  .balloons:before, .balloons:after{ height: 30px; background-size: contain; background-repeat: no-repeat; background-position: left; }
  .balloons:after{ background-position: right; }
  .balloons{ padding: 0 37px; }
  .fadegall{ max-width: 92vw; }
  table{ font-size: .75em; }
}

@media all and (max-width: 600px){
  #menu-list{ display: none; visibility: hidden; margin: 10px auto 40px; line-height: 2; }
  #menu>ul{ height: auto; }
  #menutogglelabel{ display: inline-block; visibility: visible; }
  #menutoggle:checked+#menu-list{ display: block; visibility: visible; }
  #menu li{ display: block; height: auto; }
  #menu ul a{ transform: none; width: 100%; border-radius: 0; height: auto; margin: 0; box-sizing: border-box; }
  .col2, .col4{ width: 100%; float: none; }
}
@media all and (max-width: 400px){
  .news-item{ display: block; }
  .news-item>div:first-child{ text-align: center; }
}

.shaker {
  animation: rubberBand;
  animation-duration: 6000ms;
  animation-iteration-count: infinite;
}

@keyframes rubberBand{
  0%{
    transform:scaleX(1)
  }
  7%{
    transform:scale3d(1.25,.75,1)
  }
  10%{
    transform:scale3d(.75,1.25,1)
  }
  13%{
    transform:scale3d(1.15,.85,1)
  }
  16%{transform:scale3d(.95,1.05,1)
  }
  20%{
    transform:scale3d(1.05,.95,1)
  }
  25%{
    transform:scaleX(1)
  }
  to{
    transform:scaleX(1)
  }
}
.lb-loader,.lightbox{text-align:center;line-height:0}body:after{content:url(i/lbimages/close.png) url(i/lbimages/loading.gif) url(i/lbimages/prev.png) url(i/lbimages/next.png);display:none}.lb-dataContainer:after,.lb-outerContainer:after{content:"";clear:both}body.lb-disable-scrolling{overflow:hidden}.lightboxOverlay{position:absolute;top:0;left:0;z-index:9999;background-color:#000;filter:alpha(Opacity=80);opacity:.8;display:none}.lightbox{position:absolute;left:0;width:100%;z-index:10000;font-weight:400}.lightbox .lb-image{display:block;height:auto;max-width:inherit;border-radius:3px}.lightbox a img{border:none}.lb-outerContainer{position:relative;background-color:#fff;width:250px;height:250px;margin:0 auto;border-radius:4px}.lb-loader,.lb-nav{position:absolute;left:0}.lb-outerContainer:after{display:table}.lb-container{padding:4px}.lb-loader{top:43%;height:25%;width:100%}.lb-cancel{display:block;width:32px;height:32px;margin:0 auto;background:url(i/lbimages/loading.gif) no-repeat}.lb-nav{top:0;height:100%;width:100%;z-index:10}.lb-container>.nav{left:0}.lb-nav a{outline:0;background-image:url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}.lb-next,.lb-prev{height:100%;cursor:pointer;display:block}.lb-nav a.lb-prev{width:34%;left:0;float:left;background:url(i/lbimages/prev.png) left 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-prev:hover{filter:alpha(Opacity=100);opacity:1}.lb-nav a.lb-next{width:64%;right:0;float:right;background:url(i/lbimages/next.png) right 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-next:hover{filter:alpha(Opacity=100);opacity:1}.lb-dataContainer{margin:0 auto;padding-top:5px;width:100%;-moz-border-radius-bottomleft:4px;-webkit-border-bottom-left-radius:4px;border-bottom-left-radius:4px;-moz-border-radius-bottomright:4px;-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px}.lb-dataContainer:after{display:table}.lb-data{padding:0 4px;color:#ccc}.lb-data .lb-details{width:85%;float:left;text-align:left;line-height:1.1em}.lb-data .lb-caption{font-size:13px;font-weight:700;line-height:1em}.lb-data .lb-number{display:block;clear:left;padding-bottom:1em;font-size:12px;color:#999}.lb-data .lb-close{display:block;float:right;width:30px;height:30px;background:url(i/lbimages/close.png) top right no-repeat;text-align:right;outline:0;filter:alpha(Opacity=70);opacity:.7;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s}.lb-data .lb-close:hover{cursor:pointer;filter:alpha(Opacity=100);opacity:1}