* { box-sizing: border-box; outline: 0 none; }
html, body { padding: 0; margin: 0; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: white; font-family: -apple-system, BlinkMacSystemFont, 'Roboto'; letter-spacing: -0.2px; color: #4A475A; position: absolute; top: 0; right: 0; bottom: 0; left: 0; animation: fadein 2s; }
body.preview { background: #F8F9FA; color: #4A475A; overflow: hidden; text-align: center; }
a { text-decoration: none; color: #008CDD; cursor: pointer; }
a span { border-bottom: 1px solid transparent; transition: all 0.3s ease; }
a:hover span { border-bottom-color: #008CDD; }

.container { margin: 0 auto; width: calc(100% - 50px); max-width: 1024px; padding: 0; position: relative; }
.opacity-transition { opacity: 0.8; transition: all 0.3s ease; }
.opacity-transition-nine { opacity: 0.9; }
.opacity-transition:hover { opacity: 1; }
.table { display: table; width: 100%; height: 100%; }
.table-cell-top { display: table-cell; vertical-align: bottom; }
.table-cell-middle { display: table-cell; vertical-align: middle; }
.table-cell-bottom { display: table-cell; vertical-align: bottom; }
.mobile-only { display: none !important; }
.share-image { display: none; }

.header { text-align: left; margin: 0 0 30px; box-shadow: 0 1px 0 rgba(0,0,0,0.05); background: white; font-size: 15px; height: 60px; line-height: 60px; white-space: nowrap; box-sizing: border-box; position: absolute; width: 100%; top: 0; left: 0; transition: opacity 0.3s ease; z-index: 1000; }
.header .container { width: 100%; }
.header a { color: #4A475A; opacity: 0.8; }
.header-element { float: left; line-height: 50px; padding-right: 15px; margin-right: 15px; border-right: 1px solid rgba(0,0,0,0.05); height: 50px; position: relative; }
.pixel-tree { padding: 10px 15px; }
.pixel-tree img { width: auto; height: 100%; display: block; }
.navigation { cursor: pointer; padding-right: 35px; height: 50px; line-height: 52px; z-index: 1000; }
.navigation span { font-weight: 500; text-transform: uppercase; }
.header ul { position: absolute; margin: 0; left: -15px; padding: 0; background: white; box-shadow: 0 1px 1px rgba(0,0,0,0.1); margin-top: -1px; min-width: calc(100% + 15px); max-/* height: 0; */ overflow: hidden; transition: max-height 0.5s ease; }
.header .navigation:hover ul { max-height: 500px; }
.header ul li { display: block; padding: 15px; line-height: 1; border-bottom: 1px solid rgba(0,0,0,0.05); }
.header ul li:last-child { border-bottom: 0 none; }
.navigation:after { content: '\E313'; font-family: 'Material Icons'; position: absolute; top: 0; right: 10px; }
.clear { clear: both; }

.logo { position: relative; display: inline-block; font-family: 'Montserrat'; position: absolute; top: 0; left: 0; padding: 0 20px 0 60px; }
.logo:after { content: attr(data-text); position: absolute; left: 100%; text-transform: uppercase; opacity: 0.5; pointer-events: none; font-size: 17px; letter-spacing: 0.2px; margin-left: 8px; }
.logo i { background: url('/images/pixel-tree.png') no-repeat; background-size: auto 100%; width: 28px; height: 28px; display: block; position: absolute; top: 50%; left: 20px; margin: -16px 0 0; }
.logo span { display: inline-block; line-height: 1; font-size: 17px; text-transform: uppercase; letter-spacing: 0.2px; padding-bottom: 2px; }
.logo span:after { content: ""; height: 36px; width: 1px; background: rgba(0,0,0,0.05); display: block; position: absolute; top: 50%; right: 5px; margin: -18px 0 0; }

.logo:hover span { border-bottom-color: #4A475A; }

.website-input { width: calc(100% - 20px); max-width: 460px; height: 36px; margin: 0 auto; top: 12px; text-align: center; position: relative; background: #F2F2F2; box-shadow: 0 0 2px rgba(0,0,0,0.2); border-radius: 2px; transition: all 0.3s ease; }
.website-input:hover { background: #E9E9E9; }
.website-input:before { content: attr(data-icon-code); font-family: 'Material Icons'; position: absolute; left: 10px; z-index: 100000; font-size: 22px; line-height: 36px; pointer-events: none; }
.website-input input { position: absolute; width: 100%; height: 100%; top: -1px; left: 0; padding: 0 10px 0 42px; text-overflow: ellipsis; font-size: 15px; opacity: 0.6; outline: 0 none; border: 0 none; border-radius: 2px; }

.bookmarks { position: absolute; top: 40px; background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.15); width: 100%; border-radius: 2px; opacity: 0; pointer-events: none; transition: all 0.3s ease; }
.bookmarks.active { opacity: 1; pointer-events: all; }
.bookmark { position: relative; text-align: left; padding: 0 15px 0 42px; border-bottom: 1px solid rgba(0,0,0,0.05); line-height: 46px; cursor: pointer; }
.bookmark span { opacity: 0.8; transition: all 0.3s ease; }
.bookmark.widget { display: none; }
.bookmark.platform span { color: transparent; }
.bookmark.platform span:before { content: "OwnLocal Platform"; color: #4A475A; }
.bookmark.platform span:after { content: "Live"; text-transform: uppercase; color: #4A475A; position: absolute; right: 0; background: #4CAF50; line-height: 1; padding: 5px 10px 6px; border-radius: 3px; color: white; font-size: 10px; font-weight: bold; top: 50%; margin: -10px 15px 0 0; }
.bookmark:hover span { opacity: 1; }
.bookmark.no-border { border-bottom: 0 none; }
.bookmark i { position: absolute; top: 0; left: 0; font-size: 16px; opacity: 0.8; width: 42px; text-align: center; line-height: 46px; }
.bookmark:last-child { border: 0 none; }


.homepage-header { position: absolute; width: 100%; padding: 30px 0; }
.homepage-header-logo { background-image: url('http://www.ownlocal.com/hubfs/OwnLocal_April2016/images/logo.png');  width: 40px; height: 40px; display: block; background-size: auto 100%; background-position: right center; background-repeat: no-repeat; position: relative; }
.homepage-header-logo:after { content: "Demos"; position: absolute; right: -108px; line-height: 1; color: white; font-size: 24px; text-transform: uppercase; font-family: 'Montserrat'; padding-bottom: 2px; border-bottom: 2px solid transparent; top: 9px; transition: all 0.3s ease; }
.homepage-header-logo:hover:after { border-bottom: 2px solid white; }
.homepage-ol-home { position: absolute; right: 0; top: 5px; line-height: 30px; display: inline-block; border: 1px solid white; padding: 0 10px; text-transform: uppercase; color: white; font-size: 12px; border-radius: 2px; font-weight: 700; transition: all 0.3s ease; display: none; }
.homepage-ol-home span { border-bottom: 0 none; transition: none; }
.homepage-ol-home:hover { background: white; color: rgba(75,89,102,0.8); }

.homepage-hero { background-size: cover; background-position: center; color: white; max-height: 630px; }
.homepage-hero .table-cell-middle { background: rgba(75,89,102,0.5); }
.homepage-hero h2 { font-weight: 700; font-size: 60px; line-height: 1; text-transform: uppercase; max-width: 430px; margin: 45px 0 30px; }
.homepage-hero p { line-height: 1.3; max-width: 430px; font-weight: 300; font-size: 19px; font-family: 'Roboto'; margin: 0 0 40px; }
.homepage-hero .hero-buttons { opacity: 1; }
.homepage-hero .hero-buttons a { display: inline-block; padding: 12px 16px; line-height: 1; background: white; text-transform: uppercase; font-family: 'Montserrat'; font-weight: 400; font-size: 14px; color: rgba(75, 89, 102, 0.8); float: left; border-radius: 0px; transition: all 0.3s ease; }
.homepage-hero .hero-buttons a.minimal { background: transparent; color: white; }
.homepage-hero .hero-buttons a span { border-bottom: 1px solid transparent; transition: all 0.3s ease; }
.homepage-hero .hero-buttons a:hover { opacity: 1; }
.homepage-hero .hero-buttons a:hover span { border-bottom: 1px solid rgba(75,89,102,0.8); }
.homepage-hero .hero-buttons a.minimal:hover span { border-bottom: 1px solid white; }

.grid { margin: 0 -25px 0; padding: 40px 0 0 25px; }
.grid h2 { margin: 0 0 30px; font-weight: 400; color: rgba(75,89,102,0.8); font-size: 22px; line-height: 1; font-family: 'Roboto'; cursor: default; border-bottom: 1px solid rgba(0,0,0,0.05); padding-bottom: 20px; width: calc(100% - 25px); }
.grid h2 span { opacity: 1; }
.grid-item { float: left; width: calc(33.33% - 25px); background: white; margin: 0 25px 40px 0; color: #2f4654; cursor: pointer; position: relative; text-align: center; transition: all 0.3s ease; }
.grid-image { height: 210px; background-size: calc(100% - 40px) auto; background-repeat: no-repeat; background-position: center center; background-color: #F4F4F4; opacity: 0.9; transition: all 0.3s ease; }
.grid-content h3 { font-size: 14px; font-weight: 600; text-transform: uppercase; font-family: -apple-system, BlinkMacSystemFont, 'Montserrat'; display: inline-block; border-bottom: 1px solid transparent; position: absolute; left: 0; bottom: 0; padding: 10px; margin: 15px; background: white; color: rgba(75,89,102,0.9); transition: all 0.3s ease; }
.grid-item:hover { box-shadow: 0 0 8px rgba(0,0,0,0.1); }
.grid-item:hover .grid-image { opacity: 1; }
.grid-item:hover .grid-content h3 { border-bottom-color: rgba(47,70,84,0.8); }

.grid-item.widget .grid-image { background-size: auto 270%; background-position: center -40px; }

.flags a { float: left; width: 20%; margin: 0 0 30px 0; color: rgba(75,89,102,0.8); font-size: 15px; line-height: 16px; }
.flags a:hover span { border-bottom-color: rgba(75,89,102,0.6); }
.flags a icon { float: left; width: 30px; height: 20px; background-size: cover; background-repeat: no-repeat; background-position: center center; margin-right: 10px; border-radius: 2px; box-shadow: 0 2px 2px rgba(0,0,0,0.1), 0 -1px 0px rgba(0,0,0,0.1) inset; margin-top: -1px; position: relative; overflow: hidden; }
.flags a icon:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0.2)); }

.footer .container { padding: 30px 20px 70px; border-top: 1px solid rgba(0,0,0,0.1); width: 100%; text-align: center; cursor: default; opacity: 0.8; }

@keyframes fadein {
  from { opacity:0; }
  to { opacity:1; }
}

@media screen and (max-width: 1024px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: block !important; }
  .homepage-hero .table-cell-middle { vertical-align: bottom; padding-bottom: 30px; }
  .footer .container { padding-bottom: 30px; }
}

@media screen and (max-width: 980px) {
  .not-in-tablet { display: none !important; }
  .grid-item { width: calc(50% - 25px); }
  .homepage-hero h2 { font-size: 56px; }
  .flags a { width: 25%; }
}

@media screen and (max-width: 800px) {
  .flags a { width: 50%; }
}

@media screen and (max-width: 450px) {
  .grid-item { width: calc(100% - 25px); }
  .homepage-hero h2 { font-size: 40px; }
  .homepage-hero p { font-size: 20px; }
}

@media screen and (max-width: 370px) {
  .flags a { width: 100%; }
}

@media screen and (min-height: 851px) {
  .homepage-hero { height: calc(100% - 605px); min-height: 630px; max-height: none; }
}