@charset "UTF-8";

@font-face {
	font-family: 'fontello';
	font-weight: normal;
	font-style: normal;
	src: url('/fonts/fontello.eot?v=1.1');
	src: url('/fonts/fontello.eot?#iefix&v=1.1') format('embedded-opentype'),
	   url('/fonts/fontello.woff2?v=1.1') format('woff2'),
	   url('/fonts/fontello.woff?v=1.1') format('woff'),
	   url('/fonts/fontello.ttf?v=1.1') format('truetype'),
	   url('/fonts/fontello.svg?v=1.1#fontelloregular') format('svg');  
}

html,
body{
	width: 100%;
	height: 100%;
	min-height: 100%;
}

html {
	font-size: 62.5%;

}

@media screen and (max-width:767px) {
	html {
		font-size: 55%;
	}
}

@page {
	size: auto;
	margin: 0;
}

body {
	min-width: 320px;
	margin: 0;
	padding: 0;
	color: #000;
	background-color: #fff;
	font-family: -apple-system,'BlinkMacSystemFont','.SFNSDisplay-Regular','Helvetica Neue', helvetica, roboto, arial, "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic Pro", "メイリオ", "ＭＳ Ｐゴシック", sans-serif;
	-webkit-text-size-adjust: none;	
	-moz-osx-font-smoothing: grayscale;
}

body.about {
	height: auto;
}

body,
body * {	
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

body>iframe {
	display: none;
}

a {
	color: #666;
	text-decoration: none;
	outline: none;
	-webkit-user-select:none;
	-webkit-touch-callout: none;
}

a[data-src]:hover {
	cursor: pointer;
}


.no-touch article a:hover {
	text-decoration: underline;	
}


#wrap {
	position: absolute;
	display: block;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	min-height: 257px;
	margin: 0 auto;
}

.index #wrap { /* 2022 */
	overflow: hidden;
}

.about #wrap>.spinner {
	display: none;	
}

body.init::before {
	content: attr(data-desc);
	text-transform: none;
	position: absolute;
	left: 13px;
	bottom: 12px;
	color: #000;
	z-index: 3;
	font-size: 1.2rem;
	line-height: 1.25;
	font-weight: 500;
	max-width: calc(100vw - 168px);

}

body.init.about::before {
	opacity: 0;
}

@media print{
	.init #wrap::before {
		content: attr(data-desc);
		text-transform: lowercase;
		position: absolute;
		right: 13px;
		bottom: 12px;
		color: #000;
		z-index: 3;
		font-size: 1.2rem;
		line-height: 1.25;
		font-weight: 400;
	}
	
	.about #wrap::before {
		opacity: 0;
	}
}

.ad-l {
	position: absolute;
	width: 200px;
	height: 200px;
	padding: 0;
	border-radius: 0;
	overflow: hidden;
	right: 13px;
	bottom: 13px;
	z-index: 3;	
	opacity: 1;
}

@supports(right: env(safe-area-inset-right)) {
	.ad-l {
		right: calc(13px + env(safe-area-inset-right));
		bottom: calc(13px + env(safe-area-inset-bottom));
	}
}


@media print{
	.ad-l {
		display: none;	
	}
}

.ad-l.ad125 {
	width: 125px;
	height: 125px;
}

.ad-l.ad132 {
	width: 132px;
	height: 132px;
}


.ad-l.alt {
	background-color: transparent;
	background-image: none;
	padding: 0;
	/*height: 42px;
	width: 125px;*/
	height: 44px;
	width: 132px;
}

.about .ad-l {
	opacity: 0 !important;
}

#poster { /* aspect 10:16 | 1.6 | 62.5% */
	position: absolute;
	top: 44px;
	left: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	overflow: hidden;
	width: calc((100vmin - 44px - 8vh) * 1.6);
	height: calc(100% - 44px - 8vh);
	max-width: 100%;
	min-width: 320px;
	margin: auto;
	padding: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: opacity,filter;
}

.index:not(.close) #poster {
	opacity: 0;
}


@keyframes fade-init {
	0% {
		opacity: 0;
		-webkit-filter: contrast(150%);
		filter: contrast(150%);
	}
	
	100% {
		opacity: 1;
		-webkit-filter: contrast(100%);
		filter: contrast(100%);
	}
}


.fade.init #poster {
	
	animation: fade-init .5s forwards ease-in-out;
}

#wrap::after {
	content: '';
	position: absolute;
	display: block;
	top: 44px;
	left: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	overflow: hidden;
	width: calc((100vmin - 44px - 8vh) * 1.6);
	height: calc(100% - 44px - 8vh);
	max-width: 100%;
	min-width: 320px;
	margin: auto;
	padding: 0;
	max-width: 100%;
	min-width: 320px;
	z-index: 1;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: rgba(255,255,255, .8);
	background-image: linear-gradient(to bottom, rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 100%), radial-gradient(farthest-side ellipse at top center, rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 100%);
	/*transition: opacity .25s ease-in-out;*/
	opacity: 0;
	visibility: visible;
	pointer-events: none;
	will-change: opacity;
}

.about #wrap::after {
	opacity: 1;
}

@media screen and (max-aspect-ratio: 1024/745) {
	#wrap::after {
		background-size: 100% calc(100vw * 0.625);
	}
}

@keyframes fadein-opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeout-opacity {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.open #wrap::after {
	animation: fadein-opacity .25s ease-in-out;
}


.close #wrap::after {
	animation: fadeout-opacity .25s ease-in-out;
}


@-moz-document url-prefix() {
	.open #wrap::after,
	.close #wrap::after {
		animation: none;
	}
}


@media screen and (max-width:767px) {
	#poster,
	#wrap::after {
		top: calc(44px - 10vh);
		width: calc((100vmin - 44px - 4vh) * 1.6);
		height: calc(100% - 44px - 4vh);
	}
}

@media screen and (max-width:767px) and (orientation: portrait) {
	#poster,
	#wrap::after {
		top: 0;
	}
}

@supports(height: env(safe-area-inset-bottom)) {
	
	#poster,
	#wrap::after {
		
		width: calc((100vmin - env(safe-area-inset-bottom) - 44px - 8vh) * 1.6);
		height: calc(100% - env(safe-area-inset-bottom) - 44px - 8vh);
	}
	
	@media screen and (min-aspect-ratio: 2/1) {
		#poster,
		#wrap::after {
			top: calc(44px - env(safe-area-inset-bottom));
			width: calc((100vmin - env(safe-area-inset-bottom) - 44px) * 1.6);
			height: calc(100% - env(safe-area-inset-bottom) - 44px);
		}
		
	}
	
	@media screen and (max-width:767px) {
		#poster,
		#wrap::after {
			top: calc(44px - 10vh);
			width: calc((100vmin - env(safe-area-inset-bottom) - 44px - 4vh) * 1.6);
			height: calc(100% - env(safe-area-inset-bottom) - 44px - 4vh);
		}
	}
	
	@media screen and (max-width:767px) and (orientation: portrait) {
		#poster,
		#wrap::after {
			top: 0;
		}
	}

}

/*.init */#poster {
	-webkit-filter: contrast(100%);
	filter: contrast(100%);

}

/*.init*/.about #poster {
	/*transition: opacity .5s ease-in-out, filter .05s ease-in-out;*/
	-webkit-filter: contrast(110%);
	filter: contrast(110%);
}


#poster>img {
	display: none;	
}

@keyframes fadein-contrast {
	0% {
		-webkit-filter: contrast(100%);
		filter: contrast(100%);
	}
	100% {
		-webkit-filter: contrast(110%);
		filter: contrast(110%);
	}
}

@keyframes fadeout-contrast {
	0% {
		-webkit-filter: contrast(110%);
		filter: contrast(110%);
	}
	100% {
		-webkit-filter: contrast(100%);
		filter: contrast(100%);
	}
}

.open #poster {
	animation: fadein-contrast .05s ease-in-out;
}


.close #poster {
	animation: fadeout-contrast .05s ease-in-out;
}

@-moz-document url-prefix() {
	.open #poster,
	.close #poster {
		animation: none;
	}
}



#poster-content {
	position: absolute;
	line-height: 0;
	top:0;
	left: 0;
	bottom:0;
	right:0;
	margin: auto;
	width: 100%;
	height: 0;
	padding: 62.5% 0 0 0;
	background-image: url('/images/main.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	will-change: filter;
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 641px),
only screen and (min-resolution: 192dpi) and (min-width: 641px),
only screen and (min-resolution: 2dppx) and (min-width: 641px) {
    #poster-content {
        background-image: url('/images/main@2x.png');
    }
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1281px),
only screen and (min-resolution: 192dpi) and (min-width: 1281px),
only screen and (min-resolution: 2dppx) and (min-width: 1281px) {
    #poster-content {
        background-image: url('/images/main@3x.png');
    }
}


.about #poster-content {
	-webkit-filter: blur(1vmin);
	filter: blur(1vmin);
}

@keyframes fadein-blur {
	0% {
		-webkit-filter: blur(0px);
		filter: blur(0px);
	}
	100% {
		-webkit-filter: blur(1vmin);
		filter: blur(1vmin);
	}
}

@keyframes fadeout-blur {
	0% {
		-webkit-filter: blur(1vmin);
		filter: blur(1vmin);
	}
	
	100% {
		-webkit-filter: blur(0px);
		filter: blur(0px);
	}
}

.open #poster-content {
	animation: fadein-blur .25s ease-in-out;
}

.close #poster-content {
	animation: fadeout-blur .25s ease-in-out;
}


@-moz-document url-prefix() {
	.open #poster-content,
	.close #poster-content {
		animation: none;
	}
}


.init .device {
	position: absolute;
	display: block;
	background-color: transparent;
	-webkit-tap-highlight-color: transparent;
	/*background-color: rgba(255,0,0,.5);*/
}

#device-mac {
	top: 5.9%;
	left: 23.5%;
	width: 72.9%;
	height: 65.9%;
	z-index: 0;
}

#device-ipad {
	top: 56.3%;
	left: 3.1%;
	width: 32.2%;
	height: 38.7%;
	border-radius: 3% / 3.6%;
	z-index: 1;
}

#device-iphone {
	top: 65.7%;
	left: 39.1%;
	width: 8.9%;
	height: 30.5%;
	border-radius: 12% / 8%;
	z-index: 2;
}

#header {
	display: flex;
	justify-content: space-between;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	margin: 0 auto;
	padding: 0;
	background-color: rgba(255, 255, 255, 0);
	min-height: 44px;
	z-index: 1001;
	text-transform: lowercase;
	cursor: default;
	/*transition: background-color .25s ease-in-out;*/
}

@supports(left: env(safe-area-inset-left)) {
	#header {
		left: env(safe-area-inset-left);
		right: env(safe-area-inset-right);
	}
}

#header::before {
	content: '';
	position: relative;
	display: block;
	min-width: 44px;
	width: 44px;
	height: 44px;
	z-index: 0;
}

/*.about #header {
	background-color: rgba(255, 255, 255, .5);
	
}*/

#header h1 {
	position: absolute;
	left: 0;
	top: 0;
	margin: 0;
	font-size: 2.6rem;
	line-height: 44px;
	font-weight: bold;
	padding: 0 12px;
	z-index: 1;
}

#header h1 a {
	color: inherit;	
}

.index #header h1 a {
	pointer-events: none;	
}



#nav-about {
	position: relative;
	display: inline-block;
	min-width: 44px;
	width: 44px;
	height: 44px;
	text-align: center;
	cursor: pointer;
	color: #999;
	-webkit-tap-highlight-color: transparent;
	transition: opacity .1s ease-in-out;
}

#nav-about ul,
#nav-about li {
	margin: 0;
	padding: 0;
	list-style-type: none;	
}

.fancybox-active #nav-about {
	opacity: 0;
}

@media print{
	.about #poster,
	#nav-about {
		display: none;	
	}
}

#nav-about::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	box-sizing: border-box;
	border: solid 2px #999;
	border-width: 2px 0;
	width: 18px;
	height: 14px;
	margin-left: -9px;
	margin-top: -7px;
	pointer-events: none;
	z-index: 2;
}

#nav-about::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	box-sizing: border-box;
	border-top: solid 2px #999;
	width: 18px;
	height: 0;
	margin-left: -9px;
	margin-top: -1px;
	pointer-events: none;
	z-index: 3;
}

.no-touch #nav-about:hover::before,
.no-touch #nav-about:hover::after {
	border-color: #666 !important;
}

#nav-about:active {
	color: #666;
}

.about #nav-about::before {
	content: '';
	position: absolute;
	border-top: solid 2px #999;
	border-bottom: 0;
	width: 18px;
	height: 0;
	margin-top: -1px;
	transform: rotate(135deg);
}

.about #nav-about::after {
	border-top: solid 2px #999;
	transform: rotate(45deg);
}

#nav-about a {
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	outline: 0;
}

body.about #nav-about a[href="/"],
.no-mobiletouch body:not(.about) #nav-about a[href="/screensaver/"],
.mobiletouch body:not(.about) #nav-about a[href="/mobileapp/"] {
	z-index: 1;
}

/* new gnav */

#gnav {
	flex-grow: 1;
	position: relative;
	display: block;
	box-sizing: border-box;
	padding: 0 8%;
	margin: 0;
	height: 0;
	min-height: 0;
	overflow: hidden;
	visibility: hidden;
	text-align: center;
	/*transition: opacity .25s ease-in-out;*/
	will-change: opaticy;
}

.about.open #gnav {
	animation: fadein-opacity .25s ease-in-out;
}

@media screen and (max-width:374px) {
	#gnav {
		padding: 0 0 0 30px;	
	}
}

.about #gnav {
	height: auto;
	width: auto;
	min-height: 100%;
	overflow: auto;
	visibility: visible;
}



#gnav ul {
	display: inline-flex;
	min-width: 360px;
	max-width: calc(100% - 80px);
	margin: 0 auto;
	padding: 0;
	list-style-type: none;
	font-size: 0;
	line-height: 0;
	white-space: nowrap;
}

@media screen and (max-width:414px) {
	#gnav ul {
		min-width: 0;
		max-width: 100%;
		width: auto;

	}
}

#gnav ul li {
	flex-grow:1;
	margin: 0;	
}


#gnav ul a {
	position: relative;
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 44px;
	display: block;
	width: 100%;
	box-sizing: border-box;
	height: 45px;
	margin: 0;
	padding: 0 10%;
	text-align: center;
	color: #666;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
	text-decoration: none;
	text-transform: none;
	overflow: hidden;
	text-overflow: ellipsis;
	
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

@media screen and (max-width:414px) {
	#gnav ul a {
		padding: 0 3.5vw;
	}
}

.about.init #gnav ul a {
	transition: color .1s ease-in-out, border-bottom-color .1s ease-in-out;
}

.no-touch #gnav ul a:hover {
	color: #333;
}

body.screensaver #gnav ul a[href="/screensaver/"],
body.mobileapp #gnav ul a[href="/mobileapp/"] {
	color: #000 !important;
	cursor: default;	
}

body.screensaver #gnav ul a[href="/screensaver/"]::before,
body.mobileapp #gnav ul a[href="/mobileapp/"]::before {
	content: '';
	position: absolute;
	display: block;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	background-color: #000;	
}

#desc {
	display: none;
}


.screensaver #about-mobileapp,
.screensaver .ma,
.mobileapp #transaction-completed,
.mobileapp #about-screensaver,
.mobileapp .ss {
	display: none;
}

.screensaver #about-screensaver,
.mobileapp #about-mobileapp {
	display: block;

}

.screensaver .ss,
.mobileapp .ma {
	display: inline-block;
}

#main {
	position: relative;
	display: block;
	width: 100%;
	height: 0;
	min-height: 0;
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	-webkit-overflow-scrolling: touch !important;
	z-index: 101;
	box-sizing: border-box;
	padding-top: 44px;
	background-color: transparent /*rgba(255,255,255, .8)*/;
	transition: opacity .25s ease-in-out;
	
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translate3d(0, 0, 0);
	will-change: opacity;
}

@supports(padding: max(0px)) {
	#main {
		padding-left: max(0px, env(safe-area-inset-left));
		padding-right: max(0px, env(safe-area-inset-right));
	}
}

#main::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 44px;
	background-color: rgba(255, 255, 255, .5);
	outline: solid 1px rgba(0,0,0,.075);
	z-index: 1;
}


.about #main/*,
.close #main*/ {
	height: auto;
	min-height: 100%;
	overflow: auto;
	visibility: visible;
}

.about #main {
	opacity: 1;
	pointer-events: auto;
}


.about.open #main {
	animation: fadein-opacity .25s ease-in-out;
}

@-moz-document url-prefix() {
	.about.open #main {
		animation: none;
	}
}



.article header {
	display: none;
}

.slider {
	position: relative;
	margin: .5vw 0 calc(15px + .5vw) 0;
	border-radius: 5px;
	overflow: hidden;
	line-height: 0;
	width: 100%;
	height: 0;
	padding-top: 37.5%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translate3d(0, 0, 0);
}

.slider img {
	position: absolute;
	display: block;
	left: 50%;
	top: 0;
	bottom: 0;
	margin: auto;
	max-width: 100%;
	height: auto;
	transform: translateX(-50%);
	z-index: 1;
	/*transition:opacity 0.25s ease-in-out;*/
	opacity: 0;
	will-cange: opacity;
}

.ma-v {
	z-index: 0;
}

.about:not(.mobileapp) .ss-v,
.screensaver .ss-v,
.mobileapp .ma-v {
	opacity: 1;
}

.about:not(.mobileapp) .ma-v,
.screensaver .ma-v,
.mobileapp .ss-v {
	opacity: 0;
}

.tabchange.about:not(.mobileapp) .ss-v,
.tabchange.screensaver .ss-v,
.tabchange.mobileapp .ma-v {
	animation:fadein-opacity 0.25s ease-in-out;
}

.tabchange.about:not(.mobileapp) .ma-v,
.tabchange.screensaver .ma-v,
.tabchange.mobileapp .ss-v {
	animation:fadeout-opacity 0.25s ease-in-out;
}

@-moz-document url-prefix() {
	.tabchange.about:not(.mobileapp) .ss-v,
	.tabchange.screensaver .ss-v,
	.tabchange.mobileapp .ma-v,
	.tabchange.about:not(.mobileapp) .ma-v,
	.tabchange.screensaver .ma-v,
	.tabchange.mobileapp .ss-v {
		animation: none;
	}
}


@media screen and (max-width:767px) {
	.slider {
		padding-top: 0;
		height: 273px;
	}
	
	.slider img {
		height: 100%;
		max-width: none;
		width: auto;	
	}
}

@media screen and (max-width:457px) {
	.slider {
		padding-top: 62.5%;
		height: 0;
	}
}

#content {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	max-width: 980px;
	padding: 20px;
	margin: 0 auto 132px auto;
	font-size: 1.8rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	cursor: default;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translate3d(0, 0, 0);
	margin-bottom: calc(132px + env(safe-area-inset-bottom));
}

.paypal #about-screensaver,
.paypal #donation {
	display: none;
}


#content h3 {
	font-size: 2.1rem;
	margin: 1.75em 0 .25em 0;
}


#content .note {
	background-color: #f6f6f6;
	padding: 15px;
	font-size: 1.3rem;
	margin: 2.5em 0 0 0;
	border-radius: 8px;
}

#content .note a {
	color: #000;
	text-decoration: underline;
}

#content .note h3 {
	font-size: 1.6rem;
	margin: 0 0 .25em 0;
}

#content p {
	margin: 0;
}

#content p+p {
	margin-top: 1em;
}


#content p.note {
	margin-top: -1em;
	font-size: 1.3rem;
	line-height: 1.5;
}


#content p.read {
	margin: 20px 0 0 0;
}

#content ul {
	margin: 0 0 1.5em 0;
	padding: 0 0 0 1.25em;
}

#content dl.faq dt,
#content dl.faq dd {
	margin-left: 1.25em;
	text-indent: -1.25em;
	padding: 0;
}

	

#content dl.faq dt::before,
#content dl.faq dd::before {
	display: inline-block;
	width: 1.25em;
	text-indent: 0;
	text-align: left;
	font-weight: bold;
}

#content dl.faq {
	margin: 0;
}

#content dl.faq dt::before {
	content: 'Q.';
}

#content dl.faq dd::before {
	content: 'A.';
}

#download,
#donate {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	margin: 2.5em auto 0 auto;
}

.module {
	display: block;
	position: relative;
	width: 300px;
	box-sizing: border-box;
	border-radius: 8px;
	padding: 20px 20px 130px 20px;
	border: solid 1px rgba(0, 0, 0, 0.05);
	background-color: rgba(248, 248, 248, .5);
	text-align: center;
	margin: 0;
	font-size: 1.5rem;
}

.module.mac,
.module.win {
	padding: 20px 20px 120px 20px;
}

.module.notice {
	width: 100%;
}

#donate .module {
	padding: 20px 20px 84px 20px;
}

.module.ss+.module.ss,
.module.ma+.module.ma {
	margin: 0 0 0 20px;	
}
.module .notice {
	text-align: left;
	color: #666;
	font-size: 1.1rem;
}

@media screen and (max-width:659px) {
	#download {
		flex-direction: column;
	}
	
	.module {
		margin: 0 auto;
	}
	
	.module.ss+.module.ss,
	.module.ma+.module.ma {
		margin: 20px auto 0 auto;	
	}
	
	@media screen and (max-width:339px) {
		.module {
			width: 100%;
		}
	}
}

#download .module h3,
#donation .module h4 {
	font-size: 2.2rem;
	line-height: 1;
	text-align: center;
	margin: 0;
}


#download .module h3::before,
#donation .module h4::before {
	content: '';
	width: 68px;
	height: 68px;
	display: block;
	margin: 0 auto 10px auto;
	vertical-align: middle;
	background-image: url('/images/icon-ipa.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	filter: drop-shadow(0 0 0.5px rgba(0,0,0,0.75));
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translate3d(0, 0, 0);
}

#download .module.mac h3::before {
	background-image: url('/images/icon-saver.png');
	width: 70px;
}

#download .module.win h3::before {
	background-image: url('/images/icon-scr.png');
	width: 54px;
	background-size: contain;
	background-position: center bottom;
	/*filter: none;*/
}

#donation .module h4::before {
	background-image: url('/images/icon-donate.png');
}

#donation .module p.cap .logo {
	font-size: 0;
	display: inline-block;
	width: 53px;
	height: 14px;
	background-image: url('/images/PayPal_logo.svg');
	background-size: contain;
	background-color: transparent;
	background-position: center center;
	background-repeat: no-repeat;
	vertical-align: middle;
} 


.module p.cap {
	margin: 0;
	padding: 10px 0;
	text-align: center;
	font-size: 1.2rem;
	line-height: 1.5;
}

.module p.cap small {
	font-size: inherit;
}

.module p.cap small strong {
	font-size: 1.4rem;
	font-weight: 500;
}

.module p.cap small strong.new::before {
	content: 'New';
	text-transform: uppercase;
	display: inline-block;
	font-weight: 500;
	font-size: 1.1rem;
	color: #fff;
	line-height: 1.4rem;
	padding: 0 2px;
	border-radius: 2px;
	background-color: #d00;
	margin-right: .25em;
	
}

.module p.cap a {
	color: #666;	
}

.no-touch .module p.cap a:hover {
	text-decoration: underline !important	
}


.module p.price {
	position: absolute;
	bottom: 85px;
	display: block;
	text-align: center;
	font-size: 2.4rem;
	font-weight: 500;
	margin: 0 auto;
	line-height: 1.2;
	width: calc(100% - 40px);
}

.module.mac p.price,
.module.win p.price {
	bottom: 75px;
}


.module p.price small {
	display: block;
	font-size: 1.2rem;
	text-transform: uppercase;
}

.module .dl {
	position: absolute;
	bottom: 20px;
	display: block;
	margin: 0 auto;
	padding: 0;
	font-size: 0;
	line-height: 0;
	text-align: center;
	width: calc(100% - 40px);
}


a.btn {
	display: inline-block;
	min-width: 130px;
	max-width: calc(100% - 40px);
	height: 44px;
	margin: 0 auto;
	box-sizing: border-box;
	font-size: 1.8rem;
	line-height: 42px;
	font-weight: 500;
	padding: 0 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	border-radius: 5px;
	border: solid 1px transparent; /* #a6a6a6;*/
	color: #fff;
	background-color: #222;
	transition: color .1s ease-in-out;
	cursor: pointer;
}


a.btn.appstore {
	height: 54px;
	min-width: 160px;
	line-height: 52px;
	font-size: 0;
	line-height: 0;
	background-image: url('/images/Download_on_App_Store/Download_on_the_App_Store_Badge_US-UK_RGB_blk_092917.svg');
	background-size: contain;
	background-color: transparent;
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: 0;
	border: 0;
}

html[lang="ja"] a.btn.appstore {
	min-width: 147px;
	background-image: url('/images/Download_on_App_Store/Download_on_the_App_Store_Badge_JP_RGB_blk_100317.svg');
}

html[lang="it"] a.btn.appstore {
	background-image: url('/images/Download_on_App_Store/Download_on_the_App_Store_Badge_IT_RGB_blk_100317.svg');
}

html[lang="id"] a.btn.appstore {
	background-image: url('/images/Download_on_App_Store/Download_on_the_App_Store_Badge_ID_RGB_blk_100317.svg');
}

html[lang="nl"] a.btn.appstore {
	background-image: url('/images/Download_on_App_Store/Download_on_the_App_Store_Badge_NL_RGB_blk_100317.svg');
}

html[lang="el"] a.btn.appstore {
	background-image: url('/images/Download_on_App_Store/Download_on_the_App_Store_Badge_GR_RGB_blk_100217.svg');
}

html[lang="sv"] a.btn.appstore {
	background-image: url('/images/Download_on_App_Store/Download_on_the_App_Store_Badge_SE_RGB_blk_100317.svg');
}

html[lang="es"] a.btn.appstore {
	background-image: url('/images/Download_on_App_Store/Download_on_the_App_Store_Badge_ES_RGB_blk_100217.svg');
}

html[lang="th"] a.btn.appstore {
	background-image: url('/images/Download_on_App_Store/Download_on_the_App_Store_Badge_TH_RGB_blk_092917.svg');
}

html[lang="da"] a.btn.appstore {
	background-image: url('/images/Download_on_App_Store/Download_on_the_App_Store_Badge_DK_RGB_blk_100217.svg');
}

html[lang="de"] a.btn.appstore {
	background-image: url('/images/Download_on_App_Store/Download_on_the_App_Store_Badge_DE_RGB_blk_092917.svg');
}

html[lang="tr"] a.btn.appstore {
	min-width: 204px;
	background-image: url('/images/Download_on_App_Store/Download_on_the_App_Store_Badge_TR_RGB_blk_100217.svg');
}

html[lang="no"] a.btn.appstore {
	background-image: url('/images/Download_on_App_Store/Download_on_the_App_Store_Badge_NO_RGB_blk_100317.svg');
}

html[lang="fi"] a.btn.appstore {
	min-width: 193px;
	background-image: url('/images/Download_on_App_Store/Download_on_the_App_Store_Badge_FI_RGB_blk_100217.svg');
}

html[lang="fr"] a.btn.appstore {
	min-width: 171px;
	background-image: url('/images/Download_on_App_Store/Download_on_the_App_Store_Badge_FR_RGB_blk_100517.svg');
}

html[lang="vi"] a.btn.appstore {
	background-image: url('/images/Download_on_App_Store/Download_on_the_App_Store_Badge_VN_RGB_blk_100217.svg');
}

html[lang="pt"] a.btn.appstore {
	background-image: url('/images/Download_on_App_Store/Download_on_the_App_Store_Badge_PTBR_RGB_blk_092917.svg');
}

html[lang="ms"] a.btn.appstore {
	background-image: url('/images/Download_on_App_Store/Download_on_the_App_Store_Badge_MY_RGB_blk_100317.svg');
}

html[lang="ru"] a.btn.appstore {
	background-image: url('/images/Download_on_App_Store/Download_on_the_App_Store_Badge_RU_RGB_blk_100317.svg');
}

html[lang="ko"] a.btn.appstore {
	min-width: 175px;
	background-image: url('/images/Download_on_App_Store/Download_on_the_App_Store_Badge_KR_RGB_blk_100317.svg');
}

html[lang="zh-CN"] a.btn.appstore {
	min-width: 147px;
	background-image: url('/images/Download_on_App_Store/Download_on_the_App_Store_Badge_CNSC_RGB_blk_092917.svg');
}

html[lang="zh-TW"] a.btn.appstore {
	min-width: 147px;
	background-image: url('/images/Download_on_App_Store/Download_on_the_App_Store_Badge_CNTC_RGB_blk_100217.svg');
}


.no-touch a.btn:hover {
	text-decoration: none;
}

.no-touch .done a.btn {
	transition: 0.2s ease-in-out;
}

/*a.btn:not([href]) {
	cursor: default;
	color: #999;
}*/

.no-touch a.btn:hover {
	-webkit-filter: brightness(.9);
	filter: brightness(.9);
}


a.btn.download::before,
a.btn.donate::before {
	display: inline-block;
	text-align: center;
	font-family: fontello;
	font-weight: normal;
	width: 1em;
	margin-right: .25em;
	vertical-align: top;
}

/*a.btn.download::before {
	content: '\f186';
}*/


.os::before {
	font-family: fontello;
	display: inline-block;
	width: 1em;
	text-align: center;
	vertical-align: top;
	font-weight: normal;
	margin-right: .1em;
	margin-left: .2em;
	line-height: 1.5;
}

.mac .os::before,
.ios .os::before {
	content: '\f179';
}

.win .os::before {
	content: '\f17a';
}



a.btn small {
	font-size: 1.1rem;
}

a.btn .logo {
	font-size: 0;
	display: inline-block;
	width: 83px;
	height: 22px;
	background-image: url('/images/PayPal_logo.svg');
	background-size: contain;
	background-color: transparent;
	background-position: center center;
	background-repeat: no-repeat;
	vertical-align: middle;
}

#information p a[target="_blank"]::after {
	content: '\f08e';
	font-family: fontello;
	display: inline-block;
	font-weight: normal;
	padding: 0 .2em;
	font-size: 1.6rem;
	
}

#examples {
	position: relative;
	padding: 0;
	margin: 1.5em 0;
	overflow: hidden;
	line-height: 0;
	background-color: #fafafa;
	width: 100% !important;
	max-height: calc(960px / 6 * 2);
	height: calc((100vw - 20px) / 6 * 2);
	border-radius: 5px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translate3d(0, 0, 0);  
}

@media screen and (max-width:485px) {
	#examples {
		max-height: calc(445px / 4 * 3);
		height: calc((100vw - 40px) / 4 * 3);
	}
}

@media screen and (max-width:375px) {
	#examples {
		max-height: calc(335px / 3 * 4);
		height: calc((100vw - 40px) / 3 * 4);
	}
}

#examples:not(.loaded)::before {
	content: '\f0d2';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 24px;
	height: 24px;
	font-family: fontello;
	font-size: 24px;
	line-height: 24px;
	text-align: center;
	font-weight: normal;
	color: #ccc;
	z-index: 0;
}

#examples .more {
	display: inline-block;
	position: absolute;
	z-index: 100;
	bottom: 5px;
	right: 5px;
	z-index: 2;
	display: none;
}

#examples .more a {
	display: inline-block;
	position: relative;
	font-size: 0;
	text-decoration: none;
	width: 28px;
	height: 28px;
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: 5px;	
	z-index: 1;
	line-height: 0;
	
}

#examples .more a::before {
	content: '\f0d2';
	color: #bd081c;	
	position: absolute;
	display: block;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	z-index: 1;
	font-family: fontello;
	font-weight: normal;
	text-align: center;
	font-size: 22px;
	line-height: 28px;
}

p#examples-more {
	margin: .5em 0 0 0;
	text-align: right;
	font-size: 1.4rem;	
}

#examples.async .more {
	visibility: hidden;
}

#examples .dest {
	display: none;
}

#examples .cells {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	list-style-type: none;
	z-index: 1;
}

#examples .cell {
	position: relative;
	display: block;
	box-sizing: border-box;
	outline: solid 1px #fff;
	width: 16.666%;
	height: 50%;
}

@media screen and (max-width:485px) {
	#examples .cell {
		height: 33.333%;
		width: 25%;
	}
}

@media screen and (max-width:375px) {
	#examples .cell {
		height: 25%;
		width: 33.333%;
	}
}

#examples .cell a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	transition: .1s ease-in-out;
	cursor: zoom-in;
}

.no-touch #examples .cell a:hover,
.touch #examples .cell a.hover {
	-webkit-filter: brightness(.9);
	filter: brightness(.9);
}

#examples .cell a img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 0;
	-webkit-tap-highlight-color: transparent;
}

ul#amounts {
	margin: 20px auto 0 auto;
	padding: 0;
	list-style-type: none;
	font-size: 0;
	font-weight: 500;
	line-height: 0;
	text-align: left;
	border-top: solid 1px rgba(0,0,0,.1);
}

ul#amounts input[type="radio"] {
	display: none;
}

ul#amounts label {
	position: relative;
	display: block;
	border-bottom: solid 1px rgba(0,0,0,.1);
	cursor: pointer;
	font-size: 2.0rem;
	line-height: 1;
	padding: 10px 5px 10px 30px;
	-webkit-tap-highlight-color: transparent;
}

ul#amounts label::before {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	background-color: transparent;
	border: solid 1px #ccc;
	border-radius: 50%;
	left: 0;
	top: 10px;
	/*transition: .1s ease-in-out;*/
}

.no-touch ul#amounts label:hover::before {
	border-color: #999;
}

ul#amounts input[type="radio"]:checked + label::before {
	border-color: #000;
}

ul#amounts label::after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	margin: 10px;
	box-sizing: border-box;
	background-color: transparent;
	border-radius: 50%;
	left: 0;
	top: 10px;
	/*transition: .1s ease-in-out;*/
}

ul#amounts input[type="radio"]:checked + label::after {
	width: 10px;
	height: 10px;
	margin: 5px;
	background-color: #000;
}

ul#amounts small {
	font-size: 1.2rem;
	font-weight: normal;
	margin-left: .25em;	
}

ul#amounts label[for="amount4"] small {
	display: block;
	margin: .25em 0 0 0;
	line-height: 1.4;
}

#profile {
	display: flex;
	margin: 1em 0;
	line-height: 1.5;
}

#profile img {
	margin: 0 10px 0 0;
	width: 72px;
	height: 72px;
	min-width: 72px;
	border-radius: 50%;
	overflow: hidden;
	border: solid 1px rgba(0, 0, 0, 0.075);
}

#profile figcaption {
	flex-grow: 1;
}

#profile figcaption dl {
	margin: 0;
	font-size: 0;
}

#profile figcaption dl dt {
	font-weight: bold;
	font-size: 1.8rem;
}

#profile figcaption dl dd {
	display: block;
	font-size: 1.6rem;
	margin: 0;
}

/*#profile figcaption dl dd+dd::before {
	content: '·';
	margin: 0 .5em;	
}*/


ul#links {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	padding: 0;
	list-style-type: none;
}

ul#links::after {
  content: "";
  flex: auto;
}


ul#links>li {
	width: calc((100% - (15px * 3)) / 4);
	margin: 5px 15px 15px 0;

}

@media screen and (min-width:768px) {
	ul#links>li:nth-child(4n) {
			margin-right: 0;
	}
}

@media screen and (max-width:767px) and (min-width:486px) {
	ul#links>li {
		width: calc((100% - (15px * 2)) / 3);
	}
	ul#links>li:nth-child(3n) {
		margin-right: 0;
	}
}


@media screen and (max-width:485px) {
	ul#links>li {
		width: calc((100% - 15px) / 2);
	}
	ul#links>li:nth-child(2n) {
		margin-right: 0;
	}
}


ul#links>li figure {
	margin: 0;
	padding: 0;
	font-size: 1.7rem;
	line-height: 1.3;
}

ul#links>li figure a {
	color: inherit;	
}

.no-touch ul#links>li figure a:hover img,
.touch ul#links>li figure a.hover img {
	-webkit-filter: brightness(.9);
	filter: brightness(.9);
}



ul#links>li figure span {
	display: inline-block;
	position: relative;
	margin: 0 auto 3px auto;
	width: 100%;
	padding-top: 62.5%;
	border-radius: 5px;
	overflow: hidden;
	background-color: #fafafa;

}

ul#links>li figure.free span::after {
	content: "free";
	text-transform: uppercase;
	position: absolute;
	display: inline-block;
	z-index: 1;
	right: 4px;
	top: 4px;
	color: #000;
	font-size: 11px;
	line-height: 1;
	border-radius: 2px;
	padding: 2px;
	background-color: rgba(255,255,255,.4)
}

ul#links>li figure span>img {
	position: absolute;
	display: block;
	z-index: 0;
	top:0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	min-width: 100%;
	min-height: 100%;
	object-fit: cover;
}

ul#links>li figure figcaption {
	display: inline;
}

ul#links>li figure figcaption dl {
	display: inline;
	margin: 0;
	
}

ul#links>li figure figcaption dl dt {
	display: inline;
	font-weight: bold;
		
}

ul#links>li figure figcaption dl dt::after {
	content: '\A';
	white-space: pre;
}

ul#links>li figure figcaption dl dd {
	display: inline;
	font-size: 1.5rem;
	padding: 0;
	margin: 0;

}


.ad-responsive {
	position: relative;
	opacity: 1;
	line-height: 0;
	/*outline: solid 1px #eee;*/
}

.ad-responsive+.ad-responsive {
	margin-top: 20px;	
}

body:not(.about) .ad-responsive {
	opacity: 0 !important;
}

@media print{
	.ad-responsive {
		display: none;
	}
}

.ad-responsive-content {
	position: relative;
	margin: 0 auto;
	overflow: hidden;
}

.ad-responsive.top>.ad-responsive-content {
	background-color: rgba(255,255,255,.75);
}

.ad-responsive.top>.ad-responsive-content::before {
	content: "AD";
	display: inline-block;
	color: rgba(0,0,0, .05);
	font-size: 2.1rem;
	line-height: 1;
	position: absolute;
	z-index: 0;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);	
}

.ad-responsive.bottom {
	margin-top: 20px;
}

.ad-responsive.bottom>.ad-responsive-content>ins {
	/*margin: 2.5em 0 0 0;*/
	display: block;
	max-height: 110px;
}

.ad-responsive.top>.ad-responsive-content>ins {
	position: relative;
	z-index: 1;
	display: block;
	min-height: 116px;
	height: 116px;
}

@media screen and (max-width:768px) {
	.ad-responsive.top>.ad-responsive-content>ins {
		min-height: 100px;
		height: auto;
	}
}

.ad-responsive.top>.ad-responsive-content>ins[style="height: 0px;"],
.ad-responsive.bottom>.ad-responsive-content>ins[style="height: 0px;"] {
	min-height: 0;
	margin: 0 0;
}



/*.ad-responsive.top .ad-responsive-content>ins {
	margin: 0;
	max-height: 110px;
}

.ad-responsive.bottom .ad-responsive-content>ins {
	min-height: 90px;
}

@media screen and (max-width:767px) {
	.ad-responsive.bottom .ad-responsive-content>ins {
		min-height: 100px;	
	}
}

.ad-responsive.top .ad-responsive-content>ins[style="height: 0px;"],
.ad-responsive.top .ad-responsive-content>ins[style="height: 0px;"] {
	margin: 0 0;
	min-height: 0;
}*/


.paypal.screensaver .ad-responsive.bottom,
.paypal.about:not(.mobileapp) .ad-responsive.bottom {
	visibility: hidden;
	height: 0;
	overflow: hidden;
}

.ad-responsive .adsbygoogle {
	display: block;
	text-align: center;
}

.ad-responsive ins+ins {
	margin-top: 10px;	
}

#share {
	padding: 5px 0 10px 0;
	text-align: center;
	white-space: nowrap;
	font-size: 0;
	line-height: 0;
	min-height: 20px;
}

#share ul {
	display: inline-block;
	margin: 0;
	padding: 0;
}

#share ul>li {
	display: inline-block;
	margin: 0 2px;
}

#share ul>li>* {
	display: inline-block !important;
	vertical-align: top !important;
	max-height: 20px !important;
}

.fb-like>span {
	vertical-align: top !important;
	overflow: hidden !important;
}

#footer {
	position: absolute;
	padding: 20px;
	bottom: 0;
	left: 0;
	right: 0;
	font-size: 0;
	line-height: 0;
	text-align: center;
	-webkit-font-smoothing: antialiased;
	outline: solid 1px rgba(0,0,0,.075);	
}

@supports(padding: max(0px)) {
	#footer {
		padding-bottom: max(20px, calc(env(safe-area-inset-bottom) + 20px));
	}
}

#copy {
	position: relative;
	line-height: 1;
	color: #666;
	cursor: default;
}

#copy a {
	color: #666;
	cursor: pointer;
}

.no-touch #copy a:hover {
	text-decoration: underline !important;
}

#copy ul {
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#copy ul li {
	display: inline-block;
	font-size: 1.2rem;
	margin: 10px .5em 0 .5em;
	white-space: nowrap;
}

.about.screensaver ul#spc {
	display: none;	
}

#copy p {
	display: inline-block;
	font-size: 1.2rem;
	margin: 10px .5em 0 .5em;
	cursor: default;
	white-space: nowrap;
}

#copy p small {
	font-size: inherit;
}

#err {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	text-align: center;
	line-height: 1;
	margin-top: -.5em;
	color: #999;
}


/* googleTranslateElement override
----------------------------------------------------- */

#goog-gt-tt {
	display: none !important;
}

.goog-te-gadget>div {
	margin-right: 5px;
}

.skiptranslate,
.goog-te-banner-frame.skiptranslate {
	display: none !important;
}

body {
	top: 0 !important;
}

#google_translate_element {
	min-height: 20px;
	margin: 0 0 15px 0;
	text-align: center;
}

.goog-tooltip {
	display: none !important;
}

.goog-tooltip:hover {
	display: none !important;
}

.goog-text-highlight {
	background-color: transparent !important;
	border: none !important; 
	box-shadow: none !important;
}

.goog-te-combo {
	margin: 0 !important;
}

div[id$="targetLanguage"] {
	position: relative;
}

div[id$="targetLanguage"] select {
	position: relative;
	display: inline-block;
	padding: 0 20px 0 5px;
	height: 20px; 
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 3px;
	border: 0;
	vertical-align: middle;
	font-size: 11px;
	box-sizing: border-box;
	outline: none;
	cursor: pointer;
	color: #666;
	background-color: rgba(0, 0, 0, 0.05);
	width: auto;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: .1s ease-in-out;
}

.no-touch div[id$="targetLanguage"] select:hover {
	background-color: rgba(0, 0, 0, 0.1);
	color: #333;
}

div[id$="targetLanguage"]::after {
	content: '';
	position: absolute;
	right: 8px;
	width: 5px;
	height: 5px;
	box-sizing: border-box;
	background-color: transparent;
	z-index: 0;
	bottom: 0;
	top: 0;
	margin: auto;
	transform: rotate(45deg) translateY(-1px);
	border: solid 1px #666;
	border-width: 0 1px 1px 0;
	z-index: 10;
	pointer-events: none;
	transition: .1s ease-in-out;
}

.no-touch div[id$="targetLanguage"] select:hover::after {
	border-color: #333;
}

/* changelog / privacy policy
----------------------------------------------------- */

.fancybox-is-open .fancybox-bg {
	background: #111;
	opacity: .39;
}

.fancybox-is-open.fancybox-wrap-example .fancybox-bg {
	opacity: 0.66;
}

.fancybox-content {
	width: 768px;
	max-width: 100%;
	border-radius: 4px;
	overflow: hidden;
	-webkit-transform-style: preserve-3d;
}

.fancybox-slide--html .fancybox-content {
	padding: 0;
	background-color: transparent;
}

.fancybox-slide--iframe .fancybox-content {
	background-color: transparent;
}


.fancybox-title {
	display: inline-block;
	text-align: center;
	-webkit-font-smoothing: antialiased;
	font-size: 18px;
	line-height: 44px;
	font-weight: 600;
	color: #fff;
	cursor: default;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex-grow: 2;
	opacity: .9;
}

.fancybox-wrap-example .fancybox-stage {
	top:44px;
	overflow: hidden;
	
}

.fancybox-slide {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translate3d(0, 0, 0);
}


.fancybox-content[id^="example"] {
	border-radius: 5px;
	width: 100%;
	max-width: 600px;
	background-color: transparent;
	padding: 0;
	overflow: hidden !important;
	font-size: 0;
	line-height: 1;
	position: relative;
	border-bottom: solid 0 transparent;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;

}

@media screen and (max-width:1280px) {
	.fancybox-content[id^="example"] {
		max-width: 480px;	
	}
}

.fancybox-content[id^="example"]::after {
	content: '';
	display: block;
	height: 0;
	width: 100%;
	background-color: transparent;
}




/* embed_pin_medium -> larger 600x */

.fancybox-content[id^="example"]>span[data-pin-log="embed_pin_medium"] /* old */,
.fancybox-content[id^="example"]>span[data-pin-log="embed_pin"] {
	width: 100%;
	max-width: 600px !important;
	min-width: 237px !important;
	box-shadow: none !important;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	border-radius: 8px !important;
}

.fancybox-content[id^="example"]>span[data-pin-log="embed_pin_medium"]>span[data-pin-log="embed_pin_medium"] {
	padding-bottom: 7px !important;
	border-bottom: none !important;
}

.fancybox-content[id^="example"]>span[data-pin-log="embed_pin_medium"]>span[data-pin-log="embed_pin_pinner_medium"] {
	display: none !important;
}



.fancybox-wrap-doc .fancybox-slide--iframe,
.fancybox-slide--html {
	padding: 8px;
	padding-left: calc(8px + env(safe-area-inset-left));
	padding-right: calc(8px + env(safe-area-inset-right));
	padding-bottom: calc(8px + env(safe-area-inset-bottom));
}


.fancybox-wrap-doc .fancybox-slide--iframe .fancybox-close-small {
	top: 0;
	right: 0;
	color: rgba(0,0,0,.35);
	padding: 8px;
}


.fancybox-close-small {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translate3d(0, 0, 0);
}

.no-touch .fancybox-slide--iframe .fancybox-close-small:hover svg {
   color: rgba(0,0,0,.5);
}

.fancybox-wrap-ajax .fancybox-stage .fancybox-content,
.fancybox-wrap-doc .fancybox-stage .fancybox-content {
	opacity: 0;
}


.fancybox-wrap-ajax .fancybox-stage.slideup,
.fancybox-wrap-doc .fancybox-stage.slideup {
	animation: slideUpL 0.366s ease-in-out 0s;
}


.fancybox-wrap-ajax .fancybox-stage.slidedown,
.fancybox-wrap-doc .fancybox-stage.slidedown {
	animation: slideDownL 0.366s ease-in-out 0s;
}

.fancybox-wrap-ajax .fancybox-stage.slideup .fancybox-content,
.fancybox-wrap-ajax .fancybox-stage.slideupdone .fancybox-content,
.fancybox-wrap-ajax .fancybox-stage.slidedown .fancybox-content,
.fancybox-wrap-doc .fancybox-stage.slideup .fancybox-content,
.fancybox-wrap-doc .fancybox-stage.slideupdone .fancybox-content,
.fancybox-wrap-doc .fancybox-stage.slidedown .fancybox-content {
	opacity: 1;
}

@keyframes slideUpL {
	0% {transform: translateY(100%)}
	100% {transform: translateY(0)}
}

@keyframes slideDownL {
	0% {transform: translateY(0)}
	100% {
		transform: translateY(100%);
		opacity: 0;
	}
}

.fancybox-button {
	background: transparent;
	opacity: .6;
	-webkit-tap-highlight-color: transparent;
	transition: opacity .1s ease-in-out;
}

.no-touch .fancybox-button:hover,
 .fancybox-button:active {
	opacity: .8;
}

.fancybox-button[disabled],
.no-touch .fancybox-button[disabled]:hover {
	opacity: .2;
}

.fancybox-slide--html .fancybox-close-small {
	padding: 8px;
}

.fancybox-button svg path {
	fill: none;
	stroke: #999;
	stroke-width: 1.5;
	stroke-linecap:round;
	stroke-linejoin:round;
}

.fancybox-wrap-example .fancybox-button svg path {
	fill: none;
	stroke: #fff;
}

.fancybox-infobar {
	z-index: 99998;
	mix-blend-mode: normal;
	font-variant-numeric: tabular-nums;
	left: env(safe-area-inset-left);
}

@supports(left: max(0px)) {
	.fancybox-infobar {
		left: max(0px, env(safe-area-inset-left));
	}
}

.fancybox-toolbar {
	display: flex;
	justify-content:flex-end;
	left: 0;
	right: 0;
	text-align: right;
	color: #fff;
	background-color: rgba(51, 51, 51, 0.69);
	outline: solid 1px rgba(255,255,255,.05);
	-webkit-backdrop-filter: blur(1vmin);
	backdrop-filter: blur(1vmin);
}


.fancybox-toolbar>button:last-child {
	margin-right:  env(safe-area-inset-right);
}

@supports(margin: max(0px)) {
	.fancybox-toolbar>button:last-child {
		margin-right: max(0px, env(safe-area-inset-right));
	}
}

.fancybox-toolbar>* {
	min-width: 44px;
}
	
.fancybox-container .fancybox-toolbar::before {
	content: '';
	min-width: 64px;
	max-width: 132px;
	height: 44px;
	flex-grow: 1;
	padding-left: env(safe-area-inset-left);
}

@supports(padding: max(0px)) {
	.fancybox-container .fancybox-toolbar::before {
		padding-left: max(0px, env(safe-area-inset-left));
	}
}