@import url('normalize.min.css');
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,600italic);

/* ----------------------------------------------------------
    NCHPAD Responsive CSS
    Version 1.0

    TABLE OF CONTENTS

    TABLET VIEW

    01 - HIDDEN ELEMENTS
    02 - LAYOUT
    03 - HEADER STYLES
    04 - NAVIGATION STYLES
    05 - ROTATOR STYLES
    06 - HOME CONTENT STYLES
    07 - SIDEBAR STYLES
    08 - FOOTER STYLES

    MOBILE VIEW

    09 - HIDDEN ELEMENTS
    10 - LAYOUT
    11 - HEADER STYLES
    12 - NAVIGATION STYLES
    13 - HOME CONTENT STYLES
    14 - SUB CONTENT STYLES
    15 - SIDEBAR STYLES
    16 - FOOTER STYLES

    COLOR GUIDE (Main Site Colors and their Hex Codes)
    Main Blue: #007ad5
    Secondary Blue: #0262aa
    Dark Blue: #004477
    Red: #e2383f
    Light Gray: #e8e8e8
    Text Gray: #5f5f5f
    
    FONTS USED
    Main Copy: Arial
    Main Headers: Source Sans Pro
    Secondary Headers: Source Sans Pro
    
---------------------------------------------------------- */

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

.search {display: block !important;}

.responsive-nav,
.responsive-footer-nav {display: none !important;}
.responsive-audience {display: none !important;}

}




/*BEGIN TABLET VIEW
---------------------------------------------------------- */

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


/* 01 = HIDDEN ELEMENTS
---------------------------------------------------------- */
.responsive-audience {display: none !important;}
.responsive-footer-nav,
ul.nav {display: none;}

.sortdiv {display: none;}


/* 02 = LAYOUT
---------------------------------------------------------- */

.global-width {width: 768px;}

.content {width: 435px;}

.sidebar {width: 265px;}

.crxinner1 {
	width: 100%; 
	float: none;
}

/* 03 = HEADER STYLES
---------------------------------------------------------- */

/* My NCHPAD Filter Slideout */

.search {
    background: #007ad5;
    border-bottom: 1px solid #004477;
    display: none;
    padding: 13px 5px;
    text-indent: 22px;
    width: 100%;
}

.nav-icon,
.search-icon {
    background: url(../images6/icon-sprite.png) no-repeat #007ad5;
    cursor: pointer;
    height: 41px;
    width: 40px;
}

.nav-icon {
    background-position: 7px -456px;
    border-left: 1px solid #004477;
}

.search-icon {background-position: 7px -33px;}


/* 04 = NAVIGATION STYLES
---------------------------------------------------------- */

ul.responsive-nav {
    display: none;
    list-style: none;
    padding: 0;
    width: 100%;
}

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


/* 05 = ROTATOR STYLES
---------------------------------------------------------- */

/* Rotator Images */

.rotator .bx-wrapper {
    height: 268px;
    width: 768px;
}

.rotator .bx-wrapper img {
    height: 268px;
    width: 768px;
}

/* Rotator Goal Pager */

.goal-block {font-size: 14px;}

.goal-block.active {background-position: 0 -153px;}

.goal-icon {
    height: 53px;
    line-height: 53px;
    text-indent: 70px;
    width: 270px;
}

.goal-public-health-professionals {background-position: 30px -85px;}
.goal-health-care-providers {background-position: 30px -525px;}
.goal-teachers {background-position: 30px -280px;}
.goal-individuals-caregivers {background-position: 30px -373px;}

.goal-fitness-professionals {
    background-position: 30px -179px;
    height: 53px;
    line-height: 53px;
}


/* 06 = HOME CONTENT STYLES
---------------------------------------------------------- */

/* Recent Updates and Recent Blog Posts Overall Blocks */

.home-content .section-block-content {margin: 20px 0;}

.home-content .media-block.featured img {
    height: auto;
    width: 196px; 
}

/* Recent Updates - Additional Updates Slider */

.update-slider .bx-wrapper {padding: 20px 25px 20px;}

.update-slider .media-block img {
    width: 140px;
    height: auto;
}


/* Recent Blog Posts */

.recent-blog-posts .media-block {
    padding: 15px 0;
    width: 100%;
}

.recent-blog-posts .media-block:nth-child(even) {border-left: none;}

.recent-blog-posts .media-block img {
    width: 50px;
    height: auto;
}

.tile {
    float: left;
    position: relative;
    width: 45%;
    padding-bottom: 30%;
}

.largetile {
    float: left;
    position: relative;
    width: 45%;
    margin-bottom: 20px;
}

/* 07 = SIDEBAR STYLES
---------------------------------------------------------- */

/* Home Magnets */

.magnets img {
    height: auto;
    width: 265px;
}


/* 08 = FOOTER STYLES
---------------------------------------------------------- */

.footer {padding: 10px;}

.footer .col {
    margin: 20px 0 0 20px;
    width: 155px;
}
/*
.footer ul {padding: 0 0 50px 10px;}
*/
.footer li a {font-size: 11px;}

}

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







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

@media only screen and (min-width: 320px) and (max-width: 767px) {
.hidecomment {
	display: none !important;
}

/* 09 = HIDDEN ELEMENTS
---------------------------------------------------------- */

.footer .col,
.rotator,
.section-block-heading a,
ul.nav, .breadcrumbs, .sortdiv {display: none;}


/* 10 = LAYOUT
---------------------------------------------------------- */

.global-width {width: 320px;}

.main-content {padding: 0 10px 20px;}

.content {width: 300px;}

.sidebar {width: 300px;}


.crxinner1 {
	width: 100%; 
	float: none;
}
/* 11 = HEADER STYLES
---------------------------------------------------------- */

/* My NCHPAD Filter Slideout */

.search {
    background: #007ad5;
    border-bottom: 1px solid #004477;
    display: none;
    padding: 13px 5px;
    text-indent: 22px;
    width: 100%;
}

.nav-icon,
.search-icon {
    background: url(../images6/icon-sprite.png) no-repeat #007ad5;
    cursor: pointer;
    height: 41px;
    width: 40px;
}

.nav-icon {
    background-position: 7px -456px;
    border-left: 1px solid #004477;
}

.search-icon {background-position: 7px -33px;}

/* Main Header Styles */

.logo {
    height: auto;
    width: 280px;
    padding: 10px 20px;
}

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


/* 12 = NAVIGATION STYLES
---------------------------------------------------------- */

ul.responsive-nav {
    display: none;
    list-style: none;
    padding: 0;
    width: 100%;
}

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


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

/* Recent Updates and Recent Blog Posts Overall Blocks */

.home-content .section-block,
.sub-content .section-block {border-right: 0;}

.home-content .section-block-content {margin: 20px 0;}

.home-content .media-block.featured img {
    height: auto;
    width: 320px; 
}

/* Recent Updates - Additional Updates Slider */

.update-slider .bx-wrapper {padding: 20px 25px 20px;}

.update-slider .media-block img {
    width: 140px;
    height: auto;
}

.bx-wrapper .bx-controls-direction a {margin-top: -35px !important;}

/* Recent Blog Posts */

.recent-blog-posts .media-block {
    padding: 15px 0;
    width: 100%;
}

.recent-blog-posts .media-block:nth-child(even) {border-left: none;}

.recent-blog-posts .media-block img {
    width: 50px;
    height: auto;
}


/* 14 = SUB CONTENT STYLES
---------------------------------------------------------- */

.main-heading {
    font-size: 25px;
    padding: 15px 30px 20px;
}

.sub-content .section-block-content {margin: 30px 20px 30px 20px;}

.author {
    color: #fff;
    float: right;
    font-family: 'Source Sans Pro', 'Arial', 'Helvetica', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 30px;
    padding-right: 15px;
}

.tile {
    float: left;
    position: relative;
    width: 100%;
    padding-bottom: 70%;
}

.largetile {
    float: left;
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}

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

/* Home Magnets */

.magnets img {
    height: auto;
    width: 300px;
}


/* 16 = FOOTER STYLES
---------------------------------------------------------- */

.footer {padding: 10px 0;}

ul.responsive-footer-nav {
    padding: 0;
    width: 100%;
}

ul.responsive-footer-nav li a {
    border-bottom: 1px solid #007ad5;
    display: block;
    font-size: 11px;
    padding: 0 15px;
}

.footer-main {padding: 10px;}