/* 
** 
** Responsive Things for Splash Pages
**
*/

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {

    #allofit {
        overflow-y: auto;
        overflow-x: hidden;
        min-width: 400px;
    }
    
    /* #sneaky
    ** flip the content order by 
    ** leveraging table properties 
    */

    div.main {
        margin-top: 0;
        padding: 0;
        width: 100%;
        box-sizing:border-box;
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
    }

    /*article.details {
        float: none;
        display:table-header-group;
    }

    article.feed {
        float: none;
        display:table-row-group;
    }*/

    div.wrap {
        width: 768px !important;
    }

    /* make these elements fluid */
    article.feed,
    article.head,
    .splash-feed.custom,
    #twitter-block,
    #event-listing-block, 
    #schedule-block, 
    #presenter-block,
    #speaker-block,
    #host-wrap,
    #host-wrap h3.hosted-by,
    article.splash-feed section.host,
    article.splash-feed #twitter-block-inner,
    section.reveal div.map, 
    section.reveal div.countdown {
        width: 100% !important;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }

    #social-main {
        display: none;
    }

    #speaker-block .speakers > li {
        width: 100%;
    }

    #speaker-block .speakers li ul li img {
        float: left;
        width: 20%;
    }

    #speaker-block .speakers li ul li ul.deets {
        width: 70%;
    }

    div.canvas {
        background: none;
    }

    /* for the newfeat header where 
    ** the event header img & title live
    */

    div#newfeat {
        width: 768px;
        margin-left: -384px;
    }

    article.head h1, 
    article.head h2 {
        width: 100% !important;
        left: 0 !important;
    }

    article.feed {
        margin: 0;
        border-radius: 0;
    }

    /* make time date block fluid */
    article.details {
        margin: 0;
        width: 100% !important;
        /*background: #eee;*/
    }

        /* for slanty - hide the contact org bg */
        section.rsvp .private {
            background: none;
            width: 100%;
            margin: 0 !important;
            padding: 0;
        }        

        /* for slanty -- hide the details cap */
        span.details-cap,
        span.right-cap,
        span.left-cap {
            display: none !important;
        }

    /* for when where blocks */
    section.when-where {
        width: 100%;
    }

        div.where,
        section.when-where ul.when {
            margin-top:20px;
        }

        div.where {
            width: 55%;
        }

        section.when-where div.where .small {
            width: auto;
        }

        section.when-where ul.when li.date {
            font-size: 28px;
        }

    /* host block */
    #host-wrap div.profile-hash {
        display: inline-block;
        width: 0;
        float: left;
        clear:left;
    }

    /* RSVP block */
    section.rsvp {
        width: 100%;
    }
    div.rsvp-form {
        margin: 0 !important;
    }

    div.rsvp-form div.form-holder input#rsvp-first-name, div.rsvp-form div.form-holder input#rsvp-last-name {
        width: 48% !important;
    }


    /* the sponsors block */
    section.splashlist,
    section.splashlist div.logo-wrap {
        width: 100%;
        border-radius: 0;
    }
    section.splashlist {
        box-shadow: none;
    }

    /* head sizing */
    article.head,
    div#newfeat {
        /*height:455px !important;*/
    }

    article.head {
        height:324px;
    }

    /* the reveal */
    div.map a img {
        width: 90%;
        display: inline-block;
        width: 100%;
        height: auto;
    }

    footer .wrap {
        padding: 0 10px;
        text-align:center; 
    }

        footer .wrap a.splashthat {
            margin:0 auto 12px auto;
            float: none;
            display: inline-block;
        }

        footer .wrap .right {
            display: none;
        }

}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
    div.wrap {
        width: 100% !important;
    }
    div#newfeat {
        width: 100% !important;
        left: 0;
        margin-left: 0 !important;
    }

    #newfeat {
        background-position: center center !important;
        background-size: cover !important;
    }

    #newfeat #inline-head {
        display: none !important;
    }
	#live-link { display: none; }
    /*a.splashbug {
        top: -7px;
        right: -8px;
    }*/
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {

    .simple-modal {
        min-width: 0;
        width: 80%;
    }



}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait){
   
    article.head {
        height: 166px;
    }

    div#newfeat {
        width: 100% !important;
        left: 0;
        margin-left: 0 !important;
        height: 166px;
    }

    article header h1 {
        top: 10px !important;
        position: absolute !important;
    }

    article header h1 span {
        font-size: 36px !important;
    }

    article header h2 {
        top: 0px !important;
        position: relative !important;
    }

    article header h2 span {
        font-size: 33px !important;
    }

}

/********************************
    SPECIAL LAYOUTS FOR THEMES
********************************/

/* SUPERHERO */

@media only screen and (max-width: 959px) {
    #main-canvas.superhero div#newfeat {
        width: 748px !important;
        margin-left: -374px !important;
        height: 314px !important;
    }
}

@media only screen and (max-width: 767px) {
    #main-canvas.superhero div#newfeat {
        width: 100% !important;
        margin-left:0 !important;
        height: 314px !important;
    }
}

/* SPRITELY */

@media only screen and (max-width: 959px) {
  #main-canvas.spritely div.main {
    width: 98% !important;
    margin-left: 1%;
  }
  .st-details-wrap {
    top: auto;
    bottom: 0;
    width: 100%;    
  }
}