/*
  [CSS Index - styleswitch, for demonstration purposes only]
  
  ---
  
  Template Name: Siy - Under Construction Template
  Author:  ex-nihilo
  Version: 1.2
*/


/*
  1. styleswitch
  2. styleswitch colors
*/


/* 1. styleswitch */
#customizer {
    position: fixed;
    top: 120px;
    z-index: 10;
}

@media only screen and (max-width: 640px) {
    #customizer {
	    display: none;
		visibility: hidden;
    }
}

.corner,
.corner-color {
    position: fixed;
    display: block;
    top: 130px;
	right: 120px;
    width: 15px;
    height: 15px;
    margin: 0 10px;
    padding: 10px;
    background: #d50016;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
    cursor: pointer;
    z-index: 100;
}

@media only screen and (max-width: 640px) {
    .corner,
    .corner-color {
	    display: none;
		visibility: hidden;
    }
}

.corner-switch-color {
    background: #fff;
}

.corner-keep-color {
    background: #d50016;
}

.corner::before,
.corner-switch-color::before,
.corner-keep-color::before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    padding: 25px;
    margin: 0 auto;
    background: #d50016;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
    -webkit-animation-name: corner-pulsate;
            animation-name: corner-pulsate;
    -webkit-animation-duration: 2s;
            animation-duration: 2s;	
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
                opacity: 0;
           -moz-opacity: 0;
        -webkit-opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    z-index: -1;
}

@media only screen and (max-width: 640px) {
  .corner::before {
    padding: 20px;
  }
}

.corner-switch-color::before {
    background: #fff;
}

.corner-keep-color::before {
    background: #d50016;
}

@keyframes corner-pulsate {
  from {
    -webkit-transform: translate(-50%, -50%) scale(0);
       -moz-transform: translate(-50%, -50%) scale(0);
        -ms-transform: translate(-50%, -50%) scale(0);
         -o-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0);
                opacity: 1;
           -moz-opacity: 1;
        -webkit-opacity: 1;
      filter: alpha(opacity=100);
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
  to {
    -webkit-transform: translate(-50%, -50%) scale(1);
       -moz-transform: translate(-50%, -50%) scale(1);
        -ms-transform: translate(-50%, -50%) scale(1);
         -o-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
                opacity: 0;
           -moz-opacity: 0;
        -webkit-opacity: 0;
      filter: alpha(opacity=0);
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}

.s-close {
	right: -206px;
	-webkit-transition: all .4s ease-in-out;
	   -moz-transition: all .4s ease-in-out;
	     -o-transition: all .4s ease-in-out;
	        transition: all .4s ease-in-out;
}

.s-open {
	right: 0; right: 120px;
	-webkit-transition: all .4s ease-in-out;
	   -moz-transition: all .4s ease-in-out;
	     -o-transition: all .4s ease-in-out;
	        transition: all .4s ease-in-out;
}

#options {
	width: 206px;
	height: 210px;
	background: #000;
	padding: 0;
	position: relative;
	-webkit-transition: all .4s ease-in-out;
	   -moz-transition: all .4s ease-in-out;
	     -o-transition: all .4s ease-in-out;
	        transition: all .4s ease-in-out;
}

.options-head {
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 400;
	color: #fff;
	text-shadow: 1px 1px 2px #111;
	text-align: center;
	text-transform: uppercase;
	line-height: 40px;
}

.options-segment {
	margin-bottom: 20px;
}

.color-head {
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
	color: #000;
	line-height: 1;
	display: none;
	visibility: hidden;
}

.color-scheme {
	padding: 10px 0 0 1px;
}

.color-scheme li {
	float: left;
	list-style: none;
}

.color-scheme a {
	display: block;
	height: 30px;
	width: 30px;
	margin: 0 4.25px 10px;
}

.colors-sel {
	padding: 20px 25px 15px;
	margin-bottom: 0;
}


/* 2. styleswitch colors */
.red a {
	background: #d50016;
}

.red-2 a {
	background: #ff0000;
}

.magenta a {
	background: #c32aa3;
}

.french-rose a {
	background: #ea4c89;
}

.blue a {
	background: #3b5998;
}

.blue-2 a {
	background: #00b6f1;
}

.orange a {
	background: #df4a32;
}

.orange-2 a {
	background: #ff5500;
}

.green a {
	background: #a4c639;
}

.green-2 a {
	background: #00b489;
}

.golden-brown a {
	background: #996600;
}

.yellow a {
    background: #fffc00;
}