html,body{ scroll-behavior: smooth}

/* body {
	margin: 0;
	padding: 0; 
    width: 100%;
    height: auto;
} */

body {


    background: #ffffff url(./../../styles/optimal/img/?f=raute&ca=4bc4ff);

}


/* MuggelClanNav-Beginn */
muggelnav {
  position: fixed;
  width: 270px;
  left: -331px; /* 336px */
  top: 10px; /* 50px */
  bottom: 10px; /* 50px */
  background-color: rgba( 0, 0, 0, .9 );
  padding: 25px 20px;
  margin-left: 15px; /* Abstand linker Rand 20px */
 border-style: solid;
 border-width: 3px;
 border-color: #ffffff;
  border-radius: 15px;
  transition: left 1s ease-in .5s;
  text-align: center;
  z-index: 3499;
  &:after {
    content: "\2218"; /* Barrieresymbol oder Text geschlossen kann ersetzt werden */
    font-weight: 400;
    font-style: normal;
    text-decoration: inherit;
    color: #ffffff;
    position: absolute;
    left: 100%;
    top: 50px;
    padding: 0px 20px 30px 21px;
    margin: 0px 0px 0px 0px;
/* Hintergrund Berrieresymbol Menue zeigen */
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100"%3E%3Cg fill-rule="evenodd"%3E%3Cg id="barrierefreiheit" fill="white" fill-opacity="1.0" fill-rule="nonzero"%3E%3Cpath d="M74.131,28.976c-5.681,1.64-10.926,2.833-16.035,3.647c-5.16,0.822-9.817,0.919-14.274,0.3 c-6.072-0.845-12.131-2.176-18.011-3.957c-1.194-0.362-2.231-0.308-3.188,0.148c-1.603,0.767-2.707,2.446-2.882,4.383 c-0.169,1.874,0.553,3.587,1.931,4.584c1.044,0.756,2.325,1.398,3.705,1.856c2.805,0.929,5.671,1.813,8.444,2.668 c1.188,0.367,2.377,0.733,3.564,1.104c2.301,0.719,2.471,0.955,2.273,3.15c-0.344,3.825-0.838,7.641-1.469,11.345 c-0.856,5.024-1.792,10.126-2.698,15.06c-0.487,2.652-0.974,5.305-1.452,7.959c-0.425,2.368,0.771,4.478,3.048,5.365 c0.274,0.107,0.556,0.197,0.837,0.285l0.336,0.107l2.143,0.049l0.269-0.036c2.994-0.834,3.891-3.288,4.373-5.579 c1.207-5.721,2.438-11.396,3.661-16.87c0.175-0.784,0.451-1.555,0.743-2.37c0.111-0.31,0.222-0.619,0.328-0.934 c0.03-0.09,0.067-0.182,0.106-0.271c0.368,0.807,0.715,1.646,0.919,2.484c1.115,4.596,2.192,9.285,3.233,13.818l0.309,1.348 c0.155,0.671,0.282,1.349,0.409,2.023c0.084,0.441,0.167,0.887,0.259,1.326c0.565,2.758,1.965,4.399,4.273,5.021l2.25,0.033 l0.365-0.121c0.109-0.039,0.225-0.077,0.332-0.109c2.699-0.762,4.123-3.018,3.627-5.744c-0.537-2.953-1.092-5.904-1.646-8.854 l-0.656-3.516c-0.205-1.099-0.414-2.193-0.623-3.291c-1.086-5.712-2.211-11.615-2.729-17.487c-0.247-2.794-0.198-2.812,2.322-3.736 c1.854-0.678,3.722-1.323,5.586-1.968c1.494-0.517,2.988-1.033,4.479-1.567l0.501-0.179c1.39-0.494,2.823-1.004,4.179-1.698 c1.496-0.769,2.451-1.832,2.832-3.158c0.403-1.405,0.115-3.041-0.812-4.606C78.15,29.079,76.309,28.348,74.131,28.976z M78.182,35.05c-0.225,0.776-0.838,1.426-1.824,1.933c-1.232,0.633-2.604,1.121-3.935,1.593l-0.505,0.18 c-1.48,0.531-2.969,1.045-4.456,1.56c-1.877,0.648-3.754,1.297-5.619,1.98c-3.411,1.249-3.952,2.115-3.629,5.79 c0.526,5.973,1.66,11.928,2.757,17.686c0.209,1.097,0.416,2.188,0.62,3.285l0.659,3.518c0.553,2.945,1.105,5.895,1.645,8.845 c0.309,1.688-0.518,2.983-2.209,3.463c-0.146,0.042-0.289,0.093-0.435,0.144l-1.567,0.014c-1.475-0.439-2.312-1.514-2.713-3.459 c-0.089-0.432-0.171-0.862-0.252-1.294c-0.133-0.703-0.265-1.407-0.426-2.104l-0.309-1.345c-1.043-4.541-2.121-9.235-3.239-13.847 c-0.293-1.207-0.804-2.338-1.298-3.389c-0.379-0.809-0.891-1.218-1.519-1.218c-0.899,0-1.394,0.875-1.557,1.162 c-0.143,0.252-0.349,0.64-0.491,1.062c-0.102,0.301-0.209,0.602-0.316,0.897c-0.299,0.837-0.609,1.703-0.812,2.606 c-1.224,5.48-2.457,11.164-3.666,16.896c-0.449,2.134-1.061,3.483-2.828,4.028h-1.531l-0.206-0.064 c-0.237-0.072-0.475-0.146-0.706-0.238c-1.369-0.535-2.062-1.742-1.809-3.148c0.477-2.65,0.963-5.303,1.45-7.952 c0.907-4.938,1.845-10.047,2.703-15.084c0.64-3.756,1.141-7.626,1.49-11.502c0.304-3.378-0.697-4.309-3.668-5.238 c-1.19-0.372-2.381-0.739-3.572-1.105c-2.762-0.852-5.619-1.733-8.404-2.656c-1.188-0.394-2.281-0.939-3.161-1.578 c-0.802-0.58-1.217-1.621-1.112-2.785c0.112-1.238,0.784-2.295,1.753-2.759c0.507-0.243,1.037-0.253,1.744-0.039 c5.979,1.812,12.141,3.165,18.315,4.023c1.998,0.278,4.076,0.419,6.175,0.419c2.79,0,5.632-0.237,8.688-0.725 c5.192-0.827,10.517-2.038,16.276-3.7c1.289-0.374,2.193-0.04,2.885,1.121C77.943,32.647,78.52,33.877,78.182,35.05z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
/* Hintergrund Berrieresymbol Menue zeigen Ende */
    background-color: rgba( 0, 0, 0, .9 );
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: dashed;  
  border-width: 3px;
 border-color: #ffffff;
 border-left-width: 6px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    cursor: pointer;
    
  }
  
  &:hover, &:focus-within {
    
    left: 0;
 border-style: solid;
 border-width: 3px;
 border-color: #ffffff;
    transition: left 1s ease-in 0s; /* 1s */

    
    &:after {
 content: "\2218"; /* Barrieresymbol oder Text offen kann ersetzt werden */
 color: #00ff00;
 border-left-width: 6px;
  border-left-color: #000000;
    margin: 0px 0px 0px 0px;


    }
        &:hover:active, &:focus:active {
    left: -331px;
    transition-property: left;
    transition-duration: 0ms;
    transition-delay: 200ms;
}
  }
}





/* MuggelClanNav-Ende */
/* Muggelnav Styles-Beginn*/
muggelnav {
  ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    margin-left: 3px;
    border-radius: 15px;
    li {
      position: relative;
border-style: solid;
border-width: 3px;
      border-radius: 15px;
      a {
        padding: 10px 5px;
        padding-left: 30px;
      }
      &:hover, &:focus-within {
 border-style: solid;
 border-width: 3px;
 border-color: #ffffff;
        background-color: rgba( 99, 99, 99, 1 );
        & > ul {
          top: 0%;
border-style: dotted;
border-width: 3px;
border-color: #ffffff;
        }
      }
      & > ul {
        position: absolute;
        background-color: rgba( 0, 0, 0, .9 );
        width: 100%;
        top: -1999px;
        left: 15%; /* nav2 100% */
        transition: top .5s;
        z-index: 3501;
        li {
          min-width: 120px;
        }
        &:hover, &:focus-within {
          top: 100%; /* nav2 0% */
        }
      }
    }
    a {
      color: #ffffff;
      text-decoration: none;
      padding-left: 25px;
      display: block;
      &:after {
        content: "\25B7";
        display: block;
        position: absolute;
        left: 5px;
        top: 13px;
        font-size: 12px;
      }
    }
  }
  /* First-Level Navigation */
  & > ul {
    margin-top: 32px;
  }
}
/* Muggelnav Styles - End */


/* Button-Styles-Beginn */
input[type=button] {
  background-color: #ffffff ;
  border:  3px solid green;
  border-radius:  15px; 
  color: #000000 ;
  padding: 3px 8px;
  font-size: 20px; 
  text-decoration: none;
  margin: 5px 5px;
  cursor: pointer;
}
input[type=button]:hover {
  background-color: black;
  color: white;
}
#muggelfarben[type=button]:hover {
  background-color: #ac667daa;
  color: white;
}
input[type=button]:focus {
  background-color: black;
  color: white;
   border:  5px solid gray;
}
/* Button-Styles-Ende */


h1 {
	text-shadow: 1px 1px 5px rgba(0,0,0,0.2);
}

h2 {
	text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

#navfader {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: #00a9fb;
	opacity: 0;
	-webkit-transition: all 0.6s;
	transition: all 0.6s;
	visibility: hidden;
	z-index: 1000;
}

#navfader.on {
	opacity: 0.5;
	visibility: visible;
}


#navigation {
	-webkit-transition: all 0.4s;
 	-webkit-transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
	transition: all 0.4s;
 	transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
	-webkit-perspective: 600px;
	perspective: 600px;
	-webkit-transform: translateY(-481px);
	transform: translateY(-481px);
	top:0;
	display: block;
	position: fixed;
	width: 100%;
	height: 538px;
	z-index: 1001;

}

#navc {
	position: absolute;
	width: 50%;
	top: 0;
	background-color: #00a9fb;
	right: 0;
	height: 480px; 
/*	height: 480px; */
}

#nava {
	position: absolute;
	width: 50%;


	top: 0;
	left: 0;
	background-color: #00a9fb;
	height: 480px;

}

#navb {
	position: absolute;
	width: 50%;
	right: 0;
	top: 0;

	height: 480px;

}

#navigation ul {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	height: 480px;
}

#nava ul {
	border-right: 1px solid #4bc4ff;
}

#navtoggle {
	height: 36px;
	width: 100%;
	border-top: 1px solid #4bc4ff;
	border-buttom: 1px solid #4bc4ff;
	background-color: #00a9fb;
	z-index: 1003;
	position: relative;
}

#navbutton {
	width: 114px;
	height: 57px;
	cursor: pointer;
	background: url(./../../styles/optimal/img/menu.png) no-repeat left top;
	position: absolute;
	bottom: 0;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
	 -webkit-animation: bounce 3s;
	 animation: bounce 3s;
	z-index: 1004;
}

.open #navbutton, #navbutton:hover {
	background-position: left bottom;
	 -webkit-animation: bounce 3s;
	 animation: bounce 3s;
}

@-webkit-keyframes bounce {
 0%, 40%, 60%, 80%, 100% {-webkit-transform: translateY(0);}
 45%, 65%, 85% {-webkit-transform: translateY(7px);}
}
@keyframes bounce {
 0%, 40%, 60%, 80%, 100% {transform: translateY(0);}
 45%, 65%, 85% {transform: translateY(7px);}
}

#navshadow {
/*    width: 100%;
    height: 0;
    padding-bottom: 2.5%;
    background: url(./../../styles/optimal/img/?f=bowtop&ca=00a9fb) no-repeat center top;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000; */
	height: 60px;
/*	height: 20px;
	background: url(./../../styles/optimal/img/shadow.png) repeat-x;
        background: url(./../../styles/optimal/img/?f=bowtop&ca=ffffff) no-repeat center top;  */
        background: url(./../../styles/optimal/img/?f=bowtop&ca=00a9fb) no-repeat center top;
	background-size: cover;
	margin-top: -1px;
	width: 100%;
}

#navtoggle img 
{
	display: block;
	position: absolute;
	left: 8px;
	top: 0;
	border: 0;
}

#nava {
	text-align: right;
}

#nava a {
	display: block;
	padding: 14px 20px 14px 20px;
}

#navb a {
	display: block;
	padding: 14px 20px 14px 20px;
}

#navigation li {
	transition: background-color 0.2s;
	-webkit-transition: background-color 0.2s;
}

#navigation ul li a {
	text-decoration: none;
/*	text-transform: uppercase; */
	color: #ffffff;
	
	transition: all 0.2s;
	-webkit-transition: all 0.2s;
}

#nava ul li:hover, #nava ul li.active {
	background-color: #00a9fb;
}

#nava ul li:hover a {
	padding-right: 30px;
}

#navb ul li:hover {
	background-color: #00a9fb;
}

#nava ul li.active, #navb ul li.active {
	font-weight: bold;
}

#navb ul li:hover a {
	padding-left: 30px;
}

#navigation.open #navtop
{
 	-webkit-transform: rotateX(0) ;
 	transform: rotateX(0) ;
}


#navigation.open {
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

#navigation #navtop {
 	-webkit-transform: rotateX(65deg);
 	-webkit-transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
	-webkit-transition: all 0.6s;
 	transform: rotateX(65deg);
 	transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
	transition: all 0.6s;
 	z-index: 1002; 
 	height: 480px;
}


#navtoggle form {
	width: 140px;
	height: 24px;
	display: block;
	position: absolute;
	top: 6px;
	right: 6px;
	background-color: #ffffff;
	border-radius: 2px;
}

#navtoggle form input {
	width: 110px;
	display: block;
	position: absolute;
	top: 4px;
	left: 26px;
	background-color: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	color: #444444;
	font: 14px "Corbel", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
}

#navtoggle button {
	background: url(./../../styles/optimal/img/searchbutton.png) no-repeat;
	display: block;
	width: 20px;
	height: 20px;
	border: none;
	position: absolute;
	top: 2px;
	left: 2px;
}

input:focus-within {
    outline: 2px;
/*    outline: 0; */
}

.sqroptologo {
    background-color: #ffffff;
    padding: 30px 0;
}

.sqroptologo img {
    display: block;
    border: none;
    margin: 30px auto 0 auto;
}

.sqroptologo {
/*    background-image: url({$backdropsource|escape}) !important; 
    background-color: #ffffff; */
    background-size: 100%;
    background-color: transparent !important;
    padding: 35px 0px 0px 0px !important;
}

/* .sqroptologo img {
    display: block;
    border: none;
    margin: 30px auto 0 auto;
} */

.sqrmainarea {
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
    padding: 0 30px;
    margin-top: -5%;
}

.sqroptobowtop {
    width: 100%;
    position: relative;
    background-size: 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-image: url(./../../styles/optimal/img/?f=fade&ca=f1f1f1&cb=0080be); 
/*    background-position: top;
    background-repeat: x-repeat;
    background-image: url(https://trachtenverein.donaustauf.info/images/pictures/layoutpictures/eigene/blaetterhintergrund.png);
https://trachtenverein.donaustauf.info/images/pictures/layoutpictures/eigene/blaetterhintergrundoben.png */
    border-bottom-style: outset; border-bottom-width: 5px; border-bottom-left-radius: 50% 10%; border-bottom-right-radius: 50% 10%; box-shadow:0 2px 2px rgba(0,0,0,0.5);

}


.sqroptobowtop>div {
    width: 100%;
    padding-bottom: 15%;
}

@media (max-width: 1024px) {

.sqroptobowtop {
    padding-bottom: 15% !important;
}
.sqroptobowtop>div {
    padding-bottom: 0px !important;
}
}



@media (min-width: 1024px) {
.muggelmobilesqrnav {
    display: none;
}
}



.sqrnav {
    width: 100%;
    z-index: 1000;
    -webkit-user-select: none;
    user-select: none;
    background-color: rgba(0,0,0,0.5);
}

.sqrnav a {
    display: block;
    margin: 0;
    padding: 10px 22px;
    color: #ffffff;
    text-decoration: none;
/*    text-transform: uppercase; */
    -webkit-tap-highlight-color: transparent;
    line-height: 22px;
    font-size: 20px;
    letter-spacing: 1px;
    -webkit-text-size-adjust:none;
    transition: background-color 0.2s;
}

.sqrnav>ul li {
    display: block;
    margin: 0;
    padding: 0;
    position: relative;
}




@media (max-width: 1023px) {


    .sqrnav a.sqrnavshow, .sqrnav a.sqrnavhide {
        background: url(./../../styles/optimal/img/?f=menu&ca=ffffff&cb=00a9fb) right center no-repeat;
    }
    .sqrnav li.sqrnavmore>a {
        background: url(./../../styles/optimal/img/?f=moreright&ca=ffffff&cb=00a9fb) right center no-repeat;
    }
    .sqrnav li.sqrnavopen>a {
        background: url(./../../styles/optimal/img/?f=moredown&ca=ffffff&cb=00a9fb) right center no-repeat;
    }
    .sqrnav .sqrnavshow {
        display: block;
    }
    .sqrnav .sqrnavhide {
        display: none;
    }
    .sqrnavopen>a.sqrnavshow {
        display: none;
    }
    .sqrnavopen>a.sqrnavhide {
        display: block;
    }
    .sqrnav li.sqrnavopen>ul {
        display: block;
    }
    .sqrnav ul {
        display: none;
        margin: 0 auto;
        padding: 0;
        list-style: none;
    }
    .sqrnav ul ul {
        display: none;
    }
    .sqrnav ul li li>a {
        padding-left: 44px;
    }
    .sqrnav ul li li li>a {
        padding-left: 66px;
    }
    .sqrnavopen>ul {
        display: block;
    }

    .sqrmainarea {
        padding: 0;
        margin-top: 0;
    }

    .sqroptobowcontenttop {
        display: block;
    }


    .sqroptobowtop>div {
    }


    .sqrnavopen {
        background-color: #00a9fb;
    }

}



@media (max-width: 1023px) {

#nav {
	display: none !important;
}

    .sqrnav a.sqrnavshow, .sqrnav a.sqrnavhide {
        background: url(./../../styles/optimal/img/?f=menu&ca=ffffff&cb=00a9fb) right center no-repeat;
    }
    .sqrnav li.sqrnavmore>a {
        background: url(./../../styles/optimal/img/?f=moreright&ca=ffffff&cb=00a9fb) right center no-repeat;
    }
    .sqrnav li.sqrnavopen>a {
        background: url(./../../styles/optimal/img/?f=moredown&ca=ffffff&cb=00a9fb) right center no-repeat;
    }
    .sqrnav .sqrnavshow {
        display: block;
    }
    .sqrnav .sqrnavhide {
        display: none;
    }
    .sqrnavopen>a.sqrnavshow {
        display: none;
    }
    .sqrnavopen>a.sqrnavhide {
        display: block;
    }
    .sqrnav li.sqrnavopen>ul {
        display: block;
    }
    .sqrnav ul {
        display: none;
        margin: 0 auto;
        padding: 0;
        list-style: none;
    }
    .sqrnav ul ul {
        display: none;
    }
    .sqrnav ul li li>a {
        padding-left: 44px;
    }
    .sqrnav ul li li li>a {
        padding-left: 66px;
    }
    .sqrnavopen>ul {
        display: block;
    }

    .sqrmainarea {
        padding: 0;
        margin-top: 0;
    }

    .sqroptobowcontenttop {
        display: block;
    }


    .sqroptobowtop>div {
    }


    .sqrnavopen {
        background-color: #00a9fb;
    }


}



// BilderNavigation Anfang


/* #navcontainer {
	height: 64px !important;
	width: 100% !important;
	background: #00a9fb url(./../../styles/optimal/img/fade.png) repeat-x !important; 
	margin-bottom: 40px !important;
	box-shadow:0 2px 2px rgba(0,0,0,0.5) !important;
} */

#nav {
/*	width: 960px; 
	width: 100%;
	height: 64px;
	margin: 0 auto;
	position: relative; */

	height: 64px !important;
	width: 100% !important;
	background: #00a9fb url(./../../styles/optimal/img/fade.png) repeat-x !important; 
	position: relative;
/*	margin-bottom: 40px !important; */
	box-shadow:0 2px 2px rgba(0,0,0,0.5) !important;

}

#nav>div {
/*	width: 191px; */
	width: 100%;
	height: 64px;
	position: absolute;
	top: 0;
	left: 0;
	border-right: 1px solid rgba(0,0,0,0.4);
	overflow: hidden;
}

#nav>div img {
	display: block;
	border: 0;
}

#nav>form {
	height: 28px;
	border: 1px solid rgba(0,0,0,0.4);
	background-color: rgba(0,0,0,0.1);
	position: absolute;
/*	width: 192px; */
	width: 220px;
	right: 0;
	top: 17px;
	border-radius: 2px;
}

#nav>form>button {
	background: url(./../../styles/optimal/img/search.png) no-repeat center center;
	display: block;
	width: 28px;
	height: 28px;
	border: none;
	position: absolute;
	top: 0px;
	right: 0px;
	cursor: pointer;
}

#nav>form>input {
	border: 0;
	width: 160px;
	padding: 0;
	margin: 0;
	top: 5px;
	left: 5px;
	background-color: transparent;
	font: 13px/18px "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;	
	height: 18px;
	position: absolute;
	color: #eeeeee;
}

#nav>form>input:focus{
/*    outline: 0; */
    outline: 3px;
}

#nav>ul {
/*	width: 960px; */
/*	width: 100%; */
	height: 64px;
	background: #00a9fb url(./../../styles/optimal/img/fade.png) repeat-x; 
	display: block;
	list-style: none;
	padding: 0 0 0 230px;
	font: 19px "Georgia", "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
	line-height: 16px;
	margin: 0;
	z-index: 1000; 
}

#nav>ul>li {
	display: block;
	float: left;
	height: 64px;
	border-right: 1px solid rgba(0,0,0,0.4);
}

// :active ?
#nav>ul>li.active {
	background: #00a9fb url(./../../styles/optimal/img/active.png) repeat-x; 
}

#nav>ul>li>a {
	display: block;
	color: #ffffff;
	padding: 20px;	
	border-bottom: 6px solid #954e67;
	text-decoration: none;
}

#nav>ul>li.rainbow1>a {	border-color: #e4b520; }
#nav>ul>li.rainbow2>a {	border-color: #ff0000; }
#nav>ul>li.rainbow3>a {	border-color: #694b49; }
#nav>ul>li.rainbow4>a {	border-color: #0046ff; }
#nav>ul>li.rainbow5>a {	border-color: #91b557; }

#nav>ul>li:hover>a {
/*	background-color: #ffffff; */
	background-color: #ffffff;
/*	background: #00a9fb url(./../../styles/optimal/img/active.png) repeat-x; */
/*	border-bottom: 6px solid #ffffff; */
	border-bottom: 6px solid #ffffff; 
	border-radius: 50% 50% 0 0;
	color: #954e67;
}

#nav>ul>li:focus-within>a {
/*	background-color: #ffffff; */
	background-color: #ffffff;
/*	background: #00a9fb url(./../../styles/optimal/img/active.png) repeat-x; */
/*	border-bottom: 6px solid #ffffff; */
	border-bottom: 6px solid #ffffff;  
	border-radius: 50% 50% 0 0;
	color: #954e67;
}

#nav>ul>li.rainbow1:hover>a {color: #e4b520;}
#nav>ul>li.rainbow2:hover>a {color: #ff0000;}
#nav>ul>li.rainbow3:hover>a {color: #694b49;}
#nav>ul>li.rainbow4:hover>a {color: #0046ff;}
#nav>ul>li.rainbow5:hover>a {color: #91b557;}

#nav>ul>li>ul {
	position: absolute;
	left: 0px;
	top: 64px;
/*	width: 960px; */
	width: 100%;
/*	height: 220px; */
	height: 300px;
/*	background-color: #f9f9f9; */
	background-color: #ffffff;
	list-style: none;
	margin: 0;
	padding: 0;
	display: none;
	border-bottom: 6px solid #954e67;
    	border-bottom-left-radius: 50% 10%; border-bottom-right-radius: 50% 10%;
	z-index: 1000;
	box-shadow:0 2px 2px rgba(0,0,0,0.5);
}

#nav>ul>li.rainbow1>ul {border-color: #e4b520;}
#nav>ul>li.rainbow2>ul {border-color: #ff0000;}
#nav>ul>li.rainbow3>ul {border-color: #694b49;}
#nav>ul>li.rainbow4>ul {border-color: #0046ff;}
#nav>ul>li.rainbow5>ul {border-color: #91b557;}

#nav>ul>li:hover>ul {
	display: block;
}

#nav>ul>li:focus-within>ul {
	display: block;
}

#nav>ul>li>ul>li {
	display: block;
	width: 230px;
/*	height: 44px; */
	height: 46px;
}

#nav>ul>li>ul>li>a {
	line-height: 18px;
	padding: 13px 20px;
	display: block;
	color: #444444;
	text-decoration: none;
}



#nav>ul>li>ul>li.hover>a {
	color: #ffffff;
	background-color: #954e67;
}

#nav>ul>li.rainbow1>ul>li.hover>a {background-color: #e4b520;}
#nav>ul>li.rainbow2>ul>li.hover>a {background-color: #ff0000;}
#nav>ul>li.rainbow3>ul>li.hover>a {background-color: #694b49;}
#nav>ul>li.rainbow4>ul>li.hover>a {background-color: #0046ff;}
#nav>ul>li.rainbow5>ul>li.hover>a {background-color: #91b557;}

#nav>ul>li>ul>li:focus-within>a  {
	color: #ffffff;
	background-color: #954e67;
}

#nav>ul>li.rainbow1>ul>li:focus-within>a {background-color: #e4b520;}
#nav>ul>li.rainbow2>ul>li:focus-within>a {background-color: #ff0000;}
#nav>ul>li.rainbow3>ul>li:focus-within>a {background-color: #694b49;}
#nav>ul>li.rainbow4>ul>li:focus-within>a {background-color: #0046ff;}
#nav>ul>li.rainbow5>ul>li:focus-within>a {background-color: #91b557;}

#nav>ul>li>ul>li>ul {
	position: absolute;
	top: 0;
/*	left: 192px; */
	left: 230px;
	display: block;
/*	width: 748px; 
	width: 828px; */
	width: 75%; 
/*	height: 200px; */
	height: 240px;
	list-style: none;
	margin: 0;
	padding: 10px;
	display: none;
/*	background-color: #ffffff; */
	background-color: #ffffff;
	z-index: 1000;
}

#nav>ul>li>ul>li.hover>ul {
	display: block;
}

#nav>ul>li>ul>li:focus-within>ul {
	display: block;
}

#nav>ul>li>ul>li>ul>li {
	display: block;
	float: left;
	width: 167px; 
/*	width: 11%; */
/*	height: 180px; 
	height: 200px; */
	height: auto;
	padding: 10px;
}

#nav>ul>li>ul>li>ul>li>a>img {
	display: block;
/*	width: 167px; */
/*	height: 167px; */
	width: 100%;
	height: auto;
	border: 0;
	border-radius: 15px;
}

#nav>ul>li>ul>li>ul>li:hover {
	background-color: #954e67;
	border: 0;
	border-radius: 25px;
}

#nav>ul>li.rainbow1>ul>li>ul>li:hover { background-color: #e4b520; }
#nav>ul>li.rainbow2>ul>li>ul>li:hover { background-color: #ff0000; }
#nav>ul>li.rainbow3>ul>li>ul>li:hover { background-color: #694b49; }
#nav>ul>li.rainbow4>ul>li>ul>li:hover { background-color: #0046ff; }
#nav>ul>li.rainbow5>ul>li>ul>li:hover { background-color: #91b557; }

#nav>ul>li>ul>li>ul>li:focus-within {
	background-color: #954e67;
	border: 0;
	border-radius: 25px;
}

#nav>ul>li.rainbow1>ul>li>ul>li:focus-within { background-color: #e4b520; }
#nav>ul>li.rainbow2>ul>li>ul>li:focus-within { background-color: #ff0000; }
#nav>ul>li.rainbow3>ul>li>ul>li:focus-within { background-color: #694b49; }
#nav>ul>li.rainbow4>ul>li>ul>li:focus-within { background-color: #0046ff; }
#nav>ul>li.rainbow5>ul>li>ul>li:focus-within { background-color: #91b557; }

#nav>ul>li>ul>li>ul>li>span {
	display: block;
	color: #666666;
	padding: 2px 0;
	font: 80% "Georgia", "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
	text-align: center;
	line-height: 18px;
}

#nav>ul>li>ul>li>ul>li:hover>span {
	color: #ffffff;
	background-color: #00a9fb;
	border: 0;
	border-radius: 5px;
}

#nav>ul>li>ul>li>ul>li:focus-within>span {
	color: #ffffff;
	background-color: #00a9fb;
	border: 0;
	border-radius: 5px;
}


#nav>ul>li>ul>li>ul>div>li>a {
	display: block;
	color: #666666;
	padding: 2px 0;
	font: 90% "Georgia", "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
/*	text-align: center; */
	line-height: 18px;
}

#nav>ul>li>ul>li>ul>div>li:hover>a {
	color: #954e67;
/*	background-color: #000000; */
	border: 0;
	border-radius: 5px;
}

#nav>ul>li.rainbow1>ul>li>ul>div>li:hover>a { color: #e4b520; }
#nav>ul>li.rainbow2>ul>li>ul>div>li:hover>a { color: #ff0000; }
#nav>ul>li.rainbow3>ul>li>ul>div>li:hover>a { color: #694b49; }
#nav>ul>li.rainbow4>ul>li>ul>div>li:hover>a { color: #0046ff; }
#nav>ul>li.rainbow5>ul>li>ul>div>li:hover>a { color: #91b557; }

#nav>ul>li>ul>li>ul>li:focus-within>a {
	color: #ffffff;
	background-color: #954e67;
	border: 0;
	border-radius: 5px;
}

#nav>ul>li.rainbow1>ul>li>ul>li:focus-within>a { background-color: #e4b520; }
#nav>ul>li.rainbow2>ul>li>ul>li:focus-within>a { background-color: #ff0000; }
#nav>ul>li.rainbow3>ul>li>ul>li:focus-within>a { background-color: #694b49; }
#nav>ul>li.rainbow4>ul>li>ul>li:focus-within>a { background-color: #0046ff; }
#nav>ul>li.rainbow5>ul>li>ul>li:focus-within>a { background-color: #91b557; }


.sqroptobowcontenttop {
    width: 100%;
    height: auto !important;
    padding-bottom: 2.5%;
    background: url(./../../styles/optimal/img/?f=bowbottom&ca=ffffff) no-repeat center top;
}

// Bildernavigation Ende
}


.sqroptobowcontenttop {
    width: 100%;
    height: 0;
    padding-bottom: 2.5%;
    background: url(./../../styles/optimal/img/?f=bowbottom&ca=ffffff) no-repeat center top;
}


.sqrmaincontainer {
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.sqrbreadcrumbs {
    margin: 0 30px 30px 30px;
    padding: 0;
    color: #6e6e6e;
    font-size: 13px;
    -webkit-text-size-adjust:none;
    text-align: center;
}

.sqrbreadcrumbs a {
    color: #7c9a4a;
    font-weight: normal;
    text-decoration: none;
}

.sqrbreadcrumbs a:hover {
    color: #b59057;
    font-weight: normal;
    text-decoration: none;
}


header {
    margin: 0 30px 30px 30px;
    padding: 0;
    position: relative;
}

header>img {
    width: 100%;
    height: auto;
}

.sqroptoheaderbow {
    width: 100%;
    height: 0;
    padding-bottom: 2.5%;
    background: url(./../../styles/optimal/img/?f=bowtop&ca=ffffff) no-repeat center top;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
}

@media (max-width: 1800px) {
    .sqroptobowtop>div, .sqroptobowcontenttop, .sqroptoheaderbow { background-size: 1800px 45px; }
}

@media (max-width: 1600px) {
    .sqroptobowtop>div, .sqroptobowcontenttop, .sqroptoheaderbow { background-size: 1600px 40px; }
}

@media (max-width: 1400px) {
    .sqroptobowtop>div, .sqroptobowcontenttop, .sqroptoheaderbow { background-size: 1400px 35px; }
}

@media (max-width: 1200px) {
    .sqroptobowtop>div, .sqroptobowcontenttop, .sqroptoheaderbow { background-size: 1200px 30px; }
}

@media (max-width: 1000px) {
    .sqroptobowtop>div, .sqroptobowcontenttop, .sqroptoheaderbow { background-size: 1000px 25px; }
}

@media (max-width: 800px) {
    .sqroptobowtop>div, .sqroptobowcontenttop, .sqroptoheaderbow { background-size: 800px 20px; }
}

@media (max-width: 600px) {
    .sqroptobowtop>div, .sqroptobowcontenttop, .sqroptoheaderbow { background-size: 600px 15px; }
}

@media (max-width: 400px) {
    .sqroptobowtop>div, .sqroptobowcontenttop, .sqroptoheaderbow { background-size: 400px 10px; }
}

@media (max-width: 320px) {
    .sqroptobowtop>div, .sqroptobowcontenttop, .sqroptoheaderbow { background-size: 320px 8px; }
}

@media (max-width: 240px) {
    .sqroptobowtop>div, .sqroptobowcontenttop, .sqroptoheaderbow { background-size: 240px 6px; }
}

@media (min-width: 2000px) {
    .sqroptobowtop>div, .sqroptobowcontenttop, .sqroptoheaderbow { background-size: 2400px 60px; }
}

@media (min-width: 2400px) {
    .sqroptobowtop>div, .sqroptobowcontenttop, .sqroptoheaderbow { background-size: 2600px 65px; }
}

body {
    background-color: #ffffff;
    margin: 0;
    padding: 0;
}

#maincontainer {
    background: url(./../../styles/optimal/img/?f=fade2&ca=ffffff&cb=ffffff) no-repeat center top;    background-color: #ffffffee;
/*  opacity: 0.5; */
    padding: 0.1px 0;
}





#sidebarleft,
#content,
#sidebarright {
    min-height: 1px;
    padding-top: 10px;
    padding-bottom: 20px;
}

#header {
    padding: 10px 0 20px 0;
}

#footer {
/*    padding: 10px 0 20px 0; */
    padding: 0 0 0 0;
}

@media (min-width: 1024px) {
    .sqrdesktophidden {
        display: none;
    }

    .sqrallwaysboxed,
    .sqrmobilefullwidth,
    .sqrdesktopboxed
    {
        box-sizing: border-box;
        padding-left: 30px;
        padding-right: 30px;
        margin-left: auto;
        margin-right: auto;
    }

    .sqrallwaysboxed .sqrallwaysboxed,
    .sqrdesktopboxed .sqrdesktopboxed,
    .sqrmobilefullwidth .sqrallwaysboxed,
    .sqrdesktopboxed .sqrallwaysboxed,
    .sqrdesktopboxed .sqrmobilefullwidth,
    .sqrdesktopremovebox .sqrallwaysboxed,
    .sqrdesktopremovebox .sqrmobilefullwidth
    {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }


    .sqrmain3collr,
    .sqrmain2coll,
    .sqrmain2colr {
        display: table;
        box-sizing: border-box;
        table-layout: fixed;
        width: 100%;
    }

    .sqrmain3collr>div {
        box-sizing: border-box;
        width: 75%;
        display: table-cell;
        vertical-align: top;
    }
    .sqrmain3collr>div:first-child {
        width: 75%;
        border-right: 1px solid #0046ff;
    }
    .sqrmain3collr>div:last-child {
        width: 25%;
        border-left: 1px solid #0046ff;
    }
    .sqrmain2coll>div {
        box-sizing: border-box;
        width: 75%;
        display: table-cell;
        vertical-align: top;
    }
    .sqrmain2coll>div:first-child {
        width: 75%;
        border-right: 1px solid #0046ff;
    }
    .sqrmain2colr>div {
        box-sizing: border-box;
        width: 75%;
        display: table-cell;
        vertical-align: top;
    }
    .sqrmain2colr>div:last-child {
        width: 25%;
        border-left: 1px solid #0046ff;
    }

    .sqrallwaysfullwidth .sqrsuppressborders {
        border-left: 0 !important;
        border-right: 0 !important;
    }
}

@media (max-width: 1023px) {
    .sqrpanoramicbackground  {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;;
    }

    .sqrallwaysboxed,
    .sqrmobileboxed
    {
        box-sizing: border-box;
        padding-left: 30px; /* 30px*/
        padding-right: 30px; /* 30px*/
    }
    .sqrallwaysboxed>.sqrallwaysboxed,
    .sqrallwaysboxed>.nguiparagraphcontainer>.sqrallwaysboxed
    {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }
    .sqrmobileboxedimportant {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
    .sqrmobilehidden {
        display: none;
    }

    .sqrallwaysfullwidth .sqrsuppressborders,
    .sqrmobilefullwidth .sqrsuppressborders
    {
        border-left: 0 !important;
        border-right: 0 !important;
    }

    #sidebarleft {
        border-bottom: 1px solid #0046ff;
    }

    #sidebarright {
        border-top: 1px solid #0046ff;
    }
}

#sqrheader {
	position: relative;
	padding: 0;
}
#sqrheader #headercontainer img, #sqrheader #headercontainer video {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
	position: absolute;
}
#sqrheader #headercontainer img.headersliderpri {
	z-index: 1;
	transition: none;
	-webkit-transition: none;
	opacity: 1;
}
#sqrheader #headercontainer img.headerslidersec {
	z-index: 2;
	transition: none;
	opacity: 0;
}
#sqrheader #headercontainer img.headerslidersecout {
	transition: opacity 1s linear, transform 1s;
	opacity: 1;
}

#headercontainer {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
    position: relative;
}

#headersliderbullets {
	box-sizing: border-box;
	bottom: 0;
	right: 0;
	text-align:center;
	padding: 10px 0;
}

#headersliderbullets a {
	width: 20px;
	height: 20px;
	background: url(./../../styles/optimal/img/?f=navdefault&ca=4bc4ff&cb=00a9fb) no-repeat left top;
	display: inline-block;
}
#headersliderbullets a.active {
	background-position: left bottom;
}

footer {
 background-color: #000000aa;/*    max-width: 1920px; */
/*    max-width: 1980px; */
    color: #ffffff;
    margin: 0 auto;
    padding: 15px 0;
    position: relative;
    box-sizing: border-box;
    font-size: 20px;
    -webkit-text-size-adjust:none;
}

footer>div>div {
    padding: 15px 30px;
    box-sizing: border-box;
}


footer form {
    box-sizing: border-box;
    background-color: #ffffff;
    width: 100%;
    border: 0;
    padding: 0;
    margin: 0 0 20px 0;
    outline: none;
    border-radius: 0;
    -webkit-appearance: none;
}

footer form input[type=text] {
    border: none;
    font: 15px 'Noto Sans',Tahoma,Helvetica,sans-serif;
    width: 75%;
    float: left;
    box-sizing: border-box;
    padding: 10px;
    color: #ffffff;
    line-height: 20px;
    height: 40px;
}

footer form input[type=submit] {
    border: none;
    font: 15px 'Noto Sans',Tahoma,Helvetica,sans-serif;
    width: 25%;
    float: left;
    box-sizing: border-box;
    padding: 10px;
    cursor: pointer;
    outline: none;
    border-radius: 0;
    -webkit-appearance: none;
    background-color: #00a9fb;
    color: #ffffff;
    height: 40px;
}


footer form input:focus-visible {
    outline: revert;
}
#navtoggle form input:focus-visible {
    outline: revert;
}

footer form input[type=submit]:hover {
    background-color: #fcdc74;
}


footer form:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}


.sqrcommonnavhierarchical a,
.sqrcommonnav a,
.sqrcommon>div a {
  	text-decoration: none;
  	color: #00a9fb;
  	transition: color 0.3s;
  	text-decoration: none;
  	font-weight: normal;
}

.sqrcommonnavhierarchical a:hover,
.sqrcommonnav a:hover,
.sqrcommon>div a:hover {
  	color: #fcdc74;
}

.sqrcommonnavhierarchical
{
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sqrcommonnav
{
	display: block;
	list-style: none;
	margin: 0;
	padding: 15px 30px;
	text-align: center;
}

.sqrcommonnav>li
{
	display: inline-block;
	padding: 5px;
}

.sqrcommonnavhierarchical>li
 {
	display: block;
	box-sizing: border-box;
	list-style: none;
	padding: 0 0 5px 0;
}
.sqrcommonnavhierarchical>li>em {
	font-style: normal;
	font-weight: bold;
	display: block;
	padding-bottom: 4px;
}
.sqrcommonnavhierarchical>li>ul {
	display: block;
	margin: 0;
	padding: 5px 0 20px 0;
	list-style: none;
}
.sqrcommonnavhierarchical>li>ul>li {
	margin: 0;
	padding: 0 0 2px 0;
}
.sqrcommonnavhierarchical:after
{
  	visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}


@media (min-width: 1024px) {

	.sqrfooter2col>div {
        width: 50%;
        float: left;
        padding: 15px 30px;
        box-sizing: border-box;
    }

    .sqrfooter2col:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }

}

@media (min-width: 768px) {
    .sqrcommonnavhierarchical2col>li {
        width: 50%;
        float: left;
        padding-right: 20px;
    }

    .sqrcommonnavhierarchical2col > li:nth-child(2n+1) {
        clear: both;
    }

    .sqrcommonnavhierarchical2col:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }

}

#contact {
background-color: transparent !important;
    margin-top: 0px;
    width: 100%;
    position: relative;
    background-size: 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-image: url(./../../styles/optimal/img/?f=bowbottom&ca=7ebbd9); 
}

#contact>div {
    max-width: 1920px;
    padding: 0px 15px; /* 10x 15px */
    font-size: 20px;
    -webkit-text-size-adjust:none;
    color: #ffffff;
    box-sizing: border-box;
    margin: -1px auto;
}

#contact a, #contact span {
    text-decoration: none;
    -webkit-text-size-adjust:none;
/*    text-transform: uppercase; **/
    display: inline-block;
    margin: 5px 3px;
}

#contact a {
    color: #000000;
}

#contact svg {
    width: 1.2em;
    height: 1.2em;
    display: inline-block;
    vertical-align: -0.2em;
    margin-right: 0.1em;
    margin-left: 0.1em;
    border: 0;
    padding: 0;
}

#contact a:hover {
    color: #f1f1f1;
    text-decoration: none;
}

.mask1 {
  -webkit-mask-image: url(./../../styles/optimal/img/back.png);
  mask-image: url(./../../styles/optimal/img/back.png);
  -webkit-mask-size: 100%;
  mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}



#loadingloader {
    background-color: #ffffffdd;
    border-radius: 15px 5px;
    border: 3px solid green;
    box-shadow: 0px 0px 10px green;
    margin: 25% 45%;
    max-height: initial;
    max-width: initial;
    min-height: initial;
    min-width: initial;
    padding: 10px 10px 4px 10px;
    position: absolute;
    z-index: 3010;
}
 



#scrolltotop {
 position: fixed; 
 bottom: 94px; 
 right: 45px;
 cursor: pointer; 
 z-index: 3030;
img {
     transform: scale(1.0);
     transition: all 0.3s ease;
            }
}
     #scrolltotop:hover {
img {
     background: #666666;
     box-shadow: 0 6px 20px rgba(0,0,0,0.3);
     border-radius: 50% 0;
     transform: scale(1.3);
     transition: all 0.3s ease;
            }
}
@media (max-width: 768px) {
#scrolltotop {
 position: fixed; 
 bottom: 94px; 
 right: 30px;
}
}
 




#scrolltocontent {
 position: fixed; 
 bottom: 100px; 
 right: 45px;
 cursor: pointer; 
 z-index: 3030;
img {
     transform: scale(1.0);
     transition: all 0.3s ease;
            }
}
     #scrolltocontent:hover {
img {
     background: #666666;
     box-shadow: 0 6px 20px rgba(0,0,0,0.3);
     border-radius: 50% 0;
     transform: scale(1.3);
     transition: all 0.3s ease;
            }
}
@media (max-width: 768px) {
#scrolltocontent {
 position: fixed; 
 bottom: 94px; 
 right: 30px;
}
}






ul.sqrparanav {
   display: none;
}

@media (hover: hover) and (min-width: 767px) {
    ul.sqrparanav {
        list-style: none;
        margin: 0;
        padding: 0;
        position: fixed;
        display: flex;
        right: 0;
        top: 0;
        bottom: 0;
        flex-direction: column;
        justify-content: center;
        z-index: 1900;
    }

    ul.sqrparanav>li {
        display: block;
        margin: -2px 0;
        padding: 0 10px 0 0;
    }

    ul.sqrparanav>li>a {
        position: relative;
        background: #00a9fb url(./../../styles/optimal/img/?f=paranavtri&ca=00a9fb) right center no-repeat;
/*        background: transparent url(../img/?f=&ca=) right center no-repeat;
        background: transparent url(./../../styles/optimal/img/?f=f1f1f1&cb=0080be right center no-repeat; */
        display: block;
        padding: 7px 0px 7px 18px;
        text-decoration: none;

        border-radius: 25px 0 25px 0;

        text-align: right;
        opacity: 0.3;
        font-size: 20px;
        line-height: 22px;
        outline: none;
        transition: opacity 0.5s;
    }

    ul.sqrparanav>li>a:hover
    {
        z-index: 1901;
    }

    ul.sqrparanav>li>a:hover,
    ul.sqrparanav>li>a.sqractive {
        opacity: 1;
    }

    ul.sqrparanav>li>a>span {
        display: none;
        vertical-align: middle;
    }

    ul.sqrparanav>li>a>div {
        display: inline-block;
        width: 18px;
    }

    ul.sqrparanav>li>a:hover,
    ul.sqrparanav>li>a:focus-visible
    {
        background: #fadc00;
        color: #000000;
/*        background: #00a9fb;
        color: #ffffff; */
    }

    @keyframes sqrparanavslide {
        from {
            transform: translateX(10px);
        }
        to  {
            transform: translateX(0);
        }
    }

    @keyframes sqrparanavfade {
        from {
            opacity: 0;
        }
        to  {
            opacity: 1;
        }
    }

    ul.sqrparanav>li>a:hover>span,
    ul.sqrparanav>li>a:focus-visible>span {
        display: inline-block;
        animation: 0.3s cubic-bezier(.82,.01,.71,.99) forwards sqrparanavslide;
    }

    ul.sqrparanav>li>a:hover,
    ul.sqrparanav>li>a:focus-visible
    {
        animation: 0.3s cubic-bezier(.82,.01,.71,.99) forwards sqrparanavfade;
    }

}