Advertisement
srikat

style.css

Mar 28th, 2016
100
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.90 KB | None | 0 0
  1. .home-hero {
  2. position: relative;
  3. background: #295A76;
  4. }
  5.  
  6. #big-video-wrap {
  7. display: none; /* Hide background video (will be faded in after it's completely loaded via JS) */
  8. position: absolute !important;
  9. text-align: left;
  10. }
  11.  
  12. #big-video-vid {
  13. opacity: 0.35;
  14. background: url('images/img-video.jpg') 50% 50% fixed no-repeat;
  15. -webkit-background-size: cover;
  16. -moz-background-size: cover;
  17. -o-background-size: cover;
  18. background-size: cover;
  19. }
  20.  
  21. #home-hero-content {
  22. padding: 150px 0;
  23. text-align: center;
  24. z-index: 50;
  25. position: relative;
  26. }
  27.  
  28. #home-hero-content .widget {
  29. margin-bottom: 0;
  30. }
  31.  
  32. #home-hero-content .wrap {
  33. color: #fff;
  34. font-size: 30px;
  35. letter-spacing: -1px;
  36. }
  37.  
  38. #home-hero-content strong {
  39. font-size: 36px;
  40. font-weight: 800;
  41. letter-spacing: -2px;
  42. }
  43.  
  44. #home-hero-content .btn-play {
  45. display: inline-block;
  46. text-indent: -9999px;
  47. vertical-align: middle;
  48. overflow: hidden;
  49. width: 67px;
  50. height: 67px;
  51. margin: 0 50px;
  52. background: url(images/btn-play.png) no-repeat;
  53. }
  54.  
  55. #home-hero-content span {
  56. font-weight: 300;
  57. }
  58.  
  59. .mask {
  60. z-index: 1000;
  61. background-color: #000;
  62. opacity: 90;
  63. filter: alpha(opacity=9000);
  64. opacity: 0.9;
  65. filter: alpha(opacity=90);
  66. position: fixed;
  67. top: 0;
  68. left: 0;
  69. bottom: 0;
  70. right: 0;
  71. height: 100%;
  72. width: 100%;
  73. display: none;
  74. }
  75. .popup-video {
  76. z-index: 1000;
  77. margin: 0 10%;
  78. top: 0;
  79. left: 0;
  80. bottom: 0;
  81. right: 0;
  82. width: 0;
  83. height: 0;
  84. position: absolute;
  85. overflow: hidden;
  86. }
  87. .popup-video.shown {
  88. position: fixed;
  89. width: 80%;
  90. height: 100%;
  91. overflow: visible;
  92. display: none;
  93. }
  94. .popup-video > * {
  95. width: 100%;
  96. height: 100%;
  97. }
  98.  
  99. .home .site-container {
  100. position: relative;
  101. z-index: 2;
  102. /*background: #fff;*/
  103. overflow: hidden;
  104. min-height: 100%;
  105. -webkit-transform: translate3d(0, 0, 0);
  106. -moz-transform: translate3d(0, 0, 0);
  107. -o-transform: translate3d(0, 0, 0);
  108. transform: translate3d(0, 0, 0);
  109. -webkit-transition: all 0.33s cubic-bezier(0.694, 0.0482, 0.335, 1);
  110. -moz-transition: all 0.33s cubic-bezier(0.694, 0.0482, 0.335, 1);
  111. -o-transition: all 0.33s cubic-bezier(0.694, 0.0482, 0.335, 1);
  112. transition: all 0.33s cubic-bezier(0.694, 0.0482, 0.335, 1);
  113. }
  114.  
  115. @media only screen and (max-width: 1024px) {
  116.  
  117. .home-hero {
  118. background: url(images/Big-City-Life.jpg) 50% 50% fixed no-repeat;
  119. -webkit-background-size: cover;
  120. -moz-background-size: cover;
  121. -o-background-size: cover;
  122. background-size: cover;
  123. position: relative;
  124. }
  125. .home-hero:after {
  126. content: "";
  127. display: block;
  128. position: absolute;
  129. top: 0;
  130. right: 0;
  131. bottom: 0;
  132. left: 0;
  133. pointer-events: none;
  134. background: rgba(41,90,118,0.7);
  135. }
  136.  
  137. }
  138.  
  139. @media only screen and (max-width: 800px) {
  140.  
  141. #home-hero-content .btn-play {
  142. display: block;
  143. margin: 20px auto;
  144. }
  145.  
  146. }
  147.  
  148. @media only screen and (max-width: 736px) {
  149.  
  150. .home-hero {
  151. background-attachment: scroll;
  152. }
  153.  
  154. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement