@charset "utf-8";

/*
    main styles
    version: 15.02.2016

    site

    hero

    speakers

*/

/* --------------- hero --------------- */
/* Was height:373px + padding:0 20px, plus responsive padding-top overrides
   below tuned to compensate for that fixed height - a separate, dedicated
   stylesheet from before this section became a generic "compact divider"
   (see main.css's .hero_speakers .hero__layout group), and completely
   independent of it. That explicit height forced the section box to a
   fixed 373px regardless of its (now much shorter) actual content, leaving
   a large empty gap below the title - exactly the "LineUp is way bigger
   than Zeitplan" bug. Content-driven sizing now comes entirely from
   main.css; nothing here needs to set height/padding on this element
   anymore. */
.hero__layout.hero__layout_profile {
    display: block;
}
/* --------------- /hero --------------- */

/* ------------ speakers ------------ */
/* The band grid is an .ef-section--tinted, so it shares the one
   palette-derived tint with the FAQ, timeline and news sections rather than
   being the off-palette grey (#f3f3f3) it used to set here, which ignored
   Theme Options entirely.

   The rule is GONE rather than set to `transparent`: this file is enqueued
   after tokens.css, so an explicit `background: transparent` here would win
   the tie against .ef-section--tinted and paint nothing at all - which is
   exactly what the design-system spec caught on the first attempt. */
/* ------------ /speakers ------------ */

@media (min-width: 768px) {

    /* --------------- site --------------- */
    .site__title_big{
        margin-bottom: var(--ef-space-4);
        padding: 0;
        font-size: var(--ef-text-hero);
    }
    .site__title:after{
        border-radius: 10px;
    }
    /* --------------- /site --------------- */

    /* --------------- hero --------------- */
    .hero_speakers p{
        font-size: 20px;
        line-height: 38px;
    }
    /* --------------- /hero --------------- */

}

@media (min-width: 1000px) {

    /* --------------- hero --------------- */
    .hero_speakers p{
        width: 650px;
        margin: 0 auto;
    }
    /* --------------- /hero --------------- */

}