#content {
	padding:0 0;
	
}
.divider {
	float:left;
	width:100%;
	margin:20px 0;
}


header {
	float:left;
	width:100%;
	padding:100px 0 0 0;
	margin-bottom:10px;
	.title {
		font-size:29px;
		color:#606b6a;
		.version {
			font-size:16px;
		}
	}
	p {
		color:#929a99;
		font-size: 15px;
		letter-spacing: -1px;
	}
	.author {
		float:right;
		text-align: right;
	}
	ul.social {
	    float: left;
	    width: 100%;
	    margin: 0;
	    li {
		    float: right;
		    display: inline-block;
		    text-align: right;
		    margin-left: 10px;
		    a { 
		    	&:hover { 
		    		color:#000;
		    	}
		    }
		}

	}
}


a.button {
    float: left;
    width: 100%;
    padding: 30px 60px;
    background: #000;
    color: #fff;
    margin: 20px 0;
    position:relative;
    overflow: hidden;
    .bg {
    	width:0%;
    	height:100%;
    	position:absolute;
    	top:0;
    	left:0;
    	background:#fff;
    	z-index:1;
    	transition: .4s cubic-bezier(.19,1,.22,1);
    }
    .content {
    	float:left;
    	width:100%;
    	position:relative;
    	z-index:2;
    }
    &.coffee {
    	padding: 30px 0;
    	text-align:center;
    	background:#afafaf;
    }

    i {
	    font-size: 94px;
	    position: absolute;
	    right: -19px;
	    top: 15px;
	    opacity: 0.2;
	    z-index:2;
	    transition: .5s cubic-bezier(.19,1,.22,1);
	    transform: translateY(0%);

	}

	&:hover {
		color:#000;
		.bg {
			width:100%;
		}
		i {
			color:#000;
			font-size: 54px;
		    right: 40px;
		    top: 50%;
		    opacity:1;
		    transform: translateY(-50%);
		}
	}
    /* border-radius: 3px; */
}


#hero {
	float:left;
	width:100%;
	span.to {
	    text-align: center;
	    float: left;
	    width: 100%;
	    font-style: italic;
	    font-size: 24px;
	}
}

#documentation {
	float:left;
	width:100%;
	margin-top:80px;
	font-family:Inconsolata;
	.sections {
		float:left;
		width:100%;
		padding: 50px 0;
    	border-top: 2px solid #ddd;
    	&:last-child {
    		padding-bottom:0;
    	}
		> p {
				font-size: 18px;
				margin: 20px 0 30px 0 ;
				float:left;
				width:100%;
				letter-spacing: -1px;
			}
	}
	table thead, table tbody, table tbody tr, table tfoot {
		border:1px solid #ddd;
	}
	tbody {
		tr {
			td {
				&:first-child {
					font-size:14px;
					padding:0 10px;
				}
				&:last-child {
					font-size:14px;
					.code {
						float:left;
						width:100%;
						margin-top:2px;
						margin-left:-2px;
						span {
							background : #e5e5e5;
							padding:2px 5px;
							border-radius:2px;
							font-size:12px;
						}
					}
				}
			}
		}
	}
}

span.code{
	
		background : #e5e5e5;
		padding:2px 5px;
		border-radius:2px;
		font-size:12px;
	
}
.steps {
	ol {
		> li {
			float:left;
			width:100%;
			margin-bottom:30px;
			color:#525252;

			.step_name {
				margin-bottom:10px;
			}
			pre {
				font-size:11px;
			}
			code {
				float:left;
				width:100%;
			}
		}
	}
	.note {
		font-size:12px;
	}
}

.output {
    padding: 10px 20px 30px 20px;
    background: #b9b9b9;
    float: left;
    width: 100%;
    margin-bottom: 20px;
}

.output > span {
    margin-bottom: 16px;
    float: left;
    width: 100%;
    letter-spacing: 6px;
    text-transform: uppercase;
    font-size: 11px;
}

footer {
	padding:50px 0;
	float:left;
	width:100%;
	p {
		font-size:12px;
		text-align:center;
		color:#8d8f94;
		i {
			
		}
	}
}