/*-------------------------------------------------------------------------------
## CSS - THEME-TOGGLE.CSS
## Theme Toggle Stylesheet CSS
## Author: mjd (M. Jurasovic)
## Author URI: http://mariojurasovic.com/
## Theme URI: http://cv.mariojurasovic.com/
## Theme URI: http://cv.studiomjdesign.com/
## Version: 1.0.0
## Copyright (c)2017
-------------------------------------------------------------------------------*/
.toggle {
    display: table;
    position: absolute;
    top: 100px;
    left: -40px;
    height: 40px;
    width: 40px;
    cursor: pointer;
    z-index: 999999;
    font-size: 20px;
    color: #ffffff;
    background-color: #ff3333;
    border: 2px solid #ffffff;
	-moz-box-shadow: 0 5px 8px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 5px 8px 3px rgba(0,0,0,0.5);
	-o-box-shadow: 0 5px 8px 3px rgba(0,0,0,0.5);
	box-shadow: 0 5px 8px 3px rgba(0,0,0,0.5);
}
.toggle i {
    display: table-cell;
    vertical-align: middle;
}
.popout {
    position: fixed;
    width: 190px;
    height: 270px;
    top: 200px;
    right: -190px;
    z-index: 999999;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
    color: #ffffff;
	text-transform: uppercase;
	background-color: rgba(34,34,34,0.40);
    border: 2px solid #ffffff;
    transition: 500ms transform ease-in-out;
	-moz-box-shadow: 0 5px 8px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 5px 8px 3px rgba(0,0,0,0.5);
	-o-box-shadow: 0 5px 8px 3px rgba(0,0,0,0.5);
	box-shadow: 0 5px 8px 3px rgba(0,0,0,0.5);
}
.colors {
    padding: 15px;
}
.colors p {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
    font-weight: 600;
	color: #ffffff;
	text-align: center;
    margin: 0;
}
.colors ul li {
    height: 30px;
    width: 30px;
    margin: 1px 2px;
    display: inline-block;
    cursor: pointer;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    transition: 200ms;
}
.colors ul li:hover {
    transform: scale(1.2);
}
/**!
 * LIGHT OPTION
 **/
.colors .color1 {
    background: #1f5694;
}
.colors .color2 {
    background: #038175;
}
.colors .color3 {
    background: #616161;
}
.colors .color4 {
    background: #06a763;
}
.colors .color5 {
    background: #5f1A89;
}
.colors .color6 {
    background: #5d4037;
}
.colors .color7 {
    background: #e42444;
}
.colors .color8 {
    background: #cf2b7e;
}
/**!
 * DARK OPTION
 **/
.colors .color9 {
    background: #0066ff;
}
.colors .color10 {
    background: #f6f600;
}
.colors .color11 {
    background: #ff2525;
}
.colors .color12 {
    background: #101010;
}
.colors .color13 {
    background: #06a763;
}
.colors .color14 {
    background: #101010;
}
.colors .color15 {
    background: #222222;
}
.colors .color16 {
    background: #ff3333;
}
/*-------------------------------------------------------------------------------
## END
-------------------------------------------------------------------------------*/