/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

.container-col2 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    align-items: stretch;
}
.col2-item{
    width: 49%;     
}

/*Validation*/
.validation-message {
    color: red !important;
}
.validation-ok {
    display: none;
}
.validation-error {
    display: block;
}
.input-error{
    border-color: red!important;
}

.ctrl-input-error {
    border: 1px solid red !important;
}

.ctrl-input-error-required {
    border: 1px solid red !important;
}

.ctrl-input-error-password-no-equal {
    border: 1px solid red !important;
}

.ctrl-input-error-no-email {
    border: 1px solid red !important;
}

.ctrl-input-error-password {
    border: 1px solid red !important;
}

.ctrl-input-error-maxmin {
    border: 1px solid red !important;
}

.ctrl-input-error-postcode {
    border: 1px solid red !important;
}

.ctrl-input-error-phone {
    border: 1px solid red !important;
}

/**************/


/*FontFace*/
/*Avenir*/
@font-face {
	font-family: 'Avenir';
	font-weight: 400;
	font-style: normal;
	src: url(../fonts/AvenirNext-Regular.ttf);
}
@font-face {
	font-family: 'Avenir';
	font-weight: 400;
	font-style: italic;
	src: url(../fonts/AvenirNext-Italic.ttf);
}
@font-face {
	font-family: 'Avenir';
	font-weight: 500;
	font-style: normal;
	src: url(../fonts/AvenirNext-DemiBold.ttf);
}
@font-face {
	font-family: 'Avenir';
	font-weight: 500;
	font-style: italic;
	src: url(../fonts/AvenirNext-DemiBoldItalic.ttf);
}
@font-face {
	font-family: 'Avenir';
	font-weight: 600;
	font-style: normal;
	src: url(../fonts/AvenirNext-Bold.ttf);
}
@font-face {
	font-family: 'Avenir';
	font-weight: 600;
	font-style: italic;
	src: url(../fonts/AvenirNext-BoldItalic.ttf);
}

/*UnitPRO*/
@font-face {
	font-family: 'Unit Pro';
	font-weight: 400;
	font-style: normal;
	src: url(../fonts/UnitPro-Regular.otf);
}
@font-face {
	font-family: 'Unit Pro';
	font-weight: 400;
	font-style: italic;
	src: url(../fonts/UnitPro-RegularItalic.otf);
}
@font-face {
	font-family: 'Unit Pro';
	font-weight: 500;
	font-style: normal;
	src: url(../fonts/UnitPro-Medium.otf);
}
@font-face {
	font-family: 'Unit Pro';
	font-weight: 500;
	font-style: italic;
	src: url(../fonts/UnitPro-MediumItalic.otf);
}
@font-face {
	font-family: 'Unit Pro';
	font-weight: 600;
	font-style: normal;
	src: url(../fonts/UnitPro-Bold.otf);
}
@font-face {
	font-family: 'Unit Pro';
	font-weight: 600;
	font-style: italic;
	src: url(../fonts/UnitPro-BoldItalic.otf);
}

/*PlayFair Display*/
@font-face {
	font-family: 'Playfair Display';
	font-weight: 400;
	font-style: normal;
	src: url(../fonts/PlayfairDisplay-VariableFont_wght.ttf);
}
@font-face {
	font-family: 'Playfair Display';
	font-weight: 400;
	font-style: italic;
	src: url(../fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf);
}
@font-face {
	font-family: 'Playfair Display';
	font-weight: 500;
	font-style: normal;
	src: url(../fonts/PlayfairDisplay-VariableFont_wght.ttf);
}
@font-face {
	font-family: 'Playfair Display';
	font-weight: 500;
	font-style: italic;
	src: url(../fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf);
}
@font-face {
	font-family: 'Playfair Display';
	font-weight: 600;
	font-style: normal;
	src: url(../fonts/PlayfairDisplay-VariableFont_wght.ttf);
}
@font-face {
	font-family: 'Playfair Display';
	font-weight: 600;
	font-style: italic;
	src: url(../fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf);
}

/*Minion Pro*/
@font-face {
	font-family: 'Minion Pro';
	font-weight: 400;
	font-style: normal;
	src: url(../fonts/MinionPro-Regular.otf);
}
@font-face {
	font-family: 'Minion Pro';
	font-weight: 400;
	font-style: italic;
	src: url(../fonts/MinionPro-It.otf);
}
@font-face {
	font-family: 'Minion Pro';
	font-weight: 500;
	font-style: normal;
	src: url(../fonts/MinionPro-Semibold.otf);
}
@font-face {
	font-family: 'Minion Pro';
	font-weight: 500;
	font-style: italic;
	src: url(../fonts/MinionPro-SemiboldIt.otf);
}
@font-face {
	font-family: 'Minion Pro';
	font-weight: 600;
	font-style: normal;
	src: url(../fonts/MinionPro-Bold.otf);
}
@font-face {
	font-family: 'Minion Pro';
	font-weight: 600;
	font-style: italic;
	src: url(../fonts/MinionPro-BoldIt.otf);
}

body {
    overflow-x: hidden;
    font-family: 'Libre Franklin', sans-serif;
    background-color:#f2f2f2;
}

* {
    outline-style: none;
    box-sizing: border-box;
}

/*margin and padding*/

.m-bottom {
    margin-bottom: 14px;
}

.m-bottom-medium {
    margin-bottom: 21px;
}

.m-top-big {
    margin-top: 30px;
}

.hold-header {
    background-color: #ffffff;
}

header {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    max-width: 1210px;
    padding: 10px 20px;
    margin: 0 auto;
}

.logo-header {
    height:37px;
    width:154px;
    background-size: contain;
    background-repeat: no-repeat;
}

.txt-header {
    font-size: 12px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.67;
    letter-spacing: 0.46px;
}

.txt-header a,
label a,
a{
    color:#000000;
}

.content {
    background-color:#f2f2f2;
    max-width: 1440px;
    margin: 0 auto;
}

.steps-icons {
    width: 100%;
    margin: 30px auto 15px auto;
    max-width: 500px;
    display: flex;
    justify-content: space-between;
    padding: 20px 20px 1px 20px;
}

.finalizat {
    margin: 0 auto;
    display: flex;
    flex-direction:column;
    align-items: center;
    padding:25px 20px;
}
.finalizat img {
    margin-bottom: 10px;
}
.finalizat span {
    font-size: 18px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.06;
    letter-spacing: normal;
    text-align: center;
    color: #000000;
}

.step-point {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
    text-decoration: none;;
}

.step-point {
    color: #a3a3a3;
    font-size: 13px;
    line-height: 1.5;
    /* margin-top: 20px; */
}
.step-point span.active  {
    padding: 0 2px;
    text-align: center;
    margin-top:5px;
}
.step-point span.active {
    color: #000000;
    font-size: 15px;
    font-weight:600;
    /*margin-top: 0;*/
    line-height: .5;
    white-space: normal;
}

.step-logo {
    min-height: 45px;
    display: block;
    position: relative;
    top: 0px;
    margin-top: -43px;
    opacity: .5;
    margin-bottom: 10px;
}

.step-logo img {
    height: 30px;
    width: auto;
}

.step-point:nth-child(3) img {
    height: 25px;
}

.step-point.active .step-logo,
.step-point:hover .step-logo {
    opacity: 1;
}

.step-point:hover {
    color:#000;
}

.step-point:before {
    content:'';
    width: 15px;
    height: 15px;
    min-width: 15px;
    background-color: #999999;
    border-radius: 50px;
    /* margin-bottom: 10px; */
    position: relative;
    z-index: 2;
    top: 7.5px;
}

.step-point:after {
    content:'';
    width: 100%;
    height: 2px;
    background-color: #999999;
    position: absolute;
    top: 15px;
    z-index: 1;
}

.step-point:first-child:after {
    width: 50%;
    position: absolute;    
    right: 0;
}

.step-point:last-child:after {
    width: 50%;
    position: absolute;   
    left: 0;
}



.step-point.active:before,
.step-point.active:after{
    background-color: #333333;
}

.intro-checkout {
    padding: 100px 20px 100px 20px;
    background-repeat: no-repeat;
    background-position: 50% 0px;
    background-size: 100% auto;    
}

/*.intro-checkout.intro-gracies {
    padding: 180px 20px 180px 20px;
    background-size: 90% auto;
}*/

.checkout-container {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    max-width: 870px;
    padding: 60px 50px 120px 50px;
    margin: 0 auto;
    background: #ffffff;
    border:.5px solid #999999;
    display: block;    
}

.gracies-container {
    padding-bottom: 50px;
}

.gracies-container p {
    margin-left: 50px;
    margin-right: 50px;
}

/*Texts*/

.title {
    font-weight: bold;
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    line-height: 0.93;
    letter-spacing: 1.15px;
}

.title:after {
    content: '';
    display: block;
    width: 117px;
    height: 1px;
    background-color: #999999;
    margin: 20px auto;
}

.title-gracies::after{
    display: none;;
}

.description-gracies {
    font-size: 25px;
    font-weight: 500;
    letter-spacing: 1.3;
    margin-top: 10px;
    text-align: center;
}

.description {
    text-align: center;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.39;
    letter-spacing: 0.69px;
    text-align: center;
    color: #000000;
}

.title-form {
    margin-top: 45px;
    font-size: 22px;
    font-weight: bold;
}

.subtitle-form {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 5px;
}

.desc-form {
    font-size: 14px;
    line-height: 1.43;
    letter-spacing: 0.54px   
}

.title-form:after {
    content: '';
    display: block;
    width: 100%;
    height: .5px;
    background-color: #999999;
    margin: 10px auto 20px auto;   
}

.gracies-container p {
    text-align: center;
    margin-top: 20px;
    line-height: 1.5em;
}


.gracies-container p a {
    color: #333;
}

.gracies-container p a:hover {
    color: #000;
}
/*Form*/

.checkout-form{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.input-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 3%;
}

.shipping .check-field.input-field {
    margin-bottom:0px;
}

.input-field label,.input-field span{
    margin-bottom: 9px;
    font-size: 14px;
    line-height: 1.43;
    letter-spacing: 0.54px;
    color: #000000;
}

.input-field label em {
    font-size: 12px;
    font-weight: 300;
    font-style: italic;
    line-height: 1.58;
    color: #000000;   
}


.form-content {
    width: 100%;
}

.input-field input,
select{
    padding: 7px 15px;
    font-size: 16px;
    font-family: 'Libre Franklin', sans-serif;
    font-weight: 500;
    font-style: normal;
    line-height: 1.25;
    letter-spacing: 0.62px;
    color: #000000;
    box-sizing: border-box;
    height: 42px;
    transition: all ease .3s;
    border: solid 0.5px #a3a3a3;
    background-color: #fbfbfb;
}

.input-field input:focus {
    border:2px solid rgba(0,0,0,1);
    transition: all ease .3s;
}

.input-field input.error {
    border:1.5px solid #ef3e38;
}

.col-fullwidth {
    width: 100%;
    flex-wrap:wrap;
}

.col-half{
    width: calc(50% - 8px);
}

.col-15 {
    width: calc(16.66% - 8px);
}

.col-85 {
    width: calc(85% - 16px);
}

/*.left{
    padding-right:8px;
}

.right{
    padding-left: 8px;
}*/
.radio-field {
    display:flex;
    flex-direction: row;
}
.hold-radio-box {
    display: flex;
    width: auto;
    align-items: center;
    line-height: 1;
    margin-right: 30px;
}

input[name="tipo"]{
    height: 15px!important;
    color: #000000!important;
    margin-top: -1px;
    margin-right: 5px;
}

.radio-field label{
    margin-right: 45px;
}



.col-fullwidth input {
    width: 100%;
    box-sizing: border-box;
    max-width: 700px
}

.half-input input{
    width: 48.5%;
}

.check-option label {
    font-weight: bold;
    line-height: 1.5em;
}

.subscription .check-description{
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 10px;
}

.subscription p {
    font-size: 12px;
    margin-bottom: 7px;
    margin-left: 30px;
    line-height: 1.58;
}

.check-option {
    margin-top: 10px;
}

.input-field span.message {
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1em;
    letter-spacing: 0.46px;
    color: #000000;
    margin-bottom: 3px;
    
}

.input-field span.message.error-message,
label.error{
    color:#ef3e38;
    margin-top:5px;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1em;
    letter-spacing: 0.46px;
}

/*Custom Checkbox and Radio*/

[type="radio"]:checked,
[type="radio"]:not(:checked){
    position: absolute;
    left: -9999px;
}

[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
    position: absolute;
    z-index: 2;
    height: 20px;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    max-width:20px;
}

[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label,
[type="checkbox"]:checked + label,
[type="checkbox"]:not(:checked) + label{
    position: relative;
    padding-left: 28px;
    /*cursor: pointer;*/
    line-height: 20px;
    display: inline-block;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.25;
    letter-spacing: 0.62px;
    color: #a3a3a3;
    margin-top: -4px;
    display: block;
}

.check-field-little {
    margin-left: 30px;
}

.step-two .check-field-little  [type="checkbox"]:checked + label,
.step-two .check-field-little  [type="checkbox"]:not(:checked) + label {
    font-size: 14px;
}

[type="radio"]:checked + label,
[type="checkbox"]:checked + label{
    color:#000000;
    font-weight: 600;
}

[type="checkbox"]:checked + label:before,
[type="checkbox"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 18px;
    height: 18px;
    border: 1px solid #666;
    border-radius: 100%;
    background: #fff;
}

[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0px;
    width: 18px;
    height: 18px;
    border: 1px solid #666;
    border-radius: 100%;
    background: #fff;
}

[type="checkbox"]:checked + label:before,
[type="checkbox"]:not(:checked) + label:before {
    border-radius: 0;
    margin-top: -9px;
}


[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after,
[type="checkbox"]:not(:checked) + label:after{
    content: '';
    width: 12px;
    height: 12px;
    background: #000000;
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

[type="checkbox"]:checked + label:after,
[type="checkbox"]:not(:checked) + label:after {
    border-radius: 0;
    height: 20px;
    width: 20px;
    top:0;
    left: 0;
    content: '✔';
    color: #ffffff;
    padding-left: 4.5px;
    padding-top: 2px;
    box-sizing: border-box;
    font-size: 12px;
    margin-top: -2px
}

[type="radio"]:not(:checked) + label:after,
[type="checkbox"]:not(:checked) + label:after{
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

[type="radio"]:checked + label:after,
[type="checkbox"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1)!important;
    transform: scale(1)!important;
}


.shipping [type="checkbox"] + label {
    color:#000000;
}

.nav-form {
    display: flex;
    justify-content: flex-end;
    margin-top: 45px;
    width: 100%;
}

.nav-form.not-first {
    justify-content: space-between;
}

.nav-form.gracies {
    justify-content: center;
}

.btn-nav {
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.77px;
    text-align: center;
    color: #fbfbfb;
    background-color:#333333;
    padding: 15px 50px;
    cursor:pointer;
    border:1px solid #333333;
    text-decoration: none;
}

.btn-nav.inactive {
    opacity: .4;
    pointer-events:none;
}

.btn-nav.btn-inverted {
    color:#333333;
    background-color: #ffffff;
    border:1px solid #333333;
}

.btn-nav:hover,
.btn-nav.btn-inverted:hover{
    background-color: #000;
    color: #fff;
    border-color: #000;;
}
/*Footer*/

.logo-footer {
    margin:-60px auto 50px auto;
    display: block;
    width: 100%;
    max-width: 337px;
}

.gracies .logo-footer {
    margin-top: 46px;
}


/* Tarjeta and Docililiacio bancaria */

.tarjeta-field, .domiciliacio-field {
    display: none;
}

.tarjeta-field.active, .domiciliacio-field.active {
    display: flex;
}

input[name="IBAN"] {
    text-transform: uppercase;
}

/* SAPIENS */

body.sapiens  {
    font-family: 'Libre Franklin', sans-serif;
}

.sapiens .logo-header, .sapiens-digital .logo-header, .sapiens-digital-papel .logo-header {
    background-image: url("../img/logo/sapiens.png");
}

.sapiens .intro-checkout {
    background-image: url("../img/bg/sapiens_2023.jpg");
}

.sapiens-digital .intro-checkout {
    background-image: url("../img/bg/1369x787_SapiensDigital_Web_BG.jpg");
}

.sapiens-digital-papel .intro-checkout {
    background-image: url("../img/bg/1369x787_SapiensDigitalPaper_Web_BG.jpg");
}

.descobrir-digital .intro-checkout {
    background-image: url("../img/bg/1369x787_Descobrir_Web_Digital.jpg");
}

.descobrir-digital-papel .intro-checkout {
    background-image: url("../img/bg/1369x787_Descobrir_Web_Digital_i_fisic.jpg");
}

body.petit   {
    font-family: 'Libre Franklin', sans-serif;
}

.petit .logo-header {
    background-image: url("../img/logo/petit-sapiens.png");
}

.petit .intro-checkout {
    background-image: url("/Content/img/bg/petit_2024.jpg");
}

/* ========================================
   ESTILO: petit-pequeno
   Replica comportamiento de 'petit' con logo diferente
   ======================================== */

body.petit-pequeno {
    font-family: 'Libre Franklin', sans-serif;
}

.petit-pequeno .logo-header {
    background-image: url("../img/logo/petit-pequeno-logo.png");
}

.petit-pequeno .intro-checkout {
    background-image: url("/Content/img/bg/petit_2024.jpg");
}

/* CUINA */

body.cuina   {
    font-family: 'Avenir', sans-serif;
}

body.cuina .input-field input,
body.cuina select{
    font-family: 'Avenir', sans-serif;
}

.cuina .logo-header {
    background-image: url("../img/logo/cuina.png");
}

.cuina .intro-checkout {
    background-image: url("../img/bg/cuina_2023.png");
}

/* CUINA DIGITAL - Fondo específico */
.cuina-digital .intro-checkout {
    background-image: url("../img/bg/1369x787_CuinaDigital_Web_BG.jpg");
}

/* CUINA DIGITAL + PAPEL - Fondo específico */
.cuina-digital-papel .intro-checkout {
    background-image: url("../img/bg/1369x787_CuinaDigitalPaper_Web_BG.jpg");
}

body.cuina .input-field label em,
body.cuina .subscription p,
body.cuina .input-field span.message,
body.cuina .input-field span.message,
body.cuina .input-field span.message.error-message,
body.cuina label.error,
body.cuina [type="checkbox"]:checked + label:after,
body.cuina [type="checkbox"]:not(:checked) + label:after ,
body.cuina .txt-header{
    font-size: 15px; 
}

body.cuina .step-point {
    font-size: 14px;
}

body.cuina .desc-form,
body.cuina .input-field label,.input-field span,
body.cuina .step-two .check-field-little  [type="checkbox"]:checked + label,
body.cuina .step-two .check-field-little  [type="checkbox"]:not(:checked) + label  {
    font-size: 18px;   
}

body.cuina .input-field input,
body.cuina select,
body.cuina .subscription .check-description,
body.cuina [type="radio"]:checked + label,
body.cuina [type="radio"]:not(:checked) + label,
body.cuina [type="checkbox"]:checked + label,
body.cuina [type="checkbox"]:not(:checked) + label{
    font-size: 20px;
}

/*body.cuina body.cuina .finalizat span,
.step-point span.active ,
body.cuina .description ,
body.cuina .subtitle-form {
    font-size: 20px;
}

body.cuina .btn-nav {
    font-size: 20px;
}

body.cuina .description-gracies {
    font-size: 25px;
}

body.cuina .title {
    font-size: 30px;
}*/

/* DESCOBRIR */
body.descobrir  {
    font-family: 'Unit Pro', sans-serif;
}

body.descobrir.input-field input,
body.descobrir select{
    font-family: 'Unit Pro', sans-serif;
}

.descobrir .logo-header {
    background-image: url("../img/logo/descobrir.png");
}

.descobrir .intro-checkout {
    background-image: url("../img/bg/descobrir_2023.png");
}

/* ARRELS */
body.arrels  {
    font-family: 'Playfair Display',sans-serif;
}

body.arrels .input-field input,
body.arrels select{
    font-family: 'Playfair Display',sans-serif;
}

.arrels .logo-header {
    background-image: url("../img/logo/arrels.png");
}

.arrels .intro-checkout {
    background-image: url("../img/bg/megabanner-arrels-renovacion.jpg");
}

.arrels_renovacion .intro-checkout {
    background-image: url("../img/bg/megabanner-arrels-renovacion.jpg");
}
/* El Mon d'ahir / emda */
body.emda  {
    font-family: 'Minion Pro',sans-serif;
}

.emda .logo-header {
    height: 37px;
    width:100%;
    max-width: 311px;
    background-size: contain;
    background-repeat: no-repeat;
}

body.emda .input-field input,
body.emda select{
    font-family: 'Minion Pro',sans-serif;
}

.emda .logo-header {
    background-image: url("../img/logo/EMDA.png");
}

.emda .intro-checkout {
    background-image: url("../img/bg/megabanner-emda.jpg");
}


/*End Custom items*/

.not-validate {
    margin: 20px auto;
    width: 100%;
    /*max-width: 440px;*/
    line-height: 1.25;
    text-align: center;
    padding: 10px 20px;
    border:1px solid #a80000;
    background-color: #ffa8a8;
}

.aspNetHidden{
    display:none;
}
/*Responsive*/

@media only screen and (max-width:767px) {

    .txt-header {
        display: none;
    }

    .gracies-container p {
        margin-left: auto;
        margin-right: auto;
    }

    .checkout-container {
        padding: 10px 20px 60px 20px;
    }

    .intro-checkout.intro-gracies {
        padding: 10px 20px 0px 20px;
    }

    .col-half, .col-15, .col-85,.half-input input{
        width: 100%;
    }

    .two-selects {
        margin-top: 10px;
    }

    .no-label {
        margin-top: 15px;
    }

    .title {
        font-size: 17px;
    }
    
    .title:after {
        width: 75px;
        margin: 10px auto;
    }
    
    .description,
    .check-description {
        font-size: 14px;
    }

    .title-form {
        font-size: 20px;
    }

    .step-point span {
        font-size: 10px;
    }

    .cuina .step-point span {
        font-size: 11px;
    }

    .step-point span.active {
        font-size: 12px; 
    }

    .cuina .step-point span.active  {
        font-size: 12px;
    }

    .steps-icons {
        margin: 0px auto;
        background-color: #ffffff;
        padding: 40px 20px 10px 20px;
    }

    .check-field-little {
        margin-left: 0px;
    }
    
    .step-two .check-field-little  [type="checkbox"]:checked + label,
    .step-two .check-field-little  [type="checkbox"]:not(:checked) + label {
        font-size: 13px;
    }

    .step-point span.active {
        color: #000000;
        font-size: 12px;
        font-weight: 600;
        margin-top: 1px;
        line-height: 1;
        white-space: normal;
    }

    .step-logo {
        min-height: 38px;
        display: block;
        position: relative;
        top: -15px;
        margin-top: -30px;
        opacity: .5;
    }

    body.cuina .input-field label em,
    body.cuina .subscription p,
    body.cuina .input-field span.message,
    body.cuina .input-field span.message,
    body.cuina .input-field span.message.error-message,
    body.cuina label.error,
    body.cuina [type="checkbox"]:checked + label:after,
    body.cuina [type="checkbox"]:not(:checked) + label:after ,
    body.cuina .txt-header{
        font-size: 15px; 
    }
    
    body.cuina .input-field input,
    body.cuina select,
    body.cuina .subscription .check-description,
    body.cuina [type="radio"]:checked + label,
    body.cuina [type="radio"]:not(:checked) + label,
    body.cuina [type="checkbox"]:checked + label,
    body.cuina [type="checkbox"]:not(:checked) + label{
        font-size: 16px;
    }

    body.cuina .desc-form,
    body.cuina .input-field label,.input-field span,
    body.cuina .step-two .check-field-little  [type="checkbox"]:checked + label,
    body.cuina .step-two .check-field-little  [type="checkbox"]:not(:checked) + label  {
        font-size: 16px;   
    }

    .step-one .radio-field label {
        margin-right: 25px;       
    }
}

@media only screen and (max-width:480px) {
 
    .btn-nav {
        font-size: 15px;
        padding: 7.5px 25px;
    }
}

.password-ctrl-input {
    flex: 1;
}

.password-container {
    width:100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.password-container input[type="password"],
.password-container input[type="text"] {
    padding: 12px 36px 12px 12px;
    box-sizing: border-box;
}

.fa-eye {
    cursor: pointer;
    color: lightgray;
}

.mailto-container {
    text-align: center;
}