.hero { background-image: url(/static/cdgs/product_content/family/hero.jpg); position: relative; background-repeat: no-repeat; background-position: center; background-color: #0d1230; background-size: cover; color: #fff; height: 420px; }
.hero p { font-size: 20px }
.column { background: #fff; padding: 38px 0 0; border: 1px solid #d3d3d3; border-radius: 10px; position: relative; }
.prod-icon { max-width: 45px; margin: 10px auto; }
.column .type, .column h3 { font-size: 16px; color: #000; font-weight: 500; margin: 0; padding: 0 10px; }
.column p { font-size: 14px; margin: 10px; line-height: 1.3; }
.column p.desc { margin-bottom: 15px;min-height: 50px; }
.column a {font-size: 16px; margin-bottom: 20px; display: block }
.fr .column p.desc {min-height: 54px; }
.ru .column p.desc {min-height: 54px; }
.lg .column .type {min-height: 40px; }
.lg .tag {padding: 5px 10px 7px; }
.fr .hero, .ru .hero{height: 470px}
.column p.price { margin-bottom: 0; height: 31px }
p.inclVAT { font-size: 12px; margin-top: 0 }
.priceDisplayNormal { font-size: 24px; color: #000 }
.priceDisplayStrikethrough { font-size: 22px; color: #777; text-decoration: line-through; margin-left: 5px }
.dur { vertical-align: top; line-height: 1.7; }
.column .btn { margin-top: 10px }
.chart { margin: 25px 3px 3px; padding: 25px 10px 20px; }
.cdgs .chart { border-top: 2px solid #2cac25 }
.vtr .chart-title { border-top: 2px solid #d91963 }
.cde .chart { border-top: 2px solid #fb9535 }
.cds .chart { border-top: 2px solid #6582f0 }
.cdts .chart-title { border-top: 2px solid #019cff }
.chart li:first-child { border-top: 0 }
.chart li { list-style: none; border-top: 1px solid #E0E0E0; padding: 9px 5px 7px 5px }
.chart li.check, .chart li.plus { padding: 9px 5px 7px 28px }
.chart .check { background-image: url(/static/cdgs/product_content/family/compare-check.png); background-repeat: no-repeat; background-position: left; background-size: 18px; }
.chart .plus { background-image: url(/static/cdgs/product_content/family/ico-plus.png); background-repeat: no-repeat; background-position: left; background-size: 18px; }
.compare span[data-toggle="popover"], .compare-further span[data-toggle="popover"]{ background-image: url(/static/cdgs/product_content/family/ico-info.png); background-repeat: no-repeat; background-position: center; background-size: 15px; width: 15px; height: 15px; display: block; float: right; }
.compare span[data-toggle="popover"]:hover, .compare-further span[data-toggle="popover"]:hover { cursor: pointer }
.desc.mar-15{margin: 10px 20px;}
.tag { position: absolute;background-color: #4911D8;color: #fff;font-weight: 500;padding: 10px 16px;display: inline-block;font-size: 14px;margin-bottom: 10px;width: calc(100% + 2px);left: -1px;top: -1px;text-align: center;text-transform: uppercase; border-top-left-radius: 10px; border-top-right-radius: 10px; }
#compare .table>thead>tr>th.new-version-cdgs { background: #017b02; background: -moz-linear-gradient(-90deg, #017b02 0%, #024703 100%); background: -webkit-linear-gradient(-90deg, #017b02 0%, #024703 100%); background: linear-gradient(-90deg, #017b02 0%, #024703 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#017b02", endColorstr="#024703", GradientType=1); border-radius: 0px 6px 0 0; }
#compare .table>thead>tr>th.new-version-cdts { background: #00618A; background: -moz-linear-gradient(-90deg, #00618A 0%, #0B334F 100%); background: -webkit-linear-gradient(-90deg, #00618A 0%, #0B334F 100%); background: linear-gradient(-90deg, #00618A 0%, #0B334F 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00618A", endColorstr="#0B334F", GradientType=1); border-radius: 6px 6px 0 0; padding: 0 0 4px; }
#compare .table>thead>tr>th.new-version-cdgs .thead-wrapper, #compare .table>thead>tr>th.new-version-cdts .thead-wrapper { background: transparent; }

.compare-further #compare span[data-toggle="popover"] { display: inline-block;float: none;margin-left: 5px; }
.compare-further #compare .feature-check-top span[data-toggle="popover"] { display: inline-block;float: none;margin-left: 15px; position: absolute; margin-top: -16px; }
.custom-popover{text-align: left; font-size: 13px; padding-left: 20px}
.comparison-chart .feature-check { background-image: url(/static/cdgs/product_content/family/compare-check.png); background-repeat: no-repeat }
.comparison-chart .feature-check.top{ background-position: 50% 30%}
.popover { width: 300px }
.popover-content { text-align: center }
.btn-secondary { margin: 50px 0 10px}
.compare-further { margin-bottom: 100px }
.compare .promo { display: none !important}

.family .desc-img {width: 80%;object-fit: contain;}
.nested-list li {list-style: disc;list-style-position: inside;}
.family .chart {padding-top: 5px;margin-top: 0;}
.family .chart-title {margin-top: 15px;padding: 10px;}
.comparison-chart .product-desc {font-size: 13px;}
#compare .table>thead>tr>th {background-color: #000 !important;padding: 0 !important;vertical-align: middle;}
#compare .table .thead-wrapper {padding: 10px 8px 12px !important;}
.column.cdgs .type { margin-top: 20px }
@media (min-width: 2200px) {
.container { width: 1600px; max-width: 1600px; }
.compare .container, .compare-further .container { width: 1300px; max-width: 1300px; }
}
@media (min-width: 1430px) {
    .compare .container, .compare-further .container { width: 1400px; max-width: 1400px; }
}
@media (max-width: 1200px) {
    .priceDisplayNormal { font-size: 22px; }
    .priceDisplayStrikethrough { font-size: 18px; }
}
@media (max-width: 767px) {
#compare .panel-title a, #compare .trFeature td:first-child { font-size: 14px; line-height: 1.3 }
.hero { padding-top: 30px }
.hero p { font-size: 16px; }
.column { margin-top: 20px; margin-bottom: 20px }
.comparison-chart .feature-check { background-size: 20px; }
#compare .panel-title a, #compare .trFeature td:first-child { font-size: 12px; }
.compare{margin-top: -100px}
.column p.desc{ min-height: unset;}
.family .desc-img { width: 50%; }
.navbar-white#sitenav .container{padding-right: 15px}
}
@media (min-width: 992px) {
    .flank .column { margin: -100px 0 0; }
    .main .column { margin-top: -120px; }
    .row.products, .row.products>div { justify-content: space-around}
}
@media (min-width: 768px) {
.hero { padding-top: 70px }
.column { width: 90%; }
.row.products, .row.products>div { flex-wrap: wrap; display: -ms-flexbox; display: -webkit-flex; display: flex; display: table-cell\9;}
}

@media (min-width: 768px) and (max-width: 991px) {
h1 { font-size: 32px }
.column { margin:20px 0;width: 100%;}
.hero p { font-size: 16px; }
.column .type, .column h3 { font-size: 18px; }
.column p { font-size: 14px; }
.compare{margin-top: -100px}
}