/* Version 20261001: topprad, meny och sidlayout.
 *
 * Sajten ar ordnad efter kundtyp, inte efter tjanst. Toppraden bar valet -
 * Privat eller Foretag - och menyn under visar den valda kundtypens flikar.
 * Samma upplagg som Bahnhof, Telia och Telenor.
 *
 * Det betyder inga dropdowns alls. Dropdownen var kallan till varenda menyfel
 * i den har filens historia: den blaa hovern som slogs mot temats gula,
 * oversiktsposten som bara fanns for att data-toggle at upp klicket, och
 * bandet 768-991 dar temats skrivbordsregel fortfarande gallde. Allt det ar
 * borta.
 *
 * Loggan ar 300 px och Bootstrap 3 haller menyn vagrat anda ner till 768.
 * Tva atgarder:
 *   - loggan krymper till 200 px under 1200
 *   - hamburgaren tar over redan vid 992 i stallet for 768
 *
 * Matt i Chromium, luft mellan loggan och forsta menyposten:
 *
 *                        1400   1200   1100    992
 *   Foretag, sju flikar   230    230    104     104
 *   Privat, tre flikar    630    630    504     504
 *
 * Aldre upplagg i samma matning, for jamforelse: atta platta flikar gav -16
 * px vid 992, alltsa overlapp. Att dela menyn per kundtyp ar det som gor att
 * sju flikar far plats med marginal.
 *
 * Filen laddas BARA av version 20261001. Live-versionen har samma trangsel
 * vid 768, men att andra den ar ett eget beslut och inte en bieffekt av det
 * har. */

@media (max-width: 1199px) {
    .navbar-brand img { max-width: 200px !important; }
}

/* Tva rader, tva betydelser, tva farger.
 *
 * Gult markerar VAL i toppraden, blatt VAR DU STAR i menyn under. Bada ritas
 * som en ram runt hela posten, inte som en list i ena kanten.
 *
 * Varfor ram och inte fylld yta: en fylld knapp i menyraden har en knut som
 * inte gar att losa. Matt kontrast mot menyradens #2e2e2e, och for vit text
 * ovanpa fyllningen:
 *
 *                        syns som block   vit text pa den
 *   #003060 loggan          1.03              13.19
 *   #265078 temats btn      1.62               8.40
 *   #1d6ea8                 2.49               5.46
 *   #4a90d9                 4.06               3.34
 *
 * Morkt nog for lasbar vit text betyder osynligt block; ljust nog for ett
 * synligt block betyder for svag text. Med en RAM finns ingen knut: ramen
 * behover bara synas mot raden (4.06 racker gott for en linje) medan texten
 * star kvar mot #2e2e2e dar vit ger 12.6. Den svaga vita bakgrunden pa sex
 * procent gor att formen last som en knapp och inte som en tom kontur.
 *
 * Bada fargerna ar loggans egna: avlasta ur images/mibr.png ar den
 * #003060 marinbla (800 px) och #ffdf00 gult (34 px) pa vitt. Temats gula ar
 * #ffdf06 - sex steg i en kanal, inte skiljbart, sa vi haller oss till ett
 * gult och det ar temats.
 *
 * Marinblatt gar daremot INTE att anvanda rakt av. Menyraden ar #2e2e2e och
 * kontrasten mellan #003060 och den ar 1.03:1, alltsa osynligt. Fargen maste
 * ljusas upp, och fragan ar hur mycket.
 *
 * Forst #4a90d9, som ger 4.06:1. Det ar lasbart men syns tydligt samre an den
 * gula listen ovanfor, som ger 11.39:1 mot toppradens #262626 - nastan tre
 * ganger sa mycket. Matt i webblasaren:
 *
 *   #4a90d9   4.06
 *   #6aa9e8   5.47
 *   #7ab8f5   6.47   <- vald
 *   #8ec7ff   7.61
 *
 * Valet ar #7ab8f5. Samma nyans som loggan, 210 grader, bara ljusare. Att ga
 * hela vagen till gulans 11.39 hade krävt nastan vitt, och det vore fel: gult
 * markerar VILKEN DEL av sajten du ar i, blatt VILKEN SIDA inom den delen. Den
 * mindre av de tva besluten ska inte skrika lika hogt. 6.5 mot 11.4 behaller
 * ordningen men gor blatt tydligt synligt.
 *
 * Och nej, det var inget pixelfel: listen ligger pa y=96 och menyradens
 * underkant ocksa pa 96. Ingenting tacker den.
 *
 * Detta ersatter ocksa temats egen hover pa #337ab7, Bootstraps standardbla,
 * som inte ar en farg ur vare sig loggan eller mallen.
 *
 * Hojden halls: en vanlig post ar 20 + 20 + 22 = 62 px, en aktiv ar
 * 20 + 20 + 19 + 3 = 62. Texten star kvar pa 20-40 i bada fallen. */
@media (min-width: 992px) {
    /* Menyposterna slutar 10 px fore radens underkant. Det ar hela poangen:
     * strecket under den aktiva posten hamnade forut exakt dar raden tog slut
     * och sidan borjade, sa det last som en kant och inte som ett streck. Med
     * en mork remsa under sig har det nagot att synas mot.
     *
     * 20 + 20 + 12 = 52 mot radens 62. Texten star kvar pa 20-40. */
    /* Radens hojd maste last, inte arvas. Over 1200 ar loggan 300 px bred och
     * 62 hog, och det ar den som satter radens hojd - men under 1200 krymper
     * den till 200 px och blir 45 hog, och da tog menyposterna over hojden.
     * Remsan forsvann darfor precis vid 992. */
    #main-menu.navbar-default { min-height: 62px; }
    #main-menu.navbar-default .navbar-nav > li > a {
        padding-bottom: 12px;
    }
    /* Temat ger en aktiv flik en GUL list i overkant plus padding-top 17.
     * Bada maste bort: gult ar toppradens farg har, och 17 skulle flytta upp
     * texten tre pixlar sa den inte langre star i linje med de andra. */
    /* Ljus text i vila, se motiveringen vid #topprad a ovan. */
    #main-menu.navbar-default .navbar-nav > li > a {
        color: #d5d5d5;
    }
    #main-menu.navbar-default .navbar-nav > li:hover > a,
    #main-menu.navbar-default .navbar-nav > li.active > a {
        padding-top: 20px;
        border-top: 0;
        color: #fff;
    }

    /* Samma tre lagen som i toppraden. ORDNINGEN AR INTE FRI: li:hover och
     * li.active vager exakt lika mycket (ett id, tre klasser, tva element),
     * sa den som star sist vinner nar bada galler. Star hover sist blir den
     * post man redan har valt vit sa fort musen nuddar den. */
    #main-menu.navbar-default .navbar-nav > li:hover > a {
        box-shadow: inset 0 -3px 0 0 #fff;
    }
    #main-menu.navbar-default .navbar-nav > li.active > a {
        box-shadow: inset 0 -3px 0 0 #7ab8f5;
    }
    #main-menu.navbar-default .navbar-nav > li.active:hover > a {
        box-shadow: inset 0 -3px 0 0 #a8d3ff;
    }
}

/* Toppraden.
 *
 * Kundtypsvalet till vanster, kundens egna verktyg till hoger. Det ar samma
 * delning som Bahnhof och Telia gor, och skalet ar att de tva sorterna lankar
 * inte hor ihop: den vanstra bestammer VEM du ar, den hogra ar till for dig
 * som redan ar kund.
 *
 * Raden ar 34 px och ligger fast overst. Menyraden flyttas ner lika mycket
 * och body far samma padding - annars hamnar rubriken bakom menyn igen,
 * precis som mb-5 en gang gjorde. */
#topprad {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1031;
    height: 62px;
    line-height: 62px;
    background: #262626;
    border-bottom: 1px solid #3a3a3a;
    font-size: 13px;
}
#topprad ul       { list-style: none; margin: 0; padding: 0; }
#topprad li       { float: left; }
/* Temats menytext ar #9999, allts&aring; #999 pa 60 procents opacitet, och den
 * komponeras ner till ungefar #6e6e6e mot #2e2e2e. Det ar for morkt: menyvalen
 * ska ga att lasa utan att man forst hovrar over dem. #d5d5d5 ar ogenomskinlig
 * och ger 9.25 mot menyraden och 10.31 mot toppraden, mot vitens 13.58. Steget
 * upp till vitt finns alltsa kvar, men utgangslaget ar last. */
#topprad a        { color: #d5d5d5; text-decoration: none; }
#topprad a:hover,
#topprad a:focus  { color: #fff; }

/* Samma bottenbredd som knapparna pa sidorna, och av samma skal: poster i
 * olika bredd bredvid varandra laser som ett misstag. Matt fore: Privat 33,
 * Foretag 45, Om 58, Driftinfo 45, Mina sidor 51 - fem olika bredder pa en
 * rad som ar 34 px hog.
 *
 * 120 px racker for den bredaste texten. Den ar "Fastighetsagare", som utan
 * bottenbredd mattes till 117 px - 27 mer an de andras 90, vilket gjorde
 * raden ojamn igen. Hellre en bredare rad an ett kortare ord. Posterna ligger kant i
 * kant utan mellanrum, precis som menyposterna pa raden under - dar mattes
 * glappet mellan flikarna till 0 px, det ar temats eget upplagg. */
#topprad li a     { display: block; min-width: 120px; padding: 0 12px; text-align: center; }

#topprad .topp-vanster       { float: left; }
#topprad .topp-hoger         { float: right; }

/* Ingen post har egen farg fran start. Gult betyder VAL i den har raden, och
 * en post som ar gul innan man rort den pastar att den redan ar vald. */

/* Vald post markeras overst, precis som aktiv flik i menyn under. Bada
 * raderna ska lasas likadant: listen star ovanpa det den pekar ut.
 *
 * Galler bada grupperna - Driftinfo och Mina sidor markeras precis som
 * kundtyperna nar man star pa dem. */
/* Ett streck i overkant, inget mer. Ramen runt hela posten provades och blev
 * for grov: tva rader med inramade knappar drar till sig mer uppmarksamhet an
 * innehallet under dem.
 *
 * box-shadow inset och inte border, for skuggan pahverkar ingen layout alls.
 * Med en border hade radens hojd behovt raknas om, och det ar precis dar de
 * har tva raderna gatt fel forut.
 *
 * Tre lagen, och ordningen i filen ar det som far dem att fungera:
 *
 *   pekar pa en annan post   vitt      "det har skulle du fa"
 *   star pa posten           gult      "det har ar du"
 *   pekar pa den du star pa  ljusgult  samma svar, bara kvitterat
 *
 * Vitt for hovern och inte en blek variant av gult: hovern ska svara pa en
 * annan fraga an markeringen. Blandar man farg pa bada far ogat leta efter
 * vilken nyans som betyder vad. */
#topprad li > a:hover,
#topprad li > a:focus {
    box-shadow: inset 0 3px 0 0 #fff;
}
/* Gult har ingen hojd kvar att vaxa pa, och det ar darfor det gula strecket
 * inte tycktes ljusna vid hover. Kontrast mot toppradens #262626:
 *
 *   #ffdf06   11.39      brand-gult
 *   #ffea55   12.36      +0.97, alltsa knappt synligt
 *   #fff3a0   13.39      +2.00, men urblekt snarare an tant
 *
 * Jamfor blaatt, som har gott om plats:
 *
 *   #4a90d9    4.53
 *   #7ab8f5    7.21      +2.68
 *
 * Losningen ar att flytta HELA gula paret nedat i stallet for att forsoka
 * flytta det uppat. Vilolaget ar en djupare guld och hovern ar brand-gult:
 *
 *   #e0c400    8.69
 *   #ffdf06   11.39      +2.70, i praktiken samma steg som blaatt
 *
 * Priset ar att loggans exakta gula nu ar HOVER-fargen i stallet for
 * vilofargen. Det ar en avvagning: alternativet ar en hovereffekt som ingen
 * ser. Vill man ha tillbaka #ffdf06 i vila ar det tva rader har. */
#topprad li.vald > a {
    box-shadow: inset 0 3px 0 0 #e0c400;
    color: #fff;
}
#topprad li.vald > a:hover,
#topprad li.vald > a:focus {
    box-shadow: inset 0 3px 0 0 #ffdf06;
}

#main-menu.navbar-fixed-top { top: 62px; }

body { padding-top: 62px; }

/* Driftlaget. Fargerna ar mallens egna dar de finns; rott och gult finns
 * inte i paletten, sa de ar de enda tillskotten - och de anvands bara har. */
.drift-lage {
    padding: 20px 25px;
    border-left: 4px solid #eaeaea;
    background: #f7f7f7;
}
.drift-lage h3    { margin-top: 0; }
.drift-ok         { border-left-color: #2a95be; }
.drift-storning   { border-left-color: #c0392b; }
.drift-underhall  { border-left-color: #ffdf06; }

/* Avdelningsraderna i menylistan ar till for hamburgaren. Pa skrivbordet bar
 * toppraden dem, sa dar ska de inte synas. */
@media (min-width: 992px) {
    #main-menu .navbar-nav > li.mobil-avd,
    #main-menu .navbar-nav > li.mobil-linje { display: none; }
}

/* Menyn ligger till vanster, direkt efter loggan.
 *
 * Mallens egen meny ar hogerstalld och forankrad i containerns hogerkant
 * (matt: slutar pa x=1270 mot kanten 1285). Det fungerar for mallens nio
 * flikar som fyller raden. Vi har sju pa foretag och tre pa privat, och med
 * toppradens poster forankrade till vanster hanger hela huvudet at samma
 * hall i stallet for at var sitt. */
@media (min-width: 992px) {
    #main-menu .navbar-collapse.navbar-right { float: left !important; }
    /* Utan marginal borjar forsta flikens lada exakt dar loggan slutar -
     * uppmatt luft 0. Menyposternas egen indragning ar 15 px, sa texten
     * hamnar 15 px fran loggan. 20 till ger 35 och de slutar klibba ihop. */
    #main-menu .navbar-nav { margin-left: 20px; }
}

/* Standardbredd pa knapparna.
 *
 * Utan den blir tre kort bredvid varandra tre olika breda knappar. Matt pa
 * /privat/support: 72, 126 och 78 px pa samma rad. Det ser ut som ett misstag
 * aven nar korten i ovrigt ar perfekt uppradade.
 *
 * 150 px racker for den bredaste texten pa sajten ("Bestall eller fraga",
 * 132 px) med marginal. Bara fran 768 - under det staplas knapparna och en
 * bottenbredd skulle kunna spranga smala skarmar. */
@media (min-width: 768px) {
    #features .btn { min-width: 150px; }
}

/* Lika hoga kort.
 *
 * Bootstrap 3 floatar kolumner, sa tva kort bredvid varandra ar olika hoga
 * och lanken langst ner hamnar pa olika rader. Matt pa /hem: knappen "Bredband
 * hem" lag pa y=331 och "IT for foretag" pa y=357 - 26 px isar, precis en
 * textrad. Samma sak pa /foretag: "Se priser" 336, "Las mer" 362.
 *
 * Flex bara fran 992. Under det har col-md-* ingen bredd alls, och en
 * flexrad skulle da klamma ihop korten i sidled i stallet for att stapla
 * dem. */
@media (min-width: 992px) {
    .rad-lika            { display: flex; flex-wrap: wrap; }
    .rad-lika > [class*="col-"] { display: flex; flex-direction: column; }
    .rad-lika .kort-text { flex: 1 1 auto; }
    .rad-lika .kort-fot  { margin-top: auto; margin-bottom: 0; }
}

/* Hamburgare fran 991 och nedat. Bootstrap 3 gor det forst vid 767, och
 * bandet daremellan ar det enda som inte rymmer menyn. */
/* Pa smala skarmar finns ingen topprad.
 *
 * Sex poster a 120 px ar 720 och far inte plats pa en telefon. Raden hade fast
 * hojd, sa det som inte rymdes radbrots ner bakom menyraden och loggan hamnade
 * ovanpa Driftinfo och Mina sidor. Matt vid 900 och 768 lag de tva pa y 62..124.
 *
 * Att fa raden att radbryta snyggt gick att losa, men tva rader att leta i ar
 * en rad for mycket pa en telefon. Telia har en meny dar, inte tva. Toppraden
 * gors darfor bort helt och hela sajten flyttar in i hamburgaren: alla
 * avdelningar, och under den man star i dess flikar.
 *
 * Ingen extra JS. Den avdelning man star i ar utfalld, de andra ar ett klick
 * till sin egen ingang. Samma fargsprak som pa skrivbordet, bara vridet ett
 * kvarts varv: gult markerar avdelningen, blatt sidan, och listen ligger i
 * vanster kant i stallet for over och under. */
@media (max-width: 991px) {
    #topprad { display: none; }
    body     { padding-top: 0; }

    /* Loggan lag klistrad i overkant. Temat satter .navbar-brand padding
     * 0 0 0 4px, och huvudets hojd kommer fran hamburgaren, inte fran bilden:
     * 54 px huvud mot 45 px logga gav noll over och nio under. Lika mycket at
     * bada hallen nu. Bada varden behovs: med bara padding-top FLYTTADES de
     * nio pixlarna ner under loggan i stallet for att laggas till, eftersom
     * huvudets hojd kommer fran hamburgaren och 9 + 45 blir precis 54.
     *
     * Valjaren maste bara ett id: temats regel ar .navbar.navbar-default
     * .navbar-brand, tre klasser, och den skriver hela padding i kortform. */
    #main-menu.navbar-default .navbar-brand { padding: 9px 0 9px 4px; }

    #main-menu.navbar-default .navbar-nav > li.mobil-avd > a {
        padding-left: 15px;
        font-weight: bold;
        color: #d5d5d5;
    }
    #main-menu.navbar-default .navbar-nav > li.mobil-avd.vald > a {
        color: #fff;
        box-shadow: inset 3px 0 0 0 #e0c400;
    }
    #main-menu.navbar-default .navbar-nav > li.scroll > a {
        padding-left: 34px;
        color: #d5d5d5;
    }
    #main-menu.navbar-default .navbar-nav > li.scroll.active > a {
        color: #fff;
        box-shadow: inset 3px 0 0 0 #4a90d9;
    }
    /* Skiljelinje mellan de tre grupperna: det man laser, valet av vem man ar,
     * och verktygen. */
    #main-menu .navbar-nav > li.mobil-linje {
        height: 1px;
        margin: 8px 15px;
        background: #454545;
    }

    /* Menyn maste ligga over sidan, och tva saker stod i vagen.
     *
     * Bootstrap ger .navbar-fixed-top z-index 1030, men vi har gjort den
     * static har - och z-index pa ett statiskt element gor ingenting alls.
     * Position relative racker: den ligger kvar i flodet, men z-index borjar
     * galla och menyn hamnar over det vita.
     *
     * Bootstrap satter ocksa max-height 340 px pa collapsen inuti en fast
     * navbar, tanken att man ska kunna scrolla inuti den. Med overflow visible
     * blir foljden att LADAN slutar vid 340 medan innehallet ritas vidare
     * utanfor, och det som ligger nedanfor lagger sig over. Vi ar inte fasta
     * har, sa maxhojden ska bort helt: menyn far vara sa hog den behover och
     * putta ner sidan. */
    /* top MASTE nollas har, och valjaren maste bara samma id som
     * skrivbordsregeln #main-menu.navbar-fixed-top { top: 62px }.
     *
     * Med position relative flyttar top 62 elementet ner utan att lamna sin
     * plats i flodet: menyn hamnade 62 px ner och kvar lag ett tomt, vitt
     * band precis lika hogt som menyraden. Det ar samma tal, och det ar
     * darfor bandet var exakt lika stort. */
    #main-menu.navbar-fixed-top { position: relative; top: 0; z-index: 1030; }
    .navbar-fixed-top .navbar-collapse { max-height: none; }
    .navbar-header       { float: none; }
    .navbar-left,
    .navbar-right        { float: none !important; }
    .navbar-toggle       { display: block; }
    /* Bootstrap 3 tvingar .navbar-collapse.collapse till display block, height
     * auto OCH overflow visible med !important fran 768 och upp, for dar ska
     * menyn alltid synas. Vi har flyttat hamburgaren till 991, sa i bandet
     * 768-991 slass den regeln mot collapse-pluginet: hojden gar inte att
     * animera, transitionEnd uteblir, och menyn fastnar i laget "collapsing"
     * med hojd noll. Hamburgaren ser dod ut fast klicket gick fram.
     *
     * Losningen ar att sluta animera i det bandet. Hojden ar alltid auto och
     * synligheten styrs enbart av display, sa det spelar ingen roll om
     * overgangen aldrig avslutas. */
    .navbar-collapse.collapse {
        display: none !important;
        height: auto !important;
        overflow: visible !important;
    }
    .navbar-collapse.collapsing {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        transition: none !important;
    }
    .navbar-nav          { float: none !important; margin-top: 7.5px; }
    .navbar-nav > li     { float: none; }
    .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; }
    .navbar-collapse.collapse.in       { display: block !important; }
}


/* Uppmatt geometri, 1400 px:
 *
 *   topprad          0 - 34
 *   menyrad         34 - 96   (posternas lada 34-96, texten 54-74)
 *   rubrikens topp     124    - 28 px under menyraden, samma som live
 *
 * Rubrikens ovankant mattes en gang till y=60 med markeringen
 * <div class="col-md-12 mb-5">, medan menyradens underkant lag pa y=62 -
 * rubriken lag alltsa 2 px BAKOM menyn. mb-5 ar en Bootstrap 4-klass och
 * matchade noll regler pa hela sajten. Med section-header sitter den ratt. */


/* Priskorten.
 *
 * Mallen har dem - src/fig/multi/css/main.css, elva regler - men nagon har
 * strippat dem ur var main.css. De hamtas darfor tillbaka hit, i
 * versionsfilen, sa den delade main.css inte behover roras.
 *
 * En andring mot mallen: prisrundeln var en tealgradient, #2caab3 -> #2c8cb3.
 * Den fargen finns inte i vare sig loggan eller den palett vi bestamt. Nu
 * loggans marinbla mot en ljusare ton av samma nyans, #003060 -> #1d6ea8.
 * Vitt mot den ljusa anden ger kontrast 5.5:1 och duger aven for den lilla
 * kr/man-raden; mallens #2c8cb3 hade gett 3.4:1, vilket bara racker for stor
 * text. */
#pricing ul.pricing {
    list-style: none;
    margin: 70px 0 30px;
    border: 1px solid #eee;
    border-radius: 5px 5px 4px 4px;
    padding: 15px;
    text-align: center;
}
#pricing ul.pricing li {
    display: block;
    padding: 10px;
}
#pricing ul.pricing li.plan-header {
    background: #eee;
    border-radius: 4px 4px 0 0;
    margin: -15px -15px 10px;
    padding: 15px 15px 30px;
    border: 0;
}
#pricing ul.pricing li.plan-header .price-duration {
    position: relative;
    margin-top: -63px;
    top: -10px;
    display: inline-block;
    width: 116px;
    height: 116px;
    background-image: linear-gradient(90deg, #003060 0%, #1d6ea8 100%);
    color: #fff;
    border-radius: 100px;
    border: 5px solid #f6f6f6;
}
#pricing ul.pricing li.plan-header .price-duration > span {
    display: block;
    line-height: 1;
}
#pricing ul.pricing li.plan-header .price-duration > span.price {
    font-size: 24px;
    font-weight: 700;
    margin-top: 35px;
}
#pricing ul.pricing li.plan-header .price-duration > span.duration {
    margin-top: 5px;
}
#pricing ul.pricing li.plan-header .plan-name {
    margin-top: 10px;
    font-size: 24px;
    color: #272727;
    font-weight: bold;
    line-height: 1;
    text-transform: uppercase;
}
#pricing ul.pricing li.plan-purchase .btn { margin-top: 5px; }


/* Lika hoga priskort.
 *
 * Korten ar olika langa for att texterna ar olika langa, och det syns: det
 * sista kortet slutade 14 px over de andra. En min-height i pixlar loser det
 * inte, och det ar matt och inte gissat. Hojderna i den har raden, uppmatta
 * i Chromium:
 *
 *   1400 px   357  357  357  343      sista kortet 14 px kort
 *   1200 px   357  357  357  343      samma
 *   1000 px   383  383  357  395      nu ar sista kortet HOGST och 10 Gbit kort
 *    800 px   357  357  357  317      tva kort per rad
 *
 * Vid 1000 px ar det alltsa ett annat kort som ar kortast an vid 1400. Ett
 * fast tal tunat for det ena bryter det andra, eftersom texterna radbryts
 * olika vid varje bredd. Darfor far raden stracka korten i stallet: flex gor
 * alla kort i en rad lika hoga som det hogsta, vid varje bredd, utan siffror.
 *
 * Knappen skjuts ned med margin-top: auto, sa den star i nederkant pa alla
 * kort aven nar texterna ovanfor ar olika langa. Utan den skulle knapparna
 * hamna pa olika hojd mitt i korten.
 *
 * Bootstrap 3:s .row rensar floats med :before och :after. I en flexbox blir
 * de tva pseudoelementen flex-items och kan knuffa ett kort till nasta rad,
 * sa de stangs av har.
 *
 * min-height ar kvar som golv, men bara fran 768 px. Under den bredden ligger
 * korten i en spalt och ett golv skulle bara lagga till tomrum. */
/* Flex bara fran 768. Under det har col-sm-6/col-md-3 ingen bredd, sa en
 * flexrad skulle packa korten efter innehall (ojamnt A A / B / C) i stallet
 * for att stapla dem. Fran 768 och upp ger kolumnerna bredd och flex gor
 * korten i raden lika hoga. */
@media (min-width: 768px) {
    #pricing .row { display: flex; flex-wrap: wrap; }
    #pricing .row:before,
    #pricing .row:after { display: none; }
    #pricing .row > div[class*="col-"] { display: flex; }
    #pricing .row > div[class*="col-"] > div { display: flex; flex: 1 1 auto; }
    #pricing ul.pricing { display: flex; flex-direction: column; flex: 1 1 auto; }
    #pricing ul.pricing li.plan-purchase { margin-top: auto; }
    #pricing ul.pricing { min-height: 357px; }
}