/*************************************
* General
**************************************/

@font-face {
  font-family: "Bebas";
  src: url("../assets/fonts/bebas_neue/BebasNeueRegular.otf") format("truetype");
}

@import url('https://fonts.googleapis.com/css?family=Roboto');

body {
  font-family: Roboto, sans-serif;
  letter-spacing: 0.6px;
  margin: 0;
  line-height: 1.3em;
}

h3 {
  font-weight: lighter;
}

a:link {
  text-decoration: none;
  color: inherit;
}

a:visited {
  color: inherit;
}

a:active {
  color: inherit;
}

/*************************************
* Nav
**************************************/

.topnav {
  display: flex;
  overflow: hidden;
  background:rgb(28, 0, 0);
}

/* Style the links inside the navigation bar */
.topnav a {
  
  display: flex;
  background: rgb(28, 0, 0);
  text-align: center;
  padding: 1.6em;
  text-decoration: none;
  color: #FFF;
  
}
.topnav a.link1 {

}
/* Change the color of links on hover */
.topnav a:hover {
  background: #5B221B;
  cursor: pointer;
  
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background: #5B221B;
  cursor: pointer;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
	display:none;
  color:white;
  background: rgb(28, 0, 0);
}

nav {
  color: #FFF;
  /* position: fixed; */
  /* width: 100%; */
  /* height: 60px; */
}

nav ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0;
  background: rgb(28, 0, 0);
  margin: 0;
}

nav ul li {
  list-style: none;
  padding: 1.6em;
  /* font-size: 1.0vw; */
}

nav ul li:hover {
  background: #5B221B;
  cursor: pointer;
}

/* ************************************* */
/* * Header
/* ************************************* */

header {
  background-image: linear-gradient(to bottom left, rgb(28, 0, 0), rgb(160, 15, 23));
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-top {
  height: 120px;
}

.logo-top img {
  height: 100%;
}

/* *********************************** */
/* * Sidebar
/* *********************************** */

.sidebar {
  width: 300px;
  box-sizing: border-box;
  margin: 2em 0;
  color: #6f6f6f;
  font-weight: lighter;
  text-align: justify;
  padding: 1em;
}

.sidebar ul {
  padding: 0;
  list-style: none;
}

.sidebar ul li {
  list-style-type: none;
  padding: 15px;
  margin: 5px;
  background-color: rgb(246, 246, 246);
}

.sidebar ul li:hover {
  background-color: lightgrey;
}

.sidebar span {
  color: #973124;
  font-weight: bold;
}

/*************************************
* Main
**************************************/

main {
  /* border: 1px solid blue; */
}

.details {
  display: inline-block;
  flex-basis: 60%;
  box-sizing: border-box;
  color: #6f6f6f;
  font-weight: lighter;
  text-align: justify;
  padding: 1em;
}

.details span {
  color: #973124;
  font-weight: bold;
}

/* ************************ */
/* Contact Page */
/* ************************ */

.contact-section {
  margin-top: 10px;
}

.contact-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  box-sizing: border-box;
  margin: 2em 0;
  color: #6f6f6f;
  font-weight: lighter;
  text-align: justify;
  padding: 1em;
}

.contact-header {
  color: #6f6f6f;
  font-weight: lighter;
  text-align: center;
}

.contact-card {
  /* border: 1px solid red; */
  background-color:#f4f4f4;
  width: 250px;
  margin: 5px;
  padding: 20px;
  /* box-shadow: 1px 2px 3px lightgrey; */
}

.contact-name {
  font-weight: bold;
  /* text-decoration: underline; */
}

.contact-details {
  /* border: 1px solid blue; */
  margin: 0;
}
.contact-details h3 {
  font-weight: bold;
}

/* ************************* */
/* Clients Page */
/* ************************* */

.clients-container {
  display: flex;
  /* border: 1px solid red; */
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  box-sizing: border-box;
  /* margin: 2em; */
  color: #6f6f6f;
  font-weight: lighter;
  text-align: justify;
  padding: 1em;
}

.client-img-container {
  max-width: 200px;
  margin: 10px;
}

.client-img {
  width: 100%;
}

.practice-details {
  display: flex;
  flex-direction: column;
  /* flex-wrap: wrap; */
  justify-content: space-around;
  box-sizing: border-box;
  margin: 2em 0;
  color: #6f6f6f;
  font-weight: lighter;
  text-align: justify;
  padding: 1em;
}

.p-area h1 {
  color: grey;
}

/*************************************
* Practice Areas
**************************************/

.practice-areas {
  background-image: linear-gradient(to bottom left, rgb(160, 15, 23), rgb(28, 0, 0));
  padding: 1em;
}

.practice-areas h3 {
  color: #FFF;
  text-align: center;
}

.top-row, .bottom-row {
  display: flex;
  justify-content: center;
  margin: 2em;
}

.area {
  width: 160px;
  /* flex-basis: 50%; */
  margin: 1em;
}

.area img {
  width: 100%;
}

/*************************************
* Footer
**************************************/

footer {
  /* background: #99392D; */
  background: rgb(0, 0, 28);
  display: flex;
  justify-content: space-between;
  padding: 1em;
  font-size: .75em;
}

footer h4 {
  margin-top: 0;
  padding: 1em;
  color: #FFF;
}

footer h4 span {
  color: #FE9C9C;
}

.footer-left {
  text-align: center;
}

footer button {
  font-family: Bebas;
  letter-spacing: 0.6px;
  font-size: 1.2em;
  background: #000;
  color: #FFF;
  border-radius: 5px;
  border: none;
  padding: .5em 2em;
  cursor: pointer;
}

address {
  color: white;
  font-style: normal;
  font-weight: lighter;
  padding: 1em;
}

address span {
  font-weight: bold;
}

address a {
  text-decoration: none;
  color: white;
}

hr.new {
  border-top: 1px dashed #9e9d9e;
}

a.new1:link, a.new1:visited {
  color: #3484F0;
  text-decoration: underline;
  cursor: pointer;;
}


a.new1:link:active, a.new1:visited:active {
  color: #8B0000
}




/* **************************** */
/* Media Queries */
/* **************************** */

/* WEB */
@media only screen and (min-width: 1000px) {
  .area {
    /* flex-basis: 15%; */
  }
  .details {
    margin: 2em 0;
  }
}

/* WEB */
@media only screen and (min-width: 700px) {
  main {
    display: flex;
    justify-content: space-around;
  }
}

/* MOBILE */
@media only screen and (max-width: 700px) {
  nav {
    text-align: center;
  }
  nav ul {
    padding-left: 10px;
    padding-right: 10px;
  }
  main {
    padding-left: 10px;
    padding-right: 10px;
  }
  .sidebar {
    display: none;
  }
  .locations-header {
    display: none;
  }
  .area {
    min-width: 80px;
    margin: 1%;
    /* margin: 0; */
  }
}

/* TINY */
@media only screen and (max-width: 500px) {
  nav ul li {
    font-size: 3.0vw;
  }
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
/*@media screen and (max-width: 740px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    display: block;
	right:0;
	position:absolute;
  }
}*/

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 740px) {
  .topnav.responsive {position: relative; display: block; font-size: 3.0vw;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a.link1 {
    float: none;
    display: block;
    text-align: left;
	width: 60%;
  }
}