/************************************
*
*  Main Styles to compile. Here only @imports!
*
************************************/

@import "_variables";
@import "_fonts";

/**
* LAYOUT
*/

@import "layout/layout";


/**
* MENU
*/

@import "menu/menu";

/**
* VIEWS
*/

@import "views/home";

/* Empty. Add your own CSS if you like */
@font-face {
    font-family: SegoeUI;
    src: url(../fonts/segoeui.woff);
}
@font-face {
    font-family: Roboto-Thin;
    src: url(../fonts/Roboto-Thin.ttf);
}
@font-face {
    font-family: Roboto-Light;
    src: url(../fonts/Roboto-Light.ttf);
}
@font-face {
    font-family: Roboto-Bold;
    src: url(../fonts/Roboto-Bold.ttf);
}

.bar.bar-positive {
    border-color: #0188ad;
    background-color: #0188ad;
    background-image: linear-gradient(0deg, #0c60ee, #0c60ee 50%, transparent 50%);
    color: #fff;
}

.tabs-positive > .tabs{
    background-color: #0188ad !important;
}

.tipo>.item-content {
    background-color: #00CC66 !important;
}

.splash {
    background: url(../img/skyline.jpg) no-repeat
    center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.branding {
    width: 90%;
    max-width: 200px;
    margin: 0 auto;
    margin-top: 20px;
    text-align: center;
}

.branding img {
    max-width: 100px;
    margin: 0 auto;
    margin-top: 20px;
    text-align: center;
}

div.home-button {
    margin: 14px 5px;
    border: 1px;
    background: rgba(255,100, 40, .4);
    text-align: center;
    vertical-align: middle;
}

.vertical-aling-center {
    vertical-align: middle;
    display: inline;
}

.vertical-aling-center span {
    min-height: 100%;
}

button.home-button {
    /*min-height: 89px;*/
    vertical-align: middle;
    /*font-size: 16px;*/
}

.applyFooter{
    margin-bottom: 44px !important;
}


p {
    margin-top: 0em;
    margin-bottom: 0em;
    font-size:85%
}

.scroll {
    height: 100%;
}

#map {
    width: 100%;
    height: 40%;
}

.map{
    width: 100%;
    height: 60%;
}

.map-full{
    width: 100%;
    height: 100%;
}

.establecimiento-container{
    width: 100%;
    height: 60%;
}

.establecimiento-detail-container{
    width: 100%;
    height: 55%;
}

.form-container{
    width: 100%;
    height: 100%;
}


.leaflet-bottom {
    bottom : 10px;
}

.item.item-body p {
    margin-top: 0;
}

.tabs.border-top {
    border-top: 1px solid #ddd !important;
}

#references_desc {
    width: 100%;
    height: 30%;
}

#references {
    width: 100%;
    height: 20%;
}

.bar.bar-profile {
    background-color: #0188ad;
    height: 170px;
}

.profile {
    top: 0;
    right: 0;
    left: 0;
    z-index: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    padding-top: 15px;
}
.bar .profile {
    @extend .profile;
}

.valoracion-profile {
    @extend .profile;
}

.profile .name {
    color: #FFFFFF;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.profile-picture {
    border-radius: 50%;
}

.menu .has-header
{
    top: 169px;
}

$screen-sm-min: 768px;
$screen-md-min: 992px;
$screen-lg-min: 1200px;

ion-content.ak-web {
    @media screen and (min-width: $screen-sm-min) {
        max-width: 80%;
        margin: 0 auto;
    }
    @media screen and (min-width: $screen-md-min) {
        max-width: 60%;
        margin: 0 auto;
    }
    @media screen and (min-width: $screen-lg-min) {
        max-width: 45%;
        margin: 0 auto;
    }
}