/* 
CSS Document for D911 Teams 09/11/23 by Kolen Mackey for Datadial Ltd. 

* This document is dependenent on the main D911.css and only adds addtional styles

*/

/* Reset*/
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/*Css Variables*/
:root {
  --team-black: #202020;

  --brand-color1: #eb6a2e;
  --brand-color2: #eb5e55;

  --site-black: #2b2e33;
  --site-grey: #48586a;
  --site-mid-grey: #7a8391;
  --site-light-grey: #c0c8d2;

  --border-color: #444;

  --site-highlight: #c3dfe0;
  --site-green: #65aa5e;
  --site-red: #a7252c;

  --transition: all ease-in-out 0.4s;
}

/*------------------------------------------------------------------------ Global Styles*/

#teamFrame {
  background: var(--site-black);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  max-width: 400px;
  margin: 0 auto;
}
#teamFrame * {
  font-family: 'Poppins', sans-serif;
}
#teamFrame a {
  color: currentColor;
}
.team-header {
  background: #fff;
  display: block;
  position: relative;
  padding: 40px 35px 35px;
}
.team-header img {
  height: auto;
}
.th-logo {
  display: block;
  margin: 0 auto 40px;
  width: 80%;
  max-width: 180px;
}
.profile-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0 0 -100px;
  z-index: 10;
}
.profile-head a {
  display: block;
}
.profile-head .ph-location,
.profile-head .ph-contact {
  width: 60px;
  height: 60px;
  text-align: center;
  border-radius: 50%;
  background: var(--brand-color1);
  padding: 15px;
}
.profile-head .ph-location span,
.profile-head .ph-contact span {
  display: block;
  margin: -102px -35px 10px;
}
.profile-head .ph-img {
  width: 140px;
  height: 140px;
}
.profile-head .ph-img img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.team-body {
  display: block;
  padding: 80px 35px 35px;
  text-align: center;
}

.tb-name {
  font-size: 1.4rem;
  font-weight: 600;
  display: block;
  margin: 0 0 10px;
}
.tb-company {
  display: block;
  background: #fff;
  color: var(--site-black);
  font-size: 0.85rem;
  height: 20px;
  line-height: 20px;
  border-radius: 10px;
  width: 80%;
  margin: 0 auto 20px;
  max-width: 250px;
}
.tb-position span {
  display: inline-block;
  color: var(--brand-color1);
  margin: 0 5px;
}
.tb-about {
  display: block;
  margin: 20px auto 40px;
  border-top: 1px solid var(--border-color);
  padding: 0;
}
.tb-about p {
  font-size: 0.8rem;
  line-height: 1rem;
}
.tb-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.tb-icons > div {
  display: block;
  margin: 0 0 20px;
}
.tb-icons > div:nth-child(5n + 2) {
  width: calc(100% - 120px);
}
.tb-icons a {
  display: block;
  padding: 15px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
}

.tb-icons span {
  display: block;
  font-size: 0.6rem;
  margin: 10px 0;
}
.tb-icons img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.roundx {
  display: block;
  overflow: hidden;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.orange {
  background: var(--brand-color1);
}
.wht-border {
  border: 2px solid #fff;
}
.tb-share {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.tb-share .tbs-btn {
  display: block;
  background: var(--brand-color1);
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  width: 70%;
}
.tb-share .tbs-share {
  width: 70px;
}
.tb-share .tbs-share img {
  height: auto;
}

.tb-video {
  display: block;
  padding: 40px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  margin: 40px 0 0;
}
.tb-video iframe {
  max-width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

.tb-quote {
  display: block;
  padding: 40px 0;
}
.tb-quote .tbq-title {
  font-size: 1rem;
}
.tb-quote .tbq-title span {
  display: block;
  width: 60px;
  margin: 0 auto;
  font-size: 2rem;
  line-height: 1rem;
  font-family: 'Times New Roman' !important;
  color: var(--brand-color1);
}
.tb-quote blockquote {
  display: block;
}
.tb-quote blockquote p {
  display: block;
  font-size: 0.8rem;
  line-height: 1rem;
}
.tb-quote blockquote cite {
  display: block;
  font-size: 0.7rem;
}

.team-footer {
}
.tf-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 6px;
  padding: 6px;
}
.tf-gallery img {
  display: block;
  height: auto;
  object-fit: cover;
}
/*----------------------------------------------------------------------------------------------------------------------- Begin Responsive Queries*/
/* ----------------------------------------------------------------------- Min Withs Smallest to largest */
@media only screen and (min-width: 768px) {
}
@media only screen and (min-width: 1024px) {
}
@media only screen and (min-width: 1280px) {
}
@media only screen and (min-width: 1440px) {
}
@media only screen and (min-width: 1680px) {
}

/* ----------------------------------------------------------------------- MAX Withs Largest to smallest */

@media only screen and (max-width: 1679px) {
}
@media only screen and (max-width: 1439px) {
}
@media only screen and (max-width: 1279px) {
}
@media only screen and (max-width: 1023px) {
}
@media only screen and (max-width: 767px) {
}
@media only screen and (max-width: 599px) {
}
/*iphone6 + regular android*/
@media only screen and (max-width: 479px) {
}
/*Iphone 4&5*/
@media only screen and (max-width: 359px) {
}

/* Size and Orientation */
@media only screen and (max-width: 479px) and (orientation: portrait) {
}
/* Landscape Orientation */
@media screen and (orientation: landscape) {
}

/* Portrait Orientation */
@media screen and (orientation: portrait) {
}

/*--------------------------------------------------------------------- End Responsive Queries*/