/* #90A4AE -> #B0BEC5 */
.preview{position:sticky;}
.noBlogs{
  text-align: center;
  padding: 14vh;
  font-family: 'Montserrat', sans-serif;
  color: #CFD8DC;
  animation: fadeUp 500ms ease;
}
.noBlogs a,
.errorBlogs a{font-size:4vw;}
.errorBlogs{
  text-align: center;
  padding: 14vh;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  color: #e30425d4;
  animation: fadeUp 500ms ease;
}
.downloadPost,
.redirectToMainBlog{
  text-align: center;
  padding: 4vh;
  padding-bottom: 6vh;
  font-family: 'Montserrat', sans-serif;
  animation: fadeUp 500ms ease;
}
.downloadPost button,
.redirectToMainBlog button{
  font-size: 3vw;
  border-radius: 24px;
  -webkit-tap-highlight-color: transparent;
  transition-duration: 200ms;
  padding: 14px;
  background: #000;
  color: #CFD8DC;
  cursor: pointer;
  user-select: none;
  border-width: 0px;
  font-family: 'Montserrat', sans-serif;
}
.redirectToMainBlog button{background:#96aa53;}
.downloadPost button:hover,
.redirectToMainBlog button:hover{border-radius:40px;background:#1d1d1d;}
@media (max-width:400px){
  .downloadPost button,
  .redirectToMainBlog button{font-size: 6vw;}}
@media (max-width:900px){
  .downloadPost button,
  .redirectToMainBlog button{font-size:5vw;}}
@media (min-width:900px){
  .downloadPost button,
  .redirectToMainBlog button{font-size:40px;}}
.titlePost {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  word-break: break-word;
  font-weight: 500;
  font-size: 20px;
}
.contentPost {
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  word-break: break-word;
}
.posts {
  user-select: none;
  padding: 0px 20px 20px 20px;
  line-height: 1.5;
  margin: 0 auto;
  background-color: #272b30;
}
.post {
  /*background-color: #000;*/
  width: 70%;
  color: #000;
  padding: 3em 2em 2em;
  position: relative;
  border-left: 3px solid #000;
  margin: 0 auto;
  animation: fadeUp 500ms ease;
}
.post::before {
  content: attr(date-is);
  position: absolute;
  left: 2em;
  font-weight: bold;
  top: 1em;
  display: block;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  color: #8a919e;
  font-size: 14px;
}
.post::after {
  width: 14px;
  height: 14px;
  display: block;
  top: 14px;
  position: absolute;
  left: -11.5px;
  border-radius: 10px;
  content: '';
  border: 3px solid rgba(0, 0, 0, 1);
  background: #B0BEC5;
}
.post:last-child {border-image:linear-gradient(to bottom,rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0)) 1 100%;}
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translate3d(0,100px,0);
  }
  100% {
    opacity: 1;
    transform: translateZ(0);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 1;
    transform: translateZ(0);
    display: block;
  }
  99% {
    opacity: 0;
    transform: translate3d(0,100px,0);
  }
  100% {
    display: none;
  }
}
.fadeInRemove{
  animation: fadeIn 500ms ease;
  opacity: 0;
  display: none;
}
.postContent {
  background-color: #000;
  border-style: solid;
  border-radius: 20px;
  border-width: 0px;
  color: #CFD8DC; 
  padding: 12px;
}
.imagePost{width:90px;cursor:zoom-in;border-radius:6px;}
.zoomInFrame{
  cursor: zoom-out;
  position: fixed;
  top: 100px;
  bottom: 0;
  z-index: -1;
  height: calc(100% - 100px);
  background: rgba(0,0,0,.7);
  width: 100%;
  opacity: 0;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  overflow: hidden;
}
.zoomInFrame img{
  margin:auto;position:absolute;
  top:0;left:0;right:0;bottom:0;
  user-select: none;
  max-height:0%;max-width:0%;
  border: 3px solid #B0BEC5;border-radius:8px;
  box-shadow: 0px 0px 8px rgba(0,0,0,.3);
  box-sizing: border-box;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}
.zoomInFrameDisplay{opacity: 1 !important;z-index: 99 !important;}
.zoomInFrameDisplay img{max-height:80% !important;max-width:100% !important;}
.ya-share2__badge{animation:addEmojiButtonScaleElasticOut 1s forwards;}
/* Thanks y.at/create */
@keyframes addEmojiButtonScaleElasticOut{
  0% {transform:scale(1.15) rotate(.1deg)}
  16% {transform:scale(.93) rotate(.1deg)}
  28% {transform:scale(1.04) rotate(.1deg)}
  44% {transform:scale(.98) rotate(.1deg)} 
  59% {transform:scale(1.01) rotate(.1deg)}
  73% {transform:scale(.995) rotate(.1deg)}
  88% {transform:scale(1) rotate(.1deg)}
  to {transform:scale(1) rotate(.1deg)}
}
/*@keyframes addEmojiButtonScaleElasticOut{0%{transform:scale(1.15) rotate(.1deg)}16%{transform:scale(.93) rotate(.1deg)}28%{transform:scale(1.04) rotate(.1deg)}44%{transform:scale(.98) rotate(.1deg)}59%{transform:scale(1.01) rotate(.1deg)}73%{transform:scale(.995) rotate(.1deg)}88%{transform:scale(1) rotate(.1deg)}to{transform:scale(1) rotate(.1deg)}}*/
/*animation: addEmojiButtonScaleElasticOut 1s forwards;*/
.container{width:100%;margin-right:auto;margin-left:auto;overflow:hidden;transition:0.7s;align-items:center;}
@media (min-width:576px){.container{max-width:540px;}}
@media (min-width:768px){
    .container{max-width:720px;}
    .left{flex:0 1 48%;}
    .right{flex:0 1 52%;}
    .promo_info{flex-direction:inherit;}}
@media (min-width:992px){.container{max-width:960px;}}
@media (min-width:1200px){.container{max-width:1140px;}}
@media (min-width:1580px){.container{max-width:1440px;}}

@media (min-width:270px){
  .posts{padding:0px 14px 14px 14px;line-height:1.3;}
  .post{width:90%;padding:2.5em 1em 2em;}
  .post::before{left:1.4em;top:0.8em;font-size:16px;}
  .postContent{padding:10px;}
  .imagePost{width:110px;}}
@media (min-width:320px){
  .post::before{left:1.3em;top:0.68em;font-size:17px;}
  .titlePost{font-size:24px;}
  .contentPost{font-size:18px;}}
@media (min-width:350px){
  .post:before{font-size:19px;left:1.1em;}
  .titlePost{font-size:26px;}
  .contentPost{font-size:20px;}}
@media (min-width:500px){.imagePost{width:140px;border-radius:15px;}}
@media (min-width:700px){.imagePost{width:140px;}}
@media (min-width:900px){
  .post{width:84%;padding:3.3em 1.5em 2em;}
  .post::before{
    top:0.5em;
    left:1.7em;
    font-size:24px;}
  .titlePost {font-size:36px;}
  .contentPost{font-size:24px;}
  .imagePost{width:165px;}
}