/* ============================================================ SUMMARY /* ============================================================ 00. Main Styles 01. Grid Item 02. Pagination 03. Slider buttons 04. Slider bullets 05. Load More Button 06. Grid Filters 07. Search bar 08. Sorter 09. Dropdown List 10. LightBox 11. Instagram Header 12. Youtube Header 13. Vimeo Header 14. Font icons /* ============================================================ 00. Main Styles /* ============================================================ */ .txt-left { text-align: left; } .txt-center { text-align: center; } .txt-right { text-align: right; } .tg-hidden-tag { visibility: hidden !important; position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0.001 !important; } .the-grid-plugin { display: none !important; } .tg-error-msg { position: relative; display: block; padding: 50px; text-align: center; font-size: 16px; font-weight: 600; white-space: pre; } .tg-grid-sizer, .tg-gutter-sizer { position: absolute; display: block; left: -100%; visibility: hidden; pointer-events: none; } .tg-grid-wrapper { position: relative; display: block; min-height: 1px; } .tg-grid-wrapper.tg-grid-loaded .tg-search-holder, .tg-grid-wrapper.tg-grid-loaded .tg-filters-holder, .tg-grid-wrapper.tg-grid-loaded .tg-sorters-holder { opacity: 1; pointer-events: auto; } .tg-grid-wrapper .tg-search-holder, .tg-grid-wrapper .tg-filters-holder, .tg-grid-wrapper .tg-sorters-holder { opacity: 0.5; pointer-events: none; -webkit-transition: opacity 0.3s linear; -moz-transition: opacity 0.3s linear; -ms-transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; transition: opacity 0.3s linear; } .tg-grid-loading { overflow: hidden; height: 250px; max-height: 250px; } .full-height.tg-grid-loading .tg-grid-holder, .full-height.tg-grid-loading .tg-grid-slider { height: auto; max-height: none; } /*** because of the preloader height ***/ .tg-grid-loading .tg-grid-slider .tg-grid-holder { height: inherit !important; max-height: none !important; } .tg-grid-wrapper.tg-grid-loading .tg-grid-area-top1 *, .tg-grid-wrapper.tg-grid-loading .tg-grid-area-top2 *, .tg-grid-wrapper.tg-grid-loading .tg-grid-area-left *, .tg-grid-wrapper.tg-grid-loading .tg-grid-area-right *, .tg-grid-wrapper.tg-grid-loading .tg-grid-area-bottom1 *, .tg-grid-wrapper.tg-grid-loading .tg-grid-area-bottom2 * { opacity: 0.01; } .tg-grid-slider { position: relative; cursor: move; cursor: -moz-grab; cursor: -webkit-grab; } .tg-grid-slider .dragged { cursor: -moz-grabbing; cursor: -webkit-grabbing; } .tg-grid-holder { position: relative; display: block; } .tg-grid-holder:before { position:absolute; top:0; left:0; width:100%; height:100%; } .tg-grid-preloader { position: absolute; display: block; top: 0; left: 0; height: 100%; width: 100%; } .tg-grid-preloader-holder { position: relative; display: block; top: 50%; width: 100%; padding: 0; margin: 0 auto; line-height: 0; text-align: center; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .tg-grid-preloader-inner { position: relative; display: inline-block; } .tg-ajax-button-holder { position: relative; display: block; } .tg-grid-area-top1, .tg-grid-area-top2, .tg-grid-area-bottom1, .tg-grid-area-bottom2 { position: relative; display: block; } .tg-grid-slider, .tg-grid-holder { z-index: 3; } .tg-grid-area-top1 > div:first-child, .tg-grid-area-top2 > div:first-child, .tg-grid-area-bottom1 > div:first-child, .tg-grid-area-bottom2 > div:first-child { margin-left: 0; } .tg-grid-area-top1 > div:last-child, .tg-grid-area-top2 > div:last-child, .tg-grid-area-bottom1 > div:last-child, .tg-grid-area-bottom2 > div:last-child { margin-right: 0; } .tg-grid-area-overlay { position: absolute; display: block; top: 0; left: 0; bottom: 0; right: 0; } /*** navigation elements main styles ***/ .tg-nav-font, .tg-nav-font[class^="tg-icon-"] { font-size: 13px; line-height: 30px; } .tg-search-holder, .tg-pagination-holder, .tg-slider-bullets-holder, .tg-left-arrow, .tg-right-arrow, .tg-sorters-holder, .tg-filters-holder, .tg-ajax-button-holder { vertical-align: top; } .tg-filter-tooltip, .no-touch .tg-filter-tooltip, .tg-dropdown-holder { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .tg-page-number, .tg-grid-holder, .tg-grid-slider, .tg-grid-wrapper, .tg-left-arrow i, .tg-right-arrow i, .tg-search-clear, input[type=text].tg-search { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .tg-filter:not(.tg-dropdown-item), .tg-filter:not(.tg-dropdown-item) span:not(.tg-filter-count), .tg-sorter-order, .tg-sorter-order i, .tg-search-clear, .tg-ajax-button, .tg-ajax-button span, .tg-dropdown-item, .tg-icon-dropdown-open, .tg-left-arrow, .tg-right-arrow, .tg-left-arrow i, .tg-right-arrow i, .tg-pagination-prev, .tg-pagination-next, .tg-pagination-prev a, .tg-pagination-next a, .tg-pagination-number .tg-page-number { -webkit-transition: background 0.3s linear, color 0.3s linear, border 0.3s linear, opacity 0.3s linear; -moz-transition: background 0.3s linear, color 0.3s linear, border 0.3s linear, opacity 0.3s linear; -ms-transition: background 0.3s linear, color 0.3s linear, border 0.3s linear, opacity 0.3s linear; -o-transition: background 0.3s linear, color 0.3s linear, border 0.3s linear, opacity 0.3s linear; transition: background 0.3s linear, color 0.3s linear, border 0.3s linear, opacity 0.3s linear; } /* ============================================================ 01. Grid Item /* ============================================================ */ .tg-item { position: relative; display: inline-block; z-index: 1; float: left; width: 25%; height: auto; } .tg-item, .tg-item * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .tg-item-clear, .tg-item-line-break { clear: both; height: 0; opacity: 0 !important; padding: 0 !important; margin: 0 !important; } .tg-item-line-break { height: 10px; } .tg-item .tg-item-title, .tg-item .tg-item-title a, .tg-item .tg-item-excerpt, .tg-item .tg-cats-holder * { word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } .tg-item .tg-center-outer { position: absolute; display: block; top: 0; left: 0; height: 100%; width: 100%; } .tg-item .tg-center-inner { position: relative; display: block; top: 50%; width: 100%; padding: 0; margin: 0 auto; line-height: 0; text-align: center; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .tg-layout-justified .tg-item-gallery-holder, .tg-layout-grid .tg-item-gallery-holder, .tg-layout-justified .tg-item-inner, .tg-layout-grid .tg-item-inner { position: relative; display: inline-block; width: 100%; height: 100%; } .tg-layout-masonry .tg-item-inner { position: relative; display: block; width: 100%; height: auto; } .tg-slider-dragged * { cursor: -moz-grabbing; cursor: -webkit-grabbing; } .tg-item.tg-item-reveal .tg-item-inner, .tg-item.tg-item-removed .tg-item-inner, .tg-item.tg-item-index.tg-item-hidden .tg-item-inner, .tg-item.tg-item-reveal .tg-item-settings, .tg-item.tg-item-reveal .tg-item-exclude { opacity: 0.001; } img.tg-item-image { position: relative; display: block; width: 100%; height: auto; } .tg-layout-justified img.tg-item-image { height: 100%; } div.tg-item-image { position: absolute; top: 0; bottom: 0; left: 0; right: 0; border: none; outline: none; border-style: none; background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .tg-layout-masonry .tg-item-gallery-holder { position: relative; display: block; width: 100%; height: auto; } .tg-item-gallery-holder .tg-item-image { -webkit-transition: opacity 0.3s linear; -moz-transition: opacity 0.3s linear; -ms-transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; transition: opacity 0.3s linear; } .tg-item-gallery-holder .tg-item-image { opacity: 0 !important; } .tg-item-gallery-holder .tg-item-image.show { opacity: 1 !important; } .tg-layout-masonry .tg-item-media-holder, .tg-layout-masonry .tg-item-audio-poster { position: relative; display: block; height: auto; width: 100%; max-width: 100%; } .tg-layout-masonry .tg-item-media-inner { position: relative; } .tg-layout-masonry .tg-item-media-inner[data-ratio="4:3"] { padding-bottom: 75%; } .tg-layout-masonry .tg-item-media-inner[data-ratio="16:9"] { padding-bottom: 56.25%; } .tg-layout-masonry .tg-item-media-inner[data-ratio="16:10"] { padding-bottom: 62.5%; } .tg-layout-justified .tg-item-media-holder, .tg-layout-justified .tg-item-media-inner, .tg-layout-grid .tg-item-media-holder, .tg-layout-grid .tg-item-media-inner, .tg-item-video-player, .tg-item-media-poster, .tg-item-audio-poster, .tg-item-soundcloud, .tg-item-youtube, .tg-item-wistia, .tg-item-vimeo { position: absolute; display: block; top: 0; bottom: 0; left: 0; right: 0; width: 100%; max-width: 100%; height: 100%; } .tg-item-vimeo, .tg-item-wistia, .tg-item-youtube, .tg-item-soundcloud { border: none !important; background: transparent !important; } .tg-is-playing .tg-item-vimeo, .tg-force-play .tg-item-vimeo, .tg-is-playing .tg-item-wistia, .tg-force-play .tg-item-wistia, .tg-is-playing .tg-item-youtube, .tg-force-play .tg-item-youtube, .tg-is-playing .tg-item-soundcloud, .tg-force-play .tg-item-soundcloud { background: #000000 !important; } .tg-item .iframe-embed { position: static; margin: 0; line-height: 0; } .main-content .tg-item iframe[src] { opacity: 1; } .tg-item-media-soundcloud { top: 65px; height: auto; } .tg-item-audio-player { display: block; width: 100%; } /*** mediaelement & audio & video***/ .tg-item .mejs-video.mejs-container, .tg-item .mejs-video.mejs-container .mejs-inner, .tg-item .has-media-poster .mejs-inner, .tg-item .me-plugin { position: absolute !important; display: block !important; padding: 0; margin: 0; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; min-height: 100% !important; max-height: 100% !important; } .tg-item .mejs-inner { width: 100%; height: 100%; } .tg-item-media-inner:not(.has-media-poster) .mejs-audio .mejs-controls { position: relative; } .tg-item-media-inner:not(.has-media-poster) .mejs-audio.tg-item-audio-player { position: relative; height: auto !important; } .tg-item-media-inner.has-media-poster .tg-item-audio-player { position: absolute; top: 0; bottom: 0; left: 0; height: 100% !important; width: 100%; } .tg-item-audio-player.mejs-container { background: none; } .tg-item-media-poster, .tg-item-audio-poster, .tg-item-media-holder > div:not(.tg-item-media-inner) { background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .tg-force-play .tg-item-media-poster, .tg-is-playing .tg-item-media-poster, .tg-force-play .tg-item-media-holder > div:not(.tg-item-media-inner), .tg-is-playing .tg-item-media-holder > div:not(.tg-item-media-inner) { opacity: 0; visibility: hidden; overflow: hidden; } .tg-item .tg-item-video-player:not(.mejs-container-fullscreen) .mejs-controls, .tg-item .has-media-poster:not(.no-index) .mejs-container:not(.mejs-container-fullscreen) .mejs-controls { opacity : 0; visibility: visible !important; -webkit-transform: translateY(48px); -moz-transform: translateY(48px); -ms-transform: translateY(48px); -o-transform: translateY(48px); transform: translateY(48px); -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out; -moz-transition: -moz-transform 0.2s ease-in-out, opacity 0.2s ease-in-out; -ms-transition: -ms-transform 0.2s ease-in-out, opacity 0.2s ease-in-out; -o-transition: -o-transform 0.2s ease-in-out, opacity 0.2s ease-in-out; transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; } .tg-item .has-media-poster:not(.no-index) .mejs-container.mejs-audio .mejs-controls { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .tg-item:hover .tg-item-video-player:not(.mejs-container-fullscreen) .mejs-controls, .tg-item:hover .has-media-poster .mejs-container:not(.mejs-container-fullscreen) .mejs-controls { opacity : 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .tg-item .tg-item-audio-poster, .tg-item .no-index .tg-item-audio-player, .tg-item.tg-is-playing .has-media-poster .tg-item-audio-player { z-index: 0; } .tg-item .has-media-poster .tg-item-audio-player, .tg-item .no-index .tg-item-audio-poster, .tg-item.tg-is-playing .tg-item-audio-poster { z-index: -1; } .tg-item:not(.tg-is-playing) .tg-item-audio-poster, .tg-item:not(.tg-is-playing) .tg-item-audio-player.mejs-container { -webkit-transition: z-index 0.3s step-end; -moz-transition: z-index 0.3s step-end; -ms-transition: z-index 0.3s step-end; -o-transition: z-index 0.3s step-end; transition: z-index 0.3s step-end; } .tg-item .mejs-video.mejs-container, .tg-item .has-media-poster .mejs-container { overflow: hidden; } .tg-layout-justified .tg-item .tg-item-media-inner:not(.has-media-poster) .tg-item-audio-player, .tg-layout-grid .tg-item .tg-item-media-inner:not(.has-media-poster) .tg-item-audio-player { position: absolute; bottom: 0; } .tg-item:not(.tg-is-playing) .has-media-poster:not(.no-index) .mejs-container:not(.mejs-container-fullscreen) .mejs-controls { opacity: 0 !important; } .tg-item.tg-is-playing .has-media-poster .mejs-container:not(.mejs-container-fullscreen) .mejs-controls { opacity: 1; } .mejs-offscreen { display: none; } /** force alt woocommerce image hidden & display onover **/ .tg-item .tg-alternative-product-image { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .tg-item :hover .tg-alternative-product-image { opacity: 1; } /* ============================================================ 02. Pagination /* ============================================================ */ .tg-pagination-holder { position: relative; display: inline-block; margin: 0 15px; } .tg-pagination-holder > div:last-child { margin-right: 0; } .tg-pagination-holder .tg-pagination-number { margin: 0; padding: 0; } .tg-pagination-prev, .tg-pagination-next, .tg-pagination-number .tg-page { position: relative; display: inline-block; vertical-align: top; margin: 0 5px 5px 0; } .tg-pagination-prev, .tg-pagination-next, .tg-page-number.prev, .tg-page-number.next { padding: 0 15px; cursor: pointer; } .tg-pagination-number .tg-page:last-child { margin: 0 0 5px 0; } .tg-page-number { position: relative; display: inline-block; vertical-align: top; min-width: 32px; margin: 0 auto; cursor: pointer; text-decoration: none !important; text-align: center; } .tg-page-number.dots { border-color: transparent; cursor: default; } .tg-pagination-number .tg-page-number.tg-loading { opacity: 0.5; cursor: default; } /* ============================================================ 03. Slider buttons /* ============================================================ */ .tg-grid-area-left, .tg-grid-area-right { position: absolute; pointer-events: none; z-index: 3; height: 100%; top: 0; bottom: 0; left: 0; } .tg-grid-area-left .tg-grid-area-inner, .tg-grid-area-right .tg-grid-area-inner { position: relative; display: table; height: 100%; } .tg-grid-area-wrapper { display: table-cell; vertical-align: middle; } .tg-grid-area-left .tg-left-arrow, .tg-grid-area-right .tg-right-arrow { display: block; vertical-align: middle; } .tg-grid-area-right, .tg-grid-area-left .tg-right-arrow, .tg-grid-area-right .tg-right-arrow { left: auto; right: 0; } .tg-left-arrow.tg-disabled, .tg-left-arrow.tg-force-disabled, .tg-right-arrow.tg-disabled, .tg-right-arrow.tg-force-disabled { opacity: 0.5; cursor: default; } .tg-left-arrow, .tg-right-arrow { position: relative; display: inline-block; pointer-events: visible; padding: 0; margin: 0 5px 5px 0; cursor: pointer; text-align: center; } .tg-grid-area-left .tg-left-arrow, .tg-grid-area-right .tg-right-arrow { height: 40px; width: 40px; margin: 0; } .tg-left-arrow i, .tg-right-arrow i { position: relative; display: inline-block; vertical-align: top; width: 32px; } .tg-grid-area-left .tg-left-arrow i, .tg-grid-area-right .tg-right-arrow i { width: 100%; height: 100%; line-height: 40px; } .tg-left-arrow.tg-disabled, .tg-right-arrow.tg-disabled { pointer-events: none; } .tg-left-arrow i:before, .tg-right-arrow i:before { font-family: 'the_grid'; vertical-align: top; } .tg-grid-area-left i:before, .tg-grid-area-right i:before { vertical-align: middle; position: relative; display: block; width: 100%; height: 100%; line-height: 40px; } .tg-left-arrow i:before { content: "\e603"; } .tg-right-arrow i:before { content: "\e601"; } /* ============================================================ 04. Slider bullets /* ============================================================ */ .tg-slider-bullets-holder { position: relative; display: inline-block; margin: 0 20px 5px 15px; line-height: 0; } .tg-slider-bullets { position: relative; display: inline-block; height: 30px; line-height: 0; } .tg-slider-bullets-holder:after, .tg-slider-bullets:after { content:''; display:block; clear: both; } .tg-slider-bullets li { position: relative; display: block; float: left; width: 8px; height: 8px; top: 50%; margin: -4px 12px 0 0; cursor: pointer; line-height: 0; -webkit-perspective: 1000px; -moz-perspective: 1000px; -ms-perspective: 1000px; -o-perspective: 1000px; perspective: 1000px; } .tg-slider-bullets li:last-child { margin-right: 0; } .tg-slider-bullets li span { position: relative; display: block; width: 100%; height: 100%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; cursor: pointer; background: #DDDDDD; -webkit-transition: background-color 0.3s ease; -moz-transition: background-color 0.3s ease; -ms-transition: background-color 0.3s ease; -o-transition: background-color 0.3s ease; transition: background-color 0.3s ease; } .tg-slider-bullets li.tg-active-item span { background: #59585b; } /* ============================================================ 05. Load More Button /* ============================================================ */ .tg-ajax-button-holder { position: relative; display: inline-block; cursor: pointer; margin: 0 15px 5px 15px; } .tg-ajax-button { position: relative; display: inline-block; vertical-align: top; margin: 0 5px 0 0; padding: 0px 15px; white-space: pre; } .tg-ajax-scroll-holder, .no-touch .tg-ajax-scroll-holder { position: absolute; display: block; z-index: 3; margin: 0 auto; padding: 0; bottom: 24px; left: 0; right: 0; opacity: 0; text-align: center; -webkit-transform: translateY(40px); -moz-transform: translateY(40px); -ms-transform: translateY(40px); -o-transform: translateY(40px); transform: translateY(40px); -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease, max-height 0.4s step-end, max-width 0.4s step-end, top 0.4s step-end; -moz-transition: -moz-transform 0.3s ease, opacity 0.3s ease, max-height 0.4s step-end, max-width 0.4s step-end, top 0.4s step-end; -ms-transition: -ms-transform 0.3s ease, opacity 0.3s ease, max-height 0.4s step-end, max-width 0.4s step-end, top 0.4s step-end; -o-transition: -o-transform 0.3s ease, opacity 0.3s ease, max-height 0.4s step-end, max-width 0.4s step-end, top 0.4s step-end; transition: transform 0.3s ease, opacity 0.3s ease, max-height 0.4s step-end, max-width 0.4s step-end, top 0.4s step-end; } .tg-ajax-scroll-holder.tg-loading, .no-touch .tg-ajax-scroll-holder.tg-loading { opacity: 0.95; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease, max-height 0s step-end, max-width 0s step-end, top 0s step-end; -moz-transition: -moz-transform 0.3s ease, opacity 0.3s ease, max-height 0s step-end, max-width 0s step-end, top 0s step-end; -ms-transition: -ms-transform 0.3s ease, opacity 0.3s ease, max-height 0q step-end, max-width 0s step-end, top 0s step-end; -o-transition: -o-transform 0.3s ease, opacity 0.3s ease, max-height 0s step-end, max-width 0s step-end, top 0s step-end; transition: transform 0.3s ease, opacity 0.3s ease, max-height 0s step-end, max-width 0s step-end, top 0s step-end; } .tg-grid-holder .tg-ajax-scroll { position: relative; display: inline-block; margin: 0 auto; padding: 14px 32px; background: #ffffff; color: #777777; font-weight: 600; -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.1); -moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.1); box-shadow: 5px 5px 10px rgba(0,0,0,0.1); } /* ============================================================ 06. Grid Filters /* ============================================================ */ .tg-filters-holder { position: relative; display: inline-block; margin: 0 15px; } .tg-filters-holder > div:last-child { margin-right: 0; } .tg-filter { position: relative; vertical-align: top; display: none; margin: 0 5px 5px 0; cursor: pointer; } .tg-filter.tg-show-filter { display: inline-block; } .tg-filter-name { position: relative; display: inline-block; z-index: 1; vertical-align: top; padding: 0px 15px; } .tg-dropdown-item .tg-filter-name { padding: 0; } .tg-filter-tooltip, .no-touch .tg-filter-tooltip { position: absolute; display: block; z-index: 999; bottom: 100%; left: 50%; width: 20px; min-width: 20px; max-width: 20px; height: 14px; max-height: 14px; min-height: 14px; margin: 0 -14px 6px -14px; padding: 4px; line-height: 15px; font-size: 12px; opacity: 0; text-align: center; pointer-events: none; color: #ffffff !important; background: rgba(0,0,0,.22); -webkit-transform: translateY(14px); -moz-transform: translateY(14px); -ms-transform: translateY(14px); -o-transform: translateY(14px); transform: translateY(14px); -webkit-transition: opacity 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out, -moz-transform 0.2s ease-in-out; -ms-transition: opacity 0.2s ease-in-out, -ms-transform 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out, -o-transform 0.2s ease-in-out; transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; } .tg-filter-tooltip:after { position: absolute; content: ''; width: 0; height: 0; left: 50%; bottom: -5px; margin-left: -5px; border-top: 5px solid rgba(0,0,0,.22); border-left: 5px solid transparent; border-right: 5px solid transparent; } .tg-tooltip-hover, .no-touch .tg-tooltip-hover, .tg-filter:hover .tg-filter-tooltip, .no-touch .tg-filter:hover .tg-filter-tooltip { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } /* ============================================================ 07. Search bar /* ============================================================ */ .tg-search-holder { position: relative; display: inline-block; margin: 0 15px 5px 15px; line-height: 1; } .tg-search-inner { position: relative; display: inline-block; vertical-align: top; } input[type=text].tg-search { position: relative; display: inline-block; vertical-align: top; width: 160px; height: auto; min-height: 30px; min-width: 150px; max-width: 170px; margin: 0 !important; padding: 0 10px 0 0 !important; font-size: 13px; line-height: 30px; box-shadow: none; border: none; border-right: none !important; background: none; outline: 0; -webkit-appearance: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-border-top-right-radius: 0 !important; -webkit-border-bottom-right-radius: 0 !important; -moz-border-radius-topright: 0 !important; -moz-border-radius-bottomright: 0 !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } input[type=text].tg-search:focus { outline: 0; } .tg-search::-webkit-input-placeholder { line-height: 30px; } .tg-search::-moz-placeholder { line-height: 30px; } .tg-search:-ms-input-placeholder { line-height: 30px; } .tg-search-icon { position: relative; display: inline-block; vertical-align: top; width: 30px; text-align: center; font-size: 12px; } .tg-search-icon:before { font-family: 'the_grid'; content: "\e64a"; vertical-align: top; } .tg-search-clear { position: relative; display: inline-block; vertical-align: top; width: 30px; margin: 0; text-align: center; cursor: pointer; } .tg-search-clear:before { font-family: 'the_grid'; content: "\e60e"; vertical-align: top; } /* ============================================================ 08. Sorter /* ============================================================ */ .tg-sorters-holder, .tg-sorter-order { position: relative; display: inline-block; margin: 0 15px; } .tg-sorter-order { vertical-align: top; width: 30px; margin: 0 0 5px 0; text-align: center; cursor: pointer; } .tg-sorter-order i { font-family: 'the_grid'; vertical-align: top; } .tg-icon-sorter-down:before { content: "\e600"; vertical-align: top; } .tg-icon-sorter-up:before { content: "\e608"; vertical-align: top; } .tg-icon-sorter-up { display: none; } .tg-sorter-order[data-asc="true"] .tg-icon-sorter-down { display: none; } .tg-sorter-order[data-asc="true"] .tg-icon-sorter-up { display: block; } /* ============================================================ 09. Dropdown List /* ============================================================ */ .tg-dropdown-holder { position: relative; display: inline-block; vertical-align: top; z-index: 9999; cursor: pointer; min-width: 90px; margin: 0 5px 5px 0; padding: 0 24px; text-align: left; } .tg-dropdown-title, .tg-dropdown-value { position: relative; display: inline-block; vertical-align: top; } .tg-dropdown-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; } .tg-dropdown-list, .no-touch .tg-dropdown-list { position: absolute; display: block; overflow: hidden; height: auto; width: 100%; max-width: 0; max-height: 0; padding: 0; margin: 0; top: 100%; left: 0px; opacity: 0; background: #ffffff; cursor: pointer; -webkit-box-shadow: 0 5px 20px 0 rgba(0,0,0,0.1); -moz-box-shadow: 0 5px 20px 0 rgba(0,0,0,0.1); box-shadow: 0 5px 20px 0 rgba(0,0,0,0.1); -webkit-transform: translateY(40px); -moz-transform: translateY(40px); -ms-transform: translateY(40px); -o-transform: translateY(40px); transform: translateY(40px); -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease, max-height 0.4s step-end, max-width 0.4s step-end, top 0.4s step-end; -moz-transition: -moz-transform 0.3s ease, opacity 0.3s ease, max-height 0.4s step-end, max-width 0.4s step-end, top 0.4s step-end; -ms-transition: -ms-transform 0.3s ease, opacity 0.3s ease, max-height 0.4s step-end, max-width 0.4s step-end, top 0.4s step-end; -o-transition: -o-transform 0.3s ease, opacity 0.3s ease, max-height 0.4s step-end, max-width 0.4s step-end, top 0.4s step-end; transition: transform 0.3s ease, opacity 0.3s ease, max-height 0.4s step-end, max-width 0.4s step-end, top 0.4s step-end; } .tg-dropdown-holder:hover .tg-dropdown-list, .no-touch .tg-dropdown-holder:hover .tg-dropdown-list, .tg-dropdown-list.tg-dropdown-holder-animation { opacity: 1; overflow: hidden; overflow-y: auto; max-width: 100%; max-height: 365px; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease, max-height 0s step-end, max-width 0s step-end, top 0s step-end; -moz-transition: -moz-transform 0.3s ease, opacity 0.3s ease, max-height 0s step-end, max-width 0s step-end, top 0s step-end; -ms-transition: -ms-transform 0.3s ease, opacity 0.3s ease, max-height 0q step-end, max-width 0s step-end, top 0s step-end; -o-transition: -o-transform 0.3s ease, opacity 0.3s ease, max-height 0s step-end, max-width 0s step-end, top 0s step-end; transition: transform 0.3s ease, opacity 0.3s ease, max-height 0s step-end, max-width 0s step-end, top 0s step-end; } .tg-dropdown-list.is-mobile { width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0 !important; top: 0; opacity: 0 !important; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .tg-icon-dropdown-open { position: relative; display: inline-block; vertical-align: top; margin: 0 0 0 10px; } .tg-icon-dropdown-open:before { font-family: 'the_grid'; content: "\e600"; vertical-align: top; } .tg-dropdown-item.tg-filter.tg-show-filter, .tg-dropdown-item, .no-touch .tg-dropdown-item { display: block; list-style: none; padding: 10px 24px; margin: 0; height: auto; font-size: 13px; line-height: 14px; cursor: pointer; text-align: left; border: none; font-weight: normal; border-top: 1px solid rgba(175,175,175,0.16) !important; } .tg-dropdown-item.tg-filter.tg-show-filter:first-child, .tg-dropdown-item:first-child, .no-touch .tg-dropdown-item:first-child { border-top: none; } .tg-dropdown-item.tg-filter { display: none; } /* ============================================================ 10. LightBox /* ============================================================ */ .tolb-holder { position: fixed; display: block; overflow: hidden; z-index: 99999; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background: rgba(0,0,0,0.7); visibility: hidden; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: opacity 0.4s ease, visibility 0.4s ease; -moz-transition: opacity 0.4s ease, visibility 0.4s ease; transition: opacity 0.4s ease, visibility 0.4s ease; } .tolb-holder.tolb-open { opacity: 1; visibility: visible; } .tolb-holder .tolb-inner { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform: matrix3d(0.5,0,0,0,0,0.5,0,0,0,0,1,0,0,0,0,1); -moz-transform: matrix3d(0.5,0,0,0,0,0.5,0,0,0,0,1,0,0,0,0,1); transform: matrix3d(0.5,0,0,0,0,0.5,0,0,0,0,1,0,0,0,0,1); } .tolb-holder.tolb-ready .tolb-inner { -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); -moz-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); } .tolb-holder figure { position: relative; display: inline-block; top: 50%; left: 50%; max-width: 100%; margin: 0 auto; opacity: 0; -webkit-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } .tolb-holder.tolb-iframe .tolb-video:not(.mejs-container-fullscreen) { max-width: 900px; } .tolb-holder.tolb-iframe .tolb-video.mejs-container-fullscreen video { max-width: none; } .tolb-holder.tolb-iframe .tolb-content:before { content: ""; position: relative; display: block; width: 900px; max-width: 900px; padding-bottom: 56.25%; } .tolb-holder.tolb-iframe .tolb-video, .tolb-holder .mejs-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } .tolb-ready figure { -webkit-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } .tolb-holder .tolb-loader { position: absolute; display: none; width: 30px; height: 30px; top: 50%; left: 50%; margin: -18px 0 0 -18px; border-radius: 50%; border-width: 3px; border-right-style: solid; border-top-style: solid; border-bottom-style: solid; border-color: rgba(255,255,255,0.2); border-left: 3px solid #ffffff; -webkit-animation: load 1.1s infinite linear; animation: load 1.1s infinite linear; } .tolb-holder.tolb-loading .tolb-loader { display: block; } body.admin-bar .tolb-loader { margin-top: -2px; } body.admin-bar .tolb-next, body.admin-bar .tolb-prev { padding-top: 16px; } body.admin-bar .tolb-inner { margin-top: 16px; } .tolb-inner figcaption { position: absolute; display: block; width: 100%; height: 40px; margin: 0; line-height: 40px; } .tolb-title { position: relative; display: inline-block; float: left; height: 100%; word-wrap: break-word; font-weight: 600; font-size: 14px; } .tolb-counter { position: relative; display: inline-block; float: right; height: 100%; font-size: 14px; } .tolb-next, .tolb-prev { position: absolute; display: block; left: 0; top: 50%; height: 50px; width: 50px; margin: -25px 0 0 0; opacity: 0.7; } .tolb-next { left: auto; right: 0; } .tolb-next i, .tolb-prev i { position: relative; display: block; width: 100%; height: 100%; text-align: center; margin: 0 auto; font-size: 36px; color: #ffffff; line-height: 50px; font-weight: 900; cursor: pointer; } .tolb-holder .tolb-close { position: absolute; display: block; right: 0; top: -40px; height: 40px; width: 20px; line-height: 40px; text-align: right; font-size: 20px; cursor: pointer; opacity: 0.7; } .tolb-next:hover, .tolb-prev:hover, .tolb-holder .tolb-close:hover, .tolb-holder .tolb-close:hover:before, .tolb-holder.tolb-ready figure { opacity: 1; } .tolb-holder.tolb-loading figure { opacity: 0 !important; } .tolb-holder img { position: relative; display: block; margin: 0; max-width: 100%; max-height: 100%; } .tolb-holder img, .tolb-holder .tolb-video { -webkit-box-shadow: 0 0 40px rgba(0,0,0,0.5); -moz-box-shadow: 0 0 40px rgba(0,0,0,0.5); box-shadow: 0 0 40px rgba(0,0,0,0.5); } .tolb-holder .tolb-video:not(.mejs-container-fullscreen) { background: #000000; } .tolb-holder .tolb-video { max-width: 100%; min-height: 100%; max-height: 100%; } .tolb-next, .tolb-prev, .tolb-holder .tolb-inner, .tolb-holder figure { -webkit-transition: opacity 0.3s linear, -webkit-transform 0.3s ease-in-out; -moz-transition: opacity 0.3s linear, -moz-transform 0.3s ease-in-out; -ms-transition: opacity 0.3s linear, -ms-transform 0.3s ease-in-out; -o-transition: opacity 0.3s linear, -o-transform 0.3s ease-in-out; transition: opacity 0.3s linear, transform 0.3s ease-in-out; } @media screen and (max-width: 782px) { body.admin-bar .tolb-holder .tolb-loader { margin-top: 5px; } body.admin-bar .tolb-next, body.admin-bar .tolb-prev { padding-top: 23px; } body.admin-bar .tolb-inner { margin-top: 23px; } } @-webkit-keyframes load { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes load { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* ============================================================ 11. Instagram Header /* ============================================================ */ .tg-instagram-user-header { position: relative; display: table; width: 100%; padding: 0 0 12px 0; } .tg-instagram-user-image, .tg-instagram-user-desc { position: relative; display: table-cell; vertical-align: middle; } .tg-instagram-user-image { width: 320px; padding: 0 100px 0 70px; box-sizing: border-box; } .tg-instagram-user-info { position: relative; display: block; vertical-align: top; font-size: 15px; line-height: 24px; margin-top: 14px; text-align: left; } .tg-instagram-user-info { position: relative; display: block; vertical-align: top; font-size: 15px; line-height: 24px; margin-top: 14px; text-align: left; } .tg-instagram-user-info:first-child { margin-top: 0; } .tg-instagram-user-image img { position: relative; display: block; overflow: hidden; min-width: 152px; width: 152px; height: 152px; margin: 0; border-radius: 50%; border: 1px solid #cccfd0; background-color: #fbfbfb; box-sizing: border-box; } h2.tg-instagram-user-name, h3.tg-instagram-user-desc-fullname { position: relative; display: inline; font-size: 34px; line-height: 40px; } h2.tg-instagram-user-name { vertical-align: bottom; } .tg-instagram-user-follow { position: relative; display: inline-block; vertical-align: top; line-height: 29px; font-weight: 600; padding: 0 11px; margin: 4px 0 0 20px; border: 1px solid !important; border-color: #4090db !important; border-radius: 3px !important; color: #4090db !important; cursor: pointer; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .tg-instagram-user-follow:hover { border-color: #2d6599 !important; color: #2d6599 !important; } h3.tg-instagram-user-desc-fullname, .tg-instagram-user-desc-url { font-size: 15px; font-weight: 600; line-height: 24px; } .tg-instagram-user-desc-url { color: #125688 !important; } .tg-instagram-user-cout { font-size: 15px; line-height: 16px; margin: 0 40px 0 0; } .tg-instagram-user-cout:last-child { margin: 0; } .tg-instagram-user-cout span:first-child { font-weight: 600; } @media screen and (max-width: 1000px) { .tg-instagram-user-image img { min-width: 130px; width: 130px; height: 130px; } .tg-instagram-user-image { width: 170px; padding: 0 25px; } } @media screen and (max-width: 768px) { .tg-instagram-user-image { width: 120px; } h2.tg-instagram-user-name, h3.tg-instagram-user-desc-fullname { font-size: 20px; line-height: 24px; } .tg-instagram-user-info, h3.tg-instagram-user-desc-fullname, .tg-instagram-user-desc-url, .tg-instagram-user-cout { font-size: 14px; line-height: 18px; } .tg-instagram-user-image img { min-width: 75px; width: 75px; height: 75px; } .tg-instagram-user-cout { margin: 0 20px 0 0; } } @media screen and (max-width: 480px) { .tg-instagram-user-image { vertical-align: top; } .tg-instagram-user-follow { display: block; margin: 6px 20px 0 0; line-height: 24px; text-align: center; } .tg-instagram-user-cout { display: inline-block; width: 33%; margin: 0; text-align: center; } .tg-instagram-user-cout span:first-child { display: block; padding: 17px 0 0 0; border-top: 1px solid #edeeee; } .tg-instagram-user-info:last-child { margin: 40px 0 0 -115px; } .tg-instagram-user-info:nth-child(2) { display: none; } } /* ============================================================ 12. Youtube Header /* ============================================================ */ .tg-youtube-channel-header { position: relative; display: block; background: #ffffff; } .tg-youtube-channel-logo { position: absolute; display: block; z-index: 3; top: 0; left: 22px; width: 100px; height: 100px; background: #ffffff; } .tg-youtube-channel-logo img { width: 100px; height: 100px; } .tg-youtube-channel-banner { position: relative; display: block; height: 195px; background-size: cover; background-position: center center; background-color: #333; } .tg-youtube-channel-desc { position: relative; display: block; padding: 30px 160px 30px 22px; text-align: left; } .tg-youtube-channel-desc-title, .tg-youtube-channel-desc-title a { font-size: 20px; font-weight: 600; text-align: left; } .tg-youtube-channel-desc-caption { line-height: 18px; font-size: 13px; margin: 12px 0 0 0; padding: 0; text-align: left; } .tg-youtube-channel-data { margin: 0 0 0 12px; text-align: left; } .tg-youtube-channel-count { font-size: 14px; } .tg-youtube-channel-count:first-child { margin: 0 8px 0 0; } .tg-youtube-channel-count > span { font-weight: 600 } .tg-youtube-channel-header .tg-youtube-subscribe { position: absolute; right: 22px; top: 225px; min-width: 114px; min-height: 24px; max-height: 24px; border-radius: 2px; background: rgba(0,0,0,0.05); } @media screen and (max-width: 768px) { .tg-youtube-channel-data { position: relative; display: inline-block; width: 100%; margin: 0; } .tg-youtube-channel-desc-title { padding: 0 160px 0 0; } .tg-youtube-channel-desc { position: relative; display: block; padding: 30px 22px 22px; } } /* ============================================================ 13. Vimeo Header /* ============================================================ */ .tg-vimeo-channel-header { position: relative; display: table; padding: 12px 0; } .tg-vimeo-channel-logo { position: relative; display: table-cell; overflow: hidden; vertical-align: middle; width: 150px; height: 150px; padding: 0 40px; box-sizing: content-box; } .tg-vimeo-channel-logo img { width: 100%; height: 100%; border-radius: 100%; } .tg-vimeo-channel-desc { position: relative; display: table-cell; vertical-align: top; padding: 0 22px; text-align: left; } .tg-vimeo-channel-desc-title { display: block; } .tg-vimeo-channel-desc-title, .tg-vimeo-channel-desc-title a { text-align: left; } .tg-vimeo-channel-desc-title a:first-child { font-size: 28px; font-weight: 600; padding: 0 12px 0 0; } .tg-vimeo-channel-desc-website { position: relative; display: inline-block; font-size: 14px; font-weight: normal; } .tg-vimeo-channel-desc-caption { line-height: 18px; font-size: 14px; margin: 12px 0 0 0; padding: 0; text-align: left; } .tg-vimeo-channel-data { position: relative; display: inline-block; margin: 12px 0; padding: 12px 0; text-align: left; background: rgba(11,22,33,0.05); border-radius: 6px; } .tg-vimeo-channel-data:before { content: ""; position: absolute; left: -12px; top: 50%; margin-top: -12px; width: 0; height: 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-right: 12px solid rgba(11,22,33,0.05); } .tg-vimeo-channel-count { position: relative; display: inline-block; font-size: 14px; width: 105px; border-left: 1px solid #d7dbdf; } .tg-vimeo-channel-count:first-child { border-left: none; } .tg-vimeo-channel-count span { display: block; text-align: center; } .tg-vimeo-channel-count span:first-child { font-size: 22px; font-weight: 600; } .tg-vimeo-channel-count span:last-child { font-weight: normal; } @media screen and (max-width: 1000px) { .tg-vimeo-channel-logo { width: 120px; height: 120px; padding: 0 20px; } .tg-vimeo-channel-desc { padding: 0; } .tg-vimeo-channel-count { width: 70px; } .tg-vimeo-channel-count span:first-child { font-size: 16px; } } @media screen and (max-width: 768px) { .tg-vimeo-channel-header, .tg-vimeo-channel-desc-inner, .tg-vimeo-channel-desc-title, .tg-vimeo-channel-desc-title a, .tg-vimeo-channel-data { text-align: center; } .tg-vimeo-channel-header, .tg-vimeo-channel-desc, .tg-vimeo-channel-logo { display: block; margin: 0 auto; } .tg-vimeo-channel-desc-title { padding: 12px; } .tg-vimeo-channel-desc-title a:first-child { display: block; padding: 0; } .tg-vimeo-channel-desc-website { position: relative; display: block; } .tg-vimeo-channel-data:before { display: none; } } /* ============================================================ 14. Font icons /* ============================================================ */ @font-face { font-family: 'the_grid'; src:url('../fonts/the_grid.eot'); src:url('../fonts/the_grid.eot') format('embedded-opentype'), url('../fonts/the_grid.ttf') format('truetype'), url('../fonts/the_grid.woff') format('woff'), url('../fonts/the_grid.svg') format('svg'); font-weight: normal; font-style: normal; } [class^="tg-icon-"], [class*=" tg-icon-"] { font-family: 'the_grid'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .tg-icon-chat-4:before { content: "\e903"; } .tg-icon-eye:before { content: "\e900"; } .tg-icon-chat-2:before { content: "\e901"; } .tg-icon-play-2:before { content: "\e902"; } .tg-icon-google-plus:before { content: "\e61b"; } .tg-icon-settings:before { content: "\e606"; } .tg-icon-arrow-prev:before { content: "\e603"; } .tg-icon-arrow-next:before { content: "\e601"; } .tg-icon-arrow-down:before { content: "\e600"; } .tg-icon-arrow-up:before { content: "\e608"; } .tg-icon-arrow-prev-thin:before { content: "\e604"; } .tg-icon-arrow-next-thin:before { content: "\e602"; } .tg-icon-arrow-up-thin:before { content: "\e609"; } .tg-icon-arrrow-down-thin:before { content: "\e60a"; } .tg-icon-arrows-diagonal:before { content: "\e605"; } .tg-icon-arrows-out-2:before { content: "\e607"; } .tg-icon-cancel:before { content: "\e60e"; } .tg-icon-close:before { content: "\e611"; } .tg-icon-zoom-in:before { content: "\e649"; } .tg-icon-search2:before { content: "\e62f"; } .tg-icon-search3:before { content: "\e62e"; } .tg-icon-link:before { content: "\e620"; } .tg-icon-chain-broken:before { content: "\e610"; } .tg-icon-paperclip:before { content: "\e627"; } .tg-icon-chain:before { content: "\e60f"; } .tg-icon-play:before { content: "\e62b"; } .tg-icon-mail-forward:before { content: "\e623"; } .tg-icon-quote:before { content: "\e62c"; } .tg-icon-shop-bag:before { content: "\e631"; } .tg-icon-shop-bag-2:before { content: "\e632"; } .tg-icon-shop-basket:before { content: "\e633"; } .tg-icon-tag:before { content: "\e638"; } .tg-icon-star:before { content: "\e636"; } .tg-icon-star-o:before { content: "\e637"; } .tg-icon-heart:before { content: "\e61c"; } .tg-icon-heart-o:before { content: "\e61d"; } .tg-icon-facebook:before { content: "\e617"; } .tg-icon-pinterest:before { content: "\e62a"; } .tg-icon-tumblr:before { content: "\e63a"; } .tg-icon-twitter:before { content: "\e63b"; } .tg-icon-youtube-play:before { content: "\e648"; } .tg-icon-check:before { content: "\e612"; } .tg-icon-add:before { content: "\e60d"; } .tg-icon-reply:before { content: "\e60c"; } .tg-icon-chat-3:before { content: "\e613"; } .tg-icon-chat:before { content: "\e614"; } .tg-icon-soundcloud:before { content: "\e616"; } .tg-icon-comment-o:before { content: "\e615"; } .tg-icon-search:before { content: "\e64a"; }