div.template > .template-content {position:relative; box-sizing:border-box; margin:0 auto; padding-top:50%} div.template[data-type="2"] > .template-content {padding-top:33.33%} div.template[data-type="10"] > .template-content {padding-top:55%} .area {box-sizing:border-box; position:relative} .area > .area-content {display:block; overflow:hidden; width:100%; height:100%; -webkit-transform-style: preserve-3d} .area.is-top {position:absolute; top:0; height:100%; overflow:visible} .area.is-top.has-children > .area {height:50%} .area.is-top.has-children > .area.has-children > .area {height:100%; display:inline-block; vertical-align:top} .area.is-top:first-child, .area.is-top.has-children:first-child > .area, .area.is-top.has-children:first-child > .area.has-children > .area:first-child {padding-left:0 !important} .area.is-top:last-child, .area.is-top.has-children:last-child > .area, .area.is-top.has-children:last-child > .area.has-children > .area:last-child {padding-right:0!important} .area[data-type=default] > .area-content {overflow:auto} .area[data-type=default] > .area-content > p:first-child {margin-top:0} .area[data-type=default] > .area-content > p:last-child {margin-bottom:0} .area[data-type=image] > .area-content > img {display:block !important; position:absolute; top:0; left:0; opacity:0; width:100% !important; height:100% !important} .area[data-type=title] {overflow:hidden; text-overflow:ellipsis; line-height:1.2em} div.template:not([data-type="0"]) .area[data-type=title] > .area-content {display:table; width:100%} div.template:not([data-type="0"]) .area[data-type=title] > .area-content > div {display:table-cell; height:100%; width:100%; vertical-align:middle}