@charset "utf-8";
/* CSS Document */
#bauble_one {
width: 350px;
margin-top: 130px;
margin-left: 140px;
}
.flip-container, .front, .back {
	position: absolute;
	width: 350px;
	height: 340px;
	}
.flip-container {
	perspective: 1000;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective: 1000;
}
.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
}
.flip-container, .front, .back {
	width: 350px;
	height: 340px;
    border-radius:50%;
    -webkit-transition: 0s;
    -webkit-transition-delay: 0.1s;
    -moz-transition: 0s;
    -moz-transition-delay: 0.1s;
    -ms-transition: 0s;
    -ms-transition-delay: 0.1s;
    -o-transition: 0s;
    -o-transition-delay: 0.1s;
    transition: 0s;
    transition-delay: 0.1s;
}
.flip-container .back {
    opacity: 0;
}
.flip-container:hover .front {
    opacity: 0;
}
.flip-container:hover .back {
    opacity: 1;
}
.flipper {
	transition: 0.8s;
    -webkit-transition: 0.8s;
    -moz-transition: 0.8s;
    -ms-transition: 0.8s;
    -o-transition: 0.8s;
    position: relative;
}
.front {
	z-index: 2;
}

.back {
	transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
}
#bauble_two {
width: 522px;
margin-top: -70px;
margin-left: 740px;
}
.flip-container1, .front1, .back1 {
	position: absolute;
	width: 522px;
	height: 380px;
	}
.flip-container1 {
	perspective: 1000;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective: 1000;
}
.flip-container1:hover .flipper1, .flip-container1.hover .flipper1 {
		transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
}
.flip-container1, .front1, .back1 {
	width: 522px;
	height: 380px;
    border-radius:50%;
    -webkit-transition: 0s;
    -webkit-transition-delay: 0.1s;
    -moz-transition: 0s;
    -moz-transition-delay: 0.1s;
    -ms-transition: 0s;
    -ms-transition-delay: 0.1s;
    -o-transition: 0s;
    -o-transition-delay: 0.1s;
    transition: 0s;
    transition-delay: 0.1s;
}
.flip-container1 .back1 {
    opacity: 0;
}
.flip-container1:hover .front1 {
    opacity: 0;
}
.flip-container1:hover .back1 {
    opacity: 1;
}
.flipper1 {
	transition: 0.8s;
    -webkit-transition: 0.8s;
    -moz-transition: 0.8s;
    -ms-transition: 0.8s;
    -o-transition: 0.8s;
    position: relative;
}
.front1 {
	z-index: 2;
}

.back1 {
	transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
}
#bauble_three {
width: 522px; 
margin-top: 100px;
margin-left: 60px;
}
.flip-container2, .front2, .back2 {
	position: absolute;
	width: 522px;
	height: 512px;
	}
.flip-container2 {
	perspective: 1000;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective: 1000;
}
.flip-container2:hover .flipper2, .flip-container2.hover .flipper2 {
		transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
}
.flip-container2, .front2, .back2 {
	width: 522px;
	height: 512px;
    border-radius:50%;
    -webkit-transition: 0s;
    -webkit-transition-delay: 0.1s;
    -moz-transition: 0s;
    -moz-transition-delay: 0.1s;
    -ms-transition: 0s;
    -ms-transition-delay: 0.1s;
    -o-transition: 0s;
    -o-transition-delay: 0.1s;
    transition: 0s;
    transition-delay: 0.1s;
}
.flip-container2 .back2 {
    opacity: 0;
}
.flip-container2:hover .front2 {
    opacity: 0;
}
.flip-container2:hover .back2 {
    opacity: 1;
}
.flipper2 {
	transition: 0.8s;
    -webkit-transition: 0.8s;
    -moz-transition: 0.8s;
    -ms-transition: 0.8s;
    -o-transition: 0.8s;
    position: relative;
}
.front2 {
	z-index: 2;
}

.back2 {
	transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
}


@media only screen and (max-width: 1350px) and (min-width: 1201px) {

#bauble_one {
width: 350px;
margin-top: 100px;
margin-left: 100px;
}
#bauble_two {
width: 350px;
margin-top: -70px;
margin-left: 550px;
}
#bauble_three {
width: 400px; 
margin-top: 100px;
margin-left: 5%;
}
.flip-container2, .front2, .back2 {
	position: absolute;
	width: 400px;
	height: 393px;
	}	
.flip-container2, .front2, .back2 {
	width: 400px;
	height: 393px;
	}
}