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

html {
    font-size: 62.5%; // 16px browser default -> 10px custom default
}

body {
    color: #252525;
    font-family: 'Antic Slab', serif;
    font-weight: 300;
    font-size: 14px; 
    font-size: 1.4rem;
    line-height: 23px;
    line-height: 2.3rem;   
    margin: 0;
}





/*------------------------ TYPO ------------------------*/

a:link, a:visited {
	text-decoration: none;
}
.typo-color-white {
	color: #fff;
}
.typo-color-black {
	color: #000;
}
.primary-link:link,
.primary-link:visited {
	color: #5e9900;
	text-decoration: underline;
}
.primary-link:hover {
	text-decoration: none;
}
h1, h2 {
	margin: 0;
	font-weight: normal;
	font-family: 'Dosis', sans-serif;			
}
h1 {
	font-size: 40px;
	font-size: 4rem;
	color: rgba(255, 255, 255, 0.9);
	text-align: center;
	font-weight: lighter;	
}
h2 {
	font-size: 25px;
	font-size: 2.5rem;	
	line-height: 30px;
	line-height: 3rem; 
	color: #000;	
}





/*------------------------ BUTTONS ------------------------*/

.button,
.button-secondary {
	border-radius: 3px;		
	height: 45px;
	height: 4.5rem;		
	text-align: center;
	font-family: 'Dosis', sans-serif;	
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 43px;
	line-height: 4.3rem;
	color: #000;	
	background: #96d136;
	background: -webkit-gradient(linear, left top, left bottom, from(#bde848), to(#96d136));
	background: -moz-linear-gradient(top,  #bde848,  #96d136);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#bde848', endColorstr='#96d136', GradientType=0);
	border: 1px solid #8eba14;
}
.button-secondary {
	background: #dddddd;
	background: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#dddddd));
	background: -moz-linear-gradient(top,  #f0f0f0,  #dddddd);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#dddddd', GradientType=0);	
	border: 1px solid #cbcbcb;	
}





/*------------------------ HEADER / FOOTER / MENU ------------------------*/

.menu-opener,
.menu a:first-child,
.back2top,
.back2top a {
	height: 60px;
	height: 6rem;
	width: 97px;
	width: 9.7rem;
	right: 0;
	top: 0;
	position: fixed;
	z-index: 5;
	background: rgba(0,0,0,0.8);
	border-radius: 0 0 0 4px;
	display: block;
	line-height: 60px;
	line-height: 6rem;
}
.menu-opener span,
.menu a:first-child span {
	height: 100%;
	width: 100%;
	float: left;
	background: url(01_assets/icons/menu.gif) center center no-repeat;
}
.menu a:first-child span {
	width: 100%;
	background: url(01_assets/icons/close_menu.png) center center no-repeat;
}
.menu {
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	background: rgba(255,255,255,1);
	padding-top: 6rem;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
	overflow: auto;
}
.menu a,
.menu-selected {
	display: block;
	width: 100%;
	height: 60px;
	height: 6rem;
	line-height: 60px;
	line-height: 6rem;	
	color: #000;
	font-size: 25px;
	font-size: 2.5rem;
	margin-bottom: .1rem;
	border-bottom: 1px solid rgba(0,0,0,0.1);
	font-family: 'Dosis', sans-serif;				
}
.menu a:nth-child(2),
.menu-topitem {
	border-top: 1px solid rgba(0,0,0,0.1);
	margin-top: 3.7rem;
}
.menu-selected {
	cursor: default;
	box-shadow: inset 7px 0 #90c934;
	color: #90c934;
}
.menu a span,
.menu-selected span {
	display: block;
	width: 0;
	height: 100%;
	float: left;
	margin-right: 30px;	
	margin-right: 3rem;
}
#menu {
	z-index: -10;
	width: 0;
	transition: all .5s;
	-moz-transition: all .5s; 
	-webkit-transition: all .5s; 
	-o-transition: all .5s; 
	position: fixed;	
}
#menu:target {
	z-index: 10;
	width: 100%;
	position: absolute;
}
.back2top,
.back2top a {
	left: 50%;
	bottom: 0;
	margin-left: -48px;
	margin-left: -4.8rem;
	position: relative;
	border-radius: 4px 4px 0 0;
	background: rgba(0,0,0,0.8) url(01_assets/icons/back2top.png) center center no-repeat;	
	float: left;	
}
.spacer {
	width: 100%;
	height: 30px;
	height: 3rem;
	float: left;
}





/*------------------------ INDEX ------------------------*/

.logo,
.logo-index {
	height: 60px;
	height: 6rem;
	width: 250px;
	width: 25rem;
	left: 50%;
	top: 50%;
	margin-top: -40px;
	margin-top: -4rem;
	margin-left: -125px;
	margin-left: -12.5rem;
	position: fixed;
	z-index: 1;
	background: url(01_assets/logo.png) center center no-repeat;
}
.logo {
	display: none;
}
.background {
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	z-index: 0;	
	position: fixed;
	background: url(01_assets/back_mobile.jpg) center center no-repeat;	
	background-size: cover;		
}





/*------------------------ CONTENT-BOXEN, H1 ------------------------*/

.content-wrap,
.content-wrap-large,
.pics-wrap {
	position: absolute;	
	left: 50%;
	width: 300px;
	width: 30rem;	
	margin: 0 0 0 -150px;
	margin: 0 0 0 -15rem;
	z-index: 1;	
	padding: 0;
}
.content-wrap li,
.content-wrap-large li {
	height: auto;	
	list-style-type: none;
	background: #fff;
	border-radius: 3px;	
	margin: 10px 0 0 0;
	margin: 1rem 0 0 0;
	float: left;
}
.content-wrap h1,  /*h1*/
.content-wrap-large h1,
.pics-wrap h1 {         
	position: relative;
	z-index: 1;
	margin: 118px 0 15px 0;	
	margin: 11.8rem 0 1.5rem 0;	
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	padding-bottom: 25px;	
	padding-bottom: 2.5rem;	
}
.content-wrap li:nth-child(10) {  /*prices*/
	border-radius: 3px;	
	background: rgba(255, 255, 255, 0.5);		
}
.content-wrap li div,
.content-wrap li h2,
.content-wrap-large li div,
.content-wrap-large li h2 { 
	float: left;
	width: 100%;	
	color: #252525;	
	padding: 0 20px; 	
	padding: 0 2rem; 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
	position: relative;
	display: inline;	
}
.content-wrap li div:nth-child(1),
.content-wrap-large li div:nth-child(1) {  /*pic*/
	background-size: cover;	
	height: 250px;	
	height: 25rem;	
	border-radius: 3px 3px 0 0;
}
.content-wrap li div:nth-child(4),
.content-wrap li:nth-child(10) div,
.emailbox div {  /*massage-text*/
	margin: 20px 0;	
	margin: 2rem 0;		
}
.content-wrap-large li div:nth-child(3),
.content-wrap-large li ul {
	margin-top: 13px;	
	margin-top: 1.3rem; 	
}
.content-wrap li h2,
.content-wrap-large li h2 {  /*headline-massage*/
	  margin-top: 2rem;
}
.pic-hotstone {
	background: url(01_assets/massagen/massagen_hotstone.jpg) center center;
}
.pic-klassische {
	background: url(01_assets/massagen/massagen_klassische.jpg) center center;
}
.pic-dornbreuss {
	background: url(01_assets/massagen/massagen_dornbreuss.jpg) center center;
}
.pic-intensive {
	background: url(01_assets/massagen/massagen_intensive.jpg) center center;
}
.pic-hawaii {
	background: url(01_assets/massagen/massagen_hawaii.jpg) center center;
}
.pic-tibet {
	background: url(01_assets/massagen/massagen_tibet.jpg) center center;
}
.pic-honig {
	background: url(01_assets/massagen/massagen_honig.jpg) center center;
}
.pic-abhyanga {
	background: url(01_assets/massagen/massagen_abhyanga.jpg) center center;
}
.pic-gutschein {
	background: url(01_assets/gutscheine.jpg) -100px center;
}
.pic-uebermich {
	background: url(01_assets/uebermich.jpg) -210px center;
}
.icons {  /*icons*/
	margin-top: 2rem;
}
.region-ruecken,
.region-ganz,
.dauer {
	height: 30px;
	height: 3rem;
	width: 50px;
	width: 5rem;	
	border-radius: 3px;
	padding: 10px 7px 10px 30px;	
	padding: 1rem 0.7rem 1rem 3rem;
	display: inline;	
}
.region-ruecken,
.region-ganz {
	color: #fff;
}
.region-ruecken {
	background: #418200 url(01_assets/icons/icon_ruecken.png) no-repeat 6px center;
	padding-left: 27px;	
	padding-left: 2.7rem;		
}
.region-ganz {
	background: #ffb400 url(01_assets/icons/icon_ganz.png) no-repeat 6px center;
}
.dauer {
	background: #f4f4f4 url(01_assets/icons/icon_dauer.png) no-repeat 6px center;	
}
.content-wrap-large-button {
	float: left;
	left: 50%;	
	margin: 38px 0 20px -130px;
	margin: 3.8rem 0 2rem -13rem;	
	width: 260px;
	width: 26rem;		
	position: relative;
}
.bullet-list li {
	list-style-type: circle;
	width: 100%;	
}
.bullet-list li:nth-child(1) {
	margin-top: 20px;
	margin-top: 2rem;	
}
.content-map li div:first-child {
	padding: 0 30px 0 0;
	overflow: hidden;
}
.emailbox div {
	max-height: 65px;
	max-height: 6.5rem;
	margin-bottom: 0;
}
.emailbox a {
	margin-top: 0;	
}
.emailbox a:last-child {
	margin-top: 15px;
	margin-top: -1rem;	
}
.emailbox span {
	width: 100%;
	float: left;
}





/*------------------------ BILDER ------------------------*/
.pics-wrap a {
	width: 15rem;
	height: 15rem;
	max-height: 150px;
	max-height: 15rem;	
	display: block;
	float: left;
}
.pics-wrap a:nth-child(2) {
	background: url(01_assets/bilder/massage_studio_s_01.jpg) center center;		
	border-radius: 3px 0 0 0;	
}
.pics-wrap a:nth-child(3) {
	background: url(01_assets/bilder/massage_studio_s_02.jpg) center center;	
	border-radius: 0 3px 0 0;	
}
.pics-wrap a:nth-child(4) {
	background: url(01_assets/bilder/massage_studio_s_03.jpg) center center;	
}
.pics-wrap a:nth-child(5) {
	background: url(01_assets/bilder/massage_studio_s_04.jpg) center center;	
}
.pics-wrap a:nth-child(6) {
	background: url(01_assets/bilder/massage_studio_s_05.jpg) center center;	
}
.pics-wrap a:nth-child(7) {
	background: url(01_assets/bilder/massage_studio_s_06.jpg) center center;	
}
.pics-wrap a:nth-child(8) {
	background: url(01_assets/bilder/massage_studio_s_07.jpg) center center;	
	border-radius: 0 0 0 3px;	
}
.pics-wrap a:nth-child(9) {
	background: url(01_assets/bilder/massage_studio_s_08.jpg) center center;	
	border-radius: 0 0 3px 0;		
}
.pics-wrap a:nth-child(10) {
	background: url(01_assets/bilder/massage_studio_s_09.jpg) center center;	
	border-radius: 0 0 3px 0;		
}




/*------------------------------------------------ BREAKPOINT TABLET ------------------------------------------------*/

@media screen and (min-width: 768px) {







/*------------------------ CONTENT-BOXEN, H1 ------------------------*/

.content-wrap,
.content-wrap-large,
.pics-wrap {	
	width: 621px;
	width: 62.1rem;	
	margin-left: -310px;
	margin-left: -31rem;
}
.content-wrap li {	
	min-height: 675px;
	min-height: 67.5rem;	
	width: 300px;
	width: 30rem;
	margin: 5px;	
}
.content-wrap h1 { 				/*h1*/
	margin: 118px 5px 15px 5px;	
	margin: 11.8rem 0.5rem 1.5rem 0.5rem;		
}
.content-wrap-large h1,
.pics-wrap h1 {
	margin: 118px 0 15px 0;	
	margin: 11.8rem 0 1.5rem 0;		
}
.content-wrap li:nth-child(2),
.content-wrap li:nth-child(3),
.content-wrap li:nth-child(6),
.content-wrap li:nth-child(7),
.content-wrap li:nth-child(8) {
	min-height: 555px;
	min-height: 55.5rem;
}
.content-wrap li:nth-child(10) {  /*prices*/
	min-height: 200px;	
	min-height: 20rem;
	width: 610px;
	width: 61rem;	
}
.content-wrap li:nth-child(8),
.content-wrap li:nth-child(9) {
	min-height: 795px;
	min-height: 79.5rem;
}
.content-map li div:first-child {
	padding: 0;
}
.content-wrap li:nth-child(11) {
	min-height: 10rem;
	min-height: 100px;	
	width: 61rem;
	width: 610px;	
}
.pic-uebermich,
.pic-gutschein {
	background-position: center center;
}
.emailbox div {
	max-height: 40px;
	max-height: 4rem;
	text-align: center;	
}
.emailbox span {
	display: none;
}
.emailbox a,
.emailbox a:last-child {
	left: 0;
	margin: 0 5px 20px 20px;	
	margin: 0 .5rem 2rem 2rem;	
	width: 280px;
	width: 28rem;
}
.emailbox a:last-child {
	margin-left: 5px;
	margin-left: .5rem;	
}






/*------------------------ BILDER ------------------------*/
.pics-wrap a {
	width: 200px;
	width: 20rem;
	height: 200px;
	height: 20rem;	
	max-height: 200px;
	max-height: 20rem;	
	margin-bottom: 10px;
	margin-bottom: 1rem;
	border-radius: 3px;
}
.pics-wrap a:nth-child(2),
.pics-wrap a:nth-child(3),
.pics-wrap a:nth-child(5),
.pics-wrap a:nth-child(6),
.pics-wrap a:nth-child(8),
.pics-wrap a:nth-child(9) {	
	margin-right: 10px;
	margin-right: 1rem;	
	border-radius: 3px;	
}
}




/*------------------------------------------------ BREAKPOINT TABLET ------------------------------------------------*/

@media screen and (min-width: 1025px) {





/*------------------------ HEADER / FOOTER / MENU ------------------------*/

.menu-opener,
.menu a:first-child {
	display: none;
}

.menu {
	height: 97px;
	height: 9.7rem;	
	position: absolute;
	padding: 0 0 0 35rem;	
	background: none;	
	box-shadow: 0 2px 5px -1px rgba(0,0,0,0.1);	
	animation: intro--menu 4s;
	-moz-animation: intro--menu 4s; 
	-webkit-animation: intro--menu 4s; 
	-o-animation: intro--menu 4s;				
}

.menu a,
.menu-selected {
	display: inline;
	width: 20%;
	height: 97px;
	height: 9.7rem;	
	line-height: 97px;
	line-height: 9.7rem;	
	margin-bottom: 0;
	float: left;
	border-bottom: none;	
	background: rgba(255,255,255,1);
	font-size: 18px;	
	text-align: center;	
}
.menu a:nth-child(2),
.menu-topitem {
	border-top: none;
	margin-top: 0;	
}

.menu-selected {
	box-shadow: inset 0 -7px #90c934;
	color: #000;	
}

.menu a span,
.menu-selected span,
.menu a:nth-child(n) span{
	display: block;
	width: 1px;
	width: .1rem;
	height: 100%;	
	margin: 0;
	background: rgba(0,0,0,0.075);		
}

.logo-intro,
.menu-intro a:nth-child(2),
.menu-intro a:nth-child(3),
.menu-intro a:nth-child(4),
.menu-intro a:nth-child(5),
.menu-intro a:nth-child(6) {
	animation: intro 3.4s ease-in;
	-moz-animation: intro 3.4s ease-in; 
	-webkit-animation: intro 3.4s ease-in; 
	-o-animation: intro 3.4s ease-in;		
}

.menu-intro a:nth-child(3) {
	animation-duration: 3.8s;
	-moz-animation-duration: 3.8s; 
	-webkit-animation-duration: 3.8s; 
	-o-animation-duration: 3.8s;		
}

.menu-intro a:nth-child(4) {
	animation-duration: 3.2s;
	-moz-animation-duration: 3.2s; 
	-webkit-animation-duration: 3.2s; 
	-o-animation-duration: 3.2s;		
}

.menu-intro a:nth-child(5) {
	animation-duration: 4.6s;
	-moz-animation-duration: 4.6s; 
	-webkit-animation-duration: 4.6s; 
	-o-animation-duration: 4.6s;	
}

.menu-intro a:nth-child(6) {
	animation-duration: 3.4s;
	-moz-animation-duration: 3.4s; 
	-webkit-animation-duration: 3.4s; 
	-o-animation-duration: 3.4s;		
}

#menu {
	z-index: 10;
	width: 100%;
	display: inline-block;	
}

@keyframes intro
{
	0%  {margin-top: 50rem;}		
	25%  {margin-top: 0;}
	27%  {margin-top: -1rem;}					
	30%  {margin-top: 0;}	
}
@-webkit-keyframes intro
{
	0%  {margin-top: 50rem;}		
	25%  {margin-top: 0;}
	27%  {margin-top: -1rem;}					
	30%  {margin-top: 0;}	
}

@keyframes intro--menu
{
	0%  {height: 100%; box-shadow: none;}		
	100%  {box-shadow: none;}				
}
@-webkit-keyframes intro--menu
{
	0%  {height: 100%; box-shadow: none;}		
	100%  {box-shadow: none;}				
}



/*------------------------ INDEX ------------------------*/

.logo,
.logo-index {
	left: 0;	
	top: 0;
	height: 97px;
	height: 9.7rem;
	width: 350px;
	width: 35rem;	
	margin: 0;
	z-index: 11;	
	background: url(01_assets/logo_negative.png) center center no-repeat;
}

.logo-intro {
	animation-duration: 3s;
	-moz-animation-duration: 3s; 
	-webkit-animation-duration: 3s; 
	-o-animation-duration: 3s;			
}

.logo {
	display: inline;
}
.background {
	background: url(01_assets/back_desktop.jpg) center center no-repeat;	
}





/*------------------------ CONTENT-BOXEN, H1 ------------------------*/

.content-wrap h1 { 				/*h1*/
	margin: 215px 5px 15px 5px;	
	margin: 21.5rem 0.5rem 1.5rem 0.5rem;		
}
.content-wrap-large h1,
.pics-wrap h1 {
	margin: 215px 0 15px 0;	
	margin: 21.5rem 0 1.5rem 0;		
}





/*------------------------ HOVERS ------------------------*/

.button:hover {
	background: #90c934;
	background: -webkit-gradient(linear, left top, left bottom, from(#bde848), to(#90c934));
	background: -moz-linear-gradient(top,  #bde848,  #90c934);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#bde848', endColorstr='#90c934', GradientType=0);
	border: 1px solid #84ad13;	
	box-shadow: 0 1px 0 rgba(0,0,0,0.08);
	-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.08);	
	-moz-box-shadow: 0 1px 0 rgba(0,0,0,0.08);			
}
.button-secondary:hover {
	background: #d7d7d7;
	background: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#d7d7d7));
	background: -moz-linear-gradient(top,  #f0f0f0,  #d7d7d7);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#d7d7d7', GradientType=0);	
	border: 1px solid #c2c2c2;		
}
.menu a,
.menu a:hover,
.pics-wrap a,
.pics-wrap a:hover,
.back2top,
.back2top:hover {
	transition: .25s;
	-moz-transition: .25s; 
	-webkit-transition: .25s; 
	-o-transition: .25s;	
}
.menu a:hover {		
	box-shadow: inset 0 -7px #90c934;
	line-height: 9rem;
	line-height: 90px;	 
}
.pics-wrap a:hover {	
	transform: scale(0.95);
	-webkit-transform: scale(0.95);
	-moz-transform: scale(0.95);
	-0-transform: scale(0.95);					
}
.back2top:hover {
	background: rgba(0,0,0,0.7) url(01_assets/icons/back2top.png) center 12px no-repeat;	
}



}




/*------------------------------------------------ BREAKPOINT DESKTOP ------------------------------------------------*/

@media screen and (min-width: 1248px) {





/*------------------------ CONTENT-BOXEN, H1 ------------------------*/

.content-wrap {	
	width: 930px;
	width: 93rem;	
	margin-left: -465px;
	margin-left: -46.5rem;
}
.content-wrap li:nth-child(10) {  /*prices*/
	width: 300px;
	width: 30rem;	
}
.content-wrap li:nth-child(2),
.content-wrap li:nth-child(3),
.content-wrap li:nth-child(4) {
	min-height: 660px;
	min-height: 66rem;
}
.content-wrap li:nth-child(5),
.content-wrap li:nth-child(6),
.content-wrap li:nth-child(7) {
	min-height: 570px;
	min-height: 57rem;
}
.content-wrap li:nth-child(8),
.content-wrap li:nth-child(9),
.content-wrap li:nth-child(10) {
	min-height: 795px;
	min-height: 79.6rem;
}
.emailbox div {
	max-height: 40px;
	max-height: 4rem;
}
.content-wrap li:nth-child(11) {
	width: 92rem;
	width: 920px;	
}
.emailbox a,
.emailbox a:last-child {
	left: 15rem;
}

}





/*------------------------ IE8 FALLBACK ------------------------*/

.ie8_background {
	position: absolute;
	z-index: 998;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #bde848;
}
.ie8_box {
	position: absolute;
	z-index: 999;	
	width: 450px;
	height: 200px;
	left: 50%;
	top: 50%;
	margin: -150px 0 0 -225px;
	padding: 30px;
	background: #fff;
}
.ie8_box span {
	 font-size: 18px;
}