@media screen and (min-width: 1270px)and (max-width: 1299px) {  body { zoom:1.08; } }
@media screen and (min-width: 1300px)and (max-width: 1381px) {  body { zoom:1.15; } }
@media screen and (min-width: 1900px)and (max-width: 1930px) {  body { zoom:1.1; } }
body { margin:0px; margin-top: 0px; background-color:#fff; padding:0px; text-align: center; font-family: 'Nunito', Helvetica;  margin-bottom: 0em;  }

a:hover { text-decoration: none }
#header { width: 960px; text-align: left; display: inline-block; margin-top: 0.5em }
#header .logo { width: 220px; display: inline-block; }
#header .continue { font-size: 0.8em; float:right; display: inline-block;padding-top: 0.5em; padding-right: 6.8em }

#secure { width: 890px; background-color: #fff; text-align: left; display: block; padding-bottom: 0.5em; margin-top: 0.5em  }
#secure ul { margin:0; padding: 0; clear: both; margin-left: 4.7em; border-bottom: 1px solid  #7EE2FF; line-height: 2em; padding-bottom: 0em }
#secure li { display: inline-block;  }
#secure li.ttl { font-size: 1.15em; color:#333; padding-right: 300px  }
#secure li.active { font-size: 0.8em; color:#0085e6;    }
#secure li.pass { font-size: 0.8em; color:#AAA; padding-left:2em  }
#secure .over { width: 19px; height: 19px; border-radius: 50%; line-height: 1.6em; display: inline-block; background-color:#0085e6; color:#fff; text-align: center;  }
#secure .pass_over {width: 19px; height: 19px; border-radius: 50%; line-height: 1.6em; display: inline-block; color:#fff; text-align: center;   background-color: #CCC }

#main{
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
}

#inline { text-align: center; display: block; }
#inline .selection { margin-top:2em; font-size: 1.2em; margin-bottom: 1em }

.ttl { font-size: 1.2em; color:#333;  }
.txt_small { font-size: 1em; color:#333; width:80%;  }
#left { width:440px; display: inline-block; vertical-align: top; text-align: left; margin-left: 4.7em; padding-top: 0.5em; position: relative; }
#left .what { font-size: 0.95em; }
#left #cart_info { padding-bottom: 0.5em }
#left ul.info { width:90%; text-align:left;font-size: 1em; margin:0; padding: 0; margin-top:0.4em; margin-left: 0em   }
#left ul.info li { line-height: 2em; list-style-type: none; }
#left ul.info i { color: #00cc00; padding-right: 0.3em;  }
#left .count { color: blue }

#right { width:442px; display: inline-block; vertical-align: top; text-align: left; padding-top: 0.5em;  }
.mc { padding-top: 1em; padding-bottom: 0em; }
#right p { margin:0; padding:0.6em 0 }

#right .selected { background-color: #ddf9ff; border-radius: 10px;  }
#right .radio { margin:0; padding: 0;  }
#right .ttl { padding-bottom: 0.3em }
#right .price_line { width: auto; max-width: 360px; line-height: 2.45em; border-bottom: 1px solid #eee  }
#right .price_line:hover { cursor: pointer; background-color: #f3f3f3; border-radius: 10px; }
#right .price_line_disabled { width: auto; max-width: 360px; line-height: 2.4em; border-bottom: 1px solid #eee  }
#right .price_line_disabled:hover { background-color: #f9f9f9; cursor: no-drop; }
#right .input { display: inline-block; padding-right: 0.5em; padding-left: 1em; font-size: 1.1em; vertical-align: top; margin-top: 0.73em}
#right .count { display: inline-block; padding-right: 2em;  font-size: 1.1em; width: 110px;vertical-align: top; margin-top: 0em}
#right .price { display: inline-block; padding-right: 0.5em; font-size: 1.1em; font-weight: bold;vertical-align: top; color:#333; min-width: 3em;}
#right .old_price { text-decoration: line-through; color:#777;   font-size:0.8em }
#right .save { font-size: 0.8em; background-color: #FADF10; color: #333; border-radius: 3px; vertical-align: top; margin-top: 0.7em; border: none; line-height: 1.7em; text-align: center; width: 75px; display: inline-block;}
#right .iagree { font-size: 0.9em; width:75%; margin-top: 0em }
#right .iagree a { text-decoration: none }
#right .iagree a:hover { text-decoration: underline; }
#right button { font-family: 'Nunito'; font-weight: normal; text-align: center; color:#fff; width: 270px; height: 43px; background-color: #F96900; border-radius: 5px; border:none; margin-top: 1em; margin-bottom: 1em }
#right button:hover { cursor: pointer; background-color: #FE8934 }
#right button:disabled { cursor: auto;  }

#right #mb_with_p { display: none }
#right .paddla_button { height: 28px; display: block; font-family: 'Nunito'; font-weight: 600; text-align: center; color:#fff; width: auto; max-width: 270px; font-size: 1.2em; background-color: #F96900; border-radius: 5px; border:none; margin-top: 0.5em; margin-bottom: 0.5em; vertical-align:middle; padding: 0.5em 0;          -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out; }
#right .paddla_button:hover { cursor: pointer; background-color: #c27a11 }
#right .paddla_button:disabled { cursor: auto;  }
#right .paddla_button i { padding-left:10px; vertical-align: middle; }
#right #onetimecharge { font-size:1em; padding-left: 18px; padding-top: 10px} 

#right .label { font-size: 1.5em; display: inline-block; vertical-align: middle; padding-top: 0em;   }
#right .ii { font-size: 2.7em; margin-left: 0.3em; display: inline-block;  vertical-align: middle; margin-top: -2px }
#right .paypal { font-size: 0.9em; width:75%;  }

.coupons { height: auto; padding-top: 0.5em; padding-bottom: 0.5em; margin-bottom: 0.5em; font-size:0.8em;  border-top:1px solid #f0f0f0; width:90%;  border-bottom:1px solid #f0f0f0; width:90%;}
.coupons .havecoupon { color:#00ACE5; }
.coupons .havecoupon:hover { text-decoration: underline; cursor: pointer; }
.coupons .input { display: inline-block; vertical-align: top }
.coupons .coupon_input { height: 2.3em; padding: 5px; border:1px solid #ddd; border-radius: 3px; width:150px; font-size: 0.99em; margin:0; text-transform: uppercase; }
.coupons .button_apply { padding: 5px; border:1px solid #ddd; border-radius: 3px;  font-size: 0.99em; display: inline-block; background-color: #f5f5f5; vertical-align: top  }
.coupons .button_apply:hover {  background-color: #fafafa; cursor: pointer;  }
.coupons .invalid { display: none; color:red; padding-left: 1em; vertical-align: top; padding-top: 6px }
.coupons .applied { display: none; padding-left: 0em; vertical-align: top; padding-top: 6px }
.coupons .expired { display: none; padding-left: 0em; vertical-align: top; padding-top: 6px }
.coupons .couponform { display: none }

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border-radius: 5px;
  width: 350px; /* Could be more or less, depending on screen size */
}
.modal-content .validemail { display: none; color:red; font-size:0.85em; }
.modal-content input { font-size:1em; padding: 0.3em; line-height: 2em; border-radius: 3px; border: 1px solid #ccc; width:200px; height: 43px;  }
.modal-content .send { font-size:1em; font-weight: normal; text-align: center; color:#fff; height: 43px; background-color: #2C9DEF; border-radius: 5px; border:1px solid #2C9DEF;  padding: 0 1em 0 1em; }
.modal-content .send:hover { cursor: pointer; }
.modal-content .sent { display: none }
/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#eachpack { display: none }

.left, .right {
    flex: 1;                 /* Make both divs take equal space */
    padding: 10px;
    background-color: lightgray; /* Example background for clarity */
    margin: 5px;
}


@media screen and (max-width: 768px) and (max-height: 1024px),
       screen and (max-width: 1024px) and (max-height: 768px) {

#header { width:95%; }
#header .logo { width: 160px;}
#header .continue { margin:0; padding:0; padding-left: 0.7em; padding-top: 0.3em; vertical-align: middle;}
#header .continue #c2 {display: none}

#secure { width: 95%;padding-left: 0.5em; margin-top:0.5em;  }
#secure ul { margin:0;border-bottom: none } 
#secure li { display: block; padding-right: 0 }
#secure li.ttl { padding-right: 0; display: block }
#secure li.active { padding-left:0; display: inline-block; padding-right: 0.3em   }
#secure li.pass { padding-left:0; display: inline-block; padding-right: 0.3em    }

.txt_small { width: 100% }
#left { width: 90%; display: inline-block; margin-left: auto; margin-right: auto  }
#left .what {  width: 100%; }
#left .ttl { margin-top: 1em }
#left  ul { margin-left: 1em; padding: 0; margin-top: 0.5em; margin-bottom: 0em }
#left ul.info { width:100%; text-align:left;font-size: 0.95em; margin:0; padding: 0; margin-top:0.75em; margin-bottom: 1.5em   }
#left ul.info li { line-height: 1.7em; list-style-type: none; }
#left ul.info i { color: #00cc00; padding-right: 0.3em;  }

#whatincludes { display: block; margin:0; padding:0; list-style-type: none; width: 90%; margin-left: 3%; margin-right: auto; line-height: 1.75em; margin-bottom: 2em; font-size: 0.9em }
#whatincludes i { color: green; }
#right { width: 90%; display: inline-block; margin-left: auto; margin-right: auto   }
#right button { width:100%;  }
#right #b_with_p { width:100%; max-width: none}
#right #mb_with_p { display: block }
#right .count { width:110px; padding-right: 1em }
#right .label { font-size: 1.8em; display: inline-block; vertical-align: top; padding-top: 0.1em;   }
#right .ii { font-size: 3em; margin-left: 0.3em; display: inline-block;  vertical-align: top; }
#right .iagree { width:100% }
#right .paypal { width: 100% }
#right #this_purchase { display: none }
#right #chooseyourpack { padding-left: 10px; display: inline-block;  }
#right #eachpack { display: inline-block; float: right; color: #0285e6; vertical-align: top; margin-top: 7px; font-size: 0.8em; margin-right: 5px;}
#right #onetimecharge { width: 91%; text-align: center }
.modal-content { width:85%; margin:0.5em; padding:1em; margin-top: 10em }
.mc { padding-top: 2em; } 
#main {
      width: 100%;
      display: flex;
      flex-direction: column;
  }

@media screen and (orientation: portrait) {
        #main {
            flex-direction: column-reverse;  /* Stack the divs vertically in portrait mode */
        }
    }

    /* For horizontal orientation (landscape mode) */
    @media screen and (orientation: landscape) {
      #left, #right { width: 40%; }

        #main {
            flex-direction: row;     /* Place the divs side by side in landscape mode */
        }
    }


#inline .selection { margin-top:1em; font-size: 1.2em; text-align: center;  }
}