.container .inner { background: white;  }
.headingbar { border-bottom: 1px solid #b9c1c0; background: #f4f5f5; padding: 20px 40px; }
.headingbar h3 { font-size: 18px; color: #294144; display: inline-block; vertical-align: middle; margin: 0px 10px; text-transform: none; font-weight: 400}
.headingbar img { display: inline-block; vertical-align: middle;  }
.innerpadding { padding: 30px 40px }
.innerpadding .col-2 { width: 47%; width: calc(50% - 40px); }

.expeditionselection { border-bottom: 1px solid #cccccc; padding-bottom: 30px; margin-bottom: 40px; }
.expeditionselection h2 { font-family: fira-sans; font-weight: 400; margin-top: 0px; } 
.expeditionselection h3 { text-transform: none; font-size: 22px; margin: 0px; }
.expeditionselection p, .expeditionselection p a { font-size: 0.9rem !important; }
.expeditionselection .col { width: 47%; width: calc(50% - 18px); } 

.sidebar, .mainbar { position: relative; }
.sidebar:before, .mainbar:before { content: ""; border-top: 1px solid #8e9b9c; position: absolute; width: 210px; width: calc(100% - 40px); height: 1px; top: 0px; left: 20px; }
.mainbar:before { width: 770px; width: calc(100% - 40px); }
.challengers, .bookingquestions, .terms, .paymentoptions { display: table; width: 100%; }
.challengers .sidebar:before, .challengers .mainbar:before, .paymentsummary .sidebar:before, .paymentsummary .mainbar:before { border: none }
.sidebar { width: 250px; background: #f4f5f5; padding: 30px; display: table-cell; vertical-align: top;  }
.mainbar { background: #e9e9e9; padding: 40px 30px 30px 30px; display: table-cell;  }
h2 { text-transform: none !important; font-size: 30px !important; }
.userform h2 { text-transform: uppercase !important; }
h4 { font-weight: 600; font-size: 15px; margin-top: 20px;}
h4 a.info { float: right; } 
h4 a.info, .cancelextension, .orangelink { font-weight: 300; color: #e6570c; font-family: fira-sans; text-decoration: underline; }
.mainbar p { font-size: 0.9rem; }
a.cancelextension { font-size: 10pt !important; }
.container a { font-size: 1.0rem !important; font: inherit; }

.col-2, .col { width: 47%; width: calc(50% - 9px); margin-right: 18px; display: inline-block; vertical-align: top; }
.col.last { margin-right: 0px; } 

.input { padding-left: 0px; }
.input input, .input select, body .ui-selectonemenu { width: 100%; }

h4 { position: relative; } 
.help { position: absolute; right: 0px; top: 2px; cursor: pointer }

.personaldetails h4 { margin-bottom: 6px; }

.verticalradios { width: 100%; }
.verticalradios .radiooption { position: relative; border: 1px solid #8e9b9c; margin: 10px 0px; padding: 10px 40px 10px 15px; border-radius: 4px; font-size: 1.0rem; line-height: 1.3rem }
.verticalradios .radiooption.selected  { background: #fed4bd; border: 1px solid #e6570c }
.verticalradios .radiooption .ui-radiobutton, .verticalradios .radiooption .ui-chkbox { position: absolute; right: 15px; top: 50%; top: calc(50% - 10px); margin: 0px; }
.verticalradios .radiooption .ui-radiobutton-box, .verticalradios .radiooption .ui-chkbox-box { border-color: #aaa; position: relative; background: none !important; } 
.verticalradios .radiooption.selected .ui-radiobutton .ui-radiobutton-box, .verticalradios .radiooption.selected .ui-chkbox-box { border-color: #aaa }
.verticalradios .radiooption.selected .ui-radiobutton .ui-radiobutton-icon, .verticalradios .radiooption .ui-radiobutton .ui-state-active .ui-radiobutton-icon { background: #666666 }
.verticalradios .radiooption .ui-chkbox .ui-chkbox-icon { color: #666; margin: -2px 0px 0px 0px; font-size: 12pt; font-weight: bold; top: 2px; left: 2px; position: absolute; }
.verticalradios .radiooption .notAllowed { color: red; }

body .warningbox { background: rgb(255, 219, 219) !important; border: 1px solid rgb(255, 0, 0); border-radius: 4px; color: white }
body .warningbox .ui-panel-content { background: none; border: 0px; color: black;  }

.tickboxtable td { padding: 0px 10px 3px 0px; vertical-align: middle; font-size: 0.8rem; line-height: 1.0rem; }

.extensionselect .thumbnail { width: 90px; overflow: hidden; display: table-cell; line-height: 0px; padding: 0px !important }
.extensionselect .thumbnail img { width: 90px; }
.extensionselect .radiooption { padding: 0px 30px 0px 0px; position: relative; }
.extensionselect .radiooption .radioinner { padding: 0px 10px; display: table-cell; vertical-align: middle}
.extensionselect .radiooption .radioinner .labels  { width: 230px; }
.extensionselect .radiooption .radioinner .labels label, .extensionselect .radiooption .radioinner .extcosts { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.extensionselect .radiooption .radioinner .extcosts { font-weight: 600; }

.extensionselect .extensiontext { display: none; font-size: 0.8em }

.paymentoptions { margin-bottom: 300px; }
.paymentoptions .sidebar, .paymentoptions .mainbar { border: none; }
.paymentoptions .inputbar { display: inline-block; width: 200px; width: calc(100% - 250px); }

.payop p { display: inline; }
.payop br { display: none; }

.payops .extended { display: none; margin-bottom: 20px}
.payops .extended .payop .hl { font-weight: 700 }
.payops .extended .payop h2 { margin-bottom: 0px; }

.paymentsummary { position: fixed; bottom: 0px; background: #ffffff; width: 100%; border-top: 1px solid #8e9b9c; left: 0px; }
.paymentsummary .sidebar, .paymentsummary .mainbar { background: #ffffff; border: none; padding-top: 10px }
.paymentsummary .sidebar { padding-left: 40px; width: 290px;}
.paymentsummary .mainbar { width: 850px; padding-right: 40px; padding-top: 40px }
.payablenow { float: right; width: 400px; max-width: 100%; position: relative; }
.payablenow .thelabel { text-align: left; font-size: 12px; position: absolute; left: 0px; top: 0px; } 
.payablenow .totaldue {  float: left; font-size: 40px; font-weight: 700; display: inline-block; margin-top: 8px }
.payablenow .button { margin: 0px !important; float: right; }

.paymentexplained { background: #dddddd; padding: 5px 10px 10px 10px; border-radius: 4px; margin-top: 5px; }
.paymentexplained h2 { font-size: 14pt !important; margin-top: 10px}
.paymentexplained p, .paymentexplained p a { font-size: 10pt !important; }

.confirmation .banner-slide { margin-bottom: 0px; max-height: 500px; } 
.confirmation .banneroverlaytext { height: 200px; width: 250px; background: none !important; right: 50px; }
.confirmation .bookingoverlay { background: rgba(255,255,255, 0.8); position: relative;  text-align: center; padding: 25px; }
.confirmation .bookingoverlay .countdown p { color: #294144; font-size: 1.6rem; }
.confirmation .bookingoverlay .countdown p.head { text-transform: uppercase; font-family: futura-pt; font-size: 1.2rem; line-height: 1.2rem; }
.confirmation .bookingoverlay .countdown p.head img { display: none; margin-top: -8px; margin-right: 10px; vertical-align: middle; }
.confirmation .bookingoverlay .countdown p.numdays { font-size: 5rem; font-weight: 700; line-height: 3rem; padding: 20px 0px 10px 0px }

.bookingquestionsmainbar .input input { width: auto; }

@media screen and (max-width: 1200px)
{
  .container .inner { padding: 0px !important; }
  .confirmation .banneroverlaytext { bottom: 0px !important; width: 100%; height: 100%; left: 0px}
  .confirmation .bookingoverlay { position: absolute; left: 0px !important; height: auto; width: 100%; top: auto; bottom: 0px; padding: 10px} 
  .confirmation .bookingoverlay .countdown { position: static;  }
  .confirmation .bookingoverlay .countdown .head:after { content: ":" }
  .confirmation .bookingoverlay .countdown p { display: inline; vertical-align: middle !important; text-transform: lowercase; }
  .confirmation .bookingoverlay .countdown p.head { display: inline; font-size: 1.1rem; padding-top: 3px}
	.confirmation .bookingoverlay .countdown p.numdays { font-size: 3rem; padding: 0px 10px }
}

@media screen and (max-width: 1500px)
{
  .extensionselect .thumbnail { display: none; }
  .extensionselect .radiooption .radioinner { display: block; }
  .extensionselect .radiooption .radioinner .labels { padding: 10px 5px; width: auto }
  .extensionselect .radiooption .radioinner .labels label, .extensionselect .radiooption .radioinner .extcosts { width: auto; white-space: normal; text-overflow: initial; }
}

@media screen and (max-width: 940px)
{
  .personaldetails h4 span { font-size: 8pt !important;}
  
  .verticalradios .radiooption, .verticalradios .radiooption label { font-size: 0.8rem !important; line-height: 1.0rem }
  
}  

@media screen and (max-width: 770px)
{
  .expeditionselection .col { width: 100%; }
  .personaldetails h4 span { display: block; }
  .sidebar { width: 150px; padding: 5px 20px }
  .mainbar { padding: 10px 20px; }
  .sidebar h2, .terms .mainbar h2 { font-size: 20px !important; }
  .challengers .sidebar p, .bookingquestions .sidebar p { font-size: 12px !important; }
}  

@media screen and (max-width: 700px)
{
  .headingbar { padding: 20px 10px; }
  .innerpadding { padding: 30px 10px }
  .innerpadding .col-2 { width: 47%; width: calc(50% - 20px); }
  .innerpadding .paxlogin .col-2 { width: calc(50% - 30px);  }
  .innerpadding .col-2 input { width: 100%; }

  .paymentoptions { margin-bottom: 0px; }
  .paymentsummary { position: static; } 
  .paymentsummary .mainbar { padding-left: 0px; padding-right: 0px }
  .paymentsummary .sidebar { display: none; }
  .paymentoptions .inputbar { width: 100px; width: calc(100% - 103px); }  
  .paymentoptions .ui-button { max-width: 90px; min-width: 90px }
}

@media screen and (max-width: 640px)
{
  .challengers .col, .bookingquestions .col, .paymentoptions .col { display: block; width: 100%;}
  .extensionselect .thumbnail { width: 50px !important; }
  .extensionselect .radiooption .radioinner .labels { width: 205px; }
}

@media screen and (max-width: 500px)
{
  .innerpadding .paxlogin .col-2 { display: block; width: 100%; }
  .expeditionselection h2 { font-size: 1.3rem !important; margin-top: 10px}
  .expeditionselection h3 { font-size: 1.0rem }
   .sidebar { width: 110px; padding: 5px 10px }
  .mainbar { padding: 10px 10px; }
  .sidebar h2, .terms .mainbar h2 { font-size: 16px !important; }
  .mainbar h4 { font-size: 14px }
  .payablenow { width: 100%; }
  .payablenow .totaldue { font-size: 30px; }
   .payablenow .button { max-width: 120px; margin-right: 0px } 
  .confirmation .bookingoverlay { padding: 0px }
  .confirmation .bookingoverlay .countdown .head { display: none}
  .confirmation .bookingoverlay .countdown p { font-size: 1.3rem; }
  .confirmation .bookingoverlay .countdown p.numdays { font-size: 1.5rem; line-height: auto; }
}

@media screen and (max-width: 420px)
{
  .paymentsummary .inner { width: 100%; padding: 0px;  }
  .sidebar { display: none; }
  .mainbar { padding-top: 0px; padding-bottom: 0px }
  .mainbar:before { border: none; }
  .paymentoptions .mainbar { padding-bottom: 20px }
}