@keyframes animatedBackground { 0% { background-position: 0 0; } 100% { background-position: 0px 300px; } } @media (min-width: 1600px) { .ex-home .card-content-product-main-banner { max-width: 770px; } } @media (max-width: 1470px) { .ex-home .fieldset-shops-banner { width: 49%; margin: 0.1%; min-width: unset; } } @media (max-width: 1200px) { .ex-home .column-product.column-product-main-banner { margin-top: 35px !important; } .ex-home .card-img-right { top: -20% !important; width: 270px !important; } .ex-home .second-row-main-banner { margin-top: 90px !important; } .ex-home .row.products { flex-direction: column !important; margin-top: 0px !important; } } @media (max-width: 930px) { .ex-home .banner-container { flex-direction: column; } .ex-home .banner-item { width: 100% !important; } .ex-home .banner-item:nth-child(2) { margin-top: 20px; } } @media (max-width: 770px) { .ex-home .blog-card { justify-content: center; } } @media (max-width: 768px) { .card-img-right { width: 310px !important; display: none; } .column-product { width: 100% !important; } .card-content.product { align-items: flex-start !important; padding: 0 !important; margin-left: 20px; } .card-content-product-main-banner { margin-top: 20px !important; background: rgba(206, 206, 206, 0.192) !important; } .card-content-product-main-banner > p, .card-content-product-main-banner > section { width: 100% !important; } .card-content-product-main-banner > p { font-size: 39px !important; } .card-img-top-main-banner { right: 125px; left: unset !important; top: -35px !important; } .second-row-main-banner { flex-direction: column !important; > a:nth-child(2) { margin-top: 115px; } > a > img { width: auto; } } .ex-home .banner-item { padding-top: 50px; padding-bottom: 50px; } .ex-home .badge-title, .ex-home .badge-icon-link { font-size: 4vw !important; } .ex-home .badge-icon-link { width: unset !important; align-self: flex-start !important; } .ex-home .subtitle { font-size: 2.5vw !important; } .ex-home .product-image { right: 0px !important; } .ex-home .product-image > img { width: 150px; } .ex-home .badge-icon { margin-left: 0px !important; } .fieldset-shops-banner { width: 100%; min-width: unset; } } @media (max-width: 520px) { section.subtitle.price { justify-content: flex-start; } } @media (max-width: 500px) { .image-overlay { top: -110px !important; } } @media (max-width: 450px) { .second-row-main-banner { margin-top: 7rem !important; } .second-row-main-banner > a > img { width: auto; top: -100px; left: unset !important; } .card.product { margin-top: 0 !important; } } @media (max-width: 400px) { .image-overlay { top: -60px !important; } } .column-product-main-banner { width: 100% !important; display: flex; } .column-product-main-banner > img { border-radius: 12px; } .col-lg-12.col-md-12 > .row:nth-child(3) { display: flex; align-items: center; } .product-main-banner { align-self: flex-end; width: 99%; } .ex-home .row.products { margin-top: 20px; display: flex; justify-content: space-evenly; align-items: flex-end; } .card.product { background-color: rgba(206, 206, 206, 0.192); overflow: hidden; border-radius: 12px 12px 12px 12px; margin-top: 0px; display: flex; flex-direction: column; height: 65%; } .card-img-top { position: absolute; top: -90px; left: 0; width: 400px; height: auto; object-fit: cover; z-index: 1; } .card-img-top-main-banner { position: absolute; top: -65px; left: 25px; width: 125px; height: auto; object-fit: cover; z-index: 1; } .card-img-right { position: absolute; top: -40%; right: 3%; width: 100%; max-width: 350px; height: auto; } .card-content-product-main-banner { position: relative; background: #5988e8; overflow: hidden; color: #fff; padding: 35px 15px 35px 15px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 12px 12px 12px 12px; height: 215px; margin: 0px; } .card-content.product { padding: 0px 15px 13px 15px; margin-top: 100px; display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1; } .card-content.product > p { font-weight: bold; } .card-content.product > section { margin: 0; } .card-content.product > .price { padding: 0; } .column-product { width: 50%; transition: transform 0.3s; transform-origin: center center; } .column-product:hover { transform: scale(1.02); cursor: pointer; } .second-row-main-banner { display: flex; width: 100%; align-items: flex-end; } .card-content-product-main-banner > p { font-weight: bold; color: #404041; font-size: 50px; } .card-content.product > p { font-size: 20px; font-weight: bold; } .card-content-product-main-banner::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 50' style='enable-background:new 0 0 50 50%3B' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st1%7Bopacity:0.3%3Bfill:%23FFFFFF%3B%7D.st3%7Bopacity:0.1%3Bfill:%23FFFFFF%3B%7D%3C/style%3E%3Ccircle class='st1' cx='5' cy='8' r='1'/%3E%3Ccircle class='st1' cx='38' cy='3' r='1'/%3E%3Ccircle class='st1' cx='12' cy='4' r='1'/%3E%3Ccircle class='st1' cx='16' cy='16' r='1'/%3E%3Ccircle class='st1' cx='47' cy='46' r='1'/%3E%3Ccircle class='st1' cx='32' cy='10' r='1'/%3E%3Ccircle class='st1' cx='3' cy='46' r='1'/%3E%3Ccircle class='st1' cx='45' cy='13' r='1'/%3E%3Ccircle class='st1' cx='10' cy='28' r='1'/%3E%3Ccircle class='st1' cx='22' cy='35' r='1'/%3E%3Ccircle class='st1' cx='3' cy='21' r='1'/%3E%3Ccircle class='st1' cx='26' cy='20' r='1'/%3E%3Ccircle class='st1' cx='30' cy='45' r='1'/%3E%3Ccircle class='st1' cx='15' cy='45' r='1'/%3E%3Ccircle class='st1' cx='34' cy='36' r='1'/%3E%3Ccircle class='st1' cx='41' cy='32' r='1'/%3E%3C/svg%3E"); background-position: 0px 0px; animation: animatedBackground 5s linear infinite; } .color3 { border-color: rgb(73, 52, 147); background-color: rgba(206, 206, 206, 0.192); } .color4 { border-color: rgb(162, 205, 75); background-color: rgba(206, 206, 206, 0.192); } .ex-home .product-image { position: absolute; top: -40px; right: 10px; z-index: 1; } .ex-home .badge-banner { display: flex; align-items: center; } .ex-home .badge-icon { margin-left: 20px; width: 50%; } .ex-home .badge-icon > img { height: unset; max-width: unset; } .ex-home .badge-icon-link { display: flex; align-self: flex-end; justify-content: flex-end; width: 50%; font-weight: bold; } .ex-home .banner-container { color: black !important; width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 20px; } .ex-home .banner-item { width: 49%; height: 90px; margin-bottom: 40px; border-width: 2px 2px 2px 2px; border-style: solid; border-radius: 6px; position: relative; transition: transform 0.3s ease; } .ex-home .banner-item:hover { transform: scale(1.02); } .color1 { border-color: rgb(231, 91, 162); background: linear-gradient( 68deg, rgba(206, 206, 206, 0.192) 70%, rgb(231, 91, 162) 0% ); } .color2 { border-color: rgb(247, 207, 75); background: linear-gradient( 68deg, rgba(206, 206, 206, 0.192) 70%, rgb(247, 207, 75) 0% ); } .ex-home .product-info { display: flex; flex-direction: column; margin-left: 10px; width: 100%; white-space: nowrap; } .ex-home .product-info.new-badge { align-items: center; } .ex-home .badge-title, .ex-home .price { z-index: 2; font-size: x-large; font-family: "Nunito"; font-weight: bold; text-transform: capitalize; } .ex-home .subtitle { font-weight: 700; font-size: small; } .ex-home .price { color: rgb(231, 91, 162); } .ex-home .banner-left, .ex-home .banner-right { display: flex; } .ex-home .banner-item-contents-right, .ex-home .banner-item-contents-left { display: flex; width: 100%; align-items: center; } .ex-home .badge-title { color: #404041; } section.subtitle.price { display: flex; color: #404041; justify-content: flex-end; width: 60%; align-items: center; } .ex-home .fieldset-shops-banner { cursor: pointer; min-width: 33%; background-color: rgba(206, 206, 206, 0.192); border-radius: 6px 6px 6px 6px; transition: transform 0.3s ease; } .ex-home .fieldset-shops-banner:hover { transform: scale(1.02); } .ex-home .legend-shops-banner { display: flex; align-items: center; margin-bottom: 10px; border: none; } .ex-home .legend-shops-banner img { margin-right: 10px; width: 120px; } .ex-home .shops-cards { margin: 10px; display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 10px; } .ex-home .product-card-content { display: flex; justify-content: space-between; } .ex-home .product-card-content-info { margin-left: 10px; width: 100%; display: flex; flex-direction: column; } .ex-home .product-card-content-image { position: relative; width: 100%; } .ex-home .image-overlay { position: absolute; top: -140px; right: 0; border-radius: 6px; } .ex-home .shop-title-card { color: #493493; font-size: large; } .ex-home .shop-subtitle-card { font-size: small; } .ex-home .shop-link a { margin-left: 10px; text-decoration: none; color: rgb(208, 42, 126); } .ex-home .shop-link a:hover { color: rgb(221, 0, 111); } .ex-home .legend-shop-card-title { margin: 0 auto; width: unset; border: none; padding: 0 20px 0 20px; } .ex-home .fieldset-shop-card { border-width: 2px 0 0 0; border-style: solid; border-color: rgba(206, 206, 206, 0.192); } .ex-home .row:nth-child(8) .col-lg-12.col-md-12.col-sm-12.htmlcontent_container { padding-left: 0px; padding-right: 0px; } .ex-home .desktop.content-block { display: inline; } .ex-home .row:nth-child(11) { display: flex; align-items: center; background: rgba(206, 206, 206, 0.192); border: 1px solid #eee; border-radius: 8px; padding: 0 20px; margin: 0; } .ex-home .bloglatestposts_container .tileparent .footer { background: #fff; } .ex-home .tile { transition: transform 0.3s; transform-origin: center center; } .ex-home .tile:hover { transform: scale(1.02); } .ex-home .blog-card { display: flex; align-items: center; border: 0 solid #000; border-radius: 6px; padding: 10px; width: 100%; } .ex-home .blog-information { justify-content: center; display: flex; flex-direction: column; } .ex-home .blog-information p:first-child { font-weight: bold; font-size: x-large; display: flex; align-items: center; align-self: center; font-style: italic; } .ex-home .blog-information p:nth-child(2) { font-size: large; align-self: center; } .ex-home .blog-information p:nth-child(3) { align-self: center; } .ex-home .view-now-button { border: none; border-radius: 20px; background-color: rgb(247, 207, 75); padding: 10px; min-width: 100px; font-weight: bold; }