Advertisement
Guest User

Untitled

a guest
Sep 18th, 2014
196
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.31 KB | None | 0 0
  1. .ms-slide.frontiers:hover .explore-frontiers,
  2. .ms-slide.frontiers:hover .explore-frontiers-bg{
  3. opacity: 0;
  4. z-index: -10;
  5. }
  6.  
  7. .explore-frontiers{
  8. position: absolute;
  9. font-family: 'TungstenCondensedBold', Arial, sans-serif;
  10. font-size: 96px;
  11. left: 50%;
  12. top: 50%;
  13. z-index: 999;
  14. opacity: 1;
  15. -webkit-transition: all 400ms ease-out;
  16. -moz-transition: all 400ms ease-out;
  17. -ms-transition: all 400ms ease-out;
  18. -o-transition: all 400ms ease-out;
  19. transition: all 400ms ease-out;
  20.  
  21. -webkit-transform: translateY(-50%) translateX(-50%);
  22. -moz-transform: translateY(-50%) translateX(-50%);
  23. -ms-transform: translateY(-50%) translateX(-50%);
  24. -o-transform: translateY(-50%) translateX(-50%);
  25. transform: translateY(-50%) translateX(-50%);
  26. color: #fff;
  27. text-align: center;
  28. pointer-events: none;
  29. line-height: normal;
  30. }
  31. .explore-frontiers-bg{
  32. left: 0;
  33. top: 0;
  34. opacity: 0.8;
  35. z-index: 99;
  36. background-image: url(../images/slider-bg2.jpg);
  37. background-position: center center;
  38. background-size: cover;
  39. width: 100%;
  40. height: 100%;
  41. position: absolute;
  42. -webkit-transition: all 400ms ease-out;
  43. -moz-transition: all 400ms ease-out;
  44. -ms-transition: all 400ms ease-out;
  45. -o-transition: all 400ms ease-out;
  46. transition: all 400ms ease-out;
  47. pointer-events: none;
  48. }
  49.  
  50. .ms-slide.frontiers .ms-layer{
  51. height: 100%;
  52. position: relative;
  53. }
  54.  
  55. .ms-slide.frontiers .ms-layer a{
  56. width: 33.3333%;
  57. height: 33.3333%;
  58. display: block;
  59. position: relative;
  60. }
  61.  
  62. .ms-slide.frontiers .ms-layer a .overlay > span{
  63. position: relative;
  64. top: 50%;
  65. -webkit-transform: translateY(-50%);
  66. -moz-transform: translateY(-50%);
  67. -ms-transform: translateY(-50%);
  68. -o-transform: translateY(-50%);
  69. transform: translateY(-50%);
  70.  
  71. -webkit-transition: all 300ms ease-out;
  72. -moz-transition: all 300ms ease-out;
  73. -ms-transition: all 300ms ease-out;
  74. -o-transition: all 300ms ease-out;
  75. transition: all 300ms ease-out;
  76. display: block;
  77. font-size: 2.6vw;
  78. }
  79.  
  80. .ms-slide.frontiers .ms-layer a .overlay{
  81. position: absolute;
  82. top: 0px;
  83. left: 0px;
  84. width: 100%;
  85. height: 100%;
  86. background-color: rgba(25, 26, 39, 0.8);
  87. font-family: 'latobold', Arial, sans-serif;
  88. font-size: 24px;
  89. text-align: center;
  90. background-position: center center;
  91. background-repeat: no-repeat;
  92. background-size: auto 80%;
  93.  
  94. -webkit-transition: all 300ms ease-out;
  95. -moz-transition: all 300ms ease-out;
  96. -ms-transition: all 300ms ease-out;
  97. -o-transition: all 300ms ease-out;
  98. transition: all 300ms ease-out;
  99. }
  100.  
  101. .ms-slide.frontiers .ms-layer a:hover .overlay{
  102. background-color: rgba(25, 26, 39, 0);
  103. background-image: url(../images/video-play.png);
  104. }
  105.  
  106. .ms-slide.frontiers .ms-layer a:hover .overlay > span{
  107. opacity: 0;
  108. }
  109.  
  110. @media (max-width: 640px){
  111. .ms-slide.frontiers .ms-layer a{
  112. width: 50%;
  113. }
  114.  
  115. .ms-slide.frontiers .ms-layer a .overlay{
  116. background-size: 50% auto;
  117. }
  118.  
  119. .ms-layer .front1 img{
  120. width: auto;
  121. height: 100%;
  122. }
  123. }
  124.  
  125. @media (min-width: 1180px){
  126. .ms-slide.frontiers .ms-layer a .overlay > span{
  127. font-size: 31px;
  128. }
  129. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement