.hero { background-image: url(/static/cdgs/product_content/home-student/hero.jpg); position: relative; background-repeat: no-repeat; background-position: center; background-color: #0d1230; background-size: cover; color: #fff; height: 500px; }
.hero p { font-size: 20px }
.main .column { margin-top: -150px; }
.column { background: #fff; padding: 30px 0 0; border: 1px solid #bcb6b6; position: relative; }
.prod-icon { max-width: 60px; margin: 15px auto; }
.column .type, .column h3 { font-size: 22px; color: #000; font-weight: 500; margin: 0; padding: 0 10px; }
.column p { font-size: 16px; margin: 10px; line-height: 1.3; }
.column p.desc { margin-bottom: 15px; }
.column p.price { margin-bottom: 0 }
p.inclVAT { font-size: 12px; margin-top: 0 }
.priceDisplayNormal { font-size: 28px; 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 20px 20px; }
.cdgs .chart { border-top: 2px solid #2cac25 }
.cde .chart { border-top: 2px solid #ee7817 }
.cds .chart { border-top: 2px solid #6582f0 }
.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 40px }
.chart .check { background-image: url(/static/cdgs/product_content/home-student/compare-check.png); background-repeat: no-repeat; background-position: left; background-size: 25px; }
.chart .plus { background-image: url(/static/cdgs/product_content/home-student/ico-plus.png); background-repeat: no-repeat; background-position: left; background-size: 25px; }
.chart li span { background-image: url(/static/cdgs/product_content/home-student/ico-info.png); background-repeat: no-repeat; background-position: center; background-size: 15px; width: 15px; height: 15px; display: block; float: right; }
.chart li span:hover { cursor: pointer }
.tag { background: #2cad26; color: #fff; padding: 5px 15px 7px; position: absolute; top: -15px; right: -10px; }
#compare .panel-default { border-bottom: 1px solid #fff; }
#compare { padding-bottom: 60px }
#compare .panel-default:first-child { border-bottom: 0; }
#compare .panel-default .panel-heading { color: #333; background-color: #cfcfcf; border-color: #cfcfcf; border-radius: 0; border-top: 1px solid #fff; }
#compare .panel-group .panel-heading+.panel-collapse>.panel-body { border-top: 0; }
#compare .panel-group .panel+.panel { margin-top: 0; }
#compare .panel-body, #compare .panel-body .table>thead>tr>td { padding: 0; }
#compare .panel-title a { display: block; font-size: 16px; color: #0f0f0f; text-decoration: none; }
#compare .panel-title a:hover { color: #0f0f0f; text-decoration: none }
#compare .panel-heading a:before { font-family: 'Glyphicons Halflings'; content: "\e252"; float: right; color: #989898 }
#compare .panel-heading a[aria-expanded="true"]:before { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); transform: rotate(180deg); }
#compare h3 { font-size: 16px; margin-top: 10px; text-align: center }
#compare h3 span { display: block; font-size: 20px }
#compare .trFeature { text-align: center; }
#compare .trFeature td:first-child { text-align: left; color: #000; font-size: 15px }
#compare .comparison-chart { margin-bottom: 0; }
#compare .comparison-chart { margin-bottom: 0; }
#compare .feature-check-new p { color: #555; font-weight: bold; }
#compare .comparison-chart .new { color: #000; font-weight: bold; }
#compare td a { color: #000; text-decoration: underline }
#compare .under { margin-top: 55px; display: block; }
#compare .comparison-chart td { font-size: 13px; vertical-align: middle; padding: 12px; }
#compare .comparison-chart td.last-td { border-bottom: 1px solid #ddd; }
#compare .panel-heading td { padding: 10px 15px; border-top: 0; }
#compare .table>thead>tr>th { border-bottom: 0; background-color: #999999; color: #fff; }
#compare .table>tbody tr:first-child td { border-top: 0; }
#compare .table>tbody+tbody { border-top: 0; }
#compare .comparison-chart tr.trFeature:hover td { background-color: #EFEFEF; }
.comparison-chart .feature-check { background-image: url(/static/cdgs/product_content/home-student/compare-check.png); background-repeat: no-repeat }
.popover { width: 300px }
.popover-content { text-align: center }
.btn-compare { border: solid 2px #000; text-transform: uppercase; color: #000; font-size: 18px; padding: 8px 40px 10px; margin: 50px 0 }
.compare-further { margin-bottom: 100px }
.compare .promo { display: none !important}

@media (min-width: 2200px) {
.container { width: 1600px; max-width: 1600px; }
.compare .container, .compare-further .container { width: 1300px; max-width: 1300px; }
}

@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; }
}

@media (min-width: 768px) {
.hero { padding-top: 70px }
.column { width: 100%; }
.flank .column { margin: -100px 10px 0; }
.row.products, .row.products>div { display: -ms-flexbox; display: -webkit-flex; display: flex; display: table-cell\9; }
}

@media (min-width: 768px) and (max-width: 991px) {
h1 { font-size: 32px }
.hero p { font-size: 16px; }
.column .type, .column h3 { font-size: 18px; }
.column p { font-size: 14px; }
.priceDisplayNormal { font-size: 22px; }
.priceDisplayStrikethrough { font-size: 18px; }
}