modal-oubonce.css 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. #ouibounce-modal {
  2. font-family: 'Open Sans', sans-serif;
  3. display: none;
  4. position: fixed;
  5. top: 0;
  6. left: 0;
  7. width: 100%;
  8. height: 100%
  9. }
  10. #ouibounce-modal .underlay {
  11. width: 100%;
  12. height: 100%;
  13. position: absolute;
  14. top: 0;
  15. left: 0;
  16. background-color: rgba(0, 0, 0, .5);
  17. cursor: pointer;
  18. -webkit-animation: fadein .5s;
  19. animation: fadein .5s
  20. }
  21. #ouibounce-modal .modalNuevo {
  22. width: 600px;
  23. height: 410px;
  24. background-color: #f0f1f2;
  25. z-index: 1;
  26. position: absolute;
  27. margin: auto;
  28. top: 0;
  29. right: 0;
  30. bottom: 0;
  31. left: 0;
  32. border-radius: 4px;
  33. -webkit-animation: popin .3s;
  34. animation: popin .3s
  35. }
  36. #ouibounce-modal .modal-title {
  37. font-size: 18px;
  38. background-color: #252525;
  39. color: #fff;
  40. padding: 10px;
  41. margin: 0;
  42. border-radius: 4px 4px 0 0;
  43. text-align: center
  44. }
  45. #ouibounce-modal h3 {
  46. color: #fff;
  47. font-size: 1em;
  48. margin: .2em;
  49. text-transform: uppercase;
  50. font-weight: 500
  51. }
  52. #ouibounce-modal .modal-body {
  53. padding: 20px 35px;
  54. font-size: .9em
  55. }
  56. #ouibounce-modal p {
  57. color: #344a5f
  58. }
  59. #ouibounce-modal form {
  60. text-align: center;
  61. margin-top: 25px
  62. }
  63. #ouibounce-modal form input[type=email] {
  64. padding: 10px;
  65. margin: 1px;
  66. margin-bottom: 10px;
  67. font-size: 1.2em;
  68. width: 260px;
  69. border-radius: 4px;
  70. border:1px solid #ccc;
  71. -webkit-font-smoothing: antialiased
  72. }
  73. #ouibounce-modal form input[type=submit] {
  74. text-transform: uppercase;
  75. font-weight: 700;
  76. padding: 12px;
  77. font-size: 1.1em;
  78. border-radius: 4px;
  79. color: #fff;
  80. background-color: #4ab471;
  81. border: none;
  82. cursor: pointer;
  83. -webkit-font-smoothing: antialiased
  84. }
  85. #ouibounce-modal .modal-footer {
  86. position: absolute;
  87. bottom: 10px;
  88. text-align: center;
  89. width: 100%;
  90. justify-content: center;
  91. border-top: none;
  92. }
  93. #ouibounce-modal .modal-footer p {
  94. text-transform: capitalize;
  95. cursor: pointer;
  96. display: inline;
  97. text-align: center
  98. border-bottom: 1px solid #344a5f
  99. }
  100. @-webkit-keyframes fadein {
  101. 0% {
  102. opacity: 0
  103. }
  104. 100% {
  105. opacity: 1
  106. }
  107. }
  108. @-ms-keyframes fadein {
  109. 0% {
  110. opacity: 0
  111. }
  112. 100% {
  113. opacity: 1
  114. }
  115. }
  116. @keyframes fadein {
  117. 0% {
  118. opacity: 0
  119. }
  120. 100% {
  121. opacity: 1
  122. }
  123. }
  124. @-webkit-keyframes popin {
  125. 0% {
  126. -webkit-transform: scale(0);
  127. transform: scale(0);
  128. opacity: 0
  129. }
  130. 85% {
  131. -webkit-transform: scale(1.05);
  132. transform: scale(1.05);
  133. opacity: 1
  134. }
  135. 100% {
  136. -webkit-transform: scale(1);
  137. transform: scale(1);
  138. opacity: 1
  139. }
  140. }
  141. @-ms-keyframes popin {
  142. 0% {
  143. -ms-transform: scale(0);
  144. transform: scale(0);
  145. opacity: 0
  146. }
  147. 85% {
  148. -ms-transform: scale(1.05);
  149. transform: scale(1.05);
  150. opacity: 1
  151. }
  152. 100% {
  153. -ms-transform: scale(1);
  154. transform: scale(1);
  155. opacity: 1
  156. }
  157. }
  158. @keyframes popin {
  159. 0% {
  160. -webkit-transform: scale(0);
  161. -ms-transform: scale(0);
  162. transform: scale(0);
  163. opacity: 0
  164. }
  165. 85% {
  166. -webkit-transform: scale(1.05);
  167. -ms-transform: scale(1.05);
  168. transform: scale(1.05);
  169. opacity: 1
  170. }
  171. 100% {
  172. -webkit-transform: scale(1);
  173. -ms-transform: scale(1);
  174. transform: scale(1);
  175. opacity: 1
  176. }
  177. }