@charset "UTF-8";
@font-face { font-style: normal; font-weight: normal;
/* font-family: nexa; src: url('/fonts/Nexa-Regular.otf') format('opentype');*/
font-family: nexa; src: url('/fonts/Nexa-Regular.ttf') format('truetype');
}
@font-face { font-style: bold; font-weight: bold;
font-family: nexa; src: url('/fonts/Nexa-Bold.ttf') format('truetype');
/* font-family: nexa; src: url('/fonts/Nexa-Bold.otf') format('opentype');*/
}
@font-face { font-style: italic; font-weight: normal;
font-family: nexa; src: url('/fonts/Nexa-RegularItalic.ttf') format('truetype');
/* font-family: nexa; src: url('/fonts/Nexa-RegularItalic.otf') format('opentype');*/
}
/*
@font-face { font-style: normal; font-weight: normal;
font-family: loos; src: url('/fonts/Loos Latin, Cyrillic Extended-Bold-Desktop.otf') format('opentype');
}
@font-face { font-style: bold; font-weight: bold;
font-family: loos; src: url('/fonts/Loos Latin, Cyrillic Extended-Bold-Desktop.otf') format('opentype');
}
*/
ul.header__link {
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
.header li.dropdown a {
font-size: 80%;
}
li.header__link-item {
margin-right: calc(16 / 1224 * 100%);
}
.hero__quick #digital-services .title-h5 {
font-size: 1.5rem;
}
footer .row > .accordion > .row > .col-12 {
max-width: unset;
flex: 0 0 18%;
}
/*
div.mobile-fit-width {
font-size: 1em;
container-name: sections
}
@container sections (min-width: 700px) {
div.mobile-fit-width {
font-size: inherit;
}
}
*/
@media (max-width: 1024px) {
.mobile-fit-width {
font-size: 4.5vw !important;
/*padding-bottom: 5vh;*/
}
.mobile-fit-width:not(.swiper-slide):not([original-swiper-slide]):after {
content:" →";
color: #0043cf;
}
}
@media (max-width: 900px) {
.header__mega {
font-size: 4.5vw;
height: 100vh !important;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
.header__link {
overflow: unset !important;
overflow-y: unset;
overflow-x: hidden;
}
.header__mega-wrapper {
width: 100% !important;
}
}
/* / From masterpage.html */
html {
font-size: 10px;
}
.header,
.footer {
font-family: nexa, Arial, sans-serif;
}
.module-container {
padding: 0 1.7rem;
margin-bottom: 8rem;
}
.module-container.pl-sm-0,
.module-container.pr-sm-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.text-light-45 {
font-family: nexa, Arial, sans-serif !important;
}
.text-bold-65 {
font-family: nexa, Arial, sans-serif !important;
font-weight: 700;
}
.text-uppercase {
text-transform: uppercase !important;
}
.text-center {
text-align: center !important;
}
.text-left {
text-align: left !important;
}
.cta-arrow .bg-grba:focus,
.cta-arrow .bg-grba:hover {
-webkit-transition: none;
-o-transition: none;
transition: none;
-webkit-transform: none;
transform: none;
}
@media only screen and (min-width: 900px) {
.module-container {
padding: 0 4rem;
margin-bottom: 12rem;
}
.module-container.pl-sm-0,
.module-container.pr-sm-0 {
padding-left: 4rem !important;
padding-right: 4rem !important;
}
.module-container .ctn-background:last-child {
margin-bottom: 0;
}
}
.img-balloon {
width: 9rem;
height: 9rem;
/*background-image: url('data:image/svg+xml;utf8,');*/
/*background-image:url('data:image/svg+xml;utf8,');*/
background-image: url("/img/kpk-macro.png");
background-repeat: no-repeat;
background-size: contain;
}
@media only screen and (min-width: 901px) {
.img-balloon {
width: 14.4rem;
height: 14.4rem;
}
}
.img-balloon.\--gray {
background-image: url('data:image/svg+xml;utf8,');
}
.img-balloon.\--secondary-color-pink {
background-image: url('data:image/svg+xml;utf8,');
}
.img-balloon.\--secondary-color-yellow {
background-image: url('data:image/svg+xml;utf8,');
}
.img-balloon.\--secondary-color-green {
background-image: url('data:image/svg+xml;utf8,');
}
.img-balloon.\--secondary-color-ocean {
background-image: url('data:image/svg+xml;utf8,');
}
.img-balloon.\--secondary-color-blue {
background-image: url('data:image/svg+xml;utf8,');
}
.img-balloon.\--muted-color-pink {
background-image: url('data:image/svg+xml;utf8,');
}
.img-balloon.\--muted-color-yellow {
background-image: url('data:image/svg+xml;utf8,');
}
.img-balloon.\--muted-color-green {
background-image: url('data:image/svg+xml;utf8,');
}
.img-balloon.\--muted-color-ocean {
background-image: url('data:image/svg+xml;utf8,');
}
.img-balloon.\--muted-color-blue {
background-image: url('data:image/svg+xml;utf8,');
}
@font-face {
font-family: nexa, "acc-icon";
src: url("../fonts/acc-icon.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
.acc-icon {
font-family: nexa, "acc-icon" !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-arrow:before {
content: "\e901";
}
.icon-prev:before {
content: "\e900";
}
@font-face {
font-family: nexa, "Frutiger LT W04_45 Light";
src: url("../fonts/93b7d028-28f3-473a-821f-7a139c59305a.woff2") format("woff2"),
url("../fonts/1f5eb399-3fe2-4a88-946d-1621c81da877.woff") format("woff");
}
@font-face {
font-family: nexa, "Frutiger LT W04_55 Roman";
src: url("../fonts/61381871-0847-435e-9498-63b7c3d9c071.woff2") format("woff2"),
url("../fonts/b33c9c65-2311-4db9-a364-ae857e998b70.woff") format("woff");
}
@font-face {
font-family: nexa, "Frutiger LT W04_65 Bold";
src: url("../fonts/63541a87-effb-4b23-a1e5-aded6ef8e33d.woff2") format("woff2"),
url("../fonts/ede01147-5581-4d28-afc0-303f4c771fd2.woff") format("woff");
}
.row *,
.row *::before,
.row *::after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
.row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -0.8rem;
margin-left: -0.8rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-ms-overflow-style: scrollbar;
}
.col-md,
.col-md-12,
.col-md-11,
.col-md-10,
.col-md-9,
.col-md-8,
.col-md-7,
.col-md-6,
.col-md-5,
.col-md-4,
.col-md-3,
.col-md-2,
.col-md-1,
.col-12,
.col-11,
.col-10,
.col-9,
.col-8,
.col-7,
.col-6,
.col-5,
.col-4,
.col-3,
.col-2,
.col-1 {
position: relative;
width: 100%;
padding-right: 0.8rem;
padding-left: 0.8rem;
}
.col-12 {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
@media (min-width: 901px) {
.col-md {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
.col-md-3 {
-webkit-box-flex: 0;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.col-md-4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 33.3333333333%;
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.col-md-5 {
-webkit-box-flex: 0;
-ms-flex: 0 0 41.6666666667%;
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
}
.col-md-8 {
-webkit-box-flex: 0;
-ms-flex: 0 0 66.6666666667%;
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
}
.order-md-last {
-webkit-box-ordinal-group: 14;
-ms-flex-order: 13;
order: 13;
}
.offset-md-1 {
margin-left: 8.3333333333%;
}
}
.m-0 {
margin: 0 !important;
}
.mt-0,
.my-0 {
margin-top: 0 !important;
}
.mr-0,
.mx-0 {
margin-right: 0 !important;
}
.mb-0,
.my-0 {
margin-bottom: 0 !important;
}
.ml-0,
.mx-0 {
margin-left: 0 !important;
}
.p-0 {
padding: 0 !important;
}
.pt-0,
.py-0 {
padding-top: 0 !important;
}
.pr-0,
.px-0 {
padding-right: 0 !important;
}
.pb-0,
.py-0 {
padding-bottom: 0 !important;
}
.pl-0,
.px-0 {
padding-left: 0 !important;
}
.icons-social {
width: 4.5rem;
height: 4.5rem;
background-repeat: no-repeat;
background-size: contain;
}
@media only screen and (min-width: 901px) {
.icons-social {
margin-top: -0.3rem;
}
}
.icons-social.\--facebook {
background-image: url("../images/icon/Ricoh Icons_SoMe_facebook.svg");
}
.icons-social.\--youtube {
background-image: url("../images/icon/Ricoh Icons_SoMe_YouTube.svg");
}
.icons-social.\--twitter {
background-image: url("../images/icon/Ricoh Icons_SoMe_Twitter.svg");
}
.icons-social.\--linkedin {
background-image: url("../images/icon/Ricoh Icons_SoMe_Linkedin.svg");
}
.icons-social.\--blog {
background-image: url("../images/icon/Ricoh Icons_SoMe_Blog.svg");
}
.icons-social.\--vk {
background-image: url("../images/icon/Ricoh Icons_SoMe_Vk.svg");
}
.icons-social.\--xing {
background-image: url("../images/icon/Ricoh Icons_SoMe_Xing.svg");
}
.icons-social.\--instagram {
background-image: url("../images/icon/Ricoh Icons_SoMe_Instagram.svg");
}
.page-container {
margin: 0 auto;
}
.page-container .page-container {
padding-left: 0;
padding-right: 0;
}
.page-container {
max-width: 144rem;
}
.container-txt {
margin: 0 auto;
padding: 0 1.7rem;
}
.container-txt.\--small {
max-width: 124.8rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@media only screen and (min-width: 901px) {
.container-txt {
padding: 0 1.2rem;
}
.container-txt .row {
margin-right: -1.2rem;
margin-left: -1.2rem;
line-height: 0;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.container-txt [class*=col-] {
padding-right: 1.2rem;
padding-left: 1.2rem;
}
}
.title-h3 {
font-family: nexa, Arial, sans-serif;
font-size: 2.2rem;
line-height: 2.8rem;
font-weight: normal;
-webkit-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.text-p1 {
font-family: nexa, Arial, sans-serif;
font-size: 1.4rem;
line-height: 2.2rem;
}
@media only screen and (min-width: 901px) {
.text-p1 {
font-size: 1.6rem;
line-height: 2.6rem;
}
}
.text-cta-1 {
font-family: nexa, Arial, sans-serif;
font-size: 1.4rem;
line-height: 1.8rem;
}
.text-cta-2 {
font-family: nexa, Arial, sans-serif;
font-weight: 700;
font-size: 1.4rem;
line-height: 2rem;
}
.text-cta-3 {
font-family: nexa, Arial, sans-serif;
font-size: 1.4rem;
line-height: 1.9rem;
}
.cta-button {
position: relative;
display: inline-block;
font-family: nexa, Arial, sans-serif;
font-size: 1.4rem;
line-height: 1.8rem;
color: #000000;
height: 3.9rem;
padding: 1rem 1rem;
/*padding: 1rem 2.4rem;*/
text-decoration: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
}
.cta-button span {
position: relative;
}
.cta-button::before {
content: "";
border: 1px solid #d31d3f;
border-radius: 0.8rem;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #ffffff;
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
.cta-button:focus {
background-color: rgba(240, 145, 146, 0.15);
}
.cta-button.\--bg-white {
height: 3.9rem;
color: #ffffff;
background-color: rgba(0, 0, 0, 0.2);
overflow: hidden;
border-radius: 0.8rem;
}
.cta-button.\--bg-white::before {
background-color: transparent;
border-color: #ffffff;
}
.cta-button.\--bg-white.disabled {
color: #707070 !important;
background-color: rgba(0, 0, 0, 0.2);
}
.cta-button.\--bg-white.disabled::before {
border-color: rgba(210, 210, 210, 0.5);
}
.cta-button.\--bg-white:focus::before {
background-color: rgba(255, 255, 255, 0.2);
}
.cta-button.\--bg-grey {
color: #767676;
}
.cta-button.\--bg-grey::before {
background-color: transparent;
border-color: #767676;
}
.cta-button.\--bg-grey:focus {
background-color: inherit;
}
.cta-button.\--bg-grey:focus::before {
background-color: rgba(210, 210, 210, 0.25);
}
.cta-button.\--bg-grey.disabled::before {
opacity: 0.2;
}
.cta-button.\--bg-black-2 {
color: #ffffff;
background: rgba(0, 0, 0, 0.2);
overflow: hidden;
border-radius: 0.8rem;
}
.cta-button.\--bg-black-2::before {
background-color: transparent;
border-color: #ffffff;
}
.cta-button.disabled {
color: #d2d2d2;
pointer-events: none;
}
.cta-button.disabled::before {
border-color: #ffffff;
}
.cta-button:hover::before {
width: 100%;
height: 100%;
border-width: 0.2rem;
}
.cta-button:focus::before {
width: 100%;
height: 100%;
border-width: 0.1rem;
background-color: rgba(240, 145, 146, 0.15);
}
.cta-arrow {
position: relative;
font-family: nexa, Arial, sans-serif;
font-weight: 700;
font-size: 1.4rem;
line-height: 2rem;
color: #000000;
text-decoration: none;
display: block;
}
.cta-arrow span {
position: absolute;
top: 50%;
left: 1.2rem;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.cta-arrow::before {
content: "";
display: inline-block;
width: 0.4rem;
height: 1.2rem;
padding-right: 1rem;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
-webkit-transition: -webkit-transform 0.3s ease-out;
transition: -webkit-transform 0.3s ease-out;
-o-transition: transform 0.3s ease-out;
transition: transform 0.3s ease-out;
transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
}
.cta-arrow:focus::before,
.cta-arrow:hover::before {
-webkit-transform: translateX(0.4rem);
transform: translateX(0.4rem);
}
.cta-arrow.\--bg-white {
color: #ffffff;
}
.cta-arrow.\--bg-white::before {
background-image: url('data:image/svg+xml;utf8,');
}
.cta-read {
font-family: nexa, Arial, sans-serif;
font-size: 1.4rem;
line-height: 1.9rem;
color: #000000;
text-decoration: none;
}
.cta-read.\--more span.icon,
.cta-read.\--less span.icon {
position: relative;
width: 1.2rem;
height: 1.2rem;
cursor: pointer;
border: none;
margin-right: 2.2rem;
margin-left: 0.6rem;
}
.cta-read.\--more span.icon::before,
.cta-read.\--more span.icon::after,
.cta-read.\--less span.icon::before,
.cta-read.\--less span.icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 1.2rem;
height: 0.1rem;
background-color: #000000;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.cta-read.\--more:hover span.icon::after,
.cta-read.\--more:hover span.icon::before,
.cta-read.\--more:focus span.icon::after,
.cta-read.\--more:focus span.icon::before,
.cta-read.\--less:hover span.icon::after,
.cta-read.\--less:hover span.icon::before,
.cta-read.\--less:focus span.icon::after,
.cta-read.\--less:focus span.icon::before {
-webkit-transform: translate(-50%, -50%) rotate(23deg);
transform: translate(-50%, -50%) rotate(23deg);
}
.cta-read.\--more span.icon::before {
-webkit-transform: translate(-50%, -50%) rotate(90deg);
transform: translate(-50%, -50%) rotate(90deg);
}
.cta-read.\--more:hover span.icon::before,
.cta-read.\--more:focus span.icon::before {
-webkit-transform: translate(-50%, -50%) rotate(113deg);
transform: translate(-50%, -50%) rotate(113deg);
}
.cta-read--bg-white {
color: #ffffff;
}
.cta-read--bg-white span:before,
.cta-read--bg-white span:after {
background-color: #ffffff;
}
span.ripple {
position: absolute;
border-radius: 50%;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-animation: ripple 600ms linear;
animation: ripple 600ms linear;
background-color: rgba(240, 145, 146, 0.15);
}
.\--bg-grey span.ripple {
background-color: rgba(210, 210, 210, 0.4);
}
@-webkit-keyframes ripple {
to {
-webkit-transform: scale(4);
transform: scale(4);
opacity: 0;
}
}
@keyframes ripple {
to {
-webkit-transform: scale(4);
transform: scale(4);
opacity: 0;
}
}
.bouncy-transition {
-webkit-transition: 0.2s ease-out all 0.2s;
-o-transition: 0.2s ease-out all 0.2s;
transition: 0.2s ease-out all 0.2s;
}
.bouncy-transition:before,
.bouncy-transition:after {
-webkit-transition: all 0.6s cubic-bezier(0.46, -0.41, 0.3, 1.52) 0.1s;
-o-transition: all 0.6s cubic-bezier(0.46, -0.41, 0.3, 1.52) 0.1s;
transition: all 0.6s cubic-bezier(0.46, -0.41, 0.3, 1.52) 0.1s;
}
.btn-burger {
display: block;
width: 4rem;
height: 4rem;
position: relative;
border-radius: 0.8rem;
border: 0.1rem solid #767676;
background: #ffffff;
cursor: pointer;
}
.btn-burger:hover {
border-width: 0.2rem;
}
.btn-burger span {
display: block;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 2.4rem;
height: 0.1rem;
background: #767676;
border-radius: 0.6rem;
}
.btn-burger span:nth-child(1) {
top: 1.2rem;
}
.btn-burger span:nth-child(2) {
top: 1.8rem;
}
.btn-burger span:nth-child(3) {
top: 2.4rem;
}
.btn-close {
display: inline-block;
width: 2.3rem;
height: 2.3rem;
position: relative;
cursor: pointer;
}
.btn-close::before,
.btn-close::after {
content: "";
display: block;
position: absolute;
right: -1rem;
top: 70%;
/*top: 50%;*/
-webkit-transform: translate(0%, -50%) rotate(45deg);
transform: translate(0%, -50%) rotate(45deg);
width: 2.3rem;
height: 0.1rem;
background: #284632;
}
.btn-close::before {
-webkit-transform: translate(0%, -50%) rotate(-45deg);
transform: translate(0%, -50%) rotate(-45deg);
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #ffffff;
color: #000000;
z-index: 9999;
}
@media only screen and (min-width: 901px) {
.header.\--fixed .header__top {
height: 0;
opacity: 0;
visibility: hidden;
padding-top: 0;
}
}
@media only screen and (min-width: 901px) {
.header.\--scroll-up .header__top {
height: 7rem;
opacity: 1;
visibility: visible;
}
}
.header.\--search .header__mega {
min-height: 40rem;
}
.header.\--search .header__mega.\--scroll {
min-height: inherit;
}
.header.\--search .header__mega .header__link,
.header.\--search .header__mega .header__sub,
.header.\--search .header__mega .header__back {
display: none;
}
.header.\--search .header__mega .header__search {
display: block;
}
.header.\--search .header__search-icon.\--mobile {
border-width: 0.2rem;
}
@media only screen and (max-width: 900px) {
.header__mega.\--scroll {
overflow-y: auto;
min-height: inherit;
}
}
@media only screen and (max-width: 900px) {
.header.\--overlay .header__overlay {
opacity: 1;
visibility: visible;
z-index: 1;
}
.header.\--overlay .header__mega-wrapper,
.header.\--overlay .header__burger,
.header.\--overlay .header__search-icon.\--mobile {
position: relative;
z-index: 1;
}
}
.header a {
font-family: nexa, Arial, sans-serif;
font-size: 1.4rem;
line-height: 2rem;
color: #000000;
text-decoration: none;
}
.header ul {
list-style: none;
padding: 0;
}
@media only screen and (max-width: 900px) {
.header__overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
}
.header__top {
font-family: nexa, Arial, sans-serif;
font-size: 1.4rem;
line-height: 2rem;
height: 8.8rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-transition: height 0.3s ease-out;
-o-transition: height 0.3s ease-out;
transition: height 0.3s ease-out;
}
@media only screen and (max-width: 900px) {
.header__top {
padding: 0 1.7rem;
}
}
.header__logo {
max-width: 24.3654822335%;
}
@media only screen and (min-width: 901px) {
.header__logo {
width: 16.6666666667%;
}
}
.header__cta-buy {
text-align: center;
padding: 1rem 0.5rem;
min-width: 11.2rem;
}
@media only screen and (min-width: 901px) {
.header__cta-buy {
display: none;
}
}
.header__list {
display: none;
text-align: right;
}
@media only screen and (min-width: 901px) {
.header__list {
display: inline-block;
width: 66.6666666667%;
}
}
@media only screen and (min-width: 901px) {
.header__list li {
display: inline-block;
}
.header__list li:first-child {
padding-right: 6.4rem;
}
.header__list li:last-child::before {
content: "|";
display: inline;
padding: 0rem 1rem;
}
}
.header__list li a {
text-decoration: none;
}
.header__search {
position: relative;
z-index: 10000;
}
.header__search form {
margin: 0;
}
.header__search--top {
display: none;
}
.header__search.\--mobile {
position: relative;
top: 0;
right: 0;
width: calc(9/12 * 100%);
display: none;
}
@media only screen and (min-width: 901px) {
.header__search {
width: 16.6666666667%;
text-align: right;
}
.header__search--top {
display: block;
}
}
.header__search-content {
position: relative;
display: inline-block;
vertical-align: middle;
width: 4rem;
height: 4rem;
}
.\--mobile .header__search-content {
width: 100%;
}
.\--mobile .header__search-content .header__search-icon {
width: 1.2rem;
}
@media only screen and (min-width: 901px) {
.header__search-content {
height: 3.1rem;
}
.header__search-content:hover .header__search-input {
width: 16.4rem;
}
}
.header__search-icon {
position: absolute;
right: 0;
width: 4rem;
height: 4rem;
cursor: pointer;
background-color:inherit;
color: inherit;
border: none;
}
.header__search-icon.\--mobile {
display: block;
position: relative;
border: 0.1rem solid #767676;
border-radius: 0.8rem;
}
.header__search-icon.\--mobile:hover,
.header__search-icon.\--mobile:focus {
border-width: 0.2rem;
}
@media only screen and (min-width: 901px) {
.header__search-icon {
width: 3rem;
height: 2.7rem;
top: 0.2rem;
right: 0.4rem;
background: #ffffff;
z-index: 2;
}
.header__search-icon.\--mobile {
display: none;
}
}
.header__search-icon::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 1.4rem;
height: 1.4rem;
background-image: url("../images/icon/search.svg");
background-repeat: no-repeat;
background-size: cover;
z-index: 2;
}
.header__search.\--active .header__search-icon {
display: none;
}
.header__search-input[type=text] {
position: absolute;
right: 0;
z-index: 1;
width: calc(100% - 30px);
max-width: 22rem;
height: 4rem;
border: none;
border-radius: 0;
border-bottom: 0.1rem solid #d2d2d2;
padding: 0 1.2rem;
-webkit-transition: width 0.5s ease-in-out;
-o-transition: width 0.5s ease-in-out;
transition: width 0.5s ease-in-out;
overflow: hidden;
box-sizing: border-box;
}
.\--mobile .header__search-input {
padding-right: 2.5rem;
}
.header__search-input:focus,
.header__search-input[type=text].\--show {
outline: 0;
padding-right: 2.4rem;
}
@media only screen and (min-width: 901px) {
.header__search-input[type=text] {
width: 3.8rem;
height: 3.1rem;
border-radius: 0.8rem;
border: 0.1rem solid #000000;
}
.header__search.\--active .header__search-input[type=text] {
border-radius: 0;
margin: 0.8rem;
padding: 0;
width: 16.4rem;
border: none;
border-bottom: 0.1rem solid #000000;
}
.header__search-input:focus,
.header__search-input[type=text].\--show {
width: 16.4rem;
padding-right: 3.8rem;
}
}
@media only screen and (max-width: 900px) {
.header__search-input[type=text] {
text-align: right;
}
.header__search.\--active .header__search-input[type=text] {
padding-right: 0;
}
}
.header__search-autocomplete {
position: absolute;
top: 0;
width: 100%;
max-width: 26.4rem;
right: 0;
text-align: right;
background-color: #ffffff;
opacity: 0;
visibility: hidden;
}
@media only screen and (min-width: 901px) {
.header__search-autocomplete {
width: 26.4rem;
}
}
.header__search.\--active .header__search-autocomplete {
opacity: 1;
visibility: visible;
overflow: hidden;
}
.header__search.\--active:not(.\--mobile) .header__search-autocomplete {
border: 0.1rem solid #000000;
border-radius: 0.8rem;
}
.header__search-autocomplete ul {
list-style: none;
margin: 5.6rem 0 0;
color: #767676;
overflow-y: auto;
}
@media only screen and (min-width: 901px) {
.header__search-autocomplete ul {
padding-left: 1.2rem;
padding-right: 1.2rem;
}
}
.header__search-autocomplete ul li {
padding-bottom: 0.8rem;
font-size: 1.6rem;
line-height: 2.6rem;
}
.header__search-autocomplete ul li:hover,
.header__search-autocomplete ul li:focus {
color: #000000;
}
@media only screen and (min-width: 901px) {
.header__burger {
display: none;
}
}
.header__bar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 1.6rem;
}
@media only screen and (min-width: 901px) {
.header__bar {
display: none;
}
}
.header__bar-home {
font-size: 1.2rem;
line-height: 1.6rem;
}
.header__back {
position: relative;
font-size: 1.2rem;
line-height: 1.6rem;
width: 100%;
opacity: 0;
visibility: hidden;
color: #767676;
}
.level-0 .header__back,
.level-1 .header__back {
opacity: 1;
visibility: visible;
}
.header__back-icon {
position: relative;
}
.header__back-icon::before {
content: "";
display: inline-block;
position: absolute;
top: 50%;
left: 0;
width: 0.6rem;
height: 1.2rem;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
-webkit-transform: translate(0%, -50%) rotate(180deg);
transform: translate(0%, -50%) rotate(180deg);
}
.header__back .header__back-home {
font-family: loos, Arial, sans-serif !important;
padding-right: 1.6rem;
color: #767676;
}
.header__back span {
padding-left: 2.4rem;
}
.header__link {
position: relative;
list-style: none;
margin: 0;
}
@media only screen and (min-width: 901px) {
.header__link {
max-width: 122.4rem;
margin: 0 auto;
height: 5.6rem;
}
}
.level-0 .header__link,
.level-1 .header__link {
display: none;
}
.header__link-item {
padding-top: 2rem;
}
@media only screen and (max-width: 900px) {
.header__link-item:first-child {
padding-top: 0;
}
}
.header__link-item.\--active a {
border-bottom: 1px solid #d31d3f;
font-weight: bold;
}
.header__link-item.\--btn {
display: none;
line-height: 0;
}
.header__link-item.\--btn a:hover {
border: none;
}
@media only screen and (min-width: 901px) {
.header__link-item {
display: inline-block;
padding: 1.7rem 0;
margin-right: calc(64 / 1224 * 100%);
}
.header__link-item > a {
display: inline-block;
}
.header__link-item:last-child {
padding-right: 0;
}
.header__link-item.\--btn {
position: absolute;
display: inline-block;
top: 50%;
right: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
margin-right: 0;
}
}
@media only screen and (min-width: 900px) and (max-width: 1000px) {
.header__link-item {
margin-right: calc(32 / 1224 * 100%);
}
}
.header__link a:hover {
border-bottom: 1px solid #d31d3f;
text-shadow: 0px 0px 1px #000000;
}
.header__mega {
/*position: relative;*/
display: none;
padding: 1.7rem 1.7rem 4rem;
border-radius: 0.8rem;
-webkit-box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.32);
box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.32);
}
.header__mega-content {
position: relative;
height: 4rem;
}
@media only screen and (min-width: 901px) {
.header__mega {
display: block;
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 0;
padding: 0;
}
}
.header__sub {
margin-left: -1.5rem;
margin-right: -1.5rem;
}
.header__sub-content {
display: none;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.header__sub-content.\--active {
display: block;
opacity: 1;
visibility: visible;
}
.header__sub-content .tab__content {
position: relative;
display: none;
opacity: 0;
visibility: hidden;
line-height: 1;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.header__sub-content .tab__content.\--active {
display: block;
opacity: 1;
visibility: visible;
}
.header__sub-content .tab__item.\--active a {
padding-bottom: 0.5rem;
border-bottom: 1px solid #d31d3f;
font-weight: bold;
}
.header__sub-content .tab__link {
display: none;
}
.level-0 .header__sub-content .tab__link {
display: block;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
@media only screen and (min-width: 901px) {
.header__sub-content .tab__link {
display: block;
}
}
.header__sub-content .card__list {
margin-bottom: 0;
margin-top: 2rem;
}
.header__sub-content .card__list li {
margin-bottom: 1.6rem;
}
.header__sub-content .card__list li:last-child {
margin-bottom: 0;
}
.header__sub-content .card__content .cta-button {
margin-top: 2.4rem;
}
.header__sub-content .card__content .title-h3 {
margin-top: 1.6rem;
margin-bottom: 1.6rem;
}
.header__sub-content .card__header {
font-size: 1.4rem;
line-height: 2.2rem;
text-transform: uppercase;
}
.header__sub-content .card .picture-line {
display: none;
}
.header__sub.\--scroll {
overflow-y: auto;
}
@media only screen and (min-width: 901px) {
.header__sub {
position: absolute;
top: 5rem;
left: -4rem;
width: 100%;
height: auto;
margin: inherit;
max-width: 130.4rem;
z-index: 9999;
}
.header__sub-content {
padding: 2.4rem 4rem 4rem;
-webkit-box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.16);
box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.16);
border-radius: 0.8rem;
background-color: #ffffff;
}
.header__sub-content.\--active {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
}
.header__sub .card {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 0.5rem;
}
.header__sub .card__content {
width: 45.2173913043%;
margin-right: 2.4rem;
margin-left: 2.4rem;
}
.header__sub .card__content .cta-button {
margin-top: 3rem;
}
.header__sub .card__image {
width: 53.9130434783%;
}
.header__sub .card__header {
display: none;
}
.header__sub .card .title-h3 {
margin-top: 0;
}
.header__sub .card .line1 {
display: none;
}
.header__sub .card .picture-line {
display: block;
}
.header__sub.\--scroll {
max-width: 132rem;
padding: 0.4rem 0.8rem;
width: calc(100% + 16px);
left: -0.8rem;
}
}
@media only screen and (min-width: 1320px) {
.header__sub {
width: calc(100% + 80px);
}
.header__sub.\--scroll {
width: calc(100% + 96px);
max-width: 132rem;
left: -4.8rem;
}
}
@media only screen and (max-width: 1319px) {
.header__sub {
left: 0;
}
}
@media only screen and (max-width: 900px) {
.header__sub {
display: none;
}
.level-0 .header__sub,
.level-1 .header__sub {
display: block;
}
}
.header__sub-tab {
width: calc(9/12 * 100%);
}
@media only screen and (min-width: 901px) {
.header__sub-tab {
width: 16.6666666667%;
margin-right: 2.4rem;
}
}
.header__sub-tab ul {
list-style: none;
padding: 0;
margin: 0;
}
.header__sub-tab li {
display: block;
padding-bottom: 2rem;
}
.header__sub-tab li:last-child {
padding-bottom: 0;
}
.header__sub-tab li.dropdown {
position: relative;
padding-right: 4rem;
}
.header__sub-tab li:hover a,
.header__sub-tab li:focus a {
border-bottom: 1px solid #d31d3f;
font-weight: bold;
padding-bottom: 0.5rem;
}
.header__sub-tab li.dropdown.\--active::after,
.header__sub-tab li.dropdown:hover::after,
.header__sub-tab li.dropdown:focus::after {
background-image: url('data:image/svg+xml;utf8,');
}
.header__sub-tab li.dropdown::after {
content: "";
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
display: inline-block;
width: 0.6rem;
height: 1.7rem;
margin-top: -0.4rem;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
}
@media only screen and (max-width: 900px) {
.header__sub-tab li.dropdown::after {
margin-top: -1rem;
}
}
.header__sub-text {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
@media only screen and (min-width: 901px) {
.header__sub-text {
padding: unset;
overflow: hidden;
width: 83.3333333333%;
}
}
.footer {
background-color: #f2f2f2;
margin-top: 2.4rem;
}
body .footer {
padding: 0;
border: none;
}
body > .footer a:hover {
color: inherit;
text-decoration: none;
}
.footer::before {
content: "";
display: block;
height: 0.4rem;
width: 100%;
background-color: #767676;
}
@media only screen and (min-width: 901px) {
.footer {
padding: 0;
}
}
.footer a {
color: #000000;
text-decoration: none;
}
.footer ul {
padding: 0;
margin: 0;
}
.footer ul li {
list-style: none;
}
.footer .title-h2 {
margin-bottom: 1rem;
}
.footer .title-h3 {
margin-top: 0;
margin-bottom: 2rem;
}
.footer__container {
position: relative;
}
.footer__logo {
position: absolute;
top: -2.4rem;
right: 0;
}
.footer__logo .img-balloon {
width: 15.2rem;
height: 15.2rem;
}
@media only screen and (min-width: 901px) {
.footer__logo .img-balloon {
width: 20.6rem;
height: 20.6rem;
}
}
.footer__content {
padding: 10rem 0 0.5rem;
}
@media only screen and (min-width: 901px) {
.footer__content {
padding: 4rem 0 5.8rem;
}
}
.footer__top-cta {
margin-top: 0.8rem;
}
.footer__top-shop {
margin-top: 3.5rem;
}
@media only screen and (min-width: 901px) {
.footer__top-shop {
margin-top: 0;
}
}
.footer__top-shop .cta-button {
margin-top: 2rem;
}
@media only screen and (min-width: 901px) {
.footer__top-shop .cta-button {
margin-top: 1rem;
}
}
.footer__link {
margin-top: 3.5rem;
}
.footer__social {
margin-bottom: 3rem;
}
@media only screen and (min-width: 901px) {
.footer__social {
margin-top: 1.6rem;
margin-bottom: 0;
}
}
.footer__social-item {
display: inline-block;
margin-right: 1.6rem;
}
@media only screen and (max-width: 900px) {
.footer__social-item.\--btn {
display: block;
margin-bottom: 1rem;
}
}
.footer__social-item:last-child {
margin-right: 0;
}
.footer__bottom {
font-size: 1.4rem;
background: #d2d2d2;
color: #000000;
padding: 3.8rem 0;
}
.footer__bottom ul li {
display: inline-block;
line-height: 2.4rem;
}
.footer__bottom ul li::after {
content: "|";
display: inline-block;
padding: 0rem 1.5rem;
}
@media only screen and (min-width: 901px) {
.footer__bottom ul li::after {
padding: 0rem 1.8rem;
}
}
.footer__bottom ul li:last-child::after {
content: "";
}
.footer__link-content {
margin-bottom: 3.5rem;
}
@media only screen and (min-width: 901px) {
.footer__link-content {
margin-bottom: 4.8rem;
}
}
.footer .link {
display: none;
}
.footer .link__item {
margin-bottom: 2rem;
}
.footer .link__item:last-child {
margin-bottom: 0;
}
@media only screen and (min-width: 901px) {
.footer .link {
display: block;
}
}
.footer__copyright {
line-height: 2.4rem;
}
@media only screen and (min-width: 901px) {
.footer__copyright {
text-align: right;
}
}
.bread-crum.\--sticky {
position: fixed;
top: 8rem;
left: 0;
width: 100%;
background-color: #ffffff;
z-index: 9998;
}
@media only screen and (min-width: 901px) {
.bread-crum.\--sticky {
top: 5.6rem;
}
.bread-crum.\--sticky-up {
top: 12.6rem;
}
}
.bread-crum > * {
color: #767676;
font-size: 1.2rem;
line-height: 1.6rem;
}
.bread-crum__item {
position: relative;
display: none;
padding: 1rem 1.6rem 1rem 2.2rem;
}
.bread-crum__item:nth-last-child(2) {
display: inline-block;
margin-left: 1.6rem;
font-weight: bold;
}
.bread-crum__item:last-child {
padding-right: 0;
font-weight: bold;
}
.bread-crum__item::before {
content: "";
position: absolute;
width: 0.5rem;
height: 1.3rem;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
.bread-crum__item a {
color: inherit;
text-decoration: none;
}
@media only screen and (min-width: 901px) {
.bread-crum__item:nth-child(n) {
display: inline-block;
margin: 0;
font-weight: normal;
}
.bread-crum__item:first-child {
padding-left: 0;
}
.bread-crum__item:first-child::before {
display: none;
}
.bread-crum__item:last-child {
font-weight: bold;
}
}
.picture-line {
position: relative;
width: 100%;
border-radius: 0.8rem;
overflow: hidden;
-webkit-transition: 0.4s all ease-in-out;
-o-transition: 0.4s all ease-in-out;
transition: 0.4s all ease-in-out;
}
@media only screen and (min-width: 901px) {
.picture-line {
display: inline-block;
}
}
.picture-line img {
-o-object-fit: cover;
object-fit: cover;
width: 100%;
height: 100%;
border-radius: 0.8rem;
-webkit-transition: 0.4s all ease-in-out;
-o-transition: 0.4s all ease-in-out;
transition: 0.4s all ease-in-out;
}
@media only screen and (min-width: 901px) {
.picture-line.\--radius-16 img {
border-radius: 1.6rem;
}
.picture-line.\--radius-16::after {
left: 0.5rem;
width: calc(100% - 10px);
}
}
.picture-line::after {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 1rem;
background-image: url("../images/text/line.svg");
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
}
@media only screen and (min-width: 901px) {
.picture-line .label-line {
top: 3.2rem;
}
}
.picture-line:hover {
-webkit-box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.24);
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.24);
}
.picture-line:hover::before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 100%;
background: #d2d2d2;
opacity: 0.56;
mix-blend-mode: multiply;
z-index: 1;
}
.picture-line:hover img {
-webkit-transform: scale(1.08);
transform: scale(1.08);
}