@charset "utf-8";

.fcontainer {
  padding: .5em;
  margin-top: 1vh;
  max-width: 100%;
  display:flex 
}

.card-wrapper {   
    perspective: 1000px;
    max-width: 100%;
    margin:0
   }

.bLeft{margin: 0 auto 0 0}

.bCentre{margin: 0 auto}

.bRight{margin: 0 0 0 auto}

.card {
    position: relative;
    max-width: 100%; 
    transition-duration: 0.6s;
    transition-timing-function: ease-in-out;
    transform-style: preserve-3d;  
}

 .front {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius:.3em;
    box-shadow: 0  0 1em rgba(0, 0, 0, 0.3);
    transform: rotateY(0deg);
    border:.5em solid #fff
}

 .back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius:.3em;
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.3);
    transform: rotateY(180deg);
    border:.5em solid #fff;
    overflow-y: auto
}

 .back1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius:.3em;
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.3);
    transform: rotateX(180deg);
    border:.5em solid #fff;
    overflow-y: auto 
}    
    
.card .front {
    z-index: 2;  
    font-weight: 500;
    font-size: 1rem;
}

.fimage img{
 max-width: 100%;
 border-radius:.3em;
}

.bimage img{
 max-width: 100%;
 border-radius:.3em;
 opacity: .5
}

.flip-right {
    transform: rotateY(180deg);
}

.flip-left{
    transform: rotateY(-180deg);
}

.flip-up {
    transform: rotateX(180deg);
}

.flip-down {
    transform: rotateX(-180deg);
}

.front .text, .back .text,.back1 .text{
  position: absolute;
  top:.3em; 
  max-width: 95%;
  text-align:center
  }

  .front .text h2   {
  margin: 0 auto;
  padding: .2em .4em;
  font-size: 1.5em;
  text-align: center;
  color:#fff;
   background: rgba(0, 0, 0, 0.65);
   border-radius:.3em;
   display:inline-block
}
  
 .back .text h2,  .back1 .text h2 {
  margin: 0 auto;
  padding: .3em .4em;
  font-size: 1.5em;
  text-align: center;
  color:#fff;
   background: rgba(0, 0, 0, 0.75);
   border-radius:.3em;
   display:inline-block
}

.back .text p, .back1 .text p, .front .text p {  
  font-size: 1em;
  padding:.3em .4em;
  margin:.4em;
  line-height: 1.5em;
  color:#fff;
  background: rgba(0, 0, 0, 0.75);
  border-radius:.3em;
}

.front .flink {
	display: block;
	font-size: 1em;
  padding:.3em .4em;
  margin:.3em 1em;
  line-height: 1.5em;
  color:#fff;
  background: rgba(0, 0, 0, 0.65);
  border-radius:.3em;
text-decoration: none;
transition: 0.3s; 
}

.front .flink:hover{
background: rgba(255, 255, 255, 0.85);
color:black
}

.front .flink a{
  display: inline-block;  
  text-align: center;
  text-decoration: none !important
}

 .flink .Left{
display: inline-block;
transform: rotate(180deg);
}

 .flink .Down{
display: inline-block;
transform: rotate(90deg);
}

 .flink .Up{
display: inline-block;
transform: rotate(-90deg);
}

.blink{
position:absolute;
bottom:.5em; 
right:.5em;
transform: rotateY(180deg);
}

.ublink{
position:absolute;
top:.5em; 
left:.5em;
transform: rotateX(180deg);
}

.dblink{
position:absolute;
top:.5em; 
left:.5em;
transform: rotateX(180deg);
}

 .blink a, .ublink a, .dblink a{
  display: inline-block;  
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  text-decoration: none;
  border-radius:0 .3em 0 0;
  transition: 0.3s;
  padding:.4em .4em;
  line-height: .75em
}

.blink a:hover, .ublink a:hover,.dblink a:hover{
  background: rgba(255, 255, 255, 0.85);
  color:black;
 }
 
.button-1 {
  appearance: button; 
  text-decoration: none;
  border-radius:5em;
  padding:.5em .7em;  
  cursor: pointer;
  line-height: 1.15;
  position: relative;
  text-align: center;
  font-size: 1em;
  transition: 0.3s;
  margin: 0 auto 1em auto  
}

.button-1:focus {
 outline:solid .3em #000
}

.fBlack {
	background: black;
	color: white !important;
	border: .02em solid #000	
}

.fBlack:hover {
	background: white;
	color: black !important;
	border: .02em solid #fff
}

.fBlue {
	background: #004083;
	color: white !important;
	border: .02em solid #004083
}

.fBlue:hover {
	background: white;
	color: #004083 !important;
	border: .02em solid #fff
}

.fGrey {
	background: #ddd;
	color: black !important;
	border: .02em solid #ddd
}

.fGrey:hover {
	background: white;
	color: #333 !important;
	border: .02em solid #fff
}

.fGold {
	background: #b68000;
	color: white !important;
	border: .02em solid #b68000
}

.fGold:hover {
	background: white;
	color: #b68000 !important;
	border: .02em solid #fff
}

.fGreen {
	background: #00671a;
	color: white !important;
	border: .02em solid #00671a
}

.fGreen:hover {
	background: white;
	color: #00671a !important;
	border: .02em solid #fff
}

.fRed {
	background: #ce0a1f;
	color: white !important;
	border: .02em solid #ce0a1f
}

.fRed:hover {
	background: white;
	color: #ce0a1f !important;
	border: .02em solid #fff
}

.fYellow {
	background: #ffbf00;
	color: black !important;
	border: .02em solid #ffbf00
	
}

.fYellow:hover {
	background: black;
	color: #ffbf00 !important;
	border: .02em solid #000
}

.fCyan {
	background: #00ffff;
	color: black !important;
	border: .02em solid #00ffff
}

.fCyan:hover {
	background: black;
	color: #00ffff !important;
	border: .02em solid #000
}

.fTeal {
	background: #008080;
	color: white !important;
	border: .02em solid #008080
}

.fTeal:hover {
	background: white;
	color: #008080 !important;
	border: .02em solid #fff
}

.fWhite {
	background: white;
	color: #333 !important;
	border: .02em solid #fff
	
}

.fWhite:hover {
	background: #333;
	color: white !important;
	border: .02em solid #333
}

.fOrange {
	background: #ff8100;
	color: black !important;
	border: .02em solid #ff8100
	
}

.fOrange:hover {
	background: black;
	color: #ff8100 !important;
	border: .02em solid #000
}

.fPurple {
	background: #800080;
	color: white !important;
	border: .02em solid #800080
}

.fPurple:hover {
	background: white;
	color: #800080 !important;
	border: .02em solid #fff
}