/* ========================================================================
* Christina Arasmo Beymer : works with switcher.js
* http://badasstheme.com
* ========================================================================
* Copyright 2014 Christina Arasmo Beymer
* ======================================================================== */
@media only screen and (max-width:767px) { 
	#switcher-wrapper {
	    display: none
	}
}
.ie8 #switcher-wrapper,
.ie9 #switcher-wrapper,
.touch #switcher-wrapper,
.no-svg #switcher-wrapper {
    display: none
}
@media only screen and (min-width:768px) and (min-height:550px) { 

	#switcher-wrapper {
	    display: block!important;
	}
	.background-switcher {
	    margin: 0;
	    padding: 0;
	    list-style: none;
	}
	.background-switcher li {
	    margin: 0;
	    padding: 0;
	    list-style: none;
	}
	.background-switcher a {
	    text-indent: -9999px;
	    float: left;
	    width: 25%;
	    height: 60px;
	    margin-top: -1px;
	    margin-left: -1px;
	    border: 1px solid #ddd;
	}
	.background-switcher a.active {
	    border: 5px solid #ddd
	}
	.defaultbg {
	    background-image: url(../backgrounds/extra_clean_paper.gif)
	}
	body.white_wall,
	.white_wall #site-wrapper,
	.white_wall .short-headline span span,
	.white_wall .btn-knockout,
	#white_wall {
	    background-image: url(../backgrounds/white_wall.png)
	}
	body.circles,
	.circles #site-wrapper,
	.circles .short-headline span span,
	.circles .btn-knockout,
	#circles {
	    background-image: url(../backgrounds/circles.png)
	}
	body.clean_textile,
	.clean_textile #site-wrapper,
	.clean_textile .short-headline span span,
	.clean_textile .btn-knockout,
	#clean_textile {
	    background-image: url(../backgrounds/clean_textile.png)
	}
	body.wall4,
	.wall4 #site-wrapper,
	.wall4 .short-headline span span,
	.wall4 .btn-knockout,
	#wall4 {
	    background-image: url(../backgrounds/wall4.png)
	}
	body.scribble_light,
	.scribble_light #site-wrapper,
	.scribble_light .short-headline span span,
	.scribble_light .btn-knockout,
	#scribble_light {
	    background-image: url(../backgrounds/scribble_light.png)
	}
	body.paper,
	.paper #site-wrapper,
	.paper .short-headline span span,
	.vintage-paper-1 .btn-knockout,
	#paper {
	    background-image: url(../backgrounds/paper.png)
	}
	body.lightpaperfibers,
	.lightpaperfibers #site-wrapper,
	.lightpaperfibers .short-headline span span,
	.lightpaperfibers .btn-knockout,
	#lightpaperfibers {
	    background-image: url(../backgrounds/lightpaperfibers.png)
	}
	body.light_wool,
	.light_wool #site-wrapper,
	.light_wool .short-headline span span,
	.light_wool .btn-knockout,
	#light_wool {
	    background-image: url(../backgrounds/light_wool.png)
	}
	body.grey,
	.grey #site-wrapper,
	.grey .short-headline span span,
	.grey .btn-knockout,
	#grey {
	    background-image: url(../backgrounds/grey.png)
	}
	body.furley_bg,
	.furley_bg #site-wrapper,
	.furley_bg .short-headline span span,
	.furley_bg. featured-columns [class*="span"] .btn-knockout,
	#furley_bg {
	    background-image: url(../backgrounds/furley_bg.png)
	}
	body.frenchstucco,
	.frenchstucco #site-wrapper,
	.frenchstucco .short-headline span span,
	.frenchstucco .btn-knockout,
	#frenchstucco {
	    background-image: url(../backgrounds/frenchstucco.png)
	}
	body.block,
	.block #site-wrapper,
	.block .short-headline span span,
	.block .btn-knockout,
	#block {
	    background-image: url(../backgrounds/block.png)
	}
	body.square,
	.square #site-wrapper,
	.square .short-headline span span,
	.square .btn-knockout,
	#square {
	    background-image: url(../backgrounds/square.png)
	}
	body.lined,
	.lined #site-wrapper,
	.lined .short-headline span span,
	.lined .btn-knockout,
	#lined {
	    background-image: url(../backgrounds/lined.png)
	}
	body.dots,
	.dots #site-wrapper,
	.dots .short-headline span span,
	.dots .btn-knockout,
	#dots {
	    background-image: url(../backgrounds/dots.png)
	}
	body.subtle_dots,
	.subtle_dots #site-wrapper,
	.subtle_dots .short-headline span span,
	.subtle_dots .btn-knockout,
	#subtle_dots {
	    background-image: url(../backgrounds/subtle_dots.png)
	}
	#switcher .colors a {
	    background: #ccc;
	    border: 1px solid #fff;
	}
	#switcher .colors #green {
	    background: #6fa314
	}
	#switcher section #black {
	    background: #000
	}
	#switcher .colors #red {
	    background: #b20a0a
	}
	#switcher .colors #blue {
	    background: #1f62b5
	}
	#switcher .colors #orange {
	    background: #e85811
	}
	#switcher .colors #darkmagenta {
	    background: #ad2481
	}
	#switcher .colors #favblue {
	    background: #03acbb
	}
	#switcher .colors #bluegray {
	    background: #5e718e
	}
	#switcher .colors a.active {
	    border-width: 5px;
	    border-color: #fff;
	    position: relative;
	    z-index: 600;
	}
	#switcher h6 {
	    margin-bottom: 10px;
	    border-bottom: 1px dotted #ccc;
	}
	#switcher section .btn [class*="icon-"] {
	    margin-left: -8px
	}
	#switcher section {
	    margin-bottom: 15px
	}
	#switcher {
	    position: absolute;
	    top: 220px;
	    left: 0;
	    width: 300px;
	    z-index: 100;
	    background: #fff;
	    padding: 15px 15px 5px 15px;
	    font-size: 90%;
	    border-radius: 0;
	    border: 2px solid #ccc;
	    border-left: 0px;
	    max-height: 300px;
	    overflow-y: scroll;
	    overflow-x: visible;
	}
	#switcher .colors {
	    position: relative;
	    left: 2px;
	}
	#switcher .colors a {
	    text-indent: -9999px;
	    float: left;
	    width: 25%;
	    height: 30px;
	    margin-top: -1px;
	    margin-left: -1px;
	}
	#switcher-wrapper {
	    position: absolute;
	    left: -302px;
	    top: 0;
	    z-index: 1000;
	    overflow: visible;
	}
	#switcher .colors {
	    clear: both;
	    margin: 10px 0;
	}
	#switcher-wrapper .toggle {
	    cursor: pointer;
	    width: 40px;
	    height: 40px;
	    position: absolute;
	    z-index: 501;
	    top: 220px;
	    right: -338px;
	    margin: 0;
	    text-align: center;
	    border: none;
	    text-indent: 0;
	    background: #fff;
	    border-radius: 0 10px 10px 0;
	    border: 2px solid #ccc;
	    border-left: 0px;
	}
	#switcher-wrapper .toggle i {
	    font-size: 20px;
	    position: absolute;
	    display: block;
	    width: 38px;
	    height: 37px;
	    line-height: 37px;
	    text-align: center;
	    left: 2px;
	    margin: 0;
	    color: #333;
	    background-color: transparent;
	}
	#switcher-wrapper .toggle.selected i:before {
	    content: '\e80e';
	    position: relative;
	}
	.feature-toggle {
	    list-style: none;
	    margin: 0;
	    padding: 0;
	}
	.feature-toggle a {
	    display: block
	}
	.feature-toggle ul {
	    list-style: none;
	    margin: 0 0 0 10px;
	    padding: 0;
	}
	.feature-toggle .parent {
	    border-bottom: 1px solid #ddd;
	    padding: 5px 0;
	}
	.switchanimate {
	    left: 0;
	    -webkit-animation-name: slideOut;
	    -webkit-animation-iteration-count: once;
	    -webkit-animation-timing-function: ease-out;
	    -webkit-animation-duration: 2s;
	    animation-name: slideOut;
	    animation-iteration-count: once;
	    animation-timing-function: ease-out;
	    animation-duration: 2s;
	    -webkit-animation-fill-mode: forwards;
	    animation-fill-mode: forwards;
	}
	@keyframes slideOut {
	    0% {
	        left: 0;
	        opacity: .3;
	    }
	    100% {
	        left: -302px;
	        opacity: 1;
	    }
	}
	@-webkit-keyframes slideOut {
	    0% {
	        left: 0;
	        opacity: .3;
	    }
	    100% {
	        left: -302px;
	        opacity: 1;
	    }
	}
	.swimg {
	    z-index: 1000;
	    position: absolute;
	    /*right: -405px;*/
	    top: 280px;
	    opacity: 0;
	    right: 0;
	    width: 100px;
	    height: 100px;
	}
	.swimg img {
	    border: 1px solid rgba(0, 0, 0, .3);
	    border-bottom-width: 3px;
	    border-right-width: 3px;
	}
	.swimg.s-2 {
	    top: 370px
	}
	.swimg.s-3 {
	    top: 460px
	}
	.swimg:hover img {
	    border-color: #fff;
	    opacity: .6;
	}
	.animate-switcher-img {
	    right: 0;
	    -webkit-animation-name: slideOut2;
	    -webkit-animation-iteration-count: once;
	    -webkit-animation-timing-function: ease-out;
	    -webkit-animation-duration: 1s;
	    animation-name: slideOut2;
	    animation-iteration-count: once;
	    animation-timing-function: ease-out;
	    animation-duration: 1s;
	    -webkit-animation-fill-mode: forwards;
	    animation-fill-mode: forwards;
	}
	@keyframes slideOut2 {
	    0% {
	        right: 405px;
	        opacity: .3;
	    }
	    100% {
	        right: -405px;
	        opacity: 1;
	    }
	}
	@-webkit-keyframes slideOut2 {
	    0% {
	        right: 405px;
	        opacity: .3;
	    }
	    100% {
	        right: -405px;
	        opacity: 1;
	    }
	}
}
@media only screen and (min-height:750px) { 
	#switcher {
	    max-height: 500px
	}
}
@media only screen and (min-height:900px) { 
	#switcher {
	    max-height: 800px;
	    overflow: hidden;
	}
}