.barbutton h3{
margin:-20px 20px 0px -20px !important;
padding:0px;
position:absolute;padding:20px;
}
.barbutton h3 a{
color:#ffffff !important;
display:block;
padding:20px;
margin:-20px;
}
.barbutton h3 a:hover{
background-color:#555555 !important;
text-decoration:none;
}

.story{
margin:20px 0px 10px 0px;
}
.containerright{
background-position: calc(50% + 30vw);
}
#youarehere{
text-align:right;
}
#herocontent h1{
margin-bottom:-60px;
margin-top:0px;
margin-left:-20px;
}
.homepagehead{
margin-top:-40px;
margin-left:-20px;
}
#spectulise>div#twitterwide{
background-color:#333333;
border-radius:10px;
padding:10px 20px 20px 20px;
margin-bottom:20px;
width:calc(50% - 32px);
position:relative;
margin-left:22px;
}
#twitterwide:after{

  content:"";
  position:absolute;
  bottom:-20px; /* value = - border-top-width - border-bottom-width */
  left:50px; /* controls horizontal position */
  border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */
  border-style:solid;
  border-color:#333333 transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;

}
.grid-sizer-fourcol, .fourcol .story
{
  width: 8.65%;
}
.grid-sizer-threecol, .threecol .story
{
  width: 13%;
}
.gutter-sizer {
  width: 4.4%;
}
.fourcol .col1{ width: 8.65%; }
.fourcol .col2 { width: 21.7%; }
.fourcol .col3{ width: 47.8%; }
.fourcol .col4{ width: 73.9%; }
.fourcol .col5{ max-width:100%; width: 100%;}

.threecol .col1{ width: 13%;}
.threecol .col2 { width: 30.4%; }
.threecol .col3{ width: 47.8%; }
.threecol .col4{ width: 65.2%; }
.threecol .col5{max-width:100%; width: 100%;}


@media only screen and ( max-width: 900px )
                {
               .fourcol .col1{
                width: 21.7% !important;
                }
                .threecol .col1{
                width: 30.4%; !important;
                }
                .col2, .col3, .col4{
width:47.8% !important;
				}   
                .containerright{
background-position: calc(50% + 50vw);
}            
                }
@media only screen and ( max-width: 450px )
                {
                .fourcol .col1, .threecol .col1{
		width:47.8% !important;
				}
                .col2, .col3, .col4{
		width:100% !important;
				}
                .containerright{
background-position: calc(50% + 80vw);
}            
                }
                
                
                @media only screen and ( max-width: 800px )
              {

                #spectulise>div#twitterwide{
		width:calc(100% - 10px);
        margin-right:10px;
        margin-bottom:20px;
        margin-left:0px;
		}
        
                }
@media only screen and ( max-width: 500px )
                {

                #spectulise>div#twitterwide{
		width:100%;
        margin-left:0px;
		}
                }