/* ::root */
@import url("_root.css?v=1");

/* Globals */
* { box-sizing: border-box; }

body {
  min-height: 100vh;
  text-rendering: geometricPrecision;
  text-rendering: optimizeLegibility;
  background-color: var(--clr-body-bg);
  color: var(--clr-text);
  text-shadow: var(--clr-text-shadow);
  font-family: var(--default-font);
  font-style: var(--default-font-style);
  font-weight: var(--default-font-weight);
  overflow-x: hidden;
}

/* Text global tags */
h1, h2, h3, h4 {
  font-family: var(--second-font);
  font-family: var(--third-font);
  /**/
  font-style: var(--default-font-style-bold);
  font-weight: var(--default-font-weight-bold);
  
}
h2 { font-size: calc(1.2rem + .9vw); }
p, button, footer p, footer button.btn { font-size: calc(1.1rem + .3vw); }
footer p, footer button.btn {margin: 0 5px; }
li  { font-size: calc(.9rem + .3vw); }
button, .btn, a.btn, a.btn:hover, a.btn:visited, a.btn:active, a.btn:focus {
  outline: 0 none;
	border-radius:0;
	border: none; border: 0;
	box-shadow:none !important;	
}
/* 
https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/
https://codesandbox.io/s/clamp-linear-intepolation-based-on-viewport-width-builder-xgkft
https://die-netzialisten.de/responsive-schriftgroessen-mit-clamp/ 
*/
h1.big, h2.big, h3.big, h4.big, p.big {
  /*
  font-style: var(--default-font-style-bold);
  font-weight: var(--default-font-weight-bold);
  */
  line-height: 0.9em;
  font-size: clamp(2.5rem, 5vw, 4.0rem);
}
h1.red {background: red;} /* wg. JS viewport */

.copyright {
  position: fixed;
  left:0px;
  bottom: 8%;
  margin:0;
  padding: .6rem .2rem;  
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 9;  
  /* https://www.mediaevent.de/css/writing-mode.html */
  writing-mode: vertical-lr;
  writing-mode: sideways-lr;
  cursor: pointer; 
  transition: all .6s ease-in-out;
  font-size: calc(.6rem + .3vw);
  font-weight: normal;
  text-transform: lowercase;
  -webkit-box-shadow: var(--shadow-global); 
  box-shadow: var(--shadow-global);
  color: var(--clr-text);  
  background-color: var(--clr-corporate-b-rgba);
  background-color: rgba(255,255,255,.1) ;
}
.copyright:hover {
  padding:  .6rem .4rem .6rem 3.5rem; 
}

.outline {
  font-family: var(--default-font);
  font-style: var(--default-font-style-bold);
  font-weight: var(--default-font-weight-bold);  
  color: transparent;
  color: var(--outline-bg);
  -webkit-text-stroke: 1px var(--outline-border);
}

/* Text tags */
main h1, main h2, main h3, main h4, main p, main ul, pre {
  background: transparent; 
  width: 98%;
}
pre { 
  border-radius: 8px;
  margin: 4px;
  padding: 4px;
  background: rgba(255,255,255,.5);
  white-space: pre-line;
}

a {color: var(--clr-a); text-decoration: none;}
a:hover,a:active, button.btn:hover {color: var(--clr-a-hov);}
main a {color: var(--clr-a-main); text-decoration: underline;}
main a:hover, main a:active {color: var(--clr-a-main-hov); text-decoration: none;}

/* a.outline TEST */
a.outline {
  text-decoration: none;
  font-size: 1.9rem;
  font-family: var(--default-font); 
  font-style: var(--default-font-style-bold);
  font-weight: var(--default-font-weight-bold);  
  color: rgba(255,255,255,.1);  
  color: rgba(0,0,0,.1);
  color: transparent;
  color: var(--clr-a);
  -webkit-text-stroke: 0px var(--clr-a);
}
a.outline:hover, a.outline:active {
  color: transparent;
  -webkit-text-stroke: 1px var(--clr-a);

}


/* --- a :: ICON --- */
a.icon {
	display: inline-block;
	text-decoration: none !important;
	text-align: center;
	font-size: 85%;
	line-height: 1.4em;
	vertical-align:middle;
	margin-bottom: .2em;
	padding: 0em .4em .05em .3em;
	border-radius: 500px;
	color: var(--clr-a-icon)!important;
	background-color: var(--clr-a-icon-bg);
}
a.icon:hover { color: var(--clr-a-icon-hov)!important; }

a.icon::before, a.icon.end::after {  
  font-family: 'FontAwesome';
  font-size: 85%;
  margin-left: .2em;  
  margin-right: .4em;
  content: "\f0c1";
}
/* ::after */
a.icon::after {
  display: none;
}
a.icon.end {
  overflow: hidden;
  padding: 0em .3em .05em .4em;
}
a.icon.end::before {
  display: none;
}
a.icon.end::after {
  display: inline-block;
  font-size: 90%;
  margin: 0em .2em 0 .4em;
  padding: 0;
}

/* ICON ::before, ::after */
a.icon.info::before, a.icon.info::after { content: "\f129"; }
a.icon.info::before, a.icon.info::after { content: "\f05a"; }
a.icon.zoom::before, a.icon.zoom::after { content: "\f00e"; }
a.icon.full::before, a.icon.full::after { content: "\f0b2"; }
a.icon.desktop::before, a.icon.desktop::after { content: "\f108"; }
a.icon.person::before, a.icon.person::after { content: "\f2c0"; }
a.icon.group::before, a.icon.group::after { content: "\f0c0"; }
a.icon.extern::before, a.icon.extern::after { content: "\f08e"; }
a.icon.mail::before, a.icon.mail::after  { content: "\f003"; }
a.icon.google::before, a.icon.google::after { content: "\f1a0"; }
a.icon.map::before, a.icon.map::after  { content: "\f041"; }
a.icon.fb::before, a.icon.fb::after  { content: "\f082"!important; } /* fb square f */
a.icon.fb::before, a.icon.fb::after { content: "\f09a"!important; } /* fb f */
a.icon.fbm::before, a.icon.fbm::after { content: "\f0e6"; } /* fb messanger */
a.icon.insta::before, a.icon.insta::after { content: "\f16d"!important; }
a.icon.yt::before, a.icon.yt::after { content: "\f16a"; }
a.icon.ytm::before, a.icon.ytm::after { content: "\f144"; }
a.icon.vimeo::before, a.icon.vimeo::after { content: "\f194"; }
a.icon.twitch::before, a.icon.twitch::after { content: "\f1e8"; }
a.icon.linked::before, a.icon.linked::after { content: "\f0e1"; }
a.icon.xing::before, a.icon.xing::after { content: "\f168"; }
a.icon.twitter::before, a.icon.twitter::after { content: "\f099"; }
a.icon.phone::before, a.icon.phone::after { content: "\f095"; }
a.icon.mobile::before , a.icon.mobile::after{ content: "\f10b"; }
a.icon.whatsapp::before, a.icon.whatsapp::after { content: "\f232"; }
a.icon.skype::before, a.icon.skype::after { content: "\f17e"; }
a.icon.apple::before, a.icon.apple::after { content: "\f179"; } /* facetime */
a.icon.video-cam::before, a.icon.video-cam::after { content: "\f03d"; }
a.icon.microsoft::before, a.icon.micosoft::after { content: "\f17a"; } /* teams */
a.icon.wp::before, a.icon.wp::after { content: "\f19a"; }
a.icon.download::before, a.icon.download::after { content: "\f019"; }
a.icon.vcard::before, a.icon.vcard::after { content: "\f2bc"; }
a.icon.date::before, a.icon.date::after { content: "\f133"; }
a.icon.pdf::before, a.icon.pdf::after { content: "\f1c1"; }
a.icon.camera::before, a.icon.camera::after { content: "\f030"; }
a.icon.photo::before, a.icon.photo::after { content: "\f03e"; }
a.icon.video::before, a.icon.video::after { content: "\f04b"; }
a.icon.cloud::before, a.icon.cloud::after { content: "\f0c2"; }
a.icon.dropbox::before, a.icon.dropbox::after { content: "\f16b"; }
a.icon.send::before, a.icon.send::after { content: "\f1d8"; }
a.icon.shop::before, a.icon.shop::after { content: "\f290"; }

/* a Selector icon BG Colors href | title || https://brandcolors.net/ */
a.icon[href*="mailto:"] { background: #222; }
a.icon[href*="tel:"] { background: #666; } 
a.icon[href*="facebook"] { background: #1877f2; }
a.icon[href*="instagram"] { background: #833ab4; }
a.icon[href*="twitter"] { background: #1da1f2; }
a.icon[href*="linked"] { background: #00a0dc; }
a.icon[href*="youtube"] { background: #ff0000; }
a.icon[href*="vimeo"] { background: #1ab7ea; }
a.icon[href*="twitch"] { background: #9146ff; }
a.icon[href*="wa.me"] { background: #128c7e; }
a.icon[href*="skype"] { background: #00aff0; }
a.icon[href*="zoom"] { background: #2d8cff; }
a.icon[href*="wordpress"] { background: #0087be; }
a.icon[href*="woocommerce"] { background: #96588a; }
a.icon[href*="m.me"] { background: #833ab4; }


.modal p { font-size: calc(.8rem + .2vw); }

/* /// Company Colors /// */
.color-corp-a { color: var(--clr-corporate-a)!important; }
.color-corp-b { color: var(--clr-corporate-b)!important; }
.color-corp-a-rgba { color: var(--clr-corporate-a-rgba)!important; }
.color-corp-b-rgba { color: var(--clr-corporate-b-rgba)!important; }
.color-corp-a-bg { background-color: var(--clr-corporate-a)!important; }
.color-corp-b-bg { background-color: var(--clr-corporate-b)!important; }
.color-corp-a-bg-rgba { background-color: var(--clr-corporate-a-rgba)!important; }
.color-corp-b-bg-rgba { background-color: var(--clr-corporate-b-rgba)!important; }

/* /// icons google Material /// */
.material-icons { vertical-align: middle; }

.material-icons.md-10 { font-size: 10px; }
.material-icons.md-12 { font-size: 12px; }
.material-icons.md-14 { font-size: 14px; }
.material-icons.md-16 { font-size: 16px; }
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

/* // CSS --- Full BG Image // als img tag // Cover /////////// */

div.full-cover {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	max-height: 100%;
	overflow: hidden; 
	z-index: 1;
}
div.full-cover img {
	position: relative;
	width: 100%;
	height: 100%; 
	object-fit: cover;
	object-position: center center;
	max-height: 100%;
	min-height: 100%;
	margin: 0;
	z-index: 1;
}
div.full-cover .full-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;	
  background-color: var(--bg-full-overlay);	
	z-index: 2;
	/* display: none; */  
}

div.full-cover.pattern {
  background: var(--bg-full-pattern-clr) var(--bg-full-pattern-img) repeat fixed center; 
}

/* CSS BG full Video || ....
https://css-tricks.com/full-page-background-video-styles/
https://codepen.io/oliwa/pen/xxxBjYp
*/

div.full-cover.video video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  position: absolute;
  top: 0;
  left: 0;
}

div.full-cover.video  .full-overlay {
  background-color: rgba(255,255,255,.3);
  background-color: rgba(0,0,0,.5);
  background-color: var(--bg-full-overlay-vid);
}



/* Cookie Notice */
#cookie-consent {
  position: fixed;
  top: auto;
  right: 0px;
  bottom: 0px;
  left: auto;
  z-index: 5;  
  width: auto;
  max-width: 98%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  display: none; /* Status JS */

  -webkit-border-top-left-radius: 8px;
  -webkit-border-top-right-radius: 8px;
  -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;

  background:var(--cookie-bg);
  margin: 0 8px;
  padding: 20px 10px 15px 10px;
  padding-right: 80px;
}

@media (min-width: 992px) { 
  #cookie-consent { width: 700px; }
}

#cookie-consent p, 
#cookie-consent p a {
  color: var(--cookie-text);
  font-size: clamp(.8rem, 2vw, 1.2rem);
  line-height: 1.6rem;
}
#cookie-consent p {
  display: inline-block;
  margin: 0;
  padding:2px;
}
#cookie-consent p a {
  margin: -6px 2px 2px 2px;
  color: var(--cookie-a); 
}
#cookie-consent a:hover { color: var(--cookie-a-hov); }
#cookie-consent #btn-ok-cookie {
  position: absolute; 
  top: 20px; 
  right: 10px;
  margin: auto;
}
/* .light */
#cookie-consent.light {
  background:var(--cookie-bg-light);
}
#cookie-consent.light p {
  color: var(--cookie-text-light); 
}
#cookie-consent.light p a {
  color: var(--cookie-a-light); 
}
#cookie-consent.light a:hover { color: var(--cookie-a-light-hov); }


/* //////////////////// BLOCKS //////////////////////// */

header, main, footer {z-index: 3;}

/* //////////// HEADER //////////// */
header {
  text-align: center;
}

header h1.logo-text {
  margin: 0;
  font-family: var(--default-font);
  font-style: var(--default-font-style);
  font-weight: var(--default-font-weight);
  font-size: clamp(1.8rem, 2.5vw, 3.4rem); /* min,dyn,max // https://die-netzialisten.de/responsive-schriftgroessen-mit-clamp/ */
}

/* //////////// body MAIN //////////// */

body, main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

/* ============= Logo ================= */
main img.logo {
  /* width: clamp(240px, 50%, 600px); */
  width: 90%;
  height: auto;
  margin: 10px auto 60px auto;
}

/* ============= COLOR: SVG black to HEX filter: Colors // https://codepen.io/sosuke/pen/Pjoqqp ================= */
img.invert {  filter: invert(1); /* black // white */ }
img.grey { filter: invert(.7); /* grey */ }
img.spezial {filter: invert(100%) sepia(76%) saturate(1913%) hue-rotate(49deg) brightness(97%) contrast(77%); }
/*
img:hover.logo { filter: invert(1); }
*/

/* row height 100% */
.row.full-h { 
  display: flex;
  flex: 1 1 auto;
}
.left,.right {  
  display: flex;
  align-items: center;
  justify-content: center;
}

.left, .right { background-color: transparent; }
.right {
  /*
  background-clip: content-box;
  background-clip: border-box;
  */
  background-clip: padding-box;
  border: 1.5vw solid transparent;
  background-color: var(--div-bg-right); 
  /* clip-path: var(--div-bg-path-small); */

  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
}
.right.glass {
  /* https://css.glass */
  border: 1px solid rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* /////////////// s.o. // mobile first - ab Desktop size ////////// */
@media (min-width: 992px) { 
  header { text-align: left; }
  header h1.logo-text { margin-left: 2%; }
  main h1, main h2, main h3, main h4, main p, main ul, div.accordion {
    width: 75%;
    max-width: 680px;
  }
  .right { 
    border: none;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;  
    /* clip-path: var(--div-bg-path); */

    border-top-left-radius: 80px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 80px;
  }
}

/* ============= divs bg ================= */

header,footer { 
  background-color: var(--divs-bg); 
}

/* ======== Text Line links + rechts ======= */

.bg-line {
  display: flex;
  flex-direction: row;
  margin: 1rem .5rem;  
}
.bg-line::before, .bg-line::after {
  content: "";
  flex: 1 1;
  border-bottom: 1px solid;
  margin: auto;
  margin:auto 0.25em;
}
.bg-line.dotted:before, .bg-line.dotted:after{
  border-bottom: 2px dotted;
}
.bg-line.dashed:before, .bg-line.dashed:after{
  border-bottom: 1px dashed;
}

/* ============= Accordion ============= */
.accordion {
  -webkit-box-shadow: var(--shadow-global); 
  box-shadow: var(--shadow-global);
}
.accordion, .accordion h2, .accordion p {
  width: 100%;
}
.accordion, .accordion-item {
  background-color: var(acord-clr-bg);
  border: none;  
}
.accordion-item {
  background-color: var(--acord-clr-bg-item);
  margin-bottom: 3px;
}
.accordion-item:last-child {
  margin-bottom: 0;
}

button.accordion-button {
  padding: var(--acord--btn-padding-y) var(--acord--btn-padding-x);
}
.accordion-button::after {
  /* */ background-image: none;
  font-family: 'FontAwesome';
}

.accordion-item p, 
.accordion-item ul li { 
  font-size: inherit;
  color: var(--acord-clr-text-item);
  /* color: var(--clr-text); */
}

/* ::after global Sign */
.accordion-button.collapsed::after, 
.accordion-button:not(.collapsed)::after {
  background-image: none;
  border-radius: 50%;
  text-align: center;
  width: 30px;
  height: 30px;
  line-height: 30px;
  background-color: var(--acord-btn-bg-sign);
}

/* item >> closed */
.accordion button.accordion-button.collapsed {  
  color: var(--acord-btn-text-item);
  background-color: var(--acord-btn-bg-item);
}
.accordion button.accordion-button.collapsed:hover { 
  color: var(--acord-btn-text-item-hov); 
  background-color: var(--acord-btn-bg-item-hov);  
}
.accordion-button.collapsed::after {
  content: "\f078";
  color: var(--acord-btn-text-item);
}

/* item >> open active */
.accordion button.accordion-button:not(.collapsed) {
  color: var(--acord-btn-text-item-active);
  background-color: var(--acord-btn-bg-item-active); 
}
.accordion-button:not(.collapsed)::after {  
  content: "\f078";
  color: var(--acord-btn-text-item-active);
  background-color: var(--acord-btn-bg-sign-active);
}


/* ============= Thumbs images ============= */

.gallery {
  background: transparent;
  width: 100%;
}
.gallery.th-square img {
  object-fit: cover;
  width: calc(100vw / 4);
  height: calc(100vw / 4);
  -webkit-box-shadow: var(--shadow-global); 
  box-shadow: var(--shadow-global);
}

.gallery.th-square img:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.gallery.th-square img:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* https://bennettfeely.com/clippy/   
.gallery.th-square.clip img {  
  clip-path: polygon(100% 0, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0 0);
}
.gallery.th-square img:first-child {
  clip-path: polygon(20% 0%, 100% 0, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}
.gallery.th-square img:last-child {
  clip-path: polygon(80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0 0);
}
*/


/* Grosser Bildschirm & 3 x Bilder */
@media (min-width: 992px) { 
  .gallery.th-square img {
    width:calc(100% / 3.333);
    height: auto;
    aspect-ratio: 9/6;     
    aspect-ratio: 576 / 434;
  }
}

/* ============= SVG ================= */

img.svg-full {
	display: block;
	background: transparent;
}

/* Dimension */
img.svg-full {
	width: 900px!important;
	max-width: 100%!important;
	height: auto;	
}

footer a, footer .btn {color: var(--clr-a);}

 /* /// Modal + jQuery /// https://getbootstrap.com/docs/5.0/components/modal/#variables */  
.modal-backdrop {   
  background-color: #000;
}
.modal-content {
  text-align: left; 
  font-size: calc(0.5rem + 1vmin); 
  color: #333;

  background-color: var(--modal-bg);
  color: var(--modal-text);
}
.modal-content .btn-close {
  background-color: var(--modal-btn-close);
}
.modal-content p, .modal-content ul li {
  font-size: calc(0.5rem + 1vmin); 
  color: var(--modal-text);	
}
.modal-content a {
  text-decoration: underline;
  color: var(--modal-a);
}
.modal-content a:hover {
  text-decoration: none;
  color: var(--modal-a-hov);
}
.modal-content a.icon { color: var(--modal-a)!important;}
.modal-content a.icon:hover { color: var(--modal-a-hov)!important; }

.modal-content div.matomo iframe {
  width: 100%;
  border: 1px dotted #222;
  border-radius: 8px;
  aspect-ratio: 9/6;
}
@media (min-width: 992px) { 
  .modal-content div.matomo iframe {
    aspect-ratio: 36/6;
  }
}


/*/////////////// TOOLs ///////////// */

/* /// lity /// */
.lity {
  background-color: var(--lity-bg);
}
.lity-content:after {
  -webkit-box-shadow: none;
          box-shadow: none;
}
/* lity iFrame */
.lity-iframe .lity-container,
.lity-youtube .lity-container,
.lity-vimeo .lity-container,
.lity-facebookvideo .lity-container,
.lity-googlemaps .lity-container {
  /* adjust */
  max-width: 1400px; 
  height: auto;  
  border-radius: var(--lity-border-radius);
  border: var(--lity-border);
}
.lity-iframe-container {
  padding-top: 56.25%;
  border-radius: var(--lity-border-radius); 
}
.lity-iframe-container iframe {
  border-radius: var(--lity-border-radius);
}


/* ////////////////////////////////////////////// */

/* ////////////// IMG faerben | 
https://codepen.io/sosuke/pen/Pjoqqp 
https://isotropic.co/tool/hex-color-to-css-filter/
/////////////////// */


div.colorize.white img, img.colorize.white {
  -webkit-filter: invert(100%) sepia(0%) saturate(6531%) hue-rotate(262deg) brightness(95%) contrast(117%);
  filter: invert(100%) sepia(0%) saturate(6531%) hue-rotate(262deg) brightness(95%) contrast(117%);
}

div.colorize.red-rose img, img.colorize.red-rose {
  -webkit-filter: invert(16%) sepia(54%) saturate(6092%) hue-rotate(348deg) brightness(70%) contrast(94%);
        filter: invert(16%) sepia(54%) saturate(6092%) hue-rotate(348deg) brightness(70%) contrast(94%);
  }



div.colorize.black img, img.colorize.black {
  -webkit-filter: invert(30%) grayscale(100%) brightness(70%) contrast(4);
        filter: invert(30%) grayscale(100%) brightness(70%) contrast(4);
  }
  
  div.colorize.grey img, img.colorize.grey {
  -webkit-filter: grayscale(100%) brightness(110%) contrast(0.9);
        filter: grayscale(100%) brightness(110%) contrast(0.9);
  }
  
  div.colorize.red img, img.colorize.red {
  -webkit-filter: invert(40%) grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(400%) contrast(2);
        filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.8);
  }
  
  div.colorize.blue img, img.colorize.blue {
  -webkit-filter: grayscale(100%) brightness(30%) sepia(100%) hue-rotate(-180deg) saturate(700%) contrast(0.8);
        filter: grayscale(100%) brightness(30%) sepia(100%) hue-rotate(-180deg) saturate(700%) contrast(0.8);
  }
  
  div.colorize.green img, img.colorize.green {
  -webkit-filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(50deg) saturate(1000%) contrast(0.8);
        filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(50deg) saturate(1000%) contrast(0.8);
  }
 
  div.colorize.yellow img, img.colorize.yellow {
  -webkit-filter: grayscale(100%) brightness(120%) sepia(90%) hue-rotate(5deg) saturate(500%) contrast(0.7);
        filter: grayscale(100%) brightness(120%) sepia(90%) hue-rotate(5deg) saturate(500%) contrast(0.7);
  }