/*********************
 * 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 */
    margin: 40px 0 0 40px;
    font-size: 0.8em;
    /* Graph Holder's Background */
    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;
    margin-left: 100px;
}

/* 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 */
}
/* 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:0px;
}
/* X-axis labels */
.graph-container > li > span {
    position: absolute;
    left: 0;
    bottom: -50px;
    width: 90%; /* play with this one if you change perspective depth */
    text-align: center;
    color: #b10069;
}

/*******************************
 * 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%;
    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: #ffffff;
    border-width: 0 0 .15em;
    opacity: 0.5;
}

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

/* Y-axis text Label */
.graph-marker-container span {
    position: absolute;
    top: -20px;
    left: -25px;
    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: 0em; /* should be at least equal to the top offset of background casing */
    /* because back casing is positioned higher than actual bar */
    width: 100px;
}

/** 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: 100px;
    height: 100%;
    top: 0;
    left: 0;
}

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

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

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

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

/******************************************************************************
 **                                                                          **
 ** 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: 80px;
    height: 118px;
    padding: 10px 15px;
    color: #777;
    font-size: 15px;
    color: #f49fc5;
    vertical-align: top;
    text-align: center;
    margin-right: 0px;
    text-decoration: none;
    cursor: pointer;
    background: #ca3d75;
}

input[name^="fill-"] + label img{
    opacity: 0.3;
    -webkit-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
    -moz-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
    -o-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
    transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
}

input[name^="fill-"] + label:hover img{
    opacity: 1;
    padding-top: 10px;
}



input[name^="fill-"]:checked + label img{
    opacity: 1;
}

input[name^="fill-"]:checked + label:hover img{
    padding-top: 0px;
}


input[name^="fill-"]:checked + label {
    color: #fff;
    text-decoration: none;
}

/* Change bars fill when a Product is selected */

/* Masturbating */
input#f-product1:checked ~ .graph-container > li:nth-child(1) .bar-inner { height: 74%; bottom: 0; }
input#f-product1:checked ~ .graph-container > li:nth-child(2) .bar-inner { height: 83%; 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: 76%; bottom: 0; }
input#f-product1:checked ~ .graph-container > li:nth-child(5) .bar-inner { height: 77%; bottom: 0; }
input#f-product1:checked ~ .graph-container > li:nth-child(6) .bar-inner { height: 70%; bottom: 0; }
input#f-product1:checked ~ .graph-container > li:nth-child(7) .bar-inner { height: 83%; bottom: 0; }
input#f-product1:checked ~ .graph-container > li:nth-child(8) .bar-inner { height: 84%; bottom: 0; }

/* masturbating */
input#f-product1:checked ~ .graph-container > li:nth-child(1) .bar-inner::before,
input#f-product1:checked ~ .graph-container > li:nth-child(2) .bar-inner::before,
input#f-product1:checked ~ .graph-container > li:nth-child(3) .bar-inner::before,
input#f-product1:checked ~ .graph-container > li:nth-child(4) .bar-inner::before,
input#f-product1:checked ~ .graph-container > li:nth-child(5) .bar-inner::before,
input#f-product1:checked ~ .graph-container > li:nth-child(6) .bar-inner::before,
input#f-product1:checked ~ .graph-container > li:nth-child(7) .bar-inner::before,
input#f-product1:checked ~ .graph-container > li:nth-child(8) .bar-inner::before,
/* handjob */
input#f-product2:checked ~ .graph-container > li:nth-child(1) .bar-inner::before,
input#f-product2:checked ~ .graph-container > li:nth-child(2) .bar-inner::before,
input#f-product2:checked ~ .graph-container > li:nth-child(3) .bar-inner::before,
input#f-product2:checked ~ .graph-container > li:nth-child(4) .bar-inner::before,
input#f-product2:checked ~ .graph-container > li:nth-child(5) .bar-inner::before,
input#f-product2:checked ~ .graph-container > li:nth-child(6) .bar-inner::before,
input#f-product2:checked ~ .graph-container > li:nth-child(7) .bar-inner::before,
input#f-product2:checked ~ .graph-container > li:nth-child(8) .bar-inner::before,
/* oral */
input#f-product3:checked ~ .graph-container > li:nth-child(1) .bar-inner::before,
input#f-product3:checked ~ .graph-container > li:nth-child(2) .bar-inner::before,
input#f-product3:checked ~ .graph-container > li:nth-child(3) .bar-inner::before,
input#f-product3:checked ~ .graph-container > li:nth-child(4) .bar-inner::before,
input#f-product3:checked ~ .graph-container > li:nth-child(5) .bar-inner::before,
input#f-product3:checked ~ .graph-container > li:nth-child(6) .bar-inner::before,
input#f-product3:checked ~ .graph-container > li:nth-child(7) .bar-inner::before,
input#f-product3:checked ~ .graph-container > li:nth-child(8) .bar-inner::before,
/* vaginal */
input#f-product4:checked ~ .graph-container > li:nth-child(1) .bar-inner::before,
input#f-product4:checked ~ .graph-container > li:nth-child(2) .bar-inner::before,
input#f-product4:checked ~ .graph-container > li:nth-child(3) .bar-inner::before,
input#f-product4:checked ~ .graph-container > li:nth-child(4) .bar-inner::before,
input#f-product4:checked ~ .graph-container > li:nth-child(5) .bar-inner::before,
input#f-product4:checked ~ .graph-container > li:nth-child(6) .bar-inner::before,
input#f-product4:checked ~ .graph-container > li:nth-child(7) .bar-inner::before,
input#f-product4:checked ~ .graph-container > li:nth-child(8) .bar-inner::before,
/* Anal */
input#f-product5:checked ~ .graph-container > li:nth-child(1) .bar-inner::before,
input#f-product5:checked ~ .graph-container > li:nth-child(2) .bar-inner::before,
input#f-product5:checked ~ .graph-container > li:nth-child(3) .bar-inner::before,
input#f-product5:checked ~ .graph-container > li:nth-child(4) .bar-inner::before,
input#f-product5:checked ~ .graph-container > li:nth-child(5) .bar-inner::before,
input#f-product5:checked ~ .graph-container > li:nth-child(6) .bar-inner::before,
input#f-product5:checked ~ .graph-container > li:nth-child(7) .bar-inner::before,
input#f-product5:checked ~ .graph-container > li:nth-child(8) .bar-inner::before  {
    font-size: 25px;
    color: #b10069;
    text-align: center;
    display: block;
    padding-top: 10px;
}

input#f-product1:checked ~ .graph-container > li:nth-child(1) .bar-inner::before { content: "74%"; }
input#f-product1:checked ~ .graph-container > li:nth-child(2) .bar-inner::before { content: "83%"; }
input#f-product1:checked ~ .graph-container > li:nth-child(3) .bar-inner::before { content: "75%"; }
input#f-product1:checked ~ .graph-container > li:nth-child(4) .bar-inner::before { content: "76%"; }
input#f-product1:checked ~ .graph-container > li:nth-child(5) .bar-inner::before { content: "77%"; }
input#f-product1:checked ~ .graph-container > li:nth-child(6) .bar-inner::before { content: "70%"; }
input#f-product1:checked ~ .graph-container > li:nth-child(7) .bar-inner::before { content: "83%"; }
input#f-product1:checked ~ .graph-container > li:nth-child(8) .bar-inner::before { content: "84%"; }

/* Handjob */
input#f-product2:checked ~ .graph-container > li:nth-child(1) .bar-inner { height: 78%; bottom: 0; }
input#f-product2:checked ~ .graph-container > li:nth-child(2) .bar-inner { height: 70%; bottom: 0; }
input#f-product2:checked ~ .graph-container > li:nth-child(3) .bar-inner { height: 73%; bottom: 0; }
input#f-product2:checked ~ .graph-container > li:nth-child(4) .bar-inner { height: 69%; bottom: 0; }
input#f-product2:checked ~ .graph-container > li:nth-child(5) .bar-inner { height: 73%; bottom: 0; }
input#f-product2:checked ~ .graph-container > li:nth-child(6) .bar-inner { height: 68%; bottom: 0; }
input#f-product2:checked ~ .graph-container > li:nth-child(7) .bar-inner { height: 76%; bottom: 0; }
input#f-product2:checked ~ .graph-container > li:nth-child(8) .bar-inner { height: 72%; bottom: 0; }

input#f-product2:checked ~ .graph-container > li:nth-child(1) .bar-inner::before { content: "78%"; }
input#f-product2:checked ~ .graph-container > li:nth-child(2) .bar-inner::before { content: "70%"; }
input#f-product2:checked ~ .graph-container > li:nth-child(3) .bar-inner::before { content: "73%"; }
input#f-product2:checked ~ .graph-container > li:nth-child(4) .bar-inner::before { content: "69%"; }
input#f-product2:checked ~ .graph-container > li:nth-child(5) .bar-inner::before { content: "73%"; }
input#f-product2:checked ~ .graph-container > li:nth-child(6) .bar-inner::before { content: "68%"; }
input#f-product2:checked ~ .graph-container > li:nth-child(7) .bar-inner::before { content: "76%"; }
input#f-product2:checked ~ .graph-container > li:nth-child(8) .bar-inner::before { content: "72%"; }


/* Oral */
input#f-product3:checked ~ .graph-container > li:nth-child(1) .bar-inner { height: 75%; bottom: 0; }
input#f-product3:checked ~ .graph-container > li:nth-child(2) .bar-inner { height: 76%; bottom: 0; }
input#f-product3:checked ~ .graph-container > li:nth-child(3) .bar-inner { height: 67%; bottom: 0; }
input#f-product3:checked ~ .graph-container > li:nth-child(4) .bar-inner { height: 72%; bottom: 0; }
input#f-product3:checked ~ .graph-container > li:nth-child(5) .bar-inner { height: 68%; bottom: 0; }
input#f-product3:checked ~ .graph-container > li:nth-child(6) .bar-inner { height: 65%; bottom: 0; }
input#f-product3:checked ~ .graph-container > li:nth-child(7) .bar-inner { height: 74%; bottom: 0; }
input#f-product3:checked ~ .graph-container > li:nth-child(8) .bar-inner { height: 71%; bottom: 0; }

input#f-product3:checked ~ .graph-container > li:nth-child(1) .bar-inner::before { content: "75%"; }
input#f-product3:checked ~ .graph-container > li:nth-child(2) .bar-inner::before { content: "76%"; }
input#f-product3:checked ~ .graph-container > li:nth-child(3) .bar-inner::before { content: "67%"; }
input#f-product3:checked ~ .graph-container > li:nth-child(4) .bar-inner::before { content: "72%"; }
input#f-product3:checked ~ .graph-container > li:nth-child(5) .bar-inner::before { content: "68%"; }
input#f-product3:checked ~ .graph-container > li:nth-child(6) .bar-inner::before { content: "65%"; }
input#f-product3:checked ~ .graph-container > li:nth-child(7) .bar-inner::before { content: "74%"; }
input#f-product3:checked ~ .graph-container > li:nth-child(8) .bar-inner::before { content: "71%"; }

/* Vaginal */
input#f-product4:checked ~ .graph-container > li:nth-child(1) .bar-inner { height: 70%; bottom: 0; }
input#f-product4:checked ~ .graph-container > li:nth-child(2) .bar-inner { height: 71%; bottom: 0; }
input#f-product4:checked ~ .graph-container > li:nth-child(3) .bar-inner { height: 74%; bottom: 0; }
input#f-product4:checked ~ .graph-container > li:nth-child(4) .bar-inner { height: 63%; bottom: 0; }
input#f-product4:checked ~ .graph-container > li:nth-child(5) .bar-inner { height: 64%; bottom: 0; }
input#f-product4:checked ~ .graph-container > li:nth-child(6) .bar-inner { height: 65%; bottom: 0; }
input#f-product4:checked ~ .graph-container > li:nth-child(7) .bar-inner { height: 56%; bottom: 0; }
input#f-product4:checked ~ .graph-container > li:nth-child(8) .bar-inner { height: 61%; bottom: 0; }

input#f-product4:checked ~ .graph-container > li:nth-child(1) .bar-inner::before { content: "70%"; }
input#f-product4:checked ~ .graph-container > li:nth-child(2) .bar-inner::before { content: "71%"; }
input#f-product4:checked ~ .graph-container > li:nth-child(3) .bar-inner::before { content: "74%"; }
input#f-product4:checked ~ .graph-container > li:nth-child(4) .bar-inner::before { content: "63%"; }
input#f-product4:checked ~ .graph-container > li:nth-child(5) .bar-inner::before { content: "64%"; }
input#f-product4:checked ~ .graph-container > li:nth-child(6) .bar-inner::before { content: "65%"; }
input#f-product4:checked ~ .graph-container > li:nth-child(7) .bar-inner::before { content: "56%"; }
input#f-product4:checked ~ .graph-container > li:nth-child(8) .bar-inner::before { content: "61%"; }

/* Anal */
input#f-product5:checked ~ .graph-container > li:nth-child(1) .bar-inner { height: 34%; bottom: 0; }
input#f-product5:checked ~ .graph-container > li:nth-child(2) .bar-inner { height: 42%; bottom: 0; }
input#f-product5:checked ~ .graph-container > li:nth-child(3) .bar-inner { height: 38%; bottom: 0; }
input#f-product5:checked ~ .graph-container > li:nth-child(4) .bar-inner { height: 38%; bottom: 0; }
input#f-product5:checked ~ .graph-container > li:nth-child(5) .bar-inner { height: 34%; bottom: 0; }
input#f-product5:checked ~ .graph-container > li:nth-child(6) .bar-inner { height: 25%; bottom: 0; }
input#f-product5:checked ~ .graph-container > li:nth-child(7) .bar-inner { height: 31%; bottom: 0; }
input#f-product5:checked ~ .graph-container > li:nth-child(8) .bar-inner { height: 27%; bottom: 0; }

input#f-product5:checked ~ .graph-container > li:nth-child(1) .bar-inner::before { content: "34%"; }
input#f-product5:checked ~ .graph-container > li:nth-child(2) .bar-inner::before { content: "42%"; }
input#f-product5:checked ~ .graph-container > li:nth-child(3) .bar-inner::before { content: "38%"; }
input#f-product5:checked ~ .graph-container > li:nth-child(4) .bar-inner::before { content: "38%"; }
input#f-product5:checked ~ .graph-container > li:nth-child(5) .bar-inner::before { content: "34%"; }
input#f-product5:checked ~ .graph-container > li:nth-child(6) .bar-inner::before { content: "25%"; }
input#f-product5:checked ~ .graph-container > li:nth-child(7) .bar-inner::before { content: "31%"; }
input#f-product5:checked ~ .graph-container > li:nth-child(8) .bar-inner::before { content: "27%"; }

/****************
 * 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;
}

input#graph-rainbow:checked ~ .graph-container li:nth-child(1) .bar-inner{ background-color: #e480a9; }
input#graph-rainbow:checked ~ .graph-container li:nth-child(2) .bar-inner{ background-color: #f2a1c4; }
input#graph-rainbow:checked ~ .graph-container li:nth-child(3) .bar-inner{ background-color: #f2a8c8; }
input#graph-rainbow:checked ~ .graph-container li:nth-child(4) .bar-inner{ background-color: #f28db7; }
input#graph-rainbow:checked ~ .graph-container li:nth-child(5) .bar-inner{ background-color: #eb8bb3; }
input#graph-rainbow:checked ~ .graph-container li:nth-child(6) .bar-inner{ background-color: #eb90b6; }
input#graph-rainbow:checked ~ .graph-container li:nth-child(7) .bar-inner{ background-color: #f2a1c4; }
input#graph-rainbow:checked ~ .graph-container li:nth-child(8) .bar-inner{ background-color: #ef8fb7; }


input#graph-rainbow:checked ~ .graph-container li:nth-child(1) .bar-inner,
input#graph-rainbow:checked ~ .graph-container li:nth-child(2) .bar-inner,
input#graph-rainbow:checked ~ .graph-container li:nth-child(3) .bar-inner,
input#graph-rainbow:checked ~ .graph-container li:nth-child(4) .bar-inner,
input#graph-rainbow:checked ~ .graph-container li:nth-child(5) .bar-inner,
input#graph-rainbow:checked ~ .graph-container li:nth-child(6) .bar-inner,
input#graph-rainbow:checked ~ .graph-container li:nth-child(7) .bar-inner,
input#graph-rainbow:checked ~ .graph-container li:nth-child(8) .bar-inner{
    border-top-right-radius:50px;
    border-top-left-radius:50px;
}




/****************
 * 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 after last bar */
.graph-container > li:nth-last-child(2) .bar-container {
    margin-right: 0;
}

/****************
 *    Colors    *
 ****************/

.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.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; }
}
@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; }
}
@media screen and (max-width: 360px) {
    .graph-container { font-size: 0.22em; }
    .button-label{ margin: 0 5px 0 0;}
}