:root {
	--color-default:white;
}
	
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline; }

    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
      display: block; }
    
    body {
      line-height: 1; }
    
    ol, ul {
      list-style: none; }
    
    blockquote, q {
      quotes: none; }
    
    blockquote::before, blockquote::after, q::before, q::after {
      content: '';
      content: none; }
    
    table {
      border-collapse: collapse;
      border-spacing: 0; }
    
    a {
      text-decoration: none;
      color: var(--color-default);
      cursor: pointer; 
        font-family: 'Montserrat', sans-serif;
    }
    
    button {
      padding: 10px;
      border: none;
      background: none;
      height: auto;
      display: inline-block;
      text-align: center;
      cursor: pointer; }
    html {
		height: 100vh;
      width: 100vw;
      margin: 0;
      padding: 0;
      max-width: 100%;
      box-sizing:border-box;
	    overflow-x: hidden;}
     
body {
      height: 100%;
      width: 100%;
	border:16px solid white;
      margin: 0;
      padding: 0;
      max-width: 100%;
	color:white;
      box-sizing:border-box;
font-family:Montserrat;}

    .wrapper {
        width:100%;
        height:auto;
		display:flex;
		flex-direction:column;
		justify-content:flex-start;
		align-items:center;
    }
    .place--center {
        width:100%;
        height:100%;
		min-width:100vw;
        min-height:100vh;
		display:flex;
        justify-content:center;
        align-items:center;
		position:relative;
    }
.step-form-heading {
	position:absolute;
	top:20%;
	left:128px;
}
.step-form-btn-wrapper {
    min-height: 130px;
	display:flex;
	justify-content:center;
	align-items:center;
	    width: auto;
      cursor:pointer;
	}
    .box--center {
        width: 600px;
        height:auto;
        position: relative;
    }
    .text--center {
        text-align:center;
    }
    h1 {
        font-family: 'Montserrat', sans-serif;
        font-size:1.8em;
        font-weight:200;
        color:var(--color-default);
    }
    .wrap {
      border-right: .05em solid;
      animation: caret 1s steps(1) infinite;
    }
    @keyframes caret {
      50% {
        border-color: transparent;
      }
    }
	
    .arrow--down {
        width:60px;
        height:60px;
        display: flex;
        align-items: center;
        justify-content: center;
        position:absolute;
        cursor:pointer;
		top: 80%;
		animation: bob 1s ease infinite;
    }
    .arrow--down:after {
        content: '';
		display: inline-block;
		width: 25px;
		height: 25px;
    }
    .arrow--down:after {
        border: solid var(--color-default);
        border-width: 0 4px 4px 0;
        transform: rotate(45deg);
        transition: all 0.5s ease;
    }

.wrap:hover {
color:var(--color-default);
}
	@keyframes bob {
      50% {
        margin-top: 5px;
      }
    }
.wrapper+.wrapper {
	margin-top:16px;
}
    .fullwindow {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        min-height:100vh;
        min-width:100vw;
        background-color:hsl(9, 90%, 68%); 
            filter: hue-rotate(0deg);
    }
    .step-form {
       height:100vh; 
       width:800px;
       overflow:hidden;
       display:flex;
       align-items:center;
       justify-content:flex-start;
       flex-direction:column;
       position:relative;
    }
    .step-form-inner {
       height:auto; 
       width:80%;
       overflow:hidden;
       display:flex;
       align-items:center;
       justify-content:flex-start;
       flex-direction:column;
       position:relative;
       margin-top:258px;
    }
    .step-form-row {
        width:auto; 
        margin:64px 0;
        transform: scale(0.8);
        opacity:0.3;
        transition:all 0.5s ease;
    }
    .step-form-column {
        display:block;
        width:auto; 
    }
    .step-form-input,
    .step-form-textbox {
        border:none;
        outline:none;
        background:transparent;
        caret-color: var(--color-default);
        color:var(--color-default);
        pointer-events:none;
		width:500px;
		transition: all 0.5s ease;
    }
    .step-form-input {
        font-size:1.3em;
        display:block;
        height:100px;
    }
    .step-form-textbox {
        border:none;
        font-size:1.3em;
        height:100px;
		    margin-top: 16px;
    }
    .step-form-label {
        font-size:1.3em;
        display:block;
    }
    .step-form-btn {
		opacity:1;
		transition: all 0.5s ease;
		background: var(--color-default);
        width: 120px;
        height: 60px;
        outline: none;
        border: none;
        font-size: 1.3em;
    }
	.step-form-btn:hover {
		border:1px solid white;
		color:white;
		background:transparent;
		transition: all 0.5s ease;
	}
    .selected.step-form-row {
        transform: scale(1);
        opacity:1;
        transition:all 0.5s ease;
    }
    .selected.step-form-row .step-form-input,
    .selected.step-form-row .step-form-textbox {
        pointer-events:all;
    }
    .selected .step-form-input {
        font-size:2em;  
    }
    .step-form-nav {
        width:60px;
        position:absolute;
        right:64px;
        top:50%;
        padding:0;
        margin:0;
		z-index: 1000;
        transform:translateY(-50%);
    }
    .step-form-nav-up,
    .step-form-nav-down,
    .step-form-nav-all {
        width:60px;
        height:60px;
        display: flex;
        align-items: center;
        justify-content: center;
        position:relative;
        cursor:pointer;
    }
    .step-form-nav-up:after,
    .step-form-nav-down:after {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
    }
    .step-form-nav-up:after {
        border: solid var(--color-default);
        border-width: 0 2px 2px 0;
        transform: rotate(-135deg);
        transition: all 0.5s ease;
    }
    .step-form-nav-down:after {
        border: solid var(--color-default);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        transition: all 0.5s ease;
    }
    .step-form-nav-up:hover:after {
        transform: rotate(-135deg) scale(1.5);
        transition: all 0.5s ease;
    }
    .step-form-nav-down:hover:after {
        transform: rotate(45deg) scale(1.5);
        transition: all 0.5s ease;
    }
.hideme {
opacity:0;
transition: all 1s ease;}
.fadeIn {
opacity:1;
transition: all 1s ease;
}
.page-bottom {
    border-bottom: 16px solid white;
}
.step-form-error {
    position: absolute;
    top: 28%;
    left: 128px;
	transition: all 0.5s ease;
}
.step-form-row-all,
.selected.step-form-row-all {
    margin: 0;
    transform: scale(0.8);
    opacity: 1;
	transition: all 0.5s ease;
}
.step-form-row-all .step-form-input,
.step-form-row-all .step-form-textbox,
.selected.step-form-row-all .step-form-input,
.selected.step-form-row-all .step-form-textbox {
border-bottom:1px solid var(--color-default);
	pointer-events:all;
	transition: all 0.5s ease;
}
.step-form-row-all .step-form-input {
font-size:1.3em;
	transition: all 0.5s ease;
}

.step-form-all {
overflow:auto;
	transition: all 0.5s ease;
}

.expand-bottom {
    height:120vh;
	transition: all 0.5s ease;
}
.overflow-show {
	overflow:auto;
	transition: all 0.5s ease;
}
.step-form-inner-all {
	margin-top:258px !important;
	transition: all 0.5s ease;
}