/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */
html {
	color: #222;
	font-size: 1em;
	line-height: 1.4;
	margin: 0
}
body {
	width: 100%;
	height: 100%;
	position: relative;
	margin: 0
}
::-moz-selection {
background:#b3d4fc;
text-shadow:none
}
::selection {
	background: #b3d4fc;
	text-shadow: none
}
hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0
}
audio, canvas, iframe, img, svg, video {
	vertical-align: middle
}
fieldset {
	border: 0;
	margin: 0;
	padding: 0
}
textarea {
	resize: vertical
}
.browserupgrade {
	margin: 0.2em 0;
	background: #ccc;
	color: #000;
	padding: 0.2em 0
}
.clearfix {
	display: block;
	clear: both
}
img {
	max-width: 100%;
	height: auto
}
a {
	color: #00add5
}
p {
	margin: 0px 0px 20px 0px
}
ul, ol {
	list-style: disc;
	/*padding-left: 20px;*/
	margin-bottom: 20px
}
ul:after, ol:after {
	display: block;
	content: '';
	clear: both;
	overflow: hidden
}
ol {
	list-style: decimal
}
ul li, ol li {
	margin-bottom: 15px;
	line-height: 1.5;
	vertical-align: top
}
h1, h2, h3 {
	font-weight: 400
}
h1, h2, h3, h4, h5, h6 {
	color: #14182a;
	font-weight: 600;
	line-height: 1.3;
	margin-top: 0px
}
h1 {
	font-size: 45px;
	margin-bottom: 15px
}
h2 {
	font-size: 40px;
	margin-bottom: 10px
}
h3 {
	font-size: 35px;
	margin-bottom: 10px
}
h4 {
	font-size: 30px;
	margin-bottom: 10px
}
h5 {
	font-size: 25px;
	margin-bottom: 10px
}
h6 {
	font-size: 20px;
	margin-bottom: 10px
}
.page-content {
	font-size: 16px;
	line-height: 28px;
	font-weight: 400;
	font-family: var(--zf-primary-regular), "Arial", sans-serif;
	color: #2c3e50;
	letter-spacing: 0px;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}
p {
	color: initial;
	font-size: 16px;
	line-height: 1.65;
	font-weight: 400
}
.z-left {
	float: left
}
.z-right {
	float: right
}
.z-bg-cover {
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-o-background-size: cover !important;
	background-size: cover !important
}
.z-align-center {
	text-align: center
}
.z-align-left {
	text-align: left
}
.z-align-right {
	text-align: right
}
.z-mobile-only {
	display: none
}
.button {
	border: 1px solid #f0483e;
	text-decoration: none;
	background: #f0483e;
	padding: 10px 30px;
	display: inline-block;
	margin-bottom: 10px;
	color: #fff;
	font-size: 18px
}
.z-row {
	padding: 100px 0px
}
.z-no-bottom-space {
	padding-bottom: 0px
}
.z-column-block {
	float: left
}
.z-two-col .z-column-block {
	width: 47%;
	margin-right: 6%
}
.z-two-col .z-column-block.contentBlock {
	width: 40%
}
.z-two-col .z-column-block.imageBlock {
	width: 54%
}
.z-two-col .z-column-block:nth-child(2n) {
	margin-right: 0px
}
.z-alt-section .z-two-col .z-column-block {
	float: right;
	margin-right: 0px
}
.z-alt-section .z-two-col .z-column-block:nth-child(2) {
	float: left;
	margin-right: 6%
}
.z-three-col .z-column-block {
	width: 30%;
	margin-right: 5%
}
.z-three-col .z-column-block:nth-child(3n) {
	margin-right: 0px
}
.z-four-col .z-column-block {
	width: 21.25%;
	margin-right: 5%
}
.z-four-col .z-column-block:nth-child(4n) {
	margin-right: 0px
}
.z-small-content-wrap {
	max-width: 800px
}
.z-content-wrap {
	max-width: 1040px
}
.z-large-content-wrap {
	max-width: 1170px
}
.z-small-content-wrap, .z-content-wrap, .z-large-content-wrap {
	margin: 0 auto;
	width: 100%;
	display: block
}
.z-small-content-wrap:after, .z-content-wrap:after, .z-large-content-wrap:after {
	content: '';
	display: block;
	clear: both
}
.custom-icon-wrap {
	position: relative;
	padding-left: 80px;
	min-height: 50px;
	margin-bottom: 20px;
	overflow: hidden
}
.custom-icon-wrap .custom-icon {
	position: absolute;
	top: 0px;
	left: 0px
}
.custom-icon.style2 {
	width: 70px;
	height: 70px;
	background: url(../images/notebook-sprite.png) no-repeat 16px -50px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%
}
.custom-icon {
	background: url(../images/notebook-sprite.png) no-repeat 1px -64px;
	display: inline-block;
	width: 40px;
	height: 40px;
	margin-bottom: 10px
}
.product-header {
	width: 100%
}
ul.menu {
	margin-bottom: 0px
}
ul.menu li {
	margin-bottom: 0px;
	list-style: none
}
.product-nav-links .signing .goto-link {
	padding: 0px 12px;
	margin: 8px 0px
}
.account-signout-details {
	border-top: 1px solid #EEE;
	clear: both;
	position: relative;
	top: 10px
}
.userinfo-details .userinfo-avatar {
	cursor: pointer;
	float: left;
	height: 35px;
	margin: 0px;
	position: absolute;
	top: 0px;
	transition: height 0.2s ease 0s, width 0.2s ease 0s, margin 0.2s ease 0s;
	width: 35px
}
.product-logo {
	background: url(../images/mail.png) no-repeat 0px 0px;
	-webkit-background-size: 50px;
	-moz-background-size: 50px;
	-o-background-size: 50px;
	background-size: 50px;
	font-family: var(--zf-primary-regular), Gotham, Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 22px
}
.transparent-header .product-logo, .transparent-header .product-menu li a {
	color: #fff
}
.transparent-header .product-header-top .product-logo, .transparent-header .product-header-top .product-menu li a {
	color: #333
}
.product-menu {
	margin-bottom: 0px;
	list-style: none;
	padding: 0px
}
.product-menu li {
	margin-bottom: 0px
}
.product-header-top .product-header-inner {
	padding-right: 20px !important
}
.transparent-header .product-header {
	background: transparent !important
}
.transparent-header #banner-section {
	margin-top: -75px;
	padding-top: 75px
}
.download-apps {
	max-width: 300px;
	margin: 0 auto
}
.download-apps a {
	background: url("https://www.zoho.com.cn/images/product-common-sprite.png") no-repeat;
	display: inline-block;
	vertical-align: middle;
	margin: 5px;
	text-indent: -999em
}
.download-apps .apple-store {
	background-position: left -60px;
	height: 40px;
	width: 135px
}
.download-apps .google-play {
	background-position: left -105px;
	height: 41px;
	width: 135px
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) {
.download-apps a {
	background-image: url("../../images/product-common-sprite.png");
	background-size: 115px 440px
}
.download-apps .apple-store {
	background-position: left -105px
}
.download-apps .google-play {
	background-position: left -58px
}
}

@media only screen and (max-width: 1200px) {
.z-large-content-wrap {
	max-width: 90%;
	margin: 0 auto
}
}

@media only screen and (max-width: 1140px) {
.mobile-menu ul {
	padding: 0;
	margin: 0;
	list-style: none
}
.mobile-menu li {
	margin-bottom: 0
}
}

@media only screen and (max-width: 1100px) {
.z-content-wrap {
	max-width: 90%;
	float: none;
	margin: 0 auto
}
}

@media only screen and (max-width: 900px) {
.transparent-header #banner-section {
	margin-top: 0px;
	padding-top: 0px
}
.transparent-header .product-logo, .transparent-header .product-menu li a {
	color: #333
}
}

@media only screen and (max-width: 959px) and (min-width: 768px) {
.z-small-content-wrap {
	max-width: 90%;
	margin: 0 auto
}
}

@media only screen and (max-width: 767px) {
body {
	font-size: 13px;
	line-height: 22px
}
.z-two-col .z-column-block, .z-three-col .z-column-block, .z-four-col .z-column-block {
	margin-right: 0px;
	margin-bottom: 30px;
	width: 100%
}
.z-two-col .z-column-block:last-child, .z-three-col .z-column-block:last-child, .z-four-col .z-column-block:last-child {
	margin-bottom: 0px
}
.z-row {
	padding: 50px 0px
}
.z-small-content-wrap, .z-content-wrap {
	max-width: 90%
}
.z-mobile-only {
	display: block
}
.z-desktop-only {
	display: none
}
.z-no-bottom-space {
	padding-bottom: 0px
}
.transparent-header .product-header, .product-header {
	background: #fff !important
}
.product-logo {
	background-repeat: no-repeat;
	background-image: url("https://www.zoho.com.cn/images/product-common-sprite.png") !important;
	background-size: auto auto !important
}
.userinfo-container {
	display: none !important
}
.z-two-col .z-column-block.imageBlock {
	margin-left: -5%;
	margin-right: -5%;
	width: 110%
}
.z-two-col .z-column-block.contentBlock {
	width: 100%
}
.colorGreen h2, .colorBlue h2, .colorPurple h2, .colorGrey h2 {
	margin-top: 0
}
}
.css-animate, [data-animation] {
	visibility: hidden !important
}
.css-animate.animated {
	visibility: visible !important
}
.animated, .fadeIn, .fadeInLeft, .fadeInRight, .slideInUp, .slideInLeft, .slideInRight, .zoomIn, .fadeInUp {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
@-webkit-keyframes fadeIn {
from {
opacity:0
}
to {
opacity:1
}
}
@keyframes fadeIn {
from {
opacity:0
}
to {
opacity:1
}
}
.fadeIn {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn
}
@-webkit-keyframes fadeInLeft {
from {
opacity:0;
-webkit-transform:translate3d(-50px, 0, 0);
transform:translate3d(-50px, 0, 0)
}
to {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInLeft {
from {
opacity:0;
-webkit-transform:translate3d(-50px, 0, 0);
transform:translate3d(-50px, 0, 0)
}
to {
opacity:1;
-webkit-transform:none;
transform:none
}
}
.fadeInLeft {
	-webkit-animation-name: fadeInLeft;
	animation-name: fadeInLeft
}
@-webkit-keyframes fadeInRight {
from {
opacity:0;
-webkit-transform:translate3d(50px, 0, 0);
transform:translate3d(50px, 0, 0)
}
to {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInRight {
from {
opacity:0;
-webkit-transform:translate3d(50px, 0, 0);
transform:translate3d(50px, 0, 0)
}
to {
opacity:1;
-webkit-transform:none;
transform:none
}
}
.fadeInRight {
	-webkit-animation-name: fadeInRight;
	animation-name: fadeInRight
}
@-webkit-keyframes slideInUp {
from {
-webkit-transform:translate3d(0, 100%, 0);
transform:translate3d(0, 100%, 0);
visibility:visible;
opacity:0
}
100% {
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0);
opacity:1
}
}
@keyframes slideInUp {
from {
-webkit-transform:translate3d(0, 100%, 0);
transform:translate3d(0, 100%, 0);
visibility:visible;
opacity:0
}
100% {
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0);
opacity:1
}
}
.slideInUp {
	-webkit-animation-name: slideInUp;
	animation-name: slideInUp
}
@-webkit-keyframes slideInLeft {
from {
-webkit-transform:translate3d(-250px, 0, 0);
transform:translate3d(-250px, 0, 0);
visibility:visible
}
to {
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
}
@keyframes slideInLeft {
from {
-webkit-transform:translate3d(-250px, 0, 0);
transform:translate3d(-250px, 0, 0);
visibility:visible
}
to {
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
}
.slideInLeft {
	-webkit-animation-name: slideInLeft;
	animation-name: slideInLeft
}
@-webkit-keyframes slideInRight {
from {
opacity:0.5;
-webkit-transform:translate3d(250px, 0, 0);
transform:translate3d(250px, 0, 0);
visibility:visible
}
to {
opacity:1;
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
}
@keyframes slideInRight {
from {
opacity:0.5;
-webkit-transform:translate3d(250px, 0, 0);
transform:translate3d(250px, 0, 0);
visibility:visible
}
to {
opacity:1;
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
}
.slideInRight {
	-webkit-animation-name: slideInRight;
	animation-name: slideInRight
}
@-webkit-keyframes zoomIn {
from {
opacity:0;
-webkit-transform:scale3d(0.3, 0.3, 0.3);
transform:scale3d(0.3, 0.3, 0.3)
}
50% {
opacity:1
}
}
@keyframes zoomIn {
from {
opacity:0;
-webkit-transform:scale3d(0.3, 0.3, 0.3);
transform:scale3d(0.3, 0.3, 0.3)
}
50% {
opacity:1
}
}
.zoomIn {
	-webkit-animation-name: zoomIn;
	animation-name: zoomIn
}
@-webkit-keyframes fadeInUp {
from {
opacity:0;
-webkit-transform:translate3d(0, 100%, 0);
transform:translate3d(0, 100%, 0)
}
to {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInUp {
from {
opacity:0;
-webkit-transform:translate3d(0, 100%, 0);
transform:translate3d(0, 100%, 0)
}
to {
opacity:1;
-webkit-transform:none;
transform:none
}
}
.fadeInUp {
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp
}
.hidden {
	display: none !important
}
.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px
}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto
}
.invisible {
	visibility: hidden
}
.clearfix:before, .clearfix:after, .z-row:after {
	content: " ";
	display: block
}
.clearfix:after, .z-row:after {
	clear: both
}

@media print {
*, *:before, *:after, *:first-letter, *:first-line {
	background: transparent !important;
	color: #000 !important;
	box-shadow: none !important;
	text-shadow: none !important
}
a, a:visited {
	text-decoration: underline
}
a[href]:after {
	content: " (" attr(href) ")"
}
abbr[title]:after {
	content: " (" attr(title) ")"
}
a[href^="#"]:after, a[href^="javascript:"]:after {
	content: ""
}
pre, blockquote {
	border: 1px solid #999;
	page-break-inside: avoid
}
thead {
	display: table-header-group
}
tr, img {
	page-break-inside: avoid
}
img {
	max-width: 100% !important
}
p, h2, h3 {
	orphans: 3;
	widows: 3
}
h2, h3 {
	page-break-after: avoid
}
}
.smileydivmn {
	width: 308px;
	height: 400px;
	position: absolute;
	background-color: #fff;
	z-index: 21;
	border: 1px solid #ddd;
	border-radius: 4px;
	overflow: auto;
	padding-bottom: 10px;
	right: 25px;
	bottom: 75px;
	display: none
}
.smileydivmn.shw {
	display: block
}
.smileycon {
	position: absolute;
	border: 2px solid #777;
	background: #FFF;
	overflow: hidden;
	display: none
}
.smileylist {
	width: 140px;
	height: 120px
}
.smileydiv {
	padding: 3px 4px 2px 8px;
	background: #fff;
	border-radius: 4px
}
[class^="zcsly-"], [class^="zcslymsg-"] {
	float: left;
	width: 24px;
	height: 24px;
	cursor: pointer;
	vertical-align: bottom;
	margin: 0 0 0 1px;
	background: url(../images/smileys.png) no-repeat;
	overflow: hidden;
	display: inline-block
}
[class^="zcslymsg-"] {
	float: none;
	height: 24px;
	vertical-align: middle;
	margin: -2px 0 0;
	cursor: default
}
.zcsimleys {
	text-transform: capitalize
}
.smileborder, .smlynone {
	border: 1px solid #fff;
	float: left;
	margin: 7px 2px 0 4px;
	padding-top: 1px;
	width: 28px;
	height: 28px
}
.smlynone {
	border: 1px solid #fff
}
.zc-doubt, .zc-sleepy, .zc-angel {
	margin-top: -1px
}
.zcmsg-thumbsup {
	position: relative;
	top: -2px
}
.zcmsg-thumbsdown {
	height: 21px;
	position: relative;
	top: 2px
}
.zcmsg-foosball {
	height: 24px
}
.smlynone:hover {
	box-shadow: 0 0 3px rgba(0,0,0,0.2);
	background-color: #fff
}

@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-o-min-device-pixel-ratio: 2 / 1), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
[class^="zcsly-"], [class^="zcslymsg-"] {
	background: url(../images/smileysretina.png) no-repeat;
	background-size: 240px 456px
}
}
.zcsly-smile, .zcslymsg-smile {
	background-position: 0px 0px
}
.zcsly-happy, .zcslymsg-happy {
	background-position: -24px 0px
}
.zcsly-joy, .zcslymsg-joy {
	background-position: -48px 0px
}
.zcsly-grinning, .zcslymsg-grinning {
	background-position: -72px 0px
}
.zcsly-cool, .zcslymsg-cool {
	background-position: -96px 0px
}
.zcsly-love, .zcslymsg-love {
	background-position: -120px 0px
}
.zcsly-curious, .zcslymsg-curious {
	background-position: -144px 0px
}
.zcsly-awe, .zcslymsg-awe {
	background-position: -168px 0px
}
.zcsly-thinking, .zcslymsg-thinking {
	background-position: -192px 0px
}
.zcsly-search, .zcslymsg-search {
	background-position: -216px 0px
}
.zcsly-idea, .zcslymsg-idea {
	background-position: 0px -24px
}
.zcsly-wink, .zcslymsg-wink {
	background-position: -24px -24px
}
.zcsly-razz, .zcslymsg-razz {
	background-position: -48px -24px
}
.zcsly-relaxed, .zcslymsg-relaxed {
	background-position: -72px -24px
}
.zcsly-angel, .zcslymsg-angel {
	background-position: -96px -24px
}
.zcsly-yummy, .zcslymsg-yummy {
	background-position: -120px -24px
}
.zcsly-yuck, .zcslymsg-yuck {
	background-position: -144px -24px
}
.zcsly-sad, .zcslymsg-sad {
	background-position: -168px -24px
}
.zcsly-blush, .zcslymsg-blush {
	background-position: -192px -24px
}
.zcsly-upset, .zcslymsg-upset {
	background-position: -216px -24px
}
.zcsly-anxious, .zcslymsg-anxious {
	background-position: 0px -48px
}
.zcsly-worry, .zcslymsg-worry {
	background-position: -24px -48px
}
.zcsly-stressed-out, .zcslymsg-stressed-out {
	background-position: -48px -48px
}
.zcsly-angry, .zcslymsg-angry {
	background-position: -72px -48px
}
.zcsly-tensed, .zcslymsg-tensed {
	background-position: -96px -48px
}
.zcsly-tired, .zcslymsg-tired {
	background-position: -120px -48px
}
.zcsly-bored, .zcslymsg-bored {
	background-position: -144px -48px
}
.zcsly-sleepy, .zcslymsg-sleepy {
	background-position: -168px -48px
}
.zcsly-jealous, .zcslymsg-jealous {
	background-position: -192px -48px
}
.zcsly-evil, .zcslymsg-evil {
	background-position: -216px -48px
}
.zcsly-facepalm, .zcslymsg-facepalm {
	background-position: 0px -72px
}
.zcsly-doubt, .zcslymsg-doubt {
	background-position: -24px -72px
}
.zcsly-surprise, .zcslymsg-surprise {
	background-position: -48px -72px
}
.zcsly-faint, .zcslymsg-faint {
	background-position: -72px -72px
}
.zcsly-headache, .zcslymsg-headache {
	background-position: -96px -72px
}
.zcsly-sick, .zcslymsg-sick {
	background-position: -120px -72px
}
.zcsly-injured, .zcslymsg-injured {
	background-position: -144px -72px
}
.zcsly-neutral, .zcslymsg-neutral {
	background-position: -168px -72px
}
.zcsly-smirk, .zcslymsg-smirk {
	background-position: -192px -72px
}
.zcsly-shutup, .zcslymsg-shutup {
	background-position: -216px -72px
}
.zcsly-feeling-warm, .zcslymsg-feeling-warm {
	background-position: 0px -96px
}
.zcsly-feeling-cold, .zcslymsg-feeling-cold {
	background-position: -24px -96px
}
.zcsly-thumbsup, .zcslymsg-thumbsup {
	background-position: 0px -120px
}
.zcsly-thumbsdown, .zcslymsg-thumbsdown {
	background-position: -24px -120px
}
.zcsly-namaste, .zcslymsg-namaste {
	background-position: -48px -120px
}
.zcsly-super, .zcslymsg-super {
	background-position: -72px -120px
}
.zcsly-victory, .zcslymsg-victory {
	background-position: -96px -120px
}
.zcsly-yoyo, .zcslymsg-yoyo {
	background-position: -120px -120px
}
.zcsly-raising-hand, .zcslymsg-raising-hand {
	background-position: -144px -120px
}
.zcsly-clap, .zcslymsg-clap {
	background-position: -168px -120px
}
.zcsly-bye-bye, .zcslymsg-bye-bye {
	background-position: -192px -120px
}
.zcsly-thug, .zcslymsg-thug {
	background-position: -216px -120px
}
.zcsly-flexed-biceps, .zcslymsg-flexed-biceps {
	background-position: 0px -144px
}
.zcsly-flag, .zcslymsg-flag {
	background-position: 0px -168px
}
.zcsly-target, .zcslymsg-target {
	background-position: -24px -168px
}
.zcsly-foosball, .zcslymsg-foosball {
	background-position: -48px -168px
}
.zcsly-coffee-cup, .zcslymsg-coffee-cup {
	background-position: 0px -192px
}
.zcsly-food, .zcslymsg-food {
	background-position: -24px -192px
}
.zcsly-chicken, .zcslymsg-chicken {
	background-position: -48px -192px
}
.zcsly-gift-box, .zcslymsg-gift-box {
	background-position: -72px -192px
}
.zcsly-champagne, .zcslymsg-champagne {
	background-position: -96px -192px
}
.zcsly-party, .zcslymsg-party {
	background-position: -120px -192px
}
.zcsly-poop, .zcslymsg-poop {
	background-position: -144px -192px
}
.zcsly-peanuts, .zcslymsg-peanuts {
	background-position: -168px -192px
}
.zcsly-birthday, .zcslymsg-birthday {
	background-position: 0px -216px
}
.zcsly-fireworks, .zcslymsg-fireworks {
	background-position: -24px -216px
}
.zcsly-christmas-tree, .zcslymsg-christmas-tree {
	background-position: -48px -216px
}
.zcsly-santa-hat, .zcslymsg-santa-hat {
	background-position: -72px -216px
}
.zcsly-new-year, .zcslymsg-new-year {
	background-position: -96px -216px
}
.zcsly-singing, .zcslymsg-singing {
	background-position: -0px -240px
}
.zcsly-break-boy, .zcslymsg-break-boy {
	background-position: -24px -240px
}
.zcsly-break-girl, .zcslymsg-break-girl {
	background-position: -48px -240px
}
.zcsly-woman-dancing, .zcslymsg-woman-dancing {
	background-position: -72px -240px
}
.zcsly-man-dancing, .zcslymsg-man-dancing {
	background-position: -96px -240px
}
.zcsly-yoga, .zcslymsg-yoga {
	background-position: -120px -240px
}
.zcsly-karate, .zcslymsg-karate {
	background-position: -144px -240px
}
.zcsly-medicine, .zcslymsg-medicine {
	background-position: -168px -240px
}
.zcsly-first-aid-box, .zcslymsg-first-aid-box {
	background-position: -192px -240px
}
.zcsly-fire-extinguisher, .zcslymsg-fire-extinguisher {
	background-position: -216px -240px
}
.zcsly-fire, .zcslymsg-fire {
	background-position: -0px -264px
}
.zcsly-male-cyclist, .zcslymsg-male-cyclist {
	background-position: -24px -264px
}
.zcsly-female-cyclist, .zcslymsg-female-cyclist {
	background-position: -48px -264px
}
.zcsly-female-runner, .zcslymsg-female-runner {
	background-position: -72px -264px
}
.zcsly-male-runner, .zcslymsg-male-runner {
	background-position: -96px -264px
}
.zcsly-male-swimmer, .zcslymsg-male-swimmer {
	background-position: -120px -264px
}
.zcsly-female-swimmer, .zcslymsg-female-swimmer {
	background-position: -144px -264px
}
.zcsly-football, .zcslymsg-football {
	background-position: -168px -264px
}
.zcsly-basketball, .zcslymsg-basketball {
	background-position: -192px -264px
}
.zcsly-volleyball, .zcslymsg-volleyball {
	background-position: -216px -264px
}
.zcsly-tennis, .zcslymsg-tennis {
	background-position: -0px -288px
}
.zcsly-badminton, .zcslymsg-badminton {
	background-position: -24px -288px
}
.zcsly-table-tennis, .zcslymsg-table-tennis {
	background-position: -48px -288px
}
.zcsly-criket, .zcslymsg-criket {
	background-position: -72px -288px
}
.zcsly-baseball, .zcslymsg-baseball {
	background-position: -96px -288px
}
.zcsly-hockey, .zcslymsg-hockey {
	background-position: -120px -288px
}
.zcsly-golf, .zcslymsg-golf {
	background-position: -144px -288px
}
.zcsly-snooker, .zcslymsg-snooker {
	background-position: -168px -288px
}
.zcsly-chess, .zcslymsg-chess {
	background-position: -192px -288px
}
.zcsly-football-player, .zcslymsg-football-player {
	background-position: -0px -312px
}
.zcsly-basketball-player, .zcslymsg-basketball-player {
	background-position: -24px -312px
}
.zcsly-mvolleyball-player, .zcslymsg-mvolleyball-player {
	background-position: -48px -312px
}
.zcsly-fvolleyball-player, .zcslymsg-fvolleyball-player {
	background-position: -72px -312px
}
.zcsly-ftennis-player, .zcslymsg-ftennis-player {
	background-position: -96px -312px
}
.zcsly-mtennis-player, .zcslymsg-mtennis-player {
	background-position: -120px -312px
}
.zcsly-badminton-player, .zcslymsg-badminton-player {
	background-position: -144px -312px
}
.zcsly-mtt-player, .zcslymsg-mtt-player {
	background-position: -168px -312px
}
.zcsly-ftt-player, .zcslymsg-ftt-player {
	background-position: -192px -312px
}
.zcsly-batsman, .zcslymsg-batsman {
	background-position: -216px -312px
}
.zcsly-bowler, .zcslymsg-bowler {
	background-position: -0px -336px
}
.zcsly-batter, .zcslymsg-batter {
	background-position: -24px -336px
}
.zcsly-pitcher, .zcslymsg-pitcher {
	background-position: -48px -336px
}
.zcsly-hockey-player, .zcslymsg-hockey-player {
	background-position: -72px -336px
}
.zcsly-golfer, .zcslymsg-golfer {
	background-position: -96px -336px
}
.zcsly-gymnast, .zcslymsg-gymnast {
	background-position: -120px -336px
}
.zcsly-snooker-player, .zcslymsg-snooker-player {
	background-position: -144px -336px
}
.zcsly-chess-player, .zcslymsg-chess-player {
	background-position: -168px -336px
}
.zcsly-gold-medal, .zcslymsg-gold-medal {
	background-position: -0px -360px
}
.zcsly-silver-medal, .zcslymsg-silver-medal {
	background-position: -24px -360px
}
.zcsly-bronze-medal, .zcslymsg-bronze-medal {
	background-position: -48px -360px
}
.zcsly-refugee-olympic-team, .zcslymsg-refugee-olympic-team {
	background-position: -72px -360px
}
.zcsly-running, .zcslymsg-running {
	background-position: -96px -360px
}
.zcsly-hurdles, .zcslymsg-hurdles {
	background-position: -120px -360px
}
.zcsly-high-jump, .zcslymsg-high-jump {
	background-position: -144px -360px
}
.zcsly-long-jump, .zcslymsg-long-jump {
	background-position: -168px -360px
}
.zcsly-pole-vault, .zcslymsg-pole-vault {
	background-position: -192px -360px
}
.zcsly-discus-throw, .zcslymsg-discus-throw {
	background-position: -216px -360px
}
.zcsly-hammer-throw, .zcslymsg-hammer-throw {
	background-position: -0px -384px
}
.zcsly-javelin-throw, .zcslymsg-javelin-throw {
	background-position: -24px -384px
}
.zcsly-shotput-throw, .zcslymsg-shotput-throw {
	background-position: -48px -384px
}
.zcsly-boxing, .zcslymsg-boxing {
	background-position: -72px -384px
}
.zcsly-fencing, .zcslymsg-fencing {
	background-position: -96px -384px
}
.zcsly-judo, .zcslymsg-judo {
	background-position: -120px -384px
}
.zcsly-weightlifting, .zcslymsg-weightlifting {
	background-position: -144px -384px
}
.zcsly-wrestling, .zcslymsg-wrestling {
	background-position: -168px -384px
}
.zcsly-archery, .zcslymsg-archery {
	background-position: -192px -384px
}
.zcsly-shooting, .zcslymsg-shooting {
	background-position: -216px -384px
}
.zcsly-equestrian, .zcslymsg-equestrian {
	background-position: -0px -408px
}
.zcsly-canoeing, .zcslymsg-canoeing {
	background-position: -24px -408px
}
.zcsly-diving, .zcslymsg-diving {
	background-position: -48px -408px
}
.zcsly-rhythmic-gymnastics, .zcslymsg-rhythmic-gymnastics {
	background-position: -72px -408px
}
@font-face {
	font-family: "Streams";
	src: url(../images/streams.woff) format("woff");
	font-weight: normal;
	font-style: normal
}
[class^="swi-"], [msi*=" swi-"] {
	font-family: Streams;
	font-weight: normal;
	font-style: normal;
	font-size: 13px;
	color: #a3a3a3;
	line-height: 1;
	text-transform: none;
	cursor: pointer
}
.swi-love:before {
	content: "\e901"
}
.swi-love:hover {
	color: #555
}
.swi-love.sel {
	color: #017FBE !important
}
.swi-invitee:before {
	content: "\e900"
}
.swi-invitee.sel {
	color: #ff8b03 !important
}
body {
	overflow-x: hidden
}
.z-row {
	padding: 80px 0
}
#banner-section {
	background: #25282d
}
#banner-section .z-large-content-wrap, .comment-section .z-large-content-wrap {
	max-width: 1280px
}
.bannerWrapper {
	background-color: #FFF;
	padding: 5% 5% 30px 5%;
	position: relative
}
.bannerWrapper .SC_Sdd {
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
	position: absolute;
	user-select: none;
	opacity: 0;
	margin-top: -4px;
	visibility: hidden;
	right: 0;
	top: calc(5% + 31px)
}
.bannerWrapper .SC_Sdd>div {
	border: 1px solid #CCC;
	background-color: #fff;
	overflow: hidden;
	box-shadow: -3px 4px 8px rgba(0,0,0,0.2)
}
.bannerWrapper .SC_Sdd ul {
	margin: 0;
	padding: 0 0 5px;
	list-style: none
}
.bannerWrapper .SC_Sdd ul li {
	background-color: transparent;
	cursor: pointer;
	display: block;
	font-size: 100%;
	font-weight: 600;
	height: 20px;
	overflow: hidden;
	padding: 10px 15px 10px 25px;
	position: relative;
	margin: 0px;
	white-space: nowrap;
	transition: background 0.2s ease
}
.bannerWrapper .SC_Sdd ul li>img {
	left: 10px;
	position: absolute;
	width: 20px;
	top: 10px
}
.bannerWrapper .SC_Sdd ul li:first-child {
	border-bottom: 0 solid #CCC;
	padding-left: 15px;
	margin-bottom: 5px
}
.bannerWrapper .SC_Sdd ul li.fb {
	color: #3B5998
}
.bannerWrapper .SC_Sdd ul li.fb:hover {
	background-color: rgba(59,89,152,0.1)
}
.bannerWrapper .SC_Sdd ul li.tw {
	color: #1DA1F2
}
.bannerWrapper .SC_Sdd ul li.tw:hover {
	background-color: rgba(60,209,234,0.1)
}
.bannerWrapper .SC_Sdd ul li.li {
	color: #0077B5
}
.bannerWrapper .SC_Sdd ul li.li:hover {
	background-color: rgba(51,167,211,0.1)
}
.bannerWrapper .SC_Sdd ul li.li>img {
	top: 7px
}
.bannerWrapper .SCmb {
	box-sizing: border-box;
	user-select: none;
	position: absolute;
	right: 5%;
	top: 9.5%
}
.bannerWrapper .SCmb ul, .bannerWrapper .SCmb li {
	display: inline-block;
	list-style: none;
	margin: 0;
	padding: 0
}
.bannerWrapper .SCmb span {
	border: 1px solid transparent;
	border-bottom: 0;
	box-sizing: border-box;
	padding: 2px 0;
	display: block;
	text-align: center;
	width: 42px;
	height: 31px;
	cursor: pointer;
	position: relative;
	display: inline-block;
	display: inline-block
}
.bannerWrapper .SCmb span.SC_ddn {
	background-color: #fff;
	border-color: #fff;
	height: 31px;
	padding-bottom: 13px
}
.bannerWrapper .SCmb span.SC_ddn .SC_hd {
	background-color: #fff;
	height: 4px;
	width: 100%;
	display: block;
	left: 0;
	position: absolute;
	bottom: -1px;
	visibility: visible;
	border-width: 1px 0;
	top: auto;
	z-index: 2
}
.bannerWrapper .SCmb:hover .SC_Sdd {
	opacity: 1;
	visibility: visible
}
.bannerWrapper .SCmb:hover span.SC_ddn {
	border: 1px solid #ccc;
	border-bottom-color: #fff
}
.bannerWrapper h1 {
	font-size: 60px;
	font-family: var(--zf-primary-black), Arial, sans-serif;
	line-height: 1.1;
	margin-bottom: 20px;
	margin-top: 12.5%;
	color: #333
}
.bannerWrapper p {
	font-size: 28px;
	line-height: 1.3;
	margin-bottom: 30px;
	color: #333
}
.postHead {
	font-size: 24px;
	min-height: 64px;
	padding-left: 82px;
	position: relative
}
.postHead a {
	font-weight: bold
}
.postHead:before {
	background: url(../images/z.svg) center center no-repeat;
	content: '';
	height: 64px;
	left: 0;
	position: absolute;
	width: 64px
}
.postHead .postDet {
	background: url(../images/recently.svg) left center no-repeat;
	display: block;
	margin-top: 7px;
	min-height: 28px
}
.postHead strong {
	font-weight: 800
}
.postAct {
	clear: both;
	font-size: 28px;
	margin-top: 20px
}
.postAct .swi-love, .postAct .swi-invitee {
	font-size: 26px;
	margin-left: 0
}
.postAct span {
	margin-left: 10px
}
.postAct span.link {
	min-width: 33px;
	display: inline-block
}
.postAct ul, .postAct li {
	display: inline-block;
	margin: 0
}
.postAct ul {
	list-style: none;
	padding: 0
}
.postAct ul li {
	display: inline-block
}
.postAct ul li img {
	width: 40px
}
.postAct>* {
	vertical-align: middle
}
.postAct .swi-love.sel:before {
	display: inline-block;
	content: '';
	height: 26px;
	width: 26px
}
.postAct .swi-love:after {
	background-image: url(../images/heart-like.png);
	background-size: 1024px 64px;
	background-position: 0 0;
	display: none;
	content: '';
	height: 64px;
	width: 64px;
	animation: like-heart 0.5s steps(15);
	position: absolute;
	margin-left: -45px;
	margin-top: -11px
}
.postAct .swi-love.sel:after {
	background-position: -960px 0;
	display: inline-block;
	transition: background 0.5s steps(15)
}
@keyframes like-heart {
0% {
background-position:0 0
}
100% {
background-position:-960px 0
}
}
.sepDot {
	display: inline-block;
	height: 12px;
	margin: 0 15px;
	width: 8px
}
.sepDot:before {
	color: #dadada;
	content: "\2022";
	font-size: 20px;
	margin-top: -10px;
	position: absolute;
	pointer-events: none
}
.link, .reply {
	color: #33a7d3;
	cursor: pointer
}
.link:hover, .reply:hover {
	color: #1d95c2
}
.cursorDefault {
	cursor: default
}
.redButton {
	color: #fff;
	display: inline-block;
	font-weight: 400;
	padding: 10px 30px;
	cursor: pointer;
	background: #ea5b56
}
.redButton:hover {
	background: #dd4245
}
.commentWra {
	background-color: #f9f9f9;
	box-shadow: 0 0 15px rgba(53,57,65,0.15);
	position: relative
}
.commentWra:before {
	background-color: #FFF;
	content: '';
	position: absolute;
	height: 15px;
	margin-top: -15px;
	left: 0;
	right: 0
}
.commentWra ul {
	list-style: none;
	margin: 0;
	padding: 0
}
.commentWra ul li {
	border-top: #f0f0f0 1px solid;
	margin-bottom: 0;
	min-height: 55px;
	padding: 15px 25px 15px 5%
}
.commentWra ul li>div {
	padding-left: 75px;
	font-size: 20px
}
.commentWra ul li>div .cmntDet {
	color: #97999d;
	font-size: 14px
}
.commentWra ul li>div .cmntDet i {
	color: #a3a3a3
}
.commentWra ul li>div .cmntDet .sepDot {
	margin: 0 10px
}
.commentWra ul li>div .cmntDet>* {
	vertical-align: middle
}
.commentWra ul li>div .cmntDet .reply.last {
	float: right
}
.commentWra ul li>img {
	position: absolute;
	width: 55px
}
.commentWra ul li .swi-love, .commentWra ul li .reply, .commentWra ul li .sepDot {
	display: none
}
.commentWra ul li:hover .swi-love, .commentWra ul li:hover .reply, .commentWra ul li:hover .sepDot {
	display: inline-block
}
.commentWra ul li.liked .swi-love, .commentWra ul li.liked .swi-love+.reply, .commentWra ul li.liked .sepDot.first {
	display: inline-block
}
.commentWra .cmntText {
	background-color: #FFF;
	color: #adaeb0;
	font-size: 16px;
	line-height: 35px;
	margin: 0;
	padding: 10px 55px 10px 15px;
	width: calc(100% - 70px)
}
.commentWra .cmntText:focus {
	outline: none
}
.commentWra .cmntText:focus:not(:empty) {
	color: inherit
}
.commentWra .cmntText .textArea {
	display: inline-block;
	line-height: 35px;
	min-height: 35px;
	min-width: 100px;
	vertical-align: middle
}
.commentWra .cmntText .textArea:focus {
	outline: none
}
.commentWra .cmntText .textArea:not(:empty) {
	color: inherit
}
.commentWra .smiley {
	cursor: pointer;
	position: absolute;
	right: 35px;
	margin-top: 13px;
	width: 30px
}
[contentEditable=true]:empty:not(:focus):before {
	content: attr(data-placeholder)
}
#navWrapper {
	position: relative;
	z-index: 2;
	text-align: center
}
#navWrapper .page-nav-inner {
	white-space: nowrap
}
#navWrapper a {
	display: inline-block;
	font-size: 30px;
	padding: 15px 0;
	position: relative;
	width: calc(100% / 4)
}
#navWrapper a * {
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	transition: all 0.3s ease
}
#navWrapper a span {
	vertical-align: middle;
	display: inline-block
}
#navWrapper a .tab-icon {
	width: 64px;
	height: 64px;
	padding: 0;
	margin-right: 5px;
	background: url(../images/tab-icons.svg) no-repeat;
	background-size: 400% 100%
}
#navWrapper a .tab-icon.red {
	background-position: 1px 0
}
#navWrapper a .tab-icon.green {
	background-position: -63px 0
}
#navWrapper a .tab-icon.blue {
	background-position: -128px 0
}
#navWrapper a .tab-icon.yellow {
	background-position: -193px 0
}
#navWrapper a.colorGreen {
	color: #ea785d
}
#navWrapper a.colorGreen.select:after {
	background-color: #ea785d
}
#navWrapper a.colorBlue {
	color: #5ab56c
}
#navWrapper a.colorBlue.select:after {
	background-color: #5ab56c
}
#navWrapper a.colorRed {
	color: #4660bb
}
#navWrapper a.colorRed.select:after {
	background-color: #4660bb;
	background-color: #4660bb
}
#navWrapper a.colorPurple {
	color: #fdb924
}
#navWrapper a.colorPurple.select:after {
	background-color: #fdb924
}
#navWrapper a:after {
	cursor: default;
	pointer-events: none
}
#navWrapper .navWrapper {
	background-color: #FFF;
	-moz-transition: opacity 0.4s ease;
	-webkit-transition: opacity 0.4s ease;
	-o-transition: opacity 0.4s ease;
	-ms-transition: opacity 0.4s ease;
	transition: opacity 0.4s ease;
	border-bottom: transparent 1px solid
}
#navWrapper.sticky .navWrapper {
	border-bottom-color: #f3f3f4;
	left: 0;
	position: fixed;
	right: 0;
	top: 51px;
	z-index: 1;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05)
}
#navWrapper.sticky a {
	font-size: 20px;
	padding-left: 30px;
	padding-right: 30px;
	margin-left: 20px;
	margin-right: 20px;
	width: auto
}
#navWrapper.sticky a .tab-icon {
	width: 25px;
	height: 25px
}
#navWrapper.sticky a .tab-icon.red {
	background-position: 1px 0
}
#navWrapper.sticky a .tab-icon.green {
	background-position: -24px 0
}
#navWrapper.sticky a .tab-icon.blue {
	background-position: -50px 0
}
#navWrapper.sticky a .tab-icon.yellow {
	background-position: -75px 0
}
#navWrapper.sticky a span {
	opacity: 0.5
}
#navWrapper.sticky a.select span {
	opacity: 1
}
#navWrapper.sticky a.select:after {
	bottom: -1px;
	content: '';
	height: 1px;
	position: absolute;
	left: 0;
	right: 0
}
.page-section {
	background-position: left bottom;
	background-repeat: repeat-x
}
.page-section.colorGreen {
	background-image: url(../images/red-bg.png)
}
.page-section.colorGreen h2 {
	color: #ea785d
}
.page-section.colorBlue {
	background-image: url(../images/green-bg.png)
}
.page-section.colorBlue h2 {
	color: #5ab56c
}
.page-section.colorBlue .contentBlock li {
	background-image: url(../images/blue-bullet.svg)
}
.page-section.colorBlue .contentBlock li.sel:before {
	background-color: #5ab56c;
	border-color: #5ab56c
}
.page-section.colorBlue .imageBlock li.sel {
	background-color: #5ab56c
}
.page-section.colorRed {
	background-image: url(../images/purple-bg.png)
}
.page-section.colorRed h2 {
	color: #4660bb
}
.page-section.colorRed .contentBlock li {
	background-image: url(../images/red-bullet.svg)
}
.page-section.colorRed .contentBlock li.sel:before {
	background-color: #4660bb;
	border-color: #4660bb
}
.page-section.colorRed .imageBlock li.sel {
	background-color: #4660bb
}
.page-section.colorPurple {
	background-color: #fdb924;
	transform: rotate(0);
	margin-left: 0;
	margin-right: 0;
	margin-top: 25px
}
.page-section.colorPurple .z-row {
	transform: rotate(0)
}
.page-section.colorPurple .streamLogo {
	border-radius: 20px;
	background: #4660bb;
	box-shadow: 5px 5px 38px rgba(0,0,0,0.3);
	margin-bottom: 30px;
	margin-top: 50px;
	padding: 15px;
	display: inline-block
}
.page-section.colorPurple .streamLogo img {
	width: 60px
}
.page-section.colorPurple h2 {
	color: #333;
	margin-bottom: 10px
}
.page-section.colorPurple p {
	font-size: 16px;
	line-height: 25px;
	max-width: 320px;
	color: #333;
	margin-bottom: 10px
}
.page-section.colorPurple p strong {
	color: #333
}
.page-section.colorPurple .learnMore {
	border: #f0483e 1px solid;
	display: inline-block;
	background: #f0483e;
	margin-top: 20px;
	padding: 7px 15px;
	color: #fff;
	font-family: var(--zf-primary-bold), Arial, sans-serif
}
.page-section.colorPurple .learnMore:hover {
	background: #dd4245
}
.page-section.colorPurple .download-apps {
	margin: 0;
	margin-left: -5px;
	padding-top: 40px
}
.page-section.colorPurple .download-apps .apple-store {
	height: 41px
}
.page-section h2 {
	font-size: 60px;
	font-family: var(--zf-primary-extrabold), Arial, sans-serif
}
.page-section h2:first-child {
	margin-top: 15%
}
.page-section ul {
	padding: 0;
	list-style: none
}
.page-section ul li {
	cursor: pointer
}
.page-section ul li.sel {
	cursor: default
}
.page-section .contentBlock li {
	background-position: left 6px;
	background-repeat: no-repeat;
	background-size: 20px;
	font-size: 16px;
	line-height: 1.65;
	padding-left: 30px;
	position: relative
}
.page-section .contentBlock li.sel {
	background-image: url(../images/white-bullet.svg);
	color: #FFF
}
.page-section .contentBlock li.sel:before {
	border-radius: 5px;
	border-style: solid;
	border-width: 1px;
	bottom: -10px;
	content: "";
	left: -10px;
	position: absolute;
	right: -10px;
	top: -10px;
	z-index: -1
}
.page-section .imageBlock ul {
	text-align: center;
	margin-top: 20px;
	margin-bottom: 0
}
.page-section .imageBlock li {
	background-color: #d9dadd;
	border-radius: 100%;
	display: inline-block;
	height: 10px;
	margin: 0 5px;
	width: 10px
}
.slideWrapper .imageBlock img {
	display: none
}
.slideWrapper .imageBlock img:first-child {
	display: block
}
h1, h2 {
	margin-bottom: 20px;
	font-weight: 800
}
h1 span, h2 span {
	display: block;
	font-size: 40%;
	font-weight: normal;
	margin-top: 0
}
.page-section .z-column-block>img {
	box-shadow: 0 15px 60px rgba(0,0,0,0.15)
}
.introStreams {
	text-align: center
}
.introStreams h2 {
	font-size: 120px;
	margin-bottom: 30px
}
.introStreams h2 span {
	line-height: 25px;
	margin-top: 0;
}
.introStreams p {
	font-size: 18px;
	line-height: 1.65;
	margin-top: 30px
}
.introStreams p span {
	display: block
}
.introStreams .paraBorder {
	border-color: #b1b1b1;
	margin: 0 auto;
	width: 50px
}
.introStreams .introducing-screen {
	max-width: 1280PX
}
.featureSection {
	text-align: center
}
.featureSection .featureContent img {
	max-width: 300px
}
.featureSection .featureContent p span {
	display: block
}
.featureSection .featureTable {
	margin-top: 6%;
	width: 100%
}
.featureSection .featureTable ul {
	margin: 0;
	padding: 0;
	border-bottom: #f2f2f2 1px solid
}
.featureSection .featureTable ul:last-child {
	border-bottom: none
}
.featureSection .featureTable li {
	width: 33.33%;
	display: table-cell;
	border-left: #f2f2f2 1px solid;
	padding: 30px 50px;
	margin: 0;
	cursor: default
}
.featureSection .featureTable li:first-child {
	border-left: none
}
.featureSection .featureTable li .feature-icon {
	width: 60px;
	height: 60px;
	display: inline-block;
	padding: 0;
	background: url(../images/feature-icons.svg) no-repeat;
	background-size: 100% 900%
}
.featureSection .featureTable li .feature-icon.schedule {
	background-position: 0 -177px
}
.featureSection .featureTable li .feature-icon.drafts {
	background-position: 0 -298px
}
.featureSection .featureTable li .feature-icon.bookmark {
	background-position: 0 -418px
}
.featureSection .featureTable li .feature-icon.scrub {
	background-position: 0 -116px
}
.featureSection .featureTable li .feature-icon.compose {
	background-position: 0 -237px
}
.featureSection .featureTable li .feature-icon.attachment {
	background-position: 0 -482px
}
.featureSection .featureTable li .feature-icon.watch {
	background-position: 0 -358px
}
.featureSection .featureTable li .feature-icon.folder {
	background-position: 0 -56px
}
.featureSection .featureTable li .feature-icon.contact {
	background-position: 0 3px
}
.featureSection .featureTable li span {
	display: block;
	font-size: 21px;
	padding: 10px 0;
	font-family: var(--zf-primary-bold), Arial, sans-serif
}
.featureSection .featureTable li p {
	color: #333;
	font-size: 14px;
	line-height: 1.65;
	margin-bottom: 0;
	padding: 0;
	text-align: left
}
.footer .one-liner ul {
	margin-bottom: 0
}
.bot-banner-wrap.streams {
	background: #ea785d;
	padding: 60px 10% 70px;
	text-align: center
}
.bot-banner-wrap.streams h2 {
	color: #fff;
	font-family: var(--zf-primary-regular), Arial, sans-serif;
	line-height: 1;
	margin-bottom: 25px;
	font-size: 30px
}
.bot-banner-wrap.streams .get-started-new a {
	position: relative;
	display: inline-block;
	font-size: 16px;
	line-height: 50px;
	padding: 0 60px;
	background: #f0483e;
	text-align: center;
	text-transform: uppercase;
	transition: all 0.5s ease 0s;
	margin: 0;
	color: #fff;
	border: none;
	border-bottom: none;
	border: 1px solid rgba(255,255,255,0.5);
	background: transparent;
	color: #FFF
}
.bot-banner-wrap.streams .get-started-new a:hover {
	border: 1px solid #fff
}
.alignRightCol {
	float: right;
	margin-right: 0 !important
}
.banner-text-block span {
	display: block;
	font-size: 100%
}
.SC_arm {
	background-color: #ffffff;
	border: 1px solid #d1d1d1;
	display: block;
	margin: 0;
	max-width: 650px;
	min-width: 190px;
	padding: 3px 0px !important;
	position: absolute;
	z-index: 99;
	opacity: 0;
	margin-top: -150px;
	transition: all 0.2s ease
}
.SC_arm:before, .SC_arm:after {
	border-color: transparent;
	border-style: solid;
	border-width: 13px;
	content: "";
	height: 0px;
	position: absolute;
	width: 0px
}
.SC_arm:after {
	border-width: 12px
}
.SC_arm.bt {
	box-shadow: 0 2px 10px rgba(0,0,0,0.2)
}
.SC_arm.bt:before, .SC_arm.bt:after {
	border-bottom-width: 0;
	left: 50%
}
.SC_arm.bt:before {
	border-top-color: #d1d1d1;
	bottom: -13px;
	margin-left: -13px
}
.SC_arm.bt:after {
	border-top-color: #ffffff;
	bottom: -12px;
	margin-left: -12px
}
.SC_arm.shw {
	opacity: 1
}
.SC_ctdtl {
	font-size: 14px
}
.SC_ctdtl ul {
	list-style: none;
	margin: 0;
	padding: 0
}
.SC_ctdtl li {
	margin: 0;
	min-height: 20px;
	padding: 6px 15px 7px
}
.SC_ctdtl li:first-child {
	padding: 7px 15px 8px 60px;
	min-height: 40px
}
.SC_ctdtl li:first-child img {
	position: absolute;
	left: 10px;
	top: 10px;
	width: 40px
}
.SC_ctdtl .statusIcon {
	left: 42px;
	top: 42px
}
.SC_P2r span {
	display: block;
	font-weight: 400;
	overflow: hidden;
	padding: 0;
	white-space: nowrap
}
.SC_lne {
	padding: 0px !important;
	margin: 2px 0px !important;
	background-color: #dadada;
	height: 1px !important;
	line-height: 1px !important;
	min-height: 1px !important;
	overflow: hidden !important;
	max-width: none
}
.statusIcon {
	left: 0;
	position: absolute;
	top: 0
}
.statusIcon:after {
	border: solid 2px white;
	border-radius: 50%;
	content: "";
	cursor: pointer;
	display: block;
	height: 6px;
	width: 6px
}
.statusIcon.available:after {
	background-color: #14b474
}
.statusIcon.busy:after {
	background-color: #fd3a36
}
.statusIcon.idle:after {
	background-color: #f9af29
}
.statusIcon.offline:after {
	background-color: #c0c0c0
}
.SC_dd {
	position: absolute;
	margin: 0px;
	opacity: 0
}
.SC_dd.shw {
	opacity: 1
}
.SC_dd>div {
	border: 1px solid #CCCCCC;
	background-color: #ffffff;
	box-shadow: 3px 4px 8px rgba(0,0,0,0.2);
	overflow: hidden;
	overflow-y: auto
}
.SC_dd ul {
	margin: 0;
	padding: 0;
	list-style: none
}
.SC_dd .SC_Pr li {
	cursor: pointer;
	display: block;
	font-size: 14px;
	line-height: 20px;
	margin: 0;
	overflow: hidden;
	padding: 5px 5px 5px 32px;
	position: relative;
	white-space: nowrap
}
.SC_dd .SC_Pr li>img {
	left: 6px;
	position: absolute;
	width: 20px;
	height: 20px;
	top: 4px
}
.SC_dd .SC_Pr li.sel {
	background-color: #dde3ec
}
.SC_dd .SC_Pr li:hover, .SC_dd .SC_Pr li.sel:hover {
	background-color: #017FBE;
	color: #fff
}

@media only screen and (min-width: 768px) and (max-width: 900px) {
.z-ipad-hide {
	display: none
}
.z-two-col .z-column-block.banner-text-block {
	width: 100%;
	margin-bottom: 40px
}
.z-two-col .z-column-block.contentBlock, .z-two-col .z-column-block.imageBlock {
	width: 100%
}
.z-two-col .z-column-block.contentBlock {
	margin-bottom: 20px
}
.bannerWrapper h1 {
	margin-top: 6%
}
.bannerWrapper .SCmb {
	top: 6.8%
}
.introStreams {
	padding-top: 40px
}
#navWrapper a {
	font-size: 20px;
	margin-right: 0
}
#navWrapper a.colorGreen {
	text-align: left
}
#navWrapper a .tab-icon {
	width: 32px;
	height: 32px;
	margin-right: 3px
}
#navWrapper a .tab-icon.red {
	background-position: 0 0
}
#navWrapper a .tab-icon.green {
	background-position: -32px 0
}
#navWrapper a .tab-icon.blue {
	background-position: -64px 0
}
#navWrapper a .tab-icon.yellow {
	background-position: -96px 0
}
#navWrapper.sticky a {
	font-size: 18px;
	padding-left: 10px;
	padding-right: 15px;
	margin-left: 10px;
	margin-right: 10px
}
.page-section h2:first-child {
	margin-top: 0
}
.page-section.colorPurple h2 {
	font-size: 55px
}
.page-section.colorPurple .streamLogo {
	margin-top: 0;
	padding: 10px;
	margin-bottom: 10px
}
.page-section.colorPurple .streamLogo img {
	width: 50px
}
.page-section.colorPurple .download-apps {
	display: block !important
}
.featureSection {
	text-align: center
}
.featureSection .featureContent img {
	max-width: 300px
}
.featureSection .featureContent p span {
	display: block
}
.featureSection .featureTable li {
	padding: 30px 20px
}
.featureSection .featureTable li p {
	font-size: 12px
}
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
.product-header-top {
	display: block
}
.product-header-inner {
	background: #333
}
.z-row {
	padding: 30px 0
}
.transparent-header .product-logo, .transparent-header .product-menu li a {
	color: #fff
}
.page-section.colorPurple .z-row {
	padding: 50px 0
}
.page-section.colorPurple .download-apps {
	display: block !important;
	padding-top: 20px
}
}

@media only screen and (max-width: 767px) {
.smileydivmn {
	bottom: 56px;
	right: 10px;
	height: 190px
}
.z-row {
	padding: 30px 0px
}
.z-two-col .z-column-block.contentBlock {
	width: 96%;
	float: none;
	margin: 0 auto;
	margin-left: 2%
}
.postHead {
	font-size: 19px
}
#banner-section {
	background: none
}
#banner-section+section .z-large-content-wrap {
	max-width: 100%
}
.bannerWrapper {
	padding-left: 20px;
	padding-right: 0
}
.bannerWrapper h1 {
	font-size: 45px;
	margin-top: 35px;
	margin-bottom: 15px
}
.bannerWrapper p {
	font-size: 22px;
	line-height: 34px
}
.bannerWrapper .SCmb {
	top: 4.6%;
	right: 1%
}
.bannerWrapper .postAct span.link {
	min-width: 22px
}
.bannerWrapper .postAct .swi-love, .bannerWrapper .postAct .swi-invitee, .bannerWrapper .postAct .link {
	font-size: 18px;
	margin-left: 0
}
.bannerWrapper .postAct .swi-love {
	margin-right: 8px
}
.bannerWrapper .postAct .swi-love.sel {
	margin-right: 0
}
.bannerWrapper .postAct ul {
	margin-right: 8px
}
.bannerWrapper .postAct ul li img {
	width: 32px
}
.featureSection .featureTable ul {
	border-bottom: none
}
.featureSection .featureTable li {
	border-bottom: 1px solid #f2f2f2;
	border-left: none;
	display: block;
	width: auto;
	padding-left: 20px;
	padding-right: 20px
}
.featureSection .featureTable li p {
	text-align: center
}
.featureSection .featureTable td p {
	padding: 0 25px
}
.page-section.colorPurple {
	margin-left: 0;
	margin-right: 0
}
.page-section.colorPurple * {
	text-align: center
}
.page-section.colorPurple p, .page-section.colorPurple .download-apps {
	max-width: 100%
}
.page-section.colorPurple, .page-section.colorPurple .z-row {
	transform: none
}
.page-section.colorPurple .z-large-content-wrap {
	max-width: 75%
}
.page-section.colorPurple .streamLogo {
	margin-top: 0
}
.page-section h2 {
	font-size: 40px
}
.page-section h2:first-child {
	margin-top: 0
}
.introStreams {
	background: none;
	padding-bottom: 0
}
.introStreams h2 {
	font-size: 60px
}
.introStreams p span {
	display: inline-block
}
.featureSection h3 {
	font-size: 30px
}
h2 span {
	margin-top: 0
}
.postAct .sepDot {
	margin: 0 10px
}
.contentBlock {
	margin-bottom: 0 !important
}
.bot-banner-wrap.streams {
	padding: 40px 10% 50px
}
.bot-banner-wrap.streams h2 {
	font-size: 22px
}
.bot-banner-wrap.streams .get-started-new a {
	padding: 0 40px
}
.footer-links li {
	text-align: center
}
.commentWra ul li {
	min-height: 40px;
	padding: 10px
}
.commentWra ul li>img {
	width: 32px
}
.commentWra ul li>div {
	font-size: 13px;
	line-height: 1.4;
	padding-left: 38px
}
.commentWra ul li>div .cmntDet {
	font-size: 11px
}
.commentWra ul li>div .cmntDet .sepDot {
	margin: 0 3px
}
.commentWra ul li>div .cmntDet .sepDot:before {
	margin-top: -9px
}
.commentWra ul li .swi-love {
	font-size: 11px
}
.commentWra .cmntText {
	line-height: 30px;
	padding-bottom: 6px;
	padding-top: 6px
}
.commentWra .cmntText .textArea {
	line-height: 25px;
	min-height: 25px
}
.commentWra .smiley {
	margin-top: 7px;
	right: 15px;
	width: 25px
}
.download-apps {
	display: block !important;
	padding-bottom: 15px
}
.page-section .imageBlock ul {
	margin-bottom: 0
}
.featureSection .featureContent p span {
	display: inline-block
}
.postAct .swi-love:after {
	background-size: 672px 42px;
	height: 42px;
	width: 42px;
	margin-left: -38px;
	margin-top: 0
}
.postAct .swi-love.sel:after {
	background-position: -630px 0
}
@keyframes like-heart {
0% {
background-position:0 0
}
100% {
background-position:-630px 0
}
}
}

@media only screen and (max-width: 320px) {
.bannerWrapper {
	padding-left: 10px
}
.bannerWrapper h1 {
	margin-top: 25px;
	font-size: 40px
}
.bannerWrapper p {
	font-size: 18px;
	line-height: 1.5
}
.bannerWrapper .redButton {
	padding: 6px 30px
}
.postHead {
	font-size: 16px;
	padding-left: 72px
}
.postHead:before {
	height: 54px;
	width: 54px
}
.postHead .postDet {
	margin-top: 0px;
	background-size: 72% auto
}
}

@media only screen and (max-width: 767px) and (orientation: landscape) {
.page-section.colorPurple .z-row {
	padding: 40px 0px 12px
}
.page-section.colorPurple * {
	text-align: left
}
.page-section.colorPurple .streamLogo {
	margin-top: 0;
	padding: 10px;
	margin-bottom: 10px
}
.page-section.colorPurple .streamLogo img {
	width: 40px
}
.page-section.colorPurple .z-two-col .z-column-block {
	width: 47%;
	margin-right: 6%
}
.page-section.colorPurple .download-apps {
	padding-top: 0;
	padding-bottom: 0
}
.page-section.colorPurple .download-apps .google-play {
	width: 120px
}
.page-section.colorPurple p {
	font-size: 14px
}
.page-section.colorPurple .learnMore {
	margin-top: 10px;
	margin-bottom: 15px
}
}

.dropdown ul li{
	list-style:none!important;
}