html { font-size: 62.5%; overflow-x: hidden; } body { font-family: "Inter", "Arial", sans-serif; font-size: 1.6rem; font-weight: 400; line-height: 1; color: #1b1d21; overflow-x: hidden; font-variant-numeric: lining-nums; } a { text-decoration: none; } ul { list-style: none; } img { max-width: 100%; height: auto; border: 0; } p { line-height: 1.4; } h1, h2, h3 { } h2 { font-size: 3.6rem; font-weight: 600; color: #353941; font-family: "Playfair Display", serif; }  input { font-family: inherit; color: inherit; padding: 1.5rem 2rem; font-size: 1.5rem; } input::placeholder { color: #e3e5e8; font-weight: 300; font-size: 1.4rem; } input[type=search]::-ms-clear { display: none; ширина: 0; высота: 0; } input[type=search]::-ms-reveal { display: none; ширина: 0; высота: 0; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type ="поиск"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; } .btn { font: inherit; text-align: center; vertical-align: middle; border: none; } .visually-hidden:not(:focus):not(:active), input[type="file"].visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; white-space: nowrap; clip-path: inset(100%); clip: rect(0 0 0 0); overflow: hidden; } .text { line-height: 1.4; } .text-bold { font-weight: 600; } .container { max-width: 128rem; margin: 0 auto; padding-right: 15px; padding-left: 15px; } .section { padding: 9.6rem 3.2rem; } .grid { display: grid; column-gap: 3.2rem; row-gap: 6.4rem; }  .grid-3-cols { grid-template-columns: repeat(3, 1fr); column-gap: 4.4rem; } .grid-4-cols { grid-template-columns: repeat(4, 1fr); column-gap: 3.6rem; }  .header { position: fixed; top: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; width: 100%; height: 9rem; padding: 0 6.4rem; background-color: rgba(255,255,255,0.7); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.5); box-shadow: 0 2px 3px rgb(0 0 0 / 5%); } .logo { display: block; height: 3rem; } .logo-alternate { display: none; height: 3rem; }  .header-nav-list { display: flex; position: relative; } .header-nav-list li { line-height: 9rem; } .header-nav-link { display: block; padding: 0 1.8rem; font-weight: 500; color: #212529; transition: color 0.3s ease-out; } .header-nav-link:hover { color: #51ab99; } .submenu { min-width: 27rem; display: block; position: absolute; z-index: 100; top: 16rem; border-radius: 0.2rem; border-top: 1px solid #FFFFFF; background-color: rgba(255,255,255,0.97); box-shadow: 0 0 15px rgb(0 0 0 / 10%); opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.3s ease-out; } .submenu::before{ content: ""; position: absolute; top: -2.4rem; left: 3rem; border: 1.2rem solid transparent; border-bottom-color: #FFFFFF; } .header-nav-list li:hover > .submenu{ top: 9rem; opacity: 1; visibility: visible; pointer-events: auto; } .submenu li:last-child { margin-bottom: 1.6rem; } .submenu li:first-child { margin-top: 1.6rem; } .submenu li { line-height: 4.5rem; padding-right: 3.6rem; padding-left: 2.4rem; border-left: 6px solid rgba(90,190,170,0.00); transition: all 0.3s ease-out; } .submenu li:hover { border-left: 6px solid #5abeaa; } .submenu-link { display: block; font-size: 1.5rem; font-weight: 400; color: #69737D; transition: all 0.3s ease-out; } .submenu-link:hover { color: #212529; text-shadow: 0 0 .65px #212529; -o-transform: translateX(5px); -ms-transform: translateX(5px); -moz-transform: translateX(5px); -webkit-transform: translateX(5px); transform: translateX(5px); } .header-nav-list li{ position: relative; } .submenu .submenu{ left: 100%; margin-top: -17px; top: 8rem; } .header-nav-list > li > .submenu > li .submenu::before{ content: ""; position: absolute; top: 2.4rem; left: -2.4rem; border: 1.2rem solid transparent; border-bottom-color: #fff; transform: rotate(270deg); } .header-nav-list > li > .submenu > li:hover .submenu{ top: 0; opacity: 1; visibility: visible; pointer-events: auto; } .header-nav-right { display: flex; align-items: center; } #menu-btn { display: none; padding: 1.8rem; } .header.tbg{ background-color: rgba(255, 255, 255, 0.7); opacity: 1; } .header.white .header-nav-list > li > a{ color: #fff; } .header.white #search-btn svg,.header.white #search-btn svg path{ fill:#fff; } .header.white .lang-block > a{ color: #fff; } .header.white .nav-line{ border-left: 1px solid #fff; } .header.white a .logo { display: none; } .header.white a .logo-alternate{ display: block; }  #search-btn { position: relative; line-height: 9rem; } #search-btn svg:last-child{ display: none; } #search-btn.active svg:last-child{ display: inline-block; } #search-btn.active svg:first-child{ display: none; } .search-icon { box-sizing: content-box; padding: 1.8rem 1.8rem 1.8rem 0; vertical-align: middle; cursor: pointer; transition: all 0.3s ease-out; height: 2rem; width: 2rem; fill: #353941; } .search-close{ width: 1em; } .search-icon:hover, .search-icon:focus { fill: #8a8e99; } .search-form { position: absolute; top: 0; right: 10%; width: 0; padding: 2rem 0; border-radius: 0.2rem; transition: all 0.6s ease-out; overflow: hidden; } .search-form.active { width: 100rem; padding: 2rem 1rem; } .search-form input { width: 100%; border: 1px solid #ddd; line-height: 1.4rem; transition: border-color 0.3s; border-radius: 50px; } .nav-line { border-left: 1px solid #8a8e99; height: 2.4rem; }  .lang-block { padding-left: 1.8rem; } .lang-link { color: #1b1d21; line-height: 9rem; } .lang-link:hover { color: #8a8e99; } .lang-list { display: block; position: absolute; top: 18rem; right: 4.5rem; background-color: rgba(255,255,255,0.97); box-shadow: 0 0 15px rgb(0 0 0 / 10%); padding: 2rem; border-radius: 0.2rem; opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.3s ease-out; } .lang-block:hover > .lang-list { top: 9rem; opacity: 1; visibility: visible; pointer-events: auto; }  .home-slider { width: 100%; height: 100vh; color: f5f5f5; background-image: url("../img/banner_2.jpg"); background-size: cover; background-position: top; position: relative; }   .new-product { text-align: center; } .new-product-title { padding: 0 20% 0; } .new-product-subtitle { margin: 2.4rem 0 4.8rem; font-size: 1.8rem; font-weight: 300; color: #737c8d; line-height: 1.75;; } .new-product-wrap { width: 100%; grid-template-columns: repeat(4, 1fr); grid-auto-flow: row; } .new-product-item h4 { font-weight: 700; margin-top: 3.2rem; margin-bottom: 0.4rem; } .new-product-link { display: block; overflow: hidden; } .new-product-item img { display: block; width: 100%; transition: transform 0.8s cubic-bezier(.25,.46,.45,.94); } .new-product-item img:hover { transform: scale(1.1); }  .parallax-wrap { overflow: hidden; width: 100%; height: 75vh; position: relative; } .parallax-page { position: absolute; width: 100%; height: 100%; background-color: #3E292A; left: 0; top: 0; display: flex; flex-direction: column; min-height: 36rem; } .parallax { flex: 1 0 100%; position: relative; overflow: hidden; } .scene { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .scene div { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .scene .parallax-bg { background-position: top; background-size: cover; position: absolute; width: 110%; height: 110%; left: -5% !important; top: -5% !important; } .bg-1 { background: url("../img/parallax-home.jpg") no-repeat; } .bg-2 { background: url("../img/parallax-home_bg2.png") no-repeat; } .parallax-girl { background: url("../img/parallax-home_girl.png") no-repeat; } .bottle img { width: 20%; position: absolute; margin: 0 -6rem; transform-origin: center; } .bottle .bottle-1 { top: 35%; left: 26%;  -webkit-animation: upRotate2 6.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); -moz-animation: upRotate2 6.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); animation: upRotate2 6.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); } .bottle .bottle-2 { top: -2%; left: 15%; -webkit-animation: upRotate 6s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); -moz-animation: upRotate 6s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); animation: upRotate 6s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); } .bottle .bottle-3 { top: 5%; left: 83%; -webkit-animation: upRotate3 5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); -moz-animation: upRotate3 5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); animation: upRotate3 5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); } .bottle .bottle-4 { top: 43%; left: 74%; transform-origin: 75px 150px; -webkit-animation: upRotate4 6.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); -moz-animation: upRotate4 6.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); animation: upRotate4 6.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); } .bottle .bottle-5 { top: 45%; left: 0%; transform-origin: center right; -webkit-animation: smoke 6.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); -moz-animation: smoke 6.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); animation: smoke 6.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); } .bottle .bottle-6 { top: 70%; left: 55%; -webkit-animation: smoke 8s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); -moz-animation: smoke 8s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); animation: smoke 8s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); } .bottle .bottle-7 { top: -10%; left: 67%; -webkit-animation: smoke 7s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); -moz-animation: smoke 7s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); animation: smoke 7s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); } .bottle .bottle-8 { top: -20%; left: -3%; -webkit-animation: upRotate4 8.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); -moz-animation: upRotate4 8.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); animation: upRotate4 8.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); } .bottle .bottle-9 { top: -25%; left: 25%; -webkit-animation: upRotate2 6.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); -moz-animation: upRotate2 6.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); animation: upRotate2 6.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); } .bottle .element { top: 0%; left: 10%; width: 30%; -webkit-animation: element 10s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); -moz-animation: element 10s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); animation: element 10s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); } .bottle .element2 { top: 35%; left: 65%; width: 40%; -webkit-animation: elementTwo 12s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); -moz-animation: elementTwo 12s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); animation: elementTwo 12s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); }  .hinfo{ background: #f7f7f7; } .hinfo .section { padding-top: 0; } .hinfo-wrap { display: grid; grid-template-columns: 1fr 1fr; background-color: #fff; margin-bottom: 2.4rem; position: relative; align-items: center; } .hinfo-wrap:before{ content:""; display: block; width: 70%; height: 100%; position: absolute; top: 0; left: 0; background-image:url("../img/home-info-bg.jpg"); background-repeat: no-repeat; background-position: top 50% left 0; background-size: cover; } .hinfo-title h3{ line-height: 1.1; font-size: 4.4rem; color: #353941; font-weight: 400; padding-bottom: 3.2rem; } .hinfo-content { padding: 6.4rem; text-align: left; z-index: 1; } .hinfo-img-wrap { display: flex; justify-content: flex-end; position: relative; } .hinfo-img { display: block; object-fit: cover; width: 92%; height: 100%; } .hinfo-img-two { position: absolute; display: block; height: 60%; left: 0; bottom: 32px; } .heading-secondary { text-align: center; }  .index-section{ text-align: center; padding: 4.8rem 0 3.2rem; }   .inf{ font-size: 3rem; line-height: 1.5; color: #1b1d21; font-weight: 200; letter-spacing: -0.2rem; text-align: center; } .inf i{ font-weight: 500; font-family: "Playfair Display", serif; letter-spacing:normal; font-size: 3.1rem; }  .brands { position: relative; background-image: url("../img/home_banner_creams.jpg"); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover; } .brands h3 { font-size: 3.6rem; font-weight: 600; text-align: center; color: #353941; } .brand-line { width: 30%; height: 1px; background-color: #353941; margin: 0 auto; position: relative; } .brand-line::after { content: ""; display: block; width: 40%; height: 3px; position: absolute; bottom: -1px; background: #353941; left: 29%; } .brands-title { font-size: 3.6rem; font-weight: 600; color: #353941; font-family: "Playfair Display", serif; padding-bottom: 2.4rem; text-align: center; } .brands-items { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem; padding:4.8rem 0 6.4rem; } .brands-items a { display: block; overflow: hidden; } .brands-items picture { position: relative; display: block; transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; } .brands-items picture:hover { transform: scale(1.1); } .brand-item-freihaut::after, .brand-item-fau::after, .brand-item-pfc::after, .brand-item-aesthetical::after, .brand-item-renaissance::after { content: ""; display: block; position: absolute; background-size: cover; width: 100%; height: 100%; background-position: center; top: 0; } .brand-item-freihaut::after { background-image: url("../img/logos/freihaut-white.svg"); } .brand-item-fau::after { background-image: url("../img/logos/fau-black.svg"); } .brand-item-aesthetical::after { background-image: url("../img/logos/aesthetical-black.svg"); } .brand-item-pfc::after { background-image: url("../img/logos/pfc-black.svg"); } .brand-item-renaissance::after { background-image: url("../img/logos/renessance-white.svg"); }  .footer { padding-top: 9.6rem; text-shadow: -0.08rem -0.1rem 0 #1b1d21; line-height: 1.7; color: #8a8e99; background-color: #353941; font-size: 1.6rem; font-weight: 400; } .grid--footer { grid-template-columns: 24fr 24fr 19fr 33fr; } .logo-col { display: flex; flex-direction: column; gap: 1.5rem; line-height: 1.4; } .logo-footer { height: 3.2rem; margin-bottom: 0.8rem; } .contacts { font-style: normal; line-height: 1.4; } .footer-link-phone { letter-spacing: 0.2px; color: #e3e5e8; } .footer-heading { margin-bottom: 1.8rem; font-weight: 500; color: #e3e5e8; } .footer-link, .footer-icon-link:link, .footer-link, .footer-icon-link:visited { color: #868e96; transition: all 0.3s ease-out; display: block; } .footer-link:hover, .footer-link:active { -o-transform: translateX(5px); -ms-transform: translateX(5px); -moz-transform: translateX(5px); -webkit-transform: translateX(5px); transform: translateX(5px); color: #e3e5e8; } .footer-icon-link:hover, .footer-icon-link:active { color: #e3e5e8; } .footer-form { display: flex; justify-content: space-between; width: 100%; margin-top: 1rem; background-color: rgba(215,215,217,0.15); border-radius: 2px; } input::placeholder { color: #9a9ca0; } .footer-form input { background: transparent; color: #e3e5e8; border: none; outline: none; padding: 0 2rem;  } .footer-form-btn { background-color: #86888d; border: none; border-bottom-right-radius: 2px; border-top-right-radius: 2px; padding: 0.8rem 1.4rem; cursor: pointer; transition: all 0.3s ease-out; } .footer-form-btn:hover { background-color: #e3e5e8; } .footer-form-icon { height: 2.5rem; width: 2.5rem; vertical-align: middle; color: #353941; } .social-links { display: flex; gap: 2rem; padding-top: 3.6rem; } .social-icon { height: 2.5rem; width: 2.5rem; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; margin: 6.4rem auto 0 auto; height: 9.6rem; border-top: 1px solid #5d6167; } .copyright-text, .footer-subtitle { font-size: 1.4rem; letter-spacing: 0.2px; } .letter { font-weight: 500; letter-spacing: 0.2px; color: #e3e5e8; }  .modal { position: fixed; width: 100%; height: 100vh; top: 0; left: 0; background-color: rgba(0,0,0,0.70); display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; z-index: 1000; transition: all 0.3s; } .modal-active { visibility: visible; opacity: 1; } .modal-wrap { position: relative; width: 75%; min-height: 60rem; background-image: url("../img/modal_bg.jpg"); background-size: cover; background-position: center; border-radius: 0.2rem; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); } .modal-subtitle { font-size: 3rem; font-weight: 500; } .modal-content { width: 60%; padding: 8rem 9.6rem; background-color: rgba(255,255,255,0.80); } .modal-descr { margin: 2.4rem 0 3.2rem 0; line-height: 1.5; } .modal-close { position: absolute; top: 0; right: -6.4rem; display: flex; align-items: center; justify-content: center; background-color: transparent; cursor: pointer; border: none; outline: none; } .modal-close::after { position: absolute; z-index: 1; width: 100%; height: 100%; background-color: white; opacity: 0; transition: opacity 0.15s; content: ""; border-radius: 50%; } .modal-close:hover::after { opacity: 0.8; } .modal-close svg { box-sizing: content-box; padding: 2rem; width: 1.4rem; fill: #f7f7f7; position: relative; z-index: 2; opacity: 1; transition: opacity 0.15s; } .modal-close svg:hover { fill: #494d54; } .modal-form { display: flex; flex-direction: column; } .modal-form input { padding: 1.5rem 2rem; border: none; border-bottom: 3px solid transparent; font-size: 1.5rem; background: white; } .modal-form input:not([name="brand"]) { margin-bottom: 1.2rem; } .modal-form input:focus { outline: none; -webkit-box-shadow: 0 1rem 2rem rgb(0 0 0 / 10%); box-shadow: 0 1rem 2rem rgb(0 0 0 / 10%); border-bottom: 3px solid #5abeaa; } .modal-form input:focus:invalid { border-bottom: 3px solid #5abeaa; } .modal-form .file-upload { display: flex; align-items: center; } .wrap-file-button { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 4.8rem; } .file-upload span { display: block; font-size: 1.4rem; line-height: 1.5; font-style: italic; letter-spacing: 0.2px; padding-left: 1.4rem; } .file-upload svg { box-sizing: content-box; height: 1.8rem; padding: 1.2rem;  background-color: #353941; fill: #fff; display: block; cursor: pointer; transition: all 0.3s; } .file-upload svg:hover { background-color: rgba(53,57,65,0.70); } .button-modal { width: 18rem; padding: 14px 0; color: #fff; text-transform: uppercase; border: 1px solid #353941; display: inline-block; text-align: center; font-size: 1.4rem; font-weight: 500; background-color: #353941; cursor: pointer; transition: all 0.3s; } .button-modal:hover { background-color: rgba(255,255,255,0.90); color: #353941; border: 1px solid #353941; } @keyframes smoke { 0% { opacity: 1; } 100% { transform: rotate(-10deg) translate(-10%, 10%); opacity: 0.8; filter: blur(5px); } } @keyframes upRotate { 0% { transform: translate(0, -5%) rotate(-10deg); } 100% { transform: translate(-5%, 10%) rotate(10deg);;  } } @keyframes upRotate2 { 0% { transform: rotate(10deg); } 100% { transform: translate(5%, 10%) rotate(-10deg);  } } @keyframes upRotate3 { 0% { transform: translate(0, -5%) rotate(-5deg); } 100% { transform: translate(5%, 10%) rotate(15deg); } } @keyframes upRotate4 { 0% { transform: translate(0, -10%) scale(0.95) rotate(-10deg); } 100% { transform: translate(5%, 5%) scale(1) rotate(15deg);; filter: blur(2px);  } } @keyframes element { 0% { transform: translate(0, -10%) scale(0.95) rotate(-10deg); opacity: 0.1; } 100% { transform: translate(5%, 5%) scale(1.2) rotate(15deg); opacity: 0.15; } } @keyframes elementTwo { 0% { transform: scale(1); opacity: 0.1; } 100% { transform: translate(15%, -5%) scale(0.95) rotate(-15deg); opacity: 0.15; } }  .grid:not(:last-child) { margin-bottom: 9.6rem; } .grid--2-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4.8rem; } .grid--2-cols-s, .grid--2-cols-t, .grid--2-cols-f { display: grid; column-gap: 4.8rem; } .grid--2-cols-s { grid-template-columns: 2fr 3fr; } .grid--2-cols-t { grid-template-columns: 5fr 4fr; } .grid--2-cols-f { grid-template-columns: 4fr 5fr; } .grid--4-cols, .grid--5-cols { display: grid; gap: 3.2rem; } .grid--4-cols { grid-template-columns: repeat(4, 1fr); } .grid--5-cols { grid-template-columns: repeat(5, 1fr); } .grid--center-v { align-items: center; } h1, h2, h3 { font-family: "Playfair Display", serif; } h1, h2{ color: #353941; } h1 { font-size: 4.4rem; line-height: 1.1; font-weight: 400; } h5 { font-size: 1.8rem; font-weight: 700; line-height: 1.3; } .sub-t { font-size: 1.8rem; font-weight: 300; line-height: 1.7; } .b-sub-t { font-weight: 600; } .caption { font-size: 1.4rem; letter-spacing: 0.1rem; text-transform: uppercase; font-weight: 300; } .t-n { font-size: 1.6rem; line-height: 1.5; } .t-l { font-size: 1.6rem; line-height: 1.5; font-weight: 300; color: #737c8d; } .b-t-grey { color: #8a8e99; font-weight: 500; font-size: 1.6rem; }  .slider-box-img { padding-top: 9rem; align-content: center; height: 100vh; } .slider-text-box { padding: 0 20% 0 0; } .slider-text-box h2 { margin: 0 0 24px; font-size: 5rem; line-height: 1.1; font-weight: 400; padding-right: 8rem; } .slider-text-box p { margin-bottom: 44px; line-height: 1.5; font-size: 2rem; font-weight: 300; } .button-slider { color: #fff; border: 1px solid #fff; display: inline-block; padding: 16px 48px; text-align: center; font-size: 1.4rem; background-color: rgba(255,255,255,0.1); backdrop-filter: blur(20px); cursor: pointer; transition: all 0.3s; font-weight: 500; min-width: 18rem; text-transform: uppercase; } .button-slider:hover { background-color: rgba(255,255,255,0.90); color: #1b1d21;; border: 1px solid #fff; } .swiper-button-next:after, .swiper-button-prev:after { font-family: swiper-icons; text-transform: none !important; letter-spacing: 0; font-variant: initial; line-height: 1; font-size: 36px; color: #ffffff; } .result { background-color: #f7f7f7; text-align: center; } .result-wrap { display: grid; grid-template-columns: 1fr 1fr; background-color: #fff; margin-bottom: 4.8rem; } .result-content { padding: 6.4rem; text-align: left; } .result-post-img { object-fit: cover; width: 100%; height: 100%; } .result-img-block { position: relative; } .result-img-label-befor, .result-img-label-after{ background-color: #fff; width: 100px; text-align: center; font-size: 1.2rem; padding: 1.2rem 0; position: absolute; text-transform: uppercase; bottom: 4.8rem; opacity: 0.8; } .result-img-label-befor { left: 0; } .result-img-label-after { right: 0; } .result-post-img::after { content: ""; display: block; position: absolute; bottom: -12px; left: 0; right: 0; height: 10px; background-color: #1b1d21; } .result-text p { border-top: 1px solid #d7d7d7; margin: 0; padding: 2rem 0; font-size: 1.6rem; line-height: 2.6rem; } .result-content h3 { margin-bottom: 2rem; font-family: "Inter", "Arial", sans-serif; font-size: 3rem; font-weight: 200; letter-spacing: -0.1rem; line-height: 3.6rem; } .result-text .min { font-size: 12px; padding-bottom: 0; } .result a { display: inline-block; background: #363942; border: 1px solid #fff; color: #fff; padding: 16px 48px; font-size: 14px; text-transform: uppercase; cursor: pointer; transition: all 0.3s ease-out; } .result a:hover{ border: 1px solid #363942; background: #fff; color: #363942; }  section.breadcrumbs{ padding: 32px 32px 0; font-size: 1.4rem; } section.breadcrumbs a{ text-decoration: none; color: #8a8e99; } section.breadcrumbs .breadcrumb-separator{ padding: 0 8px; color: #8a8e99; }  .section-in { padding: 6.4rem 3.2rem 9.6rem; } .banner-aesthetical, .banner-renessance, .banner-fau, .banner-peel, .banner-meso, .banner-news, .banner-result, .banner-pfc, .banner-freihaut, .banner-education, .banner-contact { min-height: 500px; padding-top: 260px; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; } .banner-aesthetical { background-image: url("../img/bg_Aesthetical.jpg"); } .banner-fau { background-image: url("../img/bg_fau.jpg"); } .banner-renessance { background-image: url("../img/bg_Renessance.jpg"); } .banner-contact { background-image: url("../img/bg_contact.jpg"); } .banner-peel { background-image: url("../img/bg_peel.jpg"); } .banner-meso { background-image: url("../img/bg_meso.jpg"); } .banner-news { background-image: url("../img/bg_news.jpg"); } .banner-result { background-image: url("../img/bg_before-after.jpg"); } .banner-pfc { background-image: url("../img/bg_pfc.jpg"); } .banner-freihaut { background-image: url("../img/bg_freihaut.jpg"); } .banner-education { background-image: url("../img/bg_speakers.jpg"); } .brand-img-box { position: relative; display: flex; justify-content: center; } .brand-img-box::before, .brand-img-box::after { content: ""; display: block; position: absolute; } .brand-img-box::before { width: 60%; padding-bottom: 90%; background-color: #87dfcd; opacity: 0.4; z-index: -2; top: 0; left: 0; } .brand-img-box::after { width: 30%; padding-bottom: 30%; background-color: #87dfcd; opacity: 0.4; z-index: 1; bottom: 0; right: 0; } .brand-img { padding: 32px; object-fit: cover; } .brand-content { display: flex; align-items: center; } .brand-name { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 32px; } .brand-quote { padding: 48px; margin-bottom: 32px; background-color: #F7F7F7; position: relative; } .brand-quote::before{ content: ""; background-image: url("../img/icons/quote-grey.svg"); background-repeat: no-repeat; width: 52px; height: 52px; position: absolute; top: 28px; left: 45px; } .brand-quote-text { font-family: "Playfair Display", serif; font-size: 2rem; text-align: center; color: #353941; line-height: 1.5; font-weight: 400; position: relative; z-index: 2; font-style: italic; } .brand-quote span { font-weight: 600; } .quote-signature { display: flex; flex-direction: column; padding: 32px 12px 0 0; width: 100%; } .name-signature { display: flex; align-items: center; justify-content: flex-end; padding-bottom: 4px; font-size: 1.6rem; font-weight: 700; line-height: 1.2; font-family: 'Playfair Display'; } .name-signature-dsc { display: flex; justify-content: flex-end; } .quote-line { height: 1px; width: 32px; background-color: #353941; margin-right: 12px; } .name-signature-dsc { color: #8a8e99; font-style: italic; line-height: 1.2; font-family: 'Playfair Display'; text-align: right; } .txt { max-height: 450px; overflow: hidden; margin-bottom: 48px; } .paragraph { margin-bottom: 16px; } .more span{ display: inline-block; padding: 4px 0px; cursor: pointer; transition: all 0.3s cubic-bezier(.25,.46,.45,.94); } .more span:hover, .more span:hover svg {color: #000;fill:#000;} .more span svg{ height: 12px; margin-left: 3px; fill:#8a8e99; } .product-filter { background-color: #f7f7f7; border-bottom: 1px solid #e3e5e8; } .filters-group { justify-content: center; align-items: center; display: flex; } .product-filter-wrap { display: flex; align-items: center; justify-content: center; position: relative; } .product-filter-icon, .product-filter-icon-activ{ width: 100%; margin: 0 4.8rem; text-align: center; position: relative; cursor: pointer; padding: 6.4rem 0; } .product-filter-icon { opacity: 0.6; transition: all 0.3s cubic-bezier(.25,.46,.45,.94); } .product-filter-icon:hover { opacity: 1; } .product-filter-icon-activ::before { content: ""; display: block; position: absolute; bottom: 10px; width: 100%; height: 25px; background-image: url("../img/icons/nav-dropdown-black.svg"); background-repeat: no-repeat; background-position: center; background-size: 25px; } .product-filter-icon::before { content: ""; display: block; position: absolute; bottom: 10px; width: 100%; height: 25px; background-image: url("../img/icons/nav-dropdown-black.svg"); background-repeat: no-repeat; background-position: center; background-size: 25px; opacity: 0; transform: translate(0, -25px); transition: all 0.1s; } .product-filter-icon:hover::before, .product-filter-icon:active::before{ transform: translate(0, 0); opacity: 1; } .product-filter-icon-activ::after { content: ""; display: block; position: absolute; color: #353941; bottom: -1px; left: 0; right: 0; height: 3px; background-color: #353941; } .product-filter-icon::after { content: ""; display: block; position: absolute; color: #353941; bottom: -1px; left: 0; right: 0; height: 3px; background-color: #353941; opacity: 0; transition: all 0.3s cubic-bezier(.25,.46,.45,.94); } .product-filter-icon:hover::after { opacity: 1; } .product-filter-icon-activ img{ height: 96px; width: auto; margin-bottom: 16px; } .product-filter-icon img{ height: 96px; width: auto; margin-bottom: 16px; } .product-filter-icon-activ h3 { font-size: 1.8rem; font-weight: 700; color: #353941; font-family: "Playfair Display", serif; text-transform: uppercase; } .product-filter-icon h3 { font-size: 1.8rem; font-weight: 700; color: #353941; font-family: "Playfair Display", serif; text-transform: uppercase; } .line-wrap { display: grid; row-gap: 8rem; } .line-block { display: flex; justify-content: space-between; align-items: center; color: #353941; border-bottom: 1px solid #e3e5e8; background-color: #F7F7F7; margin-bottom: 24px; padding: 32px 48px; } .line-block h3 { font-weight: 200; font-size: 3rem; letter-spacing: -0.1rem; font-family: "Inter", "Arial", sans-serif; } .line-name { font-weight: 300; font-size: 1.8rem; } .color1 { background: #ff9932; color: #fff; } .color2 { background: #A40000; color: #fff; } .product-list-wrap { width: 100%; grid-auto-flow: row; text-align: center; } .product-item h4 { font-weight: 700; margin-top: 3.2rem; margin-bottom: 0.4rem; line-height: 1.2; } .product-link { display: block; overflow: hidden; border-bottom: 1px solid #e3e5e8; } .product-item img { display: block; width: 100%; transition: transform 0.8s cubic-bezier(.25,.46,.45,.94); } .product-item img:hover { transform: scale(1.1); } .product-link:hover { border-bottom: 1px solid #FFFFFF; }  .tline{ background: #5dbaa8; display: block; width: 100%; overflow: hidden; margin-top: 90px; } .text-move-left{ display: block; white-space: nowrap; color: #fff; font-size: 14px; padding: 15px 100%; height: 100%; min-width: 100%; animation: left 50s infinite linear; } @keyframes left { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } } .catalogs-wrap { margin: 64px auto 96px; } .sname{ position: relative; font-family: "Playfair Display", serif; text-align: center; color: #353941; margin-bottom: 20px; z-index: 3; } h1.sname{ font-size: 40px; } h3.sname{ font-size: 30px; line-height: 1.4; } .sname span{ display: inline-block; position: relative; line-height: 1.1; font-size: 44px; color: #353941; font-weight: 400; } .sname span:before{ content:""; display: block; width: 120%; height: 15px; background: #ddf5f1; position: absolute; bottom: 0px; right: -10%; z-index: -1; } .section-in .sname span:before{ width: 110%; right: -15px; } h1.sname { text-align: left; margin-bottom: 30px; } .brand-content-title h1 { font-size: 4.4rem; font-weight: 400; margin-bottom: 48px; } .sname-new-center { position: relative; display: inline-block; font-size: 36px; font-weight: 500; color: #353941; margin-bottom: 48px; font-family: "Playfair Display", serif; text-align: center; z-index: 3; } .sname-new { position: relative; display: inline-block; z-index: 3; } .sname-new::before { content: ""; display: block; width: 110%; height: 45%; background: #ddf5f1; position: absolute; bottom: -4px; right: -8%; z-index: -1; } .news-title h3 { font-size: 3.6rem; font-weight: 500; margin-bottom: 48px; } .content_cat .content { padding: 10px 15px 70px; } .catalogs-file { display: flex; justify-content: space-between; align-items: center; padding: 32px 48px; margin-bottom: 12px; transition: background-color 0.5s, border-color 0.3s, transform 0.3s ease-out; border-bottom: 2px solid #e3e5e8; background-color: #F7F7F7; } .catalogs-file:hover, .catalogs-file:focus { outline: none; background-color: transparent; } .catalogs-name { display: flex; align-items: center; } .catalogs-icon { margin-right: 25px; width: 48px; } .catalogs-title { font-size: 18px; font-weight: 700; color: #353941; font-family: "Playfair Display", serif; text-transform: uppercase; margin-bottom: 8px; } .catalogs-subtitle { font-weight: 400; color: #8a8e99; } .catalogs-btn { display: inline-block; font-size: 1.4rem; padding: 16px 48px; color: #363942; border: 1px solid #363942; font-weight: 500; transition: background-color 0.3s, color 0.3s, transform 0.3s ease-out; text-transform: uppercase; } .catalogs-btn:hover { color: #fff; background: #363942; border: 1px solid #363942; }  .single-product-wrap { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6.4rem; } .product-preview { display: grid; grid-template-columns: 1fr 4fr; gap: 2.4rem; max-height: 640px; } .preview-img-small { display: flex; flex-direction: column; overflow: hidden; } .preview-img-small img { margin-bottom: 24px; } .preview-img-big { position: relative; width: 100%; height: 100%; } .preview-img { width: 100%; height: 100%; object-fit: cover; } .img-big-icon { display: block; width: auto; height: 12rem; position: absolute; left: 24px; top: 32px; z-index: 2; } .product-info { display: flex; flex-direction: column; justify-content: flex-start; } .product-info-brend { display: flex; justify-content:flex-start; align-items: center; margin-bottom: 32px; } .product-info-icon { margin-right: 16px; width: 4.8rem; } .product-icon { margin-right: 16px; width: 4rem; } .product-info-brend span { font-size: 1.6rem; color: #8a8e99; } .product-info-title { margin-bottom: 8px; } .product-info-subtitle { font-size: 18px; font-weight: 300; line-height: 1.4; color: #8a8e99; margin-bottom: 32px; } .product-info-desc { font-size: 16px; line-height: 1.5; margin-bottom: 16px; } .hars { margin-bottom: 12px; } .accordion .name { font-size: 16px; font-weight: 600; padding: 20px 50px 20px 0; cursor: pointer; position: relative; text-transform: uppercase; border-bottom: 1px solid #8a8e99; } .accordion .name:before,.accordion .name:after{ content:""; display: block; background: #8a8e99; position: absolute; transition: 0.6s; opacity: 0.5; } .accordion .name:before{ width: 20px; height: 2px; top: 26px; right: 22px; } .accordion .name:after{ width: 2px; height: 20px; top: 17px; right: 31px; } .accordion .item .name.active:before, .accordion .item .name.active:after { transform: rotate(45deg); background: #000; opacity: 1; } .accordion .item .name:hover:before, .accordion .item .name:hover:after { background: #000; opacity: 1; } .accordion .item .cont { display: none; padding: 32px; } .item .cont ul li::marker { content: "\2022"; color: #e3e5e8; display: inline-block; width: 1em; font-size: 20px; } .mark { padding-left: 8px; } .ob{ padding: 24px; letter-spacing: 0.2rem; text-align: center; background-color: #F7F7F7; border-bottom: 2px solid #e3e5e8; margin-bottom: 12px; } .btns { display: block; border: 1px solid #363942; color: #363942; padding: 24px; font-size: 14px; text-align: center; text-transform: uppercase; cursor: pointer; transition: all 0.3s; } .btns:hover { border: 1px solid #363942; background: #363942; color: #fff; } .nn { font-family: "Playfair Display", serif; font-size: 34px; font-weight: 600; color: #353941; text-align: center; padding: 20px 20px 48px; } .the_cnt { text-align: center; background: #f7f7f7; } .items-swiper { height: 100px; background: #E04649; } .viewed { background-color: #f7f7f7; } .viewed-title-wrap { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; padding-bottom: 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .viewed-title { font-size: 24px;; font-weight: 600; color: #353941; font-family: 'Playfair Display', serif; } .viewed-arrows { display: flex; align-items: center; } .arrows { height: 50px; width: auto; padding: 16px; } .arrows:last-child { padding-right: 0; } .arrows:first-child { margin: 0 12px 0 0; } .viewed-product-wrap { width: 100%; text-align: center; }  .scroll-to-top-button { background-color: #87dfcd; border: none; border-radius: 50%; cursor: pointer; width: 80px; height: 80px; position: fixed; bottom: 48px; right: 32px; z-index: 100; opacity: 0; transform: translateY(100px); transition: all .3s ease; box-shadow: 0 0 20px rgba(29,29,29,.1); } .scroll-to-top-button img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; padding: 30px; } .scroll-to-top-button img:hover { opacity: 1; } .scroll-to-top-button.show { opacity: 1; transform: translateY(0) } .scroll-to-top-button:hover{ outline: none; border: none; background-color: #87dfcd; opacity: 0.6; } .txt { line-height: 1.5; }  .tab-block { padding: 3.2rem 3.2rem 9.6rem; } .tab-block-nav { padding-bottom: 32px; border-bottom: 1px solid #e3e5e8; margin-bottom: 24px; } .tab-products-nav-panel-inner { display: flex; align-items: flex-start; } .tabbed-products-nav-active, .tabbed-products-nav-not-active { font-family: "Playfair Display", serif; font-size: 1.8rem; font-weight: 700; text-transform: uppercase; margin-right: 32px; color: #353941; position: relative; cursor: pointer; } .tabbed-products-nav-active::after{ content: ""; display: block; position: absolute; bottom: -32px; left: 0; right: 0; height: 1px; background-color: #1b1d21; } .tabbed-products-nav-not-active { opacity: 0.4; transition: all 0.3s cubic-bezier(.25,.46,.45,.94); } .tabbed-products-nav-not-active:hover { opacity: 1; } .tab-block .product-list-wrap .product-item { display: flex; flex-direction: column; justify-content: space-between; } .product-item-brend { background-color: #f7f7f7; padding: 16px; margin-top: 24px; } .peel-container { position: relative; } .peel-container::before { content: ""; display: block; width: 50%; height: 100%; position: absolute; top: 0; right: 0; background-image: url("../img/peel_right.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; z-index: -1; } .peel-wrap { display: grid; grid-template-columns: 5fr 4fr; column-gap: 6.4rem; align-items: center; } .peel-img-box { position: relative; width: 130%; height: auto; } .peel-img-flower { position: absolute; width: 100%; left: -100px; z-index: 1; top:-15px; } .peel-subtitle { font-size: 2.4rem; margin-top: 36px; font-weight: 200; }   .meso-img-box { display: flex; justify-content: center; position: relative; } .meso-img-girl { padding: 32px; object-fit: cover; } .meso-img-box::before { content: ""; display: block; position: absolute; width: 60%; padding-bottom: 90%; background-color: #87dfcd; opacity: 0.4; z-index: -2; top: 0; right: 0; } .meso-img-box::after { content: ""; display: block; position: absolute; width: 50%; height: 50%; background-image: url("../img/icons/dotts.svg"); background-repeat: no-repeat; opacity: 0.4; z-index: 1; left: 0; bottom: 0; } .meso-img-bottle { height: 50%; position: absolute; bottom: 80px; left: -80px; z-index: 2; animation: upRotateMeso1 7.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); } .meso-img-bottle-sec { height: 50%; position: absolute; bottom: -150px; left: 50px; z-index: 3; animation: upRotateMeso2 8s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); }  .news-wrap { align-items:flex-start; } .news-block { display: grid; grid-gap: 20px; } .news-block-item { padding: 20px; border: 1px solid #e3e5e8; } .news-post { border: 1px solid #e3e5e8; background-color: #f7f7f7; } .news-post-img { max-width: 100%; display: block; } .news-block .news-post-img { width: 100%; max-height: 250px; object-fit: cover; object-position: top; } .news-post-content { display: flex; flex-direction: column; justify-content: space-between; padding-top: 24px; } .news-btn { display: flex; align-items: center; } .news-btn img { height: 10px; padding-left: 10px; } .news-post-info { padding: 50px; } .news-post-info h5, .news-post-content h5 { color: #353941; font-family: 'Playfair Display', serif; } .news-post-info h5{ font-size: 34px; font-weight: 500; line-height:1.4; padding-right: 64px; margin: 0 0 24px; } .news-post-content h5 { margin: 0 0 12px; } .news-date { display: inline-block; color: #8a8e99; margin-bottom: 5px; } .news-post-info .news-date { font-size: 1.8rem; margin-bottom: 12px; } .news-text { font-size: 16px; line-height: 1.5; margin-bottom: 16px; } .load-more { text-align: center; margin-top: 45px; }  .result-conteiner { align-items:flex-start; } .result-block { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; } .result-title-container { padding-bottom: 9.6rem; } .result-title-container h2 { font-size: 5rem; line-height: 1.1; font-weight: 400; } .result-tab-nav { display: flex; align-items: flex-start; border-bottom: 1px solid #e3e5e8; margin-bottom: 32px; padding-bottom: 12px; } .result-tab-nav-activ, .result-tab-nav-not-activ{ margin-right: 24px; color: #353941; font-family: 'Playfair Display', serif; position: relative; cursor: pointer; } .result-tab-nav-activ::after { content: ""; display: block; position: absolute; bottom: -12px; left: 0; right: 0; height: 1px; background-color: #1b1d21; } .result-tab-nav-not-activ { opacity: 0.4; } .result-item { overflow: hidden; } .result-item img { display: block; width: 100%; transition: transform 0.6s cubic-bezier(.25,.46,.45,.94); } .result-item img:hover { transform: scale(1.1); } .result-post {  border: 1px solid #e3e5e8; background-color: #f7f7f7; }  .contact-wrap { display: flex; } .contact-info { width: 50%; padding-right: 8rem; } .contact-content-title h3 { font-size: 3.6rem; font-weight: 600; margin-bottom: 4.8rem; color: #353941; } .contact-txt { line-height: 1.5; } .contact-txt p:first-child { padding-bottom: 3.2rem; } .contact-items { display: grid; gap: 3.2rem; grid-template-columns: repeat(2, 1fr); padding-top: 3.2rem; } .contact-txt h5 { font-size: 1.6rem; margin-bottom: 8px; } .map { width: 50%; overflow: hidden; } .map img { display: block; object-fit: cover; width: 100%; height: 100%; } .prev { margin-top: 80px; background-color: #ddf5f1; } .tab-cooperation { display: flex; justify-content: center; text-align: center; line-height: 1.5; } .cooperation-modal-content { width: 60%; } .cooperation-descr { padding-bottom: 4.8rem; } .cooperation-btn { text-align: center; margin-top: 4.8rem; } .tabs-info { background-color: #ddf5f1; } .block { line-height: 1.5; } .block p { margin-bottom: 12px; }  .preim{ position: relative; background-image:url("../img/about_us_center.jpg"); padding: 96px 0; background-repeat: no-repeat; background-position: top; background-attachment: fixed; background-size: cover; } .preim:before{ content:""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(90,190,170,0.6); z-index: 1; } .preim .container{ position: relative; z-index: 2; } .preim .items{ display: grid; column-gap: 3.2rem; row-gap: 6.4rem; grid-template-columns: repeat(2, 1fr); padding: 3.2rem 9.6rem; } .feature{ display: flex; align-items: center; color: #fff; line-height: 1.5; padding: 0 4.8rem; } .feature img { margin-right: 25px; width: 6.4rem; } .feature h5{ font-size: 2rem; margin-bottom: 10px; font-weight: 600; } .swiper-box { display: grid; grid-template-columns: 2fr 1fr; column-gap: 1.2rem; } .swiper-content { background-color: rgba(135,223,205,0.2); padding: 4.8rem; position: relative; flex-direction: column; justify-content: space-between; align-items: flex-start; display: flex; } .swiper-content p { line-height: 1.5; font-size: 1.8rem; font-weight: 300; } .swiper-img { background-image: url("../img/reviews.jpg"); background-position: top; background-size: cover; } .reviews-content { margin-right: 4.8rem; } .reviews-sub { display: inline-block; color: #8a8e99; font-weight: 500; margin-bottom: 12px; letter-spacing: 3px; } .reviews-title { z-index: 1; margin-top: 1.6rem; margin-left: 2.4rem; position: relative; } .reviews-title span { font-family: "Playfair Display", serif; font-size: 3.6rem; line-height: 1.1; font-weight: 400; color: #353941; } .reviews-title p { padding-top: 3.2rem; } .quote-mark-icon { margin-top: 70px; margin-left: 40px; display: block; position: absolute; top: 0%; bottom: auto; left: 0%; right: auto; height: 50px; height: 6.4rem; opacity: 0.8; } .reviews-arrows-wrap { display: flex; justify-content:flex-start; align-items: center; } .arrows-big { height: 4.8rem; width: auto; padding: 16px 16px 0; } .arrows-big:first-child { margin: 0 16px 0 0; padding-left: 0; }  .education-left { position: absolute; z-index: -1; width: 50%; } .education { position: relative; } .education-right { position: absolute; z-index: -1; width: 65%; right: 0; bottom: -20rem; } .course-month { font-size: 1.8rem; line-height: 1.4; padding-bottom: 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); color: #8a8e99; } .course-item-button.active { background: #e1f5f1; } .course-item-button:hover, .course-item-button:focus { background-color: #e1f5f1; cursor: pointer; } .course-month-list { display: grid; grid-template-columns: 2fr 6fr 2fr 3fr 3fr 1fr; justify-items: center; align-items: center; padding: 24px 0; transition: background-color 0.5s, border-color 0.3s, transform 0.3s ease-out; border-bottom: 1px solid #e3e5e8; } .course-type-title, .speakers, .course-btn { justify-self: center; } .detail { color: #8a8e99; font-size: 1.4rem; text-decoration-line:underline; } .detail:hover, .detail:active { color: #1b1d21; } .course-title { padding-right: 1.2rem; justify-self:start; } .course-title p { padding-bottom: 16px; } .course-type-title { text-transform: uppercase; color: #8a8e99; } .course-btn { padding-left: 3.2rem; } .course-more-body { display: none; } .course-more-tab { display: flex; width: 100%; align-items: center; justify-content: center; padding: 4.8rem 8rem; font-weight: 300; border-bottom: 1px solid #e3e5e8; } .course-more-speakers { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 1.2rem; } .course-more-img { width: 18rem; border-radius: 50%; padding-bottom: 12px; } .course-more-speakers-name p { padding-top: 2px; font-size: 1.4rem; } .course-month-more-description { padding: 0 8rem; } .course-month-more-description p { padding-bottom: 1.6rem; } @keyframes upRotateMeso1 { 0% { transform: translate(-5%, -5%) scale(0.98) rotate(0); } 100% { transform: translate(0, 5%) scale(1) rotate(5deg); } } @keyframes upRotateMeso2 { 0% { transform: translate(0, 5%) rotate(-5deg); } 100% { transform: translate(5%, -5%) rotate(0); } } .raspisanie { padding: 2.4rem 0; } .raspisanie .items { display: grid; row-gap: 8rem; } .raspisanie .month{ border-bottom: 1px solid #8A8E99; padding-bottom: 12px; font-size: 18px; color: #8a8e99; } .raspisanie .it .table{ display: table; width: 100%; } .raspisanie .it .tr{ display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e3e5e8; transition: all 0.3s cubic-bezier(.25,.46,.45,.94); } .raspisanie .it.active .tr,.raspisanie .it .tr:hover{ background: #ddf5f1; } .raspisanie .it .tr .i{ cursor: pointer; } .raspisanie .it .tr .date{ width: 10%; font-size: 1.8rem; font-weight: 700; color: #353941; text-align: center; } .raspisanie .it .tr .name{ width: 30%; padding: 30px 0; } .raspisanie .it .tr .name h5{ font-weight: 700; line-height: 1.1; font-size: 16px; } .raspisanie .it .tr .name p{ margin-bottom: 10px; } .raspisanie .it .tr .name .desc{ color: #8a8e99; text-decoration: underline; font-size: 14px; margin-bottom: 0; transition: all 0.3s cubic-bezier(.25,.46,.45,.94); } .raspisanie .it .tr .name .desc:hover{ color: #1b1d21; } .raspisanie .it .tr .person{ width: 15%; font-weight: 600; font-size: 1.6rem; color: #353941; text-align: center; } .raspisanie .it .tr .type{ width: 10%; text-align: center; color: #8a8e99; } .raspisanie .it .tr .city{ width: 15%; text-align: center; font-weight: 700; } .raspisanie .it .tr .btns{ text-align: right; cursor: default; } .raspisanie .it .cont{ padding: 30px 0; display: none; } .raspisanie button { background: #363942; border: 1px solid #fff; color: #fff; padding: 16px 48px; font-size: 14px; text-transform: uppercase; cursor: pointer; transition: all 0.3s; margin-left: 32px; } .raspisanie button:hover{ border: 1px solid #363942; background: #fff; color: #363942; } .speakers .heading-secondary span { display: inline-block; padding: 0 0 32px; border-bottom: 1px solid #737c8d; position: relative; width: 30%; font-size: 3.6rem; color: #353941; font-weight: 600; } .speakers .heading-secondary span::before { content: ""; display: block; width: 40%; height: 3px; position: absolute; bottom: -2px; background: #353941; left: 29%; } .speakers-section { background-color: #ddf5f1; } .speakers-list { display: flex; flex-direction: column; } .speakers-items { display: flex; flex-direction: row; justify-content: center; align-items: flex-start; border-bottom: 1px solid rgba(138,142,153,0.60); } .speakers-item { width: 20%; padding: 0 24px; text-align: center; opacity: 0.6; transition: all 0.8s cubic-bezier(.25,.46,.45,.94); cursor: pointer; position: relative; margin: 0 12px; } .speakers-items .open::before { content: ""; display: block; position: absolute; bottom: 10px; width: 100%; left: 0%; height: 25px; background-image: url(../img/icons/nav-dropdown-black.svg); background-repeat: no-repeat; background-position: center; background-size: 28px; opacity: 1; transform: translate(0, 0); } .speakers-item::before { content: ""; display: block; position: absolute; bottom: 10px; width: 100%; left: 0%; height: 25px; background-image: url(../img/icons/nav-dropdown-black.svg); background-repeat: no-repeat; background-position: center; background-size: 28px; opacity: 0; transform: translate(0, -25px); transition: all 0.3s cubic-bezier(.25,.46,.45,.94); } .speakers-item:hover, .speakers-items .open { opacity: 1; } .speakers-items .open::after{ content: ""; display: block; width: 50%; height: 3px; background-color: #353941; margin: 0 auto; } .speakers-item:hover::before { transform: translate(0, 0); opacity: 1; } .speakers-item p { font-weight: 300; color: #737c8d; } .speakers-img { overflow: hidden; border-radius: 100%; } .speakers-img img { display: block; width: 100%; margin: 0 auto; transition: all 0.5s cubic-bezier(.25,.46,.45,.94); } .speakers-img img:hover { transform: scale(1.1); } .speakers-item-name { padding: 24px 0 4.8rem; } .speakers-item-name h5 { color: #353941; font-size: 1.7rem; } .speakers-conts { text-align: center; border-bottom: 1px solid rgba(138,142,153,0.60); padding: 6.4rem 0; font-weight: 300; margin-bottom: 4.8rem; } .speakers-conts p { width: 50%; margin: 0 auto; } .speakers-next { text-align: center; padding-top: 9.6rem; } .speakers-next img { width: 18rem; } .speakers-next h6 { font-size: 1.8rem; padding: 3.2rem 0; } .speakers-next a{ display: inline-block; background: #363942; border: 1px solid #fff; color: #fff; padding: 16px 48px; font-size: 14px; text-transform: uppercase; cursor: pointer; transition: all 0.3s; } .speakers-next a:hover { border: 1px solid #363942; background: #fff; color: #363942; }