CSS style slow down the browsers

i have a stylesheet (css) that slow down the browsers speed (rendering). I tried to use a css compressor but the result it is the same, the original file weighs 1120 bytes and compressed 810 bytes, but compressing the file it still slow down the browsers.

How i can solve this? This is my css code:

.logo {
position: fixed;
top: 20px;
left: 36%;
z-index: 4000;
}

@font-face {
    font-family: DaZPlayer;
    src: url(DaZPlayer.ttf);
}

.logo b{
font-family: 'DaZPlayer';
font-size: 4.3rem;
color: #fff;
text-shadow: 0 -40px 300px, 0 0 2px, 0 0 1em #f4f4f4, 0 0 0.5em #f4f4f4, 0 0 0.1em #f4f4f4, 0 10px 3px #000;
}

@media all and (max-width: 1067px){
  .logo b{
    font-size: 3.5rem;
  }
}

@media all and (max-width: 920px){
  .logo b{
    font-size: 3rem;
  }
}

@media all and (max-width: 664px){
  .logo b{
    font-size: 1.9rem;
  }
}

@media all and (max-width: 400px){
  .logo b{
    font-size: 1.5rem;
  }
}


.logo b span{
animation: blink linear infinite 2s;
}
@keyframes blink {
78% {
  color: inherit;
  text-shadow: inherit;
}
79%{
   color: #333;
}
80% {
  text-shadow: none;
}
81% {
  color: inherit;
  text-shadow: inherit;
}
82% {
  color: #333;
  text-shadow: none;
}
83% {
  color: inherit;
  text-shadow: inherit;
}
92% {
  color: #333;
  text-shadow: none;
}
92.5% {
  color: inherit;
  text-shadow: inherit;
}
}

if someone could help me, i would be thankful, regards DiX.

Have you tried using a pre-processor for this? You can use CSS minifier. One more pointer, use Google Page Insights and it will tell you precisely what you need to do.