/* StopWatch UK website - Ben Gilman at www.rarebright.com */
/* All rights reserved September 2012 */
/* ==|== media queries ====================================================== */
/* screens below 960 */
@media only screen and (max-width: 960px) {
  header.page section.banner,
section.homeintro,
div.mainpage,
div.mainpage .banner,
footer.page div.inner {
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
    width: auto !important;
  }

  header.page section.banner {
    margin-top: 0;
  }

  header.page nav.topnav ul {
    margin: 0 10px;
    width: 100% !important;
  }

  header.page nav.topnav ul li a {
    padding-left: 10px;
    padding-right: 10px;
    min-width: inherit;
  }

  header.page nav.topnav a {
    height: auto !important;
    min-height: inherit !important;
  }

  header.page nav.topnav a span.subtitle {
    display: none;
  }

  .newsstory .article,
div.getinformedleader,
.individualaction .article,
.getinformed {
    width: auto !important;
  }

  .newsstory .article {
    overflow: hidden;
    max-width: 100% !important;
  }

  div.mainpage .banner {
    background-image: none !important;
    padding-bottom: 1px;
  }

  div.mainpage .banner .inner {
    margin-left: -20px;
    margin-right: -20px;
    padding: 10px 20px;
  }

  .homeleft {
    width: 58%;
  }

  .homeright {
    width: 40%;
  }

  .takeactionbox {
    background-image: none;
    margin: 0;
    padding: 0;
    width: auto !important;
  }

  .mapholder {
    margin: 0;
    width: 100%;
  }

  .individualforcemap {
    width: 100%;
  }

  div.facts {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #focusfacts {
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
  }

  .twocolumns {
    clear: both;
    margin-left: 0;
    margin-right: 0;
    position: relative;
    width: auto;
  }

  .latestresearch .researchchurn ul.churn li div {
    width: auto;
  }

  .latestresearch .researchchurn img {
    display: none;
  }

  div.mainpage .lefthalf .banner,
.multiplebgs div.mainpage .lefthalf .banner,
div.mainpage .righthalf .banner,
.multiplebgs div.mainpage .righthalf .banner {
    background: none !important;
  }

  .blogposts {
    width: 58%;
  }

  .rightfoldbox,
.leftfoldbox,
.sidebar .photo {
    background-image: none !important;
    max-width: 100% !important;
    width: auto !important;
  }

  .newsletter-signup input.text {
    width: 100% !important;
  }

  .promo .visual {
    background: none;
    margin: 10px 0 15px 0;
    padding: 0;
    float: none;
  }

  h3.responsive {
    background-color: #fcfcfc;
    display: block !important;
    margin: 0;
    padding: 20px 10px 20px 10px;
  }

  .articlenav {
    float: right;
    margin-right: 0;
    width: 40%;
  }

  div.mainpage div.article {
    float: left;
    width: 58% !important;
  }

  article.ourworkhome div.article {
    width: auto !important;
  }

  div.holder div.article {
    padding-top: 20px;
    width: auto !important;
  }

  .sidebar,
.newsfpsidebar {
    clear: none !important;
    float: right !important;
    width: 40% !important;
  }

  .articleintro {
    padding-left: 0 !important;
    margin-bottom: 0 !important;
  }

  div.experiencespage {
    padding: 0 20px;
    position: relative;
    width: auto !important;
  }

  .videowithquotes .offsetsummary {
    position: static;
    margin-left: auto;
    width: auto;
  }

  .videowithquotes .video {
    width: 58%;
  }

  .videowithquotes .video iframe {
    width: 100% !important;
  }

  .videowithquotes .quotes,
.videowithquotes .report {
    padding-top: 0;
    width: 40%;
  }

  .stories,
.tellus {
    float: none;
    width: auto;
  }

  .factsheets ul li {
    margin-left: 2%;
    width: 48%;
  }

  section.actioncols div.third {
    margin: 10px 1%;
    width: 31%;
  }

  section.actioncols div.third .inner {
    width: auto;
  }

  iframe.storylead {
    margin: 0px 0 10px 0 !important;
    width: 100% !important;
  }

  div.holder {
    width: 58% !important;
  }

  .storyblock {
    width: auto !important;
  }

  img.storylead {
    margin-bottom: 0px;
    margin-left: 0;
    width: 100% !important;
  }

  .newsstory .article,
div.getinformedleader,
.individualaction .article,
.article {
    width: auto !important;
  }

  div.mainpage div.storyblock div.info {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }

  ul.newscommentchurn li {
    width: auto;
  }

  ul.newscommentchurn li a.title {
    margin: 0;
    width: auto;
  }

  ul.newscommentchurn li div.summary {
    float: left;
    width: 68% !important;
  }

  .blogcatsidelink div.text {
    float: none !important;
    margin-left: 55px;
    width: auto;
  }

  .pagination {
    margin-left: 0 !important;
    width: auto !important;
  }

  ul.searchresults {
    margin: 15px 0 10px 0;
  }

  .newsletter-signup input.text {
    max-width: intrinsic !important;
  }

  .allforcesmapholder {
    width: 50%;
  }

  .forceheadlines {
    width: 50%;
  }

  .allforcesmap {
    max-width: 100%;
    width: 100%;
  }

  .carousel {
    margin-top: 0;
  }

  .carouselitem .visual {
    background: none;
    left: 0 !important;
    padding: 0;
    width: 25%;
  }

  .carouselitem a {
    height: auto;
    max-width: 50%;
  }
  .carouselitem a img {
    height: auto;
    max-width: 100%;
  }

  .carouselitem div.text {
    float: right;
    padding-right: 4%;
    width: 65%;
  }

  .socialbuttonsbig {
    padding-right: 20px;
  }

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

  footer.page .inner {
    position: relative;
  }

  footer.page section.address {
    left: 0;
    position: absolute;
    top: 0;
  }

  footer.page section.details,
footer.page section.social {
    float: none;
    margin-left: 260px;
    margin-right: 20px;
    width: auto !important;
  }

  footer.page section.details p {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  footer.page section.social {
    margin-top: 0 !important;
  }

  footer.page section.social h2 {
    margin-top: 20px !important;
  }

  footer.page section.copyright .inner span.credit {
    float: left;
    display: block;
    position: static !important;
    text-align: left !important;
    width: auto !important;
  }
}
/* smart phones and portrait ipad */
@media only screen and (max-width: 780px) {
  header.page section.banner h1 {
    background-image: url(/assets/img/logo_header.png);
    background-size: contain;
  }
}
/* smart phones */
@media only screen and (max-width: 760px) {
  body {
    font-size: 75%;
  }

  #globalwrapper {
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
  }

  header.page section.banner {
    padding: 5px 10px;
  }

  header.page section.banner h1 {
    height: 50px;
  }

  header.page nav.topnav a.mobiletrigger {
    background-color: #08C;
    border: 0;
    color: #fff;
    display: block;
    font-size: 1.25em;
    font-weight: bold;
    margin: 0;
    padding: 15px 10px;
    text-transform: uppercase;
  }
  header.page nav.topnav a.mobiletrigger:hover {
    background-color: #006699;
    border: 0;
  }

  header.page nav.topnav ul {
    display: none;
    margin: 0px !important;
    width: 100% !important;
  }

  header.page nav.topnav ul li {
    display: block;
    float: none;
    height: auto !important;
    padding: 0 0 4px 0;
  }

  header.page nav.topnav a {
    display: block;
    min-width: inherit;
    padding: 10px 10px 5px 10px;
  }

  header.page section.banner div.searchform {
    float: none;
    margin-right: 0;
    text-align: left;
    width: 100%;
  }
  header.page section.banner div.searchform input.text {
    width: 60%;
    float: left;
  }
  header.page section.banner div.searchform input.send {
    float: right !important;
    width: 30%;
  }

  div.mainpage {
    padding-left: 10px;
    padding-right: 10px;
  }

  div.mainpage .banner {
    display: none;
  }

  .streamslist li {
    width: auto;
  }

  .homeleft,
.homeright {
    clear: both;
    float: none;
    margin-top: inherit;
    padding-right: 0;
    width: auto;
  }

  .homeintro {
    background-image: url(/assets/img/bg_bodycolours.png) !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    display: none;
  }

  section.homeintro h1 {
    font-size: 250%;
    padding: 20px 10px !important;
    width: auto !important;
  }

  section.homeintro h1 a {
    clear: both;
    display: block;
    padding-left: 0;
  }

  .articleintro {
    clear: both !important;
    padding-left: 0 !important;
  }

  .articlenav {
    border-bottom: 1px #ccc dotted;
    margin-bottom: 15px;
    margin-left: -10px;
    margin-right: -10px;
  }

  .articlenav li a {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .articlenav,
div.mainpage div.article,
.sidebar,
.newsfpsidebar {
    clear: both !important;
    float: none !important;
    width: auto !important;
  }

  .sidebar,
.newssidebar,
.newsfpsidebar {
    padding-top: 20px !important;
  }

  .rightfoldbox,
.takeactionbox {
    float: none;
    width: 100% !important;
  }

  .takeactionbox .inner,
.rightfoldbox .inner {
    padding: 20px 10px;
  }
  .sidebar .photo {
    display: none;
  }

  .blogposts {
    width: auto;
  }

  .meetteambox {
    margin-top: 0px !important;
  }

  header.page section.banner div.searchform {
    background-color: #f8f8f8;
    border-top: 1px #eee solid;
    clear: both;
    display: block;
    margin: 8px -10px 0 -10px !important;
    padding: 5px 10px;
    position: static;
    width: auto;
  }

  header.page section.banner div.searchform input.send {
    float: none;
    margin-left: 10px;
  }

  .forceheadlines {
    max-width: none !important;
    width: auto;
  }

  .ssrights {
    margin-top: 0;
  }

  .allforcesmapholder {
    display: none;
  }

  .regions .intro {
    float: none;
    width: auto !important;
  }

  .regions ul {
    float: none;
    width: auto;
  }

  .regions ul li,
.regions ul li:first-child {
    display: block;
    margin: 0 !important;
    float: none;
    width: auto;
  }

  .regions ul li a {
    display: inherit;
    padding: inherit;
  }

  .regions ul li a h3 {
    position: inherit;
    left: inherit;
    width: auto;
  }

  .regions ul li a img {
    height: auto;
    width: 100%;
  }

  .mapholder {
    margin: 0;
    width: auto;
  }

  .facts,
#focusfacts {
    clear: both;
    margin: 10px 0;
    padding: 0px;
    width: auto;
  }

  .focusbanner {
    display: none;
  }

  .twocolumns {
    margin-left: inherit;
    width: auto;
  }

  .twocolumns .col {
    float: none;
    margin-left: inherit;
    width: auto;
  }

  .legalbanner {
    clear: both;
    margin-top: 20px;
  }

  .legalbanner .intro {
    float: none;
    width: auto !important;
  }

  .latestresearch p.offsetsummary {
    display: none;
  }

  .individualforcemap {
    display: none;
  }

  .latestresearch {
    padding: 0px;
  }

  .latestresearch .researchchurn {
    width: auto !important;
  }

  .researchbanner .inner {
    padding-right: 220px !important;
  }

  .yourareafrontpage {
    padding-top: 0 !important;
  }

  .yourareafrontpage div.blockhead {
    background: none;
    margin: 0 -20px;
    max-width: none;
  }

  .yourareafrontpage div.blockhead h1 {
    margin: 0 !important;
    padding: 20px;
  }

  div.newsstory div.article,
div.getinformedleader,
.individualaction .article,
.article,
.keepup {
    max-width: 100% !important;
    overflow: hidden !important;
    width: 100% !important;
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto;
  }

  div.getinformedleader ul.churn li div {
    width: auto !important;
  }

  div.newsstory div.article {
    padding-right: 0;
  }

  .lefthalf,
.righthalf {
    float: none !important;
    width: auto !important;
  }

  div.mainpage div.storyblock,
div.mainpage div.actionfoldbox {
    background-image: none !important;
    margin: 0 0 15px 0 !important;
    padding: 5px 20px !important;
    width: auto !important;
  }

  div.actionblock div.clearfix,
div.storyblock div.clearfix {
    margin-right: -20px;
    margin-left: -20px;
    padding: 5px 20px !important;
  }

  div.storyblock div.clearfix p.date {
    margin-top: 15px !important;
  }

  div.storyblock div.clearfix div.info {
    margin-bottom: 15px;
  }

  div.actionblock div.clearfix {
    padding-bottom: 15px !important;
  }

  .eventmapholder {
    float: none;
    margin: 15px 0 !important;
    width: auto !important;
  }

  .eventmapholder div.eventmap {
    width: 100% !important;
  }

  .storyblock div.info {
    margin: 0;
    max-width: inherit !important;
    width: auto !important;
  }

  div.holder {
    width: auto !important;
  }

  .newsstory .holder {
    padding-right: 0 !important;
  }

  img.storylead {
    margin: inherit;
    margin-bottom: 15px;
    max-width: 100% !important;
  }

  .actioncols .third,
.actioncols .third ul li {
    min-height: inherit !important;
    height: inherit !important;
  }

  div.mainpage .banner .inner .btn {
    margin: 0 0 5px 0 !important;
  }

  .videowithquotes .video {
    width: 100%;
  }

  .videowithquotes .report,
.videowithquotes .quotes {
    width: 100%;
  }

  .videowithquotes .report {
    clear: both;
    padding-top: 20px;
  }

  section.actioncols div.third {
    float: none;
    width: auto;
  }

  .factsheets ul {
    margin-left: 0;
  }
  .factsheets ul li {
    margin-left: 0;
    width: 100%;
  }

  .carousel {
    margin: 0 -10px;
  }

  .carouselcontent {
    display: block;
  }
  .carouselcontent img {
    width: 100%;
  }
  .carouselcontent div.text {
    display: block;
    padding: 20px !important;
    width: auto;
  }
  .carouselcontent div.text h2 {
    font-size: 2rem;
  }
  .carouselcontent div.text p {
    font-size: 1.2rem;
  }
  .carouselcontent div.text .btn {
    font-size: 1.2rem;
  }

  .carouselitem .visual {
    background: none;
    float: right !important;
    margin: 0 0 10px 10px !important;
    padding: 0 !important;
    position: static !important;
    width: auto !important;
  }

  p.photocredit {
    margin-top: -40px;
    margin-bottom: 0;
  }

  footer.page section.address {
    background: none;
    clear: both !important;
    height: auto !important;
    margin: auto !important;
    padding-bottom: inherit !important;
    padding-top: 0.5em !important;
    position: static !important;
    width: auto !important;
  }

  footer.page section.details,
footer.page section.social {
    clear: both;
    margin: 0 20px !important;
    width: auto !important;
  }

  .activevideo {
    left: inherit !important;
    margin-left: inherit !important;
    max-width: 90%;
    top: 0px !important;
  }

  .activevideo iframe {
    max-width: 100%;
  }
}