#new-subs { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: fixed; bottom: 0; left: 0; width: 100%; height: auto; padding: 16px; background-color: #263238; z-index: 1000; -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: 1s cubic-bezier(0.68, -0.55, 0.27, 1.55); -o-transition: 1s cubic-bezier(0.68, -0.55, 0.27, 1.55); transition: 1s cubic-bezier(0.68, -0.55, 0.27, 1.55); }

@media (min-width: 768px) { #new-subs { height: 60px; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 0 16px; } }

#new-subs.pop { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }

#new-subs.pop .img .img-inner img { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }

#new-subs .off { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; display: inline-block; width: 24px; height: 20px; position: absolute; top: 6px; right: 0; cursor: pointer; opacity: .5; -webkit-transition: .25s ease .1s; -o-transition: .25s ease .1s; transition: .25s ease .1s; margin-right: 0; }

@media (min-width: 768px) { #new-subs .off { top: unset; right: unset; position: relative; margin-right: 16px; -ms-flex-item-align: auto; align-self: auto; } }

#new-subs .off:hover { opacity: 1; }

#new-subs .off::before, #new-subs .off::after { content: ""; display: inline-block; width: inherit; height: inherit; border-bottom: 3px solid #fff; position: absolute; }

#new-subs .off::before { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }

#new-subs .off::after { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); left: -9px; }

#new-subs .slogan { display: inline-block; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; padding-right: 4px; margin-bottom: 8px; font-family: Roboto; color: #fff; font-size: 15px; line-height: 17px; max-width: 420px; }

@media (min-width: 510px) { #new-subs .slogan { padding-right: 0; } }

@media (min-width: 768px) { #new-subs .slogan { -webkit-box-flex: 1; -ms-flex: 1 0 220px; flex: 1 0 220px; display: inline-block; margin-bottom: 0; } }

#new-subs .slogan span { font-family: inherit; font-size: inherit; white-space: nowrap; }

#new-subs .img { display: inline-block; position: absolute; bottom: 100%; left: 16px; width: 210px; -ms-flex-item-align: end; align-self: flex-end; }

@media (min-width: 768px) { #new-subs .img { left: 0; bottom: 0; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; display: inline-block; position: relative; margin-left: -16px; } }

#new-subs .img .img-inner { position: absolute; left: 0; bottom: 0; width: 100%; overflow: hidden; }

#new-subs .img .img-inner img { -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: .5s ease .5s; -o-transition: .5s ease .5s; transition: .5s ease .5s; }

#new-subs form { position: relative; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; }

@media (min-width: 768px) { #new-subs form { -webkit-box-flex: 1; -ms-flex: 1 0 270px; flex: 1 0 270px; } }

#new-subs form input { width: calc(100% - 142px); border: none; padding: 0 8px; border-radius: 0; font-family: Roboto; font-size: 15px; line-height: 17px; background-color: transparent; font-weight: 300; color: #ccc; }

@media (min-width: 768px) { #new-subs form input { width: calc(100% - 142px); } }

#new-subs form input::-webkit-input-placeholder { color: #bababa !important; }

#new-subs form input:-ms-input-placeholder { color: #bababa !important; }

#new-subs form input::placeholder { color: #bababa !important; }

#new-subs form button { border: none; border-radius: 30px; background-color: #f37736; color: #fff; font-family: Roboto; line-height: 36px; padding: 0 16px; -webkit-transition: .25s ease .1s; -o-transition: .25s ease .1s; transition: .25s ease .1s; }

#new-subs form button:hover { background-color: #e8590e; }

#subs-success { z-index: 1001; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0, 0, 0, 0.6); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; overflow: hidden; }

#subs-success.pop { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }

#subs-success.pop #subs-success-inner { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }

#subs-success #subs-success-inner { width: 300px; padding: 16px; background-color: #fff; -webkit-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.6); box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.6); text-align: center; -webkit-transform-origin: top; -ms-transform-origin: top; transform-origin: top; -webkit-transform: translateY(200%); -ms-transform: translateY(200%); transform: translateY(200%); -webkit-transition: 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.5s; -o-transition: 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.5s; transition: 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.5s; position: relative; }

#subs-success #subs-success-inner img { margin-bottom: 16px; width: 100%; }

#subs-success #subs-success-inner p { margin: 0 0 16px 0; line-height: 1.2; }

#subs-success #subs-success-inner button { border: 3px solid #f37736; border-radius: 32px; margin: 16px 0 0 0; padding: 8px 20px; font-family: Roboto; color: #f37736; background-color: transparent; -webkit-transition: .2s ease .1s; -o-transition: .2s ease .1s; transition: .2s ease .1s; }

#subs-success #subs-success-inner button:hover { color: #fff; background-color: #f37736; }