#pG { width: 100%; overflow: hidden; font-family: 'Roboto';font-size: 15px;  }

	#pG h1 { margin: 0.4em 0 1.2em 0; padding: 0 0.4em; text-align: center; }
		#pG.fullGraph h1 { margin: 0.8em 0 0.6em 0; text-align: center; }

		@media (min-width: 1400px) {
			#pG.fullGraph #headGraph { padding: 0 2em; }
		}
	#pG h4 { font-family: roboto, sans-serif; font-size: 1.4em; font-weight: 900; }

#pG .btn { margin-left: 0; background: #999999; color: white; border-radius: 0; margin-bottom: 0.4em;
	        padding: 0.2em 0.4em 0.2em 0.4em; margin-right: 0.2em; font-weight: 900; }
	#pG .btn:hover { opacity: 0.8; }
	#pG .btn.act { background: #d35d33; color: white; }

	#pG #type, #pG #prods, #pG #years { text-align: center; box-sizing: border-box; padding: 0 0.4em 1.4em 0.4em; }
	#pG.fullGraph #type, #pG.fullGraph #prods, #pG.fullGraph #years { width: 33.33333333%; float: left;
			text-align: left; }
		#pG.fullGraph #type { width: 30%; }
		#pG.fullGraph #prods { width: 50%; }
		#pG.fullGraph #years { width: 20%; }
		#pG #type p, #pG #prods p, #pG #years p { margin-bottom: 0.6em; }
		
		#pG #prods img { height: 25px; }
			#pG.fullGraph #prods img { height: 20px; }
		#pG #prods .btn { width: 50px; padding: 0.6em 0; }
			#pG.fullGraph #prods .btn { width: auto; padding: 0.2em 0.4em 0.2em 0.4em; }
		#pG #prods span { display: none; }
			#pG.fullGraph #prods span { display: initial; padding-left: 0.4em; }

	#pG #typeImp.act { background: #126567!important; }
	#pG #typeExp.act { background: #d35d33!important; }

	#pG #yearsSel a, #pG #yearsSel div { display: inline-block; padding: 0.4em 0.6em; }
		#yearsSel p { display: inline-block; }
		#pG #yearsSel a i { font-weight: 900; font-size: 1.4em; }
		#pG #activeYear { border: 1px solid #ccc; }
		
		#pG #years .disabled { cursor: inherit; color: #ccc; }

#pG #graph { background: #efefef; position: relative; }

	#pG #graph.hover .link, #pG #graph.hover .circImp, #pG #graph.hover .circExp { opacity: 0.2; }

	#pG .link { fill: none; stroke: rgba(0,0,0,0.2); stroke: url(#linearGradient); opacity: 0.6;
				-webkit-transition: all .5s; -ms-transition: all .5s; transition: all .5s; }
		#pG .link-left { stroke: url(#linearGradientInverse);}
		/* .link:hover, .link-act { stroke: rgba(60, 4, 4, 0.6); }*/

	#pG .axes text { font-weight: 900; font-family: roboto; fill: #aaa; }
		#pG .axes path { stroke-width: 0; }

	#pG .circImp { fill: #126567; cursor: pointer; }
		#pG.fullGraph .circImp {  -webkit-transition: all .5s; -ms-transition: all .5s; transition: all .5s; }

	#pG .circImpAct, .circExpAct { opacity: 1!important; }
		#pG .linkAct { opacity: .9!important; }


	#pG .circExp { fill: #d35d33; cursor: pointer; }
		#pG.fullGraph .circExp {  -webkit-transition: all .5s; -ms-transition: all .5s; transition: all .5s; }

	#pG .text {  fill: white; font-weight: 900; font-family: arial, sans-serif; font-size: 10px; pointer-events: none; text-anchor: middle; }
		#pG.fullGraph .text { -webkit-transition: stroke .5s; -ms-transition: stroke .5s; transition: stroke .5s; font-size: 12px; }

	#pG .circLines { stroke-width: 1px; fill: white; cursor: pointer; }
	#pG .circLinesWhite { stroke-width: 1px; stroke: white; fill: white; cursor: pointer; }
	#pG .linesExp { stroke: #126567; }
	#pG .linesImp { stroke: #d35d33; }
	#pG .linesExpFill { fill: #126567; }
	#pG .linesImpFill { fill: #d35d33; }

	#pG.fullGraph #pop { position: absolute; top: 0; height: 100%; overflow: auto; right: 0; width: 300px; max-width: 800px; background: #efefef; z-index: 1;
				-webkit-transition: all 1s; -ms-transition: all 1s; transition: all 1s; overflow-x: hidden;
			    border-left: 2px solid white; }
		#pG.fullGraph.actPop #pop { width: 100%; 
			-webkit-transition: all 1s; -ms-transition: all 1s; transition: all 1s; }
		#pG.fullGraph.actPop #viz { opacity: 0.6; pointer-events: none; 
			-webkit-transform: translateX(-200px); -ms-transform: translateX(-200px); transform: translateX(-200px); }

	#pG #viz { -webkit-transition: all 1s; -ms-transition: all 1s; transition: all 1s; }
		#pG #viz.blur { filter:url(#blur); } 
		.safari #pG #viz { filter: inherit!important; } 

	#pG #closePop { position: absolute; left: -100%;     position: absolute; top: 0; font-weight: 900;
			-webkit-transition: all 1s; -ms-transition: all 1s; transition: all 1s;
			cursor: pointer; padding: 1em; height: 100%; width: 100%; }
		#pG.fullGraph.actPop #closePop { left: 0; }
	
	#pG #popWrap { padding: 1em; display: block; opacity: 0; -webkit-transition: all .2s; -ms-transition: all .3s; transition: all .3s; }
		#pG.actPop #popWrap { opacity: 1; -webkit-transition-delay: .2s; -ms-transition-delay: .3s; transition-delay: .3s; }

	#pG #search { padding: 1.4em; padding-bottom: 0; position: relative; max-width: 400px; line-height: 1.3em; }
		#pG #search i { position: absolute; left: 1.6em; top: 1.6em; font-size: 1.2em; }
		#pG #countryImput { padding-left: 30px; margin-bottom: 0.8em; }
			#pG.fullGraph #countryImput { max-width: 200px; float: left; margin-right: 1em; }
		#pG #searchSelected { display: none; }
			#pG #searchSelected a { display: inline-block; background: #666666; padding: 0.5em 2.5em 0.6em 0.8em; position: relative; color: white; font-weight: 900; cursor: pointer; }
			#pG #searchSelected a:hover { opacity: 0.8; }
				#pG #searchSelected a:before { content: '\f00d'; display: block; font-family: FontAwesome; position: absolute; right: 0.8em; }
	
	#pG #graphBars1, #pG #graphBars2, #pG #graphLines { width: 33.33333%; float: left; box-sizing: border-box; padding: 0.4em; padding-top: 0;
			    margin-bottom: 1em; display: none; }
		#pG.fullGraph #graphBars1, #pG.fullGraph #graphBars2, #pG.fullGraph #graphLines { display: block; }
	#pG #graphBars1 li, #pG #graphBars2 li { list-style: none; line-height: 1.8em; }
	#pG #graphBars1 .key, #pG #graphBars2 .key { display: inline-block; width: 33px; text-align: center; font-weight: 900; text-transform: uppercase; line-height: 1.7em; }
	#pG #popWrap .inn { padding: 1em; background: white; }
#pG #pop h4 { font-size: 1em; font-family: roboto, sans-serif; font-weight: 900; }

#pG .bar { background: #ccc; position: relative; display: inline-block; line-height: 1.5em; margin-left: 1em; height: 1.7em; vertical-align: middle; width: 0; }
		 #pG .bar:hover { opacity: 0.8; }
	#pG .bar span { position: absolute; right: 0; padding: 0.6em; line-height: 1em; }

	#pG .bar-left span { right: inherit; left: 100%; }

	#pG .activeBar .bar span { color: white; pointer-events: none; }
	#pG .activeBar .bar-left span { color: #484848; }

	#pG .graphBarsExp .activeBar .bar { background: #d35d33; }
	#pG .graphBarsImp .activeBar .bar { background: #126567; }

#pG #frases li { list-style: none; padding: 0.8em 50px 0.8em 0.8em; background: white; margin: 0 0.4em 0.8em 0.4em; position: relative; cursor: pointer; }
#pG #frases li:hover { text-decoration: underline; }
#pG #frases li i { position: absolute; right: 0; bottom: 0; padding: 0.4em; font-size: 1.6em; color: #00aced; text-decoration: none!important; }

.autocomplete-suggestions { padding: 1em; line-height: 1.2em; background: #ccc; cursor: pointer; color: #666; font-weight: 900; font-size: 14px; }
.autocomplete-suggestion { text-decoration: underline; line-height: 1.6em; }
	.autocomplete-suggestion:hover { color: #333; }

#pG .btn-cacao.act { background: #529fbc; }
#pG .btn-banana.act { background: #e0e233; }
#pG .btn-azucar.act { background: #96cb51; }
#pG .btn-aceite.act { background: #d3a016; }
#pG .btn-cafe.act { background: #b51629; }

#pG .tooltip.top .tooltip-arrow { border-top-color: background-color: rgba(0,0,0,0.8); }
#pG .tooltip-inner { background-color: rgba(0,0,0,0.8); }