@charset "utf-8";

/* CSS Document */

@-ms-viewport {

 width: device-width;

}

.clearfix {

  clear: both;

  margin: 0;

}

.text-center {

  text-align: center;

}

.red {

  color: #d2252b;

}

.center-block {

  display: block;

  margin:0 auto;

}

.only-mobile {

  display: block;

}

.only-desktop {

  display: none;

}

.strikethrough-diagonal {

  position: relative;

  font-weight: bold;

}

.strikethrough-diagonal::before {

  position: absolute;

  content: '';

  left: 0;

  top: 45%;

  right: 0;

  border-top: 4px solid;

  border-color: inherit;

  -webkit-transform: skewY(-15deg);

  -moz-transform: skewY(-15deg);

  transform: skewY(-15deg);

}

.main-bg {

  background: #1a3b6d url(https://aff.makehimsure.com/wp-content/uploads/2020/04/bg-1.jpg) fixed center;

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

}

.oto-content {

  width: 100%;

  max-width: 800px;

  margin: 0 auto;

  padding: 1em;

  background: #FFFFFF;

  border: thin #E9E9E9 solid;

}

.oto-content p, .oto-content li {

  font-size:18px;

}

@media screen and (max-width: 767px){
  .oto-content p, .oto-content li {
    font-size: 16px;
  }  
}

.oto-content ol, .oto-content ul{
  margin-left: 30px;
}

.oto-content li{
  padding-left: 10px;
  margin-bottom: 1em;
  line-height: 1.5em;
}

.progress-bar {

  text-align: center;

  margin-bottom: 1em;

}

.oto-cart {

  background: #f5f5f5;

  padding: 1em;

  width: 100%;

  margin: 0 auto;

  text-align: center;

  border-radius: 10px;

  -o-border-radius: 10px;

  -moz-border-radius: 10px;

  -webkit-border-radius: 10px;

  margin-bottom: 2em;

  margin-top: 2em;

}

.oto-cart img {

}

.oto-btn {

  display: block;

  width: 100%;

  max-width: 300px;

  margin: 0 auto;

  margin-bottom: 1em;

  text-align: center;

  padding: .8em;

  border: none;

  appearance: none;

  -webkit-appearance: none;

  -moz-appearance: none;

  -webkit-border-radius: 5px;

  -moz-border-radius: 5px;

  border-radius: 5px;

  text-decoration: none;

  font-family: roboto;

  font-size: 160%;

  font-weight: 700;

  color: #000000;

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f8b500+0,f9cb4d+51,f8b500+51,f8b500+100 */

  background: #f8b500; /* Old browsers */

  /* IE9 SVG, needs conditional override of 'filter' to 'none' */

  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y4YjUwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2Y5Y2I0ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2Y4YjUwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmOGI1MDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

  background: -moz-linear-gradient(top, #f8b500 0%, #f9cb4d 51%, #f8b500 51%, #f8b500 100%); /* FF3.6-15 */

  background: -webkit-linear-gradient(top, #f8b500 0%, #f9cb4d 51%, #f8b500 51%, #f8b500 100%); /* Chrome10-25,Safari5.1-6 */

  background: linear-gradient(to bottom, #f8b500 0%, #f9cb4d 51%, #f8b500 51%, #f8b500 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8b500', endColorstr='#f8b500', GradientType=0 ); /* IE6-8 */

}

.oto-prod-box {

  display: flex;

  flex-direction: column;

  margin: 1em 0;

  background: #f5f5f5;

  padding: 2em;

}

.oto-prod-box div img {

  max-width: 200px;

  margin: 0 auto;

  display: block;

  margin-bottom: 1em;

}

.upsell_table {

  width: 95%;

  margin: 0 auto;

  margin-bottom: 2em;

}

table, th, td {

  border: 1px solid #999;

  border-collapse: collapse;

  font-size: 110%;

}

th, td {

  padding: .5em;

}

th {

  text-align: left;

}

table {

  border-spacing: 5px;

}

tr:nth-child(even) {

  background: #F5F5F5;

  color: #333;

}

tr:nth-child(odd) {

  background: #EDEDED;

}

.gift-content {

  border: none;

  padding: 30px;

}

.gift {

  width: 100%;

  max-width: 700px;

  margin: 0 auto;

  margin-top: 0px;

  margin-bottom: 0px;

  border: 3px #2b518a solid;

  margin-bottom: 20px;

  margin-top: 50px;

  /*background: #F8F8F8;*/

}

.gift h1 {

  display: block;

  max-width: 350px;

  margin: 0 auto;

  margin-top: 0px;

  padding: .5em;

  margin-top: -30px;

  background: #2b518a;

  color: #ffffff;

  font-size:150%;

  margin-top:-55px;

  text-align: center;

  margin-bottom:1em;

}

.gift h2 {

  margin-bottom:1em;

}

.gift-content ul {

  margin-left: 30px;

  margin-bottom: 1em;

}

ul.phaselist {

  margin-left: 3em;

  margin-bottom: 1em;

}

.oto-order-box {

  display: flex;

  flex-direction: column;

  align-items: center;

  max-width: 700px;

  background: #f5f5f5;

  padding: 2em;

  margin: 0 auto;

  margin-bottom: 0px;

  margin-bottom: 4%;

  -webkit-border-radius: 5px;

  -moz-border-radius: 5px;

  border-radius: 5px;

}

/*Accordion*/

a.accordion {

  display: block;

  color: #444;

  cursor: pointer;

  padding: 18px;

  width: 100%;

  text-align: left;

  outline: none;

  font-size: 20px;

  font-weight: 300;

  background: #f1f1f1;

}

a.accordion.active {

  color: #fff;

  background: #be2026;

}

a.accordion:hover {

  color: #fff;

  background: #be2026;

}

a.accordion::before {

  content: '\e146';

  position: absolute;

  font-family: 'Material Icons';

  font-size: 1.2em;

  float: right;

  position: relative;

  top: -2px;

  transform: rotate(180deg);

  transition: all 0.5s;

}

a.accordion.active::before {

  content: '\e909';

  transform: scale(1);

  transition: all 0.5s;

}

div.panel {

  border-bottom: 1px #e7e7e7 solid;

  padding: 0px 40px;

  background-color: #fff;

  max-height: 0;

  overflow: hidden;

  transition: max-height .3s ease-out;

  border-left: 10px #f1f1f1 solid;

  border-right: 10px #f1f1f1 solid;

}

div.panel ul {

  margin-left: 30px;

}

div.panel ul li {

  margin-bottom: 15px;

}

.swipes {

  margin-top: 2em;

}

.bullet-oto {

  padding:0px 2em 0 3em;

}

.gift-flex {

    display:flex;

    flex-direction:column;

    align-items:center;

  }

@media screen and (max-width: 767px) {
  .main-bg{
    padding: 0;
  }
  .oto-content{
    padding: 2em 20px;
  }
}

@media screen and (min-width : 767px) {

  .only-mobile {

    display: none;

  }

  .only-desktop {

    display: block;

  }

/*  .oto-content h1 {

    font-size: 180%;

  }*/

  .oto-content {

    padding: 2.5em;

  }

  .oto-content p {

  font-size:110%;

}

  .progress-bar {

    margin-top: -4em;

    margin-bottom: 2em;

  }

  .oto-cart {

    background: #f5f5f5;

    padding: 1em 3em;

    width: 90%;

    margin: 0 auto;

    text-align: center;

    border-radius: 10px;

    -o-border-radius: 10px;

    -moz-border-radius: 10px;

    -webkit-border-radius: 10px;

    margin-bottom: 2em;

    margin-top: 2em;

  }

  .oto-prod-box {

    display: flex;

    flex-direction: row;

    padding: 2em 1em;

    justify-content: center;

  }

  .oto-prod-box div {

    width: 50%;

  }

  .oto-prod-box div img {

    max-width: 250px;

  }

  table, th, td {

    border: 1px solid #999;

    border-collapse: collapse;

    font-size: 110%;

  }

  th, td {

    padding: 1em;

  }

  .gift-flex {

    flex-direction:row;

    align-items:center;

  }

  .gift-flex div:nth-child(1) {

    width:70%;

  }

  .gift-flex div:nth-child(2) {

    width:30%;

  }

}



@media screen and (min-width : 981px) {

  .oto-prod-box div img {

    max-width: 300px;

  }

}

/*===========================================================*/

.add-order{
  transition: 0.3s;
}

.add-order:hover{
  transform: translateY(-5px);
  filter: opacity(.8);
}
.upsell_table_4col tr td:nth-of-type(2){

    /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.upsell_table_4col .total-row td:last-of-type{
  text-align: center;
}

.upsell_table_4col .total-row.red {
  font-size: 20px;
}

@media screen and (max-width: 767px){
  .gift-content{
    padding: 30px 20px;
  }
  .gift-content ul{
    margin-left: 20px;
  }

  .upsell_table_4col, .upsell_table_4col .total-row.red {
    font-size: 14px;
  }

  .upsell_table_4col tr td:first-of-type{
    display: none;
  }
  .upsell_table_4col tr.total-row td:first-of-type{
    display: table-cell;
    column-span: 1
  }

}