/*
	HTML5 Reset :: style.css
	----------------------------------------------------------
	We have learned much from/been inspired by/taken code where offered from:
	
	Eric Meyer					:: http://ericmeyer.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com
	
-------------------------------------------------------------------------------*/

/* Let's default this puppy out
-------------------------------------------------------------------------------*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}									

article, aside, figure, footer, header, hgroup, nav, section {display: block;}

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {max-width: 100%;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted. 
	don't forget to restore the bullets within content. */
ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, 
blockquote:after, 
q:before, 
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle;}

pre {
	white-space: pre; /* CSS2 */
	white-space: pre-wrap; /* CSS 2.1 */
	white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
	word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}
 
/* Accessible focus treatment
	people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {outline: none;}

small {font-size: 85%;}

strong, th {font-weight: bold;}

td, td img {vertical-align: top;} 

/* Make sure sup and sub don't screw with your line-heights
	gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label, 
input[type=button], 
input[type=submit], 
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}
 
/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover */
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; background-color: #fff;}  




/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/

/* new Linux- and Windows-friendly sans-serif font stack: http://mky.be/fontstack */
body {
	/*background-image: url('../img/bg.png');*/
	background-attachment: fixed;
	
}
body {}/* using local fonts? make sure to read up on Paul Irish's 
	Bulletproof @font-face syntax: http://mky.be/font-face/bulletproof/ */

/* we like off-black for text */
body, select, input, textarea {color: #333;}

a, h1 {
	color: #666;
	transition:  0.52s;
	-moz-transition:  0.52s; /* Firefox 4 */
	-webkit-transition:  0.52s; /* Safari and Chrome */
	-o-transition:  0.52s;
}

a:hover {color: rgba(66,177,255,0.82);}


/* Custom text-selection colors (remove any text shadows: twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;} 

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #fcd700;} 

ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}


header {
	height: 82px;
	margin-top:20px;
	margin-bottom: 1em;
	font-family: 'Shadows Into Light', cursive;
	letter-spacing: 1px;
	position: fixed;
	z-index: 1000;
	left: 50%;
	right:50%;
	background-color: #FFF;
	margin: 0 auto;

}

header:after{
	margin-top: 50px;
}
header:before{
	margin-top: 20px;
}

/*Headerlienien*/

header:after, header:before{
position: relative;
z-index:-11;
padding-bottom: ;
content: ' ';
text-align:center;
display:block;
height:2px;
width:110%;
margin-left: -5%;

background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(182,180,180,0.7) 10%, rgba(180,178,178,0.7) 40%, rgba(168,166,166,0.7) 50%, rgba(180,178,178,0.7) 60%, rgba(182,180,180,0.7) 60%, rgba(238,237,237,0.3) 90%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(10%,rgba(182,180,180,0.7)), color-stop(40%,rgba(180,178,178,0.7)), color-stop(50%,rgba(168,166,166,0.7)), color-stop(60%,rgba(180,178,178,0.7)), color-stop(90%,rgba(182,180,180,0.7)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(182,180,180,0.7) 10%,rgba(180,178,178,0.7) 40%,rgba(168,166,166,0.7) 50%,rgba(180,178,178,0.7) 60%,rgba(182,180,180,0.7) 90%, rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(182,180,180,0.7) 10%,rgba(180,178,178,0.7) 40%,rgba(168,166,166,0.7) 50%,rgba(180,178,178,0.7) 60%,rgba(182,180,180,0.7) 90%,rgba(255,255,255,0) 100%); /* Opera 40.10+ */
background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(182,180,180,0.7) 10%,rgba(180,178,178,0.7) 40%,rgba(168,166,166,0.7) 50%,rgba(180,178,178,0.7) 60%,rgba(182,180,180,0.7) 90%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(182,180,180,0.7) 10%,rgba(180,178,178,0.7) 40%,rgba(168,166,166,0.7) 50%,rgba(180,178,178,0.7) 60%,rgba(182,180,180,0.7) 90%,rgba(255,255,255,0) 100%); /* W3C */
}

/* LOGO */
.logo{
	float:left;
}

.logo img{
	height: 50px;
	margin-top: 10px;}

/* NAV */
nav{
	margin-left: 130px;
}

nav ol{
	font-size: 2em;
}


li{
	display: block;
	float: left;
	margin: 0px 0 0 8px;
}

nav li a{
	text-align: center;
	display: block;
	width: 160px;
	text-decoration: none;
}

.selected::after {
position: fixed;
top: 13px;
text-align: left;
display: inherit;
width: 160px;
height: 74px;
content: '';
background-image: url('../img/menuback.png');
z-index:-10;
}

.selected:hover{
	color:#ddd;
}

/* BILD BEI HAUPTMENÜ
.selected::after{
position: fixed;
top: 25px;
margin-left: -60px;
width: 60px;
height: 60px;
content: '';
	background-image: url('../img/work.png');
}
*/

/*ABOUT*/

#About{
	padding-top: 140px;
}


#About article {
	float: left;
	margin-left: 5px;
	margin-right: 5px;
}

#aboutleft{
	width: 260px;
}

#aboutleft img, .icon{
	vertical-align: middle;
	opacity: .65
}
#aboutcenter{
	margin-top: 34px;
	width: 530px;
box-shadow: 0px 9px 0px white, 0 -9px 0px 0px white, 4px 0 15px -4px rgba(213,213,213,0.6), -4px 0 15px -4px rgba(213,213,213,0.6);
-moz-box-shadow: 0px 9px 0px white, 0 -9px 0px 0px white, 4px 0 15px -4px rgba(213,213,213,0.6), -4px 0 15px -4px rgba(213,213,213,0.6);
-webkit-box-shadow: 0px 9px 0px white, 0 -9px 0px 0px white, 4px 0 15px -4px rgba(213,213,213,0.6), -4px 0 15px -4px rgba(213,213,213,0.6);


}
#aboutright{
	margin-top: 34px;
	width: 260px;
}



/**** Example Options ****/

#options {
	float:left;
}

#options ul {
	margin-top: 5px;
	margin: 0;
	list-style: none;
}

#options li {
	margin: 0;
	font-size: 0.7em;
}

#options li a {
	text-decoration: none;
	display: block;
	padding: 1em 0.5em;
	background-color: #DDD;
	color: #222;
	font-weight: bold;
	text-shadow: 0 1px hsla( 0, 0%, 100%, 0.5 );
	background-image: -webkit-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) );
	background-image:    -moz-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) );
	background-image:     -ms-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) );
	background-image:      -o-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) );
	background-image:         linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) );
}

#options li a:hover {
	background-color: #3298ff;
}
/*
#options li a.fdop:hover {
	background-color: #00a05a;
}
#options li a.fac:hover {
	background-color: #ffa029;
}
#options li a.fdit:hover {
	background-color: #b91e3e;
}
*/
#options li a:active {
	background-color: #39D;
	-webkit-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
	 -moz-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
	   -o-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
	      box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
}

#options li a {
	border-left:  1px solid hsla( 0, 0%, 100%, 0.3 );
	border-right: 1px solid hsla( 0, 0%,   0%, 0.2 );
}

#options li:first-child a {
	border-radius: 7px 0 0 7px;
	border-left: none;
}

#options li:last-child a {
	border-radius: 0 7px 7px 0;
}

#options li a.selecteda {
	background-color: #3298ff;
	text-shadow: none;
	color: white;
}
/*
#options li a.selecteda.fdop {
	background-color: #00a05a;
}
#options li a.selecteda.fac {
	background-color: #ffa029;
}
#options li a.selecteda.fdit {
	background-color: #b91e3e;
*/
}
.filter{float: right;}


/*PORTFOLIO*/
#Portfolio{
	margin: 0 auto;
	clear:both;
}

#Portfolio h1.trenner{
	width: 100%;
	color: #666;
	font-size: 3.0em;

}

article, footer {
	font-family: 'Droid Sans', sans-serif;	
	font-size: 0.9em;
}

article h1, h1 {
	padding: 5px 5px 5px 10px;
	font-size: 1.5em;
	font-family: 'Shadows Into Light', cursive;
	letter-spacing: 1px;
}

article p, article h2 {
	margin-left: 5px;
}


article.thumbs, article{
	transition:  background-color 0.32s ease;
	-moz-transition: background-color 0.32s ease; 
	-webkit-transition: background-color 0.32s ease; 
	-o-transition: background-color 0.32s ease;	
	
}


article.thumbs{
	position:fixed;
	width: 260px;
	float: left;
	padding: 5px;
	margin: 5px;
	cursor: pointer;
	dbackground-color: rgba(255,255,255,0.35);
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
}

#Portfolio h1{
	color: #111;
}


#Portfolio article h1x{
	background-color: rgb(50,50,50); /*rgb(50, 152, 255);*/
	background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.496094), rgba(255, 255, 255, 0));
	background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.496094), rgba(255, 255, 255, 0));
	background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.496094), rgba(255, 255, 255, 0));
	background-image: linear-gradient(top, rgba(255, 255, 255, 0.496094), rgba(255, 255, 255, 0));
}





/*BUNTE ÜBERSCHRIFTEN*/
/*
#Portfolio article.ac h1{
	background: #ffa029;
	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffab43), color-stop(100%, #ff9510));
	background-image: -webkit-linear-gradient(#ffab43,#ff9510);
	background-image: -moz-linear-gradient(#ffab43,#ff9510);
	background-image: -o-linear-gradient(#ffab43,#ff9510);
	background-image: linear-gradient(#ffab43,#ff9510);
}

#Portfolio article.dop h1{
	background: #00a05a;
	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #00ba68), color-stop(100%, #00874c));
	background-image: -webkit-linear-gradient(#00ba68,#00874c);
	background-image: -moz-linear-gradient(#00ba68,#00874c);
	background-image: -o-linear-gradient(#00ba68,#00874c);
	background-image: linear-gradient(#00ba68,#00874c);
}
#Portfolio article.dit h1{
	background: #b91e3e;
	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cf2245), color-stop(100%, #a31a37));
	background-image: -webkit-linear-gradient(#cf2245,#a31a37);
	background-image: -moz-linear-gradient(#cf2245,#a31a37);
	background-image: -o-linear-gradient(#cf2245,#a31a37);
	background-image: linear-gradient(#cf2245,#a31a37);
}
*/

#Portfolio article{
	-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, .5);
	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, .5);
	
}

#Portfolio article p{
	margin: 10px 0px 10px 5px;
	
}

#options{
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}


#Portfolio article img{
	margin-bottom: -3px;	
}

article.hov:hover{
	opacity: .65;  
	background-color: rgba(195,195,195,1.95);
	cursor: hand;
}

.hovered{
	opacity: .25;  
	background-color: rgba(195,195,195,1.95);
	cursor: hand;
}
/*article.dop:hover, .hovered{
	opacity: .65;  
	background-color: rgba(0,160,90,0.55);
	cursor: hand !important;
}
article.ac:hover{
	opacity: .65;  
	background-color: rgba(255,159,41,0.55);
	cursor: hand;
}
article.dit:hover{
	opacity: .65;  
	background-color: rgba(186,30,61,0.55);
	cursor: hand;
}
article.ns:hover{
	opacity: .65;  
	background-color: rgba(195,195,195,0.55);
	cursor: hand;
}*/
article.highlight:hover{
	opacity: 1;
}
/*
#Portfolio article.dop div:hover {
	background-color: rgba(0,160,90,0.25);
	cursor: default;
}
#Portfolio article.ac div:hover {
	background-color: rgba(255,159,41,0.25);
	cursor: default;
}
#Portfolio article.dit div:hover {
	background-color: rgba(186,30,61,0.25);
	cursor: default;
}
*/

article.dop.highlight, article.ac.highlight, article.dit.highlight {
	background-color: rgba(149,149,149,0.1);
	cursor: default;
}

/*
article.dop.highlight {
	background-color: rgba(0,160,90,0.10);
	cursor: default;
}
article.ac.highlight {
	background-color: rgba(255,159,41,0.10);
	cursor: default;
}
article.dit.highlight {
	background-color: rgba(186,30,61,0.10);
	cursor: default;
}
*/

article.highlight img.hide{ 
	display: none;
}

iframe{
	width: 798px;
	height: 483px;
	margin-top: 0;
}

.disp {
	display: inherit;
}

.ndisp {
	display: none;
}

.blue{
	color: rgba(66,177,255,0.82);
}

.selected {color: #FFF; }


#CV{
	clear: both;
}

.hi{
	background-color: rgba(255,255,255,0.35);
}
#Work div.hi{
	margin-top: 20px;
	margin-bottom: 0px;
	}

#Work p{
	margin-bottom: 2px;
}

.rightof{
float: right;
margin-right: 10px;
margin-bottom: 5px;
}

#Work h2{
	font-weight:100; 
	font-family: 'Shadows Into Light', cursive;
	font-size: 1.3em;
	letter-spacing: 1px;
	float: left;
	width: 100%;

}

#Work article{
		box-shadow: 0px -4px 10px rgba(213,213,213,0.6);
	-moz-box-shadow: 0px -4px 10px rgba(213,213,213,0.6);
	-webkit-box-shadow:0px -4px 10px rgba(213,213,213,0.6);
	margin-bottom: 10px;
}

/*
#Work .ac{
	border-left: 0.3em solid #ffa029;
}
#Work .dop {
	border-left: 0.3em solid #00a05a;
}
#Work .dit{
	border-left: 0.3em solid #b91e3e;
}
#Work .ns{
	border-left: 0.3em solid #838383;
}
*/

/*
#Work article div.hi:hover {
	background-color: rgba(255,255,255,0.35);
	cursor: default;
}
*/
/*
#content {
position:relative;
margin:0px auto;   
width:70%;
min-height:200px;
z-index:100;
padding:20px;
border-radius:8px;
box-shadow:inset 0px 1px 6px #3F3F3F;
}*/

footer{
	text-align: center;
	margin-top:30px;
	}
/*
#content:after{
background:#F9F9F9;
margin:10px;
position: absolute;
content : " ";
bottom: 0;
left: 0;
right: 0;
top: 0;
z-index: -1; 
border:1px #E5E5E5 solid;       
border-radius:8px;
}
*/

.trenner{
text-align:center;
padding-top: 120px;
padding-bottom: 40px;
font-size: 3em;
clear: both;
}


/** create the gradient bottom **/
.trenner:after{

margin-top: -40px;
padding-bottom: ;
content: ' ';
text-align:center;
display:block;
height:2px;
width:100%;

background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(182,180,180,0.7) 30%, rgba(180,178,178,0) 40%, rgba(168,166,166,0) 50%, rgba(180,178,178,0) 60%, rgba(182,180,180,0.7) 61%, rgba(238,237,237,0.3) 90%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(39%,rgba(182,180,180,0.7)), color-stop(40%,rgba(180,178,178,0)), color-stop(50%,rgba(168,166,166,0)), color-stop(60%,rgba(180,178,178,0)), color-stop(61%,rgba(182,180,180,0.7)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(182,180,180,0.7) 39%,rgba(180,178,178,0) 40%,rgba(168,166,166,0) 50%,rgba(180,178,178,0) 60%,rgba(182,180,180,0.7) 61%, rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(182,180,180,0.7) 39%,rgba(180,178,178,0) 40%,rgba(168,166,166,0) 50%,rgba(180,178,178,0) 60%,rgba(182,180,180,0.7) 61%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(182,180,180,0.7) 39%,rgba(180,178,178,0) 40%,rgba(168,166,166,0) 50%,rgba(180,178,178,0) 60%,rgba(182,180,180,0.7) 61%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(182,180,180,0.7) 39%,rgba(180,178,178,0) 40%,rgba(168,166,166,0) 50%,rgba(180,178,178,0) 60%,rgba(182,180,180,0.7) 61%,rgba(255,255,255,0) 100%); /* W3C */

}





/*** form styling **/


/** we remove the red glow around required fields since we are already using the red star */
input:required, textarea:required { 
    -moz-box-shadow:none;  
    -webkit-box-shadow:none;  
    -o-box-shadow:none;  
    box-shadow:none;  
}






/** inputs and textarea**/
input:not([type="submit"]), textarea{
outline:none;
display:block;
width:50%;
padding:4px 8px;
border:1px dashed #DBDBDB;
color:#3F3F3F;
font-family:'Droid Sans',Tahoma,Arial,Verdana sans-serif;
font-size:14px;
/*border-radius*/
-webkit-border-radius:2px;
   -moz-border-radius:2px;
        border-radius:2px;
/*transition*/
-webkit-transition:background 0.2s linear,
				   box-shadow 0.6s linear;
   -moz-transition:background 0.2s linear,
				   box-shadow 0.6s linear;
     -o-transition:background 0.2s linear,
				   box-shadow 0.6s linear;
        transition:background 0.2s linear,
				   box-shadow 0.6s linear;
}
input:not([type="submit"]):active, 
textarea:active,
input:not([type="submit"]):focus, 
textarea:focus{
background:#F7F7F7;
border:dashed 1px #969696;
/*box-shadow*/
-webkit-box-shadow:2px 2px 7px #E8E8E8 inset;
   -moz-box-shadow:2px 2px 7px #E8E8E8 inset;
        box-shadow:2px 2px 7px #E8E8E8 inset;
}
input:not([type="submit"]){
height: 20px;
}

/* placeholder */
::-webkit-input-placeholder  { 
color:#BABABA; 
font-style:italic;
}
input:-moz-placeholder,
textarea:-moz-placeholder{ 
color:#BABABA;
font-style:italic;
} 
textarea{
min-height:110px;
resize:vertical
}




/** labels**/


@font-face {font-family:"IconicStroke";src:url("../ft/iconic_stroke.eot?") format("eot"),url("../ft/iconic_stroke.woff") format("woff"),url("iconic_stroke.ttf") format("truetype"),url("../ft/iconic_stroke.svg#IconicStroke") format("svg");font-weight:normal;font-style:normal;}


/** adding our icon font !! */
.iconic:before{
font-size:25px;
font-family: "IconicStroke";
}
.iconic.link:before { content: '/'; }
.iconic.quote-alt:before { content: "'"; }
.iconic.comment:before { content: "q"; }
.iconic.user:before { content: "u"; }
.iconic.mail-alt:before { content: "M"; }


label{
color:#7F7E7E;
-webkit-transition: color 1s ease;
   -moz-transition: color 1s ease;
	    transition: color 1s ease;
}
label:hover{
color:#191919;
}
label:before{
color:#C1BFBD;
-webkit-transition: color 1s ease;
   -moz-transition: color 1s ease;
	    transition: color 1s ease;
}
label:hover:before{
color:#969696;
-webkit-transition: color 1s ease;
   -moz-transition: color 1s ease;
	    transition: color 1s ease;
}

#Work article{
padding-bottom:5px;
padding-top:5px;
}

.indication{
color:#878787;
font-size:12px;
font-style:italic;
text-align:right;
padding-right:10px;
}
.required{
color:#E5224C;
}



/** Styling the send button **/
input[type=submit]{

cursor:pointer;
background:none;
border:none;

color:#767676;
font-size:14px;
padding:4px 14px 4px 10px;
border:1px solid #E0E0E0;
text-shadow: 0px 1px  1px #E8E8E8;
background: rgb(247,247,247);
background: -moz-linear-gradient(top,  rgba(247,247,247,1) 1%, rgba(242,242,242,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(247,247,247,1)), color-stop(100%,rgba(242,242,242,1)));
background: -webkit-linear-gradient(top,  rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%);
background: -o-linear-gradient(top,  rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%);
background: -ms-linear-gradient(top,  rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%);
background: linear-gradient(top,  rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%);
/*border-radius*/
-webkit-border-radius:5px;
   -moz-border-radius:5px;
        border-radius:5px;
/*box-shadow*/
-webkit-box-shadow:0px 1px 1px #FFF inset,
			       0 0 0px 5px #EAEAEA;
   -moz-box-shadow:0px 1px 1px #FFF inset,	
   		           0 0 0px 5px #EAEAEA;
        box-shadow:0px 1px 1px #FFF inset,	
        		   0 0 0px 5px #EAEAEA;
/*transition*/
-webkit-transition:all 0.2s linear;
   -moz-transition:all 0.2s linear;
     -o-transition:all 0.2s linear;
        transition:all 0.2s linear;
}

input[type=submit]:hover{
color:#4a4a4a;
border-color: #CECECE;
background: rgb(244,244,244);
background: -moz-linear-gradient(top,  rgba(244,244,244,1) 0%, rgba(242,242,242,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(244,244,244,1)), color-stop(100%,rgba(242,242,242,1)));
background: -webkit-linear-gradient(top,  rgba(244,244,244,1) 0%,rgba(242,242,242,1) 100%);
background: -o-linear-gradient(top,  rgba(244,244,244,1) 0%,rgba(242,242,242,1) 100%);
background: -ms-linear-gradient(top,  rgba(244,244,244,1) 0%,rgba(242,242,242,1) 100%);
background: linear-gradient(top,  rgba(244,244,244,1) 0%,rgba(242,242,242,1) 100%);
/*box-shadow*/
-webkit-box-shadow:0px 1px 1px #FFF inset,			
                   0 0 0px 5px #E0E0E0;
   -moz-box-shadow:0px 1px 1px #FFF inset,
        			0 0 0px 5px #E0E0E0;
        box-shadow:0px 1px 1px #FFF inset,
        			0 0 0px 5px #E0E0E0;        
}

input[type=submit]:active,
input[type=submit]:focus{
position:relative;
top:1px;
color:#515151;
background: rgb(234,234,234);
background: -moz-linear-gradient(top,  rgba(234,234,234,1) 0%, rgba(242,242,242,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(234,234,234,1)), color-stop(100%,rgba(242,242,242,1)));
background: -webkit-linear-gradient(top,  rgba(234,234,234,1) 0%,rgba(242,242,242,1) 100%);
background: -o-linear-gradient(top,  rgba(234,234,234,1) 0%,rgba(242,242,242,1) 100%);
background: -ms-linear-gradient(top,  rgba(234,234,234,1) 0%,rgba(242,242,242,1) 100%);
background: linear-gradient(top,  rgba(234,234,234,1) 0%,rgba(242,242,242,1) 100%);
/*box-shadow*/
-webkit-box-shadow:0px -1px 1px #FFF inset,
				   0 0 0px 5px #E0E0E0;
   -moz-box-shadow:0px -1px 1px #FFF inset,
				   0 0 0px 5px #E0E0E0;
        box-shadow:0px -1px 1px #FFF inset,
				   0 0 0px 5px #E0E0E0;
}



/**** Transitions ****/



.isotope,
.isotope .isotope-item {

  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope{
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}





.tooltip {
	display:none;
	position:absolute;
	background-color:rgba(0,0,0,0.65);
	border-radius:2px;
	padding: 5px;
	color:#ffffff;
	font-family: 'Droid Sans', sans-serif;	
	font-size: 0.9em;
}


/* Print styles!
-------------------------------------------------------------------------------*/
@media print {



}


/* Media queries!
-------------------------------------------------------------------------------*/

/* Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */

/*

@media screen and  (min-width: 250px)and (max-width:535px) {
	
	article.highlight {
		width: 100%;
	}
	
	article.thumbs {
		width: 100%
	}
	
	header {
		width: 100%;
		left: 0;
	}
	
		input:not([type="submit"]), textarea{
		width:90%;

	}

	textarea{height:172px;}

input[type="submit"]{
margin-left:15px;
}
}

@media screen and  (min-width: 540px)and (max-width:810px) {
	
	article.highlight {
		width: 530px;
	}	
	

	.wrapper, header {
		margin: 0 auto;
		width: 540px;
	}

	
	header {margin-left: -270px;}

	iframe{
		width: 530px;
		height: 298px;
		margin-top: 0;
	}

	input:not([type="submit"]), textarea{
		width: 90%;

	}

	textarea{height:172px;}

	input[type="submit"]{
		margin-left:15px;
		}


}
*/
/* @media screen and (min-width: 810px)and (max-width:1080px) { */
@media screen and  (max-width:1080px) {
	
	article.highlight {
		width: 798px;
	}	
	#aboutcenter{
	width: 260px;
	}
	.wrapper, header {
		margin: 0 auto;
		width: 810px;
	}

	header {margin-left: -405px;}
	
	iframe{
		width: 798px;
		height: 448px;
		margin-top: 0;
	}

	input:not([type="submit"]), textarea{
		width: 375px;

	}
	.fr{
		-moz-column-count:2; /* Firefox */
		-webkit-column-count:2; /* Safari and Chrome */
		column-count:2;
		-moz-column-gap:5px; /* Firefox */
		-webkit-column-gap:5px; /* Safari and Chrome */
		column-gap:5px;
				}
	textarea{height:132px;}

input[type="submit"]{
margin-left:415px;
margin-top: 20px;
}
}

@media screen and (min-width: 1080px) {
	
	article.highlight {
		width: 798px;
	}	

	.wrapper, header {
		margin: 0 auto;
		width: 1080px;
	}

	header {margin-left: -540px;}
	
	iframe{
		width: 798px;
		height: 448px;
		margin-top: 0;
	}

	#Work article{
		margin-left: 268px;
		xfloat: left;
		width: 536px;
	}
	#Work div.hi{
		margin-left: 268px;
	}
/*
	#Work article div{
		clear: both;
	}
*/

	#Work div.hi{
		clear: both;

	}

	input:not([type="submit"]), textarea{
		width: 510px;

	}
	.fr{
		-moz-column-count:2; /* Firefox */
		-webkit-column-count:2; /* Safari and Chrome */
		column-count:2;
		-moz-column-gap:5px; /* Firefox */
		-webkit-column-gap:5px; /* Safari and Chrome */
		column-gap:5px;
				}
	textarea{height:132px;}

input[type="submit"]{
margin-left:555px;
margin-top: 20px;

}


@media all and (orientation: portrait) {
	
}

@media all and (orientation: landscape) {
	
}