/* ======================================================== Katch ======================================================== */ /* --------------------------------------------------- Global UI --------------------------------------------------- */ /** * typography * -------------------------------------------------- */ html { position: relative; min-height: 100%; -ms-touch-action: manipulation; touch-action: manipulation; } body { font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #333; background-color: #f4f4f4; margin: 0; } a { color: #000; text-decoration: none; } a:hover, a:focus { color: #333; text-decoration: underline; } a:focus { outline: none; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: inherit; font-weight: 700; line-height: 1.1; color: inherit; } h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small { color: #000; } h1, h2, h3 { margin-top: 30px; margin-bottom: 15px; } h4, h5, h6 { margin-top: 15px; margin-bottom: 15px; } h6 { font-weight: normal; } h1, .h1 { font-size: 51px; } h2, .h2 { font-size: 43px; } h3, .h3 { font-size: 30px; } h4, .h4 { font-size: 19px; } h5, .h5 { font-size: 18px; } h6, .h6 { font-size: 14px; } blockquote { border-left: 3px solid #ccd1d9; } /* Buttons */ .btn_primary { display: inline-block; background: #F8644F; cursor: pointer; font-weight: 600; font-size: 13px; letter-spacing: 1.1px; text-transform: uppercase; color: #fff; padding: 11px 18px; text-decoration: none; border-radius: 6px 6px; -webkit-border-radius: 6px 6px; -moz-border-radius: 6px 6px; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; } .btn_secondary { display: inline-block; background: transparent; border: 2px solid #F8644F; cursor: pointer; font-weight: 600; font-size: 13px; letter-spacing: 1.1px; text-transform: uppercase; color: #F8644F; padding: 9px 18px; border-radius: 6px 6px; -webkit-border-radius: 6px 6px; -moz-border-radius: 6px 6px; text-decoration: none; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; } .btn_primary.gray { background: #999; } .btn_secondary.gray { border: 2px solid #C0C0C0; color: #999; } a.btn_primary:hover { text-decoration: none; color: #fff; } a.btn_secondary:hover { text-decoration: none; color: #F8644F; } a.btn_primary.gray:hover { text-decoration: none; color: #fff; } a.btn_secondary.gray:hover { text-decoration: none; color: #999; } .btn_primary.small { font-size: 12px; padding: 7px 12px; } .btn_secondary.small { font-size: 12px; padding: 5px 12px; } button { border: 0; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; } button.btn_primary { padding: 11px 18px; } button.btn_secondary { padding: 9px 18px; } button:disabled { opacity: 0.3; } @media (max-width: 500px) { button.btn_primary, .btn_primary { font-size: 12px; padding: 7px 12px; } button.btn_secondary, .btn_secondary { font-size: 12px; padding: 5px 12px; } } /* .btn_tertiary { display: inline-block; background: #ccc; cursor: pointer; font-weight: 500; font-size: 12px; text-transform: uppercase; color: #5A5A5A; padding: 4px 14px; text-decoration: none; border-radius: 2px 2px; -webkit-border-radius: 2px 2px; -moz-border-radius: 2px 2px; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; } button.btn_tertiary { padding: 8px 18px; } */ /* @media (min-width: 600px) { .btn_primary { font-size: 14px; padding: 10px 24px; } .btn_secondary { font-size: 14px; padding: 12px 24px; } .btn_tertiary { font-size: 14px; padding: 12px 24px; } button.btn_primary, button.btn_tertiary { padding: 14px 24px; } button.btn_secondary { padding: 12px 24px; } } */ /* Forms */ form h3 { font-size: 12px; font-weight: 600; color: #aaa; text-transform: uppercase; padding: 0; margin: 0 0 10px 0; } textarea, input[type="text"], input[type="email"] { box-shadow: inset 1px 1px 2px 0px rgba(0,0,0,0.30); background: #F8F8F8; border: 1px solid #C9C9C9; font-size: 18px; font-weight: 100; padding: 9px 14px 10px; border-radius: 2px 2px; -webkit-border-radius: 2px 2px; -moz-border-radius: 2px 2px; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; } label { display: block; } label.input_checkbox, label.input_radio { padding: 5px 20px 3px 23px; } label.input_checkbox input[type="checkbox"], label.input_radio input[type="radio"] { float: left; margin: 3px 0 0 -22px; } label[disabled="disabled"] p, label[disabled="disabled"] span { color: #ccc; } label p { margin: 0; padding: 0 0 2px 0; font-size: 16px; line-height: 1.3; } label span { margin: 0; padding: 0; font-size: 13px; color: rgba(0,0,0,0.5); } label.error { } label.error input { border: 1px solid #ff0000; } label .error_msg { display: block; font-size: 12px; font-weight: 600; color: #ff0000; padding: 5px 0 0 0; } .custom_select { padding: 0; margin: 0; border: 1px solid #A5A5AB; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; background-image: linear-gradient(-180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.05) 100%); } .custom_select select { width: 100%; font-size: 14px; padding: 10px 8px; border: none; box-shadow: none; background: transparent url("data:image/png;base64,R0lGODlhDwAUAIABAAAAAP///yH5BAEAAAEALAAAAAAPABQAAAIXjI+py+0Po5wH2HsXzmw//lHiSJZmUAAAOw==") no-repeat right 5px top 50%; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* Switches */ .switch { background: #e4e4e4; border: 1px solid #dfdfdf; position: relative; display: inline-block; box-sizing: content-box; overflow: visible; width: 62px; height: 30px; padding: 0px; margin: 0px; border-radius: 4px; cursor: pointer; transition: 0.1s ease-out all; -webkit-transition: 0.1s ease-out all; top: -1px; } /*adding a wide width for larger switch text*/ .switch.wide { width:80px; } .switch small { background: #fff; box-shadow: rgb(223, 223, 223) 0px 1px; border-radius: 4px; width: 28px; height: 29px; position: absolute; top: 0px; left: 0px; transition: 0.1s ease-out all; -webkit-transition: 0.1s ease-out all; } .switch.checked { background: rgb(100, 189, 99); border-color: rgb(100, 189, 99); } .switch.checked small { left: 34px; } /*wider switch text moves small further to the right*/ .switch.wide.checked small { left: 52px; } /*styles for switch-text*/ .switch .switch-text { line-height: 1.5 !important; } .switch .off { display: block; position: absolute; right: 6px; top: 6px; z-index: 0; color: #666; font-size: 12px; } .switch .on { display: none; z-index: 0; color: #fff; position: absolute; top: 6px; left: 8px; font-size: 12px; } .switch.checked .off { display: none; } .switch.checked .on { display: block; } .switch.disabled { opacity: .50; cursor: not-allowed; } .form_actions { text-align: center; padding: 5px 0; } @media (min-width: 980px) { label p { padding: 0 0 5px 0; font-size: 18px; } label span { padding: 0; font-size: 15px; } } /* UI Components */ .tabbed_nav_container { background-color: #fff; border-bottom: 1px solid #ebebeb; } .tabbed_nav, .tabbed_nav li { list-style: none; margin: 0; padding: 0; } .tabbed_nav { padding: 0 0 0 20px; } .tabbed_nav li { display: block; float: left; padding: 18px 0 16px 0; margin: 0 40px 0 0; } .tabbed_nav li a { float: left; color: #939393; text-transform: uppercase; text-decoration: none; font-weight: 600; font-size: 12px; } .tabbed_nav li a:hover { text-decoration: none; color: #333; } .tabbed_nav li.active { border-bottom: 2px solid #F7644F; } .tabbed_nav li.active a { color: #333; } .tab_content { } .tab_content.inactive { position: absolute !important; left: -9999px; /*height:100px;*/ } @media (min-width: 600px) { .tabbed_nav { padding: 0; } } /* Video Item: Feed */ .feed_item { position: relative; margin: 0 auto 20px; width: 290px; height: auto; background-color: #fff; border: 1px solid #f2f2f2; overflow: hidden; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border-radius: 8px 8px; -webkit-border-radius: 8px 8px; -moz-border-radius: 8px 8px; } .feed_item .cover_image { display: block; width: 100%; height: 260px; } .feed_item .cover_gif { display: none; } .feed_item .btn_play_video { display: block; position: absolute; top: 90px; left: 110px; width: 70px; height: 70px; background: url("../images/ico_tile_play.png") no-repeat center center; background-size: 70px 70px; } .feed_item .user { position: relative; } .feed_item .avatar { display: block; position: absolute; top: -28px; left: 15px; border: 3px solid #f7f7f7; background: #f7f7f7; width: 44px; height: 44px; border-radius: 50% 50%; -webkit-border-radius: 50% 50%; -moz-border-radius: 50% 50%; } .feed_item .twitter_verified { position: absolute; width: 20px; height: 20px; bottom: 2px; left: 46px; background: url("../images/ico_avatar_twitter_verified.png") no-repeat center center; background-size: 20px 20px; } .feed_item .realname { display: block; font-size: 12px; line-height: 24px; font-weight: 400; color: #999; vertical-align: top; margin: 2px 0 2px 70px; } .feed_item .video_title { display: inline-block; min-height: 40px; font-size: 14px; line-height: 1.4; font-weight: 400; color: #333; padding: 0 15px 44px 15px; } .feed_item .video_title:hover { text-decoration: none; } .feed_item .video_title a { color: #4982A0; } .feed_item .item_footer { height: 24px; position: absolute; bottom: 10px; left: 15px; right: 15px; } .feed_item .item_actions .action { display: block; width: 24px; height: 24px; float: right; margin: 0 0 0 10px; } .feed_item .item_actions .ico_share { background: url("../images/ico_tile_share.png") no-repeat center center; background-size: 18px 18px; opacity: 0.4; -webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .feed_item .item_actions .ico_favorite { display: none; background: url("../images/ico_tile_favorite.png") no-repeat center center; background-size: 21px 20px; opacity: 0.4; -webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .feed_item .item_actions .action:hover { opacity: 0.7; -webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .feed_item .item_actions .action span { display: none; } .feed_item .more_info { width: 59.9%; float: left; } .feed_item .more_info .num_views { line-height: 24px; font-size: 11px; font-weight: 400; color: #999; margin: 0 8px 0 0; } .feed_item .more_info .timestamp { line-height: 24px; font-size: 11px; font-weight: 400; color: #999; } .feed_item .item_actions { width: 39.9%; float: right; } .feed_item .badge_katchpick { display: block; position: absolute; top: 1px; left: -15px; width: 118px; height: 23px; background: url("../images/ico_katch_pick_flag.png") no-repeat left top; background-size: 118px 23px; } .feed_item .badge_katchpick span { display: none; } .feed_item .badge_trending { padding: 0 0 0 20px; background: url("../images/ico_badge_trending.png") no-repeat center left; background-size: 14px 14px; font-size: 12px; font-weight: 600; color: #333; } .feed_item .badge_influencer { padding: 0 0 0 20px; background: url("../images/ico_badge_influencer.png") no-repeat center left; background-size: 14px 14px; font-size: 12px; font-weight: 600; color: #333; } .influencer.feed_item .cover_image { border-bottom: 3px solid #5EA9F2; } .trending.feed_item .cover_image { border-bottom: 3px solid #F4A324; } .katchpick.feed_item .cover_image { border-bottom: 3px solid #F8644F; } .feed_item .admin_only { position: absolute; top: 3px; left: 3px; } @media (min-width: 600px) { .feed_item { border-right: 6px solid #fff; border: 0; width: 100%; height: 220px; border-radius: 8px 0 0 8px; -webkit-border-radius: 8px 0 0 8px; -moz-border-radius: 8px 0 0 8px; margin: 0 0 14px 0; } .feed_item .cover_image { position: absolute; top: 0; left: 0; width: 220px; height: 220px; border-radius: 8px 0 0 8px; -webkit-border-radius: 8px 0 0 8px; -moz-border-radius: 8px 0 0 8px; border: 0 !important; } .feed_item.hover .cover_gif { display: block; z-index: 1; position: absolute; top: 0; left: 0; width: 220px; height: 220px; border-radius: 8px 0 0 8px; -webkit-border-radius: 8px 0 0 8px; -moz-border-radius: 8px 0 0 8px; } .feed_item .btn_play_video { opacity: 0; top: 75px; left: 75px; -webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .feed_item.hover .btn_play_video { opacity: 1; z-index: 2; -webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .feed_item .video_info { margin-left: 240px; padding: 20px 20px 20px 0; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -webkit-hyphens: manual; -moz-hyphens: auto; hyphens: manual; } .feed_item .video_info .user { padding: 0 0 6px 0; } .feed_item .video_info .twitter_verified { bottom: 8px; left: 26px; } .feed_item .avatar { display: inline; position: static; border: none; } .feed_item .realname { display: inline; margin: 0; font-size: 15px; line-height: 44px; padding: 0 0 0 4px; } /* .feed_item .btn_user_follow { position: absolute; top: 8px; right: 10px; cursor: pointer; } .feed_item .btn_user_follow span { font-size: 12px; font-weight: 600; } .feed_item .btn_user_follow.not_following { color: #F8644F; text-decoration: underline; } .feed_item .btn_user_follow.following { color: #B4B4B4; text-decoration: underline; } */ .feed_item .video_title { font-size: 18px; min-height: 0; padding: 0; font-weight: 100; overflow: hidden; } .feed_item .item_footer { bottom: 16px; left: 240px; right: 16px; } .feed_item .more_info { width: 49%; float: left; } .feed_item .more_info .num_views { font-size: 12px; color: #ccc; } .feed_item .more_info .timestamp { font-size: 12px; color: #ccc; } .feed_item .badge_trending { padding: 0 0 0 24px; background-size: 18px 18px; font-size: 13px; } .feed_item .badge_influencer { padding: 0 0 0 24px; background-size: 18px 18px; font-size: 13px; } .feed_item .badge_katchpick { top: -2px; left: -20px; width: 128px; height: 27px; background-size: 128px 27px; } .feed_item .badge_trending { } .feed_item .badge_pop_on_peri { } .katchpick.feed_item { height: 325px; } .katchpick.feed_item .cover_image, .katchpick.feed_item .cover_gif { height: 325px; } .katchpick.feed_item .btn_play_video { top: 128px; } .katchpick.feed_item .video_title { font-size: 26px; max-height: 184px; } .katchpick.feed_item .service_options { margin: 108px auto 16px; } .influencer.feed_item { border-right: 6px solid #5EA9F2; } .trending.feed_item { border-right: 6px solid #F4A324; } .katchpick.feed_item { border-right: 6px solid #F8644F; } .feed_item .admin_only { top: auto; bottom: 3px; left: 3px; } } /* UI Components */ .tabbed_nav_container { background-color: #fff; border-bottom: 1px solid #ebebeb; } .tabbed_nav, .tabbed_nav li { list-style: none; margin: 0; padding: 0; } .tabbed_nav { padding: 0 0 0 20px; } .tabbed_nav li { display: block; float: left; padding: 18px 0 16px 0; margin: 0 40px 0 0; } .tabbed_nav li a { float: left; color: #939393; text-transform: uppercase; text-decoration: none; font-weight: 600; font-size: 12px; } .tabbed_nav li a:hover { text-decoration: none; color: #333; } .tabbed_nav li.active { border-bottom: 2px solid #F7644F; } .tabbed_nav li.active a { color: #333; } .tab_content { } .tab_content.inactive { position: absolute !important; left: -9999px; /*height:100px;*/ } @media (min-width: 600px) { .tabbed_nav { padding: 0; } } /* Video Item: Feed */ .feed_item { position: relative; margin: 0 auto 20px; width: 290px; height: auto; background-color: #fff; border: 1px solid #f2f2f2; overflow: hidden; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border-radius: 8px 8px; -webkit-border-radius: 8px 8px; -moz-border-radius: 8px 8px; } .feed_item .cover_image { display: block; width: 100%; height: 260px; } .feed_item .btn_play_video { display: block; position: absolute; top: 90px; left: 110px; width: 70px; height: 70px; background: url("../images/ico_tile_play.png") no-repeat center center; background-size: 70px 70px; } .feed_item .user { position: relative; } .feed_item .avatar { display: block; position: absolute; top: -28px; left: 15px; border: 3px solid #f7f7f7; background: #f7f7f7; width: 44px; height: 44px; border-radius: 50% 50%; -webkit-border-radius: 50% 50%; -moz-border-radius: 50% 50%; } .feed_item .twitter_verified { position: absolute; width: 20px; height: 20px; bottom: 2px; left: 46px; background: url("../images/ico_avatar_twitter_verified.png") no-repeat center center; background-size: 20px 20px; } .feed_item .realname { display: block; font-size: 12px; line-height: 24px; font-weight: 400; color: #999; vertical-align: top; margin: 2px 0 2px 70px; } .feed_item .video_title { display: inline-block; min-height: 40px; font-size: 14px; line-height: 1.4; font-weight: 400; color: #333; padding: 0 15px 44px 15px; } .feed_item .video_title:hover { text-decoration: none; } .feed_item .video_title a { color: #4982A0; } .feed_item .item_footer { height: 24px; position: absolute; bottom: 10px; left: 15px; right: 15px; } .feed_item .item_actions .action { display: block; width: 24px; height: 24px; float: right; margin: 0 0 0 10px; } .feed_item .item_actions .ico_share { background: url("../images/ico_tile_share.png") no-repeat center center; background-size: 18px 18px; opacity: 0.4; -webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .feed_item .item_actions .ico_favorite { display: none; background: url("../images/ico_tile_favorite.png") no-repeat center center; background-size: 21px 20px; opacity: 0.4; -webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .feed_item .item_actions .action:hover { opacity: 0.7; -webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .feed_item .item_actions .action span { display: none; } .feed_item .more_info { width: 59.9%; float: left; } .feed_item .more_info .num_views { line-height: 24px; font-size: 11px; font-weight: 400; color: #999; margin: 0 8px 0 0; } .feed_item .more_info .timestamp { line-height: 24px; font-size: 11px; font-weight: 400; color: #999; } .feed_item .item_actions { width: 39.9%; float: right; } .feed_item .badge_katchpick { display: block; position: absolute; top: 1px; left: -15px; width: 118px; height: 23px; background: url("../images/ico_katch_pick_flag.png") no-repeat left top; background-size: 118px 23px; } .feed_item .badge_katchpick span { display: none; } .feed_item .badge_trending { padding: 0 0 0 20px; background: url("../images/ico_badge_trending.png") no-repeat center left; background-size: 14px 14px; font-size: 12px; font-weight: 600; color: #333; } .feed_item .badge_influencer { padding: 0 0 0 20px; background: url("../images/ico_badge_influencer.png") no-repeat center left; background-size: 14px 14px; font-size: 12px; font-weight: 600; color: #333; } .influencer.feed_item .cover_image { border-bottom: 3px solid #5EA9F2; } .trending.feed_item .cover_image { border-bottom: 3px solid #F4A324; } .katchpick.feed_item .cover_image { border-bottom: 3px solid #F8644F; } .feed_item .admin_only { position: absolute; top: 3px; left: 3px; } @media (min-width: 600px) { .feed_item { border-right: 6px solid #fff; border: 0; width: 100%; height: 220px; border-radius: 8px 0 0 8px; -webkit-border-radius: 8px 0 0 8px; -moz-border-radius: 8px 0 0 8px; margin: 0 0 14px 0; } .feed_item .cover_image { float: left; width: 220px; height: 220px; border-radius: 8px 0 0 8px; -webkit-border-radius: 8px 0 0 8px; -moz-border-radius: 8px 0 0 8px; } .feed_item .btn_play_video { opacity: 0; top: 75px; left: 75px; -webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .feed_item.hover .btn_play_video { opacity: 1; -webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .feed_item .video_info { margin-left: 240px; padding: 20px 20px 20px 0; } .feed_item .video_info .user { padding: 0 0 6px 0; } .feed_item .video_info .twitter_verified { bottom: 8px; left: 26px; } .feed_item .avatar { display: inline; position: static; border: none; } .feed_item .realname { display: inline; margin: 0; font-size: 15px; line-height: 44px; padding: 0 0 0 4px; } /* .feed_item .btn_user_follow { position: absolute; top: 8px; right: 10px; cursor: pointer; } .feed_item .btn_user_follow span { font-size: 12px; font-weight: 600; } .feed_item .btn_user_follow.not_following { color: #F8644F; text-decoration: underline; } .feed_item .btn_user_follow.following { color: #B4B4B4; text-decoration: underline; } */ .feed_item .video_title { font-size: 18px; min-height: 0; padding: 0; font-weight: 100; } .feed_item .item_footer { bottom: 16px; left: 240px; right: 16px; } .feed_item .more_info { width: 49%; float: left; } .feed_item .more_info .num_views { font-size: 12px; color: #ccc; } .feed_item .more_info .timestamp { font-size: 12px; color: #ccc; } .feed_item .badge_trending { padding: 0 0 0 24px; background-size: 18px 18px; font-size: 13px; } .feed_item .badge_influencer { padding: 0 0 0 24px; background-size: 18px 18px; font-size: 13px; } .feed_item .badge_katchpick { top: -2px; left: -20px; width: 128px; height: 27px; background-size: 128px 27px; } .feed_item .badge_trending { } .feed_item .badge_pop_on_peri { } .katchpick.feed_item { height: 325px; } .katchpick.feed_item .cover_image { height: 325px; } .katchpick.feed_item .btn_play_video { top: 128px; } .katchpick.feed_item .video_title { font-size: 26px; } .katchpick.feed_item .service_options { margin: 108px auto 16px; } .influencer.feed_item { border-right: 6px solid #5EA9F2; } .trending.feed_item { border-right: 6px solid #F4A324; } .katchpick.feed_item { border-right: 6px solid #F8644F; } .feed_item .admin_only { top: auto; bottom: 3px; left: 3px; } } /* Video Item: Gallery */ .gallery_item { position: relative; height: auto; width: 290px; margin: 0 auto 20px; border: 1px solid #ebebeb; border-radius: 8px 8px; -webkit-border-radius: 8px 8px; -moz-border-radius: 8px 8px; background-color: #fff; overflow: hidden; } .gallery_item .cover_image { display: block; width: 290px; height: 260px; border-radius: 8px 8px 0 0; -webkit-border-radius: 8px 8px 0 0; -moz-border-radius: 8px 8px 0 0; } .gallery_item .btn_play_video { display: block; position: absolute; top: 94px; left: 110px; width: 70px; height: 70px; background: url("../images/ico_tile_play.png") no-repeat center center; background-size: 70px 70px; } .gallery_item .video_info { position: relative; } .gallery_item .user { } .gallery_item .avatar { display: block; position: absolute; top: -28px; left: 15px; width: 50px; height: 50px; border-radius: 50% 50%; -webkit-border-radius: 50% 50%; -moz-border-radius: 50% 50%; border: 2px solid #f7f7f7; background: #f7f7f7; } .gallery_item .realname { font-size: 12px; line-height: 24px; font-weight: 400; color: #999; vertical-align: top; margin: 2px 0 0 77px; } .gallery_item .video_title { display: inline-block; font-size: 15px; line-height: 1.4; font-weight: 400; color: #333; padding: 13px 15px 8px; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -webkit-hyphens: manual; -moz-hyphens: auto; hyphens: manual; } .gallery_item .video_title a { color: #4982A0; } .gallery_item .video_title a:hover { text-decoration: underline; } .gallery_item .item_footer { height: 24px; margin: 0 15px 15px; } .gallery_item .more_info { width: 49%; float: left; } .gallery_item .more_info .num_views { line-height: 24px; font-size: 12px; font-weight: 400; color: #999; margin: 0 8px 0 0; } .gallery_item .more_info .timestamp { line-height: 24px; font-size: 12px; font-weight: 400; color: #999; } .gallery_item .item_actions { width: 49%; float: right; } .gallery_item .item_actions .action { display: block; width: 24px; height: 24px; float: right; margin: 0 0 0 10px; background-color: #ccc; } .gallery_item .item_actions .action span { display: none; } .gallery_item .item_actions .ico_share { background: url("../images/ico_tile_share.png") no-repeat center center; background-size: 18px 18px; opacity: 0.4; -webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .gallery_item .item_actions .ico_edit { background: url("../images/ico_tile_edit.png") no-repeat center center; background-size: 19px 19px; opacity: 0.4; -webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .gallery_item .item_actions .ico_favorite { background: url("../images/ico_tile_favorite.png") no-repeat center center; background-size: 21px 20px; opacity: 0.4; -webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .gallery_item .item_actions .ico_collection_add { background: url("../images/ico_tile_add_collection.png") no-repeat center center; background-size: 20px 15px; opacity: 0.4; -webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .gallery_item .item_actions .ico_collection_remove { background: url("../images/ico_tile_remove_collection.png") no-repeat center center; background-size: 17px 15px; opacity: 0.6; -webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .gallery_item .item_actions .ico_collection_edit { background: url("../images/ico_tile_edit_collection.png") no-repeat center center; background-size: 17px 15px; opacity: 0.6; -webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .gallery_item .item_actions .ico_download { display: none; background: url("../images/ico_tile_download_2.png") no-repeat center center; background-size: 22px 20px; opacity: 0.4; -webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .gallery_item .item_actions .action:hover { opacity: 0.7; -webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .gallery_item .item_actions .ico_collection_remove:hover, .gallery_item .item_actions .ico_collection_edit:hover { opacity: 1; } .gallery_item .privacy { display: none; position: absolute; top: 8px; right: 8px; background-color: #333; color: #fff; font-size: 11px; font-weight: 600; line-height: 14px; padding: 2px 4px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; } .gallery_item.private .privacy { display: block; background: #333 url("../images/ico_private_indicator.png") no-repeat left 5px center; background-size: 8px 10px; padding: 3px 5px 3px 17px; } .gallery_item .share_options { display: none; } .gallery_item .admin_only { display: none; position: absolute; top: 3px; left: 3px; } /* Delete/Deleting states for profile Gallery Items */ .gallery_item.deleting { background: #fff url("../images/ui_loading_lg_white.gif") no-repeat center center !important; } .gallery_item.deleting .cover_image, .gallery_item.deleted .cover_image, .gallery_item.deleting .btn_play_video, .gallery_item.deleted .btn_play_video, .gallery_item.deleting .video_info, .gallery_item.deleted .video_info, .gallery_item.deleting .item_footer, .gallery_item.deleted .item_footer { display: none !important; } .gallery_item .deleted_message { font-size: 18px; color: #333; text-align: center; padding: 150px 0 0 0; } @media (min-width: 399px) { .gallery_item { margin: 10px; height: 415px; } .gallery_item .cover_image { position: absolute; top: 0; left: 0; height: 326px; } .gallery_item .btn_play_video { top: 110px; } .gallery_item .video_info { background-color: #fff; position: absolute; bottom: -10px; left: 0; right: 0; -webkit-transition: bottom 0.1s ease; -moz-transition: bottom 0.1s ease; -o-transition: bottom 0.1s ease; transition: bottom 0.1s ease; border-radius: 0 0 30px 30px; -webkit-border-radius: 0 0 30px 30px; -moz-border-radius: 0 0 30px 30px; } .gallery_item.hover .video_info { bottom: 30px; -webkit-transition: bottom 0.2s ease; -moz-transition: bottom 0.2s ease; -o-transition: bottom 0.2s ease; transition: bottom 0.2s ease; } .gallery_item .avatar { top: -25px; left: 15px; width: 44px; height: 44px; } .gallery_item .item_footer { position: absolute; background-color: #fff; height: 30px; bottom: 0px; left: 0; right: 0; margin: 0; padding: 10px 15px 6px; border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; } .gallery_item .realname { margin: 2px 0 0 68px; } .gallery_item .video_title { width: 260px; font-size: 15px; line-height: 1.3; height: 80px; overflow: hidden; padding: 9px 15px 11px; } .gallery_item .more_info .num_views { font-size: 12px; color: #ccc; } .gallery_item .more_info .timestamp { font-size: 12px; color: #ccc; } .gallery_item .item_actions .ico_download { display: block; } .gallery_item.hover .more_info .num_views { color: #999; } .gallery_item.hover .more_info .timestamp { color: #999; } .gallery_item.with_owner { height: 435px; } .gallery_item.with_owner .item_footer { } } @media (min-width: 600px) { .gallery_item .btn_play_video { opacity: 0; -webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .gallery_item.hover .btn_play_video { opacity: 1; -webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } } /* Collection Item */ .collection_item { margin-top: -1px; position: relative; width: 100%; min-height: 90px; background-color: #fff; border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; overflow: hidden; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .collection_item .collection_image { display: block; float: left; width: 50px; height: 50px; background: #ebebeb; margin: 14px 0 0 14px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; } .collection_item .collection_image img { width: 50px; height: 50px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; } .collection_item .collection_image .btn_secondary { display: none; } .collection_item .collection_info { display: block; margin-left: 78px; padding: 12px 16px 0 0; overflow: hidden; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -webkit-hyphens: manual; -moz-hyphens: auto; hyphens: manual; } .collection_item .collection_info:hover { text-decoration: none; } .collection_item .collection_title { font-size: 18px; font-weight: 400; color: #333; padding: 0 0 2px 0; } .collection_item .collection_desc { font-size: 14px; font-weight: 400; color: #999; margin: 0 0 48px 0; } .collection_item .item_footer { position: absolute; bottom: 14px; right: 8px; left: 78px; } .collection_item .more_info { width: 49%; float: left; } .collection_item .num_videos { font-size: 12px; } .collection_item .item_actions { width: 49%; float: left; } .collection_item .item_actions a { font-size: 12px; line-height: 22px; float: right; color: #f8644f; margin: 0 0 0 15px; text-transform: uppercase; cursor: pointer; } .collection_item .item_actions a:hover { } @media (min-width: 630px) { .collection_item { border: 0; min-height: 0; height: 140px; border: 1px solid #ebebeb; border-radius: 8px 8px; -webkit-border-radius: 8px 8px; -moz-border-radius: 8px 8px; margin: 0 0 16px 0; } .collection_item .collection_image { width: 140px; height: 140px; margin: 0; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; } .collection_item .collection_image img { width: 140px; height: 140px; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; } .collection_item .collection_image .btn_secondary { display: inline-block; margin: 52px 15px; padding: 5px 12px; } .collection_item .collection_info { margin-left: 158px; max-height: 76px; } .collection_item .collection_title { font-size: 24px; font-weight: 100; width: 424px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .collection_item .collection_desc { margin: 0; } .collection_item .item_footer { left: 158px; } } .no_video_default_message { background-color: #fff; width: 90%; margin: 90px auto; padding: 25px 0; border: 1px solid #DEDEDE; border-radius: 6px 6px; -webkit-border-radius: 6px 6px; -moz-border-radius: 6px 6px; text-align: center; } .no_video_default_message h1 { font-size: 18px; line-height: 1.3; font-weight: 100; color: #333; margin: 0 0 8px 0; } .no_video_default_message p { font-size: 14px; font-weight: 400; color: #333; margin: 0; } .no_video_default_message p a{ color: #F8644F; text-decoration: underline; } @media (min-width: 980px) { .no_video_default_message { width: 600px; margin: 120px auto 350px; padding: 40px 0; } .no_video_default_message h1 { font-size: 28px; } .no_video_default_message p { font-size: 16px; } } .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .disable_text_highlighting { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .loading_message { height: 48px; width: 48px; margin: 20px auto; padding: 0; background: url("../images/ui_loading_lg_white.gif") no-repeat center center; } /* Admin Only Controls */ .admin_only a { font-size: 9px; text-transform: uppercase; background-color: #F7644F; color: #fff; padding: 1px 4px; } .admin_only .num_views { font-size: 9px; text-transform: uppercase; background-color: #333; color: #fff; padding: 1px 4px; } /* --------------------------------------------------- Layout Components --------------------------------------------------- */ /** * tmpl_header * -------------------------------------------------- */ .tmpl_header { background: #f8644f; } .tmpl_header .wrap { width: auto; min-height: 46px; } .tmpl_header .branding { position: relative; float: left; height: 46px; width: 60px; overflow: hidden; } .tmpl_header .katch_logo { position: absolute; top: 0px; left: 0; display: block; margin: 0 0 0 12px; background: url('../images/global_katch_logo_head_klyde.png') no-repeat left center; background-size: 110px 32px; width: 48px; height: 46px; cursor: pointer; } .tmpl_header .katch_logo span { display: none; } .tmpl_header.search_nav .katch_logo, .tmpl_header.mobile_nav .katch_logo { top: 50px; } .tmpl_header .search { position: absolute; top: -50px; left: 0; right: 0; height: 46px; clear: both; background-color: #f8644f; } .tmpl_header.search_nav .search { top: 0; z-index: 100; } .tmpl_header .search .input_wrapper { position: absolute; top: 0; left: 0; right: 53px; padding: 6px 0 6px 6px; height: 46px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .tmpl_header .search #search_username_value { position: relative; width: 100%; border: 0; box-shadow: none; background: #f88371 url('../images/global_ico_search.png') no-repeat right 6px center; background-size: 22px 21px; padding: 7px 10px; font-size: 14px; color: #fff; border-radius: 4px 4px; -webkit-border-radius: 4px 4px; -moz-border-radius: 4px 4px; box-sizing: border-box; } .tmpl_header .search #search_username_value:focus { outline: none; } .tmpl_header .search #search_username_value::-webkit-input-placeholder{ color: #FCE0DC; } .tmpl_header .search #search_username_value::-moz-placeholder { color: #FCE0DC; } .tmpl_header .search #search_username_value:-ms-input-placeholder { color: #FCE0DC; } .tmpl_header .search #search_username_dropdown { position: absolute; top: 40px; left: 0; width: 300px; z-index: 10000000; } .tmpl_header .search #search_username_dropdown .angucomplete-row { color: #333; } .tmpl_header .search #search_username_dropdown .angucomplete-selected-row { background: #ddd; color: #333; } .tmpl_header .search #search_username_dropdown .angucomplete-title { font-size: 16px; color: #333; } .tmpl_header .search #search_username_dropdown .angucomplete-description { font-size: 12px; color: rgba(0,0,0,0.5); } .tmpl_header .search .hide_search { width: 28px; height: 30px; background: #333; float: right; margin: 8px 14px 0 4px; cursor: pointer; background: url('../images/global_ico_close.png') no-repeat center center; background-size: 13px 13px; } .tmpl_header .show_search_wrap { position: relative; float: right; width: 61px; height: 46px; overflow: hidden; } .tmpl_header .show_search { position: absolute; top: 0; left: 0; width: 30px; height: 30px; background: url('../images/global_ico_search.png') no-repeat center center; background-size: 22px 21px; margin: 8px 6px 0 25px; cursor: pointer; } .tmpl_header.mobile_nav .show_search, .tmpl_header.search_nav .show_search { top: 50px; } .tmpl_header .global_navigation { position: absolute; top: -50px; left: 0; right: 60px; height: 46px; clear: both; } .tmpl_header.mobile_nav .global_navigation { top: 0; } .tmpl_header .global_navigation ul, .tmpl_header .global_navigation li { list-style: none; margin: 0; padding: 0; } .tmpl_header .global_navigation ul { margin: 0 0 0 10px; } .tmpl_header .global_navigation li { display: inline-block; margin: 0 20px 0 0; } .tmpl_header .global_navigation li a{ color: #fff; font-size: 14px; font-weight: 500; line-height: 46px; } .tmpl_header .account_status { position: relative; float: right; width: 48px; height: 46px; overflow: hidden; } .tmpl_header .logged_in_user { position: absolute; top: 0; left: 0; width: 30px; height: 30px; margin: 8px 14px 0 4px; cursor: pointer; } .tmpl_header .logged_in_user img { width: 30px; height: 30px; margin: 0; border-radius: 50% 50%; -webkit-border-radius: 50% 50%; -moz-border-radius: 50% 50%; } .tmpl_header.search_nav .logged_in_user { top: 50px; } .tmpl_header .logged_out_user { position: relative; float: right; width: 48px; height: 46px; } .tmpl_header .logged_out_user a { display: block; position: absolute; top: 0; left: 0; background: url('../images/global_ico_login.png') no-repeat center center; background-size: 19px 20px; width: 30px; height: 30px; margin: 8px 14px 0 4px; cursor: pointer; } .tmpl_header .logged_out_user span { display: none; } .tmpl_header.search_nav .logged_out_user a { top: 50px; } .tmpl_header .katch_logo, .tmpl_header .search, .tmpl_header .show_search, .tmpl_header .global_navigation, .tmpl_header .logged_in_user, .tmpl_header .logged_out_user a { -webkit-transition: top 0.3s ease; -moz-transition: top 0.3s ease; -o-transition: top 0.3s ease; transition: top 0.3s ease; } #landing_page .txt_signin { } #landing_page .txt_signup { display: none; } @media (min-height: 500px) { .tmpl_header .search #search_username_dropdown { max-height: 400px; } } @media (min-height: 600px) { .tmpl_header .search #search_username_dropdown { max-height: 500px; } } @media (min-height: 700px) { .tmpl_header .search #search_username_dropdown { max-height: 600px; } } @media (max-width: 749px) { } @media (min-width: 750px) { /*#landing_page .tmpl_container { padding: 20px 0 0 0; }*/ .tmpl_header .show_search_wrap, .tmpl_header .search .hide_search { display: none; } .tmpl_header .search { position: static; clear: none; float: right; width: 266px; } .tmpl_header .global_navigation { position: static; clear: none; float: right; } .tmpl_header.search_nav .katch_logo, .tmpl_header.mobile_nav .katch_logo { top: 0px; } .tmpl_header .search .input_wrapper { position: static; } .tmpl_header .search #search_username_value { width: 250px; } .tmpl_header .account_status { width: auto; height: auto; } .tmpl_header .logged_in_user { position: static; width: auto; height: auto; } .tmpl_header .logged_out_user { width: auto; } .tmpl_header .logged_out_user a { position: relative; display: inline; background: none; margin: 0 20px 0 0; color: #fff; } .tmpl_header .logged_out_user span { display: inline; color: #fff; font-size: 14px; font-weight: 500; line-height: 46px;} } @media (min-width: 980px) { .tmpl_header .wrap { width: 980px; margin: 0 auto; } .tmpl_header .branding { width: 109px; } .tmpl_header .katch_logo { width: 109px; margin: 0; } .tmpl_header .logged_in_user { margin: 8px 0 0 0; } .tmpl_header .logged_out_user a { margin: 0 8px 0 0; } } /** * tmpl_footer * -------------------------------------------------- */ .tmpl_footer { width: 100%; height: auto; background: #333; text-align: center; } .tmpl_footer .wrap { width: 100%; } .tmpl_footer .col-1 { width: auto; padding: 20px 0; } .tmpl_footer .col-2 { width: auto; padding: 15px 0 40px; border-top: 1px solid #444; } .tmpl_footer .col-1 span { display: block; width: 100%; font-size: 15px; color: #9A9A9A; } .tmpl_footer .col-1 span a { font-size: 15px; color: #9A9A9A; text-decoration: none; } .tmpl_footer .col-1 span a:hover { text-decoration: underline; } .tmpl_footer .col-2 ul, .tmpl_footer .col-2 li { list-style: none; margin: 0; padding: 0; } .tmpl_footer .col-2 ul { } .tmpl_footer .col-2 li { display: inline; } .tmpl_footer .col-2 a { display: block; font-size: 15px; color: #9A9A9A; line-height: 25px; padding: 5px 0; } .tmpl_footer .col-2 a:hover { color: #ccc; } @media (min-width: 600px) { } @media (min-width: 980px) { body { margin: 0 0 146px 0; } .tmpl_footer .wrap { width: 980px; margin: 0 auto; } .tmpl_footer { position: absolute; left: 0; bottom: 0; height: 76px; text-align: left; } .tmpl_footer .col-1 { width: 40%; float: left; padding: 0; } .tmpl_footer .col-1 span { margin: 28px 0; } .tmpl_footer .col-2 { width: 59%; float: right; padding: 0; } .tmpl_footer .col-2 ul { text-align: right; padding: 24px 0 0 0; } .tmpl_footer .col-2 a { display: inline; padding: 2px 20px 2px 0; } .tmpl_footer a.ico_facebook_footer { background: url('../images/ico_facebook_footer.png') no-repeat left center; background-size: 24px 24px; padding: 2px 23px 2px 0; opacity: 0.5; } .tmpl_footer a.ico_twitter_footer { background: url('../images/ico_twitter_footer.png') no-repeat left center; background-size: 27px 22px; padding: 2px 42px 2px 0; opacity: 0.5; } .tmpl_footer a.ico_facebook_footer:hover, .tmpl_footer a.ico_twitter_footer:hover { opacity: 0.75; } .tmpl_footer .ico_facebook_footer span, .tmpl_footer .ico_twitter_footer span { display: none; } } /** * tmpl_content * -------------------------------------------------- */ .tmpl_content { width: auto; } @media (min-width: 980px) { .tmpl_content { width: 980px; margin: 0 auto; } } /** * Views * -------------------------------------------------- */ /* User Collection */ .user_collection { } .user_collection .user_info { background-color: #fff; border-bottom: 1px solid #ebebeb; text-align: center; } .user_collection .user_info .wrap { padding: 20px 0 20px; } .user_collection .user_info .avatar { display: block; margin: 0 auto; width: 70px; height: 70px; } .user_collection .user_info .avatar img { display: block; width: 70px; height: 70px; border-radius: 50% 50%; -webkit-border-radius: 50% 50%; -moz-border-radius: 50% 50%; } .user_collection .realname { display: block; font-size: 14px; font-weight: 600; color: #333; margin: 5px 0 0 0; } .user_collection .username { display: block; font-size: 12px; font-weight: 100; color: #333; margin: 0 0 10px 0; } .user_collection .bio { width: 300px; margin: 0 auto; } .user_collection .bio_text { font-size: 12px; font-weight: 400; color: #333; } .user_collection .bio_text a { } .user_collection .bio .location { display: none; background: url("../images/ico_location_pin.png") no-repeat 2px 9px; padding: 0 0 0 20px; background-size: 13px 17px } .user_collection .bio .rss_feed { display: none; background: url("../images/ico_rss_feed.png") no-repeat 2px 11px; background-size: 13px 13px; padding: 0 0 0 20px; } .user_collection .user_stats { display: none; } .user_collection .profile_tabbed_nav { background-color: #fff; border-bottom: 1px solid #ebebeb; } .user_collection .profile_tabbed_nav .wrap { width: 100%; } .user_collection .tab_content.inactive { display: none; } .user_collection .gallery_results { margin: 30px 0 30px 0; } .user_collection .collections_results { margin: 30px 0 30px 0; } .user_collection .results_actions { text-align: center; padding: 0 0 26px 0; } .user_collection .no_video_message { padding: 60px 20px; } .user_collection .no_video_message .ico_tv_off { width: 100%; height: 108px; background: url("../images/ico_tv_off.png") no-repeat center center; background-size: 83px 108px; } .user_collection .no_video_message h1 { text-align: center; font-size: 20px; font-weight: 600; color: #000; line-height: 1.3; margin: 27px 0 8px 0; } .user_collection .no_video_message p { text-align: center; font-size: 16px; font-weight: 400; color: #000; margin: 0; } .user_collection .admin_only { clear: both; } @media (min-width: 399px) { .user_collection .wrap { width: 324px; margin: 0 auto; } .user_collection .gallery_results .wrap { margin: 0 auto 60px; } .user_collection .collections_results .wrap { width: 100%; margin: 0 0 40px 0; } } @media (min-width: 630px) { .user_collection .wrap { width: 600px; } .user_collection .collections_results .wrap { width: 600px; margin: 0 auto; } .user_collection .gallery_results .wrap { width: 624px; margin: 0 auto 80px; } .user_collection .user_profile .wrap { padding: 26px 0 34px; } .user_collection .profile_tabbed_nav .wrap { width: 600px; } .user_collection .user_info { text-align: left; } .user_collection .user_info .wrap { padding: 40px 0 30px; } .user_collection .user_info .avatar { margin: 0; float: left; width: 106px; height: 86px; } .user_collection .user_info .avatar img { width: 86px; height: 86px; } .user_collection .realname { display: inline; font-size: 20px; font-weight: 600; margin: 0; } .user_collection .username { display: inline; font-size: 16px; font-weight: 100; margin: 0; } .user_collection .bio_text { font-size: 18px; font-weight: 100; margin: 0 0 4px 0; } .user_collection .bio { float: left; margin: 5px 0 15px 0; text-align: left; width: 460px; } .user_collection .bio .location { display: inline-block; font-size: 14px; color: rgba(0,0,0,0.5); padding: 8px 20px 0 20px; } .user_collection .bio .rss_feed { display: inline-block; font-size: 14px; color: rgba(0,0,0,0.5); padding: 8px 20px 0 20px; } .user_collection .profile_tabbed_nav .wrap { margin: 0 auto; } .user_collection .gallery_item { float: left; } } @media (min-width: 980px) { .user_collection .gallery_results .wrap { width: 940px; margin: 0 auto 180px; } .user_collection .no_video_message { width: 400px; margin: 0 auto; padding: 130px 0; } .user_collection .no_video_message h1 { font-size: 30px; margin: 27px 0 8px 0; } .user_collection .no_video_message p { font-size: 20px; margin: 0; } } /* Tag Collection */ .hashtag_collection { } .hashtag_collection .search_term { background-color: #fff; border-bottom: 1px solid #ebebeb; margin: 0 0 20px 0; text-align: center; } .hashtag_collection .search_term h3 { font-size: 18px; font-weight: 400; color: #333; margin: 0; padding: 16px 0 20px; } .hashtag_collection .user_profile { background-color: #fff; border-bottom: 1px solid #ebebeb; margin: 0 0 20px 0; text-align: center; } .hashtag_collection .user_profile .wrap { padding: 20px 0 20px; } .hashtag_collection .user_profile .avatar img { display: block; margin: 0 auto; height: 80px; border: 1px solid #ebebeb; border-radius: 8px 8px; -webkit-border-radius: 8px 8px; -moz-border-radius: 8px 8px; } .hashtag_collection .avatar_name { padding: 12px 0 0 0; } .hashtag_collection .avatar_name .collection_title { font-size: 18px; font-weight: 600; line-height: 1.1; } .hashtag_collection .avatar_name .collection_owner { font-size: 13px; } .hashtag_collection .avatar_name .collection_owner a { color: #F8644F; } .hashtag_collection .avatar_name.large .collection_title { font-size: 30px; } .hashtag_collection .avatar_name.large .collection_owner { display: block; margin: 4px 0 0 0; font-size: 16px; } .hashtag_collection .bio { padding: 6px 0 0 0; } .hashtag_collection .bio .bio_text { font-size: 14px; font-weight: 100; line-height: 1.4; width: auto; margin: 0; } .hashtag_collection .bio .bio_text a { color: #f8644f; } .hashtag_collection .btn_primary { margin: 14px 0 0; } .hashtag_collection .collection_stats { display: none; } .hashtag_collection .no_video_message_custom { background-color: #fff; width: 90%; margin: 90px auto; padding: 25px 0; border: 1px solid #ebebeb; border-radius: 6px 6px; -webkit-border-radius: 6px 6px; -moz-border-radius: 6px 6px; text-align: center; } .hashtag_collection .no_video_message_custom h2 { font-size: 18px; line-height: 1.3; font-weight: 100; color: #333; margin: 0 0 8px 0; } .hashtag_collection .no_video_message_custom p { font-size: 14px; font-weight: 400; color: #333; margin: 0; } .hashtag_collection .no_video_message_custom p a{ color: #F8644F; text-decoration: underline; } .hashtag_collection .loading_message { margin: 100px auto; } @media (min-width: 399px) { .hashtag_collection .wrap { width: 324px; margin: 0 auto; } .hashtag_collection .gallery_results .wrap { margin: 0 auto 60px; } } @media (min-width: 630px) { .hashtag_collection .wrap { width: 626px; } .hashtag_collection .gallery_results .wrap { margin: 0 auto 80px; } .hashtag_collection .search_term { margin: 0 0 20px 0; } .hashtag_collection .search_term h3 { font-size: 30px; font-weight: 100; padding: 26px 0 30px; } .hashtag_collection .user_profile .wrap { padding: 26px 0 34px; } .hashtag_collection .gallery_item { float: left; } .hashtag_collection .user_profile .avatar img { height: 120px; } .hashtag_collection .avatar_name .realname { font-size: 18px; padding: 16px 0 0 0; } .hashtag_collection .bio .bio_text { font-size: 16px; width: 500px; margin: 0 auto; } .hashtag_collection .no_video_message_custom { margin: 100px auto 150px; } } @media (min-width: 980px) { .hashtag_collection .wrap { width: 940px; } .hashtag_collection .gallery_results .wrap { margin: 0 auto 180px; } .hashtag_collection .no_video_message_custom { width: 600px; margin: 176px auto 300px; padding: 40px 0; } .hashtag_collection .no_video_message_custom h2 { font-size: 28px; } .hashtag_collection .no_video_message_custom p { font-size: 16px; } } /* Single Replay Video */ .jwplayer:focus { border: 0 !important; outline: 0 !important; } .single_replay { } .single_replay .wrap { width: auto; } .single_replay .player_container { margin: 30px 0 30px 0; } /* JWPlayer Splitscreen w/Comments */ .player_container .jwplayer_wrapper { width: 320px; margin: 0 auto; } .player_container .replay_comments { position: relative; width: 320px; margin: 0 auto; height: 146px; overflow-x: hidden; overflow-y: auto; background: #F4F4F4; } .player_container .no_comment_msg { width: 300px; margin: 38px auto 0; text-align: center; font-size: 24px; font-weight: 200; color: #aaa; } .player_container .comment { position: relative; margin: 0 0 20px 0; } .player_container .comment .avatar { width: 40px; height: 30px; float: left; } .player_container .comment .avatar img { display: block; width: 30px; height: 30px; border-radius: 50% 50%; -webkit-border-radius: 50% 50%; -moz-border-radius: 50% 50%; } .player_container .comment .realname { margin: 0 0 0 40px; } .player_container .comment .realname a { font-size: 11px; color: #aaa; text-transform: uppercase; } .player_container .comment .comment_text { font-size: 16px; color: #666; margin: 0 0 0 40px; } .player_container .comment .btn_delete_comment { position: absolute; top: 18px; right: -20px; width: 16px; height: 16px; background: url("../images/ico_delete_comment.png") no-repeat left top; background-size: 16px 16px; opacity: 0.7; cursor: pointer; } .player_container .comment .btn_delete_comment:hover { opacity: 1.0; } .player_container .comment .btn_delete_comment span { display: none; } .player_container .scroll_container { padding: 15px 20px 15px 15px; } .player_container .acc_toggle_play { position: absolute; width: 22px; height: 22px; background: transparent; right: 0; top: 0; overflow: hidden; cursor: pointer; } .player_container .acc_toggle_play span { font-size: 1px; color: rgba(255,255,255,0); } .player_container .replay_comments .no_comment_msg { width: 300px; margin: 38px auto 0; text-align: center; font-size: 24px; font-weight: 200; color: #aaa; } .player_container .replay_comments .comment { position: relative; margin: 0 0 20px 0; } .player_container .replay_comments .comment .avatar { width: 40px; height: 30px; float: left; } .player_container .replay_comments .comment .avatar img { display: block; width: 30px; height: 30px; border-radius: 50% 50%; -webkit-border-radius: 50% 50%; -moz-border-radius: 50% 50%; } .player_container .replay_comments .comment .realname { margin: 0 0 0 40px; } .player_container .replay_comments .comment .realname a { font-size: 11px; color: #aaa; text-transform: uppercase; } .player_container .replay_comments .comment .comment_text { font-size: 16px; color: #666; margin: 0 0 0 40px; } .player_container .replay_comments .comment .btn_delete_comment { position: absolute; top: 18px; right: -20px; width: 16px; height: 16px; background: url("../images/ico_delete_comment.png") no-repeat left top; background-size: 16px 16px; opacity: 0.7; cursor: pointer; } .player_container .replay_comments .comment .btn_delete_comment:hover { opacity: 1.0; } .player_container .replay_comments .comment .btn_delete_comment span { display: none; } /* JWPlayer Fullscreen */ .fs_player_container { } .fs_player_container .jwplayer_wrapper { position: relative; width: 300px; height: 533px; overflow: hidden; background: #0a0a0a; margin: 0 auto 24px; } .fs_player_container .jwplayer_wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .fs_player_container .jwplayer_wrapper.fullscreen { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: 0; width: 100%; height: 100%; z-index: 10000; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .fs_player_container object.jwswf, .fs_player_container .jwplayer:focus { outline: none; } .fs_player_container, .fs_player_container:before, .fs_player_container:after { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .fs_player_container .hearts_play { position: absolute; width: 60px; height: 60px; bottom: 10px; right: 5px; display: flex; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; align-items: center; -moz-box-pack: center; justify-content: center; } .fs_player_container .hearts_play .heart3 { display: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 60px; opacity: 0.2; z-index: 7; } .fs_player_container .hearts_play .heart2 { display: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 48px; opacity: 0.5; z-index: 8; } .fs_player_container .hearts_play .heart1 { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 34px; opacity: 1.0; z-index: 9; } .fs_player_container .hearts_play .heartcount { color: #fff; cursor: default; font-size: 10px; line-height: 10px; font-weight: 600; margin: auto; z-index: 10; } .fs_player_container .hearts_play.speed1 .heart1 { -webkit-animation: smallBeat 2s infinite; -moz-animation: smallBeat 2s infinite; -o-animation: smallBeat 2s infinite; animation: smallBeat 2s infinite; } .fs_player_container .hearts_play.speed2 .heart1 { display: block; -webkit-animation: smallBeat 1.2s infinite; -moz-animation: smallBeat 1.2s infinite; animation: smallBeat 1.2s infinite; } .fs_player_container .hearts_play.speed2 .heart2 { display: block; -webkit-animation: mediumBeat 1.2s infinite; -moz-animation: mediumBeat 1.2s infinite; animation: mediumBeat 1.2s infinite; -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; animation-delay: 0.1s; } .fs_player_container .hearts_play.speed3 .heart1 { display: block; -webkit-animation: smallBeat 0.8s infinite; -moz-animation: smallBeat 0.8s infinite; animation: smallBeat 0.8s infinite; } .fs_player_container .hearts_play.speed3 .heart2 { display: block; -webkit-animation: mediumBeat 0.8s infinite; -moz-animation: mediumBeat 0.8s infinite; animation: mediumBeat 0.8s infinite; -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; animation-delay: 0.1s; } .fs_player_container .hearts_play.speed3 .heart3 { display: block; -webkit-animation: largeBeat 0.8s infinite; -moz-animation: largeBeat 0.8s infinite; animation: largeBeat 0.8s infinite; -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s; } /*.fs_player_container #Hearts path { fill: red; }*/ @-webkit-keyframes smallBeat { 0% { -webkit-transform: scale(1.15); } 100% { -webkit-transform: scale(1.0); } } @-webkit-keyframes mediumBeat { 0% { -webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(0.5); } } @-webkit-keyframes largeBeat { 0% { -webkit-transform: scale(1.2); } 100% { -webkit-transform: scale(0.5); } } @-moz-keyframes smallBeat { 0% { transform: scale(1.15); } 100% { transform: scale(1.0); } } @-moz-keyframes mediumBeat { 0% { transform: scale(1.1); } 100% { transform: scale(0.5); } } @-moz-keyframes largeBeat { 0% { transform: scale(1.2); } 100% { transform: scale(0.5); } } @keyframes smallBeat { 0% { transform: scale(1.15); } 100% { transform: scale(1.0); } } @keyframes mediumBeat { 0% { transform: scale(1.1); } 100% { transform: scale(0.5); } } @keyframes largeBeat { 0% { transform: scale(1.2); } 100% { transform: scale(0.5); } } .fs_player_container .ico_fullscreen { display: none; position: absolute; background: url("../images/jwplayer/ico_fullscreen.png") no-repeat left top; width: 34px; height: 34px; background-size: 136px 34px; top: 16px; right: 16px; cursor: pointer; } .fs_player_container .ico_fullscreen:hover { background-position: -34px 0px; } .fs_player_container .ico_fullscreen.close { background-position: -68px 0px; } .fs_player_container .ico_fullscreen.close:hover { background-position: -102px 0px; } .fs_player_container .ico_toggle_comments { display: none; position: absolute; background: url("../images/jwplayer/ico_togglecomments.png") no-repeat left top; width: 34px; height: 34px; background-size: 136px 34px; top: 60px; right: 16px; cursor: pointer; } .fs_player_container .ico_toggle_comments:hover { background-position: -34px 0px; } .fs_player_container .ico_toggle_comments.inactive { background-position: -68px 0px; } .fs_player_container .ico_toggle_comments.inactive:hover { background-position: -102px 0px; } .fs_player_container .ico_unsupported { display: none; position: absolute; background: url("../images/jwplayer/ico_unsupported.png") no-repeat left top; width: 34px; height: 34px; background-size: 68px 34px; top: 60px; right: 16px; cursor: pointer; } .fs_player_container .ico_unsupported:hover { background-position: -34px 0px; } .fs_player_container .acc_toggle_play { position: absolute; width: 10px; height: 10px; background: transparent; right: 0; top: 0; overflow: hidden; cursor: pointer; } .fs_player_container .acc_toggle_play span { font-size: 1px; color: rgba(255,255,255,0); } .fs_player_container .katch_logo { display: none; position: absolute; top: 20px; left: 23px; width: 117px; height: 40px; background: url("../images/jwplayer/katch_player_logo_wordmark.png") no-repeat left top; background-size: 117px 40px; z-index: 20000; } .fs_player_container .katch_logo.show { display: block; } .fs_player_container .syncd_comments { display: none; position: absolute; width: 300px; height: auto; bottom: 20px; left: 10px; } .fs_player_container .syncd_comments .comment { display: inline-block; float: left; clear: both; background: #fff; padding: 8px 11px 8px 8px; margin: 6px 0 0 0; border-radius: 3px 3px; opacity: 0; } .fs_player_container .syncd_comments .comment .avatar { width: 32px; height: 25px; float: left; margin: 0; } .fs_player_container .syncd_comments .comment .avatar img { display: block; width: 25px; height: 25px; border-radius: 50% 50%; -webkit-border-radius: 50% 50%; -moz-border-radius: 50% 50%; } .fs_player_container .syncd_comments .comment .username { display: block; text-transform: uppercase; font-size: 9px; font-weight: 500; color: #aaa; text-decoration: none; padding: 0 0 1px 0; margin: 0 0 0 32px; } .fs_player_container .syncd_comments .comment .username:hover { text-decoration: underline; } .fs_player_container .syncd_comments .comment .text { display: block; font-size: 14px; font-weight: 400; color: #333; margin: 0 0 0 32px; } .fs_player_container .syncd_comments .comment.fadeIn { opacity: 1; } .fs_player_container .tabbed_nav { width: 300px; margin: 16px auto 0; height: 31px; } .fs_player_container .tabbed_nav li { padding: 0; margin: 0px 20px 12px 0; } .fs_player_container .replay_comments { width: 300px; min-height: 300px; max-height: 533px; overflow-x: hidden; overflow-y: auto; margin: 0 auto 20px; background-color: #fff; border: 1px solid #ededed; } .fs_player_container .no_comment_msg { width: auto; padding: 120px 0 0 0; text-align: center; font-size: 24px; font-weight: 200; color: #333; } /* .fs_player_container .replay_comments .comment:nth-child(even) { background-color: #f8f8f8; } .fs_player_container .replay_comments .comment:nth-child(odd) { background-color: #f4f4f4; } .fs_player_container .replay_comments .comment { background-color: #f4f4f4; position: relative; padding: 18px 20px; } .fs_player_container .replay_comments .comment .avatar { width: 40px; height: 30px; float: left; margin: 0; } */ .fs_player_container .replay_comments .comment:nth-child(even) { background-color: #f8f8f8; } .fs_player_container .replay_comments .comment:nth-child(odd) { background-color: #f4f4f4; } .fs_player_container .replay_comments .comment { background-color: #f4f4f4; position: relative; padding: 18px 20px; } .fs_player_container .replay_comments .comment .avatar { width: 40px; height: 30px; float: left; margin: 0; } .fs_player_container .replay_comments .comment .avatar img { display: block; width: 30px; height: 30px; border-radius: 50% 50%; -webkit-border-radius: 50% 50%; -moz-border-radius: 50% 50%; } .fs_player_container .replay_comments .comment .realname { margin: 0 0 0 40px; } .fs_player_container .replay_comments .comment .realname a { font-size: 11px; color: #aaa; text-transform: uppercase; } .fs_player_container .replay_comments .comment .comment_text { font-size: 16px; color: #666; margin: 0 0 0 40px; } .fs_player_container .replay_comments .comment .btn_delete_comment { position: absolute; top: 34px; right: 20px; width: 16px; height: 16px; background: url("../images/ico_delete_comment.png") no-repeat left top; background-size: 16px 16px; opacity: 0.7; cursor: pointer; } .fs_player_container .replay_comments .comment .btn_delete_comment:hover { opacity: 1.0; } .fs_player_container .replay_comments .comment .btn_delete_comment span { display: none; } .fs_player_container .replay_comments.tab_content.inactive { display: none; } .single_replay .replay_info { width: 300px; clear: both; margin: 0 auto 60px; padding: 0 10px; } .single_replay .owner { padding: 0 0 16px 0; } .single_replay .owner .avatar { margin: 0; width: 68px; height: 58px; float: left; } .single_replay .owner .avatar img { width: 58px; height: 58px; border-radius: 50% 50%; -webkit-border-radius: 50% 50%; -moz-border-radius: 50% 50%; } .single_replay .owner .realname { display: block; font-size: 18px; padding: 13px 0 0 0; font-weight: 400; line-height: 1.1; } .single_replay .owner .username { display: block; font-size: 14px; font-weight: 400; color: rgba(0,0,0,0.5); } .single_replay .replay_details { } .single_replay .caption { display: block; font-size: 18px; } .single_replay .caption a { color: #4982A0; } .single_replay .caption a:hover { text-decoration: underline; } .single_replay .location_timestamp { font-size: 12px; color: #999; padding: 5px 0 20px; } .single_replay .location { font-size: 12px; color: #999; } .single_replay .timestamp { font-size: 12px; color: #999; } .single_replay .replay_stats { padding: 0; } .single_replay .stat_katch_views { border-bottom: 1px solid #D9D9D9; padding: 0 0 6px 0; margin: 0 0 8px 0; } .single_replay .stat_katch_views .value { font-size: 27px; font-weight: 100; color: #F8644F; padding: 0 2px 0 0; } .single_replay .stat_katch_views .key { font-size: 14px; font-weight: 400; color: #999; } .single_replay .external_stat { margin: 0 0 2px 0; } .single_replay .external_stat .value { font-size: 14px; font-weight: 600; color: #333; } .single_replay .external_stat .key { font-size: 14px; font-weight: 400; color: #999; } .single_replay .replay_actions { padding: 26px 0 0 0; clear: both; } .single_replay .btn_all_replays { display: none; line-height: 22px; background: url("../images/ico_back_arrow_black.png") no-repeat 0px 0px; background-size: 22px 22px; padding: 0 0 9px 28px; } .single_replay .btn_edit_replay { display: block; line-height: 22px; background: url("../images/ico_tile_edit.png") no-repeat 0px 1px; background-size: 19px 19px; padding: 0 0 9px 28px; } .single_replay .btn_embed_replay { display: block; line-height: 22px; background: url("../images/ico_tile_share.png") no-repeat 0px 1px; background-size: 18px 18px; padding: 0 0 9px 28px; } .single_replay .btn_download_replay { display: none; line-height: 22px; background: url("../images/ico_tile_download_2.png") no-repeat 0px 1px; background-size: 22px 20px; padding: 0 0 9px 28px; } .single_replay .btn_add_to_collection { display: block; line-height: 22px; background: url("../images/ico_tile_add_collection.png") no-repeat 0px 3px; background-size: 20px 15px; padding: 0 0 9px 28px; } .single_replay .social_share { padding: 10px 0 0 0; } .single_replay .share_on_twitter { display: block; float: left; width: 30px; height: 30px; background: url('../images/jwplayer/btn_twitter.png') no-repeat left top; background-size: 30px 30px; margin: 0 10px 0 0; cursor: pointer; } .single_replay .share_on_facebook { display: block; float: left; width: 30px; height: 30px; background: url('../images/jwplayer/btn_facebook.png') no-repeat left top; background-size: 30px 30px; margin: 0 10px 0 0; cursor: pointer; } .single_replay .share_on_tumblr { display: block; float: left; width: 30px; height: 30px; background: url('../images/jwplayer/btn_tumblr.png') no-repeat left top; background-size: 30px 30px; margin: 0 10px 0 0; cursor: pointer; } .single_replay .share_on_reddit { display: block; float: left; width: 30px; height: 30px; background: url('../images/jwplayer/btn_reddit.png') no-repeat left top; background-size: 30px 30px; margin: 0 10px 0 0; cursor: pointer; } .single_replay .share_on_twitter span, .single_replay .share_on_facebook span, .single_replay .share_on_tumblr span, .single_replay .share_on_reddit span { display: none; } @media (min-width: 500px) { .fs_player_container .jwplayer_wrapper { width: 360px; height: 640px; } .fs_player_container .replay_comments { width: 360px; } .fs_player_container .tabbed_nav { width: 360px; } .single_replay .wrap { width: 360px; margin: 0 auto; } .single_replay .replay_info { width: 360px; margin: 0 auto 60px; } .single_replay .replay_comments { width: 360px; } } @media (min-width: 750px) { .fs_player_container .jwplayer_wrapper { width: 700px; height: 610px; } .fs_player_container .replay_comments { width: 700px; max-height: 610px; } .fs_player_container .tabbed_nav { width: 700px; } .fs_player_container .hearts_static, .fs_player_container .ico_fullscreen, .fs_player_container .ico_toggle_comments, .fs_player_container .ico_unsupported, .fs_player_container .syncd_comments { display: block; } .fs_player_container .ico_unsupported { -webkit-animation: pulse 0.8s linear; animation: pulse 0.8s linear; -webkit-animation-iteration-count: 8; animation-iteration-count: 8; } .fs_player_container .replay_comments .comment .avatar { width: 60px; height: 50px; } .fs_player_container .replay_comments .comment .avatar img { width: 50px; height: 50px; } .fs_player_container .replay_comments .comment .realname { margin: 8px 0 0 60px; } .fs_player_container .replay_comments .comment .comment_text { margin: 0 0 0 60px; } .single_replay .wrap { width: 750px; margin: 0 auto; } .single_replay .replay_info { width: 700px; margin: 0 auto 60px; } /* Old Player Page */ .player_container { width: 700px; margin: 30px auto 20px; } .player_container .jwplayer_wrapper { margin: 0; float: left; width: 360px; height: 640px; background: #333; } .player_container .jwplayer { } .player_container .replay_comments { width: 360px; float: left; height: 640px; margin: 0; } .player_container .comment .avatar { width: 60px; height: 50px; } .player_container .comment .avatar img { width: 50px; height: 50px; } .player_container .comment .realname { margin: 0 0 0 60px; } .player_container .comment .comment_text { margin: 0 0 0 60px; } .player_container .scroll_container { padding: 23px 30px 23px 23px; } .player_container .no_comment_msg { margin: 270px auto 0; } } @media (min-width: 980px) { .single_replay { padding: 30px 0 0 0; } .fs_player_container { float: right; padding: 0; margin: 0; } .fs_player_container .replay_comments { max-height: none; } .fs_player_container .tabbed_nav { margin: 0; } .single_replay .replay_comments { } .single_replay .wrap { width: 980px; } .single_replay .replay_info { position: relative; width: 230px; height: 640px; float: left; clear: none; margin: 0; padding: 0; } .single_replay .replay_info { position: relative; width: 230px; height: 640px; float: left; clear: none; margin: 0; padding: 0; } .single_replay .caption { max-height: 176px; overflow: hidden; } .single_replay .replay_actions { position: absolute; left: 0; bottom: 0; width: 100%; } .single_replay .btn_embed_replay { display: block; } .single_replay .btn_download_replay { display: block; } /* Old Player Page */ .player_container { width: 730px; float: right; padding: 0; margin: 0 !important; } } /* JW7/Katch Player Skin */ .fs_player_container .jw-controlbar { width: 100%; background: transparent; } .fs_player_container .jw-controlbar-left-group, .fs_player_container .jw-controlbar-right-group { display: none; } .fs_player_container.mobile .jw-controlbar-left-group, .fs_player_container.mobile .jw-controlbar-right-group { display: block !important; } .fs_player_container .jw-controlbar, .fs_player_container .jw-controlbar-center-group, .fs_player_container .jw-controlbar-center-group .jw-slider-time, .fs_player_container .jw-slider-container, .fs_player_container .jw-slider-horizontal .jw-rail, .fs_player_container .jw-slider-horizontal .jw-progress, .fs_player_container .jw-slider-horizontal .jw-buffer, .fs_player_container .jw-slider-horizontal .jw-knob { height: 10px; line-height: 0px; padding: 0; } .fs_player_container .jw-rail { background: #b7b7b7 !important; } .fs_player_container .jw-progress { background: #f8644f !important; } .fs_player_container .jw-buffer { background: #909090 !important; } .fs_player_container .jw-knob { display: none !important; } .fs_player_container .jw-time-tip { background: #333 !important; border: 6px solid #333; } .fs_player_container #controls_wrap { z-index: 10000; } .fs_player_container #controls_wrap .player_messaging { position: absolute; top: 10px; left: 10px; right: 10px; padding: 20px 20px 25px 90px; background: #fff url("../images/jwplayer/chrome_logo.png") no-repeat 27px 22px; background-size: 44px 44px; border-radius: 12px 12px; -webkit-border-radius: 12px 12px; -moz-border-radius: 12px 12px; font-size: 18px; color: #333; font-weight: 100; line-height: 1.3; } .fs_player_container #controls_wrap .player_messaging a { color: #F8644F; text-decoration: underline; } .fs_player_container #controls_wrap .player_messaging_close { position: absolute; width: 14px; height: 14px; top: 10px; right: 10px; background: url("../images/jwplayer/player_message_close.png") no-repeat center center; background-size: 10px 10px; cursor: pointer; } .fs_player_container .fullscreen #controls_wrap .player_messaging { width: 400px; left: auto; right: 70px; top: 35px; } .fs_player_container .jw-flag-user-inactive + #controls_wrap .jw-display-icon-container, .fs_player_container .jw-flag-user-inactive + #controls_wrap .jw-controls-right, .fs_player_container .jw-flag-user-inactive + #controls_wrap .jw-controlbar { display: none; } .fs_player_container .jw-flag-user-inactive.jw-state-paused + #controls_wrap .jw-display-icon-container, .fs_player_container .jw-flag-user-inactive.jw-state-paused + #controls_wrap .jw-controls-right, .fs_player_container .jw-flag-user-inactive.jw-state-paused + #controls_wrap .jw-controlbar, .fs_player_container .jw-state-idle + #controls_wrap .jw-display-icon-container, .fs_player_container .jw-state-idle + #controls_wrap .jw-controls-right, .fs_player_container .jw-state-idle + #controls_wrap .jw-controlbar { display: block; } .fs_player_container #controls_wrap .jw-display-icon-container { width: 116px; height: 116px; margin: -58px auto 0; } .fs_player_container .jw-state-idle + #controls_wrap .jw-display-icon-container, .fs_player_container .jw-state-paused + #controls_wrap .jw-display-icon-container { background: url("../images/jwplayer/katch_player_buttons.png") no-repeat top left; background-size: 580px 116px; background-position: 0px 0px; } .fs_player_container .jw-state-playing + #controls_wrap .jw-display-icon-container { background: url("../images/jwplayer/katch_player_buttons.png") no-repeat top left; background-size: 580px 116px; background-position: -116px 0px; } .fs_player_container .jw-state-buffering + #controls_wrap .jw-display-icon-container { background: url("../images/jwplayer/katch_player_buttons.png") no-repeat top left; background-size: 580px 116px; background-position: -348px 0px; -webkit-animation: rotation 2s infinite linear; animation: rotation 2s infinite linear; } .fs_player_container .jw-state-error + #controls_wrap .jw-display-icon-container { background: url("../images/jwplayer/katch_player_buttons.png") no-repeat top left; background-size: 580px 116px; background-position: -464px 0px; } .fs_player_container .jw-state-complete + #controls_wrap .jw-display-icon-container { background: url("../images/jwplayer/katch_player_buttons.png") no-repeat top left; background-size: 580px 116px; background-position: -232px 0px; } .fs_player_container .jw-title { padding: 20px 0 0 0; text-align: center; background: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 100%); } .fs_player_container .jw-title .jw-title-primary { text-align: center; width: 100%; padding: 0; } .fs_player_container .jw-title .jw-title-secondary { text-align: center; width: 100%; padding: 0; } /* JW related videos */ .jw-related-dock-btn { display: none; } .jw-icon-close.jw-related-close-icon.jw-reset { display: none; visibility: hidden; } /* hide JW branding */ .jw-featured { display: none; } @-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); } } @-webkit-keyframes pulse { 0% { opacity: 0.3; } 50% { opacity: 1; } 100% { opacity: 0.3; } } @keyframes rotation { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); } } @keyframes pulse { 0% { opacity: 0.3; } 50% { opacity: 1; } 100% { opacity: 0.3; } } @media (min-width: 750px) { .fs_player_container #controls_wrap .player_messaging { top: 40px; left: 120px; right: 120px; } } /* Modal: Embed Replay */ .modal.embed_replay { padding: 20px 18px 20px; } .modal.embed_replay h3 { padding: 0; color: #909090; margin: 0 0 10px 0; } .modal.embed_replay .social_share { padding: 0 0 30px; } .modal.embed_replay .share_on_twitter { display: block; float: left; width: 54px; height: 54px; background: url('../images/jwplayer/btn_twitter.png') no-repeat left top; margin: 0 8px 0 0; cursor: pointer; } .modal.embed_replay .share_on_facebook { display: block; float: left; width: 54px; height: 54px; background: url('../images/jwplayer/btn_facebook.png') no-repeat left top; margin: 0 8px 0 0; cursor: pointer; } .modal.embed_replay .share_on_tumblr { display: block; float: left; width: 54px; height: 54px; background: url('../images/jwplayer/btn_tumblr.png') no-repeat left top; margin: 0 8px 0 0; cursor: pointer; } .modal.embed_replay .share_on_reddit { display: block; float: left; width: 54px; height: 54px; background: url('../images/jwplayer/btn_reddit.png') no-repeat left top; margin: 0 8px 0 0; cursor: pointer; } .modal.embed_replay .input_permalink { } .modal.embed_replay .input_permalink input { padding: 12px 15px 13px; font-weight: 200; width: 100%; margin: 0 0 30px 0; } .modal.embed_replay .input_embed_code textarea { padding: 12px 15px 13px; font-weight: 200; height: 100px; width: 100%; margin: 0 0 10px 0; } .modal.embed_replay #comment-sync-label { padding: 0 20px 3px 23px; } .modal.embed_replay #comment-sync-label input { margin: 5px 0 0 -22px; } .modal.embed_replay .form_actions { text-align: right; } .modal.embed_replay .form_actions .btn_primary { margin: 0 0 0 10px; } /* Modal: Share Replay */ .modal.share_replay { padding: 20px 18px 20px; } .modal.share_replay h3 { padding: 0; color: #909090; margin: 0 0 10px 0; } .modal.share_replay .input_permalink { } .modal.share_replay .input_permalink input { padding: 12px 15px 13px; font-weight: 400; width: 100%; margin: 0 0 8px 0; } .modal.share_replay .select_start_end_time { margin: 0 0 22px 0; } .modal.share_replay .select_start_end_time .start_time_label, .modal.share_replay .select_start_end_time .end_time_label { font-size: 12px; font-weight: 400; color: #777777; } .modal.share_replay .select_start_end_time .input_share_start_time, .modal.share_replay .select_start_end_time .input_share_end_time { font-size: 12px; font-weight: 600; color: #3C3B3A; padding: 6px 6px; margin: 0 10px 0 1px; text-align: center; width: 50px; } .modal.share_replay .social_share { border-bottom: 1px solid #D8D8D8; padding: 0 0 24px 0; margin: 0 0 20px 0; } .modal.share_replay .share_on_twitter { display: block; float: left; width: 30px; height: 30px; background: url('../images/btn_share_on_twitter.png') no-repeat left top; background-size: 30px 30px; margin: 0 8px 0 0; cursor: pointer; } .modal.share_replay .share_on_facebook { display: block; float: left; width: 30px; height: 30px; background: url('../images/btn_share_on_facebook.png') no-repeat left top; background-size: 30px 30px; margin: 0 8px 0 0; cursor: pointer; } .modal.share_replay .share_on_linkedin { display: block; float: left; width: 30px; height: 30px; background: url('../images/btn_share_on_linkedin.png') no-repeat left top; background-size: 30px 30px; margin: 0 8px 0 0; cursor: pointer; } .modal.share_replay .share_on_pinterest{ display: block; float: left; width: 30px; height: 30px; background: url('../images/btn_share_on_pinterest.png') no-repeat left top; background-size: 30px 30px; margin: 0 8px 0 0; cursor: pointer; } .modal.share_replay .share_on_tumblr { display: block; float: left; width: 30px; height: 30px; background: url('../images/btn_share_on_tumblr.png') no-repeat left top; background-size: 30px 30px; margin: 0 8px 0 0; cursor: pointer; } .modal.share_replay .share_on_reddit { display: block; float: left; width: 30px; height: 30px; background: url('../images/btn_share_on_reddit.png') no-repeat left top; background-size: 30px 30px; margin: 0 8px 0 0; cursor: pointer; } .modal.share_replay .input_embed_code textarea { padding: 12px 15px 13px; font-size: 13px; font-weight: 400; height: 80px; width: 100%; margin: 0 0 5px 0; } .modal.share_replay #comment-sync-label { padding: 0 20px 3px 23px; } .modal.share_replay #comment-sync-label input { margin: 7px 0 0 -19px; } .modal.share_replay .engagement_label { font-size: 12px; font-weight: 400; color: #777777; } /* Modal: Edit Replay */ .modal.edit_replay { } .modal.edit_replay .col_a { display: none; } .modal.edit_replay .photo_preview .btn_primary { display: none; } .modal.edit_replay .replay_title { padding: 0 0 12px; } .modal.edit_replay .replay_title input { width: 100%; font-weight: 400; } .modal.edit_replay .replay_location, .modal.edit_replay .replay_timestamp { padding: 0; font-size: 16px; color: #aaa; } .modal.edit_replay .replay_timestamp { margin: 0 0 15px 0; } .modal.edit_replay .form_actions { text-align: left; padding: 30px 0 10px; } .modal.edit_replay .form_actions .ico_delete_replay { display: block; float: left; background: url("../images/ico_trash_red.png") no-repeat 0px 11px; background-size: 22px 22px; width: auto; height: 48px; border: 0; margin: 0 4px 0 0; padding: 0 0 0 26px; cursor: pointer; } .modal.edit_replay .form_actions .ico_delete_replay span { color: #ff4337; font-size: 16px; } .modal.edit_replay .form_actions .btn_tertiary { display: none; float: right; } .modal.edit_replay .form_actions .btn_primary { float: right; margin: 0 0 0 10px; } /* Modal: New Collection */ .modal.new_collection { padding: 20px 0; } .modal.new_collection .basic_options { width: 290px; margin: 0 auto; } .modal.new_collection .image_crop_options { width: 100%; margin: 0 auto; } .modal.new_collection .advanced_options { width: 100%; } .modal.new_collection .input_collection_name { width: 100%; } .modal.new_collection .collection_url_base { font-size: 12px; color: #666; font-weight: 400; } .modal.new_collection .collection_url_name { font-size: 12px; color: #333; font-weight: 600; width: 206px; padding: 0; border: 0; box-shadow: none; background: transparent; } .modal.new_collection .collection_url_error_msg { font-size: 12px; color: red; font-weight: 600; } .modal.new_collection .collection_desc { width: 100%; height: 72px; margin: 12px 0 0; } .modal.new_collection .collection_desc_charcount { display: block; font-size: 12px; color: #666; font-weight: 400; margin: 0 0 14px; } .modal.new_collection .input_upload_image { margin: 0 0 32px 0; } .modal.new_collection .input_upload_image .no_photo { display: block; float: left; width: 50px; height: 50px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #ccc url("../images/bg_image_upload_default_thumb.png") repeat left top; background-size: 50px 50px; margin: 0 10px 0 0; } .modal.new_collection .input_upload_image img { display: block; float: left; width: 50px; height: 50px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin: 0 10px 0 0; } .modal.new_collection .input_upload_image .btn_secondary{ vertical-align: top; margin: 6px 0 0 0; } .modal.new_collection .advanced_options h3 { padding: 0 10px 12px; margin: 0; font-size: 12px; font-weight: 600; color: #aaa; text-transform: uppercase; border-bottom: 1px solid #ebebeb; } .modal.new_collection .advanced_options { } .modal.new_collection .advanced_options h4 { font-size: 16px; font-weight: 400; color: #666; margin: 0 0 10px; } .modal.new_collection .input_switch { padding: 16px 10px 22px; border-bottom: 1px solid #ebebeb; } .modal.new_collection .input_switch .switch_desc { width: 68%; float: left; } .modal.new_collection .input_switch .more_options { padding: 10px 0 0 0; clear: both; } .modal.new_collection .input_switch h4 { font-size: 16px; line-height: 1.3; margin: 0 0 3px; font-weight: 600; color: #333; } .modal.new_collection .input_switch p { font-size: 12px; line-height: 1.4; margin: 0; font-weight: 400; color: #999; } .modal.new_collection .input_switch .switch { float: right; } .modal.new_collection .adv_input_time .input_switch { border: 0; } .modal.new_collection .adv_input_hashtag .custom_select { display: inline-block; width: 100px; } .modal.new_collection .adv_input_hashtag input { width: 270px; margin: 0px 4px 0 0; } .modal.new_collection .adv_input_who .custom_select { width: 250px; margin: 0 0 10px 0; } .modal.new_collection .twitterlist_results { padding: 6px 10px; border: 1px solid #ebebeb; min-height: 40px; max-height: 100px; overflow: auto; margin: 5px 0 0 0; } .modal.new_collection .twitterlist_results label { line-height: 22px } .modal.new_collection .twitterlist_results label span, .modal.new_collection .twitterlist_results .loading_msg { font-size: 14px; color: #999; } .modal.new_collection .twitterlist_results .loading_msg { text-align: center; } .modal.new_collection .adv_input_hashtag { margin: 0; } .modal.new_collection .adv_input_who { margin: 0; } .modal.new_collection .adv_input_time { margin: 0; } .modal.new_collection .pad_start_date_time, .modal.new_collection .pad_end_date_time { display: block; clear: both; min-height: 46px; margin: 0 0 10px 0; } .modal.new_collection input.pad_input_date { float: left; width: 130px; margin: 0 8px 8px 0; } .modal.new_collection input.pad_input_time { float: left; width: 130px; margin: 0 8px 8px 0; } .modal.new_collection .btn_clear_dates { font-size: 14px; color: #F8644F; padding: 0; text-decoration: underline; clear: both; cursor: pointer; } .modal.new_collection .modal_actions { border-top: 1px solid #ebebeb; padding: 18px 28px 0; } .modal.new_collection .modal_actions button { margin: 0 0 0 10px; float: right; } /* Image Cropping */ .modal.new_collection .image_preview { width: 340px; text-align: center; margin: 0 auto 20px; } .modal.new_collection .image_preview img { width: 100px; height: 100px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; border: 1px solid #ebebeb; } .modal.new_collection .image_preview .btn_primary { vertical-align: top; margin: 32px 0 0 10px; } .modal.new_collection .thumb { width: 24px; height: 24px; float: none; position: relative; top: 7px; } .modal.new_collection .progress { display: inline-block; width: 100px; line-height: 15px; border: 3px groove #CCC; } .modal.new_collection .progress div { font-size: smaller; background: orange; width: 0; } .modal.new_collection .cropArea { background: transparent url("../images/bg_crop_pattern.png") repeat left top; background-size: 52px 52px; overflow: hidden; width: 100%; height: 300px; } /* Modal: Quick Add to Collection */ .modal.quick_add_to_collection { padding: 0; } .modal.quick_add_to_collection .exisiting_collections { } .modal.quick_add_to_collection .collection_list_item { display: block; padding: 11px 46px 13px; border-bottom: 1px solid #ebebeb; font-size: 18px; font-weight: 600; color: #666; background: url("../images/ico_quick_add_collection_actions.png") no-repeat 20px 16px; background-size: 17px 169px; cursor: pointer; } .modal.quick_add_to_collection .collection_list_item:hover { text-decoration: none; } .modal.quick_add_to_collection .collection_list_item .action { display: none; } .modal.quick_add_to_collection .action_add { color: #666; background-position: 20px 16px; } /*.modal.quick_add_to_collection .action_add:hover { color: #666; background-position: 20px -36px; }*/ .modal.quick_add_to_collection .action_remove { color: #21A52D; background-position: 20px -86px; } /*.modal.quick_add_to_collection .action_remove:hover { color: #F8644F; background-position: 20px -137px; }*/ .modal.quick_add_to_collection .quick_create_collection { padding: 20px 20px; } .modal.quick_add_to_collection .quick_create_collection h4 { font-size: 12px; font-weight: 600; color: #666; text-transform: uppercase; margin: 0 0 8px 0; } .modal.quick_add_to_collection .collection_url_base { font-size: 12px; color: #666; font-weight: 400; } .modal.quick_add_to_collection .collection_url_name { font-size: 12px; color: #333; font-weight: 600; padding: 0; border: 0; box-shadow: none; background: transparent; } .modal.quick_add_to_collection .collection_url_errmsg { font-size: 12px; color: #F8644F; font-weight: 600; } /* Modal: Accept Terms */ .modal.terms { text-align: center; } .modal.terms .legal_msg { margin: 20px 0 0 0; } .modal.terms .legal_msg h4 { font-size: 24px; font-weight: 400; line-height: 1.3; color: #4D4D4D; margin: 0 0 10px 0; } .modal.terms .legal_msg p { font-size: 16px; color: #999; margin: 0 0 16px 0; } .modal.terms .form_actions { } .modal.terms #i-accept-terms-label { text-align: left; width: 250px; margin: 0 auto 24px; padding: 0; } .modal.terms #i-accept-terms-label input{ margin: 0; } .modal.terms #i-accept-terms-label p { font-size: 16px; color: #333; padding: 0 0 0 22px; } .modal.terms #i-accept-terms-label a { text-decoration: underline; } /* Modal: Delete Comment */ .modal.delete_comment { } .modal.delete_comment h3 { font-size: 18px; font-weight: 400; line-height: 1.3; color: #333; margin: 0 0 15px 0; } .modal.delete_comment .comment { border: 1px solid #D2D2D2; padding: 10px; margin: 0 0 20px 0; } .modal.delete_comment .avatar { width: 45px; height: 30px; float: left; margin: 0; } .modal.delete_comment .avatar img { display: block; width: 30px; height: 30px; border-radius: 50% 50%; -webkit-border-radius: 50% 50%; -moz-border-radius: 50% 50%; } .modal.delete_comment .realname { margin: 0 0 0 45px; } .modal.delete_comment .realname a { font-size: 11px; color: #aaa; text-transform: uppercase; } .modal.delete_comment .comment_text { font-size: 16px; color: #666; margin: 0 0 0 45px; line-height: 1.2; } /* Dialog: Delete Replay, Delete Collection */ .delete_modal_actions { clear: both; } .delete_modal_actions button { margin: 0 0 0 10px; float: right; } .wrap_simple_dialog.delete_collection p { padding: 0 0 10px; } @media (min-width: 500px) { .modal.edit_replay .col_a { display: block; width: 160px; float: left; } .modal.edit_replay .photo_preview { text-align: center; width: 160px; height: 230px; -webkit-border-radius: 4px 4px; -moz-border-radius: 4px 4px; border-radius: 4px 4px; } .modal.edit_replay .col_b { width: 310px; float: left; margin: 10px 0 0 20px; } .modal.new_collection { margin: 0; } .modal.new_collection .basic_options { width: 400px; } .modal.new_collection .image_crop_options { width: 100%; } .modal.new_collection .advanced_options { } .modal.new_collection .advanced_options h3 { padding: 0 20px 12px; } .modal.new_collection .twitterlist_results { margin: 5px 90px 0 24px; } .modal.new_collection .input_switch { padding: 20px 20px 25px; } .modal.new_collection .input_switch .switch_desc{ width: 420px; } .modal.new_collection .input_switch h4 { font-size: 18px; } .modal.new_collection .input_switch p { font-size: 14px; } .modal.new_collection input.pad_input_date { width: 200px; } .modal.new_collection .collection_desc { height: 140px; } .modal.new_collection .input_upload_image { margin: 0 0 40px 0; } .modal.new_collection .cropArea { height: 400px; } .modal.new_collection .modal_actions { padding: 18px 28px 0; } .modal.delete_comment .avatar { width: 125px; height: 100px; } .modal.delete_comment .avatar img { width: 100px; height: 100px; } .modal.delete_comment .realname { margin: 0 0 0 125px; } .modal.delete_comment .realname a { font-size: 14px; } .modal.delete_comment .comment_text { font-size: 18px; } .modal.terms .legal_msg h4 { font-size: 28px; line-height: 1.3; margin: 0 0 16px 0; } .modal.terms .legal_msg p { font-size: 18px; margin: 0 0 20px 0; } } /* --------------------------------------------------- Login */ /* Value Prop */ .login_valueprop { background: #000 url("../images/bg_registration_upsell_mobile.png") no-repeat center center; background-size: cover; } .login_valueprop .wrap { margin: 0 auto; padding: 20px 0; text-align: center; } .login_valueprop h2 { color: #fff; font-weight: 100; font-size: 20px; line-height: 1.2; margin: 0 auto; width: 270px; } .login_valueprop p { color: #bbb; font-weight: 400; font-size: 14px; line-height: 1.2; margin: 10px auto 6px; width: 320px; } .login_valueprop .logo { } .login_valueprop .value_prop_ctas { width: 236px; margin: 14px auto 0; } .login_valueprop .btn_signin_through_twitter { display: block; float: left; margin: 0 12px 0 0; width: 108px; height: 40px; background: url("../images/btn_sign_up_white_sm.png") no-repeat left top; background-size: 108px 40px; } .login_valueprop .btn_learn_more { display: block; float: left; width: 78px; margin: 0; background: transparent; border: 2px solid #AFAFAF; cursor: pointer; font-weight: 600; font-size: 12px; text-transform: uppercase; color: #9A9A9A; padding: 9px 16px 10px; border-radius: 6px 6px; -webkit-border-radius: 6px 6px; -moz-border-radius: 6px 6px; text-decoration: none; } .login_valueprop .supported_services { display: none; } /* Announcement .announcement { background: #333; } .announcement .wrap { width: 300px; padding: 10px 0; margin: 0 auto; text-align: center; } .medium_post { } .medium_post .medium_avatar { display: none; float: left; width: 50px; height: 50px; background: url("../images/medium_avatar.png") no-repeat left top; background-size: 50px 50px; border: 3px solid #818181; -webkit-border-radius: 50% 50%; -moz-border-radius: 50% 50%; border-radius: 50% 50%; } .medium_post h3 { font-weight: 400; color: #fff; font-size: 17px; line-height: 44px; margin: 0 0 3px 12px; } .medium_post h3 a { font-weight: 400; color: #fff; text-decoration: underline; } .medium_post h3 a:hover { text-decoration: none; } */ .discover_katch_content { } .discovery_tabbed_nav { display: none; } .discovery_tabbed_nav .wrap { width: 100%; } .discovery_tab_content { background-color: #f4f4f4; } .discovery_tab_content .wrap { width: 100%; margin: 20px 0 40px 0; } .discovery_tab_content h3 { margin: 50px 0 20px; font-size: 12px; font-weight: 600; color: #bbb; text-transform: uppercase; text-align: center; } .discovery_tab_content .featured_creators h3{ margin: 50px 0 4px; } .discovery_tab_content .featured_creators { } .discovery_tab_content .creator_list { width: 300px; margin: 0 auto; } .discovery_tab_content .creator { display: block; float: left; width: 140px; margin: 26px 0 0 0; text-align: center; } .discovery_tab_content .creator_list .avatar { display: block; width: 110px; height: 110px; margin: 0 auto; -webkit-border-radius: 50% 50%; -moz-border-radius: 50% 50%; border-radius: 50% 50%; } .discovery_tab_content .creator_list .realname { display: block; font-size: 11px; font-weight: 600; color: #999; padding: 6px 0 0 0; } .discovery_tab_content .creator:hover { text-decoration: none; } .discovery_tab_content .creator:hover .realname { color: #666; } .discovery_tab_content .result_actions { padding: 20px 0; text-align: center; } @media (min-width: 600px) { .discovery_tabbed_nav .wrap { width: 600px; margin: 0 auto; } .discovery_tab_content .wrap { width: 600px; margin: 30px auto 80px; } .discovery_tab_content h3 { margin: 60px 0 24px; font-size: 20px; font-weight: 100; text-transform: none; color: #999; } .discovery_tab_content .featured_creators h3{ margin: 70px 0 4px; } .discovery_tab_content .creator_list { width: auto; margin: 0 20px; } .discovery_tab_content .result_actions { padding: 40px 0; } } @media (min-width: 720px) { } @media (min-width: 980px) { .login_valueprop { background: #000 url("../images/bg_registration_upsell.png") no-repeat right center; background-size: 1100px 181px; } .login_valueprop .wrap { position: relative; text-align: left; width: 940px; padding: 0 0 20px 0; } .login_valueprop h2 { width: 750px; font-size: 36px; margin: 0; padding: 22px 0 8px; } .login_valueprop p { width: 750px; font-size: 16px; margin: 0; padding: 0 0 14px 0; } .login_valueprop .value_prop_ctas { padding: 9px 0 10px 0; width: auto; margin: 0; } .login_valueprop .btn_signin_through_twitter { display: inline-block; margin: 0 12px 0 0; } .login_valueprop .btn_learn_more { display: inline-block; width: auto; margin: 0; border-color: #ccc; } .login_valueprop .btn_learn_more span { color: #ccc; } .login_valueprop .supported_services { display: block; position: absolute; bottom: 26px; right: 0; width: 72px; height: 53px; } .login_valueprop .supported_services .works_with { display: block; color: #fff; font-size: 11px; line-height: 22px; text-align: center; text-shadow: 0px 0px 7px #000000; } .login_valueprop .supported_services .ico_periscope { display: block; width: 28px; height: 28px; position: absolute; top: 24px; left: 5px; background: url("../images/logo_icon_periscope.png") no-repeat left top; background-size: 28px 28px; } .login_valueprop .supported_services .ico_meerkat { display: block; width: 28px; height: 28px; position: absolute; top: 24px; right: 5px; background: url("../images/logo_icon_meerkat.png") no-repeat left top; background-size: 28px 28px; } } /* --------------------------------------------------- SAVE FOR LATER --- Learn More .product_shot { display: none; margin: 0 auto; background: #333; -webkit-border-top-left-radius: 6px; -moz-border-top-left-radius: 6px; border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-top-right-radius: 6px; border-top-right-radius: 6px; } .product_video { position: relative; top: 30px; margin: 0 auto; width: 320px; } .product_video_player { background: #333; margin: 0 auto; width: 320px; height: 180px; } -- Key Features -- .key_features { background: #fff; } .key_features .wrap { width: 300px; text-align: center; margin: 0 auto; padding: 80px 0 0 0; } .key_features ul { margin: 0; padding: 50px 0 0 0; } .key_features li { padding: 80px 0 30px 0; } .key_features .subtitle { font-size: 20px; line-height: 1.2; color: #333; margin: 0 0 10px 0; } .key_features .feat_text { font-size: 16px; line-height: 1.4; color: #838383; } .key_features #feat_one { background: url("../images/ico_smartphone.png") no-repeat center top; background-size: 60px 60px; } .key_features #feat_two { background: url("../images/ico_lightning.png") no-repeat center top; background-size: 60px 60px; } .key_features #feat_three { background: url("../images/ico_directors_chair.png") no-repeat center top; background-size: 60px 60px; } -- Featured Users -- .featured_users { background: #fff; } .featured_users .wrap { width: 320px; margin: 0 auto; padding: 30px 0 60px; } .featured_users h2 { font-size: 20px; font-weight: 600; color: #000; text-align: center; } .featured_users ul, .featured_users li { list-style: none; margin: 0; padding: 0; } .featured_users ul { padding: 0 20px; } .featured_users li { float: left; padding: 32px 20px 0; text-align: center; } .featured_users li img{ display: block; width: 90px; height: 90px; border-radius: 50% 50%; border: 4px solid #000; margin: 0 0 5px 0; } .featured_users li .realname { font-size: 12px; text-decoration: none; } -- Press -- .featured_press { background: #F8644F; } .featured_press .wrap { width: 320px; margin: 0 auto; padding: 0 0 40px 0; } .featured_press h3 { color: #fff; font-size: 20px; padding: 50px 0 0 0; margin: 0; text-align: center; } .featured_press .press_logo { display: block; margin: 25px auto; } .featured_press .press_logo span { display: none; } .featured_press .press_ph { width: 275px; height: 218px; background: url("../images/press_ph.png") no-repeat left top; background-size: 275px 259px; margin-top: 0; } .featured_press .press_tc { width: 211px; height: 28px; background: url("../images/press_tc.png") no-repeat left top; background-size: 211px 28px; } .featured_press .press_mashable { width: 169px; height: 34px; background: url("../images/press_mashable.png") no-repeat left top; background-size: 169px 34px; } .featured_press .press_tnw { width: 119px; height: 38px; background: url("../images/press_tnw.png") no-repeat left top; background-size: 119px 38px; } @media (min-width: 720px) { .featured_users .wrap, .featured_press .wrap, .login_valueprop .wrap { width: 720px; margin: 0 auto; } .login_valueprop .wrap { padding: 90px 0 0; margin-bottom: -160px; } .login_valueprop { } .login_valueprop h1 { } .login_valueprop h2 { font-size: 44px; } .login_valueprop h3 { width: auto; font-size: 18px; } .product_shot { display: block; background: url('../images/landing_product_shot.jpg') no-repeat left top; background-size: cover; width: 700px; height: 360px; margin-top: 60px; border: 3px solid #fff; border-bottom: none; } .product_video { padding: 12px; width: 724px; height: 418px; top: 40px; background: rgba(0,0,0,0.1); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .product_video_player { margin: 0 auto; width: 700px; height: 394px; } .announcement .wrap { width: 550px; padding: 20px 0; } .medium_post .medium_avatar { display: block; } .medium_post h3 { float: left; font-size: 28px; line-height: 50px; margin: 0 0 0 18px; } .key_features .wrap { width: 570px; margin: 0 auto; padding: 280px 0 20px; text-align: left; } .key_features li { margin: 0 0 40px 0; padding: 0 0 10px 76px; } .key_features ul { padding: 0; } .key_features .subtitle { font-size: 24px; margin: 0 0 11px 0; } .key_features .feat_text { font-size: 18px; } .key_features #feat_one { background: url("../images/ico_smartphone.png") no-repeat left top; background-size: 60px 60px; } .key_features #feat_two { background: url("../images/ico_lightning.png") no-repeat left top; background-size: 60px 60px; } .key_features #feat_three { background: url("../images/ico_directors_chair.png") no-repeat left top; background-size: 60px 60px; } .howto_steps { width: 470px; } .howto_steps .item { font-size: 20px; width: 380px; } .featured_users .wrap { padding: 20px 0 100px 0; } .featured_users h2 { font-size: 20px; } .featured_users ul { padding: 0; } .featured_users li { padding: 40px 38px 0; } .featured_users li img { width: 150px; height: 150px; border: 6px solid #000; } .featured_users li .realname { font-size: 18px; } } @media (min-width: 980px) { .login_valueprop .wrap { width: 980px; margin-bottom: -175px; } .key_features .wrap { padding: 320px 0 30px; } .product_shot { width: 800px; height: 450px; } .product_video { width: 824px; height: 474px; top: 60px; } .product_video_player { width: 800px; height: 450px; } } */ /* --------------------------------------------------- Settings */ .settings { background-color: #fff; } .settings .wrap { width: 100%; margin: 0 auto; background-color: #fff; } .settings .settings_form { padding: 1px 0 20px 0; margin: 0 auto; float: none; } .settings h3 { border-bottom: 1px solid #ECECEC; padding: 0 10px 10px; margin: 30px 0 0 0; } .settings .form_actions { text-align: center; padding: 20px 0 50px; } #input_email_address { padding: 22px 10px 14px; border-bottom: 1px solid #ebebeb; } #user_email { width: 80%; } #auto-katch-label { margin: 0 0 20px 0; } #auto-approve-label { margin: 0 0 20px 0; } #private-label { margin: 0 0 30px 0; } .settings .katch_settings { clear: both; } .settings .katch_alerts { margin: 0 0 20px 0; } .settings .share_on_twitter { padding: 12px 10px 24px; border-bottom: 1px solid #ebebeb; } .settings .share_on_twitter label p { font-size: 14px; } .settings .input_switch { padding: 16px 10px 22px; border-bottom: 1px solid #ebebeb; } .settings .input_switch .switch_desc{ width: 68%; float: left; } .settings .input_switch h4 { font-size: 16px; line-height: 1.3; margin: 0 0 5px; font-weight: 600; color: #333; } .settings .input_switch p { font-size: 12px; margin: 0; font-weight: 400; color: #999; } .settings .input_switch .switch { float: right; } .settings .input_switch p .disconnect_fb { margin: 0; font-weight: 400; color: #999; text-decoration: underline; cursor: pointer; } .settings .switch_message { display: block; margin: 8px 0 0; font-size: 12px; font-weight: 400; color: #F8644F; } .settings .switch_message a { text-decoration: underline; color: #F8644F; } .settings .switch_message a:hover { text-decoration: none; } .settings .fb_page_list { margin: 16px 0 0; } .settings .fb_page_list p { font-size: 14px; color: #aaa; } .settings .fb_page_list .input_radio { padding: 5px 20px 0px 42px; } .settings .fb_page_list input[type=radio]:checked + p { color: #333; } .settings .btn_fb_connect { display: block; float: right; width: 80px; height: 28px; background: url("../images/btn_fb_connect.png") no-repeat left top; background-size: 80px 28px; cursor: pointer; } .settings .btn_fb_connect span { display: none; } .settings .services_optin { padding: 12px 0 0 0; clear: both; } .settings .services_optin #katch-meerkat-label { float: left; } .settings .services_optin #katch-meerkat-label p { background: url('../images/logo_icon_meerkat.png') no-repeat left top; background-size: 20px 20px; padding: 0 0 0 26px; line-height: 20px; } .settings .services_optin #katch-periscope-label { float: left; } .settings .services_optin #katch-periscope-label p { background: url('../images/logo_icon_periscope.png') no-repeat left top; background-size: 20px 20px; padding: 0 0 0 26px; line-height: 20px; } .example_tweet { width: 100%; margin: 15px 0 0 0; } .example_tweet .example_title { background-color: #D8D8D8; color: #fff; font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 3px 3px 0 0 ; } .example_tweet .cont { position: relative; border: 1px solid #ebebeb; background-color: #fff; padding: 10px 10px 14px 10px; border-radius: 0 0 3px 3px; } .example_tweet .avatar { width: 50px; float: left; margin: 0; } .example_tweet .avatar img { display: block; border-radius: 6px 6px; } .example_tweet .user { margin: 0 0 0 60px; } .example_tweet .user .realname { font-size: 15px; font-weight: 600; color: #000; } .example_tweet .user .username { font-size: 12px; font-weight: 400; color: #8899A6; } .example_tweet .timestamp { position: absolute; top: 15px; right: 11px; font-size: 12px; font-weight: 400; color: #8899A6; } .example_tweet .tweet_text { margin: 0 0 0 60px; font-size: 15px; font-weight: 400; color: #000; line-height: 1.3; } .example_tweet .tweet_text .link { color: #2B7BB9; } .example_tweet_msg { text-align: center; color: #998700; font-size: 15px; padding: 5px 0 0 0; } /* @media (min-width: 500px) { .settings .user_info { width: auto; float: none; padding: 30px 0 30px 0; } } */ @media (min-width: 600px) { .settings { background-color: transparent; padding: 40px 0; } .settings .wrap { width: 600px; border: 1px solid #ebebeb; border-radius: 4px 4px; -webkit-border-radius: 4px 4px; -moz-border-radius: 4px 4px; } .settings .user_info { width: 230px; text-align: left; padding: 0; } .settings .settings_form { } #input_email_address { padding: 32px 30px 14px; } .settings #user_email { width: 450px; } .settings h3 { padding: 0 30px 15px; margin: 50px 0 0 0; } .settings .input_switch { padding: 22px 30px 28px; } .settings .input_switch .switch_desc{ width: 420px; } .settings .input_switch h4 { font-size: 20px; margin: 0 0 6px; } .settings .input_switch p { font-size: 14px; } .settings .switch_message { margin: 12px 0 0; font-size: 18px; } .settings .btn_fb_connect { width: 101px; height: 35px; background-size: 101px 35px; } .settings .fb_page_list p { font-size: 18px; } .settings .share_on_twitter { padding: 20px 30px 28px; } .settings .share_on_twitter label p { font-size: 16px; } .example_tweet { width: 370px; margin: 15px auto 0; } .settings .form_actions { padding: 40px 0; } .settings .katch_alerts { margin: 0 0 10px 0; } } @media (min-width: 980px) { } /* --------------------------------------------------- FAQ, Terms, Privacy, About, Support Pages */ .info_page { width: 300px; margin: 20px auto 40px; } .info_page h2 { font-size: 28px; font-weight: 400; line-height: 1.5; color: #333; margin: 0 0 24px 0; } .info_page h3 { font-size: 16px; font-weight: 600; line-height: 1.5; color: #333; margin: 0 0 6px 0; } .info_page p { font-size: 16px; font-weight: 400; line-height: 1.5; color: #858585; margin: 0 0 24px 0; } .info_page ul { margin: 0 0 24px 0; } .info_page li { font-size: 16px; font-weight: 400; line-height: 1.5; color: #858585; margin: 0 0 6px 0; } .side_navigation { display: none; } .side_navigation ul, .side_navigation li { list-style: none; margin: 0; padding: 0; } .side_navigation li { margin: 0 0 6px 0; } .side_navigation a { color: #858585; } .side_navigation .selected a { font-weight: 600; color: #333; } .faq_list { background: #fff; padding: 0 0 20px 0; } .faq_list h3 { font-size: 20px; padding: 26px 0 2px; text-align: center; } .faq_list ul, .faq_list li { list-style: none; margin: 0; padding: 0; } .faq_list ul { width: 90%; max-width: 400px; margin: 20px auto; } .faq_list li { padding: 0 0 16px 0; } .faq_list .question { display: block; text-decoration: underline; padding: 0 0 5px 0; cursor: pointer; line-height: 1.3; } .faq_list .answer { display: none; color: #666 !important; margin: 8px 0 20px 0; line-height: 1.4; } .faq_list .answer.show { display: block; } .about_team { } .about_team .team_members { margin: 0 0 60px 0; } .about_team .member { width: 150px; float: left; padding: 10px 78px 30px; text-align: center; } .about_team .member .avatar { margin: 0; } .about_team .member .avatar img { display: block; width: 140px; height: 140px; border-radius: 50% 50%; -webkit-border-radius: 50% 50%; -moz-border-radius: 50% 50%; } .about_team .member h5 { font-size: 22px; font-weight: 100; color: #333; line-height: 1.7; margin: 10px 0 0 0; } .about_team .member .jobtitle { font-size: 14px; font-weight: 400; color: #666; line-height: 1.3; margin: 0; } .support { } .support .callout { padding: 30px 0 20px; text-align: center; background-color: #fff; border: 1px solid #dedede; border-radius: 4px 4px; -webkit-border-radius: 4px 4px; -moz-border-radius: 4px 4px; } .support .callout h3 { font-size: 22px; font-weight: 500; color: #333; } .support .callout p { font-size: 18px; font-weight: 400; color: #858585; } .support .callout a { color: #F8644F; } .support .get_started { margin: 0 0 20px 0; } .support .katch_faq { margin: 0 0 30px 0; } .support form h3 { font-size: 12px; color: #aaa; margin: 0 0 8px 0; } .support form input, .support form textarea { margin: 0 0 22px 0; font-size: 16px; width: 90%; } .support form textarea { height: 120px; } @media (min-width: 750px) { .info_page { width: 700px; margin: 50px auto 60px; } .info_page .faq_list, .info_page .terms_of_services, .info_page .privacy_policy { width: 100%; } .faq_list ul { width: 90%; max-width: 700px; margin: 0; } .about_team .member { padding: 10px 35px 30px; } .support .get_started { width: 48%; float: left; margin: 0 0 40px 0; } .support .katch_faq { width: 48%; float: right; margin: 0 0 40px 0; } .support form input, .support form textarea { width: 60%; } .support .form_actions { text-align: left; } .support .contact_para { font-size: 18px; width: 90%; } } @media (min-width: 980px) { .info_page { width: 980px; } .info_page .side_navigation { display: block; width: 230px; float: left; text-align: left; padding: 14px 0 0 0; } .info_page .about_team, .info_page .faq_list, .info_page .terms_of_services, .info_page .privacy_policy, .info_page .support { width: 730px; float: left; padding: 0 0 0 20px; } .about_team .member { padding: 10px 45px 30px 35px; } .about_team p { padding: 0 25px 0 0; } } /* --------------------------------------------------- learn_more */ #learn_more { background-color: #F8644F; } .learn_more { } /* Value Prop */ .learn_more .valueprop { text-align: center; background: #fff; } .learn_more .valueprop .wrap { width: 320px; margin: 0 auto; padding: 46px 0 30px; } .learn_more .valueprop h1 { } .learn_more .valueprop h2 { color: #6E6E6E; font-weight: 400; font-size: 24px; line-height: 1.2; margin: 30px 0 0 0; } .learn_more .valueprop h3 { width: 320px; color: rgba(255,255,255,0.8); font-weight: 500; line-height: 1.4; font-size: 16px; margin: 0 auto 10px auto; } .learn_more .valueprop p { width: 320px; font-size: 14px; color: #818181; } .learn_more .valueprop .logo { } .learn_more .product_shot { display: none; margin: 0 auto; background: #333; -webkit-border-top-left-radius: 6px; -moz-border-top-left-radius: 6px; border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-top-right-radius: 6px; border-top-right-radius: 6px; } .learn_more .product_video { margin: 0 auto; width: 320px; } .learn_more .product_video_player { background: #333; margin: 0 auto; width: 320px; height: 180px; } /* Key Features */ .learn_more .key_features { background: #fff; } .learn_more .key_features .wrap { width: 300px; text-align: center; margin: 0 auto; padding: 80px 0 0 0; } .learn_more .key_features ul { margin: 0; padding: 50px 0 0 0; } .learn_more .key_features li { padding: 80px 0 30px 0; } .learn_more .key_features .subtitle { font-size: 20px; line-height: 1.2; color: #333; margin: 0 0 10px 0; } .learn_more .key_features .feat_text { font-size: 16px; line-height: 1.4; color: #838383; } .learn_more .key_features #feat_one { background: url("../images/ico_smartphone.png") no-repeat center top; background-size: 60px 60px; } .learn_more .key_features #feat_two { background: url("../images/ico_lightning.png") no-repeat center top; background-size: 60px 60px; } .learn_more .key_features #feat_three { background: url("../images/ico_directors_chair.png") no-repeat center top; background-size: 60px 60px; } .learn_more .btn_signin_through_twitter { display: block; margin: 24px auto; width: 200px; height: 46px; background: url("../images/btn_sign_up_blue_large.png") no-repeat left top; background-size: 200px 46px; } /* Announcement - hidden */ .learn_more .announcement { background: #333; } .learn_more .announcement .wrap { width: 300px; padding: 10px 0; margin: 0 auto; text-align: center; } .learn_more .medium_post { } .learn_more .medium_post .medium_avatar { display: none; float: left; width: 50px; height: 50px; background: url("../images/medium_avatar.png") no-repeat left top; background-size: 50px 50px; border: 3px solid #818181; -webkit-border-radius: 50% 50%; -moz-border-radius: 50% 50%; border-radius: 50% 50%; } .learn_more .medium_post h3 { font-weight: 400; color: #fff; font-size: 17px; line-height: 44px; margin: 0 0 3px 12px; } .learn_more .medium_post h3 a { font-weight: 400; color: #fff; text-decoration: underline; } .learn_more .medium_post h3 a:hover { text-decoration: none; } /* How it works - hidden */ .learn_more .howto_steps { display: none; width: 300px; margin: 0 auto 74px; padding: 0; text-align: left; } .learn_more .howto_steps h3 { font-size: 20px; padding: 0 0 22px 0; } .learn_more .howto_steps ul, .learn_more .howto_steps li { list-style: none; margin: 0; padding: 0; } .learn_more .howto_steps li { margin: 0 0 30px 0; clear: both; } .learn_more .howto_steps .number { float: left; margin: 0 14px 0 0; background-color: #fff; width: 38px; height: 38px; font-size: 20px; font-weight: 600; color: #000; line-height: 36px; text-align: center; -webkit-border-radius: 19px; -moz-border-radius: 19px; border-radius: 19px; } .learn_more .howto_steps .item { float: left; width: 240px; font-size: 16px; line-height: 1.3; padding: 7px 0 0 0; } .learn_more .howto_steps .follow_button { vertical-align: top !important; line-height: 28px !important; } .learn_more .twitter-follow-button { } .learn_more .howto_steps .meow { display: none; text-align: center; margin: 70px 0 20px 0; } .learn_more .howto_steps .ee { text-decoration: none; cursor: text; } .learn_more .howto_steps .ee:hover{ text-decoration: none; } /* Featured Users - hidden */ .learn_more .featured_users { background: #fff; } .learn_more .featured_users .wrap { width: 320px; margin: 0 auto; padding: 30px 0 60px; } .learn_more .featured_users h2 { font-size: 20px; font-weight: 600; color: #000; text-align: center; } .learn_more .featured_users ul, .learn_more .featured_users li { list-style: none; margin: 0; padding: 0; } .learn_more .featured_users ul { padding: 0 20px; } .learn_more .featured_users li { float: left; padding: 32px 20px 0; text-align: center; } .learn_more .featured_users li img{ display: block; width: 90px; height: 90px; border-radius: 50% 50%; border: 4px solid #000; margin: 0 0 5px 0; } .learn_more .featured_users li .realname { font-size: 12px; text-decoration: none; } /* Press */ .learn_more .featured_press { background: #F8644F; } .learn_more .featured_press .wrap { width: 320px; margin: 0 auto; padding: 0 0 40px 0; } .learn_more .featured_press h3 { color: #fff; font-size: 20px; padding: 50px 0 0 0; margin: 0; text-align: center; } .learn_more .featured_press .press_logo { display: block; margin: 25px auto; } .learn_more .featured_press .press_logo span { display: none; } .learn_more .featured_press .press_ph { width: 275px; height: 218px; background: url("../images/press_ph.png") no-repeat left top; background-size: 275px 259px; margin-top: 0; } .learn_more .featured_press .press_tc { width: 211px; height: 28px; background: url("../images/press_tc.png") no-repeat left top; background-size: 211px 28px; } .learn_more .featured_press .press_mashable { width: 169px; height: 34px; background: url("../images/press_mashable.png") no-repeat left top; background-size: 169px 34px; } .learn_more .featured_press .press_tnw { width: 119px; height: 38px; background: url("../images/press_tnw.png") no-repeat left top; background-size: 119px 38px; } @media (min-width: 720px) { .learn_more .featured_users .wrap, .learn_more .featured_press .wrap, .learn_more .valueprop .wrap { width: 720px; margin: 0 auto; } .learn_more .valueprop .wrap { padding: 70px 0 30px; } .learn_more .valueprop { } .learn_more .valueprop h1 { } .learn_more .valueprop h2 { width: 600px; font-size: 36px; margin: 50px auto 16px; } .learn_more .valueprop h3 { width: 600px; font-size: 22px; } .learn_more .valueprop p { width: 650px; font-size: 18px; font-weight: 100; margin: 0 auto 12px; } .learn_more .btn_signin_through_twitter { margin: 30px auto; } .learn_more .product_shot { display: block; background: url('../images/landing_product_shot.jpg') no-repeat left top; background-size: cover; width: 700px; height: 360px; margin-top: 60px; border: 3px solid #fff; border-bottom: none; } .learn_more .product_video { padding: 12px; width: 724px; height: 418px; background: rgba(0,0,0,0.1); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .learn_more .product_video_player { margin: 0 auto; width: 700px; height: 394px; } .learn_more .announcement .wrap { width: 550px; padding: 20px 0; } .learn_more .medium_post .medium_avatar { display: block; } .learn_more .medium_post h3 { float: left; font-size: 28px; line-height: 50px; margin: 0 0 0 18px; } .learn_more .key_features .wrap { width: 570px; margin: 0 auto; padding: 280px 0 20px; text-align: left; } .learn_more .key_features li { margin: 0 0 40px 0; padding: 0 0 10px 76px; } .learn_more .key_features ul { padding: 0; } .learn_more .key_features .subtitle { font-size: 24px; margin: 0 0 11px 0; } .learn_more .key_features .feat_text { font-size: 18px; } .learn_more .key_features #feat_one { background: url("../images/ico_smartphone.png") no-repeat left top; background-size: 60px 60px; } .learn_more .key_features #feat_two { background: url("../images/ico_lightning.png") no-repeat left top; background-size: 60px 60px; } .learn_more .key_features #feat_three { background: url("../images/ico_directors_chair.png") no-repeat left top; background-size: 60px 60px; } .learn_more .howto_steps { width: 470px; } .learn_more .howto_steps .item { font-size: 20px; width: 380px; } .learn_more .featured_users .wrap { padding: 20px 0 100px 0; } .learn_more .featured_users h2 { font-size: 20px; } .learn_more .featured_users ul { padding: 0; } .learn_more .featured_users li { padding: 40px 38px 0; } .learn_more .featured_users li img { width: 150px; height: 150px; border: 6px solid #000; } .learn_more .featured_users li .realname { font-size: 18px; } } @media (min-width: 980px) { .learn_more .valueprop .wrap { width: 980px; } .learn_more .key_features .wrap { padding: 320px 0 30px; } .learn_more .product_shot { width: 800px; height: 450px; } .learn_more .product_video { width: 824px; height: 474px; top: 60px; } .learn_more .product_video_player { width: 800px; height: 450px; } } /* --------------------------------------------------- Angular Styles */ .show-hide.ng-enter { -webkit-transition: 1.0s linear all; transition: 1.0s linear all; opacity: 0; } .show-hide.ng-enter.ng-enter-active { opacity: 1; } [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; }