* {
  -webkit-transition: 0.4s;

  -webkit-transition: all 0.4s ease 0s;

  transition: all 0.4s ease 0s;
}

/* body {
  background: #616161 url(https://images.unsplash.com/photo-1452716726610-30ed68426a6b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=177c2914fe84d20069f207e27632acc9) center/cover no-repeat;
  height: 100vh;

  color: #FFF;
  font-family: Roboto;
} */
.body2{
  overflow: hidden;

}
.cont-modal2{}
.cont-modal3{
  position: fixed;
  background-color: rgba(0, 0, 0, 0.787);
  width: 100%;
  height: 1000px;
  z-index: 300;

  -webkit-filter:blur(0.6);

          filter:blur(0.6)
}
.cont-modal4{
  position: fixed;
  background-color: rgba(245, 245, 245, 0.548);
  width: 100%;
  height: 1000px;
  z-index: 300;

  -webkit-filter:blur(0.6);

          filter:blur(0.6)
}
.modal3 {
  overflow: hidden;
  height: 81%;
  width: 43%;
  margin: auto;
  /* box-shadow: 0 15px 35px rgb(0, 0, 0); */
  /* position: absolute; */
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-transition: all .4s, box-shadow .3s .4s;
  transition:all .4s, box-shadow .3s .4s;
  z-index: 10000;
}
.modal3.hidden2 {
  box-shadow: none;
  -webkit-transition: .4s, box-shadow 0s;
  transition: .4s, box-shadow 0s;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  visibility: hidden;
}

.modal2 {
  overflow: hidden;
  height: 81%;
  width: 43%;
  margin: auto;
  box-shadow: 0 15px 35px rgb(0, 0, 0);
  /* position: absolute; */
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-transition: all .4s, box-shadow .3s .4s;
  transition:all .4s, box-shadow .3s .4s;
  z-index: 10000;
}
.modal2.hidden2 {
  box-shadow: none;
  -webkit-transition: .4s, box-shadow 0s;
  transition: .4s, box-shadow 0s;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  visibility: hidden;
}
.modal2.hidden2 .form3 {
  /* top: 100%; */

}
.modal2.hidden2 .invite {
  /* top: -100%; */
}
.modal2.hidden2 .invite .close {
  height: 0;
  width: 0;
  top: 0;
  right: 0;
}
.invite-v{
  left:0% !important;
}


.form3, .invite{
  /* background: rgb(71, 71, 71); */
  background: rgb(255, 255, 255);
  width: 100%;
  height: 100%;
  padding: 25px;
  position: absolute;
  top: 0;
  left: 0;

}
.form3 hr {
  margin-top: 16px !important;
  margin-bottom: 5px !important;
  border: 0;
  border-top: 1px solid #eee;
}
input {
  /* background: rgba(255, 255, 255, 0.924); */
  background:rgba(198, 198, 198, 0.924);
  width: 100%;
  padding: 8px;
  margin: 15px 0;
  border: none;
  border-radius: 3px;
  outline: none;
  /* color: #FFF; */
  font-size: 20px;
}
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 500px #40a087 inset;
  -webkit-text-fill-color: #FFF;
}

label {
  font: 500 14px Roboto;
  color: #FB5781;
}

.newform {
    width: 100% !important;
    /* background-color: white; */
    overflow: hidden;
    height: 65px;
    margin-top: 1em;
}
/* button {
  background: -webkit-linear-gradient(135deg, #f857a6, #ff5858);
  background: linear-gradient(-45deg, #f857a6, #ff5858);
  padding: 10px 20px;
  border: none;
  border-radius: 21px;
  outline: none;
  overflow: hidden;
  position: absolute;
  bottom: 30px;
  left: 50%;
  color: #FFF;
  font-size: 18px;
  cursor: pointer;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
} */
/* button:hover:before {
  left: 110%;
  -webkit-transition: .3s;
  transition: .3s;
}
button:before {
  content: '';
  background: rgba(255, 255, 255, 0.3);
  height: 100%;
  width: 65px;
  position: absolute;
  top: 0;
  left: -100%;
  -webkit-transform: skew(-45deg);
          transform: skew(-45deg);
  -webkit-transition: 0s;
  transition: 0s;
} */
.form3{
  padding-top: 62px;
}
.form3-h{
  left: -100%;
}

.invite {
  /* background: linear-gradient(-45deg, #f857a6, #ff5858); */
  /* background-color: #e1252e; */
  background-color: #e9e9e9;
  left: 100%;
  color: white;
}
.invite h3{
    text-align: center;
}


.nope {
  background: #474747;
  padding: 10px 15px;
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  position: absolute;
  bottom: 30px;
  left: 50%;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.nope:hover {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.close {

  /* z-index: 500;
  background: #474747;
  height: 30px;
  width: 30px;
  border: 3px solid #FFF;
  border-radius: 50%;
  position: absolute;

  top: 9px;
  right: 9px;
  cursor: pointer;
  -webkit-transition: .4s .3s;
  transition: .4s .3s; */
}
.close:before, .close:after {
  content: '';
  /* background: #FFF;
  height: 80%;
  width: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg); */
}
.close:after {
  /* -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg); */
}
.open2 {
  background-color: var(--color-secundario);
  height: auto;
  /* width: 60%; */
  margin: 18px auto;
  padding: 10px 20px;
  display: block;
  /* margin: auto; */
  /* position: absolute; */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 20px;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 12px;
  color: white;

}
.open2:hover {


  background-color:var(--color-primario) ;

}
.open {
    border-radius: 12px;
    background-color: var(--color-btn);
  /* background: linear-gradient(-45deg, #f857a6, #ff5858); */
  height: auto;
  width: 54%;
  padding: 20px 20px;
  /* margin: auto; */
  /* position: absolute; */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 1.3em;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  /* opacity: 0; */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  /* visibility: hidden; */
  font-family: ;
  font-weight: 800;
  color: var(--color-secundario);
}


.flecha:before{
  content: "\f0da"!important;
  font-family: FontAwesome;
  /* display: inline-block; */
  margin-left:0px !important;
  color: var(--color-secundario);
  width: 1.3em;
  /* height: 1.3em; */
  /* background-color: #b91b1b;; */
  padding: 0 0 0 -16px;
  /* margin-right: 7px; */
  border-radius: 6px;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  font-size: 1.2em;
  margin-right: 7px;

}
.open:hover  .flecha:before{

  color: var(--color-primario);
}
.open.active {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  visibility: visible;
}
.open:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  color:var(--color-primario);
  background-color:#ffffff ;
  /* background: linear-gradient(180deg, #fb5a5a, #ff5858); */
}
.boton2{
  margin:0 auto;
  display: block;

}

.mail{
  margin: 0 auto;
  margin-top: 99px;
  margin-bottom: 20px;
  display: block;
  height: 46px;
  /* width: 74%; */

}

.b .mail{
  margin: 0;
  margin-right: -2px;;
  /* margin-top: 16px; */
  margin-bottom: 0px;
  background: white;
  height: 64px;
  /* width: 55%; */
  font-weight: 900;
  font-size: 15px;
  text-align: left;
  /* border-radius: 3em; */
  /* border: 1px solid var(--color-primario); */
  border-left: 1px solid #025157;
    border-top: 1px solid #025157;
    border-bottom: 1px solid #025157;

}
.b .open3{
  /* z-index: 999; */
  /* top: -91px; */
  /* right: -323px; */
  border-radius: 0;
  background-color: var(--color-secundario);
  /* background: linear-gradient(-45deg, #f857a6, #ff5858); */
  height: 63px;
  /* width: 46%; */
  margin: 0;
  padding: 0px 20px;
  border-radius: 0;
  font-size: 16px;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  /* margin-top: 23px; */
  font-weight: 800;
  color: white;
  /* position: relative;*/
}
.open3:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    color: white;
    background-color: var(--color-primario);
    /* background: linear-gradient(180deg, #fb5a5a, #ff5858); */
}

.p-pop{
  font-family: var(--font-h2);
  color: rgb(127, 127, 127);
  text-align: center;
  font-weight: bolder;
  margin-bottom: 27px;



}



.pop-up{
  height: 110px;
  /* background-color:  #d7d9cc; */
  bottom: 0;
  /* bottom:-200px; */
  z-index: 1000 !important;
  width: 100% !important;
  position: fixed !important;
  /* border-top:1px solid rgb(190, 190, 190); */
  -webkit-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
  -webkit-animation: pop-up .6s ease-in-out;
          animation: pop-up .6s ease-in-out;
          background-color: #67b54b8c;


}



.c .mail{
margin: 0;
margin-top: 8px;
border-radius:0;
margin-bottom: 0px;
background: red;
height: 56px;
width: 36%;
font-weight: 900;
font-size: 1.5em;
text-align: center;

}
.c .open3{
border-radius: 5px;
background-color: #025157;
/* background: linear-gradient(-45deg, #f857a6, #ff5858); */
height: auto;
width: 36%;
padding: 20px 20px;
margin-left: 36px;
font-size: 20px;
text-align: center;
white-space: nowrap;
cursor: pointer;

margin-top: 23px;


font-weight: 800;
/* color: var(--color-secundario); */
color:white;
}







@media screen and (max-width:320px){
  .modal2{
      /* transform: scale(.73); */
      /* left: -63px; */
      height: 50%;
      width: 95%;
  }

}
@media screen and (max-width:500px){
  .modal2{
    /* transform: scale(.73); */
    /* left: -63px; */
    height: 50%;
    width: 95%;
}
  .open{
      width: 100%;
  }
  .b .mail, .b .open3{
    width:100%;
  }
  .invite{
      /* left: 6%; */
      color: white;
      /* top: -23%; */
      font-size: 13px;
      text-align: center;

}

  .newform{
    height:auto;
  }
}

@media screen and (max-width:700px){
  .title{
    font-size:4.5em;
    line-height: 60px;
  }
  .sub2{
        font-size: 1.9em;
  }


  .logo-xs{
        width: 90%;
  }
.modal2{
  /* transform: scale(.73); */
  /* left: -63px; */
  height: 52%;
  width: 85%;
}

}