.microsite .microsite.header, .mobile-header-wrap {display: none;}

@media (max-width: 1240px){
  .header .left {width: 32%;}
  .header .right {width: 58%; padding-top: 1.2%;}
  .header a.logo {height: 0; padding-bottom: 26%;}

  .nav .col1 {width: 23%;}
  .nav .col2 {width: 31%;}
  .nav .col3 {width: 45%;}
  .nav li a {font-size: 150%;}

  .home .content .col1 {width: 32%; margin-right: 2%;}
  .home .content .col2 {width: 66%;}

  .features {margin-left: -2%; margin-bottom: 20px; width: 102%;}
  .features .feature {width: 31%; margin: 0 0 0 2%;}
  .features .feature .logo img {height: auto; max-height: 100%; width: 100%;}

  .content .col1 {width: 25%; margin-right: 2%;}
  .content .col2 {width: 45%; margin-right: 2%;}
  .content .col3 {width: 26%;}
  .content.wide .col2 {width: 73%;}
  .content img {max-width: 100%; width: auto;}

  .top-footer .col1 {width: 37%; margin-right: 2%;}
  .top-footer .col2 {width: 60%;}

  .theteam {margin-left: -2%; width: 102%;}
  .theteam .team {width: 31%; margin: 0 0 2% 2%;}
  .theteam.directors .team {margin: 0 0 2% 2%; width: 48%;}
  .theteam.directors .team .image {width: 20%; margin-right: 4%;}
  .theteam.directors .team .details {width: 76%;}

  .bottom-footer .col1 {width: 32%; margin-right: 2%;}
  .bottom-footer .col2 {width: 42%;}
  .bottom-footer .col3 {width: 20%;}

  .parentmyclasses-wrap {margin-left: -2%; width: 102%;}
  .memberwelcome .box .left, .membercontent .box .left {width: 40%; margin-right: 5%;}
  .memberwelcome .box .right, .membercontent .box .right {width: 55%;}
  .memberwelcome .box .profimage, .membercontent .box .profimage {height: 0; padding: 0; padding-bottom: 100%; box-sizing: border-box;}
  .memberwelcome {margin-left: -2%; width: 102%;}
  .memberwelcome .box, .memberwelcome .box, .membercontent .box {padding: 3%; margin: 0 0 2% 2%; width: 42%;}

  .membercontent .box {width: 31%; padding: 20px; box-sizing: border-box;}
  .membercontent .box .left {width: 30%;}
  .membercontent .box .right {width: 65%;}
  .membercontent .box .profimage {height: 0; padding: 0; padding-bottom: 100%; box-sizing: border-box;}

  .footer .col1 {width: 32%; margin-right: 2%;}
  .footer .col2 {width: 43%; margin-right: 2%;}
  .footer .col3 {width: 21%;}

  .microsite .header .left {width: 28%;}
  .microsite .header .right {width: 67%;}
  .microsite .header a.logo {height: 0; padding-bottom: 29%;}
  .microsite .nav {position: relative;}
  .microsite .nav .col1 {width: 30%;}
  .microsite .nav .col2 {width: 35%;}
  .microsite .nav .col3 {width: 300px; position: absolute; top: 0; right: 0;}

  .microsite .home .content .col1 {width: 31%; margin-right: 8%;}
  .microsite .home .content .col2 {width: 30%; margin-right: 2%;}
  .microsite .home .content .col3 {width: 27%;}

  .microsite .content .col1 {width: 25%; margin-right: 2%;}
  .microsite .content .col2 {width: 44%; margin-right: 2%;}
  .microsite .content .col3 {width: 27%;}
  .microsite .content.wide .col2 {width: 73%;}
  .microsite .content.fullwidth .col1 {width: 75%; margin-right: 2%;}
  .microsite .content.fullwidth .col2 {width: 23%; margin: 0;}
}

@media (max-width: 1140px){
  .nav a.rosette {width: 90px; height: 90px; margin-top: 7px;}
}

@media (max-width: 1024px){
  .nav li a {font-size: 120%;}
  /* table {display: none;} */
  table.mobile, .ui-datepicker table {display: table!important;}
  .home .content h1 {font-size: 350%;}

  .top-footer p {font-size: 140%;}
  .top-footer p.phone {font-size: 150%;}
}

@media (max-width: 980px){
  .header .right {width: 63%;}
}

@media (max-width: 910px){
  .microsite .banner .text h2 {font-size: 250%;}

  .nav .col2 {width: 22%;}
  .nav .col3 {width: 54%;}
}

@media (max-width: 800px){
  .header .left {padding-top: 4%; width: 28%;}
  .header .right {width: 68%;}

  .microsite .header .right {width: 68%;}

  .nav li a {font-size: 100%;}

  .microsite .nav .col1 {width: 32%;}
  .microsite .nav .col2 {width: 44%;}

  .home .content h1 {font-size: 250%;}

  .microsite .content.fullwidth .col1 {width: 100%; margin: 0; float: none;}
  .microsite .content.fullwidth .col2 {width: 100%; margin: 0; float: none;}
}

@media (max-width: 720px){
  .header-wrap {display: none;}

  .mobile-header-wrap {display: block; position: fixed; top: 0; left: 0; width: 100%; background: #ffffff; border-bottom: 1px solid #003d65; z-index: 99999;}
  .mobile-header {padding: 20px;}
  .mobile-header .left {width: 120px; float: left;}
  .mobile-header .right {float: right;}
  .mobile-header .nav-icon {width: 27px; height: 20px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; cursor: pointer; float: right; margin-top: 7px;}
  .mobile-header .nav-icon span {display: block; position: absolute; height: 3px; width: 100%; background: #003d65; border-radius: 0; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.25s ease-in-out; -moz-transition: 0.25s ease-in-out; -o-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out;}
  .mobile-header .nav-icon span:nth-child(1) {top: 0;}
  .mobile-header .nav-icon span:nth-child(2), .mobile-header .nav-icon span:nth-child(3) {top: 7px;}
  .mobile-header .nav-icon span:nth-child(4) {top: 14px;}
  .mobile-header .nav-icon.open span:nth-child(1) {top: 21px; width: 0%; left: 50%;}
  .mobile-header .nav-icon.open span:nth-child(2) {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
  .mobile-header .nav-icon.open span:nth-child(3) {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
  .mobile-header .nav-icon.open span:nth-child(4) {top: 18px; width: 0%; left: 50%;}
  .mobile-header a.logo {width: 100%; display: block; height: 30px; background: url(../images/logo.png) no-repeat 0 0; background-size: 100%;}
  .mobile-header .nav {padding-top: 20px;}

  .nav {display: none;}
  .nav .col1, .nav .col2, .nav .col3, .microsite .nav .col1, .microsite .nav .col2, .microsite .nav .col3 {width: 100%;}
  .nav .col3 {margin-top: 10px; text-align: center;}
  .nav a.navbutton {margin: 0 auto; float: none; display: inline-block; width: 100px; height: 100px;}
  .nav a.rosette {width: 100px; height: 100px; float: none; display: inline-block; margin: 0; margin-left: 10px;}
  .microsite .nav .col3 {margin-top: 10px; position: static;}

  .snav li a, .content .snav > a {font-size: 90%; padding: 10px;}

  .title-wrap {margin-top: 71px;}
  .title p, .microsite .title p {font-size: 200%;}

  .home .content h1 {font-size: 200%;}
  .home .content .top {padding: 0;}
  .home .content .col1 {width: 100%; margin-right: 0%; margin-bottom: 20px;}
  .home .content .col2 {width: 100%;}

  .socialcontainer .tabs a {padding: 0 10px; font-size: 80%;}

  .newsfeed, .socialfeeds {height: auto!important;}
  .newsfeed p, .socialfeed p {font-size: 90%;}

  .features .feature {width: 98%; margin: 0 0 10px 2%;}
  .features .feature .logo img {width: auto; max-width: 100%; margin: 0 auto;}
  .features .feature .text p {font-size: 80%;}
  .features .feature .text h1, .features .feature .text h2, .features .feature .text h3, .features .feature .text h4 {font-size: 100%;}

  .content-wrap.home {margin-top: 71px;}
  .content .col1 {width: 100%; margin-right: 0%; margin-bottom: 12px;}
  .content .col2 {width: 100%; margin-right: 0%;}
  .content .col3 {width: 100%;}
  .content.wide .col2 {width: 100%;}
  .content p {font-size: 90%;}
  .content li {font-size: 90%;}
  .content li p {font-size: 100%;}
  .content h1 {font-size: 200%;}
  .content h2, .content h3, .content h4 {font-size: 100%;}
  .content img {width: 100%; margin: 0 0 10px 0!important;}
  .content table td, .content table th {font-size: 90%;}

  .breadcrumb p {font-size: 80%!important;}

  label {font-size: 90%;}
  input[type="submit"], input[type="reset"] {width: 100%; box-sizing: border-box; margin: 5px 0!important; float: none!important;}

  .top-footer .col1 {width: 100%; margin-right: 0%;}
  .top-footer .col2 {width: 100%;}
  .top-footer p {font-size: 90%;}

  .bottom-footer .col1 {width: 100%; margin-right: 0%;}
  .bottom-footer .col2 {width: 100%;}
  .bottom-footer .col3 {width: 100%;}
  .bottom-footer p {font-size: 90%;}

  .footer .col1 {width: 100%; margin-right: 0%; margin: 0 0 20px 0;}
  .footer .col2 {width: 100%; margin-right: 0%; margin: 0 0 20px 0;}
  .footer .col3 {width: 100%;}
  .footer p, .footer li {font-size: 90%;}
  .footer strong {font-size: 120%;}

  .microsite {padding: 20px 0;}
  .microsite .title-wrap {margin-top: 0; padding: 0 20px;}
  .microsite .content-wrap {padding: 0 20px;}
  .microsite .content-wrap.home {padding: 0 20px; margin-top: 0;}
  .microsite .header {display: none;}
  .microsite .microsite.header {display: block; padding: 0;}
  .microsite .header-wrap {display: block;}
  .microsite .microsite.header .top {cursor: pointer;}
  .microsite .microsite.header p {padding: 0; text-transform: uppercase; font-family: "hwt-artz-n7", "hwt-artz", arial, sans-serif; font-weight: 700; float: left; font-size: 120%;}
  .microsite .microsite.header .left {width: 100%; margin: 0; padding: 20px 60px; box-sizing: border-box;}
  .microsite .microsite.header .right {width: 100%; margin: 0; background: #e6e6e6; padding: 10px 20px; box-sizing: border-box;}
  .microsite .home .content .col1 {width: 100%; margin-right: 0%;}
  .microsite .home .content .col2 {width: 100%; margin-right: 0%;}
  .microsite .home .content .col3 {width: 100%;}
  .microsite .nav {padding-top: 7px; display: none;}
  .microsite .nav li a {font-size: 120%;}
  .microsite .nav-icon {width: 27px; height: 20px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; cursor: pointer; float: right; margin-top: 2px;}
  .microsite .nav-icon span {display: block; position: absolute; height: 3px; width: 100%; background: #000000; border-radius: 0; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.25s ease-in-out; -moz-transition: 0.25s ease-in-out; -o-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out;}
  .microsite .nav-icon span:nth-child(1) {top: 0;}
  .microsite .nav-icon span:nth-child(2), .microsite .nav-icon span:nth-child(3) {top: 7px;}
  .microsite .nav-icon span:nth-child(4) {top: 14px;}
  .microsite .nav-icon.open span:nth-child(1) {top: 21px; width: 0%; left: 50%;}
  .microsite .nav-icon.open span:nth-child(2) {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
  .microsite .nav-icon.open span:nth-child(3) {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
  .microsite .nav-icon.open span:nth-child(4) {top: 18px; width: 0%; left: 50%;}

  .microsite .sidebar {display: none;}

  .microsite .content .col1 {width: 100%; margin-right: 0%;}
  .microsite .content .col2 {width: 100%; margin-right: 0%;}
  .microsite .content .col3 {width: 100%;}
  .microsite .content.wide .col2 {width: 100%;}

  .trainingacademy .microsite .microsite.header p {color: #691384;}
  .tiddlersacademy .microsite .microsite.header p {color: #00783e;}
  .swimschool .microsite .microsite.header p {color: #005486;}
  .trainingacademy .microsite .nav-icon span {background: #691384;}
  .tiddlersacademy .microsite .nav-icon span {background: #00783e;}
  .swimschool .microsite .nav-icon span {background: #005486;}

  .microsite .banner img {display: none;}
  .microsite .banner img.mobile {display: block;}

  .microsite .top-footer {padding: 10px 20px;}
  .microsite .top-footer .col2 {width: 100%; margin-right: 0%;}
 
  .footer .col1 li, .footer .col2 li {padding: 10px;}
  .footer .inner {min-height: 0!important;}

  body.trainingacademy {background-size: cover; background-color: #00606c;}

  a.backtotop {display: block;}

  .membercontent table.desktop {display: none;}
  .membercontent table.mobile {display: table;}

  .parentmyclasses-container .stacktable.mobileclasses {display: block;}
  .parentmyclasses-container .stacktable.large-only {display: none;}

  .content a.expanddiv {padding: 15px 40px 15px 15px; font-size: 80%;}
  .container.reports-container .slider, .container form {padding: 0;}

  a.memberbutton {width: 100%; box-sizing: border-box; text-align: center; height: auto; line-height: 110%; padding: 10px 20px; margin: 5px 0!important;}

  button.fc-today-button {width: 100%;}
  .fc .fc-button-group {
    width: 100%;
    margin: 0;
  }
}

@media (max-width: 500px){
  .microsite .banner .text {width: 100%; left: 20px; top: 20px;}
  .microsite .banner .text h2 {font-size: 200%;}

  .memberwelcome .box, .memberwelcome .box, .membercontent .box {width: 92%;}

  .theteam .team, .theteam.directors .team {margin: 0 0 2% 2%; width: 98%;}
  .theteam .team .image, .theteam.directors .team .image {width: 100%; margin-right: 0%;}
  .theteam .team .details, .theteam ..directorsteam .details {width: 100%;}

  .newsfeed.inner .news-story .image {width: 100%; margin: 0; float: left;}
  .newsfeed.inner .news-story .text {width: 100%; float: left;}
}