.container{
	/* position:relative; */
    /*display:flex;*/   
	/*align-items: center;*/
	 justify-content: space-between;
	border: 0px dotted green;
	float: left;
	opacity: 1; /*this affects all versions*/
	 text-align: center;
}


/* starting */
.container .card{
    /*position: relative;*/
    cursor: pointer;
	opacity: 1;
	border: 0px dotted red;
}


/* total size of cards  */
.container .card .face{
    /* width: 300px;  */
    /*  height: 200px; */
    transition: 0.5s;
	opacity: 1;  /* for the whole thing */
	border: 5px dotted yellow;
}










/* starting image box */
.container .card .face.face1{
	position: relative;
	z-index: 99999;
	transform: translateY(30px);
	border-radius: 250px;
	opacity: 1;
	border: 0px dotted white;

}

/* end image box */
.container .card:hover .face.face1{
	transform: translateY(0);
	opacity: 1; /* affects all*/
	border-radius: 250px;
	transition: 1s;
	transition-timing-function: ease-in-out;
	border: 0px dotted white;	
}













/* starting image */
.container .card .face.face1 .content{
    opacity: 0.5;    
	border: 0px solid white;
		border-radius: 250px;

}

/* ending image */
.container .card:hover .face.face1 .content{
    opacity: 1;
	transition: 1s;
	transition-delay: 0.2s;
		border: 2px dotted white;
			border-radius: 250px;
			background-color: #6e3047;
}

















/* overall image look??? */
.container .card .face.face1 .content img{
	width: 100%;  /* of the containing box*/
	padding: 10px;
}















/*   start text box   */
.container .card .face.face2{
   position: relative;
    box-sizing: border-box;
    transform: translateY(10px);
	border: 0px solid lightblue;
	font-size: 1em;
	opacity: 0;
	transition: 1.2s;
	}

/* end text box */
.container .card:hover .face.face2{
	transform: translateY(-10px);
	opacity: 0.7;
	font-size: 0px;
	border: 0px dotted white;
	transition: 1.2s;
	transition-delay: 0.4s;
	border-radius: 10px;
	align-content: center;
	text-align: center;

}









/*   paragraphs    */
.container .card .face.face2 .content p{
    /* margin: 0;  */
    /* padding: 0;  */
	font-size: 15px;

}




/*    hyperlink???    */
.container .card .face.face2 .content a{}

/*   hyperlink hover???    */
.container .card .face.face2 .content a:hover{}