@charset "UTF-8";
/* CSS Document */


.flip-card {
  width: 100%;
    min-height:225px;
  perspective: 1000px; 
    border: 1px solid #ffffff;
    background-color: transparent;
    justify-content: space-around;

}


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


.flip-card:hover .flip-card-inner {
  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 {
  background-color: #bbb;
  color: black;
}


.flip-card-back {

  background-color:#2e2865;
  color: white;
  transform: rotateY(180deg);
    min-height:225px;

} 
    
.flip-card-back h1{
    margin:0 0 10px 0;
    padding:7px 4% 7px 4%;
    width:92%;
font-size: 1.2vw;
    color: white;
    text-align:center;
    background-color:rgba(255,255,255,0.3);
    }
    
.flip-card-back p{
    padding:0 15px 0 15px;
   text-align:center;  
    }
  
.flip-card-back a{
	font-weight:700;
	padding: 8px 0% 10px 0%;
	margin:8px 15% 8px 15%;
	text-align:center;
	background-color:rgba(255,255,255,0.7);
	font-size:20px;
color:#444444;
         -webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
	-webkit-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.60);
-moz-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.60);
box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.60);	
}

.flip-card-back a:visited{
color:#444444;    
}

.flip-card-back a:hover{
	font-size:20px;
color:#ffffff;
	background-image:none;
	background-color:#000000;
	cursor:pointer;
	text-decoration:none;
}   




@media only screen and (min-width: 601px) and (max-width: 1160px) {

.flip-card {
margin-top:20px;
    min-height:200px;
	
	}
.flip-card-back {

    min-height:200px;

} 

.flip-card-back p{
font-size:1.5vw;
line-height:1.2;
    }
	
.flip-card-back h1{
 font-size: 2vw;
 }

.flip-card-back a{

	padding: 6px 0% 8px 0%;
	margin:6px 15% 6px 15%;
	font-size:16px;
	}
.flip-card-back a:hover{
	font-size:16px;
}  

}



@media only screen and (max-width: 600px) {

.flip-card {
margin-top:5px;
}

.flip-card-back h1{
 font-size: 5vw;
 }

.flip-card-back {

    min-height:225px;

} 

}