@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');
@import url('https://fonts.googleapis.com/css?family=Inconsolata');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');

body{
	font-family: 'Lato', sans-serif;
	overflow-y: scroll;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
}

bold{
	font-weight: 600;
	color: #000;
}

.header{
	background-color: #000;
	margin: 0;
}

.row-white{
	background-color: #FFFFFF;
	height: 100%;
	width: 100%;
}

.padding-box{
	padding-right: 25%;
	padding-left: 25%;
}

.row-gray{
	background-color: #FFF;
	height: 100%;
	width: 100%;
}

.stepNumber{
	color: #adabab;
	font-size: 16px;
	font-weight: 500;
}

.tutorialTitle{
	margin-top: 0;
	padding-top: 10%;
	font-weight: 700;
	font-size: 64px;
	padding-left: 5%;
	font-weight: 300;
	color: #fff;
}

.tutorialDescription{
	font-weight: 300;
	font-size: 24px;
	padding-left: 6%;
	color: #7c7c7c;		
	padding-bottom: 5%;	
	line-height: 1.5;
}

.stepTitle{
	padding-top: 20%;
	font-weight: 700;
	font-size: 24px;
}

.stepParagraph{
	padding-top: 0.5%;
	padding-bottom: 4%;
	font-size: 18px;
	font-weight: 300;
	color: #000;
	line-height: 1.5;
}

.stepImage{
	padding-top: 2%;
	padding-bottom: 10%;
	width: 100%;
}

.codeSnippet{
	background-color: #000;
}

.code{
	color: #F3F3F3;
	font-size: 16px;
	font-family: 'Inconsolata', monospace;
	padding-left: 25%;
	padding-right: 25%;
	padding-top: 8%;
	padding-bottom: 8%;
}

footer{
	padding: 2%;
	background-color: #FFF;
}

.codeTerm{
	color:  #7d3c98;
	font-weight: 400;
}

.codeTermRed{
	color:  #e74c3c;
	font-weight: 400;
}

.giphy-embed{
	border-radius: 5px;
}

.moreTutorials{
	padding-bottom: 1%;
	padding-right: 2%;
	text-align: right;
}

.moreTutorialsLink{
	text-decoration: none;
	color:   #dedede;
	font-weight: 400;
	font-family: 'Lato', sans-serif;
	font-size: 18px;
}