.popup { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; opacity: 1; z-index: 1000; background-color: rgba(0, 0, 0, 0.701961); transition: z-index 0s, opacity 0.5s ease-in; } .popup .inner { margin: 10% auto 0px; z-index: 1001; color: #fff; } #coupon-popup .inner { background-color: #f2f2f2; color: #086a87; } #coupon-popup .inner .header { overflow: auto; margin-bottom: 10px; } #coupon-popup .inner .header .coupon-popup-name { display: block; font-size: 20px; margin: 0px 40px; text-align: center; padding-top: 15px; } #coupon-popup .inner .header .coupon-popup-img { display: none; } #coupon-popup .inner .header .coupon-popup-img img { height: 60px; display: block; margin: 30px auto 5px; } #coupon-popup .inner .coupon-popup-text { display: none; margin-bottom: 20px; } #coupon-popup .inner .body { border-top: none; padding-top: 5px; color: #086a87; } #coupon-popup .inner .body .code-title { display: none; } #coupon-popup .inner .body .code-subtitle { font-size: 14px; display: block; text-align: center; margin: 0px 60px; } #coupon-popup .inner .body .code-subtitle a { color: #3cc; text-decoration: none; } #coupon-popup .inner .body .coupon-popup-code-table { display: table; border-spacing: 15px 10px; padding-bottom: 5px; width: 100%; text-align: center; } #coupon-popup .inner .body .coupon-popup-code-table .code-text-row { background-color: #fff; display: table-row; } #coupon-popup .inner .body .coupon-popup-code-table .code-text-row .code-text-cell { border: 1px dashed #086a87; padding: 10px 0px; font-size: 22px; display: table-cell; text-align: center; vertical-align: middle; font-weight: 700; } #coupon-popup .inner .body .coupon-popup-code-table .copy-code-row { display: table-row; vertical-align: middle; } #coupon-popup .inner .body .coupon-popup-code-table .copy-code-row .copy-code-cell { background-color: #f63; text-align: center; min-width: 140px; margin-left: 0px; margin-top: 5px; } #coupon-popup .inner .body .coupon-popup-code-table .copy-code-row .copy-code-cell .copy-code-button, #coupon-popup .inner .body .coupon-popup-code-table .copy-code-row .copy-code-cell .show-code-button { display: block; font-size: 16px; color: #fff; padding: 12px; } #coupon-popup .coupon-newsletter { margin-top: 0px; padding: 0px; background-color: #3cc; height: 185px; } #coupon-popup .coupon-newsletter .separator { display: none; width: 1%; } #coupon-popup .coupon-newsletter .separator img { height: 80px; margin-top: 25px; } #coupon-popup .inner .coupon-popup-text p{ font-size: 13px; color: #086a87; margin: 0; } @media (max-width: 639px){ #coupon-popup .inner { width: 325px; padding: 0; } } @media (min-width: 640px) { #coupon-popup .inner { width: 500px; } #coupon-popup .inner .header .coupon-popup-img{ display: block; } #coupon-popup .inner .header .coupon-popup-img img{ display: block; margin: 40px auto 5px auto; } #coupon-popup .inner .body .coupon-popup-code-table .copy-code-row{ display: inline-block; } #coupon-popup .inner .body .coupon-popup-code-table .copy-code-row .copy-code-cell{ margin-left: 15px; margin-top: 0; } #coupon-popup .inner .header .coupon-popup-name{ padding-top: 0; } #coupon-popup .inner .body{ padding-top: 17px; } #coupon-popup .inner .body .code-title{ display: none; } #coupon-popup .inner .body .coupon-popup-code-table .code-text-row{ display: inline-block; } #coupon-popup .inner .body .coupon-popup-code-table .code-text-row .code-text-cell{ display: inline-block; padding: 13px 0; width: 280px; } #coupon-popup .coupon-newsletter { height: 165px; } #coupon-popup .inner .coupon-popup-text { display: none; } } @media (min-width: 840px) { #coupon-popup .inner { width: 785px; padding: 15px 40px; } #coupon-popup .inner .header .coupon-popup-name{ margin: 20px 0; width: 81%; text-align: left; } #coupon-popup .inner .header .coupon-popup-img img{ float: right; width: 18%; margin: 5px auto 5px auto; } #coupon-popup .inner .coupon-popup-text{ display: inline-block; } #coupon-popup .inner .body{ border-top: solid 1px #086a87; } #coupon-popup .inner .body .code-title{ display: block; text-align: center; font-size: 20px; line-height: 20px; margin-bottom: 10px; } #coupon-popup .coupon-newsletter { height: 130px; } }