/**
 * start.css
 *
 * Contains the styling of the start page.
 *
 * Index
 * - START
 *   - DROPDOWN
 *   - ABOTYPE
 *   - BANNER
 *   - LIST
 *
 * Media
 * - TABLET
 * - DESKTOP
 */

/* ------------------------------------ *
 * #START
 * ------------------------------------ */
/* Start Text */
.start-text-container {
    order: 3;
}



/* #START-DROPDOWN - generatet by js */
.start-dropdown {
    margin: 15px 0 0;
    color: rgb(255, 255, 255);
    background: rgb(131, 192, 41);
}
.start-dropdown a {
    color: rgb(255, 255, 255);
    text-decoration: none;
}
.start-dropdown > ul {
    display: flex;
    justify-content: space-around;
    list-style: none;
    cursor: pointer;
}
.start-dropdown > ul > li {
    position: relative;
    padding: 15px 5px;
}
.start-dropdown > ul > li:first-child:after {
    content: '\f0d7';
    font-family: FontAwesome;
    margin: 0 0 0 4px;
}
.start-dropdown > ul > li:hover .start-dropdown-flyout,
.start-dropdown > ul > li:focus .start-dropdown-flyout {
    display: block;
}

.start-dropdown-flyout {
    position: absolute;
    display: none;
    top: 49px;
    left: -5px;
    list-style: none;
    background: rgb(131, 192, 41);
    z-index: 1;
}
.start-dropdown-flyout li {

}
.start-dropdown-flyout a {
    display: block;
    width: 100%;
    padding: 15px 10px;
    border-top: 1px solid rgb(255, 255, 255);
    box-sizing: border-box;
    white-space: nowrap;
}



/* #START-ABOTYPE */
.start-abotypes {
    display: none;
    order: 3;
    margin: 15px 0;
    width: 100%;
}

.start-abotype-container {
    display: flex;
    justify-content: space-around;
}

.start-abotype {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 0 0 28%;
    padding: 10px;
    background: rgb(243, 243, 243);
}
.start-abotype strong {
    margin: 10px 0;
    font-size: 1.1em;
    color: rgb(1, 93, 168)
}
.start-abotype p {
    margin: 10px 0;
}
.start-abotype a {
    display: block;
    margin: 10px 0;
}
.start-abotype button {

}



/* #START-BANNER */
.start-banner-container {
    width: inherit;
    max-width: calc(100vw - 20px);
    margin-bottom: 15px;
    box-sizing: border-box;
}

/* Size Handling */
.start-banner-slide {
    width: 100%;
    height: auto;
}
.start-banner-slide a {

}
.start-banner-slide img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Swiper Changes (Slider) */
.swiper-pagination-bullet {
    background: rgb(224, 224, 224);
    opacity: 1;
}
.swiper-pagination-bullet-active {
    background: rgb(1, 93, 168);
}
.swiper-container,
.swiper-wrapper,
.swiper-pagination {
    z-index: auto;
}



/* #START-LIST */
.start-list {

}
.start-list h3 {
    font-family: Amble;
    margin-bottom: 0;
    font-size: 1.2em;
}

.product-list-start {
    margin-top: 0;
}
.product-list-start li:nth-child(n+7) {
    display: none;
}
.product-list-start li:nth-child(3n+2):last-child {
    margin-right: 0;
}





/* #TABLET */
@media screen and (min-width: 640px) {
    .sidebar-start {
        display: block;
    }
    .start-dropdown {
        display: none;
    }
    .start-abotypes {
        display: block;
    }



    /* #START-BANNER - Size Handling */
    .start-banner-container {
        width: 100%;
        max-width: 100%;
    }
}

/* #DESKTOP */
@media screen and (min-width: 1024px) {
    /* #PRODUCT-LIST-START */
    .product-list-start li {
        flex-basis: 25%;
    }
    .product-list-start li:nth-child(n+7) {
        display: block;
    }



    /* #START-BANNER - Size Handling */
    .start-banner-container {
        width: 735px;
        max-width: 100%;
        height: 320px;
        max-height: 320%;
    }
    .start-banner-slide {
        width: 710px;
        height: 313px;
    }



    /* #START-ABOTYPE */
    .start-abotype-container {
        justify-content: space-between;
    }
}