@charset "utf-8";
/* CSS Document */

@import url(//fonts.googleapis.com/css?family=Muli);
@import url(forms.css);
@import url(responsive_recaptcha.css);
@import url(paging.css);

html {
font-size:20px;	
}
body {
	background-color:#f6f6f6;
	font-size:20px;
	margin:0;
}

@media (max-width:700px) and (orientation:landscape) { 

	body, html {
		font-size:10px;
	}

}
@media (min-width:701px) and (max-width:1000px) and (orientation:landscape)  { 

	body, html {
		font-size:13px;
	}

}
@media (min-width:1001px) and (max-width:1200px) and (orientation:landscape)  { 

	body, html {
		font-size:16px;
	}

}
@media (min-width:1201px) and (max-width:1680px) and (orientation:landscape)  { 

	body, html {
		font-size:17px;
	}

}


hr {
	border:0px;
	border-top: 1px solid #999;
}
.clear {
	width:auto;
	clear:both;
	overflow:hidden;
}
.standard {
	padding:1%;	
}

.logo {
	width:25%;
	max-width:425px;
	
}

.top {
	padding: 0 7% 0 7%;
	position:relative;
}



.divider1, .divider2, .divider3, .divider4{
	text-align:center;
	margin:3em 0 0em 0;
	background-image:url(/images/pixel.png);
	background-position:center;
	background-repeat:repeat-x;
}
.divider1 {
	height:30px;
	margin:.2em 0em;
}
.divider1 span, .divider2 span, .divider3 span, .divider4 span {
	padding:.2em 2em;
	margin:0 0 0 0;
	display:inline-block;
	background-color:#f6f6f6;
	font-size:2em;
	color:#ffcc00;
	text-transform:uppercase;
	white-space:nowrap;
}
.divider3 {
	text-align:left;
	margin:1em 0;
}
.divider3 span {
	padding:.2em 1.2em;
	margin-left:2em;
}

.divider4 {
	background-image:none;
	text-align:left;
	margin:1em 0 0 0;
}
.divider4 span{
	background-color:#424147;
	font-size:1em;
}
.top_menu {
	font-size:2em;
	position:absolute;
	right:5%;
	top:50%;
	width:50%;
	text-align:right;
	height:40px;
}
.top_menu a{
	text-decoration:none;
	color:#5b5755;
	margin-left:1em;
}

.top_menu a:hover, .top_menu a.active {
	color:#ffcc00;
}

.top_menu ul, .top_menu li {
	list-style:none;
	padding:0;
	margin:0;
}
.top_menu ul {
	position:relative;	
}
.top_menu ul li .subwrapper, .top_menu ul li .subsocial, .top_menu ul li .subsearch, .top_menu ul li .sublang  {
	position:absolute;
	z-index:200;
	right:0;
	display:none;
}
.top_menu ul li ul {
	background-color:#ffcc00;
	z-index:1;
	white-space:nowrap;
	font-family:muli;
	padding: 0 .2em .2em .2em;
	margin:-.30em 0 0 0;
}
.top_menu ul li img  {
	margin-right:7.2em;
	margin-top:-.75em;
	height:.8em;
	width:1em;
	z-index:1;
}
.top_menu ul li div.subsocial img {
	margin-right:5em;
}
.top_menu ul li div.subsearch img {
	margin-right:2.7em;
}
.top_menu ul li div.sublang img {
	margin-right:0.4em;
}
.top_menu ul li ul a {
	font-size:.65em;
	line-height:.65em;
	color:#FFF;
	text-decoration:none;
	text-transform:uppercase;
	margin:0;
}
.top_menu ul li ul a:hover {
	color:#000000;
}
.top_menu li {
	display:inline-block;	
}
.top_menu ul li ul li {
	margin:0 .3em;	
}
.work {
	
	font-family:muli;
}

.tab, .gallery {
	padding:0 7%;	
}
.tab {

}
.tab a{
	font-size:1em;
	color:#424147;
	padding:.5em 1em;
	display:inline-block;
	text-decoration:none;
}
.tab a.active, .tab a:hover {
	background-color:#ffcc00;
}
.gallery {
	text-align:center;
	padding:1em 4.7% 0 4.7%;
	position:relative;
	
}
.gallery div.project {
	width:30%;
	padding-bottom:19.8%;
	position:relative;
	margin:1%;
	display:inline-block;
        -moz-user-select: none; 
        -khtml-user-select: none; 
        -webkit-user-select: none; 
        -o-user-select: none; 
	background-position:50% 50%;
	background-size:100%;
	background-repeat:no-repeat;
	overflow:hidden;
}
.project div {
	width:auto;
	padding:0;
	display:block;
}
.gallery div.project a{
	display:none;
	height:100%;
	width:100%;
	left:0;
	position:absolute;
	background-image:url(/images/plus.png);
	background-position:center center;
	background-size:35% 50%;
	background-repeat:no-repeat;
	background-color:#666;
	opacity:.50;
}
.gallery div.project:hover a{
	display:block;
}

.gallery .buff{
	width:90.4%;
	margin:1em 0 1em 0;
	height:100%;
	display:none;
	position:absolute;
	top:0;
}

.gallery #buff1{
	z-index:100;	
}
.gallery #buff2 {
	z-index:99;	
}

.cv {
	font-family:muli;	
}

.cv .intro {
	text-align:center;
	font-size:1.5em;
	color:#414146;
	margin-bottom:1.3em;
}

.cv .data {
	margin-top:2em;
	padding:0 8%;
}
.profile {
	width:100%;
	display:inline-block;
	vertical-align:top;
}
.profile .picture {
	position:relative;
	width:100%;
	padding-bottom:100%;
}
.profile .picture .photo{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	z-index:2;
}
.profile .picture .tip {
	position:absolute;
	top:35%;
	right:0;
	z-index:3;
}
.profile .text {
	background-color:#414146;
	padding:7% 5% 5% 0%;
	color:#FFF;
	font-size:1.3em;
	border-bottom:3px solid #ffcc00;
	margin-bottom:5%;
}
.profile .text strong, .title strong, .likes strong{
	color:#ffcc00;
}
.likes {	
	padding:5% 0 5% 0;
	
	border-bottom:3px solid #ffcc00;
}
.likes span {
	color:white;
	margin-left:5%;
	margin-bottom:1%;
	display:block;
	white-space:nowrap;
	font-size:1.2em;
	line-heigh:32px;
}
.likes span img{
	vertical-align:middle;
}
.likes .icons {
	width:100%;
	padding-bottom:46.1%;
	position:relative;
	
}
.likes .icons img {
	position:absolute;
	width:100%;
	height:100%;
	left:0;
}

.life {
	width:19.8%;
	margin:0 3.5%;
	display:inline-block;
	vertical-align:top;
	
}
.life h3, .skills h3 {
	background-color:#414146;
	color:#FFF;
	font-size:1.5em;
	font-weight:normal;
	padding:.1em .3em;
	border-bottom:3px solid #ffcc00;
	margin-top:0;
	margin-bottom:1em;
}
.life .step {
	background-repeat:repeat-y;
	background-position:5.35% 0;
}

.life .step.gray {
	background-image:url(/images/line_gray.png);	
}
.life .step.yellow {
	background-image:url(/images/line_yellow.png);	
}
.life .step .icon {
	position:relative;
	width:11.7%;
	padding-bottom:11.7%;
}
.life .step .icon img {
	position:absolute;
	width:100%;
	height:100%;
	left:0;
}
.life .step .icon, .life .step p {
	display:inline-block;
	vertical-align:top;
	margin:0;
}
.life .step p {
	width: 83%;
	padding:1.5% 1% 5.0% 1%;
	font-size:.77em;
}
.skills {
	width:39%;
	display:inline-block;
	vertical-align:top;
}
.cakes {
	width:45%;
	display:inline-block;
	vertical-align:top;
}
.graph {
	position:relative;
	width:100%;
	margin:1% 0;
}
.graph.middle {
	
	margin:32% 0;
}
.graph.middle.bar2 {
	margin: 21% 0 28% 0;
}
.graph img {
	position:absolute;
	width:100%;
	left:0;
	height:100%;
}

.cake1 {
	padding-bottom:69.9%;	
}

.cake2 {
	padding-bottom:72.1%;	
}
.cake3 {
	padding-bottom:76.08%;	
}
.bars {
	width:45%;
	margin-left:5%;
	display:inline-block;
	vertical-align:top;
}

.bar1 {
	padding-bottom:30.1%;	
}

.bar2 {
	padding-bottom:96.8%;
}
.bar3 {
	padding-bottom:103%;	
}



.bottom {
	background-color:#414146;	
	font-family:"muli";
}

.options {
	margin:0 9%;
	padding:2%  0;
	color:#FFF;
	font-size:.7em;
	line-height:1.4em;
}
.options .title {
	font-size:1.2em;	
	line-height:32px;
}
.options .col {
	margin:0 1%;
	width:27%;
	display:inline-block;
	vertical-align:top;
}
.options .col.middle {
	margin:0 8%;
	width:25%;
}
ul.social {
	padding:0;
}
ul.social li {
	display:block;
	margin:1em 0;
}
ul.social li img {
	vertical-align:middle;
	width:1.7em;
	height:1.7em;
	margin-right:.5em;
}
ul.social li a, ul.social li a:active, ul.social li a:hover{
	color:#FFF;
	text-decoration:none;
}
ul.social li a strong {
	color:#ffcc00;	
}
.button {
	display:inline-block;
	border-bottom:.3em solid #ffcc00;
	background-color:#000;
	color:#FFF;
	text-decoration:none;
	padding:.5em 1.5em;
	width:auto;
	height:auto;
}

.footer {
	border-bottom:.3em solid #ffcc00;
	background-color:#b5b5b5;
	color:#FFF;
	height:1em;
	padding:1em 5%;
	display:table;
	width:90%;
}
.footer li, .footer ul {
	display:inline-block;
	margin:0;
	padding:0;
}
.footer .copy, .footer .menu {
	display:table-cell;
	width:50%;
	vertical-align:top;
}
.footer .menu  .tip {
	display:none;	
}
.footer .menu {
	white-space:nowrap;
	text-align:right;
}
.footer .menu a {
	color:#FFF;
	text-transform:uppercase;
	text-decoration:none;
	margin-left:2em;
}
.footer .menu a:hover {
	color:#000;	
}
.footer .copy {
	color:#000;	
	font-size:.7em;
}


.project div.tv, .slider{
	width:auto;
	background-color:#999;
	padding-bottom:40%;
	margin:0;
	position:relative;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.slider {
	width:100%;
	padding-bottom:42%;
	position:relative;
	margin-top:2%;
}
.project .arrow, .slider .arrow {
	width:4%;
	height:20%;
	position:absolute;
	z-index:102;
	margin:0;
	margin-top:-4%;
	top:50%;
	background-color:#4c4c4c;
	cursor:pointer;
}
.project .arrow:hover, .slider .arrow:hover {
	background-color:#ffcc00;	
}
.project .arrow img, .slider .arrow img {
	position:absolute;
	width:34%;
	height:34%;
	top:33%;
	left:33%;
}
.project .arrow:hover .white, .project .arrow .black, .slider .arrow:hover .white, .slider .arrow .black{
	display:none;	
}
.project .arrow:hover .black, .slider .arrow:hover .black {
	display:block;	
}
.project .arrow.left, .slider .arrow.left {
	left:0;	
}

.project .arrow.right, .slider .arrow.right {
	right:0;	
}
.project .screen, .slider .screen{
	width:100%;
	height:100%;
	position:absolute;
	margin:0;
	background-position:center;
	background-repeat:no-repeat;
	background-size: auto 100%;
}
.slider .screen {
	background-size: 100% 100%;
}
.project #screen1, .slider #screen1 {
	z-index:100;	
}
.project #screen2, .slider #screen2 {
	z-index:99;	
}
.slider #remote {
	position:absolute;
	bottom:10%;
	width:100%;
	text-align:center;
	z-index:110;
}
.slider #remote div.thumb {
	width:1.2em;
	height:1.2em;
	background-color:#666;
	border:2px solid #666;
	display:inline-block;
}
.slider #remote div.selected{
	background-color:#fdce12;	
}
.project div.remote {
	width:auto;
	background-color:#424147;
	padding:0.2% 0.2% 10.2% 0.2%;
	margin:0;
	position:relative;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
	overflow:hidden;
	white-space:nowrap;
	cursor:w-resize;
}
.project div.remote .wrp {
	height:94%;
	margin:0;
	width:100%;
	text-align:center;
	position:absolute;
	
}
.project div.remote .wrp img{
	border:2px solid transparent;
	box-sizing: border-box;
	cursor:w-resize;
}
.project div.remote .wrp img.selected {
	border-color:#ffcc00;
}
.project .detail {
	margin:1% 0;
	text-align:left;
	font-size:.9em;
	line-height:1.4;
}

.project .detail  a{
	display:inline-block;
	height:auto;
	width:auto;
	left:auto;
	position:relative;
	background-position:0 0;
}

.project .recent {
	margin: 0 -2.7% 0 -2.7%;
}
.detail dl {
	clear:both;	
	font-size:.9em;
}
.detail dl a {
	text-decoration:none;
	color:inherit;
}
.detail dl dt, .detail dl dd {
	float:left;
	margin-top:.5em;
	line-height:1em;
}
.detail dl dt {
	clear:left;
	width:5.7em;
	color:#000;
}
.detail dl dd {
	padding-left:1em;
	border-left: 2px solid #666;
	color:#7d7d7d;
}