.content .col1.mobile, .nav-icon {display: none;}
.features .feature.orange a.mobile {display: none;}
a.mapback {display: none;}
img.mobile.map {display: none;}

@media(max-width: 995px){
  .search {width: 100%;}

  .header {width: 100%;}
  .header .col1 {width: 58%;}
  .header .col2 {padding-top: 2%;}
  .header .col2 img {width: 100%;}
  .header a.logo {height: 0; padding-bottom: 16%;}

  .nav {width: 100%;}
  .nav li a {font-size: 100%;}

  .forum {width: 100%;}

  .content {width: auto; padding: 0 20px 50px 20px;}
  .content.home .col1 {width: 28%; margin-right: 2%;}
  .content.home .col2 {width: 70%;}
  .content .col1 {width: 24%; margin-right: 3%;}
  .content .col2 {width: 44%; margin-right: 3%;}
  .content .col3 {width: 26%;}
  .content.wide .col2 {width: 73%; margin-right: 0;}
  .content.professionals .col2 .left {width: 41%; margin-right: 3%;}
  .content.professionals .col2 .right {width: 56%;}
  .content.professionals .col2 .left img {width: 100%;}
  .content img {width: 100%; margin: 0 0 20px 0; height: auto!important;}

  .searchresult img {width: auto!important; margin: 0!important;}

  #governancepopup .popupwrap {width: auto; background-size: 100%; height: auto;}
  #governancepopup .popupcontent {width: 100%; height: 0; padding-bottom: 69%;}
  .popupcontent .title {width: 100%; left: 0; right: 0; margin: 0 auto; top: 10%;}
  .popupcontent p.date {bottom: 0;}
  .popupcontent h2.title2 {width: 79%; left: 11%; top: 31%; font-size: 170%; line-height: 140%; height: 0; padding-bottom: 7%; min-height: 0;}

  .homenews .newsimage {width: 20%; margin-right: 3%;}
  .homenews .newsimage img {width: 100%;}
  .homenews .newstext {width: 67%;}

  .datapopup table {width: 61%!important;}
  .datapopup, .tablepopup {width: auto; margin: 0 30px;}
  .datapopup > div {width: 35%!important;}
  .datapopup > div img {width: 100%!important; margin: 0!important;}

  .imagebankholder {width: 100%;}
  a.imagebank {width: 18%; height: 0; padding-bottom: 18%; margin: 0 1.5% 11px 0;}

  .regions .column {width: 46%; padding: 5px 6% 10px 0;}
  .regions .columnlast {width: 46%; padding: 5px 0 10px 0;}

  .askaquestion .question .qbuttons {width: 100%; padding: 1px 0 0 0;}
  .askaquestion .question .qbuttons a {width: 49.7%!important; height: 0!important; padding-bottom: 11%!important;}
  .askaquestion .question .qbuttons a#qYes {background-size: 100% 100%;}
  .askaquestion .question .qbuttons a#qNo {background-size: 100% 100%;}

  #healthcheckpopup .popupwrap {width: auto; margin: 20px; height: 0; padding-bottom: 72%; background-size: 100% 100%;}
  #healthcheckpopup .popupcontent {width: 100%; background-size: 100% 100%; height: 0; padding-bottom: 72%;}
  .cogs {width: 12%; height: 0; padding-bottom: 12%;}
  .cogs#cogN span, .cogs#cogNE span, .cogs#cogS span, .cogs#cogWNW span {padding-top: 33%;}
  .cogs#cogNW span, .cogs#cogSW span, .cogs#cogW span {padding-top: 30%;}
  .cogs#cogN {top: 7.5%; left: 47%;}
  .cogs#cogNE {top: 20%; left: 62%;}
  .cogs#cogE {top: 40%; left: 67%;}
  .cogs#cogSE {top: 63%; left: 61.5%;}
  .cogs#cogS {top: 76%; left: 47%;}
  .cogs#cogW {top: 54%; left: 20%;}
  .cogs#cogSW {top: 72%; left: 30%;}
  .cogs#cogWNW {top: 30%; left: 20%;}
  .cogs#cogNW {top: 12%; left: 30%;}

  .newsImg {margin: 0 2% 0 0; width: 12%; height: auto;}
  .newsImg img {height: auto; width: 100%;}
  .newsText {width: 85%;}
  .newsText h2 {width: 90%; padding-right: 10%;}

  form table {width: 100%;}
  form table input, form table textarea {width: 96%; padding: 5px 2%; outline: none;}

  .features .feature {height: 0; padding-bottom: 34%;}
  .features .left {width: 49%; margin-right: 2%;}
  .features .right {width: 49%;}

  .features .left .feature, .features .right .feature {height: 0; padding-bottom: 70%;}

  .footer {width: 100%;}

  object {width: 100%!important;}
  table {width: 100%!important;}
  iframe {width: 100%!important;}

  .imagebox {min-height: 0;}

  .ofdlalist ul {width: 100%;}
  .ofdformlogin {width: 26%; margin-right: 2%;}
  .datetable {width: 72%;}
  .ofdform input[type="text"], .ofdform input[type="email"], .ofdform input[type="password"] {width: 96%; padding: 3px 2%;}

}
@media(max-width: 768px){
  .popupcontent .title h1 {line-height: 120%; font-size: 200%;}
  .cogs {font-size: 80%;}
  img.desktop.map {display: none;}
  img.mobile.map {display: block;}
}
@media(max-width: 700px){
  .popupcontent h2.title2 {font-size: 150%;}
  #governancepopup .popupwrap, #healthcheckpopup .popupwrap {display: none;}
  #governancepopup .popupcontent, #healthcheckpopup .popupcontent {display: none;}
  a#openpopup {display: none!important;}

  img.desktop.map {display: none;}
  img.mobile.map {display: none;}
}
@media(max-width: 667px){
  .nav ul {display: none; height: 100%;}


  .search .searchbox {width: 100px;}
  .search .searchbox input {width: 78%; padding: 0 20% 0 2%; font-size: 70%;}
  .search .col2 a {font-size: 80%;}

  .content {padding-bottom: 20px;}
  .content.home {padding-bottom: 0;}
  .content.home .col1 {width: 100%; margin-right: 0%;}
  .content.home .col2 {width: 100%;}
  .content .col1 {width: 100%; margin-right: 0%;}
  .content .col2, .ofdladata {width: 100%; margin-right: 0%;}
  .content .col3 {width: 100%; margin-right: 0%;}
  .content.wide .col2 {width: 100%; margin-right: 0;}
  .content.professionals .col2 .left {width: 100%; margin-right: 0%; margin-bottom: 20px;}
  .content.professionals .col2 .right {width: 100%;}
  .content .col1 {display: none;}
  .content.home .col1 {display: block;}
  .content .col1.mobile {display: block;}

  .imagebankholder {width: 100%;}
  a.imagebank {width: 31%; height: 0; padding-bottom: 31%; margin: 0 1.5% 5px 0!important;}

  .regions .column {width: 100%; padding: 5px 0 10px 0;}
  .regions .columnlast {width: 100%; padding: 5px 0 10px 0;}

  .nav-wrap {padding: 0 20px;}
  .nav {padding: 15px 0; position: relative;}
  .nav-icon {width: 27px; height: 20px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; float: right; margin-top: 0; display: block;}
  .nav-icon span {display: block; position: absolute; height: 3px; width: 100%; background: #0073c9; border-radius: 0px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
  .nav-icon span:nth-child(1) {top: 0px;}
  .nav-icon span:nth-child(2),.nav-icon span:nth-child(3) {top: 7px;}
  .nav-icon span:nth-child(4) {top: 14px;  }
  .nav-icon.open span:nth-child(1) {top: 21px;width: 0%; left: 50%;}
  .nav-icon.open span:nth-child(2) {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);  }
  .nav-icon.open span:nth-child(3) {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);  }
  .nav-icon.open span:nth-child(4) {top: 18px; width: 0%; left: 50%; }

  .nav li {display: block;}
  .nav li:last-child { margin-bottom: 10px; }
  .nav li ul {display: none!important;}
  .nav li a {border: none;}

  .snav {margin: 0;}

  .popupcontent .title {width: 80%;}
  .popupcontent .title h1 {font-size: 170%;}

  .features {margin-top: 20px;}
  .features .feature .strapline a {font-size: 90%;}
  .features .feature.orange a {display: none;}
  .features .feature .strapline a {display: block;}
  .features .feature.orange a.mobile {display: block;}
  .features .feature.orange {padding-bottom: 45%;}

  .header .col1 {width: 68%;}
  .header .col2 {width: 35px;}

  form label {font-size: 90%;}

  .footer {font-size: 90%;}

  .bottomfooter img {width: 50px;}

  .homefeature {margin: 0 0 20px 0;}

  img.mobile.map {display: none;}

  .ofdformlogin {width: 100%; margin-right: 0%;}
  .datetable {width: 100%;}
}
@media(max-width: 580px){
  .popupcontent .title h1 {font-size: 110%;}
  .popupcontent h2.title2 {font-size: 120%;}
}
@media(max-width: 400px){
  .features .left {width: 100%; margin-right: 0%;}
  .features .right {width: 100%;}
  .features .left .feature, .features .right .feature {height: 0; padding-bottom: 65%;}
  .features .feature {padding-bottom: 65%;}
  .features .feature.orange {padding-bottom: 51%;}

  .newsText h2 {width: 100%; padding-right: 0%;}
  .newsDate {position: static; padding: 0 0 10px 0;}
  .newsImg {margin: 0 2% 0 0; width: 32%; height: auto;}
  .newsText {width: 65%;}

  .popupcontent .title {top: 4%;}
  .popupcontent .title h1 {font-size: 80%;}
  .popupcontent h2.title2 {font-size: 70%;}
  .popupcontent p.date {right: 0; font-size: 70%!important;}

  #cms_login input {width: 96%; padding: 0 2%; height: 25px; border: 1px solid #ccc; outline: none;}
  #cms_login input[type="submit"] {width: 100%; height: 25px; border: none; outline: none; color: #fff; background: #0073c9; cursor: pointer;}

  .datapopup table {width: 100%!important;}
  .datapopup > div {width: 100%!important; position: static!important;}
} 