@font-face {
  font-family: BatonTurboWeb;
  src: url(fonts/BatonTurboWeb-Regular.woff);
}


@font-face {
  font-family: BatonTurboWeb-Bold;
  src: url(fonts/BatonTurboWeb-Bold.woff);
  font-weight: bold;
  }

/*

@font-face {
  font-family: Roboto;
  src: url(./curaPlugins/webannoations/styles/fonts/Roboto-Italic.woff);
  font-weight: italic;

*/

/* Visibility of scrollbars:*/
::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(0,0,0,.5);
  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}


 

body {
    background-color:white !important;
    font-size:0.8rem !important;
	line-height:1.5 !important;
	font-family:"BatonTurboWeb", Helvetica, Arial, sans-serif;
}
h1
 {
     font-family:"BatonTurboWeb", Helvetica, Arial, sans-serif;
    font-weight:bold;
    font-size:1.5rem !important; /* entspricht h6, wie alle anderen Überschriften */
	line-height:1.3 !important;
	color:black !important;
 } 

/* language button style override: */

#button-language-select {
	padding:0.15rem 0.5rem;
	border:1px solid #fff;
   background-color:white !important;
   font-size:1rem !important;
   color: black !important;
   font-weight: 700px;
   outline:none !important;
   box-shadow:none !important;
   z-index:8888 !important;
	}
	

#dropdown-menu,
#dropdown-menu  a:link,
#dropdown-menu a:visited
  {
	border:0;
   background-color:#343a40 !important;
   font-size:1rem !important;
   color: rgba(0,0,0,.5)!important;
}

#button-language-select a:active,
#button-language-select a:hover,
#button-language-select a:focus {
	background-color: #fff0 !important;
	box-shadow:none !important;
	transition:none !important;
	}

.dropdown-menu.show a:active,
.dropdown-menu.show a:hover {
	background-color:#fff0 !important;
 	font-size:1rem !important;
 	color: #fff !important;
}

.dropdown-menu.show {
	background-color:#fff0 !important;
	border:0;
	min-width:7rem !important;
	}	
	
.dropdown-menu a:link {
	color: rgba(0, 0, 0, 0.5) !important;
	background-color:#fff0 !important;
	}
.dropdown-menu a:visited, 
.dropdown-menu a:hover {
	color:#fff !important;
	background-color:#fff0 !important;
	}	

#card {    
			z-index:9100;
			top:0.5rem;
            color:black !important;
}

.card a:link,
.card a:visited {
  font-size:1rem !important;
   color: rgba(0,0,0,1)!important;
  letter-spacing:0.05em;
  

}

.card a:active,
.card a:hover{
  font-size:1rem !important;
  color: #ff3c00!important;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 5px;
}
 


#close-button {
	font-size:2.0rem !important;
	line-height:0.8;
	color:black;
    background-color:white;
    border:0; display:block !important;
    margin-top: -0.3rem;
    margin-left:95%;
    height: 0.3rem;
    width: 0.3rem;
	z-index:9000 !important;
    text-align: center;
}

/* 
#close-button {
    background-color:#343a40; 
    border:0; display:block !important; 
    margin-top: -1.5rem; 
    margin-left:90%;
    height: 1.6rem;
    width: 1.6rem;
}
*/
#button_language {
    display:none;
	/*background-color: #343a40; 
    border:0; display:block !important; 
    margin-top: -1.5rem; 
    margin-left:80%;
    height: 1.5rem;
    width: 1.5rem; */
}

#button-language-select {
    visibility:visible;
}

#annotationMarker{
	color:  #111111;
}



#input-artist
 {
     font-family:"BatonTurboWeb-Bold", Helvetica, Arial, sans-serif;
    font-weight:bold;
    font-size:1.5rem !important; /* entspricht h6, wie alle anderen Überschriften */
	line-height:1.3 !important;
	color:black !important;
    text-align:center !important;
 }  
 #input-year,
#input-title
{
     font-family:"BatonTurboWeb", Helvetica, Arial, sans-serif;
    
    font-size:1.5rem !important; /* entspricht h6, wie alle anderen Überschriften */
	line-height:1.3 !important;
	color:black !important;
    margin-bottom: 0.5rem;
    text-align:center !important;
   
 }  
 #input-comment a:link, #input-copyright a:link, #input-prov a:link
 #input-detaila a:link,
#input-detailb a:link,
#input-detailc a:link,
#input-detaild a:link,
#input-detaile a:link,
#input-detailf a:link,
#input-detailg a:link,
#input-detailh a:link {
	font-size:0.8rem !important;
    font-family:"BatonTurboWeb", Helvetica, Arial, sans-serif;
    color:black !important;
    text-align:center !important;
 }


#input-measures,
#input-technique,
#input-copyright {
    display:inline !important; /* um Jahr, Maße, Technik, Copyright auf einer Zeile zu haben */
    color:black;
    font-family:"BatonTurboWeb", Helvetica, Arial, sans-serif;
    font-size:1rem;
    text-align:center !important;
    
 }   

 /* SKD-Anpassung Titel Jahr floated */
#title-container {
    display: flex;
    align-items: baseline;
    width: 100%;
    justify-content: center;
}

.mb-2, .my-2 {
    text-align: center;
}
.mb-2, .my-2:hover {
    ba;
}

.carousel-item img {
    max-height:35vh; /* Bildhöhe im Carousel limitieren, Standard für kleine Displays */
 }   


/* Text-Inhalt von Akkordeon(Information) in Höhe limitieren um zu vermeiden, dass das Fenster größer als Bildschirmhöhe wird. Der Standard bei Bootstrap ist hier das kleinste Display, für alle anderen Displays siehe media-queries weiter unten:  */
#input-comment,
#input-prov, #input-copyright,
#input-detaila,
#input-detailb,
#input-detailc,
#input-detaild,
#input-detaile,
#input-detailf,
#input-detailg,
#input-detailh {
    max-height:33vh;
    overflow-y: scroll !important;
    /*margin-bottom:1.5rem !important;*/
    color:black !important;
    font-size:1rem;
    line-height:1.75rem;
    
}



/* scroll bars für Text-Inhalt von Akkordeon permanent sichtbar machen (funktioniert leider nicht in FF):  
.card-body::-webkit-scrollbar {
    -webkit-appearance: none !important;
}

.card-body::-webkit-scrollbar:vertical {
    width: 11px !important;
}

.card-body::-webkit-scrollbar:horizontal {
    height: 11px !important;
}

.card-body::-webkit-scrollbar-thumb {
    border-radius: 8px !important;         
    border: 2px solid #343a40 !important;  *//* should match background, can't be transparent */
 /*   background-color: rgba(255, 255, 255, .5) !important; 
} */



/* pagination für carousel, auf kleinen Displays deaktiviert (Rest siehe media-queries):  */
.pagination {
    display:none;
    text-align:center;
}
/* prev / next für carousel, auf großen Displays deaktiviert (Rest siehe media-queries):  */
.carousel-control-prev,
.carousel-control-next {
	top: 45%;
    display:block;
}

.filler {
    width: 100%;
    opacity: 0;
    grid-column: 1;
    grid-row: 1;
}

.zoom-container {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    grid-column: 1;
    grid-row: 1;
}

.zoomImg {
    background-color:#343a40;
}
 
.full-res {
    height: auto;
    width: auto; /*58vh; Bildhöhe im Carousel limitieren, Standard für kleine Displays ganz oben */
    opacity: 0;
    transition: opacity ease-in;
    margin-left: auto;
    margin-right: auto;
    max-height: 100%;
    max-width: 100%;
}

.img-container {
    display: grid !important;
    max-height: 58vh;
    width: 100%;
    height: auto;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}


.pagination a{
    font-size: 1.5rem !important; /* falls über Unicode-Symbole gelöst  */
}


.button-language-select {
    display:none !important; 
}

#collapseTwo {
	max-height:58vh;
	/*margin-left:0.4rem !important;*/
	margin-right:0.3rem !important;
	margin-top:-1rem;
	margin-bottom:.5rem !important;
	}
	


/* Ausgleich für abgeschnittene Videos, hier Standard für unter 500px Breite:*/
.embed-responsive {
	min-height:48vh;
	}
/* breakpoints:  */

/* Extra small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 500px) { 

/* Ausgleich fuer abgeschnittene Videos:*/
.embed-responsive {
	min-height:44vh;
	}

#card {     width:50%;
			margin-left: 1rem !important;
            margin-right: auto!important;
			z-index:9100;
        }  
body {
    background-color:grey !important;
     } 
#input-comment,
#input-prov, #input-copyright,
#input-detaila,
#input-detailb,
#input-detailc,
#input-detaild,
#input-detaile,
#input-detailf,
#input-detailg,
#input-detailh {
    max-height:42vh; /* standard für kleine displays siehe oben */
    overflow-y: scroll !important;
}	

#button_language {
    display:none !important; 
}

#button-language-select {
    visibility:visible !important;
}
.carousel-item img {
    max-height:50vh; /* Bildhöhe im Carousel limitieren, Standard für kleine Displays ganz oben */
 }    

/* pagination für carousel, auf kleinen Displays deaktiviert:  */
.pagination {
    display:none !important;
    text-align:center !important;
    position: relative;
}
.carousel-control-prev,
.carousel-control-next {
    display:block !important;
}	

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 

/* Ausgleich fuer abgeschnittene Videos:*/
.embed-responsive {
	min-height:44vh;
	}

#card {    margin-left: 1rem !important;
           margin-right: auto!important;
           width:50% !important;
			max-width:50%;
        } 
	
body {
    background-color:grey !important;
     }  
#line_top 	{
    display:block !important; /* Linie unter Titel, auf kleinen Displays display:none */
    
     }
.card-body {
    margin-bottom:0 !important; /* margin-bottom entfernen wenn Linie sichtbar */
}	 
	   	 
#input-comment,
#input-prov, #input-copyright,
#input-detaila,
#input-detailb,
#input-detailc,
#input-detaild,
#input-detaile,
#input-detailf,
#input-detailg,
#input-detailh {
    max-height:35vh; /* standard für kleine displays siehe oben */
	overflow-y: scroll !important;
	/*margin-bottom:1.5rem !important;*/
}	

#headingPhoto,
#headingVideo,
#headingAudio,
#headingOne,
#headingTwo {
    margin-bottom:0.5rem !important; /* mehr platz unter Akkordeon-selectoren für größere displays*/
}	

#button_language {
    display:none !important; 
}

#button-language-select {
    visibility:visible !important;
}

.carousel-item img {
    max-height:50vh; /* Bildhöhe im Carousel limitieren, Standard für kleine Displays ganz oben */
 }    
	
/* pagination für carousel, auf kleinen Displays deaktiviert:  */
.pagination {
    display:none !important;
    text-align:center !important;
}	
.carousel-control-prev,
.carousel-control-next {
    display:block !important;
}

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
    /* Ausgleich fuer abgeschnittene Videos, hier Standard fuer unter 500px Breite:*/
.embed-responsive {
	min-height:44vh;
	}


#card {    margin-left: 1rem !important;
            margin-right: auto!important;
            width:50% !important;
        } 
body {
    background-color:grey !important;
     }  

#line_top 	{
    display:block !important; /* Linie unter Titel, auf kleinen Displays display:none */
     }  
.card-body {
    margin-bottom:0 !important; /* margin-bottom entfernen wenn Linie sichtbar */
}	 
	 
#input-comment,
#input-prov, 
#input-copyright,
#input-detaila,
#input-detailb,
#input-detailc,
#input-detaild,
#input-detaile,
#input-detailf,
#input-detailg,
#input-detailh {
    max-height:35vh; /* standard für kleine displays siehe oben */
	overflow-y: scroll !important;
	/*margin-bottom:1.5rem !important;*/
}	
    
    
.ml-n2 collapse show {
  background-color:yellow;
}

#headingPhoto,
#headingVideo,
#headingAudio,
#headingOne,
#headingTwo {
    margin-bottom:0.5rem !important; /* mehr platz unter Akkordeon-selectoren für größere displays*/
}	

#button_language {
    display:none !important; 
}

#button-language-select {
    visibility:visible !important;
}
.carousel-item img {
    max-height:35vh; /* Bildhöhe im Carousel limitieren, Standard für kleine Displays ganz oben */
 }    

/* pagination für carousel, auf kleinen Displays deaktiviert:  */
.pagination {
    display:block !important;
    text-align:center !important;
}
.carousel-control-prev,
.carousel-control-next {
    display:none !important;
}

}	

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 

/* Ausgleich fuer abgeschnittene Videos, hier Standard fuer unter 500px Breite:*/
.embed-responsive {
	min-height:35vh;
	}


#card {    margin-left: 1rem !important;
            margin-right: auto!important;
			width:33% !important;
            cursor: default;
        } 
body {
    background-color:grey !important;
     }  
#line_top 	{
    display:block !important; /* Linie unter Titel, auf kleinen Displays display:none */
    border-color: black !important;
    
     }  
.card-body {
    margin-bottom:0 !important; /* margin-bottom entfernen wenn Linie sichtbar */
}	 	 
	 
#input-comment,
#input-prov, #input-copyright,
#input-detaila,
#input-detailb,
#input-detailc,
#input-detaild,
#input-detaile,
#input-detailf,
#input-detailg,
#input-detailh {
    max-height:45vh; /* standard für kleine displays siehe oben */
    overflow-y: scroll !important;
	/*margin-bottom:1.5rem !important;*/
}	 

#headingPhoto,
#headingVideo,
#headingAudio,
#headingOne,
#headingTwo {
    margin-bottom:0.5rem !important; /* mehr platz unter Akkordeon-selectoren für größere displays*/
}	

#button_language {
    display:none !important; 
}

#button-language-select {
    visibility:visible !important;
}
 	
/* pagination für carousel, auf kleinen Displays deaktiviert:  */
.pagination {
    display:block !important;
    text-align:center !important;
}	
.carousel-control-prev,
.carousel-control-next {
    display:none !important;
}	 


a.btn.btn-dark.lmcspecial {
background-color:#b4282c;
margin-bottom:5px;
color:white;
text-align:center;
width:300px;
}


a.btn.btn-dark.lmcspecial:active {
background-color:white;
color:#b4282c;
}

a.btn.btn-dark.lmcspecial:hover {
background-color:#b4282c;
color:white;
}


/**iframe edit start*/
iframe {
    width: 100%;
    min-height: 300px;
}
/** end */
}
/**Language_Select nach links bei Landscape Ansicht*/

/*
@media screen (orientation: landscape) {
  .user .language {
    z-index: 1;
    position: absolute;
    left: 1rem;
    top: 1rem;
} */

.resp-sharing-button__link, .resp-sharing-button__icon {
    /* display: inline-block !important; */
}

.resp-sharing-button__link {
    text-decoration: none;
    color: rgba(255, 255, 255, .5);
    /* margin: 0.3em */
}

.resp-sharing-button {
    border-radius: 5px;
    /* padding: 0.1em 0.1em; */
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif
}

.resp-sharing-button__icon svg {
    width: 2em;
    height: 2em;
    /* margin-left: 0.4em !important; */
    vertical-align: top
}

.resp-sharing-button--small svg {
    margin: 0;
    vertical-align: middle
}

.resp-sharing-button__icon {
    stroke: rgba(255, 255, 255, .5);
    fill: none
}

.resp-sharing-button__icon:hover {
    stroke: rgba(255, 255, 255, 1) !important;
    fill: none
}

.resp-sharing-button--transparent {
    background-color: transparent;
}

.social_media_list {
    background-color: transparent;
    border: 0;
    list-style-type: none;
    text-align: left;
    margin-left: 1em;
    margin-right: 0.5em;
    padding: 0;
}

.social_media_list li {
    display: inline-block;
    width: 18%;
    height: auto;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.icon-popup {
    background-color: rgba(51, 51, 51, 0);/*rgba(255, 255, 255, .5);*/
    z-index: 1;
    width: 100%;
    height: 100%;
    position: absolute;
    right: 3px;
    bottom: 0px;
    cursor: pointer;
    mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400"><path d="M288 304c0.0927734 0 0.244141 0.000976562 0.336914 0.000976562c61.6641 0 111.71 -50.0469 111.71 -111.711c0 -61.6631 -50.0459 -111.71 -111.71 -111.71s-111.71 50.0469 -111.71 111.71c0 8.71289 1.95898 22.5781 4.37305 30.9502 c6.93066 -3.94141 19.0273 -7.18457 27 -7.24023c30.9121 0 56 25.0879 56 56c-0.0556641 7.97266 -3.29883 20.0693 -7.24023 27c8.42383 2.62207 22.4189 4.8623 31.2402 5zM572.52 206.6c1.9209 -3.79883 3.47949 -10.3379 3.47949 -14.5947 s-1.55859 -10.7959 -3.47949 -14.5947c-54.1992 -105.771 -161.59 -177.41 -284.52 -177.41s-230.29 71.5898 -284.52 177.4c-1.9209 3.79883 -3.47949 10.3379 -3.47949 14.5947s1.55859 10.7959 3.47949 14.5947c54.1992 105.771 161.59 177.41 284.52 177.41 s230.29 -71.5898 284.52 -177.4zM288 48c98.6602 0 189.1 55 237.93 144c-48.8398 89 -139.27 144 -237.93 144s-189.09 -55 -237.93 -144c48.8398 -89 139.279 -144 237.93 -144z" /></svg>') no-repeat;
    -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400"><path d="M288 304c0.0927734 0 0.244141 0.000976562 0.336914 0.000976562c61.6641 0 111.71 -50.0469 111.71 -111.711c0 -61.6631 -50.0459 -111.71 -111.71 -111.71s-111.71 50.0469 -111.71 111.71c0 8.71289 1.95898 22.5781 4.37305 30.9502 c6.93066 -3.94141 19.0273 -7.18457 27 -7.24023c30.9121 0 56 25.0879 56 56c-0.0556641 7.97266 -3.29883 20.0693 -7.24023 27c8.42383 2.62207 22.4189 4.8623 31.2402 5zM572.52 206.6c1.9209 -3.79883 3.47949 -10.3379 3.47949 -14.5947 s-1.55859 -10.7959 -3.47949 -14.5947c-54.1992 -105.771 -161.59 -177.41 -284.52 -177.41s-230.29 71.5898 -284.52 177.4c-1.9209 3.79883 -3.47949 10.3379 -3.47949 14.5947s1.55859 10.7959 3.47949 14.5947c54.1992 105.771 161.59 177.41 284.52 177.41 s230.29 -71.5898 284.52 -177.4zM288 48c98.6602 0 189.1 55 237.93 144c-48.8398 89 -139.27 144 -237.93 144s-189.09 -55 -237.93 -144c48.8398 -89 139.279 -144 237.93 -144z" /></svg>');
    -webkit-mask-repeat: no-repeat;
}

.icon-popup:hover {
    background-color: #ff3c0000;/*rgba(255, 255, 255, 1);*/
}

.bg-dark {
    background-color:white !important;
}

@media only screen and (min-width: 1200px) {
    #imprint{ position:absolute !important; bottom:16px !important; }
}
    
@media only screen and (min-width: 992px) {
    #imprint{ position:absolute; bottom:16px !important; }
}
    
@media only screen and (max-width: 820px) {
    #imprint{ position:absolute; bottom:80px !important; }
}
    
@media only screen and (max-width: 500px) {
    #imprint{ position:absolute; bottom:80px !important; }
}

element.style {
}
@media (min-width: 1200px)
#card {
    margin-left: 1rem !important;
    margin-right: auto!important;
    width: 33% !important;
    color: black;
}
@media (min-width: 992px)
#card {
    margin-left: 1rem !important;
    margin-right: auto!important;
    width: 50% !important;
}
@media (min-width: 768px)
#card {
    margin-left: 1rem !important;
    margin-right: auto!important;
    width: 50% !important;
    max-width: 50%;
}
@media (min-width: 500px)
#card {
    width: 50%;
    margin-left: 1rem !important;
    margin-right: auto!important;
    z-index: 9100;
}
#card {
    z-index: 9100;
    top: 0.5rem;
}
.bg-dark {
    background-color: white !important;
}

.mx-2 {color: #ff3c00;}

#headerwrapper {text-align: center;}