/* General {{{ */

html, body { height: 100%; width: 100%;}
* { border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;outline:none; -webkit-text-size-adjust: 100%;} 

body {
	background: #4d4d4d;
	font: 12px/16px sans-serif;
}

@font-face {
	font-family: 'GillSans';
	src: url('/fonts/GillSans.eot'); /* IE9 Compat Modes */
	src: url('/fonts/GillSans.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('/fonts/GillSans.woff') format('woff'), /* Modern Browsers */
	     url('/fonts/GillSans.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('/fonts/GillSans.svg#svgFontName') format('svg'); /* Legacy iOS */

		 font-weight: normal;
		 font-style: normal;
	}

.gradient { 
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0; 
	top: 0;
	right: 0;
	bottom: 0;
	display: none;
}

.loading { position: absolute; left:0; top: 0; right: 0; bottom: 0; margin: auto; }

.menu {
	background: #FFF;
	width: 175px;
	height: 260px;
	position: absolute;
	left: -175px;
	top: 20px;
	z-index: 999;
	-webkit-transform: rotate3d(0,0,0,0);
}

.menu a {
	color: #444;
	text-decoration: none;
}

.menu a:hover {
	color: #000;
	border-bottom: 1px solid #CCC;
}

.menu li {
	text-align: center;
	line-height: 43px;
	border-top: 1px solid #EEE;
	text-transform: uppercase;
	list-style-type: none;
	font-family: "GillSans", sans-serif;
}


.menu li+li+li+li+li+li {
	font-size: 30px;
	line-height: 50px;
	height: 43px;
}

.menu li+li+li+li+li+li a:hover {
	border: none;
}

.menu li.selected {
	background: #EEE;
}

.logo {
	/* background: url(imgs/logo.png); */
	/* background-position: 100% 0; */
	/* background-repeat: no-repeat; */
	/* display: block; */
	/* height: 50px; */
	/* position: relative; */
	/* top: 50px; */
	/* width: 100%; */
	/* opacity: 0; */
	/* clear: both; */
	/* z-index: 999; */
}

.logo {
	background: url(imgs/logo.png);
	background-position: 100% 0;
	background-repeat: no-repeat;
	height: 40px;
	width: 270px;
	position: relative;
	display: inline-block;
	margin-right: 1%;
	z-index: 999;
	clear: both;
}

.content {
	position: relative;
	top: 20px;
	padding-left: 200px;
	z-index: 2;
}

.fullPage .content {
	position: absolute;
	right: 20px;
	left:20px;
	bottom: 20px;
	z-index: 2;
}

.fullPage .logo {
	background-image: url(imgs/logo.png);
	width: 270px;
	height: 40px;
	position: absolute;
	right: 1%;
	bottom: 1%;
	display: block;
	top: auto;
	opacity: 0;
	margin-right: auto;
}

.footer {
	text-align: right;
	width: 100%;
	clear: both;
}

.filmHolder {
	overflow: hidden;
	height: 100%;
	width: 100%;
	position: relative;
}

.content .slide {
	text-align: center;
	top: 0;
	width: 100%;
	bottom: 100px;
	display: none;
}

.content .slide div {
	height: 100%;
}

.current {
	box-shadow: 0 0 30px #000;
}

.jslide span {
	display: block;
}

.content .slide img {
	display: block;
	margin: auto;
	max-width: 100%;
	max-height: 100%;
	border: 20px solid #FFF;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.slide.precomposed img {
	border:none;
	box-shadow: none;
}

.Old .jslide {
	left: 100%;
	display: block!important;
	position:absolute;
}

.Modern .jslide {
	-webkit-transform: scale(0.7) translateX(130%);
	-webkit-transition: all .3s ease-in-out;
	-moz-transform: scale(0.7) translateX(130%);
	-moz-transition: all .3s ease-in-out;
	-ms-transform: scale(0.7) translateX(130%);
	-ms-transition: all .3s ease-in-out;
	display: block!important;
	position:absolute;
}

.slide h5 {
	color: #CCC;
	font: italic 11px/18px georgia,serif;
	text-shadow: #000 1px 1px 3px;
	font-weight: bold;
	text-align: center;
	margin-top: 15px;
}

.slide h5+h5 {
	font-weight: normal;
	margin: 0;
}

.slide.precomposed h5 {
	position: absolute;
	bottom: 20px;
	text-align: left;
	left: 0px;
}

.slide.precomposed h5+h5 {
	bottom: 5px;
}

.slide.precomposed {
	top: auto;
	bottom: auto;
	height: 100%;
}

.arrows {
	position: absolute;
	left: 30px;
	bottom: 60px;
	z-index: 999;
	display: none;
}

.arrows div {
	height: 44px;
	width: 45px;
	background: url(imgs/arrows.png);
	position: absolute;
	opacity: 0.3;
	cursor: pointer;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.arrows div:hover {
	opacity: 1;
}

.arrows div+div {
	background-position: 45px;
	left: 60px;
}

/* }}} General */

/* LargeScreen {{{ */
@media (min-width : 1650px) {
	.fullPage .content {
		padding-left: 0;
	}

	.slide.precomposed h5 {
		left: 200px;
	}

	.precomposed span {
		left: 50%;
		margin-left: -580px;
	}

}

/* }}} Large Screen */

/* About {{{ */

.aboutPage {
	background: #F5F5F5;
	width: 650px;
	height: 850px;
	padding: 70px 40px;
	margin: auto;

	box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.75),
	inset 0 0 50px rgba(0, 0, 0, 0.15);
	background: -moz-linear-gradient(-45deg, #f5f5f5 0%, #eeeeee 100%);
	background: -webkit-linear-gradient(-45deg, #F5F5F5 0%,#EEE 100%);
	background: -ms-linear-gradient(-45deg, #f5f5f5 0%,#eeeeee 100%);
	background: linear-gradient(135deg, #F5F5F5 0%,#EEE 100%);
	border-radius: 0 0 120px 120px / 0 0 6px 6px;
	position: relative;

	color: #4D4D4D;
	text-shadow: #FFF 1px 1px 1px;

	text-align: justify;
	-webkit-font-feature-settings: "liga", "dlig";
	-webkit-hyphens: auto;
	text-rendering: optimizeLegibility;

	-webkit-transform: rotate(10deg) translate(20%, -120%) scale(1);
	-moz-transform: rotate(10deg) translate(20%, -120%) scale(1);
	transform: rotate(10deg) translate(20%, -120%) scale(1);
	transition: all 0.4s;
	margin-bottom: 50px;

}

.aboutPage:before, .aboutPage:after {
	content: "";
	height: 98%;
	position: absolute;
	width: 100%;
	z-index: -1;
}
.aboutPage:before {
	background: #fafafa;
	box-shadow: 0 0 8px rgba(0,0,0,0.2), inset 0 0 50px rgba(0, 0, 0, 0.15);
	left: -5px;
	top: 4px;
	-moz-transform: rotate(-2.5deg);
	-webkit-transform: rotate(-2.5deg);
	transform: rotate(-2.5deg);
}
.aboutPage:after {
	background: #f6f6f6;
	box-shadow: 0 0 3px rgba(0,0,0,0.2), inset 0 0 50px rgba(0, 0, 0, 0.15);
	right: -3px;
	top: 1px;
	-moz-transform: rotate(1.4deg);
	-webkit-transform: rotate(1.4deg);
	transform: rotate(1.4deg);
}

.aboutPage p {
	margin-bottom: 10px;
}

.aboutPage a { 
	color: black;
	transition: all 0.3s;
}

.aboutPage a:hover {
	background: #DDD;
}

.aboutPage ::selection {
	color: #333;
	background: #DDD;
}

.aboutPage li, .page li {
	font-size: 15px;
	margin: 20px 0px 20px 0px;
	list-style-type: square;
}

.page li {
	color: #eee;
}

.sobre { position: absolute; right: 40px;top: 40px; }


/* }}} About */

/* Web {{{ */

.page {
	position: relative;
	top: -20px;
	color: #FFF;
	text-shadow: #000 1px 1px 1px;
	padding-left: 25px;
	margin-bottom: -50px;
}

.page a { color: white; }

.WebThumb {
    width: 200px;
    height: 200px;
    /* border-radius: 15px; */
    /* -webkit-box-shadow: 0px 0px 10px black; */
    box-shadow: 0px 0px 10px black;
    cursor: pointer;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
    
	transition: all 0.3s cubic-bezier(0,0.8,0.2,2);
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	transform: scale(0);

    float: left;
    margin: 0 20px 20px 0;
}

.WebThumb:hover {
	box-shadow: 0 0 30px black;
	-webkit-transform: scale(1.05)!important;
	-moz-transform: scale(1.05)!important;
	transform: scale(1.05)!important;
}

.WebThumb a {
	visibility: hidden;
}

.csstransforms3d .WebThumb {
	opacity: 1;
}


/* }}} Web */

/* Contact {{{ */

.card {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 500px;
	height: 270px;
	background: #4D4D4D;
	margin-left: -250px;
	margin-top: -135px;
	border-radius: 15px;
	box-shadow: 0px 2px 10px rgba(0,0,0,0.65);
	transition: all 2s cubic-bezier(0, 1, 0, 1);
	-webkit-transform: rotate(-20deg) translate(-20%, 300%) scale(1);
	-moz-transform: rotate(-20deg) translate(-20%, 300%) scale(1);
	transform: rotate(-20deg) translate(-20%, 300%) scale(1);
	/* background-image: url(imgs/card.png); */
	animation: firefoxTextRenderingHack 100s infinite;

	/* RotatedTextRenderingSuxOnWindows */
	display: none;
}

.card .logo {
	display: block;
	top: 20px;
	left: 20px;
}

.card .info {
	color: #D9D9D9;
	white-space: pre-line;
	text-align: right;
	font: 100 18px/24px sans-serif;
	position: absolute;
	right: 20px;
	top: 85px;
}

.card .areas {
	position: absolute;
	bottom: 20px;
	right: 20px;
	font-size: 18px;
	font-weight: 200;
	color: white;
}

.card .info a {
	color: #D9D9D9;
	text-decoration: none;
}

.card .info a:hover {
	text-decoration: underline;
}

.preload { display: none; }

.card * { /* opacity: 0; */ }

.rotatedCard {
	background: url(imgs/rotadedCard.png);
	width: 530px;
	height: 304px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -152px 0 0 -265px;

	transition: all 1s;
	-webkit-transform: rotate(-20deg) translate(-20%, 300%) scale(1);
	-moz-transform: rotate(-20deg) translate(-20%, 300%) scale(1);
	transform: rotate(-20deg) translate(-20%, 300%) scale(1);
}

.mailtoLink {
	position: absolute;
	top: 50%;
	width: 200px;
	height: 30px;
	left: 50%;
	margin-left: 36px;
	margin-top: -15px;
}

/* }}} Contact */

/* Photos {{{ */

.collection {
	width: 200px;
	height: 200px;
	overflow: hidden;
	float: left;
	border-radius: 20px;
	margin-right: 20px;
	box-shadow: 0 0 15px #000;
	white-space: nowrap;
}

.collection div {
	height: 100%;
	float: left;
	position: relative;
}

.collection img {
	height: 100%;
	display: inline-block;
}

.ie .collection img {
	max-width:100%;
}

.collection + h2 {
	position: absolute;
	top: 210px;
	color: #CCC; 
	font: 18px "GillSans"; 
	text-shadow: #000 1px 1px 3px; 
}

.cHolder {
	position: relative;
	float: left;
	margin-bottom: 50px;
}

.photoLightbox img {
	max-width: 100%;
	max-height: 100%;
	vertical-align: middle;
	border: 10px solid #FFF;
	box-shadow: 0 0 20px #000;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.photoLightbox {
	float: left;
	width: 220px;
	height: 170px;
	line-height: 200px;
	margin-right: 20px;
	margin-bottom: 20px;
	text-align: center;
}

.breadcrumbs, .breadcrumbs a {
	color: #ccc;
	font-size: 15px;
	font-weight: 100;
	text-decoration: none;
	text-shadow: #000 1px 1px 1px;
}

.breadcrumbs a {
	color: #fff;
}

/* }}} Photos */

/* Mobile General {{{ */

.mobile .arrows {
	display: none;
}

@media (max-width:1024px) {

	.desktop .slide.precomposed h5 {
		left: 160px;
		bottom: 30px;
	}

	.desktop .slide.precomposed h5+h5 {
		bottom: 15px;
	}

	 .menu {
		width: 100%;
		height: 40px;
		top: 0;
		text-align: justify;
	}

	 .menu li {
		border-left: 1px solid #EEE;
		border-top: 10px solid #FFF;
		width: 16.5%;
		line-height: 20px;
		height: 30px;
		display: inline-block;
	}

	 .menu li+li+li+li+li+li {
		position: absolute;
		top: 5px;
		line-height: 20px;
	}

	.menu li.selected {
		border-top: 10px solid #EEE;
	}

	 .content {
		left: 0;
		right: 0px;
		margin-top: 70px;
		top: auto;
		bottom: 5px;
		padding: 0;
	}

	.fullPage .content {
		top: 70px;
		right: 0;
		left: 0;
		bottom: 5px;
		margin-top: 0;
	}

	 .content .slide div {
		margin-right: 0;
	}

	 .fullPage .logo {
		width: 200px;
		height: 30px;
		right: 5px;
		bottom: 5px;
		background-size: 200px 30px;
	}

	 .menu li+li+li+li+li {
		border-right: 1px solid #eee;
	}

	 .menu li+li+li+li+li+li {
		top: 3px;
		font-size: 20px;
		right: 0;
		border-left: none;
		border-right: none;
	}

	 .slide.precomposed h5 {
		left: 10px;
		bottom: 15px;
	}

	 .slide.precomposed h5+h5 {
		bottom: 0;
	}

	 .slide h5+h5 {
		font-weight: normal;
		bottom: -3px;
	}

	 .slide.precomposed {
		top: 0px;
		bottom: 30px;
	}

	 .content .slide img {
		border: 5px solid #FFF;
	}

	 .content .slide.precomposed img {
		border: none;
	}

	.current {
		box-shadow: 0 0 10px #000;
	}
}

@media (max-width:700px) {
	 .menu li {
		width: auto;
		border-left: none!important;
		border-right: none!important;
		border-top: 10px solid #FFF;
		line-height: 30px;
		display: inline-block;
		margin-right: 5px;
		font-size: 11px;
	}

	 .menu li:first-child {
		margin-left: -15px;
	}

	 .menu {
		height: 50px;
		text-align: center;
	}

	.menu li.selected {
		border-bottom: 10px solid #EEE;
	}

	 .logo {
		width: 135px;
		height: 20px;
		/* display: block; */
		background-size: 135px 20px;
	}

	 .slide h5 {
		font: bold italic 8px/12px georgia,serif;
	}

	.slide.precomposed h5 {
		position: absolute;
		bottom: 10px;
		left: 10px;
	}

	.slide.precomposed h5+h5 {
		bottom: 0px;
	}

}

@media (max-width:320px) {
	 .menu li {
		line-height: 15px;
	}

	.menu li+li+li+li+li+li {
		line-height: 17px;
	}

	 .menu { 
		height: 35px;
	}

	.menu li.selected {
		border: none;
		background: white;
	}

	 .content {
		/* top: 40px; */
		bottom: 2px;
	}

	.fullPage .logo {
		height: 15px;
		bottom: 2px;
		background-size: 100px 15px;
	}

	 .slide h5 {
		font: bold italic 7px/10px georgia,serif;
	}

	.content .slide {
		bottom: 25px;
	}

	 .slide.precomposed h5 {
		bottom: 8px;
	}

	.current {
		box-shadow: 0 0 5px #000;
	}


}

@media (max-height:320px) {
	 .slide h5 {
		font: bold italic 5px/8px georgia,serif;
		text-align: left;
		margin-top: 5px;
		margin-left: 5px;
	}

	 .slide h5+h5 {
		 margin-left: 5px;
	 }

	 .fullPage .content {
		top: 40px;
	}
}

.iPadLandscapeBug_iOS7.fullPage body { position: fixed; }


/* }}} Mobile General */

/* Mobile About {{{ */

@media (max-width: 1024px) {

	.aboutPage {
		-webkit-transform: rotate(0deg) translate(0%, -120%) scale(1);
		transform: rotate(0deg) translate(0%, -120%) scale(1);
		margin-bottom: 90px;
		width: auto;
		height: auto;
		max-width: 650px;
	}

}

@media (max-width:320px) {
	.aboutPage:before, .aboutPage:after {
		display: none;
	}

	.aboutPage {
		width: auto;
		height: auto;
		padding: 30px 20px;
	}

	.sobre { right: 10px;top: 10px; }

}


/* }}} Mobile About*/

/* Mobile Photos {{{ */

.mobile .collection {
	width: 120px;
	height: 120px;
	overflow: hidden;
	float: left;
	border-radius: 5px;
	margin: 0 20px;
	box-shadow: 0 0 15px #000;
	white-space: nowrap;
}

.mobile .collection + h2 {
	top: 130px;
	font: 12px "GillSans"; 
	margin-left: 20px
}

@media (max-width: 1024px) {
	.breadcrumbs, .photoLightbox {
		margin: 0 20px;
	}

	.photoLightbox { width: 210px; }
}

@media (max-width: 320px) {
	.photoLightbox { width: 80%; }
}

/* }}} Mobile Photos  */

/* Mobile Web {{{ */


.mobile .page {
	left: 0;
	bottom: 25px;
	padding-left: 10px;
	/* -webkit-overflow-scrolling: touch; */
}


@media (max-width:600px) {
	.mobile .WebThumb {
		zoom: 0.35;
	}

	.mobile .page li {
		font-size: 10px;
		margin: 10px 0px 10px 10px;
	}

}

@media (min-width: 768px) and (max-width: 1024px) {
	.mobile .page {
		padding-left: 40px;
	}

	.mobile .WebThumb {
		zoom: 0.8;
	}
}


/* }}} Mobile Web */

/* Mobile Contact {{{ */

@keyframes firefoxTextRenderingHack {
	from { -moz-transform: rotate(-2.0deg) rotate3d(0, 0, 0, 0deg); }
	to { -moz-transform: rotate(-2.1deg) rotate3d(0, 0, 0, 0deg); }
}

.mobile .rotatedCard {
	-webkit-transform: rotate(0deg) translate(0%, 300%) scale(1);
	transform: rotate(0deg) translate(0%, 300%) scale(1);
}

@media (max-width : 600px) {
	.rotatedCard, .mailtoLink {
		zoom: 0.35;
	}
}

/* }}} Mobile Contact */

/* ImageEditing  {{{*/

.ImgEdit {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 50px;
	top: 0;
	text-align: center;
	color: #EEE;
}

.ImgEdit div {
	display: inline-block;
	height: 100%;
	position: relative;
}

.ie8 .beforeAfter div {
	display: block;
}

.beforeAfter img {
	margin: auto;
	box-shadow: 0 0 20px #000;
	display:none;
	max-height: 100%;
	max-width: 100%;
	cursor: pointer;
	margin-bottom: 10px;
}

.beforeAfter span {
	width: 12px;
	height: 12px;
	display: inline-block;
	border-radius: 12px;
	margin-right: 5px;
	cursor: pointer;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	position: relative;
	top: -20px;
	/* background: #FFF; */
	/* opacity: 0.3; */
	background: black;
	opacity: 0.5;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

.ImgEdit p, .ImgEdit h2 {
	font: 200 15px "Helvetica Neue", Helvetica, sans-serif;
	text-shadow: -1px 2px 3px #000;
	position: relative;
	text-align: left;
	margin-top: 5px;
}

.moz .beforeAfter p, .moz .beforeAfter h2 {
	margin-left: 15px;
}

.ImgEdit h2 {
	font: italic 12px georgia, serif;
	color: #BBB;
}

.beforeAfter span.selected {
	opacity: 0.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
	background: white;
}

.beforeAfter img.selected {
	display: block;
}

.ie8 .beforeAfter p, .ie8 .beforeAfter h2 {
	margin-left: 200px;
}

.ie8 .ie8animation { display: block; }
.ie8animation { display: none; }

.ImgEdit {
	display: none;
}

.video.ImgEdit video {
	margin: auto;
	display: block;
	max-height: 100%;
	max-width: 100%;
	box-shadow: 0 0 20px #000;
}

.ImgEdit a {
	color: #eee;
}

@media  (max-height: 800px) {
	.desktop .ImgEdit {
		bottom: 110px;
	}
}

/* }}} ImageEditing */

/* Mobile ImageEditing {{{ */

@media (max-width: 1024px) {
	.beforeAfter h2 { font-size: 9px; }

	.beforeAfter span {
		width: 8px;
		height: 8px;
		margin-right: 0;
		top: -35px;
	}

}

@media (max-height: 320px) {
	.beforeAfter {
		bottom: 15px;
	}

	.beforeAfter p { 
		font-size: 7px;
		margin-top: 0;
	}

	.beforeAfter h2 { 
		font-size: 4px;
		margin-top: 0;
	}

	.beforeAfter span { 
		top: -40px;
		zoom: 0.5
	}

	.beforeAfter img { 
		margin-bottom: 5px;
	}
}

@media (max-width: 1024px) {
	.mobile .composite {
		zoom: 0.7;
	}
}

@media (max-width: 700px) {
	.mobile .composite {
		zoom: 0.3;
	}
}


/* }}} Mobile ImageEditing */

/* Other {{{ */

.article {
	width: 700px;
	color: #EEE;
	text-shadow: #000 1px 1px 1px;
	margin: auto;
}

.article h2 {
	color: #FFF;
	font: 18px/25px "Gill Sans";
	border-bottom: 2px solid #B3B3B3;
	width: 100%;
	margin-bottom: 20px;
}

.article a { 
	color: #eee;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

.article a:hover {
    background: #E6E6E6;
    color: #4d4d4d;
    text-shadow: white 1px 1px 1px;
}

.article p {
	margin: 10px 0px 10px 0px;
}

pre {
	font: 10px monaco, monospace;
	padding: 20px;
	background: #595959;
	margin: 10px 0px 10px 0px;
	overflow: scroll;
}

@media (max-width: 700px) {
	.article {
		width: 90%;
	}

	.article img {
		max-width: 100%;
	}
}
/* }}} Other */

/* }}} 404 */

big, small {
	font-size: 830%;
	position: absolute;
	left: 50%;
	top: 50%;
	color: #CCC;
	margin-left: -84px;
	font-weight: 100;
}

small {
	font-size: 80%;
	margin-top: 50px;
	text-transform: uppercase;
	letter-spacing: 5px;
	padding-left: 5px;
}
