/* ---------------------------------------------------------
   HTML5 Bones
   This stylesheet contains print styling and a section for 
   you to simply add your own. This is a basic template 
   after all.
   ---------------------------------------------------------*/

    /* Default link styling */
    a:link { color: black; }
    a:visited { color: black; }
    a:hover, a:focus { color: black; }
    a:active { color: black; }
    
    
    
/* ---------------------------------------------------------
   Author's styles
   ---------------------------------------------------------*/


::selection {
  background: transparent; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: transparent; /* Gecko Browsers */
}


form ::selection{
  background: #add6bb;
}
form ::-moz-selection{
  background: #add6bb;
}

#laden, #laden2{
  opacity: 0;
  transition: opacity 0.5s;
}

.clearing{
  width: 100%;
  height: 0px;
  background: transparent;
  clear: both;
}

*, h1, h2, h3, h4{
  margin: 0;
  padding: 0;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}


button, .button{
   background: transparent;
}




html{
  box-sizing: border-box;
}

body{
  font-family: "europa", sans-serif !important;
  letter-spacing: 0.010em;
  overflow-x: hidden;
}


.wrap{
  margin-top: calc(70px + 5.5vw);
}

main img{
  width: 100%;
  height: auto;
}

section{
  clear: both;
  padding: 1vw 4vw 1vw 4vw;
  padding-top: calc(70px + 5.5vw);
  overflow: hidden;
}

article{
  padding-bottom: 2vw;
}

.panel article{
  padding-bottom: 2vw;
  overflow: hidden;
}


h2, h3{
  font-family: "europa", sans-serif !important;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: calc(1vw + 10px);
	
}

h2{
  text-align: center;
}

h3{
  line-height: 0.8em;
}

p{
  font-size: 25px;
  font-weight: 400;
  hyphens: none;
  margin-bottom: 2vw;
  font-family: "europa", sans-serif !important;
}

p a{
  font-size: 25px;
  font-weight: 400;
}

main ul{
  margin-bottom: 2vw;
}

.nohyphens, .team p, #kontakt p{
  hyphens: none;
}

.p-s, .p-s a, label, input{
  font-size: 20px;
}

a, .p-xs, button, .response{
  font-size: 14px;
  font-weight: 600;
}


input{
  border: 0;
  outline: 0;
}

#mailadresse{
  border-bottom: 2px solid #add6bb;
  border-radius: 0;
  width: 44%;
}

#submit{
  color: #add6bb;
}

.sticky{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}



/* Header / Nav -------------------------------------- */


.headerheight{
  height: 80px;
  visibility: hidden;
}

.gohome{
  background: transparent;
  display: block;
  width: 347px;
  height: 47px;
  position: absolute;
  z-index: 11;  
}


header img{
  height: 79px;
  width: auto;
  max-width: 100%;
  margin:0;
  position: absolute;
}

#logo{
  background: red;
}

#logo img{
  margin-left: 157px;
  transition: margin-left 0.5s;
}

.logoeye{
    position: absolute;
    margin-top: -9px;
    width: 45px;
}




header{
  background: transparent;
  transition: background 0.5s;
  padding: 1vw;
  padding: 1vw 4vw 1vw 4vw;
  position: fixed;
  top: 0;
  width: 100%;
  width: calc(100% - 8vw);
  z-index: 99999999999;
  height: calc(70px + 3.5vw);
}


ul ul a:link { color:#a4d7de;/*blau-full*/ }
ul ul a:visited { color:#a4d7de;/*blau-full*/ }
ul ul a:hover, ul ul a:focus { color:#a4d7de;/*blau-full*/ }
ul ul a:active { color:#a4d7de;/*blau-full*/ }

li{
  list-style: none;
}

.mainnav{
  margin-left: -1vw;
  margin-top: 0;
}

nav a{
  display: block;
  padding: 0.5vw;
  line-height: 1em;
  transition: opacity 0.5s;
}

nav li{
  float: left;
  margin-right: 10px;
}

nav li:last-child{
  margin-right: 0;
}

nav li:nth-child(6){
  margin-right: 0;
}


ul ul li:nth-child(1){
  margin-left: 0;
}

ul ul{
  position: absolute;
  transition: opacity 0.5s, visibility 0.5s;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

li:hover ul{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}






/* Header ausblenden >0 von Top (Siehe main.js) ------------------- */

.headerinvisible{
  opacity: 0;
}

.eyeposition{
  margin-left: 0px !important;
}

.logotype{
  transition: opacity 0.5s;
  margin-left: -5px;
}

.logoinvisible{
  opacity: 0;
}







/* Header einblenden :hover -------------------------------------- */


header:hover{
  background: white;
}

header:hover a{
  opacity: 1;
  pointer-events: auto;
}

header:hover .logotype{
  opacity: 1;
}

header:hover .logoeye{
  margin-left: 157px !important;
}










/* Raster -------------------------------------- */


.grid-item, .brands a{
  float: left;
  display: block;
  margin: 1vw;
}

.col-1-2{
  width: calc(50% - 2vw);
}

.col-1-3{
  width: calc(33.333% - 2vw);
}

.col-1-4, .brands a{
  width: calc(25% - 2vw);
}

.col-2-3{
  width: calc(66.667% - 2vw);
}

.col-1-1{
  width: calc(100% - 2vw);
}







/* News-Nav -------------------------------------- */

.newsnav{
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 99999;

}

.newsnav ul{
  display: block;
  overflow: hidden;
  transform: rotate(-90deg) translate(calc(33px + 60%), calc(-50% - 0.9vw));
  transform-origin: 100% 50%;
}


.newsnav li{
  float: left;
}

.newsnav li:nth-child(2){
  margin: 0;
}

.newsnav li:first-child{
  padding-top: 4px;
}

.newsnav img{
  width: 24px;
  transform: rotate(90deg);
  transform-origin: 50% 50%;
  pointer-events: auto;
}

.newsnav a{
    pointer-events: auto;
}







/* News ------------------------------------------ */

#news{
  min-height: calc(100vh - 58px - 10vw);
  background: rgba(165, 216, 222, 0.2);
  z-index: 1;
}

.anchor{
  width: 0;
  height: 0;
  line-height: 0;
  z-index: -999;
}


#news h3{
  font-size: 39px;
  font-weight: 600;
  margin-bottom: 2vw;
  text-align: left;
  line-height: 1.2em;
}












/* Leitbild -------------------------------------- */


#leitbild{
  z-index: 2;
  background: white;
}




/* Leistungen2 -------------------------------------- */

#sehtest, #anpassungen, #service{
  background: rgba(173, 215, 187, 1);
  background: #EFF7F1;
}

#sichtbarerservice{
  background: white;
}




/* Angebot -------------------------------------- */

#brillen, #glaeser, #kontaktlinsenabo, #schiessbrillen{
  background: white;
}

#sportbrillen, #kontaktlinsen, #feldstecher, #trockene_augen{
  background: #F7F4F0;
}

#brillen{
  z-index: -8;
}

#sportbrillen{
  z-index: -7;
}

#glaeser{
  z-index: -6;
}

#kontaktlinsen{
  z-index: -5;
}

#kontaktlinsenabo{
  z-index: -4;
}

#feldstecher{
  z-index: -3;
}

#schiessbrillen{
  z-index: -2;
}

#trockene_augen{
  z-index: -1;
}

#brillen-acc, #glaeser-acc, #kontaktlinsenabo-acc,  #schiessbrillen-acc, .brillen-brands{
  padding-top: 1vw;
  background: white;
}

#sportbrillen-acc, #kontaktlinsen-acc, #feldstecher-acc, #trockene_augen-acc{
  padding-top: 1vw;
  background: #F7F4F0;
}


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








button.accordion {
  border: none;
  outline: none;
  padding: 0.5vw 0.5vw 0.5vw 0;
  margin-left: 1vw;
  margin-bottom: 2vw;
  line-height: 1em;
}


.panel {
  padding: 0 0px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s;
  clear: both;
}


.cross span {
  transform: rotate(0deg);
  transition: transform 0.5s;
  display: inline-block;
}

.cross span {
  transform-origin: center center;
}

.cross.open span {
  transform: rotate(45deg);
}


.brands a{
  background: #F7F4F0;
}

.brands a img{
  mix-blend-mode: multiply;
}



/* Amaretteria -------------------------------------- 







/* Kontakt -------------------------------------- */

main li span:nth-child(1){
  display: inline-block;
  width: 96px;
}




/* Team -------------------------------------- */


#team{
  padding-top: 0;
  background: white;
}

#team, .team-einzel{
  z-index: 3;
  position: -webkit-sticky;
  position: sticky;
}


#team .col-1-1{
  margin-top: 0;
}

#team p{
  font-size: 20px;
  font-weight: 600;
}

svg{
  width: calc(100% - 10vw);
  height: auto;
  position: absolute;
  left: 5vw;
  right: 5vw;
  pointer-events: none;

}

path{
  width: 100vw;
  opacity: 0;
  pointer-events: auto;
}




/* TEAM FOLLOWING CURSOR */
.brigitte-text, .stephan-text, .raffael-text {
  position: absolute;
  transform: translateX(-50%);
  text-align: center;
  margin: 3vw 0vw 0vw 0vw;
  z-index: 99999 !important;
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
  color: white;
  text-shadow: 0px 0px 60px rgba(0,0,0,0.5);
  }

    
.stephan:hover + .stephan-text {
  opacity: 1;
}

.brigitte:hover + .brigitte-text {
  opacity: 1;
}

.raffael:hover + .raffael-text {
  opacity: 1;
}



.team-einzel{
  background: white;
}

.floatreverse{
  float: right;
}




/*------------- Google Maps Responsive --------------*/


.google-maps iframe {
width: 100%;
height: 350px;
height: calc(100vh - 29px - 5vw - 7vw - 39px);
min-height: 300px;
line-height: 0;
}

.google-maps{
  line-height: 0;
}









/* Flickity -------------------------------------- */



.carousel {
  background: transparent;
}

.carousel-cell {
  width: 100%;
  height: auto;
  margin-right: 2vw;
}

.carousel-cell-image {
  display: block;
  margin: 0 auto;
  width: 100%;
  opacity: 0;
  -webkit-transition: opacity 0.4s;
          transition: opacity 0.4s;
}

/* fade in lazy loaded image */
.carousel-cell-image.flickity-lazyloaded,
.carousel-cell-image.flickity-lazyerror {
  opacity: 1;
}

.flickity-prev-next-button{
  z-index: 9999;
  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
}


#content .widget_meks_instagram{
	width: 100%;
	max-width: 1200px;
	margin: auto;
}

#content .meks-instagram-widget{
	width: 100%;
	display: flex;
}

#content .meks-instagram-widget div{
	max-width: calc(33.3333% - 10px);
}






/* ---------------------------------------------------------
   Responsive
   ---------------------------------------------------------*/


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



p, p a{
  font-size: 1.96vw;
}


h2, h3, .p-s, .p-s a, label, input{
  font-size: 1.55vw;
}

a, .p-xs, button, .response{
  font-size: 1.1vw;
}

#news h3{
  font-size: 3.3vw;
}

main li span:nth-child(1){
  display: inline-block;
  width: 7.5vw;
}



.newsnav li:nth-child(2){
  margin: 0;
}

.newsnav li:first-child{
  padding-top: 0.2vw;
}

.newsnav img{
  width: 1.7vw;
  transform: rotate(90deg);
  transform-origin: 50% 50%;
}



}







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

nav li{
  float: left;
  margin-right: 0.2vw;
}


#team .grid-item .grid-item, #team svg{
  display: none;
}




.newsnav ul{
transform: rotate(-90deg) translate(calc(33px + 60%), -50%);
}

.newsnav li{
  margin-right: 12px;
}

.newsnav li:nth-child(2){
  margin-right: 8px;
}

.newsnav li:first-child{
  padding-top: 3px;
}

.newsnav img{
  width: 22px;
  transform: rotate(90deg);
  transform-origin: 50% 50%;
}



}





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

p, p a{
  font-size: 17px;
}

h2, h3, .p-s, .p-s a, .p-xs, button, label, input, .response{
  font-size: 14px;
}

.p-xs, .response{
  font-weight: 400;
}

#news h3{
  font-size: 20px;
}


header, section{
  padding: 1vw 8vw 1vw 8vw;
  width: calc(100% - 16vw);
}

header{
  height: calc(105px + 5vw);
}

section{
  padding-top: calc(29px + 5vw);
}


.wrap{
  margin-top: calc(105px + 7vw);
}

.col-1-2, .col-1-3, .col-2-3{
  width: calc(100% - 2vw);
  clear: both;
}

.brands a{
  width: calc(50% - 2vw);
}



.mainnav{
  margin-left: 0vw;
}


nav ul{
  clear: both;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 100%;
  margin-top: 10px;
}

nav li{
  margin-left: 0px;
}



.eyeposition{
  margin-left: calc(82% - 45px) !important;
}


ul ul{
  display: none;
}




#team p{
  font-size: 14px;
}


main li span:nth-child(1){
  display: inline-block;
  width: 66px;
}


.google-maps iframe {
width: 100%;
height: 500px;
height: calc(70vw - 7vw);
}




.newsnav li{
  margin-right: 14px;
}

.newsnav li:nth-child(2){
  margin-right: 10px;
}

.newsnav li:first-child{
  padding-top: 3px;
}


}







@media screen and (min-width: 480px) and (max-width: 767px) {

.no_sticky_responsive{
  position: relative;
  top: auto;
}

}






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


h2, h3, a, .p-s, .p-s a, .p-xs, button, label, input, .response{
  font-size: 12.5px;
}


.mainnav-container{
  margin-top: 8px;
  margin-bottom: 8px;

}



.wrap{
  margin-top: calc(108px + 7vw);
}


header{
  height: calc(108px + 5vw);
}



#team .col-1-3{
  width: calc(67% - 12vw);
}


.raffael-text {
  transform: translateX(0);
  text-align: left;
}



.brigitte-text {
  transform: translateX(-100%);
  text-align: right;
}

.brigitte-text p, .stephan-text p, .raffael-text p {
  transform: translateY(-50%);
}

.logotype{
  width: 263px
}

    
.logoeye{
    width: 35px;
    margin-top: -7px;
}

.eyeposition{
  margin-left: calc(82% - 35px) !important;
}
        
    
    

#logo img{
  margin-left: 119px;
}

header:hover .logoeye{
  margin-left: 119px !important;
}

.newsnav li{
  margin-right: 17px;
}

.newsnav li:nth-child(2){
  margin-right: 14px;
}

.newsnav li:first-child{
  padding-top: 4px;
  padding-left: 26px;
}
    
nav ul{
  display: block;
  width: 100%;
}
    
.mainnav li{
  width: auto; 
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;    
}
    
    .mainnav{
        position: relative;
        top: -30px;
        left: -10px;
    }    

}





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


h2, h3, a, .p-s, .p-s a, .p-xs, button, label, input, .response{
  font-size: 11.3px;
}

}





@media (pointer:coarse) {

ul ul{
  display: none;
}

.gohome{
  display: none;
}

}

    
/* ---------------------------------------------------------
   Print styles
   ---------------------------------------------------------*/
@media print {
    * {
        color:#000 !important;
        box-shadow:none !important;
        text-shadow:none !important;
        background:transparent !important;
    }
    html { background-color:#fff; }
    /* Hide navigation */
    nav { display:none; }

    /* Show link destinations in brackets after the link text */
    a[href]:after { content: " (" attr(href) ") "; }
    a[href] {
        font-weight:bold;
        text-decoration:underline;
        color:#06c;
        border:none;
    }
    /* Don't show link destinations for JavaScript or internal links */ 
    a[href^="javascript:"]:after, a[href^="#"]:after { content:""; }
    
    /* Show abbr title value in brackets after the text */
    abbr[title]:after { content: " (" attr(title) ")"; }

    figure { 
        margin-bottom:1em; 
        overflow:hidden;
    }

    figure img { border:1px solid #000; }
}