@font-face {
	font-family: 'crack';
	src: url('fonts/newcrack.eot');
	src: url('fonts/newcrack.eot?#iefix') format('embedded-opentype'),
	url('fonts/newcrack.woff') format('woff'),
	url('fonts/newcrack.ttf') format('truetype');
}

@font-face {
	font-family: 'riviera';
	src: url('fonts/riviera.eot');
	src: url('fonts/riviera.eot?#iefix') format('embedded-opentype'),
	url('fonts/riviera.woff2') format('woff2'),
	url('fonts/riviera.woff') format('woff'),
	url('fonts/riviera.ttf') format('truetype'),
	url('fonts/riviera.svg#riviera') format('svg');
	font-weight: 100;
	font-style: normal;
}

.fancybox-container * {
	font-family: "Helvetica";
}

body, html {margin:0px; padding:0px; background-color: #000300; background-image:url('../images/bg.jpg'); background-position: center; background-repeat: no-repeat; background-attachment: fixed; }


div.wrapper { width: 100%; height: 100%; margin: auto; text-align: center; }
div.menu { width: 800px; margin: auto; margin-top: 20px; background:url('../images/menu.png') 0px 0px; height: 58px; padding: 0 30px; }

div.menu div { float: left;  font-family: 'crack'; font-size: 24px;  line-height: 76px; padding: 0 12px; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1); }
div.menu div a {
	color: #000;
	display: block;
	font-weight: bold;
}
div.menu div a:hover { color: #460000; }

div.responsive-menu { display: none; }

a { cursor: pointer; }

a:link { color: #6d0202; text-decoration: none; border:0; }
a:visited { color: #6d0202; text-decoration: none; border:0; }
a:hover { color: #6d0202; text-decoration: none; border:0;  }
a:active { color: #6d0202; text-decoration: none; border:0; }

a:focus { outline: none; }

.home div.content { width: 626px;  margin: auto; float: none; }

div.paper { float: left; width: 100%; margin-top: 40px; background-image: url('../images/content-background.jpg'); background-repeat: repeat-y; }
.home div.paper { background-image: url('../images/content-background-dark.jpg'); background-repeat: repeat-y; padding-top: 20px; padding-bottom: 20px; margin-bottom: 40px; margin-top: 30px; }

.home div.paper .story, .home div.paper .image { float: left; width: 100%; }

div.container { width: 763px; float: none; margin: auto; }

.bands div.container {
	width: 1024px;
}

div.content {
	width:100%;
	float: left;
	margin-top: 80px;
	margin-bottom: 20px;
	background-image: url('../images/content-background.jpg');
	font-size: 22px;
	padding-top: 20px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 10px;
	font-family: 'riviera';
}

body.skills div.content {
	padding-bottom: 30px;
}

div.top {
	background-image: url('../images/table-top.png');
	width: 745px;
	height: 32px;
	float:left;
}

div.bottom {
	background-image: url('../images/table-bottom.png');
	width: 745px;
	height: 32px;
	float:left;
}

div.row {
	background-image: url('../images/table-row.png');
	width: 745px;
	height: 50px;
	float:left;
}

div.first_column_header {
	float: left;
	width: 148px;
	height: 50px;
	padding-left: 10px;
}
div.second_column_header { float: left; width: 192px; height: 50px; }
div.first_column {
	float: left;
	width: 148px;
	height: 50px;
	padding-top: 10px;
	padding-left: 10px;
}

div.bar_column {
	float: left;
	width: 572px;
	text-align: left;
	padding-top: 6px;
	padding-left: 2px;
	height: 35px;
}

div.small_text {
	font-size: 16px;
	padding-left: 16px;
	padding-top: 12px;
}
div.bar_column_fix {
	padding-left: 0;
	margin-left: -4px;
}

.home div.content { background: none; }

div.story {
	font-family: 'crack';
	font-size: 36px;
	line-height: 8px;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1);
	font-weight: bold;
}
div.story p { margin-bottom: 20px; }
div.story p.red { color: #460000; }
div.story p.hard { text-shadow: 2px 3px 2px rgba(0, 0, 0, 1); }
div.margintop { margin-top: 10px; }

div.image img { cursor: pointer; }
div.image img:hover {  filter: invert(10%); }
div.image img.alt { display: none; }

div.image.techs { padding: 0 50px; box-sizing: border-box; }
div.image.techs div { float: left; width: 33%; padding: 0px 20px; box-sizing: border-box; }
div.image.techs div.left { padding-left: 0; }
div.image.techs div a { float: left; display: block; width: 100%; margin-top: 10px; }
div.image.techs div a img.fullwidth { width: 100%; }
div.image.techs div a.oracle { margin-top: 50px; }
div.image.techs div a.mysql { margin-top: 70px; }
div.image.techs div a.ruby { margin-top: 60px; }

div.image.work a:nth-child(1) {
	float: left;
	width: 50%;
	text-align: right;
	padding-right: 40px;
	padding-top: 30px;
	box-sizing: border-box;
}

div.image.work a:nth-child(2) {
	float: left;
	width: 50%;
	text-align: left;
	padding-left: 30px;
	box-sizing: border-box;
}

div.image.hungry a:nth-child(1) { float: left; width: 50%; text-align: right;  padding-right: 60px;  box-sizing: border-box; }
div.image.hungry a:nth-child(2) { float: left; width: 50%; text-align: left;  padding-left: 50px; padding-top: 10px; box-sizing: border-box; }

div.image.map { margin-top: -35px; }
div.image.map img:hover { filter: invert(0%); }
div.image.map a { position: relative; }
div.image.map span { position: absolute; font-family: 'crack'; top: -70px; left: 150px; color: #000; font-size: 24px; }
div.image.map a span:nth-child(3) { top: -43px; }
div.image.map:hover a span { color: #460000; }

div.image.devs a { margin: 0 30px; }

span.blue { color: #001246; }
span.red { color: #460000; }
span.green { color: #284600; }
span.yellow { color: #4f4c00; }
span.move { margin-left: 7px; }

div.bigger-padding { padding-left: 14px; width: 143px; }
div.smaller_padding { padding-top: 5px; }
div.magento-padding { padding-left: 21px; }

div.skill-legend {
	float: left;
	width: 100%;
	text-align: center;
	margin-left: 17px;
	margin-top: 5px;
	height: 40px;
}

span.skill-legend {
	margin-right: 30px;
}

div.skill-legend div {
	display: inline;
}

.skills .responsive {
	float: left;
	width: 100%;
	display: none;
}

.skills .responsive ul {
	float: left;
	width: 100%;
	padding-left: 0;
}

.skills .responsive li {
	list-style: none;
	width: 100%;
	float: left;
	margin-bottom: 10px;
}

.skills .responsive li div {
	color: #fff;
	padding-top: 10px;
	padding-bottom: 10px;
	margin: auto;
}

.skills .responsive li div span {
	display: none;
}

.skills .responsive li.red div {
	background-color: #460000;
	border: 2px solid #460000;
}

.skills .responsive li.red div:hover {
	background-color: transparent;
}

.skills .responsive li.red div span {
	color: #460000;
}

.skills .responsive li div:hover span {
	display: inline;
	margin-left: 5px;
}

.skills .responsive li.blue div {
	background-color: #001246;
	border: 2px solid #001246;
}

.skills .responsive li.blue div span {
	color: #001246;
}

.skills .responsive li.blue div:hover {
	background-color: transparent;
}

.skills .responsive li.green div {
	background-color: #284600;
	border: 2px solid #284600;
}

.skills .responsive li.green div span {
	color: #284600;
}

.skills .responsive li.green div:hover {
	background-color: transparent;
}

.skills .responsive li.yellow div {
	background-color: #4f4c00;
	border: 2px solid #4f4c00;
}

.skills .responsive li.yellow div span {
	color: #4f4c00;
}

.skills .responsive li.yellow div:hover {
	background-color: transparent;
}


p.text {
	margin-left: 3px;
	margin-top: 0px;
	font-family: 'riviera';
	font-size: 24px;
	line-height: 28px;
}
img.codernia { float:left; margin-right: 10px; width: 300px; }
div.star { float: right; margin-left: -36px; margin-right: 9px; margin-top: 11px;  width: 26px; height: 24px; background-image: url('../images/star.png'); }
div.star_hover { float: right; margin-left: -36px; margin-right: 9px; margin-top: 11px; width: 26px; height: 24px; background-image: url('../images/star_hover.png'); }

div.bar_column div.col {
	float: left;
	width: 3%;
	height: 100%;
}

div.bar_column div.col span {
	float: left;
	width: 100%;
	height: 30%;
	margin-bottom: 3px;
	transition: 0.5s ease all;
	display: block;
	opacity: 0;
}

div.bar_column.red div.col span {
	background: url('../images/red_cube.png') center center no-repeat;
}

div.bar_column.blue div.col span {
	background: url('../images/blue_cube.png') center center no-repeat;
}

div.bar_column.green div.col span {
	background: url('../images/green_cube.png') center center no-repeat;
}

div.bar_column.yellow div.col span {
	background: url('../images/yellow_cube.png') center center no-repeat;
}

img.bar_skills { opacity: 1; }
div.certificate { margin-top: 5px; margin-bottom: 20px; float: left; width: 100%; }
div.second-star { margin-right: 22px; width: 20px; }
div.second-star_hover { margin-right: 22px; width: 20px; }


div.portfolio-main-div {
	float: left;
	width: 300px;
	position: relative;
	overflow: hidden;
}

div.portfolio-main-div img {
	width: 270px;
}

div.porftolio-vertical-bar { float: left; width: 15px; }
div.portfolio-info-div { float:left; margin-left: 10px; height: 210px; width: 385px; text-align: left; }
div.portfolio-headline-div { float:left; width: 100%; }
div.portfolio-headline-div h2 { margin-bottom: 0px; }
div.portfolio-headline-div h4 { margin-bottom: 0px; }
.no-margin-top { margin-top: 0px; }
.no-margin-bottom { margin-bottom: 0px; }
.small-margin-top { margin-top: 2px; }
.medium-margin-top { margin-top: 12px; }
div.portfolio-points { float:left; width: 100%; }
ul.portfolio-list { margin-top: 0px; margin-bottom: 0px; }
li.small-font { font-size: 12pt; }
div.portfolio-year-div { float:left; width: 100%; font-size: 9pt; }
span.small-font { font-size: 9pt; }
ul.portfolio-list-with-top { margin-top: 8px; margin-bottom: 0px; }

div.contact-box { width: 220px; float:left; margin-top:10px; margin-left: 54px; }
div.contact-box-middle { width: 220px; float:left; margin-top:10px; margin-bottom: 20px; }

.contact .content .text {
	float: left;
	width: 100%;
}

.contact .content .text ul {
	padding-left: 0;
}

.contact .content .text ul li {
	list-style: none;
}

div.about-me-container {
	width: 100%;
	float: left;
	text-align: left;
}

div.about-me-container h3 {
	text-align: center;
}

div.digging-first-col { width:100%; float:left; }
div.digging-second-col { width:260px; float:left; font-size: 12pt; }
div.digging-third-col { width:220px; float:left; font-size: 12pt; }
.font14 { font-size: 14pt; }
.font11 { font-size: 11pt; }
div.last-fm-box {
	width: 100%;
	height:60px;
	float: left;
	text-align: center;
}
div.page404 { margin-top: 60px; }

div.copyright {
	float: left;
	width: 100%;
	text-align: center;
	margin: 10px 0;
	font-family: 'riviera';
	color: #fff;
	clear: both;
}

.portfolio div.title h1 {
	margin-top: 0;
	font-size: 30px;
}

.caption-text {
	width: 270px;
	height: 175px;
	background: rgba(0,0,0,.7);
	display: block;
	z-index: 4;
	position: absolute;
	opacity: 0;
	bottom: 0;
	cursor: pointer;
	-webkit-transition: all cubic-bezier(.11,.72,.45,.93) 1s;
	-moz-transition: all cubic-bezier(.11,.72,.45,.93) 1s;
	transition: all cubic-bezier(.11,.72,.45,.93) 1s;
	padding: 20px;
	margin-left: 15px;
	-webkit-transform: translateY(175px);
	-moz-transform: translateY(175px);
	-ms-transform: translateY(175px);
	-o-transform: translateY(175px);
	transform: translateY(175px);
	box-sizing: border-box;
	
	color: #ffffff;
	font-weight: bold;
	font-size: 13px;
	font-family: arial;
	cursor: default;
	text-shadow: 1px 1px 0 #202020;
	text-align: left;
}

.caption2 {
	-webkit-transform: translateY(80px);
	-moz-transform: translateY(80px);
	-ms-transform: translateY(80px);
	-o-transform: translateY(80px);
	transform: translateY(80px);	
	height: 80px;
}

.caption3, .caption4, .caption5, .caption6, .caption7, .caption8, .caption9, .caption10 {
	-webkit-transform: translateY(120px);
	-moz-transform: translateY(120px);
	-ms-transform: translateY(120px);
	-o-transform: translateY(120px);
	transform: translateY(120px);	
	height: 120px;
}

.caption9 {
	height: 130px;
}

.caption8 {
	height: 90px;
}

.caption10 {
	height: 100px;
}

.caption11 {
	height: 150px;
}

.caption12 {
	height: 170px;
}


.portfolio-main-div:hover > div.caption-text {
	opacity: 1;
	bottom: 0;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	transform: translateY(0px);
}

.portfolio-headline-div h2 span.small {
	font-size: 16px;
}

.tools-grid {
	float: left;
	width: 100%;
	padding: 0 20px;
}

.tools-grid .item {
	float: left;
	width: 30%;
	margin-right: 5%;
	position: relative;
	margin-bottom: 15px;
}

.bands .tools-grid .item {
	width: 24%;
	margin-right: 1%;
}

.tools-grid .item img {
	width: 100%;
}

.tools-grid .item:nth-child(3n) {
	margin-right: 0;
}

.bands .tools-grid .item:nth-child(4n) {
	margin-right: 0;
}

.bands .tools-grid .item:nth-child(3n) {
	margin-right: 1%;
}

.tools-grid .tools-text {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	opacity: 0;
	transition: 1s ease all;
}

.tools-grid .tools-text a {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-family: "riviera";
	font-size: 30px;
	text-align: center;
}

.tools-grid .item:hover .tools-text {
	opacity: 1;
}

/* CAPTIFY caption styling */

.caption-top, .caption-bottom {
	color: #ffffff;	
	padding: 1.2em;	
	font-weight: bold;
	font-size: 13px;	
	font-family: arial;	
	cursor: default;
	background: #000;
	text-shadow: 1px 1px 0 #202020;
	text-align: left;
}
.caption-top {
}
.caption-bottom {
}
.caption a, .caption a {
	border: 0 none;
	text-decoration: none;
	background: #000000;
	padding: 0.3em;
}
.caption a:hover, .caption a:hover {
	background: #202020;
}
.caption-wrapper {
	float: left;
}
br.c { clear: both; }

/* END CAPTIFY */

/* IMG HOVER */

#center{ text-align:center; padding:auto auto auto auto;}
 a.linkopacity img {
 filter:alpha(opacity=50);
 -moz-opacity: 0.5;
 opacity: 0.5;
 -khtml-opacity: 0.5;}

 a.linkopacity:hover img {
 filter:alpha(opacity=100);
 -moz-opacity: 1.0;
 opacity: 1.0;
 -khtml-opacity: 1.0; }

/* END IMG HOVER */


/* START LYRICS CLOUD */

    #myCanvasContainer {
        width: 90%;
        height: 90%;
        display: block;
        margin: auto;
        text-align: center;
    }
    
    #tags a span {
        text-align: left;
		font-family: 'Special Elite', cursive;
    }

/* END LYRICS CLOUD */

/* RESPONSIVE */

@media only screen and (max-width: 1024px) {
	.bands div.container {
		width: 100%;
	}

	.lyrics-cloud canvas {
		width: 100% !important;
	}
}

@media only screen and (max-width: 900px) {
	.bands .tools-grid .item {
		width: 48%;
		margin-right: 2%;
	}

	.bands .tools-grid .item:nth-child(3n) {
		margin-right: 2%;
	}
}

@media only screen and (min-width: 875px) {
	div.menu {
		display: block !important;
	}
}

@media only screen and (max-width: 875px) {
	div.responsive-menu {
		display: block;
		background: url('../images/menu.png') 0px 0px;
		height: 58px;
		width: 100%;
		width: calc(100% - 40px);
		margin: auto;
	}

	div.responsive-menu div a {
		font-family: 'crack';
		font-size: 26px;
		line-height: 62px;
		display: block;
		transform: scale(2.5,1) rotate(-90deg);
		color: #000;
		padding: 10px 30px 0px 40px;
		width: 30px;
		margin: auto;
		height: 59px;
	}

	div.menu {
		display: none;
	}

	div.menu.active {
		background: url('../images/content-background.jpg') 0px 0px;
		height: auto;
		float: left;
		padding: 0;
		margin-left: 20px;
		margin-right: 20px;
		width: 90%;
		width: calc(100% - 40px);
	}

	div.menu.active div {
		float: left;
		width: 100%;
		text-align: center;
		padding: 0;
		line-height: 60px;
	}

	div.content {
		width: 90%;
		width: calc(100% - 40px);
		margin-left: 20px;
		margin-right: 20px;
		float: left;
		margin-top: 50px;
		box-sizing: border-box;
	}

	.skills div.first_column_header,.skills div.first_column {
		width: 20%;
		box-sizing: border-box;
	}

	.skills div.first_column {
		font-size: 18px;
	}

	.skills div.first_column.small_text {
		font-size: 15px;
		padding-left: 25px;
	}

	.skills div.second_column_header,.skills div.second_column {
		width: 26%;
	}

	.skills div.top, .skills div.row, .skills div.bottom  {
		width: 100%;
	}

	.skills div.bar_column {
		width: 78%;
		box-sizing: border-box;
		margin-left: 2%;
		height: 42px;
	}

	div.container {
		width: 100%;
	}

	.tools-grid {
		box-sizing: border-box;
	}

	.certification div.container img {
		width: 100%;
	}

	.skills .skill-legend div {
		width: 380px;
		margin: auto;
		display: block;
	}

	.skills .skill-legend span.skill-legend.fw {
		margin-right: 5px;
	}

	.skills .skill-legend.cv {
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.portfolio div.portfolio-main-div {
		width: 30%;
	}

	.portfolio div.porftolio-vertical-bar {
		width: 5%;
	}

	.portfolio div.portfolio-info-div {
		width: 65%;
		margin-left: 0;
	}

	.portfolio div.portfolio-main-div .caption-text {
		font-size: 11px;
		margin-left: 0;
		width: 100%;
		height: 180px;
	}
}

@media only screen and (max-width: 800px) {
	body.contact div.contact-box,
	body.contact div.contact-box-middle {
		width: 33%;
		margin-left: 0;
	}

	.four-oh-four img {
		width: 100%;
	}
}

@media only screen and (max-width: 780px) {
	ul.tunes {
		width: 440px;
	}
}

@media only screen and (max-width: 700px) {
	.skills div.first_column {
		font-size: 15px;
	}

	.portfolio div.portfolio-main-div .caption-text {
		font-size: 10px;
	}
}

@media only screen and (max-width: 666px) {

	.home div.content {
		width: 100%;
		box-sizing: border-box;
	}

	div.paper {
		width: 100%;
	}

	body.codernia img.codernia {
		width: 100%;
	}

	.skills div.main-table {
		display: none;
	}

	.skills div.responsive {
		display: block;
	}

	.skills div.responsive div.star {
		background-image: url(../images/star.png);
		border: none;
		filter: invert(100%);
		background-color: transparent;
		height: 4px;
		float: none;
	}

	.skills div.responsive li div:hover div.star {
		filter: invert(0%);
	}

}

@media only screen and (max-width: 600px) {

	.home div.paper .story {
		font-size: 28px;
	}

	div.image.techs img {
		width: 100%;
	}

	div.image.devs {
		width: 310px;
		float: none;
		margin: auto;
	}

	div.image.devs a:nth-child(1) {
		margin-left: 0px;
	}

	div.image.techs div a.mysql, div.image.techs div a.ruby {
		margin-top: 40px;
	}

	div.image.techs div a.oracle {
		margin-top: 23px;
	}

	div.portfolio-info-div h2.text {
		font-size: 26px;
	}

	.tools-grid .item {
		width: 100%;
		margin-right: 0;
	}
}

@media only screen and (max-width: 570px) {
	.portfolio div.portfolio-main-div, .portfolio div.porftolio-vertical-bar, .portfolio div.portfolio-info-div {
		width: 100%;
	}

	.portfolio div.portfolio-main-div {
		margin-top: 40px;
	}

	.portfolio .first div.portfolio-main-div {
		margin-top: 0px;
	}

	.portfolio div.portfolio-main-div img {
		width: 100%;
	}

	.portfolio div.porftolio-vertical-bar {
		height: 40px;
	}

	.portfolio div.porftolio-vertical-bar img {
		transform: rotate(90deg);
		position: relative;
		top: -70px;
		left: 0px;
	}

	.portfolio div.portfolio-info-div div.portfolio-headline-div, .portfolio div.portfolio-info-div div.portfolio-year-div {
		text-align: center;
	}

	.portfolio div.portfolio-info-div div.portfolio-year-div {
		margin-top: 5px;
	}

	.portfolio div.portfolio-main-div .caption-text {
		font-size: 13px;
	}

	.portfolio div.skill-legend {
		height: auto;
		text-align: center;
		margin-left: 0;
	}

	div.image.work a:nth-child(1) {
		padding-right: 20px;
	}

	div.image.work a:nth-child(2) {
		padding-left: 10px;
	}

}

@media only screen and (max-width: 550px) {
	ul.tunes {
		width: 180px;
	}

	.aboutme div.content {
		padding-bottom: 40px;
	}

	.bands .tools-grid .item {
		width: 100%;
		margin-right: 0 !important;
	}

	body.contact div.contact-box,
	body.contact div.contact-box-middle {
		width: 50%;
		margin-left: 0;
		margin-bottom: 0;
	}
}

@media only screen and (max-width: 480px) {
	div.image.techs div a.mysql {
		margin-top: 30px;
	}

	div.image.techs div a {
		margin-top: 20px;
	}

	div.image.work a:nth-child(1) {
		padding-right: 20px;
	}

	div.image.work a:nth-child(2) {
		padding-left: 0px;
	}

	div.image.hungry a:nth-child(1) {
		padding-right: 30px;
	}

	div.image.hungry a:nth-child(2) {
		padding-left: 20px;
	}
}

@media only screen and (max-width: 470px) {
	.home div.paper .story {
		font-size: 22px;
	}
}

@media only screen and (max-width: 465px) {
	.skills div.skill-legend {
		font-size: 18px;
		height: auto;
		margin-left: 10px;
	}

	.skills div.skill-legend img {
		float: left;
		clear: left;
		margin-bottom: 10px;
	}

	.skills div.skill-legend span {
		float: left;
		margin-left: 7px;
		margin-right: 0;
		line-height: 10px;
		margin-bottom: 10px;
	}

	.skills .skill-legend div {
		width: 250px;
	}

	.skills .skill-legend.cv {
		margin-top: 10px;
	}

	.portfolio .portrow .portfolio-headline-div a {
		font-size: 16px;
	}
}

@media only screen and (max-width: 440px) {

	div.image.work a:nth-child(1) img {
		width: 150px;
	}

	div.image.work a:nth-child(2) img {
		width: 150px;
	}
}

@media only screen and (max-width: 360px) {
	.home div.paper .story {
		font-size: 20px;
	}

	.home div.paper .story.codernia {
		font-size: 19px;
	}

	div.image.devs a {
		width: 200px;
		margin: auto !important;
		float: none;
		display: block;
	}

	div.image.techs div {
		width: 100%;
		padding: 0px;
	}

	div.image.techs div a, div.image.work.margintop a {
		width: 120px;
		margin: auto !important;
		float: none;
		display: block;
	}

	div.image.work.margintop a {
		padding: 0;
		padding-bottom: 10px;
	}

	div.image.techs div a img, div.image.work a img {
		width: 100% !important;
	}

	div.image a.codernia {
		width: 100%;
		float: left;
		display: block;
	}

	div.image a.codernia img {
		width: 90%;
	}
}