body { position: relative; }
.page-section-inner {
	padding: 40px 8px
}
.page-section-inner.first-section { padding-top: 0; }

.is-gray-background {
	background: #f4f5f7;
	border-color: #e4e5e7
}
p.text-center a { text-decoration: underline; }

.row:after,
.row:before {
	content: "";
	display: table;
	clear: both
}
.row > .col {
	float: left;
	box-sizing: border-box;
}

.page-title-second:after {
	content: '';
	display: table;
	clear: both
}
.page-title-second {
	position: relative;
	margin-bottom: 20px
}
.page-title-second-text {
	font: 400 32px 'Open Sans Condensed','Helvetica Narrow',arial,helvetica,sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase
}

@-webkit-keyframes fade-in-left {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-30%, 0, 0);
        transform: translate3d(-30%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fade-in-left {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-30%, 0, 0);
        transform: translate3d(-30%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
.fade-in-left {
	-webkit-animation-duration: 1.2s;
    animation-duration: 1.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fade-in-left;
    animation-name: fade-in-left;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}




.article-features {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-align-self: stretch;
	-ms-flex-item-align: stretch;
	align-self: stretch;
	font-size: 15px;
}
.article-features.flex-row-reverse {
	-webkit-box-direction: reverse;
	-webkit-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}
.article-features-img {
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
	max-width: 50%;
	overflow: hidden;
}
.article-features-img img {
	display: block;
	max-width: 100%;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
.article-features-content {
	padding: 0 40px;
	padding: 0 5vw;
}
.article-features-content p { margin: 0.7em 0; }
.article-features-point {
	list-style: outside disc;
	margin: 1.3em 0;
	padding: 0 0 0 20px;
}
.article-features-point li + li { margin-top: 1em; }
.article-features-point:first-child,
.article-features-content p:first-child { margin-top: 0; }
.article-features-point:last-child,
.article-features-content p:last-child { margin-bottom: 0; }





.accordion:after {
	content: '';
	display: table;
	clear: both;
}
.accordion-trigger { cursor: pointer; }
.accordion-collapsed {
	position: relative;
	padding: 10px 10px 10px 40px;
	background: #f4f4f4;
	color: #222;
	font-weight: normal;
	font-size: 14px;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
.accordion [class*="accordion-icon-"] {
	position: absolute;
	top: 0;
	left: 10px;
	bottom: 0;
	margin: auto;
	padding: 0;
	width: 14px;
	height: 14px;
	box-sizing: border-box;
	border-radius: 100%;
	color: #606060;
	font-size: 14px;
	line-height: 1;
	text-align: center;
}
.accordion-icon-expanded { display: none; }
.accordion-expanded {
	display: none;
	padding: 10px 14px;
	-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
	box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
}
.accordion.is-active .accordion-icon-collapsed { display: none; }
.accordion.is-active .accordion-icon-expanded { display: block; }
.accordion.is-active .accordion-collapsed {
	background: #606060;
	color: #fff;
	-webkit-box-shadow: 0 -1px 2px 0 rgba(0,0,0,0.2);
	box-shadow: 0 -1px 2px 0 rgba(0,0,0,0.2);
}
.accordion.is-active [class*="accordion-icon-"] { color: #fff; }




/* affiliate */
.affiliate-hero:before,
.affiliate-hero:after {
	content: '';
	display: table;
	clear: both;
}
.affiliate-hero { 
	position: relative;
	background: url(../images/img-main-bg.jpg) no-repeat 0 0;
	background-size: 100%;
}
.hero-img {
	pointer-events: none;
	margin: 10% 0 -10% 0;
	width: 60%;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100%;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
.hero-img:before {
	content: '';
	display: block;
	width: 100%;
	height: 0;
}
.hero-img.monitor {
	max-width: 690px;
	max-height: none;
	background-image: url(../images/img-main-monitor.png);
}
.hero-img.monitor:before { padding-top: 78.0965%; }
.hero-tagline {
	position: relative;
	z-index: 1;
	margin: 5% 0 6% 50px;
	width: 400px;
	color: #fff;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
.hero-img.monitor + .hero-tagline { margin-left: 45%; }
.hero-tagline h1 {
	font-weight: bold;
	font-size: 50px;
	line-height: 1.2;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
}
.hero-tagline p {
	margin: 15px 0 30px 0;
	font-size: 17px;
}

.affiliate-faq .accordion { margin: 0 30px 15px 30px; }

@media (max-width: 1279px) {
	.header-inner, .footer-inner, .section-inner { max-width: 1000px; }
	.page-section-inner { padding: 20px 8px; }
	
	.hero-img { width: 50%; }
	.hero-img.monitor + .hero-tagline { margin-left: 40%; }
	.hero-tagline {
		margin-top: 3%;
		margin-bottom: 4%;
		width: 350px;
	}
	.hero-tagline h1 { font-size: 40px; }
	.hero-tagline p { font-size: 14px; }
	
	.article-features-img img {
		margin-left: -30%;
		max-width: 130%;
	}
	.article-features.flex-row-reverse .article-features-img img {
		margin-left: auto;
		margin-right: -30%;
		max-width: 130%;
	}
}
@media (max-width: 999px) {
	.header-inner, .footer-inner, .section-inner { max-width: 768px; }
	.hero-img { display: none; }
	.hero-img.monitor + .hero-tagline {
		margin-left: 30px;
		margin-right: 160px;
		width: auto;
	}
	.article-features-content { padding: 0 30px; }
	.affiliate-faq .accordion { margin: 0 15px 15px 15px; }
}
@media (max-width: 767px) {
	.hero-tagline h1 {
		font-size: 20px;
		font-weight: bold;
	}
}
@media (max-width: 600px) {
	.page-section + .page-section:nth-child(odd) {
		background: #f4f5f7;
		border-color: #e4e5e7;
	}
	.page-section-inner.first-section { padding: 0; }
	.page-title-second { margin-bottom: 15px; }
	.page-title-second-text {
		font-weight: 700;
		font-size: 20px;
	}
	.affiliate-hero {
		background-size: cover;
		background-position: left bottom;
	}
	.hero-img.monitor + .hero-tagline { margin: 20px 15px; }
	.hero-tagline p {
		margin: 15px 0;
		max-width: 350px;
	}
	.article-features,
	.article-features.flex-row-reverse {
		-webkit-box-direction: column;
		-webkit-flex-direction: column; 
		flex-direction: column; 
		-webkit-box-align: flex-start;
		-webkit-align-items: flex-start;
		-ms-flex-align: flex-start;
		align-items: flex-start;
	}
	.article-features-content { padding: 0 5px; }
	.article-features-img { display: none; }
	.article-features-point { margin-top: 15px; }
	
	.row > .col.layout-half { width: 100%!important; }
	
	.affiliate-faq .accordion { margin: 0 5px 15px 5px; }
}