/* Typographic ========================================================================== */ a { transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease, transform 0.3s ease; } .content { font-size: 16px; color: #7b7674; } .content p:not(:last-of-type) { margin-bottom: 30px; } img { max-width: 100%; } /* grid ========================================================================== */ .row { display: flex; align-items: center; margin-left: -5px; margin-right: -5px; } .col-6 { width: 50%; padding-left: 5px; padding-right: 5px; } /* button ========================================================================== */ .button { position: relative; font-size: 20px; color: #fff; font-weight: 700; text-align: center; display: inline-flex; align-items: center; min-width: 420px; height: 50px; border-radius: 10px; justify-content: center; background-image: linear-gradient(to right, #e7a693, #cc7d64); overflow: hidden; } .button::before { position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 0; content: ""; display: none; background-color: rgba(0, 0, 0, 0.25); } .button:hover::before { display: block; } .button_ghost { display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid #c9c6c5; font-weight: 700; font-size: 16px; line-height: 1; color: #7b7674; padding: 12px 20px; min-width: 230px; } .button_ghost:hover { background-image: linear-gradient(to right, #e7a693, #cc7d64); border-color: transparent; color: #ffffff; } .button.block { width: 100%; min-width: 0; max-width: 100%; } /* Input Search ========================================================================== */ .input-search-wrap { position: relative; overflow: hidden; } .input-search { display: block; width: 100%; padding-top: 2px; padding-bottom: 2px; padding-left: 20px; padding-right: 36px; line-height: 28px; font-size: 14px; border: 1px solid #938e92; border-radius: 40px; outline: none; background-color: #fff; } .input-search:focus { border-color: #ba6145; } .btn_search { position: absolute; z-index: 3; top: 0; bottom: 0; right: 0; outline: none; border: none; text-indent: -999999px; width: 40px; background: url("../images/adron/icon-search.png") no-repeat center; } .btn_search:focus { outline: none; } /* Section ========================================================================== */ .section { background-color: #fefefe; padding-top: 60px; padding-bottom: 60px; } .section.no-padding { padding: 0; } .section.section--grey-100 { background-color: #f8f8f8; } .section.section--grey-200 { background-color: #ececec; } .section.section--orange-with-pattern { background: url("../images/style/bg-pattern.png") repeat center; background-color: #d3785c; } .section__header { display: flex; align-items: center; padding: 20px 0; margin-bottom: 40px; } .section__header .title { margin-right: auto; font-size: 24px; font-weight: 700; color: #7b7674; } .section__title_holder { text-align: center; color: #7b7674; font-size: 22px; margin-bottom: 40px; } .section__title_holder .title { font-size: 24px; font-weight: 700; } .section .icon_moon { height: 10px; } .section .btn_holder { margin: 20px 0; display: flex; justify-content: center; } .section .content_holder { font-weight: 300; font-size: 18px; padding-top: 30px; } .section .content_holder .title { font-size: 22px; font-weight: 700; letter-spacing: -1px; margin-bottom: 70px; text-align: center; } .section .content_holder p { margin-bottom: 25px; } .section .content_holder .strong { font-size: 22px; font-weight: 700; text-align: center; } /* Bling Title ========================================================================== */ .bling-title { font-family: "MADECanvas", sans-serif; max-width: 450px; font-weight: 900; font-size: 108px; line-height: 91px; padding-top: 16px; padding-bottom: 16px; background-clip: text; -webkit-background-clip: text; color: transparent; background-image: url("../images/style/bling-text-clip.jpg"); background-position: center; background-size: cover; } .bling-title.text-medium { font-size: 82px; letter-spacing: -1px; line-height: 80px; } .bling-title.text-small { font-size: 75px; line-height: 72px; } .bling-title.text-mini { font-size: 54px; line-height: 60px; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .bling-title { background-image: none !important; color: #ba6145 !important; } } /* hr ========================================================================== */ .hr-short-orange { display: block; height: 1px; width: 18px; background-color: #d5a197; } .hr-short-grey { display: block; height: 1px; width: 15px; background-color: #909090; } .hr-tiny-grey { display: block; height: 2px; width: 10px; background-color: #a8a5a5; } /* pagination ========================================================================== */ .pagination { display: flex; } .pagination .paginator { display: flex; align-items: flex-end; margin-right: auto; } .pagination .paginator__item:not(:first-of-type) { margin-left: 10px; } .pagination .paginator__item > a { display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: #7b7674; font-weight: 600; font-family: "Montserrat", sans-serif; width: 24px; height: 24px; border-radius: 50%; background-color: #eeeeee; padding-top: 1px; overflow: hidden; } .pagination .paginator__item > a:hover { color: #ba6145; } .pagination .paginator__item.current > a { width: 32px; height: 32px; background-color: #ba6145; color: #fff; font-size: 20px; outline: none; } .pagination .paginator__item-more { width: 24px; height: 24px; margin-left: 10px; } .pagination .paginator__item-more::before { content: "......"; color: #7b7674; } .pagination_btn-next { display: block; align-self: flex-end; outline: none; } .pagination_btn-next:hover { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); } .pagination_btn-next.disabled { cursor: not-allowed; opacity: 0.5; } /* breadcrumb ========================================================================== */ .breadcrumb { display: flex; align-items: center; font-size: 18px; color: #7b7674; overflow: hidden; } .breadcrumb__link { display: block; white-space: nowrap; font-weight: 700; } .breadcrumb__link:hover { text-decoration: underline; } .breadcrumb__item { display: block; max-width: 490px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .breadcrumb__separator { display: block; font-weight: 700; margin: 0 50px; } .breadcrumb.narrow .breadcrumb__separator { margin: 0 10px; } /* video_player ========================================================================== */ .video_player { box-shadow: 0 40px 30px rgba(0, 0, 0, 0.5); padding-bottom: 146px; border-radius: 10px; } .video_player .video-js.vjs-fluid, .video_player .video-js.vjs-16-9, .video_player .video-js.vjs-4-3 { border-top-left-radius: 10px; border-top-right-radius: 10px; } .video_player .video-js .vjs-tech:focus { outline: none; } .video_player .video-js .vjs-poster { background-size: cover; border-top-left-radius: 10px; border-top-right-radius: 10px; overflow: hidden; } .video_player .video-js .vjs-big-play-button { top: 50%; left: 50%; width: 146px; height: 146px; transform: translate(-50%, -50%); border: none; background: url("../images/adron/icon_video_play_btn_orange.png") no-repeat; background-size: 100%; background-position: center; background-color: transparent; border-radius: 50%; outline: none; } .video_player .video-js .vjs-big-play-button > .vjs-icon-placeholder { display: none; } .video_player .video-js .vjs-control-bar { display: flex; height: 146px; visibility: visible !important; opacity: 1 !important; align-items: center; padding-left: 45px; padding-right: 40px; background: url("../images/style/bg-pattern.png") no-repeat; background-color: #1d1919; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; position: absolute; top: 100%; bottom: auto; } .video_player .video-js .vjs-control:focus { outline: none; } .video_player .video-js .vjs-control.vjs-progress-control, .video_player .video-js .vjs-control.vjs-remaining-time, .video_player .video-js .vjs-play-control .vjs-icon-placeholder:before { display: flex; justify-content: center; align-items: center; } .video_player .video-js .vjs-play-control { width: 55px; height: 55px; border-radius: 50%; border: 1px solid #b09a6c; margin-right: 24px; } .video_player .video-js .vjs-progress-holder { height: 14px; border-radius: 14px; background-color: #3b3737; } .video_player .video-js .vjs-load-progress, .video_player .video-js .vjs-load-progress div { border-radius: 12px; } .video_player .video-js .vjs-play-progress.vjs-slider-bar { border-radius: 14px; background-image: linear-gradient(to right, #e7a693, #d3795e); } .video_player .video-js .vjs-play-progress:before { font-size: 28px; top: -0.26em; } .video_player .video-js .vjs-current-time { display: flex; justify-content: center; align-items: center; margin-right: 4px; } .video_player .video-js .vjs-current-time, .video_player .video-js .vjs-remaining-time { color: #d3795e; font-size: 14px; } /* license_slider ========================================================================== */ .license_slider { position: relative; } .license_slider .swiper-slide { position: relative; width: 33.59375%; margin-bottom: 40px; border-radius: 10px; overflow: hidden; cursor: pointer; } .license_slider .swiper-slide .img_holder { height: 520px; } .license_slider .swiper-slide .img_holder img { width: 100%; height: 100%; object-fit: cover; } .license_slider .swiper-slide .content_holder { opacity: 0; position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; background-color: #fff; height: 100px; display: flex; align-items: center; justify-content: center; padding: 20px 10px; font-size: 14px; font-weight: 300; color: #7b7674; transform: translateY(120%); transition: transform 0.3s ease; } .license_slider .swiper-slide::before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; background-color: rgba(0, 0, 0, 0.25); } .license_slider .swiper-slide.swiper-slide-prev::before, .license_slider .swiper-slide.swiper-slide-next::before { background-color: rgba(0, 0, 0, 0.125); } .license_slider .swiper-slide.swiper-slide-active::before { display: none; } .license_slider .swiper-slide.swiper-slide-active { box-shadow: 0 6px 40px rgba(0, 0, 0, 0.125); } .license_slider .swiper-slide.swiper-slide-active:hover .content_holder { opacity: 1; transform: translateY(0); } .license_slider .swiper-button-prev, .license_slider .swiper-button-next { width: 60px; height: 27px; background-size: 100%; } .license_slider .swiper-button-prev:hover, .license_slider .swiper-button-next:hover { filter: brightness(2); } .license_slider .swiper-button-prev { left: 15.5%; background-image: url("../images/adron/icon_slider_btn_prev.png"); } .license_slider .swiper-button-next { right: 15.5%; background-image: url("../images/adron/icon_slider_btn_next.png"); } /* advantage_slider ========================================================================== */ .advantage_slider { margin-bottom: 16px; } .advantage_slider .swiper-slide { margin-bottom: 42px; } .advantage_slider .swiper-slide .img_holder { border-radius: 10px; overflow: hidden; background-color: #ddd; height: 295px; } .advantage_slider .swiper-slide .img_holder img { height: 100%; width: 100%; object-fit: cover; } .advantage_slider .swiper-pagination-bullet-active { background-color: #ba6145; } /* custom_scroller ========================================================================== */ #custom_scroller::-webkit-scrollbar { width: 0px; background: transparent; /* make scrollbar transparent */ } /* capability_slider ========================================================================== */ .capability_slider { margin-bottom: 16px; } .capability_slider .swiper-slide { margin-bottom: 42px; } .capability_slider .swiper-slide .img_holder { border-radius: 10px; overflow: hidden; background-color: #ddd; height: 295px; } .capability_slider .swiper-slide .img_holder img { height: 100%; width: 100%; object-fit: cover; } .capability_slider .swiper-pagination-bullet-active { background-color: #fff; } /* products_panel ========================================================================== */ .products_panel:not(:first-of-type) { border-top: 1px solid #ebebeb; } .products_panel .panel_header { display: flex; align-items: center; padding-top: 60px; margin-bottom: 60px; } .products_panel .panel_header .title_box { display: flex; align-items: center; } .products_panel .panel_header .title_box .icon_holder { height: 50px; } .products_panel .panel_header .title_box .icon_holder img { max-height: 100%; } .products_panel .panel_header .title_box .text_holder { padding-left: 60px; color: #7b7674; } .products_panel .panel_header .title_box .text_holder .title { font-weight: 600; font-family: "Montserrat", sans-serif; font-size: 20px; line-height: 1; margin-bottom: 5px; } .products_panel .products-list { display: flex; flex-wrap: wrap; margin-left: -13px; margin-right: -13px; margin-bottom: 24px; } .products_panel .products-list .list_item { padding: 0 13px; width: 25%; margin-bottom: 26px; } .products_panel .products-list .list_item_link { position: relative; display: block; border-radius: 10px; overflow: hidden; background-color: #eeeeee; height: 500px; width: 100%; } .products_panel .products-list .list_item_link .img_holder { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; padding-bottom: 40px; } .products_panel .products-list .list_item_link .img_holder > img { max-width: 90%; max-height: 90%; } .products_panel .products-list .list_item_link .text_holder { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; height: 190px; display: flex; overflow: hidden; align-items: center; justify-content: center; } .products_panel .products-list .list_item_link .text_holder .pattern_mask { position: absolute; width: 840px; height: 840px; border-radius: 50%; background-color: #f9f9f9; overflow: hidden; top: 0; left: -180px; z-index: 0; transition: background-color ease 0.3s; } .products_panel .products-list .list_item_link .content { position: relative; z-index: 6; text-align: center; font-size: 15px; padding-top: 20px; } .products_panel .products-list .list_item_link .content .type { font-weight: 600; font-family: "Montserrat", sans-serif; font-size: 16px; } .products_panel .products-list .list_item_link .content .link_icon { display: inline-block; margin-top: 25px; width: 16px; height: 6px; background: url(../images/adron/icon_arrow_right_grey_link.png) no-repeat; background-position: left center; } .products_panel .products-list .list_item_link:hover { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); transform: translateY(-10px); } .products_panel .products-list .list_item_link:hover .pattern_mask { background-color: #d57e64; background-image: url("../images/style/bg-pattern.png"); } .products_panel .products-list .list_item_link:hover .content .link_icon { background-image: url(../images/adron/icon_arrow_right_small_orange.png); } .products_panel .products-list .list_item_link:hover .content { color: #fbc7b6; } .products_panel .panel_footer { padding-bottom: 65px; } /* gallery_list ========================================================================== */ .gallery_list { display: flex; flex-wrap: wrap; margin-left: -13px; margin-right: -13px; } .gallery_list .list_item { width: 33.33333333333%; padding: 0 13px; } .gallery_list .list_item:nth-of-type(3n + 2) .gallery_box.small { order: -1; } .gallery_list .gallery_box_col { display: flex; flex-direction: column; } .gallery_list .gallery_box { position: relative; border-radius: 10px; overflow: hidden; background-position: center; background-size: cover; background-repeat: no-repeat; width: 100%; margin-top: 13px; margin-bottom: 13px; display: flex; align-items: flex-end; } .gallery_list .gallery_box::before, .gallery_list .gallery_box::after { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 9; content: ""; display: block; background-color: rgba(0, 0, 0, 0.3); transition: opacity 0.3s ease; cursor: pointer; } .gallery_list .gallery_box::before { z-index: 9; background-color: rgba(0, 0, 0, 0.4); } .gallery_list .gallery_box::after { z-index: 12; background: url("../images/adron/icon_link.png") no-repeat; background-position: center; } .gallery_list .gallery_box:hover { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } .gallery_list .gallery_box:hover::before, .gallery_list .gallery_box:hover::after { opacity: 0; } .gallery_list .gallery_box.big { height: 710px; background-image: url("../images/style/gallery_box_big_bg.png"); } .gallery_list .gallery_box.small { height: 425px; background-image: url("../images/style/gallery_box_small_bg.png"); } .gallery_list .gallery_box .img_holder { width: 100%; max-height: 60%; display: flex; justify-content: center; } .gallery_list .gallery_box .img_holder img { display: inline-block; max-width: 100%; max-height: 100%; } .gallery_list .gallery_box .img_holder.img-cover { max-height: 100%; height: 100%; } .gallery_list .gallery_box .img_holder.img-cover img { width: 100%; height: 100%; object-fit: cover; } .gallery_list .gallery_box .text_holder { position: absolute; top: 0; left: 0; right: 0; z-index: 3; color: #ffffff; font-size: 22px; padding: 45px 20px 20px 40px; } .gallery_list .gallery_box .mask_tl_new { position: absolute; top: 0; left: 0; z-index: 3; width: 95px; height: 85px; background: url(../images/style/bg-ribbon_new_small.png) no-repeat bottom right; } .gallery_list .gallery_box .mask_tl_new + .description { padding-top: 85px; } .gallery_list .gallery_box .text_holder .name { font-weight: 700; font-size: 24px; line-height: 1.35; } .gallery_list .gallery_box .text_holder .icon_link { margin-top: 55px; } /* hamburger btn ========================================================================== */ .hamburger_btn { position: relative; width: 26px; height: 12px; } .hamburger_btn_line { position: absolute; z-index: 3; left: 0; right: 0; display: block; height: 1px; width: 100%; background-color: #edd5cd; transform-origin: center; transition: transform ease 0.45s; } .hamburger_btn_line:first-of-type { top: 0; } .hamburger_btn_line:last-of-type { bottom: 0; } .hamburger_btn.active .hamburger_btn_line:first-of-type { transform: translateY(5.5px) rotate(45deg); } .hamburger_btn.active .hamburger_btn_line:last-of-type { transform: translateY(-5.5px) rotate(-45deg); } /* m_page_nav ========================================================================== */ .m_page_nav { position: relative; z-index: 40; } .m_page_nav.active .m_page_nav__lable .value { display: none; } .m_page_nav.active::before, .m_page_nav.active .m_page_nav__lable .placeholder { display: block; } .m_page_nav.active .m_page_nav__options { transform: translateY(0); opacity: 1; } .m_page_nav::before { content: ""; display: none; background-color: rgba(0, 0, 0, 0.7); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .m_page_nav .icon { height: 28px; width: 28px; background-size: contain; background-position: center center; display: inline-block; vertical-align: middle; background-repeat: no-repeat; margin-right: 4px; } .m_page_nav .m_page_nav__options .icon_all { background-size: 60%; background-image: url(../images/adron/icon_all.png); } .m_page_nav .m_page_nav__options .icon_hair_care { background-image: url(../images/adron/icon_hair_care.png); } .m_page_nav .m_page_nav__options .icon_personal_care { background-image: url(../images/adron/icon_personal_care.png); } .m_page_nav .m_page_nav__options .icon_mouth_care { background-image: url(../images/adron/icon_mouth_care.png); } .m_page_nav .m_page_nav__options .icon_hairdryer { background-image: url(../images/adron/icon_hairdryer.png); } .m_page_nav .m_page_nav__options .icon_clothing_care { background-image: url(../images/adron/icon_clothing_care.png); } .m_page_nav .m_page_nav__lable .icon_all { background-size: 60%; background-image: url(../images/adron/icon_all-white.png); } .m_page_nav .m_page_nav__lable .icon_hair_care { background-image: url(../images/adron/icon_hair_care-white.png); } .m_page_nav .m_page_nav__lable .icon_personal_care { background-image: url(../images/adron/icon_personal_care-white.png); } .m_page_nav .m_page_nav__lable .icon_mouth_care { background-image: url(../images/adron/icon_mouth_care-white.png); } .m_page_nav .m_page_nav__lable .icon_hairdryer { background-image: url(../images/adron/icon_hairdryer-white.png); } .m_page_nav .m_page_nav__lable .icon_clothing_care { background-image: url(../images/adron/icon_clothing_care-white.png); } .m_page_nav__lable { padding: 12px 16px; background-color: #d3785d; color: #fff; font-size: 16px; line-height: 1; display: block; width: 100%; position: relative; z-index: 6; line-height: 28px; } .m_page_nav__lable .value { display: flex; align-items: center; justify-content: space-between; } .m_page_nav__lable .value .text { display: flex; align-items: center; } .m_page_nav__lable .value .icon_arrow { display: block; width: 8px; height: 8px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; transform: rotate(-45deg); } .m_page_nav__lable .placeholder { text-align: center; display: none; } .m_page_nav__options { transform: translateY(-160%); opacity: 0; position: absolute; top: 100%; left: 0; right: 0; background-color: #fff; z-index: 3; transition: transform ease 0.5s, opacity ease 0.3s; } .m_page_nav__options a { display: block; padding: 12px 16px; color: #7b7674; font-weight: 700; font-weight: 14px; line-height: 28px; } .m_page_nav__options a.active { color: #d3785d; background-color: rgba(0, 0, 0, 0.08); }