/**************/ /*** LAYOUT ***/ /**************/ /* Feed wrapper */ .cff-wrapper:after{ content: ""; display: table; clear: both; } /* Feed container */ #cff { float: left; width: 100%; margin: 0 auto; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #cff:after{ content: ""; display: table; clear: both; } .cff-wrapper-ctn{float: left;} .cff-wrapper-ctn.cff-wrapper-fixed-height{overflow: auto;} .cff-wrapper-ctn, #cff .cff-posts-wrap, #cff .cff-masonry-posts{ position: relative; clear: both; height: 100%; top: 0; bottom: 0; width: 100%; box-sizing: border-box; } /* Individual post item */ #cff .cff-item{ float: left; width: 100%; clear: both; padding: 20px 0 15px 0; margin: 0; border-bottom: 1px solid #ddd; } #cff .cff-item:first-child{ padding-top: 0; } #cff .cff-item.cff-box, #cff .cff-item.cff-box:first-child{ padding: 15px; margin: 8px 0; background: rgba(255,255,255,0.5); border: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #cff.cff-masonry .cff-item.cff-box{ margin-left: 1.5%; margin-right: 1.5%; } #cff .cff-item.cff-shadow{ box-shadow: 0 0 10px 0 rgba(0,0,0,0.15); -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.15); -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.15); } #cff.cff-masonry{ position: relative; margin-bottom: 50px; /* To account for the load more button */ } .cff-masonry .cff-load-more{ display: none; } /* Feed Header */ .cff-header{ width: 100%; margin: 0 0 15px 0; padding: 0; line-height: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: flex; align-items: center; } .cff-header .fa{ float: left; margin-right: 10px; } .cff-header span{ /*float: left;*/ display: table-cell; vertical-align: middle; } .cff-header svg { width: 1em; height: 1em; margin-right: 10px; } /*************** Custom FB Header ***************/ .cff-wrapper .cff-visual-header { margin-bottom: 24px !important; } /* Cover and like counter */ .cff-wrapper .cff-visual-header .cff-header-hero { width: 100%; height: 300px; position: relative; } .cff-wrapper .cff-visual-header .cff-header-hero img{ display: none; } .cff-wrapper .cff-visual-header .cff-likes-box { position: absolute; bottom: 10px; right: 10px; padding: 5px; background: #eee; line-height: 1; border-radius: 2px; color: #445790; } .cff-wrapper .cff-visual-header .cff-likes-box .cff-square-logo { float: left; display: inline-block; line-height: 0; } .cff-wrapper .cff-visual-header .cff-likes-box .cff-square-logo svg { width: 18px; height: 18px; vertical-align: top; } .cff-wrapper .cff-visual-header .cff-likes-box .cff-likes-count { float: left; display: inline-block; margin-left: 8px; vertical-align: top; font-size: 15px; line-height: 20px; } /* Avatar and text */ .cff-wrapper .cff-visual-header .cff-header-inner-wrap { position: relative; display: block; text-decoration: none !important; } .cff-wrapper .cff-visual-header .cff-header-inner-wrap a { color: inherit !important; border: 0; } .cff-wrapper .cff-visual-header .cff-header-img img { display: block; width: 100px; border-radius: 3px; padding: 0; margin: 0; } .cff-wrapper .cff-visual-header.cff-has-cover .cff-header-img img { border: 2px solid #fff; } .cff-wrapper .cff-visual-header .cff-header-img { position: absolute; display: inline-block; line-height: 1; } .cff-wrapper .cff-visual-header.cff-has-cover .cff-header-img { top: -25px; left: 10px; } .cff-wrapper .cff-visual-header .cff-header-text { display: inline-block; float: left; margin: 20px 0 0 120px; } #cff .cff-visual-header .cff-header-text h3, .cff-wrapper .cff-visual-header .cff-header-text h3{ display: inline-block; width: auto; margin: 0 8px 0 0; padding: 0; font-size: 1.2em; line-height: 1.2em; } .cff-wrapper .cff-visual-header .cff-header-text{ padding-top: 10px; margin: 0; } .cff-wrapper .cff-visual-header.cff-has-name { min-height: 100px; } .cff-wrapper .cff-visual-header.cff-has-cover.cff-has-name .cff-header-text { min-height: 75px; } .cff-wrapper .cff-visual-header.cff-has-name .cff-header-text { margin-left: 120px; } .cff-wrapper .cff-visual-header.cff-has-cover.cff-has-name .cff-header-text{ margin-left: 125px; } .cff-wrapper .cff-visual-header.cff-has-name .cff-header-text{ padding-top: 30px; } .cff-wrapper .cff-visual-header.cff-has-name.cff-has-about .cff-header-text, .cff-wrapper .cff-visual-header.cff-has-name.cff-has-cover .cff-header-text{ padding-top: 10px; } #cff .cff-visual-header .cff-header-inner-wrap .cff-bio, .cff-wrapper .cff-visual-header .cff-header-inner-wrap .cff-bio { display: block; width: 100%; clear: both; margin: 3px 0 0 0; padding: 0; line-height: 1.2em; } .cff-wrapper .cff-visual-header .cff-header-name{ float: left; padding: 0 5px 2px 0; } .cff-wrapper .cff-visual-header .cff-bio-info { font-size: .9em; line-height: 1.7; } .cff-wrapper .cff-visual-header .cff-bio-info svg { width: 1em; vertical-align: middle; position: relative; top: -2px; } .cff-posts-count svg { padding-right: 3px; } .cff-header-text:after, .cff-header-inner-wrap:after{ display: table; clear: both; content: " "; } /******************/ /*** TYPOGRAPHY ***/ /******************/ /*See more/less links*/ #cff .cff-less{ display: none; } /* Links */ #cff a { text-decoration: none; } #cff a:hover, #cff a:focus { text-decoration: underline; } #cff .cff-html5-video, #cff .cff-photo, #cff .cff-album-cover, #cff .cff-event-thumb, #cff .cff-iframe-wrap, #cff .cff-vidLink{ text-decoration: none; border: none; } /* Post titles and body text */ #cff h3, #cff h4, #cff h5, #cff h6, #cff p{ float: left; width: 100%; clear: both; padding: 0; margin: 5px 0; line-height: 1.4; word-wrap: break-word; } /* Date */ #cff .cff-date{ float: left; width: 100%; min-width: 50px; font-size: 11px; } #cff .cff-date.cff-date-below, #cff .cff-timeline-event .cff-date.cff-date-below{ margin: 5px 0 0 0; } /************/ /***AUTHOR***/ /************/ #cff .cff-author, #cff-lightbox-wrapper .cff-author{ float: left; clear: both; margin: 0 0 15px 0; padding: 0; line-height: 1.2; width: 100%; } #cff .cff-author a, #cff-lightbox-wrapper .cff-author a{ text-decoration: none; border: none; } #cff .cff-author-img, #cff-lightbox-wrapper .cff-author-img{ float: left; width: 40px; height: 40px; margin: 0 0 0 -100% !important; font-size: 0; background: #eee; background: url('../img/cff-sprite.png') no-repeat -132px -50px; border-radius: 40px; } #cff .cff-author-img.cff-no-consent img { display: none; } .cff-no-consent .cff-header-text { margin-left: 0 !important; } .cff-no-consent .cff-header-img, .cff-no-consent .cff-header-hero{ display: none !important; } #cff .cff-author img, #cff-lightbox-wrapper .cff-author img{ float: left; margin: 0 !important; padding: 0 !important; border: none !important; font-size: 0; border-radius: 40px; } #cff .cff-author .cff-author-text span.cff-page-name, #cff-lightbox-wrapper .cff-author .cff-author-text span.cff-page-name{ display: table-cell; vertical-align: middle; height: 40px; margin: 0; font-weight: bold; /* For when there's no date immediately under author: */ padding-left: 50px; float: none; } #cff .cff-author a, #cff-lightbox-wrapper .cff-author a{ text-decoration: none; } #cff .cff-author .cff-story, #cff-lightbox-wrapper .cff-author .cff-story{ font-weight: normal; } /* Author Date */ #cff .cff-author .cff-author-text, #cff-lightbox-wrapper .cff-author .cff-author-text{ float: left; width: 100%; min-height: 40px; } #cff .cff-author .cff-page-name, #cff .cff-author .cff-date, #cff-lightbox-wrapper .cff-author .cff-page-name, #cff-lightbox-wrapper .cff-author .cff-date{ float: left; clear: both; width: auto; margin: 0 0 0 50px !important; font-weight: bold; line-height: 1.2; } #cff .cff-author .cff-date, #cff-lightbox-wrapper .cff-author .cff-date{ color: #9197a3; font-weight: normal; font-size: 11px; margin-top: 1px !important; margin-bottom: 0px !important; } #cff .cff-author.cff-no-author-info .cff-date, #cff-lightbox-wrapper .cff-author.cff-no-author-info .cff-date{ margin-top: 14px !important; } #cff .cff-author.cff-no-author-info .cff-author-img, #cff-lightbox-wrapper .cff-author.cff-no-author-info .cff-author-img{ width: 40px; height: 40px; background: url('../img/cff-sprite.png') no-repeat -132px -50px; } #cff .cff-author .cff-page-name.cff-author-date, #cff-lightbox-wrapper .cff-author .cff-page-name.cff-author-date{ float: left; padding: 3px 0 0 0; font-size: 14px; } /* Description */ #cff .cff-post-desc, #cff-lightbox-wrapper .cff-post-desc{ line-height: 1.3; } #cff span.cff-post-desc, #cff-lightbox-wrapper span.cff-post-desc{ display: block; } #cff .cff-post-text .cff-post-desc, #cff-lightbox-wrapper .cff-post-desc{ margin: 5px 0; border-left: 2px solid #ddd; border-left: 2px solid rgba(0,0,0,0.1); padding-left: 8px; } /*************/ /*** MEDIA ***/ /*************/ /*Content wraper*/ #cff .cff-text-wrapper{ float: right; width: 77%; margin: 0; padding: 0; } #cff .cff-break-word{ word-break: break-all; } /*** PHOTOS ***/ #cff .cff-item img{ border: none; } #cff .cff-byline{ font-size: 12px; display: block; margin: -5px 0 10px 0; } #cff .cff-photo{ max-width: 100%; float: left; display: block; position: relative; margin: 0; } #cff .cff-photo span{ display: block; } #cff .cff-photo:after, #cff .cff-event-thumb:after, #cff .cff-html5-video:after { border: 1px solid rgba(0, 0, 0, .1); bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; } #cff .cff-media-above{ margin-bottom: 7px; } #cff .cff-photo img{ float: left; max-width: 100%; height: auto; margin: 0 !important; padding: 0 !important; } #cff .cff-photo .cff-album-icon{ position: absolute; z-index: 5; bottom: 5px; right: 5px; height: 22px; background: #000 url('../img/cff-sprite.png') no-repeat -49px -38px; background: rgba(0,0,0,0.7) url('../img/cff-sprite.png') no-repeat -49px -38px; color: #fff; font-size: 12px; margin: 0; padding: 0 0 0 26px; line-height: 22px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; box-shadow: 0 0 1px 0 rgba(255,255,255,0.8); -moz-box-shadow: 0 0 1px 0 rgba(255,255,255,0.8); -webkit-box-shadow: 0 0 1px 0 rgba(255,255,255,0.8); } /* Multiple image attachments */ #cff .cff-photo.cff-multiple{ width: 100%; } #cff .cff-multiple .cff-crop{ overflow: hidden; } #cff .cff-main-image.cff-crop{ height: 300px; /* Calculated dynamically in JS */ } #cff .cff-img-attachments{ width: 100%; float: left; clear: both; } /* Attachment layouts */ #cff .cff-img-layout-2 .cff-img-wrap{ margin: 0; } #cff .cff-img-layout-2 .cff-img-wrap.cff-main-image{ margin: 0 0 0.5% 0; } #cff .cff-img-layout-2.cff-portrait .cff-img-wrap{ width: 49.75%; float: left; } #cff .cff-img-layout-2.cff-portrait .cff-img-wrap.cff-main-image{ margin: 0 0.5% 0 0; } #cff .cff-img-layout-3 .cff-img-attachments .cff-img-wrap{ width: 49.75%; margin: 0.5% 0.25% 0 0.25%; float: left; } #cff .cff-img-layout-4 .cff-img-attachments .cff-img-wrap{ width: 33%; margin: 0.5% 0.25% 0 0.25%; float: left; } /* Small layouts */ #cff .cff-small-layout.cff-img-layout-2 .cff-img-wrap.cff-main-image{ margin: 0 0 1% 0; } #cff .cff-small-layout.cff-img-layout-2.cff-portrait .cff-img-wrap{ width: 49.5%; } #cff .cff-small-layout.cff-img-layout-2.cff-portrait .cff-img-wrap.cff-main-image{ margin: 0 1% 0 0; } #cff .cff-small-layout.cff-img-layout-3 .cff-img-attachments .cff-img-wrap{ width: 49.5%; margin: 1% 0.5% 0 0.5%; } #cff .cff-small-layout.cff-img-layout-4 .cff-img-attachments .cff-img-wrap{ width: 32.5%; margin: 1% 0.5% 0 0.5%; } /* Remove left and right margins so images are flush */ #cff .cff-img-layout-3 .cff-img-attachments .cff-img-wrap:first-child, #cff .cff-img-layout-4 .cff-img-attachments .cff-img-wrap:first-child{ margin-left: 0; } #cff .cff-img-layout-3 .cff-img-attachments .cff-img-wrap:last-child, #cff .cff-img-layout-4 .cff-img-attachments .cff-img-wrap:last-child{ margin-right: 0; } #cff .cff-img-layout-2:after, #cff .cff-img-layout-3:after, #cff .cff-img-layout-4:after{ border: none; } /* Add border to images */ #cff .cff-img-wrap{ position: relative; } #cff .cff-img-wrap:after{ border: 1px solid rgba(0, 0, 0, .1); bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; } /* Crop attachment images */ #cff .cff-img-attachments .cff-crop{ width: 100%; height: 100px; display: block; float: left; position: relative; border: none; } #cff .cff-img-attachments .cff-crop img{ visibility: visible; } /* More attachments number tile */ #cff .cff-more-attachments, .cff-gdpr-overlay{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.4); } #cff .cff-more-attachments span{ position: absolute; width: 100%; text-align: center; top: 50%; left: 0; height: 30px; margin-top: -15px; line-height: 30px; color: #fff; font-size: 30px; } #cff .cff-small-layout .cff-more-attachments span{ font-size: 20px; } /* 2 img layout */ #cff .cff-photo.cff-img-layout-2 .cff-crop, #cff .cff-html5-video.cff-img-layout-2 .cff-crop{ height: 150px; } #cff .cff-photo.cff-multiple .cff-album-icon{ display: none; } /*** GRID LAYOUT ***/ /*Album*/ #cff .cff-album-item{ float: left; width: 100%; margin: 0 0 20px 0; padding: 0; text-align: center; } /*2 col*/ #cff .cff-album-item.cff-col-2{ width: 47.5%; width: 45%\9; margin-right: 5%; } #cff .cff-album-item.cff-col-2:nth-of-type(2n){ margin-right: 0; } /*3 col*/ #cff .cff-album-item.cff-col-3{ width: 30.3%; width: 28.83%\9; margin-right: 4.5%; } #cff .cff-album-item.cff-col-3:nth-of-type(3n){ margin-right: 0; } /*4 col*/ #cff .cff-album-item.cff-col-4{ width: 22%; width: 21%\9; margin-right: 4%; } #cff .cff-album-item.cff-col-4:nth-of-type(4n){ margin-right: 0; } /*5 col*/ #cff .cff-album-item.cff-col-5{ width: 17.2%; width: 16.5%\9; margin-right: 3.5%; } #cff .cff-album-item.cff-col-5:nth-of-type(5n){ margin-right: 0; } /*6 col*/ #cff .cff-album-item.cff-col-6{ width: 14.16%; width: 13.6%\9; margin-right: 3%; } #cff .cff-album-item.cff-col-6:nth-of-type(6n){ margin-right: 0; } /*7 col*/ #cff .cff-album-item.cff-col-7{ width: 12.14%; width: 11.78%\9; margin-right: 2.5%; } #cff .cff-album-item.cff-col-7:nth-of-type(7n){ margin-right: 0; } /*8 col*/ #cff .cff-album-item.cff-col-8{ width: 10.75%; width: 10.5%\9; margin-right: 2%; } #cff .cff-album-item.cff-col-8:nth-of-type(8n){ margin-right: 0; } /*Narrow/mobile - force 2 col layout*/ #cff.narrow .cff-album-item.cff-col-3, #cff.narrow .cff-album-item.cff-col-4, #cff.narrow .cff-album-item.cff-col-5, #cff.narrow .cff-album-item.cff-col-6, #cff.narrow .cff-album-item.cff-col-7, #cff.narrow .cff-album-item.cff-col-8{ width: 47.5%; width: 45%\9; margin-right: 5%; } #cff.narrow .cff-album-item.cff-col-3:nth-of-type(2n), #cff.narrow .cff-album-item.cff-col-4:nth-of-type(2n), #cff.narrow .cff-album-item.cff-col-5:nth-of-type(2n), #cff.narrow .cff-album-item.cff-col-6:nth-of-type(2n), #cff.narrow .cff-album-item.cff-col-7:nth-of-type(2n), #cff.narrow .cff-album-item.cff-col-8:nth-of-type(2n){ margin-right: 0; } /*Album image container*/ #cff .cff-album-item .cff-album-cover, #cff .cff-photo.cff-crop, #cff .cff-main-image.cff-crop{ width: 100%; height: 200px; display: block; float: left; position: relative; border: none; overflow: hidden; } #cff.cff-masonry .cff-album-item .cff-album-cover{ height: auto; float: none; overflow: visible; line-height: 0; } #cff .cff-album-item .cff-album-cover img, #cff .cff-new .cff-crop img{ visibility: hidden; opacity: 0; } #cff.cff-masonry .cff-album-item .cff-album-cover img{ visibility: visible; opacity: 1; } #cff .cff-album-item.cff-video .cff-album-cover img{ opacity: 0; } #cff.cff-disable-liquid .cff-album-item .cff-album-cover{ height: auto; } #cff.cff-masonry .cff-album-item.cff-video .cff-album-cover img, #cff.cff-disable-liquid .cff-album-item .cff-album-cover img{ visibility: visible; opacity: 1; } #cff.cff-nojs .cff-album-item .cff-album-cover img{ height: 100%; /* Used when the JS file doesn't run (eg, ajax theme) so the images still show at full height */ visibility: visible; } #cff.cff-nojs .cff-new .cff-crop img{ visibility: visible; } #cff .cff-main-image.cff-crop, #cff .cff-html5-video.cff-multiple .cff-main-image{ overflow: hidden; float: none; } #cff .cff-html5-video.cff-multiple .cff-main-image:not(.cff-crop){ display: block; height: auto !important; } #cff .cff-html5-video.cff-img-layout-2 .cff-img-wrap{ display: block; } /* Portrait video */ #cff .cff-html5-video.cff-multiple.cff-portrait .cff-main-image { float: left; } /* Fade in album covers when loaded */ #cff .cffFadeIn{ opacity: 1; transition: all 0.1s ease; } /*Image border*/ #cff .cff-album-item .cff-album-cover:after { border: 1px solid rgba(0, 0, 0, .1); bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; } /*Album info*/ #cff .cff-album-item .cff-album-info{ width: 100%; height: 70px; float: left; clear: both; } /*Album name*/ #cff .cff-album-item h4{ font-size: 14px; line-height: 1.2; margin: 10px 0 0 0; padding: 0; } /*Number of photos*/ #cff .cff-album-item p{ font-size: 12px; color: gray; margin: 5px 0 0 0; } #cff p.cff-empty-album{ display: inline !important; margin: 0 !important; padding: 0 !important; height: 0 !important; line-height: 0 !important; width: 0 !important; clear: none !important; } /*** VIDEO ***/ /* Embedded videos */ #cff .cff-embed-wrap{ float: left; width: 100%; margin-top: 5px; } #cff .cff-iframe-wrap{ float: left; clear: both; margin: 5px 0; width: 100%; position: relative; padding-bottom: 62%; } #cff iframe{ border: 0; } #cff .cff-iframe-wrap iframe{ position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; } #cff .cff-iframe-img{ display: none; } /* Soundcloud iframe */ #cff .cff-soundcloud, #cff .cff-spotify{ margin: 10px 0 0 0; } #cff .cff-desc-wrap{ float: left; width: 100%; } #cff .cff-embedded-video .cff-post-text{ margin: 0 0 15px 0; } /* Narrow embedded videos */ #cff.narrow .cff-embedded-video .cff-iframe-wrap, #cff.narrow .cff-embedded-video .cff-text-wrapper{ width: 100%; } #cff.narrow .cff-embedded-video .cff-iframe-wrap{ padding-bottom: 62%; } /* Facebook Video Player embedded in feed */ #cff .cff-video-player iframe, #cff .cff-video-player .fb-video{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } /* Link to an external video - Contains screenshot of video and play button */ #cff .cff-html5-video, #cff video{ float: left; clear: left; position: relative; width: 100%; margin: 0; padding: 0; overflow: hidden; } /* Fixes issue with HTML5 video controls now displaying when playing videos in feed (lightbox disabled) */ #cff video{ z-index: 1; } #cff .cff-vidLink{ float: left; clear: both; position: relative; z-index: 1; width: 100%; max-width: 100%; display: -moz-inline-stack; display: inline-block; vertical-align: top; zoom: 1; *display: inline; } /* Video screenshot/poster image */ #cff .cff-vidLink .cff-poster{ width: 100%; height: auto; float: left; } /* Video play button */ #cff .cff-playbtn{ position: absolute; z-index: 9; background: #141B38; background: rgba(0,0,0,0.7); top: 50%; left: 50%; margin-top: -28px; margin-left: -28px; padding: 13px 16px; font-size: 30px; color: #fff; font-style: normal !important; width: 32px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /* IE7 and under */ *width: 47px; *height: 51px; *padding: 0; *background: #000 url('../img/cff-sprite.png') no-repeat -83px -32px; } /* Play button hover state */ #cff .cff-html5-play:hover .cff-playbtn, #cff .cff-html5-play:focus .cff-playbtn, #cff .cff-html5-video .cff-playbtn:hover{ background: #141B38; cursor: pointer; /* IE7 and under */ *background: #000 url('../img/cff-sprite.png') no-repeat -83px -32px; } #cff.cff .cff-posts-wrap svg.cff-playbtn{ width: 1em; height: 1em; font-size: 56px; padding: 14px 12px; } /* If it's a video with no poster image */ #cff .cff-desc-wrap.cff-no-image{ float: right; width: 86%; } #cff .cff-playbtn-solo{ width: 10%; float: left; margin-top: 5px; } #cff .cff-playbtn.no-poster, #cff.cff-half-layout .cff-playbtn.no-poster, #cff.cff-thumb-layout .cff-playbtn.no-poster{ position: relative; top: 0; left: 0; margin: 0; } /*HTML5 video play button*/ .cff-html5-play{ display: block; position: absolute; z-index: 8; width: 100%; top: 0; right: 0; bottom: 0; left: 0; } #cff .cff-video-player iframe, #cff .cff-video-player .fb-video { z-index: 1; } /* Videos only play button */ #cff.cff-thumb-layout .cff-video .cff-playbtn, #cff.cff-half-layout .cff-video .cff-playbtn{ margin-top: -22px; margin-left: -23px; padding: 11px 13px; font-size: 24px; } /* Link */ #cff .cff-expand{ display: none; white-space: normal; } #cff .cff-expand a{ font-size: 11px; font-weight: normal; } /*Link image*/ #cff .cff-shared-link{ float: left; clear: both; width: 100%; padding: 8px; margin: 10px 0 5px 0; /* IE8 */ background: #f9f9f9; border: 1px solid #d9d9d9; background: rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.07); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #cff .cff-no-styles{ background: none; border: none; padding: 0; } #cff .cff-link{ float: left; clear: both; border: none; max-width: 20%; margin-right: 3%; } #cff .cff-link:hover, #cff .cff-link:focus{ text-decoration: none; } #cff .cff-link img{ width: 100%; max-width: 100%; float: left; margin: 0 !important; padding: 0 !important; border: none !important; } /*Link text*/ #cff .cff-link-title{ float: left; clear: both; width: 100%; display: block; font-weight: bold; } #cff p.cff-link-title{ margin: 0; } #cff .cff-text-link{ float: left; clear: none; width: 100%; padding: 0 0 5px 0; width: 72%; } #cff .cff-link-caption{ font-size: 12px; margin: 0; } #cff .cff-text-link.cff-no-image{ width: 100% !important; } #cff .cff-shared-link .cff-post-desc{ margin-bottom: 0; } /* Full-size link images - full-width layout */ #cff .cff-full-size .cff-link{ width: 100%; max-width: 100%; margin-right: 0%; margin-bottom: 5px; text-align: center; } #cff .cff-full-size .cff-link img{ width: auto; float: none; } #cff .cff-full-size .cff-text-link{ width: 100%; } /* Feed events */ #cff .cff-details, #cff-lightbox-wrapper .cff-details{ float: left; clear: none; width: 77%; margin-left: 3%; padding: 0 0 10px 0; } #cff .cff-timeline-event .cff-details, #cff-lightbox-wrapper .cff-details{ width: 100%; margin: 0; padding: 0; } #cff-lightbox-wrapper .cff-details{ padding-bottom: 20px; } #cff .cff-timeline-event .cff-timeline-event-title, #cff .cff-timeline-event .cff-date, #cff .cff-timeline-event .cff-where, #cff .cff-timeline-event .cff-info, #cff-lightbox-wrapper .cff-timeline-event-title, #cff-lightbox-wrapper .cff-date, #cff-lightbox-wrapper .cff-where{ display: block; } #cff-lightbox-wrapper .cff-info{ display: none; } #cff .cff-timeline-event .cff-date, #cff-lightbox-wrapper .cff-date{ margin: 0; } /* Event date. Uses bold tags so can target in JS */ #cff .cff-timeline-event b, #cff .cff-event b, #cff-lightbox-wrapper b{ font-weight: normal; } /* Hide end date and show in JS if different then start date */ #cff .cff-timeline-event .cff-end-date k, #cff .cff-event .cff-end-date k, #cff-lightbox-wrapper .cff-end-date k, #cff-lightbox-wrapper .cff-end-date k{ display: none; } #cff .cff-timeline-event .cff-post-text{ padding-bottom: 5px; } #cff .cff-event-thumb{ position: relative; width: 100%; float: left; clear: none; margin: 0; } #cff .cff-event-thumb img{ float: left; overflow: hidden; width: 100%; height: auto; margin: 0 !important; padding: 0 !important; border: none !important; } /* Timeline event which has cover photo */ #cff .cff-event-thumb.cff-has-cover{ width: 100%; padding: 0; } #cff .cff-details.cff-has-cover{ width: 100%; margin: 5px 0 0 0; } #cff .cff-details h5{ margin: 0 0 5px 0; padding: 0; font-size: 16px; } #cff .cff-details p{ font-size: 14px; } #cff .cff-details .cff-info{ padding: 10px 0 0 0; line-height: 1.2; clear: both; } #cff .cff-details .cff-where{ clear: both; } #cff .cff-details .cff-where, #cff .cff-details .cff-when{ white-space: normal !important; } #cff .cff-timeline-event .cff-text-wrapper { /*width: 100% !important;*/ } /* Events only */ #cff .cff-event .cff-photo{ margin-top: 5px; } #cff .cff-event .cff-photo img{ width: 100%; max-width: 100%; height: auto; margin: 0; } #cff .cff-event .cff-details { padding: 0; } #cff.cff-half-layout .cff-event .cff-details{ float: right; width: 47%; } #cff .cff-event .cff-meta-links{ float: right; clear: both; margin: 5px 0 0 0; } #cff .cff-event .cff-meta-links a{ float: left; padding: 0 10px; border-left: 1px solid #ccc; } #cff .cff-event .cff-meta-links a:first-child{ border: none; } #cff .cff-no-events{ width: 100%; text-align: center; } /* Multiple/recurring dates */ #cff .cff-event .cff-date{ position: relative; } #cff .cff-more-dates{ height: 16px; margin: 0 0 0 10px; padding: 2px 5px; border: 1px solid #ddd; font-size: 12px; text-decoration: none; border-radius: 3px; } #cff .cff-more-dates:hover{ background: rgba(0,0,0,0.05); text-decoration: none; } #cff .cff-multiple-dates{ display: none; position: absolute; z-index: 10; top: 30px; left: 0; max-height: 150px; padding: 8px 20px 8px 12px; margin: 0 0 0 -12px; color: #333; overflow-y: auto; background: rgba(255,255,255,0.95); border-radius: 3px; border: 1px solid #ddd; box-shadow: 0 0 10px 0 rgba(0,0,0,0.1); -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.1); -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.1); } #cff .cff-multiple-date{ display: block; } .cff-event-place, .cff-event-street{ display: block; } .cff-event-zip{ margin-left: 6px; } .cff-event-map-link{ margin-left: 4px; } /* Note */ #cff .cff-note-title{ display: block; font-weight: bold; padding-bottom: 5px; } /*****************/ /*** POST META ***/ /*****************/ /* Meta container */ #cff .cff-meta-wrap{ float: left; width: 100%; margin: 5px 0 0 0; padding: 0; } #cff .cff-meta, #cff-lightbox-wrapper .cff-meta{ float: left; clear: both; list-style-type: none; padding: 10px 0 !important; margin: 0 !important; } /* Meta list items (likes, comments, shares) */ #cff .cff-meta li, #cff-lightbox-wrapper .cff-meta li{ float: left; width: auto; display: block; list-style-type: none !important; margin: 0 10px 0 0 !important; padding: 0 !important; font-size: 11px; line-height: 16px !important; background: none !important; } #cff .cff-meta li:before, #cff-lightbox-wrapper .cff-meta li:before{ content: none !important; } /* Icons */ .cff-icon, .cff-icon svg{ width: 16px; height: 16px; transition: all 0.1s ease; } /* Make reaction faces slightly bigger for clarity */ .cff-haha, .cff-wow, .cff-sad, .cff-angry, .cff-haha svg, .cff-wow svg, .cff-sad svg, .cff-angry svg{ width: 17px; height: 17px; } #cff .cff-icon, #cff .cff-reactions-count .cff-like, #cff-lightbox-wrapper .cff-icon, #cff-lightbox-wrapper .cff-reactions-count .cff-like{ display: block; float: left; position: relative; z-index: 2; margin: 0; margin-left: 3px; } #cff .cff-icon svg, #cff-lightbox-wrapper .cff-icon svg{ z-index: 2; } #cff .cff-meta .cff-count, #cff-lightbox-wrapper .cff-meta .cff-count{ position: relative; z-index: 2; margin-left: 5px; } #cff .cff-replace, #cff-lightbox-wrapper .cff-replace{ display: none; } /*Light icons*/ #cff .cff-comments-box .cff-comments .cff-icon, #cff .cff-comments-box .cff-likes .cff-icon, #cff-lightbox-wrapper .cff-comments-box .cff-comments .cff-icon, #cff-lightbox-wrapper .cff-comments-box .cff-likes .cff-icon{ margin: 0 5px 0 0; } /* Reactions */ #cff .cff-reactions-count .cff-like, #cff .cff-love, #cff .cff-haha, #cff .cff-wow, #cff .cff-sad, #cff .cff-angry, #cff .cff-reactions-count svg, #cff-lightbox-wrapper .cff-reactions-count .cff-like, #cff-lightbox-wrapper .cff-love, #cff-lightbox-wrapper .cff-haha, #cff-lightbox-wrapper .cff-wow, #cff-lightbox-wrapper .cff-sad, #cff-lightbox-wrapper .cff-angry, #cff-lightbox-wrapper .cff-reactions-count svg{ display: block; float: left; position: relative; margin: 0 0 0 1px; z-index: 2; } #cff-lightbox-wrapper .cff-comments-box .cff-reactions-count .cff-icon { margin-right: 3px; } /* Icon color theme (light) */ #cff .cff-icon path, #cff-lightbox-wrapper .cff-icon path{ fill: rgba(0,0,0,0.4); } #cff .cff-reaction-one path, #cff .cff-reaction-two path, #cff .cff-reactions-count path, #cff-lightbox-wrapper .cff-reaction-one path, #cff-lightbox-wrapper .cff-reaction-two path, #cff-lightbox-wrapper .cff-reactions-count path{ fill: rgba(0,0,0,0.4); } #cff svg.cff-svg-bg, #cff-lightbox-wrapper svg.cff-svg-bg, #cff .cff-reactions-count .cff-svg-bg, #cff .cff-reactions-count .cff-svg-bg-dark{ position: absolute; left: 0; top: 0; z-index: -1; } /* Icon BG (white) */ #cff .cff-svg-bg path, #cff-lightbox-wrapper .cff-svg-bg path{ fill: rgba(255,255,255,0.7); } /* Icon BG (dark) */ #cff .cff-svg-bg-dark .cff-svg-bg path, #cff-lightbox-wrapper .cff-svg-bg-dark .cff-svg-bg path{ fill: rgba(0,0,0,0.05); } /* Like icon */ #cff .cff-like .cff-svg-bg path, #cff-lightbox-wrapper .cff-like .cff-svg-bg path{ fill: url(#likeGrad); } /* Icon color theme (dark) */ #cff .cff-dark .cff-icon path, #cff-lightbox-wrapper .cff-dark .cff-icon path, #cff .cff-dark .cff-reaction-one path, #cff .cff-dark .cff-reaction-two path, #cff .cff-dark .cff-reactions-count path, #cff-lightbox-wrapper .cff-dark .cff-reaction-one path, #cff-lightbox-wrapper .cff-dark .cff-reaction-two path, #cff-lightbox-wrapper .cff-dark .cff-reactions-count path{ fill: rgba(0,0,0,1); fill: rgba(255,255,255,0.1); } /* Icon BG (white) */ #cff .cff-dark .cff-svg-bg path, #cff-lightbox-wrapper .cff-dark .cff-svg-bg path{ fill: rgba(255,255,255,0.9); } /* Icon BG (dark) */ #cff .cff-dark .cff-svg-bg-dark .cff-svg-bg path, #cff-lightbox-wrapper .cff-dark .cff-svg-bg-dark .cff-svg-bg path{ fill: rgba(255,255,255,0.7); } /* Like icon */ #cff .cff-dark .cff-like .cff-svg-bg path, #cff-lightbox-wrapper .cff-dark .cff-like .cff-svg-bg path{ fill: url(#likeGradDark); } /* Animate reactions in */ #cff .cff-reaction-one:not(.cff-no-animate), #cff-lightbox-wrapper .cff-reaction-one{ position: relative; z-index: 1; animation-name: cff_reactions_enter; animation-duration: 0.1s; } #cff .cff-reaction-one.cff-no-animate{ margin-left: 0; } #cff .cff-reaction-two, #cff-lightbox-wrapper .cff-reaction-two{ position: relative; z-index: 0; animation-name: cff_reactions_enter_two; animation-duration: 0.2s; } @keyframes cff_reactions_enter { 0% {opacity: 0; margin-left: -10px;} 25% {opacity: 0; margin-left: -7px;} 50% {opacity: 25%; margin-left: -4px;} 50% {opacity: 50%; margin-left: -1px;} 100% {opacity: 100%; margin-left: 2px;} } @keyframes cff_reactions_enter_two { 0% {opacity: 0; margin-left: -30px;} 25% {opacity: 0; margin-left: -22px;} 50% {opacity: 25%; margin-left: -14px;} 50% {opacity: 50%; margin-left: -6px;} 100% {opacity: 100%; margin-left: 2px;} } /* Reactions count */ #cff .cff-reactions-count, #cff-lightbox-wrapper .cff-reactions-count{ float: left; padding-top: 1px; font-size: 11px; line-height: 11px !important; margin-right: -2px; } #cff .cff-reactions-count span:first-child, #cff-lightbox-wrapper .cff-reactions-count span:first-child{ margin-left: 0; } #cff .cff-like-count, #cff .cff-love-count, #cff .cff-haha-count, #cff .cff-wow-count, #cff .cff-sad-count, #cff .cff-angry-count, #cff-lightbox-wrapper .cff-like-count, #cff-lightbox-wrapper .cff-love-count, #cff-lightbox-wrapper .cff-haha-count, #cff-lightbox-wrapper .cff-wow-count, #cff-lightbox-wrapper .cff-sad-count, #cff-lightbox-wrapper .cff-angry-count{ float: left; margin: 0 6px 0 0; font-size: 11px; line-height: 17px; } #cff .cff-like-count, #cff .cff-love-count, #cff .cff-haha-count, #cff .cff-wow-count, #cff .cff-sad-count, #cff .cff-angry-count{ margin-right: 8px; } .cff-reaction-wrap{ display: inline-block; } /* Display comments */ #cff .cff-view-comments, #cff-lightbox-wrapper .cff-view-comments{ display: block; overflow: hidden; outline: none; float: left; clear: left; height: 37px; margin: 5px 12px 5px 0; padding: 0 5px 0 10px; background: #eee; /*background: rgba(0,0,0,0.05);*/ border: none; text-decoration: none; background: rgba(0,0,0,0.05); /*border: 1px solid rgba(0,0,0,0.04);*/ box-shadow: 0 0 0 1px rgba(0,0,0,0.07); border-radius: 4px; } /* This is needed otherwise icons don't show in masonry-css layout: */ #cff.cff-masonry-css .cff-view-comments{ -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; } #cff .cff-view-comments.cff-hide-comments{ display: none; } #cff .cff-view-comments:hover{ /*border: 1px solid rgba(0,0,0,0.05);*/ box-shadow: 0 0 0 1px rgba(0,0,0,0.09); } /* Comments box hover gradient transition */ #cff .cff-view-comments{ position: relative; } #cff .cff-view-comments:after{ content: ''; position: absolute; top: 0; left: -200%; width: 200%; height: 100%; z-index: 0; background: linear-gradient(90deg, rgba(0,0,0,0.04) 50%, rgba(0,0,0,0) 100%); transition: all 0.2s ease; } #cff .cff-view-comments:hover:after{ left: 0; transition: all 0.5s ease; } /* Icons hover */ /* Light color theme */ /* Icon outline */ #cff .cff-open path, #cff .cff-view-comments .cff-animate path, #cff-lightbox-wrapper .cff-view-comments .cff-animate path, #cff .cff-reactions-count path{ fill: rgba(0,0,0,0.5); } /* Dark color theme */ /* Icon outline */ #cff .cff-open .cff-dark path, #cff .cff-view-comments .cff-dark .cff-animate path, #cff-lightbox-wrapper .cff-view-comments .cff-dark .cff-animate path, #cff .cff-dark .cff-reactions-count path{ fill: rgba(255,255,255,0.05); } /* Icon background (light) */ #cff .cff-open .cff-svg-bg path, #cff .cff-view-comments .cff-animate .cff-svg-bg path, #cff .cff-reactions-count .cff-svg-bg path{ fill: rgba(255,255,255,1); } /* Icon background (back) */ #cff .cff-open .cff-svg-bg-dark .cff-svg-bg path, #cff .cff-view-comments .cff-animate .cff-svg-bg-dark .cff-svg-bg path, #cff .cff-reactions-count .cff-svg-bg-dark .cff-svg-bg path{ fill: rgba(0,0,0,0.05); } /* Like icon */ #cff .cff-open .cff-like .cff-svg-bg path, #cff .cff-view-comments .cff-like.cff-animate .cff-svg-bg path, #cff .cff-reactions-count .cff-like .cff-svg-bg path, #cff-lightbox-wrapper .cff-reactions-count .cff-like .cff-svg-bg path{ fill: url(#likeGradHover); } /* Heart icon */ #cff .cff-open .cff-love .cff-svg-bg path, #cff .cff-view-comments .cff-love.cff-animate .cff-svg-bg path, #cff .cff-reactions-count .cff-love .cff-svg-bg path, #cff-lightbox-wrapper .cff-reactions-count .cff-love .cff-svg-bg path{ fill: #ffb9b9; } /* Face icons */ #cff .cff-open .cff-haha .cff-svg-bg path, #cff .cff-open .cff-wow .cff-svg-bg path, #cff .cff-open .cff-sad .cff-svg-bg path, #cff .cff-view-comments .cff-haha.cff-animate .cff-svg-bg path, #cff .cff-view-comments .cff-wow.cff-animate .cff-svg-bg path, #cff .cff-view-comments .cff-sad.cff-animate .cff-svg-bg path, #cff .cff-reactions-count .cff-haha .cff-svg-bg path, #cff .cff-reactions-count .cff-wow .cff-svg-bg path, #cff .cff-reactions-count .cff-sad .cff-svg-bg path, #cff-lightbox-wrapper .cff-reactions-count .cff-haha .cff-svg-bg path, #cff-lightbox-wrapper .cff-reactions-count .cff-wow .cff-svg-bg path, #cff-lightbox-wrapper .cff-reactions-count .cff-sad .cff-svg-bg path{ fill: #ffe7a4; } /* Angry icon */ #cff .cff-open .cff-angry .cff-svg-bg path, #cff .cff-view-comments .cff-angry.cff-animate .cff-svg-bg path, #cff .cff-reactions-count .cff-angry .cff-svg-bg path, #cff-lightbox-wrapper .cff-reactions-count .cff-angry .cff-svg-bg path{ fill: url(#angryGrad); } /* Share icon */ #cff .cff-open .cff-shares .cff-svg-bg path, #cff .cff-view-comments .cff-share.cff-animate .cff-svg-bg path, #cff .cff-reactions-count .cff-share .cff-svg-bg path, #cff-lightbox-wrapper .cff-reactions-count .cff-share .cff-svg-bg path{ fill: #fdf3d0; } /* Comment icon */ #cff .cff-open .cff-comments .cff-svg-bg path, #cff .cff-view-comments .cff-comment.cff-animate .cff-svg-bg path, #cff .cff-reactions-count .cff-comment .cff-svg-bg path, #cff-lightbox-wrapper .cff-reactions-count .cff-comment .cff-svg-bg path{ fill: white; } /* Icons */ /* Fade in colors */ #cff .cff-view-comments .cff-icon path, #cff .cff-view-comments .cff-icon.cff-animate path{ transition: all 0.2s ease; } #cff .cff-view-comments .cff-icon.cff-animate svg{ animation-duration: 0.2s; } /* No SVGs for icons setting */ #cff.cff-no-svgs svg, #cff-lightbox-wrapper.cff-no-svgs svg{ display: none; } #cff.cff-no-svgs .cff-comments-box .cff-comments .cff-icon, #cff.cff-no-svgs .cff-comments-box .cff-likes .cff-icon, #cff-lightbox-wrapper.cff-no-svgs .cff-comments-box .cff-comments .cff-icon, #cff-lightbox-wrapper.cff-no-svgs .cff-comments-box .cff-likes .cff-icon { margin: 0 3px 0 0; } #cff.cff-no-svgs .cff-like, #cff.cff-no-svgs .cff-love, #cff.cff-no-svgs .cff-haha, #cff.cff-no-svgs .cff-wow, #cff.cff-no-svgs .cff-sad, #cff.cff-no-svgs .cff-angry, #cff.cff-no-svgs .cff-share, #cff.cff-no-svgs .cff-comment, #cff.cff-no-svgs .cff-comments .cff-icon, #cff.cff-no-svgs .cff-reactions-count svg, #cff-lightbox-wrapper.cff-no-svgs .cff-reactions-count .cff-like, #cff-lightbox-wrapper.cff-no-svgs .cff-love, #cff-lightbox-wrapper.cff-no-svgs .cff-haha, #cff-lightbox-wrapper.cff-no-svgs .cff-wow, #cff-lightbox-wrapper.cff-no-svgs .cff-sad, #cff-lightbox-wrapper.cff-no-svgs .cff-angry, #cff-lightbox-wrapper.cff-no-svgs .cff-share, #cff-lightbox-wrapper.cff-no-svgs .cff-comment, #cff-lightbox-wrapper.cff-no-svgs .cff-comments .cff-icon, #cff-lightbox-wrapper.cff-no-svgs .cff-reactions-count svg{ background: url('../img/cff-sprite.png') no-repeat; } #cff.cff-no-svgs .cff-like, #cff.cff-no-svgs .cff-reactions-count .cff-like, #cff-lightbox-wrapper.cff-no-svgs .cff-like, #cff-lightbox-wrapper.cff-no-svgs .cff-reactions-count .cff-like{ background-position: 0 -17px; } #cff.cff-no-svgs .cff-reactions-count .cff-like, #cff-lightbox-wrapper.cff-no-svgs .cff-reactions-count .cff-like{ width: 13px; } #cff.cff-no-svgs .cff-share{ width: 14px; background-position: 0 -33px; } #cff.cff-no-svgs .cff-comments .cff-icon, #cff-lightbox-wrapper.cff-no-svgs .cff-comments .cff-icon{ width: 12px; } #cff.cff-no-svgs .cff-love, #cff-lightbox-wrapper.cff-no-svgs .cff-love{ width: 15px; height: 13px; margin-top: 1px; background-position: -34px -1px; } #cff.cff-no-svgs .cff-reactions-count .cff-love, #cff-lightbox-wrapper.cff-no-svgs .cff-reactions-count .cff-love{ height: 14px; background-position: -34px 0px; } #cff.cff-no-svgs .cff-haha, #cff-lightbox-wrapper.cff-no-svgs .cff-haha{ height: 15px; background-position: -34px -15px; } #cff.cff-no-svgs .cff-wow, #cff-lightbox-wrapper.cff-no-svgs .cff-wow{ height: 15px; background-position: -34px -47px; } #cff.cff-no-svgs .cff-sad, #cff-lightbox-wrapper.cff-no-svgs .cff-sad{ height: 15px; background-position: -34px -31px; } #cff.cff-no-svgs .cff-angry, #cff-lightbox-wrapper.cff-no-svgs .cff-angry{ height: 15px; background-position: -34px -63px; } #cff.cff-no-svgs .cff-comments-box .cff-comment-likes b, #cff-lightbox-wrapper.cff-no-svgs .cff-comments-box .cff-comment-likes b{ background: url('../img/cff-sprite.png') no-repeat; background-position: 1px -48px; width: 10px; height: 9px; } #cff.cff-no-svgs .cff-comments-box .cff-show-more-comments, #cff-lightbox-wrapper.cff-no-svgs .cff-comments-box .cff-show-more-comments{ position: relative; } #cff.cff-no-svgs .cff-comments-box .cff-show-more-comments a, #cff-lightbox-wrapper.cff-no-svgs .cff-comments-box .cff-show-more-comments a{ position: relative; z-index: 1; height: 20px; } #cff.cff-no-svgs .cff-comments-box .cff-show-more-comments:after, #cff-lightbox-wrapper.cff-no-svgs .cff-comments-box .cff-show-more-comments:after{ position: absolute; z-index: 0; content: '...'; top: -2px; font-size: 20px; color: #333; height: 20px; line-height: 20px; } /*Dark icons*/ /* Comments */ #cff.cff-no-svgs .cff-meta.cff-dark li.cff-comments .cff-icon, #cff-lightbox-wrapper.cff-no-svgs .cff-meta.cff-dark li.cff-comments .cff-icon{ background-position: -17px 0; } /* Likes */ #cff.cff-no-svgs .cff-dark .cff-reactions-count .cff-like, #cff.cff-no-svgs .cff-meta.cff-dark li.cff-likes .cff-icon, #cff-lightbox-wrapper.cff-no-svgs .cff-dark .cff-reactions-count .cff-like, #cff-lightbox-wrapper.cff-no-svgs .cff-meta.cff-dark li.cff-likes .cff-icon{ background-position: -17px -17px; } /* Shares */ #cff.cff-no-svgs .cff-meta.cff-dark li.cff-shares .cff-icon, #cff-lightbox-wrapper.cff-no-svgs .cff-meta.cff-dark li.cff-shares .cff-icon{ background-position: -17px -34px; } /* Reactions */ #cff.cff-no-svgs .cff-meta.cff-dark li.cff-likes .cff-love, #cff-lightbox-wrapper.cff-no-svgs .cff-meta.cff-dark li.cff-likes .cff-love{ background-position: -52px -1px; } #cff.cff-no-svgs .cff-meta.cff-dark li.cff-likes .cff-wow, #cff-lightbox-wrapper.cff-no-svgs .cff-meta.cff-dark li.cff-likes .cff-wow{ background-position: -34px -47px; } #cff.cff-no-svgs .cff-meta.cff-dark li.cff-likes .cff-haha, #cff-lightbox-wrapper.cff-no-svgs .cff-meta.cff-dark li.cff-likes .cff-haha{ background-position: -34px -15px; } #cff.cff-no-svgs .cff-meta.cff-dark li.cff-likes .cff-sad, #cff-lightbox-wrapper.cff-no-svgs .cff-meta.cff-dark li.cff-likes .cff-sad{ background-position: -34px -31px; } #cff.cff-no-svgs .cff-meta.cff-dark li.cff-likes .cff-angry, #cff-lightbox-wrapper.cff-no-svgs .cff-meta.cff-dark li.cff-likes .cff-angry{ background-position: -51px -63px; } #cff.cff-no-svgs .cff-dark .cff-comment-replies .cff-replies-icon, #cff-lightbox-wrapper.cff-no-svgs .cff-dark .cff-comment-replies .cff-replies-icon{ background-position: -17px -65px; } #cff.cff-no-svgs .cff-comments-box.cff-dark .cff-show-more-comments:after, #cff-lightbox-wrapper.cff-no-svgs .cff-comments-box.cff-dark .cff-show-more-comments:after{ color: rgba(255,255,255,0.7); } #cff.cff-no-svgs .cff-comments-box.cff-dark .cff-comment-likes b, #cff-lightbox-wrapper.cff-no-svgs .cff-comments-box.cff-dark .cff-comment-likes b { background-position: -16px -48px; } /*Lightbox icon sprite*/ #cff .cff-comments-box, #cff-lightbox-wrapper .cff-comments-box{ display: none; float: left; clear: both; width: 100%; max-width: 100%; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /* IE7 and below*/ *width: 95%; *margin-top: 5px; } #cff .cff-comments-box .cff-likes, #cff-lightbox-wrapper .cff-comments-box .cff-likes{ margin-bottom: 1px; } #cff .cff-comments-box .cff-comments .cff-icon, #cff-lightbox-wrapper .cff-comments-box .cff-comments .cff-icon{ margin-top: 1px; } #cff .cff-comments-box p, #cff .cff-comments-box .cff-comment, #cff .cff-comments-box .cff-comment-reply, #cff-lightbox-wrapper .cff-comments-box p, #cff-lightbox-wrapper .cff-comments-box .cff-comment, #cff-lightbox-wrapper .cff-comments-box .cff-comment-reply{ width: 100%; min-width: 100%; float: left; clear: both; font-size: 12px; padding: 5px 20px 5px 10px; margin: 0 0 1px 0; background: #eee; background: rgba(0,0,0,0.05); line-height: 17px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #cff .cff-comments-box.cff-no-comments, #cff-lightbox-wrapper .cff-comments-box.cff-no-comments{ width: auto; } #cff .cff-comments-box .cff-comment-on-facebook, #cff-lightbox-wrapper .cff-comments-box .cff-comment-on-facebook{ border-radius: 4px; } #cff-lightbox-wrapper .cff-comments-box .cff-comment-on-facebook a{ text-decoration: none; } #cff .cff-comments-wrap, #cff-lightbox-wrapper .cff-comments-wrap{ float: left; clear: both; overflow: hidden; width: 100%; padding-bottom: 0; border-radius: 0 0 4px 4px; background: rgba(0,0,0,0.05); } #cff .cff-comments-box .cff-comment, #cff-lightbox-wrapper .cff-comments-box .cff-comment{ display: none; margin: 0; background: none; } #cff .cff-comments-box .cff-name, #cff-lightbox-wrapper .cff-comments-box .cff-name{ padding: 0; margin-right: 6px; font-weight: bold; } #cff .cff-comments-box .cff-comment-likes, #cff-lightbox-wrapper .cff-comments-box .cff-comment-likes{ font-style: normal; border-radius: 4px 4px 0 0; } #cff .cff-comments-box .cff-comment-likes b, #cff-lightbox-wrapper .cff-comments-box .cff-comment-likes b{ display: -moz-inline-stack; display: inline-block; vertical-align: top; zoom: 1; *display: inline; background-position: 0 -50px; width: 10px; height: 9px; margin: 0; line-height: 1; padding: 2px 2px 0 2px; /* Unset border-box as icons are displayed small in some browsers due to it being applied */ -webkit-box-sizing: unset; -moz-box-sizing: unset; box-sizing: unset; } /* SVG color */ .cff-comments-box .cff-comment-likes path{ fill: rgba(0,0,0,0.6); } .cff-comments-box .cff-comment-likes .cff-comment-likes-bg{ background: rgba(255,255,255,0.6); box-shadow: 0 0 2px 0 rgba(0,0,0,0.2); padding: 1px 4px 2px 3px; border-radius: 5px; margin: 0 0 0 2px; font-size: 10px; display: inline-block; } .cff-comments-box.cff-dark .cff-comment-likes .cff-comment-likes-bg{ background: rgba(255,255,255,0.2); } #cff .cff-comments-box.cff-dark .cff-comment-likes b, #cff-lightbox-wrapper .cff-comments-box.cff-dark .cff-comment-likes b{ background-position: -17px -50px; } #cff .cff-comments-box .cff-time, #cff-lightbox-wrapper .cff-comments-box .cff-time{ float: left; clear: both; font-size: 11px; margin: 2px 0 0 0; display: block; font-style: italic; } #cff .cff-comment .cff-comment-date, #cff-lightbox-wrapper .cff-comment .cff-comment-date{ margin-right: 3px; } #cff .cff-comment-likes, #cff-lightbox-wrapper .cff-comment-likes{ margin: 5px 0 10px 0; width: 100%; } /*Avatars*/ #cff .cff-comment-text-wrapper, #cff-lightbox-wrapper .cff-comment-text-wrapper{ width: 100%; float: left; } #cff .cff-comment .cff-comment-img, #cff-lightbox-wrapper .cff-comment .cff-comment-img{ float: left; width: 32px; margin: 0 0 0 -100% !important; border-radius: 40px; } #cff .cff-comment .cff-comment-img img, #cff .cff-comment .cff-comment-avatar, #cff-lightbox-wrapper .cff-comment .cff-comment-img img, #cff-lightbox-wrapper .cff-comment .cff-comment-avatar{ float: left; width: 32px; margin: 0 10px 0 0 !important; padding: 0 !important; border: none !important; border-radius: 40px; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } #cff .cff-comment .cff-comment-avatar, #cff-lightbox-wrapper .cff-comment .cff-comment-avatar, #cff .cff-avatar-fallback, #cff-lightbox-wrapper .cff-avatar-fallback{ height: 32px; background: url('../img/cff-sprite.png') no-repeat -77px 0; } /* Add fallback avatar to lightbox comments if image is broken */ #cff-lightbox-wrapper .cff-avatar-fallback img{ position: relative; text-indent: -9999px; } #cff-lightbox-wrapper .cff-avatar-fallback img[alt]:after { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('../img/cff-sprite.png') no-repeat -77px 0; font-family: 'Helvetica'; font-weight: 300; line-height: 2; text-align: center; content: ''; } #cff .cff-comment .cff-comment-text, #cff-lightbox-wrapper .cff-comment .cff-comment-text{ margin: 0 0 0 42px; line-height: 1.3; } #cff .cff-comment .cff-comment-text p, #cff-lightbox-wrapper .cff-comment .cff-comment-text p{ padding: 0 !important; margin: 0 !important; line-height: 1.4; background: none !important; } #cff .cff-comment-text.cff-no-image, #cff-lightbox-wrapper .cff-comment-text.cff-no-image{ margin: 0; } #cff .cff-comments-box .cff-show-more-comments, #cff-lightbox-wrapper .cff-comments-box .cff-show-more-comments{ text-align: center; padding: 2px 0 1px 0; background: rgba(0,0,0,0.02); border-top: 1px solid rgba(0,0,0,0.05); margin-top: 8px; transition: all 0.5s ease; } #cff .cff-comments-box .cff-show-more-comments-a, #cff-lightbox-wrapper .cff-comments-box .cff-show-more-comments-a{ width: 100%; display: block; padding: 2px 0; text-decoration: none; } /* More comments elipsis */ #cff .cff-comments-box .cff-show-more-comments svg, #cff-lightbox-wrapper .cff-comments-box .cff-show-more-comments svg{ width: 17px; height: 10px; } #cff .cff-comments-box .cff-show-more-comments path, #cff-lightbox-wrapper .cff-comments-box .cff-show-more-comments path{ fill: rgba(0,0,0,0.5); transition: all 0.5s ease; } #cff .cff-dark .cff-show-more-comments path, #cff-lightbox-wrapper .cff-dark .cff-show-more-comments path{ fill: rgba(255,255,255,0.8); } #cff .cff-dark .cff-show-more-comments, #cff-lightbox-wrapper .cff-dark .cff-show-more-comments{ background: rgba(255,255,255,0.1); border-top: 1px solid rgba(255,255,255,0.2); } #cff .cff-comments-box .cff-show-more-comments:hover, #cff-lightbox-wrapper .cff-comments-box .cff-show-more-comments:hover{ background: rgba(0,0,0,0.05); text-decoration: none; transition: all 0.1s ease; } #cff .cff-comments-box .cff-show-more-comments:hover path, #cff-lightbox-wrapper .cff-comments-box .cff-show-more-comments:hover path{ fill: rgba(0,0,0,0.7); transition: all 0.1s ease; } /* Stops emojis from floating to the left of sentences */ #cff .cff-comment .cff-comment-text img, #cff img.emoji, #cff-lightbox-wrapper .cff-comment .cff-comment-text img, #cff-lightbox-wrapper img.emoji{ float: none; max-width: 100%; } #cff .cff-comment-attachment, #cff-lightbox-wrapper .cff-comment-attachment{ float: left; clear: both; width: 120px; height: auto; margin: 5px 0 0 0; } #cff .cff-comment-attachment img, #cff-lightbox-wrapper .cff-comment-attachment img{ float: left; } /* Comment replies */ #cff .cff-comment-replies a, #cff-lightbox-wrapper .cff-comment-replies a{ display: block; float: left; position: relative; padding: 3px 0; font-size: 11px; } #cff .cff-comment-replies-box, #cff-lightbox-wrapper .cff-comment-replies-box{ float: left; clear: both; border-left: 2px solid #dcdee3; border-left: 2px solid rgba(0,0,0,0.1); } #cff .cff-comments-box .cff-comment-replies-box .cff-comment-reply, #cff-lightbox-wrapper .cff-comments-box .cff-comment-replies-box .cff-comment-reply{ background: none; } #cff .cff-comment-replies-box a, #cff-lightbox-wrapper .cff-comment-replies-box a{ color: inherit !important; } #cff .cff-comment-replies-box .cff-comment-reply .cff-comment-img img, #cff-lightbox-wrapper .cff-comment-replies-box .cff-comment-reply .cff-comment-img img{ width: 20px; height: 20px; } #cff .cff-comment-replies-box .cff-comment-reply .cff-comment-text, #cff-lightbox-wrapper .cff-comment-replies-box .cff-comment-reply .cff-comment-text{ margin: 0 0 0 28px; } /* If there's no author name then remove margin */ #cff .cff-comment-replies-box .cff-comment-reply .cff-comment-text.cff-no-name, #cff-lightbox-wrapper .cff-comment-replies-box .cff-comment-reply .cff-comment-text.cff-no-name{ margin: 0; } #cff .cff-comment-replies .cff-replies-icon, #cff-lightbox-wrapper .cff-comment-replies .cff-replies-icon{ background: url('../img/cff-sprite.png') no-repeat 0 -65px; width: 11px; height: 8px; display: block; float: left; margin: 5px 5px 0 0; } #cff .cff-dark .cff-comment-replies .cff-replies-icon, #cff-lightbox-wrapper .cff-dark .cff-comment-replies .cff-replies-icon{ background-position: -17px -65px; } /* View on Facebook / View Link text */ #cff .cff-post-links, #cff .cff-event-meta{ float: right; clear: none; margin-top: 12px; font-size: 11px; } #cff .cff-event-meta{ float: left; } #cff .cff-post-links.cff-left{ float: left; margin: 8px 0; } #cff .cff-post-links a{ font-size: 11px; /*padding-left: 7px; margin-left: 7px; border-left: 1px solid #ccc;*/ } #cff .cff-post-links a:first-child{ padding-left: 0; margin: 0; } #cff .cff-dot{ padding: 0 5px; } /* Share tooltip */ #cff .cff-share-container{ position: relative; display: inline; } #cff .cff-share-tooltip{ display: none; position: absolute; z-index: 1000; bottom: 22px; right: 0; width: 110px; padding: 4px 5px; margin: 0; background: #333; color: #fff; font-size: 12px; line-height: 1.4; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #cff .cff-share-tooltip .fa-play{ position: absolute; font-size: 8px; bottom: -8px; right: 8px; color: #333; transform: rotate(90deg); height: 14px; width: 14px; } #cff .cff-share-tooltip a .fa, #cff .cff-share-tooltip a svg{ font-size: 16px; margin: 0; padding: 5px; box-sizing: unset; overflow: visible; height: 1em; width: 0.9em; display: block; } #cff .cff-share-tooltip a{ display: block; float: left; margin: 0 !important; padding: 0 !important; color: #fff !important; opacity: 0; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } #cff .cff-share-tooltip a:hover{ color: #fff !important; } #cff .cff-share-tooltip .cff-facebook-icon:hover{ background: #3b5998; } #cff .cff-share-tooltip .cff-twitter-icon:hover{ background: #00aced; } #cff .cff-share-tooltip .cff-google-icon:hover{ background: #dd4b39; } #cff .cff-share-tooltip .cff-linkedin-icon:hover{ background: #007bb6; } #cff .cff-share-tooltip .cff-pinterest-icon:hover{ background: #cb2027; } #cff .cff-share-tooltip .cff-email-icon:hover{ background: #666; } /* Fade in icons */ #cff .cff-share-tooltip a.cff-show{ opacity: 1; transition: opacity 0.2s ease; } /* Like box */ .cff-likebox{ float: left; width: 100%; position: relative; margin: 0; padding: 0; } .cff-likebox.cff-top{ margin-bottom: 10px; } .cff-likebox.cff-bottom{ margin-top: 10px; } .cff-likebox iframe{ width: 100%; margin: 0 !important; border: 0 !important; padding: 0; position: relative; top: 0; left: 0; width: 100% !important; /*height: 100%;*/ } /*********************/ /*** STYLE OPTIONS ***/ /*********************/ #cff.cff-fixed-height{ padding: 5px 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Thumb layout */ /*Media size*/ #cff.cff-thumb-layout .cff-photo, #cff.cff-thumb-layout .cff-iframe-wrap, #cff.cff-thumb-layout .cff-html5-video, #cff.cff-thumb-layout .cff-vidLink{ width: 20%; clear: none; } #cff.cff-thumb-layout .cff-html5-video .cff-vidLink{ width: 100%; } #cff.cff-thumb-layout .cff-iframe-wrap{ margin-top: 0; padding-bottom: 16%; } #cff.cff-thumb-layout .cff-likebox .fb_iframe_widget iframe{ margin: 0; } #cff.cff-thumb-layout .cff-photo img{ width: 100%; height: auto; } /* Video play button */ #cff.cff-thumb-layout .cff-posts-wrap svg.cff-playbtn{ margin-top: -15px; margin-left: -15px; width: 1em; height: 1em; font-size: 32px; padding: 8px 10px; } /*Content wraper*/ #cff.cff-thumb-layout .cff-text-wrapper{ float: right; width: 77%; } #cff.cff-thumb-layout .cff-link-item .cff-text-wrapper{ width: 100%; } #cff.cff-thumb-layout .cff-audio-post .cff-text-wrapper{ width: 100%; } #cff.cff-thumb-layout .cff-post-text{ margin-top: 0; } /*Date*/ #cff.cff-thumb-layout .cff-date { margin-bottom: 10px; } /* Lightbox link */ #cff.cff-thumb-layout .cff-photo-hover .fa, #cff.cff-thumb-layout .cff-photo-hover svg{ margin-top: -11px; margin-left: -10px; font-size: 24px; } #cff.cff-thumb-layout .cff-full-size .cff-link, #cff.cff-thumb-layout .cff-link-slider{ width: auto; max-width: 20%; margin-right: 3%; margin-bottom: 0; text-align: left; } #cff.cff-thumb-layout .cff-full-size .cff-link img{ float: left; } #cff.cff-thumb-layout .cff-full-size .cff-text-link{ width: 72%; } /* Timeline event */ #cff.cff-thumb-layout .cff-event-thumb{ width: 20%; } #cff.cff-thumb-layout .cff-details.cff-has-cover{ width: 100%; margin: 0; } /*Half image size */ #cff.cff-half-layout .cff-photo, #cff.cff-half-layout .cff-iframe-wrap, #cff.cff-half-layout .cff-html5-video, #cff.cff-half-layout .cff-vidLink{ width: 50%; clear: none; } #cff.cff-half-layout .cff-html5-video .cff-vidLink{ width: 100%; } #cff.cff-half-layout .cff-photo img{ width: 100%; height: auto; } #cff.cff-half-layout .cff-iframe-wrap{ margin-top: 0; padding-bottom: 28%; } #cff.cff-half-layout .cff-likebox .fb_iframe_widget iframe{ margin: 0; } #cff.cff-half-layout .cff-text-wrapper{ float: right; width: 47%; } #cff.cff-half-layout .cff-link-item .cff-text-wrapper{ width: 100%; } #cff.cff-half-layout .cff-audio-post .cff-text-wrapper{ width: 100%; } #cff.cff-half-layout .cff-post-text{ margin-top: 0; } /* Lightbox link */ #cff.cff-half-layout .cff-photo-hover .fa, #cff.cff-half-layout .cff-photo-hover svg{ margin-top: -16px; margin-left: -14px; font-size: 32px; } #cff.cff-half-layout .cff-full-size .cff-link, #cff.cff-half-layout .cff-link-slider{ width: auto; max-width: 50%; margin-right: 3%; margin-bottom: 0; text-align: left; } #cff.narrow.cff-thumb-layout .cff-full-size .cff-link, #cff.narrow.cff-half-layout .cff-full-size .cff-link, #cff.narrow.cff-thumb-layout .cff-link-slider, #cff.narrow.cff-half-layout .cff-link-slider{ max-width: 100%; } #cff.cff-half-layout .cff-full-size .cff-link img{ float: left; } #cff.cff-half-layout .cff-full-size .cff-text-link{ width: 47%; } /* Timeline event */ #cff.cff-half-layout .cff-event-thumb{ width: 50%; } #cff.cff-half-layout .cff-details.cff-has-cover{ width: 100%; margin: 0; } /* Narrow width */ #cff.narrow.cff-half-layout .cff-photo, #cff.narrow.cff-half-layout .cff-iframe-wrap, #cff.narrow.cff-half-layout .cff-vidLink, #cff.narrow.cff-half-layout .cff-html5-video, #cff.narrow.cff-half-layout .cff-link-slider, #cff.narrow.cff-thumb-layout .cff-photo, #cff.narrow.cff-thumb-layout .cff-iframe-wrap, #cff.narrow.cff-thumb-layout .cff-vidLink, #cff.narrow.cff-thumb-layout .cff-html5-video, #cff.narrow.cff-thumb-layout .cff-link-slider{ width: 100%; clear: both; } #cff.narrow.cff-half-layout .cff-text-wrapper, #cff.narrow.cff-thumb-layout .cff-text-wrapper{ float: left; width: 100%; } #cff.narrow .cff-shared-link .cff-link{ max-width: 100%; width: 100%; margin: 0 0 5px 0; text-align: center; } #cff.narrow .cff-shared-link .cff-link img{ float: none; width: auto; } #cff.narrow .cff-shared-link .cff-text-link{ width: 100%; } /* Events only mobile layout */ #cff.narrow .cff-event .cff-details { width: 100%; } /* Timeline event which has cover photo */ #cff.narrow .cff-event-thumb{ width: 100%; } #cff.narrow .cff-details.cff-has-cover{ width: 100%; margin: 5px 0 0 0; } /* Super narrow */ #cff.cff-super-narrow .cff-meta{ padding: 8px 0 !important; } #cff.cff-super-narrow .cff-view-comments{ margin-right: 0; padding: 0 4px 0 8px; height: 32px; } #cff.cff-super-narrow .cff-meta li{ margin: 0 5px 0 0 !important; } #cff.cff-super-narrow .cff-meta .cff-count{ margin-left: 2px; font-size: 11px; } #cff.cff-super-narrow .cff-shares .cff-count{ margin-left: 1px; } #cff.cff-super-narrow .cff-view-comments-wrap, #cff.cff-super-narrow .cff-comments-box{ float: left; width: 102%; max-width: 102%; margin-left: -1%; } /* Error messages */ #cff .cff-error-msg{ display: none; position: relative; font-size: 12px; font-family: sans-serif; padding: 8px 12px; border: 1px solid rgba(0,0,0,0.1); background: rgba(255,255,255,0.5); margin-bottom: 15px; clear: both; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } #cff .cff-error-msg p{ float: none; } #cff .cff-error-msg .cff_notice_dismiss{ position: absolute; top: 4px; right: 8px; } #cff #cff-error-reason{ padding: 5px 0 0 0; clear: both; } #cff #cff-error-reason a{ text-decoration: underline; font-weight: bold; } #cff .cff-error-msg:not(.cff_notice_dismiss) svg { width: 8px; margin-right: 5px; } #cff .cff-error-msg .cff_notice_dismiss svg { width: 11px; cursor: pointer; text-align: center; vertical-align: middle; } .cff_error_msg_header svg { width: 24px; color: #3b5998; padding-right: 5px; vertical-align: middle; margin-top: -5px; } /* Credit link */ #cff .cff-credit{ font-size: 11px; padding-top: 10px; } #cff .cff-credit a{ text-decoration: none; } #cff .cff-credit .cff-credit-logo{ float: left; display: block; width: 18px; height: 21px; margin: -2px 5px 0 0; background: url('../img/cff-sprite.png') no-repeat -54px -16px; } #cff .cff-credit .fa{ padding-right: 5px; font-size: 13px; } /**************/ /***LIGHTBOX***/ /**************/ /* Hover tile */ #cff .cff-lightbox-link{ position: absolute; z-index: 10; top: 0; right: 0; bottom: 0; left: 0; width: 100%; padding: 0; text-align: center; color: #fff; font-size: 12px; line-height: 1.1; border: none; } #cff.cff-doing-gdpr .cff-iframe-wrap .cff-lightbox-link:after { box-shadow: inset 0 0 1px 0 rgba(0,0,0,.7); bottom: 0; content: ''; left: 0; position: absolute; z-index: 1; right: 0; top: 0; width: 100% } #cff .cff-photo-hover{ display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; color: #fff; background: #333; background: rgba(0,0,0,0.4); } #cff .cff-photo-hover .fa, #cff .cff-photo-hover svg{ display: none; position: absolute; z-index: 2; top: 50%; left: 50%; margin-top: -19px; margin-left: -16px; padding: 0; font-size: 39px; font-style: normal !important; } /* Lightbox thumbs */ .cff-lightbox-thumbs{ display: none; float: left; width: 100%; position: relative; /* Set width to 111% so thumbs are wider than the 85% default lightbox details width */ width: 111%; margin: 0 0 0 -5px; } .cff-lightbox-thumbs-holder{ float: left; overflow: hidden; max-height: 0; transition: max-height 2s ease; } .cff-lightbox-thumbs-holder.cff-animate{ max-height: 2000px; transition: max-height 1.5s ease; } .cff-lightbox-thumbs-wrap{ margin-top: 10px; padding: 2px 0 6px 0; overflow: hidden; } .cff-lightbox-thumbs a, .cff-gdpr-more-link{ width: 60px; height: 60px; display: block; float: left; margin: 5px 0 0 5px; border-radius: 3px; /* Adds a border when comments disabled */ box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); /* Removes the transition that Genesis theme adds to links which causes a bumping hover effect in lightbox thumbs */ -webkit-transition: box-shadow 0.1s ease; -moz-transition: box-shadow 0.1s ease; -ms-transition: box-shadow 0.1s ease; -o-transition: box-shadow 0.1s ease; transition: box-shadow 0.1s ease; } .cff-lightbox-thumbs a:hover, .cff-lightbox-thumbs a:focus, .cff-gdpr-more-link:hover, .cff-gdpr-more-link:focus{ box-shadow: inset 0 0 0 4px rgba(0,0,0,0.3); outline: none; -webkit-transition: box-shadow 0.1s ease; -moz-transition: box-shadow 0.1s ease; -ms-transition: box-shadow 0.1s ease; -o-transition: box-shadow 0.1s ease; transition: box-shadow 0.1s ease; } /* Thumb style when comments enabled */ .cff-enable-lb-comments .cff-lightbox-thumbs a{ border: 1px solid #333; } .cff-enable-lb-comments .cff-lightbox-thumbs a:hover, .cff-enable-lb-comments .cff-lightbox-thumbs a:focus{ box-shadow: inset 0 0 0 4px rgba(255,255,255,0.7); border: 1px solid #bbb; } .cff-lightbox-thumbs .cff-selected, .cff-lightbox-thumbs .cff-selected:hover, .cff-lightbox-thumbs .cff-selected:focus{ box-shadow: inset 0 0 0 4px rgba(255,255,255,0.7); border: 1px solid #eee; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .cff-lightbox-thumbs .cff-selected:after{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255,255,255,0.2); } .cff-lightbox-thumbs img{ width: 60px; height: auto; } .cff-lightbox-thumbs .cff-loader{ width: 20px; height: 20px; position: absolute; z-index: 999; top: 50%; left: 50%; margin: -10px 0 0 -10px; background-color: none; background-color: rgba(0,0,0,0.5); border-radius: 100%; -webkit-animation: ctf-sk-scaleout 1.0s infinite ease-in-out; animation: ctf-sk-scaleout 1.0s infinite ease-in-out; } /* Lightbox */ .cff-lightbox-overlay { position: absolute; top: 0; left: 0; z-index: 999999; background-color: black; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.9; display: none; } .cff-lightbox-wrapper { position: absolute; left: 0; width: 100%; z-index: 1000000; text-align: center; line-height: 0; font-weight: normal; } .cff-lightbox-wrapper .cff-lightbox-image { display: block; /*height: auto !important;*/ height: auto; max-width: inherit; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; -ms-border-radius: 3px 3px 0 0; -o-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } .cff-lightbox-wrapper.cff-enable-lb-comments .cff-lightbox-image{ -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; -ms-border-radius: 3px 0 0 3px; -o-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; } .cff-lightbox-wrapper.cff-enable-lb-comments.cff-has-thumbs .cff-lightbox-image{ -webkit-border-radius: 3px 0 0 0; -moz-border-radius: 3px 0 0 0; -ms-border-radius: 3px 0 0 0; -o-border-radius: 3px 0 0 0; border-radius: 3px 0 0 0; } .cff-lightbox-wrapper a img { border: none; } .cff-lightbox-outerContainer { position: relative; background-color: #141B38; *zoom: 1; width: 250px; height: 250px; margin: 0 auto; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; -ms-border-radius: 3px 3px 0 0; -o-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } .cff-lightbox-outerContainer:after { content: ""; display: table; clear: both; } .cff-lightbox-container { position: relative; padding: 0; height: 100%; } .cff-lightbox-cancel { display: block; width: 16px; height: 16px; margin: 0 auto; background: url(../img/cff-sprite.png) no-repeat -71px -62px; } #cff-lightbox-wrapper .cff-lightbox-caption, #cff-lightbox-wrapper .cff-lightbox-caption-text{ float: left; clear: both; width: 100%; } #cff-lightbox-wrapper .cff-lightbox-caption-text{ margin: 0 0 15px 0; } #cff-lightbox-wrapper .cff-gdpr-more-link { position: relative; display: inline-block; clear:both; margin-top: 10px; margin-left: 0; } #cff-lightbox-wrapper .cff-gdpr-more-link:hover { background: #eee; } #cff-lightbox-wrapper .cff-gdpr-more-link span { position: absolute; display: none; top: 50%; right: 50%; margin-top: -8px; margin-right: -10px; color: #fff; font-weight: bold; font-size: 18px; } #cff-lightbox-wrapper .cff-lightbox-facebook{ margin: 0; padding: 0; border-left: none; border-bottom: none; color: #3b579d; width: 100%; display: block; float: left; clear: both; } #cff-lightbox-wrapper .cff-lightbox-facebook svg { vertical-align: middle; width: 12px; height: 14px; margin-right: 6px; margin-top: -5px; } #cff-lightbox-wrapper .cff-lightbox-caption .cff-dot{ margin: 0 7px; } /* No lightbox caption */ #cff-lightbox-wrapper .cff-lightbox-caption.cff-no-caption .cff-lightbox-caption-text{ margin: 0; } #cff-lightbox-wrapper .cff-lightbox-caption.cff-no-caption .cff-lightbox-facebook{ padding: 0; border: none; } #cff-lightbox-wrapper .cff-lightbox-caption .cff-event-title, #cff-lightbox-wrapper .cff-lightbox-caption .cff-date, #cff-lightbox-wrapper .cff-lightbox-caption .cff-location{ display: block; padding-bottom: 10px; } #cff-lightbox-wrapper .cff-lightbox-caption .cff-desc{ display: block; padding-top: 10px; } #cff-lightbox-wrapper .cff_gdpr_notice { z-index: 1; display: block; position: absolute; top: 50%; left: 50%; margin-left: -44px; margin-top: -44px; padding: 20px; } #cff-lightbox-wrapper .cff_gdpr_notice svg:not(:root).svg-inline--fa { position: relative; display: block !important; height: 48px; width: 48px; opacity: .8; } #cff-lightbox-wrapper .cff_gdpr_notice:hover svg:not(:root).svg-inline--fa { opacity: 1; } /* Custom lightbox scrollbar */ .cff-lightbox-wrapper.cff-enable-lb-comments .cff-lightbox-sidebar::-webkit-scrollbar{ width: 14px; } .cff-lightbox-wrapper.cff-enable-lb-comments .cff-lightbox-sidebar::-webkit-scrollbar-thumb{ border-radius: 0px; background-color: #ccc; border: 3px solid #fff; border-left: none; } .cff-lightbox-wrapper.cff-enable-lb-comments .cff-lightbox-sidebar::-webkit-scrollbar-track{ border-radius: 0; background-color: #fff; } #cff-lightbox-wrapper .cff-lightbox-caption-text a:link, #cff-lightbox-wrapper .cff-lightbox-caption-text a:hover, #cff-lightbox-wrapper .cff-lightbox-caption-text a:active, #cff-lightbox-wrapper .cff-lightbox-caption-text a:visited, #cff-lightbox-wrapper .cff-lightbox-facebook:link, #cff-lightbox-wrapper .cff-lightbox-facebook:hover, #cff-lightbox-wrapper .cff-lightbox-facebook:active, #cff-lightbox-wrapper .cff-lightbox-facebook:visited{ color: #3b579d; text-decoration: none; } #cff-lightbox-wrapper .cff-lightbox-caption-text a:hover, #cff-lightbox-wrapper .cff-lightbox-caption-text a:focus, #cff-lightbox-wrapper .cff-lightbox-facebook:hover, #cff-lightbox-wrapper .cff-lightbox-facebook:focus{ text-decoration: underline; border-bottom: none; } .cff-lightbox-nav { /*position: absolute;*/ top: 0; left: 0; /* height: 100%; */ width: 100%; z-index: 1000; } .cff-lightbox-container > .nav { left: 0; } .cff-lightbox-nav a { outline: none; background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='); position: absolute; z-index: 1000; top: 0; bottom: 0; height: auto; } /* When lightbox contains a iframe video then make controls shorter */ .cff-has-iframe .cff-lightbox-nav a { top: 50px; bottom: 50px; } .cff-has-video .cff-lightbox-nav a { top: 35px; bottom: 35px; } /* If it's the Facebook Player then leave more room for video controls */ .cff-fb-player .cff-lightbox-nav a.cff-lightbox-next, .cff-fb-player .cff-lightbox-nav a.cff-lightbox-prev{ top: 75px; bottom: 75px; width: 7%; } .cff-lightbox-prev, .cff-lightbox-next { height: 100%; cursor: pointer; display: block; } .cff-lightbox-prev:active, .cff-lightbox-next:active, .cff-lightbox-prev:focus, .cff-lightbox-next:focus{ outline: none; } .cff-lightbox-nav a.cff-lightbox-prev { width: 50px; left: -50px; float: left; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0.3; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; -o-transition: opacity 0.2s; transition: opacity 0.2s; } .cff-lightbox-nav a.cff-lightbox-prev:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } .cff-lightbox-nav a.cff-lightbox-next { width: 50px; right: -50px; float: right; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0.3; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; -o-transition: opacity 0.2s; transition: opacity 0.2s; } .cff-enable-lb-comments .cff-lightbox-nav a.cff-lightbox-next { margin-right: -300px; } .cff-lightbox-nav a.cff-lightbox-next:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } .cff-lightbox-dataContainer{ position: relative; margin: 0 auto; padding: 0; *zoom: 1; width: 100%; background: #fff; /*box-shadow: 0 0 20px 0 rgba(0,0,0,0.15);*/ -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; -ms-border-radius: 0 0 3px 3px; -o-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; } .cff-enable-lb-comments .cff-lightbox-dataContainer{ background: #222; /*background: rgba(255,255,255,0.05);*/ } /* Arrows */ .cff-lightbox-nav span{ display: block; top: 50%; position: absolute; left: 0; width: 34px; height: 45px; margin: -25px 0 0 0; background: url(../img/cff-sprite.png) no-repeat; text-indent: -9999px; } .cff-lightbox-nav a.cff-lightbox-prev span{ background-position: -160px 0; } .cff-lightbox-nav a.cff-lightbox-next span{ left: auto; right: 0; background-position: -125px 0; } .cff-fb-player .cff-lightbox-nav a.cff-lightbox-prev span{ left: 10px; } .cff-fb-player .cff-lightbox-nav a.cff-lightbox-next span{ right: 10px; } .cff-lightbox-dataContainer:after { content: ""; display: table; clear: both; } /* Lightbox extension */ .cff-lb-dataContainer a{ color: #ccc; text-decoration: underline; } .cff-lb-dataContainer a:hover, .cff-lb-dataContainer a:focus{ color: #fff; text-decoration: underline; } .cff-lightbox-data { padding: 0 4px; color: #444; } .cff-lightbox-data .cff-lightbox-details { position: relative; width: 90%; padding: 0 0 0 2px; float: left; text-align: left; line-height: 1.1em; } .cff-lightbox-data .cff-lightbox-caption { padding: 15px 10px 10px 10px; margin: 0; font-size: 14px; /*font-weight: bold;*/ line-height: 1.3; } .cff-lightbox-data .cff-lightbox-number { /*display: block;*/ clear: left; padding-right: 10px; font-size: 12px; color: #999999; } .cff-lightbox-data .cff-lightbox-close { display: block; float: right; width: 30px; height: 30px; margin: 0 -5px 0 0; color: #333; text-align: center; margin-top: 7px; outline: none; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; -o-transition: opacity 0.2s; transition: opacity 0.2s; } .cff-lightbox-data .cff-lightbox-close:hover { cursor: pointer; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } .cff-lightbox-sidebar .cff-lightbox-closeContainer{ position: absolute; top: 0; right: 0; } .cff-lightbox-sidebar .cff-lightbox-closeContainer .cff-lightbox-close{ display: block; padding: 8px; cursor: pointer; line-height: 1; } .cff-lightbox-sidebar .cff-lightbox-closeContainer .cff-lightbox-close:hover{ color: black; } .cff-lightbox-closeContainer svg { width: 10px; height: 14px; } /* LIGHTBOX VIDEO */ .cff-lightbox-video{ display: none; position: absolute; z-index: 999; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; max-width: 100%; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; -ms-border-radius: 3px 3px 0 0; -o-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } .cff-has-video .cff-lightbox-video{ display: block; } #cff-lightbox-wrapper.cff-has-video .cff-lightbox-image{ display: none !important; /* Show photo in IE7 as doesn't support video */ *display: block !important; } /* Set minimum size for shared videos which have small thumbnails */ .cff-has-video .cff-lightbox-outerContainer{ min-width: 640px; min-height: 360px; } .cff-has-video .cff-lightbox-dataContainer{ min-width: 640px; } /*Don't set a minimum size when the lightbox comments are enabled*/ .cff-has-video.cff-enable-lb-comments .cff-lightbox-outerContainer, .cff-has-video.cff-enable-lb-comments .cff-lightbox-dataContainer{ min-width: 0; min-height: 0; } /* On mobile make the min-width 100% */ @media all and (max-width: 640px){ .cff-has-video .cff-lightbox-outerContainer{ min-width: 100%; min-height: auto; } .cff-has-video .cff-lightbox-dataContainer{ min-width: 100%; } #cff.cff-width-resp{ width: 100% !important; } /* Lightbox arrows */ .cff-lightbox-nav a.cff-lightbox-prev { width: 25px; left: -25px; } .cff-lightbox-nav a.cff-lightbox-next { width: 25px; right: -25px; } .cff-lightbox-nav span{ left: 0; } .cff-lightbox-nav a.cff-lightbox-prev span{ background-position: -108px 0; background-size: 650%; width: 20px; height: 30px; } .cff-lightbox-nav a.cff-lightbox-next span{ background-position: -84px 0; background-size: 650%; width: 20px; height: 30px; } /* Lightbox thumbs */ .cff-lightbox-thumbs a { border: none; } .cff-lightbox-thumbs a:hover, .cff-lightbox-thumbs a:focus, .cff-lightbox-thumbs .cff-selected, .cff-lightbox-thumbs .cff-selected:hover, .cff-lightbox-thumbs .cff-selected:focus { box-shadow: inset 0 0 0 4px rgba(0,0,0,0.5); border: none; } } /* Iframe */ #cff-lightbox-wrapper iframe{ display: none; position: absolute; z-index: 999; top: 0; right: 0; bottom: 0; left: 0; width: 100% !important; height: 100%; max-width: 100%; } #cff-lightbox-wrapper.cff-has-iframe iframe{ display: block; } #cff-lightbox-wrapper.cff-has-iframe .cff-lightbox-image{ min-width: 500px; display: none !important; } /* Overlay used over the top of the video iframes for linking to the Facebook post */ #cff .cff-media-overlay{ position: absolute; z-index: 5; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100; } /*REVIEWS*/ #cff.cff-all-reviews .cff-review, #cff.cff-all-reviews.cff-masonry .cff-review{ display: none; } #cff .cff-review .cff-reviewer-name{ padding-right: 8px; margin-left: 0 !important; } #cff .cff-review .cff-author .cff-author-text .cff-rating{ float: none; display: inline-block; margin: 0 0 5px 0 !important; padding: 3px 6px; height: auto; background: #5890FF; color: #fff; line-height: 0.9; white-space: nowrap; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; } #cff .cff-review .cff-rating span.cff-rating-num, #cff .cff-review .cff-rating span.cff-star{ margin: 0 2px 0 4px !important; padding: 0; height: auto; display: inline-block; vertical-align: top; line-height: 1; color: #fff; font-weight: normal; font-size: 12px!important; } #cff .cff-review .cff-rating span.cff-star{ margin: 0 2px 0 0 !important; } #cff .cff-review .cff-post-links{ float: left; } /* PAGINATION */ /* Load more */ #cff .cff-load-more{ display: block; float: left; clear: both; border: none; background: #eee; background: rgba(0,0,0,0.05); width: 100%; min-height: 30px; padding: 5px 0; margin: 10px 0 0 0; position: relative; text-align: center; box-sizing: border-box; outline: none; text-decoration: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-transition: background 0.1s ease-in-out; -webkit-transition: background 0.1s ease-in-out; -o-transition: background 0.1s ease-in-out; transition: background 0.1s ease-in-out; } #cff .cff-load-more:hover{ background: #ddd; background: rgba(0,0,0,0.1); text-decoration: none; -moz-transition: background 0.1s ease-in-out; -webkit-transition: background 0.1s ease-in-out; -o-transition: background 0.1s ease-in-out; transition: background 0.1s ease-in-out; } #cff .cff-load-more.cff-loading span{ -moz-transition: opacity 0.5s ease-in-out; -webkit-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } #cff .cff-load-more.cff-loading span{ filter: alpha(opacity=0); opacity: 0; } #cff .cff-no-more-posts{ width: 100%; float: left; clear: both; display: block; min-height: 30px; padding: 7px 0; margin: 10px 0 -1px 0; position: relative; box-sizing: border-box; background: rgba(255,255,255,0.1); border: 1px solid #ddd; text-align: center; outline: none; text-decoration: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } /*Loaders */ #cff .cff-loader, .cff-lightbox-loader { width: 20px; height: 20px; position: absolute; top: 50%; left: 50%; margin: -10px 0 0 -10px; background-color: none; background-color: rgba(0,0,0,0.5); border-radius: 100%; -webkit-animation: ctf-sk-scaleout 1.0s infinite ease-in-out; animation: ctf-sk-scaleout 1.0s infinite ease-in-out; } .cff-lightbox-loader { width: 30px; height: 30px; margin: -15px 0 0 -15px; background-color: rgba(255,255,255,0.8); } #cff .cff-comment-replies .cff-loader{ width: 12px; height: 12px; position: absolute; top: 50%; left: auto; right: -16px; margin: -6px 0 0 0; } @-webkit-keyframes ctf-sk-scaleout { 0% { -webkit-transform: scale(0) } 100% { -webkit-transform: scale(1.0); opacity: 0; } } @keyframes ctf-sk-scaleout { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1.0); transform: scale(1.0); opacity: 0; } } #cff .cff-load-more.cff-disabled{ cursor: default; } /* Hide events initially when pagination is enabled then they're shown using JS*/ #cff.cff-pag:not(.cff-carousel) .cff-upcoming-event, /* Don't hide them in carousel as sets height to 0 */ #cff.cff-pag.cff-masonry.cff-masonry-css .cff-item.cff-upcoming-event, #cff.cff-pag.cff-masonry.cff-masonry-css.masonry-2-desktop .cff-item.cff-upcoming-event, #cff.cff-pag.cff-masonry.cff-masonry-css.masonry-4-desktop .cff-item.cff-upcoming-event, #cff.cff-pag.cff-masonry.cff-masonry-css.masonry-5-desktop .cff-item.cff-upcoming-event, #cff.cff-pag.cff-masonry.cff-masonry-css.masonry-6-desktop .cff-item.cff-upcoming-event{ display: none; } /* Include poster over video so that it doesn't flash when loading more posts */ #cff .cff-poster { padding: 0 !important; margin: 0 !important; width: 100% !important; } /* Adding sidebar to lightbox */ .cff-lightbox-wrapper.cff-enable-lb-comments .cff-lightbox-outerContainer{ position: relative; padding-right: 300px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .cff-lightbox-wrapper.cff-enable-lb-comments .cff-lightbox-sidebar{ width: 300px; position: absolute; top: 0; right: -300px; height: 100%; bottom: 0; background: #fff; line-height: 1.4; overflow: hidden; overflow-y: auto; text-align: left; border-radius: 0 3px 3px 0; } .cff-lightbox-wrapper.cff-enable-lb-comments.cff-has-thumbs .cff-lightbox-sidebar{ border-radius: 0 3px 0 0; } /* If the caption is in the sidebar then hide the caption beneath the photo */ #cff-lightbox-wrapper.cff-enable-lb-comments .cff-lightbox-dataContainer .cff-lightbox-caption{ display: none !important; } #cff-lightbox-wrapper .cff-comments-box, #cff-lightbox-wrapper .cff-comments-box.cff-no-comments{ display: block !important; width: 90%; margin: 0 5% 15px 5%; } #cff-lightbox-wrapper .cff-comment{ display: block !important; } #cff-lightbox-wrapper .cff-comments-box p{ text-align: left; } #cff-lightbox-wrapper .cff-lightbox-sidebar-content{ padding: 15px 20px; } #cff-lightbox-wrapper p.cff-comment-likes{ padding-right: 10px; line-height: 16px; } #cff .cff-likes-this-text, #cff-lightbox-wrapper .cff-likes-this-text{ display: inline; min-height: 20px; line-height: 20px; } #cff-lightbox-wrapper .cff-likes-this-text.cff-long{ display: inline-block; float: left; clear: both; margin-top: 4px; line-height: 16px; } #cff .cff-liker-one-name, #cff-lightbox-wrapper .cff-liker-one-name{ margin-left: 8px; } .cff-screenreader{ text-indent: -9999px !important; display: block !important; width: 0 !important; height: 0 !important; line-height: 0 !important; } .cff-screenreader.cff-inline-sr { display: inline-block !important; } #cff .cff-linebreak{ display: block; height: 5px; } /* Call to action button */ #cff .cff-cta-link a { display: inline-block; padding: 5px 15px; border: 1px solid #eee; border: 1px solid rgba(0,0,0,0.1); border-radius: 3px; background: rgba(0,0,0,0.02); } #cff .cff-cta-link a:hover { background: #f9f9f9; background: rgba(0,0,0,0.03); text-decoration: none; } /* Shared link slider */ #cff .cff-link-slider { position: relative; overflow: hidden; width: 100%; margin: 0 auto 10px auto; } #cff.cff-thumb-layout .cff-link-slider, #cff.cff-half-layout .cff-link-slider{ float: left; } #cff .cff-link-slider .cff-link-slider-slides { position: relative; left: 0; float: left; margin: 0; padding: 0; list-style: none; -webkit-transition: all 0.2s ease; } #cff .cff-link-slider .cff-link-slider-item { position: relative; display: none; float: left; margin: 0; padding: 0; text-align: center; } /* Show the first item in the slider */ #cff .cff-link-slider .cff-link-slider-item:first-child{ display: block; } #cff .cff-link-slider .cff-link-slider-item img{ display: block; margin: 0 auto; } #cff .cff-link-slider .cff-slider-next, #cff .cff-link-slider .cff-slider-prev { position: absolute; top: 50%; z-index: 999; display: block; width: 12px; height: 20px; margin-top: -17px; background: #f9f9f9; color: #333; text-decoration: none; font-weight: 600; font-size: 16px; cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,0.1); -webkit-transition: all 0.1s ease; -webkit-box-sizing: unset; -moz-box-sizing: unset; box-sizing: unset; } #cff .cff-link-slider .cff-slider-prev { left: -1px; display: none; border-radius: 0 2px 2px 0; padding: 6px 7px 6px 5px; } #cff .cff-link-slider .cff-slider-next { right: -1px; border-radius: 2px 0 0 2px; padding: 6px 5px 6px 7px; } #cff .cff-link-slider .cff-slider-next:hover, #cff .cff-link-slider .cff-slider-prev:hover{ margin-top: -19px; color: #141B38; box-shadow: 0 0 8px 2px rgba(0,0,0,0.2); -webkit-transition: all 0.1s ease; } #cff .cff-link-slider .cff-slider-prev:hover{ padding: 8px 9px 8px 5px; } #cff .cff-link-slider .cff-slider-next:hover{ padding: 8px 5px 8px 9px; } #cff .cff-link-slider .cff-slider-next:active, #cff .cff-link-slider .cff-slider-next:focus, #cff .cff-link-slider .cff-slider-prev:active, #cff .cff-link-slider .cff-slider-prev:focus{ outline: none; } #cff .cff-link-slider .cff-slider-next .fa, #cff .cff-link-slider .cff-slider-prev .fa{ position: absolute; top: 50%; margin-top: -8px; height: 16px; padding: 0; line-height: 1; } /* Masonry layout */ #cff.cff-masonry { box-sizing: border-box; } #cff.cff-masonry .cff-item:first-child, #cff.cff-masonry .cff-item { padding-top: 20px; margin-top: 0; } #cff.cff-masonry .cff-item, #cff.cff-masonry .cff-album-item, #cff.cff-masonry .cff-likebox{ float: none; display: inline-block; width: 30.3%; margin: 0 1.5%; margin-bottom: 20px; } #cff.cff-masonry.masonry-1-desktop .cff-album-item { width: 100%; margin: 0; } #cff.cff-masonry.cff-opaque-comments .cff-item{ z-index: 1; } #cff.cff-masonry.masonry-2-desktop .cff-item, #cff.cff-masonry.masonry-2-desktop .cff-album-item, #cff.cff-masonry.masonry-2-desktop .cff-likebox{ width: 47%; margin: 0 1.5%; } #cff.cff-masonry.masonry-4-desktop .cff-item, #cff.cff-masonry.masonry-4-desktop .cff-album-item, #cff.cff-masonry.masonry-4-desktop .cff-likebox{ width: 22%; margin: 0 1.5%; } #cff.cff-masonry.masonry-5-desktop .cff-item, #cff.cff-masonry.masonry-5-desktop .cff-album-item, #cff.cff-masonry.masonry-5-desktop .cff-likebox{ width: 17%; margin: 0 1.5%; } #cff.cff-masonry.masonry-6-desktop .cff-item, #cff.cff-masonry.masonry-6-desktop .cff-album-item, #cff.cff-masonry.masonry-6-desktop .cff-likebox{ width: 13.516%; margin: 0 1.5%; } #cff.cff-masonry .cff-comments-box { position: relative; z-index: 999; } #cff.cff-masonry .cff-comment-attachment, #cff.cff-masonry .cff-comment-replies-box { max-width: 100%; } /* Load more button */ #cff.cff-masonry .cff-load-more{ display: block; float: left; clear: both; /*position: absolute; bottom: -40px;*/ } @media (max-width: 800px){ #cff.cff-masonry .cff-item, #cff.cff-masonry.masonry-2-desktop .cff-item, #cff.cff-masonry.masonry-3-desktop .cff-item, #cff.cff-masonry.masonry-4-desktop .cff-item, #cff.cff-masonry.masonry-5-desktop .cff-item, #cff.cff-masonry.masonry-6-desktop .cff-item, #cff.cff-masonry .cff-album-item, #cff.cff-masonry.masonry-2-desktop .cff-album-item, #cff.cff-masonry.masonry-3-desktop .cff-album-item, #cff.cff-masonry.masonry-4-desktop .cff-album-item, #cff.cff-masonry.masonry-5-desktop .cff-album-item, #cff.cff-masonry.masonry-6-desktop .cff-album-item, #cff.cff-masonry .cff-likebox{ width: 100%; margin: 0; } #cff.cff-masonry.masonry-2-tablet .cff-posts-wrap .cff-item, #cff.cff-masonry.masonry-2-tablet .cff-posts-wrap .cff-album-item, #cff.cff-masonry.masonry-2-tablet .cff-posts-wrap .cff-likebox{ width: 47%; margin-left: 1.5%; margin-right: 1.5%; } #cff.cff-masonry.masonry-3-tablet .cff-posts-wrap .cff-item, #cff.cff-masonry.masonry-3-tablet .cff-posts-wrap .cff-album-item, #cff.cff-masonry.masonry-3-tablet .cff-posts-wrap .cff-likebox{ width: 30.3%; margin-left: 1.5%; margin-right: 1.5%; } #cff.cff-masonry.masonry-4-tablet .cff-item, #cff.cff-masonry.masonry-4-tablet .cff-album-item, #cff.cff-masonry.masonry-4-tablet .cff-likebox{ width: 22%; } #cff.cff-masonry.masonry-1-tablet .cff-album-item { width: 100%; margin: 0; } } @media (max-width: 480px){ #cff.cff-masonry .cff-item, /* 3 cols */ #cff.cff-masonry.masonry-2-desktop .cff-item, #cff.cff-masonry.masonry-3-desktop .cff-item, #cff.cff-masonry.masonry-4-desktop .cff-item, #cff.cff-masonry.masonry-5-desktop .cff-item, #cff.cff-masonry.masonry-6-desktop .cff-item, #cff.cff-masonry .cff-album-item, /* 3 cols */ #cff.cff-masonry.masonry-2-desktop .cff-album-item, #cff.cff-masonry.masonry-3-desktop .cff-album-item, #cff.cff-masonry.masonry-4-desktop .cff-album-item, #cff.cff-masonry.masonry-5-desktop .cff-album-item, #cff.cff-masonry.masonry-6-desktop .cff-album-item, #cff.cff-masonry .cff-likebox{ width: 100%; margin: 0; } #cff.cff-masonry.masonry-2-mobile .cff-posts-wrap .cff-item, #cff.cff-masonry.masonry-2-mobile .cff-posts-wrap .cff-album-item, #cff.cff-masonry.masonry-2-mobile .cff-posts-wrap .cff-likebox{ width: 47%; margin-left: 1.5%; margin-right: 1.5%; } #cff.cff-masonry.masonry-3-mobile .cff-posts-wrap .cff-item, #cff.cff-masonry.masonry-3-mobile .cff-posts-wrap .cff-album-item, #cff.cff-masonry.masonry-3-mobile .cff-posts-wrap .cff-likebox{ width: 30.3%; margin-left: 1.5%; margin-right: 1.5%; } #cff.cff-masonry.masonry-1-mobile .cff-album-item { width: 100%; margin: 0; } } #cff.cff-masonry .cff-posts-wrap .cff-album-item { margin-bottom: 3%; } /* --- Begin Pure CSS Masonry Columns Layout --- */ #cff.cff-masonry.cff-masonry-css { width: 100%; overflow: hidden; margin-bottom: 20px; } #cff.cff-masonry.cff-masonry-css .cff-posts-wrap{ -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; -webkit-column-fill: auto; column-fill: unset; -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; margin: 0; } /* --- Widths & Media --- */ #cff.cff-masonry.cff-masonry-css.masonry-2-desktop .cff-posts-wrap { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; margin: 0; } #cff.cff-masonry.cff-masonry-css.masonry-4-desktop .cff-posts-wrap { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; margin: 0; } #cff.cff-masonry.cff-masonry-css.masonry-5-desktop .cff-posts-wrap { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; margin: 0; } #cff.cff-masonry.cff-masonry-css.masonry-6-desktop .cff-posts-wrap { -webkit-column-count: 6; -moz-column-count: 6; column-count: 6; margin: 0; } #cff.cff-masonry.cff-masonry-css .cff-item, #cff.cff-masonry.cff-masonry-css.masonry-2-desktop .cff-item, #cff.cff-masonry.cff-masonry-css.masonry-4-desktop .cff-item, #cff.cff-masonry.cff-masonry-css.masonry-5-desktop .cff-item, #cff.cff-masonry.cff-masonry-css.masonry-6-desktop .cff-item, #cff.cff-masonry.cff-masonry-css .cff-likebox { float: none; display: inline-block; width: 100%; margin: 0 0 12px 0; } #cff.cff-masonry.cff-masonry-css .cff-likebox { width: 99.5%; } /* Load more button */ #cff.cff-masonry.cff-masonry-css .cff-load-more{ margin: 0 0 10px 0; position: relative; bottom: 0; } @media only screen and ( max-width: 780px ) { #cff.cff-masonry.cff-masonry-css .cff-posts-wrap, #cff.cff-masonry.cff-masonry-css.masonry-2-desktop .cff-posts-wrap, #cff.cff-masonry.cff-masonry-css.masonry-4-desktop .cff-posts-wrap, #cff.cff-masonry.cff-masonry-css.masonry-5-desktop .cff-posts-wrap, #cff.cff-masonry.cff-masonry-css.masonry-6-desktop .cff-posts-wrap { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; } #cff.cff-masonry.cff-masonry-css.masonry-2-mobile .cff-posts-wrap { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; margin: 0; } #cff.cff-masonry.cff-masonry-css.masonry-2-mobile .cff-posts-wrap .cff-item, #cff.cff-masonry.cff-masonry-css.masonry-2-mobile .cff-posts-wrap { width: 100%; } } /* --- End Pure CSS Masonry Columns Layout --- */ /* Disable masonry layout in 1 col mobile */ #cff.cff-disable-masonry{ height: auto !important; } #cff.cff-disable-masonry .cff-item, #cff.cff-disable-masonry .cff-likebox{ position: relative !important; top: auto !important; } /* An additional element is added when the reactions/likes are added and padding removed from previous element */ #cff .cff-comments-box .cff-comment-likes.cff-likes{ padding: 0; } #cff .cff-comments-box .cff-likes-info-wrap{ padding: 5px 20px 5px 10px; display: block; float: left; box-sizing: border-box; } /* Styling for album extension header */ #cff .cff-album-details { text-align: center; font-family: inherit; margin: 0 auto; padding: 0 20px; } #cff .cff-album-details *{ float: none; } #cff .cff-album-details p { margin: 0 !important; } #cff .cff-album-details span{ display: inline-block; } #cff .cff-album-details .cff-album-desc-meta { font-size: 0.85em; opacity: 0.7; margin-top: 5px !important; } #cff .cff-album-details .cff-album-photo-count{ margin-right: 5px; } #cff .cff-album-details .cff-album-desc { margin: 10px 0 40px 0 !important; } /* Mobile Cols */ @media all and (min-width: 480px){ #cff.masonry-1-desktop .cff-posts-wrap .cff-item{ width: 100%; float: left; margin: 0; margin-bottom: 0; } } /* Num Mobile Hiding */ .cff-num-diff-hide { display: none !important; } /* Mobile Cols */ @media all and (max-width: 800px){ #cff.cff-tab-cols-1 .cff-posts-wrap .cff-album-item{ width: 100%; } #cff .cff-posts-wrap .cff-album-item{ width: 47.5%; margin-left: 1.5%; margin-right: 1.5% !important; } #cff.cff-tab-cols-3 .cff-posts-wrap .cff-album-item{ width: 30%; margin-left: 1.5%; margin-right: 1.5% !important;} #cff.cff-tab-cols-4 .cff-posts-wrap .cff-album-item{ width: 22%; margin-left: 1.5%; margin-right: 1.5% !important;} #cff.cff-tab-cols-5 .cff-posts-wrap .cff-album-item{ width: 17%; margin-left: 1.5%; margin-right: 1.5% !important;} #cff.cff-tab-cols-6 .cff-posts-wrap .cff-album-item{ width: 15%; margin-left: 1.5%; margin-right: 1.5% !important;} #cff .cff-posts-wrap .cff-album-item:nth-of-type(2n), #cff.cff-tab-cols-3 .cff-posts-wrap .cff-album-item:nth-of-type(3n), #cff.cff-tab-cols-4 .cff-posts-wrap .cff-album-item:nth-of-type(4n), #cff.cff-tab-cols-5 .cff-posts-wrap .cff-album-item:nth-of-type(5n), #cff.cff-tab-cols-6 .cff-posts-wrap .cff-album-item:nth-of-type(6n){ margin-right: 0 !important; } } @media all and (max-width: 480px){ #cff .cff-album-item .cff-album-info { height: auto; } .cff-wrapper .cff-visual-header .cff-header-img img { width: 80px; } .cff-wrapper .cff-visual-header.cff-has-cover.cff-has-name .cff-header-text { margin-left: 105px; } } @media all and (max-width: 480px){ #cff.cff-mob-cols-1 .cff-posts-wrap .cff-album-item, #cff.cff-masonry.cff-mob-cols-1 .cff-posts-wrap .cff-item{ width: 100%; } #cff.cff-mob-cols-2 .cff-posts-wrap .cff-album-item{ width: 47.5%; margin-left: 1.5%; margin-right: 1.5% !important; } #cff.cff-mob-cols-3 .cff-posts-wrap .cff-album-item{ width: 30%; margin-left: 1.5%; margin-right: 1.5% !important;} #cff.cff-mob-cols-4 .cff-posts-wrap .cff-album-item{ width: 22%; margin-left: 1.5%; margin-right: 1.5% !important;} #cff.cff-mob-cols-5 .cff-posts-wrap .cff-album-item{ width: 17%; margin-left: 1.5%; margin-right: 1.5% !important;} #cff.cff-mob-cols-6 .cff-posts-wrap .cff-album-item{ width: 15%; margin-left: 1.5%; margin-right: 1.5% !important;} #cff.cff-mob-cols-2 .cff-posts-wrap .cff-album-item:nth-of-type(2n), #cff.cff-mob-cols-3 .cff-posts-wrap .cff-album-item:nth-of-type(3n), #cff.cff-mob-cols-4 .cff-posts-wrap .cff-album-item:nth-of-type(4n), #cff.cff-mob-cols-5 .cff-posts-wrap .cff-album-item:nth-of-type(5n), #cff.cff-mob-cols-6 .cff-posts-wrap .cff-album-item:nth-of-type(6n){ margin-right: 0 !important; } } /* Palettes */ #cff.cff-dark .cff-item, #cff.cff-dark .cff-album-item, #cff.cff-dark .cff-item.cff-box, #cff.cff-dark .cff-item.cff-box:first-child{ background-color: rgba(0,0,0,.85); color: rgba(255,255,255,.75); } #cff.cff-dark .cff-item a{ color: #fff; text-decoration: underline; } #cff.cff-dark .cff-date { color: rgba(255,255,255,.5); } #cff.cff-dark .cff-post-links a, #cff.cff-dark .cff-author-date, #cff.cff-dark .cff-album-info a{ color: #fff; } #cff.cff-dark .cff-album-info p{ color: rgba(255,255,255,.75); } #cff.cff-light .cff-item, #cff.cff-light .cff-album-item, #cff.cff-light .cff-item.cff-box, #cff.cff-light .cff-item.cff-box:first-child{ background-color: rgba(255,255,255,.95); color: rgba(0,0,0,.8); } #cff.cff-light .cff-item a{ color: #000; text-decoration: underline; } #cff.cff-light .cff-date { color: rgba(0,0,0,0.5); } #cff.cff-light .cff-post-links a, #cff.cff-light .cff-author-date, #cff.cff-light .cff-album-info a{ color: #000; } #cff.cff-light .cff-album-info p{ color: rgba(0,0,0,0.7); } /* GDPR NOTICE */ .cff-gdpr-notice{ max-width: 100%; box-sizing: border-box; padding: 8px 15px; margin: 0; font-size: 12px; background: #fdf7f7; display: inline-block; border-radius: 5px; border: 1px solid #e4b1b1; line-height: 1.3; display: none; } .cff-gdpr-notice .fa-lock{ width: 8px; } /* SW UPDATE Notice */ .cff-sw-update-ntc{ border: 1px solid #e4b1b1; background: #fdf7f7; color: #333; margin: 0 0 10px 0; padding: 10px 15px; font-size: 13px; text-align: center; clear: both; border-radius: 4px; } .cff-sw-update-ntc p{ padding: 5px 0 !important; margin: 0 !important; line-height: 1.3 !important; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 13px; } .cff-sw-update-ntc p:first-child b{ font-size: 14px; }