.tip {
    width: 0px;
    height: 0px;
    position: absolute;
    background: transparent;
    border: 10px solid #ccc;
  }
  
  .tip-up {
    top: -25px; /* Same as body margin top + border */
    left: 10px;
    border-right-color: transparent;
    border-left-color: transparent;
    border-top-color: transparent;
  }
  
  .tip-down {
    bottom: -25px;
    left: 10px;
    border-right-color: transparent;
    border-left-color: transparent;
    border-bottom-color: transparent;  
  }
  
  .tip-left {
    bottom: 10px;
    left: -25px;
    border-top-color: transparent;
    border-left-color: transparent;
    border-bottom-color: transparent;  
  }
  
  .tip-right {
    bottom: 10px;
    right: -25px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;  
  }
  
  .dialogbox .body {
    position: relative;
    max-width: 300px;
    height: auto;
    margin: 20px 10px;
    padding: 5px;    
    border-radius: 3px;
    border: 5px solid #117e11;
  }
  
  .body .message {
    min-height: 30px;
    border-radius: 3px;
    font-family: Arial;
    font-size: 14px;
    line-height: 1.5;
    color: #797979;
  }
  #comment-box {
	background-color: #003BDE;;
	position: relative;
	padding: 20px;
	color: white;
}

#comment-box::after {
	content: "";
	position: absolute;
	height: 25px;
	width: 25px;
	bottom: -25px;
	left: 90%;
	background-color: #003BDE;
	clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.callouts {
    list-style-type: none;
  }
  
 .callouts li + li {
    margin-left: 3.3333%;
  }
  
  /* BASE STYLES FOR EACH */
  .callouts li {
    display: inline-block;
    /* Real styles */
    position: relative;   
    padding: 15px;
    border: 5px solid #117e11;
      border-radius: 4px;
      box-shadow: 0 0 10px #117e11;
      font-weight:bold;
      color:#117e11;
       text-align:center;
  }
  .bubble a {
      color:#117e11;
      text-align:center;
      text-decoration:none;
      font-weight:bold;      
  }
  
  /* TOP */
  .callouts--top:before {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      left: 23px;
      top: -42px;
    border: 10px solid transparent;
    border-bottom: 32px solid rgb(193,193,193); /* IE8 Fallback */
    border-bottom: 32px solid rgba(193,193,193,0.5);
    z-index: 2;
  }
  .callouts--top:after {
    content: "";
      position: absolute;
      width: 0;
      height: 0;
      left: 25px;
      top: -32px;
    border: 8px solid transparent;
    border-bottom: 25px solid #fff;
    z-index: 3;
  }
  
  /* BOTTOM */
  .callouts--bottom:before {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      left: 23px;
      bottom: -42px;
    border: 10px solid transparent;
    border-top: 32px solid rgb(193,193,193); /* IE8 Fallback */
    border-top: 32px solid rgba(193,193,193,0.5);
    z-index: 2;
  }
  .callouts--bottom:after {
    content: "";
      position: absolute;
      width: 0;
      height: 0;
      left: 25px;
      bottom: -31px;
    border: 8px solid transparent;
    border-top: 24px solid #fff;
    z-index: 3;
  }
  
  /* LEFT */
  .callouts--left:before {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      left: -69px;
      bottom: 17px;
    border: 31px solid transparent;
    border-right: 33px solid #117e11; /* IE8 Fallback */
    border-right: 33px solid #117e11;
    transform:             rotate( 29deg ) skew( -35deg );
        -moz-transform:    rotate( 29deg ) skew( -35deg );
        -ms-transform:     rotate( 29deg ) skew( -35deg );
        -o-transform:      rotate( 29deg ) skew( -35deg );
        -webkit-transform: rotate( 29deg ) skew( -35deg );
    z-index: 2;
  }
  .callouts--left:after {
    content: "";
      position: absolute;
      width: 0;
      height: 0;
      left: -58px;
      bottom: 19px;
    border: 29px solid transparent;
    border-right: 29px solid #fff;
    z-index: 3;
  }
  
  /* RIGHT */
  .callouts--right:before {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      right: -42px;
      top: 17px;
    border: 10px solid transparent;
    border-left: 32px solid rgb(193,193,193); /* IE8 Fallback */
    border-left: 32px solid rgba(193,193,193,0.5);
    z-index: 2;
  }
  .callouts--right:after {
    content: "";
      position: absolute;
      width: 0;
      height: 0;
      right: -31px;
      top: 20px;
    border: 8px solid transparent;
    border-left: 24px solid #fff;
    z-index: 3;
  }
  .bubble { background:#FFF; margin-top:40px;}
  .bubble p span { text-decoration: underline;}
  .bubble p { text-transform: capitalize; text-align:center; color:#117e11; font-weight:bold;}  
  .modal-header { border:0; }
@media only screen and (max-width: 600px) {
    .selling_agreement .img-fluid { height:100%; }
    .selling_agreement p { font-size:18px; }
    .modal-content .modal-body button.close {
      margin-right:0;  
    }
    .bubble.me {
      margin-left:0;
      margin-right:0;
      padding:3px;
    }
    .modal-dialog { 
      position:fixed;
      bottom:0;
    }
  }
  .modal-content button.close {
    display:block;
    margin-right:45px;
    border-radius: 50%;
    border: 1px solid #919191;
    padding: 3px 8px;
    margin-top:3px;
    opacity:1;
  }
  .animate-bottom {
    position: relative;
    animation: animatebottom 0.4s;
  }
  
  @keyframes animatebottom {
    from {
      bottom: -300px;
      opacity: 0;
    }
  
    to {
      bottom: 0;
      opacity: 1;
    }
  }
  .modal-content { background:transparent; border:0; }
  button.close { background:#FFF; }

  .bubble{
    background-color: #F2F2F2;
    border-radius: 5px;
    box-shadow: 0 0 6px #117e11;
    display: inline-block;
    padding: 10px 18px;
    position: relative;
    vertical-align: top;
    border: 6px solid #117e11;
}

.bubble::before {
  background-color: #F2F2F2;
  content: "\00a0";
  display: block;
  z-index:-1;
  height: 43px;
  position: absolute;
  bottom: 30px;
  transform: rotate( 29deg ) skew( -35deg );
  -moz-transform: rotate( 29deg ) skew( -35deg );
  -ms-transform: rotate( 29deg ) skew( -35deg );
  -o-transform: rotate( 29deg ) skew( -35deg );
  -webkit-transform: rotate( 26deg ) skew( -35deg );
  width: 47px;
}

.me {
    float: left;   
    margin: 5px 0px 5px 20px;
    z-index: 0;      
}

.me::before {
    box-shadow: -6px 6px 2px 0 #2f8e2f;
    left: -19px;
}
.modal-open { overflow:scroll; }
.modal-dialog { margin-top:0 !important; margin-bottom:0px !important; }

footer p, footer ul {
  margin:0;
  padding:0
}
footer ul li,.pre_footer_links ul li  {
  list-style:none;
}
.pre_footer_links ul li {
  font-weight: bold;
  line-height:1.7;
}
footer ul li a,.pre_footer_links a {
  text-decoration:none;
  color:#000;
}
.extra_link a {
  color:#000;
  text-decoration: none;
  font-weight: bold;
  display: block;
}
#btn1 {
  border: 5px solid #6AA84F;
  border-radius: 11px;
  padding: 4px 40px;
  background-color: #FFF;
  margin-bottom: 1rem;
  font-weight: 900;
  font-size: 0.98em;
}
#btn1.btn-custom-offer { background:#6AA84F;  color:#FFF; border:8px solid #F3F3F3; font-weight:bold; font-size:20px; border-radius:40px; }

button#btn1.btn:hover, button#learn_more.btn:hover, button#download_agreement.btn:hover { border-color:#000; } 
.dont_hover_area #btn1.btn:hover {
  border-color:#6AA84F;
}
/*.pre_footer_links + div, .extra_link + div {
  padding-right:0;
  padding-left:0;
}*/