.panel {
    float: left;
    width: 100%;
    height: auto;
    margin: 0;
    position: relative;
    font-size: .8em;

    -webkit-perspective: 600px;
            perspective: 600px;
  }
  /* -- make sure to declare a default for every property that you want animated -- */
  /* -- general styles, including Y axis rotation -- */
  .panel .front {
    float: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 900;
    width: inherit;
    height: inherit;
    border: 0px solid #ccc;
	padding:0;
	/*
    text-align: center;
    box-shadow: 0 1px 5px rgba(0,0,0,0.9);
   */
    -webkit-transform: rotateX(0) rotateY(0);
            transform: rotateX(0) rotateY(0);

    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;

    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;

    /* -- transition is the magic sauce for animation -- */
    -webkit-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
  }
  .panel.flip .front {
    z-index: 900;
    border-color: #eee;
    background: #333;
    box-shadow: 0 15px 50px rgba(0,0,0,0.2);

    -webkit-transform: rotateY(179deg);
            transform: rotateY(179deg);
  }

  .panel .back {
    float: left;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 800;
    width: inherit;
    height: inherit;
    border: 0px solid #ccc;
	padding:0;
	margin:0;
    -webkit-transform: rotateY(-179deg);
            transform: rotateY(-179deg);

    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;

    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;

    /* -- transition is the magic sauce for animation -- */
    -webkit-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
  }
   
   
.owl-carousel .item .back img {
	  height:100%;
	  float:left;
	  border:1px solid #ccc;
	  }
	  

  .panel.flip .back {
    z-index: 1000;
    height:397px;
    /* background-image:url(../../imgs/site/imoveis/02.jpg); */
	background-position:center;
	background-size:100% 100%;
	/* border:4px solid #A10000; */

    -webkit-transform: rotateX(0) rotateY(0);
            transform: rotateX(0) rotateY(0);

    /*box-shadow: 0 15px 50px rgba(0,0,0,0.2);*/
  }
  
  .item .btmaisdet {
	   font-family: 'amplesoftbold';
	   /* background:#A10000; */
	   position:absolute;
	   bottom:20px;
	   left:14%;
	   text-align:center;
	   font-size:16px;
	   line-height:2;
	   border:0;
	   padding:5px 0;
	   width:200px;
	   font-weight:bold;
	   color:white;
	   
  }
  

  /* -- X axis rotation for click panel -- */
  .click .front {
    cursor: pointer;
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
  }
  .click.flip .front {
    -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
  }
  .click .back {
    cursor: pointer;
    -webkit-transform: rotateX(-180deg);
            transform: rotateX(-180deg);
  }
  .click.flip .back {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
  }

  /* -- contact panel -- */
  .contact {
    width: 290px;
    height: 240px;
  }

  /* -- diagonal axis rotation -- */
  .diagonal .front {
    -webkit-transform: rotate3d(45,45,0,0deg);
            transform: rotate3d(45,45,0,0deg);
  }
  .diagonal .front:hover {
    /* for the patient :) */
    -webkit-transition-duration: 10s;
            transition-duration: 10s;

    -webkit-transform: rotate3d(45,45,0,-36deg);
            transform: rotate3d(45,45,0,-36deg);
  }

  .diagonal.flip .front,
  .diagonal.flip .front:hover {
    -webkit-transform: rotate3d(-45,-45,0,150deg);
            transform: rotate3d(-45,-45,0,150deg);

    /* unset the long default transition time */
    -webkit-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
  }

  .diagonal .front .message {
    opacity: 0;
    font-size: 1.4em;
  }
  .diagonal .front:hover .message {
    opacity: .4;
    -webkit-transition-duration: 12s;
            transition-duration: 12s;

    -webkit-transition-delay: 4s;
            transition-delay: 4s;

    -webkit-transform: translateX(-30px) translateZ(40px) scale(1.4);
            transform: translateX(-30px) translateZ(40px) scale(1.4);
  }
  .diagonal.flip .front .message {
    -webkit-transition-duration: 1s;
            transition-duration: 1s;
    -webkit-transform: translateZ(0px) scale(.5);
            transform: translateZ(0px) scale(.5);
  }

  .diagonal .back {
    -webkit-transform: rotate3d(45,45,0,-180deg);
            transform: rotate3d(45,45,0,-180deg);
  }
  .diagonal.flip .back {
    -webkit-transform: rotate3d(45,45,0,-30deg);
            transform: rotate3d(45,45,0,-30deg);
  }

  /* -- swing like a gate -- */
  .swing .front,
  .swing .back {
    width: 140px;

    -webkit-transition-duration: 1s;
            transition-duration: 1s;

    -webkit-transform-origin: 170px 0;
            transform-origin: 170px 0;
  }
  .swing .front {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  .swing .back {
    background-color: #555; /* hiding this side, so get darker */
    -webkit-transform: rotateY(-180deg) translateX(198px) translateZ(2px);
            transform: rotateY(-180deg) translateX(198px) translateZ(2px);
  }

  .swing.flip .front {
    background-color: #222; /* hiding this side, so get darker */
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  .swing.flip .back {
    background-color: #80888f;
    -webkit-transform: rotateY(0) translateX(198px) translateZ(2px);
            transform: rotateY(0) translateX(198px) translateZ(2px);
  }


/* -- cosmetics --
  .panel .pad {padding: 0 15px; } */
  .panel.flip .action {display: none; }
  .block ol li {text-align: left; margin: 0 0 0 28px; }
  .block .action {display: block; padding: 3px; background: #333; text-align: right; font-size: .8em; opacity: 0; position: absolute; cursor: pointer; -webkit-transition: opacity .2s linear; }
  .block:hover .action {opacity: .7; }
  .circle div {border-radius: 100px; }
  .circle div h2 {padding-top: 3em; text-align: center; }
  
  /*EFEITO OVERLAY FRONT*/


	
.item .front .container-overlay-front {
  background-size: cover;
  background-position: center center;
  position: relative;
  margin: auto;
  /*width: 282px;*/
  width:100%;
  height: 188px;
  -webkit-border-radius: 0%;
  -moz-border-radius: 0%;
  border-radius: 0%;
  cursor: pointer;
  overflow: hidden;
  border:0;
}


.front .of1 {background:url(https://placekitten.com/400/800);}
/*.front .of1 {background:url(https://admin01.imobibrasil.net/imagens/imoveis/20170118094034669.jpg);}*/

.front .of2 {background:url(https://admin01.imobibrasil.net/imagens/imoveis/20170118094119736.jpg);}
.front .of3 {background:url(https://admin01.imobibrasil.net/imagens/imoveis/20150319085448826.jpg);}
.front .of4 {background:url(https://admin01.imobibrasil.net/imagens/imoveis/20150319085319756.jpg);}


/*EFEITO OVERLAY BACK*/
	
.item .back .container-overlay{
  background-size: cover;
  background-position: center center;
  position: relative;
  margin: auto;
  /*width: 282px;*/
  width:100%;
  height: 390px;
  -webkit-border-radius: 0%;
  -moz-border-radius: 0%;
  border-radius: 0%;
  cursor: pointer;
  overflow: hidden;
  border:0;
}

.back .of1 {background:url(https://placekitten.com/400/800);}
.back .of2 {background:url(https://admin01.imobibrasil.net/imagens/imoveis/20170118094119736.jpg);}
.back .of3 {background:url(https://admin01.imobibrasil.net/imagens/imoveis/20150319085448826.jpg);}
.back .of4 {background:url(https://admin01.imobibrasil.net/imagens/imoveis/20150319085319756.jpg);}


/*FIM EFEITOS OVERLAY*/