/** GENERALES */
body, html{ min-width: 460px; margin: 0; padding:0; font-family: 'Josefin Sans', sans-serif;}
label{ font-size: 16px; font-weight: 900;}

.center{ text-align: center;  }
h1{
    background: #FFF; 
    text-align: center; 
    border-radius: 100%; 
    height: 65px!important; width: 65px!important; 
    display: grid; 
    place-content: center;
    border: solid 5px;
    font-weight: 700;
    font-size: 40px;
    box-shadow: -1px 10px 17px -7px rgba(0,0,0,0.63);
    -webkit-box-shadow: -1px 10px 17px -7px rgba(0,0,0,0.63);
    -moz-box-shadow: -1px 10px 17px -7px rgba(0,0,0,0.63);
}
h2{ margin-bottom: 10px; margin-top: 45px; font-size: 28px; }

.step-1 > div > h1{ border-color: #E31395; color:#E31395;  }
.step-2 > div > h1{ border-color: #FF8F15; color:#FF8F15;  }
.step-3 > div > h1{ border-color: #FF8F15; color:#FF8F15;  }

h4{ margin:0px 0px 5px 0px; font-size: 20px; font-weight: 900!important;}
h3{ margin:0px 0px 20px 0px; }
.m-5{ margin:30px;}
.mt-5{ margin-top:30px;}
.mt-4{ margin-top:25px;}
.mt-3{ margin-top:20px;}
.mt-2{ margin-top:15px;}
.mt-1{ margin-top:10px;}
.p-6{ padding:40px;}
.p-5{ padding:30px;}

/** ENCABEZADO Y TITULOS */
header{  
    background-image: url("./../img/HeaderDesktop.png");
    background-repeat: no-repeat, repeat; 
    background-position: top center; 
    background-size: cover; 
    height: 300px;
    width: 100%;
    color:#0F273D;
    text-align: center;
}
.header{
    padding: 230px 20px;
}
.content{
    justify-items: center;
    padding-top: 50px;
    margin-bottom: 50px;
}
.title, .subtitle{
    text-align: center;
    width: 100%;
    margin:0;
    color: #E31395;
}
.title{ margin-bottom: 25px;}
.subtitle{
    font-size: 32px;
    line-height: 1.3em;
    font-size: 24px;
    margin-top: 5px;
    width: 100%;
}
/** STEPS */
.container-steps{
    max-width: 900px;
    max-height: 100px;
    color: #fff;
    border-radius: 55px; 
    display: flex!important;
    justify-content: space-evenly;
    margin: 20px auto;
}
.container-steps > .steps:first-child{ border-radius: 55px 0px 0px 55px;}
.container-steps > .steps:last-child{ border-radius: 0px 55px 55px 0px ; padding-right: 25px;}

.steps{ 
    padding: 5px 25px; 
    max-width: 300px; 
    line-height: 1.3em;
    display: grid;
    place-content: center;
}


.steps > div{ line-height: .9em; }
.steps > div> label{ font-weight: 300!important; }
.steps > div > img,  .steps > div > h1{ 
    width: 75px; height: auto; margin: 10px auto;
    position: relative;
    top: -50px;
    text-align: center;
}

.steps > div > h4, .steps > div > label{  
    position: relative;
    top: -40px; 
}

.steps > div{  padding:10px;}
.text-orange{ color: #FF8F15; }
.text-pink{ color: #E31395; }
.text-green{ color: #81BB47; }
.text-darkblue{ color: #0F273D; }
.bg-orange{ background-color: #FF8F15; }
.bg-pink{ background-color: #E31395; }
.bg-green{ background-color: #81BB47; }
.text-green{ color: #81BB47; }
.text-red{ color: #ee5253; }

.btn{
    padding: 11px 40px 9px 40px;
    border-radius: 35px;
    color:#FFF;
    cursor: pointer;
    font-size: 20px;
    font-weight: 500;
}
.btn:hover{
    transform: scale(1.2);
}
.opacity{
    opacity: 0.6;
}

@media only screen and (max-width: 1027px) {
header{ background-image: url("./../img/HeaderDesktop.png"); }
.subtitle{     
    font-size: 24px;
    margin-top: 16px;
}
.step-2, .step-3{ display: none!important;}
.container-steps{ max-width: 450px; }
.steps{ max-width: 450px!important; }
.form__group {
    width: 88%!important;
}
.container-steps > .steps:first-child{ border-radius: 55px;}
}
nav{
    background-color: #FF8F15;
    height: 75px;
    display: grid;
    place-content: center;
    width:100%; z-index:100;
}
.container-forms{
    min-width: 400; max-width: 850px; 
    margin: 0 auto!important;
    display:flex!important;
    text-align: center;
    align-items: center;
    flex-wrap: wrap; 
    justify-content: space-evenly;
}

.form__group {
    padding: 15px;
    margin-top: 10px;
    width: 40%;
}
.form__buttons{
    width: 100%;
    margin: 25px;
    padding: 25px;
    margin-top: 20px; width: 100%
}
.form__input{
    font-family: 'Josefin Sans', sans-serif;
    font-size: 16px;
    text-align: center;
    width: 100%;
    padding: 12px 0px;
    background-color: #E1E1E2;
    border-radius: 20px;
    border: 0;
    outline: 0;
    margin-top: 10px!important;
    margin-bottom: 7px!important;
}
.error{ 
    border-bottom: 2px solid #d63031;
}
.form__label {
    color: #E41395;
    font-size: 1.1rem;
    font-weight: 500;
    width: 100%!important;
}
.input-container input {
    position: relative;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}
select{ text-align: left!important; padding-left: 12px!important; padding-right: 12px!important; cursor: pointer;}
small{ margin-bottom: 25px; }

#Error > img,
#ErrorFac > img{
    width: 22px;
    height: 22px;
    margin-bottom: -5px;
}
#Error,
#ErrorFac{ height: 45px; padding: 10px; }