#container .topBanner .img {
  /*height: 400px;*/
}

#container .florid{
  padding-top: 30px;
}

#container .florid > h2 {
  margin-bottom:10px;
  font: 200 24px/30px "Noto Sans TC","arial"; 
  color:#2a2a2a; 
  letter-spacing: 1px;
  text-align: center;
}
#container .florid > p.floridTxt{
  margin-bottom:20px;
  font: 400 16px/24px "Noto Sans TC","arial"; 
  color:#2a2a2a; 
  letter-spacing: 1px;
  text-align: center;
}

#container div.florid{
  text-align: center;
}
.f1_container {   
  position: relative;   
  margin: 20px 20px;   
  width: 200px;   
  height: 300px;   
  z-index: 1;  
  display: inline-block; 
}   
.f1_container {   
  perspective: 1000;  

}   
.f1_card {   
  width: 100%;   
  height: 100%;   
  transform-style: preserve-3d;   
  transition: all 0.5s linear;   
  box-shadow: 2px 2px 15px rgba(0,0,0,0.2);
}   
.f1_container:hover .f1_card {   
  transform: translateY(-10px);  
}  

.f1_container:hover .rotate {-webkit-animation: smallToBig 0.8s /*infinite*/ /*alternate*/ forwards;}
@-webkit-keyframes smallToBig {
  0% { transform: rotateY( 0deg) }  
  100% { transform: rotateY(180deg) }
}

.face {   
  position: absolute;   
  width: 100%;   
  height: 100%;   
  backface-visibility: hidden;   
}   
.face.back {   
  display: block;   
  transform: rotateY(180deg);   
  box-sizing: border-box;   
  padding: 10px;   
  color: white;   
  background: url(../images/floridCard_06.jpg) top center no-repeat;   
}
.face.back h3 {
  transform: translateY(5px);  
  padding: 1px 0px;
  width: 90%;
  font: 18px/22px "Noto Sans TC","arial"; 
  color: #fff;
  background:#e69892; 
  letter-spacing: normal;
  text-align: center !important; 
  display: block;
  width: auto;
  margin: 0 auto; #2a2a2a
}  
.face.back p {
  transform: translateY(10px);  
  font: 14px/20px "Noto Sans TC","arial"; 
  text-align: left;
  color: #2a2a2a; 
  letter-spacing: normal;
}

.f1_container .floridButton {
  margin:0 auto;
  padding: 5px 0;
  width: 90%;
  font: 15px/16px "Noto Sans TC","arial"; 
  text-align: center !important;
  color: #fff; 
  border-radius:99em;
  letter-spacing: normal;
  background: #ff4b73;
  transform: translateY(20px); 
  cursor: pointer; 
}

.f1_container:nth-child(2) .floridButton {
  background: #8d44a6;  
}

.f1_container:nth-child(3) .floridButton {
  background: #376004;  
}

.f1_container:nth-child(4) .floridButton {
  background: #d6265b;  
}

.f1_container:nth-child(5) .floridButton {
  background: #513f7a;  
}

.floridButton a,
.floridButton a:link {
  color: #fff; 
}

.cardBase {
  text-align: center !important;
}

.fbShareButton {
  margin: 10px auto;
  padding:10px 0;
  width: 300px; 
  font: 16px/16px "Noto Sans TC","arial"; 
  text-align: center !important;
  color: #fff; 
  letter-spacing: normal;
  background: #0000ff;
}

.fbShareButton a,
.fbShareButton a:link { color: #fff }


.stepButton { text-align: center;background:#de90dc}
.stepButton > .button { position: relative; display: inline-block; margin: 10px 30px; width: 200px; height: auto; text-align: center !important; }
.stepButton > .button::before { content: ''; display: block; position: absolute; top:calc(50% - 50px); right:-18%; width: 18px; height: 40px; 
background: url(../images/stepArrow.png) top center no-repeat; }
.stepButton > .button:last-child::before { display: none }
.stepButton > .button img {  width: auto;}
.stepButton > .button p { margin-top: 10px; color:#fff ;text-align: center !important;  }
.stepButton > .button p b { display: block; font-size: 18px; line-height: 20px; font-weight: 300;text-align: center !important;}
.stepButton > .button p small { display: block; font-size: 18px; line-height: 20px; font-weight: 100; color: #fff33f; letter-spacing: 2px; text-align: center !important;}
.stepButton > .button img { transition: .5s; -webkit-transition: .5s; }
.stepButton > .button:hover img { transform: translateY(-10px); }

.transparent { opacity: 0.5; 
  -webkit-filter: blur(3px); /* Chrome, Opera */
       -moz-filter: blur(3px);
        -ms-filter: blur(3px);    
            filter: blur(3px);  }


@media only screen and (max-width: 1100px) {
.stepButton > .button::before { display: none }
.stepButton > .button , 
.activityFlow .button{ margin: 1.5%; width: 20%; height: auto; } 
.stepButton > .button p ,
.activityFlow .button p  { padding-top: 5%;   }

.stepButton > .button p b ,
.activityFlow .button p b { font-size: 20px; line-height: 20px; font-weight: 700; }

.stepButton > .button p small,
.activityFlow .button p small { display: block; font-size: 12px; line-height: 20px; font-weight: 100; letter-spacing: 2px; }

}


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

  .f1_container {   
  margin: 0.5%;   
  width: 160px;   
  height:240px;   
 
  }   

  .f1_container .front img {
    width: 100%;
  } 


  .face.back {
    background-size: 100% auto;
  }


  .face.back h3 {

    font: 14px/16px "Noto Sans TC","arial"; 

  }  


.stepButton > .button { border-radius:10px; }
.stepButton > .button img { /*display: none*/ }

.stepButton > .button p b ,
.activityFlow .button p b { font-size: 16px; line-height: 18px; font-weight: 400; }

.stepButton > .button p small,
.activityFlow .button p small { display: block; font-size: 12px; line-height: 20px; font-weight: 100; letter-spacing: 0px}

}

@media only screen and (max-width: 500px) {
.stepButton > .button p ,
.activityFlow .button p  { padding-top: 0;  }

.stepButton > .button , 
.activityFlow .button{ margin: 1.5%; width: 45%; height: auto; } 
.stepButton .button img { transform: scale(0.9); }


.face.back p {   
  font: 13px/16px "Noto Sans TC","arial"; 
  letter-spacing: 0;

}



}