@font-face {
    font-family: 'RingsideNarrow';
    src: url('https://cdn.epoch.cloud/assets/fonts/RingsideNarrow-Book.otf') format('opentype');
}

@font-face {
    font-family: 'RingsideNarrow-Bold';
    src: url('https://cdn.epoch.cloud/assets/fonts/RingsideNarrow-Bold.otf') format('opentype');
}

.f12 {
    font-size: 12px;
}

.text-decoration-underline {
    text-decoration: underline;
}

/* fix for safari */
.row:before, .row:after { 
    display: none !important;
}

.piano_on #cb-main-content h3  {
    background: #1b2b44;
}

#checkout-form .error, .subscription-create-error {
    color: red;
    font-size: 18px;
}

#updatePayment-form .error {
    color: red;
}

.paypal-express {
    height: 40px;
}


.paypal-checkout-overlay {
    display: block;
    position: fixed;
    z-index: 2147483647;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    max-height: 100%;
    min-width: 100%;
    min-height: 100%;

    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    -moz-animation-duration: 1s;
    -moz-animation-fill-mode: forwards;
    -moz-animation-iteration-count: 1;

    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);

    background-color: black;
    background-color: rgba(0, 0, 0, 0.75);
    background: -webkit-radial-gradient(50% 50%, ellipse closest-corner, rgba(0,0,0,1) 1%, rgba(0,0,0,0.75) 100%);
    background: -moz-radial-gradient(50% 50%, ellipse closest-corner, rgba(0,0,0,1) 1%, rgba(0,0,0,0.75) 100%);
    background: -ms-radial-gradient(50% 50%, ellipse closest-corner, rgba(0,0,0,1) 1%, rgba(0,0,0,0.75) 100%);
    background: radial-gradient(50% 50%, ellipse closest-corner, rgba(0,0,0,1) 1%, rgba(0,0,0,0.75) 100%);
    color: #fff;
}
.paypal-checkout-modal {
    font-family: "HelveticaNeue", "HelveticaNeue-Light", "Helvetica Neue Light", helvetica, arial, sans-serif;
    font-size: 14px;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    max-width: 400px;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    cursor: pointer;
}
.paypal-checkout-logo {
    cursor: pointer;
    margin-bottom: 30px;
    display: inline-block;
}
.paypal-checkout-logo img {
    display: inline;
    height: 36px;
}
.paypal-checkout-logo img .paypal-checkout-logo-pp {
    margin-right: 10px;
}
.paypal-checkout-message {
    font-size: 15px;
    line-height: 1.5;
    padding: 10px 0;
}
.paypal-checkout-continue {
    font-size: 15px;
    line-height: 1.35;
    padding: 10px 0;
    font-weight: bold;
}
.paypal-checkout-continue a {
  border-bottom: 1px solid currentColor;
  color: #fff;
  text-decoration: none;
} 

#existing-card, #card-info-line, .start-hidden {
    display: none;
}

#logout, #new-card, #new-plan, .login-link, #show-coupon {
    text-decoration: underline;
}

.terms {
    margin-top: 20px;
}

.bold {
    font-weight: bold;
}

.green {
    color: #2db82d;
}

.green_txt {
    color: #1b951b !important;
}

.coupon-logo {
    height: 25px;
}

.success-msg {
    color: green;
    font-size: 18px;
}

.loading-throbber-wrapper {
    width: 64px;
    margin: auto;
    display:none;
}
.lds-dual-ring {
    display: inline-block;
    width: 37px;
    height: 37px;
}
.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 46px;
    height: 46px;
    margin: 1px;
    border-radius: 50%;
    border: 5px solid #00369C;
    border-color: #00369C transparent #00369C transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

#create-password-btn {
    display: block;
    padding: 5px;
    font-size: 18px;
    height: 100%;
    width: 100%;
    line-height: 27px;
    color: #FFFFFF;
    background-color: #00369C;
    font-family: "D-DINCondensed", "D-DIN", Arial;
    border-radius: 3px;
    outline: none;
    border: none;
    margin: 5px auto;
}

#set-pw-text {
    margin-bottom: 30px;
}

.change-failed{
    color: #ff3b00;
}

#pw-reset-success {
    color: green;
    font-size: 18px;
}

#check-inbox-msg, p.set-password {
    font-size: 20px;
    line-height: 26px;
    color: black;
    text-align:center;
    margin: 10px 0 20px 0;
}

#continue-reading {
    display: block;
    padding: 5px;
    height: 100%;
    width: 100%;
    max-height: 44px;
    max-width: 242px;
    font-size: 20px;
    line-height: 27px;
    color: #FFFFFF;
    background-color: #00369C;
    font-family: "D-DINCondensed", "D-DIN", Arial;
    border-radius: 3px;
    outline: none;
    border: none;
    margin: 5px auto;
    cursor: pointer;
}

.change-failed, #pw-reset-success, #continue-reading{
    display: none;
}

.modal-addr .modal-header h4 {
    color: white;
    font-size: 20px;
    font-family: Lato,Helvetica Neue, Helvetica, Arial, sans-serif;
}

.modal-addr .modal-body .msg {
    text-align: center;
    font-size: 14px;
}

.modal-addr .modal-body .form-data .field-name {
    flex: 1;
    text-align: right;
    color: grey;
    font-size: 18px;
}
.modal-addr .modal-body .form-data .field-val {
    flex: 1;
    text-align: left;
    color: black;
    font-size: 18px;
    font-weight: bold;
    margin-left: 10px;
}
.modal-addr .modal-body .form-data .field-input {
    flex: 1;
    text-align: left;
    margin-left: 10px;
    margin-top: -3px;
    display: none;
}
.modal-addr .modal-body .form-data .field-input input {
    color:  #D7620E;
    font-size: 18px;
    font-weight: bold;
    border: 1px solid  #D7620E;
    padding: 3px 5px;
}
.modal-addr .modal-body .form-row {
    margin: 10px 0;
}
.modal-addr .modal-body .you-make-changes-now {
    text-align: center;
    display: none;
    font-size: 20px;
    font-weight: bold;
    color: #5b5b5b;
}
.modal-addr .modal-footer .btn.make-changes {
    order: 1;
}
.modal-addr .modal-footer .btn.confirm-address {
    order: 2;
    text-align: right;
    margin-left: auto;
    padding: 6px 12px;
}

.modal-backdrop.show  {
    opacity: 0.8;
}

@media only screen and (max-width: 600px) {
    .modal-addr .modal-body .form-data .field-input {
        width: 100%;
        text-align: center;
        flex-basis: 100%;
    }
    .modal-addr .modal-body .form-data .field-input input {
        width: 90%
    }

    .modal-addr .modal-body .form-data .field-name {
        width: 100%;
        flex-basis: 100%;
        text-align: center;
    }

    .modal-addr .modal-body .form-data .field-val {
        width: 100%;
        flex-basis: 100%;
        text-align: center;
    }


    .modal-addr .modal-footer .btn.make-changes {
        order: 2;
        width: 100%;
    }

    .modal-addr .modal-footer .btn.confirm-address {
        order: 1;
        width: 100%;
        text-align: center;
        margin: 20px 0;
    }

    .modal-footer {
        justify-content: center;
    }


}


.submit-group {
    display: block;
}
.form-inline.submit-group .form-group {
    display: block;
}

#purchase-btn {
    width: 100%;
    padding: 10px;
    font-size: 20px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    transition: all 0.4s ease 0s;
}
#purchase-btn:hover {
    background: #2d7b2a;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    transition: all 0.4s ease 0s;
}

.tos-text {
    font-size: 14px;
    color: gray;
    font-family: arial;
    margin: 30px 0;
    line-height: 170%;
}

.tos-text a, #login-link {
    color: #007bff;
}

.secure-badge {
    margin: 20px 0 20px 0;
}

.navbar.navbar-static-top {
    margin-bottom: 0px;
}


body.two-columns {

}

body.two-columns #cb-wrapper-hp {
    margin:0;
}


body.two-columns #sidebar {
    display: block;
    order: 2;
    flex: 1;
    padding: 68px 0 0 20px;
    font-size: 16px;
}

body.two-columns #cb-wrapper-hp {
    flex: 2;
    order: 1;
}
body.two-columns .container {
    display: flex;
}

#sidebar #product-details ul {
    list-style: none;
    padding: 0;
}

#sidebar #product-details ul li {
    margin: 5px 0;
}
      
#sidebar #product-details .package-image {
    margin: 0 0 20px 0;
}

#sidebar #product-details ul li:before {
    content: '✓';
    padding: 0 5px 0 0;
}
#sidebar .total-price .today, #sidebar .total-price .today .price-value{
    font-weight: bold;
    color: #00369C;
}
#sidebar .total-price .savings {
    font-weight: bold;
    color: #2db82d;
}
#sidebar .total-price {
    margin: 30px 0 0 0;
}
#sidebar .subs-info {
    display: none;
}

h1.sub-type {
    color: #404040;
    font-weight: 100;
    font-size: 25px;
}

.pricing .today label {
    font-weight: bold;
}

label {
    margin: 0px;
}

@media only screen and (max-width: 600px) { 
    body.two-columns #sidebar {
        order: 1;
        flex: 0 0 100%;
        padding: 0;
    }

    body.two-columns .sub-type {
        text-align: center;
    }

    body.two-columns #sidebar .total-price {
        margin: 0;
    }

    body.two-columns #sidebar .pricing {
        text-align: center;
    }

    body.two-columns #sidebar .cancel {
        display: none;
    }
    
    #sidebar #product-details {
        display: none;
    }

    body.two-columns #cb-wrapper-hp {
        order: 2;
        flex: 0 0 100%;
    }

    body.two-columns .container {
        flex-wrap: wrap;
    }

    .pricing .note {
        display: none;
    }
}

button.close.big img {  
    width: 100%;
}
button.close.big {
    position: absolute;
    right: -25px;
    width: 50px;
    opacity: 1;
    display: block;
    top: -25px;
}
button.close.big:not(:disabled):hover {
    opacity: 1;
}






/* EXIT POPUP */

#exitPopup {
    display: none;
  }

.exitPopup_class {
background: rgba(0, 0, 0, 0.75);
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1000;
}

.popUpTemp {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
margin: 100px auto;
width: 594px;
background-color: #ffffff;
}


@media only screen and (min-width:900px){
.popUpTemp {
    margin: 158px auto;
}
}


.box{
display:grid;
grid-template-columns: 41% 59%;
overflow: auto;
  z-index: 1; 
  border-radius: 3px;
  background-image: radial-gradient(
  farthest-side at 60% 55% ,
  #3E6389, 
  #03375F);

}
@media only screen and (max-width: 813px) {
.box{
    display:inline-block;
    max-width: 100%;
    margin: auto;
    display:block;
}
.popUpTemp{
    width:80%;
    height:auto;
}
}
#boxHeader{
font-family: Helvetica;
text-align: center;
color: white;
height: 23px;
font-size: 19px;
}

.word_side h2{
margin: 15px 0;
color:white;
font-family:Helvetica;
}

.popUpTemp_Head {
text-align: center;
font-size: 27px;
font-weight: bold;
margin-bottom: 15px;
font-family: RingsideNarrow;
line-height: 1.3;
letter-spacing: -0.39px;
color: #000000;
}

@media only screen and (max-width: 700px) {
.popUpTemp_Head {
    font-size: 22px;
}
}

.t_italic{
font-style: italic;
}

.GIFT{
color:#FFFF67;
}

#popupCloseButton {
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
cursor: pointer;
font-size: 12px;
}  

.xbutton{
text-align: right;
margin-bottom:10px;
}

.word_side{
padding-bottom: 50px;
text-align: center;
}
@media only screen and (max-width: 600px) {
.word_side{
    margin-bottom: 0px;
}
}

.word_side p{
margin:5px 0px;
}

.toSubs2{
justify-content: center;
align-items: center;
text-align: center;
margin-bottom:30px;
color:white;
font-family: 'Helvetica';
font-weight:600;
}

.toSubs2 img{
display: none;
}

@media only screen and (max-width:768px){
.toSubs2 img{
display:block;
width:40%;
margin: auto;
padding-top: 30px;
}
}


.red{
color:red;
font-weight: bold;
}

.toSubs{
display: inline-block;
text-align: center;
font-family: RingsideNarrow-Semi;
font-size: 22px;
letter-spacing: 0.2px;
color: #000000;
margin: 0px 60px;
}

.image_side {
width:100%;
padding: 40px 0px;
}

@media only screen and (max-width: 813px){
.image_side{
    display:none;
}
}

.in_img{
text-align: right;
transform: rotate(10deg);
margin: 0 auto;
}

/*.image_side img{
border-radius: 5px;
}*/

@media only screen and (max-width: 600px) {
    .toSubs{
    margin: auto;
    }
}

@media only screen and (max-width: 550px) {
    .popUpTemp_Head{
        font-size: 20px;
    }
}

.word_side a {
    background: #FFFF67;
    font-size: 20px;
    font-weight: 600;
    border-radius: 7px;
    display: inline-block;
    padding: 13px 20px;
    color: black;
    width: 65%;
    border-color: #014991;
    text-decoration: none;
    -webkit-box-shadow: 6px 0px 10px 3px rgba(0,0,0,0.15);
    -moz-box-shadow: 6px 0px 10px 3px rgba(0,0,0,0.15);
    box-shadow: 2px 7px 10px 1px rgba(0, 0, 0, 0.40);
    cursor: pointer;
    text-align: center;
    font-family: 'Helvetica';
}

@media only screen and (max-width: 600px){
.word_side a{
    font-size: 19px;
}
.desk_only{
    display: none;
}
}

@media only screen and (max-width: 320px){
.word_side a{
    font-size: 15px;
}
}

.word_side a:hover {
background: white;
}

@media only screen and (max-width: 600px) and (min-width: 370px)  {
.popUpTemp{
    height:auto;
}
}

@media only screen and (max-width: 813px) and (max-height: 415px)  {
.toSubs2{
    display:none;
}
.xbutton{
    margin-bottom: 0px;
}
}

@media only screen and (max-width: 580px) and (max-height: 330px)  {
#boxHeader{
    display:none;
}
}
@media only screen and (max-width: 600px) and (min-height: 800px)  {
.popUpTemp{
    height:auto;
}
}

.ot-sdk-show-settings:focus {
    outline: none;
}
