*,
*::before,
*::after {
  box-sizing: border-box;
}


/*
body {
  background-image: url(../imagenes/forest5.png);
  background-size: cover;
  background-position: center;
  font-family: tahoma;
  overflow: hidden;
}
*/

.t_sorteo{
  width: 100%;
  height: 50px;
  outline: none !important;
  background: linear-gradient(-5deg, #c79a49, #f5af31);
  border: none;
  text-transform: uppercase;
  font-weight: bold;
  box-shadow: 0 3px 0 rgba(115, 136, 89, 0.2);
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  top: -4px;
}

.t_video{
  width: 400px;
  /*margin-left: calc((100% / 2 ) - 500px );*/
}

.t_presentacion{
  width: 100%;
  height: 550px;
  /*margin-left: calc((100% / 2 ) - 500px );*/
  /*background-image: url(../imagenes/forest5.png);*/
  /*background-image: url(../imagenes/forest5.png);*/
  background-position: center center;
}

.t_contacto{
  width: 100%;
  height: 850px;
  /*margin-left: calc((100% / 2 ) - 500px );*/
  /*background-image: url(../imagenes/forest5.png);*/  
  /*background: rgba(255,255,255,100);*/
  background: #fafafc;
  background-position: center center;
}

.tabla { 
  display:table; 
  width:800px;
}

.celda2 { 
  display:table-cell; 
}

.celda { 
  display:table-cell; 
}

.btn_sorteo{
  display: block;
  background-color: #bded7d;
  color: white;
  text-decoration: none;
  margin: 20px 0;
  padding: 15px 15px;
  border-radius: 5px;
  position: relative;
}


.btn_sorteo::after{
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.2s ease-in-out;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0), 0 3px 3px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}


.btn_sorteo:hover::after{
  background-color: rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.2);
}


.btn {
  display: block;
  background-color: #bded7d;
  color: white;
  text-decoration: none;
  margin: 20px 0;
  padding: 15px 15px;
  border-radius: 5px;
  position: relative;
}

.btn::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.2s ease-in-out;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0), 0 3px 3px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

.btn:hover::after {
  background-color: rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.2);
}

.btn-social {
  padding-left: 64px;
  position: relative;
  z-index: 1;
}

.btn-social .fa {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 50px;
  height: 100%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.1);
  line-height: 3.2;
  border-radius: 5px 0 0 5px;
}

.btn-facebook {
  background-color: #3b5999;
}

.btn-twitter {
  background-color: #55acee;
}

.btn-google {
  background-color: #dd4b39;
}

.btn-behance {
  background-color: #131418;
}

.form fieldset {
  border: none;
  padding: 0;
  margin: 15px 0;
  position: relative;
}

.form fieldset input, textarea{
  width: 100%;
  height: 48px;
  color: #333;
  padding: 15px 40px 15px 15px;
  font-size: 14px;
  outline: none !important;
  border: 1px solid #e6e6e6;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
  vertical-align: top;
}

.form fieldset textarea{
  width: 100%;
  height: 110px;
  color: #333;
  padding: 15px 40px 15px 15px;
  font-size: 14px;
  outline: none !important;
  border: 1px solid #e6e6e6;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
  vertical-align: top;
}

.form button {
  width: 100%;
  height: 50px;
  outline: none !important;
  background: linear-gradient(-5deg, #79b52c, #94d63d);
  border: none;
  text-transform: uppercase;
  font-weight: bold;
  box-shadow: 0 3px 0 rgba(115, 136, 89, 0.2);
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

.contenedor_izq {
  position: absolute;
  /*Posicionar a la derecha*/
  left: calc((0px + 800px + -250px) / 2);
  margin-top: 560PX;  
  transform: translate(-50%, -50%);
  /*z-index: 1;*/
  width: 800px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 3px 25px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  display: flex;
  opacity: 0.96;
}

.contenedor_der {
  position: absolute;
  /*
  Posicionar a la derecha
    right: calc((0px - 800px / 2) + 50px);
  */
  left: calc(50%);
  margin-top: 280px;  
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 800px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 3px 25px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  display: flex;
  opacity: 0.96;
}

.signup-connect,
.signup-classic {
  width: 50%;
  padding: 1px 50px;
}

.signup-connect {
  /*background-image: url(../imagenes/taximetro.png);*/
  background: linear-gradient(134deg, #fbce50, #e08106);
  color: white;
}

.signup-classic h2 {
  font-size: 16px;
  font-weight: bold;
  margin-top: 53px;
  margin-bottom: 43px;
}

.signup-classic fieldset::after {
  content: "\f007";
  font-family: FontAwesome;
  position: absolute;
  right: 15px;
  top: 17px;
  z-index: 2;
  width: 20px;
  color: rgba(0, 0, 0, 0.2);
  text-align: center;
}

.signup-classic fieldset.email::after {
  content: "\f0e0";
}

.signup-classic fieldset.password::after {
  content: "\f023";
}

.signup-classic fieldset.mensaje::after {
  content: "\f075";
}

.signup-classic fieldset.telefono::after {
  content: "\f095";
}

@media (max-width:1700px){
  .contenedor_izq{
    left: 50%;
  }
}

@media (max-width:1200px){
  .contenedor_izq {
    position: absolute;
    /* left: calc((0px + 800px + -250px) / 2); */
    margin-top: 590PX;
    transform: translate(-50%, -50%);
    /* z-index: 1; */
    height: 464px;
    width: 800px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 3px 25px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    opacity: 0.96;
  }
  .form fieldset textarea {
    width: 100%;
    height: 97px;
    color: #333;
    padding: 10px 40px 15px 15px;
    font-size: 14px;
    outline: none !important;
    border: 1px solid #e6e6e6;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
    vertical-align: top;
  }
  .form button {
    top: -40px;
    width: 100%;
    height: 48px;
    outline: none !important;
    background: linear-gradient(-5deg, #79b52c, #94d63d);
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    box-shadow: 0 3px 0 rgba(115, 136, 89, 0.2);
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

  .form fieldset {
    border: none;
    padding: 0;
    margin: 14px 0px;
    position: relative;
    top: -30px;
  }

  .t_sorteo {
    width: 100%;
    height: 50px;
    outline: none !important;
    background: linear-gradient(-5deg, #c79a49, #f5af31);
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    box-shadow: 0 3px 0 rgba(115, 136, 89, 0.2);
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
    top: -51px;
  }
}



@media (max-width:1050px) {
  .tabla {
     display:block; 
     width: 421px;
  }
  .celda {  
    /*   
    display:block;
    height:544px; */
  }
  .celda2 {     
    display:block;
    height:1088px; 
  }

  .contenedor_izq {
    position: absolute;;
    /*left: calc((0px + 800px - 50%) / 2);*/
    top: 19px;
    transform: translate(-50%, -50%);
    /*z-index: 10;*/
    height: 463px;
    width: 400px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 3px 25px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    opacity: 0.96;
  }
  .contenedor_der {
    position: absolute;
    /*Posicionar a la derecha*/
    left: calc(50%);
    /*right: calc((0px - 400px / 2) + 50px);*/
    margin-top: 545px;  
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 400px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 3px 25px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    opacity: 0.96;
  }
  .t_contacto{
    width: 100%;
    height: 1380px;
    border-bottom: 1px solid #ff9c35;
    /*margin-left: calc((100% / 2 ) - 500px );*/
    /*background-image: url(../imagenes/forest5.png);
    background-position: center center;*/
  }
  .signup-classic {
    z-index: 3;
  }
  .signup-classic h2 {
    width: 300px;
  }
  .form fieldset input{
    width: 300px;
  }
  .username{
    width: 300px;
  }
  .email{
    width: 300px;
  }
  .telefono{
    width: 300px;
  }
  .mensaje{
    width: 300px;
  }
  .form button{
    width: 300px;
  }
  .signup-connect, .signup-classic {
    width: 50%;
    padding: 0px 50px;
  }
}