/*		Clearing the div floats			*/
.clearFloat:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearFloat { display: inline-table; }

/* Hides from IE-mac \*/
* html .clearFloat { height: 1%; }
* .clearFloat { display: block; }
*/* End hide frm IE-mac */

body { background-color: #000; font-family: 'Roboto', sans-serif; font-size: 15px; padding: 0px; margin: 0px; margin-top: 56px; }

.header-top { background-color: #252943; font-family: "Roboto", sans-serif; font-weight: 400; color: #dcdde0; position: fixed; left: 0px; right: 0px; top: 0px; z-index: 999; }
.header-top__language { position: relative; display: inline-block; margin-right: 2rem; line-height: 2.2rem; max-width: 100%; float:none; padding-right: 0px; }
.header-top__language { position: relative; display: inline-block; margin-left: 10px; line-height: 2.2rem; float: left; }
.header-top__language span { padding-right: 1rem; font-weight: 400; }
.header-top__language #image-dropdown { position: relative; top: -2px; right: 0; display: inline-block; height: 2rem; vertical-align: sub; }
.header-top__language #image-dropdown .img_holder { cursor: pointer; display: inline-block; width: 22px; }
.header-top__language #image-dropdown a { background: none !important; text-decoration: none; }
.header-top__language a { position: relative; top: .3rem; display: inline-block; max-width: 2rem; width: 100%; margin-right: 2px; }
.header-top__language a img { max-width: 2rem; width: 100%; }
.header-top__login { line-height: 2.2rem; float: right; }
.header-top__login a { text-align: right;}
.header-top__login a { color: #FFF; padding-left: 10px; }
.header-top__login img { width: 1.4rem; vertical-align: middle; }

article { max-width: 1300px; margin: auto; position: relative; min-height: 1200px; z-index: 9; }
article .join { width: calc( 50% - 60px ); background-color: #e9e9e9; padding: 0px 30px 30px 30px; float: right; min-height: 1200px; -webkit-transition: width 0.5s; transition: width 0.5s; }
article .image { width: 50%; float: left; position: absolute; left:0px; top:0px; bottom: 0px; right: 0px; -webkit-transition: width 0.5s; transition: width 0.5s; }
article .join .step { margin: 10px; }
article .join .step .header {}
article .join .step .header .box { font-size: 20px; background-color: #25355d; color: #FFF; font-weight: bold; float: left; padding: 10px; }
article .join .step .header .title { line-height: 40px; font-size: 20px; display: inline-block; padding-left: 10px; }
article .join .step .fields { margin: 20px; }
article .join .step .fields input[type=text] { width: calc( 100% - 20px ); padding: 10px; margin: 7px auto; }
article .join .step .fields input[type=password] { width: calc( 100% - 20px ); padding: 10px; margin: 7px auto; }
article .join .step .fields input[type=email] { width: calc( 100% - 20px ); padding: 10px; margin: 7px auto; }
article .join .step .fields button { width: 100%; background-color: #ec274e; padding: 10px; border: 1px solid #FFf; color: #FFF; font-weight: bold; font-size: 30px; cursor: pointer;  }
article .join .step .fields .paymentType { cursor: pointer; background-color: #FFF; padding: 10px; margin: 10px auto; border: 1px solid #b9b9b9; }
article .join .step .fields h3 { font-weight: normal; }
article .join .step .fields .paymentType div.text { font-size: 18px; display: inline-block; line-height: 55px;cursor: pointer; }
article .join .step .fields .paymentType div.icons { float: right; cursor: pointer; }
article .join .step .fields .paymentType.active { background-color: #ec274e; }
article .join .step .fields .paymentType.active * { color: #FFF; }
article .join .step .fields .package { background-color: #FFF; cursor: pointer; padding: 20px; color: #000; margin: 20px auto; font-weight: bold; line-height: 36px; position: relative; }
article .join .step .fields .package.active { background-color: #ec274e; padding: 20px; color: #FFF; margin: 20px auto; font-weight: bold; line-height: 36px; }
article .join .step .fields .field-wrapper select.country { padding: 10px; width: calc( 100% - 0px ); margin: 10px auto; }
article .join .step { margin-top: 50px; }
article h1 { text-align: center; font-size: 40px; line-height: 40px; font-weight: normal; color: #ec274e; text-transform: uppercase; margin-bottom: 0px; margin-top: 15px; }
article h2 { text-align: center; color: #25355d; font-size: 18px; line-height: 25px; font-weight: normal; margin-top: 10px; }
article footer { margin-top: 40px; text-align: center; }
article footer div.texts div { margin: 10px auto; text-align: center; display: inline-block; }
article footer div.copyright { margin: 10px auto; text-align: center; margin-top: 40px; margin-bottom: 0px; font-weight: bold; }
article .join .iAgree { line-height: 30px; margin: 30px auto; display: flex; align-items: center; width: 50%; }
article .join .iAgree .description { width: calc(100% - 50px); display: inline-block; margin-left: 5px; line-height: 40px; }
article .join .iAgree .description.lineHeight { line-height: 22px; }
article .join .iAgree input { width: 30px; height: 30px; cursor: pointer; }
article .join .iAgreeWrapper { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
article .join .iAgreeWrapper .currentCode { width: 50% }
article .join .package input { width: 30px; height: 30px; }
article .join .package span { display: block; }
article .join .package .description { width: calc(100% ); display: inline-block; line-height: 24px; }
article .join .package .checkbox { float: left; margin-right: 5px; width: 40px; height: 40px; display: inline-block; }
  
article .join .package span.name { color: #25355d; font-size: 20px; }
article .join .package span.underline { color: #ec274e; margin: 7px auto; }
article .join .package span.underline a { color: #ec274e !important; }
article .join .step .fields .package.active span.name { color: #FFF; }
article .join .step .fields .package.active span.underline { color: #FFF; }
article .join .step .fields .package.active span.underline a { color: #FFF !important; }

article .join .step .error-wrapper p { margin-bottom: 0px; color: #f00; font-weight: bold; }
article .join .iAgree .description label { line-height: 40px; height: 40px; display: block; cursor: pointer; }
article .join .iAgree label a { color: #eb274d; }
article .join .package span.name { font-size: 18px !important; }
article .join .package span .strikeThrough { display: inline-block; }

article .join .package span .strikeThrough { position: relative; font-size: 15px; color: #000; font-weight: bold; }
article .join .package span .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);
}

article .join .package span.underline, article .join .package span.free { display: inline-block; font-size: 14px !important; }
article .join .package span.free { background-color: #ee224a; color: #FFF; padding: 1px 5px; }
article .join .step .fields .package.active span.free, article .join .step .fields .package:hover span.free { background-color: #f3e103; color: #000 !important; }

article .join .step .fields .package.active span .strikeThrough:before { border-top-color: #FFF !important; }
article .join .step .fields .package.active span .strikeThrough { color: #FFF !important; }
article .join .step .fields .package.active .discount { color: #000; }

article .join .step .fields .package .discount {
	position: absolute;
    right: 0px;
    bottom: 0px;
    padding: 0px 10px;
    background-color: #f7b401;
	min-width: 135px;
	text-align: center;
	font-weight: bold;
	background-color: #2d609f !important;
    color: #2d609f !important;
}
article .join .step .fields .package .discount { background-color: #ebd663 !important; color: #000 !important; }
article .join .step .fields .package.active .discount, article .join .step .fields .package:hover .discount { background-color: #ebd663 !important; color: #000 !important; }
article .join .step .fields .package { padding-bottom: 30px !important; }

.download { width: calc( 25% - 12px ); }

ul.countdown { list-style: none; margin: 15px 0; padding: 0; display: block; text-align: center; }
ul.countdown li { display: inline-block; }
ul.countdown li span { font-size: 60px; font-weight: 300; line-height: 50px; }
ul.countdown li.seperator { font-size: 60px; line-height: 50px; vertical-align: top; }
ul.countdown li p { color: #a7abb1; font-size: 14px; }
ul.countdown li span { color: #FFF; }

.header-top { background-color: #000; border-bottom: 1px solid #ec3336; }
article .join .step .header .box { background-color: #ec3336; color: #FFF; }
.header-top__language span { color: #FFF; }
article .join { background-color: #000; }
article .join .step .header .title, article h2, article h3, article .join .iAgree .description label, article footer .texts { color: #FFF; }
article { padding: 2px; background-color: #ec3336; }
article .image { margin: 2px; width: calc( 50% - 0px); }
article h1 { font-size: 30px; }

#staxusNews .staxusBox {     background-color: #000000 !important;  }
.error-wrapper p { margin-bottom: 0px; color: #f00; font-weight: bold; }

article .join .step .fields button {
    width: calc( 100% - 26px );
    background-color: #ed3237;
    padding: 10px;
    border: 1px solid #ed3237;
    color: #FFF;
    font-weight: bold;
    font-size: 30px;
    cursor: pointer;
	border-radius: 15px;
}

article .join .step .fields .package.active, article .join .step .fields .package:hover {
    background-color: #ec274e !important;
    padding: 0px 10px !important;
    color: #FFF;
    margin: 10px auto;
    font-weight: bold;
    line-height: 36px;
    border-radius: 10px;
	border: 1px solid #ec274e;
}


article .join .step .fields .package .discount {
    position: absolute;
    right: -28px;
    top: calc( 50% - 13px );
    padding: 0px 2px;
    /* min-width: 135px; */
    text-align: center;
    font-weight: bold;
	min-width: auto;
	width: auto;
	line-height: 26px;
	height: 26px;
	max-width: 78px;
	width: 78px;
    font-size: 14px !important;
}

article .join .step .fields .package {
    background-color: transparent !important;
    cursor: pointer;
    padding: 0px 10px !important;
    color: #000;
    margin: 10px auto 10px auto;
    font-weight: bold;
    line-height: 36px;
    position: relative;
	border: 1px solid #FFF;
	border-radius: 10px;
	max-width: 550px;
	display: flex;
}

div.priceDesign * { font-family: 'Roboto', sans-serif;  }
div.priceDesign { color: #000; position: relative; padding-left: 12px; font-size: 30px; display: inline-block; margin-left: 5px; line-height: 40px; font-weight: bold; }
div.priceDesign div.priceCurrency { position: absolute; left: 0px; top: 4px; font-size: 20px; line-height: 20px; font-weight: normal; }
div.priceDesign div.priceText { position: absolute; bottom: 4px; right: -60px; font-size: 15px; white-space: nowrap; line-height: 15px; font-weight: normal; }
div.priceDesign div.priceDot { position: absolute; bottom: 0px; right: -6px; font-size: 27px; line-height: 27px; font-weight: normal; }
div.priceDesign div.priceRight { position: absolute; top: 3px; right: -25px; font-size: 20px; font-weight: bold; line-height: 20px; font-weight: normal; }

.top .header { color: #7d7d7d; text-align: center; font-size: 24px; font-weight: normal; }
article .join .package span .strikeThrough { font-size: 13px !important; }

article .join .package.active span.name, article .join .package:hover span.name { color: #FFF !important; }
article .join .package.active span.underline, article .join .package:hover span.underline { margin: auto; color: #FFF !important; }
article .join .package.active span.underline .strikeThrough, article .join .package:hover span.underline .strikeThrough { color: #FFF !important; }

article .join .package .description { width: 66%; line-height: 20px; text-align: left; }
article .join .package .description span { color: #FFF !important; }
article .join .package span.underline { margin: auto; }
article .join .package span.underline .strikeThrough { color: #CCC !important; }
article .join .package span.name { color: #FFF; font-size: 14px !important; }
article .join .step .fields .package .price {  
	border-top-right-radius: 9px; 
	border-bottom-right-radius: 9px; 
	position: absolute; 
	right: 0px; 
	width: 35%; 
	bottom: 0px; 
	top: 0px; 
	background-color: #FFF; 
	text-align: center; 
	max-width: 300px; 
	font-size: 18px !important; 
	color: #000; 
	display: flex; 
	align-items: center;
}
article .join .step .fields .package.active .price { color: #000; }
article .join .step .fields .paymentType { display: inline-block; border-radius: 15px; border: 1px solid #FFF; padding: 0px; text-align: center; }
article .join .step .fields .paymentTypeWrapper { display: inline-block; margin: auto; color: #FFF; }
article .join .step .fields .paymentTypeWrapper .text { color: #FF; text-align: center; font-weight: bold; }
article .join .package span.name { margin: auto; font-size: 14px !important; }
article .join .package span.name span { display: inline-block; font-size: 14px !important; }
article { min-height: auto !important; width: 95% !important; max-width: 95%; background-color: transparent; }
article .join { min-height: auto !important; }'
article .join .step .fields { max-width: 300px; margin: 10px; }

article .join .step .fields .package { max-width: 600px; }
article .join .iAgree { text-align: center; margin: 10px auto; }
article .join .iAgree .description { text-align: center; margin: auto; width: auto; }
article .join .step { margin: 0px; }

article .join .iAgree input { float: left; width: 15px; height: 15px; }
article .join .iAgree .description label { font-size: 14px; line-height: 14px; } 
article .join .iAgree .description label { height: auto; line-height: 20px; float: left; }
.iAgree input {  width: 15px; height: 15px; }

footer div.copyright { margin-top: 10px; }
footer { margin-top: 0px; }
footer div { text-align: center; color: #FFF; margin: 20px auto; }

article .image { z-index: 9; float: left; position: relative;  transition: none; }
article .join { z-index: 99; position: relative; }
article .join .step .fields .paymentType { background-color: transparent; width: calc( 100% - 40px ) !important; }
article { min-height: auto !important; width: auto !important; max-width: auto !important; background-color: transparent; }
article h1 { margin-top: 0px !important; }

article .join { width: calc( 50% - 18px ); padding: 0px 5px 5px 5px;  transition: none; }
article .join .step3 .paymentTypeBox { text-align: center; margin: 10px; }
article .join .step3 .paymentTypeBox .paymentTypeWrapper { }
article .join .step3 .paymentTypeBox .paymentTypeWrapper .paymentType { margin: auto; padding: 5px 20px; }
article .join .step3 .paymentTypeBox .paymentTypeWrapper .paymentType img { max-height: 35px; }

footer div { margin: 5px; text-align: center; font-size: 12px; }
article .join .package .discount span { display: inline-block; }
article .join .package .discount span.xs-show { display: none; }
article .join .package .discount span.xs-hide { display: inline-block; }
article .join .step .fields, article .join .step .fields .package:first-child { margin-top: 0px; }

@media (max-width: 1340px) {
	article { width: calc( 100% - 120px ); margin: auto 60px; }
	article { margin: 0px 5px;  max-width: calc( 100% - 26px ); }
	article .join .step .fields { margin-left: 15px; margin-right: 15px; }
}

@media (max-width: 1024px) {
	.download { width: calc( 33% - 12px ); }
	.header-top__login .question { display: none; }
}

@media (max-width: 1000px) {
	article .image { width: 0%; -webkit-transition: width 0.5s; transition: width 0.5s; }
	article .join { width: calc( 100% - 20px ); padding: 0px 10px 10px 10px; -webkit-transition: width 0.5s; transition: width 0.5s; }
	article .join { border-width: 0px; }	
	article .join { width: calc( 100% - 10px ); padding: 0px 5px 5px 5px; transition: none;  }
	article { margin: 0px 10px; }
	article .image { width: 0px !important; }
	article .image img { width: 0px !important; display: none !important; transition: none; }
	body {  margin-top: 96px !important; }
	#signup .top h1 img { margin-top: 25px; }
}	

@media (max-width: 690px) {
	article { width: calc( 100% - 10px ); margin: auto 5px; }
	article .image { display: none; }
	article .join { width: calc( 100% - 25px ); padding: 0px 10px 5px 15px; }
	article .join .step .fields { margin: 0px; }
	article .join .step .fields>div { margin: 10px auto; }
	article .join .step .fields input[type=text]{ width: calc( 100% - 20px ); padding: 10px; margin: 0px auto; }
	article .join .step .fields input[type=password]{ width: calc( 100% - 20px ); padding: 10px; margin: 0px auto; }
	article .join .step .header .title { font-size: 15px; width: calc( 100% - 150px ); }
	article .join .step .header .title.lineHeight { line-height: 22px; }
	article .join { width: calc( 100% - 10px ); padding: 0px 5px 5px 5px; }
	.header-top__login { displaY: none !important; }
	body { margin-top: 120px; }
	.footerMdf .banners div img { max-width: 150px; }
	article .join .iAgree { width: 100%; }
	article .iAgreeWrapper { flex-direction: column; }
	article .join .iAgreeWrapper .currentCode { width: 100%; }
}

@media (max-width: 600px) {
	.top .header { display: none; }
	article .join .iAgree input { width: 15px; height: 15px; }
	article h1 { margin-top: 0px; }
	#signup { margin-top: -18px; }
	footer { margin-top: 0px; }
	article .join .step .fields .package .price { width: calc( 35% - 10px ) !important; }
	article { width: 100% !important; max-width: 100% !important; margin-left: 0px; margin-right: 0px; }v
	article .join .step .fields .package { margin: 4px auto; } 
	article .join .step .fields .package, article .join .step .fields .package.active, article .join .step .fields .package:hover { margin: 4px auto; width: calc( 100% - 33px ); margin-left: 0px; } 
	article .join { width: calc( 100% - 4px ); padding: 0px 2px 0px 2px; }
	body { margin-top: 120px; }
	article .join .step .fields .package .price { font-size: 15px !important; }
	article .join .step .fields { margin-top: 5px !important; }
	div.priceDesign { font-size: 18px; margin-left: 5px; line-height: 30px; }
	div.priceDesign div.priceCurrency { left: 0px; top: 4px; font-size: 14px; line-height: 14px; }
	div.priceDesign div.priceDot { bottom: 0px; right: -6px; font-size: 27px; line-height: 27px; }
	div.priceDesign div.priceRight { top: 10px; right: -20px; font-size: 14px; line-height: 20px; }
	div.priceDesign div.priceText { top: 4px; right: -40px; font-size: 11px; line-height: 11px; height: 11px; }
	article .join .package .discount span.xs-show { display: inline-block; }
	article .join .package .discount span.xs-hide { display: none; }
}

@media (max-width: 500px) {
	ul.countdown li p { color: #a7abb1; font-size: 14px; }
	ul.countdown li span { font-size: 40px; font-weight: 300; line-height: 40px; }
	ul.countdown li.seperator { font-size: 40px; line-height: 30px; vertical-align: top; }
	body { margin-top: 130px; }
	.download { width: calc( 50% - 12px ); }
}

@media (max-width: 480px) {
	.header-top__language { float: none !important; display: block !important; text-align: center !important; }
	.header-top__login { float: none !important; display: block !important; text-align: right !important; }
}

@media (max-width: 460px) {
	article .join .step .fields .optionid div.text { display: block; text-align: center; }
	article .join .step .fields .optionid div.icons { float: none; text-align: center;  }
}

@media (max-width: 450px) {
	article .join .step .header .title span { display: none; }
	article .join { width: calc( 100% - 2px ); max-width: calc( 100% - 2px ); }
	article .join .step .fields { margin: 10px !important; padding-right: 10px; }
	article .join .step3 .fields { margin-right: 0px !important; }
	article .join .step3 .paymentTypeBox .paymentTypeWrapper .paymentType { float: left;  }
	article .join .step3 .paymentTypeBox { margin-top: 2px !important; margin-bottom: 2px !important; }
	article .join .step3 .iAgree { margin-top: 0px !important; margin-bottom: 0px !important; }
	article .join .step3 .button { margin-top: 0px !important; margin-bottom: 0px !important; }
	article .join .step .fields .package .discount { width: auto; }
	article .join .step .fields .package, 
	article .join .step .fields .package.active, 
	article .join .step .fields .package:hover {   width: calc( 100% - 38px ); margin-bottom: 10px; }
}

@media (max-width: 400px) {
	article .join .step .header .title { font-size: 15px; }
	article .join .step { margin: 50px 0px; }
	article .join { padding: 5px; width: calc( 100% - 10px ); }
	article .join .step .fields input[type=text] { width: calc( 100% - 24px ); padding: 10px; margin: 3px auto; }
	article .join .step { margin: 0px; }
	article .join .step .fields .package .discount { white-space: nowrap; font-size: width: 74px; font-size: 13px !important; }
	article .join .step .fields .paymentTypeWrapper .text { display: none; }
	article .join .step3 .paymentTypeBox .paymentTypeWrapper { width: calc( 50% - 18px); float: left; margin: 4px; margin-left: 1px; }
}