.page-content{overflow-x: hidden;}
ul {list-style: none;margin: 0;padding: 0; }
#contentbinary{float:left;
    position:relative;
    width:100% !important;
    background:#ffffff;
}
.tree{float:left;
    position:relative;
    width:100%;
    background:#ffffff;
    padding:30px 0px 200px;
}

.tree ul { position: relative;
    float:left;
    width:100% !important;
    padding-top:20px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;

}

.tree ul li {
    float: left; text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;
    width:50%;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

.fulli{width:100% !important;}

.tree li::before, .tree li::after{
    content: '';
    position: absolute; top: 0;
    right: 50%;
    border-top: 1px solid #cccccc;
    width: 98.5%;
    height: 20px;
    border-radius:5px 5px 0px 0px ;
}

.tree li::after{
    right: auto; left: 50%;
    border-left: 1px solid #ccc;
}

.tree li:only-child::after, .tree li:only-child::before {
    display: none;
}

.tree li:only-child{ padding-top: 0;}

.tree li:first-child::before, .tree li:last-child::after{
    border: 0 none;
}

.tree li:last-child::before{
    border-right: 1px solid #ccc;
    border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
    border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
}

.tree ul ul::before{
    content: '';
    position: absolute; top: 0; left: 50%;
    border-left: 1px solid #ccc;
    width: 0; height: 20px;
}

.tree li a{
    border-radius:50%;
    width:100px;
    height:100px;
    text-decoration: none;
    color: #666;
    font-family: arial, verdana, tahoma;
    font-size: 11px;
    display: inline-block;
    transition: all 0.2s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

.tree li a img{border-radius:50%;}



.tree li a:hover em.active:before ,.tree li a:hover+ul em.active:before {
    -webkit-animation: binaryanimation 1s ease-out infinite;
    -moz-animation: binaryanimation 1s ease-out infinite;
    animation: binaryanimation 1s ease-out infinite;
}

.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a:hover+ul::before,
.tree li a:hover+ul ul::before{
    border-color:  #B4D1D9;
}

.pai{background:url(../images/tree/father.png) center center no-repeat !important;}
.mulher{background:url(../images/tree/woman.png) center center no-repeat  !important;}
.homem{background:url(../images/tree/man.png) center center no-repeat !important;}
.default{background:url(../images/tree/default.png) center center no-repeat !important;}
.man-neutral{background:url(../images/tree/man-neutral.png) center center no-repeat !important;}

.tree li a:hover > #modalbinario{display:block;
    opacity:1;
    visibility:visible;

}

#modalbinario{position:absolute;
    margin-left:-64px;
    margin-top:125px;
    width:230px;
    height:195px;
    z-index:1000000;
    transition:all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out;
    -ms-transition:all 0.2s ease-in-out;
    -o-transition:all 0.2s ease-in-out;
    -webkit-transition:all 0.2s ease-in-out;
    opacity:0;
    display:none;

}

#arrowmodal{position:absolute;
    left:50%;
    margin-left:-6px;
    margin-top:-5px;
    background:url(../images/tree/trianglesmart.png) no-repeat;
    width:12px;
    height:6px;
}

#listainfomodal{float:left;
    position:relative;
    width:230px;
    background:#2C3B50;
    z-index:10000;
    padding:15px;
}

#listainfomodal ul{float:left;
    position:relative;
    width:100% !important;
    padding-top:0px !important;
}

#listainfomodal ul li{float:left;
    position:relative;
    width:100% !important;
    text-align:left;
    height:auto !important;
    padding:1px 0px !important;
    font-size:14px;
    color:#697990 !important;
}

#listainfomodal ul li span{color:#ffffff !important;}

#listainfomodal ul li::before, #listainfomodal ul li::after{
    content: '';
    position: absolute; top: 0;
    border-top: none !important;
    width: 100% !important;
    height: auto !important;
}

#listainfomodal ul::before{
    content: '';
    position: absolute; top: auto !important; left: auto !important;
    border-left: none !important;
    width: auto !important; height: auto !important;
    margin-top:0px !important;
}

#cor2modal{position:absolute;
    right:0px;
    left:350px;
    bottom:0px;
    top:0px;
    background:#374964;
}

#charactermodal{position:absolute;
    width:150px;
    height:150px;
    z-index:10;
    right:73px;
    margin-top:25px;
}

.mzero{margin-left:0px !important;
    padding-left:0px !important;
    left:0%;
}

.circlemodal{width:121px !important;
    height:121px !important;
    margin-left:1px !important;
    margin-top:1px !important;
}

.tree li a em:before {
    float:left;
    position:relative;
    height: 121px;
    width:121px;
    left:-11px;
    top:-11px;
    z-index:0;
    background: transparent;
    border: 2px solid #b83972;
    content: "";
    border-radius:50%;
    filter: alpha(opacity=0);
    opacity:0;
}


@-webkit-keyframes binaryanimation{
    from {
        -webkit-transform: scale(0.9);
        opacity: 0.8;
    }

    to {
        -webkit-transform: scale(1.1);
        opacity: 0;
    }
}



#bronze{position:absolute;
    width:42px;
    height:36px;
    background:url(../images/tree/bronze.png) no-repeat;
    margin-left:60px;
    margin-top:65px;
}

#silver{position:absolute;
    width:42px;
    height:36px;
    background:url(../images/tree/silver.png) no-repeat;
    margin-left:60px;
    margin-top:65px;
}

#gold{position:absolute;
    width:42px;
    height:36px;
    background:url(../images/tree/gold.png) no-repeat;
    margin-left:60px;
    margin-top:65px;
}

#platinum{position:absolute;
    width:42px;
    height:36px;
    background:url(../images/tree/platinum.png) no-repeat;
    margin-left:60px;
    margin-top:65px;
}

#diamond{position:absolute;
    width:42px;
    height:36px;
    background:url(../images/tree/diamond.png) no-repeat;
    margin-left:60px;
    margin-top:65px;
}

#white-diamond{position:absolute;
    width:42px;
    height:36px;
    background:url(../images/tree/whitediamond.png) no-repeat;
    margin-left:60px;
    margin-top:65px;
}

#black-diamond{position:absolute;
    width:42px;
    height:36px;
    background:url(../images/tree/blackdiamond.png) no-repeat;
    margin-left:60px;
    margin-top:65px;
}


.smallimg{width:65px !important;
    height:65px !important;
}



#owner{
    position: absolute;
    width: 38px;
    height: 38px;
    margin-left:-10px;
    margin-top:-10px;
}
#owner_sponsorised {
    position: absolute;
    width: 38px;
    height: 38px;
    margin-left: -10px;
    margin-top: -10px;
    z-index: 9;
    background-repeat: no-repeat!important;
    background-size: contain!important;
    background-color: #f1f1f1!important;
    border-radius: 50%!important;
    border: 4px solid #fff!important;
    background-size: 31px!important;
    background-position: center!important;
}


/*#owner_sponsorised.niveau0{background: url(../images/tree/stars/bronze.png) no-repeat;}*/
#owner_sponsorised.niveau1{background: url(../images/tree/stars/silver.png) no-repeat;}
#owner_sponsorised.niveau2{background: url(../images/tree/stars/gold.png) no-repeat;}
#error-box{
    border: 1px solid #de7777;
    padding: 12px;
    background-color: #ffb5b5;
    border-radius: 4px;
    color: #353535;
    display:none;
}
.clickToaddMember{
	cursor: pointer;
    border: 2px solid #5faa00;
    background: inherit!important;
    background-color: #97c759!important;
    color: white!important;
}

.clickToaddMember:hover{
    opacity:0.5;
}

.addUserContent{
    height: 100%;
    width: 100%;
    display: block;
    padding-top: 9px;
}
.addUserContent span.addtext {
    font-size: 16px;
    font-weight: 100;
}
.addUserContent span.plus {
    font-weight: 100;
    font-size: 32px;
}
.addUserContent span {
    display: block;
}


@media only screen and (max-width: 600px){
    .smart600{display:none;}

    .tree li a.smallimg em:before {
        height: 85px;
        width:85px;
        left:-10px;
        top:-9px;
        z-index:0;
        background: transparent;
        border: 2px solid #35B9AF;
        content: "";
        border-radius:50%;
        filter: alpha(opacity=0);
        opacity: 0;
    }

    #charactermodal{display:none;}
    #cor2modal{display:none;}

    #modalbinary{position:absolute;
        margin-left:-45px;
        margin-top:115px;
        background:#2C3B50;
        width:190px;
        height:55px;

    }

    #arrowmodal{position:absolute;
        left:50%;
        margin-left:-6px;
        margin-top:-6px;
        background:url(../images/tree/trianglesmart.png) no-repeat;
        width:12px;
        height:6px;
    }


    #listainfomodal{float:left;
        position:relative;
        width:190px;
        padding:0px;
    }

    #listainfomodal ul{float:left;
        position:relative;
        width:190px !important;
        background:#2C3B50;
        padding:15px !important;
    }

    #listainfomodal ul li{
        padding:1px 0px !important;
        font-size:13px;
    }


    .tree li a.smallimg #modalbinary{
        margin-left:-65px;
        margin-top:-165px;
    }

}



@media only screen and (max-width: 480px){

}

@media only screen and (max-width: 420px){

}

@media only screen and (max-width: 320px){

}