@charset "utf-8";
/* CSS Document */

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-family: 'Josefin Slab', Arial, Helvetica, sans-serif;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


.clear{
	clear:both;
}
a{
	text-decoration:none;
	color:inherit;
}

body{
	min-width:115em;
	background-color:#fefefe;
	background-image:url(images/tile.png);	
	-webkit-background-size: 8.813em;
	-moz-background-size:8.813em;
	background-size:8.813em;				
	margin:0 auto;
	font-size:1em;
	position:relative; 
    -o-transition:all .5s linear; 
    -moz-transition:all .5s linear; 
    -webkit-transition:all .5s linear;
	transition:all .5s linear; 
}


/*.wrapper{
	width:70em;
}*/

header{
	display:block;
	background-color:#737373;
	background-color:rgba(100, 100, 100, 0.7);/*rgba(139, 129, 153, 0.7)*/
	height:6em;
	min-width:115em;
	
	/* Old browsers */
	background: -moz-linear-gradient(top, rgba(80,80,80,.9)0%,  rgba(100,100,100,.7)100% ); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(80,80,80,.9)), 		color-stop(100%,rgba(100, 100, 100,.7))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(80, 80, 80,.9) 0%,rgba(100, 100, 100,.7) 100%); /* 	Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(80, 80, 80,.9) 0%,rgba(100, 100, 100,.7) 100%); /* Opera11.10+ */
	/*filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#555555', EndColorStr='#888888');*/
	background: -ms-linear-gradient(top, rgba(80, 80, 80,.9) 0%, rgba(100, 100, 100,.7) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(80, 80, 80,.9) 0%,rgba(100, 100, 100,.7) 100%); /* W3C */

	/*border-top:#777777 solid .2em;
	border-bottom:#777777 solid .2em;
	border-top:rgba(115, 115, 115, 0.6) solid .2em;
	border-bottom:rgba(100, 100, 100, 0.7) solid .2em;*/
	
	/*-webkit-box-shadow:inset 0em 0em 1em rgba(0, 0, 0, 0.5), 0.3em 0.5em 2em rgba(0, 0, 0, 0.5);
	-moz-box-shadow:inset 0em 0em 1em rgba(0, 0, 0, 0.5), 0.3em 0.5em 2em rgba(0, 0, 0, 0.5);
	box-shadow:inset 0em 0em 1em rgba(0, 0, 0, 0.5), 0.3em 0.5em 2em rgba(0, 0, 0, 0.5);*/
		
}
header h1{
	
	position:relative;
	margin:0 auto;
	margin-left:0%;
	padding-left:7em;
	padding-top:.2em;
	white-space:nowrap;
	
	font-size:3.5em;
	font-weight:bold;
	/*margin:0.5em; */
	text-shadow:.05em .05em .05em rgba(255,255,255,0.3), .1em .1em .2em rgba(0,0,0,.6); 
	color:#ffffff;
	-webkit-transition:.5s ;
	-moz-transition:.5s;
	transition:.5s;
	-moz-animation-duration: 5s;
	-moz-animation-delay:1s;
	-moz-animation-name: slidein;
	-webkit-animation-duration: 6s;
	-webkit-animation-delay:1s;
	-webkit-animation-name: slidein;
    }
header h1 a, header h1 i{font-family:Arial, Helvetica, sans-serif}
    
@-webkit-keyframes slidein {
  from {
	padding-left:40em;
	font-size:3em;
	-webkit-transform:rotate(3deg);
  }
  40% {
	padding-left:12em;
	font-size:2.5em;
	-webkit-transform:scaleY(-1) ;
  }
  60% {
	padding-left:0em;
	font-size:2em;
	-webkit-transform:rotate(-3deg); 
  }
  80% {
	  padding-left:7em;
	  font-size:3.5em;
	  -webkit-transform:rotate(0deg) ;
	  opacity:1;
	  }
	85%{
		opacity:.5;}
	90%{
		opacity:1;}
	95%{
		opacity:.5;}
	to {
		opacity:1;}
}
@-moz-keyframes slidein {
  from {  
	padding-left:40em;
	font-size:3em;
	-moz-transform: rotate(3deg);
	transform:rotate(3deg) ;
	
  }
  40% {
	padding-left:12em;
	font-size:2.5em;
	-moz-transform: scaleX(1);
	/*transform:scaleX(-1);*/
  }
  60% {
	padding-left:0em;
	font-size:2em;
	-moz-transform: rotate(-3deg);
	transform:rotate(-3deg) ;
  }
  80% {
	padding-left:7em;
	font-size:3.5em;
	-moz-transform: rotate(0deg);
	transform:rotate(0deg);
	opacity:1;
	  }
	85%{
		opacity:.5;}
	90%{
		opacity:1;}
	95%{
		opacity:.5;}
	to {
		opacity:1;}
}
header h1:hover{
	text-shadow:.05em .05em .05em rgba(255,255,255,0.3), .1em .1em .15em rgba(255,150,20,0.5), .15em .15em .25em rgba(0,0,0,.6);
	filter:dropshadow(color=#555555, offx=1, offy=1);
	}

h1 i{
	color:#cacaca;
	font-style:normal;
}

.triangle{
	position:absolute;
 	width: 0; height: 10em; 
	border-top: 15em solid rgba(100,100,100,.7); 
	border-right: 15em solid transparent;
}
header img{
	height:2.375em;width:6.25em;
	position:absolute;
	top:1.5em;right:2em;
	border:none;
	/*-webkit-transform:rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform:rotate(-45deg) ;*/
	}

nav{
	display:block;
	margin-top:12.5em;
	
	width:12em;
	float:left;
}

	
nav div{
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.5em;
	text-shadow:.1em .1em .3em rgba(0,0,0,.5);
	width:17em;
	height:30px;height:1.25em;
	padding-top:60px;padding-top:2.5em;
	padding-bottom:10px;padding-bottom:0.417em;
	padding-right:20px;padding-right:0.833em;
	text-transform:uppercase;
	color:#fdfdfd;
	background-color:#777777;
	background-color:rgba(100,100,100,.7);
	background: -moz-linear-gradient(top, rgba(80,80,80,.8)0%,  rgba(100,100,100,.7)100% ),
	/*-moz-linear-gradient(left top, rgba(80,80,80,.9)0%,  transparent),
*/-moz-linear-gradient(right top,  rgba(255,255,255,.8), transparent); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(80,80,80,.8)), 		color-stop(100%,rgba(100, 100, 100,.7))); /* Chrome,Safari4+ */
  -moz-transform: rotate(-45deg) skewX(-45deg);
  -ms-transform: rotate(-45deg) skew(-45deg,0deg);
  -webkit-transform:rotate(-45deg) skewX(-45deg) ;
  transform:rotate(-45deg) skewX(-45deg) ;
	/*position:absolute;
	top:15em; left:-6em;*/
	text-align:right;
	margin:2.7em auto 4.68em -6em;
	letter-spacing:.2em;
	border-right:rgba(150,150,150,.2) solid 1em;
	-webkit-transition:.5s ;
	-moz-transition:.5s;
	transition:.5s;
}

nav a:active div, nav a:hover div{
	border-right:rgba(255,150,20,0.7) solid 1em;
	color:#ff9614;
	text-shadow:-.15em -.1em .1em rgba(0,0,0,.5),-.25em -.2em .2em rgba(255,255,255,.4);
	-moz-transform: rotate(-45deg) skewX(-45deg) scaleX(1.1);
	-ms-transform: rotate(-45deg) skew(-45deg,0deg) scaleX(1.1);
	-webkit-transform:rotate(-45deg) skewX(-45deg) scaleX(1.1);
	transform:rotate(-45deg) skewX(-45deg) scaleX(1.1);
	/*-webkit-box-shadow: .5em .5em .5em rgba(100, 100, 100, 0.4);
	-moz-box-shadow: .5em .5em .5em rgba(100, 100, 100, 0.4);
	box-shadow: .5em .5em .5em rgba(100, 100, 100, 0.4);*/
	}
nav .current{
	border-right:rgba(255,150,20,0.7) solid 1em;
	/*-moz-border-right-colors:rgba(254,162,1,0.7) rgba(150,150,150,.2);*/
	}

.maincontent{
	float:left;
	width:57em; min-height:33em;
	background-color:#fdfdfd;
	margin:7em 10em;
	display:block; border:#dddddd 1em solid; 
	background-color:#eeeeee;
	background-color:rgba(240, 240, 240, 0.8);
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em; 	
	-webkit-box-shadow: 0.8em 1em 4em rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0.8em 1em 4em rgba(0, 0, 0, 0.4);
	box-shadow: 0.8em 1em 4em rgba(0, 0, 0, 0.4);
	
	position:relative;
	padding:1.5em 0;
}

.maincontent h2{
	font-family: 'Artifika', arial, serif;
	font-size:2.8em;
	text-align:center;
	margin:.5em 0em 0.3em 0em;
}

.maincontent h3{
	font-family: 'Artifika', arial, serif;
	font-size:1.8em;
	text-align:center;
	color:#fea201;
}

.maincontent h4{
	font-family: 'Josefin Slab', arial, serif;
	font-size:2em;
	margin:1em auto 0em 1.6em;
}

.maincontent p{
	font-family: 'Josefin Slab', arial, serif;
	font-size:1.6em;
	margin:0.5em 12em 0.5em 2em;
	line-height:1.1em;
}

.keyboard{
	font-size:1em;
	width:56.25em;
	height:38.063em;
	float:right;
	position:absolute;
	bottom:-15em;
	right:-30em;
	z-index:1;
}

.strips{
	position:absolute;
	left:87.5em;
	width:22.5em;
	min-height:40em;
	z-index:0;
}
.strips div{
	width:4.5em;

	margin-right:4.5em;
	background-color:transparent;
	float:left;
	position:relative;
}
.strips div:hover{
	border-top:.5em solid #ff9614;
	border-top:.5em solid rgba(255,150,20,0.8);	
}
div .strp1{
	height:16em;
	border-bottom: 4.5em solid transparent; 
	border-right: 4.5em solid rgba(130,130,130,.7);
	width:0;
	
}


div .strp2{
	height:62.75em;/*min-height:100%;*/
	background-color:#777777;
	background-color:rgba(100,100,100,.7);
	/* Old browsers */
	background: -moz-linear-gradient(top, rgba(100,100,100,.7)0%,  rgba(80,80,80,.9)100% ); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(100, 100, 100,.7)), 		color-stop(100%,rgba(80,80,80,.9))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(100, 100, 100,.7) 0%,rgba(80, 80, 80,.9) 100%); /* 	Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(100, 100, 100,.7) 0%,rgba(80, 80, 80,.9) 100%); /* Opera11.10+ */
	/*filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#555555', EndColorStr='#888888');*/
	background: -ms-linear-gradient(top, rgba(100, 100, 100,.7) 0%, rgba(80, 80, 80,.9) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(100, 100, 100,.7) 0%,rgba(80, 80, 80,.9) 100%); /* W3C */

}
div .strp2:hover{
	border-top:.3em solid #ff9614;
	border-top:.3em solid rgba(255,150,20,0.9);	}

div .strp3{margin:0;
	height:38em;
	border-bottom: 4.5em solid transparent; 
	border-left: 4.5em solid rgba(120,120,120,.7);
	width:0;
	}
.strips a{
	font-family: Arial, Helvetica, sans-serif;
	text-shadow:.15em .1em .1em rgba(0,0,0,.5), 0em 0em 1.5em rgba(0,0,0,9);
	font-size:1.5em;
	color:#ff9614;
	color:rgba(255,150,20,0.8);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-webkit-transform:rotate(90deg);
	transform:rotate(90deg);
	letter-spacing:.2em;
	text-transform:uppercase;
	position:absolute;

}	
.strp1 a{
	top:1.8em; left:-0.3em;
	}
.strp2 a{
	top:3.6em; left:-2.2em;
}
.strp3 a{
	top:4em; right:-2.8em;
	white-space:nowrap;
}

/*--------------portfolio--------------*/




	
.portfolio{
	float:left;
	width:57em; min-height:33em;
	background-color:#fdfdfd;
	margin:7em 10em;
	display:block; border:#dddddd 1em solid; 
	background-color:#eeeeee;
	background-color:rgba(240, 240, 240, 0.8);
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em; 	
	-webkit-box-shadow: 0.8em 1em 4em rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0.8em 1em 4em rgba(0, 0, 0, 0.4);
	box-shadow: 0.8em 1em 4em rgba(0, 0, 0, 0.4);
	
	position:relative;
	padding-bottom:1.5em;
}

.portfolio h2{
	font-family: 'Artifika', arial, serif;
	font-size:2.5em;
	text-align:center;
	margin:0.6em 0em 0em 0em;
}

.portfolio h3{
	font-family: 'Artifika', arial, serif;
	font-size:1.8em;
	text-align:center;
	color:#eeeeee;
}
.portfolio article{
	width:48em;
	padding:2em;
	margin:2em auto;
	background-color:#777777;
	background-color:rgba(100,100,100,.5);
	border:rgba(100,100,100,.7) solid 0.3em;
	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
	border-radius: 1em; 	
	-webkit-box-shadow: 0.8em 1em 4em rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0.8em 1em 4em rgba(0, 0, 0, 0.4);
	box-shadow: 0.8em 1em 4em rgba(0, 0, 0, 0.4);
}

.portfolio aside{
	width:21em;
	float:right;
	margin:1em auto;
	
}

.portfolio p{
	font-family: 'Josefin Slab', arial, serif;
	font-size:1.4em;
	margin:1em auto;
}
.portfolio cite{
	font-size:1.4em;
	display:block;
	margin:1em;
	text-align:right;
	color:#eeeeee;
}
.portfolio ul{
	font-size:1.4em;
	list-style-type:disc;
	list-style-position:inside;
}
.portfolio article img{
	border:#555555 solid 0.5em;
	-webkit-box-shadow: 0.8em 1em 4em rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0.8em 1em 4em rgba(0, 0, 0, 0.4);
	box-shadow: 0.8em 1em 4em rgba(0, 0, 0, 0.4);
	-webkit-transition:.5s ;
	-moz-transition:.5s;
	transition:.5s;
	}
.portfolio article img:hover{
	-moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -webkit-transform:scale(1.1) ;
  transform:scale(1.1) ;
  
	}
.dra img{
	width:21em; 
	height:24.938em;
}
.aw img{
	width:21em; 
	height:17.625em; 
	}
	
.portfolio .portfoliopic{
	width:39em;
	height:31.125em;
	font-size:1em;
	float:right;
	position:absolute;
	bottom:-13.5em;
	right:-16em;
	z-index:1;
	
}

/*-----------------contact----------------*/
.maincontent h5{
	width:24em;
	margin:1em auto;
	text-align:center;
	font-family: 'Josefin Slab', arial, serif;
	font-size:1.6em;
}
.maincontent h6{
	width:20em;
	margin:1em auto;
	text-align:center;
	font-family: 'Josefin Slab', arial, serif;
	font-size:2em;
}
.maincontent h5 strong{
	font-size:1.6em;
	color:#ff9614;
}




form{
	margin:2em auto;
	width:40em;
	padding:2em;
	background-color:#777777;
	background-color:rgba(100,100,100,.5);
  /* background-image: -moz-linear-gradient(top, #c0b5cf, #8b8199); 
  background-image: -o-linear-gradient(top, #c0b5cf, #8b8199); 
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #c0b5cf),color-stop(1, #8b8199)); 
  background-image: -webkit-linear-gradient(#c0b5cf, #8b8199); 
  background-image: linear-gradient(top, #c0b5cf, #8b8199);
           the filter added corners around ie border radius so droped it!
		    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#c0b5cf', EndColorStr='#8b8199');*/
	border:rgba(100,100,100,.7) solid 0.3em;
	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
	border-radius: 1em; 	
	-webkit-box-shadow: 0.8em 1em 4em rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0.8em 1em 4em rgba(0, 0, 0, 0.4);
	box-shadow: 0.8em 1em 4em rgba(0, 0, 0, 0.4);
}
form p{
	
}

form h3{
	font-family: 'Artifika', arial, serif;
	font-size:1.6em;
	text-align:center;
	color:#eeeeee;
}

.contact_form{
	margin:0 auto;
	width:36em;
	border:none;
	padding-top:1em;
	/*background-color:#8b8199; */
	
}

.contact_form td{
	padding:0.2em;
	font-size:1.5em;
}
.contact_form img{
	width:7em;height:9em;
	margin-top:2em; padding-left:2em;
}
.contact_form .cellname{
	padding-top:.2em;
	font-size:1.8em;
	width:7em;
	font-style:italic;
	vertical-align:top;
	
	white-space:nowrap;
}

.input{padding-left:2em;
	font-size:1.2em;
	height:1.2em;
	width:15em;
}

.textfield{
	margin-left:1em;
	font-size:1.2em;
	width:11.5em;
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-weight:normal;
}
.textarea{
	height:10em;
	
	
}

.submit{
	margin:-1em 0em 0em 16.5em;
	padding:.2em 0.5em;
	width:6em;
	letter-spacing:.1em;
	vertical-align:middle;
	font-size:1em;
	text-transform:uppercase;
	color:inherit;
	border: none;
	text-shadow: .1em .1em .2em rgba(150, 150, 150, 0.3);	
	background-color:#eeeeee;
	background-image: -webkit-gradient(linear, »
	0% 0%, 0% 100%, from(#dddddd), to(#eeeeee));
	background-image: -moz-linear-gradient(0% 100% » 90deg, #dddddd, #eeeeee);
	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
	-o-border-radius: 1em;
	border-radius: 1em;
	-webkit-box-shadow: .1em .1em .1em rgba(0, 0, 0, 0.5);
	-moz-box-shadow: .1em .1em .1em rgba(0, 0, 0, 0.5);
	-ms-box-shadow: .1em .1em .1em rgba(0, 0, 0, 0.5);
	box-shadow: .1em .1em .1em rgba(0, 0, 0, 0.5);  
}	
	


.intouch{
	width:34em;
	text-align:center;
	padding-top:3em;
}


@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 12px rgba(51, 204, 255, 0.2);
}
50% {
-webkit-box-shadow: 0 0 12px rgba(51, 204, 255, 0.9);
}
100% {
-webkit-box-shadow: 0 0 12px rgba(51, 204, 255, 0.2);
}
}
input[type="submit"]{
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}
.submit:hover{ -ms-transform: scale(1.3) ;}
input[type="submit"]:hover,
input[type="submit"]:focus {
	-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
	-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);  
	  -webkit-animation: pulse 1.5s infinite ease-in-out;
	  -webkit-transform: scale(1.3);
	  -moz-transform: scale(1.3);
	  -o-transform: scale(1.3);
	  transform: scale(1.3);
}

.contactpic{
	width:39em;
	height:32.25em;
	font-size:1em;
	float:right;
	position:absolute;
	bottom:-12em;
	right:-30em;
	z-index:1;
	}
	
.skype{
	font-size:1em;
	width:4.5em;
	height:4.5em;
	float:left;
	}
	
	
	/*----------------------footer----------*/
	body{min-height:100%;}
div .strp2{
	}
footer{
	clear:both;
	margin:0;
	width:100%;
	position:relative;
	}
footer  p{margin:4em auto;
	height:1em;padding:.7em 10em 1em 0;
	background-color:#777777;
	background-color:rgba(100,100,100,.7);
	/* Old browsers */
	background: -moz-linear-gradient(top, rgba(80,80,80,.9)0%,  rgba(100,100,100,.7)100% ); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(100, 100, 100,.7)), 		color-stop(100%,rgba(80,80,80,.9))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(100, 100, 100,.7) 0%,rgba(80, 80, 80,.9) 100%); /* 	Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(100, 100, 100,.7) 0%,rgba(80, 80, 80,.9) 100%); /* Opera11.10+ */
	/*filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#555555', EndColorStr='#888888');*/
	background: -ms-linear-gradient(top, rgba(100, 100, 100,.7) 0%, rgba(80, 80, 80,.9) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(100, 100, 100,.7) 0%,rgba(80, 80, 80,.9) 100%); /* W3C */
	-webkit-box-shadow: 0.8em 1em 4em rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0.8em 1em 4em rgba(0, 0, 0, 0.4);
	box-shadow: 0.8em 1em 4em rgba(0, 0, 0, 0.4);

	text-align:center;
	color:#eeeeee;
	font-family: 'Josefin Slab', arial, serif;
	font-size:1.6em;
	line-height:1.1em;
}
footer img{position:absolute;right:6%;top:10%;height:7.125em;width:18.75em;}


@media screen and (max-width: 30em) {
body{	background-color:#dddddd;font-size:.5em;width:100%;min-width:30em;}
header{	height:5em; width:100%;min-width:30em;margin:0;}
header h1{	width:12em;	margin:0em 1.3em;	white-space:nowrap;	padding:.2em  0;	-webkit-animation:none;	-moz-animation:none;}
.triangle{display:none;}
.strips, .strp1, .strp2, .strp3{display:none;}
nav{margin-top:0em;	width:30em;	margin:.5em 4em 0 4em;	float:none;clear:both;}	
nav div{	display:inline-block;	font-size:1em;	width:8em;height:1em;	padding:1em 0; padding-top:1em;padding-bottom:1em; margin: 1em .5em;  -moz-transform: none;  -ms-transform: none;  -webkit-transform:none ;  transform:none ;	text-align:center;		letter-spacing:.2em;	border:rgba(150,150,150,.2) solid .5em;border-right:none;border-left:none;	-webkit-transition:.5s ;	-moz-transition:.5s;	transition:.5s;}
nav a:active div, nav a:hover div{	border-right:none;border-left:none;	-moz-transform: scale(1.1);	-ms-transform:  scale(1.1);	-webkit-transform: scale(1.1);	transform: scale(1.1);}
nav .current{	border-top:rgba(255,150,20,0.7) solid .5em;border-right:none;border-left:none;}
.maincontent{	width:30em; min-height:32em; margin:.5em 1em;float:none; padding:.5em ;}
.portfolio{ margin:.5em 1em; font-size:1em; width:30em; padding:.5em 1em;}
.portfolio article{width:23em;}
.portfolio aside, .portolio img{float:none;}.portfolio aside{font-size:1.2em; width:20em;} 
.maincontent p{	font-size:1.7em; text-align:justify;	margin:0.5em 1em 0.5em 1em;}.maincontent h5, .maincontent h6{font-size:1.5em; width:20em;}
.keyboard, .portfoliopic, .contactpic{display:none;}
form{	margin:0em auto;padding:.5em;	width:25em; }
.contact_form{width:20em;margin:0 auto;}
.contact_form td{	padding:0; margin:.2em;	font-size:1.5em;}
.contact_form .cellname{
	padding-top:.2em;	font-size:1.5em;	width:4em; text-align:left;}
.input{padding-left:.2em;	font-size:1em;	height:1em;	width:7em;}.textfield{
	margin-left:0em;	font-size:1.2em;	width:7em;}
.textarea{	height:8em;}
.submit{	margin:-1em auto 0em auto;	padding:.2em 0.5em;	width:6em;	font-size:1em;}
.intouch{	width:18em; padding-top:2em;}
footer p{padding:.5em 4em 1em 0em;height:3em;white-space:pre;}footer p span, footer img{display:none;}
}
@media screen and (min-width: 30em) and (max-width: 80em) {
body {
	background-color:#eeeeee; font-size:.6em;}
.maincontent, .portfolio{
	margin:4em 8em;}

}
@media screen and (min-width: 80em) and (max-width: 90em) {
body {
	background-color:#eeeeee; font-size:.7em;}
.maincontent{
	margin:4em 10em;}
}
@media screen and (min-width: 90em) and (max-width: 105em) {
body {
	background-color:#ededed;  font-size:.8em;}
.maincontent{
	margin:4em 10em;}
}
@media screen and (min-width: 105em) and (max-width: 115em) {
body {
	background-color:#efefef; font-size:.9em;}
.maincontent{
	margin:4em 10em;}
}

@media screen and (min-width: 115em) and (max-width: 150em) {
body {
	background-color:#fefefe;font-size:1em;}
.maincontent{
	margin:7em 10em;}
}