div.page div.row.background-wallpaper {
    .box {
        background: rgba(255, 255, 255, 0.5);
    }

    background: url("images/wallpapers/dotted.png") no-repeat 130% 10%;

    @media all and (max-width: 60rem) {
        background: transparent;
    }

    &.ubuntu, &.desktop, &.kubuntu, &.lubuntu, &.xubuntu, &.ubuntu-mate,
    &.ubuntu-budgie, &.ubuntukylin, &.ubuntustudio, &.ubuntu-touch,
    &.nuovo-rilascio, &.banner-latest {
        color: #fff;

        border-top: 0;
        & + div.row {
            border-top: 0;
        }

        a {
            color: rgba(255, 255, 255, 0.5);
        }

        a.btn {
            color: #fff;
        }

        .box {
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
            background: rgba(0, 0, 0, 0.25);
            border: 0;
        }
    }

    &.ubuntu, &.desktop {
        background: url("images/wallpapers/ubuntu.jpg") 100% 0%;
    }

    &.kubuntu {
        background: url("images/wallpapers/kubuntu.jpg") 100% 50%;
    }

    &.xubuntu {
        background:
            linear-gradient(rgba(100, 100, 100, 0.3), rgba(100, 100, 100, 0.3)),
            url("images/wallpapers/xubuntu.jpg") 100% 50%;
    }

    &.lubuntu {
        background: url("images/wallpapers/lubuntu.jpg") 100% 50%;
    }

    &.ubuntu-mate {
        background:
            linear-gradient(rgba(85, 85, 85, 0.3), rgba(85, 85, 85, 0.3)),
            url("images/wallpapers/ubuntu-mate.jpg") 100% 50%;
    }

    &.ubuntu-budgie {
        background:
            linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
            url("images/wallpapers/ubuntu-budgie.jpg") 100% 50%;
    }

    &.ubuntukylin {
        background: url("images/wallpapers/ubuntu-kylin.jpg") 100% 50%;
    }

    &.ubuntustudio {
        background: url("images/wallpapers/ubuntustudio.jpg") 100% 50%;

        .box {
            background: rgba(100, 100, 100, 0.25);
        }
    }

    &.ubuntu-touch {
        background: url("images/wallpapers/ubuntu-touch.jpg") 100% 0%;
    }

    &.nuovo-rilascio {
        background: url("images/wallpapers/nuovo-rilascio.png") 100% 0%;
    }

    &.banner-latest {
        background: url("images/wallpapers/banner-latest.png") 100% 50%;
    }
}

div.page div.row.download-index-distro {
    @media all and (min-width: 60rem) {
        div.col.col-center {
            text-align: right;
        }
    }

    @media all and (max-width: 60rem) {
        text-align: center;

        div.col {
            margin-top: 1em;

            &:first-child {
                margin-top: 0;
            }
        }
    }
}

div.download-form {
    padding: 0.5em 1.5em;

    div.download-form-group {
        margin: 1em 0;
    }

    div.download-form-buttons {
        margin: 1em 0;

        .btn {
            display: block;
            text-align: center;
            width: 100%;
        }
    }
}

p.intro {
    font-size: 1.2em;
    margin: 0.5em 0;
}

.pictogram {
    height: 55%;
    width: 55%;
}

div.page div.row.image-overflow {
    margin-bottom: 4em;

    div.col img {
        max-width: none;
        max-height: none;
        width: 70%;

        display: block;
        margin: 2em auto -6em auto !important;

        @media all and (max-width: 40rem) {
            width: 85%;
        }
    }
}

div.page div.row div.col.image-attach-corner {
    position: relative;
    text-align: right;

    img {
        display: block;

        @media all and (min-width: 60rem) {
            position: absolute;
            bottom: -2em;
            right: -2em;
        }

        @media all and (max-width: 60rem) {
            margin-left: auto;
            margin-right: -1em !important;
            margin-bottom: -1em !important;
        }
    }
}
