.newsletter-name {
 font-family:'Univers LT 59 UltraCondensed';
 text-transform:uppercase;
 margin-top:0
}
.newsletter-wrap {
 font-family:'Univers LT 55 Roman'
}
.newsletter-overlay {
 position:fixed;
 bottom:0;
 left:0;
 right:0;
 background:#000;
 z-index:1000;
 display:none
}
.newsletter-overlay .overlay-close-button {
 position:absolute;
 right:3%;
 top:-50px;
 font-size:60px;
 color:#fd1046;
 font-family:'Univers LT 55 Roman';
 cursor:pointer
}
.newsletter-overlay .newsletter-wrap {
 max-width:1200px;
 padding:50px 0 20px;
 margin:0 auto;
 background:#000
}
.newsletter-overlay .newsletter-name {
 font-size:52px;
 background:linear-gradient(to bottom,#fffab9,#1fedff 95%);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 padding:5px 0;
 line-height:55px;
 position:relative;
 z-index:10
}
.newsletter-overlay .newsletter-description {
 color:#fff;
 font-style:normal;
 font-size:17px;
 line-height:22px;
 max-width:none;
 text-align:center;
 margin-top:8px;
 position:relative;
 z-index:10
}
.newsletter-overlay .newsletter-heading {
 display:inline-block;
 max-width:830px;
 float:left
}
.newsletter-overlay.swords-spaceships .newsletter-graphic {
 background:url(../../../themes/bookriot/assets/images/newsletters/BR_spaceship_NL.svg);
 background-repeat:no-repeat;
 width:200px;
 height:257px;
 position:absolute;
 top:-40px;
 left:335px
}
.newsletter-signup {
 position:relative;
 background:linear-gradient(to bottom,#fffab9,#1fedff 95%);
 padding:15px;
 margin-bottom:40px;
 margin-top:50px;
 clear:both
}
.newsletter-signup .newsletter-firstname {
 display:none
}
.newsletter-signup .newsletter-wrap {
 background:#fff;
 height:100%;
 position:relative
}
@media screen and (min-width:768px) and (max-width:1024px) {
 .newsletter-signup .newsletter-wrap {
  padding-bottom:20px!important
 }
}
.newsletter-signup .newsletter-heading {
 color:#000;
 position:absolute;
 top:-50px;
 left:0;
 right:0;
 display:inline-block;
 margin:0 auto;
 padding:0 30px;
 line-height:19px
}
.newsletter-signup .newsletter-heading .newsletter-name {
 font-size:32px;
 line-height:32px;
 margin-bottom:4px;
 display:inline;
 background:#fff
}
.newsletter-signup .newsletter-description {
 color:#231f20;
 background:#fff;
 font-style:normal;
 font-size:17px;
 line-height:22px;
 max-width:none;
 margin-top:2px
}
.newsletter-signup .newsletter-form {
 position:relative;
 top:40px
}
.newsletter-signup .newsletter-terms {
 position:absolute;
 width:100%;
 bottom:10px;
 margin:0 auto
}
.newsletter-signup .newsletter-terms a {
 color:inherit;
 box-shadow:inset 0 -1px 0 #1fedff
}
.newsletter-confirmation,
.newsletter-error {
 display:none;
 font-size:19px;
 line-height:23px;
 text-align:center;
 font-family:'Univers LT 55 Roman'
}
.newsletter-confirmation {
 padding-top:80px
}
input,
select,
textarea {
 outline-color:#ffd007;
 border-radius:0;
 -webkit-appearance:none
}
a:focus {
 outline:thin dotted
}
input[type="email"] {
 width:370px;
 height:50px;
 margin-right:40px
}
input[type="submit"] {
 width:120px;
 height:50px
}
input[type="email"] {
 border:2px #fc772c solid;
 background:#fff;
 padding-left:10px;
 box-sizing:border-box;
 font-size:19px
}
input[type="email"]::placeholder {
 font-size:15px;
 text-transform:capitalize;
 line-height:25px
}
input[type="submit"] {
 background:#fd1046;
 color:#fff;
 font-family:'Univers LT 57 Condensed';
 font-size:21px;
 font-weight:700;
 text-transform:uppercase;
 letter-spacing:2px;
 border:0
}
input[type="submit"]:hover {
 cursor:pointer
}
.newsletter-terms {
 position:relative;
 padding-top:15px;
 font-size:14px;
 display:block;
 text-align:center
}
@media screen and (max-width:767px) {
 .newsletter-overlay {
  top:0;
  background:rgba(78,196,173,.8)
 }
 .newsletter-overlay.swords-spaceships .newsletter-graphic {
  left:0;
  right:0;
  margin:0 auto
 }
 .newsletter-signup {
  margin:80px -20px 40px
 }
 .newsletter-wrap {
  position:relative;
  overflow:visible;
  top:30%
 }
 .newsletter-name {
  position:relative;
  padding:0 10px 0 0
 }
 .newsletter-name:before {
  content:'';
  position:absolute;
  left:-10px;
  top:0;
  height:70px;
  background:#fff;
  width:10px
 }
 .newsletter-form {
  padding:25px 30px 0;
  clear:both;
  height:210px
 }
 .newsletter-form input {
  width:100%;
  height:50px
 }
 .newsletter-form input[type="email"] {
  margin-bottom:20px
 }
}
@media screen and (min-width:768px) {
 .newsletter-signup .newsletter-heading {
  top:-35px;
  text-align:center
 }
 .newsletter-signup .newsletter-heading .newsletter-name {
  display:inline-block;
  font-size:30px;
  line-height:40px;
  background:#fff;
  padding:0 10px
 }
 .newsletter-signup .newsletter-form {
  width:560px;
  margin:0 auto;
  height:140px;
  top:60px
 }
 .newsletter-signup .newsletter-wrap {
  padding-bottom:0
 }
}
@media screen and (min-width:1024px) {
 .newsletter-overlay .newsletter-heading {
  width:50%
 }
 .newsletter-overlay .newsletter-form {
  display:inline-block;
  float:left;
  max-width:550px;
  margin-top:10px
 }
 /*.newsletter-signup {
  width:600px;
  height:196px
 }*/
 .newsletter-heading .newsletter-name {
  font-size:42px
 }
}