body{
background:#ffffcc;
margin: 10px;
padding: 10px;

}
label{
  font-size: 0.5cm;

}
label:hover{
  text-transform: capitalize;
}
.text-right{
    text-align: right;
}
.text-center{
    text-align: center;

}
.text-left{
    text-align: left;
}
.error{
  color: red;
}
.success{
  color: green;
}
.btnsuccess{
  background-color: #119238;
  color: white;
  /* width: 60px; */
  padding: 1%;

  cursor: pointer;
  /* margin: 1%; */
}
.btnsuccess:hover{
  background-color: #52497E;
  transform: scale(1.2);
}
.btndanger{
  background-color: red;
  color: white;
  /* width: 60px; */
  padding: 1%;

  cursor: pointer;
  /* margin: 1%; */
}
.btndanger:hover{
  opacity: 0.8;
  transform: scale(1.2);
}
img{
  width: 40%;
  border-radius: 50%;
}
img:hover{
  transform: scale(1.1);
}


.content{
  background-color: #fefefe;
  width: 80%;
  margin: 5% auto 15% auto;
  border: 1px solid #888;
}
.imgcontainer {
  text-align: center;
   margin: 24px 0 12px 0;
  position: relative;


  padding: 0.5%;
}
.close{
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;

}
.close:hover,
.close:focus{
  color: red;
   transform: scale(1.2);
}
.container{


  padding: 1%;
}
.modal{
  position: fixed;
  z-index: 1; /* Sit on top */
  /* left: 0; */
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  display: none;
  padding-top: 60px;
}
.inputresponsive{
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #C92C70;
  box-sizing: border-box;

}
.login{
  width: 100%;
  background-color: #119238;
  color: white;
  /* width: 60px; */
  padding: 1%;

  cursor: pointer;

}
.login:hover{
  background-color:#5A69B5;
  opacity: 0.8;

}
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)}
  to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
  from {transform: scale(0)}
  to {transform: scale(1)}
}
@media screen and (max-width: 300px) {

  .btndanger{
     width: 100%;
  }
}
