﻿/**
 * Header banner image
 */


header {
	background-size: cover !important;
}

header h1 a, header .header a
{
    text-indent: 0px;
    width: 181px;
}

/* 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;
} */

.sys_theme-simple .sys_search-query-control input.sys_button {
    background-color: #e00606;
    border: #e00606;
    color: white;
    padding: 13px;
}

.sys_theme-simple .sys_search-query-control label
{
    display:none;
}

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


.sys_theme-simple .sys_search-control .sys_search-title
{
  visibility: hidden !important; 
}

.sys_theme-simple .sys_search-query-control {
   margin-left: 27px;
}
.sys_theme-simple .sys_search-query-control input.sys_searchbox {
    width: 135px !important;
    margin-bottom: 10px !important;
}

@media only screen and (min-width: 480px)
{
	.sys_theme-simple .sys_search-query-control input.sys_searchbox {
   	 width: 300px !important;
	}



}
@media only screen and (max-width: 760px)
{
    header h1, header .header{
        display:inline-block;
    }
    .header
    {
        height: 250px;
    }
    .mobile-menu{
    top: 60px;

    }

    header h1 a, header .header a{
        position: relative;
        top: 60px;
        left: 30px;
    }
}
@media only screen and (min-width: 760px)
{
	.sys_theme-simple .sys_search-query-control input.sys_searchbox {
     margin-right: 300px;
	}
}

 .LogoImageDAH
    {
       display: inline;
    }

@media only screen and (max-width: 1100px)
{
    .sunflowerPhone
    {
       display: none;
    }

    header
    {
        height: 300px;
    }
}

@media only screen and (min-width: 764px) and (max-width: 1400px)
{
    .main-menu{
       right: 15%; 
    }
}


/**
 * Header logo
 */
/*
 header h1 { 
   width: 310px; 
   background: none;
}

header h1 a {
    display: inline-block;
    text-indent: 0em;
    margin-bottom: 20px;
}


header h1 a img{
    width: 100%;
    height: 100%;
    max-width: 310px;
	max-height: 171px;  
}

.search.block { 
	top:  -20px; 
	position: relative; 
}*/

/**
 * Landing page heading underline colour
 */
.landing .intro .container .content h1 {
    border-bottom: 2px solid #e00606;
}

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

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

/**
 * Colour of 'Find out more' button on carousel
 */
.content .secondary a {
    background-color: #e00606;
    border: 0;
    color: black;
}

.content .secondary {
    background-color: #e00606;
    border: 0;
    color: black;
}
/**
 * Hover colour of 'Find out more' button on carousel
 */

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

/**
 * Line above title colour
 */
.content .toolbar {
    border-top: 2px solid #e00606;
}

/**
 * Removes 'Hertfordshire County Council' from right of search button
 */
/*
header h2 {
    background: url('') no-repeat left top;
}*/

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

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

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



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

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

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

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

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

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

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

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

/* active crumbtrail link colour - HS 170316 


li.active-trail.show.active>a.active-trail {color: #000;}*/

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

.topTasks.altmiddle { margin-top: -42px;}

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

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

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

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

/* Alternative landing page tile hover over colour*/

.landing .intro .container .content ul.altpurple li a:hover{
  background-color: #bc1c10 !important;
    border-style:    solid;   
  border-width:    3px;
  border-color:    #bc1c10 !important;
}

/*background color for body reset*/

body {
    background-color: #333333;
}


.landing .intro .container .content ul.altpurple li a:hover{
 	background-color: #bc1c10 !important;
}
 
@media only screen and (max-device-width : 768px) 
   
   {

   	.landing .topTasks {
    background-color: white;
}
/*
.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: 165px;
}*/
.landing .intro .container .content .altcontentlinks ul li a {
    
 
}
   }


@media only screen and (max-width : 970px) 
      {
/*
        header {
         min-height: 300px;
    }
        
          	   	header h1 {
         height: 155px;
  	}
        
	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) {
/*
          header {
         min-height: 300px;
    }
  
    	   	header h1 {
         height: 155px;
  	}
  
  .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 #e00606;
        width: 90%;   
    }

}

 

@media only screen   
  and (max-device-width: 568px)
{

 /*       header {
         min-height: 300px;
    }
  
  	   	header h1 {
         height: 165px;
  	}
  
	   	header h1 a {
	 	 margin-top: -10px;
  	}
	
  	header h1 a img{
	 	max-width: 250px;
		max-height: 171px;
        margin-left: -20px;
        margin-bottom: 100px;
  	}
  
 header .container { 
   		max-height: 175px; 
   		min-height: 175px;
 	}
*/

      .altLandItem li{ width: 100% !important;}
}

.content .slideshow {margin-bottom: 40px;  }

/* to put the news carousel in the aside*/

.altStandardAside .slideshow img {height: 200px;}

.altStandardAside .slideshow .slide .content { padding-bottom: 1em;}

.altStandardAside .slideshow .slide .content p { font-size: 1.5em; margin-bottom:  25px; line-height: 1.5em;}

.altStandardAside .slideshow .slide .content .button {
	margin-bottom:50px;
}

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

/* 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: #e00606;
}
.primary.nav > li .menu ul li ul li.summary p::after {
    color: #e00606;
}


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

/* mega menu item bg hover colour */
.main-menu .main-menu__panel li:hover > a{
   background-color: #e00606; 
}

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

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

/* Mega menu width */

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

  .nav.primary > li .menu {
	width: 40%;
	left: 35%;
}
  .nav.primary > li .menu ul {
  width: 100%;
  }
   
}


/* Header contact details */

.sunflowerContact {
    position: absolute;
    float: right;
    top: 180px;
    right: 38px;
}

header .container {
    padding-bottom: 80px;
    margin-bottom: 20px;
}

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

.sunflowerContact {
    top: 48px;
}
  
header .container {
    padding-bottom: 10px;
}

}

.sunflowerContact .sunflowerPhone {
    background-color: white;
    color: #e00606;
    font-weight: 700;
    opacity: 0.9;
    -moz-opacity: 0.9;
    -webkit-opacity: 0.9;
    -ms-opacity: 0.9;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -ms-border-radius: 5px;
  	padding-top: 15px;
}
.sunflowerContact p {
    margin: 10px 0;
    padding: 0 10px 10px 10px;
    line-height: 2em;
}
.sunflowerContact .sunflowerEmail {
    background-color: white;
    color: #e00606;
    font-weight: 700;
    opacity: 0.9;
    -moz-opacity: 0.9;
    -webkit-opacity: 0.9;
    -ms-opacity: 0.9;
     border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -ms-border-radius: 5px;
}
.sunflowerContact .sunflowerEmail:before {
    content: url('/SiteElements/images/custom-branding/sunphone.png');
    position: relative;
    top: 10px;
    right: 5px;
}
.sunflowerContact .sunflowerEmail a {
    background-color: white;
    color: #e00606;
}

/* Card colour - Change cards to 'Herts Sunflower' colours */
.content .widget.cardOrange h3 {
    background-color: #e00606;
}
a.microLinks
{
    color: #bc1c10;
}
@media only screen and (max-width: 760px){

  .altcontenttoptasks ul li{
    padding: 0px !important;
  }
}

#c2{
    width: 10% !important;
}

#c3{
    width: 50% !important;
}

#styleOptions{
    margin-top: 40px;
}


 .nav {
        padding: 2rem 0;
    }

    .hamburger-menu {
        height: 23px;
        width: 35px;
        position: absolute;
        top: 4.5rem;
        right: 2.5rem;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
    }

    .hamburger-menu .line {
        display: block;
        height: 4px;
        width: 100%;
        border-radius: 10px;
        background: #e00606;
    }
    
    .nav-menu {
        display: none;
    }

    .nav-menu.visible {
    display: flex;
    flex-direction: column;
    align-items: end;
    background-color: #e00606;
    margin-top: 79px;
    }
    
    .nav .nav-menu a {
        text-decoration: none;
        padding: 2rem 0rem 2rem 2rem;
    }
    .nav .nav-menu__item.sub > a:before {
         content: '\e800';
         position: absolute;
         right: 20px;
         top: 25px;
         display: block;
         font-family: "fontello";
         font-size: 3rem;
         font-weight: 400;
    }
    .nav .nav-menu__item {
        font-size: 1.5rem;
        font-weight: bold;
        text-transform: uppercase;
        padding: 0;
        border-bottom: 2px solid white;
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .nav .nav-subMenu {
        
    }
    .nav .nav-subMenu__item {
        padding: 2rem 0 2rem 1.5rem;
        width: auto;
        font-size: 1.5rem;
    }

    .nav .nav-subMenu__item a {
        display: inline-block;
    }
    
    .nav .nav-subMenu.active {
    display: block;
    }
    .nav .nav-subMenu {
        display: none;
    }
    .nav .nav-menu__item.nav-search {
        display: none;
    }

    @media only screen and (min-width: 1200px) {
.hamburger-menu {
        display: none;
    }
}

@media only screen and (max-width: 1200px) {
 .nav-menu {
        display: none;
    }
}

@media only screen and (min-width: 1200px) {
 .nav-menu {
        display: inline-block;
    }
}


@media only screen and (min-width: 960px) {
    #StickyHeader .header {
        margin-left: 0;
    }

    .nav-menu{
            background-color: #e00606;
    padding: 8px;
    color: white;
    border-radius: 5px;
    }

    #StickyHeader.sticky{
        border-bottom: 3px #f2f2f2 solid;
    }

    .nav-menu.visible {
        display: flex;
        flex-direction: row;
    }
    .nav .nav-menu a {
        color:white;
        text-decoration: none;
    }

     .nav .nav-menu ul li a {
        color: black;
        text-decoration: none;
    }
    
    .nav .nav-menu__item {
        font-size: 0.9rem;
        font-weight: bold;
        text-transform: uppercase;
        padding:  0.5rem 1rem;
        display: inline-block;
        border-bottom: none;
        margin: 0;
        width: auto;
    }

    .nav .nav-menu__item.sub a:before {
        content: "";
    }

    .nav .nav-menu__item.nav-search {
        position: relative;
        vertical-align: top;
        margin-left: 2rem;
        display: inline-block;
    }

    .nav .nav-subMenu {
        position: absolute;
        top: 39px;
        border-top: 3px solid #e00606;
        width: 200px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    .nav .nav-subMenu.active {
        display: block;
    }

    .nav .nav-subMenu__item {
        background-color: #fff;
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
        text-transform: capitalize;
        letter-spacing: 0.5px;
    }
    
    .nav .nav-subMenu__item a {
        padding: 7px 0px;
        text-decoration: none;
        display: block;
    }
}

.aboutMenuItem:hover .aboutDropDown{
display: block;
}

.servicesMenuItem:hover .servicesDropDown{
display: block;
}

.wwuMenuItem:hover .wwuDropDown{
display: block;
}

.volunteerMenuItem:hover .volunteerDropDown{
display: block;
}

.newsMenuItem:hover .newsDropDown{
display: block;
right: -40px;
}

.slick-dots .slick-active button {
    background: #e00606;
}

.links p {
    display: block;
        min-width: 24px;
    min-height: 24px;
}

.qe-button{
        font-size: xx-large;
}