@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
* {
	margin: 0;
	padding: 0;
	cursor: default;
	box-sizing: border-box;
	cursor: default;
	outline: none;
}

*:focus {
	outline: none;
}

::-moz-selection {
	color: hsl(0, 100%, 60%);
}

::selection {
	color: hsl(0, 100%, 60%);
}

.bdy {
	font-family: Montserrat, sans-serif;
	margin: 2rem;
	color: hsl(0, 100%, 23%);
    background: hsl(0, 0%, 100%);
    height: 900px;
    overflow: hidden;
}

#step {
	position: fixed;
	z-index: 0;
	bottom: 0;
	right: 1vw;
	font-size: 60vh;
	font-weight: 700;
	color: hsl(0, 70%, 56%);
	-webkit-transition: 2s;
	transition: 2s;
}

#step::before {
	content: 'Step';
	position: absolute;
	z-index: 1;
	top: 35%;
	right: 2vw;
	font-size: 20vh;
	font-weight: 700;
	color: hsl(0, 12%, 27%);
}

#step::after {
	content: 'of 4';
	position: absolute;
	z-index: 1;
	top: 65%;
	left: -2rem;
	font-size: 10vh;
	font-weight: 700;
	color: hsl(0, 63%, 37%);
}

.sleep {
	opacity: 0;
}

.rest {
	height: 0px;
	opacity: 0;
}

.wake {
	opacity: 1;
}

p {
	position: relative;
	z-index: 2;
	font-family: Montserrat, sans-serif;
	font-size: 1.5rem;
	line-height: 2rem;
	height: 5rem;
	-webkit-transition: 1s ease-out .5s;
	transition: 1s ease-out .5s;
}

#type {
	height: auto;
	margin: 2rem 0;
}

.collapsed {
	height: 0;
}

[contenteditable] {
	color: hsl(0, 10%, 50%);
	border: 0 solid hsl(0, 10%, 50%);
	border-width: 0 .1rem;
	padding: 0 1em;
	-webkit-transition: 1s ease-out;
	transition: 1s ease-out;
}

[contenteditable]:focus {
	color: hsl(0, 100%, 26%);
	border-color: hsl(0, 10%, 50%);
}

input[type=button],
input[type=submit] {
	font-family: Montserrat, sans-serif;
	font-size: 2rem;
	font-weight: 700;
	color: hsl(0, 0%, 100%);
	background: rgb(185, 69, 69);
	box-shadow: 0 0 0 hsl(0, 12%, 5%);
	-webkit-transition: 1s ease-out;
	transition: 1s ease-out;
}

input[type=button]:hover {
	top: -.5rem;
	color: hsl(0, 0%, 100%);
	border: .2rem solid hsl(0, 100%, 26%);
	box-shadow: 0 .5rem 0.5rem hsl(330, 10%, 5%);
}

input[type=text],
input[type=email],
input[type=phone] {
	font-family: Montserrat, sans-serif;
	font-size: 1.5rem;
	line-height: 2.5rem;
	color: hsl(0, 100%, 26%);
	background: transparent;
	border: 0 solid hsl(0, 10%, 25%);
	border-width: 0 0 .1rem 0;
	width: 3em;
	-webkit-transition: 1s ease-out;
	transition: 1s ease-out;
}

.click {
	cursor: pointer;
}

body.wait .click {
	cursor: default;
}

.pulse {
	-webkit-animation: pulse 2s infinite linear;
	        animation: pulse 2s infinite linear;
}

.pulse:hover {
	-webkit-animation: none;
	        animation: none;
}

/* Small Mobile :320px. */
@media (max-width: 767px) {
	#step {
	  visibility: hidden;
	  clear: both;
	  float: left;
	  display: none;
	}
	#step::before{
		visibility: hidden;
	  clear: both;
	  float: left;
	  display: none;
	}
	#step::after{
		visibility: hidden;
	  clear: both;
	  float: left;
	  display: none;
	}
}

/* Large Mobile :480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) {
#step {
	visibility: hidden;
	clear: both;
	float: left;
	display: none;
}
#step::before{
	visibility: hidden;
	clear: both;
	float: left;
	display: none;
}
#step::after{
	visibility: hidden;
	clear: both;
	float: left;
	display: none;
}
}

@-webkit-keyframes pulse {
	0% {
		opacity: .25;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: .25;
	}
}

@keyframes pulse {
	0% {
		opacity: .25;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: .25;
	}
}