html body {background: none;}
div#globalnav { background: #555; }
div#globalnav .panel { display: flex; justify-content: flex-end }
div#globalnav a { color: #fff; text-transform: uppercase; font-size: 12px; text-decoration: none; padding: .5rem 0 }
div#globalnav a:hover { color: #ececec; text-decoration: underline }
div#goballogo { padding: 1rem 0; }
header { border-bottom: 1px solid #dadada }
h1 {font-size: 2.625rem;font-weight: 500;}
h2 { font-size: 1.6rem; font-weight: 500; }
p { font-size: 1.13rem; line-height: 1.6rem }
b, strong { font-weight:500}

form * { outline: 0 none; font-family: knowledge2017; }
form label { display: block; text-transform: uppercase; }
input[type="text"], input[type="password"], .inputtext, .inputpass, select { border: 1px solid #bababa; height: 24px; padding-left: 5px; width: 300px; }
textarea { border: 1px solid #bababa; min-height: 100px; padding: 5px; width: 300px; font-family: Arial, Helvetica, sans-serif; font-size: 1em; }
select option { padding: 3px 5px; }
fieldset { border: 1px solid #bababa; padding: 10px; }
legend { font-family: "KnowledgeLight",Arial, Helvetica, sans-serif; text-transform: uppercase; }
input[type="text"]:focus, .inputtext:focus, .inputpass:focus, textarea:focus { border: 1px solid #d64000; }
input[type="submit"], .inputsubmit { font-family: "KnowledgeBold",Arial, Helvetica, sans-serif; color: #FFFFFF; text-transform: uppercase; background: #d64000; padding: 3px 10px; border: none; cursor: pointer; width: auto; overflow: visible; }
input.inputsubmit, input.inputsubmit:focus, input.inputsubmit:visited, input.inputsubmit:active { border: none; border-color: transparent; }
input[type="submit"]:hover, .inputsubmit:hover { background-color: #d64000; }

.panel { position: relative }
form { margin-bottom: 6rem }

/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 1036px) {
    .panel { width: 95% }
}


/* this section will be moved to style.css*/
/*progress bar*/
.trorange { color: #d64000 }
.trblue { color: #0078ae }
.genbutton { background: #78a22f; color: #fff; font-weight:800; font-size: 1rem; padding: .8rem 3rem; display: inline-flex; border-radius: 5px; -webkit-transition: background .5s; /* Safari */ transition: background .5s; }
.genbutton:hover { background: #1e5615; color: #fff !important; text-decoration: none }
#mobilemylinks { display: none }
.flexcontainer { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: row wrap; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; -moz-flex-flow: row wrap; justify-content: flex-start }
.flexcontainer .description { width: 65%; font-size: 1.13rem; line-height: 24px; margin-left: 2.5rem; }
.flexcontainer .description p { margin-top: 0; padding: 0 }
.flexcontainer .cost { width: 30% }
.flexjustifybetween { justify-content: space-between }
.flex50 { flex: 0 1 50%; box-sizing: border-box }
.flex33 { flex: 0 1 33%; box-sizing: border-box }
.flex25 { flex: 0 1 25%; box-sizing: border-box }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .flex50 { flex: 0 1 48%; box-sizing: border-box }
    .flex33 { flex: 0 1 30%; box-sizing: border-box }
    .flex25 { flex: 0 1 23.2%; box-sizing: border-box }
}

.sectiontotalprice { font-size: 30px !important; color: #d64000 !important; }
#payment span.totalcost, #dockable span.totalcost { font-size: 3rem; line-height: 18px; color: #d64000; font-weight:500}
.expand { display: none; }
.hide { display: none }

/*microsite navigation*/
header a.hambugericon { display: none }
section#header { background: #ececec; height: 250px; }
.configure section#header { background: none; height: 200px }
#wlauhome #header { height: 350px }
section#header p { margin-bottom: 0 }
section#header a { color: #505050 }
section#pagenavigation { border-bottom: 1px solid #ececec }
section#pagenavigation .panel { padding: 0 !important; width: 1068px; display: flex; justify-content: space-between }
section#pagenavigation ul { list-style: none; padding: 0; margin-bottom: 0 }
section#pagenavigation li { padding: 0 1rem .8em 1rem; }
section#pagenavigation li.active { border-bottom: 4px solid #d64000; }
section#pagenavigation li a { /* font-size:.9rem; */ font-weight: 600; color: #4d4d4d; }
section#pagenavigation li a:hover { opacity: .8; color: #4d4d4d !important; text-decoration: none }

#buttonconfig { padding: .3em 1em; height: 90%; margin: auto 0; }


/*landing page general*/
#header .cta { background: #78a22f; color: #fff; font-weight:800; font-size: 1rem; padding: .8rem 3rem; display: inline-flex; border-radius: 5px; margin: 10px 10px 3px auto; -webkit-transition: background .5s; /* Safari */ transition: background .5s; }
#header .cta.enquire { border: 2px solid #bababa; color: #505050; background: #fff }

/*pricing table*/
#pricing .product { float: left; width: 32%; box-sizing: border-box; padding: 1em; text-align: center; font-size: 16px; position: relative; height: 530px; -webkit-transition: background .5s; /* Safari */ transition: background .5s; border: 5px solid #ececec }


#pricing h2, #enterprise h2 { font-weight:800; color: #d64000; font-size: 1.8rem; }
#pricing h2 { height: 70px; }
#pricing h2 span { display: block }

#pricing .product:hover, #pricing .active, #enterprise .panel:hover { background: #fff2e5 }
/*#pricing div:hover div, #pricing .active div {background: #fff}*/

#pricing span.planprice span, #pricing span.planinclude span { display: block }
#pricing div div span:nth-child(1) { }
#pricing span.planprice span:nth-child(2) { font-size: 18px }
#pricing span.planprice span:nth-child(2) span { display: inline-block; width: 20px; font-size: 12px; line-height: 12px; text-align: left; margin-left: 5px }
#pricing span.planprice span:nth-child(2) strong { font-size: 60px; color: #505050; line-height: 60px }
#pricing span.planprice span:nth-child(3) { margin: 5px 0; height: 30px }
#pricing span.planprice span:nth-child(3) select { width: 50px; border-radius: 3px; font-size: 14px; height: 30px; margin: 0 3px }
#pricing a.cta { background: #78a22f; color: #fff; font-weight:800; font-size: 1rem; padding: .8rem 3rem; border-radius: 5px; margin: 10px auto 3px; -webkit-transition: background .5s; /* Safari */ transition: background .5s; }
/*height: 1rem; min-width: 4rem;*/
.cta { display: inline-block; }

#pricing a.cta:hover { background: #1e5615; color: #fff !important; text-decoration: none }
#pricing span.planprice span:nth-child(5) { font-size: 12px; font-style: italic }
#pricing span.planinclude { margin-top: 1em; display: block }
#pricing span.planinclude strong, #enterprise div:nth-child(2) strong { text-transform: uppercase; font-size: .8rem; color: #d64000; letter-spacing: 2px; font-family: knowledge2017black }

#pricing div#popular { border: 5px solid #d64000; }
#pricing div#popular label { position: absolute; top: -30px; right: 2px; text-align: center; padding: .2rem .5rem; background: #78a22f; color: #fff; font-size: .8rem; letter-spacing: 2px; }
#pricing div div:nth-child(2) { border: none }
.productdetail { display: flex }
.productdetail span { text-transform: uppercase; font-weight: 600; line-height: 1.2rem; font-size: .8rem; margin: auto; }

#enterprise div { box-sizing: border-box }
#wlaupricing #enterprise .panel { border: 5px solid #ececec; align-items: center; padding: 1rem 0 }
#enterprise .panel div:nth-child(1) { float: left; width: 65%; padding-left: 2em }
#enterprise .panel div:nth-child(2) { float: right; width: 30%; text-align: center; font-size: 24px }
#enterprise .panel div:nth-child(2) a { font-size: 16px }
#enterprise .panel div:nth-child(2) span:nth-child(2) { border: 2px solid #bababa; color: #505050; font-weight: 600; font-size: 1rem; padding: .5rem 2rem; width: 100px; border-radius: 5px; margin: 10px auto 3px; -webkit-transition: background .5s; /* Safari */ transition: background .5s; display: block }


#enterprise { -webkit-transition: background .5s; /* Safari */ transition: background .5s; cursor: pointer; font-size: 1.13rem; line-height: 1.6rem; margin-bottom: 2rem }

#enterprise .panel:hover div:nth-child(2) span:nth-child(2) { background: #ececec }

#check { text-align: center; width: 600px }
#check h3 { font-weight: 600; font-size: 1.5rem; margin: 1rem 0 2rem 0; }
#check label { font-weight:800; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; margin-top: 2em }
#check { text-align: left; }
#check input, #check select { width: 100%; height: auto; border-radius: 3px; display: block; font-size: 1rem; padding: 15px 20px; box-sizing: border-box; margin: 0; margin-bottom: 1rem }
.nextbutton { border: 0; background: #78a22f; color: #fff; font-weight: 600; font-size: 14px; padding: 1rem 2rem; width: 120px; border-radius: 5px; margin: 10px auto 3px; -webkit-transition: background .5s; /* Safari */ transition: background .5s; display: block; cursor: pointer; text-align: center }
.nextbutton:hover { background: #1e5615 }
.nextbutton:disabled { background: #d3d3d3; cursor: progress; }

/*progress bat*/
#wlauprogressbar { margin: 2rem auto 1rem; height: 80px; }
.progressbar { counter-reset: step; width: 380px; margin: auto }
ul.progressbar li { background: none; list-style-type: none; width: 25%; float: left; font-size: 12px; position: relative; text-align: center; text-transform: uppercase; color: #ccc; }
.progressbar li:before { width: 30px; height: 30px; content: counter(step); counter-increment: step; line-height: 30px; border: 2px solid #ccc; display: block; text-align: center; margin: 0 auto 10px auto; border-radius: 50%; background-color: white; position: relative; z-index: 2 }
.progressbar li:after { width: 100%; height: 2px; content: ''; position: absolute; background-color: #ccc; top: 15px; left: -50%; z-index: 1; }
.progressbar li:first-child:after { content: none; }
.progressbar li.active { color: #555; }
.progressbar li.active:before { border-color: #555; background: #555; color: #fff }
.progressbar li.active + li:after { background-color: #555; height: 3px; }
.progressbar li.processed { color: #367d3c; cursor: pointer; transition: all 0.4s ease; -webkit-transition: all 0.4s ease }
.progressbar li.processed:hover { color: #78a22f }
.progressbar li.processed:before { border-color: #367d3c; background: #367d3c; color: #fff; transition: all 0.4s ease; -webkit-transition: all 0.4s ease }
.progressbar li.processed:hover:before { background: #78a22f; border-color: #78a22f }
.progressbar li.processed + li:after { background-color: #367d3c; height: 3px; }

/*configuration*/
#wlauconfiguration { clear: both; }
section { display: block; clear: both;/*padding-left: 1.125rem;padding-right: 1.123rem;*/ }
#wlauconfiguration section .panel, #wlaupricing section .panel, .panelline { border-bottom: 1px solid #ccc; padding: 1em 0; }
#wlauconfiguration section#premium .panel { padding-bottom: 3rem; }
section#header .panel { padding-top: 2em }
#wlaupricing section .panel { border: none }

#numuser span { box-sizing: border-box; padding: .5em 1em; background: #d64000; color: #fff; margin-left: 2.5em; }
#plan #numuser { margin: 1rem 0 }
#plan #numuser span { margin-left: 0; margin-top: 1rem }

#wlauconfiguration section#info .panel, #wlauconfiguration section#gate .panel { padding: 0; background: #f5f5f5; }
#info .numusers, #gate .numusers { margin: 1rem 2.5rem; font-size: 18px; }
.limit { margin: 0.5rem 0 0; font-size: 14px; }

#wlauconfiguration section .clickpanel { cursor: pointer }
#wlauconfiguration section .clickpanel i { margin-right: 1.4rem; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transform: rotateZ(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); }
#wlauconfiguration section .clickpanel:hover i { transform: rotateZ(180deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); }
#wlauconfiguration section .clickpanel.open i { transform: rotateZ(180deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); }
#wlauconfiguration section .clickpanel.open:hover i { transform: rotateZ(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); }

#wlauconfiguration section#core h2 { padding-left: 2.5rem; /*background:none*/ }

#wlauconfiguration .expand { margin: 1rem 0 1rem 2.5rem; padding: 0; font-size: 16px; }
#wlauconfiguration .addidtionaluser .expand { margin: 1rem 0 3rem; }
#wlauconfiguration .expand .note { display: block; text-align: center; margin-top: 1rem }
#wlauconfiguration .expand .viewallpracticeareas { font-size: 14px; border: 2px solid #bababa; background: #fff; /* color: #fff; */ padding: .5rem 2rem; border-radius: 5px; -webkit-transition: background .5s; transition: background .5s; cursor: pointer; display: block; width: 210px; margin: auto }
#wlauconfiguration .expand .viewallpracticeareas:hover { background: #f5f5f5 }
#wlauconfiguration .expand ul { padding: 0; margin: 0; list-style: none; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: row wrap; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; -moz-flex-flow: row wrap; justify-content: flex-start; }

#wlauconfiguration .expand li { box-sizing: border-box; margin: .5rem 0 1rem; font-weight: 600; position: relative; cursor: pointer; float: left; /*display: none;*/ flex-basis: 25%; min-width: 25%; width: 25%; background: none; padding-left: 0 }


#wlauconfiguration .expand li::after { content: ''; flex: auto; max-width: 25%; }

#wlauconfiguration #reports .expand li { width: 50%; min-width: 50%; }
#wlauconfiguration #alj .expand li, #wlauconfiguration #premium .expand li, #wlauconfiguration #formsprecedents .expand li { width: 80%; min-width: 80%; }
#wlauconfiguration input[type="checkbox"] { display: none; }
#wlauconfiguration input[type="checkbox"] + label { background: url(../images/checkbox-2.png) left top no-repeat; width: 100%; height: 23px; cursor: pointer; text-transform: none; display: block; font-weight:400 }

#wlauconfiguration input[type="checkbox"]:hover + label { background-position: left center }
#wlauconfiguration input[type="checkbox"]:checked + label { background-position: left bottom !important }

#wlauconfiguration input[type="checkbox"] + label span { width: 95%; display: block; padding-left: 2rem; }

#wlauconfiguration .expand li.defaultshow, #wlauconfiguration .expand li.show, #wlauconfiguration #reports .expand li, #wlauconfiguration #premium .expand li { display: block }
#wlauconfiguration .expand li.defaultshow::after { content: ''; flex: auto; }


#wlauconfiguration section span .fprice { color: #d64000 }
#wlauconfiguration section span.cost, #wlauconfiguration input[type="checkbox"] + label span.cost { width: 25%; float: right; font-size: 30px; color: #d64000; text-align: right; margin-right: 2rem; font-weight:600; line-height: 1 }
#wlauconfiguration section span.cost span { font-size: .8rem; font-weight: 500; color: #505050; }
#wlauconfiguration section span.cost span:last-child { display: block; padding-top: .3em }

.tooltiptext { line-height: 16px }
.tooltiptext h3 { margin: .5rem 1rem .5rem; padding: 0; color: #d64000; font-weight:400; font-size: 1rem; }
.tooltiptext h4 { margin: 0 1rem }
.tooltiptext strong { text-transform: uppercase; letter-spacing: 1px; font-size: 10px; display: block; margin: .2rem 1rem .2rem }
.tooltiptext p { font-size: 12px; line-height: 18px; color: #505050; margin: 0 1rem; padding-top: 0 }
.tooltiptext p span { margin: .2rem 0; padding-bottom: .2rem; border-bottom: 1px dotted #bababa; display: block; }
.tooltiptext p span:last-child { border-bottom: 0 }
.tpinfo { cursor: pointer }
.qtip { max-width: 460px; }


#wlauconfiguration .column2 .expand li { width: 50%; display: block; height: auto; font-weight: normal; }
#wlauconfiguration .column2 .expand li:hover { background-position: -50px -266px; }
#wlauconfiguration .column2 .expand li:nth-child(2n) { margin-right: 0 }
#wlauconfiguration .column2 .expand li strong { display: block; font-weight: 500; font-size: 1.2rem; line-height: 1.5; }
#wlauconfiguration .column2 .expand li span { float: left; }

#wlauconfiguration input[type="checkbox"] + label span.moreinfo { width: auto; padding: 0; display: inline; color: #0078ae; float: none; }
span.moreinfo:hover { color: #d64000 }


#wlauconfiguration #reports .expand .price { width: 100%; color: #505050; font-size: 10px; line-height: 12px; font-weight:400; padding: 0 }
#wlauconfiguration .column2 .expand li .price strong { display: inline; font-weight: 900; }

#wlauconfiguration .column2 input[type="checkbox"] + label span { width: 90% }
#wlauconfiguration .column2 input[type="checkbox"] + label span span { float: none; width: auto; padding-left: .3rem; display: inline-block; }



#payment .panel { background: #f5f5f5; border-bottom: 1px solid #ccc !important; border-top: 1px solid #ccc !important; margin-bottom: 1rem; }
#payment .plan { margin-left: 2rem; width: 60%; box-sizing: border-box; padding-right: 1rem }
#payment h2 { background: none; margin: 0 0 .5rem 0; padding: 0 !important; font-weight: 500; font-style: italic; color: #d64000; }
#payment .tcost { display: block; font-size: 3rem; line-height: 18px; color: #d64000; font-weight: 500; margin-top: 1rem }

#payment .note { margin-top: 1rem; display: block; line-height: 1.2rem }
#payment .tc { display: block; margin-top: 2rem; font-size: 13px; line-height: 14px }
#payment .cta, #wlauconfiguration #dockable .cta { width: 25%; text-align: center; }
#dockable .cta { margin: 0 !important; }
.cta .button { display: block; background: #78a22f; color: #fff; font-weight: 500; font-size: 20px; padding: .8rem; border-radius: 5px; margin: 10px auto 3px; -webkit-transition: background .5s; /* Safari */ transition: background .5s; cursor: pointer }
.cta .button:hover { background: #1e5615 }
#payment h6 { margin: 0 0 .5rem 0; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; color: #505050; }
#payment .cta .contact { font-size: 14px; line-height: 1.4em; margin: auto; display: block }
.contactsalesbutton { font-size: 18px; display: inline-block; border: 3px solid #78a22f; background: #fff; color: #78a22f; padding: .8rem; border-radius: 5px; margin: 0 auto 3px; -webkit-transition: background .5s; transition: background .5s; cursor: pointer; width: 100%; }
.contactsalesbutton:hover { color: #1e5615 !important; border-color: #1e5615; background: #e9fcc7; text-decoration: none }
#dockable .contactsalesbutton { margin-top: .5rem }
#payment .contactsales { width: 80%; display: block; margin: auto; line-height: 1rem }
#payment .cta .contact strong { margin: .5rem 0; display: block }
#wlauconfirm #payment { border: none !important }
span.contactsales { font-size: .9rem; }

#dockable { box-shadow: 0 -3px 10px 0px rgba(0,0,0,0.2); position: fixed; width: 100%; background: #f5f5f5; bottom: 0; left: 0; }

#dockable .panel { margin: auto; float: none; border: none !important; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: row wrap; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; -moz-flex-flow: row wrap; align-items: center; justify-content: space-between }
#dockable .plan { width: 70%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: row wrap; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; -moz-flex-flow: row wrap; align-items: center; justify-content: space-between; flex: auto }
#dockable .package, #dockable .cost { width: 50%; font-size: .8rem; line-height: 18px; flex: auto; min-width: 50%; -ms-flex: 50%; /*-ms-flex-negative: 1;*/ -moz-flex: 50%; -webkit-flex: 50%; }
#dockable .package { font-size: 1rem; line-height: 24px; }
#dockable h2 { background: none; margin: 0; padding: 0 !important; font-size: 1.3rem; font-style: italic; }
.cost .tcost { font-size: 3rem; color: #d64000; }
.cost .tcost span { font-size: 1rem; color: #505050;  }
#wlauconfiguration .cost .note { color: #505050; font-weight: normal; display: block }

#payment .cta .thresholdabove, #dockable .cta .thresholdabove { display: none }
#payment .cta.above .thresholdabove, #dockable .cta.above .thresholdabove { display: block }
#payment .cta.above .thresholdbelow, #dockable .cta.above .thresholdbelow { display: none }



.paymentfooter { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: row wrap; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; -moz-flex-flow: row wrap; justify-content: flex-start; align-items: center }
footer { background: #555; }
footer .logo { height: 80px }
footer .panel { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: row wrap; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; -moz-flex-flow: row wrap; align-items: center; justify-content: space-between }
footer span { color: #fff; font-size: 13px; text-align: left; line-height: 18px }
footer span a { color: #f5f5f5 }
footer span a:hover { text-decoration: underline; color: #fff }

.mobileview, .moreinfo { display: none }

#intro .panel { position: relative }
.back { font-size: 14px; position: absolute; text-decoration: underline; cursor: pointer; top: -88px }
.back i { margin-right: .5rem }
.back:hover { color: #d64000 }

.form label { font-family: knowledge; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; margin-top: 1em }
.form input, .form select { border: 1px solid #bababa; height: auto; border-radius: 3px; display: block; width: 100%; font-size: 14px; padding: 15px 20px; box-sizing: border-box }
.form label.error { color: orangered; text-transform: none; letter-spacing: 0; margin-top: .3rem; text-align: right; margin-right: .3rem; }

.adduser #intro .panel, .adduser #user .panel { border: none; padding-bottom: 0 }
.adduser .panel .flex33 { padding-left: 1rem; }
.additional { color: #0078ae; text-decoration: underline; display: block; cursor: pointer; margin-left: 2rem }
.additional:hover { color: #d64000 }
#additional .user.panel { padding-top: 0; }

#user div div, #additionaluserholder div div { box-sizing: border-box; padding: 1rem 0 0 2rem; }

#wlauconfiguration.adduser .expand { margin-left: 0 }


.addonsoftware { position: relative; }
.productpanel label strong { width: 500px !important; display: block; margin-left: 4rem; font-size: 24px; }
.productpanel .description { margin: 0 0 2rem .5rem !important; width: 70% !important; float: left !important }
.productpanel .cost { margin-top: 1rem; padding-left: 0 !important; width: 15% !important; }
.productpanel .cost span { display: inline !important; padding-left: 0 !important; }
.productpanel .cost span:last-child { display: block !important; float: right; }
#wlauconfiguration section.productpanel .panel { border-bottom: 0; }
#wlauconfiguration section.productpanel .panel h3 { padding: 0; margin: 0; font-size: 1.6rem }
#wlauconfiguration section.productpanel .panel p { padding: 0; margin: .5rem 0 0 0; }

.wlaucheckout #intro { margin-top: 2rem; }
.wlaucheckout section { }
.paymentmethod { justify-content: flex-end; }
.paymentmethod div { text-align: center; float: left; color: #505050; font-weight: 500; -webkit-transition: background .5s; /* Safari */ transition: background .5s; cursor: pointer; width: 150px; margin: auto auto 0px; padding-top: 1.2rem; }

.paymentmethod div span.border { left: 50%; padding: 0; margin: 9px auto 0; display: block; background: #bababa; height: 5px; width: 100px; transition: width .3s, background .3s; -webkit-transition: width .3s, background .3s }
.paymentmethod div:hover span.border, .paymentmethod div.active span.border { background: #d64000; width: 150px; }
.paymentmethod div.active span { color: #d64000 }

.wlaucheckout h6 { font-weight: 500; margin: 0 1rem; text-transform: uppercase; letter-spacing: 2px; color: #505050; }
.wlaucheckout h2 { color: #d64000 }
.wlaucheckout ul { padding-left: 1rem; }
.wlaucheckout .row { border-bottom: 1px dotted #ddd; padding: 1rem 2rem; justify-content: space-between; font-size: 1.2rem; font-weight:600 }
.wlaucheckout .row li { font-size: .9rem; font-weight: 400 }
.wlaucheckout .form .row { box-sizing: border-box; padding: .5rem 1rem 0 0; border-bottom: 0 }
.wlaucheckout .row .price { color: #505050; font-size: .8rem; line-height: 12px; text-align: right; font-weight:400 }
.wlaucheckout .row .price strong { font-size: 1.2rem; font-weight: 400 }
.wlaucheckout .row .method { display: block }
.wlaucheckout .checkoutproduct { margin: 2rem 0 0; border-bottom: 3px solid #ddd }
.checkoutproduct .userdetail { font-size: 18px }
.wlaucheckout .addon { margin-top: 2rem; }
.wlaucheckout .back { color: #0078ae; position: relative; float: right; margin-right: 2rem }
.wlaucheckout .back:hover { color: #d64000 }
.wlaucheckout .rowtotal { justify-content: flex-end; align-items: flex-start; line-height: .9rem; border: 0 }
.wlaucheckout .row.rowtotal.total, .wlaucheckout .row.rowtotal.total .price strong { font-size: 1.6rem; font-weight:600; color: #d64000; }
.wlaucheckout .row.rowtotal .price { width: 8rem }
section.checkout { margin-bottom: 3rem; }

.paymentinformation .column2 { width: 50%; }
.paymentinformation { padding: 2rem; border-bottom: 2px solid #ccc }
#payment .paymentinformation h2 { font-weight:600; color: #505050; }
.card { position: relative; }
.card img { position: absolute; height: 30px; right: 2rem; bottom: .6rem; }

.finalpayment { margin: 2rem 0; justify-content: space-between; }
.finalpayment .cost { width: auto; }
.wlaucheckout #payment .cta { width: 35%; }
.wlaucheckout #payment .cta .placeorder { background-color: #78a22f; text-transform: uppercase; padding: 2rem; font-size: 2rem; margin-top: 1rem; }
.wlaucheckout #payment .cta .placeorder:hover { background-color: #1e5615 }

#payment .finalpayment .plan { width: 50%; }
.wlaucheckout .user .checkoutproduct { border: 0; }
.wlaucheckout .user .checkoutproduct h6 { margin: 2rem 0 .5rem 1rem }
.wlaucheckout .userdetail span { border: 0; font-weight:300; margin-left: 1rem; line-height: 1.5rem }
.wlaucheckout #users .checkoutproduct { margin-top: 1rem; }
.wlaucheckout .userdetail .name, .wlaucheckout .userdetail .email { display: block }
.order .cost { padding: 1rem 0 }
.order .cost .note, .order .cost .tgst { display: block; }
.order .cost .tcost { line-height: 2rem }
.plan.totalpayment { align-items: flex-end; justify-content: space-between; background: #f5f5f5; text-align: right }
.plan.totalpayment .cost { padding: 2rem; width: auto; }
.totalpayment .tgst { text-transform: uppercase; font-weight:800; color: #d64000 !important }
.totalpayment .tgst .gst { font-weight:400; color: #505050 }
.totalpayment .tgst, .totalpayment .method { display: block; }
.totalpayment .note { font-size: .9rem; text-align: left; padding: 2rem }

.agreement { min-height: 80px; display: block }
#payment input[type="checkbox"] { display: none; }
#payment input[type="checkbox"] + label { background: url(../images/checkbox-2.png) left top no-repeat; width: 100%; height: 23px; cursor: pointer; text-transform: none; display: block }
#payment input[type="checkbox"]:hover + label { background-position: left center }
#payment input[type="checkbox"]:checked + label { background-position: left bottom !important }

#payment input[type="checkbox"] + label span { width: 80%; display: block; padding-left: 2rem; text-align: left }

.wlauconfirm #intro { margin-bottom: 2rem }
.wlauconfirm #payment .panel { background: none; border-bottom: none !important }
.wlauconfirm .paymentinformation { padding: 2rem 0; border: none }
.wlauconfirm #payment .paymentinformation h2 { font-weight:600_italic; color: #d64000; }
.wlaucheckout #payment .checkoutproduct { border-bottom: navajowhite; }
.wlauconfirm #payment h6 { margin-bottom: 0; }
.wlaucheckout .row.detail { padding-bottom: 2rem; }
.wlauconfirm .column2 h2 { margin-bottom: 2rem !important; }
.wlauconfirm .detail { margin-left: 1rem }

#checkoutpanel { margin-top: 2rem }
#checkoutpanel .panel .column { width: 30% }
.wlaucheckout h6 span { margin-right: 1rem; background: #ccc; width: 30px; display: inline-block; height: 30px; margin: auto; line-height: 30px; text-align: center; border-radius: 50%; }
.ccdetail p { padding: 2rem; margin-top: 0rem; line-height: 24px; font-size: 16px }
.paymentinformation p.note { font-size: 14px; }
.paymentinformation { position: relative }

.wlaucheckout .payment-content .row { padding: .5rem 1rem; margin: auto; border-bottom: 0 }

.paymentcontainer { border-radius: 3px; display: none; background: #ffff; padding: 1rem 1rem 1rem 1.5rem; margin-top: 1rem; border: 1px solid #bababa; }
.paymentcontainer h3 { position: relative }
.paymentcontainer img.ccimg { position: absolute; top: 8px; right: 15px }
#payby { width: auto }
.ccdetail { margin-top: 5em; }
.form input.tracctpc { width: 100px }
#wlaucheckout .finalpayment .tcost { font-size: 5rem; line-height: 2rem; }
.paymentinformation .flex33 { padding: 1rem 0 !important }
#contactdetails .panel { margin-bottom: 2rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px dotted #bababa; border-bottom: 1px dotted #bababa; }

/*threshold form */
.threshold .checkoutproduct { margin-top: 0 }
.threshold .note { padding: 0 2rem 2rem; text-align: right; }
.threshold .form { background: #f5f5f5; padding: 2rem 2rem 0; }
.threshold .plan { margin-left: 2rem !important; }
.threshold .form .note { text-align: left; padding: 1rem 0; font-size: .8rem; line-height: 1rem; }
.threshold .cta { display: inline-flex; background: #d64000; color: #fff; font-weight:600; font-size: 24px; line-height: 30px; padding: .8rem 2rem; border-radius: 5px; margin: 2rem auto 3px; -webkit-transition: background .5s; /* Safari */ transition: background .5s; cursor: pointer }
.threshold .cta:hover { background: #d64000 }

/*enquire form */
#wlauenquire .row { padding-right: 1rem; }
#wlauenquire .cta { display: inline-flex; background: #d64000; color: #fff; font-weight:600; font-size: 24px; line-height: 30px; padding: .8rem 2rem; border-radius: 5px; margin: 2rem auto 3px; -webkit-transition: background .5s; /* Safari */ transition: background .5s; cursor: pointer }
#wlauenquire .cta:hover { background: #d64000 }
#wlauenquire .note { font-size: .8rem; line-height: 1rem }

.numuser { text-transform: uppercase; margin-bottom: .5rem; display: inline-flex; padding: .3rem 0 .2rem; border-bottom: 5px solid #d64000; font-size: 14px; }
.package .note { display: block; margin-top: .5rem; font-size: .9rem; line-height: 1.2rem; }

@media only screen and (max-width: 1036px) {
    section#pagenavigation .panel { width: 100% }
}
/* Use a media query to add a breakpoint at 800px: */
@media only screen and (max-width: 800px) {
    #popular { order: 1 }
    #basic { order: 2 }
    #custom { order: 3 }
    .agreement { margin-top: 1rem; min-height: 50px; margin-bottom: 1rem }
    .productdetail span { margin: 0 }
    #pricing .product { width: 100%; height: auto }
    #pricing .plandetail { display: flex }
    #pricing h2 { height: auto; text-align: left; }
    #pricing h2 span { display: inline; }
    #pricing span.planinclude { text-align: left; width: 49% }
    #pricing span.plandetail { display: flex; }
    #pricing span.planprice { width: 45%; text-align: left; }
    #pricing span.planprice span:nth-child(3) { height: auto }

    #pricing #basic, #pricing #custom { border: 1px solid #ffd4a8; margin-top: 1rem; }

    #enterprise .panel div:nth-child(1), #enterprise .panel div:nth-child(2) { float: left; width: 100%; padding-left: 0; text-align: left; margin-bottom: 1rem }
    #enterprise .panel div:nth-child(2) span:nth-child(2) { margin: 0; text-align: center; margin-top: 1rem; }

    #wlauconfiguration .expand li { width: 50%; min-width: 50%; position: relative }
    .mobileview { position: absolute; background: #e1e1e1; top: 0; right: 0; width: 40px; height: 100%; display: table; text-align: center }
    .mobileview:hover { background: #ffe6cf }
    .mobileview img { width: 15px; height: 100%; vertical-align: middle }
    #pricing .mobileview { display: none }

    #wlauconfiguration #reports .expand li, #wlauconfiguration #premium .expand li { width: 100%; min-width: 100% }
    #wlauprogressbar { width: 80%; padding-left: 0; margin-left: 0; }
    .flexcontainer .description { width: 100%; font-size: 1rem; }
    #wlauconfiguration section span.cost { text-align: left; font-size: 1.5rem; margin-left: 1.7em; width: 100% }
    #wlauconfiguration section span.cost span:last-child { display: inline; }
    #wlauconfiguration section .panel { padding: 1rem 0 }
    #payment .plan, #payment .cta { width: 80%; margin: 0 2.5rem; text-align: left; min-width: 80% }
    .cta .button { display: inline-flex }
    #payment .cta .contact { margin: .5rem 0 }
    footer .panel { padding: 1rem 0 }
    footer img { display: none }
    footer span, #payment .cta, #wlauconfiguration #dockable .cta { width: 100%; text-align: center }
    #payment .cta { text-align: left }
    #dockable .plan, #dockable .package, #dockable .cost { width: 100%; margin-bottom: .5rem; text-align: center; min-width: 100% }

    #wlauconfiguration .expand li { background: #f5f5f5; padding: 1rem; box-sizing: border-box; border: 1px solid #fff; margin: 0; }
    #wlauconfiguration .expand #ul-practiceareas { margin-top: .5rem }
    #wlauconfiguration .column2 input[type="checkbox"] + label span { width: 80% }
    .panel.user .column3, .expand .column3 { width: 90%; }

    #wlauconfiguration.adduser .expand .user { margin-bottom: 3rem }
    .productpanel .description { width: 90% !important; margin-bottom: 0 !important }
    .productpanel .cost { width: auto !important; text-align: left; float: left !important; margin: 1rem 0 3rem 2.5rem !important }
    .productpanel .cost span { display: inline !important; padding-left: 0 !important; float: none !important; width: auto !important }
    .productpanel .cost span:last-child { display: inline !important; }

    .paymentinformation .column2 { width: 100%; }
    .paymentinformation .column2.customerdetail { margin-bottom: 4rem; }

    .plan.totalpayment .cost { text-align: left; padding: 0 0 2rem 2rem; width: 100%; }

    .ccdetail { margin-top: 0; }

    .flex50 { flex: 0 1 100% }
    .flex33 { flex: 0 1 100% }
    .flex25 { flex: 0 1 50% }
}

@media only screen and (max-width: 500px) {

    /* Style the hamburger menu */
    header .panel { position: relative }
    header a.hambugericon { background: #ececec; padding: .5rem .5rem .3rem .5rem; display: block; position: absolute; right: 1rem; top: 50%; margin-top: -1.1rem; color: #aaa }

    /* Add a grey background color on mouse-over */
    header a.hambugericon.active { color: #d64000 !important; }
    #mylinks { display: none }

    #wlaucheckout .finalpayment .tcost { font-size: 3rem }
    #pricing .mobileview { height: 40px; bottom: 0; right: 0; top: auto; }
    #pricing span.planprice { width: 100% }
    #pricing span.planinclude { display: none }
    h1 { font-size: 2rem }
    h2 { font-size: 1.5rem }
    p { font-size: 1rem }
    #wlauconfiguration .cost .tcost { font-size: 2rem }
    #goballogo img { width: 80% }
    #payment .contactsales { display: none }
    #wlauconfiguration .expand li { height: auto; margin-bottom: 0 }
    #wlauconfiguration .expand li, #wlauconfiguration #reports .expand li, #wlauconfiguration #premium .expand li { width: 100%; min-width: 100% }
    .package h2, #dockable .note { display: none !important }
    section#intro { margin-top: 1rem; }
    .wlaucheckout .paymentmethod { justify-content: flex-start; }
    .wlaucheckout .paymentmethod div { margin: 1rem .5rem 1.6rem 0; }
    .wlaucheckout .row .price { width: 100%; text-align: left; margin-top: .5rem; }
    .wlaucheckout .row .method { display: inline; }
    .checkoutproduct .row, .paymentinformation .flex33, .checkoutproductadditional .userdetail, .checkoutproduct .userdetail { background: #f5f5f5; border: 1px solid #fff !important; }
    .checkoutproductadditional .userdetail, .checkoutproduct .userdetail { padding: 1rem 0 }

    .plan.totalpayment { margin-top: 1rem }
    .wlaucheckout .row { font-size: 1rem }
    .name span { display: none; }
    #payment .paymentinformation h2 { font-size: 1.5rem; }
    .wlaucheckout #payment .cta .placeorder { font-size: 1.8rem }
    .paymentinformation { padding: 2rem 1rem }
    .agreement { min-height: 90px; }


    .flex25 { flex: 0 1 100% }
    #wlauconfiguration input[type="checkbox"] + label span { width: 100%; }
}