#cookieconsent { 
    position: fixed; display: flex; flex-direction: column;
    top:0; left: 0; height: 100%; width: 100%;  z-index: 999999;  transition: all 0.6s ease;  }

#cookieconsent.shown {background: rgba(0,0,0,0.6);  }

#cookieconsent>div {color: white; flex: 1;  overflow: auto; background: #134267; padding: 30px; width: calc(90% - 40px); max-width: 500px;transform: translateX(-100%);  transition: all 0.6s ease;  }

#cookieconsent.shown>div { transform: translateX(0);  box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.5);}

#cookieconsent>div a { color: white;} 

#consent,
#consent_toggle span { opacity: 0;  position: fixed; left: -100px;}

#consent_toggle label { margin-left: auto; display:flex; justify-content: flex-end; align-content: center; align-items: center; cursor: pointer;}


#consent_toggle { margin-left: auto;   }
#cookieconsent h3 { display: flex; align-items: center; justify-content: space-between;}

#consent_toggle b { margin-left:1em; display: inline-block; width: 54px; height: 20px;background: rgba(0,0,0,0.4); position: relative; border-radius: 990px; }
#consent_toggle b::after{ display:block; content:""; width: 26px; height: 26px; background: #adbdca;
box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.5); border-radius: 50%; position: absolute; left: -3px; top: 50%; transform: translateY(-50%); transition: all 0.2s ease;}


#consent_toggle b::before {content:"Off"; display: inline-block; font-size: 12px; line-height: 20px; width: 32px; text-align: center; position: absolute; top: 0; right: 0;  opacity: 0.8; font-weight:400;   }


#consent:checked~h3>#consent_toggle b { 

background: rgba(0,0,0,0.5);
 
}
#consent:checked~h3>#consent_toggle b::after { 

background: #FFF; left: auto; right:-3px;

}

#consent:checked~h3>#consent_toggle b::before {content:"On"; right:100%; transform: translateX(100%); opacity: 1;}


button#dismiss { font-size: inherit; display: inline-block; background: rgba(255,255,255,0.9); padding: 0.6666em 1.5em;  font-weight:600;  color:#134267; margin: 12px 0 ;  cursor: pointer; }
button#dismiss:hover { background:#FFF;}
@media all and (max-width: 600px) { 

    #cookieconsent>div { padding: 20px; }
    
    
    #cookieconsent>div h2 { font-size: 2rem; }
    #cookieconsent>div h3 { font-size: 1.8rem; }
    #cookieconsent>div p { font-size: 1.4rem; }
    
}