/* =========== © 2017 Centroarts.com for https://magenta.su =========== */

/* --- Продукция --- */
.section_head.product_head {
	padding-bottom: 7%;
	background-image: url(../images/polygon_pattern.png);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 1500px auto;
}
.section_head.product_head .intro { padding-bottom: 0; }

/* Презентация продукции */
.presentation > .present_item:first-child { margin-top: 0; }
.present_item { margin-top: 10%; }
.present_item > .title { text-align: center; font-weight: bold; margin-bottom: 1em; }
.present_item .subtitle { color: var(--color-primary); font-weight: normal; margin-bottom: 1em; }

ul.advantage, ul.disadvantage { list-style: none; padding: 0; margin: 0 0 2rem 0; }
ul.advantage > li, ul.disadvantage > li { margin-top: .6em; position: relative; padding-left: 25px; }
ul.advantage > li:before, ul.advantage > li:after, ul.disadvantage > li:before { content: ""; position: absolute; left: 0; top: 6px; background-color: var(--color-primary); }
ul.advantage > li:before, ul.disadvantage > li:before { width: 12px; height: 2px; margin-top: 5px; }
ul.advantage > li:after { width: 2px; height: 12px; margin-left: 5px; }

.present_img { margin: 0 auto; }
.present_img > img { max-width: 100%; }

/* Демонстрация карты */
.present_card { margin-bottom: 60px; }
	.present_card:after { clear: both; display: block; content: ""; }
	.present_card > .present_card_1 { float: left; }
	.present_card > .present_card_2 { float: right; }
	.present_card > div > p { font-size: .85em; opacity: .4; }
	.p_card {
		display: block; width: 480px; height: 300px; position: relative;
	}
	.p_card:after, .p_card:before {
		content: ""; display: block;
		background-repeat: no-repeat;
		background-size: 100% auto;
	}
	.p_card:after {
		position: relative; z-index: 1; width: 100%; height: 100%;
		background-image: url(../images/card_present.png);
		background-repeat: no-repeat;
		background-size: 100% auto;
	}
	.present_card_1 > .p_card:after { background-position: 0 100%; }
	.present_card_2 > .p_card:after { background-position: 0 0; }

	.p_card:before {
		position: absolute; width: 108%; height: 108%;
		background-image: url(../images/card_shadow.png);
	}

/* Переключатель */
.present_card_select { list-style: none; padding: 0; margin: 0; }
.present_card_select:after { clear: both; display: block; content: ""; }
	.present_card_select > li { float: left; width: 20%; line-height: 1.5em; height: 4.5em; margin-top: 1em; padding: 0 20px 0 32px; font-size: .9em; }
	.present_card_select > li > i { cursor: pointer; float: left; margin: 1px 0 0 -32px; width: 22px; height: 22px; border: 2px solid rgba(255,255,255,0.1); border-radius: 50%; }
	.present_card_select > li > i:after { content: ""; display: none; border-radius: 50%; width: 12px; height: 12px; background-color: #fff; margin: 3px 0 0 3px; }
	.present_card_select > li > * { display: block; }
	.present_card_select > li.active > i { border-color: var(--color-primary); }
	.present_card_select > li.active > i:after { display: block; }
	.present_card_select > li a { font-size: .9em; }

	.card_dot {
		position: absolute; left: 0; top: 0; z-index: 4; width: 32px; height: 32px;
		background-color: rgba(255,255,255,0.5); border: 2px solid var(--color-primary); border-radius: 50%;
		animation: zoomer 1.5s infinite ease-in-out;
	}
	@-webkit-keyframes zoomer {
		0% { opacity: .4; }
		50% { opacity: 1; }
		100% { opacity: .4; }
	}
	@keyframes zoomer {
		0% { opacity: .4; }
		50% { opacity: 1; }
		100% { opacity: .4; }
	}
	.card_dot { display: none; }
	.card_dot.active { display: block; }

	#dot-1 { margin: -6px 0 0 -6px; }
	#dot-2 { margin: 250px 0 0 270px; }
	#dot-3 { margin: 45px 0 0 45px; }
	#dot-4 { margin: 207px 0 0 108px; }
	#dot-5 { margin: 142px 0 0 310px; }
	#dot-6 { margin: 253px 0 0 380px; }
	#dot-7 { margin: 250px 0 0 50px; }
	#dot-8 { margin: 190px 0 0 170px; }
	#dot-9 { margin: 255px 0 0 340px; }
	#dot-10 { margin: 135px 0 0 162px; }

/* Кардхолдеры */
.cardholders { padding-bottom: 0; overflow: hidden; }
	.cardholders > ul { list-style: none; padding: 0; margin: 0 -1px 0 0; }
	.cardholders > ul > li { border: 1px solid #f0f0f0; border-width: 1px 1px 0 0; width: 33.333333%; float: left; }
	.cardholders > ul > li > a { padding: 10%; display: block; cursor: pointer; color: inherit; text-decoration: none !important; text-align: center; }
	.cardholders > ul > li > a > figure { display: block; margin: 0 auto; max-width: 342px; }
	.cardholders > ul > li > a > figure img { max-width: 100%; }
	.cardholders > ul > li > a > p { font-size: .9em; margin: 1.5rem 0 0 0; width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

@media only screen and (max-width: 1050px) {
	.present_card > .present_card_1, .present_card > .present_card_2 { float: none; }
	.present_card > .present_card_2 { margin-top: 30px; }
	.present_card > div > p { text-align: center; }
	.p_card { margin: 0 auto; }
}
@media only screen and (max-width: 880px) {
	.present_card { margin-bottom: 40px; }
	.present_card_select > li { width: 33.33333%; }
}
@media only screen and (max-width: 600px) {
	.present_card { margin-left: -10px; margin-right: -10px; }
	.p_card { width: 300px; height: 188px; }
	#dot-1 { margin: -6px 0 0 -6px; }
	#dot-2 { margin: 160px 0 0 170px; }
	#dot-3 { margin: 30px 0 0 45px; }
	#dot-4 { margin: 127px 0 0 68px; }
	#dot-5 { margin: 102px 0 0 190px; }
	#dot-6 { margin: 150px 0 0 210px; }
	#dot-7 { margin: 150px 0 0 20px; }
	#dot-8 { margin: 140px 0 0 120px; }
	#dot-9 { margin: 145px 0 0 230px; }
	#dot-10 { margin: 80px 0 0 132px; }

	.present_card_select > li { width: 50%; }

	.cardholders > ul > li { width: 50%; }
}