html, body{
     margin: 0;
     padding: 0;
}
body {
     background: #000 url('https://www.sela-declim.fr/assets/template/img/img-0141-home-night-web.jpg') no-repeat fixed top -240px left -15px / 100% auto;
}
header {
     position: fixed;
     width: 100%;
     height: 110px;
     top: 0;
     left: 0;
     padding: 0;
	 background-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,1));
     text-align: center;
     text-transform: uppercase;
     font-family: Arial;
     color: #fff;
     z-index: 999;
     text-shadow: 0 0 5px #037;
}
header h1 {
     margin: 10px 0;
     letter-spacing: 5px;
	 font-size: 0.9rem;
	 line-height: 20px;
}
.point:after {
	content: ".";
}
header h1 b b {
  font-size: 18px;
  color: #bbb;
}
.gray {
    color: #ccc;
    font-weight: normal;
}
.h1Big {
	font-size: 24px;
}
header h2 {
     margin: 10px 0;
     font-size: 0.9rem;
     font-weight: bold;
     letter-spacing: 1px;
}
 .prefooter {
     position: fixed;
     bottom: 25px;
     height: auto;
     width: 100%;
     /*background: black;*/
	 background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
     z-index: 999;
     font-family: Arial;
}
 .prefooter p {
     text-align: center;
     color: #999;
     font-size: 0.8rem;
     line-height: 12px;
     float: left;
     width: 100%;
     margin: 0px 0 10px 0px;
     padding: 0;
}
 .prefooter p.certs {
     margin: 15px 0 0 0;
}
 .prefooter p img {
     width: 60px;
     height: auto;
     vertical-align: middle;
     margin: -18px 10px 0 10px;
}
 .prefooter p span {
     font-size: 30px;
     line-height: 30px;
     color: #666;
     margin: 0 20px;
}
footer {
     position: fixed;
     bottom: 0;
     height: 25px;
     width: 100%;
     background: black;
     z-index: 999;
     font-family: Arial;
}
footer p {
     text-align: center;
     color: #ccc;
     font-size: 12px;
     line-height: 0;
}
main {
     position: absolute;
     width: 100%;
     height: calc(100% - 110px);
     top: 0;
     left: 0;
}
.side {
     position: absolute;
     top: 110px;
     width: 50%;
     height: 100%;
     background: rgba(0, 0, 0, 0);
     transition: 1s;
}
.left {
     left: 0;
}
.right {
     left: 50%;
}
.side:hover {
    /* background: rgba(0, 0, 0, 0.3);*/
}
.left .thefront img {
     width: 100px;
}
.right .thefront img {
     width: auto;
}
.thefront .name {
     font-size: 70px;
     color: black;
     font-weight: 300;
}
.thefront .cible {
     letter-spacing: 5px;
}
.left .thefront .cible {
     color: #25ABAE;
    /*color: white;
     background: linear-gradient(#25ABAE, white);
    */
}
.right .thefront .cible {
     color: #db6464;
    /*color: white;
     background: linear-gradient(#db6464, white);
    */
}
.right .thefront span {
     position: absolute;
     top: 270px;
     left: 0;
     width: 100%;
     text-align: center;
     color: #e3af12;
     font-size: 17px;
}
.right .thefront span strong {
     font-size: 23px;
}
.thefront .cible {
     font-size: 16px;
     padding: 10px 0;
     margin: 0 0 20px 0;
     text-transform: uppercase;
     font-weight: bold;
}
.declim-green {
     background: #25ABAE;
     color: white;
     position: absolute;
     bottom: -20px;
     height: 90px;
     width: 100%;
     transform: skew(0deg, -5deg);
}
.declim-green p {
     transform: skew(0deg, 5deg);
     margin-top: 30px !important;
     font-size: 16px !important;
}
.theback.bgGreen {
     background: #25ABAE !important;
     color: white !important;
}
.maincontainer{
     position: absolute;
     width: 350px;
     height: 320px;
     background: none;
     top: 40%;
    /*left: 50%;
    */
     transform: translate(-50%, -50%);
     opacity: 0.8;
}
.maincontainer:hover {
    /*opacity: 0.9;
    */
}
.left .maincontainer{
     left: 45%;
}
.right .maincontainer{
     left: 55%;
}
.thecard{
     position: relative;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: 10px;
     transform-style: preserve-3d;
     transition: all 1s ease;
}
.thecard:hover{
     transform: rotateY(180deg);
}
.thefront{
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: 10px;
     backface-visibility: hidden;
     overflow: hidden;
     background: #ffc728;
     color: #000;
}
.theback{
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: 10px;
     backface-visibility: hidden;
     overflow: hidden;
     color: #333;
     text-align: center;
     transform: rotateY(180deg);
}
.left .thefront{
     background: #fff;
     color: #666;
     text-align: center;
     box-shadow: 0 0 10px black;
     border: solid 1px black;
}
.left .theback{
     background: #fff;
     color: #000;
}
.right .thefront {
    /*background: #9b6b6b;
    */
     background: #fff;
     color: #666;
     text-align: center;
     box-shadow: 0 0 10px black;
     border: solid 1px black;
}
.right .theback{
     background: #9b6b6b;
     color: white;
}
.right .theback h1 {
     letter-spacing: 2px;
}
.right .theback h1 span:after, .right .theback .sela span:after {
     content: ".";
}
.thefront h1, .theback h1{
     font-family: 'zilla slab', sans-serif;
     padding: 10px;
     font-weight: bold;
     font-size: 24px;
     text-align: center;
}
.thefront p, .theback p{
     font-family: 'zilla slab', sans-serif;
     padding: 0;
     margin: 0;
     font-weight: normal;
     font-size: 12px;
     text-align: center;
}

@media screen and (max-width: 992px) {
	header h1 {
		font-size: 0.8rem;
	}
}

@media screen and (max-width: 768px) {
	.prefooter,
	.declim-green
	{
		display: none;
	}
	header h1 {
		font-size: 0.7rem;
	}
	main {
	  position: relative;
	  width: 100%;
	  height: auto;
	  display: inline-block;
	  margin-top: 140px;
	  top: 0;
	  left: 0;
	}
	.side.left, .side.right {
	  position: relative;
	  width: 100%;
	  height: calc(40vh - 55px);
	  transition: 1s;
	  left: 0;
	  top: 0;
	}
	.left .maincontainer, .right .maincontainer {
	  left: calc(50% - 150px);
	  height: 80%;
	  transform: none;
	  top: 0;
	}
	.thefront .cible {
	  font-size: 18px;
	  color: none;
	  padding: 0;
	  margin: 0;
	  border-bottom: none;
	  height: 30px;
	  line-height: 30px;
	}
	.thefront p:nth-child(2) {
		height: calc(100% - 80px);
	}
	.left .thefront img {
	  width: auto;
	  height: 100%;
	}
	.thefront .name {
	  font-size: 40px;
	  color: #25ABAE;
	  font-weight: 300;
	}
	.thecard:hover{
		transform: rotateY(0deg);
	}
	.right .thefront img {
	  width: auto;
	  height: calc(100% - 70px);
	}
	.right .thefront span strong {
	  font-size: 20px;
	  color: #db6464;
	}
	.right .thefront span {
	  position: relative;
	  width: 100%;
	  text-align: center;
	  color: #dfa800;
	  font-size: 16px;
	  float: left;
	  height: 38px;
	  padding: 0;
	  margin: 0;
	  top: 0;
	}
	.left .maincontainer, .right .maincontainer {
		width: 300px;
	}
}