/**
 * Header banner image
 */
header {
	background: #333333 url('/SiteElements/images/custom-branding/Virtual-school/Virtual-school-header-banner-no-logo.jpg') no-repeat center top;
	background-size: cover;
    min-height: 120px!important;
    height: 120px !important;

}

/* Ensure search stays visible on mobile */

@media only screen and (max-width: 1170px) {
    .block.search {
        display: block!important;
    }
}

/* a:focus ,area[href]:focus, input:focus, select:focus, textarea:focus, button:focus, iframe:focus, 
[tabindex]:focus, [contentEditable=true]:focus, .addFocus:focus
{
  border-color:    #419E64 !important;
} */

@media only screen and (max-width: 760px)
{
	.intro .container img {
		display: block;
	}
}


/* header */

header h1 {
  	display: inline-block;
  	width: 60%;
  	height: auto;
  	margin: 0;
	  
}

header h1 a img {
	max-width: 100%;
	height: auto;
	display: block;
  	margin: 0 auto;
}

header .search {
  	display: inline-block;
  	width: 85%;
  	margin: 15px 0;
}

@media only screen and (min-width: 760px) {
  
  	
	header .container  {
  		text-align: left;
	}

    header h1 {
        width: 30%;
        margin: 0;
    }
  
  	header h1 a img {
      	margin: 0;
    }
  
  	header .search {
      	float: right;
      	width: 65%;
      	text-align: right;
      	margin: 25px 0 0;
    }
}

@media only screen and (min-width: 1170px) {
  
  	header .search {
      	margin-top: 35px;
    }
  
  
  
}

/* GW 28/09/2016 Make Vimeo video embeds responsive*/
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

  /* GW 27/09/2016 Removing additional padding from alt. standard page content on mobile view */

/*.content {
    padding: 20px 20px 40px 20px;}

.content .container {
  padding: 0px 0px 0px 0px;}
margin: 20px 20px 40px 20px;}

.content .landing{
  padding: 0px 0px 0px 0px;}

.altStandardSection{
  margin: -20px -20px -40px -20px;}
.content.loaded :not(content.landing.loaded){
  padding: 20px 20px 40px 20px;}*/

.content .container .container {
  padding: 0px 0px 0px 0px;
}


/* Reduce height/padding of homepage menu */

@media only screen and (min-width: 970px) {
    .intro .container .content {
        padding: 2em 0 2em 0;
    }

@media only screen and (min-width: 1170px) {
    .intro {
        min-height: 450px;
    }
}


/**
 * Header logo
 */
/*
 header h1 { 
   width: 284px; 
	background: none;
   margin-bottom: -10px
}

header h1 a {
    display: inline-block;
    text-indent: 0em; 
}


header h1 a img{
    width: 100%;
    height: 100%;
	width: auto;
	height: auto;
	max-width: 250px;
	max-height: 70px;  
}


.search.block { 
	top: -20px;
	position: relative; 
	margin-left: 100px;
}

@media only screen and (max-width : 760px) {
  
  	.search.block { 
      	margin-left: 0;
      	top: 3px;
    }
 	 
}
*/
/**
 * Landing page heading underline colour
 */
.landing .intro .container .content h1 {
    border-bottom: 2px solid #6e9500;
}

/**
 * Alternative landing page heading underline colour
 */
.altlandingMid {  
  	/*border-top: 3px solid #3E7D30; */
}


/**
 * Menu bar colour
 */
nav {
    background-color: #6e9500;
}

/**
 * Colour of 'Find out more' button on carousel
 */
.content .secondary {
    background-color: #6e9500;
    color: black;
}

/**
 * Hover colour of 'Find out more' button on carousel
 */

.content .secondary:hover { background-color: #00662c; }

/**
 * Line above title colour
 */
.content .toolbar {
    border-top: 2px solid #6e9500;
}
.altToolbar {
	padding: 0px;
}
/**
 * Removes 'Hertfordshire County Council' from right of search button
 */

header h2 {
    background: url('') no-repeat left top;
  display: none;
}

/**
 * Jump links colour
 */
.content article ul:not([class]) li::before {
    color: #6e9500;
}

/**
 * Breadcrumb active page colour
 */
.breadcrumb ul li.active { 
  	background-color: #6e9500;
}

/**
 * Breadcrumb hover colour
 */
.breadcrumb ul li a:hover, .breadcrumb ul li a:focus {
    background-color: #6e9500;
}

/**
 * Breadcrumb divider line hover colour
 */
.breadcrumb ul:hover + .toggleMenu, 
.breadcrumb .toggleMenu.active {
  	border-color: #486916;
}

/**
 * Left line in body of page colour
 */
.content .vcard, .content .indented {
    border-left: 3px solid #6e9500;
}

/**
 * Form left line colour
 */
ul.sys_cms-form-body {
    border-left: 2px solid #6e9500;
}

/**
 * Primary call to action button colour
 */
.content .primary {
    background-color: #6e9500;
}

/**
 * Primary call to action button hover colour
 */
.content .primary:hover {
    background-color: #00662c;
}

/**
 * Jump link colour
 */
.content .anchors li a, a[name*='_Top1'] + ul li a {
    color: #6e9500;
}

/**
 * Jump link hover colour
 */
.content .anchors li a:hover,
a[name*="_Top1"] + ul li a:hover { color: #00662c; }

/**
 * Jump link external link colour
 */
.content a.link-taskLink {
    color: #6e9500;
}

/* active crumbtrail link colour - HS 170316 */


li.active-trail.show.active>a.active-trail {color: #fff;}

/**
 * Landing page top tasks/recycling widget colour
 */
.landing .topTasks {
    /*background-color: #6e9500;*/
  	background-color: #fff;
}

/**
 * Opening hours tab colour
 */
.tab-links li.active a, .tab-links li.active a:hover {
    background: #6e9500;
}

/**
 * Mobile view nav button colour
 */
.landing .intro .container .content ul li a {
    background-color: #6e9500;
}

/**
 * Mobile view nav button hover colour
 */
.landing .intro .container .content ul li a:hover {
    background-color: #00662c;
}

/**
 * HAFLS card
 */
.content .widget.cardHAFLS h3 {
  	background-color: #6e9500;
}

/**
 * Alternative landing page tile colour
 */
.landing .intro .container .content ul.altpurple li a{
  	background-color: #6e9500;
    color: white;
      border-style:    solid;   
  border-width:    3px;
  border-color:    #6e9500;
}

.landing .intro .container .content ul.altpurple li a:hover{
 	background-color: #00662c;
}

/*background color for body reset*/

body {
    background-color: #333333;
}


/*
@media only screen and (min-width : 480px)  
{
	header h1 {
      	width: auto;
    }
  
  	header .container {
      	min-height: 110px;
    }
}

@media only screen and (min-width : 768px) 
{
	header h1 a img {
      	max-height: 90px;
    }
}
   

@media only screen and (min-width : 970px)  
{
	header h1 a img {
      	max-height: 130px;
    }
}
*/


@media only screen and (max-device-width : 768px) 
   
   {
/*
.search.block .searchButton { 
      margin-top: -20px; position: relative; 
    }
 
     
header .container h1 {
    box-sizing: border-box;
	margin-top:  15px;
    padding: 0;
    margin-bottom: 0px;
    text-align: center;
}

header .container { 
  max-height: 240px;
}*/
.landing .intro .container .content .altcontentlinks ul li a {
    background-color: #6e9500 !important;
    text-align: center;
	border-color: #6e9500;
	color: #fff;
}
   }




@media only screen and (max-width : 970px) 
      {
 /*
	header .container { min-height: 240px; }
	header h1 { width: 250px;}
	header h1 a {
    	display: block;
    	text-indent: 0em; 
    	padding-bottom: 20px; 
    	margin-top:  0px;
	}

	.search.block, .search.block .searchButton {
      	margin-top: 50px; 
      	position: relative; 
      	 
    }*/
 .altcontenttoptasks h1 {width: 90%;}
   
 
}

@media only screen and (max-width : 736px) {
  /*
  .search.block, .search.block .searchButton {
    margin-top: 70px; 
    position: relative; 
  }*/
  /*addition hs 14/04/16**/

.landing .intro .container .content.altcontenttoptasks h1 {
    border-bottom: none;
}

 .altlanding {
        border-top: 2px solid #6e9500;
        width: 90%;   
    }
}
/*
@media only screen and (max-width : 1170px) {

  	header h1 a img {
		max-width: 175px;
		margin-top: 40px;
	}  
}
@media only screen and (max-width : 970px) {

  	header h1 a img {
		max-width: 150px;
		margin-top: 50px;
	}
}
*/
 

@media only screen   
  and (max-device-width: 568px)
{
/*
	   	header h1 a {
	 	 margin-top: -10px;
  	}
	
  	header h1 a img{
	 	max-width: 284px;
		max-height: 130px;
  	}
  
 header .container { 
   		max-height: 175px; 
   		min-height: 175px;
 	}
 	  .search.block, .search.block .searchButton {
        margin-top: 40px; 
        position: relative;
  }*/
      .altLandItem li{ width: 100% !important;}
}

/* mega menu text colour */
.nav a {
    color: #fff;
}
.nav.primary .menu .menuPrimaryLink {
  color: #000
}
.nav.primary .menu .menuSecondaryLink {
  color: #000
}
.nav.primary > li .menu ul li ul li.summary h2 {
    color: #000;
}
.nav.primary > li .menu ul li ul li.summary p {
    color: #000
}
.nav.primary > li .menu ul.feature li h2 {
  color: #000
}
.nav.primary > li .menu ul.feature li p {
    color: #000
}

/* mega menu chevron colour */
.primary.nav > li .menu ul.feature li p::after {
    color: #6e9500;
}
.primary.nav > li .menu ul li ul li.summary p::after {
    color: #6e9500;
}


/* mega menu text hover colour */
.nav.primary > li > a:hover, 
.nav.primary > li > a:focus, 
.nav.primary > li.hover > a {
  	color: #000;
}

/* mega menu links and highlight colour */
.nav.primary .menu .menuPrimaryLink:hover, 
.nav.primary .menu .menuPrimaryLink:focus, 
.nav.primary .menu .menuPrimaryLink.current {
  	background-color: #009540;
    color: #000;
}

.nav.primary .menu .menuSecondaryLink:hover, 
.nav.primary .menu .menuSecondaryLink:focus, 
.nav.primary .menu .menuAdLink:hover, 
.nav.primary .menu .menuAdLink:focus {
    color: #000;
}

/* testimonial line colour */
.content blockquote {
    border-left: 2px solid #6e9500;
}

/* call to action button text*/
.content .primary a {
    color: white;
}


.altlandingMid h3 {
  	font-weight: 400;
}
/*desktop view text colour */
@media only screen and (min-width:760px) {
.intro .container .content ul li a {
    color: white;
}
}

/* Card colour - Change blue and grey cards to 'Virtual School' colours*/
.content .widget.cardBlue h3 {
    background-color: #6e9500;
}

.content .widget h3 {
  background-color: #6e9500;
}

/* Event View button text colour */

.content .secondary {
    color: white;
}

/* form submission button colour */

.sys_form-submit, .sys_pagebreak button {

    background-color: #6e9500;
    color: white;
}

/**************************** Search Button *****************************/
header .search {
	width: 100%;
	margin-bottom: .25em;
	margin-top: 1em;
	vertical-align: text-bottom;
}
.sys_theme-simple .sys_search-query-control input.sys_searchbox{
    margin: 25px 5px 0 0;
}
@media only screen and (min-width: 480px) {

header .search {
	display: inline-block;
	width: 60%;
	margin-top: 0;
}
}

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

header .search { width: 70%; padding-top: 35px; }

}

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

header .search { width: 60%; }
}

header .search label { display: none; }

header .search input,
header .search button,
.searchButton {
	border: none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-pie-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 1px 1px 2px #4d4d4d;
	-moz-box-shadow: 1px 1px 2px #4d4d4d;
	box-shadow: 1px 1px 2px #4d4d4d;
	padding: 15px;
}

.searchButton {
  padding: 15px 0;
}

header .search input:not([type="submit"]) {
	margin-right: 8px;
	font-family: 'Open Sans', sans-serif;
	width: 60%;
}

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

header .search input:not([type="submit"]) { width: 65%; }
}

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

header .search input:not([type="submit"]) { width: 80%; }
}

header .search button,
.searchButton {
	background-color: #e67328;
	border: none;
	position: relative;
	text-indent: -999em;
	width: 3.2em;
   color: #e67328; 
}



header .search button:before,
.searchButton:before {
	font-family: "fontello";
	text-decoration: inherit;
	font-variant: normal;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: white;
	display: inline-block;
	font-size: 1.6em;
	line-height: 1.9em;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	text-indent: 0;
	content: '\e80c';
}

header .search button:hover:before,
.searchButton:hover:before{
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-ms-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: pulse;
	-moz-animation-name: pulse;
	-ms-animation-name: pulse;
	-o-animation-name: pulse;
	animation-name: pulse;
}

#c2{
    width: 10% !important;
}

#c3{
    width: 50% !important;
}

#styleOptions{
    margin-top: 40px;
}

.landing #card {
    position: relative;
    right: 0;
}
@media only screen and (max-width: 759px) {
    .landing #card {
        position: relative;
        margin: 0px;
    }
}
@media only screen and (min-width: 760px) {
    header .container {
        padding: 50px 20px;
        padding-top: 20px;
    }
}