html {
min-height:100%;
box-sizing:border-box;
-webkit-font-smoothing:antialiased;
font-smoothing:antialiased;
text-rendering:optimizelegibility}

*, 
*:before, 
*:after {
box-sizing:inherit}

body {
min-height:100%;
padding:20px;
margin:0;
color:#333;
background:#F9F2D8;
font-size:15px;
line-height:1.3;
font-weight:300;
text-align:center;
font-family:'Montserrat', arial, san-serif;
letter-spacing:-.02em;
overflow-x:hidden}

body:before {
content:'';
position:absolute;
left:50%;
top:50%;
width:40px;
height:40px;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background:url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" enable-background="new 0 0 40 40"%3E%3Cpath opacity="0.2" fill="%23333" d="M20.201 5.169c-8.254 0-14.946 6.692-14.946 14.946 0 8.255 6.692 14.946 14.946 14.946s14.946-6.691 14.946-14.946C35.146 11.861 28.455 5.169 20.201 5.169zM20.201 31.749c-6.425 0-11.634-5.208-11.634-11.634 0-6.425 5.209-11.634 11.634-11.634 6.425 0 11.633 5.209 11.633 11.634C31.834 26.541 26.626 31.749 20.201 31.749z"/%3E%3Cpath fill="%23333" d="M26.013 10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0C22.32 8.481 24.301 9.057 26.013 10.047z" transform="rotate(180 20 20)"%3E%3CanimateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1s" repeatCount="indefinite"/%3E%3C/path%3E%3C/svg%3E') no-repeat 50% 50%/contain}

b {
font-weight:700;
letter-spacing:-.025em}

a {
color:inherit;
cursor:pointer}

#content {
visibility:hidden}

.loaded #content {
visibility:visible}

body.loaded:before {
display:none}

header,
nav,
main,
footer,
section {
display:block}

main {
margin-top:120px}

section {
position:relative;
max-width:760px;
padding-bottom:200px;
margin:20px auto 40px}

#section-1:after,
#section-2:after {
display:none;
content:'';
position:absolute;
left:50%;
bottom:50px;
height:150px;
border-left:1px solid #00ADEE}

#section-1:before,
#section-2:before {
display:none;
content:'';
position:absolute;
left:50%;
bottom:50px;
height:9px;
width:18px;
background:url(../img/arrow.svg) no-repeat 50% 50%/contain;
-ms-transform:translate(-50%);
-webkit-transform:translate(-50%);
transform:translate(-50%)}

#section-3:after,
#section-3:before{
display:none}

h1,
h2,
h3,
h4 {
margin:0;
font-weight:700;
line-height:1;
letter-spacing:-.04em}

h2 {
position:relative;
color:#00ADEE;
font-size:40px}

h2:before {
line-height:1;
content:'1';
position:absolute;
left:50%;
bottom:100%;
width:40px;
height:40px;
line-height:38px;
border:1px solid #00ADEE;
font-weight:400;
font-size:20px;
color:#00ADEE;
font-family:inherit;
border-radius:50%;
-ms-transform:translate(-50%,-25%);
-webkit-transform:translate(-50%,-25%);
transform:translate(-50%,-25%)}

#section-2 h2:before {
content:'2'}

#section-3 h2:before {
content:'3'}

h2 + h5 {
margin:10px 0 30px;
font-size:12px;
color:#00ADEE;
font-weight:400}

h5 + p {
max-width:600px;
margin:0 auto}

.note {
font-size:13px}

.note a {
color:#00ADEE;
text-decoration:underline}

form {
display:block;
margin:50px 0 0}

h3 {
font-size:15px;
margin:0;
font-weight:700}

h3 span {
font-weight:300}

h4 {
font-size:14px}

.time,
.msg {
margin-top:10px;
font-size:13px;
color:#EE2953;
font-weight:400!important}

.msg {
opacity:0;
margin-bottom:-10px;
display:none;
font-size:13px;
transition:.2s}

.msg.show {
display:block;
opacity:1}

#section-3 .msg {
margin:30px 0 10px}

.btns {
margin:30px auto}

.opts {
display:-webkit-flex;
-webkit-justify-content:center;
-webkit-flex-wrap:wrap;
display:flex;
justify-content:center;
flex-wrap:wrap}

.opts.break {
max-width:680px;
margin:0 auto}

.btns a,
.opts a {
display:inline-block;
border-radius:5px;
background:#74C695;
color:#fff;
font-size:25px;
line-height:1;
padding:10px 15px 15px;
margin:0 2px;
-moz-user-select:none;
-ms-user-select:none; 
-webkit-user-select:none;
transition:background .2s}

.btns a {
height:40px;
font-size:18px;
letter-spacing:-.025em}

.btns a:hover {
background:#666!important}

.btns a[href] {
text-decoration:none}

.btns a.arrow:after {
content:'';
display:inline-block;
width:28px;
height:18px;
vertical-align:middle;
margin-left:10px;
background:url(../img/next.svg) no-repeat 50% 50%/contain}

.opts a {
color:#666;
font-size:12px;
padding:13px 12px;
border:1px solid #ccc;
background:#fff;
margin:2px}

.opts a.on {
color:#fff;
border-color:#00ADEE;
background:#00ADEE}

.btns .additional {
background:#00ADEE;
text-decoration:none}

.btns .additional:after {
display:inline-block;
margin-left:10px;
content:'\f061';
font-family:'FontAwesome'}

ol {
padding:0}

/* HEADER */

header {
position:relative;
display:-ms-flexbox;
-ms-flex-pack:justify;
display:-webkit-flex;
-webkit-justify-content:space-between;
display:flex;
justify-content:space-between}

h1 {
margin:0;
font-size:18px;
color:#EE2953}

h1:before {
font-family:FontAwesome;
content:'\f00c';
display:inline-block;
width:25px;
height:25px;
line-height:25px;
background:#74C695;
font-weight:normal;
font-size:15px;
margin-right:8px;
color:#fff;
border-radius:50%}

h1 a {
text-decoration:none}

#size {
position:absolute;
left:50%;
-ms-transform:translate(-50%);
-webkit-transform:translate(-50%);
transform:translate(-50%)}

#size {
vertical-align:baseline;
font-weight:400;
font-size:13px;
color:#00ADEE}

#size a {
display:inline-block;
margin:0 3px}

#size a:after {
content:'A'}

#size a#big:after {
font-size:20px}

#size a.on {
border-bottom:2px solid #00ADEE}

#size a:hover,
#size a.on:hover {
color:#333;
border-color:#333}

nav {
text-align:right}

nav a {
height:30px;
line-height:30px;
display:none;
border-radius:5px;
background:#00ADEE;
color:#fff;
font-weight:400;
padding:0 10px;
margin:0 1px;
font-size:13px;
transition:background .2s;
text-decoration:none}

nav .additional {
display:inline-block}

nav .additional:before {
content:'\f03a';
display:inline-block;
font-family:FontAwesome;
margin-right:5px}

nav a:hover {
opacity:.5}

.print {
background:#333!important}

.print:before {
font-family:FontAwesome;
content:'\f02f'}

.pdf {
background:#EE2953!important}

.pdf:before {
font-family:FontAwesome;
content:'\f1c1'}

/* START */

#start-page header {
position:fixed;
top:20px;
left:20px;
right:20px}

#start-page h1,
#start-page #size {
visibility:hidden}

#start {
position:absolute;
top:50%;
left:20px;
right:20px;
-ms-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
max-width:none;
font-size:20px}	

#start h2,
#start p {
max-width:660px;
margin-right:auto;
margin-left:auto}

#start h2 {
position:relative;
font-size:50px;
color:#EE2953}

#start h2:before,
#results h2:before {
font-family:FontAwesome;
content:'\f00c';
line-height:42px;
border:0;
color:#fff;
background:#74C695;
font-weight:normal;
font-size:25px}

#start p {
font-weight:200}

#start .btns {
margin-top:30px}

#start .btns a {
background:#74C695;
height:auto;
font-size:25px}

#start-page footer {
position:absolute;
left:0;
right:0;
bottom:0}

#previous {
display:none;
font-size:13px;
font-weight:400}

/* SECTION 1 */

#section-1 form {
margin-top:30px}

#section-1 .row {
margin-bottom:20px}

#section-1 .row h3 {
margin-bottom:10px}

/* SECTION 2 */

.split .row  {
position:relative;
z-index:0;
display:-ms-flexbox;
-ms-flex-pack:center;
display:-webkit-flex;
-webkit-justify-content:center;
display:flex;
justify-content:center;
margin-bottom:10px}

.split .row.current {
z-index:1}

.split .row p,
.split .row .dd {
width:140px;
margin:0;
text-align:right;
line-height:1.2;
font-size:13px}

.split .row .dd {
width:360px;
padding-left:20px;
padding-right:15px;
text-align:left}

.dropdown {
width:100%;
position:relative;
cursor:pointer;
color:#333;
font-size:13px;
display:inline-block;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
text-align:left}

#section-2 .dropdown {
-ms-transform:translateY(-25%);
-webkit-transform:translateY(-25%);
transform:translateY(-25%)}

.dropdown span.selected {
position:relative;
padding:0 35px 0 10px;
display:block;
height:40px;
color:#666;
border:1px solid #ccc;
border-radius:5px;
background:#fff}

.dropdown.changed span.selected {
color:#333}

.dropdown span.selected:after {
content:'';
position:absolute;
width:12px;
height:17px;
top:50%;
right:10px;
background:#fff url(../img/dropdown.svg) no-repeat 50% 50%/contain;
-ms-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
transition:.2s}

.dropdown.open span.selected {
border-color:#f9f9f9;
border-radius:5px 5px 0 0}

.dropdown span.selected {
display:-ms-flexbox;
-ms-flex-pack:start;
-ms-flex-align:center;
display:-webkit-flex;
-webkit-justify-content:flex-start;
-webkit-align-items:center;
display:flex;
justify-content:flex-start;
align-items:center}

.options {
display:none;
position:absolute;
cursor:pointer;
width:100%;
top:100%;
margin:0 0 15px;
padding:0;
border-radius:0 0 5px 5px;
background:#f9f9f9}

.options li {
margin:0;
padding:0;
list-style-type:none;
-moz-user-select:none;
-ms-user-select:none; 
-webkit-user-select:none;
padding:10px 20px 10px 15px;
border-top: 1px solid #fff}

.options li div {
color:#999;
font-size:11px}

.options li:hover {
background:#E6E6E6}

.options li:first-child {
border:0}

.options li:last-child {
padding-bottom:15px;
border-radius:0 0 5px 5px}

.options li.current {
display:none}

.dropdown.open {
border-radius:5px 5px 0 0}

.dropdown.open span.selected:after {
-ms-transform:translateY(-50%) rotate(180deg);
-webkit-transform:translateY(-50%) rotate(180deg);
transform:translateY(-50%) rotate(180deg)}

.dropdown.open .options {
display:block}

/* SECTION 3 */

#section-3 {
max-width:900px}

#section-3 .dropdowns {
padding-bottom:10px}

#section-3 .split .row p:first-child {
margin-top:4px;
width:180px;
text-align:left}

#skills,
#other-skills {
display:none;
position:relative;
padding-top:80px}

#skills:before,
#other-skills:before {
display:none;
content:'';
position:absolute;
top:0;
left:50%;
height:60px;
border-left:1px solid #00ADEE}

.box {
margin:10px 0 20px;
border-top:1px solid #ccc;
padding:20px 0 0;
border-bottom:1px solid #ccc;
display:-ms-flexbox;
-ms-flex-wrap:wrap;
display:-webkit-flex;
-webkit-flex-wrap:wrap;
display:flex;
flex-wrap:wrap;
text-align:left;
line-height:1.2;
font-size:13px}

.box div {
position:relative;
width:25%;
margin-bottom:20px;
padding:0 15px 0 20px}

input[type="checkbox"]{
position:absolute;
top:2px;
left:0;
font-size:10px;
margin:0;
padding:0}

.box label {
cursor:pointer;
-moz-user-select:none;
-ms-user-select:none; 
-webkit-user-select:none;
font-size:13px}

.box label b {
display:block;
margin:0 0 1px;
font-size:13px;
font-weight:700}

#other-skills p {
margin-top:5px}

.box-wrapper {
background:#fff;
padding:20px 20px 10px;
border:1px solid #ccc;
border-radius:5px;
text-align:left;
margin-bottom:40px}

.box-wrapper .box {
border-top:0;
padding-top:5px;
margin-bottom:30px}

.box-wrapper .box:last-child {
border:0;
padding-bottom:0;
margin-bottom:0}

.box-wrapper h4 {
color:#EE2953;
font-size:13px;
margin:0;
font-weight:400}

/* RESULTS */

#results {
display:none;
max-width:780px}

#results h2:before {
content:'\f278';
font-size:18px}

#results > h2 + p {
max-width:500px;
margin:20px auto}

#page {
margin:60px auto 40px;
background:#fff;
border:1px solid #ccc;
border-radius:5px;
padding:100px 40px 15px;
text-align:left;
-webkit-box-shadow:0 0 2px 0 rgba(0,0,0,0.25);
box-shadow:0 0 2px 0 rgba(0,0,0,0.25)}

#page h2 {
text-align:center;
color:#333;
margin-bottom:30px}

#page h2:before {
font-family:'Montserrat', arial, san-serif;
content:attr(data-section);
background:#00ADEE;
color:#fff;
font-weight:400;
font-size:20px;
line-height:38px}

#page h3 {
margin-top:30px;
font-weight:700}

#page a {
color:#00ADEE;
font-weight:700;
letter-spacing:-0.025em}

#page a:hover {
color:#74C695}

#page ol {
margin:10px 0 20px}

#page li {
position:relative;
margin-bottom:8px;
padding-left:25px;
list-style-type:none}

#page li:before {
font-family:FontAwesome;
content:'\f00c';
color:#fff;
background:#74C695;
font-weight:normal;
position: absolute;
left:0;
top:2px;
width:16px;
height:16px;
line-height:16px;
font-size:10px;
text-align:center;
border-radius:50%}

.actions-box {
margin-top:60px;
border:1px dashed #EE2953;
padding:30px 25px 15px}

#page h2.actions {
color:#EE2953;
font-size:25px;
margin:0}

#page .actions-box h2:before {
font-family:'FontAwesome';
content:'\f278';
background:#EE2953;
font-size:17px;
line-height:40px}

#page .actions-box .note {
font-size:13px;
margin:5px 0 30px;
text-align:center}

#page .actions-box h4 {
margin:0}

#page .actions-box h4 + p {
margin-top:2px}

#page .actions-box li {
margin:0 0 2px;
padding-left:20px}

#page .actions-box li:before {
content:'\f0f6';
font-size:16px;
border-radius:0;
line-height:1;
background:none;
width:auto;
height:auto;
color:#333}

.actions-box + h2 {
margin-top:150px}

h3.alt {
text-align:center;
color:#EE2953;
font-size:20px;
font-weight:700}

.desc {
background:#F0F1F3;
padding:10px;
margin:15px 0 30px}

#your-other-skills {
display:none}

#your-base-skills li,
#your-other-skills li {
margin-bottom:2px}

.snapshot p:first-child {
text-align:center}

.stats {
margin:30px 0;
display:-ms-flexbox;
-ms-flex-pack:justify;
display:-webkit-flex;
-webkit-justify-content:space-between;
display:flex;
justify-content:space-between}

.stats > div {
width:33%;
padding:0 10px;
text-align:center}

.stats > div:first-child {
width:34%}

.stats > div:first-child {
width:34%}

.stats b {
display:block;
font-size:60px;
line-height:1;
letter-spacing:-0.033em;
color:#EE2953}

.stats > div b:before {
font-family: FontAwesome;
content:'\f19d';
display:inline-block;
margin-right:10px;
-ms-transform:translateY(-10%);
-webkit-transform:translateY(-10%);
transform:translateY(-10%);
font-size:.75em}

.stats > div:nth-child(2) b:before {
display:none}

.stats > div:nth-child(3) b:before {
content:'\f017'}

.stats b span {
font-weight:200}

.stats div div {
margin:0;
font-size:13px}

.source {
text-align:center;
font-size:13px;
margin-bottom:30px}

#page .source a {
font-weight:700;
color:#333}

#page .notes li {
padding-left:18px}

#page .notes li:before {
content:'';
background:#333;
width:8px;
height:8px;
top:6px}

#results .btns a {
padding:11px 15px}

#results .btns a:before {
font-family:FontAwesome;
display:inline-block;
margin-right:7px;
font-weight:normal}

#results .btns a.print:after,
#results .btns a.pdf:after{
content:' report'}

/* FOOTER */

footer {
margin:200px auto 20px;
font-size:11px;
font-weight:300}

/* SHOW REPORT */

#section-2,
#section-3 {
display:none}

.pass-1 #section-2,
.pass-2 #section-3 {
display:block}

.pass-1 #section-1:before,
.pass-1 #section-1:after,
.pass-2 #section-2:before,
.pass-2 #section-2:after {
display:block}

.show-skills #skills,
.show-skills #other-skills,
.show-skills #skills:before,
.show-skills #other-skills:before {
display:block}

.show-results #section-1,
.show-results #section-2,
.show-results #section-3 {
display:none}

.show-results #results {
display:block}

.show-results nav a {
display:inline-block}

/* LARGE TEXT */

body.big {
font-size:20px}

.big .note,
.big #page .actions-box .note {
font-size:15px}

.big h3,
.big h3.alt,
.big h4,
.big .opts a,
.big .box,
.big .split .row p {
font-size:16px}

.big #section-3 .split .row p:first-child {
width:220px}

.big label,
.big label b {
font-size:14px}

.big #results > h2 + p {
max-width:none}

/* INFO */

#info {
display:none;
position:absolute;
padding:5px 10px 7px;
border-radius:5px;
-ms-transform:translate(-50%, 115%);
-webkit-transform:translate(-50%, 115%);
transform:translate(-50%, 115%);
max-width:200px;
transition:.2s;
background:#fff;
font-size:13px;
box-shadow:0 0 2px 2px rgba(0,0,0,0.1);
z-index:100}

#info-tip {
width:15px; 
height:10px;
position:absolute;
bottom:100%;
left:50%;
margin-right:-3px;
overflow:hidden;
-ms-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
transform:translateX(-50%)}

#info-tip:after {
content:'';
position:absolute;
width:10px; 
height:10px; 
background:#fff;
top:5px;
left:50%;
-ms-transform:translateX(-50%) rotate(-45deg);
-webkit-transform:translateX(-50%) rotate(-45deg);
transform:translateX(-50%) rotate(-45deg);
-ms-transform-origin:50% 50%;
-webkit-transform-origin:50% 50%;
transform-origin:50% 50%;
box-shadow:0 0 2px 2px rgba(0,0,0,0.1)}

@media only screen and (device-width:768px) and (-webkit-min-device-pixel-ratio:2),
(device-width:320px) and (-webkit-min-device-pixel-ratio:2){

	input[type="checkbox"]{
	top:0;
	-webkit-transform:scale(.75)}
	
}

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

	body {
	padding:15px}

	#size,
	nav {
	display:none}

	#start-page header {
	display:none;
	position:static;
	-ms-flex-pack:center;
	-webkit-justify-content:center;
	justify-content:center}
	
	#start-page h1,
	#start-page #size {
	display:none}
	
	#start {
    font-size:16px}
    
    #start h2 {
    font-size:40px}
    
    .time {
    margin-top:-5px;
    font-size:12px}
    
	#start .btns {
	margin:20px 0 0}
    
    #start-page footer {
    margin:0;
    padding:20px}
    
    header {
	display:block}
	
	.opts a {
	padding:12px;
	font-size:12px}
	
	.split .row {
	display:block;
	margin:0}
	
	.split .row p,
	.split .row .dd {
	text-align:center!important;
	width:auto!important;
	padding:0}
	
	.split .row p > b {
	font-weight:300}
	
	.split .row p:first-child {
	font-size:14px}
	
	.split .row .dd {
	margin-top:10px}
	
	#section-2 .dropdown {
	-ms-transform:none;
	-webkit-transform:none;
	transform:none}
	
	select,
	.dropdown,
	.dropdown span.selected {
    width:100%}
    
    .dropdown {
    font-size:13px}

   	.split .row .dd {
    margin-bottom:20px}
	
	#content #section-3 br {
	display:none}
	
	.box div {
	width:50%}
	
	#section-3 .dropdowns {
	padding-bottom:0}
	
	.box-wrapper {
	margin:0 -5px;
	padding:15px 15px 10px}
	
	#skills {
	}
	
	#skills h3 {
	line-height:normal}
	
	#skills h3 span {
	display:block}
	
	#results h2 {
    font-size:30px}
	
	#page {
	margin:40px -5px;
	padding:100px 15px 15px}
	
	.actions-box {
	padding:30px 15px 5px}
	
	.desc p:first-child {
	margin-bottom:1em}
	
	#page h4 {
	font-size:15px}
	
	.stats {
	display:block}
	
	.stats > div {
	width:auto!important;
	margin-bottom:15px}
	
	#results .btns a {
	padding:12px;
	font-size:16px}
	
	#results .btns a.print:after,
	#results .btns a.pdf:after{
	content:''}
    
}

/* PRINT */ 

@media print {

   	body {
   	padding:10px;
    color:#333;
    background:#fff}
    
    #content {
    padding:0}
    
    main,
    section {
    width:auto;
    margin:0;
    max-width:none}
    
    b {
    font-weight:400}

    header,
    section > h2,
    section > h2 + p,
    section > .note,
    .btns,
    .btns + p,
    footer {
    display:none!important}
    
    #results {
    max-width:none}
    
    #page {
    border:0;
    margin:0;
    padding:0;
    border-radius:0;
    box-shadow:none}
    
    #page:before {
    display:block;
    font-weight:700;
    line-height:1;
    letter-spacing:-.025em;
    font-size:13px;
    text-align:center;
    margin:0 0 100px;
    content:'Ready, set, go. | Your Work ready plan.'}
    
    #page:after {
    display:block;
    margin-top:30px;
    text-align:center;
    font-size:11px;
    content:'\00a9 Brotherhood of St Laurence'}
    
    #page li:before {
    line-height:14px}
    
    #page .actions-box {
	padding-top:75px}
        
	#page .actions-box li a {
	font-weight:300}
	
	#page .actions-box li:before {
	border:0;
	line-height:16px}

    .stats b {
    font-weight:700}
    
    h2, 
    h3 {
    page-break-inside:avoid;
   	page-break-after:avoid}

    li,
    .snapshot {
    page-break-inside:avoid}
    
	.desc {
    background:none;
    border:1px dashed #000;
    page-break-inside:avoid}
    
}