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

@font-face {
  font-family: 'BebasNeueBold';
  src: url('fonts/BebasNeueBold.eot?#iefix') format('embedded-opentype'),  url('fonts/BebasNeueBold.otf')  format('opentype'),
	     url('fonts/BebasNeueBold.woff') format('woff'), url('fonts/BebasNeueBold.ttf')  format('truetype'), url('fonts/BebasNeueBold.svg#BebasNeueBold') format('svg');
  font-weight: normal;
  font-style: normal;
}


body{
font-size: 14px;
width: 100%;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}

p{
  margin-bottom: 1em;
}

html{
  width: 100%;
  height: 100%;
  background-color: #d7e4e9;
}

h2{
  font-size: 1.7em;
}

h3{
  font-size: 1.3em;
}

a{
text-decoration: none;
}

/* http://sonspring.com/journal/clearing-floats */
.clear {
   clear:both;
   display:block;
   height:0;
   overflow:hidden;
   visibility:hidden;
   width:0;
}
.row:after, .clearfix:after, .container12:after, .container16:after {clear:both;}
/* For IE7. Move this to separate file when you notice some problems */
.row, .clearfix {zoom: 1;}
img, object, embed {max-width:100%;}
img {height:auto;}



::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-size: 1em;
  color: rgb(129, 140, 153);
  font-family: 'Open Sans', sans-serif;

}
::-moz-placeholder { /* Firefox 19+ */
  font-size: 1em;
  color: rgb(129, 140, 153);
  font-family: 'Open Sans', sans-serif;
}
:-ms-input-placeholder { /* IE 10+ */
  font-size: 1em;
  color: rgb(129, 140, 153);
  font-family: 'Open Sans', sans-serif;
}
:-moz-placeholder { /* Firefox 18- */
  font-size: 1em;
  color: rgb(129, 140, 153);
  font-family: 'Open Sans', sans-serif;
}

header{
  display: flex;
  width: 100%;
  height: 320px;
  background-image: url(img/fondo-cabecera.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  box-sizing: border-box;
  justify-content: space-between;
}

#contenedor-header{
  display: flex;
  width: 100%;
  max-width: 1300px;
  box-sizing: border-box;
  justify-content: space-between;
  margin: 0 auto;
}

#titular{
  display: flex;
  font-family: 'BebasNeueBold';
  color: #ffffffff;
  font-size: 4em;
  width: 50%;
  align-items: flex-end;
  justify-content: flex-end;
  vertical-align: middle;
  box-sizing: border-box;
  padding-right: 2em;
}

#logos{
  display: flex;
  justify-content: flex-end;
  align-items:flex-start;
  vertical-align: middle;
  width: 50%;
}

#logo-up{
  display: block;
  width: 210px;
  margin: 1em;
}
#logo-london{
  display: block;
  width: 270px;
  margin: 1em;
}

.contenedor-info{
  display: flex;
  width: 100%;
  box-sizing: border-box;
  justify-content: center;

}

#intro{
  display: flex;
  box-sizing: border-box;
  justify-content: flex-end;
  width: 50%;
  padding: 1em;
  text-align: justify;
}

#contenedor-intro{
  display: flex;
  width: 100%;
  max-width: 630px;
  flex-direction: column;
  box-sizing: border-box;
  justify-content: flex-start;
}

#datos-eventos{
  display: flex;
  width: 50%;
  flex-direction: column;
  padding-left: 2em;
  padding-top: 1em;
}

.titulo-formulario{
  font-family: 'BebasNeueBold';
  font-size: 2em;
  color: #56329d;
  display: block;
  margin-top: 1em;
  margin-bottom: 0.2em;
}

.formulario{
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.texto-input{
  display: block;
  box-sizing: border-box;
  height: 3em;
  border: 1px solid rgba(86, 50, 157, 0.39);
  padding-left: 1em;
  width: 48%;
  margin: 0.3em;
  -webkit-border-radius: 3px 3px 3px 3px;
  border-radius: 3px 3px 3px 3px;
  background-color: rgba(255, 255, 255, 0.7);
  color: #56329d;
}

.texto-seleccion{
  display: block;
  box-sizing: border-box;
  height: 3em;
  border: 1px solid rgba(86, 50, 157, 0.39);
  padding-left: 1em;
  width: 48%;
  margin: 0.3em;
  -webkit-border-radius: 3px 3px 3px 3px;
  border-radius: 3px 3px 3px 3px;
  background-color: rgba(255, 255, 255, 0.7);
  color: #56329d;
}

#autorizaciones{
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.5em;
  color: rgb(98, 125, 130);
}

.autorizacion{
  display: flex;
  width: 100%;
  flex-wrap:wrap;
  font-size: 0.9em;
  margin-bottom: 1em;
}

.texto-autorizo{
  display: flex;
  width: 70%;
  line-height: 1.1em;
}

.campos-marcar{
  display: flex;
  width: 30%;
  flex-wrap:wrap;
}

.si-no{
  display: flex;
  padding-left: 2em;
}
.texto-sino{
  padding-right: 0.5em;
}

.campo-enviar{
  display: flex;
  width: 100%;
  justify-content: center;
  padding-top: 1em;
}

input.btn-enviar{
  background-color: #56329d;
  color: #ffffffff;
  text-align: center;
  text-transform: uppercase;
  padding-left: 4em;
  padding-right: 4em;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  font-weight: 700;
  -webkit-border-radius: 3px 3px 3px 3px;
  border-radius: 3px 3px 3px 3px;
}


#terminos-condiciones{
  display: block;
  width: 100%;
  font-size: 0.8em;
}

.obligatorios{
  color: rgb(182, 0, 0);
  font-size: 0.7em;
}


#expositor{
  display: flex;
  width: 100%;
  height: 220px;
  background-image: url(img/fondo-expositor.png);
  background-repeat: no-repeat;
  margin-top: -390px;
}

#contenedor-info-expositor{
  display:flex;
  width: 100%;
  max-width: 600px;
  flex-direction: column;
  box-sizing: border-box;
  padding-left: 180px;
}

#titular-invitado{
  display:flex;
  width: 100%;
  justify-content: flex-end;
  align-items:center;
  vertical-align: middle;
  padding-top: 1.7em;
}

#icono-titulo-invitado{
  display: block;
  width: 18px;
}

#titulo-invitado{
  color: #00adee;
  font-family: 'BebasNeueBold';
  font-size: 1.3em;
  padding-right: 0.3em;
}

#datos-expositor{
  display: flex;
  width: 100%;
  font-family: 'BebasNeueBold';
  flex-direction: column;
  vertical-align: middle;
  justify-content: center;
  height: 100%;
}

#nombre-expositor{
  font-size: 3em;
  color: #00adee;
}

#cargo-expositor{
  color: #ffffffff;
  font-size: 1.6em;
  padding-right: 3em;
}

#contenedor-datos{
  box-sizing: border-box;
  padding-left: 30px;
}

#datos{
  display: flex;
  background-color: #304e72;
  box-sizing: border-box;
  padding-top: 240px;
  flex-wrap: wrap;
}

#fecha{
  display: flex;
  width: 33.33%;
  justify-content:flex-start;
  flex-direction: column;
  align-items: center;
}

#lugar{
  display: flex;
  width: 33.33%;
  justify-content:flex-start;
  flex-direction: column;
  align-items: center;
}
#hora{
  display: flex;
  width: 33.33%;
  justify-content:flex-start;
  flex-direction: column;
  align-items: center;
}

.icono-datos{
  display: block;
  width: 2.3em;
}

.texto-dato{
  text-align: center;
  color: #78ebff;
  line-height: 1em;
}

#btn-programa a:link{
  display: block;
  width: 200px;
  background-image: url(img/icono-descarga.png);
  background-position: 30px center;
  background-size: 25px;
  padding-top: 1em;
  padding-bottom: 1em;
  background-repeat: no-repeat;
  color: #ffffffff;
  background-color: #56329d;
  padding-left: 60px;
  text-transform: uppercase;
  margin: 0 auto;
  margin-top: 2em;
}


#btn-programa a:visited{
  color: #ffffffff;
}

#btn-programa a:hover{
  color: #ffffffff;
  background-color: #7b53cc;
}

#btn-programa a:active{
  color: #ffffffff;
}

footer{
  width: 100%;
  align-self: flex-end;
  background: #304e72;
  display: flex;
  justify-content:center;
  flex-wrap: wrap;
  position: relative;
  bottom: 0;
  padding-bottom: 2em;
}

#contenedor-footer{
  display: flex;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 1em;
}

#redes{
  display: flex;
  width: 50%;
  align-items: center;
  vertical-align: middle;
}

.icono-redes{
  display: block;
  width: 30px;
  margin: 0.5em;
}

#web{
  display: flex;
  width: 50%;
  align-items: center;
  vertical-align: middle;
  justify-content: flex-end;
}

#icono-web{
  display: block;
  width: 100px;

}

.texto-gracias{
  font-size: 3em;
  text-align: center;
  display: block;
  width: 100%;
  color: rgb(48, 64, 78);
}



@media screen and (max-width:1300px){

  #contenedor-header{
    max-width: 100%;
    padding: 1em;
  }
}

@media screen and (max-width:1300px){

  #contenedor-header{
    max-width: 100%;
    padding: 1em;
  }
  #contenedor-header{
    max-width: 100%;
  }
}


@media screen and (max-width:1200px){
  body{
  font-size: 13px;
  }

  #titular{
    width: 60%;
  }

  #logos{
    width: 40%;
  }

  #contenedor-info-expositor{
    max-width: 100%;
    padding-right: 1em;
  }
}

@media screen and (max-width:1000px){
  body{
  font-size: 12px;
  }
  .icono-redes{
    width: 25px;
  }
  #icono-web{
    width: 80px;
  }

}
@media screen and (max-width:800px){
  html{
    height: auto;
  }
  header{
    height: 200px;
  }

  body{
  min-height: auto;
  }

  .contenedor-info{
    flex-wrap: wrap;
  }

  #contenedor-header{
    flex-direction: column-reverse;
    flex-wrap: wrap;
  }
  #titular{
    display: flex;
    font-family: 'BebasNeueBold';
    color: #ffffffff;
    font-size: 3em;
    width: 100%;
    align-items: flex-end;
    justify-content: flex-end;
    vertical-align: middle;
    box-sizing: border-box;
    padding-right: 2em;
  }

  #logos{
    width: 60%;
    justify-content: flex-end;
  }

  #intro{
    width: 100%;
  }

  .texto-autorizo{
    width: 55%;
  }

  .campos-marcar{
    width: 35%;
  }

  #datos-eventos{
    width: 100%;
  }
  #expositor{
    display: flex;
    width: 100%;
    height: 180px;
    background-size: 900px;
    margin-top: 10px;
  }
  #contenedor-info-expositor{
    padding-left: 110px;
  }
  #nombre-expositor{
    font-size: 2.2em;
  }
  #cargo-expositor{
    padding-right: 0.5em;
    font-size: 1em;
  }
  #contenedor-datos{
    padding-left: 0;
  }
  #datos{
    padding-top: 20px;
  }

  footer{
    width: 100%;
    background: #304e72;
    display: block;
    justify-content:center;
    flex-wrap: wrap;
    position: static;
    bottom: 0;
    padding-bottom: 2em;
  }
}



@media screen and (max-width:500px){
  html{
    height: auto;
  }
  body{
  min-height: auto;
  }
  #contenedor-header{
    flex-direction: column-reverse;
    flex-wrap: wrap;
  }
  #titular{
    display: flex;
    font-family: 'BebasNeueBold';
    color: #ffffffff;
    font-size: 3em;
    width: 100%;
    align-items: flex-end;
    justify-content: flex-end;
    vertical-align: middle;
    box-sizing: border-box;
    padding-right: 2em;
  }

  #logos{
    width: 100%;
  }

  #intro{
    width: 100%;
  }

  .texto-autorizo{
    width: 55%;
  }

  .campos-marcar{
    width: 35%;
  }

  #datos-eventos{
    width: 100%;
  }
  #expositor{
    display: flex;
    width: 100%;
    height: 180px;
    background-size: 900px;
    margin-top: 10px;
  }
  #contenedor-info-expositor{
    padding-left: 110px;
  }
  #nombre-expositor{
    font-size: 2.2em;
  }
  #cargo-expositor{
    padding-right: 0.5em;
    font-size: 1em;
  }
  #contenedor-datos{
    padding-left: 0;
  }
  #datos{
    padding-top: 20px;
  }

  footer{
    width: 100%;
    background: #304e72;
    display: block;
    justify-content:center;
    flex-wrap: wrap;
    position: static;
    bottom: 0;
    padding-bottom: 2em;
  }
}
