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, #r4201 .container, #r3633 .container, #r3034 .container { display: flex; justify-content: center; gap:15px; flex-wrap: wrap; } #r3633 .container .col, #r3034 .container .col{ padding:30px; border-radius: 15px; background-color: #bae1d6; color:black; } #r4201 img { width: 100%; } /* CONTACT PAGE BOXES */ #p9238 #r3139 .container { border-radius:20px; box-shadow:0 0 10px rgb(0 0 0 / 20%); overflow:hidden; } /*SVG-puffar iconer*/ #r4201 svg { max-width: 110px; margin: 0 auto; display: block; margin-bottom: 20px; } /* ============ COMPONENTS ============ */ /* Buttons */ .button2 { text-underline-offset:2px; } .button2 .buttonIcon { transition:transform 200ms ease; } .button2:hover .buttonIcon { transform:translateX(3px); } .button3, .button, .button2 { transition: background 600ms ease, color 600ms ease; padding: 15px 35px; } .button { background-color: #aba398; color: #fff; } .button:hover { background-color: rgb(0 0 0 / 100%); } .button2 { background-color: rgb(0 0 0 / 100%); color: #fff; } .button2:hover { background-color: rgb(0 0 0 / 100%); } /* 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) { .container-fixed { max-width: 1200px; } } /*DESKTOP*/ @media screen and (min-width:1200px) { /*.container-fixed { max-width: 1400px; margin: 0 auto; }*/ #r5002 .row .container-fluid { max-width:1920px; margin:0 auto; } } /*ULTRAWIDE*/ @media screen and (min-width:2000px) { .container-fixed { max-width:1920px; } }