/*====================================
=        Css Used for PageEditor     =
====================================*/
.sfPageEditor .page-title h1.title,
.sfPageEditor .page-title .sfContentBlock.title h1 {
    position: relative;
    color: #3e3e3e;
    left: 0;
}

.sfPageEditor .metro-content {
    position: relative;
    background: darkgray;
}

/*.sfPageEditor .metro {
    width: auto;
    height: auto;
}*/

.front.sfPageEditor header .sm-visible,
.front.sfPageEditor header .sm-hidden {
    display: inline-block !important;
    width: 49%;
    padding-top: 30px;
}

.front.sfPageEditor header .sm-hidden:before,
.front.sfPageEditor header .sm-visible:before {
    content: "mobile background";
    background: white;
    color: #606060;
    font-size: 20px;
    height: 30px;
}

.front.sfPageEditor header .sm-hidden:before {
    content: "desktop background";
}

.front.sfPageEditor header .cta {
    position: relative;
    bottom: 0;
}

.front.sfPageEditor header .hero img {
    max-width: 100%;
    max-height: 400px;
    width: auto;
    height: auto;
}