/* =============================== */
/* Model Cards */
/* =============================== */

.model-card-container { overflow: hidden; }


.model-card {width: 24.0%;height: 610px;margin: 0 0.5% 1.0%;float: left;border-radius: 8px;color: black;font-size: 120%;text-align: center;-webkit-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}




/* thumbnail */
.model-card .model-thumb { background-color: #263645; border-top-left-radius: 8px; border-top-right-radius: 8px;  position: relative; overflow:hidden; overflow-y:auto;  }
.model-card .model-thumb .model-card-img { width: 100%; display: block; border-top-left-radius: 8px; border-top-right-radius: 8px; padding-right: 65px; }




/* model name */
.model-card .model-info .model-card-title { font-size: 120%; margin-top:16px; margin-bottom:8px; overflow:hidden; }




/* size + bed + bath */
.model-card .model-info { position: relative;   }
.model-card .model-info-primary { margin-bottom: 10px; }




/* date and time */
.model-card .card-datatime { background-color:black; color:white; position:absolute; bottom:-50px; left:50%;  padding:10px; z-index:55; font-size:50%; margin-left:-50px; width:100px;  border-radius:4px; display:none;}
.model-card .card-datetime-active { display:block; }



/* options */
.model-info-options { overflow: hidden; font-size:80%;  }
.model-info-options .model-info-options-title { background-color: #808080; font-size: 18px; letter-spacing: 0.04em; padding: 4px 0; color: white; border-radius: 3px; margin: 0 auto 10px; width: 150px; text-transform: uppercase; }
.showdateqp { display:block; }






/* cards multifamily */
.model-card-multifamily { width: 48.2%; position: relative; margin: 8px 10px 8px 6px; }
.model-card-multifamily .model-thumb { border-radius: 10px; }
.model-card-multifamily .model-info-outer { position: absolute; bottom: 0; left: 0; width: 50%; z-index: 2; border-top-right-radius: 10px; border-bottom-left-radius: 10px; overflow: hidden; background-color: rgba(255,219,220,0.8); padding-bottom: 65px; }
.model-card-multifamily .model-card-btn { position: absolute; bottom: 0; left: 0; width: 100%; }
.model-card-multifamily .model-info { height: 180px; overflow: hidden; overflow-y: auto; }




/* card tool box */
.card-toolbox { background-color: #263746; position: absolute; top: 0; right: 0; width: 70px; height: 100%; z-index: 2; -webkit-box-shadow: inset 4px 0 6px rgba(0,0,0,0.4); box-shadow: inset 4px 0 6px rgba(0,0,0,0.4); padding-top: 10px; }

.model-thumb-icn { width: 34px; height: 34px; margin: 0 auto; display: block; position: relative; }
.model-thumb-icn span { display: block; margin: 0; padding: 0; }
.model-thumb-icn img { width: 100%; display: inline-block; vertical-align: top; padding: 0px 6px 0; opacity: 0.5 !important; }
.card-toolbox .home-type-icn img { margin-top:8px; }



/* card click cover */
.card-click-cover { background-color: transparent; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 4; }
.card-click-cover img { display: block; width: 100%; height: 100%; }



/* compare bard */
.model-card-compare { width:100%; height:auto; padding-bottom:30px; margin:0; border-bottom-left-radius:0; border-bottom-right-radius:0; }
.model-card-compare .model-info { border-bottom-left-radius:20px;border-bottom-right-radius:20px;  }

.col-compare { padding-right:0; }





/* card flip */
.flip-card { width: 100%; -webkit-perspective: 1000px; perspective: 1000px; -webkit-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; }

.flip-card-inner { position: relative; text-align: center; -webkit-transition: -webkit-transform 0.6s; transition: -webkit-transform 0.6s; -o-transition: transform 0.6s; transition: transform 0.6s; transition: transform 0.6s, -webkit-transform 0.6s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;  }

.flip-card-inner-active { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }

.flip-card-front,
.flip-card-back { position: absolute; width: 100%; height: 216px; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: auto; transform: rotateX(0deg) }
.flip-card-back { -webkit-transform: rotateY(180deg); transform: rotateY(180deg);  }

.close-flip { position:absolute; top:0px; right:20px; }

.flip-start { background-color:#757569; color:white; font-size:20px; text-transform:uppercase; width:195px; border-radius:4px; padding:2px 0; margin:15px auto; visibility:visible;opacity:1; -webkit-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out;}
.flip-start-hidden { visibility:hidden;opacity:0; }