@charset "utf-8";
/* CSS Document */

body {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.4em;
  font-weight: 400;
  font-style: normal;
  line-height: 1.55;
  letter-spacing: 1px;
  overflow-x: hidden;
  color: #555;
  text-align: center;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Inter', Tahoma, Geneva, Verdana, sans-serif; color:#009d96; font-weight: 900; letter-spacing: 3px; text-transform: uppercase;
}
h1 { font-size: 2.5em;}
h2 { font-size: 2.05em;}
h4, h5, h6 {letter-spacing: 1px;}

a,
button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  text-decoration: none;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}

.break {
  display:block;
  margin:0 0 .35em;
}

.container {
  max-width: 120rem;
  width: 100%;
  height: auto;
  padding: 0 3em;
  margin: 0 auto;
}
.inner-container { width:85%; margin: 0 auto;}

.main {
  display: block;
  margin-top: 4.6em;
  width: 100%;
  min-height: 86vh;
}

.bg-lightblue { background: #e7f5fc;}
.bg-gradient1 { background-image: linear-gradient(white, #e6f7fe);}

p { margin-bottom:1.75em;}

a, a:visited { color:#009d96;}
a:hover { /*text-decoration:underline;*/}

.btn { padding:.5em 1.75em; border:4px solid #009d96; border-radius:25px; font-size:1.15em; color:#009d96; font-weight: 600; text-transform: uppercase; margin: 0 .25em;}
a:hover.btn, input:hover.btn { background: #009d96; color: #fff;}

.clearing { clear:both; height:1px;}

.img_left { float:left; padding:0 2em 2em 0;}
.img_right { float:right; padding:0 0 2em 2em;}

.bold { font-weight: bold;}
.red, .error {color:red;}
.msg {color:#333;}

sup { font-size: .6em;}

.main section { padding-top: 5.5em; padding-bottom: 6.5em;}
.main section h2 {font-weight:700; letter-spacing: 2px; line-height: 1.35;}
.main section h3 {font-size:1.65em; font-weight:400; margin: .75em 0; letter-spacing: 3px;}
.main section h4 {font-size:1.25em; font-weight:400; margin: .5em 0 .75em 0; letter-spacing: 2.25px; line-height: 1.55;}

.main nav { padding: 5vh 0;}

.video-item { position: relative;}
.video-item img {display: inline-block;}
.thumb-overlay {
  position: absolute; top:0; right: 0; bottom: 0; left: 0; opacity:1; transition:.3s ease;
	background: url("../img/play-btn.webp") 50% 50% no-repeat rgba(0, 0, 0, 0.5); background-size: 7em;
}
.video-item:hover .thumb-overlay { background-color: rgba(0,0,0, 0); cursor: pointer; background-size: 8em;}

#ambassador { width:90%; padding-top: 0; margin-top: -12em;}
#ambassador .video-item { margin-bottom:2.75em;}
#ambassador .contents { padding: 0 10%;}
#ambassador .contents p { margin:0;}
#ambassador h2 { font-weight: 800;}

section#threat, section#how, section#features, section#where { padding-bottom: 4em;}

#threat h2 {font-weight:700; letter-spacing: 1px;}
.threat-list { 
margin:6vh 0;
--bs-border-radius:35px;
--bs-border-width:0;
--bs-body-color:#444;
--bs-gutter-y:2rem;
--bs-gutter-x:2rem;
}
.threat-list .card { box-shadow: 0 0 30px 0 #efefef;}
.threat-list .card-body { padding:2em 1.5em 2.25em 1.5em;}
.threat-list .card-title { --bs-card-title-color:#009d96; font-weight:400; font-size: 1.25em; margin-bottom: .65em;}
.threat-list .card-text { margin-bottom: 1em;}
.threat-list .card-text:last-child { margin-bottom:0;}

#what { background:url("../img/bg_1.webp") bottom center no-repeat; background-size: cover;}
#what img { margin: 0 auto;}
#what .product { max-width: 275px; margin: 4em auto 2em;}
#what .row:nth-child(1) .col:nth-child(2) {text-align: left;}
#what .icons {margin-top: 2em;}
#what .icons img { max-height: 120px; margin-bottom: 1em;}
#what .icons .col { padding:0 2em; line-height:normal; color:#000; font-weight: 500; letter-spacing: 0;}

#livebetter { background:#009d96; color:#d5f3e5; padding: 4em 0;}
#livebetter h2 {color:#fff;}
#livebetter p {font-size:1.25em; margin-bottom: 0; width: 65%; margin: 0 auto;}

.list-info, .list-info li { margin: 0; padding: 0; list-style: none;}
.list-info li { margin: 14vh 0;}
.list-info li img { max-width: 42vw; padding: 0 2em;}
.list-info li .infotext { padding: 0 2em; width: 50%;}
.list-info li h4 { margin-bottom: 0;}
.list-info li h5 {font-size:1.05em; font-weight:400; color:#000; margin: 0 0 .75em 0; letter-spacing: 2.25px; line-height: 1.55;}
.list-info li:nth-child(odd) { flex-direction: row-reverse;}
.list-info li:nth-child(odd) .infotext { text-align: right;}
.list-info li:nth-child(even) .infotext { text-align: left;}
.list-info li:nth-child(1) img {max-height: 350px; padding-right: 8em;}

#features { background:url("../img/bg_2.webp") right center no-repeat;}
.features-list { 
margin:6vh auto; width:75%;
--bs-border-radius:25px;
--bs-border-width:0;
--bs-body-color:#444;
--bs-gutter-y:2rem;
--bs-gutter-x:2rem;
}
.features-list .card { box-shadow: 0 0 30px 0 #efefef;}
.features-list .card-body { padding:2em 1.5em 2.25em 1.5em;}
.features-list .card-body img { max-height: 130px; margin: 0 auto;}
.features-list .card-title { --bs-card-title-color:#009d96; font-weight:400; font-size: 1.1em; margin: .6em 0 .4em 0;}
.features-list .card-text { margin-bottom: 1em; line-height: normal;}
.features-list .card-text:last-child { margin-bottom:0;}

#where .col { margin-bottom: 2em;}
#where img { margin: 0 auto .75em auto;}
#where .row { margin-top: 4em;}
#where .scenario-txt { line-height:normal; font-weight: 500; color:#000;}
#where .txt2 { background: #009d96; color:#fff; padding: 1em 2em; border-radius: 30px; display: inline-block; font-size:1.25em; margin-top: 1em;}

#contact { background:url("../img/bg_3.webp") bottom center no-repeat; background-size: cover; padding: 8em 0 7em;}
#contact p {font-size:1.25em;}
#contact .btn { margin-bottom: 1em;}

#footerbox {padding: 10vh 0; font-size: 0.7em;}

@media only screen and (max-width: 1376px) {
	.main {margin-top: 2.35em;}
}

@media only screen and (max-width: 1440px) {
}

@media only screen and (max-width: 1280px) {
	.list-info li img { max-width: 40vw;}
	.list-info li:nth-child(1) img {padding-right: 5em;}
}

@media only screen and (max-width: 1158px) {
	#what .product { max-width: 210px;}
}

@media only screen and (max-width: 1087px) {
}

@media only screen and (max-width: 1040px) {
}

@media only screen and (max-width: 992px) {
  body { font-size: 1em;}
  .container {
    padding: 0 2em;
    margin: 0 auto;
  }
  .inner-container { width:90%;}
	
  .main section { padding-bottom: 5em;}
}

@media only screen and (max-width: 938px) {
	.list-info li img { margin: 0 auto;}
}

@media only screen and (max-width: 880px){
	font-size: 1.2em;
}

@media only screen and (max-width: 857px) {
}
	
@media only screen and (max-width: 768px) {
  a,
  button {
    cursor: default !important;
    border: none;
    outline: none;
  }

  #what .row:nth-child(1) .col:nth-child(2) {text-align:center;}
	
  .list-info li.d-flex { display: block !important;}
  .list-info li img { max-width: 100%;}
  .list-info li .infotext { text-align: center !important; padding-top: 2em; width: 100%;}
  .list-info li:nth-child(1) img {padding-right: 2em;}  
}

@media only screen and (max-width: 576px){
  .main section { padding-bottom: 4em;}
}

@media only screen and (max-width: 529px) {
}

@media only screen and (max-width: 510px) {
}

@media only screen and (max-width: 480px){
}

@media only screen and (max-width: 420px){
	body { font-size: .9em;}
}

@media only screen and (max-width: 360px){
	#ambassador .contents { padding: 0;}
}

@media only screen and (max-width: 320px){
	#ambassador { width:95%; margin-top: -10em;}
}