.bg-theme {
    background-size: 100% 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    transition: background .3s;
}

.switcher {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    margin-left: 20px;
}

    .switcher li {
        float: right;
        width: 85px;
        height: 75px;
        margin: 0 15px 15px 0px;
        border-radius: 4px;
        border: 0px solid black;
    }

#theme1 {
    background-image: url(../images/bg-themes/1.png);
    background-size: 100% 100%;
    background-position: center;
    transition: background .3s;
}

#theme2 {
    background-image: url(../images/bg-themes/2.png);
    background-size: 100% 100%;
    background-position: center;
    transition: background .3s;
}

#theme3 {
    background-image: url(../images/bg-themes/3.png);
    background-size: 100% 100%;
    background-position: center;
    transition: background .3s;
}

#theme4 {
    background-image: url(../images/bg-themes/4.png);
    background-size: 100% 100%;
    background-position: center;
    transition: background .3s;
}

#theme5 {
    background-image: url(../images/bg-themes/5.png);
    background-size: 100% 100%;
    background-position: center;
    transition: background .3s;
}

#theme6 {
    background-image: url(../images/bg-themes/6.png);
    background-size: 100% 100%;
    background-position: center;
    transition: background .3s;
}

#theme7 {
    background-image: linear-gradient(45deg, #0fd850, #f9f047);
    background-size: 100% 100%;
    background-position: center;
    transition: background .3s;
}

#theme8 {
    background-image: linear-gradient(45deg, #6a11cb, #2575fc);
    background-size: 100% 100%;
    background-position: center;
    transition: background .3s;
}

#theme9 {
    background-image: linear-gradient(45deg, #29323c, #485563);
    background-size: 100% 100%;
    background-position: center;
    transition: background .3s;
}

#theme10 {
    background-image: linear-gradient(45deg, #bc4e9c, #f80759);
    background-size: 100% 100%;
    background-position: center;
    transition: background .3s;
}

#theme11 {
    background-image: linear-gradient(45deg, #007adf, #00ecbc);
    background-size: 100% 100%;
    background-position: center;
    transition: background .3s;
}

#theme12 {
    background-image: linear-gradient(45deg, #65379b, #886aea);
    background-size: 100% 100%;
    background-position: center;
    transition: background .3s;
}


body.bg-theme1 {
    background-image: url(../images/bg-themes/1.png);
}

body.bg-theme2 {
    background-image: url(../images/bg-themes/2.png);
}

body.bg-theme3 {
    background-image: url(../images/bg-themes/3.png);
}

body.bg-theme4 {
    background-image: url(../images/bg-themes/4.png);
}

body.bg-theme5 {
    background-image: url(../images/bg-themes/5.png);
}

body.bg-theme6 {
    background-image: url(../images/bg-themes/6.png);
}

body.bg-theme7 {
    background-image: linear-gradient(45deg, #0fd850, #f9f047);
}

body.bg-theme8 {
    background-image: linear-gradient(45deg, #6a11cb, #2575fc);
}

body.bg-theme9 {
    background-image: linear-gradient(45deg, #29323c, #485563);
}

body.bg-theme10 {
    background-image: linear-gradient(45deg, #bc4e9c, #f80759);
}

body.bg-theme11 {
    background-image: linear-gradient(45deg, #007adf, #00ecbc);
}

body.bg-theme12 {
    background-image: linear-gradient(45deg, #65379b, #886aea);
}