/* ============================================================================================== */
/* MAKE LAYOUT RESPONSIVE / affects viewports between 320px and 619px =========================== */
/* modify the core styles defined in style.css                        =========================== */
/* ============================================================================================== */

/* BLOCKQUOTES & FIGURES */
blockquote { padding-top: 1em; margin: 0; }

/* FLOATING CONTENT WRAPPERS */
.container { width: 280px; }

/* TOP NAVIGATION */
#mainNav { float: none; margin-bottom: 40px; }


/* Search Function */
#search { float: none; width: 280px; }
#search input[type="search"] { width: 244px; }

/* PORTAL NAVIGATION & LOGO */
#logo { width: 280px; float: none; }
#logo a { margin: 0; }
#portals { width: 280px; height: 110px; float: none; }
#portals ul { margin: 0; }
#portals ul li { height: 130px; }
#portals ul li:last-child { margin-right: 0; }
#portals ul li a { width: 80px; height: 28px; padding: 52px 0 0 0; text-align: center; }
#forStudents a { background-position: center 0; }
#forEducators a { background-position: center 0; }
#forIndustry a { background-position: center 0; }
.active { left: 17px; }

/* FOOTER */
#socialMedia { width: 280px; float: none; padding-bottom: 24px; }
#socialMedia li { margin-right: 11px; margin-bottom: 11px; }
#socialMedia li:nth-child(3n+3) { margin-right: 0; }
a#facebook, 
a#twitter, 
a#instagram, 
a#youtube, 
a#linkedin { width: 86px; height: 86px; }
#contact { width: 280px; float: none; }
#addressHealthforce { border-top: 1px dotted #4c4c4c; width: 280px; padding-bottom: 10px; padding-top: 30px; float: none; }
#addressMNState { border-top: 1px dotted #4c4c4c; width: 280px; padding-bottom: 0; padding-top: 30px; float: none; }
#disclaimer { border-top: none; padding-top: 0; }

/* BODY - COLUMN SETUP */
.columnR, .columnL { width: 280px; float: none; }
.sidebarR, .sidebarL { width: 280px; float: none; margin-bottom: 50px; }
.columnIntro { width: 280px; margin: 0; }
.columnFull { width: 280px; }

/* SECONDARY NAVIGATION */
#subnav { margin: 0; padding: 0; width: 280px; height: 42px; position: relative; overflow: visible; }
#subNav_label { background-color: #fff; background-position: right 0; background-repeat: no-repeat; background-size: 50px 40px; background-image: url(../images/icon_menu.svg);  display: block; width: 218px; height: 32px; padding: 8px 50px 0 10px; border: 1px solid #ccc; position: relative; top: 0; left: 0; }
#subNav_label:hover { text-decoration: underline; cursor: pointer; }
#subNav_list {  margin: 0; padding: 0 10px; background-color: #fff; width: 258px; border-top: none; border-right: 1px solid #ccc; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; position: relative; top: 0; left: 0; display: none; }
#subNav_list li:last-child { border-bottom: none; }
#subNav_list:hover {  display: block; }
#subNav_label:hover~#subNav_list { visibility: visible; display: block; } /* Display dropdown on hover */

/* Alter Subnav if in a colored wrapper */
.green #subNav_label, .dustyBlue #subNav_label, .yellow #subNav_label, .orange #subNav_label, .teal #subNav_label, .grey #subNav_label, .blue #subNav_label, .purple #subNav_label, .red #subNav_label, .emerald #subNav_label, .rust #subNav_label { border-color: #fff; }
.green #subNav_list, .dustyBlue #subNav_list, .yellow #subNav_list, .orange #subNav_list, .teal #subNav_list, .grey #subNav_list, .blue #subNav_list, .purple #subNav_list, .red #subNav_list, .emerald #subNav_list, .rust #subNav_list { border-left-color: #fff; border-right-color: #fff; border-bottom-color: #fff; }
.green #subNav_list { border-top: 1px solid #92d437; } 
.dustyBlue #subNav_list { border-top: 1px solid #acc4fe; } 
.yellow #subNav_list { border-top: 1px solid #ffe19b; } 
.orange #subNav_list { border-top: 1px solid #ffba57; } 
.teal #subNav_list { border-top: 1px solid #66dee0; } 
.grey #subNav_list { border-top: 1px solid #333; } 
.blue #subNav_list { border-top: 1px solid #0f3963; } 
.purple #subNav_list { border-top: 1px solid #6e467c; }
.red #subNav_list { border-top: 1px solid #a91116; } 
.emerald #subNav_list { border-top: 1px solid #085d5c; }
.rust #subNav_list { border-top: 1px solid #8e3a20; }
.green #subNav_list li, .dustyBlue #subNav_list li, .yellow #subNav_list li, .orange #subNav_list li, .teal #subNav_list li, .grey #subNav_list li, .blue #subNav_list li, .purple #subNav_list li, .red #subNav_list li, .emerald #subNav_list li, .rust #subNav_list li { border-bottom-color: #ccc; }

/* INTRO BANNER */
#banner1, #banner2, #banner3, #banner4, #banner5, #banner6, #banner7, #banner8, #banner9 { height: auto; }
#bannerHeadline { position: relative; height: auto; background-color: #333; }
#banner1 #bannerContent, 
#banner2 #bannerContent, 
#banner3 #bannerContent, 
#banner4 #bannerContent, 
#banner5 #bannerContent, 
#banner6 #bannerContent, 
#banner7 #bannerContent, 
#banner8 #bannerContent, 
#banner9 #bannerContent { width: 280px; padding-top: 50px; padding-bottom: 20px; text-align: center; }
#banner1 #bannerContent h1, 
#banner2 #bannerContent h1, 
#banner3 #bannerContent h1, 
#banner4 #bannerContent h1, 
#banner5 #bannerContent h1, 
#banner6 #bannerContent h1, 
#banner7 #bannerContent h1, 
#banner8 #bannerContent h1, 
#banner9 #bannerContent h1 { float: none; color: #ffba57; width: 280px; }
#banner1 #bannerContent h4, 
#banner2 #bannerContent h4, 
#banner3 #bannerContent h4, 
#banner4 #bannerContent h4, 
#banner5 #bannerContent h4, 
#banner6 #bannerContent h4, 
#banner7 #bannerContent h4, 
#banner8 #bannerContent h4, 
#banner9 #bannerContent h4 { float: none; color: #fff; width: 280px; }
#bannerImage { position: relative; }

/* EMAIL SIGN-UP BAR */

.signupLabel { float: none; width: 100%; padding: 8px 0 0 0; text-align: center; }
.signupButton { width: 100%; float: none; }
.signupButton a { width: 240px; }

/* HOME PAGE SPECIFIC STYLES */
.homeIntroL { width: 280px; float: none; }
.homeIntroR { width: 280px; float: none; margin-bottom: 50px; }
.homeIntroR blockquote { text-align: center; margin-left: 0; margin-right: 0; padding-top: 1em; }
.homeIntroR figure.quote figcaption { margin-left: 0; }

/* TEASER BOXES */
.teaser:nth-child(3n+3) { margin-right: 20px; }
.teaser:nth-last-child(1):nth-child(3n+1) { width: 240px; }
.teaser:nth-last-child(1):nth-child(3n+1) a.teaserButton { width: 240px; }
.teaser { margin-right: 0; min-height: auto; }

/* CONTENT LISTS: CONTACT, WEBINARS, ETC. */
.headerLine, .contactName { width: 280px; float: none; }
.contentLine, .contactInfo { width: 280px; float: none; }

/* CAMP REGISTRATION LIST */
.campLineHead { width: 280px; float: none; }
.campLineContent { width: 280px; float: none; }	

/* DOUBLE COLUMN LISTS */
.doubleColumnList li { margin-right: 0; }

/* SECURE LOGINS */
#login { padding-left: 20px; padding-right: 20px; }