html {height: 100%;font-size: 15px}
body {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;min-height: 100%;position: relative;font-size: 15px;font-family: 'Open Sans', sans-serif;font-weight: 400;padding: 0;margin: 0;outline: none}
a {outline: none !important;text-decoration: none}
strong,
b {font-weight: 600}
li {list-style: none}
textarea:focus,
input[type=text]:focus,
input[type=password]:focus {outline: 0 none}
a:focus {outline: 0px}
img {max-width: 100%}
::selection {background: #ffd012;color: #000}
* {padding: 0;margin: 0;outline: none}
.offset-none {padding: 0}
.offset-left-none {padding-left: 0}
.offset-right-none {padding-right: 0}
main {overflow: hidden}
.header-row {width: 100%;position: absolute;top: 0;left: 0;z-index: 999;transition: all .3s ease 0s;border-bottom: solid 1px #323444;background: url(https://cdn.systweak.com/dpf/images/header-bg.png) repeat 0 0}
.header-row .navbar {padding: 7px 0;margin-bottom: 0;background: 0 0;border: none}
.header-row .navbar-brand {transition: all .3s ease 0s;margin: 0;padding: 0}
.header-row .navbar-brand {width: 192px;text-transform: uppercase;line-height: 16px;
  /* height: 43px; */
}
.header-row .navbar-brand b {color: #fff;font-size: 19px;font-weight: 600;margin-top: 7px;display: block}
.header-row .navbar-brand span {color: #d6d6d6;font-size: 14px;display: block}
.header-row .navbar-brand img {float: left;
  /* width: 43px;height: 43px; */
  margin-right: 8px;margin-top: 4px;}
.header-row .navbar span.mainistabcls {display: none}
.header-row .navbar span.mainistabcls.active {display: block}
.head-down-btn {float: right;background: #0082f0;color: #fff;font-size: 12px;font-weight: 600;text-transform: uppercase;text-decoration: none !important;padding: 9px 19px;margin-left: 20px;margin-top: 8px;border-radius: 3px; border: none;}
.head-down-btn:hover {color: #fff;background: #008aff}
.header-row.affix {background: #000;position: fixed;box-shadow: 0 0 6px rgba(0, 0, 0, .5)}
.header-row.affix .logo {margin: 12px 0;transition: all .3s ease 0s}
.header-row.affix .logo .img-logo {width: 190px}
li.divider {
  color: #c5c7da;
}
.bg-new{background-color: #f3f9fb;
  /* -webkit-box-shadow: 0 1px 0 rgba(43,43,88,.1);
  box-shadow: 0 1px 0 rgba(43,43,88,.1) */
}

  .art-ban {
    width: 100%;
    margin: 0 auto;
    padding: 64px 0 8px 0;
    text-align: center;
}
#tp-banner .userInfo {
  font-size: 14px;
  padding-bottom: 40px;
  padding-top: 24px;
}
.userInfo .userPic {
  max-width: 32px;
  max-height: 32px;
  border-radius: 50%;
  margin-right: 1rem;
}
.userInfo .userName {
  margin-right: 1rem;
  color: #1e1e3e;
}
.userInfo svg {
  margin-bottom: 4px;
}
.userInfo .update {
  margin: 0 2rem 0 0.5rem;color: #1e1e3e;
}
.userInfo svg {
  margin-bottom: 4px;
  vertical-align: middle;
}
.userInfo {
  margin-top: 42px;
}
span.st-img {
  display: inline-block;
  vertical-align: middle;
  margin: -15px 0 0 0;
}
.arti-ban-h {
  font-size: 40px;
  font-weight: 700;
  line-height: 36px;
  margin: 0;
  padding: 0;color: #1e1e3e;
}
.article-ban { min-height: 278px;  padding-top: 58px; padding-bottom: 15px; }

@media(max-width:1199px) {
.header-row.affix {    position: absolute;}
}
@media(max-width:991px) {
  .head-down-btn {margin-top: 11px;}
.container,.container2 { width: 750px }
.head-down-btn { display: block !important }
.header-row .navbar-brand.logo { margin: 11px 0 10px; width: 216px }
.header-row.affix .navbar-brand.logo { margin: 10px 0 10px; width: 150px }
.header-row.affix .logo .img-logo { max-width: 100% }
.header-row .navbar-brand { /*height: 35px;*/ margin-top: 4px }
.header-row .navbar-brand .img-logo { width: 35px; height: 35px; margin-right: 4px }
.header-row .navbar-brand b { font-size: 14px; line-height: 12px; margin-top: 5px }
.header-row .navbar-brand span { font-size: 11px }
.arti-ban-h {
  font-size: 28px;
  font-weight: 800;
  line-height: 18px;
}
.art-ban {
padding: 25px 0 0 0;
}
.article-ban {
  min-height: 235px;
  padding-top: 58px;
}
}

@media (max-width:767px) {
  
.container,.container2 { width: 540px; overflow: hidden }
.header-row.affix { position: relative }
.navbar.navbar-default { border: none; box-shadow: none; min-height: inherit; margin: 0 -15px; padding: 0 }
.header-row .navbar-brand .img-logo { width: 35px; height: 35px; margin-right: 4px }
.header-row .navbar-brand b { font-size: 14px; line-height: 12px; margin-top: 5px }
.header-row .navbar-brand span { font-size: 11px }
.navbar-default .navbar-brand { color: #fff; margin: 9px 0 6px 15px }
.nav.navbar-nav { padding: 0; float: none; margin: 0; background: #000;box-shadow: 0 4px 8px 0 rgba(15,18,32,.20); }
.head-down-btn{margin-top: 15px; margin-left: 0px; margin-right: 15px;}
.arti-ban-h {
  font-size: 20px;
  
}
.userInfo {
  margin-top: 20px;
}
.userInfo .userPic {
  max-width: 25px;
  max-height: 25px;
  border-radius: 50%;
  margin-right: 5px;
}
.userInfo .userName {
  margin-right: 15px;
  font-size: 13px;
}
.userInfo .update {
  margin: 0 0 0 10px;
  font-size: 13px;
}
span.st-img {

  margin: 0px 0 0 0;
}
span.st-img img {
  width: 77%;
}
}
@media(max-width:480px){
    a.arti-ban-btn.spc {
        margin-left: 3px !important;
    } 
}
@media(max-width:414px){
a.arti-ban-btn.spc {margin-left: 0px !important;}

}

.header-row {background: #000;
  -webkit-box-shadow: 0 4px 8px 0 rgba(15,18,32,.07);
  box-shadow: 0 4px 8px 0 rgba(15,18,32,.07); 

  /* -webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.7);
-moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.7);
box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.7); */

  border-bottom: 0;}

.hct { background: url(https://cdn.systweak.com/dpf/images/hct-banner.jpg) center top no-repeat; background-size: cover; }
.hct .article-ban-col { color: #ffffff;} 
.article-ban-col { max-width: 550px/*460px*/; padding-top: 60px; color: #000000;}


.arti-ban-sh { font-size: 16px; font-weight: 800; line-height: 20px; margin-bottom: 17px; }
.article-ban-col p { font-size: 16px; line-height: 24px; }
.arti-ban-btn { display: block; float: left; margin-top: 8px;}
.article-mid-row { padding: 30px 0 30px 0; color: #000000; }
.art-bg-new { }

.article-mid-row.art-bg-new p { color: #1e1e3e; line-height: 28px; }
.article-mid-row.art-bg-new .container { max-width: 1000px; } 
.article-ban.bg-new { background:#f8f8f8; } 
.article-mid-row.art-bg-new h3, 
.article-mid-row.art-bg-new p span.bold-text,
.article-mid-row.art-bg-new p.bold-text {color:#26324b; font-weight: 600;}
h3.child-heading { font-weight: 400!important;}

.article-ban.bg-new .art-ban { padding: 36px;}
.article-ban.bg-new .arti-ban-h { padding: 5px 5%; line-height: 46px; color:#26324b; font-weight: 600;}
.article-ban.bg-new .art-ban p { font-size: 18px; line-height: 24px; color: #26324b; padding: 15px 14%; } 
.art-ban-btn { width: 100%; text-align: center;}
.art-ban-btn .ban-btn-Win,
.art-ban-btn .ban-btn-Mac{display:inline-block; background-color:#0082f0; border:2px solid #0082f0; color:#fff !important; height: 60px; line-height: 54px; min-width:180px; padding: 0 20px; text-decoration:none !important;box-sizing: border-box;text-align: center;transition: all 0.5s;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;margin: 6px 16px;}
.btn-text { font-size: 18px; font-weight: 500;} 
.art-ban-btn .ban-btn-Win:hover,
.art-ban-btn .ban-btn-Mac:hover { background-color: #0072d2; border-color: #0072d2; }
.art-ban-btn .ban-btn-Win .btn-icon img,
.art-ban-btn .ban-btn-Mac .btn-icon img { margin-left: 12px; margin-top: -5px; }
.art-ban-btn p { font-size: 14px!important; padding: 0 0!important;}
.art-ban-btn .btn-col {display: inline-block;}

.article-mid-row .art-head-title {color: #26324b; font-size: 24px; font-weight: 600; line-height: 28px;margin-top: 20px;
  margin-bottom: 10px;}
.article-mid-row .sub-heading {margin: 0 0 20px;color: #1e1e3e;line-height: 28px;font-size: 16px;font-weight: 600;}
.article-mid-row .child-heading {margin: 0 0 20px;color: #1e1e3e;line-height: 28px;font-size: 16px;font-weight: 400;}
.article-mid-row .child-heading .bold-text{ font-weight: 600;}

.article-mid-row p { font-size: 16px; line-height: 26px; margin-bottom: 20px; }
.article-mid-row a { color: #1787ff; text-decoration: underline; } 
.article-mid-row ol { display: block;  margin: 0 0 15px 15px;  }
.article-mid-row ol li {  list-style: inherit; color: #1e1e3e; font-size: 16px; line-height: 26px; margin-bottom: 12px; padding-left: 5px; }  
.bold-text { font-weight: 800;}
.article-ss { margin-bottom: 30px; text-align: center; }
.article-ss img { max-width: 100%;} 
.pft-info { padding-left: 10%; padding-right: 10%; ;}
 a.arti-ban-btn.spc {margin-left: 15px;}

 
 .tpr-row {text-align: center; font-size: 14px; line-height: 24px; font-weight: 400; margin-bottom: 21px; margin-top: 30px; }
 .tpr-row img { margin-top: -8px;}
 .tpr-gt { padding-left: 5px; padding-right: 5px;  font-size: 15px;  font-weight: 600; color: #000000;  } 
.tpr-rev { padding-left: 5px; color: #000000; font-size: 14px;   } 


.user-saying {padding-top: 30px;padding-bottom: 30px;background: #f8f8f8; border: #e7e7e7 solid 1px; }
.user-saying h5 {color: #26324b;font-size: 34px;line-height: 40px;text-align: center;font-weight: 600; }
ul.user-saying-list {display: block;width: 100%;float: left;margin: 10px 0 0 0;}
ul.user-saying-list li {display: block;width: 27%;float: left;text-align: center;margin-top: 10px;}
ul.user-saying-list li.middle {width: 37%;margin-left: 4.5%;margin-right: 4.5%;padding-left: 2.5%;padding-right: 2.5%;}
ul.user-saying-list li p {font-style: italic;margin-top: 10px;  font-size: 17px; line-height: 24px; color: #26324b;}
ul.user-saying-list li p span {font-size: 16px;font-style: normal;color: #0ba8f9;line-height: 20px;font-weight: 600;}
ul.user-saying-list1 li p {font-size: 15px;line-height: 24px;color: #707070;font-style: normal;margin-top: 10px;position: relative;padding-left: 15px;}
ul.user-saying-list1 li p::after {content: "";position: absolute;top: 8px;left: 0;width: 7px;height: 7px;border-radius: 7px;background: #888;}
ul.user-saying-list1 li {display: block;width: 28%;float: left;text-align: center;margin-top: 10px;}



.why-col-ss { width: 100%; padding: 26px 0 42px 0; text-align: center;}

 @media (max-width: 1299.98px) { 
  .article-ban.bg-new .arti-ban-h,
  .article-ban.bg-new .art-ban p { padding-left:5%; padding-right: 5%;}

 } 

 @media (max-width: 1279.98px) { 

  ul.user-saying-list li {display: block;width: 28%;float: left;text-align: center;margin-top: 10px;}
 ul.user-saying-list li.middle {width: 36%;margin-left: 4%;margin-right: 4%;padding-left: 4%;padding-right: 4%;}
 
 }

@media (max-width: 991.98px) {
.article-ss img { max-width: 90%; height: inherit;}
.article-ban {   background-position: 40% top; } 

.article-ban.bg-new .arti-ban-h { font-size: 36px;}
.article-ban.bg-new .arti-ban-h,
.article-ban.bg-new .art-ban p { padding-left:0; padding-right: 0;}
.article-ban.bg-new .art-ban { padding: 20px 0;}
.header-row .navbar span.mainistabcls { display: block;}

ul.user-saying-list li {display: block;width: 32%;float: left;text-align: center;margin-top: 10px;}
ul.user-saying-list li.middle {width: 36%;margin-left: 0%;margin-right: 0%;padding-left: 4%;padding-right: 4%;}

.why-col-ss { padding:10px 0 20px 0;}
.why-col-ss img { max-width: 100%; height: inherit;}

 }

 @media (max-width: 767.98px) {  
.article-ban {   background-position: 20% top; min-height: inherit; padding-bottom: 40px; } 
.article-ban-col { padding-top: 0px;}

.article-ban.bg-new  { padding-bottom: 10px;}
.article-ban.bg-new .arti-ban-h { font-size: 26px; line-height: 32px; }
.article-ban.bg-new .art-ban p { font-size: 16px;}
.art-ban-btn p { font-size: 12px!important;}
.art-ban-btn .ban-btn-Win, .art-ban-btn .ban-btn-Mac { height: 52px; line-height: 46px;}

.user-saying h5 { font-size: 26px; line-height: 32px; }
ul.user-saying-list li {display: block;width: 100%;float: left;text-align: center;margin-top: 10px;}
ul.user-saying-list li.middle {width: 100%;margin-left: 0%;margin-right: 0%;padding-left: 0%;padding-right: 0%;}

  }

@media only screen and (max-width: 479.98px) {  
.arti-ban-h { font-size: 28px; line-height: 32px; }
.arti-ban-sh { margin: 5px 0 10px 0; }

.btn-text { font-size: 16px; }
.article-ban.bg-new .arti-ban-h { font-size: 22px; line-height: 30px;}


} 
   
.footer {background: #2a2c38;padding: 12px 0 15px}
.copy-right-row {padding-top: 14px}
.foo-btm-lk {overflow: hidden;margin: 28px 0 0}
.foo-copy-right-col {color: #c5c7da;font-size: 14px;line-height: 20px;padding: 12px 0 0;text-align: center;}
.footer-single .foo-copy-right-col {padding: 0}
.list-nav {width: 100%;margin: 0;padding: 0; text-align: center;}
.list-nav ul{ list-style: none; display: inline-block; margin: 0; padding: 0;}
.list-nav ul li{ list-style: none; display: inline-block; margin: 0; padding: 0;}
.list-nav ul li a{ list-style: none; display: inline-block; margin: 0; padding: 0 10px; color: #c5c7da; font-size: 14px; line-height: 28px;}
.list-nav ul li a:hover,.list-nav ul li a.active { text-decoration: none; color: #0082f0;}
@media only screen and (max-width:1199px) {
.footer {padding: 0px 0 10px}
.copy-right-row {padding-top: 10px}   
}

@media (max-width:991px) {
.container,.container2 {width: 750px} 
.foo-copy-right-col{font-size: 12px;} 
.list-nav ul li a{font-size: 12px;}
}
.return-to-top{ background:rgba(0,0,0,.5);position:fixed;z-index:999;bottom:140px;right:20px;transition:bottom .4s;width:50px;height:50px;text-decoration:none;border-radius:35px;display:none;-webkit-transition:.3s linear;-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s;cursor:pointer; border: none;}
/* img.scroll-tp {margin-left: 5px;margin-top: 5px;} */
@media only screen and (max-width:767px) {
.container,
.container2 {width: 540px}
.footer {padding: 0px 0 10px}
.foo-copy-right-col{float: none; text-align: center;}
.list-nav{text-align: center;}   
}

@media only screen and (max-width:575px) {
.container,.container2 {width: auto}
}

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

/** Cookies-policy **/
.cookies { font-size: 12px; line-height: 1.3; position: fixed; z-index: 2147483647; width: 240px; right: 7px; bottom: 7px; color: #666; padding: .75rem; border: 1px solid #eee; border-radius: .25rem; background: rgba(255, 255, 255, .9);box-sizing: border-box;  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .3);}
.cookies div {  padding: .25rem;  margin-bottom: .5rem; }
.cookies div a { color: #1d3784;  }
.cookies div a:hover {  color: #0e6aa9; }
.cookies .got-it {  font-weight: 700; text-align: center; text-decoration: none; width: 7rem;  padding: .35rem; margin: auto; background: #e7e9ef;  color: rgb(68, 64, 64);border: 1px #e7e9ef solid;display: block; cursor: pointer; border-radius: 3px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .3); transition: all .5s; }
.cookies .got-it:hover { color: rgb(68, 64, 64);border: 1px rgb(17, 16, 16) solid; box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .4); }
@media(max-width:825px) {
.cookies { text-align: center; }
}

@media(max-width:767px) { 
.cookies { width: 100%; right: 0px; border-radius: 0px; bottom: 0px;} 
.cookies div { width: 75%; float: left; text-align: left; margin-bottom: 0px; padding: 0px;}
.cookies .got-it { float: right; max-width: 90px;} 
.return-to-top { bottom: 80px!important;}
}

@media(max-width:479px) { 
.cookies .got-it { width: 70px;}
.return-to-top { bottom: 110px!important;}
.header-row .navbar-brand{width: 160px;}
.header-row .navbar-brand img{ height: auto;}
.mclg{margin-top: 2px;}
.head-down-btn{padding: 9px 13px;} 
.navbar-default .navbar-brand.mac{ margin: 10px 0 5px 15px;}
.tpr-row { padding-left: 5%; padding-right: 5%; }
}