Advertisement
Guest User

overlay

a guest
Nov 16th, 2018
95
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.53 KB | None | 0 0
  1. #overlay {
  2. position: fixed; /* Sit on top of the page content */
  3. display: none; /* Hidden by default */
  4. width: 100%; /* Full width (cover the whole page) */
  5. height: 100%; /* Full height (cover the whole page) */
  6. top: 0;
  7. left: 0;
  8. right: 0;
  9. bottom: 0;
  10. background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  11. z-index: 999999; /* Specify a stack order in case you're using a different order for other elements */
  12. cursor: pointer; /* Add a pointer on hover */
  13. }
  14.  
  15. .open-overlay {
  16. -webkit-appearance: button;
  17. background-color: #6fb0e0 !important;
  18. position: relative;
  19. display: inline-block;
  20. margin-right: 10px;
  21. margin-bottom: 20px;
  22. padding: 11px 35px;
  23. outline: 0;
  24. border: 0;
  25. color: #fff;
  26. vertical-align: middle;
  27. text-align: center;
  28. text-transform: uppercase;
  29. font-weight: 700;
  30. font-size: 12px;
  31. line-height: 100%;
  32. cursor: pointer;
  33. zoom: 1;
  34. -webkit-border-radius: 3px;
  35. -moz-border-radius: 3px;
  36. border-radius: 3px;
  37. transition: background .1s ease-in-out;
  38. -webkit-transition: background .1s ease-in-out;
  39. -moz-transition: background .1s ease-in-out;
  40. -ms-transition: background .1s ease-in-out;
  41. -o-transition: background .1s ease-in-out;
  42. }
  43.  
  44. .inner-overlay button.close {
  45. background-color: #6fb0e0 !important;
  46. position: relative;
  47. display: inline-block;
  48. margin-right: 0px;
  49. margin-bottom: 20px;
  50. padding: 5px 9px;
  51. outline: 0;
  52. border: 0;
  53. color: #fff;
  54. vertical-align: middle;
  55. text-align: center;
  56. text-transform: uppercase;
  57. font-weight: 700;
  58. font-size: 17px;
  59. line-height: 100%;
  60. cursor: pointer;
  61. float: right;
  62. border-radius: 50%;
  63. right: 0px;
  64. }
  65.  
  66. .inner-overlay {
  67. max-width: 460px;
  68. width: 100%;
  69. margin: 0 auto;
  70. padding-top: 14%;
  71. }
  72.  
  73. .inner-overlay input[type=tel], .inner-overlay input[type=email] {
  74. width: 94.5%;
  75. }
  76.  
  77. p.overlay-button {
  78. text-align: center;
  79. }
  80.  
  81. .mk-quick-contact-wrapper a.mk-quick-contact-link {
  82. color: #ffffff;
  83. font-weight: bold;
  84. }
  85.  
  86. .download-brochure {
  87. margin-right: 10px !important;
  88. }
  89.  
  90. .download-brochure {
  91. width: 100%;
  92. max-width: 271px !important;
  93. vertical-align: top !important;
  94. height: 400px !important;
  95. float: left;
  96. }
  97.  
  98. .overlay-button span {
  99. float: right;
  100. vertical-align: middle;
  101. width: 75%;
  102. padding-top: 10%;
  103. text-align: left;
  104. }
  105.  
  106.  
  107.  
  108. .overlay-button {
  109. clear: both;
  110. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement