@import url('https://fonts.googleapis.com/css?family=Mouse+Memoirs|Play:400,700');
@import url('https://use.fontawesome.com/releases/v5.0.3/css/all.css');

*{margin: 0;padding: 0;}
body{font: normal normal normal 100%/135% 'Play', sans-serif; color: #036; background: #fff url('i/logo-back.png'); background-repeat: no-repeat; background-size: 100% auto; background-position: center; background-attachment: fixed; }
p{ margin: 10px; }
ul, ol{ margin: 10px 30px; }
h1{ font: normal normal normal 2.4em/1.5em 'Mouse Memoirs', sans-serif; margin: 10px; text-align: center; }
h2,h3,h4{ font: normal normal normal 2em/1.5em 'Mouse Memoirs', sans-serif; margin: 10px; text-align: center; }
h3{ font-size: 1.7em; line-height: 1.5em;}
h4{ font-size: 1.4em; line-height: 1.5em;}
a{ color: #60f; transition: 2s color; }
a:hover{ color: #ccf; }
label{ width: 200px; display: block; }
button, a.button{ font-size: 1rem; color: #fff; background-color: #0ad; border-radius: 2px; border: none; cursor: pointer; transition: 1400ms background-color; line-height: 2em; 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: 2em; font: inherit; }
input[type="number"]{ 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; }
table{ margin: 10px auto; border-collapse: collapse; }
table table{ margin: 0; box-shadow: 0 0 0 rgba(255,255,255,0); }
td, th{ text-align: left; vertical-align: top; padding: 0 .25em; }
th, table table td{ padding: 0 .4em; }
tr, tr:nth-child(even) tr:nth-child(even){ background-color: #e0e0ff; }
tr:nth-child(even), tr:nth-child(even) tr{ background-color: #f3f3ff; }


#footer{ background-color: #444; color: #fff; padding: 20px 0; font-size: .7em; line-height: 1.35em; margin-top: 20px; background-image: url('i/logo-grey.png'); background-repeat: no-repeat; background-size: auto 80%; background-position: center; }
#footer a{ color: #ddd; text-decoration: none; }
#footer a:hover{ color: #f60; }
#footer h2{ text-align: left; margin: 5px 10px; }
#footer a.button{ font-size: 1em; line-height: 2em; box-shadow: none; }

#menu{ text-align: right; font-size: .9rem; line-height: 2em; height: 2em; position: absolute; top: 0; left: 0; width: 100%; text-transform: uppercase; }
#menu a{ color: #345; text-decoration: none; display: inline-block; padding: 0 7px; height: 2em; }
#menu li:last-child a{ padding: 0 0 0 7px; }
#menu a:hover, #menu li.on a{ color: #89a; }
#menu li{ list-style: none; display: inline-block; margin: 0; position: relative; height: 2em; }
#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 a{ background-color: #fff; color: #678; }
#menu li.live i{ visibility: hidden; }

#title{ margin-bottom: 10px; }
#telephone{ position: absolute; right: 0; top: 40px; font-family: 'Mouse Memoirs', sans-serif; font-size: 2.5rem; line-height: 1.4em; color: #0ad; }

.holder{ width: 75%; position: relative; margin: 0 auto; }
.hon{ display: none; }
.right{ float: right; }
.clearfix:after{ display: table; content: ""; clear: both; }
.col2{ float: left; width: 50%; }
.col4{ width: 25%; float: left; }
.col-3{ width: 33.33333%; float: left; box-sizing: border-box; }
.col-3 h2{ margin: 0; line-height: 1.2em; }
.col-3 p{ margin: 5px; }
.centre{ text-align: center; }
.slides{ width: 100%; position: relative; }
.slides img{ width: 100% !important; height: auto !important; }
.slides ul{ position: absolute; top: 30%; margin: 0; text-align: center; width: 100%; white-space: nowrap; overflow: hidden; font-size: 0; line-height: 0; font-family: 'Mouse Memoirs', sans-serif; }
.slides li{ font-size: 2rem; line-height: 2.5em; list-style: none; display: inline-block; width: 100%; color: #fff; position: relative; z-index: 3; background: rgba(0,0,100,.5); margin: 0; transition: transform 300ms; }
.slides p{ position: absolute; top: 55%; margin: 0; text-align: center; width: 100%; }
.fullwidth{ width: 100%; }
.fapara{ text-align: center; font-size: 2rem; line-height: 1.2em; color: #0ad; }
a.tel{ color: inherit; text-decoration: none; }
.centre-div{ width: 500px; max-width: 100%; margin: 0 auto; }
.fbfeed{ margin: 1em auto; width: 500px; max-width: 100%; }
.tableholder{ max-width: 100%; overflow-x: auto; }

#menuhider, #menuhiderlabel{ display: none; visibility: hidden; }

@media all and (max-width: 1450px){
  .holder{ width: 85%; }
}

@media all and (max-width: 1279px){
  .holder{ width: 95%; }
}

@media all and (max-width: 1150px){
  #title{ margin-bottom: 0; text-align: center; }
  #menuhiderlabel{ display: inline-block; visibility: visible; background: #0ad; color: #fff; width: auto; padding: 0 .75em; cursor: pointer; margin-bottom: 10px; }
  #menu-list{ display: none; visibility: hidden; }
  #menuhider:checked+#menu-list{ display: block; visibility: visible; }
  #menu{ text-align: center; position: static; height: auto; }
  #menu>ul{ height: auto; z-index: 5; }
  #menu li{ display: block; line-height: 2em; height: auto; }
  #menu a{ background-color: #0ad; display: block; padding: 0; border: 1px solid #009; border-width: 0 0 1px 0; height: auto; line-height: 2em; color: #fff; }
  #menu a:hover, #menu li.on a{ color: #ddf; background-color: #09c; }
  #menu li:last-child a{ padding: 0; }
  #menu-list.holder{ width: 100%; }
  #telephone{ position: static; text-align: center; }
  .slides li{ font-size: 1.4rem; line-height: 2.5em; }
  .slides p{ top: 60%; }
}

@media all and (max-width: 650px){
  .col2, .col-3, .col4{ width: 100%; float: none; }
  .slides p{ top: 70%; }
}

@media all and (max-width: 500px){
  .slides li{ font-size: 1.15rem; line-height: 2.5em; }
  .slides p{ top: 60%; }
  .slides p a.button{ font-size: .85em; line-height: 2em; }
  .slides ul{ top: 20%; }
}