@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Sulphur+Point:wght@300;400;700&display=swap');

html, body, section {
	width:100%;
	height:100%;
  margin:0;
  padding:0;
}

html{
	font-family: 'Sulphur Point', sans-serif;
}
a{
	text-decoration: none;
	color:grey;
}

.sections{
  max-width:98%;
margin:10px auto;
}

.sections:after{
  content: "";
  clear: both;
   display:block;
}

/*TITLE*/

#Section-Title{
  display:block;
	margin: 2% auto;
	width:90%;
  overflow: hidden;  
  }
  
#Title-Grid{
  display:block;
}
  
  .h6{
	font-family:'Sulphur Point', sans-serif;
  font-size:4vw;
  text-align:center;
  font-weight: lighter;
  }

  .line {
  display:block;
	width:100%;

  }
  
#Section-Title:after{
content:"";
display:block;
clear:both; 
}

@media only screen and (max-width: 800px) {
	
	#Section-Title{
 	margin: 5% auto;
		width:85%;
    overflow: hidden;
    }
    
    #Title-Grid{
      grid-template-columns:90% 10%;
    }

    .h6{
      font-size:3vw;
    }		
}

@media only screen and (max-width: 500px) {
	
	#Section-Title{
		width:90%;
		overflow:visible;
    margin: 10% auto;
  }
  #Title-Grid{
  grid-template-columns:repeat(1,1fr);
  }

  #Title-Grid .line:nth-of-type(1) {
    order: 2;
  }
  
  #Title-Grid .h6:nth-of-type(2) {
    order: 1;
  }

  .h6{
    font-size:10vw;
  }

}


/*LAWYERS CONTAINER*/
#TEAM-CONTAINER{
  background-color:white;
  display:grid;
  grid-template-columns:repeat(4,1fr);
 grid-gap:15px;
  width:90%;
  margin:0 auto;
}


@media only screen and (max-width: 800px) {
	
	#TEAM-CONTAINER{
    grid-template-columns:repeat(2,1fr);
		margin: 5% auto;
    width:90%;
  }
}


@media only screen and (max-width: 500px) {

	#TEAM-CONTAINER{
    grid-template-columns:repeat(1,1fr);
		margin: 0 auto;
    width:90%;
  }
}

/*LAWYERS SECTION*/

.TEAM{
  background-color:black;
  position:relative;
  height: auto;
  overflow:hidden;

}

.TEAM H3{
  position:absolute;
  top:80%;
  width: 100%;
  text-align:center;
  font-size:1.25vw;
  color:#fff;
  z-index:1;
  line-height: 1.5em;
  letter-spacing: .1rem;
  
}

.TEAM H3 hr{

  width: 20%;
  text-align:center;
  margin: .5em auto;
}


.TEAM img{
  object-fit:cover;
  vertical-align: middle;
}

.TEAM img:hover{
  opacity:1;
}


@media only screen and (max-width: 800px) {
	.TEAM H3{
    font-size:2vw;	
  }

  .TEAM .material-icons{
    font-size:2vw;
  }

  .TEAM img{
    opacity:1;
}
}

@media only screen and (max-width: 500px) {

	
  .TEAM H3{
    font-size:6vw;	
  }

  .TEAM .material-icons{
    font-size:5vw;
  }
}