html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, textarea, input, button { margin: 0; padding: 0; }
ul { list-style: none; margin: 0; padding: 0; }
ul li { list-style: none; margin: 0; padding: 0; }
img { vertical-align: middle; border: none; }
a { text-decoration: none; }
a:hover { text-decoration: none; }
.clear { clear: both; float: none; }
.fleft { float: left; }
.fright { float: right; }
.wrapper { margin: 0 auto; width: 100%; max-width: 960px; box-sizing: border-box; padding: 0 16px; }
body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #4f4f4f; }
.main { padding-top: 100px; }
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Brand wise top background ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*34535345*/

.rapidmain { background: url(../images/rapidtopbg2.png) repeat-x; }
.certummain { background: url(../images/certumtopbg.png) repeat-x; }
.comodomain { background: url(../images/comodotopbg.png) repeat-x; }
.sectigomain { background: url(../images/sectigotopbg.png) repeat-x; }
.cwatchmain { background: url(../images/cwatchbg.png) repeat-x; }
.geotrustmain { background: url(../images/geotopbg.png) repeat-x; }
.symantecmain { background: url(../images/symantectopbg.png) repeat-x; }
.thawtemain { background: url(../images/thawtetopbg.png) repeat-x; }
.digicertmain { background: url(../images/digicerttopbg.png) repeat-x; }
.headerbox { border: 1px solid #CCC; padding: 21px 40px; background: #FFF; }
.headerbox .logo { float: left; }
.headerbox h1.headone { float: right; font-size: 37px; font-family: Georgia, Constantia, serif; color: #000; line-height: 74px; text-align: right; }
.headerbox h1.headtwo { float: right; font-size: 37px; font-family: Georgia, Constantia, serif; color: #000; line-height: 39px; text-align: right; }
.headerbox h1.headtwo span{display: block; font-size: 24px; line-height: 1;}
.content-inner { padding: 40px; }
.content h1 { font-size: 43px; font-family: Georgia, Constantia, serif; color: #000; margin-bottom: 10px; }
.content h2 { font-size: 30px; font-family: Georgia, Constantia, serif; color: #4f4f4f; margin-bottom: 25px; line-height: 36px; }/*171014*/
.cols .col-lt { width: 560px; float: left; max-width: 100%; }
.cols .col-rt { width: 280px; float: right; max-width: 100%; }
.col-lt p.common { line-height: 26px; }
.col-lt .common + .common { margin-top: 20px; }
.prosummary { padding-top: 40px; }
.prosummary h2 { font-size: 26px; font-family: Georgia, Constantia, serif; color: #4f4f4f; margin-bottom: 15px; letter-spacing: -0.031em;}
.prosummary .proraw { height: 50px; background: #dddddd; }
.prosummary .proraw:nth-child(2n+1) { background: #FFF; }
.prosummary .proraw p { padding: 0 20px; line-height: 50px; font-size: 18px; float: left; box-sizing: border-box;}
.prosummary .proraw p.prolt { font-weight: bold; width: 50%;}
.prosummary .proraw p.prort { text-align: right; width: 50%;}
.siteseal-decp { border: 1px solid #CCC; padding: 20px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; }
.siteseal-decp h3 { font-size: 25px; color: #4f4f4f; padding-bottom: 15px; font-family: Georgia, Constantia, serif; }
.warranty-validation { padding-top: 23px; border-top: 1px solid #CCC; margin-top: 23px; }
.warranty-validation p { font-family: Georgia, Constantia, serif; font-size: 25px; font-weight: bold; }
.warranty-validation span { font-family: Georgia, Constantia, serif; font-size: 38px; display: block; font-weight: bold; margin-top: 10px; }
.footer .footer-inner { padding: 35px 40px; }
.footer .footer-inner h2 { font-size: 30px; font-family: Georgia, Constantia, serif; color: #FFF; margin-bottom: 19px; }
.footer .footer-inner p { line-height: 26px; color: #FFF; margin-bottom: 15px;}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Brand wise Footer background ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.rapidmain .footer { background: #379535; }
.certummain .footer { background: #2f2f2f; }
.comodomain .footer { background: #5f6062; }
.sectigomain .footer { background: #5f6062; }
.geotrustmain .footer { background: #006cb3; }
.symantecmain .footer { background: #2f2f2f; }
.thawtemain .footer { background: #0c51a1; }
.digicertmain .footer { background: #1974bb; }
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Accordian ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.proaccordingwrap { margin: 21px 0 0 0; }
.accordingdetails { border-bottom: solid 1px #dfddde; margin: 0 0 20px 0; }
.col { width: 693px; float: left; margin-bottom: 16px; max-width: 100%; }
.expahd { margin: 0; font-family: Georgia, Arial, Tahoma !important; }
.expahd a { display: block; padding: 4px 0 3px 20px; margin: 0; text-decoration: none; color: #24336c; font-size: 24px; font-weight: bold; }
.expahd:hover { background:#fff; color: #FFF !important; }
.expahd h2 { margin: 0; font-family: Georgia, Arial, Tahoma !important; font-size: 22px; line-height: 32px; }
.expahd.open { color: #FFF !important; font-family: Georgia, Arial, Tahoma !important; font-size: 32px; padding-bottom: 6px; padding-top: 6px; }
.expahd.open a { color: #FFF !important; font-size: 29px; padding-bottom: 5px; text-decoration: none; }
.expahd.open a:hover { color: #FFF; }
.expahd.open h2 { margin: 0; font-family: Georgia, Arial, Tahoma !important; font-size: 29px; line-height: 34px; color: #fff; }
.expahd.open h2 a { color: #FFF; font-size: 32px; line-height: 29px; padding-bottom: 5px; text-decoration: none; }
.expahd.open h2 a:hover { color: #FFF; }
#css3-animated-example .expahd + div.collatxt { height: 0px; padding: 0px; overflow: hidden; background: #fff; color: #4f4f4f; display: block!important; 
	-webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }
#css3-animated-example .content { border: solid 1px #dfddde; border-top: none; border-bottom: none; color: #4f4f4f; }
#css3-animated-example .content p { font-family: Arial, Tahoma, "Times New Roman"; font-size: 15px; line-height: 26px; }
#css3-animated-example .content p a { color: #4f4f4f; text-decoration: underline; font-weight: bold; }
#css3-animated-example .content p a:hover { color: #4f4f4f; text-decoration: none; }
#css3-animated-example .content .aniwrap { padding: 20px 39px 20px 39px; }
#css3-animated-example .content .aniwrap .imgicon { width: 130px; float: left; }
#css3-animated-example .content .aniwrap .thetxtbox {float: left; display: block; clear:both;}
#css3-animated-example .content .aniwrap .thetxtbox + .thetxtbox { margin-top: 20px; }
#css3-animated-example .content .aniwrap .sealtxt {width: 640px; float: left; display: block; padding-left: 30px; max-width: 100%; box-sizing: border-box;}
#css3-animated-example .content .aniwrap h3{font-family: Georgia, Constantia, serif; font-size:20px; margin:20px 0 10px 0;}/*07-03-2016 NEW*/
/*#css3-animated-example .content .aniwrap .thetxtbox p{margin-bottom:15px; margin-top:0px !important;}*/
#css3-animated-example .expahd.open + div { height: auto; background: #fff; }
.marbtm{margin-bottom:15px;}

.wid50per{width: 50%; float: left !important; clear:none !important;margin-top: 20px !important;}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Brand wise accordian background ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.rapidmain .expahd { background: url(../images/rapidcollaseimghover.png) no-repeat left top; }
.rapidmain .expahd.open { background: url(../images/rapidexpandimg.png) no-repeat left 5px #379535; }
.certummain .expahd { background: url(../images/certumcollaseimghover.png) no-repeat left top; }
.certummain .expahd.open { background: url(../images/certumexpandimg.png) no-repeat left 5px #2f2f2f; }
.comodomain .expahd { background: url(../images/comodocollaseimghover.png) no-repeat left top; }
.comodomain .expahd.open { background: url(../images/comodoexpandimg.png) no-repeat left 5px #5f6062; }
.sectigomain .expahd { background: url(../images/sectigocollaseimghover.png) no-repeat left top; }
.sectigomain .expahd.open { background: url(../images/sectigoexpandimg.png) no-repeat left 5px #5f6062; }
.geotrustmain .expahd { background: url(../images/geotrustcollaseimghover.png) no-repeat left top; }
.geotrustmain .expahd.open { background: url(../images/geotrustexpandimg.png) no-repeat left 5px #006cb3; }
.symantecmain .expahd { background: url(../images/symanteccollaseimghover.png) no-repeat left top; }
.symantecmain .expahd.open { background: url(../images/symantecexpandimg.png) no-repeat left 5px #2f2f2f; }
.thawtemain .expahd { background: url(../images/thawtecollaseimghover.png) no-repeat left top; }
.thawtemain .expahd.open { background: url(../images/thawteexpandimg.png) no-repeat left 5px #0c51a1; }

.digicertmain .expahd { background: url(../images/digicertcollaseimghover.png) no-repeat left top; }
.digicertmain .expahd.open { background: url(../images/digicertexpandimg.png) no-repeat left 5px #1974bb; }
/**/
.proliwrap { width: 50%; float: left }
.prolists { margin: 0; padding: 0; float: left }
.prolists ul { margin: 0 0 0 10px; padding: 0; list-style-type: none!important }
.prolists li {/* background: url("../images/icon-checkmark.png") no-repeat scroll left 3px transparent; */ color: #4f4f4f; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 26px; margin: 0; padding: 0 0 5px 25px; list-style-type: none; }
.prolists li span { padding: 3px 5px 0 0 }
.prolists li a { color: #4f4f4f; text-decoration: underline }
.prolists li a:hover { color: #4f4f4f; text-decoration: none }
.rapidmain .prolists li { background: url(../images/icon-rapidssl.png) no-repeat left 5px; }
.certummain .prolists li { background: url(../images/icon-certum.png) no-repeat left 5px; }
.comodomain .prolists li { background: url(../images/icon-comodo.png) no-repeat left 5px; }
.sectigomain .prolists li { background: url(../images/icon-sectigo.png) no-repeat left 5px; }
.geotrustmain .prolists li { background: url(../images/icon-geotrust.png) no-repeat left 5px; }
.symantecmain .prolists li { background: url(../images/icon-symantec.png) no-repeat left 5px; }
.thawtemain .prolists li { background: url(../images/icon-thawte.png) no-repeat left 5px; }
.digicertmain .prolists li { background: url(../images/icon-digicert.png) no-repeat left 5px; }
.topbdrbrwsr { background: #dfddde; border-top: 1px solid #dfddde; }
.probrowrap { margin: 0; width: 100%; }
#css3-animated-example .probrowrap .prowraphds { color: #2a2e6c; font-family: Georgia, Constantia, serif; font-size: 28px; line-height: 28px; margin: 0 0 16px; font-weight: bold; }
.probrowrap .browbox { float: left; padding: 0 0 0 25px; width: 208px; }
.probrowrap .browbox li { color: #4f4f4f; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 34px; list-style-image: none; list-style-position: outside; list-style-type: none !important; margin: 0; padding: 0 0 0 30px; }
.prochrome { background: url("../images/prochrome.png") no-repeat left 5px; }
.proopera { background: url("../images/proopera.png") no-repeat left 5px; }
.prosafari { background: url("../images/prosafari.png") no-repeat left 5px; }
.profirefox { background: url("../images/profirefox.png") no-repeat left 5px; }
.pronetscap { background: url("../images/pronetscap.png") no-repeat left 5px; }
.proie { background: url("../images/proie.png") no-repeat left 5px; }
.proaol { background: url("../images/proaol.png") no-repeat left 5px; }
.notesml { font-family: Arial, Helvetica, sans-serif; font-size: 14px !important; line-height: normal; padding: 5px 0 15px; color:#808080;}

.notetxt { font-family: Arial, Helvetica, sans-serif; font-size: 14px !important; color:#4f4f4f; background: #ffffcc; padding:10px 15px; margin-bottom: 20px; line-height: 26px;}
.notetxt a{ text-decoration: underline; color:#CC0C0F;} 
.notetxt a:hover{ text-decoration: none;}

.mainpage p{padding: 11px 0 7px 0 !important;}
.contentwapper p{line-height: 26px;}
.contentwapper p + p{margin-top: 15px;}
.contentwapper h3{font-size: 24px; font-family: Georgia, Constantia, serif; color: #4f4f4f; margin: 25px 0 15px 0; line-height: 1;}

.content h2.cwsubhead{font-size: 27px;}

.cgaccordians .prolists.wid50per{margin-top: 0 !important;}
.cgaccordians .prolists {margin-top: 15px;}

.aniwrap figure img{width: 100%;}
.aniwrap figcaption {background: #ededed; padding: 15px; font-style: italic;text-align: left; font-size: 13px}


.table-bordered {width: 100%;}
.table-bordered th {background: #1b75bc; color: #fff; padding: 20px 5px; font-size: 15px; text-align: center; }
.table-bordered tr:nth-child(2n+1) {background: #e1e3ef;}
.table-bordered td {padding: 15px;}
.table-bordered td + td{text-align: center;}

.sitelock {position: relative;}
.sitelock:after{content:""; background-color: #e41e2e; height: 130px; width: 100%; position: absolute; left: 0; top: 0; z-index: -1;}
.sitelock .common p{margin-bottom: 15px;}
.sitelock .headerbox{display: flex; justify-content: space-between; align-items: center;}
.sitelock p{line-height: 26px;}
.sitelock .common ul{margin: 20px 0 20px 30px;}
.sitelock .common ul li{margin-bottom: 10px; background: url("../images/checkmarkicon.svg") no-repeat; padding-left: 30px;}
.sitelock .table-bordered th{background-color: #e41e2e;}
.sitelock .expahd {background: url(../images/sitelockimghover.png) no-repeat left top;}
.sitelock .expahd.open {background: url(../images/cg-expandimg.png) no-repeat left 5px #000;}
.sitelock .prolists li{position: relative;}
.sitelock .prolists li:before{content: ''; background-color: #e41e2e; width: 10px; height: 10px; position: absolute; left: 0; border-radius: 50%; top: 8px;}
.sitelock .prolists{float: none;}
.sitelock .prolists + .prolists{margin-top: 20px;}
.sitelock .prolists p{margin-bottom: 10px;}
.sitelock .footer {background-color: #000;}
.sitelock .footer p{margin-bottom: 0;}

.cg-backup:after{background-color: #00af74;}
.cg-backup .table-bordered th{background-color: #00af74;}
.cg-backup .expahd {background: url(../images/cg-collaseimghover.png) no-repeat left top;}
.cg-backup .prolists li:before{background-color: #00af74;}

.tooltip{position: relative; cursor: pointer;}
.tooltip .tooltiptext {visibility: hidden; width: 200px; background-color: #000000; color: #fff; text-align: center; padding: 5px 0; border-radius: 3px; position: absolute; z-index: 1;
bottom: 100%; left: 50%; margin-left: -110px;}
.tooltip:hover .tooltiptext {visibility: visible; font-size: 12px; padding: 10px;}
.tooltip .tooltiptext:after {content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #000000 transparent transparent  transparent;}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Responsive Overrides (added by Muhajir) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* === BASE: wrapper tidak overflow === */
* { box-sizing: border-box; }

.main .wrapper {
  width: 100% !important;
  max-width: 960px !important;
  padding: 0 16px !important;
}

/* Header box responsive */
.headerbox {
  padding: 16px 20px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.headerbox .logo { float: none !important; }
.headerbox .logo img { max-width: 180px; width: 100%; height: auto; }
.headerbox h1.headone {
  float: none !important;
  font-size: 26px !important;
  line-height: 1.3 !important;
}
.headerbox h1.headtwo {
  float: none !important;
  font-size: 26px !important;
  line-height: 1.3 !important;
}

/* cols: flex wrap */
.cols {
  display: flex !important;
  flex-wrap: wrap;
  gap: 20px;
}
.cols .col-lt {
  width: auto !important;
  float: none !important;
  flex: 1 1 300px;
  min-width: 0;
}
.cols .col-rt {
  width: auto !important;
  float: none !important;
  flex: 0 1 240px;
  min-width: 180px;
}

/* Accordion col full width */
.col {
  width: 100% !important;
  float: none !important;
}

/* Sealtxt tidak overflow */
#css3-animated-example .content .aniwrap .sealtxt {
  width: auto !important;
  float: none !important;
  padding-left: 16px !important;
  display: block;
}
#css3-animated-example .content .aniwrap .imgicon {
  float: left;
  margin-right: 0;
}

/* content-inner padding */
.content-inner { padding: 24px 0 !important; }

/* ===== ORDER NOW SECTION ===== */
.ordernow-section {
  background: #f5f5f5;
  border-top: 3px solid #379535;
  padding: 40px 0;
}
.ordernow-inner { padding: 0 40px; }
.ordernow-inner h2 {
  font-size: 30px;
  font-family: Georgia, Constantia, serif;
  color: #4f4f4f;
  margin-bottom: 25px;
  text-align: center;
}
.ordernow-pricing {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.price-box {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 25px 30px;
  text-align: center;
  min-width: 160px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  transition: box-shadow 0.2s;
}
.price-box:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.12); }

/* Saving text di bawah harga — height tetap agar tombol Order Now sebaris */
.price-saving {
  font-size: 13px;
  font-weight: bold;
  color: #e41e2e;
  height: 18px;
  line-height: 18px;
  margin-bottom: 16px;
}
.price-cycle {
  font-size: 16px;
  font-weight: bold;
  color: #4f4f4f;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.price-amount { margin-bottom: 6px; }
.price-currency {
  font-size: 16px;
  color: #379535;
  font-weight: bold;
  vertical-align: top;
  line-height: 36px;
}
.price-value {
  font-size: 30px;
  font-weight: bold;
  color: #379535;
  font-family: Georgia, Constantia, serif;
}
.btn-ordernow {
  display: inline-block;
  background: #379535;
  color: #fff !important;
  padding: 10px 24px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: bold;
  text-decoration: none !important;
  transition: background 0.2s;
}
.btn-ordernow:hover { background: #2a7428; color: #fff !important; }

/* ===== MOBILE ≤ 768px ===== */
@media screen and (max-width: 768px) {

  .main { padding-top: 0 !important; }

  /* Wrapper full width */
  .wrapper,
  .main .wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px !important;
  }

  /* Header */
  .headerbox {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 12px !important;
    gap: 6px;
  }
  .headerbox h1.headone,
  .headerbox h1.headtwo {
    text-align: left !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
  }
  .headerbox .logo img { max-width: 130px; }

  /* Content */
  .content-inner { padding: 16px 0 !important; }
  .content h1 { font-size: 22px !important; }
  .content h2 { font-size: 17px !important; margin-bottom: 12px !important; }

  /* Cols stack vertical */
  .cols { flex-direction: column !important; gap: 16px; }
  .cols .col-lt,
  .cols .col-rt {
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* Product summary */
  .prosummary .proraw p { font-size: 14px !important; line-height: 40px !important; }
  .prosummary h2 { font-size: 20px !important; }

  /* Warranty */
  .warranty-validation span { font-size: 28px !important; }
  .warranty-validation p { font-size: 18px !important; }

  /* Accordion */
  .expahd a { font-size: 16px !important; padding: 6px 0 5px 16px !important; }
  .expahd h2 { font-size: 15px !important; line-height: 26px !important; }
  .expahd.open h2 { font-size: 17px !important; }
  #css3-animated-example .content .aniwrap { padding: 14px 12px !important; }
  #css3-animated-example .content p { font-size: 13px !important; line-height: 22px !important; }
  #css3-animated-example .content .aniwrap .sealtxt {
    width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    margin-top: 10px;
  }
  #css3-animated-example .content .aniwrap .imgicon {
    float: none !important;
    width: auto !important;
    display: block;
    margin-bottom: 10px;
  }

  /* Footer */
  .footer .footer-inner { padding: 20px 0 !important; }
  .footer .footer-inner h2 { font-size: 20px !important; }
  .footer .footer-inner p { font-size: 13px !important; }

  /* Order Now */
  .ordernow-section { padding: 20px 0; }
  .ordernow-inner { padding: 0 12px !important; }
  .ordernow-inner h2 { font-size: 18px !important; margin-bottom: 14px !important; }
  .ordernow-pricing { gap: 10px; }
  .price-box {
    flex: 1 1 calc(33% - 10px);
    min-width: 90px;
    padding: 14px 8px !important;
  }
  .price-saving {
    font-size: 10px !important;
    height: 14px !important;
    line-height: 14px !important;
  }
  .price-cycle { font-size: 11px !important; margin-bottom: 8px !important; }
  .price-value { font-size: 20px !important; }
  .price-currency { font-size: 11px !important; line-height: 24px !important; }
  .btn-ordernow { padding: 7px 10px !important; font-size: 12px !important; }

}

/* ===== VERY SMALL ≤ 400px ===== */
@media screen and (max-width: 400px) {
  .price-box { flex: 1 1 calc(50% - 10px); }
  .price-value { font-size: 17px !important; }
}