html,
body {
	position: relative;
	height: 100%;
	margin: 0;
	padding: 0
}

body {

	font-family: -apple-system, system-ui, "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: #111111;
	font-family: "comma-base", sans-serif;
}

@media all and (min-width:480px) {

	#app {

		width: 412px;
        margin: 16px auto;
        background: #fff;
        border: 16px solid #000;
        height: 768px;
        border-radius: 32px;
        box-shadow: 0 0 0 1px #fff3;
	}


}

@media all and (min-width:1200px) {

	.swiper-tinder {
		width: 100%;
		max-width: 370px;
	}
}

@media all and (min-width:1400px) {

	.swiper-tinder {
		width: 100%;
		max-width: 480px;
	}
}

#app {
	align-items: center;
}

.swiper-tinder {
	    padding: 16px;
    width: 100%;
    height: 100%;
}

.swiper-slide {}

.demo-empty-slide {
    background: #9D6169;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    line-height: 1.0;
    text-align: center;
    border: 2px #edada1 solid;
    box-sizing: border-box;
    font-weight: bold;
    color: #EDADA1;
    text-shadow: 0px 1px 5px #695a5a;
	border-radius:16px;
}

.demo-empty-slide:before {
	display: none
}