/************************************************************************************
MEDIA QUERIES
*************************************************************************************/



@media screen and (min-width: 1300px) {
    #feature p { width: 800px; margin: 0 auto 30px auto; }
    #benefits blockquote { width: 60%; margin: 0 10%; }
    .day { min-height: 350px; }
}
@media screen and (min-width: 1000px) {
    #faq-wrap { width: 70%; padding-left: 15%; padding-right: 15%; }
}    

@media screen and (max-width: 1024px) {
    #audience-wrap { background-position: 100% 0; background-size: auto 100%; }
    #audience .left { width: 40%; }
    #feature-wrap { background-size: auto 100%; }
    
    #course-days-wrap { width: 90%; padding: 70px 5%; text-align: center; }

    #speakers .speaker .thumb { float: left; width: 100%; text-align: center; margin-bottom: 10px; }
    #speakers .speaker .thumb img { width: 180px; height: auto; }
    #speakers .speaker .text { float: right; width: 100%; }
    #speakers .speaker:first-child .text { width: 90%; padding-right: 10%; }

}


@media screen and (max-width: 950px) {
    #header .slogan { display: none; } 
    
    #benefits h2 { width: 100%; }
    
    #benefits ul li { width: 30%; padding: 50px 1.5% 0 1.5%; }
    #benefits ul li:nth-child(1),
    #benefits ul li:nth-child(2){ width: 44%; padding: 50px 3% 0 3%; min-height: 200px;  }
    
    #audience-wrap { background-position: 100% 0; background-size: 100% auto; }
    #audience .left { width: 80%; padding: 30px 10%; margin-top: 320px; }
    
    #enquiry { width: 90%; }
    #contact-form .fieldset-left { float: left; width: 100%; }
    #contact-form .fieldset-right { float: left; width: 100%; }
    #contact-form fieldset input[type="text"], #contact-form fieldset input[type="password"], #contact-form fieldset textarea { width: 96%; }

}    

@media screen and (max-width: 800px) {
    #benefits ul li,
    #benefits ul li:nth-child(1),
    #benefits ul li:nth-child(2)
    { width: 80%; padding: 50px 10% 0 10%; min-height: 20px; margin-bottom: 20px; } 
    
    #testimonials-wrap { padding-bottom: 10px; }
    #testimonials .testimonial { float: left; width: 90%; padding: 0 5% 40px 5%; }
    #testimonials .thumb img { width: 130px; height: auto; }

    #callout-wrap { text-align: center; padding-bottom: 25px; }
    #callout-wrap #callout p { float: none!important; color: #fff; font-size: 15px!important; margin: 0 0 20px 0!important; }
    #callout-wrap #callout .callout-btn { float: none!important; padding-top: 3px; font-size: 13px; }

}

@media screen and (max-width: 620px) {
    
    body { font-weight: 400; }
    #header-wrap { padding-top: 15px; padding-bottom: 15px; }
    #mob-menu-btn { float: right; width: 26px; height: 16px; background-size: 100% 16px; margin-top: 8px; }
    #nav-wrap { padding: 0; margin: 15px 0 -12px 0; border: none; }
    #nav { margin: 0; padding: 0; width: 100%; }
    #nav li { width: 98%; margin: 0; padding: 0; border-top: solid 1px #ccc; }
    #nav li a, #nav li span { float: left; width: 90%; padding: 10px 5%; }
    #nav li.expand-more-menu { background-position: 95% center; }
    #nav li:first-child { margin-left: 0px; }
    img { max-width: 100%; height: auto; }
    
    #logo { margin-left: 15px; }
    #logo img { width: 200px; }
    #mob-menu-btn { margin-right: 15px; }
    
    body { font-size: 13px; }
    p, li, table { font-size: 1.0em; font-weight: 400; color: #333; }
    h1 { font-size: 1.6em; }
    h2 { font-size: 1.35em; }
    h3 { font-size: 1.15em; }
    h4 { font-size: 0.95em; }
    h5 { font-size: 0.8em; }

    #header .header-right { padding-right: 15px; }

    .btn { font-size: 13px; }
    .day { float: left; width: 100%; margin: 0 0 20px 0; background: #e5e5e5; min-height: 30px; }

    #feature-wrap { padding-top: 40px; padding-bottom: 40px; }
    
    #feature p, 
    #feature ul li,
    #benefits blockquote,
    #audience p,
    #speakers-wrap .intro,
    #clients-wrap p,
    #testimonials blockquote,
    #footer p,
    #enquiry .intro
    { font-size: 13px; line-height: 20px; }
    
    #feature ul li { float: left; width: 100%; padding: 0; line-height: 25px; }
    
    #benefits-wrap,
    #content-wrap,
    #course-days-wrap,
    #speakers-wrap,
    #clients-wrap,
    #enquiry-wrap,
    #faq-wrap,
    #footer-wrap
    { padding-top: 30px; padding-bottom: 30px; }
    
    #course-days-wrap { padding-bottom: 50px; }
    #course-days h2 { margin: 0 0 20px 0; }
    #course-days .day-num { font-size: 1.35em; }
    
    #audience .left { margin-top: 240px; }
    #speakers .speaker .thumb img { width: 140px; }
    
    #clients-wrap { background-size: auto 120%; }
    #clients ul { width: 100%; padding: 0; }
    #clients ul li { font-size: 17px; }

    #accordion h3 { font-size: 13px; font-weight: normal; width: 82%; padding: 15px 9%; background: url(../images/icon-expand.png) no-repeat 4% center; background-size: 8px auto; }
    #accordion .ui-accordion-header-active { background: url(../images/icon-contract.png) no-repeat 4% center; background-size: 8px auto; }
    
    #enquiry h2 { margin: 0 0 20px 0; }
    
    .videoWrapper {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        padding-top: 25px;
        height: 300px;
    }
    .videoWrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }


}
@media screen and (max-width: 460px) {
    #header .btn { display: none; }
    #logo { width: 100%; text-align: center; margin: 0; }
    #logo img { float: none; }
}
@media screen and (max-width: 420px) {
    #speakers-wrap { padding-bottom: 0; }
    #speakers .speaker { width: 100%; }
    #speakers .speaker .text,
    #speakers .speaker:first-child .text { text-align: center; width: 100%; padding: 0 0 30px 0; }
}