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


/* BLOCKQUOTES & FIGURES */
blockquote { padding-top: 1em; }
div.sidebarL blockquote, 
div.sidebarR blockquote { text-align: center; }
figure.quote figcaption { text-align: left; margin-left: 50%; }
.columnIntro blockquote { margin-left: 0; margin-right: 0; }


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

/* PORTAL NAVIGATION & LOGO */
#logo { width: 580px; float: none; }
#logo a { margin: 0 auto; }
#portals { width: 580px; height: 110px; float: none; }
#portals ul { margin-top: 0; margin-left: 68px; }

/* FOOTER */
#footer.container { width: 430px; }
#socialMedia { float: none; padding-bottom: 55px; }
a#facebook, 
a#twitter, 
a#instagram, 
a#youtube, 
a#linkedin { width: 78px; height: 78px; }
#contact { float: none; }

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

/* 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: 140px; }
#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: 140px; 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: 580px; 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; }
#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; }
#bannerImage { position: relative; }

/* EMAIL SIGN-UP BAR */
.signupLabel { width: 80px; padding-left: 0; background-color: red; }
.signupButton { width: 480px; }
.signupButton a { width: 440px; }

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

/* TEASER BOXES */
.teaser:nth-child(3n+3) { margin-right: 20px; }
.teaser:nth-child(2n+2) { margin-right: 0; }
.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:nth-last-child(1):nth-child(odd) { width: 540px; margin-right: 0; }
.teaser:nth-last-child(1):nth-child(odd) a.teaserButton { width: 540px; }
.teaser:nth-last-child(1):nth-child(odd) h6 { width: 25%; }