/*
=====  RESPONSIVE.CSS  ======
version 1.0.1
Base responsive stylesheet to keep all media queries in one stylesheet.
*/

/* ======= $SITEWIDE ======= */

     /***** Containers *****/
    
          @media only screen
          and (max-width : 1040px) {
               .inner { /* Turns layout fluid - Affects header, content & footer */
                    width: 100%;
               }
               #fb-root
                {
                     display : none ;
                }

                /* To fill the container and nothing else */

                .fb_iframe_widget , .fb_iframe_widget span , .fb_iframe_widget span iframe[style],
                table
                {
                     width : 100% !important;
                }
          }
          
          @media only screen
          and (max-width : 785px) {
              
              .mainSectionTwoColumn,
              .sideSectionA
              /*Sort out the column widths when the LHS moves under the content*/
              {
                  width:100%;
                  margin:0px;
              }
              /*And lose the old secondary nav*/
              #secondaryNav 
              {
                  display:none;
              }
              /* Display secondary nav on shop pages */
              .woocommerce #secondaryNav {
                display: block;
                padding-top: 20px;
              }
              
          }

     /***** Header *****/
     
        @media only screen
          and (max-width : 835px) {
               .headerIconsWrap,
               .headerIcons  { /* Icons/Search go full width */
                    width: 100%;
                    text-align:center;
               }
               .headerButtons 
               {
                   margin-top:10px;
                   width:100%;
                   text-align:center;
                   margin-bottom:10px;
               }
               .headerButtons ul.resizer li 
               {
                   display:inline-block;
               }
               #donateButton.button 
               {
                    left:12%;
                    top: 77px;
               }
               .headerIconsWrap 
               {
                   height:60px;
                   padding-top:26px;
                   margin:0px;
                   border-top-left-radius: 20px;
                   border-top-right-radius: 20px;
                   background: #125c91;
               }
          }
         @media only screen
          and (max-width : 420px) {
               #donateButton.button  
               {
                   top:-11px;
                   right:20px;
                   left:auto;
                   position:absolute;
               }
          }
          @media only screen
               and (max-width : 340px) { /* Hides unneeded elements on mobile/very small screens */
                    .text-size, #displayOptions {
                         display: none;
                    }
                   
                    #siteSearch     {
                         width: 100%;
                    }
               }
    
    
    /*** Footer ***/
    @media only screen
          and (max-width : 907px) 
          {
            #footer 
            {
                background: #EFEFEF;
            }          
        
    }
    

    @media only screen
        and (max-width : 499px) 
        {
            .headerIconsWrap          /*Make search footer thing taller when screen too small*/
            {
                height:84px;
            }
        }
    
    /*** Left hand column ***/
          @media only screen
          and (max-width : 900px) 
          {
              ul.postingActionsList li          /*Remove icons from posting actions*/
              {
                  background:none;
              }
              ul.postingActionsList li a 
              {
                  padding:0px;
              }
          }
          
          @media only screen
          and (max-width : 768px) 
            {
            ul.postingActionsList li a 
            {
                 padding:30px;
            }
            ul.postingActionsList li.actionPrint 
            {
                background:url(../images/pageActionSprite.png) 0px -1px no-repeat;
            }
            ul.postingActionsList li.actionEmail 
            {
                background:url(../images/pageActionSprite.png) 0px -22px no-repeat;
            }
            ul.postingActionsList li.actionComment
            {
                background:url(../images/pageActionSprite.png) 0px -45px no-repeat;
            }
            ul.postingActionsList li.actionLinkTo
            {
                background:url(../images/pageActionSprite.png) 0px -68px no-repeat;
            }
            ul.postingActionsList li.actionBookmark
            {
                background:url(../images/pageActionSprite.png) 0px -91px no-repeat;
            }
            ul.postingActionsList li.actionPDF 
            {
                background:url(../images/pageActionSprite.png) 0px -114px no-repeat;
            }

            .footerMenu
            {
                margin:0px 20px;
            }
            #MainControl_LeftNav1_PostingActionsPanel1
            {
                margin:0px 0px 0px 20px;
            }
            .facebookLHS .mod 
            {
                margin-right:20px;
            }
            #sideSectionA 
            {
                padding-bottom: 20px;
            }
            .facebookLHS 
            {
                margin-top:0px;
            }
            .newsletterSignupModule .mod 
            {
                margin-left:20px;
            }
          }
          
          @media only screen
          and (max-width : 488px) 
          {
              ul.postingActionsList li          /*Remove icons from posting actions*/
              {
                 /* background:none !important;*/
              }
              ul.postingActionsList li a 
              {
                  /*padding:0px;*/
              }
          }
            @media only screen
          and (max-width : 370px) 
          {
            ul.postingActionsList li a         /*This goes to two rows now, so add icons etc back in*/
            {
                 padding:30px;
            }
            ul.postingActionsList li.actionPrint 
            {
                background:url(../images/pageActionSprite.png) 0px -1px no-repeat !important;
            }
            ul.postingActionsList li.actionEmail 
            {
                background:url(../images/pageActionSprite.png) 0px -22px no-repeat !important;
            }
            ul.postingActionsList li.actionComment
            {
                background:url(../images/pageActionSprite.png) 0px -45px no-repeat !important;
            }
            ul.postingActionsList li.actionLinkTo
            {
                background:url(../images/pageActionSprite.png) 0px -68px no-repeat !important;
            }
            ul.postingActionsList li.actionBookmark
            {
                background:url(../images/pageActionSprite.png) 0px -91px no-repeat !important;
            }
            ul.postingActionsList li.actionPDF 
            {
                background:url(../images/pageActionSprite.png) 0px -114px no-repeat !important;
            }
            .facebookLHS .mod 
            {
                margin-left:20px;
            }
          }
    
     /***** Navigation *****/
     
    /* Sticky Navigation */

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

            
            ul.nav-main .nestLevel3,
            ul.nav-main .nestLevel4,
            ul.nav-main .nestLevel5,
            ul.nav-main .nestLevel6 
            {
                display:inline;
            }
            .header-bar {
                            background: none;
                            text-align: center;
                            padding-bottom: 3px;
                            border-bottom: 1px dotted #666;
            }

            #header {
               
            }
            
            #cube-nav-button {
                            width: 100%;
                            float: left;
                            background:#C7D8EF;
                            padding:10px 0px 10px 150px;
                            color:#1764B4;
                            height:auto;
                            font-size:2em;
                            font-family: 'Open Sans', sans-serif;
                            

            }
            .nav-container 
            {
                clear:both;
            }
            .responsiveMode {
                            position: fixed;
                            z-index: 999999;
                            background:
                                            url(../images/mark.png) no-repeat 95% 10px,
                                            url(../images/fabric.png);
                            width: 100%;
                            top: 0;
                            min-height: 45px;
                            padding: 0;
                            left: 0;
                            -webkit-box-shadow: 0px 3px 3px 2px rgba(0, 0, 0, 0.3);
                            box-shadow: 0px 3px 3px 2px rgba(0, 0, 0, 0.3);
            }
            
            .responsiveMode .cube-colour {
                            background: url(../images/menu.png) no-repeat left center;
                            display: block;
                            width: 115px;
                            height: 20px;
                            cursor: pointer;
                            color: #ccc;
                            padding-left: 28px;
                            padding-top: 1px;
                            margin: 12px 0 0 15px;
            }
            
            .responsiveMode .nav-main {
                            padding: 15px 0;
                            width: 100%;
            }
            
            .responsiveMode .menu-item {
                            width: 100%;
                            border: 0;
                            margin: 0;
                            padding: 0 10px;
            }
            
            .responsiveMode .menu-item a {
                            color: #58595b;
                            padding: 12px 0 12px 0;
                            border: 0;
                            border-bottom: 1px dashed #616565;
                            font-size:180%;
                            font-family: 'Open Sans', sans-serif;
                            line-height:1.3em;
                            margin:0;
            }
            .responsiveMode.nav-main 
            {
                padding:10px;
            }
            .responsiveMode.nav-main li.nav-current 
            {
                background:none;
                padding-left:10px;
            }
            .responsiveMode.nav-main .current-menu-item a 
            {
                background:none;
                margin:0px 0px 9px 0px;
                padding:12px 0px 12px 0px;
                display:block;
                border-radius:0px;
            }
                
                
            /*Nest level 2*/
           
            .responsiveMode.nav-main .current-menu-item.menu-item-has-children .sub-menu
            {
                display:block;
                max-width:100%;
            }
            
            .sub-menu li
            {
                border:none !important;
            }
            ul.nav-main ul.sub-menu a 
            {
                /*height:38px;*/
                line-height:1.2em;
                padding-bottom:15px;
                color:#1764B4 !important;
            }
            .responsiveMode.nav-main .current-menu-item.menu-item-has-children .sub-menu a 
            {
                background:none;
                color:White;
            }
            .responsiveMode.nav-main .current-menu-item.menu-item-has-children .sub-menu a:hover 
            {
                background:none;
            }
            .responsiveMode.nav-main li.menu-item ul.sub-menu li a 
            {
                background:none;
                width:80%;
            }
          
			
				.cube-colour {
					display: block;
					width: 20%;
					height: 40px;
					line-height: 40px;
					background: #5A5E61;
					margin: 0 auto;
					border-right: 1px solid #2F3133;
					border-left: 1px solid #2F3133;
				}
			
			
			
				.responsiveMode li {
					display: block;
					border-right: 0;
					position: relative;
					margin-left: 0;
				}
				
				.responsiveMode li a {
					width: 80%;
				}
				
				.responsiveMode .current-menu-item {
					background: none;
				}
				
				.cube-sub-nav-button {
					position: absolute;
					right: 10px;
					top: 0;
					width: 55px;
					height: 35px;
					background: url(../Images/subarrow.png) no-repeat 95% 50%;
				}
				
					.over .cube-sub-nav-button {
						background: url(../Images/subarrowup.png) no-repeat 95% 50%;
					}
				
				#header .over .sub-menu {
					display: block;
				}
				
			.responsiveMode .sub-menu {
				position: static;
				max-width: 100%;
			}
			
				.responsiveMode .sub-menu li {
					margin-left: 0;
				}
            
           
            
}
    
     /***** Footer *****/

/* ======= $HOMEPAGE ======= */

/*Sort out the 'Around the site' bit */
   @media only screen
    and (max-width : 1024px) {
        .jcarousel-skin-footer .jcarousel-container-horizontal
        {
            width:100%;
        }
        .homeLeftColumn .fb-like 
        {
            display:none;
        }
        #homeRHS1 img,
        #homeRHS2 img 
        {
            width:100%;
        }
        
        /*Change padding to percentages where required*/
        #homeRHS1 h4 
        {
            /*margin-top:-100%;*/
        }
        .pageTypeHomePage .newsletter p           /*Tidy up newsletter area*/
        {
            margin-top:10px;
        }
        .pageTypeHomePage .nlFormGroup 
        {
            width:49%;
            margin-right:1%;
        }
        .pageTypeHomePage .nlFormGroup label 
        {
            width:49%;
            display:block;
            float:left;
        }
        .pageTypeHomePage .nlFormGroup input 
        {
            width:49%;
            display:block;
            float:left;
        }
        .pageTypeHomePage #nlForm input 
        {
            max-width:1000px;
        }    

        /* Hide 'Around the site/Related links' for mobile */
        .SHPAround {
            display: none;
        }    
    }

@media only screen
    and (max-width : 985px) 
    {
        #homeRHS1 img 
        {
            display:none;
        }
        #homeRHS1 
        {
            background: #ED3023;
            padding:1em;
        }
        #homeRHS1 h4 
        {
            margin:0;
        }
        #homeRHS1 p 
        {
            margin:0;
        }
    }
/*Rearrange the pillars and main slider*/
    @media only screen
    and (max-width : 800px) {
       .bx-controls .bx-pager {
          display: none;
       }
       .bx-controls .bx-prev {
          bottom: 10px;
       }
       .bx-controls .bx-next {
          right: 10px;
          bottom: 10px;
       }
       #homeSlider,
       .homeLeftColumn,
       .homeRightColumn { 
            width: 100%;
            padding:0px;
            position:relative;
       }
       .homeRightColumn 
       {
           border:none;
       }
       .rslides_nav
       {
           bottom:10%;
       }
       ul.rslides_tabs 
       {
           bottom:10%;
           left:44%;
       }
       .rslides_nav.next 
       {
           right:10px;
       }
       #pillars 
       {
           position:relative;
           margin-top:0px;
           height:auto;
           right:inherit;
           width:100%;
       }
       .pillarRotate 
        {
            -webkit-transform: rotate(0);
            -moz-transform: rotate(0);
            -ms-transform: rotate(0);
            -o-transform: rotate(0);
        }
        .pillar.greenBg p.pillarRotate 
        {
            /*left:0px;
            top:0px;*/
            
        }
        #pillars .mod 
        {
            position:relative;
        }
        #pillars > div 
        {
            max-height:80px;
        }
        .pillar 
        {
            padding:4% 0% 0.1% 1%;
        }
        #homeSlider .homeSliderCaption 
        {
            width:60%;
        }

/*Remodel the RHS */
        #homeRHS2 img 
        {
            width:50%;
            float:left;
        }
        #homeRHS2 p 
        {
            float:left;
            width:50%;
        }
        
        #homeRHS2 .mod
        {
            height:auto;
            margin:0px;
            background:none;
            float:left;
        }
        #homeRHS1 
        {
            height:auto;
            margin:0px;
            width:33.333333%;
            float:left;
            min-height:140px;
        }
        #homeRHS1 .size1of3         /*I'm not going to lie to you. At this point some insane new QC bullshit was sprung on me and I decided semantic code could go and fuck itself provided the site actually looked like it was working.*/
        {
            width:100%;
        }
        .homeRightColumn 
        {
            margin-top:20px;
            background:url(../images/threeDots.png) repeat-x bottom;
            padding-bottom:40px;
            margin-left:26px;
        }
        #homeRHS1 .mod 
        {
            margin-right:10px;
        }
        #homeRHS2 .mod
        {
            margin-left:10px;
        }
        #homeRHS2 p 
        {
            padding-left:20px;
            margin-top:0px;
        }

/*When latest updates are two per line*/
      .pageTypeHomePage .latestUpdate0,
      .pageTypeHomePage .latestUpdate2,
      .pageTypeHomePage .latestUpdate4,
      .pageTypeHomePage .latestUpdate6 
      {
          margin:0px 15px 15px 0px;
      }
      .pageTypeHomePage .latestUpdate1,
      .pageTypeHomePage .latestUpdate3,
      .pageTypeHomePage .latestUpdate5,
      .pageTypeHomePage .latestUpdate7 
      {
          margin:0px 0px 15px 15px;
      }
      .pageTypeHomePage .latestUpdate0 a,
      .pageTypeHomePage .latestUpdate2 a,
      .pageTypeHomePage .latestUpdate4 a,
      .pageTypeHomePage .latestUpdate6 a,
      .pageTypeHomePage .latestUpdate1 a,
      .pageTypeHomePage .latestUpdate3 a,
      .pageTypeHomePage .latestUpdate5 a,
      .pageTypeHomePage .latestUpdate7 a
      {
          display:block;
          min-height:40px;
      }
    }
    @media only screen
    and (max-width : 600px) {
       
    }


 @media only screen
    and (max-width : 550px) 
    {
        /*Remodel the RHS*/
        #homeRHS2 img 
        {
            width:100%;
        }
        .homeRHS2paragraph 
        {
            font-size: 1.8em;
            line-height: 23px;
            margin-top: 20px;
        }
        #homeRHS1 
        {
            width:50%;
        }
        #homeRHS1 .size1of2 
        {
            width:100%;
        }
    }


     @media only screen
    and (max-width : 500px) {
      /*Changin the latest updates sizing*/
      .pageTypeHomePage .latestUpdate0, 
      .pageTypeHomePage .latestUpdate1, 
      .pageTypeHomePage .latestUpdate2,
      .pageTypeHomePage .latestUpdate3,
      .pageTypeHomePage .latestUpdate4,
      .pageTypeHomePage .latestUpdate5, 
      .pageTypeHomePage .latestUpdate6, 
      .pageTypeHomePage .latestUpdate7,
      .pageTypeHomePage .latestUpdate8,
      .pageTypeHomePage .latestUpdate9,
      .pageTypeHomePage .latestUpdate10, 
      .pageTypeHomePage .latestUpdate11, 
      .pageTypeHomePage .latestUpdate12,
      .pageTypeHomePage .latestUpdate13,
      .pageTypeHomePage .latestUpdate14,
      .pageTypeHomePage .latestUpdate15, 
      .pageTypeHomePage .latestUpdate16, 
      .pageTypeHomePage .latestUpdate17,
      .pageTypeHomePage .latestUpdate18,
      .pageTypeHomePage .latestUpdate19,
      .pageTypeHomePage .latestUpdate20, 
      .pageTypeHomePage .latestUpdate21, 
      .pageTypeHomePage .latestUpdate22,
      .pageTypeHomePage .latestUpdate23,
      .pageTypeHomePage .latestUpdate24
      {
          margin:0 0 70px 0;
      }
      
      ul.rslides_tabs           /*The pagination is a bit much at this screen size so get rid of it*/
      {
          display:none;
      }
      .pageTypeHomePage .nlFormGroup 
      {
          width:100%;
          margin:0;
      }
     
    }
     
@media only screen
    and (max-width : 420px) {
      /*Changin the latest updates sizing*/
      .pageTypeHomePage .latestUpdate0, 
      .pageTypeHomePage .latestUpdate1, 
      .pageTypeHomePage .latestUpdate2,
      .pageTypeHomePage .latestUpdate3,
      .pageTypeHomePage .latestUpdate4,
      .pageTypeHomePage .latestUpdate5, 
      .pageTypeHomePage .latestUpdate6, 
      .pageTypeHomePage .latestUpdate7,
      .pageTypeHomePage .latestUpdate8,
      .pageTypeHomePage .latestUpdate9,
      .pageTypeHomePage .latestUpdate10, 
      .pageTypeHomePage .latestUpdate11, 
      .pageTypeHomePage .latestUpdate12,
      .pageTypeHomePage .latestUpdate13,
      .pageTypeHomePage .latestUpdate14,
      .pageTypeHomePage .latestUpdate15, 
      .pageTypeHomePage .latestUpdate16, 
      .pageTypeHomePage .latestUpdate17,
      .pageTypeHomePage .latestUpdate18,
      .pageTypeHomePage .latestUpdate19,
      .pageTypeHomePage .latestUpdate20, 
      .pageTypeHomePage .latestUpdate21, 
      .pageTypeHomePage .latestUpdate22,
      .pageTypeHomePage .latestUpdate23,
      .pageTypeHomePage .latestUpdate24
      {
          margin:0 0 50px 0;
      }
      
}
    
    @media only screen and (max-width : 388px) 
    {
         #homeRHS1 h4 
         {
             font-size:3em;
             
         }   
         #homeRHS1 p 
         {
             font-size:1.5em;
             margin:0px 10px;
         }    
    }
      
   @media only screen and (max-width : 350px) 
    { 
    /*Changin the latest updates sizing*/
      .pageTypeHomePage .latestUpdate0, 
      .pageTypeHomePage .latestUpdate1, 
      .pageTypeHomePage .latestUpdate2,
      .pageTypeHomePage .latestUpdate3,
      .pageTypeHomePage .latestUpdate4,
      .pageTypeHomePage .latestUpdate5, 
      .pageTypeHomePage .latestUpdate6, 
      .pageTypeHomePage .latestUpdate7,
      .pageTypeHomePage .latestUpdate8,
      .pageTypeHomePage .latestUpdate9,
      .pageTypeHomePage .latestUpdate10, 
      .pageTypeHomePage .latestUpdate11, 
      .pageTypeHomePage .latestUpdate12,
      .pageTypeHomePage .latestUpdate13,
      .pageTypeHomePage .latestUpdate14,
      .pageTypeHomePage .latestUpdate15, 
      .pageTypeHomePage .latestUpdate16, 
      .pageTypeHomePage .latestUpdate17,
      .pageTypeHomePage .latestUpdate18,
      .pageTypeHomePage .latestUpdate19,
      .pageTypeHomePage .latestUpdate20, 
      .pageTypeHomePage .latestUpdate21, 
      .pageTypeHomePage .latestUpdate22,
      .pageTypeHomePage .latestUpdate23,
      .pageTypeHomePage .latestUpdate24
      {
          margin:0 0 30px 0;
      }
    }
    
/* ======= $SUBHOMEPAGE ======= */
@media only screen
      and (max-width : 1040px) {
           #SHPTopImage img 
            {
                width:100%;
            }
            
      }


@media only screen
      and (max-width : 950px) {
        span.SHPDroplet
        {
            background-size:90% 90% !important;
        }
        .SHPDroplet 
        {
            right:0;
            padding-right:36px;
        }
            
    }
 @media only screen
  and (max-width : 860px) 
  {
      /*Change the SHP hero image droplet for a solid square*/
    span.SHPDroplet
    {
        margin:0;
        top:0;
        right:0;
        width:33%;
        padding:25px;
        opacity:0.8;
        height:100%;
    }
    
    .variation1865b3 span.SHPDroplet 
    {
        background:#1865b3;
    }
    .variation4ab4da span.SHPDroplet 
    {
        background:#4ab4da;
    }
    .variationb5549c span.SHPDroplet 
    {
        background:#b5549c;
    }
    .variation5199d7 span.SHPDroplet 
    {
        background:#5199d7;
    }
    .variation008d9d span.SHPDroplet 
    {
        background:#008d9d;
    }
    .variation8b82aa span.SHPDroplet 
    {
        background:#8b82aa;
    }
    .variationf0463a span.SHPDroplet 
    {
        background:#f0463a;
    }
}
@media only screen
  and (max-width : 850px) 
  { 
.page #updates .mod 
      {
          height:auto;
      }
  }
@media only screen
  and (max-width : 800px) 
  { 
    /*Resize the updates section*/
    .latestUpdate0, .latestUpdate2, .latestUpdate4, .latestUpdate6
    {
        margin:0px 15px 15px 0px;
        
    }    
    .latestUpdate1, .latestUpdate3, .latestUpdate5, .latestUpdate7
    {
        margin:0px 0px 15px 15px;
        
    }
    .page #updates .unit.size1of2 
    {
        min-height:325px;
    }
      
  }


@media only screen
  and (max-width : 700px) 
  { 
      span.SHPDroplet
    {
        width:50%;
        
    }
      
  }

@media only screen and (max-width : 625px) 
{ 
    .pageTypeSubHomePage iframe
    {
        width:100% !important;
    }
}
  
@media only screen
and (max-width : 550px) 
  { 
      span.SHPDroplet
    {
        width:100%;
        opacity:1.0;
        position:static;
        text-align:center;
        
    }
      
  }

@media only screen
  and (max-width : 500px) 
  { 
    /*Resize the updates section*/
    .latestUpdate0, .latestUpdate2, .latestUpdate4, .latestUpdate6,
    .latestUpdate1, .latestUpdate3, .latestUpdate5, .latestUpdate7
    {
        margin:0px 0px 15px 0px;
        
    }    
         
  }
  
  
/* ======= $GENERALCONTENT ======= */

@media only screen
  and (max-width : 675px) 
  { 
    /*Resize the block quote*/
    .pageTypeGeneralContent blockquote
    {
        width:50%;
    }    
         
  }
  @media only screen
  and (max-width : 475px) 
  { 
    /*Resize the block quote*/
    .pageTypeGeneralContent blockquote
    {
        width:88%;
    }    
         
  }
  
/* ======= @SUBHOMEPAGE2 ======== */
/*That top carousel is a tricky little bastard*/
@media only screen and (max-width : 1024px) 
{
    #topCarousel .jcarousel-skin-footer,
    #topCarousel .jcarousel-container 
    {
        width:100%;
    }
} 

@media only screen and (max-width : 600px) 
{
    #topCarousel 
    {
        display:none;
    }
    /**Yeah, none of this actually worked on a mobile.  Which is a shame.***/
    /*ul#SHP2Slider.jcarousel-list,
    #topCarousel .jcarousel-skin-footer, 
    #topCarousel .jcarousel-item,
    #topCarousel .jcarousel-skin-footer img
    {
        width:100% !important;
    }
    .jcarousel-prev,
    .jcarousel-next 
    {
        display:none !important;
    }
    #SHP2Slider.jcarousel-list li.jcarousel-item 
    {
        display:none;
    }
    #SHP2Slider.jcarousel-list li.jcarousel-item:first-child 
    {
        display:block;
    }
    #topCarousel #SHP2Slider 
    {
        height:auto;
    }*/
}
/* ======= @SUBHOMEPAGE3 ======== */
@media only screen
and (max-width : 768px) 
{
    .searchOn .postcodeSearch 
    {
        margin-left:20px;
        width:50%;
    }
    
    .gmSearchContainer 
    {
        height:65px;
    }
    
    
    
}  
  
 @media only screen
and (max-width : 500px) 
{
 
  .pageTypeSubHomePage3 .mapCaption 
    {
        display:none;
    }
  
.imageMap 
{
    padding-left:0px;
}
} 
@media only screen
and (max-width : 435px) 
{
.imageMap img,
.imageMap 
{
    max-width:100%;
    max-height:100%;
} 
}
  /* ======= @SUBHOMEPAGE4 ======== */
@media only screen
and (max-width : 850px) 
{ 
    /*Move the hero caption (grey) below the hero image*/
    .pageTypeSubHomePage4 .captionArea 
    {
        width:100%;
        top:0;
        left:0;
        position:static;
        display:block;
        -webkit-border-radius: 0px 0px 20px 20px;
        border-radius: 0px 0px 20px 20px;
    }
}
@media only screen
and (max-width : 560px) 
{ 
    /*Move the other caption (red) above the hero image caption*/
    .pageTypeSubHomePage4 .SHPDroplet 
    {
        width:100%;
        top:0;
        left:0;
        position:static;
        display:block;
        margin:0px;
        
    }
    .pageTypeSubHomePage4 .SHPDroplet .dropletText 
    {
        margin-bottom:0px !important;
        padding-bottom:20px;
    }
}


@media only screen
and (max-width : 600px) 
{ 
    /*Change the shape of the store preview windows accordingly*/
    .woocommerce .size1of3
    {
        width:50%;
    }

    .woocommerce .mod 
    {
        margin:10px !important;
    }
    .woocommerce > div 
    {
        clear:none;
    }
    .woocommerce .category2,
    .woocommerce .category4,
    .woocommerce .category6,
    .woocommerce .category8,
    .woocommerce .category10,
    .woocommerce .category12,
    .woocommerce .category14,
    .woocommerce .category16
    {
        clear:both;
    }
}
@media only screen
and (max-width : 450px) 
{ 
    /*Change the shape of the store preview windows accordingly*/
    .woocommerce .size1of3
    {
        width:100%;
    }

    .woocommerce .mod 
    {
        margin:10px !important;
    }
    .woocommerce > div 
    {
        clear:both;
    }
    .woocommerce img 
    {
        width:100%;
    }
    .woocommerce .payment_method_sagepayform img {
        width: auto;
    }       

}  



/**** Secondary nav wrapper/footer section *****/
@media only screen
  and (max-width : 785px) 
  { 
      .mainSectionTwoColumn     /*This is the point which the two column layout becomes one*/
      {
          width:100%;
      }
      
      #secondaryNavWrapper 
      {

      }
      #footer 
      {
          clear:both;
      }
      .signUpLHS,
      .pageActions,
      .facebookLHS 
      {
          width:33%;
          float:left;
      }
      .addthis_toolbox 
      {
          display:none;
      }
      .sideSectionA 
      {
          background:#EFEFEF;
          padding:0px 20px;
      }
      
      
  }
  
  @media only screen
  and (max-width : 768px)  
  {
      .signUpLHS,
      .pageActions
      {
          width:50%;
          float:left;
      }
      .facebookLHS 
      {
          width:100%;
          margin-left:20px;
      }
      .nlFormGroup 
      {
          width:100%;
      }
  }  
@media only screen
  and (max-width : 530px)  
  {
      .signUpLHS,
      .pageActions,
      .facebookLHS,
      .nlFormGroup 
      {
          width:100%;
          margin:0;
         
      }
      ul.postingActionsList 
      {
          padding:0;
      }
      .facebookLHS 
      {
          margin: 10px 0 0 20px;
        }
      frame#f2d4c8b1caa3ecc.fb_ltr 
      {
          border:transparent !important;
      }
  }
  @media only screen
  and (max-width : 370px)  
  {
        .facebookLHS 
        {
          margin: 10px 0 0 0;
        }
  }
  
  
/*** Authentication ***/

@media only screen
  and (max-width : 450px)  
  {
.authenticationPage .mainContainer {
      
          width:200px !important;
          margin:0 20px;
          background:red !important;
      }
      
      
      
  }

/* ======= $EVENTS ======= */

@media only screen
and (max-width : 740px) {
.channelSummaryeventsMode .StandardMode, .channelSummaryEventsMode .standardMode, .channelSummaryeventsMode .channelSummaryEventsMode {
width: 100%;
display: table-footer-group;
}
.channelSummaryeventsMode .StandardMode + div, .channelSummaryEventsMode .standardMode + div, .channelSummaryeventsMode .channelSummaryEventsMode + div {
display: table-header-group;
}
.eventsSearch {
width: 100%;
padding: 0;
}
.channelSummaryeventsMode {
display: table;
}
}



/**** Forms ****/
@media only screen and (max-width: 520px),
       only screen and (min-width: 651px) and (max-width: 858px)
{
   .pageTypeWebForm table
   {
       padding:0 10px;
   }
    .formPanel tr,
    .formPanel th,
    .formPanel td
    {
        display: block;
        padding: 0;
    }

    .formPanel tr
    {
        clear: both;
        overflow: hidden;
    }

    .formTable > tbody > tr
    {
        margin-bottom: 20px;
    }

    .formTable > tbody > .fullWidthLabel
    {
        margin-bottom: 0;
    }

    .formLabel
    {
        width: 100%;
        text-align: left;
    }

    .radioButtonGrid tr
    {
        display: table-row;
    }

    .radioButtonGrid th,
    .radioButtonGrid td
    {
        display: table-cell;
    }

    .radioButtonGrid th
    {
        width: auto;
    }
}

/*** Google maps ****/
@media only screen and (max-width: 975px)
{
    .gmMapCanvas 
    {
        width:450px !important;
    }
    .pageTypeLocationSearch div.pageBodyContent div.gmMapContainerInner 
    {
        background:none;
    }
}
@media only screen and (max-width: 915px)
{
    .gmMapCanvas 
    {
        width:400px !important;
    }
 
}
@media only screen and (max-width: 850px)
{
    .gmMapCanvas 
    {
        width:350px !important;
    }
 
}
@media only screen and (max-width: 785px)
{
    .gmMapCanvas 
    {
        width:500px !important;
    }
 
}
@media only screen and (max-width: 750px)
{
    .gmMapCanvas 
    {
        width:450px !important;
    }
 
}
@media only screen and (max-width: 700px)
{
    .gmMapCanvas 
    {
        width:100% !important;
        clear:both;
    }
    .pageTypeLocationSearch div.catListContainer 
    {
        width:100%;
        float:left;
        display:block;
    }
    .pageTypeLocationSearch div.catListContainer div.catListInner 
    {
        width:100%;
    }
    .pageTypeLocationSearch .catListItem 
    {
        width:25%;
        float:left;
        clear:none !important;
    }
 
}
@media only screen and (max-width: 650px)
{
    
    .pageTypeLocationSearch .catListItem 
    {
        width:50%;
    }
 
}
@media only screen and (max-width: 380px)
{
    
    .pageTypeLocationSearch .catListItem 
    {
        width:100%;
    }
 
}

/*** Shopping basket ***/
@media only screen and (min-width: 500px) and (max-width: 650px),
       only screen and (min-width: 827px)
{
    .product-images-outer
    {
        float: left;
        width: 50%;
        padding-right: 10px;
    }
    
    .product-details
    {
        float: right;
        width: 50%;
        padding-left: 10px;
        margin-top: 0;
    }
}

/* Basket Page */
.noItemsAlert
{
    font-weight: bold;
    font-size: 1.4em;
    margin-top: 1em;
}

.basketTable
{
    border-top: 1px solid #2C2A29;
    margin-top: 1em;
    padding-top: 1em;
}

    .itemQuantityBox
    {
        width: 2em;
        background: none;
        border: 2px solid #2C2A29;
        border-radius: 0;
        box-shadow: none;
        color: #2C2A29;
        font-size: 1em;
        padding: 5px;
        -webkit-appearance: none;
    }
    
    .itemQuantityBox:focus
    {
        background: #FAE100;
        color: #2C2A29;
    }
    
.basketControlButtons input
{
    border: none;
    border-radius: 0;
    color: #FFF;
    cursor: pointer;
    font-family: "FS Me Web Bold",Helvetica,Arial,Verdana,sans-serif;
    font-size: 1.3em;
    padding: 3px 6px;
    margin: 5px 5px 0 0;
    -webkit-appearance: none;
}

.boy .basketControlButtons input
{
    background: #2C2A29;
    color: #FAE100;
}

@media only screen and (max-width: 550px)
{
    td.donationGiftAidLabel,
    .donationGiftAidLabel span
    {
        width:100%;
    }
}
@media only screen and (max-width: 380px)
{
    .removeItemLinkCell
    {
        padding:0 10px 0 0;
    }
    .productLink 
    {
        padding:0;
    }
}
@media only screen and (max-width: 767px) {
    .woocommerce-cart #sideSectionA .newsletterSignupModule,
    .woocommerce-checkout #sideSectionA .newsletterSignupModule {
        display: none;
    }
}
@media only screen and (max-width: 768px) {
    .woocommerce .cart .button {
      display: block !important;
      width: 100% !important;
      float: none !important;
      text-align: center;
      margin-top: 10px !important;
      padding: 1em !important;
      -webkit-appearance: none;
      font-size: 1.1em;
    }
    .woocommerce .cart input[type="text"] {
      float: none !important;      
      padding: 1em !important;
    }
    .woocommerce .cart .coupon {
      padding-bottom: 0 !important;
    }
    .woocommerce .cart-collaterals {
      display: block;
      margin-top: 30px;
    }
    .woocommerce .calc-shipping {
      font-size: 1em;
    }
}
@media only screen and (min-width: 769px) {
    .woocommerce .cart .mobile-cart-totals {
      display: none;
    }
}
/* Checkout */
@media only screen and (max-width: 768px) {
    .woocommerce .checkout p {
      font-size: 1em;
    }
    .woocommerce #payment #place_order, .woocommerce-page #payment #place_order {
      padding: 1.2em;
    }
    .woocommerce form .form-row-first, 
    .woocommerce form .form-row-last, 
    .woocommerce-page form .form-row-first, 
    .woocommerce-page form .form-row-last {
      float: none !important;
      width: 100% !important;
    }
    .woocommerce .checkout #customer_details {
      margin-bottom: 20px;
    }
}
@media only screen and (min-width: 768px) {
    .woocommerce .checkout .place-order .terms label br {
      display: none;
    }
}
@media only screen and (max-width: 767px) {
    .woocommerce .checkout .place-order .terms label {
      line-height: 1.2;
    }
}
/* Shop pages */
@media only screen and (max-width: 767px) {
    #ProductSummary ul.products li {
      width: 50%;
      margin: 0 0 10px;
      padding: 0 15px 30px;
      min-height: 400px;
    }
}
@media only screen and (max-width: 450px) {
    #ProductSummary ul.products li {
      width: 50%;
      margin: 0 0 10px;
      padding: 0 15px;
      min-height: 350px;
    }
}


/**** Individual product pages ****/
@media only screen and (max-width: 590px)
{
    .pageTypeProduct .productText 
    {
        width:100%;
        margin-top:20px;
    }
    .pageTypeProduct .images
    {
        width:100%;
    }
    .pageTypeProduct object 
    {
        width:100%;
    }
}


/**** New mobile header ****/
@media only screen and (min-width: 992px) {
    #mobile-header {
      display: none;
    }
}
@media only screen and (max-width: 991px) {
  #header,
  .headerBorder {
    display: none;
  }

  #mobile-header {
    margin-bottom: 25px;
  }

  #mobile-header .top {
    background-color: #125c91;
    font-size: 1em;
    overflow: hidden;
  }
  #mobile-header .top a {
    color: #fff;
    padding: 6px 10px;
    display: inline-block;
  }
  #mobile-header .top ul {
    text-align: right;
    width: 100%;
  }
  #mobile-header .top ul li {
    display: inline-block;
  }
  #mobile-header .top ul li:nth-of-type(1),
  #mobile-header .top ul li:nth-of-type(2) {
    float: left;
  }
  #mobile-header .bottom {
    background-color: #0079be;
    height: 56px;
    padding: 8px 10px;
    line-height: 40px;
  }
  #mobile-header .bottom .logo {
    float: none;
    left: 0;
    width: 100px;
    height: 100px;
    background-size: contain;
    margin: 0 auto;
    top: 4px;
    left: 50%;
    margin-left: -50px;
    background-image: url(../img/logo.svg);
    background-repeat: no-repeat;
    text-indent: -9999em;
    display: block;
    z-index: 5;
    position: absolute;
  }
  #mobile-header .bottom #menu-btn {
    color: #fff;
    font-size: 1.7em;
    float: left;
    text-indent: 10px;
    cursor: pointer;
  }      
  #mobile-header .bottom #menu-btn:before {
    height: 38px;
    width: 38px;
    content: '';
    display: block;
    float: left;
    border-radius: 50px;
    background-image: url(../img/mobile-menu-hamburger.svg);
    background-repeat: no-repeat;
  }
  #mobile-header .bottom #menu-btn.active:before {
    background-image: url(../img/mobile-menu-close.svg);
    background-repeat: no-repeat;
  }
  #mobile-header .bottom #basket-btn {
    float: right;
    margin-right: 10px;
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    color: #C7D8EF;
    font-size: .85em;
    height: 38px;
  }
  #mobile-header .bottom #basket-btn a {
    display: inline-block;
    height: 100%;
    width: 100%;
    color: #C7D8EF;
    background-image: url(../img/mobile-basket.svg);
    background-size: 38px;
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 47px;
  }
  #mobile-header .bottom #search-btn {
    float: right;
    cursor: pointer;
  }
  #mobile-header .bottom #search-btn:before {
    height: 38px;
    width: 38px;
    background: #fff;
    content: '';
    display: block;
    float: left;
    border-radius: 50px;
    background-image: url(../img/mobile-search.svg);
    background-repeat: no-repeat;
  }
  #mobile-header nav {
    display: none;
    position: absolute;
    width: 100%;
    z-index: 4;    
    border-bottom: 7px solid #0079be;
    box-shadow: #333 0px 3px 6px;
    font-family: 'Open Sans', sans-serif;
  }
  #mobile-header nav.active {
    display: block;
  }
  #mobile-header nav #menu-close-small {
    position: absolute;
    bottom: -7px;
    height: 23px;
    left: 50%;
    margin-left: -15px;
    cursor: pointer;
  }
  #mobile-main-menu {
    padding: 0;
    background: #fff;
  }
  #mobile-main-menu li {
    margin-right: 0;
    position: relative;    
    border-bottom: 1px solid #C7D8EF;
  }  
  #mobile-main-menu.user li:last-child {
    border: 0;
  }
  #mobile-main-menu .sub-menu {
    display: none;
    position: relative;
    width: 100%;
    max-width: none;
  }
  #mobile-main-menu .sub-menu.active {
    display: block;
  }
  #mobile-main-menu .sub-menu a {
    padding-left: 15px;
    background-color: #fff !important;
    color: #0079be !important;
    font-weight: 300;
  }
  #mobile-main-menu .sub-menu-btn {
    position: absolute;
    top: 0;
    height: 50px;
    width: 50px;
    text-align: center;
    padding: 15px;
  }
  #mobile-main-menu .sub-menu-btn.active img {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  #mobile-main-menu .sub-menu-btn img {
    height: 20px;
    width: 20px;
  }
  #mobile-main-menu a {
    margin-bottom: 0;
    border: 0;
    font-size: 1.25em;
    color: #125c91;
    padding: 16px 0 16px;
    margin-left: 57px;
    display: block;
  }
  #mobile-main-menu.user {
    padding-bottom: 15px;
  }
  #mobile-main-menu .current-menu-item {
    background: none;
    padding: 0;
  }
  #mobile-main-menu .sub-menu .current-menu-item a {
    font-weight: 700;
  }
  #mobile-search {
    display: none;
    padding: 25px 15px 15px;
    border-bottom: 7px solid #0079be;
    position: absolute;
    width: 100%;
    z-index: 4;
    background: #fff;
  }
  #mobile-search.active {
    display: block;
  }
  #mobile-search form {
    border: 1px solid #C7D8EF;
  }
  #mobile-search .searchButton {
    height: 30px;
    width: 15%;
    padding: 0;
  }
  #mobile-search .searchBox {
    width: 85%;
    border: 0;
    font-size: 1.25em;
    padding-left: 15px;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  #mobile-header .top {
    font-size: 1.3em;
  }
  #mobile-header .top a {
    padding: 8px 10px;
  }
  #mobile-header .bottom .logo {
    top: 7px;
  }
  #mobile-header .bottom #basket-btn {
    font-size: 1.1em;
  }
}
@media screen and (max-width: 500px) {
  #mobile-header .bottom #basket-btn .basket-count {
    display: none;
  }
  #mobile-header .top a {
    padding: 6px;
  }
}
@media screen and (max-width: 374px) {
  #mobile-header .bottom .logo {
    width: 86px;
    height: 86px;
    top: 20px;
    left: 50%;
    margin-left: -43px;
  }
}

/* Mobile footer - UX Improvements 2016 */
@media only screen and (max-width: 991px) {
  #footer {
    background-color: #0079BE;
    border-top: 20px solid #125C91;
    padding: 10px 30px 6px;
  }
  .footerMenu {
    margin: 0;
    padding: 10px 0;
    color: #fff;
  }
  #footerLinks1,
  #footerLinks2 {
    margin-bottom: 20px;
  }
  .footerMenu a {
    color: #fff;
    font-size: 1.1em;
    line-height: 1.5;
  }
  #footer .signIn {
    margin-bottom: 6px;
  }
  #footer .button {
    padding: 4px 12px;
    background: #fff;
    border: 3px solid #125C91;
    font-size: 1.1em;
  }
  p.footerInfo {
    /*max-width: none;
    padding: 0;
    margin: 0;
    text-align: center;
    color: #fff;*/
    margin: 0;
  }
}
@media only screen and (max-width: 945px) {
  #footer {
    background-image: none;
    padding-bottom: 20px;
  }
  p.footerInfo {
    color: #fff;
  }
  .builtBy a,
  .designedBy a {
    color: #fff;
  }
}
@media only screen and (max-width: 547px) {
  .headerIconsWrap {
    height: 84px;
  }
}
@media only screen and (max-width: 475px) {
  p.footerInfo {
    max-width: none;
    float: none;
  }
  .builtBy a,
  .designedBy a {
    float: none;
    margin-top: 5px;
    color: #fff;
  }
  #footer #siteSearch {
    width: 100%;
  }
}
@media only screen and (max-width: 375px) {
  #footer #siteSearch .searchBox {
    width: 90%;
  }
  #footer #siteSearch .searchButton {
    width: 10%;
  }
}