/** * All of the CSS for your public-facing functionality should be * included in this file. https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700 */ #l-youtubeWall * {box-sizing:border-box;font-family: inherit!important;} #l-youtubeWall.cp-youtubeWall{width:100%;padding: 20px;max-width: none!important;} #l-youtubeWall .cp-youtubeWall__inner{margin:0 auto;} #l-youtubeWall .cp-youtubeWall__header{text-align: center;padding:20px;} #l-youtubeWall .cp-youtubeWall__header h2{font-size:24px;line-height:24px;margin:0 0 17px 0;text-transform:uppercase;} #l-youtubeWall .cp-youtubeWall__header span{font-size:18px;line-height:18px;margin:0;} #l-youtubeWall .cp-youtubeWall__videos{padding: 0;} #l-youtubeWall .cp-youtubeWall__videos .cp-youtubeWall__liveStream{position: relative;overflow: hidden;width: 100%;height: 0;padding-bottom: 40%;max-width:1220px;margin:0 auto;} #l-youtubeWall .cp-youtubeWall__videos .cp-youtubeWall__liveStream iframe{position: absolute;top: 50%;left: 50%;bottom: 0px;right: 0px;transform: translate(-50%, -50%);z-index: 999999;max-width: 800px;max-height: 500px;width: 580px;height: 100%;} #l-youtubeWall .cp-youtubeWall__videos .cp-youtubeWall__allVideos .cp-videos__grid-overlay{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);z-index: 10;transition: all .35s ease;transform: scale(2);opacity: 0;visibility: hidden;} #l-youtubeWall .cp-youtubeWall__videos .cp-youtubeWall__allVideos a:hover .cp-videos__grid-overlay{transform:scale(1);opacity:1;visibility:visible;} #l-youtubeWall .cp-youtubeWall__videos .cp-youtubeWall__allVideos .cp-videos__grid-overlay span{display:block;} #l-youtubeWall .cp-youtubeWall__videos span.cp-youtubeIcon{width: 50px;height: 40px;border-radius: 10px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%) scale(2);z-index: 99;background-color: #fff;opacity:0;visibility:hidden;transition:all 0.35s ease-in-out;} #l-youtubeWall .cp-youtubeWall__videos span.cp-youtubeIcon__triangle{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);width: 10px;height: 10px;border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-left: 10px solid #000;border-right: 0;} #l-youtubeWall .cp-youtubeWall__videos .cp-youtubeWall__allVideos a:hover span.cp-youtubeIcon, #l-youtubeWall .cp-youtubeWall__videos .cp-playlist a:hover span.cp-youtubeIcon, #l-youtubeWall .cp-youtubeWall__videos .cp-videosid a:hover span.cp-youtubeIcon{opacity:1;visibility:visible;transform: translate(-50%,-50%) scale(1);} #l-youtubeWall .cp-youtubeWall__livestream{padding: 20px;text-align: center;} #l-youtubeWall .gwt-grid{display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;position: relative;} #l-youtubeWall .gwt-grid.l-rail a{margin: 0!important;} /* #l-youtubeWall .gwt-grid > button{background-color: #fff;z-index: 99;width:40px;height:40px;background: none;text-indent: -9999px;border: 0;position: absolute;top: 50%;transform: translate(0,-50%);-moz-transform: translate(0,-50%);-webkit-transform: translate(0,-50%);-ms-transform: translate(0,-50%);-o-transform: translate(0,-50%);} #l-youtubeWall .gwt-grid > button:after,#l-youtubeWall .gwt-grid > button:before{left: 0;top: 50%;border: solid transparent;content: "";height: 0;width: 0;position: absolute;pointer-events: none;} #l-youtubeWall .gwt-grid > button:after{border-color: rgba(136, 183, 213, 0);border-right-color: transparent;border-width: 20px;margin-top: -20px;} #l-youtubeWall .gwt-grid > button:before{border-color: transparent;border-right-color: #000;border-width: 20px;margin-top: -20px;} #l-youtubeWall .gwt-grid > button.slick-next:before{border-left-color: #000;border-right-color: transparent;} #l-youtubeWall .gwt-grid > button.slick-prev{left: 5px;} #l-youtubeWall .gwt-grid > button.slick-next{right: 5px;} */ #l-youtubeWall .gwt-grid .slick-arrow {position: absolute; z-index:101;top: 50%;width: 55px; height: 55px; margin:0; padding: 0; display: block; cursor: pointer; opacity: 0; -webkit-transition: all .3s ease;background-color:#0e0e10;border:none;transform: translate(0,-50%);-webkit-transform: translate(0,-50%);-moz-transform: translate(0,-50%);-ms-transform: translate(0,-50%);-o-transform: translate(0,-50%);} #l-youtubeWall .gwt-grid .slick-arrow span.l-img {display:inline-block;width: 55px; height: 55px;font-size:0;} #l-youtubeWall .gwt-grid .slick-arrow.slick-next {right: 0;} #l-youtubeWall .gwt-grid .slick-arrow.slick-prev {left: 0;} #l-youtubeWall .gwt-grid .slick-arrow.slick-next span{background: url('../img/slick-right.svg') no-repeat;background-size: 55px;background-position: center;} #l-youtubeWall .gwt-grid .slick-arrow.slick-prev span{background: url('../img/slick-left.svg') no-repeat;background-size: 55px;background-position: center;} #l-youtubeWall .gwt-grid:hover .slick-next {opacity: 0.8; right: 5px;} #l-youtubeWall .gwt-grid:hover .slick-prev {opacity: 0.8; left: 5px;} #l-youtubeWall .gwt-grid:hover .slick-next, #l-youtubeWall .gwt-grid:hover .slick-prev {opacity: 1;} #l-youtubeWall .gwt-grid a{position: relative;overflow:hidden;text-decoration:none;background-color:#fff;color:#000;} #l-youtubeWall .gwt-grid a:hover{z-index: 9;} #l-youtubeWall .gwt-grid a img{width:100%;} #l-youtubeWall .gwt-grid a >div > img{min-height:100%;display: inline-block;vertical-align: middle;} #l-youtubeWall .gwt-grid a span{display:block;} #l-youtubeWall .gwt-grid a > span {display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;padding:10px 5px;position: relative;z-index: 2;width: 100%;margin: 0 auto;overflow: hidden;} #l-youtubeWall .gwt-grid a > span .cp-youtubeWallVideo__thumb{max-width:60px;width: 60px;margin: 0 12px 0 0;} #l-youtubeWall .gwt-grid a > span .cp-youtubeWallVideo__thumb img{min-width: 60px;max-width:60px;width:100%;border-radius:60px;} #l-youtubeWall .gwt-grid a > span .cp-youtubeWallVideo__extras {width: 100%;display:flex;align-items: center;flex-wrap: wrap;text-align: left;} #l-youtubeWall .gwt-grid.cp-youtubeWall__allVideos--with-logo a > span .cp-youtubeWallVideo__extras {width: calc(100% - 72px)} #l-youtubeWall .gwt-grid a > span .cp-youtubeWallVideo__extras span {width:100%;} #l-youtubeWall .gwt-grid a > span span.cp-youtubeWallVideo__title{font-size:16px;line-height:16px;margin: 0 0 5px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} #l-youtubeWall .gwt-grid a > span span.cp-youtubeWallVideo__channelName{font-size:14px;line-height:14px;margin: 0 0 5px;text-transform:uppercase;} #l-youtubeWall .gwt-grid a > span span.cp-youtubeWallVideo__viewsPublished{font-size:12px;line-height:12px;display: flex;justify-content: space-between;} #l-youtubeWall .gwt-grid a > span span.cp-youtubeWallVideo__viewsPublished span{display:inline-block;vertical-align:middle;} #l-youtubeWall .gwt-grid a > span span.cp-youtubeWallVideo__viewsPublished span+span{margin-left:10px;border-left: 1px solid #000;padding-left: 10px;} #l-youtubeWall .gwt-sectionHeader{font-size: 20px;line-height: 20px; text-transform: uppercase;text-align: center;display: block;padding: 10px;} #l-youtubeWall .gwt-rotator{width: 40px;height: 40px;display: block; margin: 0 auto;} #l-youtubeWall .gwt-rotator img{width:100%;-webkit-animation: rotating 2s linear infinite;-moz-animation: rotating 2s linear infinite;-ms-animation: rotating 2s linear infinite;-o-animation: rotating 2s linear infinite;animation: rotating 2s linear infinite;} #l-youtubeWall + .cp-youtubepopup{display:none;position: fixed;left: 0;top: 0;width: 100%;height: 100vh;overflow-y: scroll;background-color: rgba(0,0,0,0.8);z-index: 999999;-webkit-box-pack: center;-moz-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-moz-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;max-width: none!important;} #l-youtubeWall + .cp-youtubepopup.is-active{display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;} #l-youtubeWall + .cp-youtubepopup .cp-youtubepopup__inner{position: relative;overflow: hidden;width: 100%;height: 0;padding-bottom:56.25%;} #l-youtubeWall + .cp-youtubepopup .cp-youtubepopup__inner iframe{position: absolute;top: 50%;left: 50%;bottom: 0;right: 0;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);z-index: 999999;max-width:800px;max-height:500px;width: 100%;height: 100%;} body.overflow{overflow: hidden;} button.gwt-close{display:none;z-index: 999999;background: none;border: 0;color: transparent;cursor: pointer;font-size: 18px;outline: none;overflow: hidden;position: absolute;top: 75px;right:75px;transform: translate(-50%, -50%);transition: all 0.2s ease-in;width: 65px;height:65px;padding: 0;text-decoration: none!important;text-transform: none;} button.gwt-close::before,button.gwt-close::after {background-color: white;content: '';display: block;height: 1px;left: 0;position: absolute;transform-origin: center left;transition: all 0.2s ease-in;width:100%;z-index: -1;} button.gwt-close::before {top: 8px;transform: rotate(45deg);} button.gwt-close::after {bottom: 8px;transform: rotate(-45deg);} button.gwt-close:hover {color: #000;} button.gwt-close:hover::before,button.gwt-close:hover::after {height: 50px;transform: rotate(0deg);} .gwt-popupoverlay{display:none;width: 100%;height: 100%;cursor: pointer;left: 0;top: 0;position: absolute;z-index: 999998;} #l-youtubeWall + .cp-youtubepopup.is-active button.gwt-close,#l-youtubeWall + .cp-youtubepopup.is-active .gwt-popupoverlay{display:block;} /* Generic */ .gwt-relative{ position: relative; } /* checkboxes hide/show */ #l-youtubeWall.cp-youtubeWall[data-channel-logo='0'] .cp-youtubeWallVideo__thumb, #l-youtubeWall.cp-youtubeWall[data-video-title='0'] .cp-youtubeWallVideo__title, #l-youtubeWall.cp-youtubeWall[data-channel-username='0'] .cp-youtubeWallVideo__channelName, #l-youtubeWall.cp-youtubeWall[data-video-views='0'] .cp-youtubeWallVideo__viewsPublished span:first-child, #l-youtubeWall.cp-youtubeWall[data-video-likes='0'] .cp-youtubeWallVideo__viewsPublished span+span{display:none;} #l-youtubeWall.cp-youtubeWall.l-hideContentContainer .gwt-grid a > span.cp-youtubeWallVideo__content{display: none;} /* Media Queries */ @media only screen and (max-width: 1180px){ #l-youtubeWall .gwt-grid:not(.l-rail) a{width: calc(33.33% - 20px)!important;} #l-youtubeWall .cp-youtubeWall__videos .cp-youtubeWall__liveStream{padding-top:56.25%;} } @media only screen and (max-width: 850px){ #l-youtubeWall .gwt-grid:not(.l-rail) a{width: calc(50% - 20px)!important;} button.gwt-close{right: 0;top: 40px;} } @media only screen and (max-width: 580px){ #l-youtubeWall .gwt-grid:not(.l-rail) a{width:100%!important;} } /* Keyframe */ @keyframes rotating { from { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; }