/*

	Villa Barka 2020/21
	
	break points: 939
 
*/

body , html {
	min-height:100%;
	height:100%;
	width: 100%;
	margin:0px;
	padding:0px;
	background-color: #bfbfbf;
	font-family: 'Garamond', serif;
	font-weight: 400;
	line-height: 1.4;
	color: #4d4d4d;
	/*
	-webkit-text-size-adjust: 100%;
	*/
	-webkit-text-size-adjust: none;
	-ms-text-size-adjust: none;
	 text-size-adjust: none;
}

html {
	/*
	font-size:112%; 
	*/                                /* Schriftgröße Fontsize */
}

#console , #console2 {
  position:fixed;
  left:80px;
  top:120px;
  color:red;
  z-index: 2040;
  font-size:0.86rem;
  background-color:#FFFFFF;
}
#console2 {
  color: white;
  background-color:black;
  left:280px;
  display:none;
}
.debug #console2 {
  display:block;
}



#page { 
    position: relative;
    width: 100%;
    overflow:hidden;
    background-color:#FFFFFF;
    min-height:100%;
    border:0px solid red;
}

/* top area permanent */

#top_area {
	display:block;
	position:fixed;
	top:0px;
	left:0px;
	z-index:999;
	width: 100% !important;
	width: 100%;
}

#topnavi_area {
	position:relative;
	margin:0 auto;
	display:flex;
	align-items:center;
  justify-content:space-between;
	width: 100%;
	max-width:1170px;
  min-height:116px;
	padding: 0px;
	background-color: rgba(255,26,78,0);
}

.top-spacer-menu {
  width:100%;
  height:116px;
  display:none;
}

#topnavi {                                    /* L */
	display:flex;
	align-items:center;
  justify-content:space-between;
  width:calc(100% - 32px);
  margin-left:16px;
  background-color: rgba(29,236,78,0);
}

.topnavi a {
  text-decoration:none;
  text-transform:uppercase;
  color:#FFFFFF;
  padding-bottom:8px;
  padding-top:8px;
  border-bottom:2px solid transparent;
}
.topnavi a:hover, 
.topnavi a.nav-selected {
  border-color:#FFFFFF;
}
.topnavi a.btn-fb:hover {
  border-color:transparent;
}

.btn-fb {
  display:block;
  height:24px;
  width:20px;
  background-image: url(../images/fb-white.svg);
  background-position: 50%;  
  background-size: 100% auto;  
  background-repeat: no-repeat;
}
#topnavi_mobile {
  display:none;
}


.wrapper-layout-area {
  width:100;
  min-height:60px;
  background-color: rgba(255,25,45,0);
}

.wrapper-content-area {
  width: calc(100% - 20px);
  max-width:1140px;
  margin:0 auto;
  min-height:40px;
  border:0px dotted yellow;
}

.margin-v {
  border-top:60px solid transparent;
  border-bottom:60px solid transparent;
}
.margin-v-top {
  border-top:60px solid transparent;
}
.margin-v-bottom {
  border-bottom:60px solid transparent;
}

.header-startpage {
  background-repeat: no-repeat;
  min-height:calc(100vh);
  background-color:#039bcc;
}
.block-arrow-startpage {
  display:flex;
	align-items:flex-end;
  justify-content:center;
  height:calc(100vh);                     /* bestimmt die Höhe des Headers */
  background-color: rgba(255,25,45,0);
}
.area-blue-opaque {
  background-color: rgba(19,130,190,0.7);
}
.area-blue-opaque > .wrapper-content-area {
  border-top:60px solid transparent;
  border-bottom:76px solid transparent;
  /*
  border-color:red;
  */
  color:#FFFFFF;
  text-align:center;
}

.underline {
  height:2px;
  width:100px;
  overflow:hidden;
  margin:0 auto;
  margin-top:36px;
  margin-bottom:36px;
}

.tocontent {
  background-image: url(../images/btn-to-content.svg);
  background-position: 50% 50%;  
  background-size: 100% auto;  
  background-repeat: no-repeat;
  display:block;
  width:60px;
  height:60px;
  cursor:pointer;
}

/* ///////////////////////////////////////// GALERIE - Image Slider, Swap Images */
.rslides_nav, 
.btn-swapimage, 
.slick-arrow {                        /* prev, next */
  position:absolute !important;
  display:block;
  top:50%;
  bottom:unset;
  height:88px;
  width:46px;
  background-position: 50% 50%;  
  background-size: 100% auto;  
  background-repeat: no-repeat;
  z-index:888;
}
.btn-swapimage {
  top:calc(50% - 46px);
  display:none;
}
.wrapper-image-slider {
  background-color: rgba(255,25,45,0);
}
.gallery-slide {
  background-position: 50% 50%;  
  background-size: 100% auto;  
  background-repeat: no-repeat;
  width:100%;
  padding-top:74%;
}
.rslides_nav.prev, 
.btn-swapimage-next, 
.slick-prev {
	background-image: url(../images/Pfeil_Bild_weiss.svg) !important;
	left:12px;
}
.rslides_nav.next, 
.btn-swapimage-prev, 
.slick-next {
	background-image: url(../images/Pfeil_Bild_weiss.svg) !important;
	right:12px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.rslides_tabs a {
  background-color: rgba(255,255,255,0.6) !important;
}
.rslides_tabs .rslides_here a {
  background-color: rgba(255,255,255,1) !important;
}
.no-dots .rslides_tabs {
  display:none;
}
.no-arrows .rslides_nav {
  display:none;
}


.wrapper-icons-panel {
  position:relative;
  width:100%;
  height:calc(12vw);
  height:134px;
  margin-top: 12px;
  /*  OVERFLOW !!! */
  overflow:hidden;
  background-color: rgba(255,0,25,0);
}
.wrapper-icons-panel .slider {
  position:relative;
  width:calc(100% + 12px);
  margin-left: -11px;
}
.wrapper-icons-panel .slider div img {
  width:180px;
  margin-left: 12px;
  height:auto;
}
.slick-arrow {
	color: rgba(255,0,25,0);
	background-color: rgba(255,0,25,0);
	border: 0px none;
	top: 23px;
	cursor:pointer;
}
.slick-prev {
	left:23px;
}






/* 3 Spalten - Austattung */
.wrapper-columns-3 {
	margin-top:80px;
	display:flex;
	align-items:flex-start;
  justify-content:space-between;
}
.wrapper-columns-3 > div {
	background-color: rgba(255,0,25,0);
	width:30.4%;
}
.wrapper-columns-3 h2 {
	background-color: #1f4a82;
	color:#FFFFFF;
	padding-top:6px;
	padding-bottom:6px;
	text-transform:uppercase;
	text-align:center;
}
.wrapper-columns-3 h3 {
	color:#4084bd;
	text-transform:uppercase;
	margin-top:21px;
	margin-bottom:4px;
}
.wrapper-columns-3 ul {
	margin:0px;
	list-style-position: inside;
  padding: 0;
  list-style-image: url(../images/check.png);
}
.wrapper-columns-3 ul li {
	margin:0px;
}

.full-width .gallery-slide {
  padding-top:37.3%;
}

.image-set-lage,
.image-set-triptychon {
  position:relative;
  background-color: rgba(255,25,45,0);
  display: flex;
  flex-wrap:wrap;
  justify-content:space-between;
}
.image-triptychon {
  background-color: rgba(24,255,45,0);
  width:calc(33.3% - 20px);
  padding-top:25.4%;
  margin-bottom:30px;
  background-position: 50% 50%;  
  background-size: cover; 
}

.link-ext-blue {
  display:inline-block;
  text-decoration:none;
  border-bottom:1px solid #4084bd;
  margin-top:24px;
}
.link-ext-blue::after {
  content: ' »';
  font-size:120%;
}

/* Preise */
.price-line {
  display:flex;
  justify-content:space-between;
  width:100%;
  padding-top:3px;
  padding-bottom:3px;
}
.price-table {
  margin-top:46px;
}
.price-line:nth-child(odd) {
  background-color:#7ab5e5;
}
.price-line div:nth-child(1) {
  width:25%;
  margin-left:6%;
  text-align:left;
  background-color: rgba(24,12,145,0);
}
.price-line div:nth-child(2) {
  width:38%;
  text-align:center;
  background-color: rgba(24,123,0,0);
}
.price-line div:nth-child(3) {
  width:12%;
  margin-right:13%;
  text-align:center;
  white-space:nowrap;
  background-color: rgba(230,12,0,0);
}

.wrapper-contact {
  background-image: url(../images/bg-image-contact.jpg);
  background-size: cover;
  background-position: center 0px;
  background-repeat: no-repeat;
}

.wrapper-form {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  min-height:60px;
  margin-top:24px;
  background-color: rgba(230,12,0,0);
}

.wrapper-form .width50 {
  width: calc(50% - 15px);
  text-align:left;
  background-color: rgba(23,162,0,0);
}
.wrapper-form .width100 {
  width: 100%;
  text-align:left;
}

input, textarea {
  min-height:58px;
  width:calc(100% - 23px);
  border:1px solid rgba(255,255,255,0);
  padding:0px;
  padding-left:21px;
  display:flex;
  align-items:center;
  justify-content:center;
	font-family: 'Garamond', serif;
	font-weight: 400;
	color: #4d4d4d;
  line-height:1;
  background-color: rgba(255,255,255,0.7);
  margin:8px 0px 24px 0px;
}
textarea {
  min-height:340px;
  padding-top:21px;
  padding-bottom:21px;
  margin-bottom: 10px;
}

input.red, 
textarea.red {
  border-color:#D86154;
  border-color:red;
}

.form-notice {
  padding:10px 12px 10px 12px;
  width:100%;
  text-align:left;
  color:#1f4a82;
  background-color: rgba(255,255,255,0.7);
}
.button {
  display:inline-block;
  background-color:#1f4a82;
  text-decoration:none;
  text-transform:uppercase;
  padding:10px 108px 10px 108px;
  margin:0 auto;
  margin-top:54px;
  margin-bottom:60px;
}

.wrapper-footer-area {
  position:relative;
  min-height:460px;
  background-color: #1f4a81;
  border-top:1px solid transparent;
}

.wrapper-footer-content {
  display:flex;
  justify-content:space-between;
}

.bottom-block {
  width:280px;
  margin-top:70px;
  margin-bottom:52px;
  background-color: rgba(255,0,255,0);
}
.bottom-block a {
  text-decoration:none;
  color:#FFFFFF;
}

.wrapper-footer-panel {
  position:relative;
  height:54px;
  background-color: #4085be;
}

.wrapper-footer-content h3 {
  margin-bottom:16px;
}
.bottom-block-right {
  width:240px;
  margin-left:40px;
}
.bottom-block-center {
  display:flex;
  align-items:center;
  justify-content:center;
  width:calc(100% - 572px); /* 280 + 280 + 12 */
  background-color: rgba(45,145,255,0);
}
.bottom-block-right .footer-text-right {
  line-height: 1.6;
}

.logo-footer {
  display:block;
  width:71%;
  padding-top:18%;
  background-image: url(../images/Villa_Barka_Logo_weiß.svg);
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat; 
  background-color: rgba(45,145,255,0);
}
.footer-permanent-entries {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-align:center;
  width:calc(100% - 36px) !important;
  background-color: rgba(45,145,255,0);
}

.btn-to-top {
  position:absolute;
  bottom:20px;
  right: 25px;
  display:block;
  width:46px;
  height:46px;
  background-image: url(../images/button-up.jpg);
  background-repeat: no-repeat;
  background-size: 100% auto;
}


.mobile-break {
  display:none;
}


.btn-to-content {
  display:none;
}


@media screen and (max-width: 939px) {
  #topnavi_area {
    min-height:80px;
    background-color: #FFFFFF;
  }
  #topnavi {
    display:none;
  }
  .top-spacer-menu {
    display:block;
    height:80px;
  }
  .menu-toggle {
    display:block;
    position:relative;
    width: 44px;
    height:43px;
    margin-right:20px;
    background-color:#1f4a82;
  }
  .menu-toggle span {
    display: block;
    left:13px;
    position: absolute;
    height: 3px;
    width: 18px;
    background-color: #FFFFFF;
  }
  .menu-toggle span:nth-child(1) {
    top: 13px;
  }
  .menu-toggle span:nth-child(2) {
    top: 20px;
  }
  .menu-toggle span:nth-child(3) {
    top: 27px;
  }
  /* öffnen */
  .menu-toggle.toggle-extend span:nth-child(1) {
    top: 9px;
    animation-duration: 300ms;
    animation-name: extendToggle_1;
  } 
  .menu-toggle.toggle-extend span:nth-child(3) {
    top: 31px;
    animation-duration: 300ms;
    animation-name: extendToggle_3;
  } 
  @keyframes extendToggle_1 {
    0% {
      top:13px;
    }
    66% {
      top:13px;
    }
    100% {
      top:9px;
    }
  }
  @keyframes extendToggle_3 {
    0% {
      top:27px;
    }
    66% {
      top:27px;
    }
    100% {
      top:31px;
    }
  }
  /* schliessen */
  .menu-toggle.toggle-normal span:nth-child(1) {
    top: 13px;
    animation-duration: 600ms;
    animation-name: normalToggle_1;
  } 
  .menu-toggle.toggle-normal span:nth-child(3) {
    top: 27px;
    animation-duration: 600ms;
    animation-name: normalToggle_3;
  } 
  @keyframes normalToggle_1 {
    0% {
      top:9px;
    }
    84% {
      top:9px;
    }
    100% {
      top:13px;
    }
  }
  @keyframes normalToggle_3 {
    0% {
      top:31px;
    }
    84% {
      top:31px;
    }
    100% {
      top:27px;
    }
  }
  #topnavi_mobile {
    display:block;
    background-color:#FFFFFF;
    overflow:hidden;
  }
  .navigation-start {
    max-height:0px;
  }
  .navigation-closed {
    max-height:0px;
    animation-duration: 600ms;
    animation-name: closeTopNavi;
  }
  .navigation-open {
    max-height:600px;
    animation-duration: 1000ms;
    animation-name: openTopNavi;
  }
  #topnavi_mobile > div {
    background-color:#1f4a82;     /* blau */
    margin:4px 19px 0px 20px;
    border-bottom:24px solid #FFFFFF;
  }
  #topnavi_mobile > div > div {
    margin:0px 26px 20px 26px;
    border-top:24px solid transparent;
  }
  #topnavi_mobile > div > div a {
    display:block;
    text-decoration:none;
    text-transform:uppercase;
    color:#FFFFFF;
    margin-top:10px;
    margin-bottom:10px;
  }
  .btn-fb {
    background-image: url(../images/fb-blue.svg);
    margin-left:16px;
  }
  #topnavi_mobile .btn-fb {
    display:none;
  }
  .header-startpage {
    min-height:calc(100vh - 80px);
  }
  .block-arrow-startpage {
    height:calc(47vh);                     /* HEADER IMAGE - bestimmt die Höhe des Headers */
  }
  .tocontent {
    display:none; 
  }
  .area-blue-opaque .sailboat {
    height:66px;
    width: 66px;
    margin:0 auto;
    margin-top:-6px;
    background-image: url(../images/VillaBarka_Segel.svg);
    background-size: cover; 
  }
  .area-blue-opaque > .wrapper-content-area {
    width:100%;
    margin-left:0px;
    min-height:unset;
    border:0px none;
    background-color: rgba(255,25,45,0);
  }
  .area-blue-opaque > .wrapper-content-area > div:nth-child(1) {
    height:calc(53vh - 80px);
    min-height:240px;                         /* HEADER IMAGE - bestimmt die Höhe des Headers */
    background-color: rgba(25,253,45,0);
  }
  .area-blue-opaque > .wrapper-content-area > div:nth-child(2) {
    background-color: #0063ae;
    padding:42px 20px 42px 20px;
  }
  .wrapper-content-area {
    width:calc(100% - 36px);
  }
  .image-text-split {
    width:100%;
    margin-left:0px;
  }
  .area-blue-opaque > .wrapper-content-area h1 {
    border-top:24px solid transparent;
  }
  .wrapper-image-slider {
    width:100%;
    margin-left:unset;
  }
  .full-width .gallery-slide {
    background-position: 50% 50%;  
    background-size: auto 100%; 
    padding-top:72%;
  }
  .image-triptychon {
    width:calc(50% - 15px);
    padding-top:38.6%;
    margin-bottom:30px;
  }
  .link-ext-blue {
    max-width:75%;
    display:block;
    text-decoration:none;
    border-bottom:unset;
    margin:0 auto;
  }
  .wrapper-form .width50 {
    width: 100%;
  }
  input {
    min-height:46px;
    margin:8px 0px 12px 0px;
  }
  text-area {
    min-height:240px;
  }
  .button {
    padding-left:90px;
    padding-right:90px;
    margin-top:30px;
    margin-bottom:40px;
  }
  .googleMapCanvas {
    min-height:calc(100vw + 100px);
  }
  .wrapper-footer-content > .logo-footer {
    width:86% !important;
  }
}

@media screen and (max-width: 760px) {
  .wrapper-columns-3 {
    display:block;
  }
  .wrapper-columns-3 > div {
    width:calc(100% - 44px);
    margin:0 auto;
    border-bottom:40px solid white;
  }
  .wrapper-accordion h2 {
    cursor:pointer;
  }
  .accordion {
    max-height:0px;
    overflow:hidden;
  }
  .wrapper-columns-3 {
    margin-bottom:42px;
  }
  .image-set-lage {
    display:none !important;
  }
  .image-set-triptychon {
    position:relative;
    width:calc(100% + 36px);
    margin-left:-18px;
    height:calc(74vw - 8px);
  }
  .image-triptychon {
    position:absolute;
    top:0px;
    width:100%;
    padding-top:74%;
    opacity:0;
  }
  .image-shown {
    opacity:1;
    animation-duration: 400ms;
    animation-name: fadeImage_in;
  }
  .image-hidden {
    opacity:0;
    animation-duration: 400ms;
    animation-name: fadeImage_out;
  }

  @keyframes fadeImage_in {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  }
  @keyframes fadeImage_out {
    0% {
      opacity:1;
    }
    100% {
      opacity:0;
    }
  }
  .price-line div:nth-child(1) {
    width:25%;
    margin-left:10px;
  }
  .price-line div:nth-child(2) {
    width:calc(63% - 40px);
  }
  .price-line div:nth-child(3) {
    width:12%;
    margin-right:10px;
  }
  .wrapper-footer-content {
    flex-wrap:wrap;
  }
  .bottom-block {
    width:100%;
    margin-top:36px;
    margin-bottom:0px;
  }
  .wrapper-footer-content h3 {
    margin-bottom:12px;
  }
  .bottom-block-right {
    width:100%;
    margin-left:unset;
    margin-bottom:24px;
  }
  .bottom-block-center {
    display:none;
  }
  .wrapper-footer-content > .logo-footer {
    width:74%;
    margin:0 auto;
    margin-top:65px;
    padding-top:31%;
  }
  .desktop-only {
    display:none;
  }
  .btn-swapimage {
    display:block;
  }
  .wrapper-icons-panel {
    display:none;
  }

}
@media screen and (min-width: 761px) {
  .accordion {
    max-height:unset !important;
  }
  .wrapper-columns-3 {
    margin-bottom:80px;
  }
  .googleMapCanvas {
    min-height:580px;
  }
  .logo-footer {
    width:100%;
    padding-top:38%;
  }
  .wrapper-footer-content > .logo-footer {
    display:none;
  }
  .footer-permanent-entries {
    width:620px !important;
  }
  .hidden-midres {
    display:none;
  }
}

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

  /* .page-template-folgeseite .top-spacer-menu { */
  .top-spacer-menu {
    height:116px;
    display:block;
  }
  .page-template-startpage .top-spacer-menu {
    height:1px;
    margin-top:-1px
  }
  .menu-toggle {
    display:none;
  }
  .navi-opaque {
    background-color: rgba(31,74,129,0.6);
    animation-duration: 800ms;
    animation-name: naviOpaque_fadein;
  }
  .navi-transp {
    background-color: rgba(31,74,129,0);
    animation-duration: 400ms;
    animation-name: naviOpaque_fadeout;
  }
  @keyframes naviOpaque_fadein {
    0% {
      background-color: rgba(31,74,129,0);
    }
    100% {
      background-color: rgba(31,74,129,0.6);
    }
  }
  @keyframes naviOpaque_fadeout {
    0% {
      background-color: rgba(31,74,129,0.6);
    }
    100% {
      background-color: rgba(31,74,129,0);
    }
  }
  .navi-blue {
    background-color: #1f4a81;
  }
  #topnavi_area > .btn-fb {
    display:none;
  }
  .desktop-only {
    display:block;
  }
  .mobile-only {
    display:none;
  }
  .mobile-only-inline {
    display:none;
  }
  .only-mobile-1 {
    display:none !important;
  }
  
  .block-arrow-startpage .tocontent {
    margin-bottom:80px;
  }
  .area-blue-opaque .tocontent {
    display:none;
  }
  .wrapper-columns-3 {
    margin-bottom:80px;
  }
  .googleMapCanvas {
    min-height:580px;
  }
  .logo-footer {
    width:80%;
    padding-top:28%;
  }
  .hidden-midres {
    display:block;
  }

}

.header_P {
  background-position: 30% top;
  background-size: auto calc(100vh);
}
.header_L {
  background-position: 50% top;
  background-size: 112% auto;
}
.header_Q {
  background-position: 30% top;
  background-size: auto 120%;
}



/* //////////////////////// AUSRICHTUNG, SPACER, CLEAR //////////////////////////////////////////////// */
.clear {
  clear:both;
}
.spacer-v-1, 
.spacer-v-1_0 {
  width:100%;
  clear:both;
  font-size:1px;
  color:transparent;
  height:1.0rem;
}
.spacer-v-1_5 {
  width:100%;
  clear:both;
  font-size:1px;
  color:transparent;
  height:1.5rem;
}
.spacer-v-2_0 {
  width:100%;
  clear:both;
  font-size:1px;
  color:transparent;
  height:2.0rem;
}
.spacer-v-2_5 {
  width:100%;
  clear:both;
  font-size:1px;
  color:transparent;
  height:2.5rem;
}
.spacer-v-0_5 {
  width:100%;
  clear:both;
  font-size:1px;
  color:transparent;
  height:0.48rem;
}
.centered {
  margin: 0 auto;
}

.hidden, 
.invisible {
  display:none !important;
  display:none;
}

.ictn {
  display:none !important;
  display:none;
}
.center {
  text-align:center;
}

/* ///////////////// FONTS , Farben ///////////////////////////////////  */

h1 {
  font-weight:500;
  text-transform:uppercase;
}

h2 {
  font-weight:500;
  text-transform:uppercase;
}
.running-text h2 {
  color: #4084bd;
}

h3, .like-h3 {
  font-weight:500;
}
.running-text h3 {
  margin-top:40px;
  margin-bottom:0px;
  padding-bottom:0px;
  color: #4084bd;
  text-transform:uppercase;
}

.page-template-folgeseite .running-text h3 + p {
  margin-top:0px;
}
.page-template-blank .running-text h3 + p {
  margin-top:26px;
} 

.running-text a {
  color: #4084bd;
  text-decoration:none;
}

h4, .like-h4 {
  font-weight:500;
}

h1, h2, h3, h4, 
h1 > p, h2 > p, h3 > p, h4 > p {
  margin:0px;
  padding:0px;
}

.wrapper-content-area p:first-child {
  margin:0px;
  padding:0px;
}

.bottom-block > p, 
.footer-text-right > p {
  margin:0px;
  padding:0px;
}
.footer-text-right a {
  text-transform:uppercase;
} 

.no-margin-top {
  margin-top:0px !important;
}

b {
  font-weight:500;
  font-style:bolder;
}

.weight-400 {
  font-weight:400;
}
.weight-500 {
  font-weight:500;
}

.noline {
  text-decoration:none !important;
}

.nowrap {
  white-space:nowrap;
}
.wrapper-contact a {
  color:#FFFFFF;
  text-decoration:none !important;
}

.color-white {
  color: #FFFFFF;
}
.color-grey {
  color: #4d4d4d;
}
.color-blue {
  color: #4084bd;
}

.red {
  color:red;
}

.underline-white {
  background-color:#FFFFFF;
}
.underline-blue {
  background-color:#4084bd;
}
.background-blue-light {       /* light blue */
  background-color:#4084bd;
}

.background-blue {            /* dark blue */
  background-color:#1f4a82;
}


@keyframes openTopNavi {
  0% {
      max-height:0px;
  }
  100% {
      max-height:600px;
  }
}
@keyframes closeTopNavi {
  0% {
      max-height:600px;
  }
  100% {
      max-height:0px;
  }
}



/* ///////////////////////////////////////////// C O O K I E accept //////// */
#coockie_notice {
  position:fixed;
  bottom:0px;
  left:0px;
  width:100%;
  z-index:901;
  display:none;
}
.wrapper-cookie-text {
  margin:16px 0px 24px 0px;
  color:#FFFFFF;
  text-align:center;
}
.wrapper-cookie-button {
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
}
.cookie-button {
  padding:8px 32px 8px 32px;
  min-height:24px;
  display:flex;
  justify-content: center;
  align-items: center;
  text-align:center;
  text-decoration:none;
  color: #4d4d4d;
  background-color:#FFFFFF;
}
.cookie-button.confirm {
  padding:8px 10px 8px 10px;
  margin-right:16px;
}
@media screen and (max-width: 760px) {
  .cookie-button {
    padding:8px 24px 8px24px;
  }
}

/* ///////////////////////////////////////////// C O O K I E accept --- END //////// */

/* ///////////////////////////////////////////// C O M P O S E R //////////////////////////////////////////// */

.selectize-control {
  margin-bottom: 2.0rem !important;
  margin-bottom: 2.0rem;
}