/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/


/* Fonts were here */

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.slab
	{
	width: 100%;
	padding: 0 0;
	}

.container {
  position: relative; 
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 0;  /* was 0 10px */
 box-sizing: border-box;  }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

.lhs.column	 { width: 0; display: none;sixteen }		/* don't see this on little screens */
.mid.column	 { width: 100%; }		/* '4 columns' */
.rhs.column	 { width: 100%; background: #13293D; }			/* '3 columns' AND DARK BACKGROUND ON TABLETS!!! */


/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 100%;  /* WAS 95% */
    padding: 0; }

}

@media (min-width: 550px) {
.container { width: 100%; }   /* WAS 90 */
.column,  .columns {    margin-left: 0; }		/* MP Mod no left margins on columns... ask for padding if you need it */
.column:first-child,  .columns:first-child {    margin-left: 0; }
}

/* For devices larger than 550px  SB 550 not 640 */
@media (min-width: 640px) {
  .container {
    width: 100%; } /* WAS 90 */
  .column,
  .columns {
    margin-left: 0; }		/* MP Mod no left margins on columns... ask for padding if you need it */
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .lhs.column	 { display: block; width: 16.6666666666%; }		/* '2 columns' */
  .mid.column	 { width: 50%;  margin-left: 8.3333333333%; }		/* '6 columns offset by 1/2 col! ' */
  .rhs.column	 { width: 16.6666666666%; background: #256DB7;  }			/* '3 columns' AND BLUE BACK ON SCREENS! AND IT DROPS DOWN A BIT */

  .one.column,
  .one.columns                    { width: 8.3333333333%; }
  .two.column,                    
  .two.columns                    { width: 16.6666666666% }
  .three.column,
  .three.columns                  { width: 25%; }
  .four.column,                   
  .four.columns                   { width: 33.3333333333%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.column,                                
  .six.columns                    { width: 50%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.column,
  .eight.columns                  { width: 66.6666666667%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 25%; }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 50%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 66.6666666667%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}

/* Max messing about with max width but leave at 960 for readability for now */
@media (min-width: 1280px) {
  .container {
    max-width: 1024px; }
}



/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; 
  scroll-behavior: smooth;
}
body {
  font-size: 1.7em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.3;
  font-weight: 400;
  font-family: Helvetica, Arial, sans-serif;
  color: #000; }  /* F0EEEF */

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 1rem;
  margin-bottom: 0rem;
  font-weight: semi-bold; 
  font-family: 'Cabin Semi-Bold','IBM Plex Sans', Helvetica, Arial, sans-serif;
  /* text-transform: uppercase;  */
  color: #444;  /* Don't like the red #F50025 */

}

/* h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
*/

h1 { font-size: 4.0rem; line-height: 1.2;  }
h2 { font-size: 3.6rem; line-height: 1.25;}
h3 { font-size: 3.0rem; line-height: 1.3;   }
h4 { font-size: 2.4rem; line-height: 1.35;  }
h5 { font-size: 1.8rem; line-height: 1.25;  }
h6 { font-size: 1.5rem; line-height: 1.6;  }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; line-height: 1.1; }
  h3 { font-size: 3.0rem; line-height: 1.1; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0; }


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #114b5f; 
  text-decoration: none;
}
a:hover {
  color: #114b5f; 
  text-decoration: underline;
  }


/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: #5ea6ff;
  border-radius: 4px;
  border: 1px solid #5ea6ff; 
  cursor: pointer;
  box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #F8FFE5;
  outline: 0; 
  border: 1px solid #EAC435; 
  }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  background-color: #33C3F0;
  border-color: #33C3F0; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #fff;
  background-color: #1976e9;
  border-color: #1976e9;
  }


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"]	{
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  /* background-color: #fff; */
  /* border: 1px solid #D1D1D1; */
  border: 0;
  outline: 0;
  background: #FFF;
  border: 1px solid #5ea6ff;
  border-radius: 4px;
  box-shadow: none;
  color: #000;
  box-sizing: border-box; 
 	}
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  /* background-color: #fff; */
  /* border: 1px solid #D1D1D1; */
  border: 0;
  outline: 0;
  background: #FFF;
  border: 1px solid  #5ea6ff;
  border-radius: 4px;
  box-shadow: none;
  color: #000;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus {
  border: 0;
  outline: 0;
  background: #F6F6F6;
  border: 1px solid  #1976e9;

/*  border: 1px solid #33C3F0; */
/*  outline: 0; */
	 }

textarea:focus,
select:focus {
  border: 0;
  outline: 0;
  background: #F6F6F6;
  border: 1px solid #1976e9;

/*  border: 1px solid #33C3F0; */
/*  outline: 0; */
	 }
label,
legend {
  display: block;
  margin-bottom: .2rem;
  margin-left: .4rem;
  padding-top: 8px;
  font-weight: 400; 
  font-size: 90%;  /* MP reduced .5 margin bottom, weight 400 not 600 and size 80% */
  color: #05063a;
  font-weight: bold; 
  }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: disc outside; }
ol {
  list-style: decimal outside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
   margin: 1.5rem 0 1.5rem 3rem;
  font-size: 100%; }
li {
  margin-bottom: 1rem; }


/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
 /* background: #F1F1F1; */
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem; }


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/

    

/* Larger than mobile */
@media (min-width: 400px) { 
	 }       

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
	}

/* Larger than tablet */
@media (min-width: 750px) {
	}

/* Larger than desktop */
@media (min-width: 1000px) {
 	}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
 	}

/* Tabletonly and screenonly for slabs/divs that should show on big and large screens */

.tabletonly          { display: block; }
.screenonly          { display: none; }


/* Small max width test??  WAS 640px , 768 for GANSEY SHORE so hero pic text gets chopped for much smaller sooner */
@media (min-width: 768px) { 
  .tabletonly          { display: none; }
  .screenonly          { display: block; }
	 }  


/* Hack vertical menu */

.vertical-menu {
 overflow: hidden;
  /* width: 95%; /* Set a width if you like */
  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
  width: max-content;
  margin: auto;
 /*  font-family: "Archivo Narrow", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; */
  font-size: 2rem; /* currently ems cause chrome bug misinterpreting rems on body element */
 color: #F8FFE5; /* Black text color */
}

.vertical-menu a {
 float: left;
 color: #F8FFE5; /* Black text color */
  display: block; /* Make the links appear below each other */
  padding: 12px 0 4px 0 ; /* Add some padding */
  text-decoration: none; /* Remove underline from links */
  margin-left: 12px;
  margin-right: 12px;
  border-bottom: 3px solid #256DB7;
}

.vertical-menu a:hover {
  /* background-color: #E3170A; /* Add a green color to the "active/current" link */
 /*  text-decoration: underline;
 text-decoration-color: #E3170A;  */
  border-bottom: 3px solid #E3170A;
  color: #F8FFE5;
}


.vertical-menu .active {
 float: left;
 color: #EAC435; /* yellow */
  display: block; /* Make the links appear below each other */
  padding: 12px 0 4px 0 ; /* Add some padding */
  text-decoration: none; /* Remove underline from links */
  margin-left: 12px;
  margin-right: 12px;
  border-bottom: 3px solid #256DB7;
}

/* Hack horizontal menu */

.horz-menu {
  overflow: hidden;
  /* position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
/*   font-family: "Archivo Narrow", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; */
  font-size: 2rem; /* currently ems cause chrome bug misinterpreting rems on body element */
  background-color: #13293D; /* Grey background color */
  color: #F8FFE5; /* Black text color */
}

.horz-menu a {
   float: left;
  display: block;
 color: #F8FFE5; /* Black text color */
  text-align: center;
  padding: 6px 6px;
  text-decoration: none;}

.horz-menu a:hover {
  background-color: #E3170A; /* Dark grey background on mouse-over */
  color: #F8FFE5;
}

.horz-menu a.active {
   color: #EAC435;
}

.darklink { }

.darklink a:hover {
  text-decoration: underline;
  color: #13293D;
}

.darklink .active {
  color: #13293D; /* yellow */
}

.darklink a {
  color: #13293D; /* dark text color */
   text-decoration: none; /* Remove underline from links */
}


.sidetype {  }

.sidetype a {
  color: #F8FFE5; /* Black text color */
   text-decoration: none; /* Remove underline from links */
   border-bottom: 1px solid #256DB7;
}

.sidetype a:hover {
  border-bottom: 1px solid #E3170A;
  color: #F8FFE5;
}


.sidetype .active {
  color: #EAC435; /* yellow */
   border-bottom: 1px solid #256DB7; 
}

.caption
	{
	font-size: 80%;
	}

.minihed
	{
	font-weight: bold;
	color: #EAC435;
	padding-top:4px;
	margin-right: 6px;
	}


ul.plainlist  { list-style: none outside; margin-left: 0; padding-left: 0; text-indent: 0em;  } 
.plainlist li:nth-child(odd)  { font-size: 90%; background: #EEE; padding-bottom: 6px; padding-top: 8px; margin-bottom: 0; padding-left: 9px; }
.plainlist li:nth-child(even)  { font-size: 90%; background: #FFF; padding-bottom: 6px; padding-top: 8px; margin-bottom: 0; padding-left: 9px; }

ul.aligned { padding-left: 0; margin-left: 1.5em; }

i.aro {
  border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.aro.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.aro.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.aro.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.aro.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}


#topBtn {
  display: none; 
  position: fixed; 
  bottom: 8px; 
  right: 12px;
  z-index: 99; 
  border: none; 
  outline: none; 
  background-color: #E3170A; 
  color: #F8FFE5; 
  cursor: pointer; 
  padding: 2px; 
  margin: 0;
  height: 20px;
  font-size: 12px; 
  line-height: 20px;
}

#topBtn:hover {
  background-color: #E3170A; /* red */
}


.closeup { margin-bottom: 0.2rem }

/* #Images #ffdc01
================================================== */

img.scale-with-grid {	max-width: 100%; height: auto; }

.remove-bottom { margin-bottom: 0 !important; }
.half-bottom { margin-bottom: 10px !important; }
.add-bottom { margin-bottom: 20px !important; }

/**** CUSTOM ***/

.textbox { padding-left: 1rem; padding-right: 1rem;  }
.thinbox { padding-left: 4rem; padding-right: 5rem; }
.headspace { padding-bottom: 3px; padding-top: 2px; }
.bigheadspace { padding-bottom: 2rem; padding-top: 3rem; };

.slab.footer { background: #cda07a; color: #000; }
.slab.header { background: #114b5f; color: #fff; }
.slab.maincopy {  background: #fff; color: #000 }
.slab.menu {  background: #456f90; color: #fff }

.menutable { width: 100%; font-weight: bold; margin-bottom: 0 }

.menutable  td {
  padding: 12px 15px;
  text-align: left;
  border: none; }

.menutable a {
  color: #fff; 
  text-decoration: none;
}
.menutable a:hover {
  color: #ff0; 
  text-decoration: underline;
  }
  
  .mbhigh { colour: #F50025; }


.textmargins { margin-left: 16px; margin-right: 16px; margin-top: 16px; margin-bottom: 8px; }