@charset "UTF-8";
/*CSS DAROC.CH BY DAROC 2022 ENJOY IT!*/

/* FONTS */

/* cinzel-regular */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/cinzel-v16-latin-regular.woff2') format('woff2'), 
       url('../fonts/cinzel-v16-latin-regular.woff') format('woff'); 
}

/* cinzel-700 */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('../fonts/cinzel-v16-latin-700.woff2') format('woff2'),
       url('../fonts/cinzel-v16-latin-700.woff') format('woff');
}

/* poppins-regular */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/poppins-v19-latin-regular.woff2') format('woff2'),
       url('../fonts/poppins-v19-latin-regular.woff') format('woff');
}

/* poppins-700 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('../fonts/poppins-v19-latin-700.woff2') format('woff2'),
       url('../fonts/poppins-v19-latin-700.woff') format('woff');
}

/* GENERAL SETTINGS */

html, body{
 	color: #555; font-family: 'Poppins', sans-serif; font-style: normal; font-weight: 400; letter-spacing: 0.5px; font-size: 100%; min-height: 100vh; margin: 0; padding: 0; width: 100%; background-image: url( '../images/daroc-bg.svg' ); background-repeat: no-repeat; background-size: cover; }

a{
	outline: none; }
a:link,
a:visited{
	color: #555; text-decoration: underline; transition: color 0.5s ease-in-out; }
a:hover,
a:active{
	color: #3281bb; text-decoration: none; }

header{
	background-color: #000; height: 120px; position: fixed; top: 0; left: 0; padding: 0; text-align: right; width: 100%; z-index: 1000; }
div#innerheader{
	box-sizing: border-box; margin: 0 auto; padding: 0 55px 0 20px; position: relative; width: 100%; }

div#container{
	box-sizing: border-box; height: auto !important; min-height: 100vh; margin: 0 auto; padding: 0; position: relative; width: 100%; }
div#homebutton{
	float: left; height: 120px; margin: 0; padding: 0; }
div#homebutton a{
	display: block; height: 120px; margin: 0; outline: none; }
div#homebutton a img{
	border: none; height: 80px; margin-top: 20px; width: auto; }
svg#facebooksvg,
svg#instagramsvg{
    fill: #555; height: 30px; vertical-align: middle; transition: all 0.5s ease-in-out; }
svg#facebooksvg:hover,
svg#instagramsvg:hover{
    fill: #3281bb; }
nav.pushmenu-nav{ 
	height: 120px; line-height: 120px; margin: 0; padding: 0; }
ul.navbar-list { 
	display: table; float: right; height: 120px; margin: 0; padding: 0; }
ul.navbar-list li.navbar-item { 
	font-family: 'Poppins', sans-serif; font-style: normal; font-size: 1rem; font-weight: 700; display: table-cell; padding: 0; padding-left: 20px; text-align: center; }
ul.navbar-list li.navbar-item a{
	display: block; margin: 0; outline: none; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: all 0.5s ease-in-out; }
ul.navbar-list li#moblist{
	display: none; }
a#mobNavi{ 
	background-image: url(../images/navicon.png); background-repeat: no-repeat; background-attachment: scroll; background-position: center; background-clip: border-box; background-origin: padding-box; background-size: cover; border: 0; box-sizing: border-box; height: 40px; line-height: 80px; float: right; margin-top: 20px; outline: 0; text-decoration: none; text-align: center; width: 40px; }


section#mysection{
	box-sizing: border-box; display: table; height: auto; min-height: 100vh; margin: 0; padding: 120px 55px 50px 20px; position: relative; width: 100%; }
div#welcomeDiv{ 
	display: table-row; }
div#cellDiv{ 
	display: table-cell; text-align: center; vertical-align: middle; }
svg#gruezi{
    fill: #e1ac5f; width: 100%; height: auto; max-height: 300px; }

svg#begruessen{
    fill: #bf7e1f; stroke-width: 4; stroke: red; width: 100%; height: auto; max-width: 700px; }
svg#begruessen {
  stroke-dasharray: 1000; stroke-dashoffset: 1000; pointer-events: none; }
svgsvg#begruessen {
  animation: animateDash 2s linear forwards infinite;
}
@keyframes animateDash {
  to {
    stroke-dashoffset: 0;
  }
}

div#huellenDiv{ 
	display: table-row; }
div#huellenCell{ 
	display: table-cell; text-align: center; vertical-align: middle; }
div#distributeDiv{
	display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; padding: 0; grid-gap: 10px; width: 100%; /*position: absolute; bottom: 50px; left: 0; right: 0;*/ }
div.linkDiv{
	text-align: center; }
div.linkDiv p{
	 font-size: 1.5rem; font-weight: 700; margin-bottom: 0.3rem; }
div.linkDiv svg{
    fill: #0075a6;; height: auto; width: 80%; max-width: 170px; transition: fill 0.5s ease-in-out; }
div.linkDiv svg:hover{
    fill: #a61129; }
div.linkDiv .bigborder{
	fill: url(#img2); }
div.linkDiv .redfill{
	fill: #a61129; }
div.linkDiv .nofill{
	fill: #dedede; }



/* RESPONSIVE */
@media screen and (min-width: 1200px) {
	p#firstquestion{
		font-size: 4.1rem; font-weight: 700; }
}

@media screen and (max-width: 1199px) {
	p#firstquestion{
		font-size: 5.5vw; font-weight: 700; }
}

@media screen and (max-width: 1500px) {

}

@media screen and (max-width: 1020px)  {

}

@media screen and (max-width: 800px)  {
	p#firstquestion{
		font-size: 2rem; font-weight: 700; }
}

@media screen and (max-width: 460px)  {

}



/*html,
body										{ background: url(../images/bg_texture.jpg) repeat scroll 0% 0% #fff; color: #222; font-family: Calibri, Arial, sans-serif;  font-size: 1em; height: 100%; line-height: 1.5em; margin: 0; padding: 0; width: 100%; }

hr											{ border: 1px dashed #4a442a; }

a.tel:link,
a.tel:visited,
a.tel:hover,
a.tel:active					{ background: none; color: #222; cursor: text; font-family: Calibri, Arial, sans-serif; text-decoration: none; }

a.mail:link,
a.mail:visited								{ color: #aa9e84; font-family: Calibri, Arial, sans-serif; font-weight: 700;  text-decoration: none; }

a.mail:hover,
a.mail:active								{ color: #8491aa; font-family: Calibri, Arial, sans-serif;  text-decoration: underline; }

div#container								{ height: auto !important; height: 100%; min-height: 100%; margin: 0 auto; padding: 0; position: relative; width: 100%; }

div#header									{ border-bottom: 2px solid rgba(170,158,132,0.5); box-shadow: 5px 0px 5px rgba(93,84,63,0.6); clear: both; margin: 0 auto; padding: 0;width: 100%; }
div#innerheader								{ clear: both; margin: 0 auto; padding: 10px 5%; line-height: 1em; text-align: center; width: 90%; max-width: 1280px; }
div#innerlinks								{ float: left; margin: 10px 0; padding: 0; }
div#innermitte								{ float: left; margin: 60px 0 0 0; padding: 0; }
div#mobile-navigation						{ display: none; position: absolute; overflow: hidden; right: 10px; top: 10px; z-index: 10; }
div#mobile-navigation img					{ border: none; }

a#toTop 									{ display:none; text-decoration:none; position:fixed; bottom:5px; right:10px; overflow:hidden; width:40px; height:40px; border:none; text-indent:100%; background:url(../images/ui.totop.png) no-repeat left top; }

span#toTopHover 							{ background:url(../images/ui.totop.png) no-repeat left -40px; 	width:40px; height:40px; display:block; overflow:hidden; float:left; opacity: 0; -moz-opacity: 0; filter:alpha(opacity=0); }

a#toTop:active, a#toTop:focus 				{ outline:none; }

div#innerrechts								{ display: none; float: left; margin: 0; padding: 0; width: 20%;  }

div#innerertext								{ clear: both; margin: 10px auto; padding: 0 5%; max-width: 1280px; }
div#navigation								{ float: left; width: 25%; }

ul#navigationsMenu							{ margin: 0; margin-top: 10px; -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); -o-transform: translateY(-5px);  -webkit-transform: translateY(-5px);  transform: translateY(-5px); -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; padding: 0; position: relative; }
ul#navigationsMenu:hover					{ -moz-transform: translateY(5px); -ms-transform: translateY(5px); -o-transform: translateY(5px);  -webkit-transform: translateY(5px);  transform: translateY(5px); -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; }
ul#navigationsMenu li						{ font-size: 2.0em; display: block; line-height: 50px; }

ul#navigationsMenu li a						{ font-family: 'Cabin Sketch', cursive; white-space: nowrap; color: rgba(132,145,170,0.1); display: block; text-align: right; text-decoration: none; text-transform: lowercase; text-shadow: 0px 0px 4px #8491aa; letter-spacing: 1px; -moz-transform: scale(0.8) translateX(-10px); -ms-transform: scale(0.8) translateX(-10px); -o-transform: scale(0.8) translateX(-10px);  -webkit-transform: scale(0.8) translateX(-10px);  transform: scale(0.8) translateX(-10px); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
ul#navigationsMenu li a.selectedMenu		{ white-space: nowrap; color: rgba(170,158,132,0.1); display: block; text-align: right; text-decoration: none; text-transform: lowercase; text-shadow: 0px 0px 4px #aa9e84; letter-spacing: 1px; -moz-transform: scale(0.8) translateX(10px); -ms-transform: scale(0.8) translateX(10px); -o-transform: scale(0.8) translateX(10px);  -webkit-transform: scale(0.8) translateX(10px);  transform: scale(0.8) translateX(10px); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
ul#navigationsMenu:hover li a				{ text-shadow: 0px 0px 8px #8491aa; text-decoration: none;}
ul#navigationsMenu:hover li a.selectedMenu	{ text-shadow: 0px 0px 8px #aa9e84; text-decoration: none;}
ul#navigationsMenu li a:hover				{ color: #8491aa; text-shadow: 0px 0px 1px #8491aa; text-decoration: none; -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
ul#navigationsMenu li a.selectedMenu:hover	{ color: #aa9e84; text-shadow: 0px 0px 1px #aa9e84; text-decoration: none; -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }

div#sidr-main a								{ font-family: 'Cabin Sketch', cursive; }

div#seiterechts								{ float: left; margin: 0; padding: 0; width: 75%;  }

div#minheight 								{ clear: both; height: 50px; }
div#footer 									{ bottom: 0px !important;  border-top: 2px solid rgba(170,158,132,0.5); box-shadow: -5px 0px 5px rgba(93,84,63,0.6); height:50px; margin:0 auto; position: absolute; width: 100%; }
div#innerfooter								{ clear: both; height: 40px; font-size: 0.8em; margin: 0 auto; padding: 0 5%; width: 90%; max-width: 1280px; }
div#innerfooter p							{ margin: 10px 0 0 0; }

p.adresszeile								{ margin-top: -10px; }
p.hidden                  					{ display: none; }
p#jsnaktiv									{ border: 2px solid rgba(170,158,132,0.5); box-shadow: 5px 0px 5px rgba(93,84,63,0.6); padding: 10px; }

input[type="text"], 
textarea									{ background-color: #eee; border: 2px solid rgba(170,158,132,0.5); box-shadow: 0px 0px 5px rgba(93,84,63,0.6); color:#222; font-family: Calibri, Arial, sans-serif;  font-size: 1em; outline: none; padding: 3px ; width: 98%; }
textarea									{ height: 200px; resize: none;}
input[type="text"]:focus, 
textarea:focus								{ background-color: #fff; color:#000; }

div#btnDiv									{ height: 50px; margin-top: 30px; padding: 0 4px; width: 100%; }
p.btnPara									{ margin: 0; padding: 0; text-align: center; width: 100%; }
p.btnPara input.sendenBtn					{ background-color: transparent; border: none; color: rgba(132,145,170,0.1); cursor: pointer; display: inline; font-family: 'Cabin Sketch', cursive; font-size: 2.0em; height: 50px; text-shadow: 0px 0px 4px #8491aa; letter-spacing: 1px; -moz-transform: scale(0.8) translateX(-10px); -ms-transform: scale(0.8) translateX(-10px); -o-transform: scale(0.8) translateX(-10px);  -webkit-transform: scale(0.8) translateX(-10px);  transform: scale(0.8) translateX(-10px); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
p.btnPara:hover	input.sendenBtn				{ text-shadow: 0px 0px 8px #222; }

input[type="submit"],
p.btnPara input.sendenBtn:hover				{ border: none; color:#aa9e84; text-shadow: 0px 0px 1px #000; -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }

input[type="reset"],
input[type="reset"]:hover					{ cursor: pointer; margin-left: 120px; }

h1											{ color: #36445d; font-family: 'Cabin Sketch', cursive; font-size: 1.6em; font-weight: 700; }
h2											{ font-family: 'Cabin Sketch', cursive; font-size: 1.1em; font-weight: 600; margin-bottom: -15px; margin-top: 20px; }
h2#formIstzu,
h2#formOffen,
h2#waehlen      							{ cursor: pointer; display: block; font-size: 1.0em; margin-top: 50px; }
h2#waehlen            						{ display: none; margin-bottom: 20px; }
span.projends,
span.hovertext        						{ background: url(../images/hg_texture.jpg) repeat scroll 0% 0% #222; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; -webkit-border-radius: 5px;  border-radius: 5px; color: #fff; -webkit-box-shadow:inset 0 0 1px 1px #222;-moz-box-shadow:inset 0 0 1px 1px #222; -ms-box-shadow:inset 0 0 1px 1px #222;-o-box-shadow:inset 0 0 1px 1px #222;box-shadow:inset 0 0 1px 1px #222; height:auto; padding: 5px 10px; width: auto; transition: background 0.5s linear; }
span.projends         						{ display: inline-block; margin-right: 30px; text-align: center; text-decoration: none; width: 100px; }
span.projends:last-child 					{ margin-right: 0; }
h2#waehlen span.projends:hover,
h2#formIstzu span.hovertext:hover,
h2#formOffen span.hovertext:hover    		{ background: transparent;color: #222; }

strong										{ font-size: 1.0em; font-weight: 600; }

div#kontaktpipe   							{ display: none; }
div#kontaktbreak   							{ display: none; }

div#fehlermeldungen 						{ margin-top: 30px; }
div#fehlermeldungen p 						{ margin-top: 20px; }

div.freundivs,
div.linkdivs 								{ height: auto; width: 100%; }
div.linkbild  								{ float:left; height: auto; width: 30%; }
div.galeriebild								{ float:left; height: auto; width: 100%; max-width: 500px; }
div.galeriebild a,
div.linkbild a 								{ border: none; display: block; height: auto; opacity: 0.1; width: 100%; }
div.galeriebild a img,
div.linkbild a img 							{ border: none; height: auto; width: 100%; }
div.galeriebild a.ohnejava:hover,
div.linkbild a.ohnejava:hover 				{ opacity: 0.9; }
div.linktext  								{ float: left; padding-left: 5%; width: 65%; }
div.linktext h2 							{ margin-top: 0; }

div.videolinie								{ width: 100%; max-width: 500px; }
div.videoWrapper 							{ position: relative; padding-bottom: 56.25%; /* 16:9 */ /*height: 0; }
div.videoWrapper iframe 					{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#imagelightbox								{ cursor: pointer; box-shadow: 0px 0px 60px #000000; position: fixed; z-index: 9999; -ms-touch-action: none; touch-action: none; }
#imagelightbox-loading,
#imagelightbox-loading div					{ -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; -webkit-border-radius: 50%;  border-radius: 50%; }
#imagelightbox-loading						{ background: url(../images/hg_texture.jpg) repeat scroll 0% 0%; box-shadow: 0 0 20px rgba( 0, 0, 0, .75 ); height: 20px; margin: -10px 0 0 -10px; padding: 10px; position: fixed; width: 20px; left: 50%; top: 50%; z-index: 10003; }
#imagelightbox-loading div					{ background-color: #fff; height: 20px; width: 20px; -webkit-animation: imagelightbox-loading .5s ease infinite; -moz-animation: imagelightbox-loading .5s ease infinite; -o-animation: imagelightbox-loading .5s ease infinite; animation: imagelightbox-loading .5s ease infinite; }

@-webkit-keyframes imagelightbox-loading {
from { opacity: .5;	-webkit-transform: scale( .75 ); }
50%	 { opacity: 1;	-webkit-transform: scale( 1 ); }
to	 { opacity: .5;	-webkit-transform: scale( .75 ); }
}

@-moz-keyframes imagelightbox-loading {
from { opacity: .5;	-moz-transform: scale( .75 ); }
50%	 { opacity: 1;	-moz-transform: scale( 1 ); }
to	 { opacity: .5;	-moz-transform: scale( .75 ); }
}

@-o-keyframes imagelightbox-loading {
from { opacity: .5;	-o-transform: scale( .75 ); }
50%	 { opacity: 1;	-o-transform: scale( 1 ); }
to	 { opacity: .5;	-o-transform: scale( .75 ); }
}

@keyframes imagelightbox-loading {
from { opacity: .5;	transform: scale( .75 ); }
50%	 { opacity: 1;	transform: scale( 1 ); }
to	 { opacity: .5;	transform: scale( .75 ); }
}

#imagelightbox-overlay						{ background-color: rgba( 255, 255, 255, 0.9 ); position: fixed; z-index: 9998; top: 0; right: 0; bottom: 0; left: 0; }
#imagelightbox-close						{ background:url(../images/hg_texture.jpg) repeat scroll 0% 0%; height: 40px; position: fixed; text-align: left; text-indent: -9999px; width: 40px; z-index: 10002; top: 40px; right: 40px; -moz-border-radius: 10%; -ms-border-radius: 10%; -o-border-radius: 10%; -webkit-border-radius: 10%;  border-radius: 10%; }
#imagelightbox-close:before,
#imagelightbox-close:after					{ background-color: #fff; content: ''; margin-left: -2px; position: absolute; width: 4px; bottom: 20%; left: 50%; top: 20%; -webkit-transition: background-color .3s ease; -moz-transition: background-color .3s ease; -ms-transition: background-color .3s ease; -o-transition: background-color .3s ease; transition: background-color .3s ease; }
#imagelightbox-close:before					{ -webkit-transform: rotate( 45deg ); -moz-transform: rotate( 45deg ); -ms-transform: rotate( 45deg ); -o-transform: rotate( 45deg ); transform: rotate( 45deg ); }
#imagelightbox-close:after					{ -webkit-transform: rotate( -45deg ); -moz-transform: rotate( -45deg ); -ms-transform: rotate( -45deg ); -o-transform: rotate( -45deg ); transform: rotate( -45deg ); }
#imagelightbox-close:hover:before,
#imagelightbox-close:hover:after			{ background-color: #999; }
#imagelightbox-nav							{ background:url(../images/hg_texture.jpg) repeat scroll 0% 0%; position: fixed; z-index: 10001; left: 50%; bottom: 60px; padding: 5px; -webkit-transform: translateX( -50% ); -moz-transform: translateX( -50% ); -ms-transform: translateX( -50% ); -o-transform: translateX( -50% ); transform: translateX( -50% );  -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; -webkit-border-radius: 10px;  border-radius: 10px; }
#imagelightbox-nav a						{ background-color:none; border: 1px solid #fff; display: inline-block; height: 20px; margin: 0 5px; margin-top: 5px; width: 20px; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; -webkit-border-radius: 50%;  border-radius: 50%; -webkit-transition: background-color .3s ease; -moz-transition: background-color .3s ease; -ms-transition: background-color .3s ease; -o-transition: background-color .3s ease; transition: background-color .3s ease; }
#imagelightbox-nav a:hover					{ background-color: rgba(255,255,255,0.2); }
#imagelightbox-nav a.active					{ background-color: #fff; }

#imagelightbox-loading,
#imagelightbox-overlay,
#imagelightbox-close,
#imagelightbox-caption,
#imagelightbox-nav							{ -webkit-animation: fade-in .25s linear; -moz-animation: fade-in .25s linear; -o-animation: fade-in .25s linear; animation: fade-in .25s linear; }

@-webkit-keyframes fade-in {
from	{ opacity: 0; }
to		{ opacity: 1; }
}

@-moz-keyframes fade-in {
from	{ opacity: 0; }
to		{ opacity: 1; }
}

@-o-keyframes fade-in {
from	{ opacity: 0; }
to		{ opacity: 1; }
}

@keyframes fade-in {
from	{ opacity: 0; }
to		{ opacity: 1; }
}


@media screen and (max-width:999px) {
div#navigation								{ display: none; }
div#mobile-navigation						{ display: block; }
div#seiterechts								{ clear: both; width: 100%;  }
h2#waehlen span.projends:hover,
h2#formIstzu span.hovertext:hover,
h2#formOffen span.hovertext:hover    		{ background: url(../images/hg_texture.jpg) repeat scroll 0% 0% #222;color: #fff; }
a.tel:link,
a.tel:visited								{ color: #aa9e84; font-family: Calibri, Arial, sans-serif; font-weight: 700;  text-decoration: none; }
a.tel:hover,
a.tel:active								{ color: #8491aa; font-family: Calibri, Arial, sans-serif;  text-decoration: underline; }

}

@media screen and (max-width:799px) {
input[type="text"], 
textarea                    				{ width: 98%; }

}

@media screen and (max-width:699px) {
#imagelightbox-close						{ top: 10px; right: 10px; }
#imagelightbox-nav							{ bottom: 10px; padding: 5px; }

}

@media screen and (max-width:499px) {
p.btnPara input.sendenBtn   				{ font-size: 1.5em; }
input[type="reset"],
input[type="reset"]:hover					{ margin-left: 50px; }
div.linkbild  								{ clear: both; height: auto; width: 30%; }
div.linktext  								{ clear: both; padding-left: 0; width: 100%; }
span.projends               				{ display: block; margin-top: 10px; }

}

@media screen and (max-width:399px) {
div#mobile-navigation						{ float: right; margin-top: 10px; }
input[type="reset"],
input[type="reset"]:hover					{ margin-left: 20px; }

}
*/