#ouibounce-modal { font-family: 'Open Sans', sans-serif; display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100% } #ouibounce-modal .underlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, .5); cursor: pointer; -webkit-animation: fadein .5s; animation: fadein .5s } #ouibounce-modal .modalNuevo { width: 600px; height: 450px; background-color: #fff; z-index: 2; position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; border-radius: 4px; -webkit-animation: popin .3s; animation: popin .3s } #ouibounce-modal .modal-title { color: #fff !important; } #ouibounce-modal h3 { color: #fff; font-size: 1em; margin: .2em; text-transform: uppercase; font-weight: 500 } #ouibounce-modal .modal-body { padding: 20px 35px; font-size: .9em } #ouibounce-modal p { color: white; } .white { color: white; } #ouibounce-modal form input[type=email] { padding: 10px; margin: 1px; margin-bottom: 10px; font-size: 1.2em; text-align: center; width: 460px; border-radius: 4px; border: 1px solid #ccc; -webkit-font-smoothing: antialiased } #ouibounce-modal form button { text-transform: uppercase; font-weight: 700; padding: 12px; font-size: 1.1em; border-radius: 4px; color: #fff; background-color: #4ab471; border: none; cursor: pointer; -webkit-font-smoothing: antialiased; border: solid 1px; } #ouibounce-modal form button:hover { background-color: transparent; border-color: #1faf71; color: #1faf71; } #ouibounce-modal .modal-footer { position: absolute; bottom: 20px; text-align: center; width: 100%; justify-content: center; border-top: none; } .modal-form { width: 460px; } #ouibounce-modal .modal-footer p { cursor: pointer; display: inline; } .modal-head { background-color: #1faf71; color: white; } .btn-salir { background-color: transparent; border-color: transparent; color: #252525; } .btn-salir:hover { background-color: transparent; border-color: #1faf71; color: #1faf71; } @-webkit-keyframes fadein { 0% { opacity: 0 } 100% { opacity: 1 } } @-ms-keyframes fadein { 0% { opacity: 0 } 100% { opacity: 1 } } @keyframes fadein { 0% { opacity: 0 } 100% { opacity: 1 } } @-webkit-keyframes popin { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0 } 85% { -webkit-transform: scale(1.05); transform: scale(1.05); opacity: 1 } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } } @-ms-keyframes popin { 0% { -ms-transform: scale(0); transform: scale(0); opacity: 0 } 85% { -ms-transform: scale(1.05); transform: scale(1.05); opacity: 1 } 100% { -ms-transform: scale(1); transform: scale(1); opacity: 1 } } @keyframes popin { 0% { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); opacity: 0 } 85% { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); opacity: 1 } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1 } } @media (min-width: 490px) and (max-width: 800px) { #ouibounce-modal .modalNuevo { width: 460px; } #ouibounce-modal form input[type=email] { width: 400px; } .modal-form { width: 400px; } } @media (min-width: 440px) and (max-width: 490px) { #ouibounce-modal .modalNuevo { width: 440px; } #ouibounce-modal form input[type=email] { width: 350px; } .modal-form { width: 350px; } #ouibounce-modal h2 { font-size: 1.9em; } } @media (min-width: 300px) and (max-width: 440px) { #ouibounce-modal .modalNuevo { width: 370px; } #ouibounce-modal form input[type=email] { width: 350px; } .modal-form { width: 350px; } #ouibounce-modal h2 { font-size: 1.5em; } } @media (min-width: 300px) and (max-width: 340px) { #ouibounce-modal .modalNuevo { width: 330px; } #ouibounce-modal form input[type=email] { width: 310px; } .modal-form { width: 310px; } #ouibounce-modal h2 { font-size: 1.2em; } #ouibounce-modal p { font-size: 1em; } #ouibounce-modal form button { font-size: 1em; } }