/*======================== Tiles ====================================*/
div.widgets {
    padding: 48px 0px 48px 0px;
}
.flip-container{
    -webkit-perspective:1000;
    -moz-perspective:1000;
    -ms-perspective:1000;
    perspective:1000;
    -ms-transform:perspective(1000px);
    -moz-transform:perspective(1000px);
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d}
.flip-container:hover .back,.flip-container.hover .back{
    -webkit-transform:rotateY(0deg);
    -moz-transform:rotateY(0deg);
    -o-transform:rotateY(0deg);
    -ms-transform:rotateY(0deg);
    transform:rotateY(0deg)}
.flip-container:hover .front,.flip-container.hover .front{
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    -o-transform:rotateY(180deg);
    transform:rotateY(180deg)}
.flip-container{
    margin-bottom:20px}
.flip-container,.front,.back{
    width:100%;
    height:240px;
    -webkit-border-radius:12px;
    -webkit-border-bottom-left-radius:0;
    -moz-border-radius:12px;
    -moz-border-radius-bottomleft:0;
    border-radius:12px;
    border-bottom-left-radius:0}
.flipper{
    -webkit-transition:0.6s;
    -webkit-transform-style:preserve-3d;
    -ms-transition:0.6s;
    -moz-transition:0.6s;
    -moz-transform:perspective(1000px);
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    transition:0.6s;
    transform-style:preserve-3d;
    position:relative}
.front,.back{
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
    backface-visibility:hidden;
    -webkit-transition:0.6s;
    -webkit-transform-style:preserve-3d;
    -moz-transition:0.6s;
    -moz-transform-style:preserve-3d;
    -o-transition:0.6s;
    -o-transform-style:preserve-3d;
    -ms-transition:0.6s;
    -ms-transform-style:preserve-3d;
    transition:0.6s;
    transform-style:preserve-3d;
    position:absolute;
    top:0;
    left:0}
.front,.icon-preview{
    background:#EEE;
    z-index:2;
    background-image:url(https://uploads.prod01.sydney.platformos.com/instances/295/assets/images/tiles/sprite-widgets.png?updated=1627533612781);
    background-repeat:no-repeat;
    background-position:center 0px}
.front h2{
    width:100%;
    margin:160px 0 0 0;
    font-size:17px;
    color:#FFF;
    text-align:center}
.back{
    background:#ffedc4;
    font-family:"Raine&HorneRegular", arial, helvetica, sans-serif;
    color:#636364;
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    -o-transform:rotateY(-180deg);
    -ms-transform:rotateY(-180deg);
    transform:rotateY(-180deg)}
.front .name{
    font-size:2em;
    display:inline-block;
    background:rgba(33,33,33,0.9);
    color:#f8f8f8;
    font-family:Courier;
    padding:5px 10px;
    border-radius:5px;
    bottom:60px;
    left:25%;
    position:absolute;
    text-shadow:0.1em 0.1em 0.05em #333;
    display:none;
    -webkit-transform:rotate(-20deg);
    -moz-transform:rotate(-20deg);
    -ms-transform:rotate(-20deg);
    transform:rotate(-20deg)}
.front a{
    color:#FFF}
.back p{
    width:100%;
    margin:20px 0 0 0;
    text-align:center;
    padding:0 20px;
    font-size:16px}
.back p a{
    margin:20px 0 0 0;
    display:inline-block}
/* front pane, placed above back */
.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}
/* tile colours */
.front.buying {
    text-shadow: 1px 1px 0 #d68826;
    background-position: center -240px;
    background-color: #ff9d23;
}
.front.selling {
    text-shadow: 1px 1px 0 #d6ad09;
    background-position: center 67px;
    background-color: #ffcc00;
}
.front.office {
    text-shadow: 1px 1px 0 #d68826;
    background-position: center -2640px;
    background-color: #ff9d23;
}
.front.calculators {
    text-shadow: 1px 1px 0 #d68826;
    background-position: center -2040px;
    background-color: #ff9d23;
}
.front.door {
    text-shadow: 1px 1px 0 #d68826;
    background-position: center -5944px;
    background-color: #ff9d23;
}

.front.managed {
    text-shadow: 1px 1px 0 #daa019;
    background-position: center -1140px;
    background-color: #ffb914;
}
.front.users {
    text-shadow: 1px 1px 0 #d68826;
    background-position: center -4140px;
    background-color: #ff9d23;
}
.front.office {
    text-shadow: 1px 1px 0 #d68826;
    background-position: center -2640px;
    background-color: #ff9d23;
}

.front.commercial {
    text-shadow: 1px 1px 0 #111;
    background-position: center -540px;
    background-color: #3c3c3d;
}
.front.find {
    text-shadow: 1px 1px 0 #daa019;
    background-position: center -1740px;
    background-color: #ffb914;
}
.front.info {
    text-shadow: 1px 1px 0 #d68826;
    background-position: center -6234px;
    background-color: #ff9d23;
}
.front.mobile {
    text-shadow: 1px 1px 0 #d68826;
    background-position: center -4450px;
    background-color: #ff9d23;
}
.front.careers {
    text-shadow: 1px 1px 0 #888;
    background-position: center -1440px;
    background-color: #a4a4a4;
}
/*==========================================================================*/