body{
background-color: #f5f5f5;
}

#headingStatement{
margin-left: 400px;
}
#headingStatement h2{
font-size: 60px;
width: 860px;
height: 360px;
}


#title {
color: black;
float: left;
}

#blogLink{
color: black;
text-decoration: none;
}

.dropdown{
position: relative;
}
.dropdownMenu{
visibility: hidden;
background-color: black;
color: white;
padding: 15px;
width: auto;
position: absolute;
top: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdownMenuOpened{
visibility: visible;
background-color: black;
color: white;
padding: 15px;
width: auto;
position: absolute;
top: 100%;
left: 0;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdownMenuOpened  a{
color: white;
}

.studyLink{
color:black;
text-decoration: underline;
font-weight: 400;
}

.studyLink:hover{
font-weight: 600;
}

#navigation{
display:inline-block;
margin-left: 50px;
width: 1440px;
}

 @media screen and (orientation: portrait){
body{
overflow-x: hidden;
}


}
#navigation h1{
font-size: 28px;
font-weight: 400;
}

#links{
position: relative;

left:  700px;
top:5px;
display: inline-flex;
gap:30px;
font-size: 20px;

}



h4{
font-weight: 300;
}

#links a{
color: black;   

}


.header{
gap:20px;
}


.caseStudy{
display: flex;
flex-direction: row;
gap: 180px;
width: 1400px;
margin-left: 40px;
margin-bottom: 35vh;
}

.caseStudyWebsite{
display: flex;
flex-direction: row;
gap: 180px;
width: 1400px;
margin-left: 40px;
margin-bottom: 35vh;    
}

.caseStudy p{
width:  600px;


}

.caseStudySubtext {
margin-left: 6px;
}

.caseStudyWebsite p{

max-width:600px;
}


@media screen and (max-width: 945px){
.caseStudy{
gap: 80px;
margin-left: 20px;
}
}




@media screen and (max-width: 820px){
 #headingStatement{
margin-left: 50px;
}
#headingStatement h2{
font-size: 45px;
width: 400px;
height: 400px;
}

 #navigation{
margin-left: 5px;
 }
#links{
left: 20px;
gap:10px;
}
.caseStudy {
flex-direction: column;
width: 600px;
margin-left: 5px;
}

.caseStudy p{
width: 400px;
}

.caseStudyWebsite{
flex-direction: column;
width: 600px;
margin-left: 5px;
}

.caseStudyWebsite p{
width: 400px;
}

.caseStudyShowcase{
min-width: 400px;
padding: 5px;
}

.caseStudyShowcaseWebsite{
min-width: 400px;
padding: 5px;
}



#navigation{
min-width: 606px ;
}
#blogContent{
min-width: 350px;
display: flex;
flex-direction: column;
justify-content: space-between;
column-gap: 45vw;
}

.blogParagraph{
white-space: normal;
overflow-wrap: break-word;
min-width: 350px;
min-height: 250px;
font-size: smaller;
}


#searchContainment{
min-width:250px;
padding: 15px;
}

#searchBody{

min-width: 250px;
}


.blogParagraph p{
min-width: 300px;
min-height: 150px;
}



.blogPoints{
white-space: normal;
overflow-wrap: break-word;
min-width: 320px;
min-height: 360px;
font-size: smaller;
padding-bottom: 32px;

}

.blogPoints ul{
min-height: 360px;
}
.blogPoints ul li{
min-width: 320px;
min-height: 32px;
}

.findBlogs{
margin-left: 100px;
margin-top: 100px;
}

#blogSearch{
min-width: 240px;
}

#blogContainer{
min-width:90%;
padding-left: 15px;
padding-right: 15px;
}

.blogPost{
min-width: 240px;
}

#blogPic{
width: 8vw ;
height: 8vw ;
}
#searchBar {
min-width:240px;
}

}



.CaseStudy h2{
font-size: 36px;
font-weight: 900;
}

.CaseStudyWebsite h2{
font-size: 36px;
font-weight: bold;
}

.caseStudy p{
font-size: 20px;
}

.caseStudyWebsite p{
font-size: 20px;
}

#main{
display: flex;
flex-direction: row;
margin-top: 80px ;
}

.caseStudyText{
padding-top: 120px;
}


.caseStudyText h1{
font-size: 45px;
}

.caseStudyShowcase{
width:400px;
height: 460px;
background-color: rgb(230, 226, 226);
display:block;
border-radius: 10px;
padding: 16px;
}

.caseStudyShowcaseWebsite{
width:400px;
height: 400px;
background-color: rgb(230, 226, 226);
display:block;
border-radius: 10px;
padding: 16px;


}

.caseStudyShowcase img{
margin-top: 8px;
margin-left: 64px;
}

.caseStudyShowcaseWebsite img{
margin-top: 76px;
margin-left: 24px;
}


#searchContainment{
padding-top: 120px;
}

#blogSearch{
color:black;
min-height:32px;
width: 400px;
border-radius: 10px;
font-family: 'Times New Roman', Times, serif;
font-size: 16px;
}

#searchBar{
min-width: 450px;
}

#searchBar{
display: flex;
flex-direction: column;
justify-content: left;
}
#resultsList {
list-style-type: none;
min-width: 460px;
padding:0;
 margin-top: 10px;
}
#resultsList li {
 padding: 8px;
 margin-right: 46px;
 min-width: 460px;
 border-bottom: 1px solid black;
}

.blogIcon{
min-width: 80px;
min-height: 80px;
border-radius: 50%;
grid-column: 1/2;
}

.blogText{
grid-column: 2/2;
display: grid;
column-gap: 56px;
grid-template-rows: 32px, 24px;

}

.blogText a {
font-weight: 400;
}

.blogText h2{
display: inline-block;
min-height: 25px;
grid-row: 1/2;
}

.blogText h4{
grid-row: 2/2;
}

#searchBody{
margin: auto;
max-width:400px;

}

.blogPost{
text-align: left;

border-bottom: 3px solid black;
max-width: 400px;
}

#blogContainer{
display:grid;
grid-template-columns: 16vw 42vw;
grid-template-rows: 320px;
margin: auto;
width: 60%;
padding-top: 120px;
height: 1200px;
margin-bottom: 80px;
}

#blogPic{
grid-row:1/1;
 margin: auto;
grid-column: 1/2;
width: 16vw;
height: 16vw;
padding-top: 20px;
}

#blogPic img{
width:  8vw;
height: 8vw;
border-radius: 20px;
}

.findBlogs{
margin-left: 520px;
margin-top: 100px;
}


#toolsBar{
display: flex;
flex-direction: column;
}

#serviceBar{
display: flex;
flex-direction: column;
}


#toolbarClosed{
display: none;
}
#toolbarOpened{
display:block;
}

#blogContent{
display: flex;
flex-direction: column;
justify-content: space-between;
grid-column: 2/2;
max-width: 42vw;
max-height: 1000px;

}
#blogContent div{

max-width: 40vw;
max-height: 14vw;
margin-bottom: 8vw;

font-size:16px;
} 

.blogParagraph p{
flex: 1;
max-width: 114vw;
}