/* 
Theme Name: Skye Theme
Template Theme URI: https://
Author: el equipo de skye Group
Description: Plantilla desarrollada por Skye Group
Version: 1.0
*/


@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,600&display=swap');

body{
    padding: 0;
    margin: auto;
    width: auto;
    
}
span{
 position: relative;
}

h2{
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

p{
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

.uagb-heading-text{
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: #626262;
}

.btn-semibold{
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

.btn-bold{
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
}

.center-align{
    width: auto;
}

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

.color-black{color: black;}
.color-white{color: white;}
.color-blue{color: #00e5ff;}
.color-blue-strong{color: #00255e;}
.color-blue-medium{color: #1541aa}
.color-blue-dark{color: #020f30}
.bk-color-blue-strong{background-color: #020f30}

.section-columns{
    padding: 10px 0px;
    
}

.section-columns-div{
    padding: 10px 0px;
    
}
.section-columns h2{
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight:600;
}

.section-columns h3{
    font-size: 26px;
    font-weight: lighter;
    line-height: 40px;
}

.section-columns p{
    font-weight: lighter;
    font-size: 16px;
    line-height: 30px;
    padding-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

#intro-container .section-columns h2{
    font-size: 72px;
    padding-top: 120px;
    padding-bottom: 30px;
}

.section-columns #image-bg{
    background-image: url('img/todos-skye@3x.png');
    background-repeat: no-repeat;
    background-size: 800px;
    background-position: -185px 0px;
    height: 500px;
} 

.section-columns #image-bg-map{
    background-image: url('img/mapa-300x208.png');
    background-repeat: no-repeat;
    background-size: 800px;
    background-position: -185px 0px;
    height: 500px;
} 

.stepline{
    background-color: #f8f6f6;
}

.rectangle{
    height: 10px;
    margin-bottom: -50px;
}

.bg-white{
    background-color: white;
}

.bg-blue{
    background-color: #02164a;
}

#footer{
    margin-top: -50px;
    padding-top: 50px;
    background-color: #02164a;
}

.skew-left{
transform: skewY(-4deg);
}

.btn{
    border: solid 1px;
    border-radius: 20px;
    padding: 20px 40px;
    text-decoration: none;
}

.btn-nav{
    border: solid 1px;
    border-radius: 20px;
    padding: 5px 25px;
    text-decoration: none;
}

.btn-blue{
    background-color: #00e5ff;
    color: #00255e;
    width: 216px;
    height: 48px;
}

.btn-nav-blue-navigation a span{
    border: solid 1px;
    border-radius: 20px;
    padding: 10px 40px;
    text-decoration: none;
    background-color: #00e5ff;
    color: #00255e;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.btn-nav-blue-navigation a span:hover{
    background-color: white;
    text-decoration: none;
    border-color: #00255e;
    color: #00255e;
}

.btn-blue-strong{
    background-color: #1541aa;
    color: #ffff;
    width: 216px;
    height: 48px;
    font-size: 14px;
}

.btn-nav-blue{
    background-color: #00e5ff;
    color: #00255e;
    width: 216px;
    height: 48px;
}

.btn-blue:hover, .btn-nav-blue:hover{
    background-color: white;
    border-color: #00255e;
    color: #00255e;
}

.btn-blue-strong:hover{
    background-color: #020f30;
    border-color: #020f30;
    color: #ffff;
}

.section-columns > div{
    display: inline-block;
    vertical-align: top;
    width: 49%;
    padding-top: 100px;
}

#intro-container{
 background-color: #020f30;
}

#intro-container nav{
    padding: 10px;
    margin: 0;
    text-align: center;
}

#intro-container nav div{
    display:inline-block;
    vertical-align: middle;
}

#intro-container nav #logo{
    width: 10%;
}

#intro-container nav #menu-lista{
    width: 65%;
    text-align: center;
    margin:auto 0px;
}

#intro-container nav #btn-contact{
    width: 10%;
    margin:auto;
}

#intro-container nav #menu-lista ul{
    margin: 0;
    padding: 0;
}

#intro-container nav #menu-lista ul li{
    display: inline-block;
    padding: 0;
    margin: 0 5px;
    list-style: none;
}

#intro-container nav #menu-lista ul li a{
    color: white;
    text-decoration: none;
    width: 120px;
    height: 48px;
    margin: 0.1px 24px 63.9px;
    font-family: 'Montserrat-SemiBoldItalic',arial;
    font-size: 14px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
}

nav{
    padding: 10px;
    margin: 0;
    text-align: center;
    background-color: #020f30;
} 

#modal-1{
    background-color: #020f30;
}

button.wp-block-navigation__responsive-container-close{
    color: white;
}

button.wp-block-navigation__responsive-container-open {
    color: white;
}

.wp-block-navigation__container{
    margin: 0;
    padding: 0;
}

.wp-block-navigation-link{
    display: inline-block;
    padding: 0;
    margin: 0 5px;
    list-style: none;
}

.wp-block-navigation-item__label{
    color: white;
    text-decoration: none;
    width: 120px;
    height: 48px;
    margin: 0.1px 24px 63.9px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    font-style: italic;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
}

.wp-block-navigation-item__label:hover{
    color: #00e5ff;
    text-decoration: underline;
}

.wp-block-navigation-item__label:visited{
    color: #00e5ff;
    text-decoration: underline;
}

.wp-block-navigation__responsive-container-open {
    color:white;
}

.btn-large{
    width: 272px;
    height: 48px;
}

.wp-block-uagb-buttons .uagb-block-dae5374e .uagb-buttons-repeater .uagb-button__link{
    padding: 5px;
}

#intro-container nav #menu-lista ul li  a:visited{
    color: #00e5ff;
    text-decoration: underline;
}

#intro-container nav #menu-lista ul li a:hover{
    color: #00e5ff;
    text-decoration: underline;
}

a:visited{
    color: #00e5ff;
    text-decoration: underline;
}

a:hover{
    color: #00e5ff;
    text-decoration: underline;
}

.section{
    background-color: black;
}

.display-none{
    display:none;
}

.wp-image-236{

}



.uagb-block-6d98a67f .wp-block-image figure:hover{
    background-color: #467aff;
    border-radius: 50%;
    padding: 20px;
    transform: scale(1.5);
}

.uagb-block-6d98a67f .wp-block-image figure{
    Background-color: white;
    border-radius: 50%;
    padding: 10px;
    transition: all 300ms;
    cursor: pointer;
}

.uagb-block-6d98a67f .wp-block-image figure img{
   fill: #1541aa;
}

.relative{position: relative;}

/* ------------stepline ----------------- */

.container-step{
    width: 100%;
    position: absolute;
    z-index: 1;
    padding-top: 50px;
    padding-bottom: 50px;
  }
.progressbar li{
    float: left;
    width: 16.6%;
    position: relative;
    text-align: center;
    list-style: none;
    color: #626262;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 12px;
  }

.progressbar{
    counter-reset: step;
  }
  
.progressbar li:before{
    content:'';
    counter-increment: step;
    width: 30px;
    height: 60px;
    border: 0px solid #bebebe;
    display: block;
    margin: 20px auto 20px auto;
    border-radius: 50%;
    line-height: 27px;
    color: #bebebe;
    text-align: center;
    font-weight: bold;
  }

.progressbar li:after{
    content: '';
    position: absolute;
    width:100%;
    height: 2px;
    background: #d7d7d7;
    top: 40px;
    left: -50%;
    z-index: -1;
  }
  
.progressbar li:first-child:after{
    content: none;
}

.progressbar li.active + li:after{
    /* background: #467aff; */
}
.progressbar li.active:after{
    background: #467aff;
}
.progressbar li.checked:after{
    background: #467aff;
}
.progressbar li.active + li:before{
    border-color: #467aff;
   color: white; 
}

#step1{
    background-image: url('img/step-line/1.png');
    background-repeat: no-repeat;
    background-size: 88px;
    background-position: 50% 0px;    
}

#step1:hover{ 
    background-image: url('img/step-line/hover/1.png');   
}

#step1:active{
    background-size: 110px;
    background-position: 50% -5px;
}

.progressbar #step1.active{
    background-image: url('img/step-line/hover/1.png');
    background-size: 110px;
    background-position: 50% -5px;
}

#step2{
    background-image: url('img/step-line/2.png');
    background-repeat: no-repeat;
    background-size: 88px;
    background-position: 50% 0px;    
}

#step2:hover{
    background-image: url('img/step-line/hover/2.png');  
}

#step2:active{
    background-size: 110px;
    background-position: 50% -5px;
}

.progressbar #step2.active{
    background-image: url('img/step-line/hover/2.png');
    background-size: 110px;
    background-position: 50% -5px;
}

#step3{
    background-image: url('img/step-line/3.png');
    background-repeat: no-repeat;
    background-size: 88px;
    background-position: 50% 0px;
}

#step3:hover{
    background-image: url('img/step-line/hover/3.png');
}

#step3:active{
    background-size: 110px;
    background-position: 50% -5px;
}

.progressbar #step3.active{
    background-image: url('img/step-line/hover/3.png');
    background-size: 110px;
    background-position: 50% -5px;
}

#step4{
    background-image: url('img/step-line/4.png');
    background-repeat: no-repeat;
    background-size: 88px;
    background-position: 50% 0px;    
}

#step4:hover{
    background-image: url('img/step-line/hover/4.png'); 
}

#step4:active{
    background-size: 110px;
    background-position: 50% -5px;
}

.progressbar #step4.active{
    background-image: url('img/step-line/hover/4.png');
    background-size: 110px;
    background-position: 50% -5px;
}

#step5{
    background-image: url('img/step-line/5.png');
    background-repeat: no-repeat;
    background-size: 88px;
    background-position: 50% 0px;    
}

#step5:hover{
    background-image: url('img/step-line/hover/5.png');  
}

#step5:active{
    background-size: 110px;
    background-position: 50% -5px;
}

.progressbar #step5.active{
    background-image: url('img/step-line/hover/5.png');
    background-size: 110px;
    background-position: 50% -5px;
}
 
#step6{
    background-image: url('img/step-line/6.png');
    background-repeat: no-repeat;
    background-size: 88px;
    background-position: 50% 0px;    
}

#step6:hover{
    background-image: url('img/step-line/hover/6.png');
}

#step6:active{
    background-size: 110px;
    background-position: 50% -5px;
}

.progressbar #step6.active{
    background-image: url('img/step-line/hover/6.png');
    background-size: 110px;
    background-position: 50% -5px;
}

/* ------------ END stepline ----------------- */

/* ------------stepline in form ----------------- */

.stepline-form{
    height: 290px;

}
.container-step-form{
    width: 100%;
    position: absolute;
    z-index: 1;
    padding-top: 50px;
    padding-right: 0px;
    padding-bottom: 50px;
    padding-left: 0px;
  }
.progressbar-form li{
    float: left;
    width: 16.6%;
    position: relative;
    text-align: center;
    list-style: none;
    color: #626262;
  }

.progressbar-form{
    counter-reset: step;
    padding-right: 50px;
  }
.progressbar-form li:before{
    content:'';
    counter-increment: step;
    width: 30px;
    height: 60px;
    border: 0px solid #bebebe;
    display: block;
    margin: 20px auto 20px auto;
    border-radius: 50%;
    line-height: 27px;
    color: #bebebe;
    text-align: center;
    font-weight: bold;
    padding-left:  0px;
  }

.progressbar-form li:after{
    content: '';
    position: absolute;
    width:100%;
    height: 2px;
    background: #d7d7d7;
    top: 40px;
    left: -50%;
    z-index: -1;
  }
  
.progressbar-form li:first-child:after{
    content: none;
}



#step1-form{
    background-image: url('img/step-line/1.png');
    background-repeat: no-repeat;
    background-size: 88px;
    background-position: 50% 0px;    
}


#step1-form:hover{
    background-image: url('img/step-line/hover/1.png');   
}

#step1-form:active{
    background-size: 90px;
    background-position: 50% 0px;  
}

.progressbar-form #step1-form.active{
    background-image: url('img/step-line/hover/1.png');
    background-repeat: no-repeat;
    background-size: 90px;
    background-position: 50% 0px; 
}

#step2-form{
    background-image: url('img/step-line/2.png');
    background-repeat: no-repeat;
    background-size: 88px;
    background-position: 50% 0px;    
}

#step2-form:hover{
    background-image: url('img/step-line/hover/2.png');   
}

#step2-form:active{
    background-size: 90px;
    background-position: 50% 0px;  
}

.progressbar-form #step2-form.active{
    background-image: url('img/step-line/hover/2.png');
    background-repeat: no-repeat;
    background-size: 90px;
    background-position: 50% 0px; 
}

#step3-form{
    background-image: url('img/step-line/3.png');
    background-repeat: no-repeat;
    background-size: 88px;
    background-position: 50% 0px;
}

#step3-form:hover{
    background-image: url('img/step-line/hover/3.png');   
}

#step3-form:active{
    background-size: 90px;
    background-position: 50% 0px;  
}

.progressbar-form #step3-form.active{
    background-image: url('img/step-line/hover/3.png');
    background-repeat: no-repeat;
    background-size: 90px;
    background-position: 50% 0px; 
}

#step4-form{
    background-image: url('img/step-line/4.png');
    background-repeat: no-repeat;
    background-size: 88px;
    background-position: 50% 0px;    
}

#step4-form:hover{
    background-image: url('img/step-line/hover/4.png');   
}

#step4-form:active{
    background-size: 90px;
    background-position: 50% 0px;  
}

.progressbar-form #step4-form.active{
    background-image: url('img/step-line/hover/4.png');
    background-repeat: no-repeat;
    background-size: 90px;
    background-position: 50% 0px; 
}

#step5-form{
    background-image: url('img/step-line/5.png');
    background-repeat: no-repeat;
    background-size: 88px;
    background-position: 50% 0px;    
}

#step5-form:hover{
    background-image: url('img/step-line/hover/5.png');   
}

#step5-form:active{
    background-size: 90px;
    background-position: 50% 0px;  
}

.progressbar-form #step5-form.active{
    background-image: url('img/step-line/hover/5.png');
    background-repeat: no-repeat;
    background-size: 90px;
    background-position: 50% 0px; 
}
 
#step6-form{
    background-image: url('img/step-line/6.png');
    background-repeat: no-repeat;
    background-size: 88px;
    background-position: 50% 0px;    
}

#step6-form:hover{
    background-image: url('img/step-line/hover/6.png');   
}

#step6-form:active{
    background-size: 90px;
    background-position: 50% 0px;  
}

.progressbar-form #step6-form.active{
    background-image: url('img/step-line/hover/6.png');
    background-repeat: no-repeat;
    background-size: 90px;
    background-position: 50% 0px; 
}

/* ------------ END stepline in Form ----------------- */

/*ShapeDivider*/

.custom-shape-divider-bottom-1665113767 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-bottom-1665113767 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 64px;
}

.custom-shape-divider-bottom-1665113767 .shape-fill {
    fill: #F8F6F6;
}

/*  --------------------------------------------------- multistepform ----------------------*/

/* *{
    padding:0;
    margin:0;
} */

.button-right {
    float: right;
}
.container{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background-color:#f8f6f6;
}
.container .card{
    height:500px;
    width:70%;
    background-color:#fff;
    position:relative;
    box-shadow:0 15px 30px rgba(0,0,0,0.1);
    font-family: 'Monserrat', sans-serif;
    border-radius:2100px;
}
.container .card .form{
    width:100%;
    height:500px;
    display:flex;
}
.container .left-side{
    width:20%;
    height:500px;
    background-color:#f8f6f6;
    height:500px;
    border-top-left-radius:20px;
    border-bottom-left-radius:20px;
    padding:0px 100px;
    box-sizing:border-box;

}

.left-side-congrats{
    float: left;
    padding-top: 50px;
    padding-left: 20px;
}
/*left-side-start*/
.left-heading{
    color:#fff;   
}
.steps-content{
    margin-top:30px;
    color:#fff;
}
.steps-content p{
    font-size:12px;
    margin-top:15px;
}
.progress-bar{
    list-style:none;
    /*color:#fff;*/
    padding: -100px;
    margin-top:30px;
    margin-left:-30px;
    font-size:13px;
    font-weight:700;
    counter-reset:container 0;
    height:auto;
}
.progress-bar li{
       position:relative;
       margin-left:30px;
       margin-top:50px;
       counter-increment:container 1;
      color:#4f6581;
}

.progress-bar li::before{
    content:' ';
    line-height:25px;
    text-align:center;
    position:absolute;
    height:25px;
    width:25px;
    border:2px solid #d7d7d7;
    border-radius:50%;
    left:-40px;
    top:-5px;
    z-index:10;
    background-color:#f2f1f1;
}

.progress-bar li::after{
    content: '';
    position: absolute;
    height: 90px;
    width: 2px;
    background-color: #4f6581;
    z-index: 1;
    left: -27px;
    top: -70px;
}


.progress-bar li.active::after{
    background-color: #467aff;
}

.progress-bar li:first-child:after{
  display:none;  
}

/*.progress-bar li:last-child:after{*/
/*  display:none;  */
/*}*/
.progress-bar li.active::before{
    color: #467aff;
    border:2px solid #467aff;
    background-color: #467aff;
}
.progress-bar li.active{
    color:#467aff;
}
.d-none{
   display:none;   
}


/*left-side-end*/

.container .card .right-side{
    width:100%;
    background-color:#fff;
    height:100%;
  border-radius:20px;
}
.right-side-congrats{
    float: right;
    padding-right: 20px;
}
/*right-side-start*/
.main{
    display:none;
}
.active{
    display:block;
}
.main{
    padding:40px;
}
.main small{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:2px;
    height:30px;
    width:30px;
    background-color:#ccc;
    border-radius:50%;
    color:yellow;
    font-size:19px;
}
.text{
    margin-top:0px;
}
.congrats{
    text-align:left;
}
.text p{
    margin-top:10px;
    font-size:13px;
    font-weight:700;
    color:#cbced4;
}
.input-text{
    margin:30px 0;
    display:flex;
    gap:20px;
}

.input-text .input-div{
    width:100%;
    position:relative; 
}

.input-text .input-div-code{
    width:30%;
    padding: -40px;
}

.input-text .input-div-phone{
    width:70%;
    margin: 18px 0px;
}


input[type="text"]{
    width:100%;
    height:64px;
    border:none;
    outline:0;
    border-radius:5px;
    border:1px solid #cbced4;
    gap:20px;
    box-sizing:border-box;
    padding:0px 10px;
}
select{
    width:100%;
    height:40px;
    border:none;
    outline:0;
    border-radius:5px;
    border:1px solid #cbced4;
    gap:20px;
    box-sizing:border-box;
    padding:0px 10px;
}
.input-text .input-div span{
    position:absolute;
    top:10px;
    left:10px;
    font-size:14px;
    transition:all 0.5s;
}
.input-text .input-div label{
    color: #00255e;
    font-size:16px;
}
.input-text .input-div p{
    color: #626262;
    font-size:14px;
}

.input-div input:focus ~ span,.input-div input:valid ~ span  {
    top:-15px;
    left:6px;
    font-size:10px;
    font-weight:600; 
}

.input-div span{
    top:-15px;
    left:6px;
    font-size:10px;
}
.buttons button{
    border:none;
    border-radius:5px;
    background-color: white;
    font-size:16px;
    cursor:pointer;
}

.buttons{
    cursor:pointer;
}

.button-start{
    padding-top: 20px;
}
.button_space{
    display:flex;
    gap:20px;
    
}
.button_space button:nth-child(1){
    background-color:#fff;
    color:#000;
    border:1px solid #000;
}
.user_card{
    margin-top:20px;
    margin-bottom:40px;
    height:200px;
    width:100%;
    border:1px solid #c7d3d9;
    border-radius:10px;
    display:flex;
    overflow:hidden;
    position:relative;
    box-sizing:border-box;
}
.user_card span{
    height:80px;
    width:100%;
    background-color:#dfeeff;
}
.circle{
    position:absolute;
    top:40px;
    left:60px;
}
.circle span{
    height:70px;
    width:70px;
    background-color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    border:2px solid #fff;
    border-radius:50%;
}
.circle span img{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
}
.social{
    display:flex;
    position:absolute;
    top:100px;
    right:10px;
}
.social span{
    height:30px;
    width:30px;
    border-radius:7px;
    background-color:#fff;
    border:1px solid #cbd6dc;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-left:10px;
    color:#cbd6dc;

}
.social span i{
        cursor:pointer;
}
.heart{
    color:red !important;
}
.share{
        color:red !important;
}
.user_name{
    position:absolute;
    top:110px;
    margin:10px;
    padding:0 30px;
    display:flex;
    flex-direction:column;
    width:100%;
    
} 
.user_name h3{
    color:#4c5b68;
}
.detail{
    /*margin-top:10px;*/
   display:flex;
   justify-content:space-between;
   margin-right:50px;
}
.detail p{
    font-size:12px;
    font-weight:700;

}
.detail p a{
    text-decoration:none;
    color:blue;
}

.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #7ac142;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  margin: 10% auto;
  box-shadow: inset 0px 0px 0px #7ac142;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px #7ac142;
  }
}


.warning{
    border:1px solid red !important;
}


/*right-side-end*/
@media (max-width:750px) {
    .container{
        height:scroll;
       
        
    }
    .container .card {
        max-width: 350px;
        height:auto !important;
        margin:30px 0;
    }
    .container .card .right-side {
     width:100%;
            
    }
     .input-text{
         display:block;
     }
     
     .input-text .input-div{
  margin-top:20px;
    
}

    .container .card .left-side {
           
     display: none;
    }
}

/*Zeplin*/

 .Cual-es-tu-nombre {
    width: 382px;
    height: 24px;
    margin: 16px 280px 16px 0;
    font-family: Montserrat;
    font-size: 16px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #00255e;
  }

  .Cual-es-tu-correo-e {
    width: 329px;
    height: 24px;
    margin: 24px 333px 16px 0;
    font-family: Montserrat;
    font-size: 16px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #00255e;
  }

  .Ingresa-tu-nombre-co {
    width: 432px;
    height: 24px;
    opacity: 0.6;
    font-family: Montserrat;
    font-size: 16px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #626262;
  }

  .Rectangle {
    width:100%;
    height: 64px;
    margin: 10px 0 0px;
    padding: 20px 224px 20px 24px;
    border-radius: 8px;
    box-shadow: 0 2px 14px 10px rgba(0, 0, 0, 0);
    background-color: #f3f3f3;
  }

  .number  {
    width: 38px;
    height: 16px;
    margin: 0 84px 16px 0;
    font-family: Montserrat;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #02164a;
  }

  .Rectangle-textarea{
    width: 95%;
    margin: 10px 0 20px;
    padding: 20px 20px 20px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 14px 10px rgba(0, 0, 0, 0);
    background-color: #f3f3f3;
  }

  input::placeholder, textarea::placeholder {
    width: 236px;
    height: 24px;
    font-family: Montserrat;
    font-size: 16px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #626262;
  }

  /* ----------------------------- */

  /* ------------ Multiple Range----------------- */

  /* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
/* *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
} */
/* body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #17A2B8;
} */
/* ::selection{
  color: #fff;
  background: #17A2B8;
} */
.price-input{
  width: 100%;
  display: flex;
  margin: 30px 0 35px;
}
.price-input .field{
  display: flex;
  width: 100%;
  height: 45px;
  align-items: center;
}
.field input{
  width: 100%;
  height: 100%;
  outline: none;
  font-size: 19px;
  margin-left: 12px;
  border-radius: 5px;
  text-align: center;
  border: 1px solid #999;
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.price-input .separator{
  width: 130px;
  display: flex;
  font-size: 19px;
  align-items: center;
  justify-content: center;
}
.slider{
  height: 5px;
  position: relative;
  background: #d8d8d8;
  border-radius: 5px;
}
.slider .progress{
  height: 100%;
  left: 0%;
  right: 0%;
  position: absolute;
  border-radius: 5px;
  background: #467aff;
}
.range-input{
  position: relative;
}

.range-input input{
  position: absolute;
  width: 100%;
  height: 3px;
  top: -5px;
  margin-left: 0px;
  margin-right: 0px;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
input[type="range"]::-webkit-slider-thumb{
  height: 17px;
  width: 17px;
  border-radius: 50%;
  background: #467aff;
  pointer-events: auto;
  -webkit-appearance: none;
  box-shadow: 0 0 6px rgba(0,0,0,0.05);
}
input[type="range"]::-moz-range-thumb{
  height: 17px;
  width: 17px;
  border: none;
  border-radius: 50%;
  background: #467aff;
  pointer-events: auto;
  -moz-appearance: none;
  box-shadow: 0 0 6px rgba(0,0,0,0.05);
}

.values{
    background-color: red;
    position: absolute;
    width: 30%;
}

#range1{
    background-color: #f2f1f1;
    position: absolute;
    width: 35%;
    top: 15px;
    transform: translate(-35%);
    font-family: Montserrat;
    font-size: 14px;
    font-weight: normal;
}

#range2{
    background-color: #f2f1f1;
    position: absolute;
    width: 35%;
    top: 15px;
    transform: translate(250%);
    font-family: Montserrat;
    font-size: 14px;
    font-weight: normal;
}

#range3{
    background-color: #f2f1f1;
    position: absolute;
    width: 35%;
    top: 15px;
    transform: translate(565%);
    font-family: Montserrat;
    font-size: 14px;
    font-weight: normal;
}

#range4{
    background-color: #f2f1f1;
    position: absolute;
    width: 40%;
    top: 15px;
    transform: translate(750%);
    font-family: Montserrat;
    font-size: 14px;
    font-weight: normal;
    border-radius: 6px;
}

.values::before{
    background-color: red;
    position: absolute;
    width: 30%;
}

.row {
    padding: 10px;
}

.wrapper {
    padding-bottom: 50px;
}
  /* ------------ End Multiple Range----------------- */