/*********************
 * Graph Holder styles *
 *********************/

/** Graph Holder container (move margin-top here to move the actual bar graph ---- CHANGE THIS TO MOVE THE GRAPH UP AND DOWN**/
.graph-container {
	position: relative; 
	display: inline-block; 
	padding: 0;
	list-style: none;
	font-size: 0.8em;
	
	background-image: -webkit-linear-gradient(left , rgba(255, 255, 255, .3) 100%, transparent 100%);
	background-image: -moz-linear-gradient(left , rgba(255, 255, 255, .3) 100%, transparent 100%);
	background-image: -o-linear-gradient(left , rgba(255, 255, 255, .3) 100%, transparent 100%);
	background-image: -ms-linear-gradient(left , rgba(255, 255, 255, .3) 100%, transparent 100%);
	background-image: linear-gradient(left , rgba(255, 255, 255, .3) 100%, transparent 100%);
	background-repeat: no-repeat;
	background-position: 0 -2.5em;
	top: 40px;
	margin-bottom: 2.5em;
	z-index: 60;
	left: 280px;
}

/* Graph Holder bottom side */
.graph-container:before {
    position: absolute;
    content: "";

    bottom: 0;
    left: -1.25em; /* skew pushes it left, so we move it a bit in opposite direction */

    width: 100%; /* make sure it is as wide as the whole graph */

    height: 2.5em;
    background-color: rgba(183, 183, 183, 1);

    /* Make it look perspective */
    -webkit-transform: skew(-45deg);
    -moz-transform: skew(-45deg);
    -o-transform: skew(-45deg);
    -ms-transform: skew(-45deg);
    transform: skew(-45deg);
	
}

/* Graph Holder left side */
.graph-container:after {
    position: absolute;
    content: "";

    top: 1.25em; /* skew pushes it up so we move it down a bit */
    left: -2.5em;

    width: 2.5em;
    background-color: rgba(129, 129, 129, 0.4);

    /* Make it look perspective */
    -webkit-transform: skew(0deg, -45deg);
    -moz-transform: skew(0deg, -45deg);
    -o-transform: skew(0deg, -45deg);
    -ms-transform: skew(0deg, -45deg);
    transform: skew(0deg, -45deg);
	
}

/* Bars and X-axis labels holder */
.graph-container > li {
    float: left; /* Make sure bars are aligned one next to another */
    position: relative; /* Make sure X-axis labels are positioned relative to this element */
}

.graph-container > li:nth-last-child(2) {
    margin-right: 2.5em;
}
/* X-axis labels */
.graph-container > li > span {
    position: absolute;
    left: 0;
    bottom: -2em;
    width: 80%; /*  change perspective depth */
    text-align: center;
	font-weight: bold;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.7);
	color: #777;
    font-size: 1.5em;
	
}

/*******************************
 * Graph Y-axis Markers styles *
 *******************************/

/* Markers container */
.graph-container > li:last-child {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}

/* Y-axis Markers list */
.graph-marker-container > li {
    position: absolute;
    left: -2.5em;
    bottom: 0;
    width: 100%;
    margin-bottom: 2.5em;
    list-style: none;
}

/* Y-axis lines general styles */
.graph-marker-container > li:before,
.graph-marker-container > li:after {
    content: "";
    position: absolute;
    border-style: none none dotted;
    border-color: rgba(100, 100, 100, .15);
    border-width: 0 0 .15em;
    background: rgba(133, 133, 133, .15);
}

/* Y-axis Side line */
.graph-marker-container > li:before {
    width: 3.55em;
    height: 0;
    bottom: -1.22em;
    left: -.55em;
    z-index: 2; /* be above .graph-container:after */

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* Y-axis Background line */
.graph-marker-container li:after {
    width: 100%;
    bottom: 0;
    left: 2.5em;
}

/* Y-axis text Label */
.graph-marker-container span {
	position: absolute;
	font-weight: bold;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.7);
	left: -3.5em; /* just to push it away from the graph.. */
	width: 3.5em; /* give it absolute value of left offset */
	font-size: 1.5em;
}

/*********************
 * Graph Bars styles *
 *********************/

/* Bar wrapper - hides the inner bar when it goes below the bar, required */
.bar-wrapper {
    overflow: hidden;
}
/* Bar container - this guy is a real parent of a bar's parts - they all are positioned relative to him */
.bar-container {
    position: relative;
    margin-top: 2.5em; /* should be at least equal to the top offset of background casing */
    /* because back casing is positioned higher than actual bar */
    width: 12.5em; /* required, we have to define the width of a bar */
}
/* right bottom patch - make sure inner bar's right bottom corner is "cut" when it slides down */
.bar-container:before {
    content: "";
    position: absolute;
    z-index: 3; /* to be above .bar-inner */

    bottom: 0;
    right: 0;

    /* Use bottom border to shape triangle */
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 2.5em 2.5em;
    border-color: transparent transparent rgba(183,183,183,1);
}

/** BACK CASING **/
/* Back panel */
.bar-background {
    width: 10em;
    height: 100%;
    position: absolute;
    top: -2.5em;
    left: 2.5em;
    z-index: 1; /* just for reference */
}

.bar-background:before,
.bar-background:after {
    content: "";
    position: absolute;
}

/* Bottom panel */
.bar-background:before {
    bottom: -2.5em;
    right: 1.25em;
    width: 10em;
    height: 2.5em;
	-webkit-backface-visibility: hidden;
    -webkit-transform: skew(-45deg);
    -moz-transform: skew(-45deg);
    -o-transform: skew(-45deg);
    -ms-transform: skew(-45deg);
    transform: skew(-45deg);
}

/* Left back panel */
.bar-background:after {
    top: 1.25em;
    right: 10em;
    width: 2.5em;
    height: 100%;
	-webkit-backface-visibility: hidden;
    /* skew only the Y-axis */
    -webkit-transform: skew(0deg, -45deg);
    -moz-transform: skew(0deg, -45deg);
    -o-transform: skew(0deg, -45deg);
    -ms-transform: skew(0deg, -45deg);
    transform: skew(0deg, -45deg);
}

/** FRONT CASING **/
/* Front panel */
.bar-foreground {
    z-index: 3; /* be above .bar-background and .bar-inner */
}
.bar-foreground,
.bar-inner {
	position: absolute;
	width: 10em;
	height: 100%;
	top: 0;
}

.bar-foreground:before,
.bar-foreground:after,
.bar-inner:before,
.bar-inner:after {
    content: "";
    position: absolute;
}

/* Right front panel */
.bar-foreground:before,
.bar-inner:before {
    top: -1.25em;
    right: -2.5em;
    width: 2.5em;
    height: 100%;
    background-color: rgba(160, 160, 160, .27);

    -webkit-transform: skew(0deg, -45deg);
    -moz-transform: skew(0deg, -45deg);
    -o-transform: skew(0deg, -45deg);
    -ms-transform: skew(0deg, -45deg);
    transform: skew(0deg, -45deg);
}

/* Top front panel */
.bar-foreground:after,
.bar-inner:after {
    top: -2.5em;
    right: -1.25em;
    width: 100%;
    height: 2.5em;
    background-color: rgba(160, 160, 160, .2);

    -webkit-transform: skew(-45deg);
    -moz-transform: skew(-45deg);
    -o-transform: skew(-45deg);
    -ms-transform: skew(-45deg);
    transform: skew(-45deg);
}

/** BAR's inner block **/
.bar-inner {
    z-index: 2; 
    top: auto; 
    background-color: rgba(5, 62, 123, .6);
    height: 0;
    bottom: -2.5em;
    color: transparent; 

    -webkit-transition: height 0.8s ease-in-out, bottom 0.8s ease-in-out;
    -moz-transition: height 0.8s ease-in-out, bottom 0.8s ease-in-out;
    -o-transition: height 0.8s ease-in-out, bottom 0.8s ease-in-out;
    -ms-transition: height 0.8s ease-in-out, bottom 0.8s ease-in-out;
    transition: height 0.8s ease-in-out, bottom 0.8s ease-in-out;
}

/* Right panel */
.bar-inner:before {
    background-color: rgba(5, 62, 123, .6);
}

/* Top panel */
.bar-inner:after {
    background-color: rgba(47, 83, 122, .7);
}

/******************************************************************************
 **                                                                          **
 ** UI Elements                                                          **
 ******************************************************************************/

/****************
 * FILL BUTTONS  *
 ****************/
input[name^="fill-"] {
	width: 65px;
	height: 25px;
	position: absolute;
	opacity: 0;
	cursor: pointer;
	z-index: 100;
	
	
	
}

input[name^="fill-"] + label {
	display: inline-block;
	margin: 0px;
	width: 65px;
	padding: 0px 6px;
	color: #777;
	line-height: 20px;	
	font-size: 13px;
	text-shadow: 1px 1px 1px #fff;
	border: 1px solid #fff;
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
	background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
	box-shadow: 0px 1px 1px rgba(0,0,0,0.3);
	z-index: 100;
	
}
input[name^="fill-"]:checked + label {
	background: rgba(34, 35, 36, .7);
	border-color: #333;
	color: #fff;
	text-shadow: none;
	box-shadow: 0px 1px 1px rgba(255,255,255, 0.4);
	z-index: 120;
}

/* Bar data - change here! */

/* Product 1 */
input#f-product1:checked ~ .graph-container > li:nth-child(1) .bar-inner { height: 45.09%; bottom: 0; }
input#f-product1:checked ~ .graph-container > li:nth-child(2) .bar-inner { height: 28.72%; bottom: 0; }
input#f-product1:checked ~ .graph-container > li:nth-child(3) .bar-inner { height: 1.67%; bottom: 0; }
input#f-product1:checked ~ .graph-container > li:nth-child(4) .bar-inner { height: 1.67%; bottom: 0; }

/* Product 2 */
input#f-product2:checked ~ .graph-container > li:nth-child(1) .bar-inner { height: 79.5%; bottom: 0; }
input#f-product2:checked ~ .graph-container > li:nth-child(2) .bar-inner { height: 61.12%; bottom: 0; }
input#f-product2:checked ~ .graph-container > li:nth-child(3) .bar-inner { height: 7%; bottom: 0; }
input#f-product2:checked ~ .graph-container > li:nth-child(4) .bar-inner { height: 3.34%; bottom: 0; }

/* Product 3 */
input#f-product3:checked ~ .graph-container > li:nth-child(1) .bar-inner { height: 100%; bottom: 0; }
input#f-product3:checked ~ .graph-container > li:nth-child(2) .bar-inner { height: 76.82%; bottom: 0; }
input#f-product3:checked ~ .graph-container > li:nth-child(3) .bar-inner { height: 10%; bottom: 0; }
input#f-product3:checked ~ .graph-container > li:nth-child(4) .bar-inner { height: 5%; bottom: 0; }



/****************
 * COLOR BUTTONS  *
 ****************/






/****************
 * SIZE BUTTONS  *
 ****************/
input[name^="resize-"] {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	z-index: 100;
	width: 70px;
	height: 35px;
	z-index: 100;
	
	
	
	
}
/* unselected color switch */
input[name^="resize-"] + label {
    color: #fff;
	display: inline-block;
    background: rgba(183, 172, 172, .7); 
	width: 70px;
	line-height: 35px;
	height: 35px;
    text-align: center;
	position: relative;
	margin-top: -400px;
	
}
input[name^="resize-"]:checked + label {
    background: rgba(34, 35, 36, .7);
    color: #fff;
	box-shadow: 0px 1px 1px rgba(255,255,255,0.3);
}

input#graph-small:checked ~ .graph-container .bar-container,
input#graph-small:checked ~ .graph-container:after,
input#graph-small:checked ~ .graph-container > li:last-child  {
    height: 10em;
}

input#graph-normal:checked ~ .graph-container .bar-container,
input#graph-normal:checked ~ .graph-container:after,
input#graph-normal:checked ~ .graph-container > li:last-child  {
    height: 30em;
}

input#graph-large:checked ~ .graph-container .bar-container,
input#graph-large:checked ~ .graph-container:after,
input#graph-large:checked ~ .graph-container > li:last-child  {
    height: 60em;
}

/******************************************************************************
 **                                                                          **
 ** VARIABLES                                                                **
 **                                                                          **
 ******************************************************************************/

/****************
 * SPACING      *
 ****************/

/* spacing between bars */
.graph-container > li .bar-container {
    margin-right: 1.5em;
}
/* spacing before first bar */
.graph-container > li:first-child {
    margin-left: 1.5em;
}
/* spacing after last bar */
.graph-container > li:nth-last-child(2) .bar-container {
    margin-right: 1em;
}

/****************
 *    Colors    *
 ****************/
 
/* Bar's Back side */
.bar-background {
    background-color: rgba(160, 160, 160, .1);
}
/* Bar's Bottom side */
.bar-background:before {
    background-color: rgba(160, 160, 160, .2);
}
/* Bar's Left Back side */
.bar-background:after {
    background-color: rgba(160, 160, 160, .05);
}
/* Bar's Front side */
.bar-foreground {
	background-color: rgba(160, 160, 160, .1);
}

.button-label{
	font-weight: bold;
	color: #aaa;
	line-height: 40px;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
	display: inline;
	margin: 0 10px 0 20px;
	
	
}
.button-label:before { 
	content: " "; 
	white-space: wrap; 
}

.main span:first-of-type{
	margin-left: 0px;
}
/******************************************************************************
 **                                                                          **
 ** RESPONSIVENESS - for mobiles etc	 **
 **                                                                          **
 ******************************************************************************/
 
@media screen and (max-width: 1125px) {
	.graph-container{ font-size: 0.7em; }
}
@media screen and (max-width: 1050px) {
	.graph-container{ font-size: 0.6em; }
}
@media screen and (max-width: 900px) {
	.button-label{ margin: 0 10px 0 0; }
	.button-label:before { content:"\A"; white-space: pre;  }
	.main {
	padding: 20px 20px 40px;
	/* [disabled]margin-top: 100px; */
}
}
@media screen and (max-width: 765px) {
	.graph-container { font-size: 0.5em; }
}
@media screen and (max-width: 720px) {
	.graph-container { font-size: 0.45em; }
}
@media screen and (max-width: 630px) {
	.graph-container {
	font-size: 0.32em;
	margin-left: 50px;
}
}
@media screen and (max-width: 450px) {
	.graph-container { font-size: 0.22em; }
	.button-label{ margin: 0 5px 0 0;}
}


.twitter-share-button{
	margin-left: 820px;
	top: -30px;
	position: relative;
	z-index: 50;

	
}


#facebook{
	margin-left: 770px;
	margin-top: -60px;
	position: relative;

	
}