@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i');

/* CSS Document */
body,
html {
  margin: 0;
  width: 100%;
  height: 100%;
}


/*Setup*/
body,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Noto Sans', sans-serif;
  font-weight: 700;
}

/* End of Setup */



/* Spacer */
.block-spacer {
  padding-top: 50px;
  padding-bottom: 50px;
}

.block-spacer-gradient {
  padding-top: 40px;
  padding-bottom: 20px;
}

/* End of Spacer */



/* Background */
.bg-img {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.bg-banner-1 {
  background: linear-gradient(rgba(16, 16, 16, 0.87), rgba(15, 15, 15, 0.9)), url(../images/bg-01.jpg);
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  background-position: top center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
}

.bg-banner-2 {
  background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url(../images/bgtxt.jpg);
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  background-position: center top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
}

.bg-banner-3 {
  background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url(../images/bg-02.jpg);
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
}

.bg-banner-4 {
  background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url(../images/bg-03.jpg);
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
}

.bg-banner-5 {
  background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url(../images/bg-02.jpg);
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
  padding: 50px 0;
}

.mw-80 {
  max-width: 80%;
}

.bg-banner-6 {
  background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(../images/bg-05.jpg);
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
}

.bg-color-1 {
  background-color: #f5f5f5;
}

.bg-color-2 {
  background-color: #fff;
}

.bg-gradient-1 {
  background: -webkit-linear-gradient(#222839 0%, #374058 47%, #222839 100%);
  background: -o-linear-gradient(#222839 0%, #374058 47%, #222839 100%);
  background: linear-gradient(#222839 0%, #374058 47%, #222839 100%);
  color: #2B3A4D !important;
}

/* End of Background */



/* Wrapping */
.middle-width {
  max-width: 800px;
  margin: 0 auto;
}

.middle-new-width {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 10rem;
}

.middle-gradient {
  max-width: 1200px;
  margin: 0 auto;
}

/* End of Wrapping */



/* Setup Font */
.content-default {
  display: block;
  font-family: 'Noto Sans', sans-serif;
  font-size: 20px;
  font-weight: 400;
}

.content-default h1,
.content-default h2,
.content-default h3,
.content-default h4,
.content-default h5,
.content-default h6 {
  margin-bottom: 1.7rem;
  line-height: 1.2;
}

.content-default p,
.content-default span {
  line-height: 1.5;
}

.content-default h1 {
  font-size: 3rem;
}

.content-default h2 {
  font-size: 2.5rem;
}

.content-default h3 {
  font-size: 2rem;
}

.content-default h4 {
  font-size: 1.5rem;
}

.content-default h5 {
  font-size: 1.2rem;
}



/* .content-default h6 {

}

.content-default span {

} */

.content-default p {
  font-size: 20px;
  font-weight: 400;
  color: #212121;
}

.text-top {
  color: #fff !important;
}

.text-headline {
  color: #fff !important;
  font-weight: 300 !important;
}

.text-title {
  color: #212121;
  font-weight: 700;
}

.text-gradient {
  color: #fff !important;
}

.text-price-top {
  margin-bottom: 0 !important;
}

.text-price {
  color: crimson;
  margin-bottom: 10px !important;
}

.text-title-price {
  color: crimson;
  margin-bottom: 0px !important;
}

.text-caution {
  font-weight: 700 !important;
}

/* End of Setup Font */



/* Listing */
.block-list-default {
  padding: 0 30px;
}

ul.custom1 {
  margin: 0;
  padding: 0;
  list-style-image: url('../images/12.png');
}

ul.custom1 li {
  font-family: 'Noto Sans', sans-serif;
  text-align: left;
  font-size: 20px;
  font-weight: 400;
  color: #333;
  padding-bottom: 1rem;
}

ul.custom1 li span {
  display: block;
  position: relative;
  top: -10px;
}

ul.custom2 {
  margin: 0;
  padding: 0;
  list-style-image: url('../images/11.png');
}

ul.custom2 li {
  font-family: 'Noto Sans', sans-serif;
  text-align: left;
  font-size: 20px;
  font-weight: 400;
  color: #333;
  padding-bottom: 1rem;
}

ul.custom2 li span {
  display: block;
  position: relative;
  top: -10px;
}

/* End of Listing */



/* Video Content */
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* End of Video Content */



/* Card Well */
.card-small {
  text-align: center;
  border-radius: 100px;
  font-size: 20px;
  max-width: 700px;
  background-color: rgb(255, 229, 158) !important;
  border: 0;
}

.card-small p {
  margin: 0;
}

.card-guarantee {
  text-align: center;
  border-radius: 0;
  border: 5px dashed red;
  font-size: 20px;
  font-weight: 300;
  max-width: 600px;
  padding: 25px 50px;
}

.card-bonus {
  max-width: 800px;
  padding: 25px 50px;
  border-radius: 10px;
  background-color: #fff !important;
  border: 2px solid #333;
  border-radius: 25px;
}

.card-header {
  max-width: 450px;
  margin-top: -50px;
  border-radius: 100px !important;
  background-color: #f0c32d !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  color: #0a4660;
  font-weight: 700;
}

.card-last {
  text-align: left;
  max-width: 800px;
  padding: 25px 50px;
  border-radius: 10px;
  background-color: #fff !important;
  border: 2px solid #333;
  border-radius: 25px;
  font-weight: 300;
  font-size: 20px;
}

.card-body p{
  font-weight: 300;
}

.card {
  max-width: 700px;
}

/* End of Card Well */



/* Images */
.img-prop {
  max-width: 200px;
}

.img-bonus {
  width: 400px;
}

/* End of Images */

/* when ipad */
@media (max-width: 968px) {
  .img-bonus {
    width: auto !important;
  }
}

@media (max-width: 790px) {
  .img-bonus {
    width: auto !important;
  }
}

/* when mobile */
@media (max-width:767px) {
  .card-bonus {
    padding: 10px 20px;
  }  
  
  .card-guarantee {
    padding: 10px 20px;
  }  

  .card-last {
    padding: 10px 20px;
  }

  .content-default h1 {
    font-size: 2rem;
  }

  .content-default h2 {
    font-size: 1.8rem;
  }

  .content-default h3 {
    font-size: 1.5rem;
  }

  .content-default h4 {
    font-size: 1.2rem;
    font-weight: 300;
  }

  .img-bonus {
    width: auto !important;
  }
}

@media (max-width:480px) {
  .card-bonus {
    padding: 10px 20px;
  }  
  
  .card-guarantee {
    padding: 10px 20px;
  }  

  .card-last {
    padding: 10px 20px;
  }

  .content-default h1 {
    font-size: 2rem;
  }

  .content-default h2 {
    font-size: 1.8rem;
  }

  .content-default h3 {
    font-size: 1.5rem;
  }

  .content-default h4 {
    font-size: 1.2rem;
    font-weight: 300;
  }

  .img-bonus {
    width: auto !important;
  }
}