/* styles.css 
   Project: 
   Author: 
   Date: 
*/

/*google font*/

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Montserrat:wght@300;400&display=swap');

/*main css*/


* {
   box-sizing: border-box;
}

img {
   /*width: 100%;*/
   display: block;
}

body {
   background-color: #262626;
}



.overlay {
   z-index: 10;
}

.header {
   z-index: 10;
}



/*STORIES*/


.stories {
   width: 70%;
   margin: auto;
   margin-top: 40px;
}


#catagory {
   font-size: 1em;
   color: #4169e1;
   font-family: 'Avenir', sans-serif;

}

#title {
   font-size: 2.5em;
   line-height: 12px;
   margin: 0;
   padding: 0;
   font-family: 'Avenir', sans-serif;
   font-weight: bold;
   padding-top: 20px;
   line-height: 50px;
   color: whitesmoke;
}

#dek {
   font-size: 1.3em;
   font-family: 'Avenir', sans-serif;
   margin-top: 10px;
   line-height: 30px;
   color: whitesmoke;
}

#byline {
   font-family: 'Avenir', sans-serif;
   margin-top: 40px;
   color: whitesmoke;
}


#date {
   font-family: 'Avenir', sans-serif;
   margin-top: 5px;
   color: whitesmoke;
   margin-bottom: 30px;
}

#stocks {
   font-family: 'Avenir', sans-serif;
   color: whitesmoke;
   margin-bottom: 40px;
}

#storyphoto {
   margin-top: 20px;
   height: auto;
   width: 100%;
}

#photocredit {
   font-size: 0.8em;
   margin-top: 7px;
   font-family: 'Avenir', sans-serif;
   font-weight: lighter;
   color: lightgray;
   font-style: italic;
   margin-bottom: 40px;
}

#bodytext {
   font-family: 'Avenir', sans-serif;
   color: whitesmoke;
   font-size: 1.2em;
   line-height: 30px;
}

#bodytext p {
   font-family: 'Times New Roman', Times, serif;
   margin-bottom: 40px;
}

#bodyphoto {
   height: auto;
   width: 100%;
   margin-top: 50px;
}

#bodyphoto2 {
   height: 70%;
   width: 100%;
   margin-top: 50px;
}

#subheader {
   padding-top: 5px;
   font-size: 1.5em;
   font-weight: bold;
   font-family: 'Avenir', sans-serif;
   line-height: 30px;

}


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

.homecontentfive {
    position: relative;
    left: 45px;
    margin-top: 80px;
}

#desc {
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 1em;
   line-height: 155%;
   margin: 0;
   padding: 0;
   color: whitesmoke;
   font-style: italic; /* Italicize the text */
   font-weight: normal; /* Remove bold (set font weight to normal) */
}

#tradedesktopics,
#tradedeskdescription,
#tradedesktargets,
#tradedesketftargets {
  position: absolute;
  color: whitesmoke; /* White text for visibility */
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  z-index: 2;
}

#tradedesktopics {
  top: 20px;
  left: 20px;
  font-size: 2.2em;
  font-weight: bold;
}

#tradedeskdescription {
  top: 75px;
  left: 20px;
  font-size: 1.2em;
  line-height: 1.4;
  max-width: 90%; /* Prevent text from spilling out of the image */
}


#tradedesketftargets {
  top: 215px;
  left: 20px;
  font-size: 1em;
  line-height: 1.4;
  max-width: 90%; /* Prevent text from spilling out of the image */
}

#themecaption {
  bottom: 20px;
  left: 20px;
  font-size: 1.2em;
  font-weight: bold;
}

.tradedeskholder {
    display: flex;
    flex-direction: column; /* Stack the trade desk boxes vertically */
    gap: 20px; /* Adds space between each trade desk box */
    margin-top: 20px;
}

#tradedeskbox {
    position: relative;
    width: 100%; /* Full width */
    height: 300px; /* Fixed height for each box */
    margin: 10px 0; /* Adds space above and below each box */
    cursor: pointer;
}

#tradedeskbox img {
    width: 100%; /* Ensure image takes the full width */
    height: 100%; /* Ensure image fills the box height */
    object-fit: cover;
    filter: brightness(0.5);
    z-index: 1;
}

#headline1, #headline2, #headline3 {
   cursor: pointer;
}


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

.tradedeskcontent {
    margin-top: 100px;
}


.specialscontent {
    position: absolute; /* Ensures text aligns relative to this container */
    top: 10%;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


#specialsvideo {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 500px;
    z-index: 1;
    filter: brightness(0.6);
}

.specialsheader {
    font-family: 'Avenir', sans-serif;
    color: whitesmoke;
    font-size: 7em;
    font-weight: bold;
    text-align: center;
    z-index: 2;
}


.specialdescription {
    font-family: 'Avenir', sans-serif;
    margin-top: 20px;
    padding-right: 40px;
    padding-left: 40px;
    color: whitesmoke;
    font-weight: normal;
    font-size: 1.5rem;
    text-align: center;
    z-index: 2;
}

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

.header {
   background-color: #1C1C1C;
   padding-bottom: 7px;
   display: flex;
   align-items: center;
   width: 100%;
}

#westcoasttowallstreet {
   margin-left: 250px;
   margin-top: 15px;
   height: auto;
   width: 300px;
   margin-right: 60px;
}

.mini {
   float: left;
   height: 47px;
   width: 47px;
   margin-bottom: -20px;
   transform: translateY(8px);
}



.tablinks > img.mini {
    margin-top: -19px;

}

/* TABS */
.tab button {
   background-color: inherit;
   border: none;
   cursor: pointer;
   font-size: 20px;
   color: whitesmoke;  
   font-family: 'Avenir', sans-serif;
   margin-left: 30px;
   margin-top: 17px;
   align-items: center;
}

/* Change background color of buttons on hover */
.tab button:hover {
   color: #4169e1;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: inherit;
}

/* Style the tab content */
.tabcontent {
    border-top: none;
}

/*Subhead*/


.dropdown-content {
    display: none;
    position: absolute;
    background-color: #262626;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    top: 50;
    left: 725px;
    width: 20px;
    z-index: 3;
}

.dropdown-content.show {
   display: grid;
   grid-template-rows: auto;
}

.dropdown-content .tab {
    display: grid;
    grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
}

.dropdown-content .tab .tablinks {
    background-color: #262626;
    color: #4169e1;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 0; /* Remove margin between subtabs */
    text-align: left;
}







/*Tab 1 - Home*/






/*News Letter Ad*/
.newsletterad {
   position: relative;
   background-color: #1C1C1C;
   width: 50%;
   height: 450px;
   left: 40px;
   top: 30px;
   color: whitesmoke;
   padding-left: 20px;
   padding-right: 20px;
   line-height: 35px;
   padding-top: 10px;
}

h1, h3 {
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-weight: normal;
   color: whitesmoke;
}

h2 {
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 1.5em;
   line-height: 155%;
   margin: 0;
   padding: 0;
   color: whitesmoke;
}

h4 {
   font-family: 'Avenir', sans-serif;
   font-weight: lighter;
   word-wrap: normal;
}

.topnewsteaser h2 {
   margin-top: 15px;
}

.subscribebuttons {
   padding-top: 35px;
}

.emailinput {
   padding: 10px 0px 10px 20px;
   width: 70%;
}

.subscribebuttons input {
   font-size: 15px;
   font-family: 'Avenir', sans-serif;
}

.subscribe {
   padding: 9px 9px 11px 9px;
   font-family: 'Avenir', sans-serif;
   cursor: pointer;
}

.thankyou {
   padding-top: 20px;
   font-family: 'Avenir', sans-serif;
   font-weight: normal;
   display: none;
}

/*NEWS TEASER */
.topnewsteaser {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   margin-left: auto;
   margin-right: 80px;
   margin-top: -420px;
   width: 35%;
   height: 450px;
   background-color: #262626;
   cursor: pointer;
   color: whitesmoke;

}

.teasertext {
   font-family: 'Avenir', sans-serif;
   font-weight: lighter;
   line-height: 1.5;
}

.topnewsteaser img {
   max-width: 80%; /* Ensure the image doesn't exceed its container's width */
   max-height: 100%; /* Ensure the image doesn't exceed its container's height */
   object-fit: contain; /* Maintain aspect ratio while fitting the image */
   align-self: flex-start;
}

h6 {
   color: #4169e1;
   font-family: 'Avenir', sans-serif;
   font-weight: normal;
   font-size: 1.2em;
   margin-top: 25px;
   margin-bottom: 0;
   padding: 0;
}

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1% 2%;
    background-color: #1C1C1C;
    height: auto;
    margin-top: 500px;
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.2);
}

.footer img {
    height: auto;
    width: 300px;
    align-self: center;
}

.footer h6 {
    color: whitesmoke;
    font-family: 'Avenir', sans-serif;
    font-weight: normal;
    font-size: 1em;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    text-align: right;
}

.footer .address {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: auto;
}


/*Today's Headlines*/


.homecontenttwo {
    position: relative;
    left: 45px;
    margin-top: 220px;
}

#tab1divider {
    width: 40%;
    align-self: left;
    justify-self: left;
}

.todaysheadlines {
    align-content: left;
    justify-content: left;
}


.headlines-container {
    display: grid;
    grid-template-rows: repeat(4); /* Creates 4 rows with automatic height */
    padding-right: 50px;
}

.headlines-container h3 {

    font-weight: bold;
    word-wrap: normal;

}

.headlines {
    margin-top: 20px;
}

#timestamp {
   font-size: 0.8em;
   margin-top: 7px;
   font-family: 'Avenir', sans-serif;
   font-weight: lighter;
   color: lightgray;
   font-style: italic;
}





/*Latest and Top Picks*/

.homecontentthree {
    position: relative;
    left: 45px;
    width: 100%;
    margin-top: 80px;
}

.newspicks-container {
    display: grid;
    grid-template-columns: 50% 50%;
    width: 93%;
    gap: 20px; /* Optional: Adjust spacing between columns */
}



.thelateststories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 30px;
    row-gap: 50px;
}

.thelateststories img {
    width: 79%;
    height: auto;
}

.thelateststories h3 {

    font-weight: bold;
    font-size: 1.1em;
    width: 80%;
}

.thelateststories h6 {

    font-size: 0.9em;
    margin-bottom: -10px;
    margin-top: 15px;

}

.toppicksstories {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 30px;
    row-gap: 50px;
}

.toppicksstories img {
    width: 90%;
    height: auto;
}

.toppicksstories h6 {
    margin-bottom: 15px;
}

.toppicksstories h2 {
   padding-right: 10%;
}


.toppicksstories h4 {
   font-family: 'Avenir', sans-serif;
   font-weight: lighter;
   word-wrap: normal;
   color: whitesmoke;
   padding-right: 10%;
}

#thelateststories1 {
    cursor: pointer;
}

#thelateststories2 {
    cursor: pointer;
}

#thelateststories3 {
    cursor: pointer;
}

#thelateststories4 {
    cursor: pointer;
}

#toppicksstories1 {
    cursor: pointer;
}

#usnewsstories1 {
    cursor: pointer;
}

#usnewsstories2 {
    cursor: pointer;
}

#usnewsstories3 {
    cursor: pointer;
}

#globalnewsstories1 {
    cursor: pointer;
}

#globalnewsstories2 {
    cursor: pointer;
}

#globalnewsstories3 {
    cursor: pointer;
}


/*Regional and Global News*/


.homecontentfour {

    position: relative;
    left: 45px;
    width: 100%;
    margin-top: 80px;

}


.regionalnews {
    display: grid;
    grid-template-rows: auto auto;
    margin-top: 60px;
    width: 100%;
    margin-left: 50px;
}

.regionalnews h2 {

    font-size: 1.3em;
}

.usnewsstories {
    width: 81.7%;
    display: grid;
    grid-template-columns: 33% 33% 33%;
    margin-top: 30px;
    column-gap: 1%;

}


.usnewsstories img {
    width: 79%;
    height: auto;
}

.usnewsstories h3 {

    font-weight: bold;
    font-size: 1.1em;
    width: 80%;
}



.regionalmarketsnewsdivider {

    width: 90%; 
    margin-left: 0%; 
    border: none; 
    border-top: 2px solid #4169e1; 
    margin-top: 5px;

}

.northamericadivider {
    width: 77%; 
    margin-left: 0%; 
    border: none; 
    border-top: 1px solid #4169e1; 
    margin-top: 5px;
}







.globalnews {
    display: grid;
    grid-template-rows: auto auto;
    margin-top: 50px;
    width: 100%;
}

.regionalnews h2 {

    font-size: 1.3em;
}

.globalstories {
    width: 81.7%;
    display: grid;
    grid-template-columns: 33% 33% 33%;
    margin-top: 30px;
    column-gap: 1%;

}


.globalstories img {
    width: 79%;
    height: auto;
}

.globalstories h3 {

    font-weight: bold;
    font-size: 1.1em;
    width: 80%;
}

.globaldivider {
    width: 77%; 
    margin-left: 0%; 
    border: none; 
    border-top: 1px solid #4169e1; 
    margin-top: 5px;
}
















/*General Tab Content*/


.storyteaser {
   display: grid;
   grid-template-columns: 30% 70%;
   width: 100%;
   height: 80%;
   cursor: pointer;
   justify-content: center;

}


.storydivider hr {
   width: 90%;
   margin-left: 40px;
   padding-right: 10px;
   border: none;
   border-top: 1px solid #4A4A4A;
   margin-top: 40px; /* Use a viewport width unit */
   margin-bottom: 0px;
}

.storyteasertext {
   padding-top: 11px;
   width: 100%;
   font-family: 'Avenir', sans-serif;
   font-weight: lighter;
   line-height: 1.5;
   color: whitesmoke;
   word-wrap: normal;
}

.storyteaser h2 {
   margin-top: 2%;
}


.storyteaser img {
   width: 80%; /* Ensure the image takes up the full width of its grid cell */
   height: auto; /* Maintain the aspect ratio */
   margin-left: 40px;
   padding-top: 40px;

}

h5 {
   margin-left: 40px;
   margin-top: 40px;
   margin-bottom: 0;
   font-size: 5em;
   color: #4169e1;
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}















/*Tab 2 - News*/


.newsdivider hr {
   width: 213px;             
   margin-left: 40px;       
   border: none;           
   border-top: 4px solid #4169e1; 
   margin-bottom: 100px;
   margin-top: -10px;
}














/*Tab 3 - About*/


.aboutcontentabout {
  display: grid;
  grid-template-columns: 1fr 1fr; /* two equal columns */
  column-gap: 35px; /* space between text and image */
  margin: 0 35px; /* space between content and page edge */
  align-items: start; /* vertically align text and image */
}

.abouttextabout {
  display: flex;
  flex-direction: column;
  gap: 20px; /* spacing between <h3> sections */
}

.aboutcontentabout img {
  width: 100%; /* makes image responsive */
  height: auto;
  border-radius: 12px; /* optional: rounded corners */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* optional styling */
}

.aboutcontent {
   padding-left: 35px;
   padding-right: 35px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   row-gap: 50px;
   padding-top: 20px;
   column-gap: 50px;
}

.abouttext {
   width: 100%;
   word-wrap: normal;
}

.abouttext img {
   width: 100%;
   height: auto;
   justify-self: center;
}

#tab3 hr {
   margin-top: 50px;
   width: 93%;
   align-self: left;
   margin-left: 35px;
   margin-bottom: -40px;
}


.approachcontent {
   margin-top: 45px;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 4%;
   width: 93%; /* Ensure the grid takes up the full width */
   margin-left: 35px;
   margin-right: 40px;
}


.bios {
   margin-top: 45px;
   margin-bottom: 90px;
   display: grid;
   grid-template-columns: 30% 70%;
   gap: 1%;
   width: 93%; /* Ensure the grid takes up the full width */
   margin-left: 35px;

}

.bios img {
   width: 80%;
   height: auto;
}

#bioname {
   margin-bottom: 10px;
}

h11 {
   font-size: 20px;
   color: whitesmoke;
   font-family: 'Avenir', sans-serif;
}

#biotitle {
   margin-bottom: 10px;
}

.biocontent img {
   width: 50px;
   height: auto;
}

#linkedinimg {
   cursor: pointer;
}

#linkedinimgone {
   cursor: pointer;
}

#linkedinimgtwo {
   cursor: pointer;
}

#linkedinimgthree {
   cursor: pointer;
}

#linkedinimgfour {
   cursor: pointer;
}








h10 {
   font-size: 27px;
   color: whitesmoke;
   font-family: 'Avenir', sans-serif;
   font-weight: bolder;
}







/*TAB 4 - Subscribe*/


.newslettersubscribe {
   width: 70%;
   height: 750px;
   background-color: #1C1C1C;
   margin: 0 auto;
   padding-top: 5px;
   margin-top: 30px;
   padding-left: 15px;
   padding-right: 15px;
}

.newslettersubscribe h1,
.newslettersubscribe h3 {
   text-align: center;
}

.newslettersubscribebuttons {
   display: flex;
   justify-content: center; /* Center items horizontally */
   align-items: center; /* Center items vertically */
   width: 100%;
   margin-bottom: 60px;
   padding-top: 35px;
}

.newslettersubscribebuttons input {
   font-size: 15px;
   font-family: 'Avenir', sans-serif;
}

.newsletteremailinput {
   padding: 10px 0px 10px 20px;
   width: 70%;
}

.tabsubscribe {
   padding: 9px 9px 11px 9px;
   font-family: 'Avenir', sans-serif;
   cursor: pointer;
   margin-left: 2px;
   height: 44.5px;
}


.teaserfont2 {
   margin-bottom: 20px;
}


.newsletterthankyou {
   padding-top: -10px;
   margin-bottom: 50px;
   font-family: 'Avenir', sans-serif;
   font-weight: normal;
   display: none;
}



.expandable-list {
   margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.expandable-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0; /* Remove padding */
}

.expandable-item img {
    width: 100%;
    height: 50px;
    object-fit: cover;
    transition: all 0.3s ease;
}

.expandable-item .caption {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    color: whitesmoke;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px 10px;
    border-radius: 5px;
    transition: all 0.3s ease;
    opacity: 0;
    z-index: 2; /* Ensure the caption is above the overlay */
}

.expandable-item .arrow {
    position: absolute;
    left: 10px;
    top: 23%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    transition: all 0.3s ease;
    z-index: 2; /* Ensure the arrow is above the overlay */
}

.expandable-item .arrow img {
    transition: all 0.3s ease;
}

.expandable-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Dark overlay */
    transition: all 0.3s ease;
    z-index: 1; /* Ensure the overlay is above the image but below caption */
}

.expandable-item:hover::before {
    background-color: rgba(0, 0, 0, 0); /* Remove dark overlay on hover by default */
}

.expandable-item.expanded:hover::before {
    background-color: rgba(0, 0, 0, 0.5); /* Keep dark overlay on hover when expanded */
}

.expandable-item.expanded img {
    height: 300px; /* Set to the height you want when expanded */
    background-color: rgba(0, 0, 0, 0.5);
}

.expandable-item.expanded .caption {
    bottom: 50%;
    left: 50%;
    font-size: 2.5em;
    font-family: 'Avenir', sans-serif;
    transform: translate(-50%, 50%);
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Adds ellipsis (...) when text overflows */
    max-width: 90%; /* Adjust as needed */
}



















/*Subtab 1*/












/*Subtab 2*/



.financedivider hr {
   width: 319px;             
   margin-left: 40px;       
   border: none;           
   border-top: 4px solid #4169e1; 
   margin-bottom: 100px;
   margin-top: -10px;
}







/*Subtab 3*/


.economicsdivider hr {
   width: 425px;             
   margin-left: 40px;       
   border: none;           
   border-top: 4px solid #4169e1; 
   margin-bottom: 100px;
   margin-top: -10px;
}













/*ADJUST MENU*/

.menu-button {
    display: none;
    position: absolute;
    top: 10px;
    left: 10px;
    cursor: pointer;
}

.menu-button img {
    margin-left: 20px;
    margin-top: 20px;
    width: 50px;
    height: 50px;
    text-align: left;
}

.menu {
    z-index: 100;
    position: fixed;
    top: 0;
    left: -33%;
    width: 33%;
    height: 100%;
    background-color: #1C1C1C;
    padding-top: 50px;
    transition: left 0.3s ease;
    display: flex;
    flex-direction: column;
}

.menu button {
    background-color: inherit;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: whitesmoke;
    font-family: 'Avenir', sans-serif;
    margin: 20px 0;
    text-align: left;
    margin-left: 26px;
}

#closeMenu {
   align-self: left;
   width: 50px;
   height: 55px;
   margin-left: 100%;
   margin-top: -31px;
   background-color: rgba(30, 34, 45, 0.5);
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 99;
    display: none;
    transition: all 0.3s ease;
}

.overlay.show {
    display: block;
}

.overlay .closebtn {
    position: fixed;
    top: 20px;
    right: 45px;
    font-size: 60px;
    z-index: 101; /* Ensure it is above the overlay */
    cursor: pointer; /* Ensure it's clickable */
}

.content {
    padding: 20px;
}

.menu button:hover {
   color: #4169e1;
}

.adjustsubscribebutton {
    display: inline-grid;
    grid-template-columns: 1fr 1fr; /* Create two columns for the button and image */
    align-items: center; /* Center items vertically */
    gap: 10px; /* Adjust the space between the button and image as needed */
}

.adjustmini {
    width: 50px;
    height: auto;
    top: 41.5%; /* Move up by 5 pixels from the original 100px */
    margin-left: 126px;
    position: absolute; /* Ensure it is positioned absolutely */
}









































/* Responsive adjustments */

@media (max-width: 1200px) {
    /* Subtab 1 */

    .storyteasertext {
        position: static;
        font-size: 1.3vw;
        padding-right: 40px;
        margin-top: 0.1%;
    }

    .storyteaser {
        column-gap: 3%;
    }

}

@media (max-width: 1170px) {

    .storyteaser img {
        max-width: 70%;
        margin-left: 54px;
    }

    .newsletterthankyou {
        size: .07em;
    }




}









@media (max-width: 850px) {
    /*General Content*/

    .titleimage {
        left: 100px;
    }

    .tab {
        display: none;
    }

    .menu-button {
        display: block;
    }

    .overlay.show {
        display: block;
    }

    .menu.show {
        left: 0;
    }

    /* Tab 1 - Home */
    .newsletterad,
    .topnewsteaser {
        width: 90%;
        margin: auto;
        height: auto;
    }

    .newsletterad {
        margin-top: 30px;
        padding-bottom: 40px;
        left: 0%;
    }

    .topnewsteaser {
        margin-top: 50px;
    }

    .topnewsteaser img {
        max-width: 100%;
    }

    .header {
        height: 220px;
    }

    /* STORYTEASER */
    .storyteaser img {
        width: 90%;
    }

    .storyteaser {
        column-gap: 3%;
    }

    .storyteaser h4 {
        display: none;
    }




    /* Tab 3 - About */
    .aboutcontent {
        grid-template-columns: 1fr;
    }

    .abouttext {
        width: 90%;
    }

    .aboutcontent img {
        position: flex;
        width: 100%;
        padding-right: 50px;
    }

    .bios {
        grid-template-columns: 1fr;
    }

    #aidanheadshot {
        justify-self: left;
        width: 50%;
        height: auto;
        margin-bottom: 20px;
    }

    .biocontent {
        text-align: left;
    }

    #linkedinimg {
        justify-self: left;
        width: 40px;
        height: auto;
    }

    #westcoasttowallstreet {
       margin-left: auto;
       height: auto;
       margin-top: 75px;
       width: 300px;
       margin-right: auto;
       justify-self: center;
       align-self: center;

   }

   .newsletterad {
      margin-top: 0px;
   }

   .newslettersubscribe {
      width: 95%;
   }

   #tab3 hr {
   position: relative;
   margin-top: 50px;
   width: 93%;
   align-self: center;
   justify-self: center;
   margin-left: 3.5%;
   margin-bottom: 0px;
   }

   #ourapproach {
    position: flex;
    margin-right: 5px;

   }

   .approachcontent {
      grid-template-columns: 1fr; /* Change to a single column */
      gap: 20px; /* Adjust gap if necessary */
      margin-left: 35px; /* Adjust margin for better layout on small screens */
      padding-right: 30px;
   }

   #biodescription {
      padding-right: 30px;
   }

   .stories {
    width: 80%;
   }

   #tab2 h6 {

        font-size: 1.5em;

   }

   #tab2 h2 {
        font-size: 2em;
         
   }

   .storyteasertext {
        margin-left: 10px;
        margin-top: 3px;
   }

   .homecontenttwo {
        left: 4%;
        margin-top: 80px;
       
   }

   .storyteasertext {
        margin-left: 10px;
        margin-top: 3px;
   }

   .homecontenttwo, .homecontentthree {
       left: 4%;
       margin-top: 80px;
   }

   .regionalnews {

       margin-left: 0px;
    
   }

   #specialsvideo {
    margin-top: -50px;
/*    MARK*/
   }

   .specialsheader {
    font-size: 4em;
/*    MARK*/
   }
   
}


@media (max-width: 930px) {
    .specialsheader {
    font-size: 4em;
   }
/*   MARK*/
    
    .tradedeskcontent {
    margin-top: 0px;
/* Mark */
    }
}






@media (max-width: 590px) {
    .footer {
        grid-template-columns: 1fr;
        display: inline-grid;
        height: auto;
    }

    .address {
        display: inline-grid;
        align-self: center;
        margin-left: 0;
    }

    #footerimg {
        width: 60%;
        height: auto;
        justify-self: center;
    }

    .footer .address {
        display: block;
        margin: 0 auto;
        text-align: center;
        align-items: initial;
    }

    .footer h6 {
        text-align: center;
        margin-bottom: 2px;
    }

   #specialsvideo {

    margin-top: -110px;

/*    MARK*/
    }

}

@media (max-width: 690px) {

    #specialsvideo {

    margin-top: -105px; 

/*    MARK*/
   }

   .specialsheader {
    font-size: 3em;
/*    MARK*/
   }

   .specialdescription {
    font-size: 1em;
/*    MARK*/
   }

   .tradedeskcontent {
    margin-top: -60px;
/*    MARK*/
    }


}


/*REAL MOBILE*/

@media (max-width: 540px) {

    .adjustmini {

        display: none;
    }


      




    /*   CHECK THIS OUT */



    .subscribe {
        margin-top: 15px;
    }

    .emailinput {
        width: 90%;
    }



/*   CHECK THIS OUT */

}

@media (max-width: 520px) {

    .header img {
        justify-self: center;
    }

    .thelateststories h3 {     

    font-size: 0.9em;

    }

    .thelateststories h6 {

        font-size: 0.7em;
    }

    .toppicks {

        padding-right: 8%;
    }

    .stories h6 {

        font-size: 0.9em;

    }

    .toppicksstories h2 {

        font-size: 1.05em;
    }

    .toppicksstories h4 {

        font-size: 0.7em;

    }

   .regionalnews h3 {     

        font-size: 0.8em;

    }

    .regionalnews h6 {

        font-size: 0.9em;

    }

    .homecontenttwo, .homecontentthree, .homecontentfour, .homecontentfive {

        padding-right: 5%;
    }

    .newspicks-container h2 {

        font-size: 1.45em;
    }

    .storydivider hr {
       
        width: 85%;
        margin-left: 28px;
       
    }

   .storyteaser img {
      
      margin-left: 37px;

   }

   #tradedesketftargets {
    display: none;
   }

   #tradedeskdescription {
    font-size: 1em;
   }
   


}

@media (min-width: 481px) and (max-width: 519px) {
  
    .homecontenttwo, .homecontentthree, .homecontentfour, .homecontentfive {

        left: 27px;
    }

   #desc {
    padding-right: 100px;
   }

}




@media (max-width: 480px) {



    .menu button {

        margin-left: -10px;
        align-self: left;


    }

    .expandable-item .arrow {

        left: 50%;

    }


    .expandable-item.expanded .caption {


        font-size: 1.5em;

    }


    .newspicks-container h2 {

        font-size: 1em;
    }

   #regionalheader {

      margin-left: -20px;

   }

   .northamericadivider{

      margin-left: 1px;

   }

   .regionalmarketsnewsdivider {

   margin-left: -30px;

   }

   .homecontentfive {

   display: none;
   

   }

   



     
    .regionalnews,
    .globaldivider,
    .globalstories {

        margin-left: 10px;
        padding-right: 0%;
        margin-left: 0px;
        justify-content: left;
        align-content: left;

    }

    
   
   

}





/*MINIMUM WIDTH ADJUSTMENTS*/

@media (min-width: 850px) {
    .overlay {
        display: none !important; 
    }

    #closeMenu {
         display: none !important; 
    }
}