/*** RESET ***/
*{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-family:inherit;vertical-align:baseline;font-size:1em;font-style:normal;-webkit-font-smoothing:antialiased;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;/*user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;*/tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent;-moz-tap-highlight-color:transparent;-o-tap-highlight-color:transparent;}*, *::before, *::after{-webkit-transition:.5s;-box-transition:.5s;-o-transition:.5s;transition:.5s;}:hover,:active,:focus{outline:0 !important;}html, body{min-height:100%;font-family:sans-serif;font-size:1rem;position:relative;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;padding:0;line-height:1;}article, footer, header, section{display:block;}ol, ul{list-style:none;}a{display:inline-block;text-decoration:none;background-color:transparent;color:initial;}a img{border:none;}a, button, input[type="submit"]{cursor:pointer !important;}button{// background-color:transparent;}img{width:100%;height:auto;}img::selection{fill:none;color:none;display:none;background:none;}input[type="text"], input[type="number"], input[type="search"], input[type="email"], textarea{text-align:left;max-width:100%;}input[type="checkbox"], input[type="radio"]{display:none;}input[type="submit"]{background-color:transparent;}label{display:inline;}textarea{resize:vertical;}
/*** END RESET ***/

/*** CANCEL ***/
html, body, main { width: 100%; height: 100%; }	
/*** END CANCEL ***/

/*** Z-INDEXES ***/
.u-ad-button { position: relative; z-index: 10; }
.u-ad-price-text { position: relative; z-index: 20; }
/*** END Z-INDEXES ***/

/*** COLORS ***/
.u-ad-button { background-color: #03E960; }

.u-ad-price_dock,
.u-ad-price-text a { color: #eee; }

.u-ad-price_dock { background-color: #101010; }
/*** END COLORS ***/

/*** FONTS ***/
@font-face { font-family: "OCR A"; src: url("../../assets/fonts/ocraext.ttf"); }

.u-ad-footer,
.u-ad-price-text { font-family: "OCR A"; letter-spacing: -.05em; }

.u-ad-footer,
.u-ad-price-text { font-size: 5vw; }

.u-ad-footer { text-align: center; }
.u-ad-price { text-align: center; }
.u-ad-price-text a { text-decoration: underline; }
/*** END FONTS ***/

/*** MEDIA ***/
/*** END MEDIA ***/

/*** UTILITIES ***/
	/*** .u-ad ***/
	.u-ad {
		position: relative;
	}
	.u-ad-button {
		position: absolute; top: 32.5%; left: 19%;
		width: 15%; aspect-ratio: 1/1;
		display: block;
		padding: .5em;
		
		border-radius: 50%;
	}
		#chkbx4price:checked ~ main .u-ad-button {// width: 1.9em; }
	.u-ad-footer {
		padding: .75em .5em;
	}
	.u-ad-img {
		display: block;
		margin: 0 auto;
	}
	.u-ad-price {
		position: absolute; top: 37.5%;
		width: 100%;
		padding: 0 10%;
	}
	.u-ad-price_dock {
		padding: .5em;
		border-radius: .5em;
	}
/*** END UTILITIES ***/

/*** INTERACTIIVITY ***/
.u-ad-button { cursor: pointer; }

.u-ad-price { display: none; }
#chkbx4price:checked ~ main .u-ad-price { display: block; }

.u-ad-button img { transform: rotate(-15deg); }
#chkbx4price:checked ~ main .u-ad-button img { transform: rotate(0); }
/*** END INTERACTIIVITY ***/

/*** MEDIA-QUERIES ***/
@media screen and (min-width: 50em) {
	html { max-width: 700px; margin: 0 auto; }
	
	.u-ad { max-width: 19em; }
	
	.u-ad-footer,
	.u-ad-price-text { font-size: 1em; }
}
/*** END MEDIA-QUERIES ***/

/*** ANIMATION ***/
	/*** .u-ad-button ***/
	#chkbx4price:not(:checked) ~ main .u-ad-button { animation: twinkle 1s infinite; }
	
	@keyframes twinkle {
		0% { transform: scale(1); }
		50% { transform: scale(1.19); }
		100% { transform: scale(1); }
	}
/*** END ANIMATION ***/