@import url('https://fonts.googleapis.com/css?family=Chicle');

* { box-sizing: border-box; }
.clearfix::after { content: ""; clear: both; display: table; }

body     { margin: 0; padding: 0; min-width: 1000px; min-height: 100vh;
           background: black url('city.jpg') top left repeat-y; background-size: contain; }
body, td { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; }
#content { background-color: white; }

h1, h2, h3 { margin-top: 20px; }

body      { color: black; }
a:link    { color: #ff1b95; }
a:active  { color: magenta; }
a:hover   { color: magenta; }
a:visited { color: #ff1b95; }

.pseudo-link         { color: #ff1b95; cursor: pointer; }
.pseudo-link:active  { color: magenta; }
.pseudo-link:hover   { color: magenta; }

.segment { margin-bottom: 20px; }
.segment:last-child { margin-bottom: 0; }
.segment:last-child *:last-child { margin-bottom: 0; }

body.standard-document .segment { padding: 20px; }

#content, #header, #footer { width: 80vw; margin: 0 10vw; }

#content.multicol-container                  { display: flex; align-items: stretch; }
#content.multicol-container .main-col        { padding: 20px; width: calc(100% - 200px); }
#content.multicol-container .sidebar         { width: 200px; text-align: center; background-color: #ffe2f4; }
#content.multicol-container .sidebar section { margin-bottom: 20px; }

/******************
 * Header, footer *
 ******************/

#header .logo { padding: 10px 0; }

#header .logo img { width: 100%; }

#page_menu {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}

#page_menu > div {
    display: inline-block;
    flex-grow: 1;
    flex-shrink: 1;
}

#page_menu a {
    display: inline-block;
    width: 100%;
    margin: 0 5px;
    padding: 5px;
}

#page_menu a:link    { color: #ff1b95 !important; }
#page_menu a:active  { color: #ff1b95 !important; }
#page_menu a:visited { color: #ff1b95 !important; }

#footer { text-align: center; }

/********************************************
 * These must go at the end of main classes *
 ********************************************/

html.popup body     { background: white; }
html.popup #content { margin: 0; }

@media all and (max-width: 1200px) {
    #content, #header, #footer { width: 84vw; margin: 0 8vw; }
}
@media all and (max-width: 1100px) {
    #content, #header, #footer { width: 90vw; margin: 0 5vw; }
}
@media all and (max-width: 1000px) {
    #content, #header, #footer { margin: 0; width: 100%; }
}

/**********
 * Roster *
 **********/

.miniaturas_container {
    display: block;
    text-align: center;
}

.miniaturas_container .miniaturas_row {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}

.miniaturas_container .miniaturas_row .item {
    display: inline-block;
    background-color: #ffe2f4;
    margin: 10px;
    padding: 10px;
    width: 20%;
}

.miniaturas_container .miniaturas_row .item .image {
    display: block;
}

.miniaturas_container .miniaturas_row .item .image img {
    border: 1px solid;
    width: 100%;
    height: auto !important;
}

.miniaturas_container .miniaturas_row .item .td_nombre_chica {
    display: block;
}

.miniaturas_container .miniaturas_row .item .td_telefono_chica {
    display: block;
}

/* News */

body[data-tag="novedades"] .miniaturas_container.novedades_chicas_nuevas .miniaturas_row .item {
    width: 25%;
}

/* Home cities */

body[data-tag="home"] .recuadros_ciudades {
    text-align: center;
}

body[data-tag="home"] .recuadro_ciudad {
    margin: 10px;
    display: inline-block;
    vertical-align: top;
    width: calc(50% - 24px);
}

body[data-tag="home"] .miniaturas_container .miniaturas_row .item {
    margin: 5px;
    padding: 5px;
    width: 25%;
    font-size: 9pt;
}

body[data-tag="home"] .miniaturas_container .miniaturas_row .item .td_nombre_chica {
    height: 36px;
    overflow: hidden;
}

body[data-tag="home"] .recuadro_ciudad .nombre_ciudad { font-size: 1.2em; color: white !important; }

/* Etc */

.miniaturas_container .miniaturas_row .item:empty { display: none; }

#selector_de_pagina { display: none; }

.modelo-portada .imagen-portada { width: 100%; }

.home-portada .anchor           { display: flex; align-items: center; justify-content: center; position: relative; }
.home-portada .portrait         { width: 35%; padding: 20px; z-index: 2; }
.home-portada .title            { width: 65%; z-index: 2; text-align: center; padding: 20px;
                                  color: white !important; text-shadow: 2px 2px 5px black;
                                  font-family: 'Chicle', cursive; font-size: 3em;
                                  text-decoration: underline;
                                  text-decoration-color: #ff1b95;
                                  -webkit-text-decoration-color: #ff1b95; }
.home-portada .marquee          { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background-color: black; }
.home-portada .marquee marquee  { opacity: 0.5; filter: blur(1px); }
.home-portada .marquee .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, .5); }
.home-portada .marquee *        { height: 100%; }
.home-portada .portrait img     { width: 100%; border: 1px solid; }

body[data-tag="perfil"] .galerias                  { position: relative; }
body[data-tag="perfil"] .galerias table.galeria    { display: inline-block; width: 100%; white-space: nowrap;
                                                     margin: 20px 0; border: 1px solid black;
                                                     overflow: auto; overflow-y: hidden; }
body[data-tag="perfil"] .galerias table.galeria tr { display: inline-block; }
body[data-tag="perfil"] .galerias table.galeria td { display: inline-block; }
body[data-tag="perfil"] .galerias .scrolling-hint  { vertical-align: top; color: white; background-color: black;
                                                     cursor: pointer; position: relative; text-align: center;
                                                     display: inline-block; width: 24px; top: 20px; }

.feed-items-container {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
}

.feed-items-container .feed-item {
    display: inline-block;
    background-color: #ffe2f4;
    margin: 10px;
    padding: 10px;
    flex-grow: 1;
    flex-shrink: 1;
    max-width: calc(50% - 20px);
}

.feed-items-container .feed-item .title {
    font-size: 0.8em;
}

.feed-items-container .feed-item .thumbnail {
    border: 1px;
    height: 220px;
    background: transparent center center no-repeat;
    background-size: cover;
}

.profile-video { width: 100%; max-height: 50vh; min-height: 300px; background-color: black;
                 border: 1px solid black; }

.inline-block { display: inline-block; }
.nowrap       { white-space: nowrap; }

/************
 * Calendar *
 ************/

.calendario_container { padding: 0; display: block; width: 100%; vertical-align: top; margin-bottom: 20px; }
.calendario_container:first-child { padding-right: 6px; }
.calendario_container.item_container { width: auto; padding: 0; display: block; vertical-align: top; }

.calendario_mes { width: 100%; border: 1px solid black; }
.calendario_mes th, .calendario_mes td { width: 14.28%; padding: 2px; border: 1px solid silver; vertical-align: top; }
.calendario_mes th { text-align: center; }
.calendario_mes .nombre_mes { font-size: 12pt; }
.calendario_mes tbody .numero { float: right; background-color: silver; color: black; padding: 2px 4px;
                                width: 16px; text-align: right; font-size: 6pt; 
                                -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.calendario_mes tbody .numero.fuera_de_rango { color: white !important; background-color: #808080 !important; }
.calendario_mes tbody .numero.ui-state-active { color: white !important; background: #0080FF !important; }
.calendario_mes tbody .entradas { min-height: 40px; clear: both; }
.calendario_mes tbody .entradas .entrada { display: block; font-size: 8pt; padding: 1px 0; text-align: center; margin-bottom: 4px;
                                           -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.calendario_mes tbody .entradas .entrada:last-child { margin-bottom: 0; }
.calendario_mes tbody .celda_fecha.ui-state-active .entrada { color: white !important; background: #0080FF !important; }
.dieresis { font-family: Arial, Helvetica, sans-serif; font-size: 6pt; }


.ciudades_selector                        { text-align: justify; }
.ciudades_selector .item                  { display: inline-block; padding: 0 3px; margin: 0 5px 5px 0; }
.ciudades_selector .item.ui-state-default       { color: black; }
/* .ciudades_selector .item.ui-state-default.muted { color: gray; } */
.ciudades_selector .item.ui-state-active        { background: #0080FF; color: white !important; }
.ciudades_selector .elige_una_ciudad { display: inline-block; }

.dc_root .dc_nombre_modelo {
    display: inline-block; padding: 1px 6px;
    color: white; background-color: #ff1b95;
}

/*******************
 * Framed contents *
 *******************/

#page_menu, .miniaturas_container, #footer .content, .framed_content {
    padding: 20px;
    background-image:
        url('frame/top_left.jpg')     ,
        url('frame/top_right.jpg')    ,
        url('frame/bottom_left.jpg')  ,
        url('frame/bottom_right.jpg') ,
        url('frame/top.jpg')          ,
        url('frame/bottom.jpg')       ,
        url('frame/left.jpg')         ,
        url('frame/right.jpg')        ,
        url('frame/center.jpg')    
    ;
    background-position:
        top left,
        top right,
        bottom left,
        bottom right,
        top,
        bottom,
        left,
        right,
        top left
    ;
    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        repeat-x,
        repeat-x,
        repeat-y,
        repeat-y,
        repeat
    ;
}

.framed_content { margin: 20px 0; }

#header           , #footer           , .framed_content           { color: white; }
#header a:link    , #footer a:link    , .framed_content a:link    { color: #ff1b95; }
#header a:active  , #footer a:active  , .framed_content a:active  { color: magenta; }
#header a:hover   , #footer a:hover   , .framed_content a:hover   { color: magenta; }
#header a:visited , #footer a:visited , .framed_content a:visited { color: #ff1b95; }

/***********
 * Sidebar *
 ***********/

#sidebar-nav a { display: block; }

#sidebar-twitter a {
    display: inline-block;
    width: calc(100% - 40px);
    margin: 20px 20px 0 20px;
    padding: 5px 0;
    color: white;
    background-color: #1DA1F2;
    border-radius: 10px;
    font-size: 0.9em;
}

#sidebar-search { white-space: nowrap; padding: 0 10px; }
#sidebar-search select.combobox { width: 180px; }
#sidebar-search .input-group input { width: 160px; }

/***************************************
 * Selected item on navbar and sidebar *
 ***************************************/

body[data-ver-de*="pagina-"] #page_menu a.ciudad-principal,
body[data-ver-de*="pagina-"] #sidebar-nav a.ciudad-principal,
.highlighted, .highlighted:active, .highlighted:link, .highlighted:visited, .highlighted:hover {
    color: white !important;
    background-color: #9b1750 !important;
}
#page_menu .highlighted         ,
#page_menu .highlighted:active  ,
#page_menu .highlighted:link    ,
#page_menu .highlighted:visited ,
#page_menu .highlighted:hover   {
    color: white !important;
    background-color: #9b1750 !important;
}

/***********
 * Banners *
 ***********/

.banner {
    display: inline-block;
    background: url('logo_con_humo.jpg') center center no-repeat;
    background-size: cover;
    position: relative;
    color: white;
    overflow: hidden;
}
.banner a:link    { color: white; }
.banner a:hover   { color: white; }
.banner a:active  { color: white; }
.banner a:visited { color: white; }

.sidebar-banner { width: 200px; height: 300px; }
.profile-banner { width: 320px; height: 140px; }

/********************
 * City Backgrounds *
 ********************/

body[data-ver-de*="pagina-"]      { background-image: url('backgrounds/cdmx_2.jpg'); }
body[data-ver-de="id-ciudad-373"] { background-image: url('backgrounds/queretaro.jpg'); }
body[data-ver-de="id-ciudad-99"]  { background-image: url('backgrounds/puebla.jpg'); }
body[data-ver-de="id-ciudad-364"] { background-image: url('backgrounds/toluca.jpg'); }

/**********
 * Others *
 **********/

#disclaimer_slide {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .666);
    z-index: 10000;
    line-height: 100vh;
}

#disclaimer_slide .text {
    display: inline-block;
    line-height: normal;
    vertical-align: middle;
    text-align: center;
    color: white;
    background-color: #ff1b95;
    border-radius:  10px;
    padding: 10px;
    box-shadow: 5px 5px 20px black;
    width: 95vw;
    max-width: 400px;
}


.backto_link, .backto_link:link, .backto_link:active, .backto_link:hover, .backto_link:visited {
    color: white;
    background-color: #ff1b95;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 10pt;
    font-weight: bold;
}