@charset 'utf-8';

.wrapper{
    max-width: 1000px;
    width: 100%;
}

/*
    Web Bar
    ===============
    DESC: Estilos para la barra de navegación de cada web de usuario
*/

.web-bariph4{
    position: relative;
    background-color: #FFF;
    color: #ceac45;
    overflow: hidden;
    padding: 1px;
    
}

.web-bariph4 .web-bariph4-element.title {
    padding-left: 1rem;
    padding-right: 1rem;
    /*text-transform:capitalize;*/
    font-size:1.2rem;
    font-weight: bold;
    text-align: left;
    display: none;
}
.web-bariph4 .eslogan{
    font-size:.9rem;
}

.web-bariph4 .web-bariph4-element,
.web-bariph4 .web-bariph4-menu > li,
.web-bariph4 .web-bariph4-menu > li > a{
    line-height: 3.125rem;
    padding: 0px 0.625rem;
    font-size: 1rem;
    cursor: pointer;
    color: inherit;
    display: block;
    position: relative;
    vertical-align: middle;
    height: 3.125rem;
    margin: 0;
    /*text-transform: capitalize;*/
}

.web-bariph4 .web-bariph4-menu {
    width: 100%;
    padding: 0;
    border-style: solid;
    border-color: #eeaa11;
    border-width: 1px 0 1px 0;
    position: relative;
    display: block;
    background-color: #fff;
    clear: both;
    margin: 0;
}

.web-bariph4 .web-bariph4-menu > li {
    padding: 0px;
}




.web-bar{
    position: relative;
    background-color: #fff;
    color: #ceac45;
    overflow: hidden;
    padding: 1px;
    /*Añadido Luis*/
    width: 100%;
}

.web-bar .web-bar-element.title {
    padding-left: 1rem;
    padding-right: 1rem;
    /*text-transform:capitalize;*/
    font-size:1.2rem;
    font-weight: bold;
    text-align: left;
    display: none;
}
.web-bar .eslogan{
    font-size:.9rem;
}

.web-bar .web-bar-element,
.web-bar .web-bar-menu > li,
.web-bar .web-bar-menu > li > a{
    line-height: 3.125rem;
    padding: 0px 0.325rem;
    font-size: 1rem;
    cursor: pointer;
    /*color: inherit;*/
    display: block;
    position: relative;
    vertical-align: middle;
    height: 3.125rem;
    margin: 0;
    border-style: solid;
    border-color: #ceac45;
    border-width: 0 1px 1px 0;
    /*text-transform: capitalize;*/
}

/*Añadido Luis barra menu*/
@media all and (max-width:900px){
    .web-bar .web-bar-menu > li >a{
        font-size: 0.8rem;
    } 
}
/*añadido Luis barra menu*/
@media all and (max-width:800px){
    .web-bar .web-bar-menu > li >a{
        font-size: 0.66rem;
    } 
}

/*Añadido Luis eslogan y titulo*/
@media all and (max-width:950px){
    .textmain .eslogan{
        font-size:0.9rem;
    } 
    .textmain .titulo{
        font-size:0.9rem;
    }
}
/*Añadido Luis eslogan y titulo*/
@media all and (max-width:870px){
    .textmain .eslogan{
        font-size:0.8rem;
    } 
    .textmain .titulo{
        font-size:0.8rem;
    }
}
/*Añadido Luis eslogan y titulo*/
@media all and (max-width:750px){
    .textmain .eslogan{
        font-size:0.663rem;
    } 
    .textmain .titulo{
        font-size:0.663rem;
    }
}

@media all and (max-width:700px){
    /*Añadido Luis eslogan y titulo*/
    .textmain .eslogan{
        font-size:1rem;
    } 
    /*Añadido Luis eslogan y titulo*/
    .textmain .titulo{
        font-size:1rem;
    }
    /*Añadido Luis eslogan y titulo*/
    .web-bar .web-bar-menu > li > a{
         font-size:1rem;
    }
    
    
    .web-bar .web-bar-element.title {
        display: inline-block;
    }
    
    .web-bar .web-bar-menu{
        max-height:0;
        overflow-y: auto;
        -webkit-transition:max-height .9s;
        transition:max-height .9s;
    }
    
    .web-bar .web-bar-menu.active{
        max-height: calc(100vh - 70px);
    }
    
    .web-bar .web-bar-menu  a{
        box-shadow: 3px 0px 0px #ceac45 inset;
        -webkit-transition:all .5s;
        transition:all .5s;
    }

    .web-bar .web-bar-menu a:hover,
    .web-bar .web-bar-menu a:active,
    .web-bar .web-bar-menu a.active{
        box-shadow: 700px 0px 0px #ceac45 inset;
        text-indent: 1rem;
        font-weight: bold;
        text-shadow:#fff 0px 0px 4px;
    }
    
    .web-bar .web-bar-pullbutton {
        position: absolute;
        top:.5rem;left:.5rem;
        color: #eeaa11;
        cursor: pointer;
        font: 2rem/1.25rem sans-serif;
        height: 2.125rem;
        /*width: 2.125rem;*/
        vertical-align: middle;
        text-align: center;
        margin: 0px;
    }

}

.web-bar .web-bar-menu {
    width: 100%;
    padding: 0;
    border-style: solid;
    border-color: #eeaa11;
    border-width: 1px 0 1px 0;
    position: relative;
    display: block;
    background-color: #fff;
    clear: both;
    margin: 0;
}

.web-bar .web-bar-menu > li {
    padding: 0px;
}




.poster{
    height: auto;
}


.poster img{
    height: auto;
    width:100%;
}

.textmain{
    margin: 0;
    /*background-color: #eeaa11;
    color: #fff;*/
    background-color: #fff;
    color: #eeaa11;
    text-align: right;
    padding: 0 1rem;
    line-height: 1.7rem;
}

.textmain > *{
    display: block;
    text-align: center;
}

.textmain .eslogan:before { content: open-quote; }
.textmain .eslogan:after  { content: close-quote; }


@media all and (min-width:700px){
    
    .web-bar{
        height: 1.725rem;
        display: flex;
    }
    
    .web-bar .web-bar-menu {
        width: auto;
        display: block;
        float: left;
        margin: 0px;
        padding: 0px;
        background-color:inherit;
        border:none;
        clear: none;
    }
    
    .web-bar .web-bar-element,
    .web-bar .web-bar-menu > li,
    .web-bar .web-bar-menu > li > a{
        float: left;
        line-height: 1.725rem;
        height: 1.725rem;
    }
    
    .web-bar .web-bar-menu > li:hover, 
    .web-bar .web-bar-menu > li > a:hover, 
    .web-bar .web-bar-menu > li:active, 
    .web-bar .web-bar-menu > li > li > a:active,
    .web-bar .web-bar-menu > li > a.active{
        background-color:  #eeaa11;
    }
    
    .web-bar .web-bar-pullbutton {
        display: none;
    }
    
    .textmain{
        height: 2.5rem;
        line-height:2.5rem;
    }
    
    .textmain .titulo{
        float: left;
    }

    .textmain .eslogan{
        float: right;
        background: #fff;
    }
}



.containerModules{
    overflow: hidden;/*clear fix hack*/
}

.containerModules .module{
    float: left;
    background-color: rgba(0, 128, 128, 0.76);
    margin:0 10px 10px 0;
}

.containerModules .module.hide{
    display: none;
}


.containerModules .module.small{
    width: 300px;
    height: 300px;
}

.containerModules .module.normal{
    width: 400px;
    height: 400px;
}

.containerModules .module.large{
    width: 500px;
    height: 500px;
}

.section{
    width: 400px;
    height: 400px;
}

.section-title{
    height:  2.5rem;
    line-height:  2.5rem;
    color: #FFF;
    background: #886611 none repeat scroll 0% 0%;
    /*text-transform: capitalize;*/
    font-size: 1rem;
    border-left: 10px solid #cef0f2;
    padding-left: 20px;
    margin: 0;
}


/* Comentarios y Respuestas*/

.post-comment-container,
.comment-wall,
.post-respuesta-container,
.respuesta-wall{
    text-align:left;
    background-color: #fff;
    padding-top: 1px;
    position: relative;
}

.post-comment-header,
.post-respuesta-header{
    padding: 1rem;
}

.post-comment-header > *,
.post-respuesta-header > *{
    display: inline-block;
    vertical-align: middle;
}


.post-comment-form,
.post-respuesta-form{
    width: 90%;
    margin: .5rem auto;
}

.post-comment-form .control-group,
.post-respuesta-form .control-group{
    margin: .8rem 0;
}

.post-comment-form .control-group.control-group-inline,
.post-respuesta-form .control-group.control-group-inline{
    display: inline-block;
    text-align: center;
}

.post-comment-form .control-group > *,
.post-respuesta-form .control-group > *{
    display: block;
    margin-top: 1.5rem;
}

.post-comment-form .control-group.control-group-inline > *,
.post-respuesta-form .control-group.control-group-inline > *{
    display: inline-block;
    vertical-align:middle;
    margin-top: .5rem;
}

#captcha{
    width: 250px;
}

#captcha-img{
    border: 2px solid #ceac45;
}

.post-comment-form .control-group .label,
.post-respuesta-form .control-group .label{
    font-size: 1.2rem;
    color: #ceac45;
    padding: .8rem;
}

.post-comment-form .control-group .control,
.post-respuesta-form .control-group .control{
    outline: none;border: none;
    padding: .6rem;
    border:1px solid #ceac45;
    -webkit-transition:box-shadow .5s;
    transition:box-shadow .5s;
    margin: 0;
}

@media all and (min-width:500px){
    .post-comment-form .control-group .control,
    .post-respuesta-form-form .control-group .control{
        margin-left: 50px;
    }   
}

.post-comment-form .control-group .control:focus,
.post-respuesta-form .control-group .control:focus{
    box-shadow: #ceac45 0 0 10px 2px;
}

.post-comment-form .control-group textarea.control,
.post-respuesta-form .control-group textarea.control{
    width: 90%;
    height: 200px;
    resize:none;
}

.comment-wall,
.respuesta-wall{
    height: 70%;
    overflow: auto;
    margin: 0;
    padding: 0;
}

.comment-wall .comment,
.respuesta-wall .respuesta{
    padding:0.5rem 0;
    
    overflow: hidden;
}


.comment-wall .comment > .photo,
.respuesta-wall .respuesta > .photo{
    border-radius: 8px;
    border:2px solid #ceac45;
    background-color: #ceac45;
    margin: .2rem .6rem;
    float: left;
}

.comment-wall .comment .comment-info,
.respuesta-wall .respuesta .respuesta-info{
    margin-top: 3px;
    margin-bottom: 4px;

}

.comment-wall .comment  .comment-title,
.respuesta-wall .respuesta .respuesta-title{
    font-size: 1.2rem;
    font-weight: bold;
    color:#ceac45;
    margin:0 .2rem .3rem .2rem;
    display: inline-block;
    vertical-align: middle;
}

.comment-wall .comment  .comment-title + .visibility,
.respuesta-wall .respuesta .respuesta-title + .visibility{
    padding: .5rem;
    border-radius: 12px;
    font-size: 1.2rem;
    color: #fff;
}

.comment-wall .comment  .comment-title + .visibility.visibilidad0,
.respuesta-wall .respuesta .respuesta-title + .visibility.visibilidad0{
    background-color: #B0C4DE;
}

.comment-wall .comment  .comment-title + .visibility.visibilidad20,
.respuesta-wall .respuesta .respuesta-title + .visibility.visibilidad20{
    background-color: #00BFFF;
}

.comment-wall .comment  .comment-title + .visibility.visibilidad15,
.respuesta-wall .respuesta .respuesta-title + .visibility.visibilidad15{
    background-color: #ceac45;
}

.comment-wall .comment  .comment-title + .visibility.visibilidad10,
.respuesta-wall .respuesta .respuesta-title + .visibility.visibilidad10{
    background-color: #FFD700;
}

.comment-wall .comment .comment-info .name,
.respuesta-wall .respuesta .respuesta-info .name{
    font-size: 14px;
    font-weight: bold;
    color: #ceac45;
}

.comment-wall .comment .comment-info .date,
.respuesta-wall .respuesta .respuesta-info .date{
    font-size: .8rem;
    color: #eeaa11;
}
.comment-wall .comment .comment-info li + li,
.respuesta-wall .respuesta .respuesta-info li + li{
    border-left: 1px solid #ceac45;
    margin-left: 3px;
    padding-left: 9px;
}

.comment-wall .comment .text,
.respuesta-wall .respuesta .text{
    color: #eeaa11;
    line-height: 19px;
    padding: 0 .5rem;
}

.action-bar{
    background-color: transparent;
    margin: .2rem auto;
    padding: 0.2rem;
}

.action-bar[max-width="500px"] .rating-bar > *{
    display: block;
}
.action-bar[max-width="500px"] .rating-bar-respuesta > *{
    display: block;
}

.action-bar[max-width="500px"] .comments-bar,
.action-bar[max-width="500px"] .respuesta-bar{
   text-align: center;
   padding: .2rem 0;
}

.action-bar[min-width="500px"] .rating-bar > *,
.action-bar[min-width="500px"] .rating-bar-respuesta > *,
.action-bar[min-width="500px"] .comments-bar > *,
.action-bar[min-width="500px"] .respuesta-bar > *{
    display: inline-block;
    vertical-align: middle;
}

.rating-bar,rating-bar-respuesta{
    text-align: center;
    width: 100%;
    padding-bottom: 5px;
    margin-bottom: 5px;
    position: relative;
}

.rating-bar,rating-bar-respuesta::after{
    content: '';
    bottom: 0;
    left: 3%;right: 3%;
    height: 2px;
    position: absolute;
}

.rating-bar > *,
.rating-bar-respuesta > *{
    display: block;
}

.rating-bar-respuesta,
.rating-bar .desc
{
    alert: alert-warning;
    font-size: 0.7rem;
    font-weight:bold;
    text-align: center;
    
}



.rating-bar .btn,
.rating-bar-respuesta .btn{
    margin:.1rem;
}

.respuestas-count .statistics-visibility,
.comments-bar .statistics-visibility,
.respuesta-bar .statistics-visibility{
    padding: .2rem;
    margin: 0 .2rem;
    color: #fff;
    border-radius: 12px;
}

.respuestas-count .statistics-visibility.visibilidad0,
.comments-bar .statistics-visibility.visibilidad0,
.respuesta-bar .statistics-visibility.visibilidad0{
    background-color: #B0C4DE;
}

.respuestas-count .statistics-visibility.visibilidad10,
.comments-bar .statistics-visibility.visibilidad10,
.respuesta-bar .statistics-visibility.visibilidad10{
    background-color: #FFD700;
}

.respuestas-count .statistics-visibility.visibilidad15,
.comments-bar .statistics-visibility.visibilidad15,
.respuesta-bar .statistics-visibility.visibilidad15{
    background-color: #ceac45;
}
.respuestas-count .statistics-visibility.visibilidad20,
.comments-bar .statistics-visibility.visibilidad20,
.respuesta-bar .statistics-visibility.visibilidad20{
    background-color: #00BFFF;
}




@media all and (min-width:1000px){
    
    .page-content > * {
        display: inline-block;
        vertical-align: top;
    }

    .modules{
        width: calc(100% - 200px);
    }

    .publicidad{
        width:200px;
    }

}

.contact-bar{
    width: 100%;
    padding: 1rem;
    text-align:right;
}


.friends-bar{
    padding:.5rem 1rem;
    background-color: #eeaa11;
    font-size: 1.2rem;
    color:#fff;
    position: relative;
}

.friends-bar li .item-info{
    display: block;
    width: 100%;
    position: relative;
    color: #fff;
    padding: .6rem;
    border-radius: 8px;
    text-decoration: none;
    font-size: 2rem;
}

.friends-bar li .item-info .count{
    position: absolute;
    top:0;right:.6rem;
    text-align: center;
    padding:.3rem .7rem;
    border-radius: 100%;
    background-color: rgb(255,0,0);
    color:#fff;
    font-size: 1rem;
    font-weight: bold;
}

.friends-bar li .dropDownBox{
    top: 100%;
    left: 0;
    width: 100vw;
    z-index: 20;
  
}

@media all and (min-width:400px){
    
    .friends-bar li{
        position: relative;
    }


    .friends-bar li .dropDownBox{
        top:130%;
        left: -15%;
    }
}


.friends-bar li .dropDownBox .loader{
    position: absolute;
    top: 0;left:0;right: 0;bottom: 0;
    width: 60px;height: 60px;
    margin: auto;
    text-align: center;
    line-height: 60px;
}

.pending-friendship-list{
    max-height: 300px !important;
}

.pending-friendship-list .item{
    color: #ceac45;
    letter-spacing: -0.5rem;
    padding: .9rem 0;
    text-align: left;
    
}

.pending-friendship-list .item:not(:first-child){
    border-top: 1px solid #ceac45;
}

.pending-friendship-list .item > *{
    display: inline-block;
    vertical-align: top;
    letter-spacing: normal;
}

.pending-friendship-list .item .photo{
    width: 20%;
}

.pending-friendship-list .item .photo img{
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 2px solid #ceac45;
    background-color: #ceac45;
}

.pending-friendship-list .item .data{
    width: 80%;
    padding: 0px 0.6rem;
}

.pending-friendship-list .item .data .username{
    font-weight: bold;
    color: #ceac45;
}

.pending-friendship-list .item .data p{
    margin: .3rem 0;
}

.pending-friendship-list .item .actions{
    display: block;
    margin: .3rem 0;
    text-align: center;
}

.pending-friendship-list .item .actions .btn{
    margin: 0 .3rem;
}


#to_top{
    border-radius: 8px;
    background-color: #886611;
    padding: 1rem 1rem;
    -webkit-transition: all .5s;
    transition: all .5s;
}

#to_top .fa{
    line-height: 2rem;
}

#to_top:hover{
    background-color: #fff;
    color: #886611;
}
.ventana-chat{
    text-align: center;
    background-color: red;
}