.main-box .product-box .gallery-box h3 { padding-bottom: 0;}
.main-box { font-family: 'SimplonNorm', 'droid sans' ,'Helvetica', 'verdana' ,'Arial', 'sans-serif';}
.main-box h2 { font-family: 'SimplonNorm-Bold', 'droid sans' ,'Helvetica', 'verdana' ,'Arial', 'sans-serif';}
.main-box h3 { font-family: 'SimplonNorm-Bold', 'droid sans' ,'Helvetica', 'verdana' ,'Arial', 'sans-serif';}
.main-box p { font-family: 'SimplonNorm-Regular', 'SimplonNorm-Light', 'droid sans' ,'Helvetica', 'verdana' ,'Arial', 'sans-serif';}
/*
.product-main .support-links a:first-child { border-left: none;} /* for faq not online */
*/

/* ----------------------------------------------
overview
---------------------------------------------- */
/* Accessibility Video */
video::-webkit-media-controls {display: none}
video.video-box {
    width: 100%;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
	/*box-shadow: 0px 1px 15px rgba(45,44,42,.2);*/
}
.video-icon-block {
	top: unset;
	right: 1rem;
	width:2rem;
    height: 2rem;
    bottom: 1rem;
    max-width: unset;
	border-radius: 50%;
	color: #000;
    background-color: #fff;
    position: absolute;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer
}
.video-icon-block .icon-block__icon--play {
    top: 50%;
    left: 52%;
    width: 50%;
    height: 50%;
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: opacity .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out;
    display: none;
    opacity: 1;
    font-size: 12px;
	text-align: center;
    line-height: 16px;
    vertical-align: middle;
}
.video-icon-block .icon-block__icon--pause {
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: opacity .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out;
    display: block;
    opacity: 1;
    font-size: 12px;
	text-align: center;
    line-height: 16px;
    vertical-align: middle;
}



#product .product-main.learnMore-box { font-family: 'SimplonNorm', 'droid sans' ,'Helvetica', 'verdana' ,'Arial', 'sans-serif'; letter-spacing: 0;}
.product-main.learnMore-box.vocal h2 { display: block;}
.product-main.learnMore-box.vocal h2, .product-main.learnMore-box.vocal h3, .product-main.learnMore-box.vocal h4 { font-family: 'SimplonNorm-Medium', 'droid sans' ,'Helvetica', 'verdana' ,'Arial', 'sans-serif'; letter-spacing: 0; font-weight: normal !important; margin: 0; padding: 0;}
#product .product-main p { font-family: 'SimplonNorm-Regular', 'SimplonNorm-Light', 'droid sans' ,'Helvetica', 'verdana' ,'Arial', 'sans-serif'; line-height: 1.7em; letter-spacing: 0;}
.annotation-text { width: 1px; height: 1px; margin: -1px; padding: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); overflow: hidden; position: absolute;}
.nowrap { display: inline-block;}
a .nowrap { text-decoration:underline}
.cover h2 { font-size: 3rem !important; }
section h2 { font-size: 2rem !important; }
.product-main { /*font-size: 1.285rem;*/}
.product-main figcaption { font-size: 1rem; line-height: 1.3rem; font-family: 'SimplonNorm-Regular', 'SimplonNorm-Light', 'droid sans' ,'Helvetica', 'verdana' ,'Arial', 'sans-serif';}
.product-main figcaption strong { font-family: 'SimplonNorm-Bold', 'droid sans' ,'Helvetica', 'verdana' ,'Arial', 'sans-serif';}
.product-main section { margin-bottom: 5rem;}
.product-main section:nth-child(1), .product-main section:nth-child(2), .product-main section:last-child { margin-bottom: 0;}


/* cover */
.cover { width: 100%; height: auto; margin: 0 auto; padding: 0; position: relative;}
.cover .cover-wapper { width: auto; margin: 0 auto;}
.cover .content { width: 100%; height: 100%; margin: 0 auto; position: absolute;}
.cover .content .content-wapper { height: 70%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: stretch; text-align: center;}
.cover .content .content-wapper span { padding-bottom: 1rem; display: block; font-size: 2rem;}
.cover .photo { width: 100%; height: auto; overflow: hidden;}
.cover .photo img { width: 100%; height: auto; display: block;}
.cover .btn-video { width: 100%; margin: 2rem auto 0; display: block; font-size: 1.2em;}
.cover .btn-video a { padding: 10px 30px; display: block; color: #ffffff; line-height: 1em; text-decoration: none; display: inline-block; vertical-align: middle; background-color: #00786b; border-radius: 100px;}
.cover .btn-video a:hover { box-shadow: 0 1em 1em -0.7em #000000;}




/* award */
.award{ background-color: #f0f0f0;padding: 15px 15px!important; text-align: center}
.award .intro-wrapper{}
.award .intro-headline{}
.award .intro-headline h3{display:none;font-size: 16px; font-weight: normal;    margin: 1vw 0 0 0;font-family: 'SimplonNorm-Regular', 'droid sans' ,'Helvetica', 'verdana' ,'Arial', 'sans-serif'; }
.award .intro-content{display: inline-flex; flex-wrap: wrap; align-items:center;justify-content:center;}
.award .intro-content figure{ text-align: center; padding:20px;}
.award .intro-content figure img{width: 80px; margin: 0 auto 0px;}
.award .intro-content figure:nth-of-type(4) img{width: 90px;}
.award .intro-content figure figcaption{ max-width: 180px; text-align: center; margin: 0 auto; font-size: 18px; line-height: 1.3em;}
/* feature */
.feature { width: 100%; margin: 0 auto; padding: 4rem 0; position: relative;}
.feature .feature-wapper { margin: 0 auto; text-align: center;}
.feature .content {}
.feature .feature-items { width: 100%; margin: 2rem auto 0; display: inline-flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: center;}
.feature .feature-items figure { width: 20%; padding: 2vw 0; text-align: center;}
.feature .feature-items figcaption { height: 2rem; margin-top: 1rem;}
.feature .feature-items img { width: 58%; height: auto; margin: 0 auto; display: block;}
.feature .btn-video { width: 100%; margin: 2rem auto 0; display: block; font-size: 1.2em;}
.feature .btn-video a { padding: 15px 30px; color: #ffffff; line-height: 1em; text-decoration: none; display: inline-block; vertical-align: middle; background-color: #00786b; border-radius: 100px;}
.feature .btn-video a:hover { box-shadow: 0 1em 1em -0.7em #000000;}
/* noise-reduction */
.noise-reduction { width: 100%; height: auto; margin: 0 auto; position: relative; background: #353535;}
.noise-reduction .noise-reduction-wapper { width: 100%; margin: 0 auto;}
.noise-reduction .content { width: 100%; height: 100%; margin: 0 auto; padding: 4rem 2rem; position: absolute; color: #ffffff;}
.noise-reduction .content .content-wapper { width: 50%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;}
.noise-reduction .content .content-wapper figure { width: 70%; margin: 1.5rem auto; position: relative; text-align: center;}
.noise-reduction .photo{ width: 100%; height: auto; overflow: hidden;}
.noise-reduction .photo img { width: 100%; height: auto; display: block;}
.noise-reduction .btn-video { width: 100%; margin: 1rem auto 0;  display: flex; flex-direction: row; justify-content: center; align-items: stretch; text-align: center; font-size: 1.2em;}
.noise-reduction .btn-video a { padding: 15px 30px; display: block; color: #000000; font-size: .9rem; line-height: 1em; text-decoration: none; display: inline-block; vertical-align: middle; background-color: #ffffff; border-radius: 100px;}
.noise-reduction .btn-video a:hover { box-shadow: 0 2em 1em -0.7em #000000;}
.noise-reduction .btn-video .speaker { color: #ffffff; background: #f1463f;}
.noise-reduction .btn-video span { padding: 15px 30px; line-height: 1rem; font-family: 'SimplonNorm-Light'; font-size: 2rem !important;}
/* center-pass */
.center-pass { width: 100%; height: auto; margin: 0 auto; position: relative;}
.center-pass .center-pass-wapper { margin: 0 auto;}
.center-pass .content { width:66.66%; margin: 0 auto; text-align: center;}
.center-pass .photo { width: 100%; margin: 0 auto;}
.center-pass .photo img { width: 100%; height: auto; display: block;}
/* modes */
.modes { width: 100%; margin: 0 auto; padding: 4rem 0; position: relative; background: #1c877b;}
.modes .modes-wapper { margin: 0 auto;}
.modes .content { color: #ffffff; text-align: center;}
.modes .photo { width: 100%; margin: 0 auto; display: inline-flex; flex-direction: row; justify-content: space-around; align-items: stretch; text-align: center;}
.modes .photo img { width: 100%; height: auto; display: block;}
.modes .photo figure { width: 49%;}
.modes .photo figure:nth-child(1) { margin-right: 1%;}
.modes .photo figure:nth-child(2) { margin-left: 1%;}
.modes .photo figcaption { color: #ffffff;}
/* passing-around */
.passing-around { width: 100%; margin: 4rem auto; position: relative;}
.passing-around .passing-around-wapper { margin: 0 auto; display: flex; flex-direction: row-reverse; align-items: center; align-self: stretch;}
.passing-around .content { width: 50%; padding: 2rem 2rem; text-align: center;}
.passing-around .content figure { width: 30%; margin: 0 auto; display: block; text-align: center;}
.passing-around .photo { width: 50%;}
.passing-around .photo img { width: 100%; height: auto; display: block;}
.passing-around .photo figure { width: 100%; position: relative;}
/* sound360 */
.sound360 { width: 100%; margin: 0 auto 4rem; position: relative;}
.sound360 .sound360-wapper { margin: 0 auto; display: flex; flex-direction: row; align-items: center; align-self: stretch;}
.sound360 .content { width: 50%; padding: 2rem 2rem; text-align: center;}
.sound360 .photo { width: 50%;}
.sound360 .photo img { width: 100%; height: auto; display: block;}
.sound360 .photo figure { width: 100%; position: relative;}

/* compatible */
.compatible { width: 100%; height: auto; margin: 0 auto; padding: 0; position: relative; background: #f9f9f9;}
.compatible .compatible-wapper { width: auto; margin: 0 auto;}
.compatible .content { width: 100%; height: 100%; margin: 0 auto; position: absolute;}
.compatible .content .content-wapper { height: 100%; margin: 0 auto; padding-left: 30%; display: flex; flex-direction: column; justify-content: center; align-items: stretch; text-align: center;}
.compatible .content .photo { width: 80%; margin: 0 auto; display: inline-flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: center;}
.compatible .content .photo figure { width: 25%; padding-bottom: 1rem; text-align: center;}
.compatible .content .photo figure:nth-child(5) { width: 15%;}
.compatible .content .photo img { width: 70%; height: auto; margin: 0 auto; display: block;}
.compatible .content .photo img:nth-child(5) { width: 40%;}
.compatible .photo { width: 100%; height: auto; overflow: hidden;}
.compatible .photo img { width: 100%; height: auto; display: block;}

/* ----------------------------------------------
RWD
---------------------------------------------- */
@media only screen and (min-width: 1921px) {
	.cover .content .content-wapper, .center-pass .center-pass-wapper, .modes .modes-wapper, .passing-around .passing-around-wapper, .sound360 .sound360-wapper, .compatible .content .content-wapper { max-width: 1920px; width: 75%;}/* section content width */
    .feature .feature-wapper { max-width: 1920px; width: 50%;}
	.center-pass .photo, .modes .photo { margin-top: 4rem !important;}
	.modes .photo figcaption, .compatible .photo { margin-top: 2rem !important;}
}

@media only screen and (max-width: 1920px) {
	.cover .content .content-wapper, .feature .feature-wapper, .center-pass .center-pass-wapper, .modes .modes-wapper, .passing-around .passing-around-wapper, .sound360 .sound360-wapper, .compatible .content .content-wapper { max-width: 1920px; width: 75%;}/* section content width */
    .center-pass .photo, .modes .photo { margin-top: 4rem !important;}
	.modes .photo figcaption, .compatible .photo { margin-top: 2rem !important;}
}

@media only screen and (max-width: 1680px) {
	
}

@media only screen and (max-width: 1440px) {
	.noise-reduction .content .content-wapper figure { margin: 0 auto;}
}

@media only screen and (max-width: 1366px) {
	.noise-reduction .content .content-wapper { width: 60%; }
    .noise-reduction .btn-video { margin: 0 auto;}
}

@media only screen and (max-width: 1280px) {
    .cover h2 { font-size: 2.5rem !important; }
    .cover .content .content-wapper { height: 60%;}
    .cover .content .content-wapper span { padding-bottom: .5rem; font-size: 1.5rem;}
    .cover .btn-video { margin: 1rem auto 0;}

    .noise-reduction .content .content-wapper { width: 60%; }
    .noise-reduction .content .content-wapper figure { width: 50%; }
	.noise-reduction .btn-video a { padding: 15px 15px;}
}

@media only screen and (max-width: 1024px) {
    .cover .content .content-wapper, .feature .feature-wapper, .center-pass .center-pass-wapper, .modes .modes-wapper, .passing-around .passing-around-wapper, .sound360 .sound360-wapper, .compatible .content .content-wapper { width: 90%;}/* section content width */
    .cover h2 { font-size: 2rem !important; }

    .cover .content .content-wapper { padding-left: 15rem;}
    .cover .btn-video {  margin: .8rem auto 0; font-size: 1em;}
    .cover .btn-video a { padding: 8px 15px;}

    .vocal .award .content .content-wapper figure img { width: 60px;}

    .noise-reduction .noise-reduction-wapper { display: flex; flex-direction: column; justify-content: center; align-items: center;}
    .noise-reduction .content { padding: 4rem 2rem; position: relative;}
    .noise-reduction .content .content-wapper { width: 100%;}
    .noise-reduction .content .content-wapper figure { width: 70%; }
    .noise-reduction .photo { width: 55%; height: auto; overflow: hidden; }
    .noise-reduction .photo img { width: 100%; height: auto; display: block;}

    .compatible .content { height: auto; position: relative;}
    .compatible .content .content-wapper { height: auto; padding-left: 0; padding-top: 4rem;}
    .compatible .content .photo { width: 100%;}
    .compatible .content .photo img { width: 60%;}

 }

 @media only screen and (max-width: 960px) {
 }

 @media only screen and (max-width: 768px) {
	.product-main section { margin-bottom: 3.5rem;}/* section margin */

    .cover h2 { font-size: 1.75rem !important; }
    .cover .content .content-wapper { padding-left: 12rem;}
    .cover .content .content-wapper span { padding-bottom: .5rem; font-size: 1.5rem;}

    .vocal .award .content .content-wapper figure img { width: 50px;}
    .vocal .award .content .content-wapper figure { padding: 10px 20px;}

    .feature {  padding: 3.5rem 0 0;}
    .feature .feature-items figure { width: 33.33%;}

    .center-pass .content { width: 100%;}

    .passing-around .passing-around-wapper { width: 90%; margin: 0 auto; flex-direction: column;}
    .passing-around .content { width: 100%; margin: 0 auto; padding: 0;}
    .passing-around .content figure { width: 30%;}
    .passing-around .photo { width: 100%; margin-top: 2rem;}

    .sound360 .sound360-wapper { width: 90%; margin: 0 auto; display: flex; flex-direction: column;}
    .sound360 .content { width: 100%; padding: 0;}
    .sound360 .photo { width: 100%; margin-top: 2rem;}
    
    .compatible .content .content-wapper { padding-top: 3.5rem;}
 }

 @media only screen and (max-width: 576px) {
	section h2 { font-size: 1.5rem !important;}
	section h3 {font-size: 1.2rem !important;}
    .modes .photo figcaption, .compatible .photo { margin-top: 2rem !important;}

    .cover .content .content-wapper { padding-left: 8rem;}
    .cover .content .content-wapper span { padding-bottom: .2rem; font-size: 1.2rem;}

    .vocal .award .content .content-wapper figure img { width: 50px;}

    .feature .feature-items { width: 100%; margin: 2rem auto 0; display: inline-flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: center;}
    .feature .feature-items figure { width: 50%;}
    .feature .feature-items figcaption { height: 2rem; margin-top: 1rem;}
    .feature .feature-items img { width: 58%; height: auto; margin: 0 auto; display: block;}
    .feature .btn-video { width: 100%; margin: 2rem auto 0; display: block; font-size: 1.2em;}
    .feature .btn-video a { padding: 15px 30px; color: #ffffff; line-height: 1em; text-decoration: none; display: inline-block; vertical-align: middle; background-color: #00786b; border-radius: 100px;}
    .feature .btn-video a:hover { box-shadow: 0 1em 1em -0.7em #000000;}

    .noise-reduction .btn-video { width: auto; margin: 0 auto; flex-direction: column;}
    .noise-reduction .btn-video a { padding: 15px 30px;}
    .noise-reduction .btn-video span { display: none;}
    .noise-reduction .btn-video .speaker { margin-top: 1rem;}

    .modes .modes-wapper { margin: 0 auto;}
    .modes .photo { flex-direction: column;}
    .modes .photo figure { width: 100%;}
    .modes .photo figure:nth-child(1) { margin-right: 0; margin-bottom: 3rem;}
    .modes .photo figure:nth-child(2) { margin-left: 0;}

    .compatible .content .photo figure { width: 33.33%;}
    .compatible .content .photo { width: 100%;}


 }

 @media only screen and (max-width: 480px) {
    .cover h2 { font-size: 1.5rem !important; }

    .cover .content .content-wapper { padding-left: 8rem;}
    .cover .content .content-wapper span { padding-bottom: 0; font-size: 1rem;}
    .cover .btn-video {  margin: .2rem auto 0; font-size: .8em;}
    .cover .btn-video a { padding: 5px 10px;}

    .vocal .award .content .content-wapper figure img { width: 40px;}
    .vocal .award .content .content-wapper figure { padding: 5px 10px;}

    .noise-reduction .content { padding: 3rem 1rem;}

    .compatible .content .photo figure { width: 50%;}
    .compatible .content .photo figure:nth-child(5) { width: 50%; padding: 0 15% 5%;}

 }

 @media only screen and (max-width: 375px) {

    .cover .content .content-wapper { padding-left: 6rem;}


 }




/* ----------------------------------------------
support background
---------------------------------------------- */
.product-main.support-box { background: url("../images/vocal/product-support-vocal-large.jpg") no-repeat center top; background-size: cover;}
@media only screen and (max-width: 1024px) {
.product-main.support-box { background: url("../images/vocal/product-support-vocal-smal.jpg") no-repeat center -15%; background-size: none;}
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){
	.product-main.support-box { background: url("../images/vocal/product-support-vocal-large@2x.jpg") no-repeat right top; background-size: 100%;}/* support */
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1024px), only screen and (min-resolution: 1.5dppx) and (max-width: 1024px), (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1024px), (min-resolution: 144dpi) and (max-width: 1024px){
	.product-main.support-box { background: url("../images/vocal/product-supportvocal-small@2x.jpg") no-repeat center top; background-size: 100%;}/* support */
}

/* ----------------------------------------------
Gallery  background
---------------------------------------------- */
.product-main.gallery-box { position: relative; background: #333 url("../images/vocal/product-gallery-vocal-large.jpg") no-repeat right top; background-size: cover;}
@media only screen and (max-width: 1024px) {
.product-main.gallery-box { background: #333 url("../images/vocal/product-gallery-vocal-small.jpg") no-repeat right top; background-size: cover;}
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){
	.product-main.gallery-box { position: relative; background: #333 url("../images/vocal/product-gallery-vocal-large@2x.jpg") no-repeat bottom right; background-size: cover;}/* Gallery */
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1024px), only screen and (min-resolution: 1.5dppx) and (max-width: 1024px), (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1024px), (min-resolution: 144dpi) and (max-width: 1024px){
	.product-main.gallery-box { background: #333 url("../images/vocal/product-gallery-vocal-small@2x.jpg") no-repeat bottom right; background-size: cover;}/* Galle