body, html {
	background: url("../img/bck.png");	
	height:100%;
	margin:0;
	padding:0;
}

#page {		
	height: 100vh; 
	display: flex;
  	align-items: center;
  	justify-content: center;
  	padding:30px;
}

#page h1.title {
	text-align:center;
	color:darkred;
	font-size: 18px;
	margin:0 0 15px 0;
	text-shadow: 0 0 5px #FFF;
}

#page.buy {
	padding: 50px 0;
	display: block;
	height: auto; 	
}

#page.preview {	
	padding-top:20px;
	height: auto; 
	display: inherit;
	text-align:center;
}

@media (min-width: 576px) {  
 	#page {
		padding:0;
	}
	#page h1.title {
		font-size: 18px;
	}
}
 
@media (min-width: 768px) {  
 	#page {
		padding:0;
	}
	#page h1.title {
		font-size: 24px;
	}
}
 
@media (min-width: 992px) { 
 	#page {
		padding:0;
	}
	#page h1.title{
		font-size: 28px;
	}
} 

@media (min-width: 1200px) {  
    #page {
		padding:0;
	}
	#page h1.title { 
		font-size: 32px;
	}
}

@media (min-width: 1300px) {  
    #page {
		padding:0;
	}
	#page h1.title {
		font-size: 32px;
	}
}

@media (min-width: 1600px) {  
    #page {
		padding:0;
	}
	.container {
		max-width:90% !important;
	}
	#page h1.title {
		font-size: 32px;
	}

}


.info {
	position: absolute;
	background-color:lightblue;
	opacity:0.9;
	padding:20px;
	font-size:14px;
	bottom:10px;
	left:10px;
	font-weight: bold;
	border-radius:5px;
	box-shadow:0 0 2px #FFF;
}

.info ol {
	padding:0;
	margin:0 0 0 20px;
}

header, footer {
	font-size: 10px;
	top:0;
	left:0;
}

header {
	position:relative;
	text-align: center;
	padding:0;
}

header h1 {
	padding:0;
	margin:0;
	color:darkred;
}

header ul {
	list-style:none;
	margin:0;
	padding:0;
}

header ul li {
	vertical-align: middle;
	display: table-cell;
	padding-left: 20px;
}

header ul li .heart {
	display: block;
	width:30px;
	fill: darkred;
}

header ul li .heart.xs{
	width: 30px;
	fill: lightblue;
}

header ul li .heart.sm{
	width: 30px;
	fill: gold;
}

header ul li .heart.md{
	width: 30px;
	fill: silver;
}

header ul li .heart.xl{
	width: 30px;
	fill: brown;
}

header ul li .heart:hover {
	/*fill: red !important;*/
  	filter: drop-shadow(0 0 5px red);

}




a {
	font-size: 12px;
	color:#000;
	font-weight:bold;
}

footer {
	text-align: right;
	top:auto;
	bottom:10px;
	right:30px;

}


.pixelart {
	position:relative;
	height:90vh;
	display:none;
	text-transform:capitalize;
}

.pixelart .p, .pixelart .b {
	width: calc(100% / 35);
	height: calc(90vh / 52);	
	background:transparent;
	content:" ";
	border:none;	
}

.pixelart .p {
	font-size:5px;
	text-align: center;
	vertical-align: middle;
	line-height: calc(90vh / 52);
	transition: 0.2s;
}

.pixelart .p.o {
	opacity:0.5;
	color: red;
}



@media (max-width: 992px) { 
  	.pixelart {
		height:90vh;
	}

	.pixelart .p, .pixelart .b {
		width: calc(100% / 35);
		height: calc(90vh / 52);	
	}

	.pixelart .p {
		line-height: calc(90vh / 52);
	}
} 

@media (max-width: 768px) {  
  	.pixelart {
		height:90vh;
	}

	.pixelart .p, .pixelart .b {
		width: calc(100% / 35);
		height: calc(90vh / 52);	
	}

	.pixelart .p {
		line-height: calc(90vh / 52);
	}
}


@media (max-width: 576px) {  
  	.pixelart {
		height:50vh;
	}

	.pixelart .p, .pixelart .b {
		width: calc(100% / 35);
		height: calc(50vh / 52);	
	}

	.pixelart .p {
		line-height: calc(50vh / 52);
	}
}


#page.love {
	background: url("../img/heart-love-bck.png");	
}

#page.love .pixelart .p {
	background-color:rgba(255,0,0,0.1);
}

#page.forbidden-love {
	background: url("../img/heart-forbidden-bck.png");	
}

#page.forbidden-love .pixelart .p {
	background-color:rgba(255,0,255,0.1);
}

#page.friendship {
	background: url("../img/heart-friendship-bck.png");	
}

#page.friendship .pixelart .p {
	background-color:rgba(255,255,0,0.1);
}

@keyframes fade {
    /*from {background-color:rgba(255,0,0,0.2);color:default;}
    to {background-color:rgba(255,0,0,0);color:red;}*/
    /*from {color:default;}
    to {color:red;}*/
}

.pixelart .p:hover {
	animation: none;
	background-color: red !important;
	color:#FFF !important;
	transform: scale(1.5);
	border-radius:5px;
	cursor:pointer;
}

.pixelart .p.o:hover {
	opacity:1;
}

#md {
	width:1380px;
}

#md .p, #md .b {
	width:60px;
	height:36px;
	font-size:10px;
	line-height: 36px;
}

#sm {
	width:1020px;
}

#sm .p, #sm .b {
	width:60px;
	height:36px;
	font-size:10px;
	line-height: 36px;
}

#xs {
	width:660px;
}

#xs .p, #xs .b {
	width:60px;
	height:36px;
	font-size:10px;
	line-height: 36px;
}

#xxs {
	width:300px;
}

#xxs .p, #xxs .b {
	width:60px;
	height:36px;
	font-size:10px;
	line-height: 36px;
}

.pixelimg {
	position:relative;
	margin: 0 auto;
	width: 1400px;
	height: 1100px;
}

.pixelimg .p, .pixelimg .b {
	display:block;
	width:10px;
	height:10px;
	content:"A";
	border:none;
	
}

.pixelimg .p {
	font-size:5px;
	text-align: center;
	vertical-align: middle;
	background-color:red;
}

.buy form {
	background-color:#FFF;
	padding:20px;
	border-radius: 10px;
}

.buy .form-group {
	clear:both;
}

.buy h2 {
	text-align:center;
	color: red;
}

.buy h2:first-child {
	
}

@media (max-width: 576px) { 
	.buy h2 {
		font-size:18px;
	}
}


.buy form label {
	
}

.buy .form-check {
	text-align:center;
	font-size:18px;
}

.buy #selectableFont .ui-selected { 	
	color: red; 
	font-weight:bold;
	text-decoration: underline;
	background-color:#EEE;
	border-radius:10px;
	box-shadow:0 0 5px #000;
}

.buy #selectableFont { 
	list-style-type: none; 
	margin: 0; 
	padding: 0; 
}
.buy #selectableFont li { 
	margin: 0; 
	padding: 5px 10px; 
	display:inline-block;
	font-size: 2.1em; 
	text-align: center; 
	color:#666;
	cursor:pointer;
}


.buy #selectableColor .ui-selected { 	
	border:5px solid #FFF;
	color: white; 
	width: 90px; 
	height: 90px; 
	box-shadow:0 0 5px #000;
	border-radius:10px;
}

.buy #selectableColor { 
	list-style-type: none; 
	margin: 0; 
	padding: 0; 
}
.buy #selectableColor li { 
	border:5px solid none;
	margin: 5px; 
	padding: 1px; 
	display:inline-block;
	width: 90px; 
	height: 90px; 
	text-align: center; 
	cursor:pointer;
	border-radius:10px;
}

.buy #selectableBck .ui-selected img{ 	
	border:5px solid red;
	color: white; 
	width: 100px; 
	height: 100px; 
	box-shadow:0 0 5px #000;
	border-radius:10px;
}

.buy #selectableBck { 
	list-style-type: none; 
	margin: 0; 
	padding: 0; 
}
.buy #selectableBck li { 
	border:5px solid none;
	margin: 5px; 
	padding: 1px; 
	display:inline-block;
	text-align: center; 
	cursor:pointer;
}

.buy #selectableBck li img {
	width: 100px; 
	height: 100px; 
	border-radius:10px;
}


@media (max-width: 576px) { 
	.buy #selectableFont li { 
		font-size: 1.4em; 
	}
	.buy #selectableColor li { 
		width: 50px; 
		height: 50px; 
	}
	.buy #selectableColor .ui-selected { 	
		width: 50px; 
		height: 50px; 
	} 
	.buy #selectableBck .ui-selected img{ 	
		width: 50px; 
		height: 50px;  
	}

  	.buy #selectableBck li img {
		width: 50px; 
		height: 50px; 
	}
}