a, 
button { transition: all .3s; }

img,
svg { max-width: 100%; height: auto; }

.styled-title { font-size: 40px; line-height: 52px; font-weight: bold; }
.styled-title span { color: #D0A285; font-weight: normal; }

.plan-selector { background: #2A4252; color: #fff; }
.plan-selector h2 { margin: 30px 0 16px; }
.plan-selector h3 { font-size: 24px; line-height: 30px; margin: 0; }
.plan-selector nav { padding-top: 8px; font-size: 18px; line-height: 2em; display: none; }
.plan-selector a { color: inherit; display: block; }
.plan-selector a:after { content: url('../images/flats/caret-right.png'); float: right; margin-top: 14px; }
.plan-selector a span { color: #D0A285; font-weight: bold; margin-right: 10px; }

.go-back-link { color: #5A778A; }
.go-back-link:hover { color: #D0A285; }
.go-back-link svg { margin-right: 17px; }

main.flat-select { padding: 145px 0 40px; }

.title { font-size: 32px; line-height: 40px; margin: 8px 0 0; position: relative;  }
.title:after { content: url('../images/flats/compas-down-s.png'); transform: rotate(180deg); display: block; position: absolute; right: 0; top: 0; }
.title.nr:after { content: url('../images/flats/compas-right-s.png'); }

.level-number { font-size: 24px; line-height: 31px; margin: 0 0 22px; }

.flat-plan .title { font-weight: normal; }
.flat-plan .title span { font-weight: bold; }
.flat-plan .plan svg { max-height: 1200px; width: auto; display: block; margin: auto; }

.plan-wrap svg { display: block; margin: auto; }
.plan-wrap .iphone-bg { display: none; }

form.ask { max-width: 300px; margin: 0 auto 30px; }
form.ask h2 { text-align: center; line-height: 30px; margin-bottom: 28px; }
form.ask h2 span { color: #D0A285; display: block; }
form.ask label { display: block; font-size: 10px; line-height: 13px; text-transform: uppercase; margin-bottom: 6px; }
form.ask input { border: 1px solid #C4C4C4; border-radius: 8px; letter-spacing: -0.03em; color: #2A4252;font-size: 16px; line-height: 48px; display: block; margin-bottom: 13px; padding: 0 16px; }
form.ask input:focus { border-color: #d0a285; outline: none; }

form.ask input,
form.ask button { width: 100%; }

form.ask button { margin-top: 19px; text-transform: uppercase; font: bold 18px DINPro; padding: 22px 30px; border-radius: 40px; border: none; }

.description { background: #2A4252; color: #fff; position: relative; }
.description .navigation { background: #445D6D; position: absolute; top: -32px; }
.description .position-item { font-size: 14px; line-height: 24px; text-align: center; padding: 8px 33px; font-weight: bold; }
.description .position-item span { display: block; font-size: 24px; }
.description .navigation nav a { display: flex; justify-content: center; align-items: center; background: #D0A285; }
.description .navigation nav a.disabled { background: #e8d1c2; pointer-events: none; } 

.description-info p { margin: 18px 0; }
.description-info .key { font-size: 14px; line-height: 18px; font-weight: bold; text-transform: uppercase; color: #D0A285; display: block; }
.description-info .value { font-weight: bold; font-size: 24px; line-height: 30px; }
.description-info table { color: inherit; line-height: 35px; }
.description-info table td { vertical-align: top; }
.description-info table td:first-of-type { width: 160px; }
.description-info table td:last-of-type { font-weight: bold; }

.description .download-link { font-size: 16px; line-height: 20px; text-transform: uppercase; font-weight: bold; display: block; text-align: center; color: #fff; height: 72px; margin-top: 40px; }
.description .download-link:after { content: url('../images/flats/pdf.svg'); display: block; margin: 8px auto 0; border: 10px solid #506979; background: #1ABC9C; border-radius: 50%; width: 88px; height: 88px; padding: 18px 0 0 3px; box-sizing: border-box; transition: all .3s; }
.description .download-link:hover { color: #D0A285; }
.description .download-link:hover:after { background: #D0A285; border-width: 5px; padding-top: 23px; }

.flat-overlay { fill: rgba(208, 162, 133, 0); transition: fill .3s; }
g.overlays path:not(.flat-overlay) { fill: rgba(236, 99, 114, 0.7); transition: fill .3s; }

.benefits { margin-bottom: 30px; }
.benefits-wrap { margin: 0 15px 30px; color: #2A4252; }\

.benefits-wrap .styled-title span,
.repair .styled-title span { display: block; }

.benefits-wrap ol,
.benefits-wrap ul { list-style: none; margin: 0; padding: 0; }

.benefits-wrap ol { counter-reset: num; }
.benefits-wrap ol>li { font-size: 24px; line-height: 2.1em; position: relative; }
.benefits-wrap ol>li>span { transition: all .3s; }
.benefits-wrap ol>li:hover>span { color: #D0A285; }
.benefits-wrap ol>li:before { content: counter(num, decimal-leading-zero); counter-increment: num; color: #EBC5AD; margin-right: 15px; transition: all .3s; }

.benefits-wrap ol>li.active:before { font-weight: bold; color: #D0A285; }
.benefits-wrap ol>li:hover:before { color: #2A4252; }
.benefits-wrap ol>li:after { content: url('../images/flats/caret-down-black.png'); position: absolute; right: 0; top: 20px; transition: all .3s; }

.benefits-wrap ol>li:hover:after { content: url('../images/flats/caret-down-brown.png'); }
.benefits-wrap ol>li.active:after { transform: rotate(180deg); }
.benefits-wrap ol>li:not(.active) { border-bottom: 1px solid #E9E9E9; cursor: pointer; }
.benefits-wrap ol>li ul { font-size: 16px; line-height: 1.7em; padding: 10px 0 10px 45px; display: none; }
.benefits-wrap ol>li.active ul { border-top: 1px solid #E9E9E9; }
.benefits-wrap ul li:before { content: ''; display: inline-block; width: 4px; height: 4px; vertical-align: middle; border-radius: 50%; background: #D0A285; margin-right: 15px; }

.benefits .owl-dots { text-align: center; }
.benefits .owl-dot span { display: block; border-radius: 50%; width: 8px; height: 8px; background: #395A6F; margin: 1em .5em; transition: all .3s; }
.benefits .owl-dot:hover span,
.benefits .owl-dot.active span { background: #D0A285; }

.repair { margin: 40px 0 30px; font-size: 20px; color: #2A4252; }
.repair .styled-title { margin-top: 30px; }
.repair-text { padding: 0 16px; }
.repair .styled-title,
.repair-text p { margin-bottom: 24px; }
.repair .download-link { background: #D0A285; border-radius: 100px; height: 64px; display: flex; align-items: center; justify-content: center; max-width: 300px; font-size: 18px; font-weight: bold; color: #fff; text-transform: uppercase; margin-top: 8px; position: relative; }
.repair .download-link:hover,
.repair .download-link:active { background: #b17d5d; color: #fff; }
.repair .download-link:before { content: url('../images/flats/pdf.svg'); margin-right: 15px; }
.repair .download-link:after { content: ''; position: absolute; top: 2px; left: 3px; width: calc(100% - 10px); height: calc(100% - 8px); border: 2px solid #fff; border-radius: 40px; opacity: 0; transition: 0.54s; display: block; }
.repair .download-link:hover:after,
.repair .download-link:active:after { opacity: .5; }

@media (max-width: 374px) { .repair .styled-title { font-size: 36px; }}

@media (min-width: 768px) and (max-width: 1199px) {
	form.ask { margin: 74px auto 30px; }
	.flat-plan .description p { float: left; width: 50%; clear: left; }
}

@media (max-width: 999px) { .repair .download-link { margin: auto; }}

@media (min-width: 1000px) {
	.repair { display: flex; }
	.repair img { width: 50%; object-fit: cover; max-width: 884px; }
	.repair-text { background: #F7F7F7; width: 50%; padding: 0 30px 30px; }
}

@media (max-width: 1199px) {
	.plan-selector { padding: 1px 15px 50px; }
	.plan-selector .desktop-wrap { display: none; }
	.plan-selector h3 { border-bottom: 1px solid #435F72; padding: 14px 0; }
	.plan-selector h3:before { content: url('../images/flats/caret-down.png'); margin-right: 13px; transition: all .3s; vertical-align: middle; display: inline-block; }
	.plan-selector div.open h3:before { transform: rotate(180deg); }
	.plan-selector .section.s5-6 nav { display: block; }

	.desktop { display: none; }

	.description .navigation { width: 130px; left: calc(50% - 130px / 2); }
	.description .navigation nav a { position: absolute; top: 0; width: 65px; height: 100%; }
	.description .navigation nav a.prev { left: -65px; border-radius: 8px 0 0 8px; }

	.description .navigation nav a.next { right: -65px; border-radius: 0 8px 8px 0; }

	.level-plan .description { background: none; }
	.level-plan .description-info,
	.level-plan .description .download-link:after { display: none; }
	.level-plan .description .download-link { background: #D0A285; border-radius: 100px; height: 64px; display: flex; align-items: center; justify-content: center; margin: 30px auto 50px; max-width: 300px; }
	.level-plan .description .download-link:hover,
	.level-plan .description .download-link:active { background: #E3BAA0; color: #fff; }
	.level-plan .description .download-link:before { content: url('../images/flats/pdf.svg'); margin-right: 15px; }
	.level-plan .description .navigation { position: relative; top: 0; margin-top: 30px; }
	.flat-plan .description { margin: 65px -5.5% 80px; padding: 57px 6% 0; }
}

@media (min-width: 1200px) {
	.go-back-link { margin-bottom: 40px; }
	.go-back-link svg { margin-right: 13px; border: 1px solid #5A778A; border-radius: 24px; padding: 0 12px; width: 48px; height: 48px; vertical-align: middle; transition: all .3s; }
	.go-back-link:hover svg { border-color: #D0A285; }
	.go-back-link:hover svg path { fill: #D0A285; }

	.styled-title span:before { content: ''; display: inline-block; width: 70px; height: 3px; background: #D0A285; margin-right: 27px; vertical-align: middle; }

	.plan-selector { position: relative; overflow: hidden; }
	.plan-selector h2 { text-align: center; margin: 0; padding: 25px 0; position: relative; z-index: 1; background: #2b4252; }
	.plan-selector h2:before,
	.plan-selector h2:after { content: ''; position: absolute; width: 20%; top: 0; bottom: 0; }
	.plan-selector h2:before { left: 0; background: url('../images/flats/hils-1.jpg') no-repeat bottom left; background-size: contain; }
	.plan-selector h2:after { right: 0; background: url('../images/flats/hils-2.jpg') no-repeat bottom right; background-size: contain; }
	.plan-selector h3 { font-weight: normal; text-shadow: 0 0 10px #000; }
	.plan-selector a:after { display: none; }

	.plan-selector .section { position: absolute; }
	.plan-selector .section.s4 { top: 42%; left: 21%; }
	.plan-selector .section.s5-6 { left: 42%; top: 24%; }
	.plan-selector .section.s8-9 { left: 48%; top: 33%; }
	.plan-selector .section.s10-11 { top: 31.5%; right: 29%; }
	.plan-selector .section.s12 { top: 59%; left: 30%; }
	.plan-selector .section.s13 { right: 28%; top: 39%; }
	.plan-selector .section.s14 { right: 18%; top: 33%; }
	.plan-selector .section.s15-16 { right: 10%; top: 41%; }

	svg.building-highlight .dot:hover { cursor: pointer; }
	svg.building-highlight .dot path:nth-of-type(1) { animation: pulse 2s infinite; stroke: rgba(249,218,202,.4); stroke-opacity: 1; stroke-width: 0; }

		@keyframes pulse {
		  0% { stroke-width: 0; stroke-opacity: 1; }
		  100% { stroke-width: 30; stroke-opacity: 0; }
		}

	svg.building-highlight g.hovers path.building { display: none; }
	svg.building-highlight g.hovers .level { opacity: 0; transition: all .3s; }
	svg.building-highlight g.hovers g.active .level:hover { opacity: 1; }
	svg.building-highlight g.hovers g:not(.active) a { pointer-events: none; }

	.level-info-item { position: absolute; display: none; }
	.level-info-item.s5-6 { top: 205px; left: 15%; }
	.level-info-item.s7 { top: 40%; left: 40%; }
	.level-info-item.s8-9 { top: 280px; left: 31%; }
	.level-info-item.s10-11 { top: 41%; right: 28%; }
	.level-info-item.s12 { bottom: 44%; right: 36%; }
	.level-info-item.s13 { right: 17%; top: 43%; }
	.level-info-item.s14 { right: 7%; top: 13%; }
	.level-info-item.s15-16 { right: 46%; bottom: 30%; }

	.level-info-building-number { font-weight: bold; font-size: 12px; line-height: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: #2A4252; background: #EBC5AD; border-radius: 8px 8px 0px 0px; display: block; padding: 7px 16px; }
	.level-info-inner { min-width: 150px; background: rgba(42, 66, 82, 0.9); border: 1px solid #EBC5AD; box-sizing: border-box; border-radius: 8px; padding: 0 15px 5px; position: absolute; left: 50%; transform: translate(-50%,0); line-height: 1.3em; font-size: 20px; }
	.level-info-inner:after { content: ''; border: 48px solid transparent; border-right: 9px solid #EBC5AD; display: block; position: absolute; right: 100%; top: calc(50% - 48px); }
	.level-info-item.left .level-info-inner:after { border-left: 9px solid #EBC5AD; border-right-color: transparent; left: 100%; }
	.level-info-item.s14 .level-info-inner:after { display: none; }

	.level-sold { text-align: center; }
	.level-info-inner.sold,
	.level-info-inner.sold.left { text-align: left; }
	.level-info-inner.sold .level-sold { margin-top: 10px; }
	.level-info-inner.sold p:not(.level-sold) { font-size: 18px; }

	.level-info-number { font-weight: bold; color: #EBC5AD; border-bottom: 1px solid rgba(255, 255, 255, 0.2); text-align: center; padding: 13px 0 9px; margin: 0 0 10px; }
	.level-info-inner p:not(.level-info-number) { position: relative; margin: 0 0 10px; }
	.level-info-item:not(.left):not(.sold) p:not(.level-info-number):not(.level-sold) { text-align: right; }
	.level-info-inner p:not(.level-info-number) span { position: absolute; top: 1px; display: block; white-space: nowrap; text-shadow: 0 0 10px #000; }
	.level-info-item.left .level-info-inner p:not(.level-info-number) span { right: calc(100% + 12px); }
	.level-info-item:not(.left) .level-info-inner p:not(.level-info-number) span { left: calc(100% + 12px); }
	.level-info-item.left .level-info-inner p:not(.level-info-number) span:after,
	.level-info-item:not(.left) .level-info-inner p:not(.level-info-number) span:before { content: ''; display: inline-block; width: 8px; height: 8px; background: #EBC5AD; border-radius: 50%; vertical-align: 4px; }
	.level-info-item.left .level-info-inner p:not(.level-info-number) span:after {margin-left: 10px; }
	.level-info-item:not(.left) .level-info-inner p:not(.level-info-number) span:before { margin-right: 10px; }		

	main.flat-select { padding: 200px 0 60px; }
	.flat-select .container { display: flex; align-items: flex-start; justify-content: space-between; }
	.block-wrap { order: 1; display: flex; flex-direction: column-reverse; }
	.plan { order: 2; width: 36%; }
	.description { order: 3; }

	.title { margin: 0 0 50px; text-align: center; }
	.title:after { right: -27px; top: -6px; }
	.title.nr:after { right: -33px; }

	.plan { position: relative; }	
	.plan-wrap { max-height: calc(100vh - 230px); overflow: auto; padding-right: 50px; }
	.plan-wrap::-webkit-scrollbar { width: 2px; }
	.plan-wrap::-webkit-scrollbar-track { box-shadow: inset 0 0 6px #E9E9E9; }
	.plan-wrap::-webkit-scrollbar-thumb { background: #D0A285; border-radius: 8px; }

	.description { border-radius: 16px; padding: 50px 50px 0; width: 350px; margin-top: 45px; }
	.flat-plan .description { padding-top: 18px; position: sticky; top: 70px; }
	.flat-plan .plan,
	.flat-plan .block-wrap { position: sticky; top: 30px; }
	.level-plan .description-info { display: none; }

	.description .navigation { border-radius: 24px; overflow: hidden; display: flex; position: absolute; top: -45px; right: -65px; }
	.description .position { display: flex; align-items: center; border: 1px solid #506979; height: 100%; border-radius: 24px 0 0 24px; }
	.description .position-item { font-size: 12px; line-height: 24px; font-weight: bold; text-align: center; padding: 5px 20px; margin: 10px 0; min-width: 100px; }
	.description .position-item:not(:first-of-type) { border-left: 1px solid #587384; }
	.description .position-item span { display: block; font-size: 36px; line-height: 36px; }
	.description .navigation nav { background: #D0A285; width: 65px; } 
	.description .navigation nav a { display: flex; height: 50%; line-height: 100%; justify-content: center; align-items: center; }
	.description .navigation nav a:not(.disabled):hover { background: #E3BAA0; }
	.description-info .table-wrap { max-height: 180px; overflow: auto; padding-right: 10px; }
	.description-info .table-wrap::-webkit-scrollbar { width: 2px; }
	.description-info .table-wrap::-webkit-scrollbar-track { box-shadow: inset 0 0 6px #3E5666; }
	.description-info .table-wrap::-webkit-scrollbar-thumb { background: #fff; }

	.description-info .level-list { font-size: 18px; line-height: 23px; max-width: 175px; position: relative; color: #D0A285; }
	.description-info .level-list .current { border-bottom: 1px solid #445D6D; padding-bottom: 15px; font-size: 24px; line-height: 40px; cursor: pointer; }
	.description-info .level-list .current:hover { border-bottom-color: #D0A285; }
	.description-info .level-list .current svg { margin-left: 15px; }
	.description-info .level-list .number { font-size: 24px; font-weight: bold; margin-right: 5px; }
	.description-info .level-list .current .number { font-size: 36px; vertical-align: bottom; }
	.description-info .level-list-select { display: none; position: absolute; background: #2A4252; border: 2px solid #374F5F; border-top-color: #D0A285; box-sizing: border-box; box-shadow: 11px 14px 15px #203B4B; border-radius: 0px 0px 8px 8px; padding: 18px 17px 13px; width: 100%; }
	.description-info .level-list-select a { display: block; color: inherit; margin-bottom: 12px; }
	.description-info .level-list-select a:hover { color: #fff; }

	form.ask h2 { margin-top: 0; }

	.overlays a.active path,
	.overlays a:hover path { fill: rgba(208,162,133,.75); }
	.overlays a.current { pointer-events: none; }
	.overlays a.current path { fill: rgba(26,188,156,.5); }

	.flat-position { max-width: 300px; margin-top: 40px; }

	.benefits { overflow: hidden; }
	.benefits-wrap { width: 580px; float: left; margin-left: 27px; }
	.benefits-wrap .styled-title span:before { margin-left: -97px; }
	.benefits-wrap ol>li ul { font-size: 18px; line-height: 2.2em; }

	.benefits .owl-carousel { max-width: 884px; width: 50%; float: right; margin-top: 70px; }
	.benefits .owl-dots { float: right; margin-right: 50px; margin-top: 25px; }
	.benefits .owl-dot span { width: 10px; height: 10px; }
	.benefits .owl-nav { float: left; margin-right: 50px; }
	.benefits .owl-nav path { fill: #2A4252; transition: all .3s; }
	.benefits .owl-nav button { margin: 40px 30px 0 0; }
	.benefits .owl-nav button:hover path,
	.benefits .owl-nav button:active path { fill: #D0A285; }

	.repair { margin: 50px 0; }
	.repair .styled-title span:before { width: 47px; margin-left: -74px;  }
	.repair-text { padding: 40px 30px 70px 130px; }
}

@media (min-width: 1200px) and (max-width: 1679px) {
	.plan-selector h3 { font-size: 18px; }
}

@media (min-width: 1600px) {
	.benefits-wrap { margin: 0; padding: 0 0 110px 10%; background: url('../images/flats/benefits-bg.jpg') left bottom no-repeat; background-size: contain; }

	.repair { margin: 70px 0; }
	.repair-text { width: 55%; padding-left: 160px; }
	.repair-text p { max-width: 680px; margin-bottom: 28px; }
	.repair .styled-title { margin-bottom: 37px; }
	.repair .download-link { margin-top: 43px; }
}

@media (min-width: 1680px) {
	.benefits-wrap ol>li { font-size: 32px; line-height: 2em; }
	.benefits-wrap ol>li:after { top: 30px; }
}

@media (min-width: 1920px) {
	.go-back-link { margin-bottom: 60px; }

	.styled-title { font-size: 50px; line-height: 64px; }
	.plan-selector h2 { padding: 59px 0 67px; }

	.plan-selector .section.s4 { top: 44%; left: 22%; }
	.plan-selector .section.s5-6 { top: 380px; left: 48%; }
	.plan-selector .section.s8-9 { top: 465px; }
	.plan-selector .section.s10-11 { top: 34%; right: 35%; }
	.plan-selector .section.s12 { top: 60%; left: 31%; }
	.plan-selector .section.s13 { right: 30%; top: 42%; }
	.plan-selector .section.s14 { right: 20%; top: 35%; }
	.plan-selector .section.s15-16 { right: 10%; top: 44%; }

	.level-info-inner { padding: 0 22px 5px; font-size: 24px; min-width: 200px; }
	.level-info-number { padding: 13px 0 9px; }
	.level-info-inner p:not(.level-info-number) { margin: 0 0 20px; }
	.level-info-item.left .level-info-inner p:not(.level-info-number) span { right: calc(100% + 18px); }
	.level-info-item:not(.left) .level-info-inner p:not(.level-info-number) span { top: 0px; left: calc(100% + 19px); }

	.level-info-item.s5-6 { top: 400px; left: 22%; }
	.level-info-item.s7 { top: 44%; left: 39%; }
	.level-info-item.s8-9 { top: 38%; left: 35%; }
	.level-info-item.s10-11 { right: 27%; top: 41%; }
	.level-info-item.s12 { right: 40%; bottom: 43%; }
	.level-info-item.s13 { right: 22%; top: 48%; }
	.level-info-item.s14 { right: 10%; top: 26%; }
	.level-info-item.s15-16 { right: 44%; bottom: 30%; }

	main.flat-select { padding: 230px 0 80px; }

	.title { margin-bottom: 70px; }
	.title:after { content: url('../images/flats/compas-down.png'); right: -43px; top: -20px; }
	.title.nr:after { content: url('../images/flats/compas-right.png'); right: -54px; }

	.plan-wrap { max-height: calc(100vh - 300px); padding-right: 77px; }

	.description { width: 483px; padding: 125px 75px 0; margin-top: 26px; }
	.description .navigation { top: -26px; height: 125px; }
	.description .position-item { min-width: 110px;  }
	.description-info p { margin: 24px 0; }
	.description-info .key { font-size: 16px; line-height: 20px; }
	.description-info .value { font-size: 32px; line-height: 40px; }
	.description-info table { line-height: 40px; font-size: 18px; }

	.description-info .level-list  { max-width: 225px; line-height: 30px; }
	.description-info .level-list .current  .number { font-size: 50px; margin-right: 10px; }
	.description-info .level-list .current { padding-bottom: 5px; font-size: 32px; line-height: 63px; }

	.flat-plan .plan,
	.flat-plan .block-wrap { top: 70px; }

	.benefits-wrap { padding-left: 16%; width: calc(580px + 16%); }
	.benefits .owl-carousel { margin-top: 90px; }

	.repair { margin: 130px 0; }
}


/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
  	.plan-wrap { position: relative; }
  	.plan-wrap .iphone-bg { position: absolute; top: 0; z-index: -1; left: 50%; transform: translateX(-50%); display: block; }
}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
  	.plan-wrap { position: relative; }
  	.plan-wrap .iphone-bg { position: absolute; top: 0; z-index: -1; left: 50%; transform: translateX(-50%); display: block; }
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
  	.plan-wrap { position: relative; }
  	.plan-wrap .iphone-bg { position: absolute; top: 0; z-index: -1; left: 50%; transform: translateX(-50%); display: block; }

}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
  	.plan-wrap { position: relative; }
  	.plan-wrap .iphone-bg { position: absolute; top: 0; z-index: -1; left: 50%; transform: translateX(-50%); display: block; }

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
  	.plan-wrap { position: relative; }
  	.plan-wrap .iphone-bg { position: absolute; top: 0; z-index: -1; left: 50%; transform: translateX(-50%); display: block; }
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
  	.plan-wrap { position: relative; }
  	.plan-wrap .iphone-bg { position: absolute; top: 0; z-index: -1; left: 50%; transform: translateX(-50%); display: block; }

}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
  	.plan-wrap { position: relative; }
  	.plan-wrap .iphone-bg { position: absolute; top: 0; z-index: -1; left: 50%; transform: translateX(-50%); display: block; }

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
  	.plan-wrap { position: relative; }
  	.plan-wrap .iphone-bg { position: absolute; top: 0; z-index: -1; left: 50%; transform: translateX(-50%); display: block; }

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
  	.plan-wrap { position: relative; }
  	.plan-wrap .iphone-bg { position: absolute; top: 0; z-index: -1; left: 50%; transform: translateX(-50%); display: block; }

}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
  	.plan-wrap { position: relative; }
  	.plan-wrap .iphone-bg { position: absolute; top: 0; z-index: -1; left: 50%; transform: translateX(-50%); display: block; }

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
  	.plan-wrap { position: relative; }
  	.plan-wrap .iphone-bg { position: absolute; top: 0; z-index: -1; left: 50%; transform: translateX(-50%); display: block; }

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  	.plan-wrap { position: relative; }
  	.plan-wrap .iphone-bg { position: absolute; top: 0; z-index: -1; left: 50%; transform: translateX(-50%); display: block; }

}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
  	.plan-wrap { position: relative; }
  	.plan-wrap .iphone-bg { position: absolute; top: 0; z-index: -1; left: 50%; transform: translateX(-50%); display: block; }

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
  	.plan-wrap { position: relative; }
  	.plan-wrap .iphone-bg { position: absolute; top: 0; z-index: -1; left: 50%; transform: translateX(-50%); display: block; }

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  	.plan-wrap { position: relative; }
  	.plan-wrap .iphone-bg { position: absolute; top: 0; z-index: -1; left: 50%; transform: translateX(-50%); display: block; }

}