/* General CSS for shortcodes */
.click-load {
	padding: 2rem;
	max-width: 550px;
	margin: 0 auto;
}
.click-load > .privacy-wall {
	cursor: pointer;
	text-align: center;
	padding: 1rem;
	border: 2px solid;
	border-radius: 2rem;
}
.click-load > .privacy-wall.privacy-wall-hide {
	display: none;
}
.click-load > .privacy-wall > .brand-icon {
	display: inline;
	width: 8rem;
	height: 8rem;
	stroke-width: .8;
	stroke: currentColor;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	transition: transform .25s ease;
}
.click-load > .privacy-wall:hover > .brand-icon {
	transform: scale(1.1);
}
.click-load .loading,
.click-load .fb-xfbml-parse-ignore {
	position: relative;
	z-index: 0;
	display: block;
	width: 5rem;
	height: 5rem;
	margin: 0 auto;
	padding: 0;
	border: 0;
	border-radius: 50%;
	border: .25rem solid;
	animation: rotate 1s 0s infinite linear normal;
}
.click-load .loading::before,
.click-load .fb-xfbml-parse-ignore::before {
	content: '';
	display: none;
}
.click-load .privacy-intro,
.click-load .privacy-preview {
	font-size: .9em;
	margin-bottom: .5em
}
.click-load .privacy-intro {
	text-align: center;
	max-width: 300px;
	margin-left: auto;
	margin-right: auto;
}
.click-load .privacy-preview {
	font-style: italic;
}
.click-load .privacy-blocked {
	margin: 1rem auto;
	max-width: 400px;
	text-align: center;
}
.click-load .privacy-blocked.pos-absolute {
	margin-top: 5.5rem;
	position: absolute;
	left: 50%;
	z-index: 0;
	transform: translateX(-50%);
}
.click-load .privacy-save {
	display: none;
	text-align: left;
	font-size: .9em;
	margin-top: 1rem;
}
.click-load .privacy-save.privacy-save-show {
	display: block;
}
.click-load .privacy-save .click-load-save {
	text-align: center;
}
.click-load .privacy-save .click-load-form-switch {
	--width: 32px;
	--height: 16px;
	--thumb-size: 18px;
}
.click-load .privacy-save .click-load-form-switch::part(label) {
	margin-left: 1rem;
}
.click-load .privacy-link {
	text-align: center;
	font-size: .9em;
	margin-top: .5rem;
}
.click-load > footer {
	background: inherit;
}
/* Brand styles: Twitter */
.click-load.twitter .privacy-wall { border-color: #1a91da; }
.click-load.twitter .privacy-wall .privacy-hint { color: #1a91da; }
.click-load.twitter .privacy-wall .brand-icon { stroke: #1a91da; }
.click-load.twitter .loading {
	border-color: rgba(26, 145, 218, .3);
	border-top-color: #1a91da;
}
/* Brand styles: Facebook */
.click-load.facebook .privacy-wall { border-color: #1876f2; }
.click-load.facebook .privacy-wall .privacy-hint { color: #1876f2; }
.click-load.facebook .privacy-wall .brand-icon { stroke: #1876f2; }
.click-load.facebook .fb-xfbml-parse-ignore {
	border-color: rgba(24, 118, 242, .3);
	border-top-color: #1876f2;
}
/* Brand styles: Instagram */
.click-load.instagram .reset {
	border:0;
	border-radius:3px;
	max-width:540px;
	min-width:326px;
	margin:0;
	padding:0;
	width:-webkit-calc(100% - 2px);
	width:calc(100% - 2px);
}
.click-load.instagram .reset::before {
	content: '';
	display: none;
}
.click-load.instagram .privacy-wall { border-color: #cb4162; }
.click-load.instagram .privacy-wall .privacy-hint { color: #cb4162; }
.click-load.instagram .privacy-wall .brand-icon { stroke: #cb4162; }
.click-load.instagram .loading {
	border-color: rgba(203, 65, 98, .3);
	border-top-color: #cb4162;
}
/* Brand styles: Vimeo */
.click-load.vimeo .privacy-wall { border-color: #1ab7ea; }
.click-load.vimeo .privacy-wall .privacy-hint { color: #1ab7ea; }
.click-load.vimeo .privacy-wall .brand-icon { stroke: #1ab7ea; }
.click-load.vimeo .loading {
	margin-bottom: -5rem;
	border-color: rgba(26, 183, 234, .3);
	border-top-color: #1ab7ea;
}
.click-load.vimeo iframe {
	position: relative;
	z-index: 5;
}
/* Brand styles: Youtube */
.click-load.youtube .privacy-wall { border-color: #f00; }
.click-load.youtube .privacy-wall .privacy-hint { color: #f00; }
.click-load.youtube .privacy-wall .brand-icon { stroke: #f00; }
.click-load.youtube .loading {
	margin-bottom: -5rem;
	border-color: rgba(255, 0, 0, .3);
	border-top-color: #f00;
}
.click-load.youtube iframe {
	position: relative;
	z-index: 5;
}

@keyframes rotate {
  0%   { transform: rotate(0);      }
  100% { transform: rotate(360deg); }
}