@charset "utf-8";
/* CSS Document */

/* reset CSS */
html, body, div, span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, em, font, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt,
var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus { outline: 0;}
a, a:link, a:visited, a:hover, a:active{text-decoration:none;}
table {	border-collapse: separate;border-spacing: 0;}
th, td {text-align: left; font-weight: normal;}
img, iframe {border: none; text-decoration:none;}
ol, ul , li{list-style: none;}
input, textarea, select, button {font-size: 100%;font-family: inherit;}
select {margin: inherit;}
hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px;}
h1, h2, h3, h4, h5, h6{ display: inline;}

/* fin hacks varios */


/* Global Styles
-------------------------------------------------------------------*/

html { margin: 0; padding: 0;}
body { margin: 0; 
   padding: 0;
   font-size: 16px;
   font-family: 'Open Sans', sans-serif;
   color: #444;
   line-height: 1em;
}

@font-face {
    font-family: 'folks_regular';
    src: url('folks-normal-webfont.eot');
    src: url('folks-normal-webfont.eot?#iefix') format('embedded-opentype'),
         url('folks-normal-webfont.woff2') format('woff2'),
         url('folks-normal-webfont.woff') format('woff'),
         url('folks-normal-webfont.ttf') format('truetype'),
         url('folks-normal-webfont.svg#folks_regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'folks_bold';
    src: url('folks-bold-webfont.eot');
    src: url('folks-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('folks-bold-webfont.woff2') format('woff2'),
         url('folks-bold-webfont.woff') format('woff'),
         url('folks-bold-webfont.ttf') format('truetype'),
         url('folks-bold-webfont.svg#folks_bold') format('svg');
    font-weight: normal;
    font-style: normal;
}


/*------------------------------------------------------------------*/

h1 { font-family: 'folks_regular', sans-serif; font-size: 72px; color: #00c97d; line-height: 1em; display: block;}
h2 { font-family: 'folks_regular', sans-serif; font-size: 22px; color: #888; line-height: 1em; letter-spacing: 0.5px; display: block;}
h3 { font-family: 'folks_regular', sans-serif; font-size: 26px; font-weight: bold; color: #222; line-height: 1em; letter-spacing: 0.7px; display: block;}
h4 { font-family: 'folks_regular', sans-serif; font-size: 19px; font-weight: bold; color: #222; line-height: 1em; letter-spacing: 0.7px; display: block;}
h5 { }
h6 { }

a, a:link { cursor: pointer; color: #00c97d; text-decoration: none;}
a:hover { color: #f97551; text-decoration: none;}

div.spacer{ clear: both; display: block;} 


/* Title
-------------------------------------------------------------------*/

.title{
   margin: 50px 0 50px 0;
}
.title h1{
   margin: 0 0 5px -4px;
   max-width: 800px;
   line-height: 0.96em;
}


/* Text
-------------------------------------------------------------------*/

.text { margin: 0 0 25px 0; text-align: justify; min-height: 250px; color: #222; line-height: 1.4em;}
.text h3 { margin: 10px 0 15px 0; line-height: 1.2em;}
.text h4 { margin: 0 0 10px 0; line-height: 1.2em;}
.text b { color: #555;}
.text a {}
.text a:hover {}
.text sup { margin-left: 1px; font-size: 7px; line-height: 1em;}

.text .list { margin: 0; padding: 0; display: block;}
.text .list.list-column { width: 50%; float: left;}
.text .list .list-item  { text-align: left; margin: 0 0 3px 0; padding: 0 0 0 21px; display: block;}
.text .list .list-item .list-item-icon { margin: 8px 0 0 -21px; width: 8px; height: 8px; background: url('../img/list-point-1.png') 0 0 no-repeat; float: left; display: block;}

.text .quote { padding: 0 0 2px 15px; border-left: 2px solid #ccc; display: block;}
.text .quote .quote-content { font-size: 16px; font-style: italic; line-height: 1.4em; display: block;}
.text .quote .quote-autor { margin: 10px 0 0; font-family: arial, sans-serif; font-size: 12px; font-style: normal; color: #999; line-height: 1em; display: block;}

.text .right { float: right;}
.text .left { float: left;}
.text .center { text-align: center; display: block;}


/* Illustration */
.text .illustration { margin: 5px auto 5px; width: 500px;}
.text .illustration-content { left: -20px; width: 540px; position: relative;}


/* Drop */
.text .drop-action { width: 100%;}
.text .drop-action h3 { text-align: left; width: 80%; transition: color 0.3s; -moz-transition: color 0.3s; -webkit-transition: color 0.3s;}
.text .drop-action h3.drop-title-over { color: #00c97d;}
.text .drop-action-right { margin-top: -48px; float: right;}

.text .drop-action a.btn-drop-action { 
   padding: 6px 18px 8px; 
   font-family: 'open-sans', arial, sans-serif; 
   font-size: 14px; 
   font-weight: bold;
   color: #00c97d; 
   text-decoration: none; 
   background: #fff; 
   border: 1px solid #00c97d;
   border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
   transition: background 0.3s; -moz-transition: background 0.3s; -webkit-transition: background 0.3s;
   display: block;
   float: left;
}
.text .drop-action a.btn-drop-action span.btn-ico-bottom { margin: 0 -4px -1px 12px; width: 10px; height: 10px; background: url('../img/ico-bottom-green.png') 0 0 no-repeat; display: inline-block;}
.text .drop-action a:hover.btn-drop-action span.btn-ico-bottom { background: url('../img/ico-bottom-white.png') 0 0 no-repeat;}
.text .drop-action a.btn-drop-action span.btn-ico-top { margin: 0 -4px -1px 12px; width: 10px; height: 10px; background: url('../img/ico-top-white.png') 0 0 no-repeat; display: inline-block;}

.text .drop-action a.btn-drop-open { display: none;}
.text .drop-action a.btn-drop-close { display: none;}
.text .drop-action a.btn-drop-close { background: #00c97d; color: #fff; }
.text .drop-action a:hover.btn-drop-action { background: #00c97d; color: #fff;}

.text .drop.open { margin-top: 25px; padding-top: 9px; background: url('../img/line-dotted.png') 0 0 repeat-x;}
.text .drop-first.open { margin-top: 0; padding-top: 0; background: none;}

.text .drop .drop-line { margin: 10px 0 25px; width: 100%; height: 1px; background: url('../img/line-2.png') 0 0 repeat-x; }

.text .drop.close .drop-content { display: none;}
.text .drop.open .drop-content { margin-top: 40px; display: block;}

.text .button-social { padding: 0 0 7px 0; height: 32px; width: 100%;}
.text .button-social-right{ float: left; width: 100%;}
.text .button-social-right-content { margin: 3px 0 0 150px; }
.text .button-social-left { float: left; width: 130px; margin-left: -100%; padding-right: 20px; text-align: right;}


/* Graph
-------------------------------------------------------------------*/

.graph { margin: 10px 0 30px 0;}
.graph-box { margin: 0 0 15px 0; padding: 20px 0 20px 0; border: 1px solid #dfdfdf; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
.graph-hide { display: none;}
.graph-value { display: none;}

/* Table */
.graph-table { margin: 0 auto 20px auto; padding: 10px 0 0 0; width: 100%;}

.graph-table table { margin: 0 0 0 -10px; width: 103%; border-spacing: 10px 0;}
.graph-table table th { 
  font-family: 'Open Sans', sans-serif; 
  font-size: 17px; 
  font-weight: bold;
  color: #333; 
  line-height: 0.9em; 
  padding: 0 7px 16px 5px; 
  border-bottom: 3px solid #eee;
}
.graph-table table td { 
  padding: 10px 5px 10px 5px; 
  font-size: 16px;
  line-height: 1.2em;
  border-bottom: 1px solid #eee;
}
.graph-table .table-right { text-align: right; }
.graph-table .table-number  { padding: 7px 10px 7px; font-size: 12px; font-weight: bold; color: #fff; line-height: 1em; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; display: inline-block;}
.graph-table .table-number-red { background: #f97551; }
.graph-table .table-number-blue { background: #00c97d; }
.graph-table .table-number-green { background: #bdf23e; }
.graph-table .table-number-grey { background: #b2b2b2; }


/* Map */
.graph-map { margin: 0 auto; width: 500px; height: 300px; background: url('../img/map-1.png') 0 0 no-repeat;}

.graph-map .graph-map-element { width: 0; height: 0; float: left; position: relative; cursor: pointer;}

.graph-map .graph-map-circle { width: 22px; height: 22px;}
.graph-map .graph-map-circle.graph-map-circle-red { background: url('../img/graph-map-circle-red.png') 0 0 no-repeat;}
.graph-map .graph-map-circle.graph-map-circle-blue { background: url('../img/graph-map-circle-blue.png') 0 0 no-repeat;}
.graph-map .graph-map-circle.graph-map-circle-green { background: url('../img/graph-map-circle-green.png') 0 0 no-repeat;}

.graph-map .graph-map-element-content { top: -67px; left: -39px; width: 100px; position: relative;}
.graph-map .graph-map-element-img { 
   margin-left: 28px; 
   width: 44px; 
   height: 56px; 
   background: url('../img/graph-map-pin.png') 0 100% no-repeat;
   transition: top 0.3s; -moz-transition: top 0.3s; -webkit-transition: top 0.3s;
}
.graph-map .graph-map-element-img .graph-map-element-img-text { padding-top: 11px; width: 100%; font-weight: bold; font-size: 13px; color: #fff; text-align: center;} 
.graph-map .graph-map-element-text { padding-top: 16px; width: 100px; font-size: 9px; font-weight: bold; line-height: 1.25em; text-transform: uppercase; text-align: center;}


/* img */
.graph-img { margin: 0 auto; width: 500px; text-align: center;}
.graph-img img{ width: 100%;}



/* Bar */
.graph-bar { margin: 0 auto; width: 500px; text-align: center;}
.graph-bar-content { width: auto; display: inline-block;}

.graph-bar .graph-bar-element { margin: 0 2px 0 2px; display: table; min-height: 200px; float: left;}
.graph-bar .graph-bar-element-content { display: table-cell; vertical-align: bottom; }
.graph-bar .graph-bar-element.graph-bar-40 .graph-bar-number { width: 70px; margin: 0 -15px 0 -15px; }
.graph-bar .graph-bar-element .graph-bar-number { padding-bottom: 7px; font-size: 12px; font-size: 11px\9; font-weight: bold; color: #444; line-height: 1em; text-align: center;}
.graph-bar .graph-bar-element .graph-bar-middle { transition: height 0.3s; -moz-transition: height 0.3s; -webkit-transition: height 0.3s; }
.graph-bar .graph-bar-element .graph-bar-top { background: url('../img/sprite-graph-bar.png') no-repeat;}
.graph-bar .graph-bar-element .graph-bar-bottom { background: url('../img/sprite-graph-bar.png') no-repeat;}
.graph-bar .graph-bar-separator { margin: 0; float: left; display: block;}

.graph-bar .graph-bar-red .graph-bar-middle { background: #f97551;}
.graph-bar .graph-bar-blue .graph-bar-middle { background: #00c97d;}
.graph-bar .graph-bar-green .graph-bar-middle { background: #bdf23e;}
.graph-bar .graph-bar-grey .graph-bar-middle { background: #b2b2b2;}

.graph-bar .graph-bar-20  { width: 20px; height: 200px; }
.graph-bar .graph-bar-20 .graph-bar-top, .graph-bar .graph-bar-20 .graph-bar-bottom { height: 10px;}
.graph-bar .graph-bar-20.graph-bar-red .graph-bar-top { background-position: 0 0;}
.graph-bar .graph-bar-20.graph-bar-red .graph-bar-bottom { background-position: 0 -10px;}
.graph-bar .graph-bar-20.graph-bar-blue .graph-bar-top { background-position: -20px 0;}
.graph-bar .graph-bar-20.graph-bar-blue .graph-bar-bottom { background-position: -20px -10px;}
.graph-bar .graph-bar-20.graph-bar-green .graph-bar-top { background-position: -40px 0;}
.graph-bar .graph-bar-20.graph-bar-green .graph-bar-bottom { background-position: -40px -10px;}
.graph-bar .graph-bar-20.graph-bar-grey .graph-bar-top { background-position: -60px 0;}
.graph-bar .graph-bar-20.graph-bar-grey .graph-bar-bottom { background-position: -60px -10px;}

.graph-bar .graph-bar-40 { width: 40px; height: 220px; }
.graph-bar .graph-bar-40 .graph-bar-middle { min-height: 10px; }
.graph-bar .graph-bar-40 .graph-bar-top, .graph-bar .graph-bar-40 .graph-bar-bottom { height: 20px;}
.graph-bar .graph-bar-40.graph-bar-red .graph-bar-top { background-position: -80px 0;}
.graph-bar .graph-bar-40.graph-bar-red .graph-bar-bottom { background-position: -80px -20px;}
.graph-bar .graph-bar-40.graph-bar-blue .graph-bar-top { background-position: -120px 0;}
.graph-bar .graph-bar-40.graph-bar-blue .graph-bar-bottom { background-position: -120px -20px;}
.graph-bar .graph-bar-40.graph-bar-green .graph-bar-top { background-position: -160px 0;}
.graph-bar .graph-bar-40.graph-bar-green .graph-bar-bottom { background-position: -160px -20px;}
.graph-bar .graph-bar-40.graph-bar-grey .graph-bar-top { background-position: -200px 0;}
.graph-bar .graph-bar-40.graph-bar-grey .graph-bar-bottom { background-position: -200px -20px;}

.graph-bar .graph-bar-60 { width: 60px; height: 240px; }
.graph-bar .graph-bar-60 .graph-bar-top, .graph-bar .graph-bar-60 .graph-bar-bottom { height: 30px;}
.graph-bar .graph-bar-60.graph-bar-red .graph-bar-top { background-position: -240px 0;}
.graph-bar .graph-bar-60.graph-bar-red .graph-bar-bottom { background-position: -240px -30px;}
.graph-bar .graph-bar-60.graph-bar-blue .graph-bar-top { background-position: -300px 0;}
.graph-bar .graph-bar-60.graph-bar-blue .graph-bar-bottom { background-position: -300px -30px;}
.graph-bar .graph-bar-60.graph-bar-green .graph-bar-top { background-position: -360px 0;}
.graph-bar .graph-bar-60.graph-bar-green .graph-bar-bottom { background-position: -360px -30px;}
.graph-bar .graph-bar-60.graph-bar-grey .graph-bar-top { background-position: -420px 0;}
.graph-bar .graph-bar-60.graph-bar-grey .graph-bar-bottom { background-position: -420px -30px;}

.graph-bar .graph-bar-element .graph-bar-icon { margin: 0 auto; top: -40px; left: -10px; width: 0; height: 0; position: relative;}

/* bar indice */
.graph-bar .graph-bar-indice { margin: 10px 0 0; display: inline-block; }
.graph-bar .graph-bar-indice-element { margin: 0 2px 0 2px; font-size: 11px; font-weight: bold; line-height: 1.25em; text-transform: uppercase; text-align: center; float: left; display: block; }
.graph-bar .graph-bar-indice-separator { float: left; display: block;}


/* Horbar */
.graph-horbar { margin: 0 auto; width: 500px; text-align: center;}

.graph-horbar .graph-horbar-column2 { padding-bottom: 5px; float: left; width: 100%;}
.graph-horbar .graph-horbar-column2-content { margin-left: 120px; }
.graph-horbar .graph-horbar-column1 { float: left; width: 120px; margin-left: -100%;}

.graph-horbar .graph-horbar-element { padding: 2px 0 2px 0; clear: both;}

.graph-horbar .graph-horbar-element .graph-horbar-middle { transition: width 0.3s; -moz-transition: width 0.3s; -webkit-transition: width 0.3s; float: left; }
.graph-horbar .graph-horbar-element .graph-horbar-left { background: url('../img/sprite-graph-bar.png') no-repeat; float: left;}
.graph-horbar .graph-horbar-element .graph-horbar-right { background: url('../img/sprite-graph-bar.png') no-repeat; float: left;}
.graph-horbar .graph-horbar-element .graph-horbar-number { width: 70px; margin-right: -30px; padding: 12px 0 0 10px; font-size: 12px; font-weight: bold; color: #444; line-height: 1em; text-align: left; float: left;}
.graph-horbar .graph-horbar-separator { margin: 0; clear: both;}

.graph-horbar .graph-horbar-red .graph-horbar-middle { background: #f97551;}
.graph-horbar .graph-horbar-blue .graph-horbar-middle { background: #00c97d;}
.graph-horbar .graph-horbar-green .graph-horbar-middle { background: #bdf23e;}
.graph-horbar .graph-horbar-grey .graph-horbar-middle { background: #b2b2b2;}

.graph-horbar .graph-horbar-40 .graph-horbar-middle { height: 40px; min-width: 10px;}
.graph-horbar .graph-horbar-40 .graph-horbar-left, .graph-horbar .graph-horbar-40 .graph-horbar-right { width: 20px; height: 40px;}
.graph-horbar .graph-horbar-40.graph-horbar-red .graph-horbar-left { background-position: -80px -40px;}
.graph-horbar .graph-horbar-40.graph-horbar-red .graph-horbar-right { background-position: -100px -40px;}
.graph-horbar .graph-horbar-40.graph-horbar-blue .graph-horbar-left { background-position: -120px -40px;}
.graph-horbar .graph-horbar-40.graph-horbar-blue .graph-horbar-right{ background-position: -140px -40px;}
.graph-horbar .graph-horbar-40.graph-horbar-green .graph-horbar-left { background-position: -160px -40px;}
.graph-horbar .graph-horbar-40.graph-horbar-green .graph-horbar-right { background-position: -180px -40px;}
.graph-horbar .graph-horbar-40.graph-horbar-grey .graph-horbar-left { background-position: -200px -40px;}
.graph-horbar .graph-horbar-40.graph-horbar-grey .graph-horbar-right { background-position: -220px -40px;}

.graph-horbar .graph-horbar-element .graph-horbar-icon { top: 5px; left: 15px; width: 0; height: 0; position: relative; float: left;}

/* Horbar indice */
.graph-horbar .graph-horbar-indice { padding: 0 20px 4px 0; display: table; width: 100px; text-align: right;}
.graph-horbar .graph-horbar-indice-content { display: table-cell; vertical-align: middle; font-size: 11px; font-weight: bold; line-height: 1.25em; text-transform: uppercase; }
.graph-horbar .graph-horbar-indice-separator { margin: 0; clear: both;}

/* icon */
.graph .graph-icon-woman  span{ width: 20px; height: 30px; background: url('../img/ico-graph-bar-woman.png') 50% 50% no-repeat; display: block;}
.graph .graph-icon-man  span{ width: 20px; height: 30px; background: url('../img/ico-graph-bar-man.png') 50% 50% no-repeat; display: block;}


/* Leg */
.graph-leg  { margin: 15px 0 -5px 0; padding: 15px 0 0 0; width: 100%; text-align: center; border-top: 1px solid #dedede;}

.graph-leg ul { width: auto; display: inline-block;}
.graph-leg ul li { margin: 0 15px 4px 15px; font-size: 10px; font-weight: bold; line-height: 1.25em; text-transform: uppercase; float: left; display: block;}

.graph-leg .graph-leg-red { margin: 0 10px 0 0; width: 35px; height: 12px; background: url('../img/graph-leg-red.png') 0 0 no-repeat; float: left; display: block;}
.graph-leg .graph-leg-blue { margin: 0 10px 0 0; width: 35px; height: 12px; background: url('../img/graph-leg-blue.png') 0 0 no-repeat; float: left; display: block;}
.graph-leg .graph-leg-green { margin: 0 10px 0 0; width: 35px; height: 12px; background: url('../img/graph-leg-green.png') 0 0 no-repeat; float: left; display: block;}
.graph-leg .graph-leg-grey { margin: 0 10px 0 0; width: 35px; height: 12px; background: url('../img/graph-leg-grey.png') 0 0 no-repeat; float: left; display: block;}


/* Nav */
.graph-nav  { margin: 15px 0 -10px 0; padding: 12px 0 0 0; width: 100%; text-align: center; border-top: 1px solid #dedede;}

.graph-nav ul { width: auto; display: inline-block;}
.graph-nav ul li { margin: 0 2px 4px 2px; float: left; display: block;}
.graph-nav ul li a.btn-graph-nav { 
   padding: 4px 14px 6px; 
   font-family: 'open sans', sans-serif; 
   font-size: 12px; 
   color: #fff; 
   text-decoration: none; 
   background: #b2b2b2; 
   border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
   transition: background 0.3s; -moz-transition: background 0.3s; -webkit-transition: background 0.3s;
   display: block;
}
.graph-nav ul li a.btn-graph-nav span { padding: 0 3px 0 0; font-weight: bold; font-style: italic;}
.graph-nav ul li a:hover.btn-graph-nav { background: #888;}
.graph-nav ul li.selected a.btn-graph-nav { background: #888;}



/* Legend */
.legend  { margin: -5px 0 25px 10px; padding: 0; }

.legend-left  { width: 70px; margin-left: -100%; float: left; display: block;}
.legend-right  { width: 100%; float: left; display: block;}
.legend-right-content { margin: 0 0 0 70px; }

.legend-text  { font-family: 'Open Sans', sans-serif; font-size: 14px; color: #777; line-height: 1.4em; display: inline;}
.legend-text b { font-family: 'Open Sans Bold', sans-serif; color: #777;}


/* Buttons 
-------------------------------------------------------------------*/

a.btn { 
   padding: 12px 18px 14px; 
   font-family: 'open-sans', arial, sans-serif; 
   font-size: 14px; 
   font-weight: bold;
   color: #00c97d; 
   text-decoration: none; 
   background: #fff; 
   border: 1px solid #00c97d;
   border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
   transition: background 0.3s, border-color 0.3s; -moz-transition: background 0.3s, border-color 0.3s; -webkit-transition: background 0.3s, border-color 0.3s;
   display: block;}
a:hover.btn { background: #00c97d; color: #fff;}
.selected a.btn { background: #00c97d; color: #fff;}

a.btn span.btn-ico-right { margin: 1px -4px -1px 12px; width: 10px; height: 10px; background: url('../img/ico-right-green.png') 0 0 no-repeat; display: inline-block;}
a:hover.btn span.btn-ico-right { background: url('../img/ico-right-white.png') 0 0 no-repeat;}
a.btn span.btn-ico-left { margin: 1px 12px -1px -4px; width: 10px; height: 10px; background: url('../img/ico-left-green.png') 0 0 no-repeat; display: inline-block;}
a:hover.btn span.btn-ico-left {background: url('../img/ico-left-white.png') 0 0 no-repeat; }
a.btn span.btn-ico-home { margin: 1px -2px 0 -2px; width: 16px; height: 15px; background: url('../img/ico-home-green.png') 0 0 no-repeat; display: inline-block;}
a:hover.btn span.btn-ico-home {background: url('../img/ico-home-white.png') 0 0 no-repeat; }
a.btn span.btn-ico-right2 { margin: 1px -2px 0 0; width: 10px; height: 15px; background: url('../img/ico-right-green.png') 0 3px no-repeat; display: inline-block;}
a:hover.btn span.btn-ico-right2 { background: url('../img/ico-right-white.png') 0 3px no-repeat;}




/* Tooltip 
-------------------------------------------------------------------*/

#tooltip { top: 500px; left: 255px; position: absolute; z-index: 200; display: none;}
#tooltip #tooltip-content{ }
#tooltip .tooltip-box-shadow { 
   margin: 3px 0 0 3px; 
   background: url('../img/bg-black-transparent.png') 0 0; 
   border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; 
}
#tooltip .tooltip-box { 
   top: -3px; 
   left: -3px; 
   background: #fff;
   border: 1px solid #ccc;
   border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;  
   position: relative; 
}
#tooltip .tooltip-box-content { padding: 15px 15px 19px; min-width: 200px; min-height: 50px; }
#tooltip .tooltip-box-flecha{ margin: 0 0 -1px 150px; width: 29px; height: 17px; background: url('../img/tooltip-box-flecha.png') 0 0 no-repeat; position: relative; z-index: 100;}
#tooltip .tooltip-loading { margin: 10px 0 0 30px; width: 32px; height: 32px; background: url('../img/loading.gif') 0 0; }

#tooltip .tooltip-table { margin: 0 auto; min-width: 300px;}
#tooltip .tooltip-table table { margin: 0 0 0 0; width: 100%; border-spacing: 10px 0;}

#tooltip .tooltip-table table th { 
  font-family: 'Open Sans', sans-serif; 
  font-size: 14px; 
  font-weight: bold;
  color: #333; 
  line-height: 0.9em; 
  padding: 5px 5px 10px 5px; 
  border-bottom: 2px solid #d6d6d6;
}
#tooltip .tooltip-table table td { 
  padding: 3px 5px 3px 5px; 
  font-size: 13px;
  color: #777;
  line-height: 1.2em;
}
#tooltip .tooltip-table .table-right { text-align: right; }



/* Form Elements
-------------------------------------------------------------------*/




/* Structure 
-------------------------------------------------------------------*/

/* site */

#site{
  width: 100%;
}


/* Header
-------------------------------------------------------------------*/

#header{
}


/* Menu
-------------------------------------------------------------------*/

#menu{ transition: left 0.3s, top 0.3s; -moz-transition: left 0.3s, top 0.3s; -webkit-transition: left 0.3s, top 0.3s;
}
.menu-content{ background: #5b5b5b;}
.menu-btn{ transition: background-color 0.3s; -moz-transition: background-color 0.3s; -webkit-transition: background-color 0.3s; }

#menu.menu-side { z-index: 200; position: fixed;}
#menu.menu-side .menu-content{ padding: 80px 0 0 0; width: 500px; height: 100%; float: left; }
#menu.menu-side .menu-btn{ width: 50px; height: 100%; float: left; cursor: pointer;}
#menu.menu-side.open{ left: -500px; }
#menu.menu-side.open .menu-btn{ background: #454545 url('../img/ico-menu-1.png') 0 50% no-repeat;}
#menu.menu-side.open .menu-btn:hover{ background: #00c97d url('../img/ico-menu-1.png') 0 50% no-repeat;}
#menu.menu-side.close .menu-btn{ background: #454545 url('../img/ico-menu-2.png') 0 50% no-repeat;}
#menu.menu-side.close .menu-btn:hover{ background: #00c97d url('../img/ico-menu-2.png') 0 50% no-repeat;}

#menu.menu-top{ display: none;}
#menu.menu-top .menu-content{ padding: 40px 0 40px 0; width: 100%; float: none;}
#menu.menu-top .menu-btn{ width: 100%; height: 50px; float: none; cursor: pointer; }
#menu.menu-top.open .menu-content{ display: none;}
#menu.menu-top.close .menu-content{ display: block;}
#menu.menu-top.open .menu-btn{ background: #454545 url('../img/ico-menu-3.png') 50% 0 no-repeat;}
#menu.menu-top.open .menu-btn:hover{ background: #00c97d url('../img/ico-menu-3.png') 50% 0 no-repeat;}
#menu.menu-top.close .menu-btn{ background: #454545 url('../img/ico-menu-4.png') 50% 0 no-repeat;}
#menu.menu-top.close .menu-btn:hover{ background: #00c97d url('../img/ico-menu-4.png') 50% 0 no-repeat;}


/* menu list */
#menu-list{
  margin: 0 0 0 0;
}
#menu-list ul{
  margin: 0 0 -20px 0;
}
#menu-list ul li{
  margin: 0 0 20px 40px;
  display: block;
  float: none;
  clear: both;
}
#menu-list ul li .menu-list-separator{
  margin: 20px 0 20px 20px;
  width: 80px;
  height: 1px;
  background: #777;
  display: block;
}
#menu-list ul li a{
}
#menu-list ul li a .menu-list-left{
  margin-left: -3px;
  width: 20px;
  height: 23px;
  /*background: url('../img/list-point-1.png') 0 11px no-repeat;*/
  display: block;
  float: left;
}
#menu-list ul li a .menu-list-right{
  width: 400px;
  font-family: 'folks_regular', sans-serif;
  font-size: 27px;
  color: #b2b2b2;
  line-height: 1.1em;
  letter-spacing: 0.3px;
  display: block;
  float: left;
  transition: color 0.2s; -moz-transition: color 0.2s; -webkit-transition: color 0.2s;
}
#menu-list ul li a:hover .menu-list-right, #menu-list ul li.selected a .menu-list-right { color: #fff;}


/* Submenu
-------------------------------------------------------------------*/
#submenu { margin: 0; padding: 0 0 25px; display: block;}
#submenu ul li { margin: 0 5px 5px 0; float: left; display: block;}



/* Intro
-------------------------------------------------------------------*/

#intro { width: 100%; background: url('../img/bg-grey.jpg') 50% 50% no-repeat;}

#intro-content { padding: 0 0 0 120px; min-width: 500px; position: relative; z-index: 50;}
#intro-content .intro-img { padding: 120px 0 0 0;}
#intro-content .intro-btn { padding: 70px 0 0 0;}
#intro-content .intro-btn a.btn { width: 180px; text-align: center; display: inline-block; background: none;}
#intro-content .intro-btn a:hover.btn { background: #00c97d;}
#intro-content .intro-btn a.btn-enter { margin-right: 5px; background: #00c97d; color: #fff;}
#intro-content .intro-btn a:hover.btn-enter { background: #f97551; border-color: #f97551;}

#intro-number { 
   position: absolute; 
   top: 0;
   right: 4%; 
   width: 715px;
   background: url('../img/intro-number.png') 0 50% no-repeat;
}


/* Article
-------------------------------------------------------------------*/

/* main */
#article{ width: 100%; display: block;}

#article-a{ float: left; width: 100%;}
#article-a-content{ padding: 0 0 0 120px; min-width: 500px; margin-right: 460px; }
#article-b{ float: left; width: 460px; margin-left: -460px;}
#article-c{ float: left; width: 100%; }
#article-c-content{ padding: 0 50px 0 120px; min-width: 500px;}
#article-c-column-1{ margin-right: 6%; width: 47%; float: left; }
#article-c-column-2{ width: 47%; float: left; }


/* Article Side
-------------------------------------------------------------------*/

#article-side {
   width: 290px;  
   right: 60px;
   position: fixed;
   transition: top 1s; -moz-transition: top 1s; -webkit-transition: top 1s;
   z-index: 100;
}
#article-side { top: 2000px; }
#article-side.noslide { transition: top 0s; -moz-transition: top 0s; -webkit-transition: top 0s;}

#article-side-bg {
   background: url('../img/bg-grey.jpg') 0 50%;
   width: 400px;  
   right: 0;
   position: fixed;
}
#article-side-logo {
   background: url('../img/logo-footer.png') 0 0;
   width: 290px;
   height: 75px;   
   right: 60px;
   bottom: 0;
   position: fixed;
   z-index: 150;
}

#article-side .article-side-media {
   width: 100%; 
   margin: 0 0 20px 0;
}
#article-side .article-side-media img {
   width: 270px; 
   height: 230px; 
   border: 10px solid #e5e5e5;
   border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
}
#article-side .article-side-media-corner {
   top: -175px;
   right: -35px; 
   width: 100%;
   height: 0;   
   z-index: 100;
   position: relative;
}
#article-side .article-side-media-corner-content {
   width: 100%;
   height: 195px;   
   background: url('../img/corner-media-big.png') 100% 0 no-repeat;
}
#article-side .article-side-media-title {
   margin: 30px 0 5px;
   font-family: 'Open Sans Bold', arial, sans-serif;
   font-size: 16px;
   font-weight: bold;
   color: #00c97d;
   line-height: 1.15em; 
   text-transform: uppercase;   
}
#article-side .article-side-media-subtitle{
   margin: 0;
   font-family: 'Open Sans', arial, sans-serif;
   font-size: 14px;
   font-style: italic;
   color: #777;
   line-height: 1em;  
}
#article-side .article-side-text{
   margin: 0 0 15px 0;
   width: 100%; 
   font-family: 'Open Sans', sans-serif;
   font-size: 14px;
   color: #777;
   line-height: 1.4em;  
}
#article-side .article-side-list{
   width: 100%; 
   font-family: 'Open Sans', sans-serif;
   font-size: 14px;
   color: #777;
   line-height: 1.3em;  
}
#article-side .article-side-list b { color: #777;}
#article-side .article-side-list ul{
   margin: 0;
   padding: 0;
}
#article-side .article-side-list ul li{
   margin: 0 0 10px 0;
   padding: 0 0 0 20px;
   background: url('../img/list-point-1.png') 0 5px no-repeat;
}
#article-side .article-side-list ul li.no-point{
   padding: 0;
   font-size: 14px;
   line-height: 1.3em; 
   background: none;
}
#article-side .article-side-list ul li.separator{
   margin: 0 0 10px 0;
   padding: 0 0 0 20px;
   height: 1px;
   background: none;
}


/* List
-------------------------------------------------------------------*/

#list-a { margin: 0; width: 100%;}

#list-a ul li { padding: 0 0 30px 0; display: block;}
#list-a ul li #list-left { float: left; width: 100%;}
#list-a ul li #list-left-content { margin-right: 160px;}
#list-a ul li #list-right { float: left; width: 150px; margin-left: -150px;}

#list-a .list-title { margin: 0 0 4px 0; font-size: 18px; font-weight: bold; color: #333; line-height: 1.1em;}
#list-a .list-subtitle { margin: 0 0 12px 0; font-size: 16px; font-style: italic; color: #777;}
#list-a .list-text { font-size: 16px; line-height: 1.4em; color: #333;}

#list-a .list-media { width: 100%;}
#list-a .list-media img { 
   margin-top: -5px;
   width: 130px;
   height: 100px;
   border: 10px solid #e5e5e5;
   border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
}
#list-a .list-media-corner {
   top: -60px;
   right: -3px; 
   width: 100%;
   height: 0;   
   z-index: 100;
   position: relative;
}
#list-a .list-media-corner-content {
   width: 100%;
   height: 60px;   
}

#list-a .list-media-corner-red .list-media-corner-content{ background: url('../img/') 100% 0 no-repeat;}
#list-a .list-media-corner-blue .list-media-corner-content{ background: url('../img/') 100% 0 no-repeat;}
#list-a .list-media-corner-green .list-media-corner-content{ background: url('../img/') 100% 0 no-repeat;}


/* Footer
-------------------------------------------------------------------*/

#logo-footer { 
  margin: 0 0 0 0; 
  padding: 0 0 0 0; 
  width: 284px; 
  height: 58px;
  bottom: 0;
  right: 3.5%;
  position: fixed;
  z-index: 100;
}

#footer { 
  margin: 20px 0 0 0; 
  padding: 0; 
  width: 100%; 
  height: 100px;  
}

#footer-box { 
  width: 100%; 
  height: 130px;
  background: url('../img/line.png') 0 21px repeat-x;
  
}
#footer-box .footer-right { padding-left: 10px; background: #fff; float: right;}
#footer-box .footer-left { padding-right: 10px; background: #fff; float: left;}


/* Screen
-------------------------------------------------------------------- */

#article.screen-1 #intro-content { padding: 0 0 0 100px;}
#article.screen-1 #intro-content .intro-img { padding-top: 100px;}
#article.screen-1 #intro-number {width: 700px; right: 0;}
#article.screen-1 #article-a-content{ padding: 0 0 0 100px; margin-right: 310px; }
#article.screen-1 #article-b{ width: 310px; margin-left: -310px;}
#article.screen-1 #article-c-content{ padding: 0 50px 0 100px; }
#article.screen-1 .title h1{ font-size: 60px; }
#article.screen-1 #article-side { width: 210px; right: 30px;}
#article.screen-1 #article-side .article-side-media img { width: 190px; height: 160px;}
#article.screen-1 #article-side-bg { width: 275px;}
#article.screen-1 #article-side-logo{ right: 30px;}

#article.screen-2 #intro-content { padding: 0 0 0 50px;}
#article.screen-2 #intro-content .intro-img { padding-top: 80px;}
#article.screen-2 #intro-number { display: none;}
#article.screen-2 #article-a-content{ padding: 0 0 0 50px; margin-right: 50px; }
#article.screen-2 #article-b{ width: 50px; margin-left: -50px;}
#article.screen-2 #article-c-content{ padding: 0 50px 0 50px; }
#article.screen-2 #article-c-column-1{ margin-right: 0; width: 100%; float: none; }
#article.screen-2 #article-c-column-2{ width: 100%; float: none; }
#article.screen-2 .title h1{ font-size: 60px; }
#article.screen-2 #article-side { display: none; }
#article.screen-2 #article-side-bg { display: none;}
#article.screen-2 #article-side-logo{ right: 30px;}