/*--------------------------------------------*/
/*---------------  General -------------------*/
/*--------------------------------------------*/

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

body {
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  color: #585858;
}

html, body, .container, .cbp-fbscroller, .cbp-fbscroller section {
  height: 100%;
}

h1, h2, h3 {
  margin: 0;
  padding: 0;
}

ul {
  padding-left: 1.2em;
}

li {
  margin-bottom: .3em;
}

a {
  transition: all .2s linear;
  -webkit-transition: all .2s linear;
  -moz-transition: all .2s linear;
  -o-transition: all .2s linear;
  text-decoration: none;
  color: #0072B6;
}

p a:hover {
  text-decoration: underline;
}

section {
  border-right: .5em solid #F0F0F0;
  border-left: .5em solid #F0F0F0;
  background: white;
}

section.gray-block {
  border-color: #DADADA;
}

#wrapper {
  width: 100%;
  text-align: center;
}

.block {
  max-width: 980px;
  margin: auto;
  padding: 2em 1em;
  overflow: auto;
}

.gray-block {
  background-color: #F0F0F0;
}

.bold {
  font-weight: 400;
}

.title {
  text-align: center;
  font-weight: 100;
  font-size: 2em;
  border-bottom: 2px solid #DADADA;
  padding-bottom: .3em;
  margin-bottom: .4em;
}

.button {
  border: 1px solid;
}

.button:hover {
  border: 1px solid #585858;
  color: #585858;
}

img {
  max-width: 100%;
}


/* -------------------------*/
/*          Header          */
/* -------------------------*/

header {
  border: .5em solid black;
  border-bottom: 0;
}

.header-1 {
  display: none;
}

header .header-content {
  background-image: url(../img/header-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  text-align: center;
}

header.over-header {
  border: .5em solid #205877;
  border-bottom: 0;
}

header.over-header .header-content {
  background-image: url(../img/header-bg3.jpg);
}

header .intro {
  padding: 1em;
}

header .intro h1 {
  display: inline-block;
  position: relative;
  overflow: hidden;
  margin: .5em 0;
  letter-spacing: 6px;
  line-height: 1.5em;
  font-size: 1.2em;
  font-weight: 500;
}

.intro.intro-1 {
  color: #2E2E2E;
}

.intro.intro-2 {
  color: #003653;
}

.logo {
  width: 35%;
  margin: auto;
}

header .intro h1:before, header .intro h1:after {
  content: ' ';
  position: absolute;
  height: 2px;
  width: 100%;
  background-color: #2E2E2E;
}

header .intro-2 h1:before, header .intro-2 h1:after {
  background-color: #003653;
}

header .intro h1:after {
  bottom: 0;
  left: 0;
}

header .intro h2 {
  font-weight: 100;
  font-size: 2em;
  line-height: 1em;
}

header .intro h3 {
  font-weight: 400;
  font-size: 1.4em;
}

header .intro h2.title {
  margin-top: .2em;
}

.intro .container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.intro .about {
  text-align: center;
  padding-top: 10px;
}

header .copy {
  text-align: center;
  margin: auto;
  left: 0;
  right: 0;
}

.header-actions .button {
  padding: .5em 1em;
  margin: 1em 0 .5em 0;
  width: 100%;
  background: #003653;
  color: white;
  border: none;
  letter-spacing: 1px;
  font-weight: 100;
  font-size: 1.2em;
  display: inline-block;
}

.header-actions .button:hover {
  background: #0072B6;
}


/* Call For Speakers */

.call-to-action {
  text-align: center;
  margin-top: 2em;
}

#call-speakers .call-to-action .button {
  border: 2px solid;
  padding: .5em 2em;
  font-size: 1.2em;
  display: inline-block;
}


/* ----------------------*/
/*         About         */
/* ----------------------*/

#trilogy .conference {
  margin: 0 0 1em;
}

#trilogy .conference .conf-title {
  padding: .5em;
  border-bottom: 2px solid #DADADA;
  text-align: center;
  font-size: 1.2em;
}

#trilogy a, #trilogy .conf-title {
  text-transform: uppercase;
  font-weight: 600;
  color: #0072B6;
}

#trilogy a:hover {
  text-decoration: underline;
}

#trilogy p {
  margin: 0;
  padding: .5em 0;
}

#trilogy p span {
  color: #0072B6;
  font-weight: 600;
}


/*--------------------------------------------*/
/*---------------- Schedule ------------------*/
/*--------------------------------------------*/

.day-title {
  background: #F0F0F0;
  padding: 1em 0;
  text-align: center;
  font-size: 1.5em;
}

#day-one, #day-two {
  overflow: auto;
}

.day-one .day-title-two:hover, .day-two .day-title-one:hover {
  background: #E6E6E6;
}

.event {
  margin: 1.5em 0;
}

.time {
  color: #B4B4B4;
}

.event:first-child .talk-speaker:before, .party:before {
  top: 3.2em;
}

.talk-speaker .abstract {
  display: none;
  margin-bottom: 1em;
}

.talk-speaker.expanded .abstract {
  display: block;
  clear: both;
}

button:focus {
  outline:0;
}

/*.talk {
  margin-bottom: .5em;
  clear: both;
}*/

.talk a {
  background: #0072B6;
  color: white;
  padding: .2em .4em .05em;
  vertical-align: bottom;
}

.talk a:hover {
  background: #045383;
}

button.expand {
  background: #A8A8A8;
  color: white;
  border: none;
  padding-top: .3em;
}

button.expand:hover {
  background: #868686;
}
 
.speaker-talk-title, .time-entity, .party-title {
  font-size: 1.2em;
}

.party-title .festivities {
  text-transform: inherit;
}

.party-title div {
  font-size: .8em;
}

#schedule .speaker-name {
  font-size: 1.2em;
  margin: 0;
}

.speaker-name a:hover {
  text-decoration: underline;
}

.talk-speaker img {
  display: none;
}

.party img {
 vertical-align: middle;
}


/* ----------------------*/
/*         Venue         */
/* ----------------------*/

.overlay {
  background: transparent;
  position: relative;
  width:100%;
  height:350px; /* iframe height */
  top: 350px;  /* iframe height */
  margin-top: -350px;  /* iframe height */
}

/* ----------------------*/
/*         Party         */
/* ----------------------*/

#party {
  background-image: url(../img/party-pattern.png);
}

#party h1 { 
  border: none;
  margin: 0;
  padding: 0;
}

#party h2 {
  text-align: center;
  padding-bottom: .5em;
  font-weight: 400;
  letter-spacing: 1px;
}

#party h2:first-of-type {
  padding-bottom: 0;
}

#party h2:last-of-type {
  border-bottom: 2px solid #DADADA;
  margin-bottom: 1em;
}

#party h2 img{
  vertical-align: middle;
}

.column {
  text-align: center;
  margin-bottom: 1em;
}

#party .column h2 {
  border-bottom: none;
}

#party .column p {
  text-align: left;
}

.festivities {
  font-weight: 700;
  text-transform: uppercase;
}


/* ----------------------------*/
/*          Register           */
/* ----------------------------*/

form.register_form {
  padding: 2em;
  border: 2px solid #DADADA;
  width: 100%;
  margin: auto;
  overflow: auto;
  background: white;
}

.subheader {
  font-size: 1.5em;
  text-align: center;
  margin-bottom: 1em;
}

.ticket-details {
  padding: 1em;
  background: #F0F0F0;
  margin: 1em 0;
  overflow: auto;
}

#register .ticket-details.disabled {
  color: #999999;
}

.ticket-details .description {
  font-size: 1.3em;
  margin-bottom: .5em;
}

.select_ticket select {
  float: right;
  height: 35px;
  background: white;
  width: 5em;
  border: 2px solid #DADADA;
}

.select_ticket .price {
  display: inline-block;
  line-height: 35px;
}

.promo-purchase {
  width: 100%;
}

.promo-purchase .promocode, .promo-purchase input {
  width: 100%;
}

.promocode input {
  margin-bottom: 1em;
  border: 2px solid #DADADA;
  padding: .8em;
}

.promo-purchase input[type=submit] {
  padding: .8em 2em;
  font-size: 1.2em;
  display: inline-block;
  background: #0072B6;
  color: white;
  border: none
}

.promo-purchase input[type=submit]:hover {
  background: #003653;
  border: none
}

.strike {
  position: relative;
}

.strike:after, .strike:before {
  content: '';
  position: absolute;
  height: 1px;
  width: 109%;
  background: #ff0000;
  left: -2px;
  top: .6em;
}

.strike:after {
  transform:rotate(14deg);
  -ms-transform:rotate(14deg); /* IE 9 */
  -webkit-transform:rotate(14deg); /* Opera, Chrome, and Safari */
}

.strike:before {
  transform:rotate(-14deg);
  -ms-transform:rotate(-14deg); /* IE 9 */
  -webkit-transform:rotate(-14deg); /* Opera, Chrome, and Safari */
}

form.register_form p {
  clear: both;
  margin-top:1em;
  font-size:.8em;
  color: #999;
}

#code {
  border-top: 2px solid #DADADA;
}

/*--------------------------------------------*/
/*---------------- Sponsors ------------------*/
/*--------------------------------------------*/


#sponsors {
  text-align: left;
}
.prospectus {
  text-align: center;
  padding-top: 2em;
  margin-top: 2em;
}

.prospectus a {
  padding: .8em 2em;
  font-size: 1.2em;
  display: inline-block;
  background: #0072B6;
  color: white;
  text-decoration: none;
  border: none
}

.prospectus a:hover {
  background: #003653;
}

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

.sponsor-logos h2 {
  margin-top: 1em;
  text-transform: uppercase;
  font-weight: 400;
}

/* ----------------------------*/
/*            Footer           */
/* ----------------------------*/

.mini-footer .presented-by {
  text-align: center;
  margin: 0;
  font-size: 1.2em;
}

.mini-footer .block {
  padding: 2em;
}

.mini-footer img {
  max-width: 180px;
  margin: .25em 0 .25em .5em;
}

.mini-footer a {
  display: inline-block;
  vertical-align: middle;
}

footer {
  background: #0072B6;
  color: white;
  border: .5em solid #205877;
  border-top: none;
}

footer .block {
  padding: 2em;
}

footer a {
  color: white;
  text-decoration: underline;
}

.skrollable {
  position: fixed;
  z-index: 100;
}


/* ----------------------------*/
/*       Media Queries         */
/* ----------------------------*/


@media only screen and (min-width: 400px) {
 
  .speaker-entity {
    width: 50%;
  }

}

@media only screen and (min-width: 500px) {

  header .intro h1 {
    font-size: 2em;
    letter-spacing: 10px;
    line-height: 1.1em;
    font-weight: 100;
  }

  .block {
    padding: 2em;
  }

  .title {
    font-size: 2.5em
  }

  section {
    border-right: 1em solid #F0F0F0;
    border-left: 1em solid #F0F0F0;
  }

  footer {
    border: 1em solid #205877;
    border-top: none;
  }

  header {
    border: 1em solid black;
  }

  header.over-header {
    border: 1em solid #205877;
    border-bottom: 0;
  }

  #call-speakers .call-to-action .button {
    font-size: 1.5em;
  }
  
}


@media only screen and (min-width: 600px) {
 
  .speaker-entity {
    width: 33.33%;
  }

  .mini-footer .presented-by {
    font-size: 1.5em;
  }

}


@media only screen and (min-width: 650px) {

  .header-actions .button {
    width: 46%;
    margin: 1.8em .5em 0;
  }

  header .intro {
    padding: 2em 0;
  }

  header .intro h1 {
    font-size: 3em;
    letter-spacing: 10px;
    line-height: 1.1em;
    font-weight: 100;
  }

  header .intro h2 {
    font-size: 3em;
  }

  header .intro h3 {
    font-weight: 400;
    font-size: 2em;
  }

  .header-actions .button {
    padding: .9em 1em;
  }
  
  .event {
    margin: 0;
    overflow: hidden;
  }

  .talk-speaker:before, .party:before {
    content: '';
    position: absolute;
    width: 1.5em;
    height: 1.5em;
    background: white;
    left: -1.0em;
    border-radius: 50px;
    border: 5px solid #DADADB;
    top: 1.6em;
  }

  .time {
    width: 30%;
    text-align: right;
    float: left;
    padding: 1.25em 2em 1.25em 0;
    color: #B4B4B4;
  }

  .talk-speaker, .party {
    width: 70%;
    float: right;
    border-left: .5em solid #DADADB;
    padding: 1.25em 1.25em 1.25em 2em;
    position: relative;
  }

  .event:first-child .talk-speaker, .event:first-child .time{
    padding-top: 3em;
  }

  #schedule .speaker-name {
    margin: 0 0 .5em;
  }

  .speaker-talk-title, .party-title {
    font-size: 1.5em;
  }

  .talk-speaker.expanded {
    background: #F3F3F3;
  }

  .talk-speaker img {
    display: block;
    float: left;
    width: 105px;
    margin: 0 1em 1em 0;
  }

}

@media only screen and (min-width: 750px) {
 
  .speaker-entity {
    width: 25%;
  }

}

@media only screen and (min-width: 800px) {

  header .intro h1 {
    font-size: 4em;
    letter-spacing: 10px;
    line-height: 1.1em;
    font-weight: 100;
  }

  .block {
    padding: 6em 2em;
  }

  .title {
    font-size: 3.5em;
  }

  #venue .map {
    float: right;
    width: 50%;
    margin-top: 2em;
    overflow: hidden;
    padding-left: 2em;
  }

  .location-info {
    overflow: auto;
  }

  #venue .info {
    float: left;
    width: 50%;
    margin-top: 2em;
  }

  .header-actions .button {
    width: 18em;
  }

  form.register_form {
    width: 70%;
  }

  .promo-purchase {
    width: 50%;
    margin-left:50%;
  }

  #trilogy .conference {
    margin: 1em 0 1.5em;
    width: 33.33333%;
    float: left;
    padding-right: 1em;
  }

  #trilogy .conference:last-of-type {
    padding-right: 0;
  }

  #trilogy p {
    padding: .5em;
  }

  .time-entity {
    font-size: 1.5em;
  }

  .column {
    width: 50%;
    float: left;
  }

  .column:first-of-type {
    padding-right: 1em;
  }

  .column:last-of-type {
    padding-left: 1em;
  }

}

@media only screen and (min-width: 1200px) {

  header {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
  }

  header .header-content {
    height: 650px;
  }

  header .intro {
    padding-top: 3em;
    width: 100%;
    z-index: 1;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
  }

  .header-1 {
    display: block;
  }

  #content {
    width: 100%;
    z-index: 101;
    position: fixed;
    margin-top: 650px
  }

  #content.relative {
    position: relative;
    margin-top: 2250px
  }

  .fade-in {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadein ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadein ease-in 1;
    animation:fadein ease-in 1;

    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
  }


  @keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Firefox */
  @-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Safari and Chrome */
  @-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Internet Explorer */
  @-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
  }​

  /* Opera */
  @-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
  }​

  .fade-in.one {
    -webkit-animation-delay: 0.7s;
    -moz-animation-delay: 0.7s;
    animation-delay: 0.7s;
  }

  .fade-in.two {
    -webkit-animation-delay: 1.2s;
    -moz-animation-delay:1.2s;
    animation-delay: 1.2s;
  }
}