﻿
section.banner { display: block; width: 100%; background-image: url("/contract-manager/english/landing/_assets/banner-image.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat; padding: 40px 10px; }

.inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 10px; }

.top { font-size: 0; position: relative; }

section.banner .left,
section.banner .right { display: inline-block; width: 50%; vertical-align: top; }

section.banner .left { padding-right: 20px; }
section.banner .right { padding-left: 20px; }

section.banner .left h1 { color: #ffffff; font-size: 32px; font-family: berlingske_sans_roundmedium, sans-serif; margin-bottom: 14px; }

section.banner .left p { color: #ffffff; font-size: 17px; font-family: berlingske_sans_roundregular, sans-serif; line-height: 1.3em; }
section.banner .left p.intro { color: #bed600; font-size: 25px; }

section.banner img.screenshot { width: 100%; }

section.tools { display: block; width: 100%; background-color: #e5ecf3!important; padding: 40px 0; }

section.tools .tool { display: inline-block; width: 50%; vertical-align: top; z-index: 1; position: relative; }
section.tools .tool:first-child { padding-right: 2px; }
section.tools .tool:last-child { padding-left: 2px; }
section.tools .tool:nth-child(2) { padding-left: 2px; padding-right: 2px; }

section.tools .tool[data-link-url] { cursor: pointer; }
section.tools .tool[data-link-url]:hover { z-index: 2; }

section.tools .tool .content { background-color: #ffffff; position: relative; }

section.tools .tool[data-link-url]:hover .content { background-color: #f8f8f8; box-shadow: 0 0 3px 1px #000000; }


section.tools .tool h2 { display: block; padding: 10px; text-align: center; line-height: 1em; font-size: 21px; font-family: berlingske_sans_roundmedium, sans-serif; }

section.tools .tool.free h2 { color: #333333; background-color: #f2f2f2; }
section.tools .tool.premium h2 { color: #333333; background-color: #aac1d5; }
section.tools .tool.customised h2 { color: #ffffff; background-color: #5482ab; }

section.tools .information { margin: 0; padding: 20px 30px; }

section.tools .information p { font-size: 16px; color: #333333; font-family: berlingske_sans_roundlight, sans-serif; line-height: 1.3em; margin-bottom: 0.75em; }
section.tools .information p:last-child { margin-bottom: 0; }

section.tools .footer { text-align: center; margin-top: 20px; }
.btn-goto-version { line-height: 1em; background-color: #bed600; color: #333333; font-size: 17px; font-family: berlingske_sans_roundmedium, sans-serif; padding: 14px 25px; width: auto; min-width: 180px; text-decoration: none; display: inline-block; margin-bottom: 20px; border-radius: 0; cursor: pointer;  }

section.tools .btn-show-more { font-size: 17px; font-family: berlingske_sans_roundmedium, sans-serif; text-decoration: underline; cursor: pointer; color: #5482ab; background-color: transparent; border-radius: 0; }

section.tools .btn-show-more:not(.expanded):after { content: "Mehr Details";}
/*section.tools .btn-show-more.expanded:after { content: "Weniger Details"; }*/

section.tools .more-information { padding: 10px 0 20px 0; }

section.tools .tick-list { margin: 24px 0; }
section.tools .tick-list:first-child { margin-top: 0; }
section.tools .tick-item { padding: 5px 0 0 40px; position: relative; vertical-align: top; /*font-family: berlingske_sans_roundmedium, sans-serif;*/ font-size: 16px; line-height: 1.3em; margin-bottom: 20px; color: #5482ab; }
section.tools .tick-item:before { content: ""; position: absolute; top: 0; left: 0; width: 28px; height: 28px; background-position: center; background-size: cover; background-image: url("/contract-manager/english/landing/_assets/icon-tick.png"); background-repeat: no-repeat; }

section.tools .more-information p { /*font-family: berlingske_sans_roundlight, sans-serif;*/ }

section.tools .more-information p.bold { font-family: berlingske_sans_roundmedium, sans-serif; }

section.tools ul { margin: 10px 0 10px 20px; font-size: 16px; font-family: berlingske_sans_roundlight, sans-serif; color: #333333; list-style-type: disc; }
section.tools ul li { line-height: 1.3em; }

section.tools ul:last-child { margin-bottom: 0; }

section.features-and-benefits { margin-top: 50px; }
section.features-and-benefits .inner { display: grid; gap: 30px; grid-template-columns: 1fr 1fr; }

div.benefits,
div.features { padding: 50px; display: flex; flex-direction: column; gap: 20px; }

div.features { background-color: #5482ab; }
div.benefits { background-color: #aac1d5}

.features-list,
.benefits-list { display: flex; flex-direction: column;  gap: 30px; }

section.features-and-benefits .list-item { display: flex; flex-direction: row; gap: 20px; align-items: start; }
section.features-and-benefits .icon { width: 38px; height: 38px; background-size: contain; background-position: center; background-repeat: no-repeat;  flex-shrink: 0;  }

section.features-and-benefits p { font-size: 15pt; color: #ffffff; padding-top: 6px; margin: 0; }

section.features-and-benefits .benefits p { color: #000000; }

section.features-and-benefits h2 { font-size: 27pt; margin-bottom: 0.5em; color: #000000; }
section.features-and-benefits .features h2 { color: #ffffff; }

/*section.advantages h2,
section.features h2 { display: block; width: 100%; text-align: center; color: #5482ab; font-size: 27px; font-family: berlingske_sans_roundregular, sans-serif;  }

section.advantages .advantage-list,
section.features .features-list { display: flex; flex-direction: row; margin-top: 30px; justify-content: center;  }

.advantage-list .advantage,
.features-list .feature { padding: 0 15px; text-align: center; flex-basis: 16.66%; }

.advantage-list .icon,
.features-list .feature .icon { display: inline-block;  width: 130px; height: 130px; border-radius: 100%; background-size: 80px 80px; background-position: center; background-repeat: no-repeat; }

.advantage-list .icon { background-color: #e5ecf3; }

.features-list .feature .icon { background-color: #2C5E4F; }*/
.icon.time-saving { background-image: url("/contract-manager/english/landing/_assets/icon-time-saving.png"); }
.icon.tried-and-tested { background-image: url("/contract-manager/english/landing/_assets/icon-tried-and-tested.png"); }
.icon.error-reduction { background-image: url("/contract-manager/english/landing/_assets/icon-error-reduction.png"); }
.icon.design-notes { background-image: url("/contract-manager/english/landing/_assets/icon-design-notes.png"); }
.icon.documents { background-image: url("/contract-manager/english/landing/_assets/icon-documents.png"); }
.icon.data-security { background-image: url("/contract-manager/english/landing/_assets/icon-data-security.png"); }

.icon.icon-tick { background-image: url("/contract-manager/english/landing/_assets/icon-tick.png"); }

.icon.icon-247-access { background-image: url("/contract-manager/english/landing/_assets/icon-clock.png"); }
.icon.icon-secure { background-image: url("/contract-manager/english/landing/_assets/icon-shield.png"); }
.icon.icon-options { background-image: url("/contract-manager/english/landing/_assets/icon-lock.png"); }
.icon.icon-storage { background-image: url("/contract-manager/english/landing/_assets/icon-privacy.png"); }
.icon.icon-docusign { background-image: url("/contract-manager/english/landing/_assets/icon-docuSign.png"); }




.key-contacts-list-wide { background-color: transparent !important; }

p strong {font-family: 'berlingske_sans_roundbold', sans-serif;}

.video-container { }

.video-container video { min-height: 320px; }

.video-options { margin-top: 20px; display: flex; gap: 10px; justify-content: end; }
.video-options button { width: 48px; height: 48px; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: transparent; border: 1px solid #666666; border-radius: 100%;  }
.video-options button.english { background-image: url(/_uploads/flags/64/gb.png); }
.video-options button.german { background-image: url(/_uploads/flags/64/de.png); }

.video-options button.active { border-color: #ffffff; box-shadow: 0 0 2px 2px #ffffff; }

@media (max-width: 1230px) {
   .video-container video { min-height: auto; }
}

@media screen and (max-width: 1200px ) { 
   section .advantages .advantage-list { flex-wrap: wrap; justify-content: center; }

   section.advantages .advantage-list .advantage { margin-bottom: 40px; flex-basis: 100%; }
   section.advantages .advantage-list .advantage:last-child { margin-bottom: 0; }
}

@media screen and (max-width: 840px) {
   section.banner .left,
   section.banner .right { display: block; width: 100%; padding: 0; }

   section.banner .right { text-align: center; margin-top: 30px; }
   section.banner .right img.screenshot { width: 100%; max-width: 600px; }
}

@media screen and (max-width: 780px) {
   section.tools .tool { display: block; width: 100%; padding-right: 0; padding-left: 0; margin-bottom: 20px; }
   section.tools .tool:last-child { margin-bottom: 0; }
}
