PageRenderTime 61ms CodeModel.GetById 20ms RepoModel.GetById 1ms app.codeStats 0ms

/wp-content/plugins/gallery-by-supsystic/src/GridGallery/Galleries/assets/css/grid-gallery.galleries.effects.css

https://gitlab.com/vovanduc/dainghia
CSS | 1886 lines | 1685 code | 172 blank | 29 comment | 0 complexity | a7cef593759f404495342258812dad40 MD5 | raw file
Possible License(s): GPL-2.0, Apache-2.0, BSD-3-Clause
  1. .grid-gallery-caption {
  2. position: relative;
  3. float: left;
  4. overflow: hidden;
  5. -webkit-box-sizing: border-box;
  6. -moz-box-sizing: border-box;
  7. box-sizing: border-box;
  8. display: inline-flex;
  9. white-space: normal;
  10. z-index: 1;
  11. padding: 0!important;
  12. }
  13. a.post .grid-gallery-caption {
  14. position: relative;
  15. float: left;
  16. overflow: hidden;
  17. -webkit-box-sizing: border-box;
  18. -moz-box-sizing: border-box;
  19. box-sizing: border-box;
  20. display: block !important;
  21. }
  22. /*.grid-gallery-caption:nth-child(2n) {
  23. margin-right: 0;
  24. }*/
  25. .grid-gallery-caption img {
  26. -webkit-transition: 500ms;
  27. -o-transition: 500ms;
  28. transition: 500ms;
  29. width: 100%;
  30. height: 100%;
  31. display: block;
  32. border-radius: 0;
  33. margin: 0;
  34. }
  35. .grid-gallery-caption figcaption {
  36. -webkit-box-sizing: border-box;
  37. -moz-box-sizing: border-box;
  38. box-sizing: border-box;
  39. position: absolute;
  40. -webkit-transition: 500ms;
  41. -o-transition: 500ms;
  42. transition: 500ms;
  43. background: rgba(0, 0, 0, 0.8);
  44. width: 100%;
  45. color: white;
  46. font-size: 0.8em;
  47. padding: 10px;
  48. line-height: normal;
  49. }
  50. .grid-gallery-caption[data-grid-gallery-type="none"] figcaption {
  51. bottom: 0;
  52. left: 0;
  53. opacity: 1;
  54. }
  55. .grid-gallery-caption[data-grid-gallery-type="center"] figcaption {
  56. top: 50%;
  57. left: 0;
  58. opacity: 0;
  59. }
  60. .grid-gallery-caption[data-grid-gallery-type="center"]:hover figcaption,
  61. .grid-gallery-caption[data-grid-gallery-type="center"].hovered figcaption,
  62. .grid-gallery-caption[data-grid-gallery-type="center"]:active figcaption {
  63. opacity: 1;
  64. -webkit-transform: translateY(-50%);
  65. -ms-transform: translateY(-50%);
  66. transform: translateY(-50%);
  67. }
  68. .grid-gallery-caption[data-grid-gallery-type="icons"] figcaption {
  69. left: 0;
  70. bottom: 0;
  71. opacity: 0;
  72. height: 100%;
  73. color: #ffffff;
  74. pointer-events: none;
  75. }
  76. .grid-gallery-caption[data-grid-gallery-type="icons"] figcaption a {
  77. pointer-events: all;
  78. }
  79. .grid-gallery-caption[data-grid-gallery-type="icons"] .caption-with-icons {
  80. position: absolute;
  81. left: 0;
  82. bottom: 0;
  83. width: 100%;
  84. padding: 10px;
  85. font-family: 'Montserrat', sans-serif;
  86. font-weight: 800;
  87. }
  88. .grid-gallery-caption[data-grid-gallery-type="icons"]:hover figcaption,
  89. .grid-gallery-caption[data-grid-gallery-type="icons"]:active figcaption {
  90. opacity: 1;
  91. }
  92. .grid-gallery-caption[data-grid-gallery-type="icons-scale"] figcaption {
  93. left: 0;
  94. bottom: 0;
  95. opacity: 0;
  96. height: 100%;
  97. -webkit-transform: scale(1.4);
  98. -ms-transform: scale(1.4);
  99. -o-transform: scale(1.4);
  100. transform: scale(1.4);
  101. -webkit-transition-duration: 500ms;
  102. -o-transition-duration: 500ms;
  103. -ms-transition-duration: 500ms;
  104. transition-duration: 500ms;
  105. pointer-events: none;
  106. }
  107. .grid-gallery-caption[data-grid-gallery-type="icons-scale"] figcaption a {
  108. pointer-events: all;
  109. }
  110. .grid-gallery-caption[data-grid-gallery-type="icons-scale"] .caption-with-icons-scale {
  111. position: absolute;
  112. left: 0;
  113. bottom: 0;
  114. opacity: 0;
  115. width: 100%;
  116. padding: 10px 0;
  117. font-family: 'Montserrat', sans-serif;
  118. font-weight: 800;
  119. color: #ffffff;
  120. -webkit-transform: scale(2.0);
  121. -ms-transform: scale(2.0);
  122. -o-transform: scale(2.0);
  123. transform: scale(2.0);
  124. -webkit-transition-duration: 500ms;
  125. -o-transition-duration: 500ms;
  126. -ms-transition-duration: 500ms;
  127. transition-duration: 500ms;
  128. }
  129. .grid-gallery-caption[data-grid-gallery-type="icons-scale"]:hover figcaption,
  130. .grid-gallery-caption[data-grid-gallery-type="icons-scale"]:active figcaption {
  131. opacity: 1;
  132. -webkit-transform: scale(1.0);
  133. -ms-transform: scale(1.0);
  134. -o-transform: scale(1.0);
  135. transform: scale(1.0);
  136. }
  137. .grid-gallery-caption[data-grid-gallery-type="icons-scale"]:hover .caption-with-icons-scale,
  138. .grid-gallery-caption[data-grid-gallery-type="icons-scale"]:active .caption-with-icons-scale {
  139. opacity: 1;
  140. -webkit-transform: scale(1.0);
  141. -ms-transform: scale(1.0);
  142. -o-transform: scale(1.0);
  143. transform: scale(1.0);
  144. }
  145. .grid-gallery-caption[data-grid-gallery-type="icons-sodium-left"] figcaption {
  146. left: -60%;
  147. bottom: 0;
  148. opacity: 0;
  149. width: 60%;
  150. height: 100%;
  151. -webkit-transition-duration: 300ms;
  152. -o-transition-duration: 300ms;
  153. -ms-transition-duration: 300ms;
  154. transition-duration: 300ms;
  155. }
  156. .grid-gallery-caption[data-grid-gallery-type="icons-sodium-left"] .caption-with-icons-sodium-left {
  157. position: absolute;
  158. left: 100%;
  159. bottom: 0;
  160. opacity: 0;
  161. width: 50%;
  162. height: 100%;
  163. font-family: 'Montserrat', sans-serif;
  164. font-weight: bold;
  165. color: #ffffff;
  166. z-index: 9999;
  167. -webkit-transition-duration: 500ms;
  168. -o-transition-duration: 500ms;
  169. -ms-transition-duration: 500ms;
  170. transition-duration: 500ms;
  171. }
  172. .grid-gallery-caption[data-grid-gallery-type="icons-sodium-left"] .caption-with-icons-sodium-left div {
  173. margin-top: 10px;
  174. }
  175. .grid-gallery-caption[data-grid-gallery-type="icons-sodium-left"]:hover figcaption,
  176. .grid-gallery-caption[data-grid-gallery-type="icons-sodium-left"]:active figcaption {
  177. opacity: 1;
  178. -webkit-transform: translateX(100%);
  179. -ms-transform: translateX(100%);
  180. -o-transform: translateX(100%);
  181. transform: translateX(100%);
  182. }
  183. .grid-gallery-caption[data-grid-gallery-type="icons-sodium-left"]:hover .caption-with-icons-sodium-left,
  184. .grid-gallery-caption[data-grid-gallery-type="icons-sodium-left"]:active .caption-with-icons-sodium-left {
  185. opacity: 1;
  186. -webkit-transform: translateX(-100%);
  187. -ms-transform: translateX(-100%);
  188. -o-transform: translateX(-100%);
  189. transform: translateX(-100%);
  190. }
  191. .grid-gallery-caption[data-grid-gallery-type="icons-sodium-top"] figcaption {
  192. left: 0;
  193. bottom: -100%;
  194. opacity: 0;
  195. width: 60%;
  196. height: 100%;
  197. -webkit-transition-duration: 300ms;
  198. -o-transition-duration: 300ms;
  199. -ms-transition-duration: 300ms;
  200. transition-duration: 300ms;
  201. }
  202. .grid-gallery-caption[data-grid-gallery-type="icons-sodium-top"] .caption-with-icons-sodium-top {
  203. position: absolute;
  204. left: 100%;
  205. bottom: 0;
  206. opacity: 0;
  207. width: 50%;
  208. height: 100%;
  209. font-family: 'Montserrat', sans-serif;
  210. font-weight: bold;
  211. color: #ffffff;
  212. z-index: 9999;
  213. -webkit-transition-duration: 500ms;
  214. -o-transition-duration: 500ms;
  215. -ms-transition-duration: 500ms;
  216. transition-duration: 500ms;
  217. }
  218. .grid-gallery-caption[data-grid-gallery-type="icons-sodium-top"]:hover figcaption,
  219. .grid-gallery-caption[data-grid-gallery-type="icons-sodium-top"]:active figcaption {
  220. opacity: 1;
  221. -webkit-transform: translateY(-100%);
  222. -ms-transform: translateY(-100%);
  223. -o-transform: translateY(-100%);
  224. transform: translateY(-100%);
  225. }
  226. .grid-gallery-caption[data-grid-gallery-type="icons-sodium-top"]:hover .caption-with-icons-sodium-top,
  227. .grid-gallery-caption[data-grid-gallery-type="icons-sodium-top"]:active .caption-with-icons-sodium-top {
  228. opacity: 1;
  229. -webkit-transform: translateX(-100%);
  230. -ms-transform: translateX(-100%);
  231. -o-transform: translateX(-100%);
  232. transform: translateX(-100%);
  233. }
  234. .grid-gallery-caption[data-grid-gallery-type="icons-nitrogen-top"] figcaption {
  235. left: 0;
  236. bottom: -100%;
  237. opacity: 0.0;
  238. width: 100%;
  239. height: 100%;
  240. -webkit-transition-duration: 300ms;
  241. -o-transition-duration: 300ms;
  242. -ms-transition-duration: 300ms;
  243. transition-duration: 300ms;
  244. }
  245. .grid-gallery-caption[data-grid-gallery-type="icons-nitrogen-top"] .caption-with-icons-nitrogen-top {
  246. position: absolute;
  247. left: 0;
  248. bottom: 0;
  249. width: 100%;
  250. padding: 10px 0;
  251. font-family: 'Montserrat', sans-serif;
  252. font-weight: bold;
  253. color: #ffffff;
  254. -webkit-transition-duration: 500ms;
  255. -o-transition-duration: 500ms;
  256. -ms-transition-duration: 500ms;
  257. transition-duration: 500ms;
  258. }
  259. .grid-gallery-caption[data-grid-gallery-type="icons-nitrogen-top"]:hover figcaption,
  260. .grid-gallery-caption[data-grid-gallery-type="icons-nitrogen-top"]:active figcaption {
  261. opacity: 1.0;
  262. -webkit-transform: translateY(-100%);
  263. -ms-transform: translateY(-100%);
  264. -o-transform: translateY(-100%);
  265. transform: translateY(-100%);
  266. }
  267. .grid-gallery-caption[data-grid-gallery-type="icons-nitrogen-top"]:hover .caption-with-icons-nitrogen-top,
  268. .grid-gallery-caption[data-grid-gallery-type="icons-nitrogen-top"]:active .caption-with-icons-nitrogen-top {
  269. opacity: 0.0;
  270. }
  271. .grid-gallery-caption[data-grid-gallery-type="quarter-appear"] figcaption {
  272. bottom: 0;
  273. left: 0;
  274. opacity: 0;
  275. }
  276. .grid-gallery-caption[data-grid-gallery-type="quarter-appear"]:hover figcaption,
  277. .grid-gallery-caption[data-grid-gallery-type="quarter-appear"].hovered figcaption,
  278. .grid-gallery-caption[data-grid-gallery-type="quarter-appear"]:active figcaption {
  279. opacity: 1;
  280. }
  281. .grid-gallery-caption[data-grid-gallery-type="quarter-slide-up"] figcaption {
  282. bottom: 0;
  283. left: 0;
  284. opacity: 0;
  285. -webkit-transform: translateY(100%);
  286. -ms-transform: translateY(100%);
  287. -o-transform: translateY(100%);
  288. transform: translateY(100%);
  289. }
  290. .grid-gallery-caption[data-grid-gallery-type="quarter-slide-up"]:hover figcaption,
  291. .grid-gallery-caption[data-grid-gallery-type="quarter-slide-up"].hovered figcaption,
  292. .grid-gallery-caption[data-grid-gallery-type="quarter-slide-up"]:active figcaption {
  293. opacity: 1;
  294. -webkit-transform: translateY(0);
  295. -ms-transform: translateY(0);
  296. -o-transform: translateY(0);
  297. transform: translateY(0);
  298. }
  299. .grid-gallery-caption[data-grid-gallery-type="sqkwoosh"] figcaption {
  300. top: 0;
  301. left: 0;
  302. width: 100%;
  303. height: 100%;
  304. -webkit-transition: none;
  305. -o-transition: none;
  306. transition: none;
  307. z-index: 0;
  308. }
  309. .grid-gallery-caption[data-grid-gallery-type="sqkwoosh"] img {
  310. position: relative;
  311. z-index: 1;
  312. -webkit-transition-delay: 0.25s;
  313. -o-transition-delay: 0.25s;
  314. transition-delay: 0.25s;
  315. }
  316. .grid-gallery-caption[data-grid-gallery-type="sqkwoosh"] .grid-gallery-figcaption-wrap {
  317. position: absolute;
  318. bottom: 1rem;
  319. opacity: 0;
  320. -webkit-transition: opacity 0.25s linear 0s;
  321. -o-transition: opacity 0.25s linear 0s;
  322. transition: opacity 0.25s linear 0s;
  323. }
  324. .grid-gallery-caption[data-grid-gallery-type="sqkwoosh"]:hover .grid-gallery-figcaption-wrap,
  325. .grid-gallery-caption[data-grid-gallery-type="sqkwoosh"].hovered .grid-gallery-figcaption-wrap,
  326. .grid-gallery-caption[data-grid-gallery-type="sqkwoosh"]:active .grid-gallery-figcaption-wrap {
  327. opacity: 1;
  328. -webkit-transition-delay: 0.25s;
  329. -o-transition-delay: 0.25s;
  330. transition-delay: 0.25s;
  331. }
  332. .grid-gallery-caption[data-grid-gallery-type="sqkwoosh"]:hover img,
  333. .grid-gallery-caption[data-grid-gallery-type="sqkwoosh"].hovered img,
  334. .grid-gallery-caption[data-grid-gallery-type="sqkwoosh"]:active img {
  335. -webkit-transform: scale(0.5) translateY(-80px);
  336. -ms-transform: scale(0.5) translateY(-80px);
  337. -o-transform: scale(0.5) translateY(-80px);
  338. transform: scale(0.5) translateY(-80px);
  339. -webkit-transition-delay: 0;
  340. -o-transition-delay: 0;
  341. transition-delay: 0;
  342. }
  343. .grid-gallery-caption[data-grid-gallery-type="quarter-slide-side"] figcaption {
  344. left: 0;
  345. bottom: 0;
  346. opacity: 0;
  347. -webkit-transform: translateX(100%);
  348. -ms-transform: translateX(100%);
  349. -o-transform: translateX(100%);
  350. transform: translateX(100%);
  351. }
  352. .grid-gallery-caption[data-grid-gallery-type="quarter-slide-side"]:hover figcaption,
  353. .grid-gallery-caption[data-grid-gallery-type="quarter-slide-side"].hovered figcaption,
  354. .grid-gallery-caption[data-grid-gallery-type="quarter-slide-side"]:active figcaption {
  355. opacity: 1;
  356. -webkit-transform: translateX(0);
  357. -ms-transform: translateX(0);
  358. -o-transform: translateX(0);
  359. transform: translateX(0);
  360. }
  361. .grid-gallery-caption[data-grid-gallery-type="cover-fade"] figcaption {
  362. top: 0;
  363. left: 0;
  364. height: 100%;
  365. opacity: 0;
  366. }
  367. .grid-gallery-caption[data-grid-gallery-type="cover-fade"]:hover figcaption,
  368. .grid-gallery-caption[data-grid-gallery-type="cover-fade"].hovered figcaption,
  369. .grid-gallery-caption[data-grid-gallery-type="cover-fade"]:active figcaption {
  370. opacity: 1;
  371. }
  372. .grid-gallery-caption[data-grid-gallery-type="quarter-fall-in"] figcaption {
  373. top: 0;
  374. left: 0;
  375. -webkit-transform: translateX(100%) rotate(20deg);
  376. -ms-transform: translateX(100%) rotate(20deg);
  377. -o-transform: translateX(100%) rotate(20deg);
  378. transform: translateX(100%) rotate(20deg);
  379. opacity: 0;
  380. }
  381. .grid-gallery-caption[data-grid-gallery-type="quarter-fall-in"]:hover figcaption,
  382. .grid-gallery-caption[data-grid-gallery-type="quarter-fall-in"].hovered figcaption,
  383. .grid-gallery-caption[data-grid-gallery-type="quarter-fall-in"]:active figcaption {
  384. -webkit-transform: translateX(0) rotate(0deg);
  385. -ms-transform: translateX(0) rotate(0deg);
  386. -o-transform: translateX(0) rotate(0deg);
  387. transform: translateX(0) rotate(0deg);
  388. opacity: 1;
  389. }
  390. .grid-gallery-caption[data-grid-gallery-type="quarter-two-step"] figcaption {
  391. top: 0;
  392. left: 0;
  393. -webkit-transform: translateX(-100%);
  394. -ms-transform: translateX(-100%);
  395. -o-transform: translateX(-100%);
  396. transform: translateX(-100%);
  397. opacity: 0;
  398. z-index: 2;
  399. }
  400. .grid-gallery-caption[data-grid-gallery-type="quarter-two-step"] .grid-gallery-figcaption-wrap {
  401. -webkit-transition: 500ms 250ms;
  402. -o-transition: 500ms 250ms;
  403. transition: 500ms 250ms;
  404. -webkit-transform: translateX(200%);
  405. -ms-transform: translateX(200%);
  406. -o-transform: translateX(200%);
  407. transform: translateX(200%);
  408. }
  409. .grid-gallery-caption[data-grid-gallery-type="quarter-two-step"]:hover figcaption,
  410. .grid-gallery-caption[data-grid-gallery-type="quarter-two-step"].hovered figcaption,
  411. .grid-gallery-caption[data-grid-gallery-type="quarter-two-step"]:active figcaption {
  412. -webkit-transform: translateX(0);
  413. -ms-transform: translateX(0);
  414. -o-transform: translateX(0);
  415. transform: translateX(0);
  416. opacity: 1;
  417. }
  418. .grid-gallery-caption[data-grid-gallery-type="quarter-two-step"]:hover .grid-gallery-figcaption-wrap,
  419. .grid-gallery-caption[data-grid-gallery-type="quarter-two-step"].hovered figcaption,
  420. .grid-gallery-caption[data-grid-gallery-type="quarter-two-step"]:active .grid-gallery-figcaption-wrap {
  421. -webkit-transform: translateX(0);
  422. -ms-transform: translateX(0);
  423. -o-transform: translateX(0);
  424. transform: translateX(0);
  425. }
  426. .grid-gallery-caption[data-grid-gallery-type="cover-push-right"] figcaption {
  427. top: 0;
  428. left: 0;
  429. height: 100%;
  430. -webkit-transform: translateX(-100%);
  431. -ms-transform: translateX(-100%);
  432. -o-transform: translateX(-100%);
  433. transform: translateX(-100%);
  434. opacity: 0;
  435. }
  436. .grid-gallery-caption[data-grid-gallery-type="cover-push-right"] img {
  437. -webkit-transition: 500ms;
  438. -o-transition: 500ms;
  439. transition: 500ms;
  440. -webkit-transform: translateX(0);
  441. -ms-transform: translateX(0);
  442. -o-transform: translateX(0);
  443. transform: translateX(0);
  444. }
  445. .grid-gallery-caption[data-grid-gallery-type="cover-push-right"]:hover figcaption,
  446. .grid-gallery-caption[data-grid-gallery-type="cover-push-right"].hovered figcaption,
  447. .grid-gallery-caption[data-grid-gallery-type="cover-push-right"]:active figcaption {
  448. -webkit-transform: translateX(0);
  449. -ms-transform: translateX(0);
  450. -o-transform: translateX(0);
  451. transform: translateX(0);
  452. opacity: 1;
  453. }
  454. .grid-gallery-caption[data-grid-gallery-type="cover-push-right"]:hover img,
  455. .grid-gallery-caption[data-grid-gallery-type="cover-push-right"].hovered img,
  456. .grid-gallery-caption[data-grid-gallery-type="cover-push-right"]:active img {
  457. -webkit-transform: translateX(100%);
  458. -ms-transform: translateX(100%);
  459. -o-transform: translateX(100%);
  460. transform: translateX(100%);
  461. }
  462. .grid-gallery-caption[data-grid-gallery-type="cover-slide-top"] figcaption {
  463. top: 0;
  464. left: 0;
  465. height: 100%;
  466. -webkit-transform: translateY(-100%);
  467. -ms-transform: translateY(-100%);
  468. -o-transform: translateY(-100%);
  469. transform: translateY(-100%);
  470. opacity: 0;
  471. }
  472. .grid-gallery-caption[data-grid-gallery-type="cover-slide-top"] img {
  473. -webkit-transition: 500ms;
  474. -o-transition: 500ms;
  475. transition: 500ms;
  476. }
  477. .grid-gallery-caption[data-grid-gallery-type="cover-slide-top"]:hover figcaption,
  478. .grid-gallery-caption[data-grid-gallery-type="cover-slide-top"].hovered figcaption,
  479. .grid-gallery-caption[data-grid-gallery-type="cover-slide-top"]:active figcaption {
  480. -webkit-transform: translateY(0);
  481. -ms-transform: translateY(0);
  482. -o-transform: translateY(0);
  483. transform: translateY(0);
  484. opacity: 1;
  485. }
  486. .grid-gallery-caption[data-grid-gallery-type="quarter-zoom"] figcaption {
  487. top: 0;
  488. left: 0;
  489. -webkit-transform: scale(2);
  490. -ms-transform: scale(2);
  491. -o-transform: scale(2);
  492. transform: scale(2);
  493. text-align: center;
  494. opacity: 0;
  495. }
  496. .grid-gallery-caption[data-grid-gallery-type="quarter-zoom"] img {
  497. -webkit-transition: 500ms;
  498. -o-transition: 500ms;
  499. transition: 500ms;
  500. }
  501. .grid-gallery-caption[data-grid-gallery-type="quarter-zoom"]:hover figcaption,
  502. .grid-gallery-caption[data-grid-gallery-type="quarter-zoom"].hovered figcaption,
  503. .grid-gallery-caption[data-grid-gallery-type="quarter-zoom"]:active figcaption {
  504. -webkit-transform: scale(1);
  505. -ms-transform: scale(1);
  506. -o-transform: scale(1);
  507. transform: scale(1);
  508. opacity: 1;
  509. }
  510. .grid-gallery-caption[data-grid-gallery-type="quarter-zoom"]:hover img,
  511. .grid-gallery-caption[data-grid-gallery-type="quarter-zoom"].hovered img,
  512. .grid-gallery-caption[data-grid-gallery-type="quarter-zoom"]:active img {
  513. -webkit-transform: scale(1.1);
  514. -ms-transform: scale(1.1);
  515. -o-transform: scale(1.1);
  516. transform: scale(1.1);
  517. }
  518. .grid-gallery-caption[data-grid-gallery-type="revolving-door-left"] {
  519. /*overflow: visible;*/
  520. }
  521. .grid-gallery-caption[data-grid-gallery-type="revolving-door-left"] figcaption {
  522. top: 0;
  523. left: 0;
  524. width: 100%;
  525. height: 100%;
  526. -webkit-transform: perspective(1300px) rotateY(180deg);
  527. -ms-transform: perspective(1300px) rotateY(180deg);
  528. -o-transform: perspective(1300px) rotateY(180deg);
  529. transform: perspective(1300px) rotateY(180deg);
  530. -webkit-backface-visibility: hidden;
  531. -ms-backface-visibility: hidden;
  532. -o-backface-visibility: hidden;
  533. backface-visibility: hidden;
  534. }
  535. .grid-gallery-caption[data-grid-gallery-type="revolving-door-left"] img {
  536. -webkit-transform: perspective(1300px);
  537. -ms-transform: perspective(1300px);
  538. -o-transform: perspective(1300px);
  539. transform: perspective(1300px);
  540. -webkit-transition: 500ms;
  541. -o-transition: 500ms;
  542. transition: 500ms;
  543. }
  544. .grid-gallery-caption[data-grid-gallery-type="revolving-door-left"]:hover figcaption,
  545. .grid-gallery-caption[data-grid-gallery-type="revolving-door-left"].hovered figcaption,
  546. .grid-gallery-caption[data-grid-gallery-type="revolving-door-left"]:active figcaption {
  547. -webkit-transform: perspective(1300px) rotateY(0deg);
  548. -ms-transform: perspective(1300px) rotateY(0deg);
  549. -o-transform: perspective(1300px) rotateY(0deg);
  550. transform: perspective(1300px) rotateY(0deg);
  551. }
  552. .grid-gallery-caption[data-grid-gallery-type="revolving-door-left"]:hover img,
  553. .grid-gallery-caption[data-grid-gallery-type="revolving-door-left"].hovered img,
  554. .grid-gallery-caption[data-grid-gallery-type="revolving-door-left"]:active img {
  555. -webkit-transform: perspective(1300px) rotateY(-180deg);
  556. -ms-transform: perspective(1300px) rotateY(-180deg);
  557. -o-transform: perspective(1300px) rotateY(-180deg);
  558. transform: perspective(1300px) rotateY(-180deg);
  559. }
  560. .grid-gallery-caption[data-grid-gallery-type="revolving-door-right"] {
  561. /*overflow: visible;*/
  562. }
  563. .grid-gallery-caption[data-grid-gallery-type="revolving-door-right"] figcaption {
  564. top: 0;
  565. left: 0;
  566. width: 100%;
  567. height: 100%;
  568. -webkit-transform: perspective(1300px) rotateY(180deg);
  569. -ms-transform: perspective(1300px) rotateY(180deg);
  570. -o-transform: perspective(1300px) rotateY(180deg);
  571. transform: perspective(1300px) rotateY(180deg);
  572. -webkit-backface-visibility: hidden;
  573. -ms-backface-visibility: hidden;
  574. -o-backface-visibility: hidden;
  575. backface-visibility: hidden;
  576. }
  577. .grid-gallery-caption[data-grid-gallery-type="revolving-door-right"] img {
  578. -webkit-transform: perspective(1300px);
  579. -ms-transform: perspective(1300px);
  580. -o-transform: perspective(1300px);
  581. transform: perspective(1300px);
  582. -webkit-transition: 500ms;
  583. -o-transition: 500ms;
  584. transition: 500ms;
  585. }
  586. .grid-gallery-caption[data-grid-gallery-type="revolving-door-right"]:hover figcaption,
  587. .grid-gallery-caption[data-grid-gallery-type="revolving-door-right"].hovered figcaption,
  588. .grid-gallery-caption[data-grid-gallery-type="revolving-door-right"]:active figcaption {
  589. -webkit-transform: perspective(1300px) rotateY(360deg);
  590. -ms-transform: perspective(1300px) rotateY(360deg);
  591. -o-transform: perspective(1300px) rotateY(360deg);
  592. transform: perspective(1300px) rotateY(360deg);
  593. }
  594. .grid-gallery-caption[data-grid-gallery-type="revolving-door-right"]:hover img,
  595. .grid-gallery-caption[data-grid-gallery-type="revolving-door-right"].hovered img,
  596. .grid-gallery-caption[data-grid-gallery-type="revolving-door-right"]:active img {
  597. -webkit-transform: perspective(1300px) rotateY(180deg);
  598. -ms-transform: perspective(1300px) rotateY(180deg);
  599. -o-transform: perspective(1300px) rotateY(180deg);
  600. transform: perspective(1300px) rotateY(180deg);
  601. }
  602. .grid-gallery-caption[data-grid-gallery-type="revolving-door-top"] {
  603. overflow: hidden;
  604. }
  605. .grid-gallery-caption[data-grid-gallery-type="revolving-door-top"] figcaption {
  606. top: 0;
  607. left: 0;
  608. width: 100%;
  609. height: 100%;
  610. -webkit-transform: perspective(1300px) rotateX(180deg);
  611. -ms-transform: perspective(1300px) rotateX(180deg);
  612. -o-transform: perspective(1300px) rotateX(180deg);
  613. transform: perspective(1300px) rotateX(180deg);
  614. -webkit-backface-visibility: hidden;
  615. -ms-backface-visibility: hidden;
  616. -o-backface-visibility: hidden;
  617. backface-visibility: hidden;
  618. }
  619. .grid-gallery-caption[data-grid-gallery-type="revolving-door-top"] img {
  620. -webkit-transform: perspective(1300px);
  621. -ms-transform: perspective(1300px);
  622. -o-transform: perspective(1300px);
  623. transform: perspective(1300px);
  624. -webkit-transition: 500ms;
  625. -o-transition: 500ms;
  626. transition: 500ms;
  627. }
  628. .grid-gallery-caption[data-grid-gallery-type="revolving-door-top"]:hover figcaption,
  629. .grid-gallery-caption[data-grid-gallery-type="revolving-door-top"].hovered figcaption,
  630. .grid-gallery-caption[data-grid-gallery-type="revolving-door-top"]:active figcaption {
  631. -webkit-transform: perspective(1300px) rotateX(360deg);
  632. -ms-transform: perspective(1300px) rotateX(360deg);
  633. -o-transform: perspective(1300px) rotateX(360deg);
  634. transform: perspective(1300px) rotateX(360deg);
  635. }
  636. .grid-gallery-caption[data-grid-gallery-type="revolving-door-top"]:hover img,
  637. .grid-gallery-caption[data-grid-gallery-type="revolving-door-top"].hovered img,
  638. .grid-gallery-caption[data-grid-gallery-type="revolving-door-top"]:active img {
  639. -webkit-transform: perspective(1300px) rotateX(180deg);
  640. -ms-transform: perspective(1300px) rotateX(180deg);
  641. -o-transform: perspective(1300px) rotateX(180deg);
  642. transform: perspective(1300px) rotateX(180deg);
  643. }
  644. .grid-gallery-caption[data-grid-gallery-type="revolving-door-bottom"] {
  645. overflow: hidden;
  646. }
  647. .grid-gallery-caption[data-grid-gallery-type="revolving-door-bottom"] figcaption {
  648. top: 0;
  649. left: 0;
  650. width: 100%;
  651. height: 100%;
  652. -webkit-transform: perspective(1300px) rotateX(180deg);
  653. -ms-transform: perspective(1300px) rotateX(180deg);
  654. -o-transform: perspective(1300px) rotateX(180deg);
  655. transform: perspective(1300px) rotateX(180deg);
  656. -webkit-backface-visibility: hidden;
  657. -ms-backface-visibility: hidden;
  658. -o-backface-visibility: hidden;
  659. backface-visibility: hidden;
  660. }
  661. .grid-gallery-caption[data-grid-gallery-type="revolving-door-bottom"] img {
  662. -webkit-transform: perspective(1300px);
  663. -ms-transform: perspective(1300px);
  664. -o-transform: perspective(1300px);
  665. transform: perspective(1300px);
  666. -webkit-transition: 500ms;
  667. -o-transition: 500ms;
  668. transition: 500ms;
  669. }
  670. .grid-gallery-caption[data-grid-gallery-type="revolving-door-bottom"]:hover figcaption,
  671. .grid-gallery-caption[data-grid-gallery-type="revolving-door-bottom"].hovered figcaption,
  672. .grid-gallery-caption[data-grid-gallery-type="revolving-door-bottom"]:active figcaption {
  673. -webkit-transform: perspective(1300px) rotateX(0deg);
  674. -ms-transform: perspective(1300px) rotateX(0deg);
  675. -o-transform: perspective(1300px) rotateX(0deg);
  676. transform: perspective(1300px) rotateX(0deg);
  677. }
  678. .grid-gallery-caption[data-grid-gallery-type="revolving-door-bottom"]:hover img,
  679. .grid-gallery-caption[data-grid-gallery-type="revolving-door-bottom"].hovered img,
  680. .grid-gallery-caption[data-grid-gallery-type="revolving-door-bottom"]:active img {
  681. -webkit-transform: perspective(1300px) rotateX(-180deg);
  682. -ms-transform: perspective(1300px) rotateX(-180deg);
  683. -o-transform: perspective(1300px) rotateX(-180deg);
  684. transform: perspective(1300px) rotateX(-180deg);
  685. }
  686. .grid-gallery-caption[data-grid-gallery-type="offset"] {
  687. overflow: visible;
  688. }
  689. .grid-gallery-caption[data-grid-gallery-type="offset"] figcaption {
  690. top: 0;
  691. left: 0;
  692. text-align: center;
  693. opacity: 0;
  694. height: 100%;
  695. }
  696. .grid-gallery-caption[data-grid-gallery-type="offset"] img {
  697. -webkit-transition: 500ms;
  698. -o-transition: 500ms;
  699. transition: 500ms;
  700. }
  701. .grid-gallery-caption[data-grid-gallery-type="offset"]:hover figcaption,
  702. .grid-gallery-caption[data-grid-gallery-type="offset"].hovered figcaption,
  703. .grid-gallery-caption[data-grid-gallery-type="offset"]:active figcaption {
  704. -webkit-transform: translate(15px, 15px);
  705. -ms-transform: translate(15px, 15px);
  706. -o-transform: translate(15px, 15px);
  707. transform: translate(15px, 15px);
  708. opacity: 1;
  709. z-index: 100;
  710. overflow: hidden;
  711. }
  712. .grid-gallery-caption[data-grid-gallery-type="guillotine-reverse"] {
  713. /*overflow: visible;*/
  714. }
  715. .grid-gallery-caption[data-grid-gallery-type="guillotine-reverse"] figcaption {
  716. top: 0;
  717. left: 0;
  718. text-align: center;
  719. height: 100%;
  720. }
  721. .grid-gallery-caption[data-grid-gallery-type="guillotine-reverse"] img {
  722. display: block;
  723. position: relative;
  724. z-index: 10;
  725. -webkit-transition: 500ms;
  726. -o-transition: 500ms;
  727. transition: 500ms;
  728. }
  729. .grid-gallery-caption[data-grid-gallery-type="guillotine-reverse"]:hover img,
  730. .grid-gallery-caption[data-grid-gallery-type="guillotine-reverse"].hovered img,
  731. .grid-gallery-caption[data-grid-gallery-type="guillotine-reverse"]:active img {
  732. -webkit-transform: translateY(-100%);
  733. -ms-transform: translateY(-100%);
  734. -o-transform: translateY(-100%);
  735. transform: translateY(-100%);
  736. }
  737. .grid-gallery-caption[data-grid-gallery-type="half-slide"] figcaption {
  738. top: 0;
  739. left: 0;
  740. text-align: center;
  741. height: 50%;
  742. -webkit-transform: translateY(200%);
  743. -ms-transform: translateY(200%);
  744. -o-transform: translateY(200%);
  745. transform: translateY(200%);
  746. }
  747. .grid-gallery-caption[data-grid-gallery-type="half-slide"] img {
  748. display: block;
  749. position: relative;
  750. -webkit-transition: 500ms;
  751. -o-transition: 500ms;
  752. transition: 500ms;
  753. }
  754. .grid-gallery-caption[data-grid-gallery-type="half-slide"]:hover img,
  755. .grid-gallery-caption[data-grid-gallery-type="half-slide"].hovered img,
  756. .grid-gallery-caption[data-grid-gallery-type="half-slide"]:active img {
  757. -webkit-transform: translateY(-50%);
  758. -ms-transform: translateY(-50%);
  759. -o-transform: translateY(-50%);
  760. transform: translateY(-50%);
  761. }
  762. .grid-gallery-caption[data-grid-gallery-type="half-slide"]:hover figcaption,
  763. .grid-gallery-caption[data-grid-gallery-type="half-slide"].hovered figcaption,
  764. .grid-gallery-caption[data-grid-gallery-type="half-slide"]:active figcaption {
  765. -webkit-transform: translateY(100%);
  766. -ms-transform: translateY(100%);
  767. -o-transform: translateY(100%);
  768. transform: translateY(100%);
  769. }
  770. .grid-gallery-caption[data-grid-gallery-type="tunnel"] figcaption {
  771. top: 0;
  772. left: 0;
  773. text-align: center;
  774. height: 100%;
  775. opacity: 0;
  776. -webkit-transform: scale(0.7);
  777. -ms-transform: scale(0.7);
  778. -o-transform: scale(0.7);
  779. transform: scale(0.7);
  780. }
  781. .grid-gallery-caption[data-grid-gallery-type="tunnel"] img {
  782. display: block;
  783. position: relative;
  784. z-index: 10;
  785. -webkit-transition: 500ms;
  786. -o-transition: 500ms;
  787. transition: 500ms;
  788. }
  789. .grid-gallery-caption[data-grid-gallery-type="tunnel"]:hover img,
  790. .grid-gallery-caption[data-grid-gallery-type="tunnel"].hovered img,
  791. .grid-gallery-caption[data-grid-gallery-type="tunnel"]:active img {
  792. -webkit-transform: scale(0.4);
  793. -ms-transform: scale(0.4);
  794. -o-transform: scale(0.4);
  795. transform: scale(0.4);
  796. }
  797. .grid-gallery-caption[data-grid-gallery-type="tunnel"]:hover figcaption,
  798. .grid-gallery-caption[data-grid-gallery-type="tunnel"].hovered figcaption,
  799. .grid-gallery-caption[data-grid-gallery-type="tunnel"]:active figcaption {
  800. opacity: 1;
  801. -webkit-transform: scale(1);
  802. -ms-transform: scale(1);
  803. -o-transform: scale(1);
  804. transform: scale(1);
  805. }
  806. .grid-gallery-caption[data-grid-gallery-type="phophorus-rotate"] figcaption {
  807. top: 0;
  808. left: 0;
  809. height: 100%;
  810. text-align: center;
  811. -webkit-transition-duration: 300ms;
  812. -o-transition-duration: 300ms;
  813. -ms-transition-duration: 300ms;
  814. transition-duration: 300ms;
  815. -webkit-transform: rotateX(90deg);
  816. -ms-transform: rotateX(90deg);
  817. -o-transform: rotateX(90deg);
  818. transform: rotateX(90deg);
  819. }
  820. .grid-gallery-caption[data-grid-gallery-type="phophorus-rotate"] .grid-gallery-figcaption-wrap {
  821. position: absolute;
  822. top: 40%;
  823. left: 0;
  824. width: 100%;
  825. font-family: 'Montserrat', sans-serif;
  826. font-weight: bold;
  827. }
  828. .grid-gallery-caption[data-grid-gallery-type="phophorus-rotate"]:hover figcaption,
  829. .grid-gallery-caption[data-grid-gallery-type="phophorus-rotate"].hovered figcaption,
  830. .grid-gallery-caption[data-grid-gallery-type="phophorus-rotate"]:active figcaption {
  831. -webkit-transform: perspective(1300px) rotateX(0deg);
  832. -ms-transform: perspective(1300px) rotateX(0deg);
  833. -o-transform: perspective(1300px) rotateX(0deg);
  834. transform: perspective(1300px) rotateX(0deg);
  835. }
  836. .grid-gallery-caption[data-grid-gallery-type="phophorus-offset"] figcaption {
  837. top: 0;
  838. left: -100%;
  839. height: 100%;
  840. text-align: center;
  841. -webkit-transition-duration: 300ms;
  842. -o-transition-duration: 300ms;
  843. -ms-transition-duration: 300ms;
  844. transition-duration: 300ms;
  845. }
  846. .grid-gallery-caption[data-grid-gallery-type="phophorus-offset"] .grid-gallery-figcaption-wrap {
  847. position: absolute;
  848. top: 40%;
  849. left: 0;
  850. width: 100%;
  851. font-family: 'Montserrat', sans-serif;
  852. font-weight: bold;
  853. }
  854. .grid-gallery-caption[data-grid-gallery-type="phophorus-offset"]:hover figcaption,
  855. .grid-gallery-caption[data-grid-gallery-type="phophorus-offset"].hovered figcaption,
  856. .grid-gallery-caption[data-grid-gallery-type="phophorus-offset"]:active figcaption {
  857. box-shadow: inset 0 0 10px 5px black;
  858. -webkit-transform: translateX(100%);
  859. -ms-transform: translateX(100%);
  860. -o-transform: translateX(100%);
  861. transform: translateX(100%);
  862. }
  863. .grid-gallery-caption[data-grid-gallery-type="phophorus-scale"] figcaption {
  864. top: 0;
  865. left: 0;
  866. height: 100%;
  867. text-align: center;
  868. opacity: 0.0;
  869. -webkit-transform: scale(2.4);
  870. -ms-transform: scale(2.4);
  871. -o-transform: scale(2.4);
  872. transform: scale(2.4);
  873. -webkit-transition-duration: 300ms;
  874. -o-transition-duration: 300ms;
  875. -ms-transition-duration: 300ms;
  876. transition-duration: 300ms;
  877. }
  878. .grid-gallery-caption[data-grid-gallery-type="phophorus-scale"] .grid-gallery-figcaption-wrap {
  879. position: absolute;
  880. top: 40%;
  881. left: 0;
  882. width: 100%;
  883. font-family: 'Montserrat', sans-serif;
  884. font-weight: bold;
  885. }
  886. .grid-gallery-caption[data-grid-gallery-type="phophorus-scale"]:hover figcaption,
  887. .grid-gallery-caption[data-grid-gallery-type="phophorus-scale"].hovered figcaption,
  888. .grid-gallery-caption[data-grid-gallery-type="phophorus-scale"]:active figcaption {
  889. opacity: 1.0;
  890. -webkit-transform: scale(1.0);
  891. -ms-transform: scale(1.0);
  892. -o-transform: scale(1.0);
  893. transform: scale(1.0);
  894. }
  895. .grid-gallery-caption[data-grid-gallery-type="phophorus-scale"]:hover img,
  896. .grid-gallery-caption[data-grid-gallery-type="phophorus-scale"].hovered img,
  897. .grid-gallery-caption[data-grid-gallery-type="phophorus-scale"]:active img {
  898. -webkit-transform: scale(0.4);
  899. -ms-transform: scale(0.4);
  900. -o-transform: scale(0.4);
  901. transform: scale(0.4);
  902. }
  903. .grid-gallery-caption[data-grid-gallery-type="fixed-post"]:hover img,
  904. .grid-gallery-caption[data-grid-gallery-type="fixed-post"].hovered img {
  905. -webkit-transform: rotate(4deg);
  906. -ms-transform: rotate(4deg);
  907. -o-transform: rotate(4deg);
  908. transform: rotate(4deg);
  909. }
  910. .grid-gallery-caption[data-grid-gallery-type="fixed-post"]:hover .read-more:hover,
  911. .grid-gallery-caption[data-grid-gallery-type="fixed-post"].hovered .read-more:hover {
  912. color: #444444 !important;
  913. }
  914. .grid-gallery-caption[data-grid-gallery-type="post-bottom"] figcaption {
  915. top: 0;
  916. left: 0;
  917. height: 100%;
  918. -webkit-transform: perspective(1300px) skewX(180deg);
  919. -ms-transform: perspective(1300px) skewX(180deg);
  920. -o-transform: perspective(1300px) skewX(180deg);
  921. transform: perspective(1300px) skewX(180deg);
  922. opacity: 0;
  923. }
  924. .grid-gallery-caption[data-grid-gallery-type="post-bottom"]:hover figcaption,
  925. .grid-gallery-caption[data-grid-gallery-type="post-bottom"].hovered figcaption,
  926. .grid-gallery-caption[data-grid-gallery-type="post-bottom"]:active figcaption {
  927. -webkit-transform: perspective(1300px) skewX(0deg);
  928. -ms-transform: perspective(1300px) skewX(0deg);
  929. -o-transform: perspective(1300px) skewX(0deg);
  930. transform: perspective(1300px) skewX(0deg);
  931. -webkit-transition-duration: 1.0s;
  932. -o-transition-duration: 1.0s;
  933. -ms-transition-duration: 1.0s;
  934. transition-duration: 1.0s;
  935. opacity: 1.0;
  936. }
  937. .grid-gallery-caption[data-grid-gallery-type="post-bottom"] .post-feed-crop .post-feed-title{
  938. -webkit-transform: translateX(-200%);
  939. -ms-transform: translateX(-200%);
  940. -o-transform: translateX(-200%);
  941. transform: translateX(-200%);
  942. opacity: 0;
  943. }
  944. .grid-gallery-caption[data-grid-gallery-type="post-bottom"]:hover .post-feed-crop .post-feed-title,
  945. .grid-gallery-caption[data-grid-gallery-type="post-bottom"].hovered .post-feed-crop .post-feed-title{
  946. -webkit-transform: translateX(0) skewX(-20deg);
  947. -ms-transform: translateX(0) skewX(-20deg);
  948. -o-transform: translateX(0) skewX(-20deg);
  949. transform: translateX(0) skewX(-20deg);
  950. -webkit-transition-duration: 2.0s;
  951. -o-transition-duration: 2.0s;
  952. -ms-transition-duration: 2.0s;
  953. transition-duration: 2.0s;
  954. opacity: 1.0;
  955. }
  956. .grid-gallery-caption[data-grid-gallery-type="post-fade"] figcaption {
  957. top: 0;
  958. left: 0;
  959. height: 100%;
  960. -webkit-transform: translateY(100%);
  961. -ms-transform: translateY(100%);
  962. -o-transform: translateY(100%);
  963. transform: translateY(100%);
  964. opacity: 0;
  965. }
  966. .grid-gallery-caption[data-grid-gallery-type="post-fade"] img {
  967. -webkit-transition: 500ms;
  968. -o-transition: 500ms;
  969. transition: 500ms;
  970. }
  971. .grid-gallery-caption[data-grid-gallery-type="post-fade"]:hover figcaption,
  972. .grid-gallery-caption[data-grid-gallery-type="post-fade"].hovered figcaption,
  973. .grid-gallery-caption[data-grid-gallery-type="post-fade"]:active figcaption {
  974. -webkit-transform: translateY(0);
  975. -ms-transform: translateY(0);
  976. -o-transform: translateY(0);
  977. transform: translateY(0);
  978. opacity: 1;
  979. }
  980. .grid-gallery-caption[data-grid-gallery-type="post-fade"] .post-feed-crop .post-feed-title{
  981. -webkit-transform: scale(0);
  982. -ms-transform: scale(0);
  983. -o-transform: scale(0);
  984. transform: scale(0);
  985. opacity: 0;
  986. }
  987. .grid-gallery-caption[data-grid-gallery-type="post-fade"]:hover .post-feed-crop .post-feed-title,
  988. .grid-gallery-caption[data-grid-gallery-type="post-fade"].hovered .post-feed-crop .post-feed-title{
  989. -webkit-transform: scale(1);
  990. -ms-transform: scale(1);
  991. -o-transform: scale(1);
  992. transform: scale(1);
  993. -webkit-transition-duration: 1.0s;
  994. -o-transition-duration: 1.0s;
  995. -ms-transition-duration: 1.0s;
  996. transition-duration: 1.0s;
  997. opacity: 1.0;
  998. }
  999. .grid-gallery-caption[data-grid-gallery-type="fixed-post"] .post-feed-crop .post-feed-date,
  1000. .grid-gallery-caption[data-grid-gallery-type="post-bottom"] .post-feed-crop .post-feed-date,
  1001. .grid-gallery-caption[data-grid-gallery-type="post-fade"] .post-feed-crop .post-feed-date{
  1002. -webkit-transform: translateX(100%);
  1003. -ms-transform: translateX(100%);
  1004. -o-transform: translateX(100%);
  1005. transform: translateX(100%);
  1006. opacity: 0;
  1007. }
  1008. .grid-gallery-caption[data-grid-gallery-type="fixed-post"]:hover .post-feed-crop .post-feed-date,
  1009. .grid-gallery-caption[data-grid-gallery-type="fixed-post"].hovered .post-feed-crop .post-feed-date,
  1010. .grid-gallery-caption[data-grid-gallery-type="post-bottom"]:hover .post-feed-crop .post-feed-date,
  1011. .grid-gallery-caption[data-grid-gallery-type="post-bottom"].hovered .post-feed-crop .post-feed-date,
  1012. .grid-gallery-caption[data-grid-gallery-type="post-fade"].hovered .post-feed-crop .post-feed-date,
  1013. .grid-gallery-caption[data-grid-gallery-type="post-fade"]:hover .post-feed-crop .post-feed-date{
  1014. -webkit-transform: translateX(0);
  1015. -ms-transform: translateX(0);
  1016. -o-transform: translateX(0);
  1017. transform: translateX(0);
  1018. -webkit-transition-duration: 1.0s;
  1019. -o-transition-duration: 1.0s;
  1020. -ms-transition-duration: 1.0s;
  1021. transition-duration: 1.0s;
  1022. opacity: 1.0;
  1023. }
  1024. .grid-gallery-caption[data-grid-gallery-type="fixed-post"] .post-feed-crop .post-feed-author,
  1025. .grid-gallery-caption[data-grid-gallery-type="post-bottom"] .post-feed-crop .post-feed-author,
  1026. .grid-gallery-caption[data-grid-gallery-type="post-fade"] .post-feed-crop .post-feed-author{
  1027. -webkit-transform: translateX(-100%);
  1028. -ms-transform: translateX(-100%);
  1029. -o-transform: translateX(-100%);
  1030. transform: translateX(-100%);
  1031. opacity: 0;
  1032. }
  1033. .grid-gallery-caption[data-grid-gallery-type="fixed-post"]:hover .post-feed-crop .post-feed-author,
  1034. .grid-gallery-caption[data-grid-gallery-type="fixed-post"].hovered .post-feed-crop .post-feed-author,
  1035. .grid-gallery-caption[data-grid-gallery-type="post-bottom"]:hover .post-feed-crop .post-feed-author,
  1036. .grid-gallery-caption[data-grid-gallery-type="post-bottom"].hovered .post-feed-crop .post-feed-author,
  1037. .grid-gallery-caption[data-grid-gallery-type="post-fade"]:hover .post-feed-crop .post-feed-author,
  1038. .grid-gallery-caption[data-grid-gallery-type="post-fade"].hovered .post-feed-crop .post-feed-author{
  1039. -webkit-transform: translateX(0);
  1040. -ms-transform: translateX(0);
  1041. -o-transform: translateX(0);
  1042. transform: translateX(0);
  1043. -webkit-transition-duration: 1.0s;
  1044. -o-transition-duration: 1.0s;
  1045. -ms-transition-duration: 1.0s;
  1046. transition-duration: 1.0s;
  1047. opacity: 1.0;
  1048. }
  1049. .grid-gallery-caption[data-grid-gallery-type="fixed-post"] .post-feed-crop .post-feed-content,
  1050. .grid-gallery-caption[data-grid-gallery-type="post-bottom"] .post-feed-crop .post-feed-content,
  1051. .grid-gallery-caption[data-grid-gallery-type="post-fade"] .post-feed-crop .post-feed-content {
  1052. -webkit-transform: scale(0);
  1053. -ms-transform: scale(0);
  1054. -o-transform: scale(0);
  1055. transform: scale(0);
  1056. opacity: 0;
  1057. }
  1058. .grid-gallery-caption[data-grid-gallery-type="fixed-post"]:hover .post-feed-crop .post-feed-content,
  1059. .grid-gallery-caption[data-grid-gallery-type="fixed-post"].hovered .post-feed-crop .post-feed-content,
  1060. .grid-gallery-caption[data-grid-gallery-type="post-bottom"]:hover .post-feed-crop .post-feed-content,
  1061. .grid-gallery-caption[data-grid-gallery-type="post-bottom"].hovered .post-feed-crop .post-feed-content,
  1062. .grid-gallery-caption[data-grid-gallery-type="post-fade"]:hover .post-feed-crop .post-feed-content,
  1063. .grid-gallery-caption[data-grid-gallery-type="post-fade"].hovered .post-feed-crop .post-feed-content{
  1064. -webkit-transform: scale(0.8);
  1065. -ms-transform: scale(0.8);
  1066. -o-transform: scale(0.8);
  1067. transform: scale(0.8);
  1068. it-transition-duration: 1.0s;
  1069. -o-transition-duration: 1.0s;
  1070. -ms-transition-duration: 1.0s;
  1071. transition-duration: 1.0s;
  1072. opacity: 1.0;
  1073. }
  1074. .grid-gallery-caption[data-grid-gallery-type="fixed-post"] .post-feed-crop .post-categories,
  1075. .grid-gallery-caption[data-grid-gallery-type="post-bottom"] .post-feed-crop .post-categories,
  1076. .grid-gallery-caption[data-grid-gallery-type="post-fade"] .post-feed-crop .post-categories {
  1077. -webkit-transform: scale(0);
  1078. -ms-transform: scale(0);
  1079. -o-transform: scale(0);
  1080. transform: scale(0);
  1081. opacity: 0;
  1082. }
  1083. .grid-gallery-caption[data-grid-gallery-type="fixed-post"]:hover .post-feed-crop .post-categories,
  1084. .grid-gallery-caption[data-grid-gallery-type="post-bottom"]:hover .post-feed-crop .post-categories,
  1085. .grid-gallery-caption[data-grid-gallery-type="post-fade"]:hover .post-feed-crop .post-categories,
  1086. .grid-gallery-caption[data-grid-gallery-type="fixed-post"].hovered .post-feed-crop .post-categories,
  1087. .grid-gallery-caption[data-grid-gallery-type="post-bottom"].hovered .post-feed-crop .post-categories,
  1088. .grid-gallery-caption[data-grid-gallery-type="post-fade"].hovered .post-feed-crop .post-categories {
  1089. -webkit-transform: scale(1.0);
  1090. -ms-transform: scale(1.0);
  1091. -o-transform: scale(1.0);
  1092. transform: scale(1.0);
  1093. opacity: 1.0;
  1094. }
  1095. .grid-gallery-caption[data-grid-gallery-type="expression-scale-text"] {
  1096. overflow: visible;
  1097. }
  1098. .grid-gallery-caption[data-grid-gallery-type="expression-scale-text"] figcaption {
  1099. top: 0;
  1100. left: 0;
  1101. width: 100%;
  1102. height: 100%;
  1103. opacity: 0.0;
  1104. background: rgb(38, 94, 110);
  1105. -webkit-transition: 500ms;
  1106. -o-transition: 500ms;
  1107. transition: 500ms;
  1108. }
  1109. .grid-gallery-caption[data-grid-gallery-type="expression-scale-text"] .post-feed-crop {
  1110. display: block;
  1111. font-family: 'Montserrat', sans-serif;
  1112. position: relative;
  1113. margin-top: 10%;
  1114. text-align: center;
  1115. color: #ffffff !important;
  1116. -webkit-transform: scale(0.1);
  1117. -ms-transform: scale(0.1);
  1118. -o-transform: scale(0.1);
  1119. transform: scale(0.1);
  1120. -webkit-transition: 800ms;
  1121. -o-transition: 800ms;
  1122. transition: 800ms;
  1123. }
  1124. .grid-gallery-caption[data-grid-gallery-type="expression-scale-text"]:hover figcaption,
  1125. .grid-gallery-caption[data-grid-gallery-type="expression-scale-text"].hovered figcaption,
  1126. .grid-gallery-caption[data-grid-gallery-type="expression-scale-text"]:active figcaption {
  1127. opacity: 1.0;
  1128. }
  1129. .grid-gallery-caption[data-grid-gallery-type="expression-scale-text"]:hover .post-feed-crop,
  1130. .grid-gallery-caption[data-grid-gallery-type="expression-scale-text"].hovered .post-feed-crop,
  1131. .grid-gallery-caption[data-grid-gallery-type="expression-scale-text"]:active .post-feed-crop {
  1132. -webkit-transform: scale(1.0);
  1133. -ms-transform: scale(1.0);
  1134. -o-transform: scale(1.0);
  1135. transform: scale(1.0);
  1136. }
  1137. .grid-gallery-caption[data-grid-gallery-type="sodium-top-slide"] figcaption {
  1138. top: -100%;
  1139. left: 0;
  1140. width: 100%;
  1141. height: 100%;
  1142. background: rgb(38, 94, 110);
  1143. -webkit-transition: 500ms;
  1144. -o-transition: 500ms;
  1145. transition: 500ms;
  1146. }
  1147. .grid-gallery-caption[data-grid-gallery-type="sodium-top-slide"] .grid-gallery-figcaption-wrap {
  1148. width: 100%;
  1149. position: absolute;
  1150. top: 100%;
  1151. left: 0;
  1152. font-family: 'Montserrat', sans-serif;
  1153. margin-top: 10%;
  1154. text-align: center;
  1155. color: #ffffff !important;
  1156. background: rgba(38, 94, 110, 0.63);
  1157. -webkit-transition: 800ms;
  1158. -o-transition: 800ms;
  1159. transition: 800ms;
  1160. }
  1161. .grid-gallery-caption[data-grid-gallery-type="sodium-top-slide"] .post-feed-crop {
  1162. padding: 20px;
  1163. }
  1164. .grid-gallery-caption[data-grid-gallery-type="sodium-top-slide"] .post-feed-author,
  1165. .grid-gallery-caption[data-grid-gallery-type="sodium-top-slide"] .post-feed-date,
  1166. .grid-gallery-caption[data-grid-gallery-type="sodium-top-slide"] .post-feed-content {
  1167. opacity: 0.0;
  1168. }
  1169. .grid-gallery-caption[data-grid-gallery-type="sodium-top-slide"]:hover figcaption,
  1170. .grid-gallery-caption[data-grid-gallery-type="sodium-top-slide"].hovered figcaption,
  1171. .grid-gallery-caption[data-grid-gallery-type="sodium-top-slide"]:active figcaption {
  1172. -webkit-transform: translateY(100%);
  1173. -ms-transform: translateY(100%);
  1174. -o-transform: translateY(100%);
  1175. transform: translateY(100%);
  1176. }
  1177. .grid-gallery-caption[data-grid-gallery-type="sodium-top-slide"]:hover .grid-gallery-figcaption-wrap,
  1178. .grid-gallery-caption[data-grid-gallery-type="sodium-top-slide"].hovered .grid-gallery-figcaption-wrap,
  1179. .grid-gallery-caption[data-grid-gallery-type="sodium-top-slide"]:active .grid-gallery-figcaption-wrap {
  1180. background: rgba(226, 104, 103, 1.0);
  1181. top: 0;
  1182. }
  1183. .grid-gallery-caption[data-grid-gallery-type="sodium-top-slide"]:hover .post-feed-author,
  1184. .grid-gallery-caption[data-grid-gallery-type="sodium-top-slide"]:hover .post-feed-date,
  1185. .grid-gallery-caption[data-grid-gallery-type="sodium-top-slide"]:hover .post-feed-content,
  1186. .grid-gallery-caption[data-grid-gallery-type="sodium-top-slide"].hovered .post-feed-author,
  1187. .grid-gallery-caption[data-grid-gallery-type="sodium-top-slide"].hovered .post-feed-date,
  1188. .grid-gallery-caption[data-grid-gallery-type="sodium-top-slide"].hovered .post-feed-content {
  1189. opacity: 1.0;
  1190. }
  1191. .grid-gallery-caption .post-feed-crop span.separator {
  1192. opacity: 0;
  1193. }
  1194. .grid-gallery-caption:hover .post-feed-crop span.separator {
  1195. opacity: 1.0;
  1196. }
  1197. .grid-gallery-caption[data-grid-gallery-type="elastic"] {
  1198. it-transition-duration: 800ms;
  1199. -o-transition-duration: 800ms;
  1200. -ms-transition-duration: 800ms;
  1201. transition-duration: 800ms;
  1202. }
  1203. .grid-gallery-caption[data-grid-gallery-type="elastic"]:hover,
  1204. .grid-gallery-caption[data-grid-gallery-type="elastic"].hovered {
  1205. -webkit-transform: translateX(50%);
  1206. -ms-transform: translateX(50%);
  1207. -o-transform: translateX(50%);
  1208. transform: translateX(50%);
  1209. }
  1210. .grid-gallery-caption[data-grid-gallery-type="fade"] {
  1211. opacity: 1.0;
  1212. it-transition-duration: 800ms;
  1213. -o-transition-duration: 800ms;
  1214. -ms-transition-duration: 800ms;
  1215. transition-duration: 800ms;
  1216. }
  1217. .grid-gallery-caption[data-grid-gallery-type="fade"]:hover,
  1218. .grid-gallery-caption[data-grid-gallery-type="fade"].hovered {
  1219. opacity: 0.4;
  1220. }
  1221. .grid-gallery-caption .box {
  1222. position: relative;
  1223. width: 150px;
  1224. height: 150px;
  1225. line-height: 150px;
  1226. overflow: hidden;
  1227. }
  1228. .grid-gallery-caption .box__center,
  1229. .grid-gallery-caption .box__right,
  1230. .grid-gallery-caption .box__left,
  1231. .grid-gallery-caption .box__top,
  1232. .grid-gallery-caption .box__bottom,
  1233. .grid-gallery-caption .box img {
  1234. position: absolute;
  1235. width: inherit;
  1236. height: inherit;
  1237. text-align: center;
  1238. line-height: inherit;
  1239. left: 0;
  1240. top: 0;
  1241. transition: transform .4s ease;
  1242. transform: translateZ(0);
  1243. }
  1244. .grid-gallery-caption .box img {
  1245. z-index: -1;
  1246. }
  1247. .grid-gallery-caption .box__center:before,
  1248. .grid-gallery-caption .box__right:before,
  1249. .grid-gallery-caption .box__left:before,
  1250. .grid-gallery-caption .box__top:before,
  1251. .grid-gallery-caption .box__bottom:before {
  1252. position: absolute;
  1253. content: '';
  1254. /*
  1255. * Calculation:
  1256. * ____a____
  1257. * /|\ |
  1258. * b | \ |
  1259. * / a \ |
  1260. * \ | / |
  1261. * \ | / |
  1262. * \|/________|
  1263. *
  1264. * a^2 = b^2+b^2
  1265. *
  1266. * solve to b:
  1267. *
  1268. * a^2 = 2b^2 | /2
  1269. * a^2 / 2 = b^2 | sqrt
  1270. * a / sqrt(2) = b
  1271. *
  1272. * Percentage:
  1273. * a = 100%
  1274. * 100 / sqrt(2) = 70.71%
  1275. * ------
  1276. */
  1277. width: 70.71%;
  1278. height: 70.71%;
  1279. transform: rotate(45deg);
  1280. }
  1281. .grid-gallery-caption .box__center:hover,
  1282. .grid-gallery-caption .box__right:hover,
  1283. .grid-gallery-caption .box__left:hover,
  1284. .grid-gallery-caption .box__top:hover,
  1285. .grid-gallery-caption .box__bottom:hover,
  1286. .grid-gallery-caption .box__center.hovered,
  1287. .grid-gallery-caption .box__right.hovered,
  1288. .grid-gallery-caption .box__left.hovered,
  1289. .grid-gallery-caption .box__top.hovered,
  1290. .grid-gallery-caption .box__bottom.hovered {
  1291. transform: translateX(0);
  1292. z-index: 1;
  1293. }
  1294. .grid-gallery-caption .box__center:hover:before,
  1295. .grid-gallery-caption .box__right:hover:before,
  1296. .grid-gallery-caption .box__left:hover:before,
  1297. .grid-gallery-caption .box__top:hover:before,
  1298. .grid-gallery-caption .box__bottom:hover:before {
  1299. width: 100%;
  1300. height: 100%;
  1301. transform: none;
  1302. }
  1303. .grid-gallery-caption .box__center {
  1304. background: orange;
  1305. z-index: -1;
  1306. }
  1307. .grid-gallery-caption .box__right {
  1308. background: blue;
  1309. transform: translateX(100%);
  1310. }
  1311. .grid-gallery-caption .box__right:before {
  1312. right: 100%;
  1313. bottom: 0;
  1314. transform-origin: 100% 100%;
  1315. }
  1316. .grid-gallery-caption .box__right:hover ~ .grid-gallery-caption .box__center,
  1317. .grid-gallery-caption .box__right.hovered ~ .grid-gallery-caption .box__center {
  1318. transform: translateX(-100%);
  1319. }
  1320. .grid-gallery-caption .box__left {
  1321. background: green;
  1322. transform: translateX(-100%);
  1323. }
  1324. .grid-gallery-caption .box__left:before {
  1325. left: 100%;
  1326. transform-origin: 0 0;
  1327. }
  1328. .grid-gallery-caption .box__left:hover ~ .grid-gallery-caption .box__center,
  1329. .grid-gallery-caption .box__left.hovered ~ .grid-gallery-caption .box__center {
  1330. transform: translateX(100%);
  1331. }
  1332. .grid-gallery-caption .box__top {
  1333. background: red;
  1334. transform: translateY(-100%);
  1335. }
  1336. .grid-gallery-caption .box__top:before {
  1337. top: 100%;
  1338. right: 0;
  1339. transform-origin: 100% 0;
  1340. }
  1341. .grid-gallery-caption .box__top:hover ~ .grid-gallery-caption .box__center,
  1342. .grid-gallery-caption .box__top.hovered ~ .grid-gallery-caption .box__center {
  1343. transform: translateY(100%);
  1344. }
  1345. .grid-gallery-caption .box__bottom {
  1346. background: yellow;
  1347. transform: translateY(100%);
  1348. }
  1349. .grid-gallery-caption .box__bottom:before {
  1350. bottom: 100%;
  1351. left: 0;
  1352. transform-origin: 0 100%;
  1353. }
  1354. .grid-gallery-caption .box__bottom:hover ~ .grid-gallery-caption .box__center,
  1355. .grid-gallery-caption .box__bottom.hovered ~ .grid-gallery-caption .box__center {
  1356. transform: translateY(-100%);
  1357. }
  1358. .grid-gallery-caption[data-grid-gallery-type="cube"] {
  1359. -webkit-perspective: 400px;
  1360. -ms-perspective: 400px;
  1361. perspective: 400px;
  1362. overflow: visible;
  1363. }
  1364. .grid-gallery-caption[data-grid-gallery-type="cube"] figcaption {
  1365. -webkit-transform: rotate3d(1, 0, 0, 90deg);
  1366. transform: rotate3d(1, 0, 0, 90deg);
  1367. transform-origin: 0% 0%;
  1368. transition: 0ms;
  1369. width: 100%;
  1370. height: 100%;
  1371. padding: 20px;
  1372. position: absolute;
  1373. top: 0;
  1374. left: 0;
  1375. pointer-events: none;
  1376. overflow: hidden;
  1377. visibility: hidden;
  1378. -webkit-perspective: 400px;
  1379. -ms-perspective: 400px;
  1380. perspective: 400px;
  1381. }
  1382. .cube-in-top {
  1383. -webkit-transform-origin: 50% 0%;
  1384. -moz-transform-origin: 50% 0%;
  1385. -ms-transform-origin: 50% 0%;
  1386. transform-origin: 50% 0%;
  1387. -webkit-animation: cube-in-top 300ms ease 0ms 1 forwards;
  1388. -moz-animation: cube-in-top 300ms ease 0ms 1 forwards;
  1389. animation: cube-in-top 300ms ease 0ms 1 forwards;
  1390. }
  1391. @-webkit-keyframes cube-in-top {
  1392. 0% {
  1393. -webkit-transform: rotate3d(-1, 0, 0, 90deg);
  1394. -moz-transform: rotate3d(-1, 0, 0, 90deg);
  1395. transform: rotate3d(-1, 0, 0, 90deg);
  1396. visibility: hidden;
  1397. }
  1398. 100% {
  1399. -webkit-transform: rotate3d(0, 0, 0, 0deg);
  1400. -moz-transform: rotate3d(0, 0, 0, 0deg);
  1401. transform: rotate3d(0, 0, 0, 0deg);
  1402. visibility: visible;
  1403. }
  1404. }
  1405. @keyframes cube-in-top {
  1406. 0% {
  1407. -webkit-transform: rotate3d(-1, 0, 0, 90deg);
  1408. -moz-transform: rotate3d(-1, 0, 0, 90deg);
  1409. transform: rotate3d(-1, 0, 0, 90deg);
  1410. visibility: hidden;
  1411. }
  1412. 100% {
  1413. -webkit-transform: rotate3d(0, 0, 0, 0deg);
  1414. -moz-transform: rotate3d(0, 0, 0, 0deg);
  1415. transform: rotate3d(0, 0, 0, 0deg);
  1416. visibility: visible;
  1417. }
  1418. }
  1419. .cube-out-top {
  1420. -webkit-transform-origin: 50% 0%;
  1421. -moz-transform-origin: 50% 0%;
  1422. -ms-transform-origin: 50% 0%;
  1423. transform-origin: 50% 0%;
  1424. -webkit-animation: cube-out-top 300ms ease 0ms 1 forwards;
  1425. -moz-animation: cube-out-top 300ms ease 0ms 1 forwards;
  1426. animation: cube-out-top 300ms ease 0ms 1 forwards;
  1427. }
  1428. @-webkit-keyframes cube-out-top {
  1429. 0% {
  1430. -webkit-transform: rotate3d(0, 0, 0, 0deg);
  1431. -moz-transform: rotate3d(0, 0, 0, 0deg);
  1432. transform: rotate3d(0, 0, 0, 0deg);
  1433. visibility: visible;
  1434. }
  1435. 100% {
  1436. -webkit-transform: rotate3d(-1, 0, 0, 104deg);
  1437. -moz-transform: rotate3d(-1, 0, 0, 104deg);
  1438. transform: rotate3d(-1, 0, 0, 104deg);
  1439. visibility: hidden;
  1440. }
  1441. }
  1442. @keyframes cube-out-top {
  1443. 0% {
  1444. -webkit-transform: rotate3d(0, 0, 0, 0deg);
  1445. -moz-transform: rotate3d(0, 0, 0, 0deg);
  1446. transform: rotate3d(0, 0, 0, 0deg);
  1447. visibility: visible;
  1448. }
  1449. 100% {
  1450. -webkit-transform: rotate3d(-1, 0, 0, 104deg);
  1451. -moz-transform: rotate3d(-1, 0, 0, 104deg);
  1452. transform: rotate3d(-1, 0, 0, 104deg);
  1453. visibility: hidden;
  1454. }
  1455. }
  1456. .cube-in-right {
  1457. -webkit-transform-origin: 100% 0% !important;
  1458. -moz-transform-origin: 100% 0% !important;
  1459. -ms-transform-origin: 100% 0% !important;
  1460. transform-origin: 100% 0% !important;
  1461. -webkit-animation: cube-in-right 300ms ease 0ms 1 forwards;
  1462. animation: cube-in-right 300ms ease 0ms 1 forwards;
  1463. }
  1464. @-webkit-keyframes cube-in-right {
  1465. from {
  1466. -webkit-transform: rotate3d(0, -1, 0, 90deg);
  1467. -moz-transform: rotate3d(0, -1, 0, 90deg);
  1468. transform: rotate3d(0, -1, 0, 90deg);
  1469. visibility: hidden;
  1470. }
  1471. to {
  1472. -webkit-transform: rotate3d(0, 0, 0, 0deg);
  1473. -moz-transform: rotate3d(0, 0, 0, 0deg);
  1474. transform: rotate3d(0, 0, 0, 0deg);
  1475. visibility: visible;
  1476. }
  1477. }
  1478. @keyframes cube-in-right {
  1479. 0% {
  1480. -webkit-transform: rotate3d(0, -1, 0, 90deg);
  1481. -moz-transform: rotate3d(0, -1, 0, 90deg);
  1482. transform: rotate3d(0, -1, 0, 90deg);
  1483. visibility: hidden;
  1484. }
  1485. 100% {
  1486. -webkit-transform: rotate3d(0, 0, 0, 0deg);
  1487. -moz-transform: rotate3d(0, 0, 0, 0deg);
  1488. transform: rotate3d(0, 0, 0, 0deg);
  1489. visibility: visible;
  1490. }
  1491. }
  1492. .cube-out-right {
  1493. -webkit-transform-origin: 100% 50% !important;
  1494. -moz-transform-origin: 100% 50% !important;
  1495. -ms-transform-origin: 100% 50% !important;
  1496. transform-origin: 100% 50% !important;
  1497. -webkit-animation: cube-out-right 300ms ease 0ms 1 forwards;
  1498. animation: cube-out-right 300ms ease 0ms 1 forwards;
  1499. }
  1500. @-webkit-keyframes cube-out-right {
  1501. 0% {
  1502. -webkit-transform: rotateY(0);
  1503. -moz-transform: rotateY(0);
  1504. transform: rotateY(0);
  1505. visibility: visible;
  1506. }
  1507. 100% {
  1508. -webkit-transform: rotateY(-105deg);
  1509. -moz-transform: rotateY(-105deg);
  1510. transform: rotateY(-105deg);
  1511. visibility: hidden;
  1512. }
  1513. }
  1514. @keyframes cube-out-right {
  1515. 0% {
  1516. -webkit-transform: rotateY(0);
  1517. -moz-transform: rotateY(0);
  1518. transform: rotateY(0);
  1519. visibility: visible;
  1520. }
  1521. 100% {
  1522. -webkit-transform: rotateY(-105deg);
  1523. -moz-transform: rotateY(-105deg);
  1524. transform: rotateY(-105deg);
  1525. visibility: hidden;
  1526. }
  1527. }
  1528. .cube-in-bottom {
  1529. -webkit-transform-origin: 50% 100% !important;
  1530. -moz-transform-origin: 50% 100% !important;
  1531. -ms-transform-origin: 50% 100% !important;
  1532. transform-origin: 50% 100% !important;
  1533. -webkit-animation: cube-in-bottom 300ms ease 0ms 1 forwards;
  1534. animation: cube-in-bottom 300ms ease 0ms 1 forwards;
  1535. }
  1536. @-webkit-keyframes cube-in-bottom {
  1537. 0% {
  1538. -webkit-transform: rotate3d(1, 0, 0, 90deg);
  1539. -moz-transform: rotate3d(1, 0, 0, 90deg);
  1540. transform: rotate3d(1, 0, 0, 90deg);
  1541. visibility: hidden;
  1542. }
  1543. 100% {
  1544. -webkit-transform: rotate3d(0, 0, 0, 0deg);
  1545. -moz-transform: rotate3d(0, 0, 0, 0deg);
  1546. transform: rotate3d(0, 0, 0, 0deg);
  1547. visibility: visible;
  1548. }
  1549. }
  1550. @keyframes cube-in-bottom {
  1551. 0% {
  1552. -webkit-transform: rotate3d(1, 0, 0, 90deg);
  1553. -moz-transform: rotate3d(1, 0, 0, 90deg);
  1554. transform: rotate3d(1, 0, 0, 90deg);
  1555. visibility: hidden;
  1556. }
  1557. 100% {
  1558. -webkit-transform: rotate3d(0, 0, 0, 0deg);
  1559. -moz-transform: rotate3d(0, 0, 0, 0deg);
  1560. transform: rotate3d(0, 0, 0, 0deg);
  1561. visibility: visible;
  1562. }
  1563. }
  1564. .cube-out-bottom {
  1565. -webkit-transform-origin: 50% 100% !important;
  1566. -moz-transform-origin: 50% 100% !important;
  1567. -ms-transform-origin: 50% 100% !important;
  1568. transform-origin: 50% 100% !important;
  1569. -webkit-animation: cube-out-bottom 300ms ease 0ms 1 forwards;
  1570. animation: cube-out-bottom 300ms ease 0ms 1 forwards;
  1571. }
  1572. @-webkit-keyframes cube-out-bottom {
  1573. 0% {
  1574. -webkit-transform: rotate3d(0, 0, 0, 0deg);
  1575. -moz-transform: rotate3d(0, 0, 0, 0deg);
  1576. transform: rotate3d(0, 0, 0, 0deg);
  1577. visibility: visible;
  1578. }
  1579. 100% {
  1580. -webkit-transform: rotate3d(1, 0, 0, 104deg);
  1581. -moz-transform: rotate3d(1, 0, 0, 104deg);
  1582. transform: rotate3d(1, 0, 0, 104deg);
  1583. visibility: hidden;
  1584. }
  1585. }
  1586. @keyframes cube-out-bottom {
  1587. 0% {
  1588. -webkit-transform: rotate3d(0, 0, 0, 0deg);
  1589. -moz-transform: rotate3d(0, 0, 0, 0deg);
  1590. transform: rotate3d(0, 0, 0, 0deg);
  1591. visibility: visible;
  1592. }
  1593. 100% {
  1594. -webkit-transform: rotate3d(1, 0, 0, 104deg);
  1595. -moz-transform: rotate3d(1, 0, 0, 104deg);
  1596. transform: rotate3d(1, 0, 0, 104deg);
  1597. visibility: hidden;
  1598. }
  1599. }
  1600. .cube-in-left {
  1601. -webkit-transform-origin: 0% 0%;
  1602. -moz-transform-origin: 0% 0%;
  1603. -ms-transform-origin: 0% 0%;
  1604. transform-origin: 0% 0%;
  1605. -webkit-animation: cube-in-left 300ms ease 0ms 1 forwards;
  1606. animation: cube-in-left 300ms ease 0ms 1 forwards;
  1607. }
  1608. @-webkit-keyframes cube-in-left {
  1609. 0% {
  1610. -webkit-transform: rotate3d(0, 1, 0, 90deg);
  1611. -moz-transform: rotate3d(0, 1, 0, 90deg);
  1612. transform: rotate3d(0, 1, 0, 90deg);
  1613. visibility: hidden;
  1614. }
  1615. 100% {
  1616. -webkit-transform: rotate3d(0, 0, 0, 0deg);
  1617. -moz-transform: rotate3d(0, 0, 0, 0deg);
  1618. transform: rotate3d(0, 0, 0, 0deg);
  1619. visibility: visible;
  1620. }
  1621. }
  1622. @keyframes cube-in-left {
  1623. 0% {
  1624. -webkit-transform: rotate3d(0, 1, 0, 90deg);
  1625. -moz-transform: rotate3d(0, 1, 0, 90deg);
  1626. transform: rotate3d(0, 1, 0, 90deg);
  1627. visibility: hidden;
  1628. }
  1629. 100% {
  1630. -webkit-transform: rotate3d(0, 0, 0, 0deg);
  1631. -moz-transform: rotate3d(0, 0, 0, 0deg);
  1632. transform: rotate3d(0, 0, 0, 0deg);
  1633. visibility: visible;
  1634. }
  1635. }
  1636. .cube-out-left {
  1637. -webkit-transform-origin: 0% 0%;
  1638. -moz-transform-origin: 0% 0%;
  1639. -ms-transform-origin: 0% 0%;
  1640. transform-origin: 0% 0%;
  1641. -webkit-animation: cube-out-left 300ms ease 0ms 1 forwards;
  1642. animation: cube-out-left 300ms ease 0ms 1 forwards;
  1643. }
  1644. @-webkit-keyframes cube-out-left {
  1645. 0% {
  1646. -webkit-transform: rotateY(0);
  1647. -moz-transform: rotateY(0);
  1648. transform: rotateY(0);
  1649. visibility: visible;
  1650. }
  1651. 100% {
  1652. -webkit-transform: rotateY(105deg);
  1653. -moz-transform: rotateY(105deg);
  1654. transform: rotateY(105deg);
  1655. visibility: hidden;
  1656. }
  1657. }
  1658. @keyframes cube-out-left {
  1659. 0% {
  1660. -webkit-transform: rotateY(0);
  1661. -moz-transform: rotateY(0);
  1662. transform: rotateY(0);
  1663. visibility: visible;
  1664. }
  1665. 100% {
  1666. -webkit-transform: rotateY(105deg);
  1667. -moz-transform: rotateY(105deg);
  1668. transform: rotateY(105deg);
  1669. visibility: hidden;
  1670. }
  1671. }
  1672. #effectsPreview .grid-gallery-caption[data-grid-gallery-type="polaroid"] {
  1673. width: 150px;
  1674. height: 150px;
  1675. vertical-align: top;
  1676. }
  1677. #effectsPreview .grid-gallery-caption[data-grid-gallery-type="polaroid"] img {
  1678. width: 120px!important;
  1679. height: 120px!important;
  1680. margin: 5px auto 0!important;
  1681. }
  1682. .grid-gallery-caption[data-grid-gallery-type="polaroid"] {
  1683. -webkit-backface-visibility: hidden;
  1684. -webkit-font-smoothing: antialiased;
  1685. z-index: 1;
  1686. }
  1687. .grid-gallery-caption[data-grid-gallery-type="polaroid"] .crop {
  1688. margin: 0 auto;
  1689. z-index: 2;
  1690. }
  1691. .grid-gallery-caption[data-grid-gallery-type="polaroid"] figcaption {
  1692. position: absolute;
  1693. left: 0;
  1694. top: 0;
  1695. height: 100%;
  1696. width: 100%;
  1697. z-index: 1;
  1698. }
  1699. .grid-gallery-caption[data-grid-gallery-type="polaroid"] img {
  1700. z-index: 2;
  1701. }
  1702. .grid-gallery-caption[data-grid-gallery-type="polaroid"] figcaption .grid-gallery-figcaption-wrap {
  1703. vertical-align: bottom!important;
  1704. top: -7px;
  1705. position: relative;
  1706. }
  1707. .grid-gallery-caption[data-grid-gallery-type="polaroid"]:hover,
  1708. .grid-gallery-caption[data-grid-gallery-type="polaroid"].hovered {
  1709. -o-transition-duration: 500ms;
  1710. -ms-transition-duration: 500ms;
  1711. transition-duration: 500ms;
  1712. transform: scale(1.1) rotate(0deg)!important;
  1713. z-index: 2;
  1714. }