/* Theme Name: ARTlanding Theme URI: https://artlanding.net Description: Author: Artlanding Author URI: https://artlanding.net Version: 1.0.1 */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap'); ::-webkit-scrollbar{width:5px;height:5px;} ::-webkit-scrollbar-thumb{border:0;background:#222;} ::-webkit-scrollbar-track{border:0;background:#eee;} *{box-sizing:border-box;} .modal{cursor:pointer;} html{scroll-behavior:smooth;} body{background:#fff;padding:0;margin:0;font-family:'Montserrat';color:#000;font-size:17px;font-weight:300;overflow-x:hidden;} b, strong{text-align:justify;font-family:'Montserrat';color:#000;font-size:17px;font-weight:600;} h1, h2{position:relative;padding:0;margin:0 0 25px;text-align:left;font-family:'Montserrat';color:#000;font-size:40px;font-weight:700;} p, span, small, sup, li{text-align:justify;} a, a:hover{text-decoration:none;border-bottom:none;color:inherit;} input, button, textarea{outline:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:'Montserrat';font-weight:300;color:#000;font-size:17px;background:#fff;border-radius:10px;padding:10px;border:1px solid #ccc;resize:none;width:100%;margin:5px 0;transition:all .5s;} input:focus, textarea:focus{border-color:#555;} textarea{height:120px;} .container{position:relative;margin:0 auto;max-width:1350px;width:100%;text-align:left;z-index:3;} @keyframes shake { 0%,100% { transform: translateX(0); } 10%,30%,50%,70%,90% { transform: translateX(-2.5px); } 20%,40%,60%,80% {transform: translateX(2.5px); } } .notify{width:100%;padding:7px 10px;text-align:center;background:#ccc;margin:10px;border-radius:10px;display:none;} input.error, textarea.error {animation: shake 1 linear 1s;border-color: red!important;} .fade, .fade_up, .fade_lt, .fade_rt{opacity:0;transition:all 1s;} .fade_up{transform:translateY(25%);} .fade_lt{transform:translateX(-15%);} .fade_rt{transform:translateX(15%);} .fade.active, .fade_lt.active, .fade_rt.active, .fade_up.active{opacity:1;transform:none;} #header{position:sticky;top:0;padding-top:10px;margin-bottom:10px;z-index:5;} #header:before{position:absolute;content:"";top:0;left:0;width:100%;height:75%;bottom:0;backdrop-filter:blur(15px);mask-image:linear-gradient(0deg, transparent, black);} #header .container{margin:auto;padding:10px 0;display:flex;align-items:center;background:#fff;justify-content:space-between;width:calc(100% - 40px);max-width:1750px;border-radius:20px;box-shadow:0 5px 15px 5px rgba(0,0,0,.1);} #header .logo{display:inline-block;margin:0 0 0 20px;width:150px;} #header .logo img{width:100%;} #header .menu{display:inline-block;} #header .menu ul{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none;} #header .menu ul li{position:relative;margin:0 15px;font-weight:400;} #header .menu ul li:after{position:absolute;content:"";bottom:0;left:0;width:0;height:5px;background:green;transition:width .3s;z-index:-1;} #header .menu ul li:hover:after{width:65%;} #header .langs{background:#f1f1f1;border-radius:10px;padding:5px;margin:0 20px;} #header .langs a{margin:0 5px;text-transform:uppercase;font-size:15px;} #header .pm{display:none;margin:0 20px 0 -5px;background:url(./img/menu.svg) center / cover;height:40px;width:40px;cursor:pointer;} #header .menu.mobile{display:none;position:absolute;top:115%;right:0;padding:10px;background:#fff;box-shadow:0 5px 15px rgba(0,0,0,.1);border-radius:20px;} #header .menu.mobile ul li{width:100%;margin:10px 5px;} @media screen and (max-width:1000px){ #header .pm{display:inline-block;} #header .menu{display:none;} } #main{position:relative;padding:75px 0;height:calc(100vh - 100px);max-height:700px;background:linear-gradient(45deg, #02b203, #eee);margin:auto;width:calc(100% - 40px);max-width:1750px;border-radius:25px;overflow:hidden;display:flex;align-items:center;} #main .img{position:absolute;top:0;bottom:0;right:0;width:60%;} #main .img img{width:100%;height:100%;object-fit:cover;-webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAjCAYAAAA5dzKxAAAD+UlEQVRYhcWZ61IaQRCFz7KAgBgvyfu/XSqVquSXGrlKfjDH/Wh7FowYp6prVthl+5u+TE/b7HY7nWE07/y8Sa53Pc/7vh1leETJtygyKNcDXFPiPf68Te7N4AigMm+LbCSt+2CyVWkwU5lW0lDSqMyUAe5pw/1+xn+3AZjv8rAltpJWRZ4k3ddgaivEVbcyF5LGZZ5AxkVGgBwHuSjie1rMmbUM8qy9NZYF5EnSzwyGKxLdgStupaeSZpLmki7L9ax8Z2Wp/ATfTcs1gWkh6uLxXMSWWRT5HmEy3yaElZsA4ErSlzJfFSBDEYhCMFrQbkmhhzheItBG0m1mGVpigFXzSl4GiJsiBJoDhm41SpT33OrQIoRg4GdQjaQtYTIf9cvGALmSdC3ptshdALK7TYPSYyhNd4pBT4C4yBGMbjjvczO6mF3CMDcF4qukbwXKMAaxO9F1mN36UngcNTBaqx3iS4tfwDQ6Vhfsc3XudQeo6wI6U5ehsnQbE0vfFnBsHGTbWszQMnYzxwxh6GbX6qzi9Eqlszj4V4h09MUMYZwAZupc7UsQBz1dK1P87BCEiS8iTM06huLewoDnHpGNsygfR4wZXxOEpQo3vSmEwd6q35U+bBwrNOPGaZeLe4djhGXIfx81V8iyW7QWhWn200aEeUtK7CvTP2VEmOykxgMQa6It/n7W4TnjU0bNzaLyLrk3ktZFfJZYl88N6Gfjb304JBMAVzZawRAr7c8QC+3PEC6/J+rSfG1nj8Xi2d3RMD5v74J4tQ1iiMciD+rOIwP8Fnd/gmTl/NmghgHEL6F70a0M8iDpXl2J75RsSxouljRxPyPkWWA4ai5mq/xRZw0Xk2151uArHRaa8bCVVcseZ6vNTnGxsfYWoaIEWWpf3hiW55ZagyOz2LthIpAzWFtghtpbhhulQWi5ubqzPSuE2iHt2AnTevWNRuibxQTwchTVfsVZATCwDeys9qjX538XqKNw7VqPTRJaK2tmZMMJZ5PVZhmQ44YrFTskTzqsoGvNDAPacuze0GpZRvTMfcu6rGLMNPjSD24rwLaKYR7VHQ9i78xCwKkO+2zs1mRNjgzGC7qT9DuLmbj6NRC74FpdvFghWoBVNq1AkClmPkv3i3uUF9M6vOqbUWEFmCxtO4NFV7EibCcxGRCMCxDdk41Bbsp8/6Lo8KMWM9xEXUTGTOcfG5Yfi31jukmtH51ZjgtTg4n730LSr6bnXxpxM4vNiTbMgyN/sxfHA59BY1MwdncyGHvGUtJ9H0wGFEuRmKqznT37LD4bU3/ce+J2QCDL8hhMDa5vjgXlKeVKtlBZPZdV9i9x/NZ/NkXyU1cigzilaq59l+rxF+5FNzBsTB9XAAAAAElFTkSuQmCC");-webkit-mask-size:cover;-webkit-mask-position:left center;} #main .ttl{margin:20px;max-width:650px;z-index:1;} #main .ttl h1{margin-bottom:35px;font-size:60px;} #about{position:relative;padding:75px 0;overflow:hidden;} #about .colums{display:flex;flex-wrap:wrap;} #about .colums .col{flex:1 0 0;margin:20px;min-width:300px;} #about .colums .col img{width:100%;height:100%;object-fit:cover;box-shadow:0 5px 10px rgba(0,0,0,.1);border-radius:25px;} #about .ttl{display:inline-block;margin:0 0 20px;} #offer{position:relative;padding:75px 0;background:#f1f1f1;margin:auto;width:calc(100% - 40px);max-width:1750px;border-radius:25px;} #offer .ttl, #offer .txt{margin:20px;} #offer .galary{position:relative;display:flex;flex-wrap:wrap;margin:10px;} #offer .galary .item{flex:1 0 0;margin:10px;} #offer .galary .item img{width:100%;aspect-ratio:1/.7;object-fit:cover;border-radius:20px;box-shadow:0 5px 10px rgba(0,0,0,.1);} #offer .galary .track, #brands .logos .track {display: flex;} #offer .galary:not(.dotted) .item{min-width:300px;} #offer .galary .arrow{position:absolute;top:50%;transform:translateY(-50%);background:linear-gradient(45deg, #02b203, #eee);color:#000;border-radius:50%;z-index:1;width:40px;height:40px;line-height:35px;text-align:center;font-size:35px;box-shadow:0 0 10px rgba(0,0,0,.3);} #offer .galary .arrow.prev{left:15px;} #offer .galary .arrow.next{right:15px;} #offer .items{display:flex;flex-wrap:wrap;margin:10px 15px;} #offer .items .it{margin:5px;flex:1 0 0;background:#fff;border-radius:10px;padding:15px;min-width:225px;font-size:13.5px;box-shadow:0 0 10px rgba(0,0,0,.05);} #offer .items .it b{display:block;margin:5px 0;font-size:15px;} #offer .items .it img{width:35px;height:35px;object-fit:contain;} #brands{position:relative;padding:75px 0;overflow:hidden;} #brands .ttl{margin:20px;} #brands .logos{display:flex;flex-wrap:wrap;margin:35px 15px 0;} #brands .logos .logo{flex:1 0 0;margin:5px;background:#f1f1f1;border-radius:15px;padding:20px;} #brands .logos .logo img{width:100%;aspect-ratio:1 / .5;object-fit:contain;filter:grayscale(100%);transition:all .3s;} #brands .logos .logo:hover img{filter:none;} #brands .logos:not(.dotted) .logo{min-width:150px;} #brands .logos .nav{position:absolute;left:0;right:0;bottom:-65px;padding:0;list-style:none;text-align:center;} #brands .logos .nav li{position:relative;display:inline-block;width:12.5px;height:12.5px;border-radius:20px;background:#aaa;margin:0 5px;cursor:pointer;transition:all .5s;} #brands .logos .nav li.active {background:green;width:45px;} #detal{position:relative;padding:75px 0;background:#f1f1f1;margin:auto;width:calc(100% - 40px);max-width:1750px;border-radius:25px;} #detal .colums{display:flex;flex-wrap:wrap;} #detal .colums .col{flex:1 0 0;margin:20px;min-width:300px;} #detal .colums .col img{width:100%;height:100%;object-fit:cover;box-shadow:0 5px 10px rgba(0,0,0,.1);border-radius:25px;} #detal .ttl{display:inline-block;margin:0 0 20px;} #detal .colums .col .items{display:flex;flex-wrap:wrap;margin:25px -5px 0;} #detal .colums .col .items .it{position:relative;flex:1 0 0;min-width:175px;padding:10px 15px;margin:5px;background:#fff;border-radius:10px;font-size: 15px;overflow:hidden;} #detal .colums .col .items .it:before{position:absolute;content:attr(data-text);bottom:-20px;right:-20px;color:#f5f5f5;font-size:55px;font-weight:900;} #detal .colums .col .items .it span{position:relative;} #career{position:relative;padding:75px 0 50px;overflow:hidden;} #career .ttl, #career .txt{margin:20px;} #page{position:relative;padding:75px 0;background:#f1f1f1;margin:auto;width:calc(100% - 40px);max-width:1750px;border-radius:25px;} #page .ttl, #page .txt{margin:20px;} #contacts{position:relative;padding:75px 0;overflow:hidden;background:linear-gradient(45deg, #02b203, #eee);margin:25px auto 0;width:calc(100% - 40px);max-width:1750px;border-radius:25px;} #contacts .colums{display:flex;flex-wrap:wrap;} #contacts .colums .col{flex:1 0 0;margin:20px;min-width:300px;} #contacts .colums .col button{position:relative;display:inline-block;width:auto;padding:15px 25px;border-radius:35px;background:#333;color:#fff;border:0;transition:all .3s;margin-top:25px;} #contacts .colums .col button:before{position:absolute;content:"";border-radius:35px;aspect-ratio:1/1;height:100%;background:#333 url('data:image/svg+xml,') no-repeat center / 25%;left:95%;top:0;transition:all .3s;} #contacts .colums .col button:hover:before{transform:rotate(90deg);background:#fff url('data:image/svg+xml,') no-repeat center / 25%;box-shadow:5px -10px 15px rgba(0,0,0,.15);} #contacts .colums .col button:hover{background:#fff;color:#000;cursor:pointer;box-shadow:0 0 15px rgba(0,0,0,.25);} #mini{position:relative;overflow:hidden;} #mini .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;} #mini small, #mini ul{margin:5px 20px;display:inline-block;list-style:none;padding:0;} #mini ul li{display:inline-block;margin:5px;font-size:14px;} @media screen and (max-width:850px){ #mini small, #mini ul{text-align:center;width:calc(100% - 40px);} #mini .container{justify-content:center;} } @media screen and (max-width:650px){ #main, #contacts, #detal, #offer{margin:0;width:100%;} h1, h2{font-size:35px;} #main .ttl h1{font-size:40px;} #main .img{width:85%;} }