@font-face {
	font-family: 'SancoaleSoftenedLight';
	src: url('/fonts/SancoaleSoftenedLight.otf') format('truetype'),
	url('/fonts/SancoaleSoftenedLight.eot') format('eot'),
	url('/fonts/SancoaleSoftenedLight.woff') format('woff'),
	url('/fonts/SancoaleSoftenedLight.svg') format('svg');
}

* { margin: 0; padding: 0; outline: none; }

html, input, textarea { font-family: 'SancoaleSoftenedLight'; }
body { margin: 0; background-repeat: no-repeat; color: #5B6064; text-align: center; font-size: 16px; }
body { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; }
body { background-image: linear-gradient(to top, rgba(180,255,255,.125) 0, rgba(180,255,255,.125) 303px, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 100%); }

img { width: 100%; }

h1, h2, h3, h4, h5, h6 { float: left; background-repeat: no-repeat; font-weight: lighter; }

h1 { width: 80%; padding: 0 10%; z-index: 1; }
h1 { background-image: url(/img/willkommen-im-navajo-schmuck-store.jpg); }
h1 { background-size: cover; background-position: center center; background-attachment: fixed; }
h1 { /* font-family: 'Great Vibes'; */ font-size: 350%; font-weight: lighter; color: rgba(234,36,0,1); }
/* h1 img { max-width: 50%; margin: 20% 10% 10%; } */

h1.service-1 { background-image: url(/img/service-bg2.jpg); color: #fff; } /* batterieservice */
h1.service-2 { background-image: url(/img/service-bg2.jpg); color: #fff; } /* glasersatz-oder-austausch */
h1.service-3 { background-image: url(/img/service-bg2.jpg); color: #fff; } /* individuelle-gravuren */
h1.service-4 { background-image: url(/img/service-bg2.jpg); color: #fff; } /* neuanfertigungen */
h1.service-5 { background-image: url(/img/service-bg2.jpg); color: #fff; } /* ohrlochstechen */
h1.service-6 { background-image: url(/img/service-bg2.jpg); color: #fff; } /* reperatur-von-armbaendern */
h1.service-7 { background-image: url(/img/service-bg2.jpg); color: #fff; } /* reperaturen-und-schmuckreinigung */
h1.service-8 { background-image: url(/img/service-bg2.jpg); color: #fff; } /* schaetzungen-und-ankauf */
h1.service-9 { background-image: url(/img/service-bg2.jpg); color: #fff; } /* schmuckauf-und-umarbeiten */
h1.service-10 { background-image: url(/img/service-bg2.jpg); color: #fff; } /* trauringberatung */

h2, h3 { width: 60%; margin: 50px 20%; padding: 0 0 40px; border-bottom: 1px dashed rgba(0,0,0,.25); font-size: 200%; }
h3.tab { display: none; visibility: hidden; opacity: 0; transition: display .75s ease-in-out, opacity .75s ease-in-out, visibility .75s ease-in-out; }

h2.img { width: 70%; margin: 50px 10%; padding: 30px 5%; /* background-color: rgba(255,68,0,.5); */ border: none; color: #fff; text-align: left; text-shadow: 2px 1px 1px rgba(234,36,0,1); }
h2.img { background-image: linear-gradient(135deg, rgba(234,36,0,.5) 0, rgba(234,36,0,.5) 49.5%, rgba(255,255,255,1) 49.5%, rgba(255,255,255,1) 51.5%, rgba(234,36,0,.4) 51.5%, rgba(234,36,0,.4) 100%); }
h2.img span { float: right; font-size: 75%; line-height: 125%; }

p { float: left; width: 90%; padding: 0 5%; }
p { background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: scroll; }
p, form { transition: display .75s ease-in-out, opacity .75s ease-in-out, visibility .75s ease-in-out; }

p.mt { margin-top: 50px; } p.mb { margin-bottom: 50px; }

p.welcome span.sign { font-family: 'Rock Salt'; color: rgba(234,36,0,1); }

p.service { width: 30%; margin: 0 10%; padding: 75px 5% 100px 45%; text-align: left; line-height: 32px; color: #fff; }
p.service span.headline { font-size: 150%; text-transform: uppercase; line-height: 64px; }

p.service-1 { background-image: url(/img/service-bg3.jpg); } /* batterieservice */
p.service-2 { background-image: url(/img/service-bg3.jpg); } /* glasersatz-oder-austausch */
p.service-3 { background-image: url(/img/service-bg3.jpg); } /* individuelle-gravuren */
p.service-4 { background-image: url(/img/service-bg3.jpg); } /* neuanfertigungen */
p.service-5 { background-image: url(/img/service-bg3.jpg); } /* ohrlochstechen */
p.service-6 { background-image: url(/img/service-bg3.jpg); } /* reperatur-von-armbaendern */
p.service-7 { background-image: url(/img/service-bg3.jpg); } /* reperaturen-und-schmuckreinigung */
p.service-8 { background-image: url(/img/service-bg3.jpg); } /* schaetzungen-und-ankauf */
p.service-9 { background-image: url(/img/service-bg3.jpg); } /* schmuckauf-und-umarbeiten */
p.service-10 { background-image: url(/img/service-bg3.jpg); } /* trauringberatung */

p.copyright { display: none; }

p.opening { width: 80%; margin-top: 60px; padding: 75px 10%; background-color: rgba(0,0,0,.025) !important; }
p.opening { text-transform: none; }
p.opening span { color: rgba(234,36,0,1); }

p.tab { display: none; width: 30%; height: 499px; padding: 75px 5% 0 45%; text-align: left; line-height: 25px; overflow: auto; }
p.tab span { text-transform: uppercase; line-height: 75px; font-size: 300%; }

a { color: #5B6064; text-decoration: none; outline: none; }

a.close { position: fixed; top: 50% !important; left: 50% !important; width: 50px !important; height: 50px !important; margin: -200px 0 0 350px !important; visibility: hidden; opacity: 0; z-index: 102; }
a.close { background-image: linear-gradient(to left, #666 0, #666 1px), linear-gradient(to left, #666 0, #666 1px); }
a.close { background-size: 50px 1px, 1px 50px; background-position: center center !important; background-repeat: no-repeat; }
a.close { transition: visibility .75s ease-in-out, opacity .75s ease-in-out; transform: rotate(45deg); }

a.tab { position: relative; float: left; width: 20%; height: 142px; margin-left: -2px; background-color: rgba(234,36,0,.25); }
a.tab { border-left: 2px solid #fff; border-bottom: 2px solid #fff; }
a.tab { font-size: 150%; text-transform: uppercase; line-height: 142px; }

a.tab:before { display: none; position: absolute; top: 50%; left: -22px; width: 40px; height: 40px; margin-top: -20px; }
a.tab:before { background-image: linear-gradient(45deg, rgba(234,36,0,.4) 0, rgba(234,36,0,.4) 50%, transparent 50%, transparent 100%), linear-gradient(45deg, rgba(255,255,255,1) 0, rgba(255,255,255,1) 50%, transparent 50%, transparent 100%); }
a.tab:before { border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); -webkit-transform: rotate(45deg); content: ''; }

h3.tab-1, p.tab-1, a.tab.tab-1:before { display: inherit; visibility: visible; opacity: 1; }
a.tab-1 { background-color: rgba(234,36,0,.4); }

h3.tab-1:target, h3.tab-1:target ~ p.tab-1, h3.tab-1:target ~ a.tab-1:before,
h3.tab-2:target, h3.tab-2:target ~ p.tab-2, h3.tab-2:target ~ a.tab-2:before,
h3.tab-3:target, h3.tab-3:target ~ p.tab-3, h3.tab-3:target ~ a.tab-3:before,
h3.tab-4:target, h3.tab-4:target ~ p.tab-4, h3.tab-4:target ~ a.tab-4:before { display: inherit; visibility: visible; opacity: 1; }

h3.tab-1:target ~ a.tab-1,
h3.tab-2:target ~ a.tab-2,
h3.tab-3:target ~ a.tab-3,
h3.tab-4:target ~ a.tab-4 { background-color: rgba(234,36,0,.4); }

h3.tab-2:target ~ h3.tab-1, h3.tab-2:target ~ p.tab-1, h3.tab-2:target ~ a.tab-1:before,
h3.tab-3:target ~ h3.tab-1, h3.tab-3:target ~ p.tab-1, h3.tab-3:target ~ a.tab-1:before,
h3.tab-4:target ~ h3.tab-1, h3.tab-4:target ~ p.tab-1, h3.tab-4:target ~ a.tab-1:before { display: none; visibility: hidden; opacity: 0; }

h3.tab-2:target ~ a.tab-1,
h3.tab-3:target ~ a.tab-1,
h3.tab-4:target ~ a.tab-1 { background-color: rgba(234,36,0,.25); }

a.service { display: inline-block; width: 40%; height: 80px; padding-top: 60px; opacity: .5; overflow: hidden; }
a.service { background-position: top center; background-repeat: no-repeat; }
a.service { color: transparent; }

a.service.service-1 { background-image: url(img/icons/armband.png); }
a.service.service-2 { background-image: url(img/icons/glass.png); }
a.service.service-3 { background-image: url(img/icons/akku.png); }
a.service.service-4 { background-image: url(img/icons/reinigung.png); }
a.service.service-5 { background-image: url(img/icons/kontrolle.png); }
a.service.service-6 { background-image: url(img/icons/gravuren.png); }
a.service.service-7 { background-image: url(img/icons/ring.png); }
a.service.service-8 { background-image: url(img/icons/herstellung.png); }
a.service.service-9 { background-image: url(img/icons/ankauf.png); }
a.service.service-10 { background-image: url(img/icons/ohr.png); }

p.lightbox, form.lightbox { position: fixed; top: 50%; left: 50%; width: 700px; height: 300px; padding: 50px; margin: -205px 0 0 -405px; border: 5px solid rgba(0,0,0,.25); }
p.lightbox, form.lightbox { background-color: rgba(255,255,255,.99); outline: 1000px solid rgba(0,0,0,.25); box-shadow: 0 0 100px -20px rgba(0,0,0,1); }
p.lightbox, form.lightbox { font-size: 150%; overflow-x: hidden; overflow-y: scroll; }
p.lightbox, form.lightbox { visibility: hidden; opacity: 0; z-index: 4; }
p.lightbox:first-line, form.lightbox:first-line { font-size: 200%; }

p.img { float: none; display: inline-block; width: 30%; margin-bottom: 50px; } p.img { font-size: 70%; }
p.img img { width: 100%; margin-bottom: 20px; }

div.header { width: 90%; padding: 20px 5% 10px; z-index: 3; }
div.header { font-size: 200%; line-height: 55px; text-align: left; text-transform: uppercase; }

div.header a { float: left; margin-right: 40px; font-size: 100%; line-height: 55px; text-transform: uppercase; }
div.header a.logo { font-size: 200%; }
div.header a.service { float: right; width: auto; margin: 0; padding: 0; }
div.header a.job { position: absolute; top: 83px; right: 5%; width: 68px; height: 68px; }
div.header a.job { background-image: url(img/job-offer.png); }

hr { display: inline-block; width: 100%; border: none; }
hr.footer { width: 60%; margin: 20px 20%; border-bottom: 1px dashed rgba(0,0,0,.25); }

p.footer { width: 90%; padding: 0 5%; font-size: 100%; }

a.footer { margin: 0 1%; text-transform: none; } a.footer span { color: #5091c3; }

p.footer.seo { word-spacing: 20px; line-height: 25px; font-size: 90%; }

@media only screen and (min-device-width: 0) and (max-device-width: 768px) and (orientation: portrait) {
div.header { display: none; }

h1 { font-size: 100%; }

/* AKTIONSCODE
h1 { width: 40%; padding: 20% 10% 5% 50%; background-image: url(img/muttertag-2017.jpg) !important; background-size: 768px 480px; background-position: top left; }
h1 img { max-width: 75%; }
/* ----------- */

p { font-size: 100%; }
p span.blue { font-size: 125%; }

p.welcome { margin-bottom: 75px; }
p.welcome span.headline { display: none; }

.tab, .break, .newsletter { display: none !important; }

p.footer.seo { width: 80%; padding: 0 10% 20px; }
}

@media only screen and (min-device-width: 0) and (max-device-width: 768px) and (orientation: landscape) {
div.header { display: none; }

h1 { padding: 20% 10%; }

p { font-size: 100%; }
p span.blue { font-size: 125%; }

p.welcome { margin-bottom: 75px; }
p.welcome span.headline { display: none; }

.tab, .break, .newsletter { display: none !important; }
}

@media only screen and (min-device-width: 641px) and (max-device-width: 768px) and (orientation: portrait) {
div.header { display: inherit; float: left; }
div.header { padding: 20px 5% 0; }
div.header a { font-size: 150%; } div.header a.job { display: none; }

h1 { /* padding: 40% 10% 20%; */ }
}

@media only screen and (min-device-width: 641px) and (max-device-width: 768px) and (orientation: landscape) {
div.header { display: inherit; float: left; }
div.header a { font-size: 150%; }

p.welcome span.headline { display: inherit; }
.tab { display: inherit !important; }
}

@media only screen and (min-device-width: 0) and (max-device-width: 1024px) and (orientation: landscape) {
/* AKTIONSCODE
h1 { width: 40%; padding: 20% 10% 5% 50%; background-image: url(img/muttertag-2017.jpg) !important; background-size: 1024px 640px; background-position: left -50px; }
/* ----------- */

h3 { height: 0; margin: 0 20%; padding: 0; border: none; visibility: hidden !important; }

a.tab { display: none !important; }
p.tab { width: 40%; height: auto !important; margin: 0; padding: 75px 5% 75px 55%; background-size: 100%, 100%, 90%; background-position: right bottom; }
}

@media only screen and (min-device-width: 768px) and (orientation: landscape) {
div.header { position: fixed; top: 0; left: 0; padding: 20px 5% 10px; background-color: rgba(255,255,255,.9); box-shadow: 0 0 20px rgba(0,0,0,.125); border-bottom: 2px solid rgba(0,0,0,.25); }

h1 { min-height: 300px; padding: 10%; }
h1 img { max-width: 500px; margin: 40px 0 20px; }

/* AKTIONSCODE
h1 { width: 50%; padding: 25% 0 5% 50%; background-image: url(img/muttertag-2017.jpg) !important; } h1 img { max-width: 50%; }
/* ----------- */

p { font-size: 150%; }
p span.blue { font-size: 175%; }

p.welcome { width: 30%; margin: 0 10%; padding: 75px 5% 100px 45%; text-align: left; line-height: 32px; }
p.welcome span.headline { font-size: 150%; text-transform: uppercase; line-height: 64px; }

p.copyright { display: inherit; width: 90%; margin: 20px 0 100px; color: rgba(91,96,100,.5); font-style: italic; font-size: 75%; }

a.service { width: 15%; height: auto; margin-top: 50px; padding-top: 60px; color: #000; }

p.img { width: 10%; font-size: 100%; }

form.lightbox:target,
form.lightbox.i:target ~ a.close.i,
p.lightbox:target,
p.lightbox.s:target ~ a.close.s,
p.lightbox.i:target ~ a.close.i { visibility: visible; opacity: 1; }

input.newsletter { width: 500px; height: 20px; margin: 50px 0 80px; padding: 10px 210px 10px 60px; border: 2px solid rgba(0,0,0,.25); text-align: left; }
input.newsletter { background-image: url(img/icon-sprite.png), linear-gradient(to right, #fff 0, #fff 580px, rgba(234,36,0,.5) 580px, rgba(234,36,0,.5) 700px); }
input.newsletter { background-size: auto, cover; background-position: -20px -229px, left center; background-repeat: no-repeat; border-radius: 0px; font-size: 100%; }

button.newsletter { width: 194px; height: 46px; margin: 50px 0 0 -194px; background-color: transparent; border: none; color: #fff; font-size: 100%; cursor: pointer; }

input.mail { display: inline-block; width: 80%; margin-bottom: 10px; padding: 10px 0; }
input.mail { border: none; border-bottom: 1px dashed; font-size: 100%; }

textarea { display: inline-block; width: 80%; height: 100px; margin-bottom: 10px; padding: 10px 0; }
textarea { border: none; border-bottom: 1px dashed; font-size: 100%; }

input.submit { width: auto; padding: 10px 20px; border: none; cursor: pointer; font-size: 75%; }

p.footer { width: 25%; padding: 20px 2.5%; } p.footer.left { padding: 20px 2.5% 20px 7.5%; } p.footer.right { padding: 20px 7.5% 20px 2.5%; }

a.footer { float: left; margin: 20px 20px 10px 0; text-transform: none; }
a.footer span { color: #5091c3; } a.footer.left { margin-left: 10%; } a.footer.right { float: right; margin-right: 10%; }

br.copyright { display: none; }

p.footer.seo { width: 95%; }
}

@media only screen and (max-device-width: 1024px) and (orientation: landscape) {
a.footer.left { margin-left: 5%; } a.footer.right { float: right; margin-right: 5%; }
}