.page-header {
    display: none!important;
}
#block-system-main .content-wrap h1.field-resources-list-heading, #block-system-main h1.page-heading {
	font-family: Microsoft YaHei, Arial, Helvetica, sans-serif;
}

#block-system-main .content-wrap {
	overflow: hidden;
}
#block-system-main .content-wrap h1.field-resources-list-heading {
	text-align: center;
	font-size: 30px;
}
#block-system-main h1.page-heading {
	max-width: 1280px;
	width: 90%;
	margin: 0 auto;
	text-align: center;
}
#block-system-main p.page-caption {
	max-width: 1280px;
	width: 90%;
	margin: 0 auto;
	text-align: center;
}
#resources {
	position: relative;
	margin: 0;
}
#resources .tab-search .content-wrap {
	margin: 20px auto
}
.tab-search {
	width: 100%
}
.tab-search .srchbtn {
	display: none
}
.tab-search .src-input {
	width: 100%;
	box-sizing: border-box;
	background: url("https://www.zoho.com/creator/images/search-icon.png") no-repeat scroll 15px 10px / 24px 24px rgba(0,0,0,0);
	border: 1px solid #ccc;
	box-sizing: border-box;
	line-height: 24px;
	padding: 10px 20px 10px 50px;
	width: 100%;
}
#resources .content-wrap {
	max-width: 980px;
	width: 90%;
}
#resources > .content-wrap {
	margin: 0 auto;
}
#resources ul {
	overflow: hidden;
}
#resources li {
	display: inline-block;
	float: left;
	width: 45%;
	margin: 0 5% 0 0;
}
#resources li:nth-child(n+3) {
	border-top: 1px dashed #E2E2E2;
}
#resources li:nth-child(2n+2) {
	margin: 0 0 0 5%;
}
#resources li > div {
	position: relative;
	padding: 40px 0 20px 60px;
}
#resources li > div span {
	position: absolute;
	left: 0;
	top: 40px;
	display: block;
	height: 50px;
	margin: 0 0 10px;
	width: 50px;
	opacity: 0.75;
}
#resources li > div h4, #resources li > div h4 a {
	color: #00add5;
	letter-spacing: -0.3px;
	font-size: 20px;
}
#resources li > div p {
	display: inline;
}
#resources li > div > a, #resources li > div p a {
	color: #00add5;
	font-size: 14px;
	white-space: nowrap;
	display: inline-block;
}
#resources li > div .learnmore-links a {
	position: relative;
	padding: 0 7px;
	display: inline-block;
	font-size: 14px;
}
#resources li > div .learnmore-links a:last-child {
	padding-right: 0;
}
#resources li > div .learnmore-links a:hover {
	text-decoration: underline;
}
#resources li > div .learnmore-links a:visited {
	color: #00add5;
}
#resources li > div .learnmore-links a:first-child {
	padding: 0 10px 0 0;
}
#resources li > div .learnmore-links a:after {
	position: absolute;
	content: '';
	width: 1px;
	height: 70%;
	background: #ddd;
	right: 0;
	top: 15%;
}
#resources li > div .learnmore-links a:last-child:after {
	display: none;
}

@media only screen and (min-width:768px) and (max-width:991px) {
.content-wrap h1 {
	font-size: 26px;
}
#resources li > div {
	min-height: 140px;
	padding: 20px 0 10px 60px;
}
}

@media only screen and (max-width:767px) {
.content-wrap h1 {
	font-size: 22px;
}
#block-system-main .content-wrap {
	max-width: 400px;
}
#resources li:nth-child(2n+2), #resources li {
	width: 100%;
	margin: 0;
}
#resources li:nth-child(n+2) {
	border-top: 1px dashed #E2E2E2;
}
#resources li > div {
	min-height: inherit;
	padding: 40px 0 50px 60px;
}
}/**/
.banner-section-wrap {
	background: #4761B9
}
.banner-section-wrap h1 {
	font-size: 60px;
	font-weight: 600
}
.banner-section-wrap h1 span {
	font-weight: 300
}
#resources .banner-section-wrap .content-wrap {
	position: relative;
	padding: 120px 0;
	max-width: 1280px
}
.banner-section-wrap .banner-bg > div {
	position: absolute;
	right: 0%;
	bottom: 0;
	height: 100%;
	width: 100%;
	margin: 0;
	border: none;
	padding: 0;
	animation: 10s linear 0s normal none infinite fadeAnimation;
}
.banner-section-wrap .banner-bg div#img1 {
	background: url("https://www.zoho.com/creator/images/banner-1.jpg") right bottom no-repeat;
	background-size: auto 100%;
}
.banner-section-wrap .banner-bg div#img2 {
	background: url("https://www.zoho.com/creator/images/banner-2.jpg") right bottom no-repeat;
	background-size: auto 100%;
	animation-delay: 3s;
	-webkit-animation-delay: 3s;
	-moz-animation-delay: 3s;
	-o-animation-delay: 3s;
	-ms-animation-delay: 3s;
}
.banner-section-wrap .banner-bg div#img3 {
	background: url("https://www.zoho.com/creator/images/banner-3.jpg") right bottom no-repeat;
	background-size: auto 100%;
	animation-delay: 5.5s;
	-webkit-animation-delay: 5.5s;
	-moz-animation-delay: 5.5s;
	-o-animation-delay: 5.5s;
	-ms-animation-delay: 5.5s;
}
.banner-content {
	margin-left:auto;
	margin-right:auto;
	color: #fff;
	position: relative
}
.banner-content h1{
	
	}
.icons-wrap {
	display: table;
	margin: 20px 0 0
}
.icons-wrap > div {
	display: table-cell;
	width: 25%;
	position: relative;
	min-width: 220px;
	font-size: 14px;
	text-align: center;
}
.icons-wrap > div span {
	display: block;
	position: relative;
	margin: 0 auto 10px;
	width: 80px;
	height: 80px;
	border-radius: 100%;
	border: 1px solid #becbf6;
	background: #425bb2;
	text-align: center
}
.icons-wrap > div span img {
	margin: 15px 0
}
.icons-wrap > div:before {
	content: '';
	position: absolute;
	left: 0;
	top: 40px;
	width: 100%;
	height: 1px;
	background: #becbf6;
	z-index: 0
}
.icons-wrap > div.icon-1:before {
	left: 50%;
	width: 50%
}
.icons-wrap > div.icon-4:before {
	width: 50%
}
@keyframes fadeAnimation {
0% {
 opacity: 0;
}
10% {
 opacity: 1;
}
35% {
 opacity: 1;
}
55% {
 opacity: 0;
}
85% {
 opacity: 0;
}
100% {
 opacity: 0;
}
}
@-webkit-keyframes fadeAnimation {
0% {
 opacity: 0;
}
10% {
 opacity: 1;
}
35% {
 opacity: 1;
}
55% {
 opacity: 0;
}
85% {
 opacity: 0;
}
100% {
 opacity: 0;
}
}
#resources li > div {
	padding: 20px 0 20px 0;
}
#resources li > div > a {
	position: relative;
	border: 1px solid #5B72C1;
	transition: 0.5s ease;
	color: #5B72C1;
	font-size: 12px;
	padding: 2px 26px 2px 10px;
	margin: 10px 0 0 0;
	text-transform: uppercase;
}
#resources li > div > a:hover {
	background: #5B72C1;
	color: #fff
}
#resources li > div > a:after {
	content: '>';
	position: absolute;
	right: 10px;
}
#resources li > div span {
	
	background:url(../images/creator-developers-sprite.png) no-repeat scroll 0% 0%;
}
#resources li > div span {
	height: 50px;
	width: 50px;
	display: block;
	position: relative;
	padding-bottom: 30px;
}
#resources li > div span.feature-icon1 {
	background-position: left 0px;
}
#resources li > div span.feature-icon2 {
	background-position: -50px 0px;
}
#resources li > div span.feature-icon3 {
	background-position: -100px 0px;
}
#resources li > div span.feature-icon4 {
	background-position: -150px 0px;
}
#resources li > div span.feature-icon5 {
	background-position: -200px 0px;
}
#resources li > div p {
	display: block;
}
#resources li > div h4, #resources li > div h4 a {
	color: #333333;
}
.video-wrap {
	display: table;
	margin: 80px auto 20px
}
.video-wrap h2 {
	text-align: center;
	margin-bottom: 30px
}
.video-wrap ul {
	margin: 30px 0 0 0;
	overflow: hidden
}
#resources .video-wrap ul li {
	border: none;
	margin: 0 0 20px;
	display: table-cell;
	width: 33.333%;
	padding: 10px;
	box-sizing: border-box
}
#resources .video-wrap ul li p {
	font-size: 14px;
	min-height: 130px;
	margin: 10px 0
}
#resources .video-wrap ul li img {
	width: 100%;
	cursor: pointer
}
.register {
	text-align: center;
	margin: 20px 0 0
}
/*Video popup*/
.cm-popup {
	background: rgba(255, 255, 255, 1);
	width: 100%;
	height: 100%;
	z-index: 9999999;
	top: 0px;
	position: fixed;
	display: none;
}
.cm-videos {
	background: none repeat scroll 0 0 #FFFFFF;
	border: 1px solid #f2f2f2;
	z-index: 999999999;
	display: none;
	opacity: 1;
	max-width: 860px;
	position: fixed;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 510px;
}
.main .cm-videos {
	margin: 0;
}
.video-part {
	height: 100%;
}
#ifrm {
	width: 100%;
	height: 100%;
}
.popup-close {
	cursor: pointer;
	height: 65px;
	position: fixed;
	right: 20px;
	top: 20px;
	width: 65px;
}
.popup-close .close-icon {
	background: none repeat scroll 0 0 #333;
	height: 20px;
	left: 12px;
	position: absolute;
	top: 3px;
	transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	width: 1px;
}
.popup-close .close-icon2 {
	transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

/*Video popup*/


@media only screen and (min-width : 768px) and (max-width: 991px) {
#resources .banner-section-wrap .content-wrap {
	width: 100%
}
.banner-content {
	width: 90%;
	margin: 0 auto;
	text-align: center
}
.banner-section-wrap .banner-bg > div:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.4);
}
.banner-section-wrap h1 {
	font-size: 40px
}
.banner-section-wrap h1 span {
	font-weight: 400
}
.icons-wrap {
	width: 100%
}
.icons-wrap > div {
	font-size: 12px;
	min-width: inherit
}
.icons-wrap > div span {
	width: 50px;
	height: 50px
}
.icons-wrap > div:before {
	top: 25px
}
.icons-wrap > div span img {
	max-width: 30px;
	margin: 10px 0
}
.banner-section-wrap .banner-bg div#img1 {
	background-size: cover;
	background: url("https://www.zoho.com/creator/images/banner-1.jpg") center center no-repeat;
}
.banner-section-wrap .banner-bg div#img2 {
	background-size: cover;
	background: url("https://www.zoho.com/creator/images/banner-2.jpg") center center no-repeat;
}
.banner-section-wrap .banner-bg div#img3 {
	background-size: cover;
	background: url("https://www.zoho.com/creator/images/banner-3.jpg") center center no-repeat;
}
#resources .video-wrap ul li {
	width: 50%
}
}

@media only screen and (max-width : 767px) {
#resources .banner-section-wrap .content-wrap {
	width: 100%
}
.banner-content {
	width: 90%;
	margin: 0 auto;
	text-align: center
}
.banner-section-wrap .banner-bg > div:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.4);
}
.banner-section-wrap h1 {
	font-size: 30px;
}
.banner-section-wrap h1 span {
	font-weight: 400
}
.icons-wrap {
	width: 100%
}
.icons-wrap > div {
	font-size: 10px;
	min-width: inherit;
	padding: 0 10px;
	box-sizing: border-box
}
.icons-wrap > div span {
	width: 50px;
	height: 50px
}
.icons-wrap > div:before {
	top: 25px
}
.icons-wrap > div span img {
	max-width: 30px;
	margin: 10px 0
}
.banner-section-wrap .banner-bg div#img1 {
	background-size: cover;
	background: url("https://www.zoho.com/creator/images/banner-1.jpg") center center no-repeat;
}
.banner-section-wrap .banner-bg div#img2 {
	background-size: cover;
	background: url("https://www.zoho.com/creator/images/banner-2.jpg") center center no-repeat;
}
.banner-section-wrap .banner-bg div#img3 {
	background-size: cover;
	background: url("https://www.zoho.com/creator/images/banner-3.jpg") center center no-repeat;
}
#resources .video-wrap ul li {
	width: 100%
}
#resources .video-wrap ul li p {
	min-height: inherit
}
}