html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline; }
html, body {height: 100%}

body {
	font-family: 'Exo 2', sans-serif;
	font-weight: 400;
	background: rgb(23, 25, 27);
	color: #000;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	font-size: 15px;
	text-align: justify;
 }
 
a {	text-decoration: none; color: #fff; }
strong { font-weight: 700; }
p { padding-bottom: 15px;}

.right { float: right !important; }
.left {	float: left; }
.center { text-align: center; }
.break { clear: both; }

#nav {
	position: absolute;
	top: 0;
	width: 100%;
	height: 40px;
	background: rgba(193,195,197,0.5);
	z-index: 999;
	}

#navigation {
	vertical-align: top;
	margin: 0;
	display: inline-block;
	}
#social {
	vertical-align: top;
	height: 40px;
	}
	#navigation li, #social li {
		display: inline-block;
		padding: 4px 7px;
		color: #fff;
		}
	#navigation li {
		padding: 11px;
		}
	#navigation li:hover, #social li:hover {
		background: rgb(23, 25, 27);
		}
	#social ul a {
		font-family: 'Socialglyphs-Regular';
        float: left;
        font-size: 22px;
        line-height: 24px;
        text-decoration: none;
		text-align: center;
        color: #fff;
		width:30px; height:30px; border-radius:20px; border:1px solid #fff;
		}

.icon { display: none; }

#main {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -480px;
	margin-top: -275px;
	-webkit-perspective: 1500px;
       -moz-perspective: 1500px;
         -o-perspective: 1500px;
            perspective: 1500px;
	}

.container {
	width: 960px;
	margin: 0 auto;
	}

#content {
	display: none;
	}
	
.c-all {
	overflow:auto;
	max-width: 560px;
	max-height: 560px;
	}
	.c-all img {
		width: 100%;
		max-width: 236px;
		}
	.c-all a {
		color: #000;
		font-weight: bold;
		}

.one-fourth {
	width: 236px;
	display: inline-block;
	margin-bottom: -5px;
	}

.link {
	float: left;
	width: 236px;
	height: 177px;
	display: inline;
	margin: 2px;
	overflow: hidden;
	
	opacity: 0.5;
    filter: alpha(opacity=50);
	
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	}
	.link:hover {
		opacity: 1.0;
    	filter: alpha(opacity=100);
		
		-webkit-transition: all 1s ease;
		-moz-transition: all 1s ease;
		-ms-transition: all 1s ease;
		-o-transition: all 1s ease;
		transition: all 1s ease;
		}
	.link h1, .link h2, .link p {
		width: 236;
		height: 20px;
		background: rgba(23, 25, 27, 0.75);
		margin-top: 200px;
		padding: 10px;
		font-weight: normal;
		}
	.link p {
		margin-top: -40px;
		}
	.link:hover h1, .link:hover h2 {
		margin-top: 137px;
		
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease;
		}
	.link:hover p {
		margin-top: 0;
		
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease;
		}

.sq1 { background-image:url('../images/photo1.jpg'); }
.sq2 { background-image:url('../images/photo2.jpg'); }
.sq3 { background-image:url('../images/photo3.jpg'); }
.sq4 { background-image:url('../images/photo4.jpg'); }
.sq5 { background-image:url('../images/photo5.jpg'); }
.sq6 { background-image:url('../images/photo6.jpg'); }
.sq7 { background-image:url('../images/photo7.jpg'); }
.sq8 { background-image:url('../images/photo8.jpg'); }
.sq9 { background-image:url('../images/photo9.jpg'); }
.sq10 { background-image:url('../images/photo10.jpg'); }
.sq11 { background-image:url('../images/photo11.jpg'); }
.sq12 { background-image:url('../images/photo12.jpg'); }

.align-left {
	float: left;
	margin: 0px 10px 0 0;
	}
.align-right {
	float: right;
	margin: 0px 0px 0 10px;
	}

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

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		#main  { top:0; margin-left: -360px; margin-top: 42px; }
		.container  { width: 720px; }
		.last { display: inline; }
		}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		#main  { top:0; margin-left: -238px; margin-top: 42px; }
		.container  { width: 476px; }
		
		.icon { display: block; }
		#navigation { display: none; background: rgba(123,125,127,0.5); width: 478px; }
		#navigation li { display: block; padding: 10px 11px 9px 11px; }
		
		.c-all { max-height: none; }
		}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		#main  { top:0; margin-left: -120px; margin-top: 42px; }
		.container  { width: 240px; }
		
		.icon { display: block; }
		#navigation { display: none; background: rgba(123,125,127,0.5); width: 238px; }
		#navigation li { display: block; padding: 10px 11px 9px 11px; }
		
		.c-all { max-height: none; }
		}

/* varlov.com */
#va {
	position: fixed;
	left: 50%;
	bottom: 0px;
	margin-left: -21px;
	width: 42px;
	height: 11px;
	cursor: pointer;
	
	background: rgb(193,195,197);
	background-image:url('http://www.varlov.com/logo/va_41x50.png');
	opacity: 0.5;
    filter: alpha(opacity=50);
	
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	}
	#va:hover {
		width: 42px;
		height: 50px;
		
		opacity: 1;
    	filter: alpha(opacity=100);
	
		-webkit-transition-duration: 0.5s;
		transition-duration: 0.5s;
		}