div.newsletter-wrapper {display: table; width: calc((100% / 3) - 10px); border: 1px solid rgba(0,0,0,0.2); padding: 10px; box-shadow: 2px 2px 6px rgba(0,0,0,0.2); margin: 10px 10px 10px 0; float: left;}
div[class*='newsletter-wrapper']:nth-of-type(3n) {clear: right; float: right; margin: 10px 0 10px 10px;}
div[class*='newsletter-wrapper']:nth-of-type(3n+1) {clear: left;}
div[class*='newsletter-wrapper']:nth-of-type(3n+2) {clear: inherit; margin: 10px 5px;}
div.newsletter-container {position: relative; display: table; width: 100%;}
div.newsletter-container > h3 {font-family: 'Catamaran'; margin: 0; text-align: center; text-transform: uppercase; color: rgb(0,148,255);}
div.newsletter-container > h5 {margin: 5px auto; padding: 2px 0 2px 22px; font-family: Arial; text-align: center; background-image: url('../../../global/resources/images/_site/_subscriber_svcs/clock.png'); background-position: left center; background-size: contain; background-repeat: no-repeat; display: table;}
div.newsletter-container > img  {float: right; width: 40%; display: table; margin: 0 0 5px 10px;}
div.newsletter-container > p {font-family: 'Catamaran'; margin: 0; float: left; width: calc(60% - 20px);}
div.newsletter-container > div.footer {display: table; width: 100%; padding: 0; border-top: 1px solid rgba(100,100,100,0.2); margin-top: 20px;}
div.newsletter-container > div.footer > span.preview {text-indent: 40px; display: table; font-family: 'Catamaran'; font-weight: bold; background-image: url('../../../global/resources/images/_site/_subscriber_svcs/eyeball.png'); background-position: left 5px center; background-size: 25px; background-repeat: no-repeat; cursor: pointer; padding: 5px 0; margin: 5px 0 0 0; width: 100%;}
div.newsletter-container > div.footer > span:hover {background-color: rgba(0,0,0,0.1);}
div.newsletter-container > div.footer > p {font-family: 'Catamaran'; font-weight: bold; background-image: url('../../../global/resources/images/_site/_subscriber_svcs/plus.png'); background-position: right 10px center; background-size: 20px; background-repeat: no-repeat; cursor: pointer; padding: 7.5px 5px 2.5px 5px; margin: 5px 0 0 0;}
div.newsletter-container > div.footer > p:hover {background-color: rgba(100,100,100,0.2);}
div.newsletter-container > div.footer > p.subscribed {background-image: url('../../../global/resources/images/_site/_subscriber_svcs/checkmark.png'); background-color: rgb(0,148,255); border-radius: 5px; color: rgb(255,255,255);}
span[id$='btnSubscribe'] {background-color: rgba(0,0,0,0.1); border: 1px solid rgba(0,0,0,0.2); padding: 5px 10px; margin: 5px; display: table;}
div.newsletter-container[data-subscribe='true'] > div.footer > p {background-image: url('../../../global/resources/images/_site/_subscriber_svcs/checkmark.png'); background-color: rgb(0, 148, 255); color: transparent;}
div.newsletter-container[data-subscribe='true'] > div.footer > p:before {color: rgb(255,255,255); content: "You are subscribed. Click to unsubscribe.";}
span.separator {width: 100%; display: table; clear: both;}

div.modal-container {position: fixed; z-index: 1000000; background-color: rgba(0,0,0,0.4); top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; margin: auto; display: table;}
div.newsletter-modal {-webkit-overflow-scrolling: touch; overflow-y: scroll; position: absolute; background-color: rgb(255,255,255); box-shadow: 5px 5px 5px rgba(0,0,0,0.1); top: 0; bottom: 0; right: 0; left: 0; width: calc(100% - 100px); max-width: 600px; height: calc(100% - 120px); margin: 60px auto; display: inline-block;}
div.newsletter-modal > iframe {pointer-events: none; margin-top: 90px; width: 100%; height: calc(100% - 90px); border: 0; position: absolute;}
div.newsletter-modal > iframe:hover, div[class='newsletter-modal']:hover > iframe {pointer-events: auto;}
div.newsletter-modal > span.close {z-index: 10000; position: absolute; top: 0px; right: 5px; font-size: 70px; font-weight: bold; color: rgba(0,0,0,0.5); line-height: 50px; cursor: pointer;}
div.newsletter-modal > div.modal-header {position: absolute; top: 0; right: 0; left: 0; width: 100%; background-color: rgba(0,0,0,0.1);}
div.newsletter-modal > iframe > html > body > img {margin: auto !important; display: table !important;}

div.newsletter-container > div.subscribe-modal {position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,0.4); margin: auto; width: 100%; height: 100%;}
div.newsletter-container > div.subscribe-modal > div.form {position: absolute; padding: 10px; left: 0; right: 0; margin: calc((100% / 3) / 2) auto; background-color: rgba(0,148,255,0.9); width: calc(100% - 50px); box-shadow: 2px 2px 2px rgba(0,0,0,0.4);}
div.newsletter-container > div.subscribe-modal > div.form > input {width: calc(100% - 20px); margin: 0 10px 10px 10px; padding: 5px 10px; display: table; clear: both;}
div.newsletter-container > div.subscribe-modal > div.form > p.message {font-family: 'Open Sans', sans-serif; font-size: 12pt; color: rgb(255,255,255); text-align: center;}
div.newsletter-container > div.subscribe-modal > div.form > p.subscription-button, div.newsletter-container > div.subscribe-modal > div.form > p.unsub, div.newsletter-container > div.subscribe-modal > div.form > p.cancel {text-align: center; display: table; float: left; margin: auto; color: rgb(255,255,255); background-color: rgba(44,44,224,0.8); border-radius: 5px; padding: 10px 20px; cursor: pointer; text-transform: uppercase;}
div.newsletter-container > div.subscribe-modal > div.form > p.subscription-button {float: none !important;}
div.newsletter-container > div.subscribe-modal > div.form > p.unsub, div.newsletter-container > div.subscribe-modal > div.form > p.cancel {width: calc((100%/2) - 20px); margin: 0px 10px;}
div.newsletter-container > div.subscribe-modal > div.form > p.cancel {background-color: rgba(200,200,200,0.7);}


div.newsletter-container > div.subscribe-modal > span.close-button {color: rgba(255,255,255,0.8); position: absolute; top: 0; right: 5px; font-size: 40pt; font-weight: bold; cursor: pointer; line-height: 30pt;}
div.newsletter-container > div.subscribe-modal > span.close-button:hover {color: rgba(200,0,0,0.8);}
div.newsletter-container > div.subscribe-modal > div.form > input.error {border-color: rgb(200,0,0);}

div.validation-modal {background-color: rgba(0,148,255,0.9); z-index: 100000; display: table; padding: 10px; margin: calc((100% / 3) / 2) auto; width: calc(100% - 50px); position: absolute; top: 0; bottom:0; right: 0; left: 0; box-shadow: 5px 5px 5px rgba(0,0,0,0.4);}
div.validation-modal > p {text-align: center; font-family: 'Open Sans', sans-serif; font-size: 12pt; color: rgb(255,255,255);}
div.validation-modal > button {padding: 10px 20px; margin: 0 auto; display: table; clear: both; background-color: rgba(44,44,224,0.8); border-radius: 5px; border: 0; color: rgb(255,255,255); cursor: pointer;}

div.newsletter-wrapper.full-width {float: none; margin: 10px auto; max-width: 370px;}
@media (max-width: 991px) {
    div[class*='newsletter-wrapper']:nth-of-type(3n+2), div[class*='newsletter-wrapper']:nth-of-type(3n+1) {margin: inherit; clear: inherit; float: inherit;}
    div.newsletter-wrapper {width: calc((100% / 2) - 10px); border: 1px solid rgba(0,0,0,0.2); padding: 10px; box-shadow: 2px 2px 6px rgba(0,0,0,0.2); margin: 10px 10px 10px 0; float: left; clear: left;}
    div[class*='newsletter-wrapper']:nth-of-type(even) {clear: right; float: left; margin: 10px 0 10px 10px;}
    div[class*='newsletter-wrapper']:nth-of-type(odd) {clear: left; float: left; margin: 10px 10px 10px 0;}
    div.newsletter-wrapper.full-width {float: none; margin: 10px auto;}
}

@media (max-width: 768px) {
    div.newsletter-wrapper > div.newsletter-container > p {width: 100%; text-align: center; float: none; display: table; margin: 5px 0;}
    div.newsletter-wrapper > div.newsletter-container > img {width: 100%; float: none; margin: 5px 0;}
    div.newsletter-wrapper > div.newsletter-container > div.subscribe-modal > div.form, div.validation-modal {margin: calc(100% / 2) auto;}
    div.newsletter-modal {position: fixed; width: 100%; max-width: 100%; height: 100%; margin: auto;}
    div.newsletter-wrapper.full-width {float: none; margin: 10px auto;}
}

@media (max-width: 568px) {
    div.newsletter-wrapper {width: 100%; border: 1px solid rgba(0,0,0,0.2); padding: 10px; box-shadow: 2px 2px 6px rgba(0,0,0,0.2); margin: 10px 0 !important; float: none !important; clear: both !important;}
    //div.newsletter-wrapper > div.newsletter-container > div.subscribe-modal > div.form > input {width: 100%;}
    div.newsletter-wrapper.full-width {float: none; margin: 10px auto !important;}
}