@font-face{
font-family: "Regular";
font-style:"normal";
font-weight: "normal";
src:url("../fonts/FiraSans-Regular.ttf");
}
@font-face{
font-family: "FiraSans-Bold";
src:url("../fonts/FiraSans-Bold.ttf");
}

@font-face{
font-family: "FiraSans-Medium";
src:url("../fonts/FiraSans-Medium.ttf");
}

@font-face{
font-family: "FiraSans-MediumItalic";
src:url("../fonts/FiraSans-MediumItalic.ttf");
}

@font-face{
font-family: "FiraSans-Black";
src:url("../fonts/FiraSans-Black.ttf");
}

@font-face{
font-family: "FiraSans-Bold";
src:url("../fonts/FiraSans-Bold.ttf");
}

@font-face{
font-family: "FiraSans-Light";
src:url("../fonts/FiraSans-Light.ttf");
}

@font-face{
font-family: "FiraSans-SemiBold";
src:url("../fonts/FiraSans-SemiBold.ttf");
}

@font-face{
font-family: "FiraSans-Italic";
src:url("../fonts/FiraSans-Italic.ttf");
}

@font-face{
font-family: "FiraSans-ExtraBold";
src:url("../fonts/FiraSans-ExtraBold.ttf");
}

.container-ficha
{
    height: 768px;
    width: 683px;
}

.container-left
{
    padding-right: 0px;
}

.container-right
{
    background-color: #EAEBB3;
    padding-left: 40px;
    padding-top: 25px;
    position: relative;

}

.arbol
{
    font-family: "FiraSans-Bold";
    color: #B7BA00;
    font-size: 170%;
    text-align: center;
    padding-bottom: 10px;
}

.nombresendero
{
    font-family: "FiraSans-Bold";
    color: #B7BA00;
    font-size: 170%;
    text-align: center;
    padding-left: 50px;
}

.cient
{
    font-family:"FiraSans-MediumItalic";
    font-size:120%;
}

.cientr
{
    font-family:"Regular";
    font-size:115%;
}

.rotar {
    font-family:"FiraSans-ExtraBold";
    font-size:300%;
    color: #B7BA00;
    display: block;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.subtitulo
{
    font-family: "FiraSans-SemiBold";
    color: #B7BA00;
    line-height: 150%;
    font-size: 95%; 
}

.texto
{
    font-family: "FiraSans-Light";
    font-size: 95%; 
}

.button_hoja {
    padding: 0px 0px;
}

.button_hoja:hover, .active {
    opacity: .8;
    background-image: url("../images/fichas/botones/Raiz-hoja-2.png");
}
.principal{
    cursor: pointer;
}
.secundario{
    display:none; 
    cursor: pointer;
}



.mapatronco{
    padding-top: 0px;
    padding-bottom: 0px;
}

.textomapa{
    font-family: "Regular";
    padding-top: 60px;
    padding-left: 50px;
    padding-right: 20px;
    color: #EAEBB3;
    font-size: 90%;
    text-align: justify;
}
.botonficha{
    width: 100%;
}

@media (max-width: 575px){
    .mapa{
        width: 100%;
    }
    .mapatronco{
        padding-top: 0px;
        padding-bottom: 0px;
    }
    .container-left
    {
        padding: 0px;
    }

    .container-right
    {
        background-color: #EAEBB3;
        padding-left: 15px;
        padding-top: 10px;
        position: relative;
    }
    .arbol
    {
        font-family: "FiraSans-Bold";
        color: #B7BA00;
        font-size: 100%;
        text-align: center;
        padding-bottom: 0px;
    }

    .cient
    {
        font-family:"FiraSans-MediumItalic";
        font-size:85%;
    }

    .cientr
    {
        font-family:"Regular";
        font-size:85%;
    }

    .subtitulo
    {
        font-family: "FiraSans-SemiBold";
        color: #B7BA00;
        line-height: 0px;
        font-size: 80%; 
    }

    .texto
    {
        font
        font-family: "FiraSans-Light";
        line-height: 0.8%;
        font-size: 80%; 
    }

    .principal{
        width: 20px;
    }
    .secundario{
        width: : 20px;
    }

    div.botones span img
    {
        width: 50px;
    }
}

@media (min-width : 576px) and (max-width: 767px){
    .container-left
    {
        padding: 0px;
    }

    .container-right
    {
        background-color: #EAEBB3;
        padding-left: 15px;
        padding-top: 10px;
        position: relative;
    }
    .arbol
    {
        font-family: "FiraSans-Bold";
        color: #B7BA00;
        font-size: 100%;
        text-align: center;
        padding-bottom: 0px;
    }

    .cient
    {
        font-family:"FiraSans-MediumItalic";
        font-size:85%;
    }

    .cientr
    {
        font-family:"Regular";
        font-size:85%;
    }

    .subtitulo
    {
        font-family: "FiraSans-SemiBold";
        color: #B7BA00;
        line-height: 0px;
        font-size: 80%; 
    }

    .texto
    {
        font
        font-family: "FiraSans-Light";
        line-height: 0.8%;
        font-size: 80%; 
    }

    .principal{
        width: 20px;
    }
    .secundario{
        width: : 20px;
    }
    .botones
    {
        
    }
}

@media (min-width: 768px) and (max-width: 991px){

    .container-left
    {
        padding: 0px;
    }

    .container-right
    {
        background-color: #EAEBB3;
        padding-left: 15px;
        padding-top: 10px;
        position: relative;
    }

    .arbol
    {
        font-family: "FiraSans-Bold";
        color: #B7BA00;
        font-size: 115%;
        text-align: center;
        padding-bottom: 0px;
    }

    .cient
    {
        font-family:"FiraSans-MediumItalic";
        font-size:90%;
    }

    .cientr
    {
        font-family:"Regular";
        font-size:90%;
    }

    .subtitulo
    {
        font-family: "FiraSans-SemiBold";
        color: #B7BA00;
        line-height: 0px;
        font-size: 80%; 
    }

    .texto
    {
        font
        font-family: "FiraSans-Light";
        line-height: 0.8%;
        font-size: 80%; 
    }

    .principal{
        width: 20px;
    }
    .secundario{
        width: : 20px;
    }
    .botones
    {
      
    }

}

@media (min-width: 991px){
    .botones
    {
        position: absolute;
        bottom: 0px;
        padding-bottom: 10px;
    }
}