.compare-page{padding-top:32px;padding-bottom:64px;position:relative;width:100%;overflow:hidden} .compare-page article{min-width:488px} .compare-page .card{background:#fff;width:100%;padding:64px} .compare-page .card+.card{margin-top:32px} .compare-page.two .functionaliteiten .rating a{max-width:calc(100% - (180px * 2))} .compare-page.three .functionaliteiten .rating a{max-width:calc(100% - (180px * 3))} .compare-page.four .functionaliteiten .rating a{max-width:calc(100% - (180px * 4))} .compare-page.five .functionaliteiten .rating a{max-width:calc(100% - (180px * 5))} .compare-page.four .logos .logo{width:calc(25% - 18px)} .compare-page.five .logos .logo{width:calc(20% - 20px)} .compare-page.four .wrapExtra{width:1356px;width:calc(1176px + 180px)} .compare-page.five .wrapExtra{width:1536px;width:calc(1176px + 360px)} .compare-page.four .matchrate{width:calc(((100% - 128px)/ 4) - 18px)} .compare-page.five .matchrate{width:calc(((100% - 128px)/ 5) - 20px)} .sideArrows .go-left,.sideArrows .go-right{display:block} .scrolled.sideArrows .go-up{right:88px} .scrolled.sideArrows .go-left{right:160px} .compare-page .card.logos{padding-top:64px;padding-bottom:96px;position:relative} .compare-page .logos h2{font-size:24px;line-height:32px;margin-bottom:16px} .compare-page .logos h2 span.divider,.compare-page .logos h2 span.software{font-weight:400} .compare-page .logos .logo{width:calc((100% / 3) - 16px);float:left} .compare-page .card.logos .logo+.logo{margin-left:24px} .compare-page .logos .image-wrap{position:relative;border:3px dashed #ecf0f0;cursor:pointer;height:144px;margin-bottom:15px} .compare-page .logos .image{height:90px;width:136px;margin:auto;background-size:contain;background-position:center;background-repeat:no-repeat} .compare-page .logos .vergelijk-verwijder label{position:absolute;top:4px;right:4px;padding:4px;cursor:pointer;line-height:12px;text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff} .compare-page .logos .vergelijk-verwijder label::after{content:"\f00d";font-family:"Font Awesome 5 Pro";font-size:14px;line-height:12px;color:#faa;transition:color .2s;-ms-transition:color .2s} .compare-page .logos .vergelijk-verwijder label:hover::after{color:#ff3939} .compare-page .logos .vergelijk-verwijder input{display:none} .compare-page .matchrate{margin-bottom:0;position:absolute;bottom:64px;width:calc(((100% - 128px)/ 3) - 16px)} .compare-page .vergelijk-fixed{width:100%;padding:8px 0;background:#fff;position:fixed;top:-120px;left:0;z-index:3;box-shadow:0 5px 10px rgba(50,71,91,.1);transition:top .2s;-webkit-transition:top .2s;-moz-transition:top .2s;-ms-transition:top .2s;-o-transition:top .2s} .compare-page .vergelijk-fixed article{position:relative} .compare-page .vergelijk-fixed .image-wrap{height:56px;margin-bottom:0} .compare-page .vergelijk-fixed .image{height:32px} .compare-page .vergelijk-fixed .wrap{float:right;padding-right:64px} .compare-page .card.specifications{position:relative} .compare-page .specifications .compare-filter{display:none;font-weight:700;text-transform:uppercase;color:#9cacb8;margin:6px 0 0 24px;float:right} .compare-page .functionaliteiten .rating .stars{float:left;position:relative} .compare-page .functionaliteiten h3{margin-bottom:4px} .compare-page .functionaliteiten .stars-wrap-all{float:right} .compare-page .functionaliteiten .stars-wrap{float:left} .compare-page .functionaliteiten .ratings{margin-bottom:-2px} .compare-page .functionaliteiten .ratingHeader{float:right;margin-top:-32px} .compare-page .functionaliteiten .ratingHeader strong{display:block;float:left;position:relative} .compare-page .functionaliteiten .ratingHeader strong span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;position:absolute;left:0;top:0;width:calc(100% - 8px);height:100%} .compare-page .functionaliteiten .ratingHeader strong,.compare-page .functionaliteiten .stars-wrap,.compare-page .specification td{width:180px} .compare-page .vergelijk-fixed .logo,.compare-page .vergelijk-fixed .wrapExtra .logo{width:172px;margin-left:0;margin-right:8px} .compare-page .functionaliteiten .rating a{max-width:calc(100% - (180px * 3))} .compare-page .testTableRow:nth-child(even){background:#ecf0f0} .compare-page .testTableRow:nth-child(odd){background-color:transparent} .compare-page .testTableSubRow.testTableRow:nth-child(even){background-color:transparent} .compare-page .testTableLogoRow{float:right} .compare-page .systemName{width:180px;float:left;line-height:24px;height:24px;position:relative;padding-right:8px;display:block} .compare-page .systemName .ellipsis{position:absolute;top:0;left:0;width:100%;height:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-right:8px} .compare-page .all-functions .title{margin-top:34px} .compare-page.five .testTableProp{width:calc(100% - (180px * 5))} .compare-page.four .testTableProp{width:calc(100% - (180px * 4))} .compare-page.three .testTableProp{width:calc(100% - (180px * 3))} .compare-page.two .testTableProp{width:calc(100% - (180px * 2))} @media screen and (max-width:1200px){ .compare-page .logos h2{font-size:16px;line-height:24px} .compare-page .functionaliteiten .ratingHeader strong,.compare-page .functionaliteiten .stars-wrap,.compare-page .systemName{width:164px} .compare-page .vergelijk-fixed .logo,.compare-page .vergelijk-fixed .wrapExtra .logo{width:156px} .compare-page .functionaliteiten .rating a{max-width:calc(100% - (164px * 3))} .compare-page.two .functionaliteiten .rating a{max-width:calc(100% - (164px * 2))} .compare-page.three .functionaliteiten .rating a{max-width:calc(100% - (164px * 3))} .compare-page.four .functionaliteiten .rating a{max-width:calc(100% - (164px * 4))} .compare-page.five .functionaliteiten .rating a{max-width:calc(100% - (164px * 5))} .compare-page.four .wrapExtra{width:1172px;width:calc(1008px + 164px)} .compare-page.five .wrapExtra{width:1336px;width:calc(1008px + 328px)} .compare-page.two .testTableProp{width:calc(100% - (164px * 2))} .compare-page.three .testTableProp{width:calc(100% - (164px * 3))} .compare-page.four .testTableProp{width:calc(100% - (164px * 4))} .compare-page.five .testTableProp{width:calc(100% - (164px * 5))} } @media screen and (max-width:1024px){ .compare-page{padding-top:24px} .compare-page .vergelijk-fixed .wrap{padding-right:32px} .compare-page .vergelijk-fixed .logo .image-wrap{height:64px} .compare-page .vergelijk-fixed .logo .image{width:96px;height:32px} .compare-page .logos .image-wrap{height:104px} .compare-page .logos .image{width:96px;height:74px} .compare-page .card{padding:32px} .compare-page .card+.card{margin-top:24px} .compare-page .card.logos{padding-top:32px;padding-bottom:64px} .compare-page .matchrate{bottom:32px;width:calc(33.3% - 36px)} .compare-page .logos h2{font-size:16px;line-height:24px;height:48px;margin-bottom:8px;position:relative} .compare-page .logos h2 span.company,.compare-page .logos h2 span.software{overflow:hidden;position:absolute;text-overflow:ellipsis;width:100%;white-space:nowrap} .compare-page .logos h2 span.company{top:0} .compare-page .logos h2 span.software{top:24px} .compare-page .logos h2 span.divider{display:none} .compare-page .testTableLogoRow{display:none} .compare-page .all-functions .title{font-size:16px} .compare-page.four .wrapExtra{width:948px;width:calc(784px + 164px)} .compare-page.five .wrapExtra{width:1112px;width:calc(784px + 328px)} .compare-page.four .matchrate{width:calc(((100% - 64px)/ 4) - 18px)} .compare-page.five .matchrate{width:calc(((100% - 64px)/ 5) - 20px)} } @media screen and (max-width:800px){ .compare-page .card{width:calc(100% + 48px);margin-left:-24px;padding:24px} .compare-page .card.logos{padding-top:24px;padding-bottom:50px} .compare-page .card.logos .logo+.logo{margin-left:16px} .compare-page .matchrate{bottom:20px;width:calc(33.3% - 36px)} .compare-page .functionaliteiten h3{margin-bottom:0} .compare-page .vergelijk-fixed .wrap{padding-right:24px} .compare-page .functionaliteiten .ratingHeader{margin-top:0} .compare-page.two .functionaliteiten .rating a{max-width:calc(100% - (128px * 2))} .compare-page.three .functionaliteiten .rating a{max-width:calc(100% - (128px * 3))} .compare-page.four .functionaliteiten .rating a{max-width:calc(100% - (128px * 4))} .compare-page.five .functionaliteiten .rating a{max-width:calc(100% - (128px * 5))} .compare-page.four .card.logos .logo{width:calc(25% - 12px)} .compare-page.five .card.logos .logo{width:calc(20% - 13px)} .compare-page.four .wrapExtra{width:760px;width:calc(632px + 128px)} .compare-page.five .wrapExtra{width:888px;width:calc(632px + 256px)} .compare-page.four .matchrate{width:calc(((100% - 48px)/ 4) - 12px)} .compare-page.five .matchrate{width:calc(((100% - 48px)/ 5) - 13px)} .compare-page.two .testTableProp{width:calc(100% - (128px * 2))} .compare-page.three .testTableProp{width:calc(100% - (128px * 3))} .compare-page.four .testTableProp{width:calc(100% - (128px * 4))} .compare-page.five .testTableProp{width:calc(100% - (128px * 5))} .compare-page .vergelijk-fixed .wrap{padding-right:8px} .compare-page .functionaliteiten .ratingHeader strong,.compare-page .functionaliteiten .stars-wrap,.compare-page .testTableValue{width:128px} .compare-page .vergelijk-fixed .logo,.compare-page .vergelijk-fixed .wrapExtra .logo{width:120px;margin-left:0} } @media screen and (max-width:600px){ .compare-page .vergelijk-fixed .wrap{padding-right:0} .compare-page .vergelijk-fixed .logo .image{width:100%;height:44px} .compare-page .logos .vergelijk-verwijder label::after{color:#ff3939} .compare-page .functionaliteiten .rating a{max-width:calc(100% - 320px)} .compare-page h3{font-size:20px;line-height:30px} .compare-page .functionaliteiten .ratingHeader strong,.compare-page .functionaliteiten .stars-wrap,.compare-page .testTableValue{width:104px} .compare-page .vergelijk-fixed .logo,.compare-page .vergelijk-fixed .wrapExtra .logo{width:96px} .compare-page.two .functionaliteiten .rating a{max-width:calc(100% - (104px * 2))} .compare-page.three .functionaliteiten .rating a{max-width:calc(100% - (104px * 3))} .compare-page.four .functionaliteiten .rating a{max-width:calc(100% - (104px * 4))} .compare-page.five .functionaliteiten .rating a{max-width:calc(100% - (104px * 5))} .compare-page.two .testTableProp{width:calc(100% - (104px * 2))} .compare-page.three .testTableProp{width:calc(100% - (104px * 3))} .compare-page.four .testTableProp{width:calc(100% - (104px * 4))} .compare-page.five .testTableProp{width:calc(100% - (104px * 5))} .compare-page.four .wrapExtra{width:640px;width:calc(536px + 104px)} .compare-page.five .wrapExtra{width:744px;width:calc(536px + 208px)} } @media screen and (max-width:500px){ .compare-page .vergelijk-fixed article{padding:0} .compare-page .card{padding:16px} .compare-page .card.logos{padding:16px 16px 50px 16px} }