<!--Conference Activities-->

<div id="conference-activities" class="parallax__group">

  <div class="parallax__layer parallax__layer--back">
    <img class="bg-responsive" src="/img/backgrounds/color-top.svg"/>
  </div>


  <div class="parallax__layer parallax__layer--base">
    <div class="container section-content text-center">
      
      <div class="row row-page" style="padding-top: 0px;">
        <div class="col-lg-12 text-center">
          <h3 class="section-title">Activities</h3>
        </div>
      </div><!--row-->

      <div class="tab-modules">

        <ul class="nav nav-tabs">
          <li class="active"><a data-toggle="tab" href="#menu2">Panels</a></li>
          <li><a data-toggle="tab" href="#menu3">Workshops</a></li>
          <li><a data-toggle="tab" href="#menu4">Activities</a></li>
        </ul>

        <div class="tab-content">

          <div id="all-modules" class="tab-pane fade in active">
            {% for activity in site.data.conference-activities %}
              {% if activity.type == 'panel' %}
                <div class="row text-left paneles"> 
                  <div class="col-sm-4 col-md-4">
                    <div class="module-img" style="background-image: url(../img/conference/{{ activity.img }});" ></div>
                  </div>

                  <div class="col-sm-8 col-md-8">
                      <div>
                        <p class="bold large">{{ activity.name }}</p>
                      </div>
                      <div>
                          <p>{{ activity.description }}</p>
                      </div> 
                      <div class="row" style="padding:0;">
                      {% for speaker in activity.speakers %} 
                            <div class= "imgs-speaker micro"  style= "background-image: url(../img/speakers/{{ speaker.img }});"></div> 
                      {% endfor %}
                      </div>
                      <br>
                      <div class="row"  style="margin-bottom: 20px;">
                        {% for speaker in activity.speakers %} 
                        <div style="float: left;"><p class="speaker-name"> {{ speaker.name }} &nbsp /  &nbsp  </p></div>
                        {% endfor %}
                      </div>
                      <div class="row">
                        <a href="{{ activity.url }}" target="_blank"> <span class="bold"> +add to my schedule </span> </a>
                      </div>
                  </div><!--col--> 
                </div><!--row-->
                {% endif %}
            {% endfor %}

            {% for activity in site.data.conference-activities %}
              {% if activity.type != 'panel' %}
                <div class="row text-left paneles"> 
                  <div class="col-sm-4 col-md-4">
                    <div class="module-img" style="background-image: url(../img/conference/{{ activity.img }});" ></div>
                  </div>

                  <div class="col-sm-8 col-md-8">
                      <div>
                        <p class="bold large">{{ activity.name }}</p>
                      </div>
                      <div>
                          <p>{{ activity.description }}</p>
                      </div> 
                      <div class="row" style="padding:0;">
                      {% for speaker in activity.speakers %} 
                            <div class= "imgs-speaker micro"  style= "background-image: url(../img/speakers/{{ speaker.img }});"></div> 
                      {% endfor %}
                      </div>
                      <br>
                      <div class="row">
                        {% for speaker in activity.speakers %} 
                        <div style="float: left;"><p> {{ speaker.name }} &nbsp /  &nbsp  </p></div>
                        {% endfor %}
                      </div>
                      <div class="row">
                        <a href="{{ panel.url }}" target="_blank"> <span class="bold"> +add to my schedule </span> </a>
                      </div>
                  </div><!--col--> 
                </div><!--row-->
              {% endif %}
            {% endfor %}
          </div> <!--all-->

          <div id="menu1" class="tab-pane fade">
            {% for activity in site.data.conference-activities %}
            {% if activity.type == 'working group' %}
            <div class="row text-left paneles">
              <div class="col-sm-4 col-md-4">
                <div class="module-img" style="background-image: url(../img/conference/{{ activity.img }});" ></div>
              </div>
              <div class="col-sm-8 col-sm-8">
                  <div>
                    <p class="bold large">{{ activity.name }}</p>
                  </div>
                  <div>
                      <p>{{ activity.description }}</p>
                  </div> 
                  <div class="row">
                    <a href="{{ activity.url }}" target="_blank"> <span class="bold"> +add to my schedule </span> </a>
                  </div>
              </div><!--col--> 
            </div><!--paneles-->
            {% endif %}
            {% endfor %}
          </div> <!--all-->

          <div id="menu2" class="tab-pane fade">
            {% for activity in site.data.conference-activities %}
              {% if activity.type == 'panel' %}
                 <div class="row text-left paneles"> 
                  <div class="col-sm-4 col-md-4">
                    <div class="module-img" style="background-image: url(../img/conference/{{ activity.img }});" ></div>
                  </div>

                  <div class="col-sm-8 col-md-8">
                      <div>
                        <p class="bold large">{{ activity.name }}</p>
                      </div>
                      <div>
                          <p>{{ activity.description }}</p>
                      </div> 
                      <div class="row" style="padding:0;">
                      {% for speaker in activity.speakers %} 
                            <div class= "imgs-speaker micro"  style= "background-image: url(../img/speakers/{{ speaker.img }});"></div> 
                      {% endfor %}
                      </div>
                      <br>
                      <div class="row" style="margin-bottom: 20px;">
                        {% for speaker in activity.speakers %} 
                        <div style="float: left;"><p class="speaker-name"> {{ speaker.name }} &nbsp /  &nbsp  </p></div>
                        {% endfor %}
                      </div>
                      <div class="row">
                        <a href="{{ activity.url }}" target="_blank"> <span class="bold"> +add to my schedule </span> </a>
                      </div>
                  </div><!--col--> 
                </div><!--row-->
                {% endif %}
            {% endfor %}
          </div> <!--all-->

          <div id="menu3" class="tab-pane fade">
            {% for activity in site.data.conference-activities %}
            {% if activity.type == 'workshop' %}
            <div class="row text-left paneles">
              <div class="col-sm-4 col-md-4">
                <div class="module-img" style="background-image: url(../img/conference/{{ activity.img }});" ></div>
              </div>
              <div class="col-sm-8 col-sm-8">
                  <div>
                    <p class="bold large">{{ activity.name }}</p>
                  </div>
                  <div>
                      <p>{{ activity.description }}</p>
                  </div> 
                  <div class="row">
                    <a href="{{ activity.url }}" target="_blank"> <span class="bold"> +add to my schedule </span> </a>
                  </div>
              </div><!--col--> 
            </div><!--paneles-->
            {% endif %}
            {% endfor %}
          </div> <!--all-->

          <div id="menu4" class="tab-pane fade">
            {% for activity in site.data.conference-activities %}
            {% if activity.type == 'activities' %}
            <div class="row text-left paneles">
              <div class="col-sm-4 col-md-4">
                <div class="module-img" style="background-image: url(../img/conference/{{ activity.img }});" ></div>
              </div>
              <div class="col-sm-8 col-sm-8">
                  <div>
                    <p class="bold large">{{ activity.name }}</p>
                  </div>
                  <div>
                      <p>{{ activity.description }}</p>
                  </div> 
                  <div class="row">
                    <a href="{{ activity.url }}" target="_blank"> <span class="bold"> +add to my schedule </span> </a>
                  </div>
              </div><!--col--> 
            </div><!--paneles-->
            {% endif %}
            {% endfor %}
          </div> <!--all-->

        </div> <!--tab-content-->
      </div> <!--conference-modules-->
       


    </div><!--container-->
  </div><!--layer base-->
</div><!--parallax-group-->
















