body{ font-family: 'Muli';   line-height: 22px;   font-weight: 400;  font-style: normal;  color: #ababab;  font-size: 14px;}

.container{ margin: 0 auto; max-width: 1170px; position: relative; }

/* .old-header{ float: left; width: 100%; } */
.old-header{ height: 128px; }
.old-header .logo{ float: left; width: 25%; padding: 10px 0; }
.old-header .logo.right img { float: right; }
.old-header .logo img{ float: left; width: 100%; }
.old-header p{ text-align: center; line-height: 32px; float: left; width: 50%; box-sizing: border-box; font-size: 22px; }
.old-header p strong{ font-weight: bold; }

.old-header .logo.right img{ 
	width: auto!important;
	max-height: 180px;
}

.text-justify {text-align: justify;}

#content{ float: left; width: 100%; padding: 50px 0; background: url('../images/bg.jpg'); }
#content h1{ margin-bottom: 50px; float: left; width: 100%;  line-height: 32px; font-size: 32px; text-align: center; color: #555d6f; }
#content .left{ width: 50%; float: left; padding-left: 3%; box-sizing: border-box; }
#content .left p{  float: left; font-family: "Montserrat"; font-weight: bold; text-transform: uppercase; color: #333; width: 100%; margin-bottom: 40px;font-size: 20px;}
#content .left ul li{ float: left; width: 100%; display: flex;  font-size: 18px; color: #555d6f; line-height: 26px; margin-bottom: 20px; align-items: center;}
#content .left ul li i{ color: #ca1d31; font-size: 22px; display: inline-block; margin-right: 20px;}
#content .left ul li span{ width: 80%; float: left;   }
#content .left .buy{margin-top: 15px; float: right; padding: 15px 30px; font-size: 16px; background-color: #003d97; color: #fff; text-align: center; text-decoration: none; text-transform: uppercase; }
#content .left .price{ float: left; width: 70%; font-size:24px; line-height: 150%; margin-top: 20px; color: #003d97; }
#content .left .price .start{ text-align: center;font-size: 20px; line-height: 100%!important; display: inline-block;  }
#content .left .price .payment{ font-size: 26px;  }

#content .right{ width: 50%; float: left;  box-sizing: border-box;}
#content .right ul li{ float: left; width: 100%;  }
#content .right ul li img{ float: left; width: 100%; }

.mask{ display: none; z-index: 10000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7) url('../images/loader.gif') center center no-repeat; text-align: center; }

#form{ float: left; width: 100%; }
#form form{ position: relative; float: left; width: 70%; padding: 50px 30px 50px 0; box-sizing: border-box; }
#form form *{ font-family: 'Muli'; }
#form form .fa{ font-family: "FontAwesome"; }
#form form h2{ margin-bottom: 20px; float: left; width: 100%;  line-height: 32px; font-size: 26px; text-align: center; color: #333; }
#form form p{ float: left; width: 100%; text-align: center; font-size: 16px; margin-bottom: 15px; }
#form form p.notice{ color: #ca1d31; }
#form form p a{ color: #ca1d31; }
#form form .row{ float: left; width: 100%; margin-bottom: 10px; }
#form form .row.title { padding: 20px 0 0; }
#form form .row.title h2{ text-align: left; font-size: 18px; color:#003d97; font-weight: bold; }
#form form .field{ float: left; width: 100%; padding: 5px 0;  box-sizing: border-box; padding-right: 1%; }
#form form .field.field_75{ float: left; width: 75%; }
#form form .field.field_50{ float: left; width: 50%; }
#form form .field.field_25{ float: left; width: 25%; }
#form form .field:last-child{ margin-right: 0; }
#form form .field label{ float: left; width: 100%; }
#form form .field input,
#form form .field select{ box-shadow: inset 1px 2px 3px #e9e9e9; color: #ababab; border:1px solid #ababab; float: left; width: 100%; padding: 10px; box-sizing: border-box; }
#form form .field label.error{ color:#ca1d31; font-size: 12px; padding: 0;  }
#form form .field .card_number.visa{ background: url('../images/visa.png') 95% center no-repeat; background-size: contain; }
#form form .field .card_number.master{ background: url('../images/master.png') 95% center no-repeat; background-size: contain; }
#form form .field .card_number.hipercard{ background: url('../images/hiper.png') 95% center no-repeat; background-size: contain; }
#form form .field .card_number.diners{ background: url('../images/diners.png') 95% center no-repeat; background-size: contain; }
#form form .field .card_number.elo{ background: url('../images/elo.png') 95% center no-repeat; background-size: contain; }
#form form .field .card_number.amex{ background: url('../images/amex.png') 95% center no-repeat; background-size: contain; }

#form form .methods{ float: left; width: 100%; border:1px solid #ccc; border-radius: 10px; margin-bottom: 30px; box-shadow: 1px 2px 3px #ccc;box-sizing: border-box; }
#form form .methods .method_option{ float: left; width: 50%; box-sizing: border-box; padding: 30px;  ; font-size: 22px; text-decoration: none; color: #003d97; }
#form form .methods .method_option small{ font-size: 14px; color: #999; font-style: italic; }
#form form .methods .method_option:nth-child(odd){ border-radius: 10px 0 0 10px}
#form form .methods .method_option:nth-child(even){ border-radius: 0 10px 10px 0}
#form form .methods .method_option:hover,
#form form .methods .method_option.active{ background-color: #003d97; color: #fff; }
#form form .methods .method_option:hover small,
#form form .methods .method_option.active small{ color: #e9e9e9 }
#form form .methods .method_option.full{ width: 100%!important; border-radius: 10px;}

#form form #method_api_erede{ display: none; }
#form form #method_api_erede.active{ display: block; }
#form form #method_boleto_facil{ display: none; }

#form form button{margin-top: 15px; float: left; padding: 15px 30px; width: 100%; box-sizing: border-box; border:0; cursor: pointer; font-size: 16px; background-color: #003d97; color: #fff; text-align: center; text-decoration: none; text-transform: uppercase; }
#form form p.phone{ float: left; color: #333; width: 100%; margin-top: 20px;font-size: 18px; color:#003d97; font-size: 14px; }

#form #redepay{ float: left; width:100%; text-align: center; padding: 20px 0; }

#form aside{ float: right; width: 30%; padding: 50px 0 50px 30px; box-sizing: border-box;  }
#form aside p{  float: left; color: #333; width: 100%; margin-bottom: 20px;font-size: 18px;}
#form aside ul li{ float: left; width: 100%;  font-size: 14px; color: #555d6f; line-height: 18px; margin-bottom: 20px; display: flex; align-items: center;}
#form aside ul li i{ color: #ca1d31; font-size: 22px; display:inline-block; margin-right: 20px;}
#form aside ul li span{ width: 80%; float: left;   }
#form aside .buy{margin-top: 15px; float: left; padding: 15px 30px; font-size: 14px; background-color: #003d97; color: #fff; text-align: center; text-decoration: none; text-transform: uppercase; }
#form aside .price{ float: left; width: 100%; font-size:24px; line-height: 150%; margin-top: 20px; color: #003d97; }
#form aside .price .start{ font-size: 20px; line-height: 100%!important; display: inline-block; text-align: center; }
#form aside .price .payment{ font-size: 26px;  }


#form form strong{ font-weight: bold; }
#form form .download{ display: inline-block; padding: 10px 30px;  font-size: 12px; border-radius: 5px; background-color: #003d97; color: #fff; text-transform: uppercase; text-decoration: none;  }
#form form .copy input{ margin-top: 15px; width: 60%; padding: 10px; display: inline-block; text-align: center; background-color: #e9e9e9; border: 1px solid #ccc; }

#form aside .selo{ float: left; width: 100%; padding: 20px 0; }

#form form i.focus{ text-align: center; font-size: 36px; color: #ca1d31; width: 100%; float: left; }

.bounce {
	-webkit-animation-name: bounce;
	-moz-animation-name: bounce;
	-o-animation-name: bounce;
	animation-name: bounce;
}
.animated{-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;

            animation-iteration-count: infinite;
       -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;

animation-fill-mode:both;
-webkit-animation-duration:2s;
-moz-animation-duration:2s;
-ms-animation-duration:2s;
-o-animation-duration:2s;
animation-duration:2s;
}


@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}	40% {-webkit-transform: translateY(-30px);}
	60% {-webkit-transform: translateY(-15px);}
}

@-moz-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
	40% {-moz-transform: translateY(-30px);}
	60% {-moz-transform: translateY(-15px);}
}

@-o-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
	40% {-o-transform: translateY(-30px);}
	60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}
@media screen and (max-width: 1170px) {
	.container{ width: 100%; padding: 0 2%; box-sizing: border-box; }
}

@media screen and (max-width: 1000px) {
	#content .right{ width: 30%; }
	#content .left{ width: 70%; }

	#form form{ width: 50%; }
	#form form .field_50,
	#form form .field_25,
	#form form .field_75{ width: 100%!important; }
	#form aside{width: 50%;}

	
}


@media screen and (max-width: 780px) {
	.old-header p{ font-size: 16px; line-height: 18px; padding: 10px 20px; }
	#form form{ width: 60%; }
	#form aside{width: 40%;}

}

@media screen and (max-width: 670px) {
	#content .right{ width: 100%; }
	#content .left{ width: 100%; padding-left: 0; }
	#form form{ width: 100%; padding-bottom: 0; padding-right: 0; }
	#form aside{width: 100%;}

	#content .left .price{ width: 100%; }
}

@media screen and (max-width: 550px) {
	.old-header .logo{ width: 50%; }
	.old-header .logo.right{ position: absolute; top: 0; right: 0; }
	.old-header p{ width: 100%; }
}