h1 { font-size: 2.5em; }
.m10 { margin: 10px 0; }
.m20 { margin: 20px 0; }
.m40 { margin: 40px 0; }
.h100 { height: 100%; }

.main-form { width: 350px; overflow: hidden; border-radius: 10px; box-shadow: 5px 20px 50px #000; margin: auto; margin-top: 70px; padding-bottom: 20px;
			 background-image: linear-gradient(to bottom right, #2d2943, #52487f); }
.logo-form { margin: 20px; display: block; }
.logo-form img { height: 100px; }
.main-form h1 { text-align: center; margin: 10px; }
.main-form input { width: 60%; height: 20px; background: #e0dede; justify-content: center; display: flex; margin: 20px auto; padding: 10px;
				   border: none; outline: none; border-radius: 5px; }

.choises { text-align: center; }
.choises img { margin: 20px; zoom: 0.7; vertical-align: middle; }

.time { font-size: 4em; font-weight: bold; background: linear-gradient(to top, #a85d18, #f6c45e); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.personal-links { margin-bottom: 20px; margin-top: 60px; }
.personal-links img { margin: 5px 0; height: 50px; }
.personal-links > div { position: relative; }
.personal-links span { font-size: 13px; color: #000; padding: 5px 10px; top: 5px; position: absolute; white-space: nowrap;
					   left: 45px; opacity: 0; transition: all .3s ease-in-out; background: #fff; padding-bottom: 6px; }
.personal-links span:before { content: ""; width: 15px; height: 35px; background: url(../../img/tip.png) no-repeat; top: 0; left: -1px;
                              position: absolute; display: inline-block; z-index: -1; }
.personal-links > div:hover span { opacity: 1; }

.field { height: 690px; background: url("../../img/Рамки.png") no-repeat 50px 50px; background-size: 800px auto; position: relative; }

.div1 { width: 400px; }
.middle-icons { text-align: right; margin-top: 10px; position: relative; top: 100px; left: 100px; display: none; }
.logo-parent { margin-top: 20px; }

.decks a { display: inline-block; margin: 10px; border-radius: 10px; height: 148px; width: 100px; }
.plusminus { border: 1px solid #bbb; color: #777; display: block; margin: 2px; border-radius: 4px; width: 17px; height: 17px; }
.decks a.active, #deckCardsDiv .card.active { box-shadow: 0px 1px 10px 4px #0032e9; }
.card { display: block; margin: 10px; border-radius: 12px; height: 178px; width: 122px; position: absolute; color: #000;
		font-family: "Prospect"; text-align: center; line-height: 178px; }
.card a { display: block; height: 100%; border-radius: 12px; }
.card a span { display: inline-block; vertical-align: middle; line-height: 18px; }
.card[data-pos='10'] { left: 42px; top: 41px; }
.card[data-pos='20'] { left: 42px; top: 246px; }
.card[data-pos='30'] { left: 238px; top: 246px; }
.card[data-pos='40'] { left: 238px; top: 452px; }
.card[data-pos='31'] { left: 379px; top: 246px; }
.card[data-pos='41'] { left: 379px; top: 452px; }
.card[data-pos='32'] { left: 521px; top: 246px; }
.card[data-pos='42'] { left: 521px; top: 452px; }
.card[data-pos='21'] { left: 716px; top: 246px; }
.card[data-pos='50'] { left: 716px; top: 41px; }
.card-zoom { left: 255px; top: 20px; z-index: 2; width: 366px; height: 534px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); font-size: 45px; line-height: 534px; }
.card span { line-height: 54px; }
.card-rotate { transform: rotate(180deg); }
.card-open { background: #e5c0d8; }

.plus { position: absolute; background: url('../../img/plus1.png') no-repeat center center; background-size: 50%; 
		display: block; height: 178px; width: 122px; animation: heart-pulse 2s infinite ease-out; }
@keyframes heart-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(0.95); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.plus[data-pos='10'] { left: 52px; top: 51px; }
.plus[data-pos='20'] { left: 52px; top: 256px; }
.plus[data-pos='30'] { left: 248px; top: 256px; }
.plus[data-pos='40'] { left: 248px; top: 462px; }
.plus[data-pos='31'] { left: 389px; top: 256px; }
.plus[data-pos='41'] { left: 389px; top: 462px; }
.plus[data-pos='32'] { left: 531px; top: 256px; }
.plus[data-pos='42'] { left: 531px; top: 462px; }
.plus[data-pos='21'] { left: 726px; top: 256px; }
.plus[data-pos='50'] { left: 726px; top: 51px; }

#deckCardsDiv .card { position: relative; display: inline-block; height: 148px; width: 100px; line-height: 148px; }

.remove { position: absolute; background: url('../../img/close-gold.png') no-repeat center center; background-size: 90%; display: block;
		  height: 25px; width: 25px; right: 5px; top: 5px; z-index: 1; cursor: pointer; }
#image, #image div { height: 534px; padding: 0; margin: 0; border-radius: 40px; background: none; }
.rotate { position: absolute; background: url('../../img/rotate-gold.png') no-repeat center center; background-size: 90%; display: block;
		  height: 25px; width: 25px; left: 5px; top: 5px; z-index: 1; cursor: pointer; }
.remove-hs { width: 15px; height: 15px; position: relative; top: 2px; }
.nums { color: #aaa; margin-right: 10px; margin-left: 10px; }
.nums div { flex: 1; }
.num-rows div { color: #aaa; height: 171px; line-height: 171px; }
.card-open .remove { background: url('../../img/close-blue.png') no-repeat center center; background-size: 90%; }
.card-open .rotate { background: url('../../img/rotate-blue.png') no-repeat center center; background-size: 90%; }
.deck-cards { width: 980px; overflow: auto; }

.dialog-close { position: absolute; right: 5px; top: 5px; }
.dialog-close img { height: 20px; }
.field-text { position: absolute; font-family: "Prospect"; color: #ebc575; font-size: 16px; }
.field-text[data-pos='10'] { left: 91px; top: 207px; }
.field-text[data-pos='20'] { left: 84px; top: 412px; }
.field-text[data-pos='30'] { left: 295px; top: 412px; }
.field-text[data-pos='40'] { left: 259px; top: 616px; }
.field-text[data-pos='31'] { left: 436px; top: 412px; }
.field-text[data-pos='41'] { left: 400px; top: 616px; }
.field-text[data-pos='32'] { left: 578px; top: 412px; }
.field-text[data-pos='42'] { left: 541px; top: 616px; }
.field-text[data-pos='21'] { left: 759px; top: 412px; }
.field-text[data-pos='50'] { left: 754px; top: 207px; }

@media screen and (max-width: 1080px) {
	.div1 { width: 100%; }
	.middle-icons { top: 140px; right: -70px; position: absolute; display: block; }
	.middle-icons img { zoom: 0.7; }
    .logo-parent { margin-top: 140px; }
	.us-choise { margin-top: 60px; }
}
@media screen and (max-width: 1200px) {
	.middle-icons { left: 0; }
}