/*FONTS*/
/* black-ops-one-regular - latin */
@font-face {
  font-family: 'Black Ops One';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/black-ops-one-v11-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Black Ops One Regular'), local('BlackOpsOne-Regular'),
       url('fonts/black-ops-one-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/black-ops-one-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/black-ops-one-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/black-ops-one-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/black-ops-one-v11-latin-regular.svg#BlackOpsOne') format('svg'); /* Legacy iOS */
}
/* special-elite-regular - latin */
@font-face {
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/special-elite-v10-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Special Elite Regular'), local('SpecialElite-Regular'),
       url('fonts/special-elite-v10-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/special-elite-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/special-elite-v10-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/special-elite-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/special-elite-v10-latin-regular.svg#SpecialElite') format('svg'); /* Legacy iOS */
}
@font-face {
    font-family: 'dj_grossnormal';
    font-weight: normal;
    font-style: normal;
    src: url('fonts/djgross-webfont.woff2') format('woff2'),
         url('fonts/djgross-webfont.woff') format('woff');
}
/* mansalva-regular - latin */
@font-face {
  font-family: 'Mansalva';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/mansalva-v1-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Mansalva Regular'), local('Mansalva-Regular'),
       url('fonts/mansalva-v1-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/mansalva-v1-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/mansalva-v1-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/mansalva-v1-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/mansalva-v1-latin-regular.svg#Mansalva') format('svg'); /* Legacy iOS */
}



.mission-briefing {
  font-family: 'Mansalva';
  font-style: normal;
  font-weight: 400;
}
.imperial-record {
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
}
.wasteland-sign,
.ruined-billboard {
  font-family: 'dj_grossnormal';
  font-style: normal;
  font-weight: 400;
}
.transmission {
  font-family: 'Black Ops One';
  font-style: normal;
  font-weight: 400;
}
.card {
  width: 550px;
  height: 800px;
  position: relative;
  background-repeat: no-repeat;
  -webkit-background-size: 100%;
  background-size: 100%;
}
.decal {
  width: 550px;
  height: 800px;
  position: absolute;
  top: 0;
  left: 0;
  background-size: 100%;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  display: none;
}
.background {
  z-index: 1;
}
.icon{
  position: absolute;
  height: 300px;
  width: 550px;
  top: 100px;
  z-index: 10;
  text-align: center;
  mix-blend-mode: multiply;
  opacity: .75;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
}
.icon .motiv {
  display: none;
  width:100%;
  height:auto;
}
.icon svg {
  max-width: 300px;
  max-height: 200px;
  width:100%;
  height:100%;
}

/*HEADLINE*/
.headline {
  z-index: 10;
  position: absolute;
  top:400px;
  width: 500px;
  height:100px;
  margin: 0 25px;
  display: table;
  text-align: center;
  overflow: hidden;
}
.headline span {
  vertical-align: middle;
  display: table-cell;
  font-size: 48px;
  line-height: 1;
  color:#ffffff;
}

/*TEXT*/
.text {
  z-index: 10;
  position: absolute;
  top:500px;
  width: 500px;
  height:225px;
  margin: 0 25px;
  display: table;
  text-align: center;
  overflow: hidden;
}
.text span {
  vertical-align: middle;
  display: table-cell;
  font-size: 24px;
  line-height: 1.4;
  color:#ffffff;
  padding: 0 30px;
}
label {
  display: inline-block;
  margin-right: 1rem
}
.sp-replacer {
  margin-bottom: 1rem;
}

/*Cards custom settings*/
/*TRANSMISSION*/
.card-transmission .decal {
  mix-blend-mode: screen;
}
.card-transmission .icon {
  mix-blend-mode: screen;
  opacity: 1;
  height: 140px;
  width: 140px;
  top: 138px;
  left: 120px;
}
.card-transmission .icon svg path {
  fill: #fff;
}
.card-transmission .headline {
  text-align: left;
}
.card-transmission .text {
  text-align: left;
  top:500px;
  width: 350px;
  height:225px; 
}
.card-transmission .text span {
    padding: 0 30px 0 0;
}
/*RUINED BILLBOARD*/
.card-ruined-billboard .icon {
  transform: rotate(-15deg);
  height: 250px;
  width: 250px;
  top: 138px;
  left: 120px;
  opacity: .95;
}
.card-ruined-billboard .headline {
  text-align: left;
  transform: rotate(-7deg);
  margin: 0 40px;
  top: 380px;
}
.card-ruined-billboard .headline span {
  display: block;
  font-size: 56px;
  mix-blend-mode: multiply;
  padding-right:60px;
}
.card-ruined-billboard .text {
  text-align: right;
  transform: rotate(5deg);
  mix-blend-mode: multiply;
  top: 525px;
  margin: 0 30px 0 0;
  left:0;
}
.card-ruined-billboard .text span {
  padding: 0 10px 0 40px;
  vertical-align: top;
}
/*mission-briefing*/
.card-mission-briefing .decal {
  mix-blend-mode: normal;
}
.card-mission-briefing .icon {
  mix-blend-mode: normal;
  opacity: 1;
  height: 195px;
  width: 200px;
  top: 581px;
  left: 219px;
}
.card-mission-briefing .icon svg path {
  fill: #fff;
}
.card-mission-briefing .headline {
  text-align: left;
  margin: 0;
  top: 15px;
  height: 170px;
  width: 340px;
}
.card-mission-briefing .headline span {
  mix-blend-mode: normal;
  text-shadow: 3px 3px 6px #000000;
}
.card-mission-briefing .text {
  text-align: left;
  top: 210px;
  margin: 0;
  left:0;
  height: 125px;
  width: 550px;
}
.card-mission-briefing .text span {
  mix-blend-mode: normal;
  padding: 0 15px;
  vertical-align: middle;
  text-shadow: 2px 2px 4px #000000;
}
/*mission-briefing*/
.card-wasteland-sign .decal {
  mix-blend-mode: normal;
}
.card-wasteland-sign .icon {
  mix-blend-mode: hard-light;
  opacity: 1;
  height: 330px;
  width: 415px;
  top: 50px;
  left: 70px; 
}
.card-wasteland-sign .icon svg {
    max-width: 400px;
    max-height: 300px;
    width: 100%;
    height: 100%;
    filter: drop-shadow( -3px 3px 0px rgba(0, 0, 0, .7));
}
.card-wasteland-sign .icon svg path {
  fill: #fff;
}
.card-wasteland-sign .headline {
  text-align: center;
  margin: 0;
  top: 415px;
  height: 125px;
  width: 400px;
  left: 76px;
}
.card-wasteland-sign .headline span {
  opacity: .8;
  mix-blend-mode: normal;
  text-shadow: -3px 3px 0px #000000;
}
.card-wasteland-sign .text {
  text-align: center;
  top: 540px;
  margin: 0;
  left: 76px;
  height: 200px;
  width: 400px;
}
.card-wasteland-sign .text span {
  opacity: .8;
  mix-blend-mode: normal;
  padding: 0 15px;
  vertical-align: middle;
  text-shadow: -2px 2px 0px #000000;
}