/*

To change this license header, choose License Headers in Project Properties.

To change this template file, choose Tools | Templates

and open the template in the editor.

*/



* {

    box-sizing: border-box;

}



html,

body {

    color: #444;

    font-family: 'Helvetica', 'Verdana', sans-serif;

    -moz-osx-font-smoothing: grayscale;

    -webkit-font-smoothing: antialiased;

    margin: 0;

    padding: 0;

    background-color: #222;

    background: url(../images/fondo.jpg) no-repeat center left fixed; 

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover;

}



a{

    color: #fff;

}

a:hover{

    color: #fdda24;

}



html {



}



body {

    align-content: stretch;

    align-items: stretch;

    display: flex;

    flex-direction: column;

    flex-wrap: nowrap;

    justify-content: flex-start;

}



@font-face {

  font-family: 'Niconne-Regular';

  src: url('../fonts/Niconne-Regular.ttf')  format('truetype'); /* Safari, Android, iOS */

}



main h1{

    font-family: 'Niconne-Regular';

    text-align: center;

    font-size: 2.5em;

}



.header {

    align-content: center;

    align-items: stretch;

    background: #EF3340;

    box-shadow:

        0 0.5em 0.6em 0 rgba(0, 0, 0, 0.14),

        0 0.5em 0.8em 0.1em rgba(0, 0, 0, 0.12),

        0 0.6em 0.5em -0.5em rgba(0, 0, 0, 0.2);

    color: #fff;

    font-size: 1em;

    height: 4.5em;

    justify-content: flex-start;

    padding: 0em 1em 0 0.5em;

    position: fixed;

    transition: transform 0.233s cubic-bezier(0, 0, 0.21, 1) 0.1s;

    width: 100%;

    z-index: 1000;

    border-bottom: 10px solid #fdda24;

}



.header h1 {

    padding: 0.8em 0em 0em 0em;

    font-size: 1.1em;

    font-weight: 400;

    margin: 0;

}



.header p{

    padding: 0em;

    font-size: 0.86em;

    font-weight: 400;

    color: #FDDA24;

    margin: 0;

}



.header img {

    float: left;

    border: none;

    cursor: pointer;

    height: 4em;

    margin-right: 0.8em;

    outline: none;

    overflow: hidden;

    text-indent: -30000px;

    width: 4em;

}



.header button {

    border: none;

    cursor: pointer;

    height: 1em;

    margin-right: 1em;

    opacity: 0.7;

    outline: none;

    overflow: hidden;

    text-indent: -30000px;

    padding: 1.1em 0em;

    transition: opacity 0.333s cubic-bezier(0, 0, 0.21, 1);

    width: 2em;

}



.header #butMenu {

    background: url(../images/menu.svg) center center no-repeat;

}



.header #butRefresh {

    background: url(../images/refresh.svg) center center no-repeat;

}



.header #butInstall {

    background: url(../images/install.svg) center center no-repeat;

}



#logo{

    width: 300px;

    float: left;

}



#title span{

    font-size: 0.9em;

    color: #888;

    font-style: italic; 

}



.main {

    padding-top: 3em;

}



.box {

    width: 880px;

    background-image: url(../images/textura_pizarra.jpg);

    background-repeat: repeat;

    padding: 5px;

    margin: 10px;

    border-image-source: url(../images/textura_borde.jpg);

    border-image-slice: 20;

    border-width: 10px;

    border-style: solid;

    color: #fff;

}



.about{

    text-align: justify;

}



span.hashtag{

    color: #EF3340;

    font-style: italic;

}



#instafeed img{

    max-width: 100%;

    max-height: 100%;

    display: block; 

}



#canilla_box_left{

    width: 430px;

    float: left;

    background-image: url(../images/textura_pizarra.jpg);

    background-repeat: repeat;

    padding: 0px 15px 15px 15px;

    margin: 10px;

    border-image-source: url(../images/textura_borde.jpg);

    border-image-slice: 20;

    border-width: 10px;

    border-style: solid;

}



#canilla_box_right{

    width: 430px;

    float: right;

    background-image: url(../images/textura_pizarra.jpg);

    background-repeat: repeat;

    padding: 0px 15px 15px 15px;

    margin: 10px;

    border-image-source: url(../images/textura_borde.jpg);

    border-image-slice: 10;

    border-width: 10px;

    border-style: solid;

}



.pizarra_container{

    border-image-source: url(../images/metal_border.jpg);

    border-image-slice: 15;

    border-width: 0px 15px 0px 15px;

    border-style: solid;

}



#pizarra{

    background-image: url(../images/textura_madera.jpg);

    background-repeat: repeat;

    background-size: 40%;  

    padding: 30px 10px;    

}

#pizarra .logo_pizarra{

    height: 150px;

    display: block;

    margin-top: 2em;

    margin-left: auto;

    margin-right: auto;

}

#pizarra .canilla{

    color: #fff;

    margin: 0.9em 0.5em 0em 0em;   

    padding-top: 10px;

    border-top: 1px dotted #999;

}



#pizarra .canilla:first-child{

    border-top: none;

}



#pizarra .nro_canilla{

    float: left;

    display: block;

    font-size: 1.7em;

    text-align: center;

    width: 1em;

    margin: 0.3em 0.45em 0em 0em;

}



#pizarra .birra_canilla{

    display: block;

    font-size: 1em;

}



#pizarra .precios_canilla_recarga{

    display: none;

}



#pizarra .marca_canilla{

    font-size: 0.8em;

}



#pizarra .birra_logo{

    float: left;

    width: 40px;

    line-height: 60px;

    margin: -5px 10px 0px 0px;    

}



#pizarra .birra_logo img{    

    width: 40px;

    height: auto;

    vertical-align: middle;

}



#pizarra .detalles_canilla{

    display: block;

    font-size: 0.8em;

    color: #ffeeba;

}



#pizarra .precios{

    text-align: right;

}



#pizarra .precios_canilla{

    float: right;

    font-stretch: expanded;

    font-size: 0.9em;

    text-align: center;

    background-color: #888;

    border-radius: 0.2em;

    padding: 0.2em;

    min-width: 3em;

    margin: 10px 0px 0px 5px;

}



#pizarra .poweredby{

    text-align: center;

    margin: 1em;

    height: 2em;

    display: block;

    clear: both;

    color: #fff;

}

#pizarra .poweredby img{

    height: 3em;

    vertical-align: middle;

}

#pizarra p {

    margin: 1em;

}



.taps{

    height: 10em;

    background-image: url(../images/stainless.jpg);

    background-repeat: repeat-x;    

}



.faucet{

    float: left;

    width: 43px;

    padding: 3px;

    margin-top: 30px;

}



#map{

    height: 100%;

    width: 100%;

}



.mapa{

    height: 450px;
    width: 90%;
    margin: 20px;

}



.clear{

    clear: both;

}



.no-js #loader { display: none;  }

.js #loader { display: block; position: absolute; left: 100px; top: 0; }

.se-pre-con {

    position: fixed;

    left: 0px;

    top: 0px;

    width: 100%;

    height: 100%;

    z-index: 9999;

    background: url(/images/bruselas_spin.gif) center no-repeat #eee;

}



#Iframe-Liason-Sheet {

    max-width: 760px;

    max-height: 1200px;

    overflow: hidden;

}

/* inner wrapper: make responsive */

.responsive-wrapper {

    position: relative;

    height: 0; /* gets height from padding-bottom setting */

    -webkit-overflow-scrolling: touch;

    overflow: auto;

}

.responsive-wrapper iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

    border: none;

}

/* padding-bottom = h/w as a % */

.responsive-wrapper-wxh-760x1200 {

    padding-bottom: 363.6364%;

}

.iframe-border {

    border: 1px solid #000;

}

.center-block-horiz {

    margin-left: auto !important;

    margin-right: auto !important;

}



.container{

    width: 950px;

    margin: auto;

}



nav{

    width: 600px;

    float: right;

}



nav li {

    display: inline;    

}



nav li a {

    font-size: 14px;

    text-decoration: none;

    text-align: center;

    float: left;

    padding: 15px;    

    color: #fff;

    text-transform: uppercase;

    font-stretch: expanded;

}



nav li a:hover{

    background-color: #fdda24; 

    border-top-left-radius: 5px;

    border-top-right-radius: 5px;

    color: #000;

}



#luces{

    position: absolute;

    width: 100%;

    height: 100%;

    z-index: 999;

    top: 10px;

    background-image: url(../images/luces.png);

    background-position-x: center;

    background-repeat: no-repeat;

}



#footer{

    text-align: center;

    color: #fff;

    font-size: 14px;

    clear: both;

    padding-top: 0.8em;

}



#footer ul li{

    list-style: none;

    display: inline;

}



#footer ul li a{

    text-decoration: none;

    color: #fff;

}



#footer ul li a:hover{

    text-decoration: underline;

}



#footer li:after {

    content: " /";

}

#footer li:last-child:after {

    content: "";

}



.imagen_post{

    float: left;

    width: 30%;

    border: 5px solid #ccc;

    margin: 10px 20px 10px 10px;

}



.tabs{

    margin: 20px 10px 40px 10px;  

}



.tabs ul{

    list-style-type: none;

    margin: 0px;

    padding: 0px;

}



.tabs_navigation{

    float: left;

    width: 30%;

}



ul.tabs_list > li{    

    display: block;

    padding: 16px 5px 16px 5px;

    text-align: center;

    cursor: pointer;

    font-family: 'Roboto Condensed', sans-serif;

    font-size: 1.6em;

    font-weight: lighter;

    text-transform: uppercase;

}



ul.tabs_list li.tabs_selected{

    background-color: rgba(200, 200, 200, 0.1); 

    border-radius: 5px;

    border-top-right-radius: 0px;

    border-bottom-right-radius: 0px;

}



.tabs_panels{

    float: left;

    width: 70%;  

    min-height: 650px;

    background-color: rgba(200, 200, 200, 0.1);

    border-radius: 5px;

    border-top-left-radius: 0px;

}



.tabs_panels li{

    padding: 0px 20px;

}



.tabs_panels .desc{

    float: left;

    width: 81%;

    margin-bottom: 15px;

}



.tabs_panels .precio{

    float: right;

    text-align: right;

    width: 18%;

}



.carta_item{

    font-family: 'Roboto Condensed', sans-serif;

    font-weight: lighter;

    font-style: italic;

}



.tabs_panels h4{

    margin: 0px;

    padding: 0px;

    font-family: 'Roboto Condensed', sans-serif;

    font-size: 1.3em;

    font-weight: bold;

    text-transform: uppercase;

    font-style: normal;

}



.carta_item{

    padding: 15px 0px;

    margin-bottom: 20px;

    clear: both;

    border-top: 1px dotted #eee;

}



.carta_item:first-of-type{

    border-top: none;

}

.overlay{
    display: none;
    position: absolute;   
    transition: 0.5s ease;   
    height: 100%;
    width: 100%;   
    top: 0px;   
    left: 0px;   
    background-color: #888;   
    opacity: 0.6; 
    z-index: 10000;
}

#local_change{
    display: none;
    width: 450px;
    margin: 20% auto;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #333;
    background-color: #222;
    color: #fff;
    opacity: 0.9;
    text-align: center;
    z-index: 15000;
}

#local_change a{
    display: block;    
    padding: 10px;
    margin: 30px;
    border: 1px solid #333;
    border-radius: 5px;
    background-color: #fff;
    color: #333;
    opacity: 1;
    text-decoration: none;
    
}

.local_location{
    margin: 20px;
    padding: 20px;
    border-radius: 5px;
    background-color: #111;    
}