@import url(https://fonts.googleapis.com/css?family=Nosifer|Codystar:300,400|Poiret+One|Limelight|Shojumaru|Titan+One|UnifrakturMaguntia|Press+Start+2P|Creepster|Playball|Griffy|Lobster|Bevan|Racing+Sans+One|Fontdiner+Swanky|Wire+One|Lato:100,300,400|Graduate);
body {
  padding: 0;
  margin: 0
}

.block {
  width: 100%;
  height: 100vh;
  min-height: 300px;
  position: relative;
  overflow: hidden
}

.block + .block {
  margin-top: 2px
}

h2 {
  width: 100%;
  position: absolute;
  margin: 0;
  top: 70%;
  text-align: center;
  font-size: 2rem;
  transform: translateY(-50%);
  font-weight: normal 
}

h1 {
  width: 100%;
  position: absolute;
  margin: 0;
  top: 50%;
  text-align: center;
  font-size: 5rem;
  transform: translateY(-50%);
  font-weight: normal
}
/* 



================================================
    style-1
   ================================================ */

.style-1 {
  background: linear-gradient(90deg, #0C0C0C 10%, #333333 90%);
}

.style-1 h1 {
  color: #fff;
  font-family: lato;
  font-weight: 100;
}

.style-1 h2 {
  color: #fff;
  font-family: lato;
  font-weight: 300;
}
/* ================================================
    style-2
   ================================================ */

.style-2 {
  background-image: repeating-linear-gradient(90deg, transparent, transparent 35px, rgba(255, 255, 255, .2) 35px, rgba(255, 255, 255, .2) 70px), linear-gradient(90deg, #ED4264 10%, #FFEDBC 90%);
}

.style-2 h1 {
  color: #FFEDBC;
  font-family: Lobster;
  text-shadow: -2px 0 0 #ED4264, -1px -1px 0 #ED4264, 0 -2px 0 #ED4264, 1px -1px 0 #ED4264, 2px 0 0 #ED4264, 1px 1px 0 #ED4264, 0 2px 0 #ED4264, -12px 16px 0 #725699;
}
/* ================================================
    style-3
   ================================================ */

.style-3 {
  background: #333;
  background-image: linear-gradient(90deg, #F09819 10%, #EDDE5D 90%);
}

.style-3 h1 {
  color: #FFEDBC;
  font-family: Bevan;
  text-shadow: -3px 2px 0 #000;
}
/* ================================================
    style-4
   ================================================ */

.style-4 {
  background: linear-gradient(90deg, #e43a15 10%, #e65245 90%);
}

.style-4:after {
  content: '';
  position: absolute;
  width: 100px;
  max-width: 20%;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #fff;
  left: 10%;
  background: repeating-linear-gradient(90deg, #FFEDBC, #FFEDBC 60%, transparent 60%, transparent 75%);
  opacity: .5
}

.style-4 h1 {
  z-index: 2;
  color: #FFEDBC;
  font-family: 'Racing Sans One';
}
/* ================================================
    style-5
   ================================================ */

.style-5 {
  background: linear-gradient(324deg, #08b 4%, transparent 4%) -15px 70px, linear-gradient( 36deg, #08b 4%, transparent 4%) -15px 70px, linear-gradient( 72deg, #fff 8.5%, transparent 8.5%) -15px 70px, linear-gradient(288deg, #fff 8.5%, transparent 8.5%) -15px 70px, linear-gradient(216deg, #fff 7.5%, transparent 7.5%) -15px 54px, linear-gradient(144deg, #fff 7.5%, transparent 7.5%) -15px 54px, linear-gradient(324deg, #08b 4%, transparent 4%) 25px 27px, linear-gradient( 36deg, #08b 4%, transparent 4%) 25px 27px, linear-gradient( 72deg, #fff 8.5%, transparent 8.5%) 25px 27px, linear-gradient(288deg, #fff 8.5%, transparent 8.5%) 25px 27px, linear-gradient(216deg, #fff 7.5%, transparent 7.5%) 25px 11px, linear-gradient(144deg, #fff 7.5%, transparent 7.5%) 25px 11px;
  background-color: #08b;
  background-size: 80px 80px;
}

.style-5:after {
  position: absolute;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #047 10%, #09c 90%);
  opacity: .95;
}

.style-5 h1 {
  color: #fff;
  font-family: 'Cinzel Decorative', serif;
  z-index: 2;
}
/* ================================================
    style-6
   ================================================ */

.style-6 {
  background: linear-gradient(90deg, #809900 10%, #119933 90%);
}

.style-6 h1 {
  color: #7dd642;
  font-family: 'Bevan';
  text-shadow: 0 -5px 15px #80bb00, 0 10px 15px #060;
}
/* ================================================
    style-7          Halloween
   ================================================ */

@import url(https://fonts.googleapis.com/css?family=Fontdiner+Swanky);
.style-7 {
  background: linear-gradient(90deg, #FF5100 10%, #F08800 90%);
}

.style-7 h1 {
  color: #000;
  font-family: 'Fontdiner Swanky';
  font-weight: normal;
  z-index: 2;
}
/* ================================================
    style-8
   ================================================ */

.style-8 {
  background: linear-gradient(90deg, #cc1100 10%, #FF5100 90%);
}

.style-8 h1 {
  color: yellow;
  text-shadow: 0 -3px 5px yellow, 0 -6px 10px yellow;
  font-family: 'lato';
  font-weight: 100;
  z-index: 2;
}
/* ================================================
    style-9
   ================================================ */

.style-9 {
  background: linear-gradient(90deg, #eee, #ccc);
}

.style-9 h1 {
  color: #333;
  font-family: 'lato';
  font-weight: 100;
  z-index: 2;
}

.style-9 span {
  color: #333;
  display: block;
}
/* ================================================
    style-11
   ================================================ */

.style-11 {
  background-image: radial-gradient(ellipse farthest-corner at center top, #677c93 0%, #111921 100%);
}

.style-11 h1 {
  color: #d7dde2;
  font-family: lato;
  font-weight: 100;
  text-shadow: 0 2px 0 #000, 0 0 20px #fff
}
/* ================================================
    style-12
   ================================================ */

.style-12 {
  background: linear-gradient(#b2e9a7, rgba(255, 255, 255, .2)), linear-gradient(90deg, #44bbff, rgba(255, 255, 255, .4)), linear-gradient(-90deg, #ff8457, rgba(255, 255, 255, .2));
}

.style-12 h1 {
  color: #fff;
  font-family: 'Playball';
  z-index: 2;
}
/* ================================================
    style-12
   ================================================ */

.style-13 {
  background-image: linear-gradient(160deg, #503e90 10%, #70659b 60%, transparent 60%), repeating-linear-gradient(90deg, transparent, transparent 35px, rgba(255, 255, 255, .8) 35px, rgba(255, 255, 255, .8) 70px), linear-gradient(90deg, #000 10%, #000 90%);
}

.style-13 h1 {
  color: #000;
  font-family: 'Griffy';
  z-index: 2;
  text-shadow: -2px 3px 0 #57f257
}
/* ================================================
    style-14
   ================================================ */

.style-14 {
  background: linear-gradient(90deg, #c21500 10%, #ffc500 90%);
}

.style-14 h1 {
  color: #000;
  font-family: 'Shojumaru';
}
/* ================================================
    style-15
   ================================================ */

.style-15 {
  background: linear-gradient(90deg, #809900 10%, #119933 90%);
}

.style-15 h1 {
  color: #000;
  font-family: 'Creepster';
}
/* ================================================
    style-16
   ================================================ */

.style-16 {
  background: linear-gradient(90deg, #000000 10%, #53346D 90%);
}

.style-16 h1 {
  color: #000;
  font-family: 'UnifrakturMaguntia';
  text-shadow: -1px 1px 0 rgba(255, 255, 255, .2)
}

.style-17 {
  background: linear-gradient(to bottom, #14C8FF 0%, #0092D6 100%);
}

.style-17 h1 {
  font-size: 10rem;
  color: #14C8FF;
  text-shadow: 0 8px 15px #007DB8, 0px -3px 1px rgba(255, 255, 255, 0.6);
  font-family: 'lobster';
}

@media all and (max-width: 480px) {
  html {
    font-size: 12px
  }
}

.style-18 {
  display: none;
  background: rgba(58, 57, 77, 1);
  background: -moz-radial-gradient(center, ellipse cover, rgba(58, 57, 77, 1) 0%, rgba(13, 20, 41, 1) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(58, 57, 77, 1)), color-stop(100%, rgba(13, 20, 41, 1)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(58, 57, 77, 1) 0%, rgba(13, 20, 41, 1) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(58, 57, 77, 1) 0%, rgba(13, 20, 41, 1) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(58, 57, 77, 1) 0%, rgba(13, 20, 41, 1) 100%);
  background: radial-gradient(ellipse at center, rgba(58, 57, 77, 1) 0%, rgba(13, 20, 41, 1) 100%);
}

.style-18 h1 {
  font-size: 80px;
  line-height: .8em;
  font-weight: bold;
  font-family: arial black;
  letter-spacing: -5px;
  position: absolute;
  top: 50%;
  display: block;
  width: 500px;
  margin: -30px auto 0;
  left: 0;
  right: 0;
  background: #f42222;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f42222), color-stop(50%, #f2d12e), color-stop(100%, #f42522));
  /* Chrome,Safari4+ */
  
  background: -webkit-linear-gradient(top, #f42222 0%, #f2d12e 50%, #f42522 100%);
  /* Chrome10+,Safari5.1+ */
  
  background: linear-gradient(to bottom, #f42222 0%, #f2d12e 50%, #f42522 100%);
  /* W3C */
  
  -webkit-text-stroke: 1.6px #3a57ab;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-filter: drop-shadow( -20px 16px 2px rgba(0, 0, 0, .5));
  -ms-filter: drop-shadow( -20px 16px 2px rgba(0, 0, 0, .5));
  -o-filter: drop-shadow( -20px 16px 2px rgba(0, 0, 0, .5));
  -mos-filter: drop-shadow( -20px 16px 2px rgba(0, 0, 0, .5));
  filter: drop-shadow( -20px 16px 2px rgba(0, 0, 0, .5));
  transition: all .5s;
  cursor: pointer;
  -webkit-perspective-origin: 50%, 50%;
  -moz-perspective-origin: 50%, 50%;
  -o-perspective-origin: 50%, 50%;
  -ms-perspective-origin: 50%, 50%;
  perspective-origin: 50%, 50%;
  -webkit-transform: perspective(600px) translateY(-50%) translateX(15%) skew(10deg, 0deg) rotateX(0deg) rotateY(50deg) rotateZ(-5deg) translate3d(0px, 0px, -50px);
  -moz-transform: perspective(600px) translateY(-50%) translateX(15%) skew(10deg, 0deg) rotateX(0deg) rotateY(50deg) rotateZ(-5deg) translate3d(0px, 0px, -50px);
  -o-transform: perspective(600px) translateY(-50%) translateX(15%) skew(10deg, 0deg) rotateX(0deg) rotateY(50deg) rotateZ(-5deg) translate3d(0px, 0px, -50px);
  -ms-transform: perspective(600px) translateY(-50%) translateX(15%) skew(10deg, 0deg) rotateX(0deg) rotateY(50deg) rotateZ(-5deg) translate3d(0px, 0px, -50px);
  transform: perspective(600px) translateY(-50%) translateX(15%) skew(12deg, 0deg) rotateX(0deg) rotateY(50deg) rotateZ(-5deg) translate3d(0px, 0px, -50px);
}

.style-18 h1:hover {
  -webkit-filter: drop-shadow( -25px 25px 2px rgba(0, 0, 0, .5));
  -ms-filter: drop-shadow( -25px 25px 2px rgba(0, 0, 0, .5));
  -o-filter: drop-shadow( -25px 25px 2px rgba(0, 0, 0, .5));
  -mos-filter: drop-shadow( -25px 25px 2px rgba(0, 0, 0, .5));
  filter: drop-shadow( -25px 25px 2px rgba(0, 0, 0, .5));
}

.style-18 h1 span span {
  font-size: .49em;
  float: left;
  line-height: .8em;
  margin-left: 1em;
  margin-right: -1em
}

.style-18 h1 span {
  font-style: italic
}
/* ================================================
    style-19
   ================================================ */

.style-19 {
  background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 0 1px;
  background-color: #12364a;
  background-size: 12px 12px;
}

.style-19:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-image: radial-gradient(circle, transparent 0%, rgba(7, 9, 11, 0.56) 100%);
}

.style-19 h1 {
  font-family: 'Wire One', sans-serif;
  font-size: 9rem;
  color: #EECCA7;
  text-shadow: 1px 1px 0px #6C0107, 2px 2px 0px #6C0107, 3px 3px 0px #6C0107, 4px 4px 0px #6C0107, 5px 5px 0px #6C0107, 6px 6px 0px #6C0107, 7px 7px 0px #6C0107, 8px 8px 0px #6C0107, 9px 9px 0px rgba(0, 0, 0, .1), 10px 10px 0px rgba(0, 0, 0, .1), 11px 11px 0px rgba(0, 0, 0, .1), 12px 12px 0px rgba(0, 0, 0, .1), 13px 13px 0px rgba(0, 0, 0, .1), 14px 14px 0px rgba(0, 0, 0, .1), 15px 15px 0px rgba(0, 0, 0, .1), 16px 16px 0px rgba(0, 0, 0, .1), 17px 17px 0px rgba(0, 0, 0, .1), 18px 18px 0px rgba(0, 0, 0, .1), 19px 19px 0px rgba(0, 0, 0, .1), 20px 20px 0px rgba(0, 0, 0, .1), 21px 21px 0px rgba(0, 0, 0, .1), 22px 22px 0px rgba(0, 0, 0, .1), 23px 23px 0px rgba(0, 0, 0, .1), 24px 24px 0px rgba(0, 0, 0, .1), 25px 25px 0px rgba(0, 0, 0, .1), 26px 26px 0px rgba(0, 0, 0, .1)
}
/* ================================================
    style-20
   ================================================ */

.style-20 {
  background-color: #be456f;
  background-image: radial-gradient(circle, transparent 0%, rgba(7, 9, 11, 0.56) 100%);
}

.style-20 h1 {
  font-family: lato, sans-serif;
  position: relative;
  color: #2da0d1;
  font-size: 6rem;
  font-weight: 800;
  text-shadow: 0 0 0px #2da0d1, -1px -2px 0px rgba(0, 0, 0, 0.57), -1px -2px 0px #2da0d1, 1px 1px 0px #fff, -3px -3px 0px #EECCA7, 0px -3px 0px #EECCA7, 3px -3px 0px #EECCA7, -3px -1px 0px #EECCA7, -3px 1px 0px #EECCA7, -3px 2px 0px #EECCA7, 3px 1px 0px #EECCA7, 3px 2px 0px #EECCA7, 3px -1px 0px #EECCA7, 3px -2px 0px #EECCA7, 3px -3px 0px #EECCA7, 4px -4px 0px #6C0107, 5px -3px 0px #6C0107, 6px -2px 0px #6C0107, 7px -1px 0px #6C0107, 8px 0px 0px #6C0107, 9px 1px 0px #6C0107, 10px 2px 0px #6C0107, 11px 3px 0px #6C0107, 12px 4px 0px #6C0107, 13px 5px 0px #6C0107, 14px 6px 0px #6C0107, 15px 7px 0px #6C0107, 16px 8px 0px #6C0107, 17px 9px 0px #6C0107, 18px 10px 0px #6C0107, 0px 2px 0px #6C0107, -3px 3px 0px #6C0107, -2px 4px 0px #6C0107, -1px 5px 0px #6C0107, 0px 6px 0px #6C0107, 1px 7px 0px #6C0107, 2px 8px 0px #6C0107, 3px 9px 0px #6C0107, 4px 10px 0px #6C0107;
}

.style-20:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;
  opacity: 0.15;
  background-image: radial-gradient(white 0px, transparent 1px), radial-gradient(white 0px, transparent 1px), radial-gradient(white 0px, transparent 1px), radial-gradient(white 0px, transparent 1px), radial-gradient(white 0px, transparent 1px), radial-gradient(white 0px, transparent 1px), radial-gradient(white 0px, transparent 1px), radial-gradient(white 0px, transparent 1px), radial-gradient(white 0px, transparent 1px), radial-gradient(white 0px, transparent 1px), radial-gradient(white 0px, transparent 1px), radial-gradient(white 0px, transparent 1px), radial-gradient(white 0px, transparent 1px), radial-gradient(white 0px, transparent 1px), radial-gradient(white 0px, transparent 1px), radial-gradient(white 0px, transparent 1px), radial-gradient(white 0px, transparent 1px), radial-gradient(white 0px, transparent 1px), radial-gradient(white 0px, transparent 1px), radial-gradient(white 0px, transparent 1px), radial-gradient(white 0px, transparent 1px), radial-gradient(white 0px, transparent 1px), radial-gradient(white 0px, transparent 1px), radial-gradient(white 0px, transparent 1px), radial-gradient(white 0px, transparent 1px), radial-gradient(white 0px, transparent 1px), radial-gradient(white 0px, transparent 1px), radial-gradient(white 0px, transparent 1px), radial-gradient(black 0px, transparent 1px);
  background-position: 23px 8px, 6px 98px, 39px 11px, 46px 98px, 57px 91px, 19px 78px, 61px 88px, 21px 83px, 84px 25px, 27px 34px, 48px 46px, 78px 85px, 3px 31px, 92px 23px, 64px 77px, 29px 17px, 82px 7px, 58px 10px, 84px 35px, 41px 42px, 87px 62px, 69px 22px, 30px 89px, 38px 74px, 26px 29px, 85px 39px, 7px 84px, 38px 18px, 65px 83px, 79px 25px, 46px 60px, 95px 68px;
  background-size: 31px 31px, 29px 29px, 23px 23px, 19px 19px, 17px 17px, 13px 13px, 11px 11px, 31px 31px, 29px 29px, 23px 23px, 19px 19px, 17px 17px, 13px 13px, 11px 11px, 31px 31px, 29px 29px, 23px 23px, 19px 19px, 17px 17px, 13px 13px, 11px 11px, 31px 31px, 29px 29px, 23px 23px, 19px 19px, 17px 17px, 13px 13px, 11px 11px;
}
/* ================================================
    style-21
   ================================================ */

.style-21 {
  background-color: #79a0ea;
}

.style-21:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-image: radial-gradient(circle, transparent 0%, rgba(7, 9, 11, 0.56) 100%);
}

.style-21 h1 {
  font-family: lato, sans-serif;
  font-weight: 800;
  color: #4970b9;
  text-shadow: -1px -1px 0px #000, 1px 1px 0px rgba(255, 255, 255, 0.39);
}
/* ================================================
    style-22
   ================================================ */

.style-22 {
  background: #2b4274;
}

.style-22 h1 {
  font-family: damion;
  font-size: 6rem;
  font-weight: 400;
  color: #b1caf7;
  text-shadow: -3px -3px 0px #fff, 0px -3px 0px #fff, 2px 2px 0px #33669a, 3px -1px 0px #33669a, 3px -3px 0px #33669a, 3px -3px 0px #000, 4px -1px 0px #000, 4px 0px 0px #000, 5px 1px 0px #000, 6px 1px 0px #000, 7px 2px 0px #000, 8px 3px 0px #000, 9px 4px 0px #000, 10px 5px 0px #000, 11px 6px 0px #000, 12px 7px 0px #000, 13px 8px 0px #000, 14px 9px 0px #000, 15px 10px 0px #000, 16px 11px 0px #000, 3px -3px 0px #33669a;
}
/* ================================================
    style-23
   ================================================ */

.style-23 {
  background: #984c86;
}

.style-23 h1 {
  font-family: lato;
  font-size: 6rem;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.5);
  text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.2), 0px -5px 35px rgba(255, 255, 255, 0.3);
}
/* ================================================
    style-24
   ================================================ */

.style-24 {
  background: #e6e6e6;
}

.style-24 h1 {
  font-family: lobster;
  font-size: 8rem;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 1px #808d93, -1px 0 #cdd2d5, -1px 2px #808d93, -2px 1px #cdd2d5, -2px 3px #808d93, -3px 2px #cdd2d5, -3px 4px #808d93, -4px 3px #cdd2d5, -4px 5px #808d93, -5px 4px #cdd2d5, -5px 6px #808d93, -6px 5px #cdd2d5, -6px 7px #808d93, -7px 6px #cdd2d5, -7px 8px #808d93, -8px 7px #cdd2d5;
}
/* ================================================
    style-25
   ================================================ */

.style-25 {
  background: #a6e4ff;
}

.style-25 h1 {
  font-family: lobster;
  font-size: 8rem;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 1px 0px #22516a, 1px 0 0px #64c8f4, 1px 2px 1px #22516a, 2px 1px 1px #64c8f4, 2px 3px 2px #22516a, 3px 2px 2px #64c8f4, 3px 4px 2px #22516a, 4px 3px 3px #64c8f4, 4px 5px 3px #22516a, 5px 4px 2px #64c8f4, 5px 6px 2px #22516a, 6px 5px 2px #64c8f4, 6px 7px 1px #22516a, 7px 6px 1px #64c8f4, 7px 8px 0px #22516a, 8px 7px 0px #64c8f4;
}
/* ================================================
    style-26
   ================================================ */

.style-26 {display:none;
  background: #392424;
}

.style-26 h1 {
  font-family: Fredoka One, sans-serif;
  font-weight: 800;
  color: rgba(0, 0, 0, 0);
  position: relative;
  background-image: radial-gradient(circle, rgba(54, 29, 7, 0.47) 0%, rgb(65, 13, 27) 100%);
  -webkit-background-clip: text;
  z-index: 2;
}

.style-26 h1:after {
  content: attr(data-text);
  font-family: Fredoka One, sans-serif;
  font-weight: 800;
  color: rgba(0, 0, 0, 0);
  position: relative;
  background-image: radial-gradient(circle, rgba(54, 29, 7, 0.47) 0%, rgb(65, 13, 27) 100%);
  -webkit-background-clip: text;
  position: absolute;
  left: .0em;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
}

.style-26 h1:before {
  content: attr(data-text);
  color: rgba(252, 127, 127, 0.6);
  letter-spacing: -.006em;
  position: absolute;
  left: .0em;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}
/* ================================================
    style-27
   ================================================ */

.style-27 {display:none;
  background: #c33;
}

.style-27 h1 {
  font-family: lato;
  font-size: 6em;
  color: rgb(252, 127, 127);
  letter-spacing: .008em;
  font-weight: 800;
  position: relative;
  z-index: 1
}

.style-27 h1:after {
  content: attr(data-text);
  color: rgba(0, 0, 0, 0.5);
  font-size: 1.01em;
  letter-spacing: .03em;
  position: absolute;
  left: 0em;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -2;
}

.style-27 h1:before {
  content: attr(data-text);
  color: rgba(0, 0, 0, 0);
  position: relative;
  background-image: radial-gradient(circle, #c33 0%, rgb(219, 121, 147) 100%);
  -webkit-background-clip: text;
  letter-spacing: .0em;
  position: absolute;
  left: .0em;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
}

/* ================================================
    style-28
   ================================================ */
.style-28 {display:none;
  background: #ce9630;
  background-image: radial-gradient(circle, transparent 5%, rgba(0, 0, 0, 0.37) 90%)
}

.style-28 h1 {
  font-family: Graduate;
  font-size: 6rem;
  font-weight: 600;
  color: transparent;

  position: relative
}
.style-28 h1:after {
  content: attr(data-text);
  color: transparent;
  background: #4a6fd4;
  background-image: linear-gradient(-45deg, transparent, transparent 48%, rgba(255, 255, 255, .3) 48%, rgba(255, 255, 255, .3) 52%, transparent 52%);
  background-size: 10px 10px;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
z-index:1;}
.style-28 h1:before {
  content: attr(data-text);
  color: rgba(252, 127, 127, 0);
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  z-index: -1;
  text-shadow: 0 0 0px #2da0d1, -1px -2px 0px rgba(0, 0, 0, 0.57), -1px -2px 0px #2da0d1, 1px 1px 0px #fff, -3px -3px 0px #EECCA7, 0px -3px 0px #EECCA7, 3px -3px 0px #EECCA7, -3px -1px 0px #EECCA7, -3px 1px 0px #EECCA7, -3px 2px 0px #EECCA7, 3px 1px 0px #EECCA7, 3px 2px 0px #EECCA7, 3px -1px 0px #EECCA7, 3px -2px 0px #EECCA7, 3px -3px 0px #EECCA7, -3px 4px 0px #000, -2px 5px 0px #000, -1px 6px 0px #000, 0px 7px 0px #000, 1px 8px 0px #000, 2px 9px 0px #000, 3px 10px 0px #000, 4px 11px 0px #000, 5px 11px 0px #000, 3px -3px 0px #000, 4px -2px 0px #000, 5px -1px 0px #000, 6px 0px 0px #000, 7px 1px 0px #000, 8px 2px 0px #000, 9px 3px 0px #000, 10px 4px 0px #000, 11px 5px 0px #000, 11px 11px 0px #000;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .style-18, .style-26, .style-27, .style-28 {
    display: block
  }
}