| .innerhero__pic--keyvalue{ |
| left: 66%; |
| top:10px; |
| } |
| .keyvalue1 { |
| padding-top: 13rem; |
| padding-bottom: 8rem; |
| } |
| .keyvalue1__left { |
| width: 52%; |
| padding-right: 2%; |
| } |
| .keyvaluetext p:not(:last-child){ |
| margin-bottom: 1rem; |
| } |
| .keyvalue1__libs { |
| padding-top: 6rem; |
| } |
| .leyvalue__lang { |
| position: relative; |
| padding-left: 3.2rem; |
| line-height: 3.6rem; |
| margin-bottom: 9px; |
| } |
| .leyvalue__lang::before{ |
| content:""; |
| display: block; |
| width: 2.4rem; |
| height: 2.4rem; |
| left: 0; |
| top: 50%; |
| margin-top: -1.2rem; |
| position: absolute; |
| z-index: 2; |
| background: url(../img/features/key-value/icon-library.svg) no-repeat; |
| background-size: contain; |
| } |
| .leyvalue__lang small{ |
| color:var(--grey4); |
| font-size: 1.6rem; |
| } |
| .keyvalue1__right { |
| width: 512px; |
| max-width: 50%; |
| margin-left: auto; |
| } |
| .keyvalue1__picwrap { |
| padding: 7rem 0 6rem; |
| } |
| .keyvalue1__pic { |
| width: 355px; |
| max-width: 90%; |
| } |
| |
| |
| .keyvalueplank { |
| border-radius: 1rem; |
| background: var(--blue4); |
| padding: 7rem 7.8rem; |
| } |
| .keyvalueplank__inner { |
| font-size: 3.2rem; |
| line-height: 4.2rem; |
| } |
| |
| .keyvalue2 { |
| padding-top: 8rem; |
| } |
| .keyvalue2__left { |
| width: 52%; |
| padding-right: 2%; |
| } |
| .keyvalue__title { |
| font-size: 2.4rem; |
| line-height: 1.5; |
| font-weight: 700; |
| } |
| .keyvalue2__box dt{ |
| font-weight: 700; |
| } |
| .keyvalue2__right { |
| width: 551px; |
| max-width: 50%; |
| margin-left: auto; |
| } |
| .keyvalue2__picwrap { |
| height: 380px; |
| } |
| .keyvalue2 .keyvalue2__pic{ |
| max-width: 443px; |
| } |
| |
| |
| .keyvalue3 { |
| padding-top: 12rem; |
| } |
| .keyvalue3__left { |
| order:-1; |
| } |
| .keyvalue3__left { |
| width: 540px; |
| flex-shrink: 0; |
| max-width: 50%; |
| } |
| .keyvalue3__picwrap { |
| height: 380px; |
| } |
| .keyvalue3__pic { |
| max-width: 443px; |
| } |
| .keyvalue3__right{ |
| padding-left: 109px; |
| flex-grow: 1; |
| } |
| |
| |
| .keyvalue4 { |
| padding-top: 12rem; |
| } |
| .keyvalue4__left { |
| width: 50%; |
| padding-right: 2%; |
| } |
| .keyvalue4__right{ |
| width: 546px; |
| max-width: 100%; |
| margin-left: auto; |
| } |
| .keyvalue4__picwrap { |
| min-height: 603px; |
| } |
| .keyvalue4__pic { |
| width: 327px; |
| } |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| @media (max-width:1199px){ |
| .keyvalue1__picwrap, |
| .keyvalue2__picwrap, |
| .keyvalue3__picwrap, |
| .keyvalue4__picwrap { |
| height: auto; |
| min-height: auto; |
| } |
| .keyvalue2 .keyvalue2__pic, |
| .keyvalue3__pic, |
| .keyvalue4__pic{ |
| max-width: 80%; |
| } |
| .keyvalue3__right{ |
| padding-left: 30px; |
| } |
| .keyvalue4__right{ |
| max-width: 50%; |
| } |
| |
| } /* END MEDIA 1199px */ |
| |
| |
| |
| @media (max-width:992px){ |
| .innerhero__pic--keyvalue{ |
| display: none; |
| } |
| } /* END MEDIA 992px */ |
| |
| |
| @media (max-width:767px){ |
| .innerhero--keyvalue .h1 br{ |
| display: block; |
| } |
| .keyvalue1{ |
| padding-top: 8rem; |
| padding-bottom: 8rem; |
| flex-flow: column nowrap; |
| } |
| .keyvalue1__left, |
| .keyvalue1__right, |
| .keyvalue2__left, |
| .keyvalue2__right, |
| .keyvalue3__left, |
| .keyvalue4__left, |
| .keyvalue4__right{ |
| width: 100%; |
| max-width: none; |
| } |
| .keyvalue1__left .keyvaluetext{ |
| padding-top: 4rem; |
| } |
| .leyvalue__lang small{ |
| display: block; |
| line-height: 1.3; |
| margin-top: -3px; |
| } |
| .keyvalue1__libs{ |
| padding-top: 2rem; |
| } |
| .leyvalue__lang::before{ |
| margin-top: 0; |
| top: 5px; |
| } |
| .keyvalue1__right, |
| .keyvalue2__right{ |
| padding-top: 3rem; |
| } |
| .keyvalue1__picwrap{ |
| padding-top: 6rem; |
| } |
| .keyvalue1__pic{ |
| max-width: 80%; |
| } |
| .keyvalueplank{ |
| padding: 4rem 3rem; |
| border-radius: 0; |
| } |
| .keyvalueplank__inner{ |
| font-size: 2rem; |
| line-height: 1.5; |
| } |
| .keyvalue2, |
| .keyvalue3, |
| .keyvalue4{ |
| flex-flow:column nowrap; |
| align-items: stretch; |
| padding-top: 6rem; |
| } |
| .keyvalue2 br, |
| .keyvalue3 br{ |
| display: none; |
| } |
| .keyvalue3__right{ |
| order: -1; |
| padding-left: 0; |
| } |
| .keyvalue3__right .keyvaluetext, |
| .keyvalue4 .keyvaluetext, |
| .keyvalue2__left .keyvaluetext{ |
| padding-bottom: 3rem; |
| } |
| .keyvalue4__right{ |
| margin-left: 0; |
| } |
| .keyvalue4__picwrap{ |
| width: 100%; |
| max-width: none; |
| } |
| } |