@import url(https://fonts.googleapis.com/css?family=Cabin:400);

.webdesigntuts-workshop form {
	background: #111;
	background: linear-gradient(#1b1b1b, #111);
	border: 1px solid #000;
	border-radius: 5px;
	box-shadow: inset 0 0 0 1px #272727;
	display: inline-block;
	font-size: 0px;
	margin: 150px auto 0;
	padding: 20px;
	position: relative;
	z-index: 1;
}

.webdesigntuts-workshop input:focus {
	animation: glow2 2500ms ease-out infinite alternate;
	background: #222922;
	background: linear-gradient(#333933, #222922);
	outline: none;
}

.webdesigntuts-workshop button:hover,
.webdesigntuts-workshop button:focus {
	background: #292929;
	background: linear-gradient(#393939, #292929);
	color: #ff0000;
	outline: none;
}

.webdesigntuts-workshop button:active {
	background: #292929;
	background: linear-gradient(#393939, #292929);
	box-shadow: 0 1px 0 #000, inset 1px 0 1px #222;
	top: 1px;
}

.button-glow-hover:hover,
.button-glow-hover button:focus {
	animation: glow2 1s ease-out infinite alternate;
}

@keyframes glow {
    0% {
	border-color: red;
		box-shadow: 0 0 2px rgba(255,0,0,.2), inset 0 0 5px rgba(255,0,0,.1), 0 2px 0 darkred;
    }	
    100% {
		border-color: red;
		box-shadow: 0 0 12px rgba(255,0,0,.6), inset 0 0 10px rgba(255,0,0,.4), 0 2px 0 #000;
    }
}

@keyframes glow2 {
   100% {
	border-color: red;
		box-shadow: 0 0 1px rgba(255,0,0,.2), inset 0 0 5px rgba(255,0,0,.1), 0 1px 0 darkred;
    }	
    100% {
		border-color: red;
		box-shadow: 0 0 12px rgba(255,0,0,.6), inset 0 0 10px rgba(255,0,0,.4), 2px 0 #000;
    }
}

@keyframes glowBottom {
   100% {
		border-color: lightblue;
		border-bottom: 0 0 1px rgba(255,0,0,.2), inset 0 0 5px rgba(255,0,0,.1), 0 1px 0 darkred;
    }	
    100% {
		border-color: lightblue;
		border-bottom: 2px solid 0 0 12px rgba(255,0,0,.6), inset 0 0 10px rgba(255,0,0,.4), 2px 0 darkred;
    }
}

.seperator2 {
	border-radius:50%;
	box-shadow: 0 0 15px;
	border-style: dashed;
	border-width: thick;
    animation: rotate 200s infinite linear;
    -webkit-animation: rotate 200s infinite linear;
}

.seperator3 {
	border-radius:50%;
	box-shadow: 0 0 15px;
	border-style: double;
	border-width: thick;
    animation: rotate 200s infinite linear;
    -webkit-animation: rotate 200s infinite linear;
}

.cc-animate2{
	-webkit-transform:translateY(0);transform:translateY(0)
	position:absolute;
	content:hidden;
}
.cc-animate2:hover{
	-webkit-transform:translateX(2em);transform:translateX(2em)
}

.seperator {
    height: 1px;
    animation: rotate 20s infinite linear;
    -webkit-animation: rotate 20s infinite linear;
}

@-webkit-keyframes rotate {
  from {
    background-position: -3000px;
  }
  to { 
    background-position: 0px;
  }
}

@keyframes rotate {
  from {
    background-position: -3000px;
  }
  to { 
    background-position: 0px;
  }
}

.gradient {
background: rgb(48,255,144); /* Old browsers */
background: -moz-linear-gradient(left, rgba(48,255,144,1) 0%, rgba(237,45,237,1) 25%, rgba(201,152,38,1) 50%, rgba(48,255,230,1) 75%, rgba(48,255,144,1) 100%,rgba(48,255,230,1) 75%,rgba(201,152,38,1) 50%,rgba(237,45,237,1) 25%, rgba(48,255,144,1) 0%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(48,255,144,1)), color-stop(25%,rgba(237,45,237,1)), color-stop(50%,rgba(201,152,38,1)), color-stop(75%,rgba(48,255,230,1)), color-stop(100%,rgba(48,255,144,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(48,255,144,1) 0%,rgba(237,45,237,1) 25%,rgba(201,152,38,1) 50%,rgba(48,255,230,1) 75%,rgba(48,255,144,1) 100%,rgba(48,255,230,1) 75%,rgba(201,152,38,1) 50%,rgba(237,45,237,1) 25%, rgba(48,255,144,1) 0%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left  rgba(48,255,144,1) 0%,rgba(237,45,237,1) 25%,rgba(201,152,38,1) 50%,rgba(48,255,230,1) 75%,rgba(48,255,144,1) 100%,rgba(48,255,230,1) 75%,rgba(201,152,38,1) 50%,rgba(237,45,237,1) 25%, rgba(48,255,144,1) 0%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(48,255,144,1) 0%,rgba(237,45,237,1) 25%,rgba(201,152,38,1) 50%,rgba(48,255,230,1) 75%,rgba(48,255,144,1) 100%,rgba(48,255,230,1) 75%,rgba(201,152,38,1) 50%,rgba(237,45,237,1) 25%, rgba(48,255,144,1) 0%); /* IE10+ */
background: linear-gradient(to right, rgba(48,255,144,1) 0%,rgba(237,45,237,1) 25%,rgba(201,152,38,1) 50%,rgba(48,255,230,1) 75%,rgba(48,255,144,1) 100%,rgba(48,255,230,1) 75%,rgba(201,152,38,1) 50%,rgba(237,45,237,1) 25%, rgba(48,255,144,1) 0%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#30ff90', endColorstr='#30ff90',GradientType=1 ); /* IE6-9 */
}

.gradient2 {
background: rgb(48,255,144); /* Old browsers */
background: -moz-linear-gradient(left, rgba(48,255,144,1) 0%, rgba(237,45,237,1) 25%, rgba(201,152,38,1) 50%, rgba(48,255,230,1) 75%, rgba(48,255,144,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(48,255,144,1)), color-stop(25%,rgba(237,45,237,1)), color-stop(50%,rgba(201,152,38,1)), color-stop(75%,rgba(48,255,230,1)), color-stop(100%,rgba(48,255,144,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(48,255,144,1) 0%,rgba(237,45,237,1) 25%,rgba(201,152,38,1) 50%,rgba(48,255,230,1) 75%,rgba(48,255,144,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(48,255,144,1) 0%,rgba(237,45,237,1) 25%,rgba(201,152,38,1) 50%,rgba(48,255,230,1) 75%,rgba(48,255,144,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(48,255,144,1) 0%,rgba(237,45,237,1) 25%,rgba(201,152,38,1) 50%,rgba(48,255,230,1) 75%,rgba(48,255,144,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(48,255,144,1) 0%,rgba(237,45,237,1) 25%,rgba(201,152,38,1) 50%,rgba(48,255,230,1) 75%,rgba(48,255,144,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#30ff90', endColorstr='#30ff90',GradientType=1 ); /* IE6-9 */
}