@import url('typo.css');

body {
	margin 												: 0;
	padding 											: 0;
}

::-moz-selection {
	background-color									: #ffdcdc;
	color												: #fff;
}

::selection {
	background-color									: #ffdcdc;
	color												: #fff;
}

.content-img_li, .content-img_re, .content-img_hoch {
	border 												: #ebe6e6 5px solid;
}

.content-img_li {
	float												: left;
}

.content-img_re {
	float												: right;
}

.content-img_portrait {
	width 												: 150px;
	height 												: 208px;
	background-size 									: 150px 208px;
	border 												: #ebe6e6 5px solid;
	float 												: left;
}

.content-img_hoch {
	float 												: left;
}

.content-img_quadrat {
	margin 												: 0 35px 35px 0;
	width 												: 300px;
	height 												: 300px;
	background-size 									: 300px 300px;
	border 												: #ebe6e6 5px solid;
	float 												: right;
}

.content-img_pano {
	border 												: #ebe6e6 5px solid;
}

.content-img_li:hover, .content-img_re:hover, .content-img_quadrat:hover, .content-img_pano:hover, .content-img_zertifikat:hover, .workshop_flyer:hover {
	cursor 												: zoom-in; /*Lupen-Icon zum vergrößern */
}

#content-img_overlay1, #content-img_overlay2, #content-img_overlay3, #content-img_overlay4, #content-img_overlay5, #content-img_overlay6 {
	position 											: fixed; /* Sit on top of the page content */
	display 											: none; /* Hidden by default */
	width 												: 100%; /* Full width (cover the whole page) */
	height 												: 100%; /* Full height (cover the whole page) */
	top 												: 0;
	left 												: 0;
	right 												: 0;
	bottom 												: 0;
	background-color 									: rgba(0,0,0,0.9); /* Black background with opacity */
	z-index 											: 10; /* Specify a stack order in case you're using a different order for other elements */
	cursor 												: zoom-out;  /*Lupen-Icon zum verkleinern */
}

.overlay-img_li, .overlay-img_re, .overlay-img_quadrat, .overlay-img_pano, .overlay-img_zertifikat, .overlay-qr_code, .overlay-workshop_flyer {
	position 											: absolute;
	top 												: 50%;
	left 												: 50%;
	transform 											: translate(-50%,-50%);
	-ms-transform 										: translate(-50%,-50%);
}

#header {
	width												: 100%;
	height 												: 300px;
	border 												: 0;
}

#header > div {
    position 											: absolute;
	width												: 100%;
	height 												: 300px;
	left 												: 0px;
    top 												: 0px;
	background-size 									: cover;
	background-position 								: 50% 50%;
	z-index 											: 0;
}

.img_1 {
	background 		 									: url(../img/header_logo.svg), url(../img/header_01.jpg);
}
.img_2 {
	background-image 									: url(../img/header_logo.svg), url(../img/header_02.jpg);
}
.img_3 {
	background-image 									: url(../img/header_logo.svg), url(../img/header_03.jpg);
}
.img_4 {
	background-image 									: url(../img/header_logo.svg), url(../img/header_04.jpg);
}
.img_5 {
	background-image 									: url(../img/header_logo.svg), url(../img/header_05.jpg);
}
.img_6 {
	background-image 									: url(../img/header_logo.svg), url(../img/header_06.jpg);
}
.img_7 {
	background-image 									: url(../img/header_logo.svg), url(../img/header_07.jpg);
}
.img_8 {
	background-image 									: url(../img/header_logo.svg), url(../img/header_08.jpg);
}



#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 60px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #ffdcdc; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 20px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #9691a0; /* Add a dark-grey background on hover */
}


#gutschein-button {
	position 											: absolute;
	padding 											: 0;
	border-top 											: 1px solid #b5b2b9;
	z-index 											: 2;
}

#gutschein-button a {
	font-family											: 'light';
	display 											: block;
 	text-decoration 									: none;
/*	text-shadow 										: 0px 0px 3px #c39b96; */
}

#hauptmenue {
	margin 												: 0;
	padding 											: 0 0 0 50%;
	width 												: 50%;
	height 												: 100px;
}

#hauptmenue ul {
	margin 												: 0 0 0 -450px;
	padding												: 0;
	width 												: 900px;
	list-style-type										: none;
}

#hauptmenue li {
	margin												: 0;
	width 												: 225px;
	height 												: 100px;
	padding												: 0;
	float												: left;
	text-align 											: center;
}

#hauptmenue li a {
	width 												: 120px;
	height 												: 100px;
	display 											: inline-block;
}

.menue1, .menue1_active, .menue2, .menue2_active, .menue3, .menue3_active, .menue4, .menue4_active {
	background-size 									: 120px 100px;
	background-repeat 									: no-repeat;
	background-position 								: center; 
}

.menue1 {
	background-image 									: url(../img/menue-startseite_idle.svg);
}

.menue1:hover {
	background-image 									: url(../img/menue-startseite_hover.svg);
}

.menue1_active {
	background-image 									: url(../img/menue-startseite_active.svg);
}

.menue2 {
	background-image 									: url(../img/menue-dasstudio_idle.svg);
}

.menue2:hover {
	background-image 									: url(../img/menue-dasstudio_hover.svg);
}

.menue2_active {
	background-image 									: url(../img/menue-dasstudio_active.svg);
}

.menue3 {
	background-image 									: url(../img/menue-leistungen_idle.svg);
}

.menue3:hover {
	background-image 									: url(../img/menue-leistungen_hover.svg);
}

.menue3_active {
	background-image 									: url(../img/menue-leistungen_active.svg);
}

.menue4 {
	background-image 									: url(../img/menue-kontakt_idle.svg);
}

.menue4:hover {
	background-image 									: url(../img/menue-kontakt_hover.svg);
}

.menue4_active {
	background-image 									: url(../img/menue-kontakt_active.svg);
}

#untermenue {
	margin 												: 0 0 20px 0;
	padding												: 0 0 0 50%;
	width 												: 50%;
	height 												: 120px;
	background 											: -prefix-linear-gradient(top, #ede9e9, white 20%); 
	background 											: linear-gradient(to bottom, #ede9e9, white 20%);
	border-top 											: #e0dbdb 1px solid;
}

#untermenue ul {
	margin 												: 20px 0 0 -300px;
	padding												: 0;
	width 												: 600px;
	list-style-type										: none;
}

#untermenue li {
	margin												: 0;
	padding												: 0;
	height 												: 40px;
	text-align 											: center;
	float 												: left;
}

#untermenue li a {
	font-family											: 'light';
	font-weight											: normal;
	font-style											: normal;
	color												: #c39b96;
 	font-size											: 14pt;
	line-height											: 24pt;
	text-decoration 									: none;
}


#untermenue li a:hover {
	color												: #9691a0;
}

#renata_kopf, #renata-kopf_header {
	position 											: absolute;
	top 												: 395px;
	left 												: 100px;
	width 												: 163px;
	height 												: 180px;
	background-image 									: url(../img/renata-kopf.png);
	background-size 									: 163px 180px;
	z-index 											: 3;
}

#www-nagelstudio-eleganz-de {
	position 											: absolute;
	top 												: 450px;
	left												: 50%;
	margin-left											: -200px;
	width 												: 400px;
	height 												: 46px;
	background-image 									: url(../img/www-nagelstudio-eleganz-de.svg);
	background-size 									: 400px 46px;
	z-index 											: 2;
}

#rosa_band_schraeg {
	position											: absolute;
	top 												: 410px;
	width												: 100%; 
   	height												: 120px;
	background 											: #ffdcdc; 
    -webkit-transform 									: skew(0deg, -2deg); 
    -moz-transform 										: skew(0deg, -2deg); 
    -ms-transform 										: skew(0deg, -2deg); 
    -o-transform 										: skew(0deg, -2deg); 
    transform 											: skew(0deg, -2deg);
	z-index 											: 1;
}

.rosa_band {
	padding-top 										: 10px;
	width												: 100%; 
   	height												: 110px;
	background 											: #ffeaea;
	z-index 											: 1;
}

.hellrosa_band {
	padding-top 										: 10px;
	width												: 100%; 
   	height												: 110px;
	background 											: #fff1f1;
	z-index 											: 1;
}

.hellblaues_band {
	padding-top 										: 10px;
	width												: 100%; 
   	height												: 110px;
	background 											: #f0eef1;
	z-index 											: 1;
}

.hellgraues_band {
	padding-top 										: 10px;
	width												: 100%; 
   	height												: 110px;
	background 											: #f3f0f0;
	z-index 											: 1;
}

#content_startseite {
	position 											: absolute;
	top 												: 530px;
	left												: 50%;
	margin-left											: -450px;
	width 												: 900px;
	text-align 											: center;
}

#content {
	margin												: 0;
	padding 											: 0;
	width 												: 100%;
	text-align 											: left;
}

table {
	margin 												: 0;
	padding 											: 0;
	width 												: 375px;
	border 												: 0;
	cellspacing 										: 0;
	cellpadding 										: 0;
}

th {
	margin 												: 0;
	padding 											: 0;
	height 												: 50px;
	font-family											: 'light';
	font-weight											: bold;
	font-style											: normal;
	color												: #b5b2b9;
 	font-size											: 16pt;
	line-height											: 16pt;
}

th.preis {
	width 												: 60px;
	color 												: #fff;
	text-align 											: center;
	background-image 									: url(../img/icon-preis.png);
	background-size 									: 60px 50px;
}

#content ul.detail {
	margin 												: 0 0 20px 30px;
	padding-left 										: 0;
	width 												: 310px;
	font-family											: 'light-fliesstext';
	font-weight											: normal;
	font-style											: normal;
	color												: #b4aaa0;
 	font-size											: 14pt;
	line-height											: 20pt;
	list-style-type 									: none;
}

#content ul.detail > li::before {
	margin-left: -10px;
    content 											: "- ";
}

.spalten_layout {
	position 											: relative;
	width 												: 825px;
	left												: 50%;
	margin-left 										: -412px;
	margin-top											: 40px;
	
}

.linke_spalte, .rechte_spalte {
	margin 												: 0 75px 20px 0;
	padding 											: 0;
	width 												: 375px;
	float 												: left;
}

.ganze_spalte {
	padding 											: 0;
	float 												: left;
}

.linke_spalte_kontakt {
	margin 												: 0 75px 100px 0;
	padding 											: 0;
	width 												: 250px;
	float 												: left;
}

.rechte_spalte_kontakt {
	margin 												: 0 0 100px 0;
	padding 											: 0;
	width 												: 500px;
	float 												: left;
}

.setclear {
	clear 												: both;
}

.handbehandlung, .kunstnagelbehandlung, .nailtime-veto, .fussbehandlung, .workshops, .dasstudio, .kontakt, .impressum {
	margin-left											: 10%;
	width 												: 550px;
	height 												: 100px;
	float 												: left;
}

.gutscheine {
	margin-left											: 10%;
	width 												: 590px;
	height 												: 100px;
	float 												: left;
}

.handbehandlung {
	background-image 									: url(../img/handbehandlung_rtn.png);
}

.kunstnagelbehandlung {
	background-image 									: url(../img/kunstnagelbehandlung_rtn.png);
}

.nailtime-veto {
	background-image 									: url(../img/nailtime-veto_rtn.png);
}

.fussbehandlung {
	background-image 									: url(../img/fussbehandlung_rtn.png);
}

.workshops {
	background-image 									: url(../img/workshops_rtn.png);
}

.dasstudio {
	background-image 									: url(../img/dasstudio.png);
}

.kontakt {
	background-image 									: url(../img/kontakt.png);
}

.impressum {
	background-image 									: url(../img/impressum.png);
}

.gutscheine {
	background-image 									: url(../img/gutscheine_rabattcodes_rtn.png);
}

.graffiti1, .graffiti2 {
	margin-right 										: 50px;
	width 												: 222px;
	height 												: 124px;
	background-image 									: url(../img/icon-graffiti1.png);
	background-size 									: 222px 124px;
	float 												: right;
}

.graffiti2 {
	background-image 									: url(../img/icon-graffiti2.png);
}

.qr_code {
	box-shadow 											: 8px 8px 12px #ede9e9;
	border-right 										: #e0dbdb 1px solid;
	border-bottom 										: #e0dbdb 1px solid;
	float 												: right;
}

.workshop_flyer {
	box-shadow 											: 8px 8px 12px #ede9e9;
	border-right 										: #e0dbdb 1px solid;
	border-bottom 										: #e0dbdb 1px solid;
	float 												: right;
}

.google-maps {
	width 												: 500px;
	height 												: 333px;
	background-image 									: url(../img/google-maps.jpg);
	background-size 									: 500px 333px;
	background-position									: bottom right;
	display 											: inline-block;
	box-shadow 											: 10px 10px 15px #ede9e9;
	border-right 										: #e0dbdb 1px solid;
	border-bottom 										: #e0dbdb 1px solid;
}

p, p.info, a, ul.datenschutz {
	font-family											: 'light-fliesstext';
	font-weight											: normal;
	font-style											: normal;
	color												: #b4aaa0;
 	font-size											: 14pt;
	line-height											: 20pt;
}

p.info {
	color												: #f2b2b2;
 	font-size											: 12pt;
	line-height											: 16pt;
}

a {
	color 												: #c39b96;
	font-weight 										: bold;
	text-decoration 									: none;
}

a:hover {
	color												: #ffc6c6;
}

strong {
	color 												: #c39b96;
}

p.info strong {
	color 												: #f2b2b2;
}

.ueberschrift {
	margin 												: 0;
	font-family											: 'bold';
	font-weight											: normal;
	font-style											: normal;
	color												: #ffc6c6;
 	font-size											: 22pt;
	line-height											: 28pt;
}

.ueberschrift_info {
	margin 												: 0;
 	font-size											: 18pt;
	line-height											: 22pt;
	font-family											: 'bold';
	font-weight											: normal;
	font-style											: normal;
	color												: #ffc6c6;
}

.ueberschrift_kontakt {
	margin 												: 0 0 -10px 0;
 	font-size											: 18pt;
	line-height											: 22pt;
}

.ueberschrift_impressum {
	color												: #b5b2b9;
}

footer {
	position 											: fixed;
	padding      										: 0 0 0 50%;
	bottom 												: 0px;
	height 												: 50px;
	width 												: 50%;
	background 											: #9691a0;
	z-index 											: 5;
}

footer ul {
	width 												: 800px;
	margin 												: 0 0 0 -400px;
	padding												: 0;
	list-style-type										: none;
}

footer li {
	margin												: 0;
	width 												: 200px;
	height 												: 50px;
	padding												: 0;
	float												: left;
	text-align 											: center;
}

.footer-icons {
	margin-top 											: 10px;
	width 												: 30px;
	height 												: 30px;
	opacity 											: 0.7;
}

.footer-icons:hover {
	opacity 											: 1;
}

/* _______________________________________________________________________________ Bildschirmbreite bis max. 479px _______________________________________________________________________________ */


@media (max-width: 479px) {
#header, #header > div {
	height 												: 140px;
	opacity: 0;
}
	
#gutschein-button {
	margin 												: -2px 0 0 15px;
	left 												: 0px;
	width 												: 100px;
	height 												: 50px;
	border-radius 										: 0px 0px 4px 4px;
	background 											: -prefix-linear-gradient(top, #f2cdcc, #ffdcdc 20%); 
	background 											: linear-gradient(to bottom, #f2cdcc, #ffdcdc 20%);
}

#gutschein-button a {
	width 												: 100px;
	margin-top 											: 8px;
	height 												: 50px;
	color 												: #fff;
 	font-size											: 11pt;
	line-height											: 12pt;
	text-align 											: center;
}
	
#gutschein-button a:hover {
	text-shadow 										: 0px 0px 3px #fff;
}
	
#hauptmenue {
	position 											: absolute;
	margin 												: -130px 0 0 0;
	padding 											: 0;
	right 												: 0px;
	width 												: 120px;
	height 												: 130px;
	background 											: #fff;
}
#hauptmenue ul {
	margin 												: 5px 0 0 0;
	width 												: 120px;
}

#hauptmenue li {
	margin 												: 1px 0px;
	width 												: 120px;
	height 												: 28px;
}
	
#hauptmenue li a {
	width 												: 100px;
	height 												: 28px;
}

.menue1, .menue1_active, .menue2, .menue2_active, .menue3, .menue3_active, .menue4, .menue4_active {
	background-size 									: 100px 83px;
}
.menue1, .menue1_active {
	background-position 								: 13px -27px;
}
.menue3, .menue3_active {
	background-position 								: 11px -27px;
}
.menue4, .menue4_active {
	background-position 								: 22px -27px;
}

#untermenue {
	margin-top 											: 30px;
	height 												: 120px;
}
#untermenue ul {
	margin 												: 20px 0 0 -160px;
	width 												: 320px;
}

#untermenue li {
	width 												: 160px;
	height 												: 35px;
}
#untermenue li a {
 	font-size											: 12pt;
	line-height											: 20pt;
}

#untermenue li.zentriert {
	margin-left	 										: 0;
}

#untermenue li.zentriert2 {
	margin-left	 										: 80px; /* damit die dritte Zeile auch mittig steht */
}

#renata_kopf, #renata-kopf_header {
	top 												: 10px;
	left 												: 50%;
	margin 												: 0 0 0 -63px;
	width 												: 127px;
	height 												: 140px;
	background-size 									: 127px 140px;
}
#www-nagelstudio-eleganz-de {
	top 												: 185px;
	left												: 50%;
	margin-left											: -150px;
	width 												: 300px;
	height 												: 35px;
	background-size 									: 300px 35px;
	z-index 											: 2;
}
#rosa_band_schraeg {
	top 												: 160px;
   	height												: 80px;
    -webkit-transform 									: skew(0deg, -1deg); 
    -moz-transform 										: skew(0deg, -1deg); 
    -ms-transform 										: skew(0deg, -1deg); 
    -o-transform 										: skew(0deg, -1deg); 
    transform 											: skew(0deg, -1deg);
}

.rosa_band, .hellrosa_band, .hellblaues_band, .hellgraues_band {
	margin-top 											: 30px;
	margin-bottom  										: 20px;
	padding-top 										: 10px;
   	height												: 70px;
}

#content_startseite {
	top 												: 260px;
	left												: 50%;
	margin-left											: -160px;
	width 												: 320px;
	text-align 											: center;
}

.graffiti-startseite {
	margin 												: 0 0 100px 0;
	width 												: 300px;
	height 												: 158px;
}

.spalten_layout {
	width 												: 330px;
	left												: 50%;
	margin 												: 0 0 0 -165px;
}
.linke_spalte {
	margin 												: 0 0 40px 0;
	width 												: 330px;
}
.rechte_spalte {
	margin 												: 0 0 40px 0;
	width 												: 330px;
}
	
#letzter {
	margin 		 										: 0 0 100px 0;
}

.ganze_spalte {
	margin 												: 20px 0 0 0;
	width 												: 330px;
}

.linke_spalte_kontakt {
	margin 												: 20px 0 20px 0;
	width 												: 330px;
	text-align 											: center;
}
.rechte_spalte_kontakt {
	margin 												: 0 0 100px 0;
	width												: 330px;
	text-align 											: center;
}

.handbehandlung, .kunstnagelbehandlung, .gutscheine, .nailtime-veto, .fussbehandlung, .workshops, .dasstudio, .kontakt, .impressum {
	margin-left											: 10px;
	width 												: 330px;
	height 												: 60px;
	background-size 									: 330px 60px;
}

.graffiti1, .graffiti2 {
	width 												: 0px;
	height 												: 0px;
}

.werbung-veto {
	margin 												: -5px 0 0 0;
	width 												: 50px;
	height 												: 70px;
}

.logo-21days {
	margin-left 										: 65px;
	width 												: 200px;
	height 												: 133px;
}

.logo-duplex {
	margin-left 										: 65px;
	width 												: 200px;
	height 												: 133px;
}

.logo-veto {
	margin-left 										: 65px;
	width 												: 200px;
	height 												: 107px;
}

.google-maps {
	width 												: 250px;
	height 												: 250px;
	background-size 									: 500px 333px;
	background-position 								: -60px -80px; 
}

.content-img_li, .content-img_re {
	margin 												: 10px 10px 20px 0;
	width 												: 300px;
	height 												: 200px;
	background-size 									: 300px 200px;
}

.content-img_hoch {
	width 												: 300px;
	height 												: 400px;
	background-size 									: 300px 400px;
	margin 												: 10px 10px 20px 0;
}

	
.content-img_portrait {
	margin 												: 0 25px 5px 0;
}

.content-img_qudr {
	margin 												: 10px 0 10px 50px;
	width 												: 200px;
	height 												: 200px;
	background-size 									: 200px 200px;
}

.content-img_pano {
	margin 												: 10px 0 20px 0;
	width 												: 330px;
	height 												: 120px;
	background-size 									: 330px 120px;
}

.content-img_zertifikat {
	margin 												: 0 0 -20px 52px;
	width 												: 225px;
	height 												: 300px;
	background-size 									: 225px 300px;
}
	
#zerti-1 {
	margin 												: 0;
}
	
#zerti-2 {
	margin 												: -30px 0 0 100px;
}
	
#zerti-3 {
	margin 												: -30px 0 20px 52px;
}

.workshop_flyer {
	width 												: 248px;
	height 												: 350px;
	margin 												: 0 41px 20px 0;
/*	transform 											: rotate(4deg); */
}

.qr_code {
	width 												: 180px;
	height 												: 180px;
	margin 												: 0 80px 0 0;
}

.overlay-img_li, .overlay-img_re {
	width 												: 320px;
	height 												: 213px;
}

.overlay-img_qudr {
	width 												: 320px;
	height 												: 320px;
}

.overlay-img_pano {
	width 												: 400px;
	height 												: 145px;
}

.overlay-img_zertifikat {
	width 												: 400px;
	height 												: 533px;
}
	
.overlay-workshop_flyer {
	width 												: 350px;
	height 												: 494px;
}

table {

	width 												: 330px;
}

#content ul.detail {
	width 												: 230px;
}

footer ul {
	width 												: 360px;
	margin 												: 0 0 0 -180px;

}

footer li {
	width 												: 90px;
}
}


/* _______________________________________________________________________________ Bildschirmbreite ab 480px _______________________________________________________________________________ */


@media (min-width: 480px) {
#header, #header > div {
	height 												: 200px;
}
	
.img_1 {
	background-image 									: url(../img/header_logo-kl.svg), url(../img/header_01.jpg);
}
	
.img_2 {
	background-image 									: url(../img/header_logo-kl.svg), url(../img/header_02.jpg);
}
	
.img_3 {
	background-image 									: url(../img/header_logo-kl.svg), url(../img/header_03.jpg);
}
	
.img_4 {
	background-image 									: url(../img/header_logo-kl.svg), url(../img/header_04.jpg);
}
	
.img_5 {
	background-image 									: url(../img/header_logo-kl.svg), url(../img/header_05.jpg);
}
	
.img_6 {
	background-image 									: url(../img/header_logo-kl.svg), url(../img/header_06.jpg);
}

#gutschein-button {
	margin 												: 149px 20px 0 0;
	right 												: 20px;
	width 												: 120px;
	height 												: 50px;
	border-radius 										: 4px 4px 0px 0px;
	background 											: -prefix-linear-gradient(bottom, #827d8b, #9691a0 20%); 
	background 											: linear-gradient(to top, #827d8b, #9691a0 20%);
}

#gutschein-button a {
	width 												: 120px;
	margin-top 											: 5px;
	height 												: 50px;
	color 												: #edebe9;
 	font-size											: 13pt;
	line-height											: 14pt;
	text-align 											: center;
}

#gutschein-button a:hover {
	color 												: #fff;
}
	
#gutschein-button:hover {
	border-top 											: 1px solid #cdc8d2;
	background 											: -prefix-linear-gradient(bottom, #a19da7, #b5b2b9 20%); 
	background 											: linear-gradient(to top, #a19da7, #b5b2b9 20%);
}

#hauptmenue ul {
	margin 												: 0 0 0 -300px;
	width 												: 600px;
	height 												: 100px;
}

#hauptmenue li {
	width 												: 150px;
}

#untermenue {
	height 												: 150px;
}
#untermenue ul {
	margin 												: 20px 0 0 -200px;
	width 												: 400px;
}

#untermenue li {
	width 												: 200px;
}
#untermenue li a {
 	font-size											: 14pt;
	line-height											: 24pt;
}

#untermenue li.zentriert {
	margin-left	 										: 100px;
}

#untermenue li.zentriert2 {
	margin-left	 										: 0; /* damit die dritte Zeile auch mittig steht */
}

#renata_kopf {
	top 												: 285px;
	left 												: 6%;
	width 												: 127px;
	height 												: 140px;
	background-size 									: 127px 140px;
}
#renata-kopf_header {
	top 												: 0px;
	left 												: 0px;
	width 												: 0px;
	height 												: 0px;
	opacity 											: 0;
}

#www-nagelstudio-eleganz-de {
	position 											: absolute;
	top 												: 335px;
	left												: 50%;
	margin-left											: -150px;
	width 												: 300px;
	height 												: 35px;
	background-size 									: 300px 35px;
	z-index 											: 2;
}
#rosa_band_schraeg {
	top 												: 310px;
   	height												: 80px;
    -webkit-transform 									: skew(0deg, -1deg); 
    -moz-transform 										: skew(0deg, -1deg); 
    -ms-transform 										: skew(0deg, -1deg); 
    -o-transform 										: skew(0deg, -1deg); 
    transform 											: skew(0deg, -1deg);
}

.rosa_band, .hellrosa_band, .hellblaues_band, .hellgraues_band {
	padding-top 										: 10px;
   	height												: 70px;
}

#content_startseite {
	top 												: 420px;
	left												: 50%;
	margin-left											: -250px;
	width 												: 500px;
	text-align 											: center;
}
	
.handbehandlung, .kunstnagelbehandlung, .gutscheine, .nailtime-veto, .fussbehandlung, .workshops, .dasstudio, .kontakt, .impressum {
	margin-left											: 5%;
	width 												: 330px;
	height 												: 60px;
	background-size 									: 330px 60px;
}

.graffiti-startseite {
	margin 												: 0 0 100px 0;
	width 												: 350px;
	height 												: 184px;
}
	
.graffiti1, .graffiti2 {
	margin 		 										: -2px 30px 0 0;
	width 												: 143px;
	height 												: 80px;
	background-size 									: 143px 80px;
}

.spalten_layout {
	width 												: 450px;
	left												: 50%;
	margin-left 										: -225px;
	margin-top											: 40px;
}
.linke_spalte {
	margin 												: 0 0 40px 0;
	width 												: 450px;
}
.rechte_spalte {
	margin 												: 0 0 40px 0;
	width 												: 450px;
}

.ganze_spalte {
	margin 												: 20px 0 0 0;
	width 												: 450px;
}

.linke_spalte_kontakt {
	margin 												: 0 0 20px 0;
	width 												: 250px;
}

.rechte_spalte_kontakt {
	margin 												: 0 0 60px 0;
	width												: 200px;
}

.werbung-veto {
	margin 												: -5px 0 0 0;
	width 												: 50px;
	height 												: 70px;
}

.logo-21days {
	margin-left 										: 100px;
	width 												: 250px;
	height 												: 167px;
}

.logo-duplex {
	margin-left 										: 100px;
	width 												: 250px;
	height 												: 167px;
}

.logo-veto {
	margin-left 										: 100px;
	width 												: 250px;
	height 												: 133px;
}

.google-maps {
	width 												: 200px;
	height 												: 200px;
	background-size 									: 500px 333px;
	display 											: inline-block;
	background-position 								: -80px -100px;
}

.content-img_li, .content-img_re {
	margin 												: 10px 0 20px 0;
	width 												: 450px;
	height 												: 300px;
	background-size 									: 450px 300px;
}

.content-img_hoch {
	width 												: 450px;
	height 												: 600px;
	background-size 									: 450px 600px;
	margin 												: 10px 0 20px 0;
}

	
.content-img_portrait {
	margin 												: 0 25px 5px 0;
}

.content-img_qudr {
	margin 												: 10px 0 10px 75px;
	width 												: 300px;
	height 												: 300px;
	background-size 									: 300px 300px;
}

.content-img_pano {
	margin 												: 10px 0 20px 0;
	width 												: 450px;
	height 												: 164px;
	background-size 									: 450px 164px;
}

.content-img_zertifikat {
	margin 												: 0 0 0 75px;
	width 												: 300px;
	height 												: 400px;
	background-size 									: 300px 400px;
}
	
#zerti-1 {
	margin 												: 0 0 0 35px;
}
	
#zerti-2 {
	margin 												: 0 0 0 120px;
}
	
#zerti-3 {
	margin 												: 0 0 0 75px;
}

.workshop_flyer {
	width 												: 300px;
	height 												: 420px;
	margin 												: 0 65px 20px 0;
/*	transform 											: rotate(4deg); */
}

.qr_code {
	width 												: 200px;
	height 												: 200px;
	margin 												: 0 125px 0 0;
}

.overlay-img_li, .overlay-img_re {
	width 												: 450px;
	height 												: 300px;
}

.overlay-img_qudr {
	width 												: 300px;
	height 												: 300px;
}

.overlay-img_pano {
	width 												: 600px;
	height 												: 218px;
}

.overlay-img_zertifikat {
	width 												: 600px;
	height 												: 800px;
}
	
.overlay-workshop_flyer {
	width 												: 450px;
	height 												: 636px;
}

table {

	width 												: 450px;
}

footer {
	padding      										: 5px 0 0 0;
	left 												: 0px;
	bottom 												: 0px;
	height 												: 200px;
	width 												: 50px;
	border-top-right-radius 								: 5px;
}
footer ul {
	width 												: 50px;
	margin 												: 0 0 0 0;

}

footer li {
	width 												: 50px;
	height 												: 50px;
}
.footer-icons {
	margin  											: 10px 0 0 0;
	width 												: 30px;
	height 												: 30px;
}
}


/* _______________________________________________________________________________ Bildschirmbreite ab 768px _______________________________________________________________________________ */


@media (min-width: 768px) {
#header, #header > div {
	height 												: 250px;
}
	
.img_1 {
	background 		 									: url(../img/header_logo.svg), url(../img/header_01.jpg);
}
	
.img_2 {
	background-image 									: url(../img/header_logo.svg), url(../img/header_02.jpg);
}
	
.img_3 {
	background-image 									: url(../img/header_logo.svg), url(../img/header_03.jpg);
}
	
.img_4 {
	background-image 									: url(../img/header_logo.svg), url(../img/header_04.jpg);
}
	
.img_5 {
	background-image 									: url(../img/header_logo.svg), url(../img/header_05.jpg);
}
	
.img_6 {
	background-image 									: url(../img/header_logo.svg), url(../img/header_06.jpg);
}

#gutschein-button {
	margin 												: 199px 40px 0 0;
	right 												: 40px;
	width 												: 130px;
}

#gutschein-button a {
	width 												: 130px;
	margin-top 											: 5px;
	text-align 											: center;
}


#hauptmenue ul {
	margin 												: 0 0 0 -375px;
	width 												: 750px;
}

#hauptmenue li {
	width 												: 187px;
}
	
#untermenue {
	height 												: 120px;
}
#untermenue ul {
	margin 												: 20px 0 0 -400px;
	width 												: 800px;
}

#untermenue li {
	width 												: 200px;
}

#untermenue li.zentriert {
	margin-left	 										: 100px; /* damit die zweite Zeile auch mittig steht */
}

#untermenue li.zentriert2 {
	margin-left	 										: 0; /* damit die dritte Zeile auch mittig steht */
}

#renata_kopf {
	top 												: 335px;
	left 												: 8%;
	width 												: 145px;
	height 												: 160px;
	background-size 									: 145px 160px;
}
#www-nagelstudio-eleganz-de {
	top 												: 392px;
	left												: 50%;
	margin-left											: -175px;
	width 												: 350px;
	height 												: 41px;
	background-size 									: 350px 41px;
	z-index 											: 2;
}
#rosa_band_schraeg {
	top 												: 360px;
	width												: 100%; 
   	height												: 100px;
}
	
.rosa_band, .hellrosa_band, .hellblaues_band, .hellgraues_band {
	padding-top 										: 10px;
   	height												: 90px;
}

#content_startseite {
	top 												: 490px;
	left												: 50%;
	margin-left											: -375px;
	width 												: 750px;
	text-align 											: center;
}

.spalten_layout {
	width 												: 650px;
	left												: 50%;
	margin-left 										: -325px;
	margin-top											: 40px;
}
.linke_spalte {
	margin 												: 0 50px 60px 0;
	width 												: 300px;
}
.rechte_spalte {
	margin 												: 0 0 60px 0;
	width 												: 300px;
}

.ganze_spalte {
	margin 												: 20px 0 0 0;
	width 												: 650px;
}
	
.linke_spalte_kontakt {
	margin 												: 0 50px 100px 0;
	width 												: 300px;
}

.rechte_spalte_kontakt {
	margin 												: 0 0 100px 0;
	width												: 300px;
}
	
.handbehandlung, .kunstnagelbehandlung, .gutscheine, .nailtime-veto, .fussbehandlung, .workshops, .dasstudio, .kontakt, .impressum {
	margin-left											: 5%;
	width 												: 440px;
	height 												: 80px;
	background-size 									: 440px 80px;
}

.graffiti-startseite {
	margin 												: 0 0 100px 0;
	width 												: 400px;
	height 												: 211px;
}
.graffiti1, .graffiti2 {
	margin 		 										: 0 30px 0 0;
	width 												: 179px;
	height 												: 100px;
	background-size 									: 179px 100px;
}

.werbung-veto {
	margin 												: -2px 0 0 20px;
	width 												: 61px;
	height 												: 85px;
}

.logo-21days {
	margin-left 										: 50px;
	width 												: 200px;
	height 												: 133px;
}

.logo-duplex {
	margin-left 										: 50px;
	width 												: 200px;
	height 												: 133px;
}

.logo-veto {
	margin-left 										: 50px;
	width 												: 200px;
	height 												: 107px;
}
.google-maps {
	width 												: 300px;
	height 												: 300px;
	background-size 									: 500px 333px;
	background-position 								: -40px -50px; 
}

.content-img_li, .content-img_re {
	width 												: 300px;
	height 												: 200px;
	background-size 									: 300px 200px;
}

.content-img_hoch {
	width 												: 300px;
	height 												: 400px;
	background-size 									: 300px 400px;
	margin 												: 0 35px 50px 0;
}


.content-img_li {
	margin 												: 0 35px 50px 0;
}

.content-img_re {
	margin 												: 0 -10px 50px 35px;
}
	
.content-img_portrait {
	margin 												: 0 35px 50px 0;
}

.content-img_qudr {
	margin 												: 10px 0 30px 15px;
	width 												: 250px;
	height 												: 250px;
	background-size 									: 250px 250px;
}
	
.content-img_pano {
	margin 												: 0 0 50px 0;
	width 												: 650px;
	height 												: 236px;
	background-size 									: 650px 236px;
}

.content-img_zertifikat {
	margin 												: 0 0 50px 0;
	width 												: 300px;
	height 												: 400px;
	background-size 									: 300px 400px;
}
	
#zerti-1 {
	margin 												: -50px 0 0 0;
}
	
#zerti-2 {
	margin 												: 0;
}
	
#zerti-3 {
	margin 												: -100px 0 0 50px;
}

.workshop_flyer {
	width 												: 248px;
	height 												: 350px;
	margin 												: 0 0 20px 0;
/*	transform 											: rotate(4deg); */
}

.qr_code {
	width 												: 180px;
	height 												: 180px;
	margin 												: -30px 60px 0 0;
}

.overlay-img_li, .overlay-img_re {
	width 												: 650px;
	height 												: 433px;
}

.overlay-img_qudr {
	width 												: 650px;
	height 												: 650px;
}
	
.overlay-img_zertifikat {
	width 												: 600px;
	height 												: 800px;
}
	
.overlay-workshop_flyer {
	width 												: 500px;
	height 												: 706px;
}
	
table {

	width 												: 300px;
}
#content ul.detail {
	width 												: 230px;
}	
	
footer {
	padding      										: 0 0 0 50%;
	bottom 												: 0px;
	height 												: 50px;
	width 												: 50%;
	border-radius 										: 0px;
}
footer ul {
	width 												: 600px;
	margin 												: 0 0 0 -300px;

}

footer li {
	width 												: 150px;
	height 												: 50px;
}
}


/* _______________________________________________________________________________ Bildschirmbreite ab 1200px _______________________________________________________________________________ */


@media (min-width: 1200px) {
#header, #header > div {
	height 												: 300px;
}
	


#gutschein-button {
	margin 												: 239px 60px 0 0;
	right 												: 60px;
	width 												: 150px;
	height 												: 60px;
	border-radius 										: 5px 5px 0px 0px;
}

#gutschein-button a {
	width 												: 150px;
	margin-top 											: 6px;
	height 												: 60px;
 	font-size											: 15pt;
	line-height											: 17pt;
}


#hauptmenue ul {
	margin 												: 0 0 0 -420px;
	width 												: 840px;
}

#hauptmenue li {
	width 												: 210px;
}

#untermenue ul {
	margin 												: 20px 0 0 -400px;
	width 												: 800px;
}

#untermenue li {
	width 												: 200px;
}

#untermenue li.zentriert {
	margin-left	 										: 100px;
}

#untermenue li.zentriert2 {
	margin-left	 										: 0; /* damit die dritte Zeile auch mittig steht */
}

#renata_kopf {
	top 												: 390px;
	left 												: 12%;
	width 												: 163px;
	height 												: 180px;
	background-size 									: 163px 180px;
}
#www-nagelstudio-eleganz-de {
	top 												: 450px;
	left												: 50%;
	margin-left											: -200px;
	width 												: 400px;
	height 												: 46px;
	background-size 									: 400px 46px;
}
#rosa_band_schraeg {
	position											: absolute;
	top 												: 410px;
	width												: 100%; 
   	height												: 120px;

}
.rosa_band, .hellrosa_band, .hellblaues_band, .hellgraues_band {
	padding-top 										: 10px;
   	height												: 110px;
}
	
#content_startseite {
	top 												: 560px;
	margin-left											: -412px;
	width 												: 825px;
}
	
.handbehandlung, .kunstnagelbehandlung, .gutscheine, .nailtime-veto, .fussbehandlung, .workshops, .dasstudio, .kontakt, .impressum {
	margin-left											: 10%;
	width 												: 550px;
	height 												: 100px;
	background-size 									: 550px 100px;
}

.graffiti1, .graffiti2 {
	margin-right 										: 50px;
	width 												: 222px;
	height 												: 124px;
	background-size 									: 222px 124px;
}

.werbung-veto {
	margin 												: 0 0 0 20px;
	width 												: 71px;
	height 												: 100px;
}

.logo-nailtime {
	margin-left 										: 70px;
	width 												: 250px;
	height 												: 133px;
}

.logo-21days {
	margin-left 										: 70px;
	width 												: 250px;
	height 												: 167px;
}

.logo-duplex {
	margin-left 										: 70px;
	width 												: 250px;
	height 												: 167px;
}

.logo-veto {
	margin-left 										: 70px;
	width 												: 250px;
	height 												: 133px;
}

.google-maps {
	width 												: 500px;
	height 												: 333px;
	background-size 									: 500px 333px;
	background-position									: bottom right;
}

.spalten_layout {
	width 												: 825px;
	left												: 50%;
	margin-left 										: -412px;
	margin-top											: 40px;
}
.linke_spalte {
	margin 												: 0 75px 100px 0;
	width 												: 375px;
}
.rechte_spalte {
	margin 												: 0 0 100px 0;
	width 												: 375px;
}

.ganze_spalte {
	margin 												: 0 75px 20px 0;
	width 												: 825px;
}

.linke_spalte_kontakt {
	margin 												: 0 75px 100px 0;
	width 												: 250px;
}

.rechte_spalte_kontakt {
	margin 												: 0 0 100px 0;
	width												: 500px;
}

.content-img_li, .content-img_re {
	width 												: 375px;
	height 												: 250px;
	background-size 									: 375px 250px;
}

.content-img_hoch {
	width 												: 375px;
	height 												: 500px;
	background-size 									: 375px 500px;
}

.content-img_li, .content-img_hoch {
	margin 												: 0 35px 50px 0;
}

.content-img_re {
	margin 												: 0 -10px 50px 35px;
}

.content-img_qudr {
	margin 												: 30px 0 20px 37px;
	width 												: 300px;
	height 												: 300px;
	background-size 									: 300px 300px;
}
	
.content-img_pano {
	margin 												: 0 0 50px 0;
	width 												: 825px;
	height 												: 300px;
	background-size 									: 825px 250px;
}

.content-img_zertifikat {
	width 												: 375px;
	height 												: 500px;
	background-size 									: 375px 500px;
}
	
#zerti-1 {
	margin 												: -100px 0 0 0;
}
	
#zerti-2 {
	margin 												: 0;
}
	
#zerti-3 {
	margin 												: -150px 0 0 50px;
}

.workshop_flyer {
	width 												: 300px;
	height 												: 420px;
	margin 												: 0 10px 20px 0;
/*	transform 											: rotate(4deg); */
}

.qr_code {
	width 												: 200px;
	height 												: 200px;
	margin 												: -20px 87px 0 0;
}
	
table {

	width 												: 375px;
}
#content ul.detail {
	width 												: 310px;
}

footer ul {
	width 												: 800px;
	margin 												: 0 0 0 -400px;

}

footer li {
	width 												: 200px;
}
}