body {
	background-color: #F6F7F8; font-family: Roboto, Helvetica, Arial; margin: 0px; padding: 0px;
	backface-visibility: hidden; height: 100%; position: absolute; width: 100%; overflow-x: hidden; height: 35000px
}
body.loaded { height: 100%; overflow: auto }

p, h1, h2, h3, h4 { margin: 0px; padding-bottom: 0.6em; }

input.text, textarea { border: 1px solid #EEE; padding: 15px 15px; transition: all 0.3s; width: 100%; box-sizing: border-box; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; line-height: 1.4em; }
input.text:disabled, textarea:disabled { background-color: #FAFAFA; color: #9A9A9A }
input.big { font-size: 20px; font-weight: 100; font-family: Roboto, Helvetica, Arial }
input.search { border-radius: 50px; padding-left: 30px; margin-bottom: 30px }
input.text:focus, textarea:focus { outline: none; border: 1px solid #c6caff }
textarea.autosize { overflow: hidden; transition: border 0.3s, background-color 0.3s, color 0.3s }

a { text-decoration: none; color: #5d68ff }
a:hover { text-decoration: underline; }
a:active { text-decoration: none }
a.link:active { background-color: rgba(0,0,0,0.05); outline: 4px solid rgba(0,0,0,0.05); transition: none }

h1 { font-size: 34px; line-height: 34px }
h1, h2, h3 { font-weight: lighter }
h2 a.link { font-size: 13px; margin-left: 10px; font-weight: normal; margin-top: 8px; }
h2.sep { border-top: 1px solid #EEE; padding-top: 20px }
h5 { font-weight: normal; color: rgba(0, 0, 0, 0.5) }

.center { width: 960px; margin-left: auto; margin-right: auto; }

/* Content */
#Content { margin-top: 30px; margin-bottom: 50px }

.content-signup { text-align: center }
.content-signup .button-certselect { margin: 20px; display: inline-block; }

/* Cols */
.col-left, .col-center, .col-right { width: 66%; display: inline-block; vertical-align: top; box-sizing: border-box }
.col-center { padding-left: 5px; }
.col-left, .col-right { width: 33%; padding-left: 20px; margin-top: 90px; transition: all 0.3s }
.col-left { padding-left: 0px; padding-right: 20px; margin-top: 0px; transition: all 0.3s }
.col-left.faded { opacity: 0.3; filter: grayscale(1); }

/* Card */
.cards { margin-right: -20px }
.card {
	border-radius: 4px; box-shadow: 0px 1px 11px #EAEAEA; background-color: white; width: 33%; width: calc(33% - 10px);
	box-sizing: border-box; margin-right: 10px; margin-bottom: 10px; min-width: 300px; display: inline-block;
}

/* Avatar */
.avatar { width: 50px; height: 50px; background: #EEE; border-radius: 100px; display: inline-block; background-size: cover; background-position: center center; }
.avatar.empty { vertical-align: top; font-size: 11px; line-height: 51px; text-align: center; text-decoration: none; color: #666; font-weight: bold; }

/* More */
.more { width: 100%; display: block; clear: both; text-align: center; padding: 20px; box-sizing: border-box; box-shadow: inset 0px 30px 25px -40px #5d68ff }
.more.small {  font-size: 14px; box-shadow: none; padding: 10px }

/* Animate */
.animate { transition: all 0.3s ease-out !important; }
.animate-back { transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; }
.animate-inout { transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1) !important; }
.animate-inback { transition: all 0.6s cubic-bezier(0.6, -0.28, 0.735, 0.045) !important; }
.animate-in { transition: all 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335) !important; }
.animate-out { transition: all 0.6s ease-out !important; }

@keyframes flash-in {
	  0% { transform: scale(1.5); opacity: 0 }
	 80% { transform: scale(1); opacity: 1 }
	100% { transform: scale(1); opacity: 0 }
}

@keyframes flash-in-big {
	  0% { transform: scale(1.2); opacity: 0 }
	 80% { transform: scale(1); opacity: 1 }
	100% { transform: scale(1); opacity: 0 }
}

@keyframes flash-out {
	  0% { transform: scale(1); opacity: 1 }
	100% { transform: scale(1.5); opacity: 0 }
}
@keyframes flash-out-big {
	  0% { transform: scale(1); opacity: 1 }
	100% { transform: scale(1.2); opacity: 0 }
}

@keyframes bounce {
	  0% { transform: translateY(0); opacity: 1 }
	100% { transform: translateY(-3px); opacity: 0.7 }
}