@font-face {
font-family: 'fontello';
src: url(https://monocler.ru/wp-content/plugins/custom-goodsharejs-icons/font/fontello.eot);
src: url(https://monocler.ru/wp-content/plugins/custom-goodsharejs-icons/font/fontello.eot#iefix) format('embedded-opentype'),
url(https://monocler.ru/wp-content/plugins/custom-goodsharejs-icons/font/fontello.woff) format('woff'),
url(https://monocler.ru/wp-content/plugins/custom-goodsharejs-icons/font/fontello.ttf) format('truetype'),
url(https://monocler.ru/wp-content/plugins/custom-goodsharejs-icons/font/fontello.svg#fontello) format('svg');
font-weight: normal;
font-style: normal;
}
.share-icons {
margin: 1em 0 2em;
text-align: center;
}
.share-icons .icon
{
color: #fff;
font-family: "fontello";
font-style: normal;
font-weight: normal;
font-size: .9em;
speak: none;
display: inline-block;
text-decoration: inherit;
margin-right: .2em;
text-align: center; font-variant: normal;
text-transform: none; line-height: 1em;  margin-left: .2em;   -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.share-icons .icon-whatsapp {
font-weight: bold;
font-size: 1em;
}
.share-icons [data-counter] {
display: none;
}
.share-icons [data-counter='sum'] { display: none;
vertical-align: top;
padding: 21px 18px;
height: 54px;
font-family: 'Roboto Condensed', Helvetica, Arial, Lucida, sans-serif;
font-size: 16px;
font-weight: bold;
color: #fff;
background: #fcb700;
box-sizing: border-box;
}
.share-icons [data-counter='sum'] .label {
padding-left: 4px;
text-transform: uppercase;
}
.share-icons .goodshare {
display: inline-block;
vertical-align: top;
padding: 18px 0;
width: 16.66%;
max-width: 60px;
height: 54px;
text-align: center;
background: #333;
border: none;
border-left: 1px solid #444;
box-sizing: border-box;
transition: all .5s ease;
}
.share-icons .goodshare:hover {
background: #fcb700;
border-color: #fcb700;
}
.share-icons .goodshare.first { }
@media (max-width: 767px) {
.share-icons {
margin-left: auto;
margin-right: auto;
max-width: 360px;
}
.share-icons [data-counter='sum'] { display: none;
}
.share-icons .goodshare.first { }
.share-icons .goodshare.first:hover { }
}.wpfp-featured-post *{outline: none !important;}
.wpfpcolumn, .wpfpcolumns {-webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box;}
.wpfp-link-overlay {position: absolute;height: 100%;width: 100%;top: 0px;left: 0px; z-index: 1;}
.wpfp-date span {font-style:italic; font-size:12px;}
.wpfp-overlay {position:relative}
.wpfp-overlay a {color:#fff;}
.wpfp-image-bg img { max-width:100% ;  height: auto;}
.wpfp-date{line-height: normal !important;padding: 5px 5px 5px 0; display: inline-block; text-transform: capitalize;color: #666;font-size: 12px; color: #fff; position: relative; z-index: 10;}
.wpfp-categories {padding: 4px 0px;display: inline-block;text-transform: capitalize;color: #666;position: relative; z-index: 9;}
.wpfp-categories a {text-decoration: none ; font-size:10px;text-transform: capitalize;padding: 2px 8px;color: #fff !important;line-height: normal;display: inline-block; margin: 1px 0; -webkit-transition: all 0.5s ease 0s;-moz-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;transition: all 0.5s ease 0s;}
.wpfp-bottom-content .wpfp-categories a:hover, .wpfp-bottom-content .wpfp-categories a:focus, .featured-grid .featured-categories a:hover, .featured-grid .featured-categories a:focus {background: #000 !important; color: #fff !important;}
.wpfp-categories a:nth-child(4n+1), .featured-categories a:nth-child(4n+1) {background: #fb4c35 !important;border-color: #fb4c35 !important;}
.wpfp-categories a:nth-child(4n+2), .featured-categories a:nth-child(4n+2) {background: #5E35B1 !important;border-color: #5E35B1 !important;}
.wpfp-categories a:nth-child(4n+3), .featured-categories a:nth-child(4n+3) {background: #F57C00 !important;border-color: #F57C00 !important;}
.wpfp-categories a:nth-child(4n+4), .featured-categories a:nth-child(4n+4) {background: #00796B !important;border-color: #00796B !important;}
.wpfp-clearfix:before, .wpfp-clearfix:after {content: "";display: table;}
.wpfp-clearfix::after {clear: both;}
.wpfp-medium-3.wpfp-medium-right {padding: 0 0 5px 5px;}
.wpfp-medium-6.wpfp-medium-left {padding:0 0 5px 0px;}
.wpfp-grid-content, .wpfp-image-bg{height: 100%;} .wpfp-featured-post.design-1 .wpfp-image-bg {background: #f1f1f1;-webkit-transition: all 0.5s ease 0s;-moz-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;transition: all 0.5s ease 0s;}
.wpfp-featured-post.design-1 .wpfp-image-bg img {height: 100%;width: 100% !important;object-fit: cover;object-position: top center; border-radius: 0;}
.wpfp-featured-post.design-1 .wpfp-categories a {margin: 2px 0; color: #fff !important; text-decoration: none !important; -webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.5);-moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.5);box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.5);}
.wpfp-featured-post.design-1 .wpfp-title {line-height: normal;}
.wpfp-featured-post.design-1 .wpfp-title a {font-size: 14px; line-height: normal; text-decoration: none; text-transform: capitalize; color:#fff; font-weight: bold;}
.wpfp-featured-post.design-1 .wpfp-grid-content {padding-bottom: 0;}
.wpfp-featured-post.design-1 .wpfp-bottom-content {position: absolute;bottom: 0px;padding: 15px;left: 0;text-align: left;right: 0;
background: -moz-linear-gradient(to bottom,#0000 0, #0006 50%, #000000b3 100%);
background: -ms-linear-gradient(to bottom,rgba(0,0,0,0) 0, rgba(0,0,0,0.4) 50%, rgba(0,0,0,.7) 100%);
background: -o-linear-gradient(to bottom,rgba(0,0,0,0) 0, rgba(0,0,0,0.4) 50%, rgba(0,0,0,.7) 100%);
background: -webkit-linear-gradient(to bottom,rgba(0,0,0,0) 0, rgba(0,0,0,0.4) 50%, rgba(0,0,0,.7) 100%);
background: -webkit-gradient(linear, center top, center bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.7)));
background: linear-gradient(to bottom,#0000 0, #0006 50%, #000000b3 100%);}
.wpfp-featured-post.design-1 .wpfp-overlay {overflow: hidden; height: 100%;}
.wpfp-featured-post.design-1 .wpfp-link-overlay:hover + .wpfp-grid-content .wpfp-image-bg {-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-ms-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);-webkit-transition: all 0.5s ease 0s;-moz-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;transition: all 0.5s ease 0s;} .wpfp-featured-post-grid{clear:both; margin:0 -15px;} 
.wpfp-featured-post-grid .wpfpcolumns{margin-bottom:30px;}
.wpfp-featured-post-grid.design-1 .wpfp-image-bg {background: #f1f1f1;-webkit-transition: all 0.5s ease 0s;-moz-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;transition: all 0.5s ease 0s;}
.wpfp-featured-post-grid.design-1 .wpfp-image-bg img {height: 100%;width: 100% !important;object-fit: cover;object-position: top center; border-radius: 0;}
.wpfp-featured-post-grid.design-1 .wpfp-categories a {margin: 2px 0; color: #fff !important; text-decoration: none !important; -webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.5);-moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.5);box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.5);}
.wpfp-featured-post-grid.design-1 .wpfp-title {line-height: normal;}
.wpfp-featured-post-grid.design-1 .wpfp-title a {font-size: 14px; line-height: normal; text-decoration: none; text-transform: capitalize; color:#fff; font-weight: bold;}
.wpfp-featured-post-grid.design-1 .wpfp-grid-content {padding-bottom: 0;}
.wpfp-featured-post-grid.design-1 .wpfp-bottom-content {position: absolute;bottom: 0px;padding: 15px;left: 0;text-align: left;right: 0;
background: -moz-linear-gradient(to bottom,#0000 0, #0006 50%, #000000b3 100%);
background: -ms-linear-gradient(to bottom,rgba(0,0,0,0) 0, rgba(0,0,0,0.4) 50%, rgba(0,0,0,.7) 100%);
background: -o-linear-gradient(to bottom,rgba(0,0,0,0) 0, rgba(0,0,0,0.4) 50%, rgba(0,0,0,.7) 100%);
background: -webkit-linear-gradient(to bottom,rgba(0,0,0,0) 0, rgba(0,0,0,0.4) 50%, rgba(0,0,0,.7) 100%);
background: -webkit-gradient(linear, center top, center bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.7)));
background: linear-gradient(to bottom,#0000 0, #0006 50%, #000000b3 100%);}
.wpfp-featured-post-grid.design-1 .wpfp-overlay {overflow: hidden; height: 100%;}
.wpfp-featured-post-grid.design-1 .wpfp-link-overlay:hover + .wpfp-grid-content .wpfp-image-bg {-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-ms-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);-webkit-transition: all 0.5s ease 0s;-moz-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;transition: all 0.5s ease 0s;} .wpfp-widget .featured-image-bg {background: #f1f1f1 ; line-height: 0;overflow: hidden; position: relative;width: 100%;}
.wpfp-widget .featured-grid {position: relative;padding: 0;margin-bottom: 15px; text-align:left; border-bottom:1px solid #ddd; padding-bottom:15px;}
.wpfp-widget .featured-title{ margin-top:5px;}
.wpfp-widget .featured-title h4{margin:10px 0 !important;}
.wpfp-widget .featured-title a{line-height: normal; color:#444; text-decoration: none !important; }
.wpfp-widget .featured-title a:visited {color: #444;}
.wpfp-widget .featured-date {color: #666; margin-top:5px !important}
.wpfp-widget .featured-categories {margin:0;position: absolute;top: 0;padding: 0; left:0;}
.wpfp-widget .featured-categories a{text-decoration: none ; font-size:10px;text-transform: capitalize;padding: 2px 8px;color: #fff !important;line-height: normal;display: inline-block; margin: 0 0 3px 0; -webkit-transition: all 0.5s ease 0s;-moz-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;transition: all 0.5s ease 0s;}
.wpfp-widget .featured-grid:hover .featured-title a{text-decoration: underline;}
.wpfp-widget .featured-grid-content{margin:0px !important; padding:0px !important}
.wpfp-widget .featured-grid:last-child {border-bottom: 0px;} .wpfpcolumn, .wpfpcolumns {padding-left: 0.9375em; padding-right: 0.9375em; float: left; position: relative;}
@media only screen{
.wpfpcolumn, .wpfpcolumns{ width:100%; }
}
@media only screen and (min-width: 40.0625em) {  
.wpfpcolumn,
.wpcolumns {position: relative;padding-left: 0.9375em;padding-right: 0.9375em;float: left;}
.wpfp-medium-1 {width: 8.33333%;}
.wpfp-medium-2 {width: 16.66667%;}
.wpfp-medium-3 {width: 25%;}
.wpfp-medium-4 {width: 33.33333%;}
.wpfp-medium-5 {width: 41.66667%;}
.wpfp-medium-6 {width: 50%;}
.wpfp-medium-7 {width: 58.33333%;}
.wpfp-medium-8 {width: 66.66667%;}
.wpfp-medium-9 {width: 75%;}
.wpfp-medium-10 {width: 83.33333%;}
.wpfp-medium-11 {width: 91.66667%;}
.wpfp-medium-12 {width: 100%;}
}
@media screen and (max-width: 800px) {
.wpfpcolumns {height: 250px !important; width: 100%;}
.wpfp-medium-3.wpfp-medium-right, .wpfp-medium-6.wpfp-medium-left {padding: 0 0 5px 0;}
}.tooltip {
display: inline;
position: relative;
z-index: 999;
cursor: pointer;
} .tooltip::before {
content: '';
position: absolute;
width: 30px;
height: 20px;
bottom: 100%;
left: 50%;
pointer-events: none;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.tooltip:hover::before {
pointer-events: auto;
}
.tooltip::after {
content: '';
position: absolute;
top: -6px;
left: 50%;
border: solid transparent;
height: 0;
width: 0;
pointer-events: none;
border-color: transparent;
border-top-color: #fcb700;
border-width: 8px;
-webkit-font-smoothing: antialiased;
-webkit-transition: -webkit-transform 0.3s 0.3s;
transition: transform 0.3s 0.3s;
-webkit-transform: translateX(-50%) scale3d(0,1,1);
transform: translateX(-50%) scale3d(0,1,1);
}
.tooltip:hover::after {
pointer-events: auto;
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transform: translateX(-50%) scale3d(1,1,1);
transform: translateX(-50%) scale3d(1,1,1);
}
.tooltip-content {
position: absolute;
z-index: 9999;
width: 300px;
left: 50%;
bottom: calc(100% + 1px);
font-size: 14px;
line-height: 1.5;
color: #000;
background: transparent;
opacity: 0;
margin: 0 0 2px 0;
cursor: default;
pointer-events: none;
-webkit-font-smoothing: antialiased;
-webkit-transition: opacity 0.3s 0.3s;
transition: opacity 0.3s 0.3s;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.tooltip:hover .tooltip-content {
opacity: 1;
pointer-events: auto;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.tooltip-content span {
display: block;
}
.tooltip-text {
border-bottom: 7px solid #fcb700;
overflow: hidden;
-webkit-transform: scale3d(0,1,1);
transform: scale3d(0,1,1);
-webkit-transition: -webkit-transform 0.3s 0.3s;
transition: transform 0.3s 0.3s;
}
.tooltip:hover .tooltip-text {
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}
.tooltip-inner {
background: #f0f0f0;
padding: 25px 25px 27px;
font-family: 'Roboto Condensed';
color: #333;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.tooltip:hover .tooltip-inner {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}.erpProContainer{position:relative;clear:both}.erpProContainer h3{font-size:100%;line-height:100%;margin:0;padding:0;font-weight:normal}.erpProContainer a,.erpProRelContainer a,.erpProPostLink{text-decoration:none!important}.erpProContainer img,.erpProThumb{width:100%;margin:0!important}.erpProContainer .erpProPostLink span{font-size:80%;margin:0;padding:0;font-weight:normal;line-height:100%}.erpProWidLi{margin-bottom:10px}.erpProWidLi .erpProPostLink .erpPROH3{margin-bottom:0}.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); }
}