body {

    background: #221f20;

}


.form-header {
    display: none;
}

div#AutoNumber1 {
    background: red !important;
}

.tdmain {
    background: #606062;
}


object .form-header {
    display: none;
}

object div#AutoNumber1 {
    background: red !important;
}

object .tdmain {
    background: #606062;
}

a.promo {
    position: absolute;
    top: 1rem;
    z-index: 100;
    padding: 1rem;
    padding-left: 1.5rem;
    background: #67a244;
    color: white;
    text-shadow: -2px 2px 10px #000000;
}
a.promo:hover
{
    text-decoration: none;
    transform: scale(1.1);
}

a.movile_menu:hover {
    text-decoration: none;
}

a.movile_promociones:hover {
     text-decoration: none;
}

.post.container img {
    width: 62%;
    margin: 0 auto;
    display: block;
}

.main.container {

    padding-top: 2rem;

}


a.movile_promociones {
    display: none;
}

a.movile_menu {
    display: none;
}

img.icon {
    width: 16px;
    vertical-align: text-top;
}

img.responsive
{
    width: 100%;
}


/*----- [menu] -----*/

header

{

    position: relative;

    margin-bottom: 5px;

    height: 114px;

}



    

.menu {

    padding-top: 20px;

    width: 90.666667%;

    position: absolute;

    right: 0;

}

.menu.col-md-10.col-sm-10 {
    
    width: 93%;

}



/* - [menu section ] --*/

.menu_section

{

    background: #57585a;

    padding-left: 5%;

    border-radius: 15px 0px 0px 21%;

    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

    width: 101.66667%;

    font-size: x-large;

    max-height: 2.6vw;

    line-height: 2vw;

}

.menu_item {

    background-color: #57585a;

    min-height: 20px;

    padding-left: 0px;

    padding-right: 0px;

    width: 19%;

    text-align: center;

}

.menu_item:last-child {

    padding: 0rem .5rem;

    width: 24%;

}

.menu_link {

	font-size: 1.5rem;

    color: white;

    letter-spacing: 5px;

}

.menu_link:hover,.menu_link:visited  {

    color: white;

    font-weight: bolder;

    text-decoration: none;

}

.menu_link:active {

    color: white;

}



.menu_logo-espacio{

    border-radius: 15px 0px 0px 15px;

}

.menu_section .menu_item:nth-child(even) {

    background: #3f3f41;

}



/* - [menu promocion ] --*/

.promocion_item {

    line-height: 50px;

    border-bottom: 10px solid;

    width: 13.8%;

    /*padding-top: 4%;*/

}

.promocion_item--especial {

    border-color: #67a244;

    width: 17.1%;

    text-align: right;

    padding-right: 0px;

}

.promocion_item--lunes {

    
    border-color: #006837;

}

.promocion_item--martes {

    border-color: #d1e287;

}

.promocion_item--miercoles {

    border-color: #fff100;

}

.promocion_item--jueves {

    border-color: #f5811e;

}

.promocion_item--viernes {

    border-color: #ed1b23;

}

.promocion_item--sabado {

    border-color: #ac1c21;

}



.menu_promocion {

    display: inline-flex;

    flex-direction: row;

    flex-wrap: wrap;

    width: 100.333%;

    position: relative;

    top: -1.3333vh;

    left: 1vw;

}





/*----- [logo] -----*/

.logo {

    z-index: 200;

}

.logo.col-md-2.col-sm-2 {

    width: 14%;

}

.logo img {

    width: 100%;

}





.galeria {

    width: 90%;

    margin: 0 auto;

}

.galeria-init {
    

    background: #3f3f41;

    min-height: 500px !important;

    min-width: calc( 500px * 1.8);

    position: relative;

    margin: 0 auto;
}



.item.active {

    width: 100%;

    height: 100%;

    position: relative;

    background: #3f3f41;

}



.carousel {

    overflow: hidden;

    height: 630px;

    margin-bottom: 3rem;

    max-height: 650px;

    top: 2.5rem;

    display: none;

}

.carousel--open,
.carousel.open {

    display: block;
    background-image: url(../../images/loading.gif);
    background-position: center;
    background-size: 150px;
    background-repeat: no-repeat;

}

.carousel--open-fast,
.carousel.open-fast {
    animation-delay: .5s;
}



@media (max-width: 1000px)

{

    .container

    {

        width: 100%;

        padding-left: 15px;

        padding-right: 15px;

    }

    .menu_item {

        min-width: initial;

        height: 4.3vh;

        padding: 0px 2.5px;

        min-height: 20px;

        line-height: 3.3vh;

    }

    .menu_link {

        font-size: 12px;

        letter-spacing: 2px;

        line-height: 26px;

    }

    .promocion_item {

        padding-top: 0px;

        padding-left: 5px;

        padding-right: 5px;

        line-height: 4.6vw;

    }

    .menu {

        padding-top: 1.33%;

    }

    .menu_promocion {

        top: -.5vw;

    }

}





.carousel-inner {

    height: 600px;

    background: #3f3f41;

    height: 600px !important;

    width: calc( 600px * 1.8);

    position: relative;

    margin: 0 auto;

}



.carousel-indicators {

    bottom: -6px;

}



.carousel-control {

    background: none !important;

}



.carousel-caption {

    position: absolute;

    bottom: 0;

    width: 100%;

    left: 0%;

    padding: 0px 0px;

    border-bottom: 5px solid red;

    background: gray;

}



.carousel-caption h3 {

    color: white;

    margin: 0;

    z-index: 100;

    text-shadow: none;

    font-size: 2.5rem;

    text-transform: uppercase;

}



.carousel-indicators li {

    border-radius: 0px;

    border: 2px solid gray;

    width: 15px;

    height: 15px;

    margin-right: 2rem;

}



.carousel-indicators .active {

    width: 15px;

    height: 15px;

    border: none;

    background: gray;

    position: relative;

    top: -1px;

    margin-right: 2rem;

}



.item.active img,.item img {

    transition: .5s;

    width: 100%;

}





.footer {

    text-align: right;

    margin-bottom: 3rem;

    padding: 0;

}

.footer__title {

    color: white;

    text-transform: uppercase;

    font-size: 2rem;

    font-weight: bolder;

}

.footer__title-init {

    color: #949494;

}

.footer__content span {

    display: block;

    color: gray;

    font-weight: bolder;

    font-size: 1.9rem;

}



/*INIT*/

.bg-white {

    background: white;

}



.logo {

    position: relative;

}



.logo__imagen-init {

    position: absolute;

    top: 0px;

    width: 84% !important;

    left: 16px;

}

.menu_section-init {

    opacity: 0;

}

.carousel-init {

    opacity: 0;

}

.galeria-init {

    background: gainsboro;

}





.object_menu_animation {

    width: 9.5%;

    position: absolute;

    bottom: 0;

    right: 0;

    animation-name: object_left;

    animation-duration: 5s;

    animation-delay: 1.3;

    animation-fill-mode: forwards;

    z-index: 100;

}

.logo__imagen-init

{

    animation-name: logo;

    animation-delay: 4.5s;

    animation-duration: .5s;

    animation-fill-mode: forwards;

}

.bg-white,.bg-white,.galeria-init{

    animation-name: bg_black;

    animation-delay: 4.5s;

    animation-duration: .5s;

    animation-fill-mode: forwards;

}

.menu_section-init,.carousel-init,.playlist-init{

    animation-name: aparecer;

    animation-delay: 4.5s;

    animation-duration: .5s;

    animation-fill-mode: forwards;

}



.barra-load {

    position: absolute;

    width: 100%;

    background: white;

    height: 20px;

    bottom: 0;

    z-index: 1;

    animation-name: object_left_row;

    animation-duration: 5s;

    animation-fill-mode: forwards;

}



.menu_item:hover {

    cursor: pointer;

}



a.menu_link {

    display: inline-block;

}



@keyframes object_left_row

{

    0%{

        right: 0%;

    }

    95%{

       right: 105%; 

       opacity: 1;

       width: 0%;

    }

    97%{

       right: 210%; 

       opacity: 0; 

    }

    100%

    {

        right: 100%; 

        opacity: 0;

    }

}



/*animaciones*/

@keyframes object_left

{

    0%{

        right: 0;

    }

    90% {
       width: 8.5%; 
    }

    95%{

       right: 90%; 

       opacity: 1;

       width: 5%;

    }

    99.9%

    {

        right: 85%; 

        opacity: 0;

        width: 0%;

    }

    100%

    {

        right: 150%; 

        opacity: 0;

    }

}

@keyframes logo

{

    0%{

       opacity: 1;
       transition: scale(1.1);

    }

    100%

    {

        opacity: 0;
        transition: scale(1);

    }

}

@keyframes bg_black

{

    0%{

        background-color: white;

    }

    100%

    {

        background-color: #221f20;

        opacity: 1;

    }

}

@keyframes aparecer

{   

    0%{

        opacity: 0;

    }

    100%

    {

        opacity: 1;

    }

}



@keyframes desaparecer

{   

    0%{

        opacity: 1;

    }

    99%

    {

        opacity: 0;

    }
    100%
    {
        opacity: 0;
        display: none;
        z-index: -100;
        position: absolute;
        left: -100vw;
    }

}



/**/

.playlist {

    position: relative;

    z-index: 100;

}



.playlist-init

{

    opacity: 0;

}

#player {

    position: absolute;
    
    width: 25%;
    
    left: 72.2%;
}


iframe#playlist {

    min-height: 100px !important;

}



#player h3 {

    margin: 0;

    background: gray;

    text-align: center;

    color: white;

    margin-bottom: 5px;

    width: 106%;

    font-size: 18px;

    line-height: 24px;

}



ul#playlist {

    padding: 0;

    background: transparent;

    box-shadow: initial !important;

    border: 0;

}



#playlist li {

    list-style: none;

    margin-bottom: 5px;

    color: white;

    background: #58595b;

    padding-left: 5px;

    line-height: 30px;

    width: 100%;

}

#playlist li:nth-child(even) {

    /*background: #6d6e70;*/

}



#playlist li a {

    color: white;

    text-decoration: none;

}



#playlist li a:hover {

    background: #58595b;

}



#playlist li.active a {

    /* color: black; */

    background: transparent;

}



#playlist li.active,#playlist li:hover {

    border-left: 15px solid rgba(34, 31, 32, 0.2);

    opacity: 1;

}



#playlist li {

    opacity: 0.5;

}





#loading__text {

    position: absolute;

    top: 60vh;

    font-size: 120px;

    width: 100%;

    z-index: 100;

    text-align: center;

    color: black;

    margin: 0 auto;

}



#loading__text.load {

    animation-name: desaparecer;

    animation-delay: .3s;

    animation-duration: .7s;

    animation-fill-mode: forwards;

}



#contenido summary {

    width: 80%;

    margin-left: 5%;

    font-size: 1.8rem;

    position: relative;

    outline: none;

    color: grey;

}



#contenido a.btn {

    right: -10%;

    position: absolute;

    font-style: italic;

    background: #3f3f41;

    color: white;

    top: 25%;

}



/**/

.post p {

    color: #a5a5a5;

    font-size: 18px;

    width: 90%;

    margin: 0 auto;

    text-align: justify;
    
    padding-bottom: 1rem;

}



.post {

    margin-bottom: 5rem;

}



.post h2 {

    width: 90%;

    margin: 0 auto;

    margin-bottom: 2rem;

    margin-top: 2rem;

    font-size: 5rem;

    color: grey;

}



.post.container {

    position: relative;

    top: -3rem;

    background: #221f20;

}



.post ul {

    margin-left: 5%;

    color: grey;

    font-size: 18px;

}



.post ul li:hover {

    color: white;

}



ul.galery {

    display: inline-flex;

    flex-wrap: wrap;

}



ul.galery li {

    box-sizing: border-box;

    display: inline-block;

    background: #3f3f41;

    padding: 17px;

    width: 31%;

    float: left;

    margin: 6px;

}



.option__shop__back.media__image {

    background-size: 100%;

    height: 100%;

    width: 100%;

    content: "";

    background-position: center 0%;

    background-repeat: no-repeat;

}



object.option__shop__back.media__image {

    width: 100%;

}


@media only screen and  (min-width: 1400px) {
    
    .container {
        
        width: 1300px;

    }

    header {

        height: 125px !important;
    
    }

    .menu_promocion {
    
        padding-top: 19px;

        width: 100.5%;

    }

    #player {
    
        left: 72.5% !important;
    
    }
}


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

    .menu_promocion {

        top: calc(-1.4vh + 14px ) !important;

    }

    .carousel {

        height: 630px;

    }

    .object_menu_animation {

        bottom: calc( 1.5vh - 10px );

    }

}

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

    header {

        margin-bottom: 1rem;

    }

    .playlist {

        top: 163px;
    
    }

    .promocion_item {
        line-height: 30px;
    }
}



@media only screen and (min-width: 1450px)  {

    header {
        height: 160px !important;
    }

}


@media only screen and (min-width: 1400px) {
    
    .main.container.bg-white {
        
        width: 84% !important;

        max-width: 1400px !important;
    
    }

    .object_menu_animation {

        bottom: calc( 1.5vh - 3px );
    }
}

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

    #player {
        
        left: 71.5%;
    
    }

    header {
        height: 87px !important;
    }

    .menu_promocion {

        top: calc(-1.4vh + -7px ) !important;

    }

    .object_menu_animation {
        bottom: calc( 1.5vh + 15px );
    }
}

@media only screen and (min-width: 1300px) {

    header {
        
        height: 96px;
    
    }

    .menu_promocion {
        
        top: 1px !important;
    
    }

}

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

    header {
    
        height: 113px;
    
    }

    .playlist {
        
        top: 0;
    
    }

    #player {
    
        left: 72.3%;
    
    }

    img.logo__imagen-init {
    
        width: 82% !important;
    
    }
    

    .menu_promocion {
        
        top: -9px;
    
    }

    .promocion_item {
    
        line-height: 35px;
    
    }
}

@media only screen and (max-width: 768px){
    .carousel-indicators {
        bottom: -16px !important;
    }

    .main.container {
        padding: 0;
        overflow-x: hidden;
    }

    header {
        position: relative;
        position: fixed;
        z-index: 100;
        /*background: rgb(33, 31, 32);*/
        width: 100%;
        /* overflow: hidden; */
    }

    .logo {
        width: 25% !IMPORTANT;
        margin: 0 auto;
        position: absolute;
        left: 39%;
        top: 1rem;
        padding-left: 0;
    }

    img.logo__imagen {
        height: 65px;
        width: auto !important;
        margin: 0 auto;
        display: block;
    }

    img.logo__imagen-init {
        height: 65px;
        width: auto !important;
        left: calc(50% - 44.89px );
        margin: 0 auto;
    }

   
    .menu_item {display: block;width: 100% !important;padding: 0rem;line-height: 10vh;/* font-size: 24px !important; */height: 10vh;}

    .menu {
        position: fixed;
        top: 68px;
    }
    nav.menu_section {
        display: none;
        z-index: 200;
        width: 100%;
        padding-left: 0;
        height: auto;
        max-height: inherit;
        margin: 0;
        margin-top: 20px;
        animation-delay: 0s;
    }

    nav.menu_section.open
    {
        display: block;
        animation-delay: 0s;
    }

    nav.menu_section::before {
        display: none;
    }

    .menu {
        width: 100% !important;
        padding: 0 !important;
    }


    a.menu_link {
        font-size: 18px !important;
    }

    a.movile_menu {
        float: left;
        padding: 4rem;
        font-size: 18px;
        color: white;
        display: block;
        width: 25%;
        text-align: center;
        text-decoration: none;
    }

    a.movile_promociones {
        float: right;
        padding: 4rem;
        font-size: 18px;
        color: white;
        /*background: #211f20;*/
        display: block;
        overflow: hidden;
        height: 90px;
    }

    nav.menu_promocion.row {
        width: 103%;
    }

    a.menu_link {
        font-size: 0px !important;
    }

    .promocion_item {
        height: 25px;
    }

    header {
        height: 90px;
        margin-bottom: 0 !important;
        animation-name: bg_black;
        animation-delay: 4.4s;
        animation-duration: .5s;
        animation-fill-mode: forwards;
    }

    body.bg-white {
        overflow-x: hidden;
    }

    div.carousel,.galeria,.galeria-init  {
        width: 100vw;
        height: 55vw;
        margin: 0 auto;
        margin-bottom: 5rem;
        min-width: inherit !important;
        min-height: inherit !important;
    }

    .carousel-inner
    {
        width: 100vw !important;
        height: 55vw !important;
    }

    ol.carousel-indicators {
        display: none;
    }

    footer.row {
        margin-top: 4rem;
        padding-right: 1rem;
    }

    .open a.menu_link {
        font-size: 18px !important;
    }

    div#player {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
    }

    section.playlist {
        padding-top: 101px;
        width: 100%;
        z-index: 1;
    }

    div#playlist_dropdown {
        width: 100%;
    }

    .footer span {
        font-size: 16px;
        text-align: right;
    }

    .footer.col-xs-12 span,
    .footer.col-xs-12 h2
    {
        text-align: center;
    }

    p#loading__text {
        top: 30vh;
        font-size: 5rem;    
    }

    nav#menu_promocion.open {
        display: block;
        top: 20px!important;
        max-height: 100vh;
        min-height: 100vh;
        overflow: overlay;
    }

    nav#menu_promocion.open .promocion_item {
        display: block;
        width: 100%;
        height: 13vh;
        line-height: 13vh;
        text-align: center;
        background: #221f20;
    }

    #player h3 {
        line-height: 35px;
        height: 35px;
    }

    .footer__title {
        font-size: 16px;
    }

    a#btn_leermas {
        position: relative !important;
        display: block;
    }

    .post {
        position: relative;
        top: -10rem;
        background: #221f20;
        margin-bottom: -5rem;
    }

    nav#menu_section {
        max-height: 100vh;
        min-height: 100vh;
        border-radius: 0;
        overflow-y: overlay;
    }

    h1 {
        font-size: xx-large;
        text-align: center;
    }

    div#bbplayer {
        height: 40px;
    }

    span#btn_play {
        border-radius: 0;
        border: 1px solid rgba(0, 0, 0, 0.01) !important;
        /* background: #6f1d1d; */
        background-size: 78%;
        height: 40px !important;
        width: 40px !important;
    }

    .playerWindow {
        top: 10px !important;
    }

    summary {
        width: 90% !important;
    }

    a#btn_leermas {
        right: 0% !important;
    }

    div#bbplayer {
        background: #171616;
        border-right: 5px solid #171616;
    }

    span.bb-rewind {
        height: 20px !important;
        width: 20px !important;
        background-size: 70%;
    }

    span.bb-forward {
        height: 20px !important;
        width: 20px !important;
        background-size: 75%;
    }
}




/*para pantallas super pequeñas*/
@media only screen and (max-width: 320px){

    a.movile_promociones {
        padding: 0;
        font-size: 16px;
        line-height: 60px;
        padding-right: 2rem;
    }

    .logo.col-md-2.col-sm-2 {
        width: 30px !important;
    }

    img.logo__imagen {
        height: 40px !important;
    }

    img.logo__imagen-init {
        height: 40px !important;
        left: calc(50% - 15px);
    }

    a.movile_menu {
        padding: 0;
        font-size: 16px;
        line-height: 60px;
    }

    header {
        height: 61px !important;
    }

    .menu.col-md-10.col-sm-10 {
        top: 46px;
    }

}