body{
  background: url("../img/bgpanelnew2.png");
  background-size: cover;
  background-attachment: fixed;
  overflow-x: hidden;
}
.footer {
	display: block;
	margin-bottom:0 !important;
    }
 .btn-ttc,
.btn-ttc:hover,
.btn-ttc:active {
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #00ff00;
}
 .btn-ttc2,
.btn-ttc:hover,
.btn-ttc:active {
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.nab{
	color: white !important;
}
.foot{
	position: absolute;

}
.card{
	background: transparent !important;
    width: 300px  !important;
    height:  290px    !important;
    margin-bottom: 0;


}
.imgce{
  position: absolute;
}

.card-img-top{
  height: 300px  !important;
  width: 290px  !important;
}



@media screen and (min-width:1400px) {
 #warp {
    -webkit-transform:scale(1.2);
    -webkit-transform-origin:50% 0%;
  transform:scale(1.2);
  transform-origin:50% 0%;
  }
}

#status {
  position: fixed;
  width: 100%;
  font: bold 1em sans-serif;
  color: #FFF;
  padding: 0.5em;
    margin-bottom: 0;

}

#log {
  padding: 2.5em 0.5em 0.5em;
  font: 1em sans-serif;
  margin-bottom: 0;
}

.con {
  background: green;
    margin-bottom: 0;

}

.sin {
  background: red;
    margin-bottom: 0;

}
.container {
  position: relative;
}
/*img {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 350px;
   height: 350px;
   margin-top: -175px; /* Half the height *
   margin-left: -175px; /* Half the width *
}
*/

.image {
  opacity: 1;
  display: block;
  width: 350px;
  height: 350px;
  margin-top: 175px;  Half the height 
  margin-left: 175px;  Half the width 
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  position: absolute;
  opacity: 0;
  top: 90%;
  left: 5%;
  right: 10%
}

.container:hover .image {
  opacity: 0.3;
}
.container:hover .middle {
  opacity: 1;
}

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