@font-face {font-family: 'titleFont'; src: url('fonts//headlined.ttf') format("truetype");}
@font-face {font-family: 'h3Font'; src: url('fonts//Liberator.ttf') format("truetype");}

body, h1, h2, h3, h4, p, ul, img {margin: 0; padding: 0;}
html, body {width: 100%; min-height: 100%;}
body {background-color: #F8FAF4; color: #555; font: 12px arial, Helvetica,sans-serif; line-height: 16px; letter-spacing: 0; font-weight: 500;}


h1 {color: #537535; display: block; font-size: 1.8em; font-weight: bold; line-height: 1.1em; margin-bottom: 8px; padding-top: 4px; letter-spacing: 1.4px;}

h3, h4, p, ul {margin-bottom: 12px;}


ul {list-style: none;}
a {text-decoration: none; color: #555;}
a:hover {text-decoration: underline;}
img {border: 0 none; max-width: 100%; vertical-align: middle;}
.clear {clear: both;}

/* front page */

#page {background: #f8faf4; border-top: #527435 8px solid; width: 100%; min-width: 240px; overflow: hidden;}
#grey-bg {width: 100%; height: 436px; background: #d7d7d7;}
#wrapper {position: relative; margin: -436px auto 0;}

.logo {width: 36%; max-width: 200px; margin: 4px auto 4px -4px;}
.logo, #m_image {}
a.join {float: right; display: block;}
.join img {width: 120px;}

.lt-title {font-size: 1.1em; font-weight: 400; line-height: 1em; padding-bottom: 4px;}
.tel {font-size: 1.2em;}

#m_image {position: absolute; top: 60px; left: -4px; width: 42%;}
#lt_image {position: absolute; top: 60px; right: 0; width: 260px;}

.main {width: 58%; margin-left: 42%;}
.download-content {position: relative; margin-left: 20%;}
.app-btn {float: left; margin-right: 20px;}
.lt-top {font-size: 1.1em;}

.info span {color: #B4073A; font-size: 14px; margin-right: 4px;}

.col {background-color: #555; height: 1px; margin: 12px 20px;}

#extra-format [class^="extra"]{width: 46%; max-width: 400px; /*background-color: #6d6e70;*/ margin: 0 0 20px; /*padding: 6px 8px;*/ text-align: center;

}

#extra-format [class^="extra"] img {
    border: 1px solid #CCCCCC;    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -khtml-border-radius: 6px;
    box-shadow: 2px 2px 5px #000000 inset, 0 8px 6px -6px #000000;
    width: 100%;
}



.extra-left {float: left;}
.extra-right {float: right;}
.format-title {color: #fff; font-size: 1.2em; line-height: 1.2em;}

#footer {color: #527435; padding-bottom:20px;}
.footer-link {border-bottom: 1px solid #527435; width:100%; margin-bottom: 10px; padding-bottom:10px;}
a, a:visited {color: #527435; line-height:1.6em; text-decoration:none; }
a:hover {color: #527435; text-decoration:underline;}
#footer a {font-size:1.2em; font-weight:bold;}

@media (max-width: 320px) {
  #wrapper {width: 234px; margin-top: -146px;}
  #grey-bg {height: 146px;}  
  #m_image {top: 60px; width: 98px;}
  #lt_image {display: none;}
  .main {width:136px; margin-left: 98px; min-height: 134px;}
  .join img {width: 90px;}
  .lt-title {font-size: 0.94em;}
  .tel {font-size: 1em;}
  h1 {font-size: 1.4em; letter-spacing: 0;}
  .lt-top {font-size: 0.9em; line-height: 1.1em; margin-bottom: 28px;}
  .format-title, #footer a {font-size: 1em;}
  .info, .info a {font-size: 8px; line-height: 10px;}
}

@media (min-width: 320px) and (max-width: 360px) {
  #wrapper {width: 312px; margin-top: -190px;}
  #grey-bg {height: 190px;}
  #m_image {top: 77px; width: 130px;}
  #lt_image {display: block; top: 155px; width: 90px;}
  .main {width: 182px; margin-left: 130px; min-height: 174px;}
  .join img {width: 120px;}
  .lt-title {font-size: 1.1em;}
  .tel {font-size: 1.2em;}
  h1 {font-size: 1.8em; letter-spacing: 1.4px;}
  .lt-top {margin-bottom: 40px; font-size: 1em;}
  .format-title, #footer a {font-size: 1.2em;}
  .info, .info a {font-size: 8px; line-height: 10px;}
}

@media (min-width: 360px) and (max-width: 480px) {
  #wrapper {width: 352px; margin-top: -214px;}
  #grey-bg {height: 214px;}
  #m_image {top: 86px; width: 147px;}
  #lt_image {top: 167px; width: 120px;}
  .main {width: 205px; margin-left: 147px; min-height: 195px;}
  .lt-top {margin-bottom: 56px; font-size: 1.1em;}
  .info, .info a {font-size: 8px; line-height: 10px;}
}

@media (min-width: 480px) and (max-width: 540px) {
  #wrapper {width: 472px; margin-top: -278px;}
  #grey-bg {height: 278px;}
  #m_image {top: 104px; width: 198px;}
  #lt_image {top: 224px; width: 136px;}
  .main {width: 274px; margin-left: 198px; min-height: 260px;}
  .lt-top {margin-bottom: 16px; font-size: 1.15em;}
  #extra-format [class^="extra"] {min-height: 36px;}
  .extra-left .format-title {line-height: 36px;}
  .info, .info a {font-size: 8px; line-height: 10px;}
}

@media (min-width: 540px) and (max-width: 640px) {
  #wrapper {width: 532px; margin-top: -314px;}
  #grey-bg {height: 314px;}
  #m_image {top: 118px; width: 223px;}
  #lt_image {top: 251px; width: 160px;}
  .main {width: 309px; margin-left: 223px; min-height: 291px;}  
  .lt-title {font-size: 1.2em; line-height: 1.4em;}
  h1 {font-size: 1.9em; margin-bottom: 12px; padding-top: 12px;}
  .tel {font-size: 1.4em;}
  .lt-top {margin-bottom: 16px; font-size: 1.15em;}
  #extra-format [class^="extra"] {min-height: 36px;}
  #extra-format [class^="extra"] .format-title {line-height: 36px;}
  .info, .info a {font-size: 6px; line-height: 8px;}
}

@media (min-width: 640px) and (max-width: 720px) {
  #wrapper {width: 632px; margin-top: -352px;}
  #grey-bg {height: 352px;}
  #m_image {top: 120px; width: 266px; left: -6px;}
  #lt_image {top: 273px; width: 200px;}
  .main {width: 366px; margin-left: 266px; min-height: 345px;}  
  .lt-title {font-size: 1.2em; line-height: 1.4em;}
  h1 {font-size: 2.0em; margin-bottom: 12px; padding-top: 24px;}
  .tel {font-size: 1.4em;}
  .lt-top {margin-bottom: 18px; font-size: 1.15em;}
  #extra-format [class^="extra"] {min-height: 36px;}
  #extra-format [class^="extra"] .format-title {line-height: 36px;}
  .info, .info a {font-size: 8px; line-height: 10px;}
}

@media (min-width: 720px) and (max-width: 800px) {
  #wrapper {width: 712px; margin-top: -385px;}
  #grey-bg {height: 385px;}
  #m_image {top: 124px; width: 299px; left: -8px;}
  #lt_image {top: 291px; width: 240px;}
  .main {width: 413px; margin-left: 299px; min-height: 387px;}  
  .lt-title {font-size: 1.2em; line-height: 1.4em;}
  .tel {font-size: 1.4em;}
  h1 {font-size: 2.2em; margin-bottom: 18px; padding-top: 34px;}
  .lt-top {margin-bottom: 18px; font-size: 1.2em;}
  #extra-format [class^="extra"] {min-height: 36px;}
  #extra-format [class^="extra"] .format-title {line-height: 36px;}
  .info, .info a {font-size: 10px; line-height: 12px;}
}

@media (min-width: 800px) {
  #wrapper {width: 796px; margin-top: -418px;}
  #grey-bg {height: 418px;}
  #m_image {top: 126px; width: 334px; left: -10px;}
  #lt_image {top: 316px; width: 260px;}
  .main {width: 462px; margin-left: 334px; min-height: 431px;}  
  .lt-title {font-size: 1.2em; line-height: 1.4em;}
  .tel {font-size: 1.4em;}
  h1 {font-size: 2.6em; margin-bottom: 24px; padding-top: 54px;}
  .lt-top {margin-bottom: 24px; font-size: 1.2em;}
  #extra-format [class^="extra"] {min-height: 36px;}
  #extra-format [class^="extra"] .format-title {line-height: 36px;}
  .info, .info a {font-size: 11px; line-height: 13px;}
}

#app-privacy-policy #wrapper {/*width: 100%;*/ margin-top: 0;}
#app-privacy-policy #header, #app-privacy-policy #main, #app-privacy-policy #footer {margin-left: 10px; margin-right: 10px;}
#app-privacy-policy h1 {/*font-size: 1.8em; */ margin-bottom: 10px; padding-top: 10px; letter-spacing: 1.4px;}

#app-privacy-policy ul {list-style: decimal; margin-left: 20px; margin-bottom: 20px;}
#app-privacy-policy ul li li {list-style: lower-alpha; margin-bottom: 10px;}
#app-privacy-policy ul li li li {list-style: lower-roman; margin-bottom: 6px;}
#app-privacy-policy ul ul ul {margin-top: 6px;}