/* ----------------------------------------------------------
    McWane Science Center CSS
    Version 1.0

    TABLE OF CONTENTS

    DESKTOP
    01 - DO NOT DISPLAY
    02 - RESPONSIVE NAV
    03 - ROTATOR

    ALL DEVICES
    04 - DO NOT DISPLAY
    05 - RESPONSIVE NAV

    TABLET
    06 - DO NOT DISPLAY
    07 - LAYOUT
    08 - SECONDARY NAV
    09 - HEADER
    10 - NAV
    11 - ROTATOR
    12 - DID YOU KNOW
    13 - HOME CONTENT
    14 - CHALLENGE GRID
    15 - SIDEBAR
    16 - SUBPAGE HEADING
    17 - SUBPAGE CONTENT
    18 - SECTION LANDING SUBPAGE
    19 - ENEWS SIGNUP AND SOCIAL MEDIA
    20 - FOOTER STYLES

    MOBILE
    21 - DO NOT DISPLAY
    22 - LAYOUT
    23 - SECONDARY NAV
    24 - HEADER
    25 - DID YOU KNOW
    26 - HOME CONTENT
    27 - CHALLENGE GRID
    28 - SIDEBAR
    29 - SUBPAGE HEADING
    30 - SUBPAGE CONTENT
    31 - SECTION LANDING SUBPAGE
    32 - ENEWS SIGNUP AND SOCIAL MEDIA
    33 - FOOTER

    COLOR GUIDE (Main Site Colors and their Hex Codes)
    Main Blue: #0068b3
    Dark Blue: #004d85
    Orange: #e45523
    Yellow: #e9ba00
    Green: #81d040
    Text Gray: #6d6d6d

    FONTS USED
    Main Copy: Arial
    Main Headers: Open Sans
    Secondary Headers: Open Sans

---------------------------------------------------------- */

/* START DESKTOP */

@media only screen and (min-width: 1025px) {

    /* 01 = DO NOT DISPLAY
    ---------------------------------------------------------- */

    .responsive-nav-link,
    .responsive-nav {display: none;}

    /* 02 = RESPONSIVE NAV
    ---------------------------------------------------------- */

    .push {right: 0 !important;}



    /* 03 = ROTATOR
    ---------------------------------------------------------- */

    .rotator{
        display: block;
        height: 504px !important;
        width: 1138px !important;
        overflow-y: hidden;
    }


    /* Exhibit Maps */
    .exhibit-map {
        min-height: 500px;
    }

}

/* END DESKTOP */



/* ALL ADAPTIVE */

@media only screen and (max-width: 1024px) {

    /* 04 = DO NOT DISPLAY
    ---------------------------------------------------------- */

    .rotator-title,
    .rotator-desc,
    .search {display: none;}


    /* 05 = RESPONSIVE NAV
    ---------------------------------------------------------- */

    .responsive-nav {
        list-style: none;
        padding: 0;
    }

    .responsive-nav ul li a {
        border-bottom: 1px solid #fff;
        color: #fff;
        display: block;
        font-family: 'Source Sans Pro', 'Arial', 'Helvetica', sans-serif;
        font-size: 15px;
        font-weight: 700;
        padding: 5px 10px;
        text-transform: uppercase;
    }

    .responsive-nav ul {
        list-style: none;
        padding: 0;
    }

    .responsive-nav ul li a {
        padding: 5px 20px;
        font-size: 15px;
        font-weight: 600;
        text-transform: none;
    }

    .panel {
        position: fixed;
        right: -350px; /*left or right and the width of your navigation panel*/
        width: 350px; /*should match the above value*/
    }

    .responsive-nav input {
        background-color: #00aeef;
        background-image: url(../images/icon-search.png);
        background-position: 10px center;
        background-repeat: no-repeat;
        border: none;
        border-left: 1px solid #031c36;
        border-radius: 0;
        color: #fff;
        padding: 15px 10px;
        text-indent: 30px;
        font-size: 15px;
        width: 100%;
    }


    .icon {width: 260px;}
}

/* END ALL ADAPTIVE */



/* START TABLET */

@media only screen and (min-width: 768px) and (max-width: 1024px) {

    .exhibit-map {
        min-height: 500px;
    }

    /* 06 = DO NOT DISPLAY
    ---------------------------------------------------------- */

    .did-you-know a,
    #menu-secondary-nav,
    .nav li:hover .mega-menu, .nav li.hover .mega-menu,
    .section-landing img{display: none;}

    /* 07 = LAYOUT
    ---------------------------------------------------------- */

    .global-width {width: 768px;}

    .narrow-content {margin: 0;}

    /* 08 = SECONDARY NAV
    ---------------------------------------------------------- */

    .todays-hours {padding: 15px 20px 15px 43px;}

    .search {height: 45px;}

    .search-form input {
        height: 25px;
        line-height: 25px;
        right: 82px;
    }

    .search-form:hover input,
    .search-form input:focus {
        width: 200px;
    }

    .responsive-nav-link {
        background-color: #004d85;
        color: #fff;
        display: block;
        float: right;
        font-size: 30px;
        height: 45px;
        line-height: 45px;
        margin-left: 1px;
        text-align: center;
        width: 40px;
    }

    .responsive-nav-link-secondary {
        background-color: #004d85;
        color: #fff;
        display: block;
        float: right;
        font-size: 30px;
        height: 45px;
        line-height: 45px;
        margin-left: 1px;
        text-align: center;
        width: 40px;
        z-index: 9999;
        font-weight: normal !important;
        font-size: 30px !important;
    }

    .responsive-nav ul li a {
        padding: 12px 10px;
    }

    /* 09 = HEADER
    ---------------------------------------------------------- */

    .logo {margin: 0 0 0 14px;}


    /* 10 = NAV
    ---------------------------------------------------------- */
    .nav > li {margin-left: 12px;}
    .nav li a {
        background: url(../images/icon-nav.png) no-repeat;
        display: block;
        font-family: 'Source Sans Pro', 'Arial', 'Helvetica', sans-serif;
        font-size: 30px;
        font-weight: 700;
        padding: 28px 15px;
        text-indent: 30px;
        text-transform: uppercase;
    }

    .nav li a.visit {
        background-position: 15px 33px;
        color: #e45523;
    }

    .nav li a.learn {
        background-position: 15px -40px;
        color: #e9ba00;
    }

    .nav li a.join {
        background-position: 15px -110px;
        color: #81d040;
    }

    .nav > li.hover > a.visit {
        background-position: 15px 33px;
    }

    .nav > li.hover > a.learn {
        background-position: 15px -40px;
    }

    .nav > li.hover > a.join {
        background-position: 15px -110px;
    }

    .nav > li.hover > a {background: url(../images/icon-nav-white.png) no-repeat; color: #fff;}

    .visit-menu.hover {
        background-color: #e45523;
    }

    .learn-menu.hover {
        background-color: #e9ba00;
    }

    .join-menu.hover {
        background-color: #81d040;
    }

    .search-menu {display: none;}

    /* 11 = ROTATOR
    ---------------------------------------------------------- */

    .rotator-wrap {
        height: 340px;
    }

    .rotator {
        display: block;
        height: 340px !important;
        width: 768px !important;
        overflow-y: hidden;
    }

    .rotator-copy {bottom: 0;}

    .rotator img {
        height: 340px !important;
        width: 768px !important;
    }

    .sssprev {top: 176px;}

    .sssnext {top: 176px;}


    /* 12 = DID YOU KNOW
    ---------------------------------------------------------- */

    .did-you-know .h4 {font-size: 16px;}

    .did-you-know .fun-fact {
        font-size: 13px;
        line-height: 28px;
        padding: 13px 20px 13px 0;
        width: 550px;
    }

    .fun-fact-icon {padding: 5px 15px;}


    /* 13 = HOME CONTENT
    ---------------------------------------------------------- */

    .home-content {padding: 35px 0;}

    .mcwane-happenings {
        width: 500px;
        margin: 0px 0px 0px 10px;
    }

    .event-grid {
        list-style: none;
        margin-right: 15px;
        padding: 0;
        width: 450px;
    }

    .event-grid li {float: left; width: 215px}

    .event-grid img {
        height: auto;
        width: 100%;
    }

    .imax-dome {width: 248px;}

    .imax-dome .icon {
        width: 208px;
    }

    a.movie-item {
        background-color: #fff;
        border: 1px solid #e3e3e3;
        color: #6d6d6d;
        display: block;
        font-family: 'Source Sans Pro', 'Arial', 'Helvetica', sans-serif;
        font-size: 14px;
        line-height: 20px;
        margin-top: -1px;
        overflow: auto;
        padding: 14px 15px 15px;
        width: 216px;
    }

    .movie-thumb {display: none;}

    .movie-title {font-weight: 600;}

    a.movie-item.even {background-color: #f9f9f9;}


    /* 14 = CHALLENGE GRID
    ---------------------------------------------------------- */

    .challenge-title {margin-top: 0;}

    .challenge-grid-copy {
        margin-right: 40px;
        width: 280px;
    }

    .challenge-grid-wrap {
        padding: 60px 0 40px 10px;
        width: 758px;
    }

    .challenge-grid {width: 430px;}

    .challenge-grid li a img {
        height: auto;
        width: 100px;
    }

    .challenge {
        clear: none;
        width: 300px;
    }

    .challenge-grid li:nth-child(4n+4) {padding: 0 10px 10px 0;}


    /* 15 = SIDEBAR STYLES
    ---------------------------------------------------------- */

    .sidebar {
        margin-left: 10px;
        width: 200px;
    }


    /* 16 = SUBPAGE HEADING STYLES
    ---------------------------------------------------------- */

    /* Section Landing Page */

    .section-landing-wrap {
        height: 235px;
        margin-top: -49px;
    }

    .section-landing {height: 185px;}

    .section-copy {
        padding: 10px 0 0 70px;
        width: 620px;
    }

    .section-title {padding: 10px 0 10px 70px;}


    /* 17 = SUBPAGE CONTENT STYLES
    ---------------------------------------------------------- */

    .sub-content {
        padding: 40px 0 40px 20px;
        width: 485px;
    }

    .sub-content img.alignnone {
        max-width: 100%;
    }

    /* Subpage */

    .sub-section-landing-wrap {
        margin-top: -49px;
        margin-bottom: 43px;
        padding: 1px 0 2px;
    }

    .contact-listing {
        width: 100%;
    }

    .new-element-table tr td:first-child {
        padding: 0px 10px 0px 0px;
    }


    /* 18 = SECTION LANDING SUBPAGE STYLES
    ---------------------------------------------------------- */

    .page-grid li a {
        font-size: 13px;
        width: 150px;
    }

    .page-grid li a img {
        height: auto;
        width: 150px;
    }

    .page-grid li .page-grid-title {width: 130px;}


    /* 19 = ENEWS SIGNUP AND SOCIAL MEDIA STYLES
    ---------------------------------------------------------- */

    .enews-signup-wrap {margin: 0;}

    .enews-input {width: 230px;}

    .enews-submit {margin: 0 0 0 5px;}


    /* 20 = FOOTER STYLES
    ---------------------------------------------------------- */

    .footer-hours,
    .footer-nav {padding: 20px 10px;}

    .footer-nav {width: 320px;}

    .footer-hours {width: 400px;}

    .col {width: 105px;}

}

/* END TABLET
---------------------------------------------------------- */



/* START MOBILE
---------------------------------------------------------- */

@media only screen and (max-width: 767px) {

    .exhibit-map {
        min-height: 400px;
    }

    /* 21 = DO NOT DISPLAY
    ---------------------------------------------------------- */

    .did-you-know,
    .footer-hours,
    .nav,
    .rotator-wrap,
    #menu-secondary-nav,
    .section-fun-fact,
    .section-landing img,
    .sub-content img.right {display: none;}


    /* 22 = LAYOUT
    ---------------------------------------------------------- */

    .h2 {font-size: 22px;}

    .global-width {width: 300px;}

    .narrow-content {margin: 0;}

    .narrow-content .left,
    .narrow-content .right {
        float: left !important;
    }

    .narrow-content .right {
        padding-top: 0;
    }


    /* 23 = SECONDARY NAV
    ---------------------------------------------------------- */

    .todays-hours {
        background-color: #004d85;
        padding: 15px 10px 15px 35px;
        width: 210px;
        background-position: 10px center;
    }

    .search {height: 45px;}

    .responsive-nav-link {
        background-color: #004d85;
        color: #fff;
        display: block;
        float: right;
        font-size: 30px;
        height: 45px;
        line-height: 45px;
        margin-left: 1px;
        text-align: center;
        width: 40px;
        z-index: 9999;
    }

    .responsive-nav-link-secondary {
        background-color: #004d85;
        color: #fff;
        display: block;
        float: right;
        font-size: 30px;
        height: 45px;
        line-height: 45px;
        margin-left: 1px;
        text-align: center;
        width: 40px;
        z-index: 9999;
        font-weight: normal !important;
        font-size: 30px !important;
    }

    div#responsive-main-nav.responsive-nav.panel.bkgd-dark-blue {
        z-index: 9999 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overflow-scrolling: touch !important;

    }

    .responsive-nav ul li a {
        padding: 12px 20px;
    }

    /* 24 = HEADER
    ---------------------------------------------------------- */

    .alert {text-align: center;}

    .header-wrap {
        background-color: #0068b3;
        background-image: none;
        margin-top: 1px;
        position: relative;
        z-index: 9;
    }

    .logo {
        background: none;
        display: block;
        float: none;
        margin: 0 auto;
        padding: 12px 0;
        width: 120px;
    }

    .logo img {
        height: auto;
        width: 120px;
    }

    .logo-no-bg {
        margin: auto;
        padding: 5px 0;
    }

    /* 25 = DID YOU KNOW
    ---------------------------------------------------------- */

    .did-you-know .h4 {font-size: 16px;}

    .did-you-know .fun-fact {
        font-size: 13px;
        line-height: 28px;
        padding: 13px 20px 13px 0;
        width: 550px;
    }

    .fun-fact-icon {padding: 5px 15px;}


    /* 26 = HOME CONTENT
    ---------------------------------------------------------- */

    .home-content {padding: 35px 0;}

    .event-grid {
        list-style: none;
        margin-right: 15px;
        padding: 0;
        width: 310px;
    }

    .event-grid li {
        float: left;
        width: 33.33333%;
        box-sizing: border-box;
    }

    .event-grid img {
        margin: auto;
        display: block;
        height: auto;
        width: 100%;
    }

    .event-grid .magnet-button {display: none;}

    .mcwane-happenings {
        margin: 0 0 20px;
        width: 300px;
    }

    .imax-dome {width: 300px;}

    a.movie-item {
        background-color: #fff;
        border: 1px solid #e3e3e3;
        color: #6d6d6d;
        display: block;
        font-family: 'Source Sans Pro', 'Arial', 'Helvetica', sans-serif;
        font-size: 14px;
        line-height: 20px;
        margin-top: -1px;
        overflow: auto;
        padding: 14px 15px 15px;
        width: 265px;
    }

    .movie-title {font-weight: 600;}

    a.movie-item.even {background-color: #f9f9f9;}


    /* 27 = CHALLENGE GRID
    ---------------------------------------------------------- */

    .challenge-title {margin-top: 0;}

    .challenge-grid-copy {
        margin: 0 0 30px 0;
        width: 300px;
    }

    .challenge-grid {
        float: none;
        width: 300px;
    }

    .challenge-grid li a img {
        height: auto;
        width: 93px;
    }

    .challenge-grid li:nth-child(3n+3) {padding: 0 10px 10px 0;}

    .challenge-grid li:nth-child(4n+4) {padding: 0 10px 10px 0;}

    .challenge,
    .challenge.instagram {
        background-position: left 4px;
        margin: 10px 0 0;
        padding: 0 0 0 50px;
        text-align: left;
        width: 245px;
    }


    /* 28 = SIDEBAR STYLES
    ---------------------------------------------------------- */

    .sidebar {
        border-right: none;
        float: left;
        margin-left: 0;
        padding: 25px 0 0;
        width: 300px;
    }


    /* 29 = SUBPAGE HEADING STYLES
    ---------------------------------------------------------- */

    /* Section Landing Page */

    .section-landing-wrap {
        height: auto;
        margin-bottom: 43px;
        margin-top: 0;
        padding: 0;
    }

    .section-landing-wrap.green-stripe {background: url(../images/bkgd-green-stripe.png) repeat;}

    .section-landing-wrap.orange-stripe {background: url(../images/bkgd-orange-stripe.png) repeat;}

    .section-landing-wrap.yellow-stripe {background: url(../images/bkgd-yellow-stripe.png) repeat;}

    .section-landing-wrap .bkgd-green-landing {background: url(../images/bkgd-green-grid.png) repeat;}

    .section-landing-wrap .bkgd-orange-landing {background: url(../images/bkgd-orange-grid.png) repeat;}

    .section-landing-wrap .bkgd-yellow-landing {background: url(../images/bkgd-yellow-grid.png) repeat;}

    .section-landing {
        height: auto;
        overflow: auto;
        padding: 1px 0 2px;
    }

    .section-copy {
        color: #fff;
        float: left;
        height: auto;
        margin: 0;
        padding: 0;
        text-align: center;
        width: 320px;
    }

    .section-title {padding: 10px 0 10px 0;}

    .icon-family {background: none;}

    /* Subpage */

    .sub-section-landing-wrap {
        margin-bottom: 43px;
        padding: 1px 0 2px;
    }

    .sub-section-title {
        color: #fff;
        padding: 10px 0;
        text-align: center;
    }

    .alignright.wp-post-image {
        float: none;
        padding: 0px 0px 20px 0px;
    }

    .section-title.icon-visit {
        width: 230px;
    }
    .section-title.icon-learn {
        width: 230px;
    }
    .section-title.icon-join {
        width: 230px;
    }


    /* 30 = SUBPAGE CONTENT STYLES
    ---------------------------------------------------------- */

    .sub-content {
        border-left: none;
        border-top: 1px solid #dbdbdb;
        float: left;
        margin: 30px 0 0;
        padding: 40px 0;
        width: 300px;
    }

    .sub-content img.alignnone {
        max-width: 100%;
        height: auto;
    }

    .tribe-events-meta-group-details {
        padding: 20px 4% 0px 0px !important;
    }

    .tribe-events-meta-group-venue {
        padding: 20px 4% 0px 0px !important;
    }

    .contact-listing {
        width: 100%;
    }

    .contact-listing tr td:first-child{
        padding: 0px 10px 0px 0px;
    }

    .new-element-table tr td:first-child {
        padding: 0px 10px 0px 0px;
    }


    /* 31 = SECTION LANDING SUBPAGE STYLES
    ---------------------------------------------------------- */

    .page-grid {
        list-style: none;
        margin: 20px 0;
        padding: 0;
    }

    .page-grid li {float: left;}

    .page-grid li .page-grid-title {
        background-color: #0068b3;
        display: block;
        padding: 5px 10px;
    }

    .page-grid li a {
        color: #fff;
        display: block;
        font-family: 'Source Sans Pro', 'Arial', 'Helvetica', sans-serif;
        font-size: 14px;
        font-weight: 700;
        margin: 0 15px 15px 0;
        width: 242px;
    }

    .page-grid li:nth-child(3n+3) a {margin-right: 0;}


    /* 32 = ENEWS SIGNUP AND SOCIAL MEDIA STYLES
    ---------------------------------------------------------- */

    .enews-signup-wrap {margin: 0;}

    .enews-signup {padding: 10px 0;}

    .enews-signup label {
        color: #fff;
        font-family: 'Source Sans Pro', 'Arial', 'Helvetica', sans-serif;
        font-size: 14px;
        font-weight: 700;
        margin-right: 10px;
    }

    .enews-input {
        border: none;
        font-size: 14px;
        margin: 10px 0;
        padding: 7px 10px;
        width: 280px;
    }

    .enews-submit {
        background-color: #003c67;
        border: none;
        color: #fff;
        font-family: 'Source Sans Pro', 'Arial', 'Helvetica', sans-serif;
        font-size: 14px;
        font-weight: 700;
        margin: 0;
        padding: 7px 10px;
        text-transform: uppercase;
    }

    .social-media {
        list-style: none;
        padding: 10px 0;
    }

    .social-media li {float: left;}

    .social-media a {
        background: url(../images/icon-social-media-sprite.png) no-repeat;
        display: block;
        height: 37px;
        width: 38px;
    }

    .social-media a.twitter {background-position: 0 0;}
    .social-media a.pinterest {background-position: -38px 0;}
    .social-media a.facebook {background-position: -76px 0;}
    .social-media a.flickr {background-position: -113px 0;}
    .social-media a.youtube {background-position: -151px 0;}
    .social-media a.instagram {background-position: -189px 0;}


    /* 33 = FOOTER STYLES
    ---------------------------------------------------------- */

    .footer-nav {
        border: none;
        float: left;
        padding: 20px 0;
    }

    .footer-nav {width: 300px;}

    .col {width: 99px;}

    .social-media {float: left;}
}