/* ================================================================================== */
/*                                                                                    */
/*                                STYLE-GUIDE-BUY.CSS                                 */
/*                                                                                    */								
/*                        #ffcb05 bar at bottom to entice buying                         */
/*                                                                                    */							 
/* ================================================================================== */

.guide-buy {
	display:none;
	position:fixed;
	bottom:-60px;
	width:100vw;
	height:60px;
	padding-top:5px;
	text-align:center;
	z-index:2;
	cursor:pointer;
	text-decoration:none;
	}

body.free .guide-buy {	/* body.free is set by tiles_paywall in js-tiles.js */
	display:block;
	}

body.show-guide-buy .guide-buy {	/* body.show-guide-buy is set by tiles_paywall in js-tiles.js */
	transition: bottom 1s;
	bottom:50px;
	}

.guide-buy-background {
	position:absolute;
	top:10px;
	left:50vw;
	margin-left:-40vw;
	width:54px;
	height:40px;
	border:1px solid black;
	border-radius:20px;
	background:#ffcb05;
	}

@media (min-width:800px) {
.guide-buy-background {
	width:62px;
	margin-left:-320px;
	}
}

body.show-guide-buy .guide-buy-background {
	width:80vw;
	transition: width .5s 2s, background .1s;
	}

@media (min-width:800px) {
body.show-guide-buy .guide-buy-background {
	width:640px;
	}
}

.guide-buy:hover .guide-buy-background {
	background:black;
	}

.guide-buy-icon {
	position:absolute;
	top:9px;
	left:10vw;
	display:block;
	content:'';
	margin-left:5px;
	width:40px;
	height:40px;
	width:40px;
	height:40px;
	background-repeat:no-repeat;
	background-position:center;
	background-size:100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 512 512'%3E%3Cpath d='M432,144H405L369,81H207l-36,63-26.9,0H144a63,63,0,0,0-63,63V369a63.05,63.05,0,0,0,63,63l67.53,0L180,378l-36,0a9,9,0,0,1-9-9V207a9,9,0,0,1,9-9h0l39.48,0a32.68,32.68,0,0,0,28.4-16.47L238.5,135h99l26.64,46.62A32.51,32.51,0,0,0,392.37,198H432a9,9,0,0,1,9,9V369a9,9,0,0,1-9,9l-36,0-31.47,54H432a63,63,0,0,0,63-63V207A63.07,63.07,0,0,0,432,144Z M380.2,344.34a108,108,0,1,0-185-1.07h0L288,504ZM234,288a54,54,0,1,1,54,54A54,54,0,0,1,234,288Z'/%3E%3C/svg%3E%0A");
	transition:background-image .1s;
	}

@media (min-width:800px) {
.guide-buy-icon {
	left:50vw;
	margin-left:-310px;
	}
}

.guide-buy:hover .guide-buy-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffd700' viewBox='0 0 512 512'%3E%3Cpath d='M432,144H405L369,81H207l-36,63-26.9,0H144a63,63,0,0,0-63,63V369a63.05,63.05,0,0,0,63,63l67.53,0L180,378l-36,0a9,9,0,0,1-9-9V207a9,9,0,0,1,9-9h0l39.48,0a32.68,32.68,0,0,0,28.4-16.47L238.5,135h99l26.64,46.62A32.51,32.51,0,0,0,392.37,198H432a9,9,0,0,1,9,9V369a9,9,0,0,1-9,9l-36,0-31.47,54H432a63,63,0,0,0,63-63V207A63.07,63.07,0,0,0,432,144Z M380.2,344.34a108,108,0,1,0-185-1.07h0L288,504ZM234,288a54,54,0,1,1,54,54A54,54,0,0,1,234,288Z'/%3E%3C/svg%3E%0A");
	}

/* Guide buy: text */

.guide-buy-text {
	position:absolute;
	top:10px;
	left:50vw;
	margin-left:-40vw;
	width:80vw;
	height:40px;
	overflow:hidden;
	line-height:40px;
	font-size:4vw;
	color:black;
	text-align:center;
	opacity:0;
	transition: opacity .5s 3s, color .1s;
	}

@media (min-width:500px) {
.guide-buy-text {
	font-size:20px;
	}
}

body.show-guide-buy .guide-buy-text {
	width:80vw;
	opacity:1;
	}

.guide-buy-text > * {
	display:block;
	width:100%;
	text-align:center;
	}	

.guide-buy:hover .guide-buy-text {
	color:#ffcb05;
	}

/* Guide buy: reason 	transition: opacity .5s 20s, color .1s;
color:red;*/

.guide-buy-reason {
	opacity:0;
	transition: opacity .5s 5s, color .1s;
	}

body.show-guide-buy .guide-buy-reason {
	opacity:1;
	}

.guide-buy-reason > * {
	position:absolute;
	box-sizing:border-box;
	left:90vw;
	top:12px;
	width:60px;
	margin-left:-54px;
	padding-top:6px;	
	text-align:center;
	height:38px;
	color:black;
	line-height:14px;
	font-size:12px;
	color:black;
	opacity:0;
	}

.guide-buy:hover .guide-buy-reason > * {
	color:#ffcb05;
	}

@media (min-width:800px) {
.guide-buy-reason > * {
	left:50vw;
	margin-left:260px;
	}
}
/* Flash */
.guide-buy-flash-1, .guide-buy-flash-2, .guide-buy-flash-3 {
	position:absolute;
	-webkit-animation-duration: 12s; /* Safari 4.0 - 8.0 */
	animation-duration: 12s;
	animation-delay: 3s;
	animation-iteration-count: infinite;
}

.guide-buy-flash-1 {
	-webkit-animation-name: guide-flash-1; /* Safari 4.0 - 8.0 */
	animation-name: guide-flash-1;
}

.guide-buy-flash-2 {
	-webkit-animation-name: guide-flash-2; /* Safari 4.0 - 8.0 */
	animation-name: guide-flash-2;
}

.guide-buy-flash-3 {
	-webkit-animation-name: guide-flash-3; /* Safari 4.0 - 8.0 */
	animation-name: guide-flash-3;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes guide-flash-1 {
	  0% {opacity:1;}
     33% {opacity:1;}
     36% {opacity:0;}
	 97% {opacity:0;}
	100% {opacity:1;}
}

/* Standard syntax */
@keyframes guide-flash-1 {
	  0% {opacity:1;}
     33% {opacity:1;}
     36% {opacity:0;}
	 97% {opacity:0;}
	100% {opacity:1;}
	}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes guide-flash-2 {
	  0% {opacity:0;}
     33% {opacity:0;}
     36% {opacity:1;}
     66% {opacity:1;}
     69% {opacity:0;}
	100% {opacity:0;}
}

/* Standard syntax */
@keyframes guide-flash-2 {
	  0% {opacity:0;}
     33% {opacity:0;}
     36% {opacity:1;}
     66% {opacity:1;}
     69% {opacity:0;}
	100% {opacity:0;}
	}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes guide-flash-3 {
	  0% {opacity:0;}
     66% {opacity:0;}
     69% {opacity:1;}
     97% {opacity:1;}
	100% {opacity:0;}
}

/* Standard syntax */
@keyframes guide-flash-3 {
	  0% {opacity:0;}
     66% {opacity:0;}
     69% {opacity:1;}
     97% {opacity:1;}
	100% {opacity:0;}
	}