@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Rubik:400,500');

#huella_principal *, #huella_portada *{
    font:11pt 'Open Sans', sans-serif;
}

.clear{
    clear: both;
}

.huella_stage{
    background-color: #EEE;
    height: 100px;
}

.huella_numberCircle {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;

    /*behavior: url(PIE.htc);  add if you really care about IE8 http://css3pie.com/ */

    behavior: url(PIE/PIE.htc);

    display: inline-block;
    width: 50px;
    height: 50px;
    padding:2px 0;

    background: #a0a0a0;
    border: 2px solid #a0a0a0;
    color: #fff;
    text-align: center;

    font: 30px 'Open Sans', sans-serif !important;
    margin:25px 0;
}

.huella_text{
    font: 25px 'Open Sans', sans-serif !important;
    color:#a0a0a0;
    padding:30px 0 25px 35px;
}

.huella_text.longText{
    padding:10px 0 10px 35px;
}

.huella_stage.active{
    background-color: #91d054;
    background-repeat: no-repeat;
    background-position: 90%;
}

#huella_st1.huella_stage.active{background-image: url(imgs/ca.png);}
#huella_st2.huella_stage.active{background-image: url(imgs/co.png);}
#huella_st3.huella_stage.active{background-image: url(imgs/tr.png);}
#huella_st4.huella_stage.active{background-image: url(imgs/rn.png);}

.active .huella_text{
    color: #fff;
}

.active .huella_numberCircle{
    background: #009040;
    border: 2px solid #009040;
}

#huella_instructions .logo{
    height: 80px;
    width: 80px;
    background-repeat: no-repeat;
    float: left;
    margin-top: 8px;
}

#huella_instructions .logo.casa{background-image: url(imgs/ca_gray.png);}
#huella_instructions .logo.comida{background-image: url(imgs/co_gray.png);}
#huella_instructions .logo.transporte{background-image: url(imgs/tr_gray.png);}
#huella_instructions .logo.recursos_naturales{background-image: url(imgs/rn_gray.png);}

#huella_instructions .text{
    width: 92%;
    color: #909090;
    float: right;
}

#huella_instructions .text h2{
    margin-top: 8px;
    margin-bottom: 3px;
    font-size: 16pt;
}

#huella_questions{
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    color: #515151;
}

#huella_questions .right_line{
    border-right: 1px solid #f2f2f2;
}

#huella_questions h3{
    font: 15pt 'Open Sans', sans-serif !important;
    font-weight: bold !important;
}

#huella_questions li{
    list-style: none;
}

#huella_questions label{
    font-size: 13pt !important;
}

#huella_questions input[type=radio]:not(old){
  width   : 25px;
  margin  : 0;
  padding : 0;
  opacity : 0;
}

#huella_questions input[type=radio]:not(old) + label{
  display      : inline-block;
  margin-left  : -40px;
  padding-left : 40px;
  background   : url('imgs/radio_0.png') no-repeat 0 0;
  line-height  : 25px;
}

#huella_questions input[type=radio]:not(old):checked + label{
  background   : url('imgs/radio_1.png') no-repeat 0 0;
}

#huella_buttons{
    padding: 10px;
    text-align: center;
}

.btn-default{
    color: white;
    font-size: 13pt !important;
    padding: 10px 25px;
}

.btn-light{
    background-color: #91d054;
    border-color: #91d054;
}

.btn-dark{
    background-color: #42bf80;
    border-color: #42bf80;
}

#huella_info{
    background-color: #f9f3d1;
    border-color: #f9f3d1;
    padding: 15px;
    color: #938e72; /*#4f4f4f;*/
}

#huella_info .logo{
    display: block;
    margin: 5px auto;
    width: 35px;
    height: 55px;
    background-image: url(imgs/sabias.png);
    background-repeat: no-repeat;
}

#huella_portada{
    color: #666;
    width: 60%;
    margin:auto;
}

#huella_portada .pie{
    width: 168px;
    height: 408px;
    background-image: url(imgs/pie.png);
    margin:auto;
}

#huella_portada h2{
    color: #91d054;
    font:30pt 'Rubik', sans-serif !important;
    width: 40%
}

#huella_portada h2 > span{
    color: #326f02;
    font:30pt 'Rubik', sans-serif !important;
    font-weight: bold !important;
}

#huella_result{
    text-align: center;
    color: #909090;
}

#huella_result .huella_circleResult {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;

    /*behavior: url(PIE.htc);  add if you really care about IE8 http://css3pie.com/ */

    behavior: url(PIE/PIE.htc);

    display: inline-block;
    width: 170px;
    height: 170px;
    padding:4% 0;

    background: white;
    border: 4px solid #42bf80   ;
    text-align: center;

    font: 50px 'Open Sans', sans-serif !important;
    margin:25px 0;
}

#huella_result #huella_resultMessage{
    font-weight: normal !important;
    font-size: 30pt !important;
    margin-bottom: 20px;
}

#huella_result p{
    font-size: 13pt !important;
    margin: 20px 40px;
}

#huella_result h3{
    font-weight: normal !important;
    margin-top: 0;

}

#huella_result button{
    font: 12pt 'Open Sans', sans-serif !important;
    white-space: normal;
    max-width: 250px;
    text-align: left;
    background-color: #42bf80;
    border-color: #42bf80;
    margin: auto 5px;
}

#huella_result span.logoHome{
    display: inline-block;
    height: 46px;
    width: 44px;
    float: left;
    margin: 5px 10px 0 -15px;
    background-image: url(imgs/home_btn.png);
    background-repeat: no-repeat;
}

#huella_result span.logoBack{
    display: inline-block;
    height: 46px;
    width: 44px;
    float: left;
    margin: 5px 10px 0 -15px;
    background-image: url(imgs/return_btn.png);
    background-repeat: no-repeat;
}

#huella_result ol.socialNetworksList{
    list-style: none;
    width: 340px;
    margin: auto;
    position: relative;
    left: -20px;
}
#huella_result ol.socialNetworksList li{
    display: inline;
    float: left;
}

#huella_result ol.socialNetworksList li a{
    width: 60px;
    height: 46px;
    display: block; 
}

#huella_result ol.socialNetworksList li a.pinterest{background: transparent url(imgs/pinterest.png) no-repeat;}
#huella_result ol.socialNetworksList li a.twitter{background: transparent url(imgs/twitter.png) no-repeat;}
#huella_result ol.socialNetworksList li a.facebook{background: transparent url(imgs/facebook.png) no-repeat;}
#huella_result ol.socialNetworksList li a.gplus{background: transparent url(imgs/gplus.png) no-repeat;}
#huella_result ol.socialNetworksList li a.mail{background: transparent url(imgs/mail.png) no-repeat;}