@import url(reset.css);

/* =body
************************************************************** */

html, body {
	height: 100%;
}

body {
	background: #fff url(i/bg/bg.png?v=2) no-repeat left top;
	font: normal 69% "Trebuchet MS", Helvetica, sans-serif;
	color: #9b9b9b;
}

body.en {
	background-image: url(i/bg/bg-en.png?v=2);
}

#social-wrapper {
	padding-bottom: 75px;
	background: url(i/bg/socialmedia.png) no-repeat center bottom;
}

#site {
	position: relative;
	width: 500px;
	margin: 0 auto;
	padding-left: 20%;
	padding-bottom: 50px;
	min-height: 578px;
}

h1 {
	position: absolute;
	left: 50%;
	top: 63px;
	width: 182px;
	height: 140px;
	margin-left: -91px;
	background: url(i/logo.png) no-repeat left top;
	text-indent: -1000em;
}

h1 a {
	position: absolute;
	left: 0;
	top: 0;
	width: 182px;
	height: 140px;
}

.main h1 {
	top: 148px;
	width: 402px;
	height: 326px;
	margin-left: -201px;
	background-image: url(i/logo-big.png);
}

.main h1 a {
	width: 402px;
	height: 326px;
}

.main p {
	font-weight: bold;
}

/* =masthead
************************************************************** */

#masthead {
	position: relative;
	height: 269px;
}

.portfolio #masthead {
	height: 28px;
	padding-top: 270px;
}

.contact #masthead {
	height: 28px;
	padding-top: 241px;
}

/* =languages
************************************************************** */

#languages {
	position: absolute;
	top: 21px;
	right: 18px;
}

#languages a,
#languages span {
	margin: 0 6px;
	color: #8e8e8e;
	text-transform: uppercase;
	font-weight: bold;
}

#languages span.selected {
	font-weight: bold;
	color: #ff0000;
}

/* =projects
************************************************************** */

#projects {
	list-style: none;
}

#projects:after {
	content: "";
	display: block;
	height: 0;
	overflow: hidden;
	clear: both;
}

#projects li {
	float: left;
	padding: 4px;
}

#projects li a {
	display: block;
	width: 158px;
	height: 120px;
	background-position: left top;
	background-repeat: no-repeat;
	text-indent: -1000em;
	overflow: hidden;
}

#projects li a:hover {
	background-position: left -120px;
}

#projects li.smg a {
	background-image: url(i/projects/smg.png);
}

#projects li.lambda a {
	background-image: url(i/projects/lambda.png);
}

#projects li.jabar a {
	background-image: url(i/projects/jabar.png);
}

#projects li.keysolution a {
	background-image: url(i/projects/keysolution.png);
}

#projects li.myperfume a {
	background-image: url(i/projects/myperfume.png);
}

#projects li.michelin a {
	background-image: url(i/projects/michelin.png);
}

#projects li.yad a {
	background-image: url(i/projects/yad.png);
}

#projects li.dj a {
	background-image: url(i/projects/dj.png);
}

#projects li.bambam a {
	background-image: url(i/projects/bambam.png);
}

#projects li.medrun a {
	background-image: url(i/projects/medrun.png);
}

#projects li.kis a {
	background-image: url(i/projects/kis.png);
}

#projects li.nid a {
	background-image: url(i/projects/nid.png);
}

#projects li.sng a {
	background-image: url(i/projects/sng.png);
}

#projects li .info {
	display: none;
}

/* =contact
************************************************************** */

.contact #main {
	background-image: none;
}

.contact .grid{
	float: left;
	padding-left: 22px;
	width: 306px;
	background: url(i/common/v-separator.gif) repeat-y left top;
}

.grid label {
	display: block;
	margin-bottom: 2px;
}

.grid .cell {
	margin-bottom: 10px;
	font-size: 13px;
}

.grid .field {
	width: 296px;
	height: 17px;
	padding: 4px 5px 0;
	background: url(i/contact/input.png) no-repeat left top;
}

.grid .text-field {
	width: 296px;
	height: 109px;
	padding: 4px 5px;
	background: url(i/contact/textarea.png) no-repeat left top;
}

.grid .field input {
	font-size: 11px !important;
	border: none;
	background: none;
	color: #000;
	padding: 0;
	height: 17px;
	width: 296px;
}

.grid .text-field textarea {
	font-size: 11px !important;
	font-family: "Trebuchet MS", Helvetica, sans-serif !important;
	border: none;
	background: none;
	color: #000;
	padding: 0;
	height: 109px;
	width: 296px;
}

.contact .info {
	float: left;
	width: 153px;
	padding-right: 19px;
	text-align: right;
}

.contact .info .section {
	margin-bottom: 21px;
}

.contact .info p {
	margin-bottom: 10;
	font-size: 13px;
}

.contact .info .title {
	font-weight: bold;
}

.contact .btn input {
	color: #9b9b9b;
	font-weight: bold;
	font-size: 11px !important;
	border: none;
	background: none;
	padding: 0;
	cursor: pointer;
}

/* =nav
************************************************************** */

#nav {
	list-style: none;
	position: absolute;
	width: 81px;
	height: 70px;
	top: 128px;
	left: 141px;
}

.safari #nav {
	top: 124px;
}

#nav li {
	font-family: "Courier New", Courier, monospace;
	font-size: 1.45em;
}

.safari #nav li {
	margin-bottom: 1px;
}

.chrome #nav {
	top: 119px;
}

#nav li a {
	color: #ff0000;
	text-decoration: none;
}

.safari #nav li a {
	font-size: 13px;
}

#nav li a:hover,
#nav li.selected a {
	color: #fff;
}

/* =main
************************************************************** */

#main {
	padding-top: 11px;
	/*background: url(i/common/h-separator.gif) repeat-x left top;*/
}

#main p {
	line-height: 1.4em;
}

.about #main {
	text-align: center;
}

.about #main p {
	margin-bottom: 15px;
	text-align: justify;
	font-size: 13px;
}

.offer #main {
	padding-top: 0;
	background-image: none;
}

.offer #main p {
	margin-bottom: 16px;
	padding-top: 11px;
	background: url(i/common/h-separator.gif) repeat-x left top;
}

.offer #main .social-media p {
	padding: 0;
	margin-bottom: 15px;
	text-align: justify;
	background: none;
}

.offer #main ul {
	margin-left: 25px;
	list-style: none;
	font-size: 13px;
}

.offer #main ul li {
	margin-bottom: 5px;
	font-weight: bold;
}

.offer #main ul li li {
	margin-bottom: 0;
	font-weight: normal;
	color: #7b7b7b;
}

.offer #main ul li li a{
	color: #7b7b7b;
}

.portfolio h2 {
	font-weight: bold;
	text-align: center;
}

.message {
	font-weight: bold;
	text-align: center;
	color: #ff0000;
}

/* =buttons
************************************************************** */

.btn {
	
}

.btn:after {
	content: "";
	display: block;
	height: 0;
	overflow: hidden;
	clear: both;
}

.submit-contact-button {
	display: block;
	float: left;
	width: 80px;
	height: 25px;
	background: url(i/buttons/contact-btn.png) no-repeat left top;
	text-indent: -1000em;
	border: none;
}

/* =modal
************************************************************** */

#modal-bg {
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	background-color: #000;
	opacity: 0.6;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	z-index: 90;
}

#modal {
	display: block;
	position: fixed;
	top: 50%;
	left: 50%;
	margin: 0 auto auto -372px;
	border: 25px #000 solid;
	background-color: #101010;
	width: 744px;
	z-index: 91;
	font-family: Tahoma, Geneva, sans-serif;
}

#modal h2 {
	font-size: 1.64em;
	color: #fff;
	font-weight: bold;
	margin-bottom: 12px;
}

#modal .descr {
	float: left;
	width: 300px;
	padding-right: 26px;
}

#modal .images {
	float: left;
	width: 268px;
	padding-left: 33px;
	background: url(i/modal/separator.gif) no-repeat left top;
}

#modal .images .imgs-inner {
	margin-bottom: 12px;
	height: 195px;
}

#modal .images .paging {
	text-align: center;
}

#modal .images .paging a {
	size: 0.91em;
	color: #525252;
	margin: 0 5px;
	font-weight: bold;
	text-decoration: none;
}

#modal .images .paging a:hover,
#modal .images .paging a.selected {
	color: #ff0000;
}

#modal .close {
	display: block;
	position: absolute;
	top: 7px;
	right: 9px;
	font-size: 0.91em;
	color: #383838;
	padding: 2px 0;
	padding-left: 14px;
	background: url(i/icons/close.gif) no-repeat left center;
	text-transform: uppercase;
	font-weight: bold;
}

#modal .close:hover {
	text-decoration: underline;
}

#modal .inner {
	padding: 29px;
	color: #b4b4b4;
}

#modal .inner p {
	line-height: 1.5em;
}

#modal .inner p.link {
	padding-top: 30px;
}

#modal .inner p a {
	color: #fefefe;
	text-decoration: none;
}

#modal .inner p a:hover {
	text-decoration: underline;
}

/* =general
************************************************************** */

a {
	color: #9b9b9b;
	outline: none;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.semantic {
	display: none;
}

.columns:after {
	content: "";
	display: block;
	height: 0;
	overflow: hidden;
	clear: both;
}

/* =sizes
************************************************************** */

 .size0 { background: none;}
 .size1 { width: 1%;}   .size2 { width: 2%;}  .size3 { width: 3%;}    .size4 { width: 4%;}
 .size5 { width: 5%;}   .size6 { width: 6%;}  .size7 { width: 7%;}    .size8 { width: 8%;}
 .size9 { width: 9%;}  .size10 { width: 10%;} .size11 { width: 11%;} .size12 { width: 12%;}
.size13 { width: 13%;} .size14 { width: 14%;} .size15 { width: 15%;} .size16 { width: 16%;}
.size17 { width: 17%;} .size18 { width: 18%;} .size19 { width: 19%;} .size20 { width: 20%;}
.size21 { width: 21%;} .size22 { width: 22%;} .size23 { width: 23%;} .size24 { width: 24%;}
.size25 { width: 25%;} .size26 { width: 26%;} .size27 { width: 27%;} .size28 { width: 28%;}
.size29 { width: 29%;} .size30 { width: 30%;} .size31 { width: 31%;} .size32 { width: 32%;}
.size33 { width: 33%;} .size34 { width: 34%;} .size35 { width: 35%;} .size36 { width: 36%;}
.size37 { width: 37%;} .size38 { width: 38%;} .size39 { width: 39%;} .size40 { width: 40%;}
.size41 { width: 41%;} .size42 { width: 42%;} .size43 { width: 43%;} .size44 { width: 44%;}
.size45 { width: 45%;} .size46 { width: 46%;} .size47 { width: 47%;} .size48 { width: 48%;}
.size49 { width: 49%;} .size50 { width: 50%;} .size51 { width: 51%;} .size52 { width: 52%;}
.size53 { width: 53%;} .size54 { width: 54%;} .size55 { width: 55%;} .size56 { width: 56%;}
.size57 { width: 57%;} .size58 { width: 58%;} .size59 { width: 59%;} .size60 { width: 60%;}
.size61 { width: 61%;} .size62 { width: 62%;} .size63 { width: 63%;} .size64 { width: 64%;}
.size65 { width: 65%;} .size66 { width: 66%;} .size67 { width: 67%;} .size68 { width: 68%;}
.size69 { width: 69%;} .size70 { width: 70%;} .size71 { width: 71%;} .size72 { width: 72%;}
.size73 { width: 73%;} .size74 { width: 74%;} .size75 { width: 75%;} .size76 { width: 76%;}
.size77 { width: 77%;} .size78 { width: 78%;} .size79 { width: 79%;} .size80 { width: 80%;}
.size81 { width: 81%;} .size82 { width: 82%;} .size83 { width: 83%;} .size84 { width: 84%;}
.size85 { width: 85%;} .size86 { width: 86%;} .size87 { width: 87%;} .size88 { width: 88%;}
.size89 { width: 89%;} .size90 { width: 90%;} .size91 { width: 91%;} .size92 { width: 92%;}
.size93 { width: 93%;} .size94 { width: 94%;} .size95 { width: 95%;} .size96 { width: 96%;}
.size97 { width: 97%;} .size98 { width: 98%;} .size99 { width: 99%;} .size100 { width: 100%;}