.vlp-link-container{position:relative}.vlp-link-container:hover{cursor:pointer}.vlp-link-container:after{clear:both;content:"";display:table}.vlp-link-container .vlp-link-summary p:last-child{margin-bottom:0}a.vlp-link{bottom:0!important;left:0!important;position:absolute!important;right:0!important;top:0!important}a.vlp-link,a.vlp-link:active,a.vlp-link:hover,a.vlp-link:link,a.vlp-link:visited{background:0!important;border:0!important;box-shadow:none!important;float:none!important;margin:0!important;opacity:1!important;outline:0!important;padding:0!important;text-decoration:none!important;transform:none!important}.mistape_caption {
font-size: 80%;
opacity: 0.8;
}
.mistape-link-wrap {
float: left;
margin-right: 6px;
}   .mistape-logo svg {
display: block;
height: 22px;
width: 22px;
fill: #E42029;
}
.mistape-logo.spin {
animation-name: spin;
animation-duration: 1000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-name: spin;
-webkit-animation-duration: 1000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 1000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
}
.mistape_caption .mistape-link {
text-decoration: none!important;
border: none!important;
box-shadow: none!important;
}
.mistape-link:hover {
text-decoration: none!important;
border: none!important;
} #mistape_dialog,
#mistape_dialog .dialog__overlay {
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#mistape_dialog {
position: fixed;
z-index: 2147483647;
display: none;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
pointer-events: none;
}
#mistape_dialog .dialog__overlay {
position: absolute;
background: rgba(55, 58, 71, 0.9);
opacity: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
-webkit-backface-visibility: hidden;
}
#mistape_dialog .dialog__content .dialog-wrap {
perspective: 800px;
transition: transform 0.5s;
}
#mistape_dialog .dialog__content .dialog-wrap .dialog-wrap-top {
padding: 30px 30px 0;
background: #fff;
transform-origin: 50% 100%;
transition: transform 0.5s;
position: relative;
z-index: 1;
transform-style: preserve-3d;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
#mistape_dialog .dialog__content .dialog-wrap .dialog-wrap-top::after{
content: '';
width: 100%;
height: 100%;
position: absolute;
background: #fff;
top: 0;
left: 0;
transform: rotateX( 180deg );
transform-style: preserve-3d;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
#mistape_dialog .dialog__content .dialog-wrap .dialog-wrap-bottom .comment {
margin-top: 0;
padding-left: 0;
margin-left: auto;
margin-right: auto;
width: 100%;
}
#mistape_dialog .dialog__content .dialog-wrap .dialog-wrap-bottom {
padding: 31px 30px 45px;
background: #fff;
transition: background 0.4s;
transform: translate3d(0,0,0) translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
margin-top: -1px;
}
#mistape_dialog .dialog__content {
width: 50%;
max-width: 560px;
min-width: 290px;
text-align: center;
position: relative;
opacity: 0;
transition: height 0.3s ease;
font-size: 14px;
box-sizing: content-box;
}
#mistape_dialog.dialog--open .dialog__overlay {
opacity: 1;
pointer-events: auto;
}
#mistape_dialog.dialog--open .dialog__content {
pointer-events: auto;
}
#mistape_reported_text {
padding: 5px 10px;
position: relative;
z-index: 0;
font-weight: normal;
}
#mistape_reported_text::before {
content: '';
width: 15px;
height: 15px;
border-top: solid 2px #E42029;
border-left: solid 2px #E42029;
position: absolute;
z-index: -1;
top: 0;
left: 0;
}
#mistape_reported_text::after {
content: '';
width: 15px;
height: 15px;
border-bottom: solid 2px #E42029;
border-right: solid 2px #E42029;
position: absolute;
z-index: -1;
bottom: 0;
right: 0;
}
#mistape_reported_text .mistape_mistake_outer {
background-color: #F5F5F5;
color: #111;
font-weight: normal;
padding: 0 3px;
}
#mistape_reported_text .mistape_mistake_inner {
color: #E42029;
font-weight: normal;
}
textarea#mistape_comment {
width: 100%;
resize: none;
font-size: 14px;
padding: 4px 6px;
line-height: 1.4;
box-sizing: border-box;
border: 1px solid #ddd;
border-radius: 0;
color: #8E8E8E;
transition: border 0.3s, color 0.3s, background 0.4s;
}
textarea#mistape_comment:focus {
background-color: #fff;
border-color: #949494;
color: #1a1a1a;
outline: 0;
}
#mistape_dialog .mistape_dialog_block {
margin-top: 20px;
}
#mistape_dialog .pos-relative {
position: relative;
}
#mistape_dialog .mistape_dialog_footer {
position: absolute;
right: 0;
bottom: -24px;
font-size: 10px;
color: #ddd;
}
#mistape_dialog .mistape_dialog_footer a {
color: #ccc;
}
#mistape_dialog .mistape_action{
display: inline-block;
cursor: pointer;
padding: 11px 25px;
margin: 0 5px;
font-weight: 600;
border: none;
color: #fff;
background: #E42029;
text-decoration: none;
user-select: none;
text-transform: uppercase;
font-size: 13px;
min-width: 150px;
}
#mistape_dialog .mistape_action:hover{
opacity: 0.9;
text-decoration: none;
}
#mistape_dialog h2 {
margin: 0;
font-weight: 400;
font-size: 22px;
padding: 0 0 20px;
position: relative;
}
#mistape_dialog h2::before {
content: '';
height: 1px;
width: 60px;
position: absolute;
bottom: 0;
left: calc(50% - 30px);
background: #E42029;
}
#mistape_dialog h3 {
margin: 0;
font-weight: 300;
font-size: 14px;
text-transform: none;
padding: 0 0 1em;
color: #BFBFBF;
}
#mistape_success_dialog .dialog-wrap{
background: #fff;
padding: 30px;
}
#mistape_success_dialog .dialog-wrap h3{
margin-top: 20px;
} #mistape_dialog.dialog--open .dialog__content,
#mistape_dialog.dialog--close .dialog__content {
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#mistape_dialog.dialog--open .dialog__content {
-webkit-animation-name: anim-open;
animation-name: anim-open;
}
#mistape_dialog.dialog--close .dialog__content {
-webkit-animation-name: anim-close;
animation-name: anim-close;
}
@-webkit-keyframes anim-open {
0% { opacity: 0; -webkit-transform: scale3d(1.1, 1.1, 1); }
100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); }
}
@keyframes anim-open {
0% { opacity: 0; -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); }
100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@-webkit-keyframes anim-close {
0% { opacity: 1; }
100% { opacity: 0;  }
}
@keyframes anim-close {
0% { opacity: 1; }
100% { opacity: 0;  }
}
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
} .mistape-letter{
width: 640px;
height: 400px;
top: calc(50% - 200px);
position: absolute;
}
.mistape-letter-front{
width: 304px;
height: 190px;    position: absolute;
bottom: 0;
z-index: 4;
left: calc(50% - 152px);
transform: scale(0.145);
transform-origin: 50% 100%;
opacity: 0;
transition: transform 0.4s, opacity 0.15s;
}
.mistape-letter-front .front-left {
width: 0;
height: 0;
border-left: 152px solid #E42029;
border-right: 0;
border-top: 95px solid transparent;
border-bottom: 95px solid transparent;
position: absolute;
z-index: 2;
top: 0;
left: 0;
}
.mistape-letter-front .front-right {
width: 0;
height: 0;
border-right: 152px solid #E42029;
border-left: 0;
border-top: 95px solid transparent;
border-bottom: 95px solid transparent;
position: absolute;
z-index: 2;
top: 0;
right: 0;
}
.mistape-letter-front .front-right:before {
content: '';
display: block;
width: 0;
height: 0;
border-right: 152px solid rgba(0,0,0,0.2);
border-left: 0;
border-top: 95px solid transparent;
border-bottom: 95px solid transparent;
position: absolute;
top: -95px;
right: -152px;
}
.mistape-letter-front .front-bottom {
width: 0;
height: 0;
border-bottom: 95px solid #E42029;
border-top: 0;
border-left: 152px solid transparent;
border-right: 152px solid transparent;
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
}
.mistape-letter-front .front-bottom:before {
content: '';
display: block;
width: 0;
height: 0;
border-bottom: 95px solid rgba(0,0,0,0.1);
border-top: 0;
border-left: 152px solid transparent;
border-right: 152px solid transparent;
position: absolute;
top: 0;
right: -152px;
}
.mistape-letter-back{
width: 304px;
height: 190px;  background-color: #E42029;
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
z-index: 2;
bottom: 0;
left: calc(50% - 152px);
transition: transform 0.4s, opacity 0.15s;
transform: scale(0.145);
transform-origin: 50% 100%;
opacity: 0;
}
.mistape-letter-back:before {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.4);
}
.mistape-letter-back > .mistape-letter-back-top{  width: 0;
height: 0;  border-bottom: 95px solid #E42029;
border-top: 0;
border-left: 152px solid transparent;
border-right: 152px solid transparent;
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
z-index: 2;
bottom: 100%;
left: calc(50% - 152px);
transition: transform 0.4s;
transform-origin: 50% 100%;
transform: translateX(0) rotateX(-180deg);
}
.mistape-letter-back > .mistape-letter-back-top:before {
content: '';
display: block;
width: 0;
height: 0;
border-bottom: 95px solid rgba(0,0,0,.3);
border-top: 0;
border-left: 152px solid transparent;
border-right: 152px solid transparent;
position: absolute;
top: 0;
left: -152px;
}
.mistape-letter-top {
width: 0;
height: 0;    border-bottom: 95px solid #E42029;
border-top: 0;
border-left: 152px solid transparent;
border-right: 152px solid transparent;
position: absolute;
z-index: 2;
bottom: 0;
opacity: 0;
left: calc(50% - 152px);
transition: transform 0.3s;
transform-origin: 50% 100%;
transform: rotateX(0deg);
}
.mistape-letter-top:before {
content: '';
display: block;
width: 0;
height: 0;
border-bottom: 95px solid rgba(0,0,0,.3);
border-top: 0;
border-left: 152px solid transparent;
border-right: 152px solid transparent;
position: absolute;
top: 0;
left: -152px;
}
.mistape-letter-top.close {
transform: rotateX(-180deg);
}
#mistape_dialog .dialog__content .dialog-wrap{
z-index: 3;
position: relative;
}
#mistape_dialog .dialog__content.show-letter .mistape-letter-back,
#mistape_dialog .dialog__content.show-letter .mistape-letter-front{
transform: scale(1) translateY(15%);
opacity: 1;
}
#mistape_dialog .dialog__content.show-letter .mistape-letter-back > .mistape-letter-back-top{
transform: rotateX(0deg);
}
#mistape_dialog .dialog__content.show-letter .dialog-wrap .dialog-wrap-top{
transform: rotateX(-180deg);
}
#mistape_dialog .dialog__content.show-letter .dialog-wrap .dialog-wrap-bottom{
background: #c1c1c1;
}
#mistape_dialog .dialog__content.show-letter .dialog-wrap .dialog-wrap-bottom textarea{
background: #c1c1c1;
}
#mistape_dialog .dialog__content.show-letter .dialog-wrap{
transform: translateY(-150%);
}
#mistape_dialog .dialog__content.show-letter.with-comment .dialog-wrap{
transform: translateY(-50%);
}
#mistape_dialog .mistape_action[data-action="send"]{
position: relative;
z-index: 8;
}
#mistape_dialog .dialog__content.show-letter .mistape_action[data-action="send"]{
transition-delay: 0.3s;
transition: visibility 0.1s, opacity 0.1s;
visibility: hidden!important;
opacity: 0!important;
}
@keyframes send-letter1 {
0% { transform: translateX(0) translateY(15%); }
20% { transform: translateX(-60%) translateY(15%); }
100% { transform: translateX(100vw) translateY(15%); }
}
@-moz-keyframes send-letter1 {
0% { transform: translateX(0) translateY(15%); }
20% { transform: translateX(-60%) translateY(15%); }
100% { transform: translateX(100vw) translateY(15%); }
}
@-webkit-keyframes send-letter1 {
0% { transform: translateX(0) translateY(15%); }
20% { transform: translateX(-60%) translateY(15%); }
100% { transform: translateX(100vw) translateY(15%); }
}
@keyframes send-letter2 {
0% { transform: translateX(0) rotateX(-180deg); }
20% { transform: translateX(-60%) rotateX(-180deg); }
100% { transform: translateX(100vw) rotateX(-180deg); }
}
@-moz-keyframes send-letter2 {
0% { transform: translateX(0) rotateX(-180deg); }
20% { transform: translateX(-60%) rotateX(-180deg); }
100% { transform: translateX(100vw) rotateX(-180deg); }
}
@-webkit-keyframes send-letter2 {
0% { transform: translateX(0) rotateX(-180deg); }
20% { transform: translateX(-60%) rotateX(-180deg); }
100% { transform: translateX(100vw) rotateX(-180deg); }
}