html {
    -webkit-text-size-adjust: none;
}

/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
	display: block;
}


body { 
	background-color: #ffffff;
	font-family: 'Source Sans 3', sans-serif; 
	font-size: 21px; 
	font-weight: 300; 
	letter-spacing: -0.05em; 
	line-height: 27px;
	color: #333; 
	background: url(../images/pattern.gif); 
}

::selection { 
	background-color: rgba(128, 192, 0, 0.2); 
}

::-moz-selection { 
	background-color: rgba(0, 192, 0, 0.2); border: 10px solid red; 
}

h1 { 
	color: #fff; 
	float: left;
	font-size: 30px; 
	line-height: 43px;
	position: relative; 
	top: 19px; 
	letter-spacing: -0.05em; 
	font-family: 'Source Sans 3', sans-serif; 
	font-weight: 300;
	margin: 0px 0px 0px 0px;
}

h1 a { 
	color: #fff; 
	font-size: 30px; 
	letter-spacing: -0.05em; 
	line-height: 35px;
	background-color: #333; 
	padding: 4px 25px 6px 25px; 
	width: 300px; 
	border-bottom: 1px solid rgba(0, 0, 0, 0.4); 
	border-top: 1px solid rgba(255, 255, 255, 0.6);	
}

h1 a:hover { 
	color: #fff; 
	border-bottom: 1px solid rgba(0, 0, 0, 0.4); 
	padding-bottom: 6px; 
	background-color: #3a3a3a; 
}

h2 { 
	font-size: 50px; 
	line-height: 67px;
	color: #333; 
	height: 105px; 
	letter-spacing: -0.05em; 
	font-family: 'Source Sans 3', sans-serif; 
	font-weight: 300; 
	padding: 0px 0px 0px 125px;
	margin: 0;
}

h2 span.sub { 
	font-size: 40px; 
	line-height: 45px;
	float: left; 
	color: #4b4b4b; 
	padding-bottom: 30px; 
	letter-spacing: -0.05em; 
}

h2.intro { 
	background: url(../images/edelsteingutachten.png) no-repeat -10px -10px; 
}

h2.work { 
	background: url(../images/edelsteingutachten.png) no-repeat -10px -20px; 
}

h2.about { 
	background: url(../images/edelsteingutachten.png) no-repeat -10px -20px; 
}

h2.contact { 
	background: url(../images/edelsteingutachten.png) no-repeat -10px -20px; 
}

a { 
	color: #333; 
	text-decoration: none; 
	border-bottom: 1px solid #333; 
	padding-bottom: 2px; 	
}

a:link {
	outline: 0;
}

a:hover { 
	color: #000; 
	text-decoration: none; 
	border-bottom: 1px solid #000; 
	padding-bottom: 2px; 
}

a:active { 
	color: #000; 
	text-decoration: none; 
	border-bottom: 1px solid #000; 
	padding-bottom: 2px; 
}

p {
	font-size: 20px; /*24*/
	margin-bottom: 15px;
	line-height: 32px; /*36*/
	letter-spacing: -0.04em; 
	text-align: left;
	font-style: normal;
	font-weight: 300;
}

.flexible {
	color: #ffffff;
	font-size: 0;
	height: auto !important;
	line-height: 0;
	max-width: 100% !important;
	-ms-interpolation-mode: bicubic;
	display: block;
	outline: 0;
	width: 100%;
}

.klein {
	font-size: 18px;
	margin-bottom: 15px;
	line-height: 20px;
	text-align: left;
	font-style: normal;
	letter-spacing: 0.00em;
}

.imprint {
	font-size: 18px;
	margin-bottom: 15px;
	line-height: 26px;
	text-align: left;
	font-style: normal;
	font-weight: 300;
	width: 95%;
}

.image {
	float: left;
	margin: 0px 0px 10px 0px;
	width: 100%;
	display: block;
}

.image img {
	width: 345px;
}

.slidergallery-content {
	float: left;
	margin: 1px 0px 7px 0px;
	width: 100%;	
}

.slidergallery-inner {
	float: left;
	width: 100%;
}

ul.bxslider {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.bxslider li {
	font-site: 0px;
	margin: 0;
	padding: 0;
}

.no-js ul.bxslider li:nth-child( 2 ),
.no-js ul.bxslider li:nth-child( 3 ) {	
	display: none;
}

strong { 
	font-family: 'Source Sans 3', sans-serif; 
	font-weight: 400; 
	letter-spacing: -0.04em; 
	color: #757474; 
	text-decoration: none; 
}

header { 
	height: 48px;
	/*padding: 5px 0; */
	width: 100%; 
	background-color: #acbdcd; 
	margin-bottom: 25px; 
	-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); 
	-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); 
	position: fixed; 
	z-index: 500; 
	float: left; 
}

#headercontainer, 
#contentcontainer { 
	width: 800px; 
	margin: 0 auto; 
	position: relative; 
}

#contentcontainer { 
	float: none; 
	padding-top: 0px; 
}

.mobile-menu {
	width: 33px;
}

nav#nav-menu { 
	width: auto; 
	float: right; 
	font-family: 'Source Sans 3', sans-serif; 
	font-weight: 400; 
	letter-spacing: -0.05em; 
}

nav#nav-menu ul {
	display: block;
	margin: 7px 0px 0px 0px;
	padding: 0;	
	letter-spacing: -0.037em; 
}

nav#nav-menu ul li { 
	display: inline; 
	font-size: 20px; 
	line-height: 26px; 
	margin-left: 25px; 
}

nav#nav-menu ul li a { 
	font-size: 20px; 
	line-height: 26px; 
	border-bottom: none; 
	outline: 0;
}

nav#nav-menu ul li a:hover,
nav#nav-menu ul li a.mPS2id-highlight { 
	color: #000; 
	text-decoration: none; 
	border-bottom: 1px solid #000; 
	padding-bottom: 2px; 
}

section { 
	margin-bottom: 0px; 
	padding-top: 110px; 
	float: left;
	width: 100%;	
}

#intro h2 a { 
	padding-bottom: 0px; 
}

#intro a.featured { 
	padding-bottom: 0px; 
	border-bottom: none; 
}

#intro a img { 
	border: 5px solid rgba(204, 204, 204, 0.15); 
	-webkit-border-radius: 5px; 
	margin-top: 40px; 
	margin-bottom: 5px; 
}

#intro a img:hover, 
#portfolio .work a img:hover, 
input:hover, 
textarea:hover { 
	border: 5px solid rgba(204, 204, 204, 1); 
	-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); 
}

#intro a img:active, 
#portfolio .work a img:active { 
	-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); 
}

#portfolio ul.work a { 
	border-bottom: none; 
}

#portfolio ul.work a img { 
	border: 5px solid rgba(204, 204, 204, 0.15); 
	-webkit-border-radius: 5px; 
	float: left; 
	margin-right: 20px; 
}

#portfolio ul.work {	
	float: left; 
	margin: 0px 0px 0px -10px; 
	padding: 0;
	width: 100%; 
}

#portfolio ul.work li { 
	list-style: disc; 
	float: left; 
	margin-left: 35px; 
	margin-bottom: 20px; 
	font-size: 20px; 
	line-height: 32px; 
}

#about .about-wrapper {
	float: left;
	margin: -17px 0px 3px 0px;
	width: 100%;
}

#about ul.vita a { 
	border-bottom: none; 
}

#about ul.vita a img { 
	border: 5px solid rgba(204, 204, 204, 0.15); 
	-webkit-border-radius: 5px; 
	float: left; 
	margin-right: 20px; 
}

#about ul.vita { 
	float: left; 
	margin: 18px 0px 0px -15px; 
	padding: 0;
	width: 95%; 
}

#about ul.vita li { 
	list-style: none; 
	margin-bottom: 20px; 
	margin-top: 20px; 
	list-style-image: none; 
	display: inline; 
	padding-left: 0px; 
	font-size: 20px; 
	line-height: 32px;
}

#about ul.vita li:first-child { 
	list-style: none; 
	float: left; 
	margin-left: 15px; 
	margin-top: 0px; 
	margin-bottom: 12px; 
	list-style-image: none; 
	display: inline; 
	width: 128px; 
	font-size: 20px; 
	line-height: 32px; 
}

#contact {
	margin-bottom: 0px;
}

.contact-data-wrapper {
	float: left;
	margin: -17px 0px 33px 0px;
	width: 100%;
}

.boxanimated-trigger-imprint,
.boxanimated-trigger-privacy-policy {
	float: left;
	width: 100%;
}

.boxanimated-trigger-imprint-inner,
.boxanimated-trigger-privacy-policy-inner {
	border-bottom: 1px solid #333; 
	color: #333; 
	cursor:	pointer;
	float: left;
	display: block;
	padding-bottom: 2px;
	text-decoration: none;
}

.boxanimated-trigger-imprint-inner:hover,
.boxanimated-trigger-privacy-policy-inner:hover { 
	color: #000; 
	border-bottom: 1px solid #000; 
	padding-bottom: 2px; 
	text-decoration: none; 
}

.no-js .boxanimated-trigger-imprint-inner, 
.no-js .boxanimated-trigger-privacy-policy-inner {
	border-bottom: 0px; 
	padding-bottom: 0px; 
	cursor:	default;
}

.no-js .boxanimated-trigger-imprint-inner:hover,
.no-js .boxanimated-trigger-privacy-policy-inner:hover {
	border-bottom: 0px; 
	color: #333;
	padding-bottom: 0px; 
	text-decoration: none; 
}

.boxanimatedinner-imprint,
.boxanimatedinner-privacy-policy {
	display: none;
	float: left;
	width: 100%;
}

.no-js .boxanimatedinner-imprint,
.no-js .boxanimatedinner-privacy-policy {
	display: block;
}


footer { 
	float: left; 
	margin-top: 50px;
	margin-bottom: 40px;
}

footer ul { 
	margin-bottom: 150px; 
}

footer ul li { 
	display: inline; 
	margin-right: 50px; 
}

footer ul li a { 
	font-size: 20px; 
	margin-left: 10px; 
}

footer ul li img { 
	vertical-align: bottom; 
	position: relative; 
	top: 2px; 
}

.showtabletportrait {
	display: none;
}

.mobile-break {
	display: none;
}



@media screen and ( max-width: 850px ) {
	body { 
		font-size: 2.5vw; 
		line-height: 1.2;
	}

	h2 { 
		font-size: 5.8vw; 	/*50px*/ 
		line-height: 1.34;	/*67px*/
		height: 13vw; 
		padding: 0vw 0vw 0vw 14.6vw;
	}

	h2 span.sub { 
		font-size: 4.8vw; 
		line-height: 1.1;
		padding-bottom: 3.8vw; 		
	}
	
	h2.intro { 
		background-size: 15vw;
	}

	h2.work { 
		background-size: 15vw;
	}

	h2.about { 
		background-size: 15vw;
	}

	h2.contact { 
		background-size: 15vw;
	}	
	
	p {
		font-size: 2.4vw; 
		line-height: 1.53;
		letter-spacing: -0.05em; 
		margin-bottom: 1.5vw;
	}

	.imprint {
		font-size: 2.4vw; 
		line-height: 1.53;
		margin-bottom: 1.5vw;
	}

	.image {
		margin: 0vw 0vw 0.5vw 0vw;
	}

	.image img {
		width: 41vw;
	}

	#headercontainer, 
	#contentcontainer { 
		width: 94%; 
	}

	.mobile-menu {
		cursor: pointer;
		float: right; 
		margin: 15px 0px 0px 0px;
	}

	nav#nav-menu { 
		background-color: #acbdcd;
		display: none;
		padding: 72px 0px 0px 0px;
		position: fixed;
		right: 0px;
		top: 0px;
		width: 100%;
		z-index: -1;
	}

	nav#nav-menu ul {
		display: block;
		margin: 7px 0px 0px 0px;
		padding-left: calc( 3% + 25px );
		padding-bottom: 10px;		
		letter-spacing: -0.037em; 
	}

	nav#nav-menu ul li { 
		display: block; 
		font-size: 20px; 
		line-height: 40px; 
		margin-left: 0px; 
	}

	nav#nav-menu ul li a { 
		border-bottom: 1px solid transparent; 
		font-size: 20px; 
		line-height: 40px;
		padding-bottom: 2px; 
		
	}

	nav#nav-menu ul li a:hover,
	nav#nav-menu ul li a.mPS2id-highlight { 
		color: #000; 
		text-decoration: none; 
		border-bottom: 1px solid #000; 
		padding-bottom: 2px; 
	}

	#portfolio ul.work {
		width: 100%; 
	}

	#portfolio ul.work li { 
		font-size: 2.4vw; 
		line-height: 1.53;
		margin-bottom: 2vw; 
	}

	#about ul.vita li { 
		font-size: 2.4vw; 
		line-height: 1.53;
		margin-bottom: 2vw; 
		margin-top: 2vw; 	
	}

	#about ul.vita li:first-child { 
		font-size: 2.4vw; 
		line-height: 1.53;
		margin-bottom: 1.2vw; 
		width: 15vw; 
	}

	footer { 	
		margin-top: 7.4vw; 
	}

	.showtabletportrait {
		display: block;
	}	
}	



@media screen and ( max-width: 650px ) {
	body { 
		font-size: 18px; 
	}
	
	p {
		font-size: 18px; 
		margin-bottom: 15px;
	}
	
	section#portfolio,
	section#about,
	section#contact	{
		padding-top: 90px;
	}
	
	.imprint {
		font-size: 18px; 
		margin-bottom: 15px;
	}

	.image {
		margin: 0px 0px 10px 0px;
	}

	.image img {
		width: 260px;
	}
	
	#portfolio ul.work li { 
		font-size: 18px; 
		margin-bottom: 15px; 
	}
	
	#about ul.vita { 
		margin: 18px 0px 0px 0px; 
	}

	#about ul.vita li { 
		font-size: 18px; 
		margin-bottom: 15px;
		margin-top: 15px; 
		width: 100%; 		
	}

	#about ul.vita li:first-child { 
		font-size: 18px; 
		margin-bottom: 15px;
		margin-left: 0px;
		width: 100%; 
	}
	
}




@media screen and ( max-width: 550px ) {
	header { 
		height: 8.8vw;
	}
	
	h1 { 
		font-size: 5vw; 
		line-height: 1.5;
		top: 2.5vw; 
		letter-spacing: -0.05vw; 
	}

	h1 a { 
		font-size: 5vw; 
		letter-spacing: -0.05vw; 
		line-height: 1.5;
		padding: 4px 25px 6px 25px; 
		width: auto; 
	}

	.klein {
		font-size: 3vw;
		margin-bottom: 15px;
		line-height: 1.5
	}

	.mobile-menu {
		margin: 2.3vw 0vw 0vw 0vw;
	}
	
	nav#nav-menu { 
		padding: 11.8vw 0vw 0vw 0vw;
	}

}


@media screen and ( max-width: 450px ) {
	header { 
		height: 65px;
	}
	
	h1 { 
		background-color: #333333;	
		font-size: 20px; 
		line-height: 1.5;
		top: 9px; 
		letter-spacing: -0.05em; 
	}
	
	h1 a {
		display: block;
		font-size: 20px; 
		letter-spacing: -0.05em; 
		line-height: 1.5;
		padding: 4px 15px 10px 15px; 
	}
	
	h1 a:hover { 
		padding-bottom: 10px; 
	}
	
	h2 { 
		font-size: 21px; 	/*50px*/ 
		padding: 0vw 0vw 0vw 12vw;
	}

	h2 span.sub { 
		font-size: 20px; 
	}
	
	h2.intro { 
		background-size: 60px 60px;
	}

	h2.work { 
		background-size: 60px 60px;
	}

	h2.about { 
		background-size: 60px 60px;
	}

	h2.contact { 
		background-size: 60px 60px;
	}	
	
	.klein {
		font-size: 14px;
		margin-bottom: 0px;
	}
	
	.mobile-menu {
		margin: 26px 0px 0px 0px;
	}
	
	nav#nav-menu { 
		padding: 88px 0px 0px 0px;
		width: 100%;
	}

	nav#nav-menu ul {	
		padding-left: 26px;
	}	
	
	.mobile-break {
		display: block;
	}
}