/*-------------------------------------------------------------------------------------------------- Site: Rynos.se COPYRIGHT (c) ASKÅS INTERNET- & REKLAMBYRÅ AB 1997-2019. --------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------- GENERELLA EGENSKAPER ----------------------------------------------------------------------------------*/ html,body {margin:0; padding:0; height:100%;} img {max-width:100%; height:auto; border:0px;} a {text-decoration:none; outline:none;} ul {padding:0; margin:0;} li {list-style:none;} header,footer,nav,main,aside,article,figure,figcaption,section {display:block;} figure {margin:0;} /*---------------------------------------------------------------------------------- GRID ----------------------------------------------------------------------------------*/ /* SEKTIONER */ .section {clear:both; margin:0px;} /* KOLUMNER */ .col {display:block; float:left; margin:1% 0 1% 1.6%;} .col:first-child, .span_2_of_2, .span_1_of_1, .no-L-margin {margin-left:0;} .no-R-margin {margin-right:0;} /* GRUPPERING */ .group:before, .group:after {content:""; display:table;} .group:after {clear:both;} .cf:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} *, *:before, *:after {-webkit-box-sizing:border-box; box-sizing:border-box;} /* GRID 1_of_1 - 1_of_12 */ .span_1_of_1{width:100%}.span_2_of_2{width:100%}.span_1_of_2{width:49.2%}.span_3_of_3{width:100%}.span_2_of_3{width:66.1%}.span_1_of_3{width:32.2%}.span_4_of_4{width:100%}.span_3_of_4{width:74.6%}.span_2_of_4{width:49.2%}.span_1_of_4{width:23.8%}.span_5_of_5{width:100%}.span_4_of_5{width:79.68%}.span_3_of_5{width:59.36%}.span_2_of_5{width:39.04%}.span_1_of_5{width:18.72%}.span_6_of_6{width:100%}.span_5_of_6{width:83.06%}.span_4_of_6{width:66.13%}.span_3_of_6{width:49.2%}.span_2_of_6{width:32.26%}.span_1_of_6{width:15.33%}.span_7_of_7{width:100%}.span_6_of_7{width:85.48%}.span_5_of_7{width:70.97%}.span_4_of_7{width:56.45%}.span_3_of_7{width:41.92%}.span_2_of_7{width:27.42%}.span_1_of_7{width:12.91%}.span_8_of_8{width:100%}.span_7_of_8{width:87.3%}.span_6_of_8{width:74.6%}.span_5_of_8{width:61.9%}.span_4_of_8{width:49.2%}.span_3_of_8{width:36.5%}.span_2_of_8{width:23.8%}.span_1_of_8{width:11.1%}.span_9_of_9{width:100%}.span_8_of_9{width:88.71%}.span_7_of_9{width:77.42%}.span_6_of_9{width:66.13%}.span_5_of_9{width:54.84%}.span_4_of_9{width:43.55%}.span_3_of_9{width:32.26%}.span_2_of_9{width:20.97%}.span_1_of_9{width:9.68%}.span_10_of_10{width:100%}.span_9_of_10{width:89.84%}.span_8_of_10{width:79.68%}.span_7_of_10{width:69.52%}.span_6_of_10{width:59.36%}.span_5_of_10{width:49.2%}.span_4_of_10{width:39.04%}.span_3_of_10{width:28.88%}.span_2_of_10{width:18.72%}.span_1_of_10{width:8.56%}.span_11_of_11{width:100%}.span_10_of_11{width:90.7%}.span_9_of_11{width:81.47%}.span_8_of_11{width:72.24%}.span_7_of_11{width:63.01%}.span_6_of_11{width:53.78%}.span_5_of_11{width:44.55%}.span_4_of_11{width:35.32%}.span_3_of_11{width:26.09%}.span_2_of_11{width:16.86%}.span_1_of_11{width:7.63%}.span_12_of_12{width:100%}.span_11_of_12{width:91.46%}.span_10_of_12{width:83%}.span_9_of_12{width:74.54%}.span_8_of_12{width:66.08%}.span_7_of_12{width:57.62%}.span_6_of_12{width:49.16%}.span_5_of_12{width:40.7%}.span_4_of_12{width:32.24%}.span_3_of_12{width:23.78%}.span_2_of_12{width:15.32%}.span_1_of_12{width:6.86%} .offset_1_of_1{margin-left:100%}.offset_2_of_2{margin-left:100%}.offset_1_of_2{margin-left:49.2%}.offset_3_of_3{margin-left:100%}.offset_2_of_3{margin-left:66.1%}.offset_1_of_3{margin-left:32.2%}.offset_4_of_4{margin-left:100%}.offset_3_of_4{margin-left:74.6%}.offset_2_of_4{margin-left:49.2%}.offset_1_of_4{margin-left:23.8%}.offset_5_of_5{margin-left:100%}.offset_4_of_5{margin-left:79.68%}.offset_3_of_5{margin-left:59.36%}.offset_2_of_5{margin-left:39.04%}.offset_1_of_5{margin-left:18.72%}.offset_6_of_6{margin-left:100%}.offset_5_of_6{margin-left:83.06%}.offset_4_of_6{margin-left:66.13%}.offset_3_of_6{margin-left:49.2%}.offset_2_of_6{margin-left:32.26%}.offset_1_of_6{margin-left:15.33%}.offset_7_of_7{margin-left:100%}.offset_6_of_7{margin-left:85.48%}.offset_5_of_7{margin-left:70.97%}.offset_4_of_7{margin-left:56.45%}.offset_3_of_7{margin-left:41.92%}.offset_2_of_7{margin-left:27.42%}.offset_1_of_7{margin-left:12.91%}.offset_8_of_8{margin-left:100%}.offset_7_of_8{margin-left:87.3%}.offset_6_of_8{margin-left:74.6%}.offset_5_of_8{margin-left:61.9%}.offset_4_of_8{margin-left:49.2%}.offset_3_of_8{margin-left:36.5%}.offset_2_of_8{margin-left:23.8%}.offset_1_of_8{margin-left:11.1%}.offset_9_of_9{margin-left:100%}.offset_8_of_9{margin-left:88.71%}.offset_7_of_9{margin-left:77.42%}.offset_6_of_9{margin-left:66.13%}.offset_5_of_9{margin-left:54.84%}.offset_4_of_9{margin-left:43.55%}.offset_3_of_9{margin-left:32.26%}.offset_2_of_9{margin-left:20.97%}.offset_1_of_9{margin-left:9.68%}.offset_10_of_10{margin-left:100%}.offset_9_of_10{margin-left:89.84%}.offset_8_of_10{margin-left:79.68%}.offset_7_of_10{margin-left:69.52%}.offset_6_of_10{margin-left:59.36%}.offset_5_of_10{margin-left:49.2%}.offset_4_of_10{margin-left:39.04%}.offset_3_of_10{margin-left:28.88%}.offset_2_of_10{margin-left:18.72%}.offset_1_of_10{margin-left:8.56%}.offset_11_of_11{margin-left:100%}.offset_10_of_11{margin-left:90.7%}.offset_9_of_11{margin-left:81.47%}.offset_8_of_11{margin-left:72.24%}.offset_7_of_11{margin-left:63.01%}.offset_6_of_11{margin-left:53.78%}.offset_5_of_11{margin-left:44.55%}.offset_4_of_11{margin-left:35.32%}.offset_3_of_11{margin-left:26.09%}.offset_2_of_11{margin-left:16.86%}.offset_1_of_11{margin-left:7.63%}.offset_12_of_12{margin-left:100%}.offset_11_of_12{margin-left:91.46%}.offset_10_of_12{margin-left:83%}.offset_9_of_12{margin-left:74.54%}.offset_8_of_12{margin-left:66.08%}.offset_7_of_12{margin-left:57.62%}.offset_6_of_12{margin-left:49.16%}.offset_5_of_12{margin-left:40.7%}.offset_4_of_12{margin-left:32.24%}.offset_3_of_12{margin-left:23.78%}.offset_2_of_12{margin-left:15.32%}.offset_1_of_12{margin-left:6.86%} /*---------------------------------------------------------------------------------- ARBETSYTA ----------------------------------------------------------------------------------*/ /* BREDDER */ .section {max-width:1300px;} .section, #wrapper {margin:0 auto;} /* HEADER */ .header {padding:10px 0;} .header .section {position:relative;} .header-wrapper {z-index:2;} .close {color:#ccc; font-weight:bold; width:20px; height:20px; line-height:20px; position:absolute; right:10px; text-align:center; cursor:pointer;} .close::before {display:block; content:''; cursor:pointer; width:30px; height:30px; background-image:url('/bilder/butik/svg/close.svg'); background-repeat:no-repeat; background-size:80%; background-position:center; border:1px solid #000; border-radius:20px;} .mobilenav-icon {display:none;} .logo {margin:20px 50px 20px 0;} .usp {position:absolute; bottom:-22px; left:0; background:#1d837b; padding:5px 15px;} .toplist {height:50px; line-height:50px; font-family:'Rajdhani'; letter-spacing:0.5px;} /* WRAPPER */ #bodywrapper {min-height:100%; position:relative;} #wrapper {padding:0} #breadcrumb {padding:10px 0;} /* .section #main {padding:30px 0 0;} */ .dimmer.active {width:100%; background:rgba(0, 0, 0, 0.6); display:block; height:100%; position:fixed; top:0; left:0; z-index:2;} .KundNyText, .search-result-wrapper {padding-top:15px;} /* FOOTER */ .footer {width:100%; -webkit-align-self:flex-end; -ms-flex-item-align:end; align-self:flex-end;} .askas {margin:15px 0 0; width:100%;} .footer h4 {margin-bottom:10px;} .FootUp {padding:50px 0;} /*---------------------------------------------------------------------------------- ARTIKELGRUPPSMALLAR ----------------------------------------------------------------------------------*/ .Egen_Infogad_HTML {margin:0 auto 30px; text-align:center;} .Artgrp_VisaFler {text-align:right; padding:5px 0 0;} .Artgrp_VisaFlerArtiklar_Markerad {display:inline-block; border:1px solid #999; background:#fff; padding:6px;} .Artgrp_VisaFler a {display:inline-block; border:1px solid #ccc; padding:5px;} .Artgrp_VisaFler a:hover {background:#eee;} .Artgrp_VisaFler a:last-child, .Artgrp_VisaFler span:last-child {margin-left:5px;} .Artgrp_VisaFler .piper_at_the_gates_of_dawn {display:none;} .Artgrp_VisaFler .AVFAM {margin:0 5px 0 0;} .Artgrupp_header .fa-sort {float:left; font-size:20px; line-height:35px; margin:0 8px 0 0;} .Artgrupp_header select {float:left; width:auto; background:url(/bilder/rynos/pil.svg) no-repeat; background-size:11px; background-position:93% center; background-color:#fff; border:1px solid #ccc; height:30px; line-height:30px; color:#000 !important; -webkit-appearance: none; -moz-appearance:none; appearance:none; border-radius:0px; -webkit-box-shadow:none; box-shadow:none; margin:0; padding:0 25px 0 5px;} .Artgrupp_header select::-ms-expand {display:none;} /* ENSKILD PRODUKT */ .PT_Wrapper_All {width:100%; margin:5px 0 30px -0.6% !important; width:101.2%;} .PT_Wrapper {background:#fff; -webkit-box-shadow:1px 1px 0px #ececec; box-shadow:1px 1px 0px #ececec; padding:0 0 10px; float:left; margin:0.6%; position:relative; width:23.8%;} .PT_Bildruta {min-height:190px; line-height:190px; position:relative;} .PT_Bildruta a {width:100%; display:inline-block;} .PT_Bildruta img {vertical-align:middle; max-height:180px;} .PT_Faktaruta {margin:10px 0px 5px; padding:5px 20px;} .PT_Beskr {height:40px; margin:0px 0px 15px;} .PT_Text_Kort {height:70px; margin:0px 0px 5px;} .PT_Pris {margin:0px;} .PT_Pris span {display:block;} .PT_Status {min-height: 25px;} .PT_Knappar {min-height: 35px;} .KKn13 {display: none !important;} .PT_Wrapper_All .PT_Pris {margin-left:0px; height:45px;} #Faktakolumn #KundBetyg {display: none;} .egenskapsbilder img {max-width: 50px; max-height: 50px;} .egenskapsbilder.flex {margin: 20px 0 10px 0;} .PT_Wrapper #ArtnrFalt {font-size:12px; margin-bottom:5px;} .PT_Varumarke {margin-top:5px; height:30px;} .PT_Varumarke img {max-height:25px;} /* ENSKILD PRODUKT SAKNAS */ .Artgrp_Lista {width:100%; display:block; background:#fff; border:1px solid #ccc; padding:4px; margin:1px;} #ListaOmArtiklarSaknas ul {list-style:none; margin:0; padding:0;} #ListaOmArtiklarSaknas li a {display:block; float:left; width:100%; margin: 0 0 5px 0; border:1px solid #f1f1f1; padding:5px;} /* LISTA 1 */ .PT_Wrapper.Lista {border-bottom:1px solid #eee; margin:0; width:50%; -webkit-box-shadow:none; box-shadow:none;} .PT_Wrapper.Lista .PT_Bildruta {min-height:inherit; line-height:inherit; margin:0;} .PT_Wrapper.Lista .PT_Bildruta a {height:60px; line-height:60px;} .PT_Wrapper.Lista .PT_Beskr {margin:0 1%; height:75px;} .PT_Wrapper.Lista .PT_Pris {height:25px;} .PT_Wrapper.Lista .PT_Status {padding-top:2px;} .PT_Wrapper.Lista .PT_Pris, .PT_Wrapper.Lista .PT_Pris div, .PT_Wrapper.Lista .PT_Pris {font-size:20px;} .PT_Wrapper.Lista .PT_Knappar {float:right;} /* FLER */ .Fler .PT_Wrapper {display:inline-block; float:none; width:18.5%; margin:0.6%; padding:10px 30px;} .Fler .PT_Wrapper_All {margin-top:0;} .komplettera {padding:20px; margin-top:23px;} .komplettera .PT_Wrapper {width:100%;} .flerprodukter {margin-top:-37px !important;} .Bilder_Artikelgrupp {text-align:center;} .Bilder_Artikelgrupp .PT_Wrapper {float:none; display:inline-block;} /*---------------------------------------------------------------------------------- PRODUKTBESKRIVNING ----------------------------------------------------------------------------------*/ /* BILDKOLUMN */ #Bildkolumn {align-self:center;} .ProduktBild {width:100%; vertical-align:middle; margin:0 0 10px 0; position:relative;} .BildZoomThumbnails {width:60px; float:left; margin:0 5px 5px 0;} .ProduktBildtext {width:100%; margin:10px 0px;} .BildZoomThumbnails a {vertical-align:middle;} .BildZoomThumbnails img {display:block; margin:0 auto;} .tnslide {width:91% !important; margin:0 auto;} .mz-expand {background:rgba(0, 0, 0, 0.6) none repeat scroll 0 0 !important;} .mz-expand {filter:blur(0px) !important;} .mz-button.mz-button-close {background:#fff !important; color:#231f20 !important;} :root:not(.mobile-magic) button.mz-button {color:rgba(255, 255, 255, 0.85) !important;} /* PRODUKTKOLUMN */ #ArtikelnamnFalt {font-size:31px;} #VarumarkeFalt {margin:0 0 5px;} #Avbetalning {background:#F2F2F2; padding:10px;} #FaltRader, #KundBetygRad {margin:10px 0;} .TextKort {padding:10px 0; margin:10px 0;} .TextKort li {margin:0 10px;} #Produktinfo li {margin:0 15px;} .ProduktbeskrAntalvalTabell, .Laggikorgen_Antalsrad {margin:0 0 5px 0;} .TeknSpec_Tabell {width:100%; border:0; margin:10px 0; padding:0;} .TeknSpec_Rad1_Vanster, .TeknSpec_Rad1_Hoger, .TeknSpec_Rad2_Vanster, .TeknSpec_Rad2_Hoger {padding:5px;} #OrderFalt {margin:10px 0 0; padding:10px 0 0;} #KampanjFalt {border:1px solid #ddd; padding:20px;} #Produktinfo iframe {max-width:100%; height:auto;} #Produktinfo table {max-width:100%;} .ArtnrFaltArtgrp {margin:0 0 0 3px;} #Bildkolumn .owl-item {min-height:50px; line-height:50px; vertical-align:middle; background:#fff; padding:5px 0;} #Bildkolumn .owl-item img {max-height:46px; vertical-align:middle; margin:0;} .artnummer {font-size:12px;} .produktext li {list-style:disc !important;} .produktext ul {padding-left:15px !important;} /* VARIANTARTIKLAR */ .Egenskaper_Tabell {width:100%;} .Egenskaper_Tabell td {line-height:40px;} .Egenskaper_Tabell select {margin:0 0 5px; width:100%;} .ProduktbeskrAntalvalText, .Laggikorgen_Antalsfalt {height:35px; line-height:35px;} .Laggikorgen_Antalsfalt {border:1px solid #f1f1f1; text-align:center; width:50px !important;} .Set_Falt_Wrap select {width:100%;} .Laggikorgen_Antalsfalt {width:40px !important; height:50px !important; float:left; text-align:center; background:#eee !important; font-size:20px !important;} .Laggikorgen_Antalsrad {float:left; width:90px;} #SubmitFalt {float:left; width: -moz-calc(60% - 90px); width: -webkit-calc(60% - 90px); width: -o-calc(60% - 90px); width: calc(60% - 90px); padding-left:10px;} .ProduktbeskrAntalvalText {display:none;} .ProduktbeskrAntalvalTabell {float:left;} #OrderFalt .dec-inc.minus, #OrderFalt .dec-inc.plus {float:left;} .minus i {padding-right:6px; line-height:50px;} .plus i {padding-left:6px; line-height:50px;} .ProduktbeskrAntalvalFalt {padding:0;} .headline {margin:0 0 20px;} .tabcontent .Dokument a {display:block; margin:0 0 10px; -webkit-transition:all .1s ease-in-out; transition:all .1s ease-in-out;} a.bild::before {font-family:"Font Awesome 5 Pro"; font-weight:300; content:"\f030"; padding:0 5px 0 0; color:blue;} a.pdf::before {font-family:"Font Awesome 5 Pro"; font-weight:300; content:"\f1c1"; padding:0 5px 0 0; color:red;} .tabcontent .Dokument a:hover {text-decoration:underline;} a.pdf::before {font-family:"Font Awesome 5 Pro"; font-weight:300; content:"\f1c1"; padding:0 5px 0 0; color:red;} /* LÄS MER */ .produktext.ptUnactive {overflow:hidden; margin:20px 0 0; max-height:400px; position:relative;} .produktext.ptUnactive::before {content:""; height:100%; left:0; position:absolute; bottom:-80px; width:100%; background:#fff; background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)), to(rgba(255,255,255,1))); background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));} .produktext.ptActive::before {background:none !important;} .produktext.ptActive {max-height:inherit; overflow:visible;} .lasmer::before, .lasMindre::before {background:#ccc; display:block; text-align:center; border-radius:45px; -webkit-border-radius:45px; width:50px; height:50px; line-height:53px; color:#fff; font-size:14px; font-weight:500; text-transform:uppercase; margin:0 auto 7px;} .lasmer:hover, .lasMindre:hover {cursor:pointer;} .lasmer::before {font-family:"Font Awesome 5 Pro"; font-weight:300; content:"\f078"; color:#fff; font-size:20px;} .lasMindre::before {font-family:"Font Awesome 5 Pro"; font-weight:300; content:"\f077"; color:#fff; font-size:20px;} .lasmer span, .lasMindre span {color:#bbb; display:block; line-height:normal; text-transform:uppercase; font-weight:700; font-size:18px;} /*---------------------------------------------------------------------------------- INLOGGNING ----------------------------------------------------------------------------------*/ .inloggning::before {font-family:"Font Awesome 5 Pro"; font-weight:300; content:"\f007"; font-size:24px; display:block;} .inloggning {margin:10px 20px 0 10px; display:block; padding:4px; cursor:pointer; color:#000; font-size:14px; text-align:center; text-transform:uppercase;} .inloggningsruta {width:300px; display:none; position:fixed; padding:30px 20px; margin:0; z-index:3; left:50%; top:190px; transform:translate(-50%, 0%); -webkit-transform:translate(-50%, 0%); background:#fff;} .inloggningsruta.active {display:block;} .inloggningsruta .close {right:20px; top:10px; display:none;} .inloggningwrapper .button:first-child {margin-right:5px;} #AdressblockLoggain table {float:left;} /*---------------------------------------------------------------------------------- KNAPPAR ----------------------------------------------------------------------------------*/ .Knapp_Kop_Tabell tr td, .PT_Knappar .Knapp_Info {display:none;} .Knapp_Kop_Tabell .Knapp_Kop {display:block;} .Knapp_Kop_Tabell_Artikel {width:100%;} .Knapp_Kop_Tabell, .PT_Knappar table {float:right;} .Knapp_Kop_Tabell .Knapp_Info_Hoger {margin:0 5px 0 0; float:left;} .PT_KnapparKampanj tabell {width:135px;} #SubmitFalt .Knapp_Kop_Tabell_Artikel a {float:left; height:50px; line-height:50px; padding:0 16px; width:100%;} /*---------------------------------------------------------------------------------- BLANDAT ----------------------------------------------------------------------------------*/ .textbox {padding:0 10%; text-align:center; width:100%; left:50%; position:absolute; top:50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%);} .textbox h2 a, .textbox h3 a {color:#fff; font-weight:300; text-shadow:2px 2px 3px #333;} .textbox h3 a {border:2px solid #fff; padding:1%; display:inline-block;} .textbox h3 a:hover {background:rgba(255,255,255,1); color:#000; text-shadow:none;} .utvaldavarumarken {margin:30px 0;} .headline h3, .headline h1 {display:inline-block; position:relative; margin-bottom:10px;} #Bildkolumn .owl-buttons {position:absolute; top:11px; width:100%;} #Bildkolumn .owl-carousel {position:relative; z-index:0 !important;} #Bildkolumn .owl-prev {float:left; margin-left:15px;} #Bildkolumn .owl-next {float:right; margin-right:15px;} #Bildkolumn .owl-wrapper-outer {margin:0 8%; overflow:hidden; position:relative; width:84% !important; z-index:10;} .utvaldavarumarken .owl-theme .owl-controls .owl-buttons div {display: inline-block; font-size: 12px;margin: 0 5px; opacity: 0.5; padding: 0 10px; text-indent: -9999px;} .utvaldavarumarken .owl-prev{position: absolute; top:35%; background:url("/bilder/butik/sprites.png") repeat scroll 0 -30px rgba(0, 0, 0, 0) !important; border-radius:0; height:64px; width:26px;left:-34px; margin:0 !important;} .utvaldavarumarken .owl-next{position: absolute; top:35%; border-radius:0; background:url("/bilder/butik/sprites.png") repeat scroll -25px -30px rgba(0, 0, 0, 0) !important; border-radius:0; height:64px; width:28px;right:-34px; margin:0 !important;} .startartiklar .PT_Wrapper_All {margin:0 0 30px 0 !important; width:100%;} .startartiklar .headlineStart {margin: 0 0 0 7px !important; width: -moz-calc(100% - 15px); width: -webkit-calc(100% - 15px); width: -o-calc(100% - 15px); width: calc(100% - 15px);} .headlineStart {line-height:40px; height:40px;} .headlineStart h3 {margin:0; line-height:inherit; font-size:24px; text-transform:uppercase;} #owl-demo .owl-pagination {position:relative; margin-top:-40px; padding-bottom:1%;} #owl-demo .owl-prev, #owl-demo .owl-next {top:46%;} .owl-theme .owl-controls .owl-page span {background:#fff !important;} .owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span {background:#222 !important;} .puffarNedre .kolumn {width:50%; align-self:center;} .textkolumn {padding:20px 30px;} .textkolumn * {max-width:500px;} .puffarNedre a, .puffar p a, .ExtraTillbehor li .Gruppering {font-weight:700; line-height:initial; border:1px solid; padding:10px 20px; text-transform:uppercase; display:inline-block; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; -moz-transition:all 0.1s ease-in-out; -o-transition:all 0.1s ease-in-out; -webkit-transition:all 0.1s ease-in-out; transition:all 0.1s ease-in-out; cursor:pointer;} .puffarNedre a:hover, .puffar p a:hover {background:#eee;} .puffarNedre {margin-bottom:20px;} .kolumn1, .kolumn2, .kolumn3 {width:100%;} .kolumn1 {order:3;} .kolumn2 {order:2;} .kolumn3 {order:1;} .puffar p {padding:15px;} .varumarken {justify-content:space-between; padding:30px;} .startpuff {background-color:rgba(0, 0, 0, 0.37);} .toppuff {padding:40px 20px; width:100%; position:absolute; top:0; left:50%; -webkit-transform:translate(-50%, 0); -ms-transform:translate(-50%, 0); -o-transform:translate(-50%, 0); -moz-transform:translate(-50%, 0); transform:translate(-50%, 0);} .centerpuff {padding:40px 20px; width:100%; position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); transform:translate(-50%, -50%);} .bottompuff {padding:40px 20px; width:100%; position:absolute; bottom:5px; left:50%; -webkit-transform:translate(-50%, 0); -ms-transform:translate(-50%, 0); -o-transform:translate(-50%, 0); -moz-transform:translate(-50%, 0); transform:translate(-50%, 0);} /*---------------------------------------------------------------------------------- NYHETSBREVSANMÄLAN ----------------------------------------------------------------------------------*/ .nyhetsbrevsanmalan {margin:10px 0 20px;} .nyhetsbrevsanmalan p {margin:0 0 10px !important} .nyhetsbrevsanmalan .Knapp_Anmalan a {background:#1d837b; color:#fff; display:block; height:45px; line-height:45px !important; text-align:center; width:100%;} .nyhetsbrevsanmalan .Knapp_Anmalan {float:left; width:20%;} .nyhetsbrevsanmalan input {border:1px solid #222 !important; float:left; font-size:17px !important; height:45px !important; line-height:45px !important; padding:0 0 0 20px !important; width:80%; color:#222;} /*---------------------------------------------------------------------------------- CSS3-EFFEKTER ----------------------------------------------------------------------------------*/ .close { border-radius:20px;} .PT_Wrapper, .Artgrp_VisaFler a {-webkit-transition: all 0.2s ease; transition: all 0.2s ease;} input[type="text"], input[type="password"], input[type="tel"], input[type="email"], select, textarea, #nyhetsbrev input[type="submit"], #kontaktformular input[type="submit"], #Adressblock2 input, #Adressblock2 select { background-color:#fff; border:1px solid #ddd; color:#555; display:inline-block; font-size:14px; height:35px; line-height:30px; padding:6px; -webkit-transition:border 0.2s linear 0s, -webkit-box-shadow 0.2s linear 0s; transition:border 0.2s linear 0s, -webkit-box-shadow 0.2s linear 0s; transition:border 0.2s linear 0s, box-shadow 0.2s linear 0s; transition:border 0.2s linear 0s, box-shadow 0.2s linear 0s, -webkit-box-shadow 0.2s linear 0s; vertical-align:middle; } textarea {min-height:100px; line-height:normal; width:100%;} input:focus, select:focus, textarea:focus {border-color:rgba(82, 168, 236, 0.8) !important; box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6); -webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6); outline:0 none} .dimmer.active, .sokrutan.active, .soktoggle::after, .stangsok::after, .inloggningsruta.active, .mobilenav.active, .Artgrp_VisaFler a:hover { -webkit-transition:all 0.1s ease-in-out; transition:all 0.1s ease-in-out; } .textbox h3 a:hover { -webkit-transition:all 0.4s ease-in-out; transition:all 0.4s ease-in-out; } .kundtjanstruta, .Topoffer_Tabellbakgrund { box-shadow:0 0 6px 0 rgba(200, 200, 200, 0.8); -moz-box-shadow:0 0 6px 0 rgba(200, 200, 200, 0.8); -webkit-box-shadow:0 0 6px 0 rgba(200, 200, 200, 0.8); } /*---------------------------------------------------------------------------------- TYPOGRAFI OCH FÄRGER ----------------------------------------------------------------------------------*/ @font-face { font-family: 'Rajdhani'; src: url('/themes/rynos/design/css/webfonts/rajdhani-regular-webfont.woff2') format('woff2'), url('/themes/rynos/design/css/webfonts/rajdhani-regular-webfont.woff') format('woff'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Rajdhani'; src: url('/themes/rynos/design/css/webfonts/rajdhani-semibold-webfont.woff2') format('woff2'), url('/themes/rynos/design/css/webfonts/rajdhani-semibold-webfont.woff') format('woff'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Rajdhani'; src: url('/themes/rynos/design/css/webfonts/rajdhani-bold-webfont.woff2') format('woff2'), url('/themes/rynos/design/css/webfonts/rajdhani-bold-webfont.woff') format('woff'); font-weight: 900; font-style: normal; } @font-face { font-family:'lato'; src: url('/themes/rynos/design/css/webfonts/lato-regular-webfont.woff2') format('woff2'), url('/themes/rynos/design/css/webfonts/lato-regular-webfont.woff') format('woff'); font-weight:300; font-style:normal; } @font-face { font-family:'lato'; src: url('/themes/rynos/design/css/webfonts/lato-medium-webfont.woff2') format('woff2'), url('/themes/rynos/design/css/webfonts/lato-medium-webfont.woff') format('woff'); font-weight:400; font-style:normal; } @font-face { font-family:'lato'; src: url('/themes/rynos/design/css/webfonts/lato-bold-webfont.woff2') format('woff2'), url('/themes/rynos/design/css/webfonts/lato-bold-webfont.woff') format('woff'); font-weight:700; font-style:normal; } body, textarea, input, select {font-family:'lato', Arial, Helvetica, sans-serif; font-size:15px; color:#000; font-weight:400;} .inloggning, .Varukorg .AIRvarukorg-Arrow::after, .PT_Beskr, .PT_Pris, .Filter_Titel, #PrisFalt span, .Snabbkassa_Flik_Normal div, .Snabbkassa_Flik_Normal span, #LankAdressblockAnvnamn b, #LankAdressblockLeveransadress b, .Snabbkassa_Flik_Normal div, .Snabbkassa_Flik_Normal span, .Sokfalt {font-family:'Rajdhani', Arial, Helvetica, sans-serif; font-weight:700;} b, strong {font-weight:700;} #SubmitFalt .Knapp_Kop_Tabell_Artikel a, .Knapp_Kop a, .PT_Text_Kort, .PT_Beskr a {font-weight:700;} .PT_Pris,.PT_PrisKampanj {font-weight:900;} .PT_Beskr, #ArtikelnamnFalt, .PT_Text_Kort, .thirdbutton, .toppmeny .niva1 li a, .footer p, .footer div, .usp p, .TeknSpec_Rad1_Hoger, .TeknSpec_Rad2_Hoger, .nyhetsbrevsanmalan input, .ArtnrFaltArtgrp {} .PT_Pris, .PT_Pris div, .PT_Antalsfalt, .TeknSpec_Rad1_Vanster, .TeknSpec_Rad2_Vanster, .KampanjFalt-Text, .inloggningsruta p, .Artgrp_VisaFlerArtiklar_Markerad, .bloggkommentar_rubrik, .Topoffer_Artikelnamn, .Topoffer_Pris, .reviewname, #footer-wrapper h4, #KampanjFalt div div:first-of-type {font-weight:700;} .Roboto {font-family:'Rajdhani', Arial, Helvetica, sans-serif !important; font-weight:300;} h1,h2,h3,h4 {font-family:'Rajdhani', Arial, Helvetica, sans-serif; font-weight:700; margin:0 0 5px 0; line-height:normal;} /* TEXTSTORLEKAR */ h1 {font-size:3em} h2 {font-size:2.4em} h3 {font-size:2em} h4 {font-size:1.5em} .eight {font-size:8vw} .seven {font-size:7vw} .six {font-size:6vw} .five {font-size:5vw} .four {font-size:4vw} .three {font-size:3vw} .two {font-size:2vw} .footer .FootUp p {font-size:17px; color:#888;} .headline h3 {font-size:30px;} #PrisFalt span {font-size:40px; font-weight:900;} .PT_Pris, .PT_Pris div, .PT_Pris {font-size:24px} #SubmitFalt .Knapp_Kop_Tabell_Artikel a, .footer h4 {font-size:22px} .headline, .Topoffer_Artikelnamn, .Topoffer_Pris, .Ingress, .fa-sort, .PT_Beskr a, .TeknSpec_Tabell {font-size:16px} .PrisREA, .PrisORD, .VGPrisStor, .rubrikPris, .rubriker i, .headline, .nyhetsbrevsanmalan input, #footer-wrapper h4 {font-size:16px} .PT_PrisOrdinarie, .ArtnrFaltArtgrp {font-size:14px;} .nav-topmenu ul li a, .PT_Text_Kort, #breadcrumb a, #breadcrumb, .Fynda .PT_Beskr a, .FS12 {font-size:12px} .PT_PrisOrd, .artikel-topplista-pris p, .valutavaljare, .Artgrupp_header, .Artgrp_VisaFler a, .Artgrp_VisaFler span, .PT_Antalsfalt, .artikel-topplista-text, .artikel-topplista-text p {font-size:10px} /* TEXTEGENSKAPER */ .navigation_typ_ul_li_kategoriersaknas, .date, .bloggkommentar_tid {font-style:italic} .PT_Antalsfalt, .rubrik-kundvagn, .PT_Bildruta, .Antal input, .Artikellista_PrisStafflade, #Bildkolumn, .BildZoomThumbnails a {text-align:center} .Artikellista_PrisKampanj, .Artikellista_Pris, .comment {text-align:right} .kampanjmenu li > a, .inloggningsruta p, .nav ul.niva1 > li > a, .nav-menu.varumarken {text-transform:uppercase} .kampanjmenu li ul li a {text-transform:none} .bestallningsknapp, .Knapp_Sok_Produkt {cursor:pointer} a.forgotpassword {line-height:normal} #main p, .Ingress {margin:0 0 10px; line-height:19px;} .usp p {margin:0; color:#fff; font-size:17px;} /* TEXTFÄRGER */ body, a, .fa-shopping-cart, .mobilenav-icon, .fa-search {color:#111} .Knapp_Kop a, .Knapp_Info a, .Knapp_Kop a:hover, .Knapp_Info a:hover, .Knapp_Generell a, .Knapp_Generell a:hover, .submitKnapp input {color:#fff} #breadcrumb a, #breadcrumb {color:#999} .PrisAvd{ display: none; } #PrisFalt { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-bottom:5px; } .PrisREA{ -webkit-box-ordinal-group:2; -ms-flex-order:1; order:1; } .PrisORD{ -webkit-box-ordinal-group:3; -ms-flex-order:2; order:2; } .PrisORD, .PrisORDv{ font-size: 20px !important; } .PT_PrisOrdinarie, .PT_Pris_Text, .PrisORD { color: #111; text-decoration: line-through;} .PT_PrisOrd, .PT_PrisKampanj, .PrisPROCENT, .PrisREA, #PrisFaltStafflade, .Artikellista_PrisKampanj, .LSS_Kampanjpris {color:#cb0000} /* BAKGRUNDSFÄRGER */ .TeknSpec_Rad1_Vanster, .TeknSpec_Rad1_Hoger {background:#f1f1f1} .TeknSpec_Rad2_Vanster, .TeknSpec_Rad2_Hoger {background:#fff} .Flik_Beskr_Normal a, .Flik_Beskr_Saknas, .Flik_Normal a, .Flik_Beskr_Markerad a, .Flik_Markerad a, #ListaOmArtiklarSaknas li a:hover {background:#f5f5f5} .Flik_Beskr_Normal a:hover, .Flik_Beskr_Markerad a:hover, .Flik_Normal a:hover, .Flik_Markerad a:hover, .Flik_Beskr_Markerad a, #ListaOmArtiklarSaknas li a {background:#ddd} /* KNAPPAR */ .primbutton a {background-color:#1d837b; border-bottom:3px solid #137069; color:#fff; height:35px; line-height:35px; display:block; padding:0 10px; -webkit-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;} .primbutton a:hover {background:#137069;} .secbutton a {background-color:#999; border-bottom:3px solid #777; color:#fff; height:35px; line-height:35px; display:block; padding:0 10px; -webkit-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;} .secbutton a:hover {background:#777;} .Knapp_Generell a, .Knapp_Info a, #Felmeddelande a, a#vu_sok {background:#999; border-bottom:3px solid #777; color:#fff; height:35px; line-height:35px; display:block; padding:0 10px; -webkit-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;} .Knapp_Generell a:hover, .Knapp_Info a:hover, #Adressblock .LankLoggain a:hover, #Felmeddelande a:hover, a#vu_sok:hover {background:#777;} .Knapp_Kop a, .Checkout a {background:#1d837b; border-bottom:3px solid #137069; color:#fff; height:35px; line-height:35px; display:block; padding:0 10px; -webkit-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s; font-size:16px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; text-align:center;} .Knapp_Kop a:hover, .Checkout a:hover, .bestallningsknapp:hover {background:#137069;} .puffknapp a {border:2px solid #fff; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; display: inline-block; padding:7px 15px; font-size:17px; -moz-transition:all 0.1s ease-in-out; -o-transition:all 0.1s ease-in-out; -webkit-transition:all 0.1s ease-in-out; transition:all 0.1s ease-in-out;} .puffknapp a:hover {background:#fff; color:#000;} /* KÖPKNAPP */ #SubmitFalt .buy-button { color: #FFF; display: block; font-size: 22px; cursor:pointer; padding: 0px 16px; width: 100%; float: left; background: #1d837b; border-bottom: 3px solid #137069; height: 50px; line-height: 50px; -webkit-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; text-align: center; font-weight: 700; } #SubmitFalt .buy-button:hover{ background: #137069; } .label.processing{ font-size: 22px; } #SubmitFalt .buy-button.sid_1[data-state='processing']{ content: attr(data-default); font-size: 15px; } .PT_Knappar .info-link, .buy-button .feedback{display: none;} .PT_Knappar .buy-button{ color: #FFF; display: block; font-size: 16px; cursor:pointer; padding: 0px 10px; float: left; background: #1d837b; border-bottom: 3px solid #137069; height: 35px; line-height: 35px; -webkit-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; text-align: center; font-weight: 700; } .PT_Knappar .buy-button:hover{ background: #137069; } .PT_Knappar .buy-button-qty{display: none;} /*---------------------------------------------------------------------------------- VARIABLER ----------------------------------------------------------------------------------*/ .white {background:#fff} .whiter {background:rgba(255,255,255,0.97);} .black {background:#222;} .lightgrey {background:#f5f5f5} .darkgrey {background:#111} .primcolor {background:#90a0b0} .seccolor {background:#444} .left {float:left;} .right {float:right;} .center {text-align:center;} .relative {position:relative;} .whitetext, .whitetext * {color:#fff;} .blacktext {color:#000;} .ten {padding:10px} .twenty {padding:20px} .margAuto {margin:0 auto;} .marg0 {margin:0;} .margTB {margin:10px 0} .margT {margin:10px 0 0} .margR {margin:0 10px 0 0} .margB {margin:0 0 10px} .margL {margin:0 0 0 10px} .margB10 {margin:0 0 10px} .paddTB {padding:10px 0} .paddT {padding:10px 0 0} .paddB {padding:0 0 10px} .border {border:1px solid #222} .borderT {border-top:1px solid #222} .borderB {border-bottom:1px solid #222} .borderTB {border-top:1px solid #222; border-bottom:1px solid #222} .mobile {display:none;} .desktop {display:block;} .shadow { -webkit-box-shadow:1px -2px 10px #444; box-shadow:1px -2px 10px #444;} .radius { border-radius:5px;} .flexW {display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap;} .flex {display:-webkit-box; display:-ms-flexbox; display:flex;} .documentH { width: 100%; text-indent: 0; border-color: inherit; border-collapse: collapse; font-size: var(--text-s); } .documentH .file-header th { font-weight: 700; cursor: pointer; text-align: left; } .documentH .file-header th:after { font-family: "Font Awesome 5 Pro"; font-size: var(--text-xs); margin-left: var(--gutter-xs); } .documentH .file-header th.asc::after { content: "\f078"; margin-left: .3rem; } .documentH .file-header th.desc::after { content: "\f077"; margin-left: .3rem; } .documentH span[class*=icon_] { font-family: "Font Awesome 5 Pro"; font-size: var(--text-l); width: 16px; margin-right: .3rem; } .documentH .icon_img:before { content: "\f030"; color: #0a64a9; } .documentH .icon_pdf:before { content: "\f1c1"; color: #a90a0a; } .documentH tr { background: none !important; } .documentH th, .documentH td { border-bottom: 1px solid #ebebeb; padding: 6px; } .documentH th:first-child, .documentH td:first-child { width: 356px; } .documentH th:nth-child(2), .documentH td:nth-child(2) { width: 138px; } .documentH th._last, .documentH td._last { text-align: right; } .documentH th._last a, .documentH td._last a { justify-content: flex-end; } .documentH th._last button, .documentH td._last button { color: #1d837b; cursor: pointer !important; background: none; border: none; padding: .5rem; font-size: 15px; } .documentH .file_row a { display: flex; gap: 4px; } .documentH .documentName { -ms-word-break: break-all; word-break: break-all; } .documentH td._last { padding-left: .5rem; } @media only screen and (max-width: 752.99px) { .documentH ._last { display: none; } } /* ------------------------ ACE (Startsida, landningssida, webbsidor och blogginlägg) ------------------------ */ /* ACE generellt */ .cm-section { max-width: 100vw; overflow: hidden; } .cm-section.wrap { max-width: var(--max-width); padding-left: var(--gutter); padding-right: var(--gutter); } .cm div:not(.cm-img-txt)>h2, .cm-btn-showmore { text-align: unset; /* Nollställer default styling som kommer med ACE */ } /* Product widget */ .cm_article_wrapper h2 + .PT_Wrapper_All { margin-top: calc(var(--gutter)*-1); } h2[style=" text-align:left; "] ~ .cm-btn-showmore { text-align:left; } h2[style=" text-align:center; "] ~ .cm-btn-showmore { text-align:center; } h2[style=" text-align:right; "] ~ .cm-btn-showmore { text-align:right; } .cm-btn-showmore { margin-bottom: var(--gutter); } .cm-btn-showmore .btn.btn-auto.Knapp_Generell{ all: unset; width: auto; display: inline-block; } /* Image widget */ .cm-img-cta a { --focus-color: var(--base-color1); /*CL: I teorin, om background color satt som ett data attribut på knappen, hade man kunnat plocka upp den i --focus-color då? Är det något värt att lägga till i ACE mallarna? */ border-radius: 10px; } body:not(.using-mouse) .cm-img-wrapper a:not(.cm-img-tag-link):focus { width: 100%; height: 100%; display: inherit; } body:not(.using-mouse) .cm-img-wrapper a.cm-img-tag-link:focus span.cm-img-tag { outline: var(--focus-outline); /* border: var(--focus-border); */ box-shadow: var(--focus-shadow); } /* Blog widget */ .start-blog-article { display: flex; flex-flow: column; align-items: stretch; } .blog-btn-wrap { flex-grow: 1; display: flex; align-items: flex-end; } .start-blog .blog-ingress { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; } /* Accordion widget */ .cm-section ul.accordion { list-style: none; padding: 0; } /* Forms widget */ .input-type-radio>div>*, .input-type-checkbox>div>* { display: inline-block; } .cm-form .cm-form-group>label { font-weight: 600; } /* ------------------------ Generellt ------------------------ */ .cm-section { max-width: 100vw; overflow: hidden; } .cm-section.wrap { max-width: 90rem; padding-left: var(--gutter); padding-right: var(--gutter); } @media only screen and (min-width: 90.1rem) { .cm-section.wrap { padding-left: 0; padding-right: 0; } } .cm div:not(.cm-img-txt) > h2, .cm-btn-showmore { text-align: unset; /* Nollställer default styling som kommer med ACE */ } /* ------------------------ Margin & Padding ------------------------ */ .cm-section:not(:last-child) { margin-bottom: calc(var(--gutter) * 2); } .nopadd-between-columns > .row > * { padding-inline: 0; } /* ------------------------ Product widget ------------------------ */ .cm_article_wrapper h2 + .PT_Wrapper_All { margin-top: calc(var(--gutter) * -1); } h2[style=" text-align:left; "] ~ .cm-btn-showmore { text-align: left; } h2[style=" text-align:center; "] ~ .cm-btn-showmore { text-align: center; } h2[style=" text-align:right; "] ~ .cm-btn-showmore { text-align: right; } .cm-btn-showmore { margin-bottom: var(--gutter); } .cm-btn-showmore .btn.btn-auto.Knapp_Generell { all: unset; width: auto; display: inline-block; } /* ------------------------ Image widget ------------------------ */ .cm-img-cta a { --focus-color: var(--base-color1); border-radius: 10px; } body:not(.using-mouse) .cm-img-wrapper .cm-img-txt a:not(.cm-img-tag-link):focus { width: 100%; height: 100%; display: inherit; } body:not(.using-mouse) .cm-img-wrapper a.cm-img-tag-link:focus span.cm-img-tag { outline: var(--focus-outline); box-shadow: var(--focus-shadow); } .full-width .cm-img-txt { text-wrap: balance; } .full-width .cm-img-txt h2 { font-size: clamp(1.375rem, -0.5997rem + 4.1139vw, 3rem); line-height: clamp(1.375rem, -0.7516rem + 4.4304vw, 3.125rem); margin: 0 0 var(--gutter); } .full-width .cm-img-txt h4 { font-size: clamp(2rem, 1.0886rem + 1.8987vw, 2.75rem); line-height: clamp(1.5rem, -0.7785rem + 4.7468vw, 3.375rem); margin: 0 0 var(--gutter); } .full-width .cm-img-txt span { font-size: clamp(1rem, 0.3924rem + 1.2658vw, 1.5rem); line-height: clamp(1.375rem, 0.4636rem + 1.8987vw, 2.125rem); } .hero .cm-img-wrapper img { min-height: 400px; max-height: 80vh; max-height: 80lvh; } .hero .cm-img-txt h2, .full-width .hero .cm-img-txt h2 { font-size: clamp(2.25rem, 0.2753rem + 4.1139vw, 3.875rem); line-height: clamp(2.375rem, 0.3244rem + 4.2722vw, 4.0625rem); } .hero .cm-img-cta a, .full-width .hero .cm-img-cta a { border-width: 2px !important; font-size: clamp(1rem, 0.8481rem + 0.3165vw, 1.125rem); } /* left */ .ce_alignment_left .cm-img-txt-wrap:not(:empty) { text-align: left; left: 0; right: initial; translate: 50% 0; } /* right */ .ce_alignment_right .cm-img-txt-wrap:not(:empty) { text-align: right; left: initial; right: 0; translate: 50% 0; } /* center */ .ce_alignment_center .cm-img-txt-wrap:not(:empty) { max-width: 750px; width: 100%; } /* full width */ .ce_alignment_full_width .cm-img-txt-wrap:not(:empty) { width: 100%; } /* TODO: snygg koll för breakpoint? lr flytta till tt-mallen cms_default.tt? */ @media only screen and (min-width: 768px) { .ce_alignment_y_bottom .cm-img-txt-wrap:not(:empty) { bottom: 0; top: initial; transform: none; translate: none; } .ce_alignment_y_top .cm-img-txt-wrap:not(:empty) { bottom: initial; top: 0; transform: none; translate: 0; } /* left */ .cm-section:not(.wrap-inner) .col-lg-12 .ce_alignment_left .cm-img-txt-wrap:not(:empty) { left: 5%; max-width: 40%; } /* right */ .cm-section:not(.wrap-inner) .col-lg-12 .ce_alignment_right .cm-img-txt-wrap:not(:empty) { right: 5%; max-width: 40%; } } @media only screen and (max-width: 767px) { .ce_alignment_mobile_y_bottom .cm-img-txt-wrap { bottom: 0; top: initial; } .ce_alignment_mobile_y_top .cm-img-txt-wrap { bottom: initial; top: 0; } [class*=ce_alignment_mobile_y_] .cm-img-txt-wrap:not(:empty) { translate: 0; transform: none; } .text-center-mobile { text-align: center; } } /* ------------------------ Blog widget ------------------------ */ .start-blog-article { display: flex; } .start-blog-article .box { border-radius: var(--border-radius1); display: flex; flex-flow: column; flex-grow: 1; } .start-blog-article .box .blog-image img { border-radius:10px; } .blog-btn-wrap { flex-grow: 1; display: flex; align-items: flex-end; } .start-blog .blog-ingress { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; } /* ------------------------ Accordion widget ------------------------ */ .cm-section ul.accordion { list-style: none; padding: 0; } /* ORION */ .ace_orion_accordion { padding: 4rem 0; } .ace_orion_accordion .row { color: var(--theme-color3); } .ace_orion_accordion .row .accordion { max-width: 550px; border-top: unset; margin: 0; } @media screen and (max-width: 768px) { .ace_orion_accordion .row .accordion { margin-bottom: 2rem; } } .ace_orion_accordion .row .accordion .accordion-panel { border-bottom: unset; /*padding: 0 1rem;*/ margin-bottom: 0.5rem; border-radius: 10px; transition: all 200ms ease-in-out; } .ace_orion_accordion .row .accordion .accordion-panel:hover { background: var(--theme-background2); color: var(--theme-color2); } .ace_orion_accordion .row .accordion .accordion-panel.open { background: var(--theme-background3); color: var(--theme-color3); padding: 1rem; } .ace_orion_accordion .row .accordion button.accordion-trigger { position: relative; border-top-left-radius: 10px; border-top-right-radius: 10px; } .ace_orion_accordion .row .accordion button.accordion-trigger.open { background: var(--theme-background3); color: var(--theme-color3); } .ace_orion_accordion .row .accordion .accordion-title { padding: 1rem 1rem 1rem 3rem; font-size: 1rem; font-weight: 700; width: 100%; } .ace_orion_accordion .row .accordion .accordion-icon { position: absolute; top: 50%; left: 0.5rem; } .ace_orion_accordion .row .accordion .accordion-icon::before, .ace_orion_accordion .row .accordion .accordion-icon::after { background: var(--theme-color3); left: 8px; width: 0.8em; } .ace_orion_accordion .row .accordion .accordion-content { background: var(--theme-background3); padding-left: 3rem; padding-right: 1rem; max-height: 290px; overflow: auto; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .ace_orion_accordion .row .accordion .accordion-content .open { padding: 1rem; } @media screen and (max-width: 768px) { .ace_orion_accordion .row .accordion .accordion-content { max-height: unset; } } .ace_orion_accordion .row .accordion .accordion-content .btn { margin-top: 1.5rem; width: unset; --focus-color: var(--cta-background1); background: var(--cta-background1); color: var(--cta-color1); } /* ------------------------ Forms widget ------------------------ */ .input-type-radio > div > *, .input-type-checkbox > div > * { display: inline-block; } .cm-form .cm-form-group > label { font-weight: 600; } /* ------------------------ Content ------------------------ */ .seo-text { display: flex; align-items: center; } .seo-text h4 { font-size: clamp(2rem, 1.3924rem + 1.2658vw, 2.5rem); line-height: clamp(2.72375rem, 1.8967rem + 1.7231vw, 3.404375rem); margin: var(--gutter) 0; } .seo-text p { line-height: 1.5; } .seo-text .cm_content_wrapper { padding: var(--gutter) clamp(30px, 3vw, 60px); max-width: 80ch; } .cm-section.wrap.puffar { padding: calc(var(--gutter) * 4); /* TODO: snygg koll för breakpoint? lr flytta till tt-mallen cms_default.tt? */ } @media only screen and (max-width: 768px) { .cm-section.wrap.puffar { padding: 0 calc(var(--gutter) * 2); } .cm-section.wrap.puffar > .row { gap: var(--gutter); } } @media screen and (max-width: 650px){ .owl-prev, .owl-next{ line-height: 40px!important; } #main:has(.cm){ padding: 0!important; } } .cm .row-gutter{ padding-top: 0; } .section:has(div.full-width){ max-width: 1700px!important; } /*------*/ .cm-dot{ height: 10px!important; width: 10px!important; margin: 5px; border-radius: 5px!important; } .row-gutter:has(.slider-show){ padding-top: 0; padding-bottom: 0; } .Puffar .ce_alignment_center .cm-img-txt-wrap:not(:empty){ position: unset; transform: none; background-color: #e7e7e7; } .Puffar .cm-img-txt h2 { font-size: 1.5em; } .Puffar h3 { font-size: 1em; min-height: 3rem; } .Product_Slider .PT_Wrapper{ width: 95%; } .Product_Slider .owl-prev{ left: 16px; } .Product_Slider .owl-next{ right: 0px; } .Product_List .row{ margin: 0; padding: 0; } .Product_List .PT_Wrapper_All{ margin-top: 0!important; } .Rynos_Info .cm_content_wrapper { padding: 15px 20px; } .Rynos_Info .row, .Rynos_Info .row > div{ padding: 0; } .Rynos_Info img { min-height: 310px; } .Product_Slider .PT_Text_Kort{ display: none; } .image-slider .cm-slide { width: 100%!important; margin-right: 0!important; margin-left: 0!important; } @media screen and (max-width: 430px) { .image-slider img{ min-height: 200px!important; } .Puffar .cm-img-txt h2 { font-size: 1.2em; } .Puffar .cm-img-txt h3, .Puffar .cm-img-cta{ display: none; } .Puffar .row > div{ flex-basis: 50%; max-width: 50%; } .Rynos_Info > .row:nth-child(even) { display: flex; flex-direction: column-reverse; } } /* ACE - custom */ .row:has(.row-no-padd) { padding: 0 !important; }