/************************************
************** CONTENTS *************
*************************************
******** Search for $ + name ********
********   for easy finding  ********
*************************************
* A. $Colors						*
* B. $Resets						*
* B1. $Clearfix						*
* C. $Selection						*
**** *** *** *** *** *** *** *** ****
#### ### ### ### ### ### ### ### ####
##          Header & index         ##
#### ### ### ### ### ### ### ### ####
**** *** *** *** *** *** *** *** ****
* 1. $Elements						*
* 2. $Header						*
* 2.1 $Header-menu					*
* 3. $Container						*
** 3.1 $Social						*
* 4. $Work							*
* 5. $Personal						*
** 5.1 $Recentblog					*
** 5.2 $Recentcomment				*
**** *** *** *** *** *** *** *** ****
#### ### ### ### ### ### ### ### ####
##   	 Content   	   ##
#### ### ### ### ### ### ### ### ####
**** *** *** *** *** *** *** *** ****
* 6. $About							*
** 6.1 $Skills						*
* 7. $Blog							*
** 7.1 $BlogArchive					*
** 7.2 $BlogComments				*
* 8. $Projects						*
* 9. $Contact						*
**** *** *** *** *** *** *** *** ****
#### ### ### ### ### ### ### ### ####
##		Special		   ##
#### ### ### ### ### ### ### ### ####
**** *** *** *** *** *** *** *** ****
* I.	$Wide						*
* II.	$Narrow						*
* III.	$404						*
*************************************
************************************/

/* A. $Colors - colors for easy reference
34495f	dark blue background + borders
1abc9f	aqua highlight, background, link color
666	dark gray font color
ecf0f1	comments > p background color, footer narrow links background
bdc3cf	light gray font color, footer links, blog-info
*/



/* B. $Resets - no underline links, no margin and padding, no bullets for lists, default text, background color and font */

* {
	background: inherit;
	color: inherit;
	font-family: "Lato", sans-serif;
	font-weight: 400;
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-decoration: none;
}

button, img { border: 0; }
button { cursor: pointer; }



	/* B1. $Clearfix - because well, damn those floats when you're done with 'em */

	.cf:before, .cf:after { content: " "; display: table; }
	.cf:after { clear: both; }
	.cf { *zoom: 1; } /* IE 6 + 7 */



/* C. $Selection - selection colours because highlighting doesn't need to be ugly **/

::selection { background: inherit; color: #1abc9f; }
::-moz-selection { background: inherit; color: #1abc9f; }

.header-menu .menu .active a::selection,
.header-menu .menu a:hover::selection,
.blog-comments .list-errors li::selection { background: #1abc9f; color: #f9f9f9; }

.header-menu .menu .active a::-moz-selection,
.header-menu .menu a:hover::-moz-selection,
.blog-comments .list-errors li::-moz-selection { background: #1abc9f; color: #f9f9f9; }


/* 1. $Elements - styling of html default elements */

body { background: #f9f9f9; border-bottom: 8px solid #34495f; color: #666; }
a { -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; }
a:hover { color: #1abc9f; }
.ease { -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; }



/* 2. $Header */

.header { width: 100%; }
	.header-top { background: #34495f; min-height: 8px; }



	/* 2.1 $Header-menu */

	.header-menu { background: #f9f9f9; min-height: 80px; }

	.header-menu .menu {
		background: inherit;
		font-size: 0.9em;
		max-width: 1150px;
		margin: 0 auto;
		padding: 0 8px;
	}

		.header-menu .menu .menu-list { float: right; margin: 19px 0 0 0; }

			.header-menu .menu .menu-list li {
				display: inline-block;
				font-size: 1em;
				margin: 0 3px;
				padding-top: 10px;
				text-transform: uppercase;
			}

				.header-menu .menu .menu-list a { padding: 8px 15px; }

					.header-menu .menu .menu-list a:hover,
					.header-menu .menu .active a {
						background-color: #1abc9f;
						border-radius: 3px;
						color: #f9f9f9;
					}

		.header-menu .logo {
			color: #34495f;
			font-size: 2em;
			font-weight: 700;
			letter-spacing: 1px;
			line-height: 76px;
			width: 200px;
		}

			.header-menu .logo span { color: #1abc9f; font-weight: 700; }

	/* End header-menu */



/* 3. $Container */

	.container { 
		background: inherit;
		font-size: 0.9em;
		max-width: 1150px;
		margin: 0 auto;
		padding: 60px 8px; }

		.container .intro { float: left; }
			.container .intro h1{ letter-spacing: 1px; }
			.container .intro p { padding: 20px 0; }



	/* 3.1. $Social */

			.container .social h2 { letter-spacing: 1px; text-transform: uppercase; }
				.container .social .social-list { margin-top: 20px; }
					.container .social .social-list li { display: inline; margin: 0 3px; }
						.container .social .social-list .disabled {  opacity: 0.3; }

						.container .social .social-list li a {
							border-radius: 2px;
							display: inline-block;
							height: 38px;
							overflow: hidden;
							position: relative;
							text-indent: 100%;
							width: 42px;
							z-index: 99999;
						}

							.container .social .social-list li a:hover { opacity: 0.5; }

							.social-twitter 		{ background: url('/img/social.png') no-repeat 0 0; }
							.social-googleplus 	{ background: url('/img/social.png') no-repeat -42px 0; }
							.social-facebook 	{ background: url('/img/social.png') no-repeat -84px 0; }
							.social-dribbble 	{ background: url('/img/social.png') no-repeat -126px 0; }
							.social-linkedin 	{ background: url('/img/social.png') no-repeat -168px 0; }
							.social-steam 		{ background: url('/img/social.png') no-repeat -210px 0; }
							.social-forrst 		{ background: url('/img/social.png') no-repeat -252px 0; }

	/* End social */



/* 4. $Work */

.work { background: #34495f; min-height: 400px; text-align: center; }
	.work .work-filter { background: inherit; padding: 50px 0; }
		.work .work-filter li { background: inherit; display: inline; font-size: .8em; margin: 0 3px; }
			.work .work-filter li a { background: inherit; color: #f9f9f9; padding: 8px 15px; }
				.work .work-filter li a:hover { color: #1abc9f; }

	.work .work-container { background: inherit; display: inline-block; max-width: 1150px; text-align: justify; }

		.work .work-container article, .work .work-container .push {
			background: inherit; 
			display: inline-block;
			font-size: 0.9em;
			margin-bottom: 50px;
			position: relative;
			text-align: center;
			width: 275px;
		}

		.work .work-container .work-project { opacity: 0; display: none; }
		.push { height: 0; }

		.pushend {
			cursor: default;
			display: block;
			height: 0;
			width: 100%;
		}

		@media (max-width: 1151px) {
			.work .work-container article { padding: 0 10px; }
		}

			.work .work-container article .work-article-overlay { background: transparent; display: none; position: absolute; left: 25%; right: 25%; top: 25%; bottom: 25%; }
			.work .work-container article:hover .work-article-overlay { display: block; }
			.work .work-container article:hover img { opacity: 0.7; }

				.work .work-container article .work-article-overlay a {
					border-radius: 2px;
					display: inline-block;
					height: 38px;
					overflow: hidden;
					position: relative;
					text-indent: 100%;
					width: 42px;
					z-index: 99999;
				}

					.work .work-container article .work-article-overlay .overlay-info { background: #1abc9f url('/img/icon-info.png') no-repeat center center; }
					.work .work-container article .work-article-overlay .overlay-link { background: #1abc9f url('/img/icon-link.png') no-repeat center center; }
					.work .work-container article .work-article-overlay a:first-child { margin: 0 3px 0 -1px; }
					
			.work .work-container article img {
				background: transparent; 
				border-radius: 6px;
				-webkit-transition: all 0.3s ease-in-out;
				transition: all 0.3s ease-out;
			}

			.work .work-container article h2 {
				background: inherit; 
				color: #f9f9f9;
				font-size: 1em;
				font-weight: 700;
				padding-top: 5px;
			}

			.work .work-container article .article-desc {
				background: inherit; 
				color: #bdc3c7;
				display: block;
				font-size: 0.85em;
				margin-top: 8px;
			}

/* End work */



/* 5. $Personal */

.personal {
	background: inherit;
	font-size: 0.9em;
	max-width: 1150px;
	margin: 0 auto;
	padding: 50px 0;
}

	.personal .personal-container { display: inline-block; text-align: justify; }
	.personal .personal-container .personal-column { display: inline-block; vertical-align: top; width: 270px; }

		.personal .personal-container .personal-column h1 {
			font-size: 1.2em;
			font-weight: bold;
			letter-spacing: -1px;
			padding: 0 0 20px 0;
			text-transform: uppercase;
			word-spacing: 3px;
		}

		.personal .personal-container .personal-column p {
			font-size: 0.9em;
			line-height: 1.7em;
			padding: 10px 0;
			text-align: left;
		}

		.personal .personal-container .personal-column .push { height: 0; }
		.personal .personal-container .personal-column .pushend {
			cursor: default;
			display: inline-block;
			height: 0;
			width: 100%;
		}

			@media (max-width: 1151px) {
				.personal .personal-container .personal-column { padding: 0 10px; }
			}


			/* 5.1 $Recentblog - latest blog posts */

			.personal .personal-container .blog-posts a {
				font-weight: 700;
				padding: 10px 0;
			}

			.personal .personal-container .blog-posts span {
				display: block;
				font-size: 0.8em;
				margin-top: 5px;
			}

			/* 5.2 $Recentcomment - latest comments */

			.personal .personal-container .comments p {
				background: #ecf0f1;
				margin: 10px 0;
				max-height: 36px;
				padding: 15px;
				text-align: justify;
			}

				.personal .personal-container .comments p a {
					background: inherit;
				}

/* End personal */



/* 6. $About */

.blue-container {
	background: #34495f;
	display: inline-block;
	position: relative;
	width: 100%;
}

	.blue-container .container {
		color: #f9f9f9;
	}

		.blue-container .container h1{ font-size: 2.5em; font-weight: 900; text-transform: uppercase; }
		.blue-container .container h1 a { font-weight: 900; }
		.blue-container .container h2 { font-size: 1.1em; margin-top: 12px; }

		.content-container {
			background: #f9f9f9;
			border-radius: 4px;
			color: #666;
			margin-top: 40px;
			padding: 30px;
		}

			.content-left { float: left; max-width: 770px; }
				.content-left p, .content p { padding: 10px 0; line-height: 1.7em; }
					.content-left p strong, .content p strong { font-size: 1.1em; font-weight: 700; }

				.content-left img { border-radius: 3px; height: auto; max-width: 100%; width: auto/*\9*/; }

			.content-right { float: right; max-width: 300px; padding-top: 30px; position: relative; text-align: left; width: 100%; }

				.content-container .img-container img { border-radius: 4px; height: 100%; width: 100%; }
				.img-container-small { border-radius: 4px; max-height: 353px; max-width: 500px; padding-bottom: 30px; }
				.img-container-small span { padding-right: 10px; text-align: right; }
				.img-container-small img { border-radius: 4px; height: 100%; width: 100%; -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; }
				.img-container-small-hover { background: #e0e0e0; }
				.img-container-small-hover:hover img{ opacity: 0.8; }

				.right-margin { margin: 10px 0 10px 10px; }
				.content-container p a { text-decoration: underline; }

			@media (min-width: 1200px) {
				.content-right { float: right; padding: 0; }
			} @media (max-width: 1199px) {
				.content-right { clear: both; float: left; padding: 0; }
			}

				.content-right h2 {
					border-left: 4px solid #1abc9f;
					color: #34495f;
					font-weight: 700;
					letter-spacing: 1px;
					padding: 0 0 5px 7px;
				}

	/* 6.1 $Skills */

				.content-right .skills { overflow: hidden; }

					.content-right .skills li {
						border-bottom: 2px solid #ecf1f1;
						display: inline;
						float: left;
						line-height: 2em;
					}

						.content-right .skills li:hover {
							background: #ecf0f1;
							border-bottom: 2px solid #666;
							-webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;
						}

						.content-right .skills li span { float: right; margin-right: 10px; }
					.content-right .double li { width: 50%; }



/* 7. $Blog */

.blog { background: inherit; padding-bottom: 25px; }
	.blog .img-container {
		margin-bottom: 20px;
		max-height: 335px;
		max-width: 770px;
	}

	.left { float: left; }
	.right { float: right; }

	.blog .img-container-small { max-height: 168px; max-width: 335px; padding: 20px 0 20px 20px; }

		.blog .img-container img, .blog .img-container-small img, .content .img-container-small img{ width: 100%; height: 100%; }

	.content-container .blog h1 {
		font-size: 1.5em;
		font-weight: 400;
		text-transform: none;
	}

	.blog .blog-post-info {
		margin: 20px 0;
	}

		.blog .blog-post-info li {
			color: #bdc3cf;
			display: inline;
			padding: 0 15px 5px 15px;
		}

			.blog .blog-post-info li:first-child { padding-left: 0; }

		.blog-icon {
			background: url('/img/icons.png');
			display: inline-block;
			margin-right: 12px;
			height: 16px;
			vertical-align: top;
			width: 16px;
		}

			.date { background-position: -40px 0; }
			.comments { background-position: -56px 0; }
			.tags { background-position: -72px 0; }

	.blog p, .blog ol li { color: #666; line-height: 1.7em; }
	.blog p.blog-code { background: #e0e0e0; font-family: "Courier New"; padding: 10px; }
	.blue-container .container .blog h2 { font-size: 1.4em; font-weight: 700; letter-spacing: 1px; margin-left: 15px; }
	.blog ol li {
		list-style-type: decimal;
		margin-left: 30px;
	}

	.blog a.read-more {
		background: #1abc9f;
		border-radius: 3px;
		color: #f9f9f9;
		display: table;
		margin: 15px 0;
		padding: 10px;
	}

	.blog a.read-more:hover {
		background: #34495f;
	}

	.content-container .content-left.blog-list:nth-child(1n+3) {
		border-top: 2px solid #ecf1ff;
		padding-top: 35px;
	}



	/* 7.1 $BlogArchive */

	.blog-archive {
		/**/
	}

		.blog-archive ul.archive-by-year, .blog-archive ul.archive-tags {
			padding: 10px 5px;
		}

			.blog-archive ul.archive-by-year ul.archive-by-month li, .blog-archive ul.archive-tags ul.archive-by-tag li, .project-list li {
				line-height: 2em;
				margin-left: 15px;
			}

			.blog-archive ul.archive-by-year ul.archive-by-month li:first-child, .blog-archive ul.archive-tags ul.archive-by-tag li:first-child, .project-list li:first-child {
				margin-top: 5px;
			}

		a.archive-active, a.project-active {
			border-left: 4px solid #1abc9f;
			padding-left: 7px;
		}



	/* 7.2 $BlogComments */

	.blog-comments {
		margin-top: 35px;
		padding-top: 35px;
	}

	.content-container .content-left .blog-comments h2 {
		letter-spacing: 0;
	}

	.comment-form input:focus,
	.comment-form textarea:focus { border-color: #1abc9f; -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; }
	.comment {
		border-top: 2px solid #ecf0f1;
		clear: both;
		display: block;
		padding: 15px 10px;
		width: 100%;
	}

		.comment-avatar { float: left; padding: 0 10px 0 0; }
		.comment-info { float: left; }

	.comment-input {
		background: #fff;
		border: 2px solid #cfd6da;
		border-radius: 4px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		font-size: 1em;
		height: 50px;
		margin: 15px 0;
		padding: 4px;
		resize: vertical;
		width: 100%;
	}

		.comment-input:focus, .comment-input:valid { height: 100px; }

		textarea::-webkit-input-placeholder { color: #999; font-size: 1.8em; font-weight: 700; }
		textarea:-moz-placeholder { color: #999; font-size: 1.8em; font-weight: 700; }
		textarea::-moz-placeholder { color: #999; font-size: 1.8em; font-weight: 700; }
		textarea:-ms-input-placeholder { color: #999; font-size: 1.8em; font-weight: 700; }

		.comment-post-as {
			width: 100%;
		}

		.comment-post-as span {
			display: block;
			font-size: 0.8em;
			margin-bottom: 8px;
			text-transform: uppercase;
		}

		.comment-post-as-input {
			background: #fff;
			border: 2px solid #cfd6da;
			border-radius: 4px;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			float: left;
			height: 40px;
			padding: 4px;
			width: 80%;
		}

		.comment-post-as-input-last {
			border-radius: 4px 0 0 4px;
			border-right: 0;
		}

		.comment-input-label {
			clear: both;
			padding-top: 12px;
		}

		.comment-submit {
			background: #1abc9f;		
			border-radius: 0 4px 4px 0;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			color: #f9f9f9;
			display: table;
			height: 40px;
			margin-bottom: 15px;
			padding: 8px 14px;
			width: 20%;
		}

		.comment-submit:hover, .comment-submit:focus { background: #34495f; }

	.comment-avatar .comment-user-avatar {
		background: grey; height: 48px; width: 48px;
	}

		.comment-separator {
			color: #999;
			display: inline-block;
			font-size: 0.4em;
			padding: 0 6px;
			vertical-align: middle;
		}

			.comment-separator:after { content: "\2022"; }

	.comment-date, .comment-interact { color: #999; font-size: 0.9em; }
		.comment-date-hidden { opacity: 0;  }
		.comment-date:hover .comment-date-hidden { opacity: 1; -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; }
	.blog-comments .comment-content { padding: 0; }
	.comment-interact { margin-top: 8px; }
	.comment-interact ul li { display: inline; }
	.comment-interact ul li:last-child { padding-left: 8px; }
	.comment-vote a { padding: 0 10px; }
	.vote-arrow { background: url('/img/comment-votes.png') no-repeat center center; display: inline-block; width: 10px; height: 6px; }

	.vote-up { background-position: 0 0; }
	.vote-down { background-position: -10px 0; }
	.comment-vote a:hover .vote-up, .vote-up-active { background-position: 0 -6px; }
	.comment-vote a:hover .vote-down, .vote-down-active { background-position: -10px -6px; }
	.comment-vote-first{ border-right: 1px solid #ecf0f1; }
	.comment-vote-last { border-left: 1px solid #ecf0f1; }

	.comment-post-as span .lower { display: inline; font-size: 1em; text-transform: lowercase; }

	.blog-comments .list-errors {
		background: #1abc9f;
		border-radius: 4px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		color: #f9f9f9;
		padding: 20px;
		width: 100%;
	}

	.comment-admin {
		background: #1abc9f;
		border-radius: 2px;
		color: #f9f9f9;
		font-size: 0.8em;
		margin-left: 8px;
		padding: 2px;
	}

	.comment-admin:hover {
		background: #34495f;
	}

/* 8. $Projects */

.project-description p { padding: 10px 0; line-height: 1.7em; }

	ul.project-info { padding: 12px 0; }

		ul.project-info li {
			color: #bdc3cf;
			display: inline;
			padding: 0 15px 5px 15px;
		}

	.project-img-side:hover { opacity: 0.8; }



/* 9. $Contact */

	.contact a.email { background: #ecf0f1; border-radius: 3px; margin-left: 5px; padding: 7px 10px; }
	/*.contact a.email:hover { color: #666; }*/
	.contact a.email:before { content: "\1f4e7"; margin-right: 5px; }
	.contact label { display: block; padding: 10px 0; }
	.contact label:first-child { padding-top: 20px; }

	.contact input, .contact textarea {
		background: #fff;
		border: 2px solid #cfd6da;
		border-radius: 4px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		font-size: 0.9em;
		height: 40px;
		padding: 4px;
	}

	.contact input:focus, .contact textarea:focus { border: 2px solid #1abc9f; }
	.contact input:not([type=submit]) { max-width: 300px; width: 100%; }
	.contact input[type=submit] { background: #1abc9f; border: 0; color: #f9f9f9; margin-top: 10px; padding: 3px 10px; width: 20%; }
	.contact input[type=submit]:hover, .contact input[type=submit]:focus { background: #34495f; }
	.contact textarea { display: block; height: 150px; width: 100%;}

	input.input-error, textarea.input-error { box-shadow: 0 0 4px red; margin-right: 5px; }

	.notification { border-radius: 4px; color: #f9f9f9; margin-top: 30px; padding: 10px 20px; }

		.notification p { padding: 5px; }
			.notification p:before { content: "\2022"; margin-right: 5px; }
		.success { background: #1abc9f; }
		.success a { color: #34495f; }

		.error { background: #666; }
		.error a { color: #1abc9f; }

/* End default container, about, contact, 404 */



.footer {
	background: inherit;
	font-size: 0.9em;
	max-width: 1150px;
	margin: 0 auto;
	padding: 0 8px;
}



/* I. $Wide */		/* Starting from 701px, as that's the value things still look okay */
@media (min-width: 701px) {
	.container .social { float: right; margin: 0 auto; }

	.menu-trigger { display: none; }

	.work .work-filter li.active a { color: #1abc9f; }
	
	.footer { border-top: 1px solid #ecf1f1; padding: 50px 0; text-align: right; } /* r95 */
		.footer .footer-list { float: right; padding: 0 0 20px 0; width: 100%; }
			.footer .footer-list li { color: #bdc3cf; display: inline; font-size: 0.8em; }
			.footer .footer-list .copyright { float: left; margin-top: 3px; }
				.footer .footer-list .full-site { display: none; }
			.footer .footer-list li a { color: #bdc3cf; padding: 4px 12px; }
			.footer .footer-list li a:hover { color: #1abc9f; }
}



/* II. $Narrow */	/* Up to 700px, things get messy beyond this. Portrait oriented phones look great this way */
@media (max-width: 700px) {
	.header-menu .logo { float: left; }
	.header-menu .menu { padding: 0 4px;  }

	.header-menu .menu .menu-trigger {
		float: right;
		position: relative;
		padding-left: 1.25em;
	}

	.header-menu .menu .menu-trigger:before {
		border-top: 15px double #34495f;
		border-bottom: 5px solid #34495f;
		content: "";
		height: 5px;
		margin-top: 24px;
		position: absolute;
		right: 10px;
		width: 25px;
	}

	.header-menu .menu .menu-list { display: none; height: auto; margin: 0; padding-bottom: 20px; text-align: center; width: 100%;}
	.header-menu .menu .menu-list li { margin: 0; width: 100%; }
	.header-menu .menu .menu-list li a { background-color: #1abc9f; border-radius: 3px; color: #f9f9f9; display: inline-block; width: 100%; padding: 14px 0; }

	.container .social { clear: both; }
		.work .work-filter:before { color: #f9f9f9; content: "Filter:"; margin: 0 0 10px 0; }
			.work .work-filter li, .footer .footer-list li { display: block; font-size: .8em; margin: 10px 0; padding: 5px 0;}
				.work .work-filter li a { color: #f9f9f9; display: inline-block; padding: 20px; margin:0; background: #1abc9f; border-radius: 3px; width: 100px; }
				.work .work-filter li a:hover, .work .work-filter li.active a:hover { color: #f9f9f9; }
				.work .work-filter li.active a { background: #666; }

	.work .work-container { display: inline-block; max-width: 1150px; text-align: center; }

	.personal .personal-container { text-align: center; }
	.personal .personal-container .personal-column { padding-bottom: 50px; }
	.personal .personal-container .push { display: none; }

	/*.footer ul.footer-list li.full-site { clear: both; display: block; margin-top: 20px; }*/
	.footer { border-top: 1px solid #ecf1f1; padding: 50px 0; text-align: center; }
		.footer .footer-list li a { background: #ecf0f1; display: inline-block; padding: 20px 40px; width: 100px; }

	.blue-container .container  .content-right h1 { display: none; }

	.blog .blog-post-info li,.blog .blog-post-info li:first-child, .project-info li { clear: both; display: block; padding: 10px; }
	.blog .img-container-small { display: block; float: none; padding: 20px 0; }

	.contact a.email { display: inline-block; margin: 10px 0 0 0; padding: 20px; }
}

/* III. $404 */

.blue-container .container .content-right h1.fourohfour { background: transparent; font-weight: 900; position: absolute; right: 0; transform: rotate(30deg); -ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); width: 100%; }
@media (min-width: 1071px) {
	.blue-container .container .content-right h1.fourohfour { font-size: 15em; top: 120px; }
} @media (max-width: 1070px) {
	.blue-container .container .content-right h1.fourohfour { font-size: 10em; top: 160px; }
} @media (max-width: 840px) {
	.blue-container .container .content-right h1.fourohfour { font-size: 5em; top: 200px; }
}

/************************
* 		End of CSS.		*
* 	        2013	    *
************************/

.badge {
	padding: 2px 6px;
	background: #1abc9f;
	border-radius: 6px;
	color: white;
	opacity: 0.85;
	transition: opacity 100ms linear;
}

.work .work-container article:hover .badge {
	opacity: 1;
}

.ml-3 {
	margin-left: 8px;
}