html, body {margin: 0; padding: 0;}

@font-face {
  font-family:"Fontawesome";
  src:url(../fontawesome-webfont.ttf);
  src:url(../fontawesome-webfont.eot?#iefix) format("embedded-opentype"),
  url(../fontawesome-webfont.woff) format("woff"),
  url(../fontawesome-webfont.svg) format("svg");
  font-style:normal;
}
@font-face {
  font-family:"Changa One";
  src:url(/wp-content/themes/simone/fonts/changa/changaonehu-194ee769561dff2317b5bf76a7c36f2a.eot);
  src:url(/wp-content/themes/simone/fonts/changa/changaonehu-194ee769561dff2317b5bf76a7c36f2a.eot?#iefix) format("embedded-opentype"),
  url(/wp-content/themes/simone/fonts/changa/changaonehu-8a2e2636bbefe7eab344fdf699312475.woff) format("woff"),
  url(/wp-content/themes/simone/fonts/changa/changaonehu-5982f81406a2c5101a1aca8f92523412.svg#changa_one_huregular) format("svg");
  font-style:normal;font-weight:bold;
}

.title-line{position: absolute;font-family: 'Changa One',sans-serif; padding:10px 0 10px 20px; font-size:2.1em; width: 40%;color:#fff;}
.use-warning{position: absolute;font-size:1.1em; /* width: 80%; */ color: #fff; bottom:0px; right: 10px;transform: translate(0,-25%);text-align: center;text-transform: uppercase;font-style: italic;}

.info {position: absolute;right: 0px;width: 50%; top: 0px; display:none; padding: 10px 20px; text-align: right;}
#s9-note {position:absolute;}
#s1-note {position:absolute;}

.info-header {font-size: .8em; color:#fac80f;font-style:italic;}
.info-content {font-size: 1em; color:#fff; font-weight:700;}
.info-content:last-child {font-size: 1.3em;}
.th-sep {width:8px; display:inline-block;}

.forrai-container{
    width:100%;
    height:100%;
    background: #BC534B;
    position:relative;
    font-family: 'Open Sans', sans-serif;
    max-width:840px;
    max-height:764px;
}

.cables {position:absolute; top:0; left: 0; width: 100%; height: 100%;}
circle, line {cursor: pointer;} 
/* circle:hover, line:hover {stroke: #fff; stroke-width: 3px;}  */

.cable:hover circle {stroke: #ffffff; stroke-width: 3px;} 
.cable:hover line {stroke: #ffffff; stroke-width: 3px;}
.cable:hover ellipse {stroke: #ffffff; stroke-width: 3px;}

#c1,#c2,#c3,#c4,#c5,#c6,#c7,#c8,#c9 {display: none;}

svg {margin-top: 8.13em;}

.head {position: absolute; left: 50%; top:55%; width:12em; height: 8.5em; transform:translate(-50%,-50%); margin-top: 40px; font-family: 'Changa One',sans-serif; text-align: center; }
.head img{max-width: 100%;}
.head p{font-size: 1.4em; line-height: 1em;color:#fff; margin: 0;}

#s9 {
    width:600px;
    height:600px;
    cursor: pointer;
}

.slice {
	stroke: #BC534B;
    stroke-width: 0px;
}
.slice:hover {
    fill: #444444;
    stroke: #444444;
    stroke-width: 4px;
    opacity:1;
}

.active-slice {
    background: #BC534B;
    stroke: #BC534B;
    stroke-width: 5px;
    opacity:1;
}

.active {
    display:block;
}

.replacement-image {display: none;}

@media (max-width: 768px) {
	html, body {font-size: 13px;}
	}
@media (max-width: 650px) {
	html, body {font-size: 12px;}
	}
@media (max-width: 500px) {
	.forrai-container {display: none;}
	.replacement-image {display: block; width: 100%;}
	.replacement-image img {max-width: 100%;}
	}