/* Hide the link that should open and close the topnav on small screens */
.links .icon, .links .contact {
    display: none;
}
/* Anpassa till olika skärmstorlekar */
@media only screen and  (max-width: 350px) {
    .flexbox {
        flex-direction: column;
    }
}
@media only screen and  (max-width: 375px){
    .flexbox.protokoll {
        flex-direction: column;
    }
}
@media only screen and (max-width:550px) {
    .right {
        float:none;
    }
    #mainpanel img.inline {
        margin: 1em auto 0 auto;
    }
    header h1.logo {
        font-size: 2.5em;
    }
    .p-larger {
        font-size: 1.3em;
    }
    summary i.right {
        position: absolute;
        right: 15px;
    }
}
@media only screen and (max-width:620px) {
    /* For mobile phones: */
    .menu, .main, nav, div.right {
        width: 100%;
    }

    /* Force table to not be like tables anymore */
    #avgifter thead, #avgifter tbody, #avgifter th, #avgifter td, #avgifter tr {
        display: block;
        width: 100%;
    }
    /* Hide table headers (but not display: none;, for accessibility) */
    #avgifter thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    #avgifter tbody {
        margin-top: .3em;
    }
    #avgifter tr {
        margin: 0 0 1rem 0;
    }
    #avgifter tr:nth-child(odd) {
        background: #ccc;
    }
    #avgifter td {
        /* Behave  like a "row" */
        border: none;
        position: relative;
        padding: .2em;
    }
    #avgifter td.col1 {
        font-weight: bold;
    }
    table.m-avgifter:before {
        content: "Medlemsavgifter";
        font-size: 1.3em;
        font-weight: bold;
    }
    table.b-avgifter:before {
        content: "Båtplatsavgifter";
        font-size: 1.3em;
        font-weight: bold;
    }
    table.o-avgifter:before {
        content: "Övriga avgifter";
        font-size: 1.3em;
        font-weight: bold;
    }
}
/* Göm menyn bakom knapp för mobilanvändare */
@media only screen and (max-width:850px) {
    div.logo-img {
        display: none;
    }
    nav {
        float: none;
        width: 100%;
        max-width: inherit;
        height: auto;
        background: #212121;
        padding: 0 1em;
    }
    nav h3 {
        display: none;
    }
    /*nav .contact {
        display: none;
    }*/
    main {
        width: 100%;
        float: none;
        padding: 0;
    }
    .links, .contact {
        overflow: hidden;
        padding-bottom: .3em;
        padding-top: .3em;
    }
    /* Style the links inside the navigation bar */
    .links a {
        float: left;
        text-align: center;
        color: darkgray;
    }
    .contact {
        color: antiquewhite;
    }
    .contact a {
        color: darkgray;
    }
    /* Change the color of links on hover */
    .links a:hover {

    }
    /* Add an active class to highlight the current page */
    .links a.active {

    }
    /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
    .links a:not(:first-child) {
        display: none;
    }
    .contact {
        display: none;
    }
    .links a.icon, .links a.contact {
        float: right;
        display: block;
    }
    .links.responsive, .contact.responsive {position: relative;}
    .contact.responsive {display: block;}
    .links.responsive a.icon {
        position: absolute;
        right: 0;
        top: 4px;
    }
    .links.responsive a.contact {
        position: absolute;
        right: 22px;
        top: 4px;
    }
    .links.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
    .icon {
        /*font-size: 3em;*/
    }

    .flexbox > div{
        padding: 0 .4em 1em .4em;
        flex:50%;
    }
    .flexbox.organisation > div {
        padding: 0 .4em;
        flex: 100%;
    }
}