fl-builder-layout.css 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836
  1. /* Grid
  2. ------------------------------------------------------ */
  3. .fl-builder-content *,
  4. .fl-builder-content *:before,
  5. .fl-builder-content *:after {
  6. -webkit-box-sizing: border-box;
  7. -moz-box-sizing: border-box;
  8. box-sizing: border-box;
  9. }
  10. .fl-row:before,
  11. .fl-row:after,
  12. .fl-row-content:before,
  13. .fl-row-content:after,
  14. .fl-col-group:before,
  15. .fl-col-group:after,
  16. .fl-col:before,
  17. .fl-col:after,
  18. .fl-module:before,
  19. .fl-module:after,
  20. .fl-module-content:before,
  21. .fl-module-content:after {
  22. display: table;
  23. content: " ";
  24. }
  25. .fl-row:after,
  26. .fl-row-content:after,
  27. .fl-col-group:after,
  28. .fl-col:after,
  29. .fl-module:after,
  30. .fl-module-content:after {
  31. clear: both;
  32. }
  33. .fl-row,
  34. .fl-row-content,
  35. .fl-col-group,
  36. .fl-col,
  37. .fl-module,
  38. .fl-module-content {
  39. zoom:1;
  40. }
  41. .fl-clear {
  42. clear: both;
  43. }
  44. /* Utilities
  45. ------------------------------------------------------ */
  46. .fl-clearfix:before,
  47. .fl-clearfix:after {
  48. display: table;
  49. content: " ";
  50. }
  51. .fl-clearfix:after {
  52. clear: both;
  53. }
  54. .fl-clearfix {
  55. zoom:1;
  56. }
  57. /* Responsive Utilities
  58. ------------------------------------------------------ */
  59. .fl-visible-medium,
  60. .fl-visible-medium-mobile,
  61. .fl-visible-mobile,
  62. .fl-col-group .fl-visible-medium.fl-col,
  63. .fl-col-group .fl-visible-medium-mobile.fl-col,
  64. .fl-col-group .fl-visible-mobile.fl-col {
  65. display: none;
  66. }
  67. /* Rows
  68. ------------------------------------------------------ */
  69. .fl-row,
  70. .fl-row-content {
  71. margin-left: auto;
  72. margin-right: auto;
  73. }
  74. .fl-row-content-wrap {
  75. position: relative;
  76. }
  77. /* Photo Bg */
  78. .fl-builder-mobile .fl-row-bg-photo .fl-row-content-wrap {
  79. background-attachment: scroll;
  80. }
  81. /* Video Bg */
  82. .fl-row-bg-video,
  83. .fl-row-bg-video .fl-row-content {
  84. position: relative;
  85. }
  86. .fl-row-bg-video .fl-bg-video {
  87. bottom: 0;
  88. left: 0;
  89. overflow: hidden;
  90. position: absolute;
  91. right: 0;
  92. top: 0;
  93. }
  94. .fl-row-bg-video .fl-bg-video video {
  95. bottom: 0;
  96. left: 0px;
  97. max-width: none;
  98. position: absolute;
  99. right: 0;
  100. top: 0px;
  101. }
  102. .fl-row-bg-video .fl-bg-video iframe {
  103. pointer-events: none;
  104. width: 100vw;
  105. height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
  106. max-width: none;
  107. min-height: 100vh;
  108. min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
  109. position: absolute;
  110. top: 50%;
  111. left: 50%;
  112. transform: translate(-50%, -50%);
  113. -ms-transform: translate(-50%, -50%); /* IE 9 */
  114. -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
  115. }
  116. .fl-bg-video-fallback {
  117. background-position: 50% 50%;
  118. background-repeat: no-repeat;
  119. background-size: cover;
  120. bottom: 0px;
  121. left: 0px;
  122. position: absolute;
  123. right: 0px;
  124. top: 0px;
  125. }
  126. /* Slideshow Bg */
  127. .fl-row-bg-slideshow,
  128. .fl-row-bg-slideshow .fl-row-content {
  129. position: relative;
  130. }
  131. .fl-row .fl-bg-slideshow {
  132. bottom: 0;
  133. left: 0;
  134. overflow: hidden;
  135. position: absolute;
  136. right: 0;
  137. top: 0;
  138. z-index: 0;
  139. }
  140. .fl-builder-edit .fl-row .fl-bg-slideshow * {
  141. bottom: 0;
  142. height: auto !important;
  143. left: 0;
  144. position: absolute !important;
  145. right: 0;
  146. top: 0;
  147. }
  148. /* Row Bg Overlay */
  149. .fl-row-bg-overlay .fl-row-content-wrap:after {
  150. content: '';
  151. display: block;
  152. position: absolute;
  153. top: 0;
  154. right: 0;
  155. bottom: 0;
  156. left: 0;
  157. z-index: 0;
  158. }
  159. .fl-row-bg-overlay .fl-row-content {
  160. position: relative;
  161. z-index: 1;
  162. }
  163. /* Full Height Rows */
  164. .fl-row-full-height .fl-row-content-wrap {
  165. display: -webkit-box;
  166. display: -webkit-flex;
  167. display: -ms-flexbox;
  168. display: flex;
  169. min-height: 100vh;
  170. }
  171. .fl-builder-edit .fl-row-full-height .fl-row-content-wrap {
  172. min-height: calc( 100vh - 48px );
  173. }
  174. .fl-row-full-height .fl-row-content {
  175. -webkit-box-flex: 1 1 auto;
  176. -moz-box-flex: 1 1 auto;
  177. -webkit-flex: 1 1 auto;
  178. -ms-flex: 1 1 auto;
  179. flex: 1 1 auto;
  180. }
  181. .fl-row-full-height .fl-row-full-width.fl-row-content {
  182. max-width: 100%;
  183. width: 100%;
  184. }
  185. /* IE 11 - Row full height - vertical alignment center/bottom fix */
  186. .fl-builder-ie-11 .fl-row.fl-row-full-height:not(.fl-visible-medium):not(.fl-visible-medium-mobile):not(.fl-visible-mobile) {
  187. display: flex;
  188. flex-direction: column;
  189. height: 100%;
  190. }
  191. /* Stupid IE Full Height Row Fixes */
  192. .fl-builder-ie-11 .fl-row-full-height .fl-row-content-wrap {
  193. height: auto;
  194. }
  195. .fl-builder-ie-11 .fl-row-full-height .fl-row-content {
  196. flex: 0 0 auto;
  197. flex-basis: 100%;
  198. margin: 0;
  199. }
  200. .fl-builder-ie-11 .fl-row-full-height.fl-row-align-top .fl-row-content,
  201. .fl-builder-ie-11 .fl-row-full-height.fl-row-align-bottom .fl-row-content {
  202. margin: 0 auto;
  203. }
  204. .fl-builder-ie-11 .fl-row-full-height.fl-row-align-center .fl-col-group:not(.fl-col-group-equal-height) {
  205. display: flex;
  206. align-items: center;
  207. justify-content: center;
  208. -webkit-align-items: center;
  209. -webkit-box-align: center;
  210. -webkit-box-pack: center;
  211. -webkit-justify-content: center;
  212. -ms-flex-align: center;
  213. -ms-flex-pack: center;
  214. }
  215. /* Full height align center */
  216. .fl-row-full-height.fl-row-align-center .fl-row-content-wrap {
  217. align-items: center;
  218. justify-content: center;
  219. -webkit-align-items: center;
  220. -webkit-box-align: center;
  221. -webkit-box-pack: center;
  222. -webkit-justify-content: center;
  223. -ms-flex-align: center;
  224. -ms-flex-pack: center;
  225. }
  226. /* Full height align bottom */
  227. .fl-row-full-height.fl-row-align-bottom .fl-row-content-wrap {
  228. align-items: flex-end;
  229. justify-content: flex-end;
  230. -webkit-align-items: flex-end;
  231. -webkit-justify-content: flex-end;
  232. -webkit-box-align: end;
  233. -webkit-box-pack: end;
  234. -ms-flex-align: end;
  235. -ms-flex-pack: end;
  236. }
  237. /* IE 11 - height bottom > row align bottom - center fix */
  238. .fl-builder-ie-11 .fl-row-full-height.fl-row-align-bottom .fl-row-content-wrap {
  239. justify-content: flex-start;
  240. -webkit-justify-content: flex-start;
  241. }
  242. /* Full height iPad with portrait orientation. */
  243. @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait){
  244. .fl-row-full-height .fl-row-content-wrap{
  245. min-height: 1024px;
  246. }
  247. }
  248. /* Full height iPad with landscape orientation. */
  249. @media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape){
  250. .fl-row-full-height .fl-row-content-wrap{
  251. min-height: 768px;
  252. }
  253. }
  254. /* Full height iPhone 5. You can also target devices with aspect ratio. */
  255. @media screen and (device-aspect-ratio: 40/71) {
  256. .fl-row-full-height .fl-row-content-wrap {
  257. min-height: 500px;
  258. }
  259. }
  260. /* Column Groups
  261. ------------------------------------------------------ */
  262. .fl-col-group-equal-height,
  263. .fl-col-group-equal-height .fl-col,
  264. .fl-col-group-equal-height .fl-col-content{
  265. display: -webkit-box;
  266. display: -webkit-flex;
  267. display: -ms-flexbox;
  268. display: flex;
  269. }
  270. .fl-col-group-equal-height{
  271. -webkit-flex-wrap: wrap;
  272. -ms-flex-wrap: wrap;
  273. flex-wrap: wrap;
  274. }
  275. .fl-col-group-equal-height.fl-col-group-has-child-loading {
  276. -webkit-flex-wrap: nowrap;
  277. -ms-flex-wrap: nowrap;
  278. flex-wrap: nowrap;
  279. }
  280. .fl-col-group-equal-height .fl-col,
  281. .fl-col-group-equal-height .fl-col-content{
  282. -webkit-box-flex: 1 1 auto;
  283. -moz-box-flex: 1 1 auto;
  284. -webkit-flex: 1 1 auto;
  285. -ms-flex: 1 1 auto;
  286. flex: 1 1 auto;
  287. }
  288. .fl-col-group-equal-height .fl-col-content{
  289. -webkit-box-orient: vertical;
  290. -webkit-box-direction: normal;
  291. -webkit-flex-direction: column;
  292. -ms-flex-direction: column;
  293. flex-direction: column;
  294. flex-shrink: 1;
  295. min-width: 1px;
  296. max-width: 100%;
  297. width: 100%;
  298. }
  299. .fl-col-group-equal-height:before,
  300. .fl-col-group-equal-height .fl-col:before,
  301. .fl-col-group-equal-height .fl-col-content:before,
  302. .fl-col-group-equal-height:after,
  303. .fl-col-group-equal-height .fl-col:after,
  304. .fl-col-group-equal-height .fl-col-content:after{
  305. content: none;
  306. }
  307. /* Equal height align center */
  308. .fl-col-group-equal-height.fl-col-group-align-center .fl-col-content {
  309. align-items: center;
  310. justify-content: center;
  311. -webkit-align-items: center;
  312. -webkit-box-align: center;
  313. -webkit-box-pack: center;
  314. -webkit-justify-content: center;
  315. -ms-flex-align: center;
  316. -ms-flex-pack: center;
  317. }
  318. /* Equal height align bottom */
  319. .fl-col-group-equal-height.fl-col-group-align-bottom .fl-col-content {
  320. justify-content: flex-end;
  321. -webkit-justify-content: flex-end;
  322. -webkit-box-align: end;
  323. -webkit-box-pack: end;
  324. -ms-flex-pack: end;
  325. }
  326. .fl-col-group-equal-height.fl-col-group-align-center .fl-module,
  327. .fl-col-group-equal-height.fl-col-group-align-center .fl-col-group {
  328. width: 100%;
  329. }
  330. /* IE11 fix for images with height:auto in equal height columns. */
  331. .fl-builder-ie-11 .fl-col-group-equal-height,
  332. .fl-builder-ie-11 .fl-col-group-equal-height .fl-col,
  333. .fl-builder-ie-11 .fl-col-group-equal-height .fl-col-content,
  334. .fl-builder-ie-11 .fl-col-group-equal-height .fl-module,
  335. .fl-col-group-equal-height.fl-col-group-align-center .fl-col-group {
  336. min-height: 1px;
  337. }
  338. /* Columns
  339. ------------------------------------------------------ */
  340. .fl-col {
  341. float: left;
  342. min-height: 1px;
  343. }
  344. /* Column Bg Overlay */
  345. .fl-col-bg-overlay .fl-col-content {
  346. position: relative;
  347. }
  348. .fl-col-bg-overlay .fl-col-content:after {
  349. content: '';
  350. display: block;
  351. position: absolute;
  352. top: 0;
  353. right: 0;
  354. bottom: 0;
  355. left: 0;
  356. z-index: 0;
  357. }
  358. .fl-col-bg-overlay .fl-module {
  359. position: relative;
  360. z-index: 2;
  361. }
  362. /* Modules
  363. ------------------------------------------------------ */
  364. .fl-module img {
  365. max-width: 100%;
  366. }
  367. /* Module Templates
  368. ------------------------------------------------------ */
  369. .fl-builder-module-template {
  370. margin: 0 auto;
  371. max-width: 1100px;
  372. padding: 20px;
  373. }
  374. /* Buttons
  375. ------------------------------------------------------ */
  376. .fl-builder-content a.fl-button,
  377. .fl-builder-content a.fl-button:visited {
  378. border-radius: 4px;
  379. -moz-border-radius: 4px;
  380. -webkit-border-radius: 4px;
  381. display: inline-block;
  382. font-size: 16px;
  383. font-weight: normal;
  384. line-height: 18px;
  385. padding: 12px 24px;
  386. text-decoration: none;
  387. text-shadow: none;
  388. }
  389. .fl-builder-content .fl-button:hover {
  390. text-decoration: none;
  391. }
  392. .fl-builder-content .fl-button:active {
  393. position: relative;
  394. top: 1px;
  395. }
  396. .fl-builder-content .fl-button-width-full .fl-button {
  397. display: block;
  398. text-align: center;
  399. }
  400. .fl-builder-content .fl-button-width-custom .fl-button {
  401. display: inline-block;
  402. text-align: center;
  403. max-width: 100%;
  404. }
  405. .fl-builder-content .fl-button-left {
  406. text-align: left;
  407. }
  408. .fl-builder-content .fl-button-center {
  409. text-align: center;
  410. }
  411. .fl-builder-content .fl-button-right {
  412. text-align: right;
  413. }
  414. .fl-builder-content .fl-button i {
  415. font-size: 1.3em;
  416. height: auto;
  417. margin-right:8px;
  418. vertical-align: middle;
  419. width: auto;
  420. }
  421. .fl-builder-content .fl-button i.fl-button-icon-after {
  422. margin-left: 8px;
  423. margin-right: 0;
  424. }
  425. .fl-builder-content .fl-button-has-icon .fl-button-text {
  426. vertical-align: middle;
  427. }
  428. /* Icons
  429. ------------------------------------------------------ */
  430. .fl-icon-wrap {
  431. display: inline-block;
  432. }
  433. .fl-icon {
  434. display: table-cell;
  435. vertical-align: middle;
  436. }
  437. .fl-icon a {
  438. text-decoration: none;
  439. }
  440. .fl-icon i {
  441. float: left;
  442. }
  443. .fl-icon i:before {
  444. border: none !important;
  445. }
  446. .fl-icon-text {
  447. display: table-cell;
  448. text-align: left;
  449. padding-left: 15px;
  450. vertical-align: middle;
  451. }
  452. .fl-icon-text *:last-child {
  453. margin: 0 !important;
  454. padding: 0 !important;
  455. }
  456. .fl-icon-text a {
  457. text-decoration: none;
  458. }
  459. /* Photos
  460. ------------------------------------------------------ */
  461. .fl-photo {
  462. line-height: 0;
  463. position: relative;
  464. }
  465. .fl-photo-align-left {
  466. text-align: left;
  467. }
  468. .fl-photo-align-center {
  469. text-align: center;
  470. }
  471. .fl-photo-align-right {
  472. text-align: right;
  473. }
  474. .fl-photo-content {
  475. display: inline-block;
  476. line-height: 0;
  477. position: relative;
  478. max-width: 100%;
  479. }
  480. .fl-photo-img-svg {
  481. width: 100%;
  482. }
  483. .fl-photo-content img {
  484. display: inline;
  485. height: auto;
  486. max-width: 100%;
  487. }
  488. .fl-photo-crop-circle img {
  489. -webkit-border-radius: 100%;
  490. -moz-border-radius: 100%;
  491. border-radius: 100%;
  492. }
  493. .fl-photo-caption {
  494. font-size: 13px;
  495. line-height: 18px;
  496. overflow: hidden;
  497. text-overflow: ellipsis;
  498. white-space: nowrap;
  499. }
  500. .fl-photo-caption-below {
  501. padding-bottom: 20px;
  502. padding-top: 10px;
  503. }
  504. .fl-photo-caption-hover {
  505. background: rgba(0,0,0,0.7);
  506. bottom: 0;
  507. color: #fff;
  508. left: 0;
  509. opacity: 0;
  510. filter: alpha(opacity = 0);
  511. padding: 10px 15px;
  512. position: absolute;
  513. right: 0;
  514. -webkit-transition:opacity 0.3s ease-in;
  515. -moz-transition:opacity 0.3s ease-in;
  516. transition:opacity 0.3s ease-in;
  517. }
  518. .fl-photo-content:hover .fl-photo-caption-hover {
  519. opacity: 100;
  520. filter: alpha(opacity = 100);
  521. }
  522. /* Pagination
  523. ------------------------------------------------------ */
  524. .fl-builder-pagination,
  525. .fl-builder-pagination-load-more {
  526. padding: 40px 0;
  527. }
  528. .fl-builder-pagination ul.page-numbers {
  529. list-style: none;
  530. margin: 0;
  531. padding: 0;
  532. text-align: center;
  533. }
  534. .fl-builder-pagination li {
  535. display: inline-block;
  536. list-style: none;
  537. margin: 0;
  538. padding: 0;
  539. }
  540. .fl-builder-pagination li a.page-numbers,
  541. .fl-builder-pagination li span.page-numbers {
  542. border: 1px solid #e6e6e6;
  543. display: inline-block;
  544. padding: 5px 10px;
  545. margin: 0 0 5px;
  546. }
  547. .fl-builder-pagination li a.page-numbers:hover,
  548. .fl-builder-pagination li span.current {
  549. background: #f5f5f5;
  550. text-decoration: none;
  551. }
  552. /* Slideshows
  553. ------------------------------------------------------ */
  554. .fl-slideshow,
  555. .fl-slideshow * {
  556. -webkit-box-sizing: content-box;
  557. -moz-box-sizing: content-box;
  558. box-sizing: content-box;
  559. }
  560. .fl-slideshow .fl-slideshow-image img {
  561. max-width: none !important;
  562. }
  563. .fl-slideshow-social {
  564. line-height: 0 !important;
  565. }
  566. .fl-slideshow-social * {
  567. margin: 0 !important;
  568. }
  569. /* Sliders
  570. ------------------------------------------------------ */
  571. .fl-builder-content .bx-wrapper .bx-viewport {
  572. background: transparent;
  573. border: none;
  574. box-shadow: none;
  575. -moz-box-shadow: none;
  576. -webkit-box-shadow: none;
  577. left: 0;
  578. }
  579. /* Lightbox
  580. ------------------------------------------------------ */
  581. .mfp-wrap button.mfp-arrow,
  582. .mfp-wrap button.mfp-arrow:active,
  583. .mfp-wrap button.mfp-arrow:hover,
  584. .mfp-wrap button.mfp-arrow:focus {
  585. background: transparent !important;
  586. border: none !important;
  587. outline: none;
  588. position: absolute;
  589. top: 50%;
  590. box-shadow: none !important;
  591. -moz-box-shadow: none !important;
  592. -webkit-box-shadow: none !important;
  593. }
  594. .mfp-wrap .mfp-close,
  595. .mfp-wrap .mfp-close:active,
  596. .mfp-wrap .mfp-close:hover,
  597. .mfp-wrap .mfp-close:focus {
  598. background: transparent !important;
  599. border: none !important;
  600. outline: none;
  601. position: absolute;
  602. top: 0;
  603. box-shadow: none !important;
  604. -moz-box-shadow: none !important;
  605. -webkit-box-shadow: none !important;
  606. }
  607. .admin-bar .mfp-wrap .mfp-close,
  608. .admin-bar .mfp-wrap .mfp-close:active,
  609. .admin-bar .mfp-wrap .mfp-close:hover,
  610. .admin-bar .mfp-wrap .mfp-close:focus {
  611. top: 32px!important;
  612. }
  613. img.mfp-img {
  614. padding: 0;
  615. }
  616. .mfp-counter {
  617. display: none;
  618. }
  619. .mfp-wrap .mfp-preloader.fa {
  620. font-size: 30px;
  621. }
  622. /* Form Fields
  623. ------------------------------------------------------ */
  624. .fl-form-field {
  625. margin-bottom: 15px;
  626. }
  627. .fl-form-field input.fl-form-error {
  628. border-color: #DD6420;
  629. }
  630. .fl-form-error-message {
  631. clear: both;
  632. color: #DD6420;
  633. display: none;
  634. padding-top: 8px;
  635. font-size: 12px;
  636. font-weight: lighter;
  637. }
  638. .fl-form-button-disabled {
  639. opacity: 0.5;
  640. }
  641. /* Animations
  642. ------------------------------------------------------ */
  643. .fl-animation {
  644. opacity: 0;
  645. }
  646. .fl-builder-mobile .fl-animation,
  647. .fl-builder-edit .fl-animation,
  648. .fl-builder-preview .fl-animation,
  649. .fl-animated {
  650. opacity: 1;
  651. }
  652. /* Fade In */
  653. .fl-animated.fl-fade-in {
  654. animation: fl-fade-in 1s ease-out;
  655. -webkit-animation: fl-fade-in 1s ease-out;
  656. -moz-animation: fl-fade-in 1s ease-out;
  657. }
  658. @keyframes fl-fade-in {
  659. 0% { opacity: 0; }
  660. 100% { opacity: 1; }
  661. }
  662. @-webkit-keyframes fl-fade-in {
  663. 0% { opacity: 0; }
  664. 100% { opacity: 1; }
  665. }
  666. @-moz-keyframes fl-fade-in {
  667. 0% { opacity: 0; }
  668. 100% { opacity: 1; }
  669. }
  670. /* Slide Left */
  671. .fl-animated.fl-slide-left {
  672. animation: fl-slide-left 1s ease-out;
  673. -webkit-animation: fl-slide-left 1s ease-out;
  674. -moz-animation: fl-slide-left 1s ease-out;
  675. }
  676. @keyframes fl-slide-left {
  677. 0% { opacity: 0; transform: translateX(10%); }
  678. 100% { opacity: 1; transform: translateX(0%); }
  679. }
  680. @-webkit-keyframes fl-slide-left {
  681. 0% { opacity: 0; -webkit-transform: translateX(10%); }
  682. 100% { opacity: 1; -webkit-transform: translateX(0%); }
  683. }
  684. @-moz-keyframes fl-slide-left {
  685. 0% { opacity: 0; -moz-transform: translateX(10%); }
  686. 100% { opacity: 1; -moz-transform: translateX(0%); }
  687. }
  688. /* Slide Right */
  689. .fl-animated.fl-slide-right {
  690. animation: fl-slide-right 1s ease-out;
  691. -webkit-animation: fl-slide-right 1s ease-out;
  692. -moz-animation: fl-slide-right 1s ease-out;
  693. }
  694. @keyframes fl-slide-right {
  695. 0% { opacity: 0; transform: translateX(-10%); }
  696. 100% { opacity: 1; transform: translateX(0%); }
  697. }
  698. @-webkit-keyframes fl-slide-right {
  699. 0% { opacity: 0; -webkit-transform: translateX(-10%); }
  700. 100% { opacity: 1; -webkit-transform: translateX(0%); }
  701. }
  702. @-moz-keyframes fl-slide-right {
  703. 0% { opacity: 0; -moz-transform: translateX(-10%); }
  704. 100% { opacity: 1; -moz-transform: translateX(0%); }
  705. }
  706. /* Slide Up */
  707. .fl-animated.fl-slide-up {
  708. animation: fl-slide-up 1s ease-out;
  709. -webkit-animation: fl-slide-up 1s ease-out;
  710. -moz-animation: fl-slide-up 1s ease-out;
  711. }
  712. @keyframes fl-slide-up {
  713. 0% { opacity: 0; transform: translateY(10%); }
  714. 100% { opacity: 1; transform: translateY(0%); }
  715. }
  716. @-webkit-keyframes fl-slide-up {
  717. 0% { opacity: 0; -webkit-transform: translateY(10%); }
  718. 100% { opacity: 1; -webkit-transform: translateY(0%); }
  719. }
  720. @-moz-keyframes fl-slide-up {
  721. 0% { opacity: 0; -moz-transform: translateY(10%); }
  722. 100% { opacity: 1; -moz-transform: translateY(0%); }
  723. }
  724. /* Slide Down */
  725. .fl-animated.fl-slide-down {
  726. animation: fl-slide-down 1s ease-out;
  727. -webkit-animation: fl-slide-down 1s ease-out;
  728. -moz-animation: fl-slide-down 1s ease-out;
  729. }
  730. @keyframes fl-slide-down {
  731. 0% { opacity: 0; transform: translateY(-10%); }
  732. 100% { opacity: 1; transform: translateY(0%); }
  733. }
  734. @-webkit-keyframes fl-slide-down {
  735. 0% { opacity: 0; -webkit-transform: translateY(-10%); }
  736. 100% { opacity: 1; -webkit-transform: translateY(0%); }
  737. }
  738. @-moz-keyframes fl-slide-down {
  739. 0% { opacity: 0; -moz-transform: translateY(-10%); }
  740. 100% { opacity: 1; -moz-transform: translateY(0%); }
  741. }
  742. /* Button Icon Animation */
  743. .fl-button.fl-button-icon-animation i {
  744. width: 0 !important;
  745. opacity: 0;
  746. -ms-filter: "alpha(opacity=0)";
  747. transition: all 0.2s ease-out;
  748. -webkit-transition: all 0.2s ease-out;
  749. }
  750. .fl-button.fl-button-icon-animation:hover i {
  751. opacity: 1! important;
  752. -ms-filter: "alpha(opacity=100)";
  753. }
  754. .fl-button.fl-button-icon-animation i.fl-button-icon-after {
  755. margin-left: 0px !important;
  756. }
  757. .fl-button.fl-button-icon-animation:hover i.fl-button-icon-after {
  758. margin-left: 10px !important;
  759. }
  760. .fl-button.fl-button-icon-animation i.fl-button-icon-before {
  761. margin-right: 0 !important;
  762. }
  763. .fl-button.fl-button-icon-animation:hover i.fl-button-icon-before {
  764. margin-right: 20px !important;
  765. margin-left: -10px;
  766. }
  767. /* Templates
  768. ------------------------------------------------------ */
  769. .single:not(.woocommerce).single-fl-builder-template .fl-content {
  770. width: 100%;
  771. }