/* Static */
.item.flip1 {
    font-size: 6vmin;
}
.item.flip1 .date-wrap, .item.flip1 .time-wrap, .item.flip1 .date-separator {
    display: none;
}
.postdate .item.flip1 .date-wrap, .posttime .item.flip1 .time-wrap, .posttime.postdate .item.flip1 .date-separator {
    display: inline;
}
.item.flip1,
.item.flip1 .item_wrap {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.item.flip1 .item_wrap {
    position: relative;
    background: #fff;
}
.item.flip1 .front,
.item.flip1 .back {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
.item.flip1 .front {
    z-index: 1;
    opacity: 1;
}
.item.flip1 .back {
    opacity: 0;
    z-index: -1;
}
.item.flip1 .image {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 1;
}
.item.flip1 .image img {
    display: none;
}
.item.flip1 .video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
}
.item.flip1 .text {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    padding: 0.3em;
    font-size: 100%;
    text-align: center;
    overflow: hidden;
}
.item.flip1.textshort .text {
    font-size: 200%;
}
.item.flip1.textmid .text {
    font-size: 150%;
}
.item.flip1.textlong .text {
    font-size: 100%;
}
.item.flip1 .text_wrap_outer {
    position: relative;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    padding: 0.1em;
    overflow: hidden;
    background: #c0ced5;
}
.item.flip1 .text_wrap_outer::before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2.0em;
    z-index: 1;
    background: -moz-linear-gradient(top,  rgba(192,206,213,0) 0%, rgba(192,206,213,1) 72%, rgba(192,206,213,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(192,206,213,0) 0%,rgba(192,206,213,1) 72%,rgba(192,206,213,1) 100%);
    background: linear-gradient(to bottom,  rgba(192,206,213,0) 0%,rgba(192,206,213,1) 72%,rgba(192,206,213,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c0ced5', endColorstr='#c0ced5',GradientType=0 );
}
.item.flip1 .text_wrap {
    display: table;
    width: 100%;
    height: 100%;
    table-layout: fixed;
    word-wrap: break-word;
}
.item.flip1 .text_wrap_inner {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}
.item.flip1 .text_wrap span {
    display: inline-block;
    width: 100%;
}
.item.flip1 .status {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 0 0.3em 0.3em;
    overflow: hidden;
    font-size: 70%;
    line-height: 1.8em;
    white-space: nowrap;
}
.item.flip1 .status .nickname {
    display: none;
}
.item.flip1 .status .authoravatar,
.item.flip1 .status .author,
.item.flip1 .status .social,
.item.flip1 .status .date {
    position: absolute;
    overflow:  hidden;
    height: 1.5em;
}
.item.flip1 .status .date {
    text-transform: lowercase;
}
.item.flip1 .status .authoravatar {
    background: url(/public/img/wall/snwall-black-short.png) no-repeat center center / 70% auto #c0ced5;
    border: 1px solid #282c2e;
    width: 1.5em;
    line-height: 1.5em;
    border-radius: 100%;
}
.item.flip1 .status .authoravatar img {
    display: block;
    min-height: 100%;
    min-width: 100%;
    height: 100%;
}
.item.flip1 .status .social {
    width: 1.5em;
    line-height: 1.5em;
    text-align: center;
    overflow: visible;
}
.item.flip1 .status .social.fa::before {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 1.6em;
    overflow: visible;
}



/* Modifiers */
.postmargin .item.flip1 {
    box-sizing: border-box;
    padding: 0.2em;
}
.postrounded .item.flip1 .item_wrap {
    border-radius: 1em;
}
.postrounded .item.flip1 .item_wrap .text_wrap_outer {
    border-radius: 0.8em;
}
.useravatar .item.flip1 .text,
.username .item.flip1 .text,
.postdate .item.flip1 .text,
.posttime .item.flip1 .text,
.postsite .item.flip1 .text {
    height: 90%;
}
.useravatar .item.flip1 .status,
.username .item.flip1 .status,
.postdate .item.flip1 .status,
.posttime .item.flip1 .status,
.postsite .item.flip1 .status {
    display: block;
    height: 10%;
}
/* all is */
.useravatar.username.postdate.postsite .item.flip1 .status .authoravatar,
.useravatar.username.postdate.postsite .item.flip1 .status .author,
.useravatar.username.postdate.postsite .item.flip1 .status .date,
.useravatar.username.postdate.postsite .item.flip1 .status .social,
.useravatar.username.posttime.postsite .item.flip1 .status .authoravatar,
.useravatar.username.posttime.postsite .item.flip1 .status .author,
.useravatar.username.posttime.postsite .item.flip1 .status .date,
.useravatar.username.posttime.postsite .item.flip1 .status .social {
    display: block;
    left: auto;
    right: auto;
    text-align: left;
}
.useravatar.username.postdate.postsite .item.flip1 .status .authoravatar,
.useravatar.username.posttime.postsite .item.flip1 .status .authoravatar {
    left: 1em;
}
.useravatar.username.postdate.postsite .item.flip1 .status .author,
.useravatar.username.posttime.postsite .item.flip1 .status .author {
    left: 2.9em;
    max-width: 40%;
}
.useravatar.username.postdate.postsite .item.flip1 .status .date,
.useravatar.username.posttime.postsite .item.flip1 .status .date {
    right: 2.9em;
    text-align: right;
}
.useravatar.username.postdate.postsite .item.flip1 .status .social,
.useravatar.username.posttime.postsite .item.flip1 .status .social {
    right: 1em;
}
/* no avatar */
.username.postdate.postsite .item.flip1 .status .author,
.username.postdate.postsite .item.flip1 .status .date,
.username.postdate.postsite .item.flip1 .status .social,
.username.posttime.postsite .item.flip1 .status .author,
.username.posttime.postsite .item.flip1 .status .date,
.username.posttime.postsite .item.flip1 .status .social  {
    display: block;
    left: auto;
    right: auto;
    text-align: left;
}
.username.postdate.postsite .item.flip1 .status .authoravatar,
.username.posttime.postsite .item.flip1 .status .authoravatar {
    display: none;
}
.username.postdate.postsite .item.flip1 .status .author,
.username.posttime.postsite .item.flip1 .status .author  {
    left: 2.9em;
    max-width: 40%;
}
.username.postdate.postsite .item.flip1 .status .date,
.username.posttime.postsite .item.flip1 .status .date {
    right: 1em;
    text-align: right;
}
.username.postdate.postsite .item.flip1 .status .social,
.username.posttime.postsite .item.flip1 .status .social {
    left: 1em;
}
/* no date */
.useravatar.username.postsite .item.flip1 .status .authoravatar,
.useravatar.username.postsite .item.flip1 .status .author,
.useravatar.username.postsite .item.flip1 .status .social {
    display: block;
    left: auto;
    right: auto;
    text-align: left;
}
.useravatar.username.postsite .item.flip1 .status .authoravatar {
    left: 1em;
}
.useravatar.username.postsite .item.flip1 .status .author {
    left: 2.9em;
    max-width: 70%;
}
.useravatar.username.postsite .item.flip1 .status .date {
    display: none;
}
.useravatar.username.postsite .item.flip1 .status .social {
    right: 1em;
}
/* no site */
.useravatar.username.postdate .item.flip1 .status .authoravatar,
.useravatar.username.postdate .item.flip1 .status .author,
.useravatar.username.postdate .item.flip1 .status .date,
.useravatar.username.posttime .item.flip1 .status .authoravatar,
.useravatar.username.posttime .item.flip1 .status .author,
.useravatar.username.posttime .item.flip1 .status .date {
    display: block;
    left: auto;
    right: auto;
    text-align: left;
}
.useravatar.username.postdate .item.flip1 .status .authoravatar,
.useravatar.username.posttime .item.flip1 .status .authoravatar {
    left: calc(50% - 0.75em);
}
.useravatar.username.postdate .item.flip1 .status .author,
.useravatar.username.posttime .item.flip1 .status .author {
    right: calc(50% + 1.5em);
    max-width: 40%;
    text-align: right;
}
.useravatar.username.postdate .item.flip1 .status .date,
.useravatar.username.posttime .item.flip1 .status .date {
    left: calc(50% + 1.5em);
}
.useravatar.username.postdate .item.flip1 .status .social,
.useravatar.username.posttime .item.flip1 .status .social {
    display: none;
}
/* no date, no site */
.useravatar.username .item.flip1 .status .authoravatar,
.useravatar.username .item.flip1 .status .author {
    display: block;
    left: auto;
    right: auto;
    text-align: left;
}
.username.useravatar .item.flip1 .status .authoravatar {
    left: 1em;
}
.username.useravatar .item.flip1 .status .author {
    left: 2.9em;
    max-width: 40%;
}
.username.useravatar .item.flip1 .status .date {
    display: none;
}
.username.useravatar.item.flip1 .status .social {
    display: none;
}
/* no avatar, no name */
.postdate.postsite .item.flip1 .status .date,
.postdate.postsite .item.flip1 .status .social,
.posttime.postsite .item.flip1 .status .date,
.posttime.postsite .item.flip1 .status .social {
    display: block;
    left: auto;
    right: auto;
    text-align: left;
}
.postdate.postsite .item.flip1 .status .authoravatar,
.posttime.postsite .item.flip1 .status .authoravatar {
    display: none;
}
.postdate.postsite .item.flip1 .status .author,
.posttime.postsite .item.flip1 .status .author {
    display: none;
}
.postdate.postsite .item.flip1 .status .date,
.posttime.postsite .item.flip1 .status .date {
    left: 2.9em;
}
.postdate.postsite .item.flip1 .status .social,
.posttime.postsite .item.flip1 .status .social {
    left: 1em;
}



/* Animation */
.item.flip1 .item_wrap {
    transform-style: preserve-3d;
    transition: transform 1.3s cubic-bezier(0.68, 0, 0.265, 1.05);
}

/* front to back */
.item.flip1.animationstart .item_wrap {
    transform: rotateY(-180deg);
}
.item.flip1.animationmiddle .front {
    z-index: -1;
    opacity: 0;
}
.item.flip1.animationmiddle .back {
    transform: rotateY(180deg);
    z-index: 1;
    opacity: 1;
}

/* idle on back */
.item.flip1.backside .item_wrap {
    transform: rotateY(-180deg);
}
.item.flip1.backside .front {
    z-index: -1;
    opacity: 0;
}
.item.flip1.backside .back {
    transform: rotateY(180deg);
    z-index: 1;
    opacity: 1;
}

/* from back to front */
.item.flip1.backside.animationstart .item_wrap {
    transform: rotateY(0deg);
}
.item.flip1.backside.animationmiddle .front {
    z-index: 1;
    opacity: 1;
}
.item.flip1.backside.animationmiddle .back {
    transform: rotateY(0deg);
    z-index: -1;
    opacity: 0;
}


/* no animation in some cases */
.item.flip1.noimage.novideo .item_wrap {
    transform: none !important;
    transition: none !important;
}
.item.flip1.noimage.novideo .front {
    opacity: 0 !important;
    z-index: -1 !important;
}
.item.flip1.noimage.novideo .back {
    transform: none !important;
    opacity: 1 !important;
    z-index: 1 !important;
}

.item.flip1.notext .item_wrap {
    transform: none !important;
    transition: none !important;
}
.item.flip1.notext .front {
    opacity: 1 !important;
    z-index: 1 !important;
}
.item.flip1.notext .back {
    opacity: 0 !important;
    z-index: -1 !important;
}