/*
 Theme Name: Divi Child
 Theme URI: https://www.elegantthemes.com/gallery/divi/
 Description: Divi Child Theme
 Author: Elegant Themes
 Author URI: https://www.elegantthemes.com
 Template: Divi
 Version: 1.0.0
*/
 
/* =Theme customization starts here
------------------------------------------------------- */




@font-face {
  font-family: 'creditgenevois';
  src:  url('fonts/creditgenevois.eot?96yswx');
  src:  url('fonts/creditgenevois.eot?96yswx#iefix') format('embedded-opentype'),
    url('fonts/creditgenevois.ttf?96yswx') format('truetype'),
    url('fonts/creditgenevois.woff?96yswx') format('woff'),
    url('fonts/creditgenevois.svg?96yswx#creditgenevois') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
} 

[class^="cg-"], [class*=" cg-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'creditgenevois' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cg-logo-cg:before {
  content: "\e900";
}


.simulateur-form-wrapper .jumbotron p{
	margin : 0;
}

.simulateur-form-wrapper h2{
	color: #303030;
	font-family: "Athena", Sans-serif;
	font-size: 25px;
    font-weight: 900;
	margin-top : 2rem;
	margin-bottom : 1rem;
}
.cta.btn{
	background-color : #303030;
	color : #fff;
	margin-top : 2rem;
	margin-bottom : 2rem;
	font-size: 20px; 
	padding : .7rem 1.5rem;
} 

.cta.btn:hover, .cta.btn:focus{
	background-color : #000;
	color : #fff;
} 

input[type="text"], input[type="mail"], input[type="tel"], input[type="email"], textarea, select {
	 padding: .6rem;
	 outline: none;
}
 .switch-wrapper {
	 margin-bottom: 1.5rem;
}
 .switch {
	 margin-left: .6rem;
	 margin-right: .6rem;
}
 .cmn-toggle {
	 position: absolute;
	 margin-left: -9999px;
	 visibility: hidden;
}
 .cmn-toggle + label {
	 display: block;
	 position: relative;
	 cursor: pointer;
	 outline: none;
	 user-select: none;
}
 input.cmn-toggle-round-flat + label {
	 padding: 2px;
	 width: 60px;
	 height: 34px;
	 background-color: #303030;
	 border-radius: 60px;
	 transition: background 0.4s;
}
 input.cmn-toggle-round-flat + label:before, input.cmn-toggle-round-flat + label:after {
	 display: block;
	 position: absolute;
	 content: "";
}
 input.cmn-toggle-round-flat + label:before {
	 top: 2px;
	 left: 2px;
	 bottom: 2px;
	 right: 2px;
	 background-color: #303030;
	 border-radius: 60px;
	 transition: background 0.4s;
}
 input.cmn-toggle-round-flat + label:after {
	 top: 4px;
	 left: 4px;
	 bottom: 4px;
	 width: 26px;
	 background-color: #fff;
	 border-radius: 52px;
	 transition: margin 0.4s, background 0.4s;
	 box-shadow: 0 0 15px rgba(0,0,0,0.2);
	 -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.2);
	 -moz-box-shadow: 0 0 15px rgba(0,0,0,0.2);
	 -o-box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
 input.cmn-toggle-round-flat:checked + label {
	 background-color: #303030; 
}
 input.cmn-toggle-round-flat:checked + label:after {
	 margin-left: 26px;
	 background-color: #fff;
}
 .fieldset {
	 border: 1px solid #e6e6e6;
	 border-radius: 15px;
}
 .fieldset.padding-top-bottom {
	 padding-top: 1rem;
	 padding-bottom: 1.5rem;
}
 .fieldset.recapitulatif {
	 background-color: rgba(0,0,0,0.02);
	 padding: 1rem;
	 border: 0;
}
 .fieldset h3 {
	 text-align: center;
	 text-transform: uppercase;
	 color: #666666;
	 border-bottom: 0 !important;
	 padding-bottom: 0 !important;
	 margin-top: 1rem !important;
	 font-size: .9rem !important;
	 opacity: .8;
}
 .fieldset #choix-devise {
	 border-right: 1px solid #e6e6e6;
}
 input[type=range] {
	 margin: auto;
	 outline: none;
	 padding: 0;
	 width: 100%;
	 height: 5px;
	 background-color: #e9ecef;
	 background-image: -webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#303030),color-stop(100%,#303030));
	 background-image: -webkit-linear-gradient(#303030,#303030);
	 background-image: -moz-linear-gradient(#303030,#303030);
	 background-image: -o-linear-gradient(#303030,#303030);
	 background-image: linear-gradient(#303030,#303030);
	 background-size: 50% 100%;
	 background-repeat: no-repeat;
	 border-radius: 10px;
	 cursor: pointer;
	 -webkit-appearance: none;
}
 input[type=range]::-webkit-slider-runnable-track {
	 box-shadow: none;
	 border: none;
	 background: transparent;
	 -webkit-appearance: none;
}
 input[type=range]::-moz-range-track {
	 box-shadow: none;
	 border: none;
	 background: transparent;
}
 input[type=range]::-moz-focus-outer {
	 border: 0;
}
 input[type=range]::-webkit-slider-thumb {
	 width: 20px;
	 height: 20px;
	 border: 0;
	 background: #fff;
	 border-radius: 100%;
	 box-shadow: 0 0 15px rgba(0,0,0,0.2);
	 -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.2);
	 -moz-box-shadow: 0 0 15px rgba(0,0,0,0.2);
	 -o-box-shadow: 0 0 15px rgba(0,0,0,0.2);
	 -webkit-appearance: none;
}
 input[type=range]::-moz-range-thumb {
	 width: 20px;
	 height: 20px;
	 border: 0;
	 background: #fff;
	 border-radius: 100%;
	 box-shadow: 0 0 15px rgba(0,0,0,0.2);
	 -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.2);
	 -moz-box-shadow: 0 0 15px rgba(0,0,0,0.2);
	 -o-box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
 .range-wrapper {
	 padding: 1rem 1.5rem;
}
 .range-wrapper .range-wrapper-labels {
	 margin-bottom: .5rem;
}
 .range-wrapper .range-wrapper-labels .range-label {
	 font-size: .8rem;
	 font-weight: 700;
	 color: #000;
}

 .range-wrapper .range-wrapper-labels .range-label span{
	 display: block;
	 opacity : .4;
}

 .range-wrapper .range-wrapper-labels .range-value {
	 font-size: .8rem;
	 font-weight: 700;
	 color: #303030;
	 /*background-color : #303030;*/
	 padding : .3rem .7rem;
}
 #estate-project-wrapper {
	 padding-left: 0;
}
/* #estate-project-wrapper > .fieldset {
	 margin-right: -15px;
}*/
 #earnings-wrapper {
	 padding-right: 0;
}
 /*#earnings-wrapper > .fieldset {
	 margin-left: -16px;
}*/
 #rate-wrapper {
	 padding: 0;
	 margin-top: -1px;
}
 #rate-wrapper > .fieldset {
	 padding-left: 5rem;
	 padding-right: 5rem;
}
 #rate-wrapper #loan-rate-wrapper {
	 /*opacity: .6;*/
}
 #charts-wrapper {
	 padding-left: 0;
}
 #charts-wrapper #founds-chart #result-founds {
	 margin-top: 1.5rem;
	 color: #666666;
	 font-weight: 700;
	 opacity: .8;
}
 #charts-wrapper #founds-chart #result-founds .chart-number {
	 color: #99c966;
	 font-size: 1.8rem;
	 opacity: 1;
}
 #charts-wrapper #indebtedness-chart #max-indebtedness {
	 font-size: .6rem;
	 font-weight: 700;
	 color: #666666;
	 position: absolute;
	 bottom: 25%;
	 left: -2.5rem;
	 text-align: center;
	 transform: rotate(-90deg);
	 padding-bottom: 1rem;
}
 #charts-wrapper #indebtedness-chart #max-indebtedness:after {
	 content: "";
	 position: absolute;
	 display: inline-block;
	 left: 50%;
	 bottom: 0;
	 width: 1px;
	 height: 12px;
	 background-color: #666666;
}
 #charts-wrapper #indebtedness-chart .cg-logo-cg {
	 display: block;
	 font-size: 7rem;
	 margin-top : 1rem;
	 margin-bottom : 1rem;
	 color: #444444;
}
 #charts-wrapper #indebtedness-chart .indebtness-percentage.on {
	 color: #99c966;
}
 #charts-wrapper #indebtedness-chart .indebtness-percentage.off { 
	 color: #f89406;
}
 #charts-wrapper #indebtedness-chart .max-rate {
	 position: relative;
	 border-radius: 5px !important;
	 -webkit-border-radius: 5px !important;
	 -moz-border-radius: 5px !important;
	 -o-border-radius: 5px !important;
	 box-shadow: 0 0 5rem rgba(0,0,0,0.1);
	 -webkit-box-shadow: 0 0 5rem rgba(0,0,0,0.1);
	 -moz-box-shadow: 0 0 5rem rgba(0,0,0,0.1);
	 -o-box-shadow: 0 0 5rem rgba(0,0,0,0.1);
	 background-color: #fff;
	 padding: 1rem;
	 margin-top: 2rem;
	 text-transform: uppercase;
	 font-size: .7rem;
	 color: #999999;
	 font-weight: 700;
	 line-height: 1.2;
}
 #charts-wrapper #indebtedness-chart .max-rate i {
	 display: block;
	 font-size: 2rem;
	 color: #999999;
	 margin-bottom: .5rem;
}
 #charts-wrapper #indebtedness-chart .max-rate:before {
	 content: "";
	 position: absolute;
	 left: 50%;
	 bottom: 100%;
	 margin-left: -7.5px;
	 width: 0;
	 height: 0;
	 border-style: solid;
	 border-width: 0 7.5px 10px 7.5px;
	 border-color: transparent transparent #ffffff transparent;
}
 #charts-wrapper #indebtedness-chart .indebtness-percentage {
	 font-size: 3rem;
	 font-weight: 700;
	 color: #444444;
}
 @media screen and (min-width: 992px) {
	 #charts-wrapper {
		 border-right: 1px solid #e6e6e6;
	}
}
 @media screen and (max-width: 991px) {
	 #charts-wrapper {
		 padding-bottom: 1.5rem;
		 margin-bottom: 1.5rem;
		 border-bottom: 1px solid #e6e6e6;
	}
}
 #results-wrapper > section {
	 position: relative;
	 text-align: center;
	 padding: 1rem;
}

 #results-wrapper .large {
	 position : relative;
	 padding-left : 6rem;
	 text-align: left;
}

 #results-wrapper .large > img{
	 position: absolute;
	 top : 50%;
	 left : 0;
	 /*height : 50px;*/
	 transform: translateY(-50%);
}

 #results-wrapper .large h3{
	text-align: left;
	 margin-top : 0!important;
	 margin-bottom : 0!important;
}

 #results-wrapper .small > img{
	 height : 50px;
}

 #results-wrapper .small h3{
	font-size: 1rem;
}

#results-wrapper .small .result-item{
	font-size: 1.2rem;
	opacity: .8;
}

#results-wrapper .result-item {
	 font-weight: 700;
	 color: #303030;
	 font-size: 1.5rem;
	 /*padding-top: 1rem;*/
	 background-repeat: no-repeat;
	 background-position: center;
	 background-color: transparent;
}

#results-wrapper .large .result-item {
	 font-size: 2.5rem;
}

 #results-wrapper #financement {
	 align-self: center;
}
 #results-wrapper #financement .result-item {
	 /*background-image: url(../img/house-icon.png);*/ 
}
 #results-wrapper #mensualites {
	 align-self: center;
}
 #results-wrapper #mensualites .result-item {
	 /*background-image: url(../img/schedule-icon.png);*/
}
 #results-wrapper #notaire {
	 align-self: center;
}
 #results-wrapper #notaire .countable-rate-wrapper {
	 display: block;
}
 #results-wrapper #notaire .result-item {
	 /*background-image: url(../img/law-icon.png);*/
}
 #viability #viability-value {
	 position: relative;
	 display: inline;
	 padding-left: 3rem;
	 font-size: 1.5rem;
	 text-transform: uppercase;
	 font-weight: 700;
	 line-height: 1.2;
	 padding-top: 1.5rem;
	 padding-bottom: 1.5rem;
	 text-align : center; 
}
 #viability #viability-value.viability-ok {
	 color: #99c966;
}
 #viability #viability-value.viability-ok:before {
	 content: "";
	 position: absolute;
	 left: 1rem;
	 top: 50%;
	 margin-left: -5px;
	 margin-top: -10px;
	 width: 20px;
	 height: 20px;
	 background-color: #99c966;
	 border-radius: 50% !important;
	 -webkit-border-radius: 50% !important;
	 -moz-border-radius: 50% !important;
	 -o-border-radius: 50% !important;
	 opacity: .5;
	 box-shadow: 0 0 15px #6da234;
	 -webkit-box-shadow: 0 0 15px #6da234;
	 -moz-box-shadow: 0 0 15px #6da234;
	 -o-box-shadow: 0 0 15px #6da234;
}
 #viability #viability-value.viability-ok:after {
	 content: "";
	 position: absolute;
	 left: 1rem;
	 top: 50%;
	 margin-top: -5px;
	 width: 10px;
	 height: 10px;
	 background-color: #99c966;
	 border-radius: 50% !important;
	 -webkit-border-radius: 50% !important;
	 -moz-border-radius: 50% !important;
	 -o-border-radius: 50% !important;
}
 #viability #viability-value.viability-off {
	 color: #f89406;
}
 #viability #viability-value.viability-off:before {
	 content: "";
	 position: absolute;
	 left: 1rem;
	 top: 50%;
	 margin-left: -5px;
	 margin-top: -10px;
	 width: 20px;
	 height: 20px;
	 background-color: #f89406;
	 border-radius: 50% !important;
	 -webkit-border-radius: 50% !important;
	 -moz-border-radius: 50% !important;
	 -o-border-radius: 50% !important;
	 opacity: .5;
	 box-shadow: 0 0 15px #f89406;
	 -webkit-box-shadow: 0 0 15px #f89406;
	 -moz-box-shadow: 0 0 15px #f89406;
	 -o-box-shadow: 0 0 15px #f89406;
}
 #viability #viability-value.viability-off:after {
	 content: "";
	 position: absolute;
	 left: 1rem;
	 top: 50%;
	 margin-top: -5px;
	 width: 10px;
	 height: 10px;
	 background-color: #f89406;
	 border-radius: 50% !important;
	 -webkit-border-radius: 50% !important;
	 -moz-border-radius: 50% !important;
	 -o-border-radius: 50% !important;
}
 @media screen and (min-width: 568px) {
	 
	 #results-wrapper > section:nth-child(1):before {
		 content: "";
		 position: absolute;
		 width: 96%;
		 height: 1px;
		 bottom: 0;
		 left: 2%;
		 background-color: #e6e6e6;
	}
	 
	 #results-wrapper > section:nth-child(2):before, #results-wrapper > section:nth-child(3):before {
		 content: "";
		 position: absolute;
		 width: 1px;
		 height: 85%;
		 top: 0;
		 right: 0;
		 background-color: #e6e6e6;
	}
	 #results-wrapper > section:nth-child(5):before {
		 content: "";
		 position: absolute;
		 width: 96%;
		 height: 1px;
		 top: 0;
		 left: 2%;
		 background-color: #e6e6e6;
	}
}
 @media screen and (max-width: 567px) {
	#results-wrapper {
		 padding: 0;
	}
	#results-wrapper > section {
		 border-bottom: 1px solid #e6e6e6;
	}
	#results-wrapper > section:last-of-type {
		 border-bottom: 0px;
	}
}
 
 
/*********************
 * Graph Holder styles *
 *********************/

/** Graph Holder container **/
.graph-container {
    position: relative; /* required Y axis stuff, Graph Holder's left and bottom sides to be positions properly */
    display: inline-block; /* display: table may also work.. */
    padding: 0; /* let the bars position themselves */
    list-style: none; /* we don't want to see any default <ul> markers */
	font-size: 0.8em;
    /* Graph Holder's Background */
	padding : 0;
}

/* 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 */
	list-style-type : none!important;
	padding : 0!important; 
	margin :0!important;
	background: none!important;
}
/* A small hack to make Graph Holder's background side be wide enough
   ..because our bottom side is skewed and pushed to the right, we have to compensate it in Graph Holder's background */
.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%; /* play with this one if you 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);
    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);
    top: 1em;
    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 */
	height : 20rem;
}
/* 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 #fafafa;
}

/** BACK CASING **/
/* Back panel */
.bar-background {
    width: 8em;
    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);
    transform: skew(-45deg);
}

/* Left back panel */
.bar-background:after {
    top: 1.25em;
    right: 8em;
    width: 2.5em;
    height: 100%;
	-webkit-backface-visibility: hidden;
    /* skew only the Y-axis */
    -webkit-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, .bar-inner-completed {
    position: absolute;
    width: 8em;
    height: 100%;
    top: 0;
    left: 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(240, 240, 240, .35);

    -webkit-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(230, 230, 230, .45); 

    -webkit-transform: skew(-45deg);
    transform: skew(-45deg);
}

/** BAR's inner block **/
.bar-inner {
    z-index: 2; /* to be above .bar-background */
    top: auto; /* reset position top */
    background-color: rgba(153, 201, 102, .75);
    height: 25%;
    bottom: 0em;
    color: #fff;
    font-weight: 700;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;

    -webkit-transition: height 0.8s ease-out, bottom 0.8s ease-out;
    transition: height 0.8s ease-out, bottom 0.8s ease-out; 
	
	text-shadow: 0px 0px 10px rgba(50, 50, 50, 1);
    -webkit-text-shadow: 0px 0px 10px rgba(50, 50, 50, 1);
    -moz-text-shadow: 0px 0px 10px rgba(50, 50, 50, 1);
    -o-text-shadow: 0px 0px 10px rgba(50, 50, 50, 1);
    -ms-text-shadow: 0px 0px 10px rgba(50, 50, 50, 1);
}

.bar-inner-completed{
	z-index: 2; /* to be above .bar-background */
    bottom: auto; /* reset position top */
    height: 75%;
    top: 0em;
    color: #333;
    font-weight: 400;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
	
	-webkit-transition: height 0.8s ease-out, bottom 0.8s ease-out;
    transition: height 0.8s ease-out, bottom 0.8s ease-out; 
}

.bar-inner-completed span{
	display : block;
	width : 100%;
	font-weight: 700;
}

/* Right panel */
.bar-inner:before {
    background-color: rgba(153, 201, 102, .65);
}

/* Top panel */
.bar-inner:after {
    background-color: rgba(113, 183, 39, .65);
}

/******************************************************************************
 **                                                                          **
 ** UI Elements                                                              **
 **                                                                          **
 ** You don't need this stuff in general, it's just used  for the demo page  **
 **                                                                          **
 ******************************************************************************/

/****************
 * 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 */ /* 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+ */ /* Opera 11.10+ */ /* IE10+ */
	background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
	box-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
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);
}

/* Change bars fill when a Product is selected */
/* None */
input#f-none:checked ~ .graph-container > li:nth-child(1) .bar-inner { height: 0; bottom: -2.5em; }
input#f-none:checked ~ .graph-container > li:nth-child(2) .bar-inner { height: 0; bottom: -2.5em; }
input#f-none:checked ~ .graph-container > li:nth-child(3) .bar-inner { height: 0; bottom: -2.5em; }
input#f-none:checked ~ .graph-container > li:nth-child(4) .bar-inner { height: 0; bottom: -2.5em; }
input#f-none:checked ~ .graph-container > li:nth-child(5) .bar-inner { height: 0; bottom: -2.5em; }
/* Product 1 */
input#f-product1:checked ~ .graph-container > li:nth-child(1) .bar-inner { height: 25%; bottom: 0; }
input#f-product1:checked ~ .graph-container > li:nth-child(2) .bar-inner { height: 50%; bottom: 0; }
input#f-product1:checked ~ .graph-container > li:nth-child(3) .bar-inner { height: 75%; bottom: 0; }
input#f-product1:checked ~ .graph-container > li:nth-child(4) .bar-inner { height: 100%; bottom: 0; }
input#f-product1:checked ~ .graph-container > li:nth-child(5) .bar-inner { height: 50%; bottom: 0; }
/* Product 2 */
input#f-product2:checked ~ .graph-container > li:nth-child(1) .bar-inner { height: 50%; bottom: 0; }
input#f-product2:checked ~ .graph-container > li:nth-child(2) .bar-inner { height: 100%; bottom: 0; }
input#f-product2:checked ~ .graph-container > li:nth-child(3) .bar-inner { height: 25%; bottom: 0; }
input#f-product2:checked ~ .graph-container > li:nth-child(4) .bar-inner { height: 75%; bottom: 0; }
input#f-product2:checked ~ .graph-container > li:nth-child(5) .bar-inner { height: 100%; bottom: 0; }
/* Product 3 */
input#f-product3:checked ~ .graph-container > li:nth-child(1) .bar-inner { height: 25%; bottom: 0; }
input#f-product3:checked ~ .graph-container > li:nth-child(2) .bar-inner { height: 75%; bottom: 0; }
input#f-product3:checked ~ .graph-container > li:nth-child(3) .bar-inner { height: 100%; bottom: 0; }
input#f-product3:checked ~ .graph-container > li:nth-child(4) .bar-inner { height: 50%; bottom: 0; }
input#f-product3:checked ~ .graph-container > li:nth-child(5) .bar-inner { height: 25%; bottom: 0; }


/****************
 * COLOR BUTTONS  *
 ****************/
input[name^="paint-"] {
    width: 25px;
	height: 25px;
	position: absolute;
	opacity: 0;
	cursor: pointer;
	z-index: 100;
}
/* unselected color switch */
input[name^="paint-"] + label {
    color: #989da4;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    width: 25px;
    height: 25px;
    overflow: hidden;
    background: rgba(34, 35, 36, .7);/*#171b20;*/
    margin: 0 2px -7px;

    position: relative;
    cursor: pointer;
    color: transparent;
	
	box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 1px 1px 3px rgba(0,0,0,0.3);
    text-align: center;
}

#graph-blue + label {
	background: #2972c3;
    background: -webkit-radial-gradient(rgba(39, 118, 205, 1), rgba(44, 106, 174, .9));
    background: radial-gradient(rgba(39, 118, 205, 1), rgba(44, 106, 174, .9));
}

#graph-green + label {
	background: #5f9a3f;
    background: -webkit-radial-gradient(rgba(98, 160, 60, .9), rgba(43, 148, 48, 1));
    background: radial-gradient(rgba(98, 160, 60, .9), rgba(43, 148, 48, 1));
}

#graph-rainbow + label {
    background: transparent url(../img/rainbow.gif) no-repeat;
}

#graph-green:checked + label, 
#graph-blue:checked + label,
#graph-rainbow:checked + label {
	box-shadow: 0 0 0 2px rgba(255,255,255,0.7), 1px 1px 3px rgba(0,0,0,0.3);
}


input#graph-blue:checked ~ .graph-container .bar-inner,
input#graph-blue:checked ~ .graph-container .bar-inner:before { background-color: rgba(5, 62, 123, .6); }
input#graph-blue:checked ~ .graph-container .bar-inner:after { background-color: rgba(47, 83, 122, .7); }

input#graph-green:checked ~ .graph-container .bar-inner,
input#graph-green:checked ~ .graph-container .bar-inner:before { background-color: rgba(5, 123, 5, .3); }
input#graph-green:checked ~ .graph-container .bar-inner:after { background-color: rgba(63, 122, 47, .4); }

input#graph-rainbow:checked ~ .graph-container li:nth-child(1) .bar-inner,
input#graph-rainbow:checked ~ .graph-container li:nth-child(1) .bar-inner:before { background-color: rgba(196, 109, 59, .6); }
input#graph-rainbow:checked ~ .graph-container li:nth-child(1) .bar-inner:after { background-color: rgba(216, 143, 102, .7); }
input#graph-rainbow:checked ~ .graph-container li:nth-child(2) .bar-inner,
input#graph-rainbow:checked ~ .graph-container li:nth-child(2) .bar-inner:before { background-color: rgba(5, 123, 5, .3); }
input#graph-rainbow:checked ~ .graph-container li:nth-child(2) .bar-inner:after { background-color: rgba(63, 122, 47, .4); }
input#graph-rainbow:checked ~ .graph-container li:nth-child(3) .bar-inner,
input#graph-rainbow:checked ~ .graph-container li:nth-child(3) .bar-inner:before { background-color: rgba(255, 0, 0, .3); }
input#graph-rainbow:checked ~ .graph-container li:nth-child(3) .bar-inner:after { background-color: rgba(255, 71, 71, .3); }
input#graph-rainbow:checked ~ .graph-container li:nth-child(4) .bar-inner,
input#graph-rainbow:checked ~ .graph-container li:nth-child(4) .bar-inner:before { background-color: rgba(255, 248, 136, .3); }
input#graph-rainbow:checked ~ .graph-container li:nth-child(4) .bar-inner:after { background-color: rgba(252, 248, 182, .5); }
input#graph-rainbow:checked ~ .graph-container li:nth-child(5) .bar-inner,
input#graph-rainbow:checked ~ .graph-container li:nth-child(5) .bar-inner:before { background-color: rgba(5, 62, 123, .6); }
input#graph-rainbow:checked ~ .graph-container li:nth-child(5) .bar-inner:after { background-color: rgba(47, 83, 122, .7); }


/****************
 * 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;
}
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(230, 230, 230, .45);
}
/* Bar's Bottom side */
.bar-background:before {
    background-color: rgba(113, 183, 39, .45);
}
/* Bar's Left Back side */
.bar-background:after {
    background-color: rgba(230, 230, 230, .90);
}
/* Bar's Front side */
.bar-foreground {
    background-color: rgba(255, 255, 255, .50);
}

.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                                                           **
 **                                                                          **
 ** Just as an example to show you the way how to resize the graph 			 **
 **                                                                          **
 ******************************************************************************/
 
@media screen and (max-width: 1125px) {
	.graph-container{ font-size: 0.7em; }
}
@media screen and (max-width: 1050px) {
	.graph-container{ font-size: 0.7em; }
}
@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; }
}
@media screen and (max-width: 765px) {
	.graph-container { font-size: 0.7em; }
}
@media screen and (max-width: 720px) {
	.graph-container { font-size: 0.7em; }
}
@media screen and (max-width: 630px) {
	.graph-container { font-size: 0.6em; }
}
@media screen and (max-width: 360px) {
	.graph-container { font-size: 0.5em; }
	.button-label{ margin: 0 5px 0 0;}
}