* {
	margin: 0px;
	padding: 0px;
}
html, body {
	height: 100%;
}
body {
	margin: 0; background: #fff;
}
.flex-container {
	height: 100%;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: center;
	justify-content: center;
}

.main-desktop {
	background-image: url('../img/desktop-bg.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	min-height:600px;margin: 0 auto;
    width: 900px;position: relative;
}

.flip-card {
	background-color: transparent;
	width: 300px;
	height:170px;
	perspective: 1000px;
	-webkit-perspective: 1000px;
}

.flip-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: 0.8s;
	-webkit-transition:0.8s;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden; /* Safari */
	backface-visibility: hidden;
}

.flip-card-front {
	color: black;
}

.flip-card-back {
	color: white;
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
}

.black-desktop {
	position: absolute;
    left:33%;
	top: 14%;
}

.black-desktop img {
	height:300px;
	width:300px;
}

.pink-desktop {
	position: absolute;
    left:50%;
	top: 65%;
}

.pink-desktop img {
	height:200px;
	width:200px;
}

.blue-desktop {
	position: absolute;
	left: 23%;
	top: 55%;
}

.blue-desktop img {
	height:200px;
	width:200px;
}
.mainMobile{ display: none; }


@media only screen and (max-width: 767px){
img{max-width: 100%; height: auto;}
/*.flex-container{ display:block !important;}*/
.main-desktop {display: none;}
.mainMobile{display: block;
background-image: url('../img/mobile-bg.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
min-height: 600px;
margin: 0 auto;
width: 450px;
position: relative;
text-align: center;
padding: 150px 0;}
.black-mobile {
    width: 250px;
    margin: 0 auto;
}
.blue-mobile {
    width: 170px;
    margin: -50px 0 0 80px;
}
.pink-mobile {
    width: 170px;
    margin: -50px 90px 0 0;
    float: right;
    position: relative;
}
.clear{clear: both;}
}
@media only screen and (max-width: 450px){
.mainMobile {min-height: 500px; width: 300px; padding:100px 0 50px;}
.black-mobile {width: 180px;}
.blue-mobile {width: 130px; margin: -30px 0 0 40px;}
.pink-mobile {width: 130px; margin: -30px 60px 0 0;}
}