﻿/* ========== ADJUSTMENTS OF QNAP HEADER AND FOOTER ========== */
#Main_Menu_wrap_false {
	display: none !important;
}
@media (min-width: 1000px) {
	.mainHeader {
		position: absolute !important;
	}
	.ftrBlock {
		padding-top: 50px;
	}
}
.addthis_sharing_toolbox {
	width: 266px;
	margin: 0px auto 60px;
	filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6; 
}
.addthis_sharing_toolbox a .at-icon-wrapper {
	border-radius:4px;
}
@media screen and (min-width: 1000px) {
	.addthis_sharing_toolbox {
		filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8; 
		position: absolute;
		top: 60px;
		left: 50%;
		margin-left: 222px;
	}
}

/* =========================================================== */
.sqfk-article .sqfk-keyvision {
	background-size: cover;
	background-position: center bottom;
	background-repeat:no-repeat;
	background-image: url('../images/header_bkd.jpg');
	/* background-attachment:fixed; */
}
@media (min-width: 320px) {
	.sqfk-article .sqfk-keyvision {
		background-image: url('../images/qnap_roon_main_banner.jpg');background-attachment: fixed;background-size:cover;background-position: center!important;
	}
}
@media (min-width: 720px) {
	.sqfk-article .sqfk-keyvision {
		background-image: url('../images/qnap_roon_main_banner.jpg');background-attachment: fixed;background-size:cover;background-position: center!important;
	}
}
#sqss .sqss-regular .sqss-slide-block {
	width: 260px;
	height: 195px;
	margin-left: -130px;
}
@media (min-width: 360px) {
	#sqss .sqss-regular .sqss-slide-block {
		width: 340px;
		height: 255px;
		margin-left: -170px;
	}
}
@media (min-width: 720px) {
	#sqss .sqss-regular .sqss-slide-block {
		width: 680px;
		height: 510px;
		margin-left: -340px;
	}
}
@media (min-width: 1000px) {
	#sqss .sqss-regular .sqss-slide-block {
		width: 800px;
		height: 600px;
		margin-left: -400px;
	}
}
@media (min-width: 1000px) {
	#sqss .sqss-regular .sqss-slide-caption {
		/* height: 120px; */
	}
}

/*#levelsync ul li:nth-child(1) {
	padding-top: 20px;
	background-color: #A51200;
}
#levelsync ul li:nth-child(1) h4 .label, #levelsync ul li:nth-child(1) p {
	color: #FFFFFF;
	}*/

	/*  2016-09 */


	.sqfk-article .sqfk-keyvision .sqfk-kv-image {
		padding: 40px 20px 0px;
		position:absolute;
		bottom:0px;
		left:50%;
		margin-left:-520px;
		z-index:1;
	}
	.sqfk-article .sqfk-keyvision .sqfk-container { z-index:2; }

	@media (min-width: 320px) {
		.sqfk-article .sqfk-keyvision .sqfk-kv-image {
			display:none;	
			padding: 0px;
			margin-left:-200px;
			width:40%;
		}
		.sqfk-article .sqfk-keyvision { min-height:480px;}
	}
	@media (min-width: 450px) {
		.sqfk-article .sqfk-keyvision .sqfk-kv-image {
			display:none;	
			padding: 0px;
			margin-left:-200px;
			width:36%;
		}
		.sqfk-article .sqfk-keyvision { min-height:500px;}
	}

	@media (min-width: 600px) {
		.sqfk-article .sqfk-keyvision .sqfk-kv-image {
			display:block;	
			padding: 0px;
			margin-left:-250px;
			width:30%;
		}
		.sqfk-article .sqfk-keyvision { min-height:520px;}
	}

	@media (min-width: 720px) {
		.sqfk-article .sqfk-keyvision .sqfk-kv-image {
			padding: 0px;
			margin-left:-400px;
			width:42%;
		}
		.sqfk-article .sqfk-keyvision { min-height:520px;}
	}

	@media (min-width: 1000px) {
		.sqfk-article .sqfk-keyvision .sqfk-kv-image {
			padding: 40px 20px 0px;
			position:absolute;
			bottom:0px;
			left:50%;
			margin-left:-520px;
			width:42%;
		}
		.sqfk-article .sqfk-keyvision { min-height:520px;}
	}
	@media (min-width: 1200px) {
		.sqfk-article .sqfk-keyvision .sqfk-kv-image {
			width:25%;
		}
	}
	.sqfk-article .sqfk-keyvision .sqfk-kv-image img {
		max-width: 100%;
		display:block;
	}


	#f01 {
		background-size: cover;
		background-position: center;
		background-image: url('../images/qcontactz_mean_bg.jpg');
	}
	.sqfk-article #f01.sqfk-section p { color:#ffffff; padding-top:20px; }

	#f01 .mean { margin:5em 0px 1em;}
	#f01 .mean:after { content: " ";  display: block;  clear: both; }
	#f01 .point { float:left; width:29%; margin:2%; text-align:center; } 
	#f01 .point p { margin-bottom:20px; }
	@media (min-width: 320px) {
		#f01 .point { float:none; width:100%; text-align:center; margin:0 0 50px; text-align:center; }
	}
	@media (min-width: 640px) {
		#f01 .point { float:left; width:29%; margin:2%; text-align:center; margin-bottom:0px; }
	}
	@media (max-width: 639px) {
		#f01 .mean br { display:none; }
	}




	.sqfk-article .sqfk-section .sqss-slide-caption h4 { font-size:24px; line-height:1.5em; margin-bottom:10px; }
	.sqfk-article .sqfk-section .sqss-slide-caption p { font-size:16px; padding:0; }

	.sqfk-article .sqfk-section p.align_ct { text-align:center; }


	/*  slider */
	.sqfk-article #multiple_use.sqfk-section { padding-bottom:0; background:#ffffff; }
	.m_slid_all { position:static; margin-top:2%; height:524px;  }
	.m_slid_all .m_slid { position:static; }
	.m_slid_all .m_slid > div { width:100%; display:block; }
	.m_slid_all .m_slid .m_slid_txt { padding:3% 5%; box-sizing:border-box; height:500px;}
/*
.m_slid_all { position:relative; margin-top:2%; height:524px;  }
.m_slid_all .m_slid:after { display:block; clear:both; content:" "; }
.m_slid_all .m_slid { position:absolute; }
.m_slid_all .m_slid > div { width:50%; display:table-cell; }
*/
#m_slid_1 { z-index:2;background:#f3eeea; }
#m_slid_2 { z-index:1;background:#e6f1ea; }
.m_slid_all #m_slid_1 .m_slid_img { background: url(../images/qcontactz_QmailAgent.jpg) no-repeat left; background-size: cover; }
.m_slid_all #m_slid_2 .m_slid_img { background: url(../images/qcontactz_API.jpg) no-repeat left;background-size: cover; }
.m_slid_all .m_slid .m_slid_txt { padding:3% 17% 5% 5%; box-sizing:border-box; height:560px;}
.m_slid_all .m_slid .m_slid_txt img { display:block; margin:0 auto 30px; }
.m_slid_all .m_slid .m_slid_txt h4 { padding:15px 0px; border-bottom:1px solid #cccccc; margin-bottom:30px; text-align:center; font-size:24px; line-height:1.3em;  }
.m_slid_all .m_slid .m_slid_txt p { padding:0px; line-height:1.8em; }

.m_slid_btn { display:none; bottom:0px; z-index:99; left:50%; width:72px; margin-left:-7.5%; }
.m_slid_btn > span { display:block; background:#aaa; width:14px; height:14px; border-radius:7px; margin:5px 10px; float:left; cursor:pointer; transition:all 0.5s ease; }
.m_slid_btn > span:hover { background:#ccc;}

@media (min-width: 320px) {
	.m_slid_all { position:static; margin-top:2%; height:auto;  }
	.m_slid_all .m_slid { position:static; }
	.m_slid_all .m_slid > div { width:100%; display:block; }
	.m_slid_all .m_slid .m_slid_img { height:250px;}
	.m_slid_all .m_slid .m_slid_txt { padding:10% 10% 15%; box-sizing:border-box; height:auto; }
	.m_slid_btn { display:none; }
}

@media (min-width: 980px) {
	.m_slid_all { position:relative; margin-top:2%; height:513px;  }
	.m_slid_all .m_slid { position:absolute; }
	.m_slid_all .m_slid > div { width:50%; display:table-cell; }
	.m_slid_all .m_slid .m_slid_img { }
	.m_slid_all .m_slid .m_slid_txt { padding:3% 5% 7%; box-sizing:border-box; height:560px;}
	.m_slid_btn { display:block; position:absolute; bottom:0px; z-index:99; left:75%; margin-left:-5%; }
}

@media (min-width: 1600px) {
	.m_slid_all .m_slid .m_slid_txt { padding:3% 17% 5% 5%; box-sizing:border-box; }
	.m_slid_btn { display:block; position:absolute; bottom:0px; z-index:99; left:75%; margin-left:-7.5%; }
}

.btn_download { text-align:center; }

.btn_download a {
	user-select:none;display:inline-block;padding:10px;border:1px solid #999999;border-radius:1px;text-decoration:none;line-height:1.5em;font-weight:normal;font-size:16px;color:#393939;
	transition:all 0.5s ease;margin-top:30px;width:150px;
}

.btn_download a:hover {
	border: 1px solid rgba(150, 150, 150, 0.75);
	color: rgba(60, 60, 60, 0.75);
}

/*    Qcontactz mobile    */
#mobile { background:url(../images/qcontactz_mobile_bg.png) left bottom no-repeat; position:relative; padding-bottom:36%;   }
.sqfk-article #mobile.sqfk-section .sqfk-sec-figure { position:absolute; width:60%; left:0;margin-left:-150px; margin-top:0; padding:0;  }
.sqfk-article #mobile.sqfk-section .sqfk-sec-figure img { max-width:100%;}
.sqfk-article #mobile.sqfk-section .mobile_txt { position:absolute; width:30%; left:50%; padding-top:80px; }
.sqfk-article #mobile.sqfk-section h3 { text-align:left; width:100%; padding:0; }
.sqfk-article #mobile.sqfk-section h4 { font-size:28px; line-height:1.5em; padding-bottom:15px; padding-top:15px; }
.sqfk-article #mobile.sqfk-section .p-anno { padding:0; }

@media (min-width: 320px) {
	#mobile { background:url(../images/qcontactz_mobile_bg-s.png) left center no-repeat; position:static; padding-bottom:12%;   }
	.sqfk-article #mobile.sqfk-section .sqfk-sec-figure { position:static; width:100%; left:0; margin-left:0px; padding-top:0; }
	.sqfk-article #mobile.sqfk-section .sqfk-sec-figure img { max-width:100%;}
	.sqfk-article #mobile.sqfk-section .mobile_txt { position:static; width:83.22581%; left:0; padding-top:80px; margin-left:8.3871%; box-sizing:border-box; }
	.sqfk-article #mobile.sqfk-section h4 { font-size:20px; }
	.sqfk-article #mobile.sqfk-section p.p-full { padding:0; }
}
@media (min-width: 800px) {
	#mobile { background:url(../images/qcontactz_mobile_bg.png) left bottom no-repeat; position:relative; padding-bottom:50%; padding-top:5%; }
	.sqfk-article #mobile.sqfk-section .sqfk-sec-figure { position:absolute; width:60%; left:0;  margin-left:-150px; padding-top:70px; }
	.sqfk-article #mobile.sqfk-section .sqfk-sec-figure img { max-width:100%;}	
	.sqfk-article #mobile.sqfk-section .mobile_txt { position:absolute; width:45%; left:50%; margin-left:-20px; padding-top:70px; }
}
@media (min-width: 1100px) {
	#mobile { background:url(../images/qcontactz_mobile_bg.png) left bottom no-repeat; position:relative; padding-bottom:42%; padding-top:5%; }
}
@media (min-width: 1480px) {
	#mobile { background:url(../images/qcontactz_mobile_bg.png) left bottom no-repeat; position:relative; padding-bottom:40%; padding-top:5%; }
	.sqfk-article #mobile.sqfk-section .mobile_txt { position:absolute; width:30%; left:50%; margin-left:20px; padding-top:90px; }
	.sqfk-article #mobile.sqfk-section h4 { font-size:28px; }
}

#architecture { background:url(../images/qcontactz_architecture_bg.png) right bottom no-repeat #ffffff;  }
@media (min-width: 320px) {
	#architecture { background:#f1f1f1;  }
}

@media (min-width: 980px) {
	#architecture { background:url(../images/qcontactz_architecture_bg.png) right bottom no-repeat #ffffff;  }
}




@media (max-width: 768px) {
	.sqfk-article .sqfk-section h3 br {
		display:none;
	}
}
s
.stype {
}

#f01 .all_bar { padding-top:1.8vh; padding-bottom:6vh; padding-left:20px; padding-right:20px;  }
#f01 .bars {display: table;width:100%;}
#f01 .bars img {width:100%;height:11px;}
#f01 .bars .txt { font-size:15px; color:#7dfffc; text-align:left; font-weight:300; }
#f01 .l {width:100px;padding-right:10px;display: table-cell;vertical-align: top; text-align:right; padding-bottom:20px; }
#f01 .r {display: table-cell;vertical-align: top; background-size: 100% 300px; background-repeat: no-repeat; min-height: 145px; padding-top:12px; padding-bottom:20px; }
#f01 .top {text-align: right; margin-bottom:5px; }
#f01 .light {
	color:#ffbd1e;
	font-size:14px;
	font-weight:300;
	line-height:1.4em;
}
#f01 .dark {color:#ffffff; font-size:13px; font-weight:300; line-height:1.4em; }
#f01 .r .dark { font-size:11px; padding-top:5px; }
#f01 .lt, #f01 .rt {
	margin-top:31px;
}
@media (min-width:1000px){
	#f01 .all_bar { padding-left:0; }	
	#f01 .l {width:150px;padding-right:20px; }
	#f01 .bars .txt { font-size:26px; }
	#f01 .light { font-size:20px; }
	#f01 .dark { font-size:18px; }
	#f01 .r .dark { font-size:18px; padding-top:0px; }
}

#f01 .bar-t {width: 30%} /* animate to 90% */
#f01 .bar-b {width: 20%;margin-top:20px} /* animate to 30% */

#f01 .grad1 {
	border-top-right-radius: 7px;
	border-bottom-right-radius: 7px;
	height:6px;
	background: rgba(46,83,148,0);
	background: -moz-linear-gradient(left, rgba(46,83,148,0) 0%, rgba(255,180,0,1) 30%, rgba(255,180,0,1) 90%, rgba(254,242,2,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(46,83,148,0)), color-stop(70%, rgba(255,189,30,1)), color-stop(100%, rgba(254,242,2,1)));
	background: -webkit-linear-gradient(left, rgba(46,83,148,0) 0%, rgba(255,180,0,1) 30%, rgba(255,180,0,1) 90%, rgba(254,242,2,1) 100%);
	background: -o-linear-gradient(left, rgba(46,83,148,0) 0%, rgba(255,180,0,1) 30%, rgba(255,180,0,1) 90%, rgba(254,242,2,1) 100%);
	background: -ms-linear-gradient(left, rgba(46,83,148,0) 0%, rgba(255,180,0,1) 30%, rgba(255,180,0,1) 90%, rgba(254,242,2,1) 100%);
	background: linear-gradient(to right, rgba(46,83,148,0) 0%, rgba(255,180,0,1) 30%, rgba(255,180,0,1) 90%, rgba(254,242,2,1) 100%);

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e5394', endColorstr='#ffbd1e', GradientType=1 );	
}
#f01 .grad2 {
	border-top-right-radius: 7px;
	border-bottom-right-radius: 7px;
	height:6px;
	background: rgba(46,83,148,0);
	background: -moz-linear-gradient(left, rgba(46,83,148,0) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(46,83,148,0)), color-stop(100%, rgba(255,255,255,1)));
	background: -webkit-linear-gradient(left, rgba(46,83,148,0) 0%, rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(left, rgba(46,83,148,0) 0%, rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(left, rgba(46,83,148,0) 0%, rgba(255,255,255,1) 100%);
	background: linear-gradient(to right, rgba(46,83,148,0) 0%, rgba(255,255,255,1) 100%);

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e5394', endColorstr='#ffffff', GradientType=1 );	
}

.sqfk-article #f01-item .sqfk-section-h4:before, .sqfk-article #f01-item .sqfk-section-h4:after { content:""; display:table; }
.sqfk-article #f01-item .sqfk-section-h4:after { clear:both; }
.sqfk-article #f01-item .sqfk-section-h4 { zoom:1; margin-bottom:2.5em;  }

.sqfk-article #f01-item .sqfk-section-h4 .txt { float:none; width:100%; box-sizing:border-box; padding-top:0px; }
.sqfk-article #f01-item .sqfk-section-h4 .sqfk-sec-figure { float:none; width:100%; box-sizing:border-box; margin:20px auto 0; }
.sqfk-article #f01-item.sqfk-section .sqfk-sec-figure { padding:0; }
.sqfk-article #f01-item.sqfk-section .sqfk-sec-figure img { max-width:100%; }
.sqfk-article #f01-item.sqfk-section .sqfk-sec-figure iframe { max-width:100%; }
.sqfk-article #f01-item .sqfk-section-h4:nth-child(2) .txt {  float:none; }
@media (min-width: 768px) {
	.sqfk-article #f01-item .sqfk-section-h4 .txt { float:left; width:35%; box-sizing:border-box; padding-top:50px; }
	.sqfk-article #f01-item .sqfk-section-h4 .sqfk-sec-figure { float:left; width:65%; box-sizing:border-box; margin:auto; }
	.sqfk-article #f01-item.sqfk-section .sqfk-sec-figure { padding:0; }
	.sqfk-article #f01-item.sqfk-section .sqfk-sec-figure img { max-width:100%; }
	.sqfk-article #f01-item.sqfk-section .sqfk-sec-figure iframe { max-width:100%; }
	.sqfk-article #f01-item .sqfk-section-h4:nth-child(2) .txt {  float:right; }
}

.f03.sqfk-level-sync ul li.sqfk-ls-li { width:100%; margin:0; padding:15px; box-sizing:border-box; }
.f03.sqfk-level-sync ul li.sqfk-ls-li:nth-child(2), .f03.sqfk-level-sync ul li.sqfk-ls-li:nth-child(3) { background-color:none; }
@media (min-width: 600px) {
	.f03.sqfk-level-sync ul li.sqfk-ls-li { width:50%; margin:0; padding:15px; box-sizing:border-box; }
	.f03.sqfk-level-sync ul li.sqfk-ls-li:nth-child(2), .f03.sqfk-level-sync ul li.sqfk-ls-li:nth-child(3) { background-color:#f5f5f5; }
}


@media only screen and (max-width: 854px) {
	.mobile_fix {display: block !important;box-sizing: border-box;width:80% !important;padding: auto !important; margin: auto !important; margin-bottom: 5px !important}	
	.sqfk-level-sync ul {width:94%;margin-left:3%;}
}

.sqfk-section p {font-size:16px!important;}
.sqfk-ls-li .label {color:#000000;font-size:15px!important;line-height:160%!important;}
.sqfk-ls-li p {color:#000000;font-size:15px!important;}
.sqfk-section p.p-narrow {font-size:15px!important;}

#home {background-image: url('../images/qnap_roon_main_banner.jpg');min-height:700px;background-attachment: fixed;background-size:cover;background-position: center!important;}
#home h2 {margin-top: 7%; font-size: 45px; color: #FFFFFF;}
#home h2 strong {font-weight:900;}
#roon {background:#FFFFFF url('../images/background_speaker_white.jpg') ;background-position: center center;background-size:cover;min-height:805px;}
#why {box-sizing: content-box;background: #000000 url(../images/background_speaker11.jpg)  left center;background-size:cover;background-attachment:fixed;min-height:805px;}
#features {background:#FFFFFF url('../images/background_headphone_white.jpg') left center;background-position: center center;background-size:cover;padding-bottom:100px;background-attachment:fixed;}
#efficient {box-sizing: content-box;background: #111111 url(../images/background_speaker_2.jpg) center bottom;background-size:cover;margin-bottom: 0px !important;padding-bottom:200px!important; min-height:900px;background-attachment:fixed;}
#setup {background:#ccc url('') left center;background-position: center center;background-size:cover;padding-bottom:0px;background-attachment:fixed;}

a.link_con {color:#e3271e;font-weight:700;} 
a.link_con:visited {color:#e3271e;} 
a.link_con:hover {color:#fe8300;} 
a.link_con:active {color:#fbfe00;}
#buy {
	background: #0086b2 url(./../images/qnap_product_bg.jpg);
	background-position: bottom center;
	background-attachment: fixed;
	background-size: cover;
}
#buy h3{
	color: #ffffff;
	width: 90%;
	font-size: 36px;
	font-weight: 900;
}
#buy h3 a {
    display: inline-block;
    font-weight: 500;
    line-height: 1.1em;
    font-size: 36px;
    font-family: 'Open Sans', arial, sans-serif;
    background: #ffffff;
    color: #0086b2;
    padding: 5px 20px !important;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 900;
}
#comparison .product-overview-table th,#comparison .product-overview-table td{
	text-align: center;
	font-size: 14px;
	width: 20%;
}
#comparison .product-overview-table .bold{
	font-weight: 900;
}
#comparison .product-overview-table td:first-child{
	font-weight: 900;
}
#comparison .product-overview-table .learn-more{
	font-weight: 500;
	line-height: 1.4em;
	font-size: 16px;
	background: #02a5e4;
	color: #ffffff;
	padding: 5px 15px;
	text-decoration: none;
	border-radius: 5px;
}
.arr-down {
    box-sizing: border-box;
    display: block;
    position: absolute;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #f7f7f7;
    height: 15px;
    width: 15px;
    left: 50%;
    margin-left: -18px;
    margin-top: -60px;
}