/**
 * ESNY stylesheet for smartphones
 *
 * - This stylesheet is applied to
 *   devices with a max-width of 767px.
 *
 * @package Esny
 * @author  Martin Johansson
 */

/**
 * Main
 */
body {
    -webkit-text-size-adjust: 100%;
}

#wrapper {
    width: 100%;
}

.inner-wrapper {
    padding-left: 15px;
    padding-right: 15px;
}

body.firstpage .inner-wrapper {
    padding-bottom: 0;
}


/**
 * Fonts
 */
section.info article header h1,
section.new-development-objects article header h1,
section.team article.team-container h1,
div.person-header h2,
section.wanted article header:first-child h1 {
    font-size: 1.6em;
}


/**
 * Utils
 */
.hidden-mobile {
    display: none;
}

.navbar-arrow {
    border-left: 4px solid rgba(0, 0, 0, 0);
    border-right: 4px solid rgba(0, 0, 0, 0);
    border-top: 4px solid;
    display: inline-block !important;
    height: 0;
    margin-left: 3px;
    vertical-align: middle;
    width: 0;
}


/**
 * Header
 */
header#top {
    height: auto;
    padding: 20px 15px 10px 15px;
    border-color: #ABA487;
    margin-left: -15px;
    margin-right: -15px;
}

header#top .logo,
footer#bottom.white .logo {
    height: 0;
    position: static;
    padding-bottom: 4%;
    background-size: 100%;
    background-position: 0 26%;
}

div.search-box .share a.locale {
    margin-right: 5px;
    margin-left: 0;
}

nav#top-menu {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

nav#top-menu .search-box div.search-box-form {
    right: 5px;
    max-width: 100%;
}

nav#top-menu div.search-form {
    width: auto;
    padding: 0 10px;
}

.galleria-image img {
    top: 0 !important;
}

nav#top-menu .search-box button#search-box {
    padding: 0;
}

nav#top-menu .search-box {
    width: auto;
}

nav#top-menu, nav.sub-nav {
    border-color: #ABA487;
}

nav.sub-nav {
    padding-left: 15px;
    padding-right: 15px;
}

nav#top-menu div#main-menu-list-wrapper.mobile-menu-closed {
    display: none;
}

nav#top-menu ul.main-menu-list {
    margin-top: 10px;
    padding-top: 5px;
}

nav#top-menu ul.main-menu-list > li {
    display: block;
    margin-bottom: 5px;
    padding-bottom: 7px;
    border-bottom: 1px solid #ABA487;
}
nav#top-menu ul.main-menu-list li ul.sub-menu-list {
    display: none !important;
}
nav#top-menu ul.main-menu-list li.sub-menu-open ul.sub-menu-list {
    display: block !important;
}

nav#top-menu li.sub-menu-open .navbar-arrow {
    border-top: none;
    border-bottom: 4px solid;
}

nav.sub-nav ul.right li {
    padding: 0;
}

nav#top-menu ul.sub-menu-list > li {
    display: block;
    margin: 4px 0;
}

nav#top-menu.subnav-open ul.main-menu-list ul.sub-menu-list {
    margin-left: 10px;
    position: static;
    display: none;
}

nav#top-menu ul.sub-menu-list {
    position: static;
}

nav#top-menu ul.sub-menu-list li.sub-menu-start {
    display: block !important;
}

nav#top-menu .responsive-menu-button {
    display: inline-block;
    width: auto;
    background-color: #aba487;
    font-family: 'HelveticaNeueW01-77BdCn 692722', sans-serif;
    color: #ffffff;
    font-size: 0.75em;
    padding: 0 7px 0 5px;
    height: 19px;
    line-height: 19px;
    cursor: pointer;
    white-space: nowrap;
}

nav#top-menu .responsive-menu-button:hover {
    background-color: #858585;
}

nav#top-menu .responsive-menu-button.white {
    color: #858585;
    background-color: #FFF;
}

nav#top-menu .responsive-menu-button .menu-button-icon {
    width: 12px;
    height: 14px;
    display: block;
    float: left;
    margin-top: 2px;
    margin-right: 5px;
}

nav#top-menu .responsive-menu-button .menu-button-icon .icon-bar {
    width: 100%;
    height: 1px;
    background-color: white;
    display: block;
    margin: 3px 0;
}

nav#top-menu .responsive-menu-button.white .menu-button-icon .icon-bar {
    background-color: #858585;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    a.share-button.instagram,
    a.share-button.facebook,
    a.share-button.mail {
        background-size: 439px auto;
    }

    a.share-button.twitter {
        background-position: -78px -186px;
    }

    a.share-button.twitter:hover   {
        background-position: -99px -186px;
    }

    a.share-button.instagram {
        background-position: -121px -186px;
    }

    a.share-button.instagram:hover {
        background-position: -142px -186px;
    }

    a.share-button.facebook {
        background-position: -163px -186px;
    }

    a.share-button.facebook:hover {
        background-position: -184px -186px;
    }

    a.share-button.mail {
        background-position: -206px -186px;
    }

    a.share-button.mail:hover   {
        background-position: -227px -186px;
    }
}


/**
 * Footer
 */
footer#bottom {
    padding-left: 25px;
    padding-right: 25px;
}

footer#bottom nav {
    width: 100%;
}

footer#bottom nav ul.first,
footer#bottom nav ul.second {
    width: 49%;
    min-width: 0;
}

footer#bottom nav ul.second,
footer#bottom nav ul.third {
    border: none !important;
}

footer#bottom nav ul.third {
    width: 100%;
    margin: 30px 0;
    border: none;
}

footer#bottom nav ul.third li {
    margin: 0;
}

footer#bottom div.search-form {
    width: auto;
    clear: both;
    float: none;
}

footer#bottom.white .logo {
    width: 100%;
}

a.fb-firstpage-like img,
img.like-thumb {
    display: none;
}

span.facebook-like-count,
span.facebook_thumb {
    width: 20px;
    height: 20px;
    display: inline-block;
    background: url('/gfx/sprites_white.png');
    background-size: 439px auto;
    margin-right: 5px;
    position: relative;

}

span.facebook-like-count {
    background-position: -248px -186px;
    top: -4px;
}

span.facebook_thumb {
    background-position: -268px -186px;
    top: -7px;
}


/**
 * Object list
 */
section.objects .image-holder img {
    width: 100%;
    height: auto;
    display: block;
}

section.objects article {
    height: auto;
}

section.objects article aside.object-info {
    width: 27%;
    height: 100%;
    padding: 0 8px;

    /* Viewport units has poor browser support, otherwise this solution is good */
    /* font-size: 2.5vw; */
}

section.objects article aside.object-info.left {
    left: 20px;
}

section.objects article aside.object-info.right {
    right: 20px;
}

section.objects article aside.object-info h2 {
    font-size: 0.55em !important;
}

section.objects article aside.object-info h2.greenish {
    margin-bottom: 5%;
}

section.objects article aside.object-info h2:first-child {
    margin-top: 10%;
}

section.objects article aside.object-info p {
    width: 100%;
    font-size: 0.4em !important;
    line-height: 1.4em;
}

section.objects article aside.object-info div {
    font-size: 0.55em !important;
}

section.objects article aside.object-info div.salestext p,
section.objects article aside.object-info div.realtor p {
    font-size: 0.8em !important;
    line-height: 1.5em;
}

section.objects article aside.object-info div.read-more-position {
    width: 100%;
    left: 0;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    bottom: 7%;
}

section.objects article aside.object-info div.read-more-position a.more {
    padding: 4%;
}

section.objects.new-development article aside.object-info div.read-more-position {
    bottom: 5%;
}

section.objects.new-development article aside.object-info div.read-more-position span.fake-border-left {
    top: 4px;
    width: 35%;
}

section.objects.new-development article aside.object-info div.read-more-position span.sold-text {
    position: static;
    width: 55%;
    padding: 0;
}

section.objects.new-development article aside.object-info div.read-more-position span.fake-border-right {
    width: 10%;
    top: 4px;
}

section.objects.new-development article aside.object-info div.read-more-position a.more {
    width: 55%;
    padding: 0;
    position: static;
    text-align: center;
}

section.info.partners article.container div.width-30,
section.wanted article div.width-30 {
    width: 100%;
}

section.partners article div.column img.logotype {
    display: block;
    max-width: 100%;
    height: auto;
}

section.partners article div.column img:first-child {
    max-width: 100%;
    height: auto;
}

section.partners article div.column p {
    width: auto;
}

section.partners div.mobile-link {
    display: block !important;
    margin-top: 20px;
    margin-bottom: 20px;
}

section.partners div.container.partners-container {
    display: none !important;
}

@media only screen and (min-width: 360px) and (max-width: 439px) {
    section.objects article aside.object-info h2 {
        font-size: 0.65em !important;
    }

    section.objects article aside.object-info p {
        font-size: 0.45em !important;
        line-height: 1.5em;
    }

    section.objects article aside.object-info div {
        font-size: 0.65em !important;
    }
}

@media only screen and (min-width: 440px) and (max-width: 559px) {
    section.objects article aside.object-info h2 {
        font-size: 0.8em !important;
    }

    section.objects article aside.object-info p {
        font-size: 0.55em !important;
        line-height: 1.6em;
    }

    section.objects article aside.object-info div {
        font-size: 0.8em !important;
    }

    section.objects.new-development article aside.object-info div.read-more-position span.fake-border-left {
        top: 6px;
    }

    section.objects.new-development article aside.object-info div.read-more-position span.fake-border-right {
        top: 6px;
    }
}

@media only screen and (min-width: 560px) {
    section.objects article aside.object-info h2 {
        font-size: 0.95em !important;
    }

    section.objects article aside.object-info p {
        font-size: 0.7em !important;
        line-height: 1.6em;
    }

    section.objects article aside.object-info div {
        font-size: 0.95em !important;
    }

    section.objects.new-development article aside.object-info div.read-more-position span.fake-border-left {
        top: 8px;
        width: 40%;
    }

    section.objects.new-development article aside.object-info div.read-more-position a.more,
    section.objects.new-development article aside.object-info div.read-more-position span.sold-text {
        width: 45%;
    }

    section.objects.new-development article aside.object-info div.read-more-position span.fake-border-right {
        top: 8px;
        width: 15%;
    }
}


/**
 * Object description
 */
section.object-description article div.container div.width-25,
section.object-description article div.container div.width-50,
section.object-description article div.container div.width-75 {
    width: 100%;
}

section.object-description article div.container div.content-title {
    margin-bottom: 10px;
}

section.object-description article div.container div.content-title.person-title,
section.object-description article div.container div.content-title.facts-title,
section.object-description article div.container div.content-title.documents-title {
    display: block !important;
}

div.column div.content div.realtor {
    margin-bottom: 20px;
    max-width: 100%;
}

article.team-container div.realtor a {
    max-width: 100%;
    height: auto;
}

article.team-container div.realtor img {
    max-width: 100%;
}

span.garage-text {
    float: left;
}

div.garage-icon {
    float: left;
    position: relative;
    right: -10px;
}

div.column div.content div#map {
    width: 100%;
    min-width: 200px;
    margin-bottom: 15px;
}

div.column div.content div.object-image.placeholder {
    max-width: 50%;
    height: auto;
    margin-right: 0;
    margin-bottom: 10px;
    box-sizing: border-box;
    background-color: #FFF;
}

div.column div.content div.object-image.placeholder:nth-child(even) {
    padding-left: 5px;
}

div.column div.content div.object-image.placeholder:nth-child(odd) {
    padding-right: 5px;
    clear: left;
}

section.object-description article section.image-holder {
    width: 100%;
    height: auto;
}

section.object-description article section.image-holder img {
    width: 100%;
    height: auto;
}

section.object-images div.object-image img {
    width: 100%;
    height: auto;
}

section.object-description article header div.showings {
    margin-top: 1px;
    width: 40%;
}

section.object-description article header div.showings.showings-mobile {
    display: block !important;
    width: 100%;
}

section.object-description.new-development div.container .inquiry-wrapper p {
    float: none;
    margin: 0;
}

section.object-description.new-development div.column.width-50 {
    width: 100%;
}

section.object-description div.realtor img {
    max-width: 100%;
}

section.object-description article header div.showings.showings-mobile table.showings-table {
    width: 100%;
    margin: 0;
}

section.object-description div.column.green-dotted-border-both {
    border-top: none;
}

section.new-development-objects article header h1, section.info article header h1 {
    width: 60%;
}

section.new-development header.container div.showings {
    width: 30%;
}

div.column div.content div.object-image a img,
div.column div.content div.object-image iframe {
    height: auto;
    max-width: 100%;
}


/**
 * Sub pages
 */
#slides {
    width: 100%;
    height: auto;
    min-height: 100px;
}

section.info section#slides img {
    width: 100%;
    height: auto;
}

section#slides .galleria-stage {
    min-height: 450px;
}

section.description-text {
    -moz-column-count:      auto;
    -webkit-column-count:   auto;
    column-count:           auto;
    -moz-column-gap:        normal;
    -webkit-column-gap:     normal;
    column-gap:             normal;
}

section.new-development-objects header aside.addressholder {
    width: 100%;
    text-align: left;
}

article.team-container div.column {
    clear: both;
    max-width: 100%;
}



/**
 * Person page
 */
section.person div.person-description {
    width: auto;
}

section.person div.person-description header {
    margin-top: 30px;
}

section.person div.person-description header div.headlines {
    width: 100%;
    font-size: 0.8em;
    padding: 0;
}

section.person div.person-description article.person-details {
    width: 100%;
    padding-left: 0;
    font-size: 0.8em;
    border: none;
}

section.person div.person-description-text {
    width: 100%;
    font-size: 0.9em;
}

section.person div.person-description-text p {
    line-height: 1.6;
}


/**
 * First page
 */
div.center h1 {
    font-size: 2em;
}

div.first-page-footer {
    width: 100%;
    font-size: 0.65em;
}

div.first-page-footer ul li.first {
    width: 100%;
    text-align: center;
    margin-bottom: 8px;
    border: none;
    padding: 0;
}

div.first-page-footer ul li.cities .citywrapper {
    display: block;
    text-align: center;
}

div.first-page-footer ul li.cities .citywrapper .city {
    float: none;
    display: inline;
    padding-left: 4px;
    padding-right: 8px;
}

div.first-page-footer ul li.cities .citywrapper .city.city-3 {
    border: none;
}

div.first-page-footer ul li.phone {
    text-align: center;
}

div.first-page-footer ul li.phone span.tel {
    float: none;
    margin-top: 8px;
}

div.first-page-footer ul li.phone,
div.first-page-footer ul li.cities {
    float: none;
}

div.first-page-footer ul li.fb-like-count {
    padding: 0;
    width: 100%;
    margin-top: 10px;
    text-align: center;
}

div.first-page-footer-wrapper {
    bottom: 8px;
}

div.navigation {
    margin-left: -15px;
    margin-right: -15px;
}

div.navigation.mobile-menu-open img.transparent-line-bottom,
div.navigation.mobile-menu-open nav.sub-nav {
    display: none;
}

div.navigation.mobile-menu-open nav#top-menu {
    border-bottom: 0;
}

div.navigation .transparent-line-top,
div.navigation .transparent-line-bottom {
    width: 100%;
    height: 1px;
}

div.animation-holder {
    overflow: hidden;
}

@media only screen and (orientation : landscape) {
    body.first-page .inner-wrapper {
        padding-bottom: 0;
    }

    body.first-page nav#top-menu ul.main-menu-list {
        max-height: 170px;
        overflow-y: auto;
    }
}