/***** General formatting only ****/

@font-face {  
	  font-family: "Amaranth";
	  src: local("Amaranth"), url( /fonts/Amaranth.ttf ) format("truetype"); /* non-IE */
	}
@font-face {
	  font-family: "Brawler";
	  src: local("Brawler"), url( /fonts/Brawler.otf ) format("opentype"); /* non-IE */
	}
@font-face {
	  font-family: "Candal";
	  src: local("Candal"), url( /fonts/Candal.otf ) format("truetype"); /* non-IE */
	}
@font-face {
	  font-family: "FrancoisOne";
	  src: local("FrancoisOne"), url( /fonts/FrancoisOne.ttf ) format("truetype"); /* non-IE */
	}
@font-face {
	  font-family: "GenR";
	  src: local("GenR"), url( /fonts/GenR.ttf ) format("truetype"); /* non-IE */
	}
@font-face {
	  font-family: "Kreon-R";
	  src: local("Kreon-R"), url( /fonts/Kreon-R.ttf ) format("truetype"); /* non-IE */
	}

@font-face {
	  font-family: "Playfair";
	  src: local("Playfair"), url( /fonts/PlayfairDisplay-Regular.otf ) format("opentype"); /* non-IE */
	}
@font-face {  
	  font-family: "Podkova";
	  src: local("Podkova"), url( /fonts/Podkova-Regular.ttf ) format("truetype"); /* non-IE */
	}
@font-face {
	  font-family: "Radley";
	  src: local("Radley"), url( /fonts/Radley.otf ) format("opentype"); /* non-IE */
	}
@font-face {
	  font-family: "Rokkitt";
	  src: local("Rokkitt"), url( /fonts/Rokkitt.otf ) format("opentype"); /* non-IE */
	}
	 
html {
    height:100%;
    margin:0;
    padding:0;
}

body {
background:#060606 url('images/grunge.jpg') no-repeat left center fixed;
font:normal 12px helvetica, verdana, arial, sans-serif;
color:#fff;
text-align:center;
height:100%;
margin:0;
padding:0;
}

img {border:0;}

div.page {
margin:auto;
position:relative;
padding:0;
width: 800px;
text-align:center;
background-color:#000;
}

a:link , a:visited {
font: normal 11px verdana, helvetica, sans-serif;
text-decoration: none;
color: #777;
}

a:hover {
text-decoration: none;
color: #fff;
}

a:focus {
outline: none;
}


h1 {
font: normal 22px "Kreon-R", helvetica, sans-serif;
color:#fff;
}
h2 {
font: bold 34px Georgia, helvetica, sans-serif;
color:#fff;
text-style:italic;
text-transform:uppercase;
-moz-text-shadow: 1px 1px 0px #000,2px 2px 1px #FF3C00;
-webkit-text-shadow: 1px 1px 0px #000,2px 2px 1px #FF3C00;
text-shadow: 1px 1px 0px #000,2px 2px 1px #FF3C00;
}
h3 {
font: bold 24px Georgia, helvetica, sans-serif;
color:#fff;
text-transform:uppercase;
-moz-text-shadow: 0 1px 1px #FF3C00;
-webkit-text-shadow: 0 1px 1px #FF3C00;
text-shadow: 0 1px 1px #FF3C00;
}
h4 {
font: italic 18px Georgia, serif;
color:#fff;
line-height:18px;
padding:0;
padding-left:30px;
margin-top:-6px;
margin-bottom:-10px;
}

h5 {
font: bold 20px Georgia, helvetica, sans-serif;
line-height:24px;
color:#ddd;
margin:0;
letter-spacing:1px;
padding-bottom:4px;
background-color:rgba(0,0,0,0.25);
border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
text-shadow: 1px 1px 2px #000;
-moz-text-shadow: 1px 1px 2px #000;
-webkit-text-shadow: 1px 1px 2px #000;
box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 8px rgba(255,255,255,0.1), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
-o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 8px rgba(255,255,255,0.1), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 8px rgba(255,255,255,0.1), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
-moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 8px rgba(255,255,255,0.1), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
}

h6 {
font: normal 11px Georgia, helvetica, sans-serif;
color:#2c2c2c;
margin-top:10px;
margin-left:10px;
}
h7 {
font: bold italic 26px Georgia, serif;
color:#fff;
line-height:34px;
text-shadow: 1px 1px 0px #000,2px 2px 0px #58C608;
-moz-text-shadow: 1px 1px 0px #000, 2px 2px 0px #58C608;
-webkit-text-shadow: 1px 1px 0px #000, 2px 2px 0px #58C608;
}

.trash {
font-weight:bold;
}
/**************** HEAD *****************/

div.header {
width:800px;
height:170px;
text-align:center;
position:relative;
margin:auto;
background:transparent url('images/content1.png') no-repeat bottom center;
}

/**************** PANEL *****************/
.panel {
position: fixed;
top: 100px;
left: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 180px;
height: auto;
padding: 10px 10px 10px 10px;
filter: alpha(opacity=85);
opacity: .85;
}

a.trigger{
position: fixed;
z-index:100;
text-decoration: none;
top: 80px; left: 0;
font-size: 12px;
font-family: verdana, helvetica, arial, sans-serif;
color:#ddd;
padding: 5px 40px 5px 10px;
background: url(images/plus.png) 85% 50% no-repeat;
background-color: rgba(0,0,0,0.25);
border: 1px solid rgba(0,0,0,0.5);
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 8px rgba(255,255,255,0.1), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
-o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 8px rgba(255,255,255,0.1), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 8px rgba(255,255,255,0.1), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
-moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 8px rgba(255,255,255,0.1), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
display: block;
}

a.trigger:hover{
position: fixed;
text-decoration: none;
top: 80px; left: 0;
color:#fff;
background: url(images/plus.png) 85% 50% no-repeat;
background-color: rgba(0,0,0,0.25);
box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 8px rgba(255,255,255,0.15), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
-o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 8px rgba(255,255,255,0.15), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 8px rgba(255,255,255,0.15), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
-moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 8px rgba(255,255,255,0.15), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
}

a.active.trigger {
background: url(images/minus.png) 85% 55% no-repeat;
background-color: rgba(0,0,0,0.25);
}

div.noborder {
border:none;
}
/**************** MENU *****************/

div.menu_div {
margin: 0 auto;
width: 800px;
height:40px;
text-align:center;
background-color: rgba(255,255,255,0.15);
border: 1px solid rgba(0,0,0,0.5);
position:fixed;
z-index:2;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.5), inset 0 8px rgba(255,255,255,0.1), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
-o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.5), inset 0 8px rgba(255,255,255,0.1), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.5), inset 0 8px rgba(255,255,255,0.1), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
-moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.5), inset 0 8px rgba(255,255,255,0.1), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
display: block;
}

div.menu_div ul {
list-style: none;
margin-top: 0px;
margin-left:300px;
padding: 0;
text-align:center;
}

div.menu_div li {
float: left;
width:100px;
height:40px;
}

a.menu:link , a.menu:visited {
color:#ddd;
font: normal 12px verdana, "Kreon-R", trebuchet, helvetica, Georgia, arial, sans-serif;
text-decoration: none;
text-transform:uppercase;
letter-spacing:1px;
padding:14px 0px 14px 0px;
display:block;
width:100px;
box-shadow: inset 1px 0 rgba(255,255,255,0.1), inset -1px 0 rgba(0,0,0,0.5);
-o-box-shadow: inset 1px 0 rgba(255,255,255,0.1), inset -1px 0 rgba(0,0,0,0.5);
-webkit-box-shadow: inset 1px 0 rgba(255,255,255,0.1), inset -1px 0 rgba(0,0,0,0.5);
-moz-box-shadow: inset 1px 0 rgba(255,255,255,0.1), inset -1px 0 rgba(0,0,0,0.5);
}

/*
-moz-border-radius-topright: 10px 10px;
border-top-right-radius: 10px 10px;
-moz-border-radius-bottomleft: 10px 10px;
border-bottom-left-radius: 10px 10px;
*/

a.menu:hover {
color:#fff !important;
text-decoration: none;
padding:15px 0px 13px 0px;
background-color: rgba(0,0,0,0.25);
box-shadow: inset 0 1px rgba(255,255,255,0.5), inset 0 -5px 20px rgba(0,0,0,0.5);
-o-box-shadow: inset 0 1px rgba(255,255,255,0.5), inset 0 -5px 20px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 1px rgba(255,255,255,0.5), inset 0 -5px 20px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0 1px rgba(255,255,255,0.5), inset 0 -5px 20px rgba(0,0,0,0.5);
}

div.menu_div_ {
margin: auto;
width: 500px;
height:40px;
text-align:center;
background-color: rgba(255,255,255,0.15);
border: 1px solid rgba(0,0,0,0.5);
position:fixed;
z-index:4;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.5), inset 0 8px rgba(255,255,255,0.1), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
-o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.5), inset 0 8px rgba(255,255,255,0.1), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.5), inset 0 8px rgba(255,255,255,0.1), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
-moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.5), inset 0 8px rgba(255,255,255,0.1), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
display: block;
}

div.menu_div_ ul {
list-style: none;
margin:auto;
padding: 0;
text-align:center;
}

div.menu_div_ li {
float: left;
width:100px;
height:40px;
}

/**************** CONTENT *****************/

div.content {
width:800px;
height:150px;
margin:auto 0;
text-align:left;
padding-top:0;
clear:both;
}

.welcome_title {
font: bold italic 24px Georgia, serif;
color:#fff;
line-height:24px;
padding-top:10px;
padding-left:220px;
-moz-text-shadow: 1px 1px 0 #DC3400;
-webkit-text-shadow: 1px 1px 0 #DC3400;
text-shadow: 1px 1px 0 #DC3400;
}

.welcome_text {
font: italic 16px Georgia, serif;
color:#fff;
line-height:20px;
padding-left:90px;
}

div.left {
margin:auto;
width:400px;
height:331px;
text-align:center;
position: relative;
float: left;
border-bottom:1px solid #1b1b1b;
}
div.right {
margin:auto;
width:400px;
height:331px;
text-align:center;
position: relative;
float: left;
border-bottom:1px solid #1b1b1b;
}
/**************** CONTACT, CONTENT, GALLERY, PARTNERS *****************/
div.stuff {
width:800px;
height:600px;
margin:auto;
text-align:center;
clear:both;
border-bottom:1px dotted #1b1b1b;
}

div.gallery {
background:url('images/photos.jpg') no-repeat top right;
}

div.webgrad {
background-image: -moz-linear-gradient(90%, #000, #2c2c2c);
background-image: -webkit-linear-gradient(#000, #2c2c2c);
background-image: -ms-linear-gradient(#000, #2c2c2c);
background-image: -o-linear-gradient(#000, #22c2c2c);
}

table#t1 {
width:800px;
height:500px;
vertical-align:top;
margin-top:0 auto;
}

td#cell_01 {
width:374px;
height:108px;
background-image:url('images/images/photos_01.png');
padding-left:20px;
padding-top:40px;
vertical-align:bottom;
}
td#cell_02 {
width:200px;
height:108px;
}
td#cell_03 {
width:226px;
height:108px;
}
td#cell_04 {
width:374px;
height:164px;
}
td#cell_05 {
width:200px;
height:164px;
}
td#cell_06 {
width:226px;
height:164px;
}
td#cell_07 {
width:374px;
height:103px;
}
td#cell_08 {
width:200px;
height:103px;
}
td#cell_09 {
width:226px;
height:103px;
}
td#cell_10 {
width:374px;
height:125px;
}
td#cell_11 {
width:200px;
height:125px;
}
td#cell_12 {
width:226px;
height:125px;
}

a.lense1 {display:block; width:374px; height:164px; background-image: url('images/images/photos_04.png');}
a.lense1:hover {background-image: url('images/images/photos__04.png');}

a.lense2 {display:block; width:200px; height:164px; background-image: url('images/images/photos_05.png');}
a.lense2:hover {background-image: url('images/images/photos__05.png');}

a.lense3 {display:block; width:374px; height:103px; background-image: url('images/images/photos_07.png');}
a.lense3:hover {background-image: url('images/images/photos__07.png');}

a.lense4 {display:block; width:200px; height:103px; background-image: url('images/images/photos_08.png');}
a.lense4:hover {background-image: url('images/images/photos__08.png');}

a.lense5 {display:block; width:374px; height:125px; background-image: url('images/images/photos_10.png');}
a.lense5:hover {background-image: url('images/images/photos__10.png');}

div.stuff1 {
margin:auto;
margin-left:100px;
width:100px;
height:200px;
float:left;
}
div.stuff2 {
margin-left:50px;
margin-top:50px;
width:350px;
height:210px;
text-align:center;
float:left;
}
div.stuff3 {
margin-top:50px;
padding-left:30px;
width:300px;
height:210px;
text-align:left;
float:left;
border:1px solid #ababab;
border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
border-top-right-radius: 20px;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
}
div.stuff4 {
margin-left:100px;
margin-top:50px;
width:400px;
height:300px;
text-align:center;
float:left;
}
div.stuff5 {
margin-top:50px;
width:200px;
height:300px;
float:left;
}


/**************** WEBDESIGN *****************/

div.webtop {
width:800px;
height:164px;
background: transparent url('images/web_head.png') no-repeat bottom left;
}

div.stuff6 {
width:800px;
height:436px;
text-align:center;
float:left;
background-color:transparent;
}

div.stuff7 {
width:199px;
height:290px;
margin-top:15px;
margin-bottom:10px;
text-align:center;
float:left;
background-color:#0b0b0b;
border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
}

div.step1 {
background: url(images/idea.jpg) bottom center no-repeat;
}
div.step2 {
background: url(images/design.png) bottom center no-repeat;
}
div.step3 {
background: url(images/code.png) bottom center no-repeat;
}
div.step4 {
background: url(images/final.png) bottom center no-repeat;
}

div.overlay
{
display: inline-block;
position: relative;
top: 0;
left: 0;
z-index: 2;
width:199px;
height:263px;
background: rgba(0,0,0,0.6);
opacity: 0;
padding: 0;
margin: 0;
}
div.overlay:hover
{
opacity: 1;
transition: opacity 1s;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
cursor: pointer;	
}
div.overlay p
{
font-family: verdana, sans-serif;
font-size: 26px;
color: #fff;
text-transform: uppercase;
text-align: center;
position: relative;
padding:30px 5px; 30px 5px;
text-shadow: 1px 1px 2px #000;
-moz-text-shadow: 1px 1px 2px #000;
-webkit-text-shadow: 1px 1px 2px #000;
}


div.blueborder {
border-right:1px solid #000;
}

table#t3{
width:300px;
height:200px;
vertical-align:middle;
}
#t3 td {
font:bold 14px verdana, helvetica, sans-serif;
width:300px;
height:66px;
vertical-align:middle;
}
#t3 img {
vertical-align:middle;
}

table#t2{
width:300px;
height:200px;
vertical-align:middle;
}
#t2 td {
font:bold 14px verdana, helvetica, sans-serif;
width:300px;
height:100px;
vertical-align:middle;
}
#t2 img {
vertical-align:middle;
}
#t2 p {
font:bold 14px verdana, helvetica, sans-serif;
line-height:64px;
vertical-align:middle;
}

div.table {
width:800px;
margin:0 auto;
text-align:center;
position:relative;
border-bottom:1px dotted #1b1b1b;
}

/**************** FOOTER *****************/

div.foot {
width:800px;
height:50px;
margin:auto;
padding-top:20px;
text-align:center;
background-color:#000;
font: normal 11px verdana, helvetica, sans-serif;
color: #979797;
clear: both;
margin-bottom:5px;
}

table#t4 {
width:800px;
height:30px;
}

td#copy {
width:500px;
height:30px;
text-align:left;
padding-left:5px;
}

td#design {
width:200px;
height:30px;
text-align:right;
padding-right:5px;
}

td#facebook {
width:100px;
height:30px;
text-align:right;
}

a.des:link , a.des:visited {
color: #777;
font:bold 11px verdana, helvetica, sans-serif;
text-decoration: none;
padding:0;
display:inline;
}

a.des:hover {
text-decoration: none;
color: #8DEA05;
}

div.copy {
font: 10px verdana, helvetica, sans-serif;
color:#aaa;
text-align:center;
width:500px;
margin: auto;
letter-spacing:1px;
}

div.webslink {
height: 50px;
width: 800px;
}

a.webs:link , a.webs:visited {
color:#ddd;
font: normal 13px verdana, trebuchet, helvetica, Georgia, arial, sans-serif;
padding:19px 0 19px 60px;
line-height:50pt;
text-decoration: none;
text-transform:uppercase;
letter-spacing:1px;
height:50px;
}

a.webs:hover {
color:#fff !important;
text-decoration: none;
background: url(images/arrow.png) 0% 50% no-repeat;
}

/**************** EXTRA *****************/
.seo {
color:#000;
font-size:2px;
text-align:center;
margin:0;
}