
* { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; color: #394264; }

body { padding: 0px; margin: 0px; padding-top: 55px; }

.row {
  display: flex;
  padding: 0 4px;
  position: absolute; 
  top: 55px; 
  left: 0px; 
  right: 0px; 
  height: 1500px; 
  overflow: hidden;
}

/* Create two equal columns that sits next to each other */
.row .column { padding: 0 4px; width: 33.33333333333%; }
.row .column>div { margin-top: 8px; vertical-align: middle; display: flex; flex-direction: column; width: 100%; position: relative; }
.row .column>div img { width: 100%; }
.row .column>div img.logo { position: absolute; left: 5px; top: 5px; width: 100px; }
.row .column>div img.mdf { padding: 2px 5px 2px 5px; background-color: #000; }

.row .column1>div img.logo { position: absolute; left: 5px; top: 5px; width: 100px; }
.row .column3>div img.logo { position: absolute; right: 5px; left: auto; top: 5px; width: 100px; }

.join { position: relative; left: 0px; top: 0px; right: 0px; text-align: center; display: flex; justify-content: center; align-items: center; z-index: 25; padding-bottom: 50px; padding-top: 50px; }
.join .bg { width: calc( 100% - 20px ); margin: 40px; position: relative; box-shadow: 1px 1px 3px #000; border-radius: 2px; max-width: 800px; }
.join .bg .bg-inner { position: relative; display: flex; flex-direction: column; margin: 20px; margin-bottom: 50px; }
.join .bg .bg-inner>div { height: 50%; }
.joinOption { color: #394264; width: 80%; margin: auto; border: 1px solid #bac0d6; margin: 10px auto; padding: 10px; box-shadow: 1px 1px 3px #bac0d6; cursor: pointer; line-height: 22px; display: flex; align-items: center; font-weight: bold; border-radius: 2px; text-align: center; }
.joinOption:hover { background-color: #bac0d6; border-color: #394264; }
.joinOption.selected { background-color: #394264; color: #FFF; border-color: #ee224a; box-shadow: 1px 1px 3px #ee224a; }
.joinOption.selected * { color: #FFF; }

.joinOption .check { width: 40px; }
.joinOption .check i { color: #FFF; font-size: 40px; font-weight: bold; display: none; }
.joinOption .check span { display: flex; align-items: center; justify-content: center; border-right: 2px solid #FF0000; padding-right: 8px; text-align: center; height: 100%; }
.joinOption.selected .check i { color: #ee224a; font-size: 40px; font-weight: bold; display: inline-block; }
.joinOption .name { width: calc( 100% - 100px ); padding-left: 20px; text-align: left; }
.joinOption .name .rebills { display: block; }
.joinOption .badge { width: 40px; display: none; }
.joinOption .badge img { height: 100%; max-height: 44px; }
.joinOption:hover .badge, .joinOption.selected .badge { display: flex; align-items: center; justify-content: center; }

.heading { font-weight: bold; margin-bottom: 25px; margin-top: 25px; }
.heading.paymentMethods { margin-bottom: 10px; margin-top: 10px; }

.billing { display: flex; width: calc( 80% + 22px ); margin: auto; justify-content: space-between; margin: 10px auto; border: 1px solid #bac0d6; border-radius: 2px; box-shadow: 1px 1px 3px #bac0d6; }
.billing>div { width: 50%;  cursor: pointer; display: flex; align-items: center; justify-content: center; padding-top: 5px; padding-bottom: 5px; }
.billing>div:hover { background-color: #bac0d6; }
.billing>div img { width: 100%; max-width: 150px; }
.billing div.selected { background-color: #394264; color: #FFF; }


.billing div .selected { display: none; }
.billing div .not-selected { display: inline-block; }
.billing div.selected .selected { display: inline-block; }
.billing div.selected .not-selected { display: none; }
 

.billing .check { width: 40px; }
.billing .check i { color: #FFF; font-size: 40px; font-weight: bold; }
.billing .selected .check i { color: #ee224a; }
.billing>div:hover .check i { color: #ee224a; }
.billing .name { width: calc( 100% - 80px ); padding-left: 20px; text-align: left; }

.section { display: flex; flex-direction: column; justify-content: space-evenly; }
header {  background-color: #FFF; padding: 5px; position: fixed; right: 0px; left: 0px; top: 0px; border-bottom: 8px solid #FFF; z-index: 50; display: flex; justify-content: space-between; align-items: center; }
header img { height: 40px; }

button { 
	width: calc( 80% + 22px );
    padding: 10px;
    color: #FFF;
    background-color: #ee224a;
    border-width: 0px;
    border: 0px solid #FFF;
    box-shadow: 1px 1px 3px #bac0d6;
	font-size: 22px;
	font-weight: bold;
	cursor: pointer;
	border-radius: 2px;
	margin: auto;
}

.packages { display: flex; justify-content: center; border: 1px solid #bac0d6; width: calc( 80% + 22px ); margin: 10px auto 20px auto; box-shadow: 1px 1px 3px #bac0d6; border-radius: 2px; }
.packages .package { width: 100%; text-align: center; padding: 10px; color: #000; font-weight: bold; cursor: pointer; }
.packages .package:hover { background-color: #bac0d6; }
.packages .package.selected { background-color: #394264; color: #FFF; display: flex;  }
.packages .package.selected * { color: #FFF; }

.packages .package input { width: calc( 100% - 25px ); padding: 10px; margin: auto; }

.logos { display: flex; align-items: center; justify-content: center; }
.logos>div { width: calc( 33.333333333% - 20px ); margin: auto 10px; }
.logos img { width: 100%; }
.logos>div a { display: flex; padding-left: 5px; padding-right: 5px; text-align: center; }
.logos>div a.mdf { background-color: #000; } 

.seperatorMemberships { border-top: 2px dotted #394264; width: 75%; margin: auto; margin-top: 20px; padding-top: 20px; }
.seperatorSections { border-top: 2px dashed #394264; width: 75%; margin: auto; margin-top: 20px; padding-top: 20px; }

.iAgree { padding-top: 20px; padding-bottom: 20px; width: calc( 80% + 22px ); margin: auto; }
.iAgree>div { display: flex; align-items: center; justify-content: center; }
.iAgree>div input { width: 25px; height: 25px; margin-right: 20px; }

[data-cascadeselect] { padding-top: 20px; padding-bottom: 20px; width: calc( 80% + 22px ); margin: auto; }
[data-cascadeselect]>div { display: flex; align-items: center; justify-content: center; }

p.footer { padding-top: 20px; padding-bottom: 10px; }

.bg-color { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background-color: #FFF;  }
input { border: 1px solid #949cba; }

.error-wrapper { background-color: #ee224a; width: calc( 80% + 22px ); color: #FFF; margin: auto !important; }
.error-wrapper p { color: #FFF; }

label { cursor: pointer; }

[data-cascadeselect] { display: none; }

#langbar { display: flex; }
#langbar>div { margin-left: 5px; margin-right: 5px; }
#langbar>div img { height: 25px; }

.afterProcessing { display: none; }
.afterProcessing, .beforeProcessing { max-width: 800px; width: calc( 80% - 20px ); margin: auto; }

[name=couponSubmit] { cursor: pointer; }

.strikeThrough { display: inline-block; position: relative; }
.strikeThrough:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 3px solid #ff0000;
  -webkit-transform:rotate(-15deg);
  -moz-transform:rotate(-15deg);
  -ms-transform:rotate(-15deg);
  -o-transform:rotate(-15deg);
  transform:rotate(-15deg);
}

body[data-sale="false"] .joinOption .check { display: none; }
body[data-sale="false"] .joinOption:hover .badge, .joinOption.selected .badge { display: none; }

.joinOption .tag:before { content: ' / ' }
.joinOption .priceDaily { min-width: 100px; }
.joinOption span.free { display: inline-block; background-color: #ee224a; color: #FFF; padding: 1px 5px; }


.joinOption[data-discount] .check i.discount { display: inline-block !important; }
.joinOption[data-discount] .check i.normal { display: none !important; }
.joinOption[data-discount].selected .check i.normal { display: none !important; }

.joinOption[data-discount="0"] .check i.discount { display: none !important; }
.joinOption[data-discount="0"] .check i.normal { display:inline-block !important; }

[data-dvds] .dvd[data-display=block] { display: block !important; }
[data-dvds] .dvd[data-display=inline-block] { display: inline-block !important; }
[data-dvds] .dvd[data-display=flex] { display: flex !important; }
[data-dvds='0'] .dvd, [data-dvds='0'] .dvd[data-display='block'], [data-dvds='0'] .dvd[data-display='inline-block'], [data-dvds='0'] .dvd[data-display='flex'] { display: none !important; }

div[data-freedvds] .freedvd[data-display=block] { display: block !important; }
div[data-freedvds] .freedvd[data-display=inline-block] { display: inline-block !important; }
div[data-freedvds] .freedvd[data-display=flex] { display: flex !important; }
div[data-freedvds='0'] .freedvd, div[data-freedvds='0'] .freedvd[data-display='block'], div[data-freedvds='0'] .freedvd[data-display='inline-block'], div[data-freedvds='0'] .freedvd[data-display='flex'] { display: none !important; }

div[data-freedvds] .freeDvdMonthly[data-display=block] { display: none !important; }
div[data-freedvds] .freeDvdMonthly[data-display=inline-block] { display: none !important; }
div[data-freedvds] .freeDvdMonthly[data-display=flex] { display: none !important; }
div[data-freedvds='0'] .freeDvdMonthly,
div[data-freedvds='0'] .freeDvdMonthly[data-display='block'] { display: block !important; padding-left: 5px; padding-right: 5px; }
div[data-freedvds='0'] .freeDvdMonthly[data-display='inline-block'] { display: inline-block !important; }
div[data-freedvds='0'] .freeDvdMonthly[data-display='flex'] { display: flex !important; }

div[data-freedvdstextmonthly=plural] .freedvdstextmonthly.singular,
div[data-freedvdstextmonthly=plural] .freedvdstextmonthly.singular[data-display=block],
div[data-freedvdstextmonthly=plural] .freedvdstextmonthly.singular[data-display=inline-block],
div[data-freedvdstextmonthly=plural] .freedvdstextmonthly.singular[data-display=flex] { display: none !important; }
div[data-freedvdstextmonthly=singular] .freedvdstextmonthly.plural,
div[data-freedvdstextmonthly=singular] .freedvdstextmonthly.plural[data-display=block],
div[data-freedvdstextmonthly=singular] .freedvdstextmonthly.plural[data-display=inline-block],
div[data-freedvdstextmonthly=singular] .freedvdstextmonthly.plural[data-display=flex] { display: none !important; }

div[data-monthstext=plural] .monthstext.singular, 
div[data-monthstext=plural] .monthstext.singular[data-display=block], 
div[data-monthstext=plural] .monthstext.singular[data-display=inline-block], 
div[data-monthstext=plural] .monthstext.singular[data-display=flex] { display: none !important; }
div[data-freedvdstext=plural] .freedvdstext.singular, 
div[data-freedvdstext=plural] .freedvdstext.singular[data-display=block], 
div[data-freedvdstext=plural] .freedvdstext.singular[data-display=inline-block], 
div[data-freedvdstext=plural] .freedvdstext.singular[data-display=flex] { display: none !important; }
div[data-freemonthstext=plural] .freemonthstext.singular, 
div[data-freemonthstext=plural] .freemonthstext.singular[data-display=block], 
div[data-freemonthstext=plural] .freemonthstext.singular[data-display=inline-block], 
div[data-freemonthstext=plural] .freemonthstext.singular[data-display=flex] { display: none !important; }
div[data-monthstext=plural] .monthstext.plural { display: block !important; }
div[data-monthstext=plural] .monthstext.plural[data-display=block] { display: block !important; } 
div[data-monthstext=plural] .monthstext.plural[data-display=inline-block] { display: inline-block !important; }
div[data-monthstext=plural] .monthstext.plural[data-display=flex] { display: flex !important; }
div[data-freedvdstext=plural] .freedvdstext.plural { display: block !important; }
div[data-freedvdstext=plural] .freedvdstext.plural[data-display=block] { display: block !important; }
div[data-freedvdstext=plural] .freedvdstext.plural[data-display=inline-block] { display: inline-block !important; }
div[data-freedvdstext=plural] .freedvdstext.plural[data-display=flex] { display: flex !important; }
div[data-freemonthstext=plural] .freemonthstext.plural { display: block !important; } 
div[data-freemonthstext=plural] .freemonthstext.plural[data-display=block] { display: block !important; }
div[data-freemonthstext=plural] .freemonthstext.plural[data-display=inline-block] { display: inline-block !important; }
div[data-freemonthstext=plural] .freemonthstext.plural[data-display=flex] { display: flex !important; }

div[data-monthstext=singular] .monthstext.plural, 
div[data-monthstext=singular] .monthstext.plural[data-display=block], 
div[data-monthstext=singular] .monthstext.plural[data-display=inline-block], 
div[data-monthstext=singular] .monthstext.plural[data-display=flex] { display: none !important; }
div[data-freedvdstext=singular] .freedvdstext.plural, 
div[data-freedvdstext=singular] .freedvdstext.plural[data-display=block], 
div[data-freedvdstext=singular] .freedvdstext.plural[data-display=inline-block], 
div[data-freedvdstext=singular] .freedvdstext.plural[data-display=flex] { display: none !important; }
div[data-freemonthstext=singular] .freemonthstext.plural, 
div[data-freemonthstext=singular] .freemonthstext.plural[data-display=block], 
div[data-freemonthstext=singular] .freemonthstext.plural[data-display=inline-block], 
div[data-freemonthstext=singular] .freemonthstext.plural[data-display=flex] { display: none !important; }
div[data-monthstext=singular] .monthstext.singular { display: block !important; }
div[data-monthstext=singular] .monthstext.singular[data-display=block] { display: block !important; } 
div[data-monthstext=singular] .monthstext.singular[data-display=inline-block] { display: inline-block !important; }
div[data-monthstext=singular] .monthstext.singular[data-display=flex] { display: flex !important; }
div[data-freedvdstext=singular] .freedvdstext.singular { display: block !important; }
div[data-freedvdstext=singular] .freedvdstext.singular[data-display=block] { display: block !important; }
div[data-freedvdstext=singular] .freedvdstext.singular[data-display=inline-block] { display: inline-block !important; }
div[data-freedvdstext=singular] .freedvdstext.singular[data-display=flex] { display: flex !important; }
div[data-freemonthstext=singular] .freemonthstext.singular { display: block !important; } 
div[data-freemonthstext=singular] .freemonthstext.singular[data-display=block] { display: block !important; }
div[data-freemonthstext=singular] .freemonthstext.singular[data-display=inline-block] { display: inline-block !important; }
div[data-freemonthstext=singular] .freemonthstext.singular[data-display=flex] { display: flex !important; }

div[data-discount] .discount[data-display=block] { display: block !important; }
div[data-discount] .discount[data-display=inline-block] { display: inline-block !important; }
div[data-discount] .discount[data-display=flex] { display: flex !important; }
div[data-discount='0'] .discount, div[data-discount='0'] .discount[data-display='block'], div[data-discount='0'] .discount[data-display='inline-block'], div[data-discount='0'] .discount[data-display='flex'] { display: none !important; }

div[data-discount] .nodiscount, div[data-discount] .nodiscount[data-display='block'], div[data-discount] .nodiscount[data-display='inline-block'], div[data-discount] .nodiscount[data-display='flex'] { display: none !important; }
div[data-discount='0'] .nodiscount[data-display=block] { display: block !important; }
div[data-discount='0'] .nodiscount[data-display=inline-block] { display: inline-block !important; }
div[data-discount='0'] .nodiscount[data-display=flex] { display: flex !important; }

div[data-discount] .discountPrice[data-display=block] { display: block !important; }
div[data-discount] .discountPrice[data-display=inline-block] { display: inline-block !important; }
div[data-discount] .discountPrice[data-display=flex] { display: flex !important; }
div[data-discount='0'] .discountPrice, 
div[data-discount='0'] .discountPrice[data-display='block'],
div[data-discount='0'] .discountPrice[data-display='inline-block'], 
div[data-discount='0'] .discountPrice[data-display='flex'] { display: none !important; }

div[data-freemonths] .freemonths[data-display=block] { display: block !important; }
div[data-freemonths] .freemonths[data-display=inline-block] { display: inline-block !important; }
div[data-freemonths] .freemonths[data-display=flex] { display: flex !important; }
div[data-freemonths='0'] .freemonths, div[data-freemonths='0'] .freemonths[data-display='block'], div[data-freemonths='0'] .freemonths[data-display='inline-block'], div[data-freemonths='0'] .freemonths[data-display='flex'] { display: none !important; }

div[data-months] .unlimitedDownloads, 
div[data-months] .unlimitedDownloads[data-display='block'],
div[data-months] .unlimitedDownloads[data-display='inline-block'], 
div[data-months] .unlimitedDownloads[data-display='flex'] { display: none !important; }
div[data-months='12'] .unlimitedDownloads { display: block !important; }
div[data-months='12'] .unlimitedDownloads[data-display='block'] { display: block !important; }
div[data-months='12'] .unlimitedDownloads[data-display='inline-block'] { display: inline-block !important; } 
div[data-months='12'] .unlimitedDownloads[data-display='flex'] { display: flex !important; }

@media (max-width: 927px) {
	.row .column { width: calc( 50% - 8px ); }
	.row .column2 { display: none; }
	.row { flex-wrap: wrap; }
	.join { padding-top: 25px; }
	.join .bg .bg-inner { margin: 5px; }
	.joinOption { width: 90%; }
	.billing, .packages, button { width: calc( 90% + 22px ); }
	.logos { margin-top: 20px; display: flex; }
	.bg-color { opacity: 0.95; }
	.logos>div { width: calc( 33.333333333% - 10px ); margin: auto 5px; }
	.logos.fullWidth>div { width: 50%; }
	.joinOption .name { width: calc( 100% - 100px ); padding-left: 20px; text-align: left; }
}

@media (max-width: 850px) {
	.joinOption { align-items: flex-start; flex-direction: column; }
	.joinOption .priceDaily {
	    min-width: 100px;
	    text-align: right;
	    width: 100%;
		margin-top: 10px;
	}
	.joinOption .name { font-size: 14px; width: calc( 100% ); padding-left: 0px; margin-top: 15px; }
	.joinOption .name .rebills { display: inline-block !important; }
}

@media (max-width: 650px) {
	.join .bg { width: calc( 100% - 10px ); margin: 20px; position: relative; box-shadow: 1px 1px 3px #000; border-radius: 2px; max-width: 800px; }

    
}

@media (max-width: 550px) {
	.joinOption .check { width: auto; }
	.joinOption:hover .check, .joinOption.selected .check { width: 40px; }
	.joinOption .check span { display: flex; width: 40px; }
	.heading { font-size: 15px; }
}

@media (max-width: 550px) {

	.joinOption .name .slash { display: none; }
	.joinOption .name .priceMonthly { display: block; }
}

.innerJoin { display: flex; display: flex;width: 100%; }
.innerJoin .details { display: flex; width: calc( 100% - 50px ); }
.innerJoin .details .text>span { display: block; }
.innerJoin .details .text {
    width: calc( 100% - 160px );
    text-align: left;
    padding-left: 10px;
}
.innerJoin .details .text>span { padding-left: 10px; }

@media (max-width: 750px) {
	.innerJoin .details { flex-direction: column; }
        .innerJoin .details .text { width: 100%; }
}	


@media (max-width: 450px) {
	.innerJoin .details { flex-direction: column; }
        .innerJoin .details .priceText { width: 100%; display: block; }
}
