﻿
html, body { min-height: 100%; height: 100%; width: 100%; min-width: 100%; margin: 0; padding: 0; font: normal 12px/20px 'CentraleSansBook', Arial, Helvetica, sans-serif; color: #002855; background: #fff; }

p { font: normal 13px/20px 'CentraleSansBook', Arial, Helvetica, sans-serif; color: #515151; margin:0 0 20px; }
ul.speed-test-infographics { display: block; overflow: hidden; margin:0 0 20px; }
ul.speed-test-infographics li { width: 25%; float: left; box-sizing:border-box; border-right: 1px solid #eaeaea; }
ul.speed-test-infographics li:last-child { border-right: 0px; }
ul.speed-test-infographics li .item { position: relative; margin: 10px 20px; cursor:pointer;  }
ul.speed-test-infographics li .item .front { display: block; z-index: 5; background: #FFFFFF; position: relative; }
ul.speed-test-infographics li .item .front .img-area { display: block; overflow:hidden; }
ul.speed-test-infographics li .item .front .img-area span { float: left; font: 70px/70px 'CentraleSansXBold-Italic', Arial, Helvetica, sans-serif; color: #bfeef1; }
ul.speed-test-infographics li .item .front .img-area img { max-width: 100%; float:right; }
ul.speed-test-infographics li .item .front .text { display: block; padding:10px 0; font: 15px/1.2 'CentraleSansBold', Arial, Helvetica, sans-serif; color: #002855; }
ul.speed-test-infographics li .item .back { width: 100%; height: 100%; position: absolute; left: 0; top: 0; font: 13px/1.2 'CentraleSansBook', Arial, Helvetica, sans-serif; color: #515151; background: #FFFFFF; z-index: 2; }
ul.speed-test-infographics li .item:hover .back { z-index:10; }

.btn-area { display: block; width:100%; text-align:center; }
.btn-area .btn { display: inline-block; padding: 15px 30px 14px; font: 18px/1.2 'CentraleSansBold', Arial, Helvetica, sans-serif; color: #FFFFFF; background: #00bdc7; }
.btn-area .btn i { float: right; margin: 6px 0 0 30px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid #FFFFFF; }
