http-km/index.html

## index.html
<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>GDLWEBCAMP</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="manifest" href="site.webmanifest">
  <link rel="apple-touch-icon" href="icon.png">
  <!-- Place favicon.ico in the root directory -->

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/fontawesome-all.min.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Oswald|PT+Sans" rel="stylesheet">


</head>

<body>
  <!--[if lte IE 9]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
  <![endif]-->

  <!-- Add your site or application content here -->

  <header class="site-header">
     <div class="hero">
       <div class="contenido-header">
          <nav class="redes-sociales">
             <a href="#"><i class="fab fa-facebook-f"></i></a>
             <a href="#"><i class="fab fa-twitter"></i></a>
             <a href="#"><i class="fab fa-pinterest-p"></i></a>
             <a href="#"><i class="fab fa-youtube"></i></a>
             <a href="#"><i class="fab fa-instagram"></i></a>
          </nav>
          <div class="informacion-evento">
            <div class="clearfix">
              <p class="fecha"><i class="fas fa-calendar-alt"></i>10-12 Dic</p>
              <p class="ciudad"><i class="fas fa-map-marker-alt"></i>Guadalajara, Mx</p>
            </div>
          <h1 class="nombre-sitio">GDLWEBCAMP</h1>
          <p class="slogan">La mejor conferencia de <span>diseño web</span></p>
            </div><!--.informacion evento-->
       </div>
     </div><!--.hero-->
  </header>

  <div class="barra">
    <div class="contenedor clearfix">
       <div class="logo">
         <img src="img/logo.svg" alt="logo gdlwebcamp">
       </div>
          <div class="menu-movil">
            <span></span>
            <span></span>
            <span></span>
          </div>

          <nav class="navegacion-principal">
            <a href="#">Conferencia</a>
            <a href="#">Calendario</a>
            <a href="#">Invitados</a>
            <a href="registro.html">Reservaciones</a>
          </nav>
    </div> <!--.contenedor-->
  </div> <!--.barra-->

    <section class="seccion contenedor">
      <h2>La mejor conferencia de diseño web en español</h2>
      <p>
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea asperiores molestias ipsum consequuntur optio rerum voluptas unde. Explicabo quia quasi magni praesentium, ratione recusandae qui perspiciatis, soluta temporibus porro laudantium.
      </p>
    </section> <!--Seccion-->

    <section class="programa">
       <div class="contenedor-video">
          <video autoplay loop  poster="img/bg-talleres.jpg">
             <source src="img/video/video.mp4" type="video/mp4">
              <source src="img/video/video.webmm" type="video/webm">
                <source src="img/video/video.ogv" type="video/ogg">
          </video>

       </div> <!--.contenedor-video-->
          <div class="contenido-programa">
             <div class="contenedor">
               <div class="programa-evento">
                 <h2>Programa del Evento</h2>
                 <nav class="menu-programa">
                   <a href="#"><i class="fas fa-code"></i>Talleres</a>
                   <a href="#"><i class="fas fa-comment"></i>Conferecias</a>
                   <a href="#"><i class="fas fa-university"></i>Seminarios</a>
                 </nav>

                 <div id="talleres" class="info-curso ocultar clearfix">
                   <div class="detalle-evento">
                     <h3>HTML5, CCS3 y JavaScript</h3>
                     <p><i class="far fa-clock"></i>16:00 hrs</p>
                     <p><i class="fas fa-calendar-alt"></i>10 de Dic</p>
                     <p><i class="fas fa-user"></i>Juan Pablo de la torre</p>
                   </div>

                   <div class="detalle-evento">
                      <h3>Responsive Web Dising</h3>
                     <p><i class="far fa-clock"></i>20:00 hrs</p>
                     <p><i class="fas fa-calendar-alt"></i>10 de Dic</p>
                     <p><i class="fas fa-user"></i>Juan Pablo de la torre</p>
                   </div>
                    <a href="#" class="button float-right">Ver todos</a>


                 </div> <!--#talleres-->
               </div> <!--programa evento-->
             </div>  <!--.contenedor-->
          </div> <!--.contenido-programa-->
    </section><!--.programa-->

    <section class="invitados contenedor seccion">

      <h2>Nuestros invitados</h2>
      <ul class="lista-invitados clearfix">
         <li>
           <div class="invitado">
             <img src="img/invitado1.jpg" alt="imagen invitado">
             <p>Rafael Bautista</p>
           </div>
         </li>
         <li>
          <div class="invitado">
            <img src="img/invitado2.jpg" alt="imagen invitado">
            <p>Shari Herrera</p>
          </div>
        </li>
        <li>
          <div class="invitado">
            <img src="img/invitado3.jpg" alt="imagen invitado">
            <p>Gregorio Sanchez</p>
          </div>
        </li>
        <li>
          <div class="invitado">
            <img src="img/invitado4.jpg" alt="imagen invitado">
            <p>Susana Rivera</p>
          </div>
        </li>
        <li>
          <div class="invitado">
            <img src="img/invitado5.jpg" alt="imagen invitado">
            <p>Harold Garcia</p>
          </div>
        </li>
        <li>
          <div class="invitado">
            <img src="img/invitado6.jpg" alt="imagen invitado">
            <p>Susan Sanchez</p>
          </div>
        </li>

      </ul>

    </section> <!--.Invitados-->

    <div class="contador parallax">

      <div class="contenedor">
        <ul class="resumen-evento clearfix">
          <li><p class="numero">6</p>Invitados</li>
          <li><p class="numero">15</p>Talleres</li>
          <li><p class="numero">3</p>Dias</li>
          <li><p class="numero">9</p>Conferencias</li>


        </ul>
      </div>
    </div>

    <section class="precios seccion">
     <h2>Precios</h2>
     <div class="contenedor">
       <ul class="lista-precios  clearfix">
         <li>
              <div class="tabla-precio">
                 <h3>Pase por dia</h3>
                 <p class="numero">$30</p>
                 <ul>
                   <li>Bocadillo gratis</li>
                   <li>Rodas las conferencias</li>
                   <li>Todos los talleres</li>
                 </ul>
                <a href="#" class="button hollow">Comprar</a>
              </div>
         </li>
         <li>
          <div class="tabla-precio">
             <h3>Todos los dias</h3>
             <p class="numero">$50</p>

             <ul>
               <li>Bocadillo gratis</li>
               <li>Rodas las conferencias</li>
               <li>Todos los talleres</li>
             </ul>
            <a href="#" class="button hollow">Comprar</a>

          </div>
     </li>
        <li>
           <div class="tabla-precio">
           <h3>Pase por 2 días</h3>
           <p class="numero">$45</p>

            <ul>
             <li>Bocadillo gratis</li>
             <li>Rodas las conferencias</li>
             <li>Todos los talleres</li>
            </ul>
           <a href="#" class="button hollow">Comprar</a>
           </div>
       </li>

       </ul>

     </div>
    </section>


    <div id="mapa" class="mapa"></div>


    <section class="seccion">
      <h2>Testimoniales</h2>
       <div class="testimoniales contenedor clearfix">


        <div class="testimonial">
           <blockquote>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus rem quasi earum optio quisquam odit dolorum libero a ipsum ipsa magni iure, culpa inventore consectetur quidem eos iste dolor voluptatibus.</p>

             <footer class="info-testimonial clearfix">
               <img src="img/testimonial.jpg" alt="imagen testimonial">
               <cite>Oswaldo Aponte Escobedo<span>Diseñador en @prisma</span></cite>

             </footer>

           </blockquote>
        </div> <!--.testimonial-->

        <div class="testimonial">
          <blockquote>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus rem quasi earum optio quisquam odit dolorum libero a ipsum ipsa magni iure, culpa inventore consectetur quidem eos iste dolor voluptatibus.</p>

            <footer class="info-testimonial clearfix">
              <img src="img/testimonial.jpg" alt="imagen testimonial">
              <cite>Oswaldo Aponte Escobedo<span>Diseñador en @prisma</span></cite>

            </footer>

          </blockquote>
        </div> <!--.testimonial-->

        <div class="testimonial">
           <blockquote>
             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus rem quasi earum optio quisquam odit dolorum libero a ipsum ipsa magni iure, culpa inventore consectetur quidem eos iste dolor voluptatibus.</p>

             <footer class="info-testimonial clearfix">

               <img src="img/testimonial.jpg" alt="imagen testimonial">
               <cite>Oswaldo Aponte Escobedo<span>Diseñador en @prisma</span></cite>

             </footer>

            </blockquote>
         </div> <!--.testimonial-->
      </div>

    </section>


    <div class="newsletter parallax">
        <div class="contenido  contenedor">
            <p>Registrate al newsletter:</p>
            <h3>gdlwebcamp</h3>
            <a href="#" class="button transparente">Registro</a>
        </div> <!--.contenido-->
    </div> <!--newsletter-->


    <section class="seccion">
      <h2>Faltan</h2>
       <div class="cuenta-regresiva contenedor">
        <ul class="clearfix">

         <li><p class="numero">80</p>dias</li>
         <li><p class="numero">15</p>horas</li>
         <li><p class="numero">5</p>minutos</li>
         <li><p class="numero">30</p>segundos</li>

        </ul>
       </div>

    </section>

    <footer class="site-footer">
      <div class="contenedor clearfix">

        <div class="footer-informacion">
            <h3>Sobre <span>GDLWEBCAMP</span></h3>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse ducimus quam ea hic illum ab atque molestiae officia nobis earum. Iusto minus nam quia eveniet, nostrum recusandae assumenda ab. Eaque?</p>

        </div>

        <div class="ultimos-tweets">
            <h3>Ultimos <span>tweets</span></h3>

            <ul>
              <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus fugit dolore alias rerum deleniti inventore sint.</li>
              <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus fugit dolore alias rerum deleniti inventore sint.</li>
              <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus fugit dolore alias rerum deleniti inventore sint.</li>
            </ul>


          </div>

          <div class="menu">
              <h3>Redes <span>sociales</span></h3>
              <nav class="redes-sociales">
                  <a href="#"><i class="fab fa-facebook-f"></i></a>
                  <a href="#"><i class="fab fa-twitter"></i></a>
                  <a href="#"><i class="fab fa-pinterest-p"></i></a>
                  <a href="#"><i class="fab fa-youtube"></i></a>
                  <a href="#"><i class="fab fa-instagram"></i></a>
               </nav>
            </div>

      </div>

     <p class="copyright">Todos los derechos Reservados GDLWEBCAMP2 2016.</p>

    </footer>


  <script src="js/vendor/modernizr-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
  <script src="js/plugins.js"></script>
  <script src="js/main.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBFQMoG7IMnE6c4vw_fUfjU1G0ts4rHzq8&callback=initMap"
  async defer></script>


  <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
  <script>
    window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
    ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
  </script>
  <script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>

</html>

## main.css
/*! HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

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

body {
    background-color: #f2f2f2;
    font-family: 'PT Sans', sans-serif;
}

/** Globales **/

.contenedor {
    width: 98%;
    margin: 0 auto;
}

@media only screen and (min-width:480px) {
    .contenedor {
        width: 95%
    }
}

@media only screen and (min-width:768px) {
    .contenedor {
        width: 90%
    }
}

@media only screen and (min-width:922px) {
    .contenedor {
        width: 90%;
        max-width: 1100px;
    }
}

.seccion {
    padding: 30px 0;
}

.seccion p {
    font-size: 1.2em;
    text-align: center;

}

h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 2.4em;
    text-transform: uppercase;
    text-align: center;
}

h2::after {
    content: '';
    margin: 0 auto;
    background-image: url(../img/separador.png);
    height: 30px;
    width: 100px;
    display: block;
}

h3 {
    font-size: 1.8em;
    color: #fe4918;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
}

.button {
    background-color: #fe4918;
    padding: 10px 40px;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: bold;
    font-family: 'Oswald', sans-serif;
    text-decoration: none;
    font-size: 1em;
    margin-top: 20px;
    display: inline-block;
    transition: all .3s ease;
    border: 2px solid #fe4918;
}

.button.hollow {
    background-color: #ffffff;
    color: #fe4918;
}
.button.hollow:hover {
     background-color: #fe4918;
     color: #ffffff;
}

.button.transparente {
    background-color: transparent;
    border-color:2px solid #ffffff;
}

.button.transparente:hover {
    border: 2px solid #fe4918;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.button:hover {
    background-color: #e33000;
}

.float-right {
    float: right;
}

/** Header **/

div.hero {
    background-image: url(../img/encabezado.jpg);
    height: 100vh;
    background-position: top center;
    background-size: cover;
}

div.contenido-header {
    padding-top: 40px;
}

@media only screen and (min-width: 768) {
    div.contenido-header {
        padding-top: 10px;
    }

}

nav.redes-sociales {
    text-align: center
}


nav.redes-sociales a{
    color: #ffffff;
    font-size: 2em;
    margin-right: 20px;
}

nav.redes-sociales a:last-child {
    margin-right: 0;
}

div.informacion-evento {
    text-align: center;
    color: #ffffff;
}

@media only screen and (min-width: 768px){
    div.informacion-evento {
        width: 70%;
        margin:0 auto;
        margin-top: 50px;
    }
}

div.informacion-evento p {
    margin: 0;
    display: inline;
    font-size: 20px;
    text-transform: uppercase;
}

div.informacion-evento p i {
    color: #fe4918;
    font-size: 2rem;
    margin-right: 5px;
}

p.fecha {
    float: left;

}

p.ciudad {
    float: right;
    text-align: right;

}

h1.nombre-sitio {
    font-family: 'Open Sans', sans-serif;
}

p.slogan {
    text-transform:none!important;
}

p.slogan span {
    font-weight: bold;
}


@media only screen and (min-width: 768px) {
    h1.nombre-sitio {
    font-size: 9.5vw;
    margin: 0;
    line-height: 1;
}

/** Barra **/

div.barra {
    background-color: #353535;
    padding: 20px 0;
}

div.logo {
    width: 80%;
    float: left;
}

div.logo img {
    width: 100%;
}

@media only screen and (min-width:768px) {
    div.logo {
        width: 33%;

    }
}

/** Nav Principal **/

nav.navegacion-principal {
    display: none;
}

nav.navegacion-principal a {
    font-family: 'Oswald', sans-serif;
    color: #ffffff;
    font-size: 1.3em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all .3s ease;
    width: 100%;
    display: block;
    text-align: center;
}

nav.navegacion-principal a:hover {
    background-color: #fe4918;
}

nav.navegacion-principal a:last-child {
    border: 2px solid #fe4918;
    color: #fe4918;
}

nav.navegacion-principal a:last-child:hover {
    color: #ffffff;
}

@media only screen and (min-width:768px) {
    nav.navegacion-principal {
        width: 67%;
        float: right;
        text-align: right;
        display: block;
    }

    nav.navegacion-principal a {
        margin-right: 10px;
        padding: 10px 10px;
        display: inline-block;
        width: auto;
        display: inline-block;
        text-align: center;
        margin: 0 10px 0 0;
    }
}

/** Menu Movil **/

div.menu-movil {
    width: 60px;
    display: block;
    float: right;
    text-align: right;
    margin-top: 12px;
}

div.menu-movil:hover {
    cursor: pointer;
}

@media only screen and (min-width:768px) {
    div.menu-movil {
        display: none;
    }
}

div.menu-movil span {
    height: 8px;
    margin-bottom: 6px;
    background-color: white;
    display: block;
}

/** TALLERES **/

section.programa {
    position: relative;
}

div.contenedor-video {
    max-width: 100%;
    overflow-x: hidden;
}

div.contenido-programa {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

div.programa-evento {
    background-color: rgba(255, 255, 255, .8);
    padding: 15px;
    margin-top: 80px;
}

@media only screen and (min-width:768px) {
    div.programa-evento {
        width: 70%;
    }
}

@media only screen and (min-width:992px) {
    div.programa-evento {
        width: 50%;
    }
}

nav.menu-programa {
    width: 100%;
    border-bottom: 1px solid #fe4918;
    padding-bottom: 10px;
}

@media only screen and (min-width:768px)  {
    nav.menu-programa {
        display: table;
    }
}

nav.menu-programa a {
    display: block;
    text-align: center;
    color: #000000;
    text-decoration: none;
    font-family: 'Oswald', sans-serif;
    margin-bottom: 10px;
    font-size: 1.2em;
}

@media only screen and (min-width:768px) {
    nav.menu-programa a {
        display: table-cell;
    }
}

nav.menu-programa a i {
    color: #fe4918;
    font-size: 1.6em;
    margin-right: 10px;
}

/** Detalle Evento **/

div.detalle-evento {
    margin-top: 20px;
    border-bottom: 1px solid black;
    padding: 0 20px;
}

div.detalle-evento:nth-child(2) {
    border: none;
}

div.detalle-evento p {
    margin-bottom: 20px;
    font-size: 20px;
}

div.detalle-evento p i {
    color: #fe4918;
    margin-right: 5px;
}

/** Invitados **/

ul.lista-invitados li {
    padding: 10px;
    float: left;
}

@media only screen and (min-width:480px) {
    ul.lista-invitados li {
      width: 50%;
    }
}

@media only screen and (min-width:768px) {
    ul.lista-invitados li {
      width: 33.3%;
    }
}

div.invitado {
    position: relative;
    overflow: hidden;
}

div.invitado img{
    max-width: 100%;
    filter: gray;
    -webkit-filter: grayscale(1);
    -webkit-transition: all .5s ease-in-out;

}

div.invitado:hover img {
    -webkit-filter: grayscale(0);
    -webkit-transform: scale(1.1);
}


div.invitado p {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 15px 10px;
    margin: 0;
    background-color: rgba(0, 0, 0, 0.55);
    width: 100%;
    text-align: left;
    font-family: 'Oswald', sans-serif;
    color: #fe4918;
    text-transform: uppercase;
    -webkit-transition: all .5s ease-in-out;
}

div.invitado:hover p {
    bottom: -80px;
    opacity: 0;
}

/** Contador **/

.parallax::before {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    -webkit-filter: brightness(.8);
    filter: brightness(.8);
}

div.contador {
    position: relative;
    height: auto;
}

div.contador::before {
    background-image: url(../img/bg-resumen.jpg);
    content: '';
}

ul.resumen-evento  {
    position: relative;
    padding: 120px 0;
}

ul.resumen-evento li {
    width: 50%;
    float: left;
    text-align: center;
    color: #ffffff;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
}

@media only screen and (min-width:768px) {
    ul.resumen-evento li {
        width: 25%;
    }
}

p.numero {
    color: #fe4918;
    font-size: 4em;
    display: block;
    margin: 0 0 10px 0;
    font-family: 'Oswald', sans-serif;
}

/** Tabla de precios **/

ul.lista-precios > li {
    padding: 10px;
}

@media only screen and (min-width:768px) {
    ul.lista-precios > li {
        float: left;
        width: 33.3%;
    }
}

div.tabla-precio {
    border: 1px solid #e1e1e1;
    background-color: #ffffff;
    padding: 40px 0;
    text-align: center;
    transition: all .3s ease;
}

div.tabla-precio:hover {
    transform: scale(1.1);
    border: 1px solid #fe4918;
    box-shadow: 0px 0px 50px #666;
}

div.tabla-precio ul li {
    font-family: 'PT Sans',sans-serif;
    font-size: 14px;
    margin-bottom: 20px;
    text-transform: uppercase;
    color: #868686;
    line-height: 26px;

}

div.tabla-precio ul li:before {
    font-family:'Font Awesome 5 free';
    font-weight: 900;
    display: inline-block;
    vertical-align: top;
    padding: 0 5px;
    font-size: 20px;
    color: green;
    -webkit-font-smoothing: antialiased;
    content: '\f00c';
}

div.tabla-precio h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    text-transform: uppercase;
}

div.tabla-precio p.numero {
    color: #000000;
    margin-top: 20px 0;
}


/** MAPA **/

div.mapa {
    height: 420px;
    background-color: green;
}


/** Testimoniales **/

div.testimoniales {
    padding-bottom: 20px;
}

div.testimonial {
    padding: 10px;
}

@media only screen and (min-width:768px) {
    div.testimonial {
        float: left;
        width: 33.3%;
    }
}

blockquote {
    background-color: #ffffff;
    border: 1px solid  #a8a8a8;
    position: relative;
    margin: 0 0 10px 0;
    padding-bottom: 20px;
}

blockquote p {
    text-align: left!important;
    font-size: 1em!important;
    font-family: 'PT Sans', sans-serif;
    padding: 0 20px 0 65px;
}

blockquote p::before {
    content: '\201c';
    position: absolute;
    left: 13px;
    top: 8px;
    font-size: 8rem;
    margin: 0;
    padding: 0;
    line-height: 1;
    color: #fe4918
}

footer.info-testimonial {
    padding: 0px;
}

footer.info-testimonial img {
    float: left;
    width: 20%;
    border-radius: 50%;
    margin-left: 20px;
}

footer.info-testimonial cite {
    text-align: left;
    color: #fe4918;
    text-transform: uppercase;
    font-size: 12px;
    padding-top: 20px;
    width: 66.6%;
    float: right;
    font-weight: bold;
    font-style: normal;
}

footer.info-testimonial cite span {
    color: #000000;
    display: block;
    text-transform: none!important;
    margin-top: 5px;
}

/** Newletter **/

div.newsletter {
    position: relative;
    height: auto;
}

div.newsletter::before {
    background-image: url(../img/bg-newsletter.jpg);
    content: '';
}

div.newsletter .contenido {
    padding: 100px 0;
    color: #ffffff;
    text-align: center;
    position: relative;
}

div.newsletter .contenido p {
    font-size: 1.2em;
    text-transform: lowercase;
}

div.newsletter .contenido h3 {
    color: #ffffff;
    text-transform: uppercase;
    font-size: 7vw;
    font-family: 'PT Sans', sans-serif;
}


/** Cuenta regresiva **/

div.cuenta-regresiva ul li {
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    font-size: 1.6rem;
    text-align: center;
}

@media only screen and (min-width:768px) {
    div.cuenta-regresiva ul li {
        width: 25%;
        float: left;

    }
}

/** Footer **/

footer.site-footer {
    background-color: #353535;
    padding-top: 30px;
    margin-top: 20px;
}

footer .contenedor > div {
    color: #ffffff;
    padding: 0px 20px;
    font-size: 12px;
}

@media only screen and (min-width:768px) {
    footer .contenedor > div {
        width: 33.3%;
        float: left;
    }
}

footer h3 {
    color: #ffffff;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    margin-top: 20px;
}

footer h3 span  {
    color: #fe4918;
}

footer .ultimos-tweets li {
    margin-bottom: 10px;
}

footer nav.redes-sociales {
    text-align: left;
}

p.copyright {
    background-color: #2e2e2e;
    color: #ffffff;
    padding-top: 10px;
    padding: 10px 0;
    margin: 20px 0 0 0;
    text-align: center;
}

/*** INTERNAS **/
/* Registro */

form.registro h3 {
    text-align: center;
    text-transform: uppercase;
    margin: 20px 0 0 0;
}

form.registro label {
    margin-bottom: 5px;
    font-weight: bold;
}

h4 {
    text-align: center;
    text-transform: uppercase;
    border-bottom: 2px solid #fe4918;
    padding-bottom: 10px;
    font-size: 1.2em;
}

div.caja {
    background-color: #ffffff;
    border: 1px solid #e1e1e1;
    padding: 10px;
    margin: 10px;
}

div.campo {
    padding: 20px;
}

@media only screen and (min-width: 768px) {
    div.campo {
        float: left;
        width: 33.3%;
    }
}

div.paquetes .tabla-precio:hover {
    transform: none;
    box-shadow: none;
}

div.paquetes .tabla-precio input {
    clear: both;
    width: 100px;
    margin: 10px auto 0 auto;
    display: block;
}

.contenido-dia {
    padding: 20px;
    display: none;
}

@media only screen and (min-width: 768px) {
.contenido-dia > div {
        float: left;
        width: 33.3%;
   }
}

.contenido-dia > div p {
    text-align: left;
}

.contenido-dia > div label {
    display: block;
    margin-bottom: 10px;
}

.contenido-dia > div input {
    margin-right: 10px;
}

.contenido-dia > div label time {
    color: #fe4918;
    font-weight: bold;
}

/* Resumen Registro */

.resumen p {
    font-size: 1.2em;
    text-transform: uppercase;
}

.resumen .extras {
    float: left;
    width: 50%;
    padding: 30px;
}

.extras .orden {
    text-align: left;
    margin-bottom: 10px;
}

div.extras div.orden input {
    margin: 10px 0 0 0;
}

div.resumen div.total {
    float: right;
    width: 50%;
    padding: 30px;
}

div.resumen input {
    display: block;
    margin: 10px auto;
}

#lista-productos {
    background-color: #e1e1e1;
    padding: 20px;
    display: none;
}

#suma-total {
    text-align: center;
    font-size: 2em;
    color: #fe4918;
}

#error {
    clear: both;
    padding: 20px;
    text-align: center;
    display: none;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster */
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

## main.js
var api = 'AIzaSyBFQMoG7IMnE6c4vw_fUfjU1G0ts4rHzq8';

      function initMap() {
    var latLng = {
        lat: 28.4219985,
        lng:-100.7689874
    };

    var map = new google.maps.Map(document.getElementById('mapa'), {
          'center': latLng,
          'zoom': 15,
          'mapTypeId': google.maps.MapTypeId.ROADMAP
        });

    var contenido = '<h2>GDLWEBCAMP</h2>'+
                    '<p>Del 10 al 12 de Diciembre</p>'+
                    '<p>Visitanos!</p>'

    var informacion = new google.maps.InfoWindow({
        content: contenido

    });

    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        title: 'Ballistic Org'
    });

    marker.addListener('click', function(){
        informacion.open(map, marker);
    });
      }

(function() {
    "use strict";

    var regalo = document.getElementById('regalo');

    document.addEventListener('DOMContentLoaded', function(){

        // Datos Usuarios

        var nombre = document.getElementById('nombre');
        var apellido = document.getElementById('apellido');
        var email = document.getElementById('email');

        // Campos pases

        var pase_dia = document.getElementById('pase_dia');
        var pase_dosdias = document.getElementById('pase_dosdias');
        var pase_completo = document.getElementById('pase_completo');

        // Botones y divs

        var calcular = document.getElementById('calcular');
        var errorDiv = document.getElementById('error');
        var botonRegistro = document.getElementById('btnRegistro');
        var lista_productos = document.getElementById('lista-productos');
        var suma = document.getElementById('suma-total');

        // Extras

        var camisas = document.getElementById('camisa_evento');
        var etiquetas = document.getElementById('etiquetas');


        calcular.addEventListener('click', calcularMontos);

        pase_dia.addEventListener('blur', mostrarDias);
        pase_dosdias.addEventListener('blur', mostrarDias);
        pase_completo.addEventListener('blur', mostrarDias);

        nombre.addEventListener('blur', validarCampos);
        apellido.addEventListener('blur', validarCampos);
        email.addEventListener('blur', validarCampos);
        email.addEventListener('blur', validarEmail);


       function validarCampos() {
           if(this.value == '') {
               errorDiv.style.display = 'block';
               errorDiv.innerHTML = "Este campo es obligatorio";
               this.style.border = '1px solid red';
               errorDiv.style.border = '1px solid red';
           } else {
               errorDiv.style.display = 'none';
               this.style.border = '1px solid #cccccc';
           }
       }

       function validarEmail() {
           if(this.value.indexOf("@") > -1) {
               errorDiv.style.display = 'none';
               this.style.border = '1px solid #cccccc';
           } else {
               errorDiv.style.display = 'block';
               errorDiv.innerHTML = "Inserte un email valido";
               this.style.border = '1px solid red';
               errorDiv.style.border = '1px solid red';
           }
       }


        function calcularMontos(event){
            event.preventDefault();
            if(regalo.value === ''){
                alert("Debes elegir un regalo.");
                regalo.focus();
            } else {
               var boletosDia = parseInt(pase_dia.value, 10) || 0,
                   boletos2Dias = parseInt(pase_dosdias.value, 10) || 0,
                   boletoCompleto = parseInt(pase_completo.value, 10) || 0,
                   cantCamisas = parseInt(camisas.value, 10) || 0,
                   cantEtiquetas = parseInt(etiquetas.value, 10) || 0;

               var totalPagar = (boletosDia * 30) + (boletos2Dias * 45) + (boletoCompleto * 50) +
               ((cantCamisas * 10) * .93) + (cantEtiquetas * 2);

               var listadoProductos = [];

               if(boletosDia >= 1){
                   listadoProductos.push(boletosDia + ' Pases por día');
               }

               if(boletos2Dias >= 1){
                   listadoProductos.push(boletos2Dias + ' Pases por 2 dias');
               }

                if(boletoCompleto >= 1){
                    listadoProductos.push(boletoCompleto + ' Pases completo');
                }

                if(cantCamisas >= 1){
                    listadoProductos.push(cantCamisas + ' Camisas');
                }

                if(cantEtiquetas >= 1){
                    listadoProductos.push(cantEtiquetas + ' Etiquetas');
                }

                lista_productos.style.display = "block";

                lista_productos.innerHTML = '';
                for (var i = 0; i< listadoProductos.length; i++){
                    lista_productos.innerHTML += listadoProductos[i] + '<br/>';
                }

                suma.innerHTML = "$ " + totalPagar.toFixed(2);


            }
        }

        function mostrarDias(){
            var boletosDia = parseInt(pase_dia.value, 10) || 0,
                boletos2Dias = parseInt(pase_dosdias.value, 10) || 0,
                boletoCompleto = parseInt(pase_completo.value, 10) || 0;

            var diasElegidos = [];

            if(boletosDia > 0){
                diasElegidos.push('viernes');
            }
            if(boletos2Dias>0){
                diasElegidos.push('viernes', 'sabado');
            }
            if(boletoCompleto>0){
                diasElegidos.push('viernes', 'sabado', 'domingo');
            }
            for(var i = 0; i < diasElegidos.length; i++) {
                document.getElementById(diasElegidos[i]).style.display = 'block';
            }

        }


    }); // DOM CONTENT LOADED


})();
	<!doctype html>
	<html class="no-js" lang="">

	<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>GDLWEBCAMP</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<link rel="manifest" href="site.webmanifest">
	<link rel="apple-touch-icon" href="icon.png">
	<!-- Place favicon.ico in the root directory -->

	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="css/fontawesome-all.min.css">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans\|Oswald\|PT+Sans" rel="stylesheet">


	</head>

	<body>
	<!--[if lte IE 9]>
	<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
	<![endif]-->

	<!-- Add your site or application content here -->

	<header class="site-header">
	<div class="hero">
	<div class="contenido-header">
	<nav class="redes-sociales">
	<a href="#"><i class="fab fa-facebook-f"></i></a>
	<a href="#"><i class="fab fa-twitter"></i></a>
	<a href="#"><i class="fab fa-pinterest-p"></i></a>
	<a href="#"><i class="fab fa-youtube"></i></a>
	<a href="#"><i class="fab fa-instagram"></i></a>
	</nav>
	<div class="informacion-evento">
	<div class="clearfix">
	<p class="fecha"><i class="fas fa-calendar-alt"></i>10-12 Dic</p>
	<p class="ciudad"><i class="fas fa-map-marker-alt"></i>Guadalajara, Mx</p>
	</div>
	<h1 class="nombre-sitio">GDLWEBCAMP</h1>
	<p class="slogan">La mejor conferencia de <span>diseño web</span></p>
	</div><!--.informacion evento-->
	</div>
	</div><!--.hero-->
	</header>

	<div class="barra">
	<div class="contenedor clearfix">
	<div class="logo">
	<img src="img/logo.svg" alt="logo gdlwebcamp">
	</div>
	<div class="menu-movil">
	<span></span>
	<span></span>
	<span></span>
	</div>

	<nav class="navegacion-principal">
	<a href="#">Conferencia</a>
	<a href="#">Calendario</a>
	<a href="#">Invitados</a>
	<a href="registro.html">Reservaciones</a>
	</nav>
	</div> <!--.contenedor-->
	</div> <!--.barra-->

	<section class="seccion contenedor">
	<h2>La mejor conferencia de diseño web en español</h2>
	<p>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea asperiores molestias ipsum consequuntur optio rerum voluptas unde. Explicabo quia quasi magni praesentium, ratione recusandae qui perspiciatis, soluta temporibus porro laudantium.
	</p>
	</section> <!--Seccion-->

	<section class="programa">
	<div class="contenedor-video">
	<video autoplay loop poster="img/bg-talleres.jpg">
	<source src="img/video/video.mp4" type="video/mp4">
	<source src="img/video/video.webmm" type="video/webm">
	<source src="img/video/video.ogv" type="video/ogg">
	</video>

	</div> <!--.contenedor-video-->
	<div class="contenido-programa">
	<div class="contenedor">
	<div class="programa-evento">
	<h2>Programa del Evento</h2>
	<nav class="menu-programa">
	<a href="#"><i class="fas fa-code"></i>Talleres</a>
	<a href="#"><i class="fas fa-comment"></i>Conferecias</a>
	<a href="#"><i class="fas fa-university"></i>Seminarios</a>
	</nav>

	<div id="talleres" class="info-curso ocultar clearfix">
	<div class="detalle-evento">
	<h3>HTML5, CCS3 y JavaScript</h3>
	<p><i class="far fa-clock"></i>16:00 hrs</p>
	<p><i class="fas fa-calendar-alt"></i>10 de Dic</p>
	<p><i class="fas fa-user"></i>Juan Pablo de la torre</p>
	</div>

	<div class="detalle-evento">
	<h3>Responsive Web Dising</h3>
	<p><i class="far fa-clock"></i>20:00 hrs</p>
	<p><i class="fas fa-calendar-alt"></i>10 de Dic</p>
	<p><i class="fas fa-user"></i>Juan Pablo de la torre</p>
	</div>
	<a href="#" class="button float-right">Ver todos</a>


	</div> <!--#talleres-->
	</div> <!--programa evento-->
	</div> <!--.contenedor-->
	</div> <!--.contenido-programa-->
	</section><!--.programa-->

	<section class="invitados contenedor seccion">

	<h2>Nuestros invitados</h2>
	<ul class="lista-invitados clearfix">
	<li>
	<div class="invitado">
	<img src="img/invitado1.jpg" alt="imagen invitado">
	<p>Rafael Bautista</p>
	</div>
	</li>
	<li>
	<div class="invitado">
	<img src="img/invitado2.jpg" alt="imagen invitado">
	<p>Shari Herrera</p>
	</div>
	</li>
	<li>
	<div class="invitado">
	<img src="img/invitado3.jpg" alt="imagen invitado">
	<p>Gregorio Sanchez</p>
	</div>
	</li>
	<li>
	<div class="invitado">
	<img src="img/invitado4.jpg" alt="imagen invitado">
	<p>Susana Rivera</p>
	</div>
	</li>
	<li>
	<div class="invitado">
	<img src="img/invitado5.jpg" alt="imagen invitado">
	<p>Harold Garcia</p>
	</div>
	</li>
	<li>
	<div class="invitado">
	<img src="img/invitado6.jpg" alt="imagen invitado">
	<p>Susan Sanchez</p>
	</div>
	</li>

	</ul>

	</section> <!--.Invitados-->

	<div class="contador parallax">

	<div class="contenedor">
	<ul class="resumen-evento clearfix">
	<li><p class="numero">6</p>Invitados</li>
	<li><p class="numero">15</p>Talleres</li>
	<li><p class="numero">3</p>Dias</li>
	<li><p class="numero">9</p>Conferencias</li>


	</ul>
	</div>
	</div>

	<section class="precios seccion">
	<h2>Precios</h2>
	<div class="contenedor">
	<ul class="lista-precios clearfix">
	<li>
	<div class="tabla-precio">
	<h3>Pase por dia</h3>
	<p class="numero">$30</p>
	<ul>
	<li>Bocadillo gratis</li>
	<li>Rodas las conferencias</li>
	<li>Todos los talleres</li>
	</ul>
	<a href="#" class="button hollow">Comprar</a>
	</div>
	</li>
	<li>
	<div class="tabla-precio">
	<h3>Todos los dias</h3>
	<p class="numero">$50</p>

	<ul>
	<li>Bocadillo gratis</li>
	<li>Rodas las conferencias</li>
	<li>Todos los talleres</li>
	</ul>
	<a href="#" class="button hollow">Comprar</a>

	</div>
	</li>
	<li>
	<div class="tabla-precio">
	<h3>Pase por 2 días</h3>
	<p class="numero">$45</p>

	<ul>
	<li>Bocadillo gratis</li>
	<li>Rodas las conferencias</li>
	<li>Todos los talleres</li>
	</ul>
	<a href="#" class="button hollow">Comprar</a>
	</div>
	</li>

	</ul>

	</div>
	</section>


	<div id="mapa" class="mapa"></div>



	<section class="seccion">
	<h2>Testimoniales</h2>
	<div class="testimoniales contenedor clearfix">


	<div class="testimonial">
	<blockquote>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus rem quasi earum optio quisquam odit dolorum libero a ipsum ipsa magni iure, culpa inventore consectetur quidem eos iste dolor voluptatibus.</p>

	<footer class="info-testimonial clearfix">
	<img src="img/testimonial.jpg" alt="imagen testimonial">
	<cite>Oswaldo Aponte Escobedo<span>Diseñador en @prisma</span></cite>

	</footer>

	</blockquote>
	</div> <!--.testimonial-->

	<div class="testimonial">
	<blockquote>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus rem quasi earum optio quisquam odit dolorum libero a ipsum ipsa magni iure, culpa inventore consectetur quidem eos iste dolor voluptatibus.</p>

	<footer class="info-testimonial clearfix">
	<img src="img/testimonial.jpg" alt="imagen testimonial">
	<cite>Oswaldo Aponte Escobedo<span>Diseñador en @prisma</span></cite>

	</footer>

	</blockquote>
	</div> <!--.testimonial-->

	<div class="testimonial">
	<blockquote>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus rem quasi earum optio quisquam odit dolorum libero a ipsum ipsa magni iure, culpa inventore consectetur quidem eos iste dolor voluptatibus.</p>

	<footer class="info-testimonial clearfix">

	<img src="img/testimonial.jpg" alt="imagen testimonial">
	<cite>Oswaldo Aponte Escobedo<span>Diseñador en @prisma</span></cite>

	</footer>

	</blockquote>
	</div> <!--.testimonial-->
	</div>

	</section>


	<div class="newsletter parallax">
	<div class="contenido contenedor">
	<p>Registrate al newsletter:</p>
	<h3>gdlwebcamp</h3>
	<a href="#" class="button transparente">Registro</a>
	</div> <!--.contenido-->
	</div> <!--newsletter-->


	<section class="seccion">
	<h2>Faltan</h2>
	<div class="cuenta-regresiva contenedor">
	<ul class="clearfix">

	<li><p class="numero">80</p>dias</li>
	<li><p class="numero">15</p>horas</li>
	<li><p class="numero">5</p>minutos</li>
	<li><p class="numero">30</p>segundos</li>

	</ul>
	</div>

	</section>

	<footer class="site-footer">
	<div class="contenedor clearfix">

	<div class="footer-informacion">
	<h3>Sobre <span>GDLWEBCAMP</span></h3>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse ducimus quam ea hic illum ab atque molestiae officia nobis earum. Iusto minus nam quia eveniet, nostrum recusandae assumenda ab. Eaque?</p>

	</div>

	<div class="ultimos-tweets">
	<h3>Ultimos <span>tweets</span></h3>

	<ul>
	<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus fugit dolore alias rerum deleniti inventore sint.</li>
	<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus fugit dolore alias rerum deleniti inventore sint.</li>
	<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus fugit dolore alias rerum deleniti inventore sint.</li>
	</ul>


	</div>

	<div class="menu">
	<h3>Redes <span>sociales</span></h3>
	<nav class="redes-sociales">
	<a href="#"><i class="fab fa-facebook-f"></i></a>
	<a href="#"><i class="fab fa-twitter"></i></a>
	<a href="#"><i class="fab fa-pinterest-p"></i></a>
	<a href="#"><i class="fab fa-youtube"></i></a>
	<a href="#"><i class="fab fa-instagram"></i></a>
	</nav>
	</div>

	</div>

	<p class="copyright">Todos los derechos Reservados GDLWEBCAMP2 2016.</p>

	</footer>





	<script src="js/vendor/modernizr-3.6.0.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
	<script>window.jQuery \|\| document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
	<script src="js/plugins.js"></script>
	<script src="js/main.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBFQMoG7IMnE6c4vw_fUfjU1G0ts4rHzq8&callback=initMap"
	async defer></script>


	<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
	<script>
	window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
	ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
	</script>
	<script src="https://www.google-analytics.com/analytics.js" async defer></script>
	</body>

	</html>
	/! HTML5 Boilerplate v6.1.0 \| MIT License \| https://html5boilerplate.com/ /

	/*
	* What follows is the result of much research on cross-browser styling.
	* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
	* Kroc Camen, and the H5BP dev community and team.
	*/

	/* ==========================================================================
	Base styles: opinionated defaults
	========================================================================== */

	html {
	color: #222;
	font-size: 1em;
	line-height: 1.4;
	}

	/*
	* Remove text-shadow in selection highlight:
	* https://twitter.com/miketaylr/status/12228805301
	*
	* Vendor-prefixed and regular ::selection selectors cannot be combined:
	* https://stackoverflow.com/a/16982510/7133471
	*
	* Customize the background color to match your design.
	*/

	::-moz-selection {
	background: #b3d4fc;
	text-shadow: none;
	}

	::selection {
	background: #b3d4fc;
	text-shadow: none;
	}

	/*
	* A better looking default horizontal rule
	*/

	hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
	}

	/*
	* Remove the gap between audio, canvas, iframes,
	* images, videos and the bottom of their containers:
	* https://github.com/h5bp/html5-boilerplate/issues/440
	*/

	audio,
	canvas,
	iframe,
	img,
	svg,
	video {
	vertical-align: middle;
	}

	/*
	* Remove default fieldset styles.
	*/

	fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	}

	/*
	* Allow only vertical resizing of textareas.
	*/

	textarea {
	resize: vertical;
	}

	/* ==========================================================================
	Browser Upgrade Prompt
	========================================================================== */

	.browserupgrade {
	margin: 0.2em 0;
	background: #ccc;
	color: #000;
	padding: 0.2em 0;
	}

	/* ==========================================================================
	Author's custom styles
	========================================================================== */

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

	body {
	background-color: #f2f2f2;
	font-family: 'PT Sans', sans-serif;
	}

	/ Globales /

	.contenedor {
	width: 98%;
	margin: 0 auto;
	}

	@media only screen and (min-width:480px) {
	.contenedor {
	width: 95%
	}
	}

	@media only screen and (min-width:768px) {
	.contenedor {
	width: 90%
	}
	}

	@media only screen and (min-width:922px) {
	.contenedor {
	width: 90%;
	max-width: 1100px;
	}
	}

	.seccion {
	padding: 30px 0;
	}

	.seccion p {
	font-size: 1.2em;
	text-align: center;

	}

	h2 {
	font-family: 'Oswald', sans-serif;
	font-size: 2.4em;
	text-transform: uppercase;
	text-align: center;
	}

	h2::after {
	content: '';
	margin: 0 auto;
	background-image: url(../img/separador.png);
	height: 30px;
	width: 100px;
	display: block;
	}

	h3 {
	font-size: 1.8em;
	color: #fe4918;
	font-family: 'Open Sans', sans-serif;
	margin: 0;
	}

	.button {
	background-color: #fe4918;
	padding: 10px 40px;
	color: #ffffff;
	text-transform: uppercase;
	font-weight: bold;
	font-family: 'Oswald', sans-serif;
	text-decoration: none;
	font-size: 1em;
	margin-top: 20px;
	display: inline-block;
	transition: all .3s ease;
	border: 2px solid #fe4918;
	}

	.button.hollow {
	background-color: #ffffff;
	color: #fe4918;
	}
	.button.hollow:hover {
	background-color: #fe4918;
	color: #ffffff;
	}

	.button.transparente {
	background-color: transparent;
	border-color:2px solid #ffffff;
	}

	.button.transparente:hover {
	border: 2px solid #fe4918;
	}

	ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}

	.button:hover {
	background-color: #e33000;
	}

	.float-right {
	float: right;
	}

	/ Header /

	div.hero {
	background-image: url(../img/encabezado.jpg);
	height: 100vh;
	background-position: top center;
	background-size: cover;
	}

	div.contenido-header {
	padding-top: 40px;
	}

	@media only screen and (min-width: 768) {
	div.contenido-header {
	padding-top: 10px;
	}

	}

	nav.redes-sociales {
	text-align: center
	}


	nav.redes-sociales a{
	color: #ffffff;
	font-size: 2em;
	margin-right: 20px;
	}

	nav.redes-sociales a:last-child {
	margin-right: 0;
	}

	div.informacion-evento {
	text-align: center;
	color: #ffffff;
	}

	@media only screen and (min-width: 768px){
	div.informacion-evento {
	width: 70%;
	margin:0 auto;
	margin-top: 50px;
	}
	}

	div.informacion-evento p {
	margin: 0;
	display: inline;
	font-size: 20px;
	text-transform: uppercase;
	}

	div.informacion-evento p i {
	color: #fe4918;
	font-size: 2rem;
	margin-right: 5px;
	}

	p.fecha {
	float: left;

	}

	p.ciudad {
	float: right;
	text-align: right;

	}

	h1.nombre-sitio {
	font-family: 'Open Sans', sans-serif;
	}

	p.slogan {
	text-transform:none!important;
	}

	p.slogan span {
	font-weight: bold;
	}


	@media only screen and (min-width: 768px) {
	h1.nombre-sitio {
	font-size: 9.5vw;
	margin: 0;
	line-height: 1;
	}

	/ Barra /

	div.barra {
	background-color: #353535;
	padding: 20px 0;
	}

	div.logo {
	width: 80%;
	float: left;
	}

	div.logo img {
	width: 100%;
	}

	@media only screen and (min-width:768px) {
	div.logo {
	width: 33%;

	}
	}

	/ Nav Principal /

	nav.navegacion-principal {
	display: none;
	}

	nav.navegacion-principal a {
	font-family: 'Oswald', sans-serif;
	color: #ffffff;
	font-size: 1.3em;
	text-transform: uppercase;
	text-decoration: none;
	transition: all .3s ease;
	width: 100%;
	display: block;
	text-align: center;
	}

	nav.navegacion-principal a:hover {
	background-color: #fe4918;
	}

	nav.navegacion-principal a:last-child {
	border: 2px solid #fe4918;
	color: #fe4918;
	}

	nav.navegacion-principal a:last-child:hover {
	color: #ffffff;
	}

	@media only screen and (min-width:768px) {
	nav.navegacion-principal {
	width: 67%;
	float: right;
	text-align: right;
	display: block;
	}

	nav.navegacion-principal a {
	margin-right: 10px;
	padding: 10px 10px;
	display: inline-block;
	width: auto;
	display: inline-block;
	text-align: center;
	margin: 0 10px 0 0;
	}
	}

	/ Menu Movil /

	div.menu-movil {
	width: 60px;
	display: block;
	float: right;
	text-align: right;
	margin-top: 12px;
	}

	div.menu-movil:hover {
	cursor: pointer;
	}

	@media only screen and (min-width:768px) {
	div.menu-movil {
	display: none;
	}
	}

	div.menu-movil span {
	height: 8px;
	margin-bottom: 6px;
	background-color: white;
	display: block;
	}

	/ TALLERES /

	section.programa {
	position: relative;
	}

	div.contenedor-video {
	max-width: 100%;
	overflow-x: hidden;
	}

	div.contenido-programa {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	}

	div.programa-evento {
	background-color: rgba(255, 255, 255, .8);
	padding: 15px;
	margin-top: 80px;
	}

	@media only screen and (min-width:768px) {
	div.programa-evento {
	width: 70%;
	}
	}

	@media only screen and (min-width:992px) {
	div.programa-evento {
	width: 50%;
	}
	}

	nav.menu-programa {
	width: 100%;
	border-bottom: 1px solid #fe4918;
	padding-bottom: 10px;
	}

	@media only screen and (min-width:768px) {
	nav.menu-programa {
	display: table;
	}
	}

	nav.menu-programa a {
	display: block;
	text-align: center;
	color: #000000;
	text-decoration: none;
	font-family: 'Oswald', sans-serif;
	margin-bottom: 10px;
	font-size: 1.2em;
	}

	@media only screen and (min-width:768px) {
	nav.menu-programa a {
	display: table-cell;
	}
	}

	nav.menu-programa a i {
	color: #fe4918;
	font-size: 1.6em;
	margin-right: 10px;
	}

	/ Detalle Evento /

	div.detalle-evento {
	margin-top: 20px;
	border-bottom: 1px solid black;
	padding: 0 20px;
	}

	div.detalle-evento:nth-child(2) {
	border: none;
	}

	div.detalle-evento p {
	margin-bottom: 20px;
	font-size: 20px;
	}

	div.detalle-evento p i {
	color: #fe4918;
	margin-right: 5px;
	}

	/ Invitados /

	ul.lista-invitados li {
	padding: 10px;
	float: left;
	}

	@media only screen and (min-width:480px) {
	ul.lista-invitados li {
	width: 50%;
	}
	}

	@media only screen and (min-width:768px) {
	ul.lista-invitados li {
	width: 33.3%;
	}
	}

	div.invitado {
	position: relative;
	overflow: hidden;
	}

	div.invitado img{
	max-width: 100%;
	filter: gray;
	-webkit-filter: grayscale(1);
	-webkit-transition: all .5s ease-in-out;

	}

	div.invitado:hover img {
	-webkit-filter: grayscale(0);
	-webkit-transform: scale(1.1);
	}


	div.invitado p {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 15px 10px;
	margin: 0;
	background-color: rgba(0, 0, 0, 0.55);
	width: 100%;
	text-align: left;
	font-family: 'Oswald', sans-serif;
	color: #fe4918;
	text-transform: uppercase;
	-webkit-transition: all .5s ease-in-out;
	}

	div.invitado:hover p {
	bottom: -80px;
	opacity: 0;
	}

	/ Contador /

	.parallax::before {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	-webkit-filter: brightness(.8);
	filter: brightness(.8);
	}

	div.contador {
	position: relative;
	height: auto;
	}

	div.contador::before {
	background-image: url(../img/bg-resumen.jpg);
	content: '';
	}

	ul.resumen-evento {
	position: relative;
	padding: 120px 0;
	}

	ul.resumen-evento li {
	width: 50%;
	float: left;
	text-align: center;
	color: #ffffff;
	text-transform: uppercase;
	font-family: 'Oswald', sans-serif;
	font-size: 24px;
	}

	@media only screen and (min-width:768px) {
	ul.resumen-evento li {
	width: 25%;
	}
	}

	p.numero {
	color: #fe4918;
	font-size: 4em;
	display: block;
	margin: 0 0 10px 0;
	font-family: 'Oswald', sans-serif;
	}

	/ Tabla de precios /

	ul.lista-precios > li {
	padding: 10px;
	}

	@media only screen and (min-width:768px) {
	ul.lista-precios > li {
	float: left;
	width: 33.3%;
	}
	}

	div.tabla-precio {
	border: 1px solid #e1e1e1;
	background-color: #ffffff;
	padding: 40px 0;
	text-align: center;
	transition: all .3s ease;
	}

	div.tabla-precio:hover {
	transform: scale(1.1);
	border: 1px solid #fe4918;
	box-shadow: 0px 0px 50px #666;
	}

	div.tabla-precio ul li {
	font-family: 'PT Sans',sans-serif;
	font-size: 14px;
	margin-bottom: 20px;
	text-transform: uppercase;
	color: #868686;
	line-height: 26px;

	}

	div.tabla-precio ul li:before {
	font-family:'Font Awesome 5 free';
	font-weight: 900;
	display: inline-block;
	vertical-align: top;
	padding: 0 5px;
	font-size: 20px;
	color: green;
	-webkit-font-smoothing: antialiased;
	content: '\f00c';
	}

	div.tabla-precio h3 {
	font-family: 'Oswald', sans-serif;
	font-size: 16px;
	text-transform: uppercase;
	}

	div.tabla-precio p.numero {
	color: #000000;
	margin-top: 20px 0;
	}



	/ MAPA /

	div.mapa {
	height: 420px;
	background-color: green;
	}


	/ Testimoniales /

	div.testimoniales {
	padding-bottom: 20px;
	}

	div.testimonial {
	padding: 10px;
	}

	@media only screen and (min-width:768px) {
	div.testimonial {
	float: left;
	width: 33.3%;
	}
	}

	blockquote {
	background-color: #ffffff;
	border: 1px solid #a8a8a8;
	position: relative;
	margin: 0 0 10px 0;
	padding-bottom: 20px;
	}

	blockquote p {
	text-align: left!important;
	font-size: 1em!important;
	font-family: 'PT Sans', sans-serif;
	padding: 0 20px 0 65px;
	}

	blockquote p::before {
	content: '\201c';
	position: absolute;
	left: 13px;
	top: 8px;
	font-size: 8rem;
	margin: 0;
	padding: 0;
	line-height: 1;
	color: #fe4918
	}

	footer.info-testimonial {
	padding: 0px;
	}

	footer.info-testimonial img {
	float: left;
	width: 20%;
	border-radius: 50%;
	margin-left: 20px;
	}

	footer.info-testimonial cite {
	text-align: left;
	color: #fe4918;
	text-transform: uppercase;
	font-size: 12px;
	padding-top: 20px;
	width: 66.6%;
	float: right;
	font-weight: bold;
	font-style: normal;
	}

	footer.info-testimonial cite span {
	color: #000000;
	display: block;
	text-transform: none!important;
	margin-top: 5px;
	}

	/ Newletter /

	div.newsletter {
	position: relative;
	height: auto;
	}

	div.newsletter::before {
	background-image: url(../img/bg-newsletter.jpg);
	content: '';
	}

	div.newsletter .contenido {
	padding: 100px 0;
	color: #ffffff;
	text-align: center;
	position: relative;
	}

	div.newsletter .contenido p {
	font-size: 1.2em;
	text-transform: lowercase;
	}

	div.newsletter .contenido h3 {
	color: #ffffff;
	text-transform: uppercase;
	font-size: 7vw;
	font-family: 'PT Sans', sans-serif;
	}





	/ Cuenta regresiva /

	div.cuenta-regresiva ul li {
	text-transform: uppercase;
	font-family: 'Oswald', sans-serif;
	font-size: 1.6rem;
	text-align: center;
	}

	@media only screen and (min-width:768px) {
	div.cuenta-regresiva ul li {
	width: 25%;
	float: left;

	}
	}

	/ Footer /

	footer.site-footer {
	background-color: #353535;
	padding-top: 30px;
	margin-top: 20px;
	}

	footer .contenedor > div {
	color: #ffffff;
	padding: 0px 20px;
	font-size: 12px;
	}

	@media only screen and (min-width:768px) {
	footer .contenedor > div {
	width: 33.3%;
	float: left;
	}
	}

	footer h3 {
	color: #ffffff;
	text-transform: uppercase;
	font-family: 'Oswald', sans-serif;
	margin-top: 20px;
	}

	footer h3 span {
	color: #fe4918;
	}

	footer .ultimos-tweets li {
	margin-bottom: 10px;
	}

	footer nav.redes-sociales {
	text-align: left;
	}

	p.copyright {
	background-color: #2e2e2e;
	color: #ffffff;
	padding-top: 10px;
	padding: 10px 0;
	margin: 20px 0 0 0;
	text-align: center;
	}

	/* INTERNAS /
	/* Registro */

	form.registro h3 {
	text-align: center;
	text-transform: uppercase;
	margin: 20px 0 0 0;
	}

	form.registro label {
	margin-bottom: 5px;
	font-weight: bold;
	}

	h4 {
	text-align: center;
	text-transform: uppercase;
	border-bottom: 2px solid #fe4918;
	padding-bottom: 10px;
	font-size: 1.2em;
	}

	div.caja {
	background-color: #ffffff;
	border: 1px solid #e1e1e1;
	padding: 10px;
	margin: 10px;
	}

	div.campo {
	padding: 20px;
	}

	@media only screen and (min-width: 768px) {
	div.campo {
	float: left;
	width: 33.3%;
	}
	}

	div.paquetes .tabla-precio:hover {
	transform: none;
	box-shadow: none;
	}

	div.paquetes .tabla-precio input {
	clear: both;
	width: 100px;
	margin: 10px auto 0 auto;
	display: block;
	}

	.contenido-dia {
	padding: 20px;
	display: none;
	}

	@media only screen and (min-width: 768px) {
	.contenido-dia > div {
	float: left;
	width: 33.3%;
	}
	}

	.contenido-dia > div p {
	text-align: left;
	}

	.contenido-dia > div label {
	display: block;
	margin-bottom: 10px;
	}

	.contenido-dia > div input {
	margin-right: 10px;
	}

	.contenido-dia > div label time {
	color: #fe4918;
	font-weight: bold;
	}

	/* Resumen Registro */

	.resumen p {
	font-size: 1.2em;
	text-transform: uppercase;
	}

	.resumen .extras {
	float: left;
	width: 50%;
	padding: 30px;
	}

	.extras .orden {
	text-align: left;
	margin-bottom: 10px;
	}

	div.extras div.orden input {
	margin: 10px 0 0 0;
	}

	div.resumen div.total {
	float: right;
	width: 50%;
	padding: 30px;
	}

	div.resumen input {
	display: block;
	margin: 10px auto;
	}

	#lista-productos {
	background-color: #e1e1e1;
	padding: 20px;
	display: none;
	}

	#suma-total {
	text-align: center;
	font-size: 2em;
	color: #fe4918;
	}

	#error {
	clear: both;
	padding: 20px;
	text-align: center;
	display: none;
	}

	/* ==========================================================================
	Helper classes
	========================================================================== */

	/*
	* Hide visually and from screen readers
	*/

	.hidden {
	display: none !important;
	}

	/*
	* Hide only visually, but have it available for screen readers:
	* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
	*
	* 1. For long content, line feeds are not interpreted as spaces and small width
	* causes content to wrap 1 word per line:
	* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
	*/

	.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap; /* 1 */
	}

	/*
	* Extends the .visuallyhidden class to allow the element
	* to be focusable when navigated to via the keyboard:
	* https://www.drupal.org/node/897638
	*/

	.visuallyhidden.focusable:active,
	.visuallyhidden.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
	white-space: inherit;
	}

	/*
	* Hide visually and from screen readers, but maintain layout
	*/

	.invisible {
	visibility: hidden;
	}

	/*
	* Clearfix: contain floats
	*
	* For modern browsers
	* 1. The space content is one way to avoid an Opera bug when the
	* `contenteditable` attribute is included anywhere else in the document.
	* Otherwise it causes space to appear at the top and bottom of elements
	* that receive the `clearfix` class.
	* 2. The use of `table` rather than `block` is only necessary if using
	* `:before` to contain the top-margins of child elements.
	*/

	.clearfix:before,
	.clearfix:after {
	content: " "; /* 1 */
	display: table; /* 2 */
	}

	.clearfix:after {
	clear: both;
	}

	/* ==========================================================================
	EXAMPLE Media Queries for Responsive Design.
	These examples override the primary ('mobile first') styles.
	Modify as content requires.
	========================================================================== */

	@media only screen and (min-width: 35em) {
	/* Style adjustments for viewports that meet the condition */
	}

	@media print,
	(-webkit-min-device-pixel-ratio: 1.25),
	(min-resolution: 1.25dppx),
	(min-resolution: 120dpi) {
	/* Style adjustments for high resolution devices */
	}

	/* ==========================================================================
	Print styles.
	Inlined to avoid the additional HTTP request:
	https://www.phpied.com/delay-loading-your-print-css/
	========================================================================== */

	@media print {
	*,
	*:before,
	*:after {
	background: transparent !important;
	color: #000 !important; /* Black prints faster */
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	}

	a,
	a:visited {
	text-decoration: underline;
	}

	a[href]:after {
	content: " (" attr(href) ")";
	}

	abbr[title]:after {
	content: " (" attr(title) ")";
	}

	/*
	* Don't show links that are fragment identifiers,
	* or use the `javascript:` pseudo protocol
	*/

	a[href^="#"]:after,
	a[href^="javascript:"]:after {
	content: "";
	}

	pre {
	white-space: pre-wrap !important;
	}
	pre,
	blockquote {
	border: 1px solid #999;
	page-break-inside: avoid;
	}

	/*
	* Printing Tables:
	* http://css-discuss.incutio.com/wiki/Printing_Tables
	*/

	thead {
	display: table-header-group;
	}

	tr,
	img {
	page-break-inside: avoid;
	}

	p,
	h2,
	h3 {
	orphans: 3;
	widows: 3;
	}

	h2,
	h3 {
	page-break-after: avoid;
	}
	}
	var api = 'AIzaSyBFQMoG7IMnE6c4vw_fUfjU1G0ts4rHzq8';

	function initMap() {
	var latLng = {
	lat: 28.4219985,
	lng:-100.7689874
	};

	var map = new google.maps.Map(document.getElementById('mapa'), {
	'center': latLng,
	'zoom': 15,
	'mapTypeId': google.maps.MapTypeId.ROADMAP
	});

	var contenido = '<h2>GDLWEBCAMP</h2>'+
	'<p>Del 10 al 12 de Diciembre</p>'+
	'<p>Visitanos!</p>'

	var informacion = new google.maps.InfoWindow({
	content: contenido

	});

	var marker = new google.maps.Marker({
	position: latLng,
	map: map,
	title: 'Ballistic Org'
	});

	marker.addListener('click', function(){
	informacion.open(map, marker);
	});
	}

	(function() {
	"use strict";

	var regalo = document.getElementById('regalo');

	document.addEventListener('DOMContentLoaded', function(){

	// Datos Usuarios

	var nombre = document.getElementById('nombre');
	var apellido = document.getElementById('apellido');
	var email = document.getElementById('email');

	// Campos pases

	var pase_dia = document.getElementById('pase_dia');
	var pase_dosdias = document.getElementById('pase_dosdias');
	var pase_completo = document.getElementById('pase_completo');

	// Botones y divs

	var calcular = document.getElementById('calcular');
	var errorDiv = document.getElementById('error');
	var botonRegistro = document.getElementById('btnRegistro');
	var lista_productos = document.getElementById('lista-productos');
	var suma = document.getElementById('suma-total');

	// Extras

	var camisas = document.getElementById('camisa_evento');
	var etiquetas = document.getElementById('etiquetas');


	calcular.addEventListener('click', calcularMontos);

	pase_dia.addEventListener('blur', mostrarDias);
	pase_dosdias.addEventListener('blur', mostrarDias);
	pase_completo.addEventListener('blur', mostrarDias);

	nombre.addEventListener('blur', validarCampos);
	apellido.addEventListener('blur', validarCampos);
	email.addEventListener('blur', validarCampos);
	email.addEventListener('blur', validarEmail);


	function validarCampos() {
	if(this.value == '') {
	errorDiv.style.display = 'block';
	errorDiv.innerHTML = "Este campo es obligatorio";
	this.style.border = '1px solid red';
	errorDiv.style.border = '1px solid red';
	} else {
	errorDiv.style.display = 'none';
	this.style.border = '1px solid #cccccc';
	}
	}

	function validarEmail() {
	if(this.value.indexOf("@") > -1) {
	errorDiv.style.display = 'none';
	this.style.border = '1px solid #cccccc';
	} else {
	errorDiv.style.display = 'block';
	errorDiv.innerHTML = "Inserte un email valido";
	this.style.border = '1px solid red';
	errorDiv.style.border = '1px solid red';
	}
	}




	function calcularMontos(event){
	event.preventDefault();
	if(regalo.value === ''){
	alert("Debes elegir un regalo.");
	regalo.focus();
	} else {
	var boletosDia = parseInt(pase_dia.value, 10) \|\| 0,
	boletos2Dias = parseInt(pase_dosdias.value, 10) \|\| 0,
	boletoCompleto = parseInt(pase_completo.value, 10) \|\| 0,
	cantCamisas = parseInt(camisas.value, 10) \|\| 0,
	cantEtiquetas = parseInt(etiquetas.value, 10) \|\| 0;

	var totalPagar = (boletosDia * 30) + (boletos2Dias * 45) + (boletoCompleto * 50) +
	((cantCamisas * 10) * .93) + (cantEtiquetas * 2);

	var listadoProductos = [];

	if(boletosDia >= 1){
	listadoProductos.push(boletosDia + ' Pases por día');
	}

	if(boletos2Dias >= 1){
	listadoProductos.push(boletos2Dias + ' Pases por 2 dias');
	}

	if(boletoCompleto >= 1){
	listadoProductos.push(boletoCompleto + ' Pases completo');
	}

	if(cantCamisas >= 1){
	listadoProductos.push(cantCamisas + ' Camisas');
	}

	if(cantEtiquetas >= 1){
	listadoProductos.push(cantEtiquetas + ' Etiquetas');
	}

	lista_productos.style.display = "block";

	lista_productos.innerHTML = '';
	for (var i = 0; i< listadoProductos.length; i++){
	lista_productos.innerHTML += listadoProductos[i] + '<br/>';
	}

	suma.innerHTML = "$ " + totalPagar.toFixed(2);


	}
	}

	function mostrarDias(){
	var boletosDia = parseInt(pase_dia.value, 10) \|\| 0,
	boletos2Dias = parseInt(pase_dosdias.value, 10) \|\| 0,
	boletoCompleto = parseInt(pase_completo.value, 10) \|\| 0;

	var diasElegidos = [];

	if(boletosDia > 0){
	diasElegidos.push('viernes');
	}
	if(boletos2Dias>0){
	diasElegidos.push('viernes', 'sabado');
	}
	if(boletoCompleto>0){
	diasElegidos.push('viernes', 'sabado', 'domingo');
	}
	for(var i = 0; i < diasElegidos.length; i++) {
	document.getElementById(diasElegidos[i]).style.display = 'block';
	}

	}




	}); // DOM CONTENT LOADED


	})();