1 BUTTON */ /* Make column to flex box */ #r5002 .row:first-child .col { display:flex; justify-content:center; flex-wrap:wrap; } /* Then set all modules except buttons to 100% width */ #r5002 .row:first-child .col .module:not(.button):not(.button2) { width:100%; } /* Puffar as FLEX BOXES */ #r1692 .container { display:flex; justify-content:center; gap:36px; } /* CONTACT PAGE BOXES */ #p9238 #r3139 .container { border-radius:20px; box-shadow:0 0 10px rgb(0 0 0 / 20%); overflow:hidden; } /* PRODUCT PAGES CONTACT ROW */ /* Makes the row stick to the bottom */ /* Apply the applicable page ID */ #p7438 #r5002 .row:last-child, #p6103 #r5002 .row:last-child, #p8166 #r5002 .row:last-child { position:sticky; bottom:0; z-index:5; } /* ============ COMPONENTS ============ */ /* Buttons */ .button2 { text-underline-offset:2px; } .button2 .buttonIcon { transition:transform 200ms ease; } .button2:hover .buttonIcon { transform:translateX(3px); } .button3 { transition: background 600ms ease, color 600ms ease; } /* ACCORDION */ .accordion li:not(:first-child):not(li ul li) { border-top:3px solid #FFF; } .accordion .itemClose { right:20px; } .accordion .itemClose::before { font-size:25px; } .accordion li { outline:none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* FORM STYLING */ .form input::placeholder, .form textarea::placeholder { opacity:0.5; font-weight:normal; } select, textarea { padding-top:12px !important; padding-bottom:12px !important; } /* BUSINESS CARD */ .businesscard .divider:not(.divider1), .businesscard .textBlock1 div:not(:first-child), .businesscard .textBlock2, .businesscardshare, .businesscardLinks { display:none; } .businesscard img { height:140px; width:140px; object-fit:cover; border:2px solid #CCC; border-radius:100%; padding:5px; } /* REVIEWS */ .reviewDate, .reviewDate span { display:none; } /* PRICE LISTS */ .pricelist .itemnumber { position:relative; display:inline-block; font-weight:300; opacity:70%; width:15px; text-align:left; } .pricelist .itemdescription { padding-left:21px; } /* ======== FOOTER ======== */ .brandfooter { padding:10px; } .brandLogoContainer { width:100%; text-align:center !important; } .brandingText { color:#000; } .footertext a:hover { text-underline-offset: 1px; text-decoration-color:rgb(29 29 31 / 30%); } .openinghours2 { max-width:250px; margin:0 auto; } /* ============= MEDIA QUERIES ============= */ /*MOBILE*/ @media screen and (max-width:767px) { /* Används tillsammans med för att fylla ut främst mobilskärmar kant i kant. safe-area-inset ser till att innehållet inte hamnar under sensorpanelen. */ header .row, #r5002 .row, footer .row { padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); } nav li { margin-left:0; } } /*TABLET*/ @media screen and (min-width:786px) and (max-width:1199px) { } /*TABLET & DESKTOP*/ @media screen and (min-width:768px) { nav li a:not(ul li ul li a):not(.dropIco)::before { content:''; position:absolute; bottom:-5px; left:0; width:100%; height:1px; border-radius:100%; background:currentColor; opacity:0; transition: bottom 200ms ease, opacity 200ms ease; } nav li a:not(ul li ul li a):not(.dropIco):hover::before { bottom:-2px; opacity:1; } } /*DESKTOP*/ @media screen and (min-width:1200px) { #r5002 .row .container-fluid { max-width:1920px; margin:0 auto; } } /*ULTRAWIDE*/ @media screen and (min-width:2000px) { .container-fixed { max-width:1920px; } }