/*
Theme Name: Invisible Office Hours
Theme URI: https://invisibleofficehours.com
Version: 4.0
Description: Custom styles for IOH
Author: Paul Jarvis
Author URI: https://pjrvs.com
License: For us only. SERIOUSLY.

black					#2c2d2e	
grey						#585b5c
light text			#a2a7a8	
light					#d1d8da
lightest				#edeff0

blue						#147ef2 / #116ed3
purple					#7156e5 / #634bc8
pink						#f9415d / #d93951
yellow					#ffbb04 / #dea303 / #fff5da
teal						#32ddbb / #2cc1a3 / #b7f3e7

12px spacer: 48, 108, 168, 228, 288, 348, 408, 468, 528, 588, 648, 708, 768, 828, 888, 948, 1008, 1068, 1128, 1188, 1248, 1308, 1368

font sizes 	112 56 45 34 24 20 18 16 14 12
font faces: "acumin-pro" 300, 400, 600

*/




/* reset, yo */
a,hr{padding:0}a,button,input,select,textarea{margin:0}article,aside,details,figure,footer,header,hr,main,nav,section,summary{display:block}abbr,address,article,aside,audio,b,blockquote,body,body,div,caption,cite,code,dd,del,details,dfn,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:0 0}input[type=checkbox],th{vertical-align:bottom}html{box-sizing:border-box;overflow-y:scroll}*,:after,:before{box-sizing:inherit}embed,img,object{max-width:100%}ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{font-size:100%;vertical-align:baseline;background:0 0}del{text-decoration:line-through}abbr[title],dfn[title]{}th{font-weight:600}td{fvertical-align:top}hr{height:1px;border:0;border-top:1px solid #ccc;margin:1em 0}input,select{vertical-align:middle}pre{white-space:pre;white-space:pre-wrap;white-space:pre-line;word-wrap:break-word}input[type=radio]{vertical-align:text-bottom}.ie7 input[type=checkbox]{vertical-align:baseline}.ie6 input{vertical-align:text-bottom}input,select,textarea{font:99% sans-serif}table{border-collapse:separate;border-spacing:0;font:100%}strong{font-weight:600}td,td img{vertical-align:top}sub,sup{font-size:75%;line-height:0;position:relative}sup{top:-.5em}sub{bottom:-.25em}code,kbd,pre,samp{font-family:monospace,sans-serif}.clickable,button,input[type=button],input[type=file],input[type=submit],label{cursor:pointer}button,input[type=button]{width:auto;overflow:visible}.ie7 img{-ms-interpolation-mode:bicubic}.clearfix:after{content:" ";display:block;clear:both}


















/* = html5 ----------------------- */

::-moz-selection { background: #d1d8da; text-shadow: none; }
::selection { background: #d1d8da; text-shadow: none; }

::-webkit-input-placeholder { color: #a2a7a8; padding-top: 2px; }
::-moz-placeholder { color: #a2a7a8; } 
:-ms-input-placeholder { color: #a2a7a8; }
input:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #fff inset; }

.row:after, .row:before, .clearfix:after, .clearfix:before { content: " "; display: table; }
.clearfix:after, .row:after { clear:both; }

.wf-loading * { visibility: hidden; }










/* = structure ------------------- */

html, body { min-height: 100%; height: 100%; font: 300 20px/1.5 "acumin-pro", sans-serif; color: #585b5c; background: #2cc1a3; }
body { padding: 12px; letter-spacing: -0.02em; }

section { clear: both; float: none; display: block; position: relative; width: 100%; text-align: left; background: #fff; margin-bottom: 24px; }
.wrap { text-align: left; padding: 12px; }
.main, .sidebar { margin-bottom: 24px; }

#success { margin-top: 24px; background: #585b5c; color: #fff; padding: 12px; }









/* = typography ------------------ */

h1, h2, h3, h4 { font-weight: 300; margin-bottom: 24px; }

h1 { color: #2cc1a3; font-weight: 600; margin-bottom: 48px; }
	h1 span { font-weight: 300; color: #a2a7a8; }
h2 { }
	
h3 { font-weight: 600; font-size: 20px; }
	
h4 { }	
	
p, ul, ol, blockquote { padding-bottom: 24px; }

a { text-decoration: none; padding: 2px 0; transition: ease box-shadow .4s; color: #2cc1a3; box-shadow: inset 0 -3px 0 rgba(30,195,175,.5); }
a:hover { box-shadow: inset 0 -1px 0 rgba(34,224,201,.5); } 

	
strong, b { font-weight: 600; }
em, i { }

small { font-size: 14px; color: #a2a7a8; display: block; margin: 4px 0; letter-spacing: .02em; }

table { width: 100%; margin: 0; padding: 8px; border: none; background: #f7f8f8; font-size: 16px; }
	th { padding: 4px; border-bottom: 2px solid #fff; }
	td { padding: 4px; vertical-align: middle; }
/* 	td:first-child, th:first-child, td:nth-child(2), th:nth-child(2) { text-align: right; } */
	td a { box-shadow: none; }
	
hr { border-top: 1px solid red; }











/* = forms ---------------------- */

form { }

form p { padding: 24px 0 0 0; }

fieldset { margin: 0; padding: 0; }
label { font-size: 16px; display: block; font-weight: 600; }
.half { width: 50%; display: block; float: left; margin-bottom: 12px;  }

legend { font-size: 14px; color: #a2a7a8; display: block; margin: 32px 0 12px 0; clear: both; letter-spacing: .02em; }

input, select, textarea, button, .button { font: 300 16px/1.4 "acumin-pro", sans-serif; vertical-align: middle; border: none; outline: none; -webkit-appearance: none; padding: 8px; color: #585b5c; width: 100%; margin-bottom: 4px; box-shadow: none; box-sizing: border-box; cursor: pointer; background: #fff; border: 2px solid #d1d8da; }

.half input { width: 90%; }

button, .button { padding: 8px 24px; color: #fff; transition: ease opacity .4s; background: #2cc1a3; border: 2px solid #2cc1a3; font-weight: 600; }
button:hover, .button:hover { opacity: .65; }

#payment-form button { margin-top: 24px; background: #2c2d2e; border: 2px solid #2c2d2e; }

.StripeElement { box-sizing: content-box; margin-bottom: 12px; border: 2px solid #d1d8da; padding: 15px; font: 300 12px/1.4 "acumin-pro", sans-serif; color: #585b5c; background: #fff; }
.StripeElement--invalid { border-color: #f9415d; }







/* = common ---------------------- */

.clock-wrapper { background: #7156e5; color: #fff; padding: 12px 12px 20px 12px; }
#clock-small { background: #32ddbb; color: #fff; padding: 8px 8px 12px 8px; width: 100%; display: block; }

#clock { font-size: 56px; font-weight: 300; letter-spacing: -1px; line-height: 1; }
	#clock span.mins { }
	#clock span.secs { }


@-webkit-keyframes rotate-forever {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes rotate-forever {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate-forever {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.loading-spinner {
  -webkit-animation-duration: 0.75s;
  -moz-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: rotate-forever;
  -moz-animation-name: rotate-forever;
  animation-name: rotate-forever;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  animation-timing-function: linear;
  height: 30px;
  width: 30px;
  border: 8px solid #2cc1a3;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
}

canvas {
  display: block;
  position: fixed;
  top: 0px;
  z-index: 1;
  pointer-events: none;
}


/* = queries ---------------------- */


@media (min-width: 808px) {
	input, select, textarea, button, .button { width: auto; margin: 0; }
	.half input { width: 96%; }
	input.email { width: 348px; }
	.StripeElement { width: 424px; }

	.wrap { padding: 24px 24px 0 24px; }
	.main { width: 468px; margin-right: 48px; float: left; }
	.sidebar { width: 228px; float: left; }

}







@media (min-width: 1008px) {
	body { padding: 24px; }

	.main { width: 588px; }
	.sidebar { width: 288px; }

	.StripeElement { width: 543px; }

}







@media (min-width: 1308px) {
	.wrap { padding: 90px 90px 0 90px; }
	.main { width: 648px; margin-right: 90px; }
	.sidebar { width: 348px; }
	.StripeElement { width: 601px; }
	#clock { font-size: 72px; }

}







@media (min-width: 1608px) {
}

@media (min-width: 1908px) {
}