@charset "UTF-8";
/* register uses application.css for base, then this modifiess */
/* BRANDING COLORS
light blue teal: #14aa9e
dark blue: #24487c
red: #b5292a
*/

html, body {
min-width:340px;
width:100%;
}

#padder {
background:none !important;
}

#container {
background:none !important;
}

.wideBox {
width:98%;
max-width:700px;
min-width:300px;
margin:5px auto;
border:none;
background:#fff;
}
#header {
height:auto;
}

/* register uses centered logo */
#logo {
height:100px;
float:none;
width:100%;
text-align:center;
margin:0;
z-index:99;
}

#logo img {
margin:3px auto 0 auto !important;
height:100px;
width:auto !important;
}

#headertext {
width:100%;
margin:20px 0 10px auto;
float:none;
font-size:1.5em;
z-index:100;
text-align:center;
}

.top_note {
max-width:550px;
margin:-10px auto 20px auto;
border-bottom:1px solid #ccc;
padding-bottom:20px;
}


/* first page form stripe-style fields */
label {
height: 35px;
position: relative;
color: #444;
display: block;
margin-top: 30px;
margin-bottom: 20px;
}

label > span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-weight: 300;
line-height: 32px;
color: #444;
border-bottom: 1px solid #00A4EB;
transition: border-bottom-color 200ms ease-in-out;
cursor: text;
pointer-events: none;
}

label > span span {
position: absolute;
top: 0;
left: 0;
transform-origin: 0% 50%;
transition: transform 200ms ease-in-out;
cursor: text;
width: 108px;
height: 39px;
}

label .field.is-focused + span span,
label .field:not(.is-empty) + span span {
transform: scale(0.68) translateY(-36px);
cursor: default;
background:none;

}

label .field.is-focused + span {
border-bottom-color: #00A4EB;
}

.cardForm {
background:#fff;
border: 1px solid #ddd;
padding:15px;
border-radius: 5px;
color:#555;
margin:0 auto;
max-width:500px;

}

.select {
background: transparent;
font-weight: 300;
border: 1px solid #24487c;
color: #555;
line-height: 36px;
fontFamily: '"Helvetica Neue", Helvetica, sans-serif';
transition: opacity 200ms ease-in-out;
font-size:17px;
border-bottom: 1px solid #24487c !important;
}

.field {
background: transparent;
font-weight: 300;
border: 0;
color: #555;
outline: none;
cursor: text;
display: block;
width: 100%;
line-height: 36px;
padding-bottom: 3px;
transition: opacity 200ms ease-in-out;
font-size:17px;
}

.field:focus {
background: none;
color:#000;
}

.field::-webkit-input-placeholder { color: #999; }
.field::-moz-placeholder { color: #999; }

/* IE doesn't show placeholders when empty focused */
.field:-ms-input-placeholder { color: #999; }

.field.is-empty:not(.is-focused) {
opacity: 0;
}


/* waiting */
.progress{position:relative;height:4px;display:block;width:100%;background-color:#acece6;border-radius:2px;margin:.5rem 0 1rem 0;overflow:hidden}.progress .determinate{position:absolute;top:0;left:0;bottom:0;background-color:#26a69a;-webkit-transition:width .3s linear;transition:width .3s linear}.progress .indeterminate{background-color:#26a69a}.progress .indeterminate:before{content:'';position:absolute;background-color:inherit;top:0;left:0;bottom:0;will-change:left, right;-webkit-animation:indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;animation:indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite}.progress .indeterminate:after{content:'';position:absolute;background-color:inherit;top:0;left:0;bottom:0;will-change:left, right;-webkit-animation:indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;animation:indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;-webkit-animation-delay:1.15s;animation-delay:1.15s}@-webkit-keyframes indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}100%{left:100%;right:-90%}}@keyframes indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}100%{left:100%;right:-90%}}@-webkit-keyframes indeterminate-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}100%{left:107%;right:-8%}}@keyframes indeterminate-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}100%{left:107%;right:-8%}}

/*registration form */
.two_col {
width:46%;
float:left;
margin:10px 2%;
border-bottom:1px solid #eee;
}
.one_col {
width:96%;
float:left;
margin:10px 2%;
border-bottom:1px solid #eee;
}
.reg_field {
border: 0;
border-bottom: 1px solid #24487c !important;
min-width:50px;
font-weight: 300;
color: #555;
cursor: text;
width: 100%;
transition: opacity 200ms ease-in-out;
font-size:16px;
padding: 3px 0 3px 5px;
}
.course_row {
font-size:12px;
padding:3px 10px;
border-bottom:1px solid #ddd;
background:#eee;
}
#Submit {
font-size:30px;
width:30%;
max-width:200px;
margin:10px auto;
}

@media screen and (max-width: 768px) {
.two_col {
font-size:1.5em;
}
}

@media screen and (max-width: 520px) {
.two_col {
width:80%;
float:none;
margin:15px auto;
font-size:1.3em;
}
#Submit {
width:40%;
}
#logo {
height:50px;
}

#logo img {
height:40px;
margin-top:0!important;
}
#headertext {
font-size:1.2em;
}

}
@media screen and (max-width: 428px) {
.two_col {
width:98%;
}
#logo img {
width:30%;
}
}