/* Theming */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");

:root{
    --white: #f9f9f9;
    --black: #36383F;
    --grey: #85888C;
}
/* Reset */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* clear out margins and remove extra white space 
that appears to the right of the website */
html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    
}
body{
    background-color: var(--white);
    font-family: "Poppins", sans-serif;
    overflow-x: hidden;
}
div{
    background-color: var(--white);
}
.header{
    /* background-color: var(--black);
    box-shadow: 1px 1px 5px 0px var(--grey); */
    background-color: rgba(0, 0, 0, 0.8);
    padding-top: 0.8em;
    width: 100%;
}
.header > a >img{
/*set the size and pos. of the company logo in the header*/
    width: 141px;
    height: 67px;
    position: relative;
    left: 20px;
}
/*----------------------------------------------------------------------------------------------*/
/*-------------------------------------------- ABOUT ----------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
#page-one{
/*set the background image*/
    background-image: url('images/library.jpg');
}
#title{
/*set the height of title (company name) container*/
    height: 50vh;
/*make it transparent in order to see the bg image*/
    background-color: rgba(0, 0, 0, 0);
}
#title-text{
/*set the color of the div containing the title*/
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    margin: 0 auto;
    position: relative;
    top: 120px;
}
#title-text > h1, h2{
    color: white;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 30px;
}
#title-text > h1{
    font-size: 60px;
}
/* about info in page one */
#about-info{
    /* resizing */
    width: 80%;
    font-family: 'Times New Roman', Times, serif;
    font-size: larger;
}
/* container for the two columns*/
.responsive-two-columns {
    display:flex;
    flex-wrap:wrap;
    background-color: var(--white);
    padding-top: 3em;
    padding-bottom: 5em;
    border-bottom: double;
    border-color: #0096FF;
    border-width: 1px;    
}
/*first column on the left*/
.col-1-of-2{
    width: 33%;
    text-align: center;
    padding-top: 2em;
    color: #0096FF;
}
/*second column*/
.col-2-of-2{
    width: 50%;
}
/*container for the mission and vision sections*/
.mission-vision-container{
    text-align: center;
    width: 40%;
    float: left;
    padding-right: 5em;
    padding-top: 3em;
}
.mission-vision-container > h5{
    color: #0096FF;
}
#mission-vision-spacer{
    float: left;
    height: 100px;
    width: 10%;
}
/*----------------------------------------------------------------------------------------------*/
/*-------------------------------------------- PRACTICE AREAS ----------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*one half of the two columns in col-2-of-2 in the prac areas and articles sections*/
.half-column{
    float:left;
    width: 42%;
}
/*space between the two half columns in col-2-of-2*/
#half-column-space{
    float: left;
    width: 10%;
    height: 100%;
}
/*each separate section of text*/
.half-column-section{
    padding-bottom: 2em;
    line-height: 2;
}
.half-column-section > h3{
    color: #0096FF;
}
.half-column-section > p{
    /* font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */
    font-family: 'Times New Roman', Times, serif;
    font-size: 1em;
}
/*span elements for line breaks instead of using the br tag*/
.br { 
    display: block; 
    margin-bottom: 0em; 
}   
.brmedium { 
    display: block; 
    margin-bottom: 0.25em; 
}  
.brlarge { 
    display: block; 
    margin-bottom: 2em; 
} 
/*----------------------------------------------------------------------------------------------*/
/*-------------------------------------------- TEAM ----------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*container for the icon/avatar and team member details*/
.team-member{
    float: left;
}
/*space between the team member containers*/
.team-member-space{
    display: block; 
    width: 8em;
    height: 100%;
    float: left;
}
/*sizing the icon/avatar*/
.team-member >div> img{
    width: 100px;
    height: 100px;
    text-align: center;
}
#center-avatar{
/* position this specific image becasue it doesnt
appear centered bcoz of the long name */
    width: 70%;
    margin: 0 auto;
}
.member-name > p{
    text-align: center;
}
.member-name > h2{
    font-family: 'Times New Roman', Times, serif;
    font-size: smaller;
    color: black;
    text-align: center;
}
/*----------------------------------------------------------------------------------------------*/
/*-------------------------------------------- OUR APPROACH ----------------------------------------*/
/*----------------------------------------------------------------------------------------------*/


/*----------------------------------------------------------------------------------------------*/
/*-------------------------------------------- ARTICLES ----------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
.article-heading{
/* center align article heading */
    text-align: center;
}
/* article read more button */
#read-more1, #read-more2 {display: none;}
.clear-float{
    clear: both;
}
/*read more button for the rticles*/
.button-container{
    text-align: center;
    margin: 0 auto;
}
.article-button{
    background-color: #0096FF;
    border: none;
    color: white;
    padding: 10px 26px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
}
/*----------------------------------------------------------------------------------------------*/
/*-------------------------------------------- CONTACT US ----------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*half colum containing the info info*/
#contact-us{
    padding-top: 2em;
}

/* ---------------------------------------footer------------------------------------------- */
.footer{
    background-color: black;
    display:block;
    width:100%;
    height: 2em;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* Responsiveness */
/* small screens breakpoint */
/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media (max-width:768px) {
    #title-text{
    /* set the size of the title div to half the window size*/
        width: 100%;
        position: relative;
        padding-top: 1em;
        top: 5em;
        }       
    #title-text > h1, h2{
        font-size: 16px;
    }
    #title-text > h1{
        font-size: 32px;
    }
    .col-1-of-2, .col-2-of-2{
        float: none;
        width: 100%;
        padding-top: 1em;
    }
    .col-1-of-2 > h4{
        text-align: center;
        font-size: larger;
        padding-left: 0;
    }
    .col-2-of-2{
        padding-left: 4em;
    }
    .mission-vision-container{
        float: none;
        width: 100%;
        text-align: left;
    }
    #mission-vision-spacer{
        float: none;
        display: none;
    }
    .half-column{
        float:none;
        width: 100%;
    }
    .half-column-section{
        padding-right: 3em;
    }
    .half-column-section > h3{
        font-size: small;
    }
    #half-column-space{
        display: none;
    }
    .team-member{
        float: none;
        clear: none;
        width:80%;
        height: 120px;
    }
    .team-member-space{
        display: none;
    }  
    .member-icon{
        float: left;
        width: 30%;
    }
    .member-name{
        padding-top: 2em;
        clear: none;
    } 
    #center-avatar{
    /* position this specific image becasue it doesnt
    appear centered bcoz of the long name */
        width: 30%;
        margin:0%;
    }
    #our-approach-container{
        padding-right: 4em;
    }
    #our-approach-container >section> p{
        font-size: 14px;
    }
    #contact-us{
        padding-top: 1em;
    }
    #map-container{
    /*position the map; ove it to the left*/
        padding-top: 1em;
        /* position: relative;
        left:-70px; */
    }

}