html{
width: 100%;
height: 100%;
margin: 0px;
}
body{
width: 100%;
height: 100%;
margin: 0px;
}



.score_tab{
width: 100%;
height: 100%;
margin: 0px;
}

.th{
  font-weight: bold;
  font-size: 18px;
  text-align: center;
}
.row_score{
  font-size: 12px;
  text-align: left;
  height: 40px;
  line-height: 16px;
  vertical-align: bottom;

}
.row_1{
  border-bottom: 1px solid grey;
}

.tbl_score{
  width: 95%;
  margin: 2%;
}

.main_panel{
  width: 100%;
  height: 100%;
  margin: 0px;
}
.content{
  width: 100%;
  height: 100%;
  margin: 0px;
  background: transparent;
  color: #fff;
  font-size: 100px;
}
.topic_content{
  width: 100%;
  height: 100%;
  margin: 0px;
  background: transparent;
}
.page1{
  width: 100%;
  height: 100%;
  margin: 0px;
 background-size: cover;
      background-repeat: no-repeat; 
}
.winning{
  width: 100%;
  height: 100%;
  margin: 0px;
  background-size: cover;
      background-repeat: no-repeat;
}
.quiz{
  width: 100%;
  height: 100%;
  margin: 0px;
  background-size: cover;
      background-repeat: no-repeat;
}
.top{
  
  height:20%;
  margin:2%;  
  border:2px solid grey;
  border-radius: 3%;
  padding: 3%;

}

.button{
  width: 45%;
  /* border-radius: 3%; */
  float: left;
  color: white;
  height: 100%;
  text-align: center;
}

.button2{
  width: 30%;
  /* border-radius: 3%; */
  float: left;
  color: white;
  height: 100%;
  text-align: center;
}

.buttons{
  width: 100%;
  height: 100%;
  margin: 0px;
  background-size: cover;
      background-repeat: no-repeat;
}

.buttons_2{
  width: 100%;
  height: 100%;
  margin: 0px;
  background-size: cover;
      background-repeat: no-repeat;
}
.buttons_row{
  width: 100%;
}

.hidden{
  display: none;
}
.red{
  background-image: url(css/img/1.jpg);
}
/* Tab */

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

.top{
      font-size: 3em;
    }
.button{
      font-size: 9em;
      margin: 1.46%;
    }
    .boxy{
      width: 300px;
      border: 1px solid grey;
      border-radius: 2px;
      height: 300px;
      }


      .boxy2{
      width: 200px;
      border: 1px solid grey;
      border-radius: 2px;
      height: 200px;
      margin-left: 30px;
      }

      
      .formy{
        padding-top: 30%;
        text-align: center;
      }
      .input{
        border-radius: 2px;
        border:3px solid white;
        width: 70%;
        height: 80px;
        margin-top: 80px;
        font-size: 50px;
        padding-left: 8px;

      }
      .input:focus{
        border:4px solid #af1917;
      }
     

      .a_boxes{
        width:100%;
        height: 100%;
padding-top: 20%;
      }

      .b_boxes{
        width:100%;
        height: 100%;
        padding-top: 20%;
      }
      .content{
text-align: center;
      }
      .present{
        margin-top: 35%;
      }

}

/*************************  Smartphone*************************************/

@media screen 
and (max-device-width : 320px) 
  {
    .top{
      font-size: 1.5em;
    }
    .button{
      /* font-size: 6em; */
      margin: 1.56%;
      padding-top: 10px;
      /* border: 1px solid grey; */
    }
    .boxy{
      width: 150px;
      height: 150px;
      border: 1px solid grey;
      border-radius: 2px;
      }

      .boxy2{
      width: 90px;
      height: 90px;
      border: 1px solid grey;
      border-radius: 2px;
      margin-left: 10px;
      }

      .formy{
        padding-top: 30%;
        text-align: center;
      }
      .input{
        border-radius: 2px;
        border:3px solid white;
        width: 80%;
        height: 50px;
        margin-top: 50px;
        font-size: 25px;
        padding-left: 8px;

      }
      .input:focus{
        border:4px solid #af1917;
      }
      

      .a_boxes{
        width:100%;
        height: 100%;
padding-top: 20%;
      }
      .b_boxes{
        width:100%;
        height: 100%;
padding-top: 20%;
      }

      .content{
text-align: center;
      }
      .present{
        margin-top: 30%;
        width: 300px; 
        height: auto;
      }

  }

@media screen 
and (min-device-width : 321px) 
and (max-device-width : 480px)
  {
    .top{
      font-size: 1.5em;
    }
    .button{
      font-size: 6em;
      margin: 1.26%;
    }
    .boxy{
      width: 170px;
      height: 170px;
      border: 1px solid grey;
      border-radius: 2px;
      }

      .boxy2{
      width: 90px;
      height: 90px;
      border: 1px solid grey;
      border-radius: 2px;
      margin-left: 10px;
      }
     

      .formy{
        padding-top: 30%;
        text-align: center;
      }
      .input{
        border-radius: 2px;
        border:3px solid white;
        width: 80%;
        height: 50px;
        margin-top: 40px;
        font-size: 30px;
        padding-left: 8px;

      }
      .input:focus{
        border:4px solid #af1917;
      }
     

      .a_boxes{
        width:100%;
        height: 100%;
padding-top: 20%;
      }

      .b_boxes{
        width:100%;
        height: 100%;
padding-top: 20%;
      }

          .content{text-align: center;color: #fff;}
      .present{
        margin-top: 35%;
        width: 350px; 
        height: auto;
      }


  }

@media screen 
and (min-device-width : 481px) 
and (max-device-width : 767px)
  {
    .top{
      font-size: 2em;
    }

    .button{
      font-size: 4em;
      margin: 1.36%;
    }
    .boxy{width: 150px;
      height: auto;}

      .boxy2{width: 90px;
      height: auto;
      margin-left: 10px;

    }
    

   
      .formy{
        padding-top: 30%;
        text-align: center;
      }
      .input{
        border-radius: 2px;
        border:3px solid white;
        width: 80%;
        height: 50px;
        margin-top: 40px;
        font-size: 30px;
        padding-left: 8px;

      }
      .input:focus{
        border:4px solid #af1917;
      }
    

      .a_boxes{
        width:100%;
        height: 100%;
padding-top: 20%;
      }

      .b_boxes{
        width:100%;
        height: 100%;
padding-top: 20%;
      }

       .present{
        margin-top: 30%;
      
      }
       .content{
text-align: center;
      }

  }



/************************* Landscape Smartphone Large*************************************/
@media screen 
and (min-device-width :1200px) 
and (max-device-width : 2000px)
   {
    .top{
      font-size: 3.5em;
    }

.button{
      font-size: 9em;
      margin: 1.46%;
    }

    .boxy{width: 200px;
      height: auto;}

      .boxy2{width: 100px;
      height: auto;
    margin-left: 10px;}

}

.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
}

  .flipped {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }

.flip-container, .front, .back {
  width: 100%;
  height: 100%;
}

.flipper {
  width: 100%;
  height: 100%;
  -webkit-transition: 0.6s;
  -webkit-transform-style: preserve-3d;

  -moz-transition: 0.6s;
  -moz-transform-style: preserve-3d;
  
  -o-transition: 0.6s;
  -o-transform-style: preserve-3d;

  transition: 0.6s;
  transform-style: preserve-3d;

  position: relative;
}

.front, .back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
border-radius: 3%; 
  position: absolute;
  top: 0;
  left: 0;
}

.front {
  z-index: 2;
}


.back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  background-size: cover;

}
#message{
  font-weight: bold;
}

.flexit{
  display:flex;
  justify-content:center;
  align-items:center;
}