@font-face {
	font-family: 'Avenir';
	src: url('fonts/Avenir.eot');
	src: local('☺'), url('fonts/Avenir.woff') format('woff'), 
		url('fonts/Avenir.ttf') format('truetype'), 
		url('fonts/Avenir.svg') format('svg');
	font-weight: normal;font-style: normal;
}
@font-face {
	font-family: 'Avenir Black';
	src: url('fonts/avenir-black-webfont.eot');
	src: local('☺'), url('fonts/avenir-black-webfont.woff') format('woff'), 
		url('fonts/avenir-black-webfont.ttf') format('truetype'), 
		url('fonts/avenir-black-webfont.svg') format('svg');
	font-weight: normal;font-style: normal;
}

@font-face {
	font-family: 'Avenir Heavy';
	src: url('fonts/avenir-heavy-webfont.eot');
	src: local('☺'), url('fonts/avenir-heavy-webfont.woff') format('woff'), 
		url('fonts/avenir-heavy-webfont.ttf') format('truetype'), 
		url('fonts/avenir-heavy-webfont.svg') format('svg');
	font-weight: normal;font-style: normal;
}

@font-face {
	font-family: 'Avenir Light';
	src: url('fonts/avenir-light-webfont.eot');
	src: local('☺'), url('fonts/avenir-light-webfont.woff') format('woff'), 
		url('fonts/avenir-light-webfont.ttf') format('truetype'), 
		url('fonts/avenir-light-webfont.svg') format('svg');
	font-weight: normal;font-style: normal;
}

@font-face {
	font-family: 'Avenir Medium';
	src: url('fonts/avenir-medium-webfont.eot');
	src: local('☺'), url('fonts/avenir-medium-webfont.woff') format('woff'), 
		url('fonts/avenir-black-medium.ttf') format('truetype'), 
		url('fonts/avenir-black-medium.svg') format('svg');
	font-weight: normal;font-style: normal;
}

@font-face {
    font-family: 'Avenir95Black';
    src: url('fonts/avenir95black.eot');
    src: url('fonts/avenir95black.eot') format('embedded-opentype'),
         url('fonts/avenir95black.woff') format('woff'),
         url('fonts/avenir95black.ttf') format('truetype'),
         url('fonts/avenir95black.svg#Avenir95Black') format('svg');
}

html {width:100%;height:100%;overflow-x: hidden;overflow-y:auto;}
body {background-image:url(../img/bg.png);background-color:#adadad;}
.bg-addon {
	z-index:0;
	position:fixed;
	display:none;
	top:0px;left:0px;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0);
	background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.3)));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
	background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
	background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
	background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=1 );
}

.wrapper {position:relative;z-index:1;max-width:1024px;margin-left:auto;margin-right:auto;}
.wrapper .content {padding-top:140px;padding-bottom:20px;color:#302943;font-family: 'Avenir';font-size:14pt;line-height:18pt;display:none;width:100%}
.wrapper .content h1 {font-family: 'Avenir Heavy';text-transform:uppercase;padding-bottom:10px;color:#c1d82f;letter-spacing:2px}

a {text-decoration:none;cursor:pointer;color:#c1d82f;font-family: 'Avenir Medium';}
a:hover {color:white}

.portfolio {overflow:hidden}
.portfolio div {float:left;width:230px;height:100px;overflow:hidden;  position: relative;cursor:pointer}
.portfolio div:before {
	background: rgba(19,16,26, 0.7);
	
 	-webkit-transition: background .3s linear;
	transition: background .3s linear;
	content: "";content: "";
	display: block;
 	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.portfolio div img {width:inherit;height:auto;display:block }

.portfolio div:hover:before { background: none;}

#logo {position:absolute;left:0px;width:300px;display:none}

.loading {width:100%;height:40px;overflow:hidden;position:absolute;display:none}
.loading .bar {
	width:0px;position:relative;height:inherit;background:#302943;
	-webkit-border-radius: 0px 99px 99px 0px;-moz-border-radius: 0px 99px 99px 0px;border-radius: 0px 99px 99px 0px;
}

.loading .footer {position:absolute;font-size:24px;font-family: 'Avenir Medium';padding-top:10px;color:#c1d82f;top:0px;left:0px;z-index:10;width:inherit;height:inherit;overflow:hidden;}
.loading .footer .wrapper .slogan {float:left;width:282px}
.loading .footer .wrapper .slogan li {float:left; list-style-type: none;display:none}
.loading .footer .wrapper .slogan li:nth-child(odd) {padding-left:5px;color:white}
.loading .footer .wrapper .copyright {float:right;font-size:12px;color:white;font-family: 'Avenir Light';display:none;line-height:24px;text-transform:uppercase}

.form  {clear:both;margin-bottom:20px;overflow:hidden;margin-left:150px}
.form .title {padding:10px;float:left;width:200px}
.form .field {border: 1px solid #544b60;float:left;background: #dddddd;width: 400px;border-radius: 10px;}
.form .field span {display:block;margin:10px;}
.form .field textarea,
.form .field input {border:0px;font-size:14pt;font-family: 'Avenir';width:100%;background-color:transparent}
.form .field textarea {height:200px}

.form #form-submit {float:left;background: #544b60;border-radius:25px;color:white;font-family: 'Avenir Heavy';cursor:pointer;padding:10px;text-align:center;font-size:12pt;width:150px}
.form #form-submit:hover {background:white;color:#544b60}

.bar .icon {display:none;position:absolute;top:5px;right:5px;width: 30px;overflow:hidden;height: 30px;background: url('../img/loading.png') left center;animation: icon_sprite .8s steps(10) infinite;z-index:10}
@keyframes icon_sprite {100% { background-position: -300px; }}
.bar .circle {position:absolute;display:none; width: 40px; height: 40px; background: #544b60; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; z-index:8} 
.bar .circle-inner {position:absolute;display:none; width: 34px; height: 34px; background:#302943; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; z-index:9} 

nav {position:absolute;top:0px;right:0px;}
.nav {position:absolute;top:0px;right:0px;opacity:0;z-index:100;font-size:12px;line-height:60px;font-family: 'Avenir';text-align:center;color:white;width:60px;height:60px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;background-color:#302943;overflow:hidden;}
.nav:hover {background-color:#636565;cursor:pointer}

.selected,.selected:hover {background-color:#c1d82f;color:#40395B}

.project-details {position:fixed;z-index:200;width:930px;height:420px;background-color:#302943;display:none;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;box-shadow: 5px 5px 5px black;overflow:hidden;}
.project-details .pic {float:left;margin:10px;position:relative;overflow:hidden}
.project-details .pic div {position:absolute;top:0px;left:0px;}
.project-details .pic div img {display:inline-block;height:auto}
.project-details .brief {float:left;margin:10px;margin-top:70px;margin-left:0px;margin-right:0px;width:410px;font-size:12pt;line-height:18pt;overflow:hidden}
.project-details .brief .item {clear:both;width:100%;overflow:hidden;color:white;padding:10px;;background-color:#544b60}
.project-details .brief .item div a {color:white;border-bottom:1px solid white}
.project-details .brief .item div a:hover {border-bottom:0px}
.project-details .brief .item div:first-child{float:left;width:30%;font-family: 'Avenir Medium';color:#c1d82f}
.project-details .brief .item div:nth-of-type(2){float:left;width: 64%;font-family: 'Avenir Light';}
.project-details .brief .item:nth-of-type(2n) {background-color:#6d617d}
.project-details .brief .item:first-of-type {border-radius: 10px 0px 0px 0px;-moz-border-radius: 10px 0px 0px 0px;-webkit-border-radius: 10px 0px 0px 0px;}
.project-details .brief .item:last-of-type {border-radius: 0px 0px 0px 10px;-moz-border-radius: 0px 0px 0px 10px;-webkit-border-radius: 0px 0px 0px 10px;}
.project-details .control {position:absolute;bottom:0px;right:0px;border-radius: 10px 0px 0px 0px;-moz-border-radius: 10px 0px 0px 0px;-webkit-border-radius: 10px 0px 0px 0px;background-color:rgba(91,91,91,1.00);color:white;padding:10px;font-size:10pt;font-family: 'Avenir';}
.project-details .control .disabled:hover,
.project-details .control .disabled {color:rgba(116,113,113,1.00);cursor:none}
.close-button {color: white;font: 30px/100% arial, sans-serif;position: absolute;right: 10px;text-decoration: none;top: 10px;cursor:pointer;}
.close-button:after {content: '✖'; /* UTF-8 symbol */}
.close-button:hover {color:#6d617d}

.rotate {font-size:24px;font-family: 'Avenir Medium';height:60px;width:270px;opacity:0;overflow:hidden;position:absolute;top:-20px;text-align:left;line-height:60px;-ms-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);transform: rotate(-90deg);	}

@media only screen and (max-width: 1000px) {
	.project-details {width:520px;height:700px;position:absolute}
	.project-details .pic {float:none;margin:10px;margin-top:50px;position:relative;overflow:hidden}
	.project-details .brief {float:none;margin:0px;margin-top:20px;width:100%}
	.project-details .brief .item div:first-child{float:left;width:20%;}
	.project-details .brief .item div:nth-of-type(2){float:left;width: 80%;}
	.project-details .brief .item:first-of-type {border-radius: 0px;-moz-border-radius: 0px;-webkit-border-radius: 0px;}
	.project-details .brief .item:last-of-type {border-radius: 0px;-moz-border-radius: 0px;-webkit-border-radius: 0px;}
	.project-details .control {bottom:auto;right:auto;top:0px;left:0px;border-radius: 0px 0px 10px 0px;-moz-border-radius: 0px 0px 10px 0px;-webkit-border-radius: 0px 0px 10px 0px;}
	.close-button {position: absolute;right: 10px;text-decoration: none;top: 10px;cursor:pointer;}
}

@media only screen and (max-width: 530px) {
	.project-details {width:100%;position:absolute;-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;box-shadow:none;overflow:hidden}
	.project-details .pic {float:none;margin:0px;margin-top:50px}
	.project-details .brief {margin-bottom:20px;}
	.project-details .brief .item div:first-child{float:left;width:20%;}
	.project-details .brief .item div:nth-of-type(2){float:left;width: 80%;}
	.project-details .brief .item:first-of-type {border-radius: 0px;-moz-border-radius: 0px;-webkit-border-radius: 0px;}
	.project-details .brief .item:last-of-type {border-radius: 0px;-moz-border-radius: 0px;-webkit-border-radius: 0px;}		
}

@media only screen and (max-width: 1024px) {
	.wrapper {margin-left:20px;margin-right:20px}
	.form  {margin-left:auto;margin-right:auto;width:80%}
	.form .title {float:none;width:100%;}
	.form .field {float:none;width:99%;}
	#empty-title {display:none}
}

@media only screen and (max-width: 560px) {
	.wrapper .content {padding-top:200px}
	.loading .footer .wrapper {text-align:center;width:100%;margin:0}
	.loading .footer .wrapper .slogan {float:none;clear:both;margin-left:auto;margin-right:auto}
	.loading .footer .wrapper .slogan {display:inline-block}
	.loading .footer .wrapper .copyright {float:none;clear:both;padding-top:10px}
}

@media only screen and (max-width: 350px) {
	#logo {width:250px}
}

.unselected {-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;user-select: none; }