* {
  text-shadow: none !important;
}


@charset "UTF-8";
@font-face {
    font-family: Arimo;
    font-style: normal;
    font-weight: 400;
    src: local('Arimo Regular'), local('Arimo-Regular'), url(https://fonts.gstatic.com/s/arimo/v11/P5sMzZCDf9_T_10ZxCQ.ttf) format('truetype')
}

@font-face {
    font-family: Arimo;
    font-style: normal;
    font-weight: 700;
    src: local('Arimo Bold'), local('Arimo-Bold'), url(https://fonts.gstatic.com/s/arimo/v11/P5sBzZCDf9_T_1Wi4TRDrZc.ttf) format('truetype')
}

body {
    /* background: #fff; */
    padding: 50px 0 0;
    margin: 0;
    color: #201d1d;
    font-family: Arimo, Arial, Helvetica, Verdana, sans-serif !important;
}

form:after{
    content: "";
    float: none;
    clear: both;
    display: block;
}

#page_wrapper{
    background: #fff;
    width: 100%;
    position: relative;
    top: 180px;
}

#header_wrapper {
    background: url(https://secure.activecarrot.com/media/dynamic/static_images/1379/thelights_logo.png) no-repeat;
    background-size: 150px;
    background-position: 20px !important;
    background-color: #000;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 100000 !important;
    width: 100vw;
    height: 40px;
    padding-bottom: 100px;
    box-shadow: 3px 3px 25px #211f1f;
}


#footer_wrapper,
.footer_contact{
    display: none;
}

#content{
    padding: 0 0px; /*padding on join now page */
}

.public_please_note {
 display: none;
}

.public_facility_bookings{
    padding: 0;
    margin: 0;
}

/* table header */
.public_facility_bookings .facilities.navigation{
    display: none;
}

.public_facility_bookings .rounded_button ul {
    margin: 0;
    padding: 0
}

.public_facility_bookings .rounded_button ul:after{
    content: "";
    display: block;
    clear: both;
    float: none;
}

.public_facility_bookings .booking_menu_dates{
    margin-bottom: 30px;
}

.public_facility_bookings .rounded_button ul li{
    margin-right: 0;
}

.public_facility_bookings .rounded_button ul li a {
    font-size: 14px;
    padding: 10px 4px 9px;
    border-bottom: 1px solid #201d1d;
    border-right: 1px solid #fff;
    border-radius: 0;
    color: #201d1d;
    background-color: #fff;
    letter-spacing: 0.5px;
    display: block;
    width: auto;
    min-width: 95px;

    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.public_facility_bookings .rounded_button ul li a:hover {
    background: #ed353a;
    color: #fff;
}

.public_facility_bookings .rounded_button ul li a.datepicker {
    position: relative
}

.public_facility_bookings .rounded_button ul li a.datepicker:after {
    content: "Select Date";
    display: inline
}

.public_facility_bookings .rounded_button ul li a.datepicker img {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0
}

.public_facility_bookings .rounded_button .selected {
    background: #ed353a;
    color: #fff!important
}

.public_facility_bookings  a[title='View available classes in List view'] {
    display: none!important;
}

/* table body */
table,
.public_table{
    width: 100% !important;
    text-align: left;
}

.public_facility_bookings .public_table thead th{
    font-size: 14px;
    padding: 10px 15px !important;
}

/* hide the instructor */
.public_facility_bookings .public_table thead th:nth-child(4),
.public_facility_bookings .public_table_data td:nth-child(4){
    display: none;
}

.public_facility_bookings #classes_grid_view td{
    font-size: 14px;
    padding: 5px 8px !important;
}

.public_facility_bookings #classes_grid_view .public_table_heading td{
    border-top: 15px solid #fff;
    color: #201d1d !important;
    background: #f5f5f5!important;
    padding: 10px 15px !important;
}

.book{
    height: 100%;
    line-height: 24px;
    background: #f1393b;
    color: #fff;
    border: none;
    border-radius: 0;
    letter-spacing: 0.5px;
    padding: 5px 10px;

    transition: background-color 0.2s ease-in-out;
}

.book:hover{
    background: #201d1d;
}

#cw-content > div > div.cw-block-content > table > tbody > tr:nth-child(2) > td:last-child {
  text-indent: -9999px;
  line-height: 0;
}

#cw-content > div > div.cw-block-content > table > tbody > tr:nth-child(2) > td:last-child::after {
  content: "Online Upfront Payment";
  width: auto;
  text-indent: 5px;
  display: block;
  line-height: 41px;
}


/* Calendar UI styling */
.public_template .ui-widget{
    font-family: Arimo, Arial, Helvetica, Verdana, sans-serif!important;
    letter-spacing: 0.5px;
    border-radius: 0;
    padding: 10px;
    border: 1px solid #8a8a8a;
}

.public_template .ui-widget-header {
    border: 1px solid #f7f7f7;
    background: #f7f7f7;
    color: #333;
}

.public_template .ui-datepicker th{
    font-size: 14px;
}

.public_template .ui-state-hover, 
.public_template .ui-widget-content .ui-state-hover, 
.public_template .ui-widget-header .ui-state-hover, 
.public_template .ui-state-focus, 
.public_template .ui-widget-content .ui-state-focus, 
.public_template .ui-widget-header .ui-state-focus{
    border: 1px solid #f53e3c;
    background: #fd7876;
    color: #fff;
    cursor: pointer;
}

.public_template .ui-datepicker td a{
    transition: color 0.1s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.public_template .ui-datepicker td a:hover{
    border: 1px solid #f53e3c;
    background: #fd7876;
    color: #fff;
}

.public_template .ui-state-default, 
.public_template .ui-widget-content .ui-state-default, 
.public_template .ui-widget-header .ui-state-default{
    margin: 1px;
    padding: 4px 5px;
    border: 1px solid #f6f6f6;
    background: #f6f6f6;
    color: #201d1d;
    font-size: 14px;
    text-align: center;
}

.public_template .ui-state-active, 
.public_template .ui-widget-content .ui-state-active, 
.public_template .ui-widget-header .ui-state-active{
    border: 1px solid #f53e3c;
    background: #f53e3c;
    color: #fff;
}




/* browse classes page */
body{
    padding: 0px 0;
}

#cw-content-head,
#cw-content{
    padding: 0;
    width: 100%;
}

#cw-content-head{
    margin-top: 50px;
}

#cw-content{
    margin: 30px 0;
}

.cw-block-book{
    float: none;
    clear: both;
}

.cw-block-book p{
    margin: 0 0 10px;
}

.cw-block-book .book{
    margin-right: 10px;
    float: none;
    display: inline-block;
    font-size: 14px;
}

.cw-block-content .book{
    font-size: 14px;
}

.cw-block-content{
    float: none;
    padding: 0;
}

.cw-block-content tr:nth-child(even){
    background: #f7f7f7;
}

.cw-block-content th{
    font-size: 13px;
    padding: 5px 10px;
    text-align: center;
}

.cw_tr_results td{
    text-align: center;
    font-size: 14px;
    padding: 10px;
}

.cw_tr_results td b{
    display: block;
}

/*below code implemented 04/03/2020 in order to remove class id and teacher details due to bug in links that would always show despite links settings*/
.cw_th_classid {display:none;}
.cw_td_classid {display:none;}
.cw_th_teacher {display:none;}
.cw_td_teacher {display:none;}
.cw_th_info {display:none;}
.cw_td_info {display:none;}
/*bug fix code ends here*/
#cw_pagination_container{
    margin: 20px 0 0;
    transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

#cw_pagination{
    padding: 10px;
    font-size: 14px;
}

#cw-filter-bar{
    width: 100%;
}

#cw-filter-bar > h4{
    margin: 0;
}

#cw-filter-bar legend{
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

#cw-filter-bar .class_browse_filter_see_all_link{
    transition: color 0.2s ease-in-out;
}

#cw_levels_legend input[type='checkbox']{
    width: 20px;
    height: 20px;
    position: absolute;
    top: 2px;
    left: 0;
    cursor: pointer;
}

#cw_filter_form br{
    display: none;
}

#cw_filter_form > fieldset{
    margin-bottom: 20px;
}

#cw_filter_form label{
    font-size: 13px;
    vertical-align: middle;
    cursor: pointer;
}

#cw_filter_form input[type='checkbox']{
    width: 19px;
    height: 16px;
    cursor: pointer;
    vertical-align: middle;
    margin-bottom: 5px;
    cursor: pointer;
}

#cw_filter_day_1,
#cw_filter_day_2,
#cw_filter_day_3,
#cw_filter_day_4,
#cw_filter_day_5,
#cw_filter_day_6,
#cw_filter_day_7{
    margin-right: 5px;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    cursor: pointer;
}

#cw-filter-bar  label[for='cw_filter_day_1'],
#cw-filter-bar  label[for='cw_filter_day_2'],
#cw-filter-bar  label[for='cw_filter_day_3'],
#cw-filter-bar  label[for='cw_filter_day_4'],
#cw-filter-bar  label[for='cw_filter_day_5'],
#cw-filter-bar  label[for='cw_filter_day_6'],
#cw-filter-bar  label[for='cw_filter_day_7']{
    font-size: 13px;
    cursor: pointer;
}

#cw-filter-bar  .ui-state-default, 
#cw-filter-bar  .ui-widget-content .ui-state-default, 
#cw-filter-bar  .ui-widget-header .ui-state-default{
    border: none;
    background: #fbb040;
}

#cw-filter-bar #slider-range {
    background: #ccc;
    border: none;
    height: 5px;
    margin: 15px auto -2px;
}

#slider-range{
    width: 95%;
    max-width: none;
}

#cw-filter-bar .ui-widget{
    padding: 0;
}

#cw-filter-bar .ui-state-default, 
#cw-filter-bar .ui-widget-content .ui-state-default, 
#cw-filter-bar .ui-widget-header .ui-state-default{
    margin-left: 0;
}

#cw-filter-bar .ui-state-default, 
#cw-filter-bar .ui-widget-content .ui-state-default, 
#cw-filter-bar .ui-widget-header .ui-state-default{
    padding: 0;
    height: 17px;
    width: 17px;
}

#cw-filter-bar  .ui-slider-horizontal .ui-slider-handle{
    top: -7px;
    margin-left: -8px;
}

#cw-filter-bar .ui-slider .ui-slider-range{
    border: none;
    height: 5px;
    top: 0;
}

#cw-filter-bar  .ui-slider-horizontal .ui-slider-range{
    background: #fbb040;
    height: 5px;
}

#cw-filter-bar > a:last-child{
    padding: 9px 20px 10px;
    background: #201d1d;
    font-size: 14px;
    display: block;
    width: 100px;
    float: none;
    margin-top: 40px;
    color: #fff;
    letter-spacing: 0.3px;
    text-align: center;

    transition: background-color 0.2s ease-in-out;
}

#cw-filter-bar > a:last-child:hover{
    background: #fbb040;
}

#cw_levels_legend .class_browse_filter_see_all_link{
    padding: 8px 5px;
    background: #eaeaea;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    width: 140px;
    margin-top: 20px;
    transition: background-color 0.2s ease-in-out;
}

#cw_levels_legend .class_browse_filter_see_all_link:hover{
    background: #fbb040;
    color: #fff;
}

#cw_levels_legend input{
    margin: 0 7px 0 0;
}

#cw_levels_legend div label{
    float: none;
    margin-left: 25px;
    margin-bottom: 10px;
}


#cw_filter_form div{
    position: relative;
}

#cw_levels_legend .class_browse_filter_input_align{
    top: 5px;
}







/* booking page */
.public_facility_bookings .club_info{
    font-size: 20px;
    font-weight: 600;
}

.public_facility_bookings .navigation{
    margin-bottom: 25px;
}

.public_facility_bookings .navigation:after{
    content: "";
    float: none;
    clear: both;
    display: block;
}

.public_facility_bookings .navigation ul{
    margin: 0;
    padding: 0;
}   

.public_facility_bookings .navigation ul li a{
    background: #fbb040;
    border-radius: 0;
    font-size: 13px;
    padding: 10px 4px 9px;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.public_facility_bookings .navigation ul li:last-child a img{
    width: 60px;
    margin-top: 2px;
}

.public_facility_bookings .navigation .selected,
.public_facility_bookings .navigation ul li a:hover{
    background: #000;
    color: #fff;
}




/* responsive */
@media (min-width: 530px) and (max-width: 991px){

    #cw_filter_form > fieldset{
        margin-bottom: 20px;
        float: left;
        width: 37%;
    }

    #cw_filter_form > fieldset:nth-child(5){
        width: 20%;
    }

    #cw_filter_form > fieldset:nth-child(8){
        width: 100%;
    }

    #cw_filter_form label{
        max-width: 150px;
    }

    #slider-range{
        width: 98%;
        max-width: none;
    }

}

@media (min-width: 768px){

    .public_facility_bookings #classes_grid_view td{
        font-size: 14px;
        padding: 5px 15px !important;
    }
}

@media (min-width: 992px){

    #cw-filter-bar{
        width: 150px;
    }

    #cw-content-head, #cw-content{
        max-width: 750px;
    }

    #cw-content-head{
        margin-top: 0;
    }

}

@media (min-width: 1100px){

    #cw-filter-bar{
        width: 230px;
    }
}


@media (min-width: 1200px){

    #page_wrapper{
        width: 1170px;
    }

    #cw-content-head, #cw-content {
        max-width: 820px;
    }
}

.alpha60 {
  background: #FFF;
  background: ;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#00000000);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#00000000)";
}

.swMain {
  position:relative;
  display:block;
  margin:0;
  padding:0;
  border: 0px solid #CCC;
  overflow:visible;
  float:left;
  width:980px;
}
.swMain .stepContainer {
  display:block;
  position: relative;
  margin: 0 0 40px 0;
  padding:0;
  border: 0px solid #CCC;
  overflow:visible;
  clear:right;
  width:730px;
  height: auto !important;
  float:right;
}

.error{ color: red; }

.swMain .stepContainer div.content {
  display:block;
  position: relative;
  float:left;
  margin: 0;
  padding:0;
  border: none;
  font: normal 12px Verdana, Arial, Helvetica, sans-serif;
  color:#353535;
  background-color:#f3f3f3;
  min-height:300px;
  text-align:left;
  overflow:auto;
  z-index:88;
  -webkit-border-radius: 0;
  -moz-border-radius  : 0;
  border-radius: 0;
  width:730px;
  clear:both;
}

.swMain div.actionBar {
  display:block;
  position: relative;
  clear:right;
  float: right;
  margin:0 0 40px 0;
  border:none;
  padding:            0;
  color:              #AFAEAE;
  background-color:   transparent;
  height:auto;
  width: 74.5%; /* 730px */
  text-align:left;
  overflow:auto;
  z-index:88;
  border-radius:0;
}

.swMain .stepContainer .StepTitle {
  display:block;
  position: relative;
  margin:0 0 30px 0;
  border:none;
  padding:20px 30px;
  font: 600 20px 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
  color:#000000;
  background-color:#E0E0E0;
  clear:both;
  text-align:left;
  z-index:88;
  border-radius: 0;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  text-shadow:none;
}
.swMain ul.anchor {
  width:230px;
  position: relative;
  display:block;
  float:left;
  list-style: none;
  padding: 0px;
  margin: 0;
  border: 0px solid #CCCCCC;
  background: transparent; /*#EEEEEE */
}
.swMain ul.anchor li{
  margin: 0 0 10px 0;
  padding: 0;
  border: none;
  width: 100%;
  box-sizing: border-box;
}
.swMain ul.anchor li:first-child {
  padding-top: 0;
}
/* Anchor Element Style */
.swMain ul.anchor li a {
  height: initial;
  min-height: 90px;
  padding: 15px 5px 12px 22px;
  width: 100%;
  box-sizing: border-box;
}
.swMain ul.anchor li a .stepNumber{
  text-align: center;
  padding: 0 24px 0 0;
  font: bold 50px 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
  line-height: 50px;
}
.swMain ul.anchor li a .stepDesc{
  width:63%;
  padding: 0;
  font: bold 20px 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
}
.swMain ul.anchor li a .stepDesc small{
  font: 500 16px 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
  line-height: 18px;
  padding-top: 4px;
  display: inline-block;
}
.swMain ul.anchor li a.selected,
.swMain ul.anchor li a.selected:hover,
.swMain ul.anchor li a.error.selected,
.swMain ul.anchor li a.error.selected:hover
{
  color: #000 !important;
  background: #FBB040 !important;
  border: none !important;
  cursor:text;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.swMain ul.anchor li a.done,
.swMain ul.anchor li a.done:hover,
.swMain ul.anchor li a.disabled,
.swMain ul.anchor li a.disabled:hover,
.swMain ul.anchor li a.error,
.swMain ul.anchor li a.error:hover
{
  color: #353535;
  background: #e2e2e2;
  border: none;
}
.swMain ul.anchor li a.error:not(.selected) {
  color: #353535 !important;
  background: #e2e2e2 !important;
  border: none !important;
}
.swMain .buttonNext {
  width: auto;
  box-sizing:border-box;
  margin: 0 0 0 20px;
  padding: 10px 30px;
  background-color: #fbb040;
  border: none;
}
.swMain .buttonDisabled {
  color:#F8F8F8  !important;
  background-color: #CCCCCC !important;
  cursor:text;
  border:none !important;
}
.swMain .buttonCancel {
  width: auto;
  box-sizing:border-box;
  margin: 0;
  padding: 10px 30px;
  background-color: #353535;
  border: none;
}
.swMain .buttonPrevious {
  width: auto;
  box-sizing:border-box;
  margin: 0 0 0 20px;
  padding: 10px 30px;
  background-color: #AFAEAE;
  border: none;
}
.swMain .buttonFinish {
  width: auto;
  box-sizing:border-box;
  margin: 0 0 0 20px;
  padding: 10px 30px;
  background-color: #fbb040;
  border: none;
}

/* Form Styles */

.txtBox {
  border:1px solid #CCCCCC;
  color:#000;
  font:13px Verdana,Arial,Helvetica,sans-serif;
  padding:2px;
  width:400px;
}
.txtBox:focus {
  border:1px solid #fbb040;
}

.swMain .loader {
    position: fixed;
    left: 0px;
    top: -10px;
    float: none;
    text-align: center;
    font-size: 30px !important;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    padding-top: 250px;
    border: 0px solid #FFD700;
    font: bold 13px Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
    background: #ededee url(https://secure.activecarrot.com/media/dynamic/static_images/1329/3sqI.gif) no-repeat 5px;
    width: 100%;
    height: 100%;
    background-position: 50% 300px !important;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    z-index: 99899999 !important;
}
.swMain .msgBox {
  width: 100%;
  box-sizing: border-box;
  margin: 10px 0;
  padding: 7px 15px;
  background-color: #f78b00;
  color: #ffffff;
  border: none;  
  font-size:14px;
}
.swMain .msgBox .content {
  font-size: 14px;
  padding: 0px;
  float:left;
}
.swMain .msgBox .close {
  border: 1px solid #ffffff;
  border-radius: 3px;
  color: #ffffff;
  display: block;
  float: right;
  margin: 0 0 0 5px;
  outline-style: none;
  padding: 0 2px 0 2px;
  position: relative;
  text-align: center;
  text-decoration: none;
}
.swMain .msgBox .close:hover{
  color: #fbb040;
  border: 1px solid #fbb040;
}
.public_contact_us {
  background:#fff;
  margin-left:10px;
  margin-right:10px;
  padding-left:5px;
  padding-right:5px;
  padding-bottom:5px;
  padding-top:1px;
}

.step_table h3,
#credit_card_details h3,
#direct_debit_details h3{
  color:#353535;
  line-height:initial;
  font-size:16px;
  text-shadow: none;
  font-weight:bold;
}



/*** Steps - new table layout ***/
.step_table{
  border-collapse: collapse;
  margin: 0 0%; /* 0 30px */
  width: 92%; /* 670px */
}

/*** form elements ***/
select.txtBox,
select.contact_select {
  height: 43px;
  width: auto;
  font-size: 16px;
  padding: 0 60px 0 20px;
  padding: 0px\9;
  margin-right: 10px;
  border: none;
  color: #353535;
  background-color: #e2e2e2;
  display: inline-block;
  position: relative;
  border-radius: 5px;
background-color:#e2e2e2;
background-image:url(https://secure.activecarrot.com/media/dynamic/static_images/702/dropdown-arrow.gif);
background-repeat:no-repeat;
background-position:right center;
  /*background: #e2e2e2 url(https://secure.activecarrot.com/media/dynamic/static_images/702/dropdown-arrow.gif) no-repeat right center;*/
  background:#e2e2e2\9;
  -webkit-appearance: none;  /*Removes default chrome and safari style*/
  -moz-appearance: none; /* Removes Default Firefox style*/
  appearance:none;
 -ms-appearance: none;
  -o-appearance: none;
  text-indent: 0.01px; /* Removes default arrow from firefox*/
  text-overflow: "";  /*Removes default arrow from firefox*/ /*My custom style for fonts*/
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
select.contact_select,select.txtBox {
   background: #e2e2e2 url(https://secure.activecarrot.com/media/dynamic/static_images/702/dropdown-arrow.gif) no-repeat right center;
padding: 0 60px 0 20px;
}
}
select.txtBox::-ms-expand,
select.contact_select::-ms-expand{
  display: none;
}

/*** specific steps ***/
/** step 1 **/
#step-1 .step_table tr.contract_grouping td {
  background-color: #fbb040;
  padding: 10px 20px !important;
  color: #ffffff;
  font: 600 16px 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
  border-radius: 5px;
}
#step-1 .step_table td {
  padding: 30px 10px;
  border-bottom: 1px solid #cccccc;
}
#step-1 .step_table tr:nth-last-child(-n+2) td,
#step-1 .step_table .contract_grouping td {
  border-bottom: none;
}
#step-1 .step_table .contract_row,
#step-1 .step_table .visit_pass_row {
  background-color: #f3f3f3;
  color:black;
}

#step-1 .step_table .contract_row td:first-of-type,
#step-1 .step_table .visit_pass_row td:first-of-type {
  text-align: left;
  padding-left: 0 !important;
  width: 20px;
  background-color: #f3f3f3;
}
#step-1 .step_table .contract_row td:last-of-type,
#step-1 .step_table .visit_pass_row td:last-of-type {
  padding-right: 0 !important;
  text-align: center;
  font-size: 12px;
}
#step-1 .step_table tbody > tr { /* hide separator rows */
    display: none;
}
#step-1 .step_table .contract_grouping, /* display all non-separator rows - exhaustive list */
#step-1 .step_table .contract_row,
#step-1 .step_table .visit_pass_row {
    display: table-row;
}
#step-1 table tr td strong { /* if similar markup move to generic */
  font-size: 16px;
  padding-bottom: 5px;
  display: inline-block;
}
#step-1 .step_table + .StepTitle:last-of-type{
  width: 92%;
  margin: 0 4%;
  box-sizing: border-box;
  padding: 10px 20px !important;
  font-size: 16px;
  border-radius: 5px;
  background-color: #000000;
  color: #ffffff;
}
/** step 1 - final 'success' screen after step 4 **/
.congratulations {
  width: 92%;
  margin: 20px 4%;
  box-sizing: border-box;
  padding: 10px 20px !important;
  overflow: hidden;
}
.congratulations ul {
  padding: 0;
}
.congratulations ul span {
  font-weight:bold;
  margin-right:10px;
}

/** step 2 - contact details form **/
#step-2 table{
  border-collapse: collapse;
  margin: 0 4% 0 5%;
  width: 91% !important;
  font-size: 16px;
}
#step-2 table tr {
  display: block;
  width: 100%;
  float: left;
  clear: left;
  margin-bottom: 10px;
  position: relative;
}
#step-2 #contact_details_form table tr:first-child { /* hide blank separator row */
  display: none;
}
#step-2 table tr td {
  display: inline-block;
  float: left;
  padding: 0;
}
#step-2 table tr td:first-child{ /* label column */
  width: 25% !important;
  text-align: left;
  padding-top: 12px;
}
#step-2 table tr td:nth-child(2){ /* input column */
  width:75%;
}
#step-2 table tr td:nth-child(2) input {
  min-height: 44px;
  width: 100%;
  box-sizing: border-box;
  border: solid;
  border-radius: 5px;
  font-size: 16px;
  color: #353535;
  padding: 0 15px;
}
#step-2 table tr td:nth-child(2) em:nth-of-type(1){ /*required star */
  position: absolute;
  left: -15px;
  top: 14px;
  color: #fbb040;
}
#step-2 table tr td:nth-child(2) em + em { /* extra field instruction */
  width: 74%;
  clear: both;
  float: right;
  display: inline-block;
  font-size: 12px;
  margin-top: 10px;
}
#step-2 table tr td:nth-child(3){ /* validation msg column */
  width: 73%;
  clear: left;
  float: right;
}
#step-2 table .error {
  font-size: 14px;
  padding-top: 10px;
  display: inline-block;
  color: #f78b00;
}

/** step 3 - terms and conditions **/
#step-3.content{
  padding-bottom:40px;
}
#step-3 h3{
  width: 92%;
  margin: 0 4%;
  box-sizing: border-box;
  background-color: #fbb040;
  padding: 10px 20px;
  color: #ffffff;
  font: 600 16px 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
  border-radius: 5px;
}
#step-3 > h3 + div{ /* t&cs content blocks */
  width: 92%;
  margin: 20px 4% 40px 4% !important;
  box-sizing: border-box;
  padding: 25px 20px 0 20px !important;
  color: #353535;
  font-size: 16px;
  border-radius: 5px;
  border: none !important;
}
#step-3 .step_table{
  font-size:16px;
}
#step-3 .step_table ul{
  margin-top:0;
  margin-bottom:20px;
}
#step-3 .step_table li{
  margin-bottom:10px;
}
#step-3 .step_table tr:last-child td:first-child {
    text-align: left;
}

/** step 4 - payment details confirmation **/
#membership_details {
  width:100%;
  clear:both;
}
#membership_details ul,
#direct_debit_details,
#credit_card_details,
#payment_type .step_table
 {
  margin: 0 4%;
  width: 92% !important;
  border: none;
  font-size: 16px;
}
#membership_details ul li span{
  width: 47%;
  font-size: 16px;
  margin-left: 3%;
  margin-bottom: 10px;
  line-height: 1.3em;
}
#membership_details ul li span:first-child {
  margin-left: 3%;
  font-weight:600;
  font-family:'Open Sans', Verdana, Arial, Helvetica, sans-serif;
}
#membership_details ul li span:nth-of-type(2) {
  margin-left: 3%;
}
#membership_details ul li{
  width:100%;
  display:block;
  margin: 0 0 10px 0;
  padding: 0;
  border: none;
}
#membership_details ul li:nth-child(7) {
   font-size:initial;
}
#membership_details ul li:nth-child(7) span {
   font-size:initial;
}
#membership_details ul li:first-child {
  width:100%;
  text-shadow: none;
  margin-bottom:20px;
  font: 600 20px 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
}
#membership_details ul li h3{
  background-color: #fbb040;
  padding: 10px 20px !important;
  color: #ffffff;
  font: 600 18px 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
  border-radius: 5px;
}
#membership_details .prorata_label {

  width: 96% !important;

  margin-left: 3%;
  margin-top: 10px;
  font-size: 16px;
}
/** Step 4 -  Bottom section - payment method and direct debit form **/
#payment_type .step_table {
  width: 92% !important;
}
#payment_type .step_table h3{
  text-shadow: none;
  background-color: #fbb040;
  padding: 10px 20px !important;
  color: #ffffff;
  font: 600 18px 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
  border-radius: 5px;
}
#payment_type label{
  margin-bottom: 10px;
  display: inline-block;
}
#direct_debit_details tr,
#credit_card_details tr,
#payment_type tr {
  display: block;
  width: 100%;
  float: left;
  clear: left;
  margin-bottom: 10px;
  position: relative;
  box-sizing:border-box;
  padding-left:3%;
  padding-right:3%;
}
#direct_debit_details tr:first-child,
#credit_card_details tr:first-child,
#payment_type tr:first-child{
    padding-left: 0;
    padding-right: 0;
}
#direct_debit_details tr td,
#credit_card_details tr td,
#payment_type tr td{
  display: inline-block;
  float: left;
  padding: 0;
}
#direct_debit_details tr td:first-child,
#credit_card_details tr td:first-child,
#payment_type tr:nth-of-type(2) td:first-child
{ /* label column */
  width: 25% !important;
  text-align: left;
  padding-top: 12px;
}
#direct_debit_details tr td:nth-child(2),
#credit_card_details tr td:nth-child(2),
#payment_type tr td:nth-child(2){ /* input column */
  width:75%;
}
#direct_debit_details tr td:nth-child(2) input,
#credit_card_details tr td:nth-child(2) input,
#payment_type #direct_debit_details tr td:nth-child(2) input {
  min-height: 44px;
  width: 100%;
  box-sizing: border-box;
  border: solid;
  border-radius: 5px;
  font-size: 16px;
  color: #353535;
  padding: 0 15px;
}
#direct_debit_details tr:first-child td,
#credit_card_details tr:first-child td{ /* direct debit heading column, full width */
  width:100% !important;
}
#direct_debit_details tr:first-child td:last-child,
#credit_card_details tr:first-child td:last-child{
  margin-bottom:20px;
}
#credit_card_details table {
  width:100%;
}
#credit_card_details table tr:nth-child(odd),
#credit_card_details table tr:nth-child(even) {
  background: transparent;
}
#credit_card_details input[type=text], #credit_card_details input[type=tel] {
    width: 100% !important;
}
#credit_card_details tr td p {
  margin: 0;
  padding: 0;
}
#credit_card_details label, #credit_card_details #total, #credit_card_details p {
  font-size: initial;
  color: #353535;
  text-align: left;
}
#credit_card_details tr:last-of-type td:first-child {
    padding-top: 0;
}
#credit_card_details-4 #msg_cc_failed {
    display: none !important;
}
#payment_type tr:nth-of-type(2) {
    margin-bottom: 0;
}
#payment_type tr:first-child td { /* payment type h3 column, full width */
  display: block;
  float: none;
}
#step-4 table .error {
  font-size: 14px;
  padding-top: 10px;
  display: inline-block;
  color: #f78b00;
}
#step-4 table tr td:nth-child(3) { /* validation msg */
    width: 73%;
    clear: left;
    float: right;
}

/*** Responsive ***/
@media only screen and (max-width:1024px) {
  body{
    margin: 0;
  }
  #content{
    /*margin:0 10px;*/
    margin:0;
  }
  #page_wrapper, .swMain, #header_wrapper, #wizard, body, #footer_wrapper, .footer_contact {
    width:100%;
    box-sizing:border-box;
  }
  table {
    width:100%;
  }
  .swMain ul.anchor{
    width:23.5%;
  }
  .swMain ul.anchor li a .stepDesc {
    width: 100%;
  }
  .swMain .stepContainer {
    box-sizing:border-box;
    width:74.5%;
    height: auto !important; /* overrides inline height */
  }
  .swMain .stepContainer div.content {
    width:100%!important;
    box-sizing:border-box;
  }
  .swMain .stepContainer .StepTitle{
    padding: 15px 4%;
    font-size: 18px;
    margin-bottom: 20px;
  }
  /** step 1 - final 'success' screen after step 4 **/
  .congratulations {
    width: 100%;
    margin: 20px 0;
  }
  /** Step 2 **/
  #step-2 #contact_details_form table tr:first-child {
    display: none !important;
  }
  #step-2 table tr{
    margin-bottom: 10px;
    padding-left: 3%;
    padding-right: 3%;
    box-sizing: border-box;
  }
  #step-2 table tr,
  #step-2 table tr td {
    width: 100% !important;
    display: block!important;
    text-align: left;
  }
  #step-2 table tr td:first-child {
    margin-bottom: 10px;
    padding-top:0;
    width: 100% !important;
  }
  #step-2 table tr td:nth-child(2) em:nth-of-type(1){
    top:3px;
  }
  #step-2 table tr td:nth-child(2) em + em { /* */
    float:left;
  }
  /** Step 4 **/
  #step-4 table tr{
    margin-bottom:10px;
  }
  #step-4 table tr:first-child{
    margin-bottom:0;
  }
  #step-4 table tr,
  #step-4 table tr td {
    width: 100% !important;
    display: block!important;
    text-align: left;
  }
  #step-4 table tr td:first-child {
    margin-bottom: 10px;
    padding-top:0;
    width: 100% !important;
    font-weight:bold;
  }
  #payment_type tr:nth-of-type(2) td:first-child {
    width: 100% !important;
  }
}
@media only screen and (max-width:660px) {
 .swMain {
  width:100%;
 }
 .swMain div.anchor,
 .swMain div.stepContainer,
 .swMain div.actionBar {
  width:100%;
  clear:both;
  margin:0!important;
 }
 .swMain ul.anchor,
 .swMain ul.anchor li,
 .swMain ul.anchor li a {
  width:100%!important;
  box-sizing: border-box;
 }
 .swMain ul.anchor li{
  margin-bottom:2px;
 }
 .swMain ul.anchor li a{
  min-height: 60px;
  border-radius: 0;
  padding-top: 10px;
 }
 .swMain ul.anchor li a .stepDesc {
    width: 70%;
  }
  .swMain .stepContainer .StepTitle{
    font-size: 15px;
    margin-top: 10px;
  }
 .swMain div.actionBar {
  height:100%;
 }
 #step-1 .step-table td {
  padding:0!important;
 }
 #step-1 .step_table td:last-child {
  width:75px;
 }
 .swMain div.actionBar{
  width:100%;
  box-sizing: border-box;
 }
 .swMain div.actionBar > a,
 .swMain div.actionBar .loader,
 .swMain div.actionBar .msgBox {
  margin:0;
  float: none;
  clear: both;
  width: 100%;
  box-sizing: border-box;
  border-radius: 0;
  padding-top: 15px;
  padding-bottom: 15px;
 }
 .swMain div.actionBar .msgBox .content {
  float:none;
  display:inline-block;
 }
 .swMain div.actionBar .msgBox a {
  float:none;
  display:inline-block;
 }
  #step-2 table tr td:nth-child(2) select + input[type="text"] {
    margin-top: 15px;
  }
 .txtBox {
  width: 100%!important;
 }
 #dob_day.txtBox,
 #dob_month.txtBox,
 #dob_year.txtBox {
  width:auto!important;
  clear: both;
  float: left;
  margin-bottom: 10px;
 }
 #step-3 td {
  text-align:left!important;
 } 
 #step-3 ul {
  padding:0;
 }
 #direct_debit_details td,
 #credit_card_details td  {
  display: block !important;
  text-align: left !important;
 }
 #payment_type {
  width:100% !important;
 }

 #payment_type .step_table tr:last-child td:first-child {
  width:100px!important;
  padding-right:10px;
 }
 #name_on_card, #credit_card_number, #cc_name_on_card, #cc_credit_card_number, #cc_cvv{
  width:100%!important;
  height:auto!important;
 }

 #cc_expiry_month,
 #cc_expiry_year {
  width:auto!important;
 }
}
/****************************Membership FIX CSS****************************/
/*#step-1 .step_table tbody > tr:first-child,*/
#step-2 .step_table tbody > tr:first-child
 {
    display: table-row;
}
#step-1 .step_table:nth-child(4), 
#step-1 .step_table + .StepTitle:last-of-type{
  width: 100%;
  margin: 0 0%;
  box-sizing: border-box;
  padding: 10px 20px !important;
  font-size: 16px;
  border-radius: 5px;
  background-color: #fbb040;
  color: #ffffff;
}
#step-2 .step_table:nth-child(4) 
{
}
#step-2 #contact_details_form table tr:first-child {
    display: table-row;
}
#step-2 input#start_date {
    width: 130px!important;
}
#step-2 .StepTitle {
    margin-bottom: 0px;
}
.swMain .stepContainer .StepTitle:first-child {
    margin-bottom: 30px !important;
}
#step-1 .StepTitle {
    margin-bottom: 0px !important;
}
@supports (-webkit-appearance:none) {}