// Intro
#intro{
  border-bottom: 1px dashed #231f20;
}

.intro-header{
  position: relative;
}

.intro-background{
  max-width: 100%;
}

.intro-title{
  .text-hide();
  background: url("../img/header/what-is-io.png") center /contain no-repeat;
  position: absolute;
  left: 55%;
  top: 25%;
  width: 25%;
  height: 155px;
}

.powered-by{
  .text-hide();
  background: url("../img/header/powered-by-codecentric.png") center /contain no-repeat;
  position: absolute;
  top: 100px ;
  right: 12px;
  width: 180px ;
  height: 53px ;
}

// Intro venue information
.intro-venue{
  background-color: @brand-primary;
  color: @font-light;
  text-align: center;
  padding: 30px 0;
  font-family: elektra_light_proregular;
  .date{
    font-size: 25em / 16;
    font-family: elektra_light_probold, sans-serif;
  }
  .address{
    font-size: 23em / 16;
  }
}

// Intro text
.intro-text{
  margin-bottom: 2em;
}

// Info box
.text-box{
  .make-md-column(4);
  padding-left: 30px;
  padding-right: 30px;

  h3{
    color: @brand-primary;
    font-size: 18em / 16;
    font-family: eurostilebold;
    text-align: left;
    line-height: 3em;
    margin-top: 2.5em;
    span{
      margin-right: 5px;
    }
  }
  span{
    color: @font-dark;
    text-align: justify;
    display: block;
  }
  &:before{
    background: url(../img/home/devider-blue-line.png) center / cover no-repeat;
    content: '';
    height: 146px;
    width: 50px;
    display: block;
    position: absolute;
    margin-top: 90px;
    left: -45px;
  }
  &:first-child{
    padding-left: 0px;
    padding-right: 60px;
    &:before{
      background: none;
    }
  }
  &:last-child{
    padding-right: 0px;
    padding-left: 60px;
    &:before{
      left: -15px;
    }
  }
}

// Responsive adaptations
@media (max-width: 1000px) {
  #intro{
    margin-top: 50px;
    .intro-title{
      position: relative;
      width: 100%;
      left: 0;
      top: 0;
      margin-top: 0;
    }
    .powered-by{
      top: 0;
      right: 0;
      width: 100px;
    }
  }

  .text-box, .text-box:last-child, .text-box:first-child {
    padding-left: 0;
    padding-right: 0;
    &:before, &:after {
      display: none;
    }
  }
}