/*
Project: 15-16_27
Activity: Unit 3 - Literacy Starter - Vaccination Opposites
Author: Richy Thomas
*/

#popUp {
  visibility: hidden;
}

#popUpClose {
  background: #C03;
  border-radius: 30px;
  color: #FFF;
  cursor: pointer;
  height: 30px;
  line-height: 30px;
  padding-left: 5px;
  position: absolute;
  right: 5px;
  top: 0px;
  width: 30px;
}

#cardHolder {
  position: relative;
}

.carddiv {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top:0;
}

.alert {
  font-weight: 700;
  margin: 20px 0 0;
}

#response p {
  margin: 10px 0 0;

  font-style: italic;
}

.flip3D {
  float: left;
  height: 120px;
  margin: 1%;
  width: 14.6%;
}

.correct {
  background-color: #dff0d8;
  border-radius: 7px;
  border: 1px solid #d6e9c6;
  color: #3c763d;
  font-size: 12px;
  font-weight: bold;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.front, .front2, .back, .back2 {
  border-radius: 7px;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  height: 120px;
  line-height: 120px;
  position: absolute;
  text-align: center;
  width: 14.6%;
   -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: -ms-transform .5s linear 0s;
  transition: -o-transform .5s linear 0s;
  transition: -webkit-transform .5s linear 0s;
  transition: -o-transform .5s linear 0s;
  transition: -ms-transform .5s linear 0s;
  transition: transform .5s linear 0s;
}

.front, .front2 {
  background: rgba(255,167,38,1);
}

.back, .back2 {
  border: 1px solid rgba(255,167,38,1);
  color: rgba(255,167,38,1);
}

.front {
  -o-transform: perspective( 600px ) rotateY( 0deg );
  -ms-transform: perspective( 600px ) rotateY( 0deg );
  -webkit-transform: perspective( 600px ) rotateY( 0deg );
  transform: perspective( 600px ) rotateY( 0deg );
}

.back {
  -ms-transform: perspective( 600px ) rotateY( 180deg );
  -o-transform: perspective( 600px ) rotateY( 180deg );
  -webkit-transform: perspective( 600px ) rotateY( 180deg );
  transform: perspective( 600px ) rotateY( 180deg );
}

.front2 {
  -o-transform: perspective( 600px ) rotateY( -180deg );
  -ms-transform: perspective( 600px ) rotateY( -180deg );
  -webkit-transform: perspective( 600px ) rotateY( -180deg );
  transform: perspective( 600px ) rotateY( -180deg );
}

.back2 {
  -ms-transform: perspective( 600px ) rotateY( 0deg );
  -o-transform: perspective( 600px ) rotateY( 0deg );
  -webkit-transform: perspective( 600px ) rotateY( 0deg );
  transform: perspective( 600px ) rotateY( 0deg );
}

.unclickable {
  pointer-events: none;
}

.clickable {
  pointer-events: auto;
}


/* Tablet */
@media(min-width: 768px){


}

/* Desktop */
@media(min-width:992px){

  .front, .front2, .back, .back2, .correct {
    font-size: 16px;
  }

}

/* Large Desktop */
@media(min-width:1200px){

  .front, .front2, .back, .back2, .correct {
    font-size: 18px;
  }

}

/* Print */
@media print {


}