/** 
 * main.css
 * 
 * 1. General HTML tags
 * 2. Masthead area
 * 3. Main content and sidebar
 * 4. Footer
 * 5. Media queries for responsive layout
 * 
 */

/*********************************************************************
 * 1. General HTML tags
 *
 */


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
sup { 
    vertical-align: super;
    font-size: smaller;
}
sub { 
    vertical-align: sub;
    font-size: smaller;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  width:100%;
}

strong, b {font-weight: 700;}

p {padding: .7rem 0;}

img {
	max-width: 100%; 
}

#content img {border-radius: 3px;}
html {
    -webkit-font-smoothing: antialiased;
    height: 100%;
}

body {
	max-width: 1600px; 
	margin: 0 auto; 
	    text-align: center;
	    padding: 1% 2.5% 0 2.5%;
      overflow-x: hidden;
      height: 100%;
          word-wrap: break-word;
    overflow-wrap: break-word;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


body, td, input[type=text], textarea {
font-family: 'Raleway', sans-serif; 
	font-size: 100%; 
	color: #ffffff; 

}

ul ul {margin-left:1rem; margin-bottom: 2rem;}
#sidebar ul li {margin: 1rem 0 ;}
a.planmore { display: inline-block; vertical-align: top; font-size: 80%;}

img {
	max-width: 100%; 
}
iframe {
  max-width: 100%;
}

hr {   border: 0;
    height: 1px;
    background: #ccc;}

.footer svg {max-width: 80px; width:15%; margin-bottom: 1.5rem; }

a.files {
    padding: 0.3rem 2rem;
    margin: 0.6rem 0;
}

.pdf {
background: url(img/PDF.png) 0 center no-repeat;}
.doc .docx{ background: url(img/DOC.png) 0 center no-repeat; }
.pdf { background: url(img/PDF.png) 0 center no-repeat; }
.xls, .xlsx { background: url(img/XLSX.png) 0 center no-repeat; }
.jpg, .jpeg { background: url(img/JPG.png) 0 center no-repeat; }
.zip{ background: url(img/ZIP.png) 0 center no-repeat; }
.mp3{ background: url(img/MP3.png) 0 center no-repeat; }

.past,  #sidebar a.planmore.past {color: rgba(255, 255, 255, 0.6);  }

h1 {font-size: 2.2rem; margin-bottom: 1.8rem;}
#slogan h1 {color: #f5be41; font-size: 6.0vw; margin-bottom: .8rem; text-align:center;}

h1, h2 {
	font-weight: normal;
}

h2 {font-size: 1.95rem;   padding-bottom: 1em;
  }

  h2 span, .hallimage1 p {color: white; 
   letter-spacing: 0;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.4);
   padding: 10px; }

h3 {
  font-size: 1.7rem;
	padding-bottom: 1em;

}

h4 {
  font-size: 1.4rem;
line-height:  160%;

}

.content h3 {
  font-size: 1.7rem;
  padding-bottom: 0;

}

#patch {height: 40px; margin-right: 8px;}

a {
	color: #333;
	text-decoration: none;
}
#main p a {  font-weight: 700;}

a:hover,
	.nav a:hover {
		color: #000;
		border-color: #aaa; 
	}

blockquote {
	margin-left: 0;
	padding-left: 1.5em;
	padding-right: 2em; 
	border-left: 4px solid #ddd; 
	font-style: italic; 
	color: #777; 
}
 p {line-height: 1.5rem;}

.group {width:100%; display: inline-block; vertical-align: top; min-height: 300px; border: 5px solid #fff; color:#fff; padding:1rem;}

.group h3 {padding-top: .2em; padding-bottom: 0; font-size: 2rem; font-weight: 700; line-height: 2.2rem}
.group p {padding: .3rem 0; margin: 1rem;}
a.more { padding: 0.5rem 1rem; display: inline-block;  color:#fff;  border-radius: 8px; border: 4px solid white; margin-bottom: 0.5rem; }
a.button {padding: 0.5rem 1rem; display: inline-block;  color:#fff;  border-radius: 8px; border: 4px solid white; margin-bottom: 0.5rem; margin-top: 1.4rem;}
a.button:hover, a.more:hover {background: rgba(255,255,255,0.2);}
a.pagelink {padding: 0.5rem 1rem; display: inline-block;  color:#555;  border-radius: 8px; border: 4px solid #777; margin-bottom: 0.2rem; margin-top: 0.2rem;}

a.pagelink:hover, a.more:hover {background: rgba(255,255,255,0.2);}

.half { display: block; vertical-align: top;  min-height: 300px; border: 5px solid #fff; padding:1rem; }

.group img {max-width: 140px;}
.rust {background: #cf5300;}
.green {background:#258039;}
.red {background:#cf3721; }
.red {background:#eb2205;}
.yellow {background:#f5be41;}
.blue {background:#31a9b8;}
.blue {background:#2F2F4F;}
.maroon {background: #800000;}

.greentext {color:#258039;}
.redtext {color:#cf3721; }
.yellowtext {color:#f5be41;}
.bluetext {color:#31a9b8;}

	#logo {display: inline-block; width: 9%;  margin: 0; padding: .5rem 0; padding-right: .3rem; vertical-align: top; text-align: left; max-height: 130px;}

		#scoutlogo {display: inline-block; width: 9%; max-width: 315px; margin: 0; padding: .5rem 0; padding-right: .3rem; vertical-align: top; text-align: right; max-height: 130px;}
			#title {font-family: 'Raleway', sans-serif; display: inline-block;  margin: 0; padding: 0;  font-size: 1.2rem; color:#9b9b9b;  vertical-align: top; margin:0; line-height: 1.7rem; padding-top:.4rem; text-align: left; }
#phone {}

.media {position: relative; height: 50%; width: 50%; display: inline-block; vertical-align: top; border: 5px solid #fff ; padding: .5rem; overflow: hidden; text-align: center; }
.media img {   width:auto; height:auto;  padding: 0; margin:0; max-width: 65%; max-height: 86%; padding: 0; margin:0; padding-top: 7%; }


.footer.social {border:none; padding:0;}

h3.contact {padding-bottom: 0;}

#contacts, #map {display: inline-block; width: 100%; vertical-align: top;}

#banner { width: 100%;
	max-width: 2400px;
    height: auto;
    border: 0;
    position: relative; 
display: inline-block;
margin: 0 auto;
margin-top:1%; background: #31a9b8; border: 5px solid #fff;}

#bannerimg {display: inline-block; vertical-align: top; border:5px solid #fff;  }

#slogan {display: inline-block;  vertical-align: top;font-size: 1.4rem; color: #fff;  border:5px solid #fff; background: #258039; min-height: 210px; padding:1rem .8rem;}

#sidebar {display: block; border: 5px solid #fff; padding: 1rem;}

/*********************************************************************
 * 2. Masthead area
 *
 */

 #copy {color:#9b9b9b; font-size: 90%;}

#menu {width: 100%; display:inline-block; vertical-align: top; padding: 0; margin:0 auto; text-align: center; border:none; margin-top: 1rem; }


#menu .main-menu {
  display: none;
}

#tm:checked + .main-menu {
  display: block;
}

#menu input[type="checkbox"], 
#menu ul span.drop-icon {
  display: none;
}


#menu li, 
#menu .sub-menu {
  border-style: solid;
  border-color: rgba(0, 0, 0, .05);

}

#menu li
 {

}

#menu .sub-menu {
  background-color: #fff;
  border-width: 1px 1px 0;
  margin: 0;
}

#menu .sub-menu li:last-child {
  border-width: 0;
}

  
ul.main-menu {

      vertical-align:middle;
    display:inline-block;
    text-align: left;
}

ul.main-menu li, 

ul.main-menu a {
  position: relative;
  display: block;
  color: #9b9b9b;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .125);

        border-width: 0 0 1px;
   
}


#toggle-menu {
  background-color: #fff;

}




#toggle-menu.menu-phone {padding:0;}

#menu a {
  transition: all .125s ease-in-out;
  -webkit-transition: all .125s ease-in-out;
  display: block;
    text-decoration: none;
          padding: 1.5rem ;
            font-size: 1rem;
}


#menu a:hover {
  background-color: rgba(125, 125, 125, .2);
  color: #e90003;

}



#menu .sub-menu {
  display: none;
}

#menu .sub-menu a { margin-left: 1rem; }

#menu input[type="checkbox"]:checked + .sub-menu {
  display: block;
}

#menu .sub-menu a:hover {
  background-color: rgba(125, 125, 125, .2);
  color: #e90003;

}

ul.main-menu li label.drop-icon {
  position: absolute;
  right: 1.5em;
  top: 0em;
}

#toggle-menu{
  position: relative;
  margin-right:0;
  margin-top: 0;


}
#toggle-menu .drop-icon{
  position: relative;
  margin-right:0;
  margin-top: 0;
  display: 	inline-block;
}

ul.main-menu label.drop-icon{
  padding: 1em;
  text-align: center;
  background-color: rgba(255, 255, 255, 1);
  text-shadow: 0 0 0 transparent;
  color: rgba(255, 0, 0, .75);
}

#toggle-menu span.drop-icon {position: 	relative;	  width: 2em; height: 	2rem; margin-top: -1rem;}
#toggle-menu span.drop-icon:before {
   content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 2em;
  height: 0.15em;
  background: black;
  box-shadow: 
    0 0.25em 0 0 black,
    0 0.5em 0 0 black;
}

#menu .drop-icon {

}

#menu ul > li > a.active {color:#e90003; }

#menu ul > li.active > a {color:#e90003; }

	.align_left, .align_right, .align_center {
		display: block;
		float: none; 
		margin: 1em auto;
		max-width: 100%; 
	}

h1.subtitle {padding-top:1rem; margin:0; border:5px solid #fff; border-bottom:none;  }
h2.subtitle, h3.subtitle {padding-top:1rem; margin:0; border:5px solid #fff;   }

	.breadcrumbs {
	clear: both; 
  padding:2% 3%;
  font-size: 90%;  
  text-align: center;

  border:5px solid #fff; border-top:none;
}
.breadcrumbs a {text-decoration: none; color: #fff;  }
	.breadcrumbs a:after {
		content: "";
		color: #999; 

	}

/*********************************************************************
 * 3. Main content and sidebar
 *
 */




figure {
	display: table;
	width: 1px;
	margin: 1em 0;
}

figure img {
	display: table-row;
	margin-bottom: 0.5em;
}

figure figcaption {
	display: table-row;
	font-size: smaller;
	color: #777;
	line-height: 1.4em;
}

/*********************************************************************
 * 3. Main content and sidebar
 *
 */

#main {
display: inline-block;
border: 5px solid #fff;
	   width: 100%; 
	clear: both; 
	background: rgba(200, 200, 200, 0.4);
	text-align: left;
	color: #444;
   padding: 1em;
}

#main td, #main input, #main textarea {color: #444;}
table, td {border:solid 1px #444; padding:3px; }
table { 
  width: 100%; 
  border-collapse: collapse; 
  word-wrap:break-word;
  table-layout: fixed;
font-size: .9rem;
}

#main, #sidebar {
	padding-bottom: 2em; 
}

#main h3, #main h2, #main h1 {margin-top: 1em;}

body.has-sidebar #main {
	width: 66.66%; 
	display: inline-block;
	vertical-align: top;
  color: #444;
}

body.has-sidebar #sidebar {
	width: 33.33%;
	padding: 1rem; 
	display: inline-block;
	vertical-align: top;
  border: 5px solid #fff;
  text-align:   left;
}

#sidebar a {color:#fff; font-style: italic;}
.home #sidebar a {color:#fff; font-style: normal;}
.starttime {font-size: 85%; padding-bottom: 0.1rem; padding-top: 0.25rem;}

.align_left {
	/* for images placed in rich text editor */ 
	float: left;
	margin: 0 1em 0.5em 0; 
	position: relative;
	top: 0.5em;
	max-width: 50%; 
}

.align_right {
	/* for images placed in rich text editor */ 
	float: right;
	margin: 0 0 0.5em 1em;
	max-width: 50%; 
}

.align_center {
	/* for images placed in rich text editor */ 
	display: block;
	margin: 1em auto; 
	position: relative;
	top: 0.5em;
}

figure {
	display: table;
	width: 1px;
	margin: 1em 0;
}

figure img {
	display: table-row;
	margin-bottom: 0.5em;
}

figure figcaption {
	display: table-row;
	font-size: smaller;
	color: #777;
	line-height: 1.4em;
}

/*********************************************************************
 * 4. Footer
 *
 */

#footer {
clear: both; 
margin-bottom: 2rem;
}
.footer {
  
  color: #fff;  border:5px solid #fff;
  font-size: 80%; 
  padding: 1rem;
  min-height: 300px;}

.footer a {color:#fff;}

.footer a:hover {color:#ccc;}
/*********************************************************************
 * 5. Media queries for responsive layout
 *
 */

@media only screen and (max-width: 767px) {
	/* mobile layout */ 

	body, td, textarea {
		font-size: 100%; 
	}
	body.has-sidebar #main, 
	body.has-sidebar #sidebar {
		float: none;
    display: block;
		width: 100%; 
		padding: 1rem; 
	}
	form#search {
		float: none; 
		width: 100%; 
		display: inline-block;
	}
	#main {
		width: 100%; 
	}
	#sidebar {

	}
	.align_left, .align_right, .align_center {
		display: block;
		float: none; 
		margin: 1em auto;
		max-width: 100%; 
	}

}

   @media only screen and (min-width: 768px) {

    img#scoutslogo, img#colourlogo, img#facebooklogo, .media img { max-width: 60%; max-height: 86%; padding: 0; margin:0; padding-top: 7%;  }

.folio-image-small { display: inline-block; vertical-align: top;padding:5px;}

.fivegrid {width: 50%;}
.fourgrid {width: 25%}
.threegrid {width:33.33%;}
.twogrid {width:50%;}

      .align_left {
  /* for images placed in rich text editor */ 
  float: left;
  margin: 0.5% 5% 3% 0; 
  position: relative;
  top: 0.5em;
  max-width: 50%; 
}

.align_right {
  /* for images placed in rich text editor */ 
  float: right;
  margin: 0.5% 0 5% 3%;
  max-width: 50%; 
}

.align_center {
  /* for images placed in rich text editor */ 
  display: block;
  margin: 1em auto; 
  position: relative;
  top: 0.5em;
}

	form#search {
		float: none; 
		width: 20%;
		max-width: 361px; 
		display: inline-block;
		vertical-align: top;
	}

		#logo {display: inline-block; width: 5%; max-width: 315px; margin: 0; padding:0; vertical-align: top; text-align: left; max-height: 2.5rem;}

		#scoutlogo {display: inline-block; width: 9%; max-width: 315px; margin: 0; padding: .5rem 0; padding-right: .3rem; vertical-align: top; text-align: right; max-height: 130px;}

			#title {font-family: 'Raleway', sans-serif; display: inline-block; width: 25%;  margin: 0; padding: 0;  font-size: 1.2rem; font-size: 1.5vw; color:#9b9b9b;  vertical-align: middle; margin:0; line-height: 2.5rem;  text-align: left; }
#slogan h1 {color: #f5be41; font-size: 2.0vw; margin-bottom: .8rem}
.breadcrumbs {padding: 0; padding-top:0.5rem;  padding-left: 1rem; text-align: left; border:5px solid #fff; border-top:none;  padding-bottom:1rem;}
.breadcrumbs a {color: #fff;}


.group { display: inline-block; vertical-align: top; min-height: 300px; border: 5px solid #fff;}

.half { display: inline-block; vertical-align: top; width: 50%; min-height: 300px; border: 5px solid #fff;}

.footer {width: 33.33%; display: inline-block; vertical-align: top; border: 5px solid white; }


#contacts{display: inline-block; width: 40%; vertical-align: top;}


#map {display: inline-block; width: 60%; vertical-align: top; padding-left:5%;}

    	#menu {width: 70%; height: 40px; margin: 0; vertical-align: middle; padding: 0; text-align:  right;  }


#menu .main-menu {
    vertical-align:middle;
    display:inline-block;
    text-align: center;
}




#menu a {
padding: .9rem .8rem ;
   font-size: 14px;
}

  #menu > ul > li > a { 
  	border: none;
 
}

#menu > ul > li > a:hover {

background: #ffedcc; 



}
#menu .sub-menu a:hover {color:#e90003; background: #ffffff;}


#menu > ul > li > a:hover {color:#e90003; background: #ffffff;}

#menu >ul > li:hover > a, #menu >ul > li >ul > li:hover > a, #menu >ul > li >ul > li >ul > li:hover > a{ color:#e90003; background: #ffffff;}


  #toggle-menu li, #menu  li{
border:none;

}
  #menu .sub-menu li
 {
border:none;
display: inline-block; vertical-align: middle;
  font-size: 12px;
    color: black;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .125);

}

#menu ul .sub-menu{
  border:none;

}
 
#toggle-menu, 
  #menu label.drop-icon {
    display: none;
  }

  #menu ul span.drop-icon {
    display: none;
  }

  #menu li {
        vertical-align:middle;
    display:inline-block;
  }



  #menu .sub-menu a {
  	display: block;
  	margin: 0;
  padding: .55em ;
}

  #menu .sub-menu li {

    display: block;
       
  }


  #menu .sub-menu {
  	background-color: #ededed;
    border-width: 0;
    margin: 0;
    position: absolute;
    top: 100%;
    left: 0;
    width: auto;
    white-space: nowrap;
    z-index: 3000;
    font-size:90%; 
    padding: 0.55rem;
    /* Rounded Corners */
    -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px 6px;
    border-radius: 0 6px 6px 6px;
  -moz-box-shadow: 0 8px 6px -6px #000;
  -webkit-box-shadow: 0 8px 6px -6px #000;
  box-shadow: 0 6px 6px -6px #000;
  text-align: left;

  }



  #menu .sub-menu, 
  #menu input[type="checkbox"]:checked + .sub-menu {
    display: none;
  }

  #menu .sub-menu li {
    border-width: 0 0 0px;
  }

  #menu .sub-menu .sub-menu {
    top: 0;
    left: 100%;
  }

   #menu .sub-menu .sub-menu .sub-menu {
    top: 0;
    left: 100%;
    padding: 0 0 9px 0;
  }

  #menu li:hover > input[type="checkbox"] + .sub-menu {
    display: block;
  }
  #menu .drop-icon {
  line-height: 1;
}

#menu ul.main-menu > li > a.active {color:#e90003;  }

#menu ul.main-menu > li.active > a {color:#e90003; }

#bannerimg {display: inline-block; width: 50%; vertical-align: top; border:5px solid #fff;  }
#slogan {display: inline-block; width: 50%; vertical-align: top;font-size: 1.4rem; font-size: 1.8vw;  color: #fff;  border:5px solid #fff; line-height:1.6vw;
text-align: left;}

#slogan p {padding:.6vw 0;}

a.button {padding: 0.5rem 1rem; padding: 0.5vw 1vw;  display: inline-block;  color:#fff;  border-radius: 8px; border: 4px solid white; border: 0.3vw solid white; margin-bottom: 0.5rem; margin-bottom: 0.4vw; margin-top: 1.4rem; margin-top: 1.5vw}

}

@media only screen and (min-width: 768px) and (max-width: 985px) {
  .group h3 {
    padding-top: .2em;
    padding-top: .2vw;
    padding-bottom: 0;
    font-size: 2rem;
    font-size: 3vw;
    font-weight: 700;
    line-height: 120%;

}
.group img {max-width:  100%;}

  }

@media only screen and (min-width: 1440px) {
	/* extra-wide desktop layout */ 
	
	body, td, textarea {
		font-size: 115%; 
	}

  #title {font-size: 1.2rem;}
  
  #slogan h1 {color: #f5be41; font-size: 2.2rem; margin-bottom: .8rem; text-align:center;}
  #slogan {;font-size: 1.6rem;  padding:.8rem; }
  #slogan p {line-height:2rem;}
  a.button {padding: 0.5rem 1rem;  margin-top:1.4rem; border-width:4px; }
}

@media only screen and (min-width: 1900px) {
	/* extra-wide desktop layout */ 
	

  
  #slogan h1 {color: #f5be41; font-size: 1.9rem; margin-bottom: .8rem; text-align:center;}
  #slogan {;font-size: 1.4rem;  padding:.8rem; }
  #slogan p {line-height:1.8rem;}
  a.button {padding: 0.3rem 0.3rem; margin-top:1.4rem; border-width:4px; }
}