@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@100..700&display=swap');

:root {
  /* services with content / bg overlay */
  --service-text-content-overlay: 0.5;
  --service-text-content-overlay-hovered: 0.9;
  /* services with content / heading */
  --service-text-content-heading: 0.7;
  --service-text-content-heading-hovered: 1;
  /* services with content / blurb */
  --service-text-content-blurb: 0.7;
  --service-text-content-blurb-hovered: 1;
  /* photo only / bg overlay */
  --service-img-only-overlay: 0.4;
  --service-img-only-overlay-hovered: 0;
}

/* BUTTONS ----------------------------------------- */

/* all buttons */
:root .ma-button {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  border-radius: 0 !important;
  text-shadow: none !important;
  border-width: 2px !important;
  border-style: solid !important;
  transition: all 200ms;
  text-transform: uppercase;
  text-decoration: none !important;
  padding: 16px 30px !important;  
}

/* solid dark */
:root .ma-button-solid.ma-button-dark {
  background: #080808 !important;
  border-color: #080808 !important;
  color: white !important;
}
:root .ma-button-solid.ma-button-dark:hover {
  background: white !important;
  border-color: white !important;
  color: #080808 !important; 
}
/* solid light */
:root .ma-button-solid.ma-button-light {
  background: white !important;
  border-color: white !important;
  color: #080808 !important;
}
:root .ma-button-solid.ma-button-light:hover {
  background: #080808 !important;
  border-color: #080808 !important;
  color: white !important; 
}

/* outline */
:root .ma-button-outline {
  background: transparent !important;
}
/* outine dark */
:root .ma-button-outline.ma-button-dark {
  border-color: #080808 !important;
  color: #080808 !important;
}
:root .ma-button-outline.ma-button-dark:hover {
  background: #080808 !important;
  color: white !important;
}
/* outine light */
:root .ma-button-outline.ma-button-light {
  border-color: white !important;
  color: white !important;
}
:root .ma-button-outline.ma-button-light:hover {
  background: white !important;
  color: #080808 !important;
}


/* UTILITIES / HELPERS ----------------------------------------- */

.position-relative { position: relative; }
.position-absolute { position: absolute; }
.absolute-fill { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

/* MOBILE */
@media only screen and (max-width: 769px) {
  
  .ma-mobile-center,
  .ma-mobile-center a,
  .ma-mobile-center p {
    text-align: center !important;
  }
  
}

.ma-bg-dark {
  background-color: #080808;
}

:root .site-main .ma-bg-dark p a {
  color: white;
  text-decoration: underline;
}

.ma-bg-dark,
.ma-bg-dark h1,
.ma-bg-dark h2,
.ma-bg-dark h3,
.ma-bg-dark h4,
.ma-bg-dark h5,
.ma-bg-dark h6,
.ma-bg-dark p
 {
  color: white !important;
}


/* ELEMENTS ----------------------------------------- */

:root body,
:root p,
:root .main-nav ul li a {
  color: #080808;
  font-size: 18px;
  line-height: 35px;
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

:root .site-main h1,
:root .site-main h2,
:root .site-main h3 {
  font-family: "Antonio", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  color: #080808;
  text-transform: uppercase;
  letter-spacing: .05rem;
}
:root .site-main h4,
:root .site-main h5,
:root .site-main h6 {
  color: #080808;
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}

:root .site-main p {
  color: #080808;
}

:root .site-main p a {
  color: #080808;
  text-decoration: underline;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:root .textwidget hr {
  background-color: transparent;
  margin: 0;
  height: 60px;
}


/* OVERRIDES ----------------------------------------- */

/* add space between column content on mobile */
@media only screen and (max-width: 769px) {
  .ma-add-mobile-gap-between .panel-grid-cell:first-child {
    margin-bottom: 30px !important;
  }
}


/* ANIM ----------------------------------------- */

@keyframes fadeInUpLess {
  from {
    opacity: 0;
    transform: translate3d(0, 1rem, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUpLess {
  animation-name: fadeInUpLess;
}

@keyframes fadeServiceIn {
  from {
    opacity: var(--service-text-content-blurb);
    transform: translate3d(0, 1rem, 0);
  }

  to {
    opacity: var(--service-text-content-blurb-hovered);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeServiceOut {
  from {
    opacity: var(--service-text-content-blurb-hovered);
    transform: translate3d(0, 0, 0);
  }
  
  to {
    opacity: var(--service-text-content-blurb);
    transform: translate3d(0, 1rem, 0);
  }
}


/* HEADER ----------------------------------------- */

/* nav links */
.main-nav ul li a {
  padding: 0 35px 0 0;
}

/* nav links social */
.main-nav ul li.social-icon a {
  padding: 0;
}

/* social icons */
.main-nav ul a i {
  background: white;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main-nav ul a i::before {
  color: #080808;
}

/* BACKGROUND VIDEOS  */

.ma-video-bg-container {}

.ma-video-bg {
  position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}

/* make sure children have position for so layering is correct */
.ma-video-bg-container .panel-grid-cell {
  position: relative;
}

.ma-video-bg-src {
  display: none;
}


video[id="bgVideo"] {
  width: 100%; height: 100%; object-fit: cover;
}

/* Modern browers that support Object Fit for video (we include SMIL to help with targeting IE/Edge) */
/*html.smil.objectfit video[id*="bgVideo"] {
  width: 100%; height: 100%; object-fit: cover;
}*/

/* Emulating background-size: cover for HTML5 video (CSS only) codepen.io/shshaw/pen/OVGWLG (IE, Edge, old Safari?) */
/*html.no-smil.no-objectfit video[id*="bgVideo"],
html.no-smil.objectfit video[id*="bgVideo"],
html.smil.no-objectfit video[id*="bgVideo"] {
  min-width: 100%; min-height: 100%; width: auto; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
}
*/


/* HERO SECTION ----------------------------------------- */

/* shorten rule added via  */
img[src*="ma-rule-150-white.svg"] {
  height: .5rem;
  width: 150px;
  object-fit: cover;
}

/* THEME : ABOUT US ----------------------------------------- */

.ma-person {
  padding: 30px 30px !important;
  background-size: 0 !important;
}
@media only screen and (min-width: 769px) {
  .ma-person {
    padding: 100px 100px !important;
    background-size: cover !important;
  }
}


/* THEME : WORK + CASE STUDY ----------------------------------------- */

/* work/casestudy container */
.ma-work-hover {
  padding-top: 160px !important;
  padding-bottom: 160px !important;
  position: relative;
}
/* big */
@media only screen and (min-width: 1600px) {
  .ma-work-hover {
    padding-top: 230px !important;
    padding-bottom: 230px !important;
  }
}
/* if multi-column */
.panel-grid-cell .ma-work-hover {
  padding-left: 80px;
  padding-right: 80px;
}
/* bg */
.ma-work-hover:before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  opacity: 0;
  background: linear-gradient(to right,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.2) 100%);
  transition: opacity 500ms;
}
.ma-work-hover:hover:before {
  opacity: 1;
}
/* inner */
.ma-work-hover .widget-title {
  opacity: 0;
  font-size: 2.7em;
  margin: 0;
  position: relative;
}
.ma-work-hover:hover .widget-title {
  animation-name: fadeInUpLess;
  animation-duration: 1s;
  animation-fill-mode: both;
}
.ma-work-link {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  text-indent: -9999px; 
}
.ma-work-subhead {
  opacity: 0;
  z-index: 1;
  position: relative;
  text-transform: uppercase;
  letter-spacing: .05rem;
  font-size: 2.3rem !important;
  margin-top: -2rem;
  font-family: "Antonio", sans-serif !important;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
.ma-work-hover:hover .ma-work-subhead {
  animation-name: fadeInUpLess;
  animation-duration: 1s;
  animation-delay: .2s;
  animation-fill-mode: both;
}
.widget-title span {
  border-bottom: solid white 2px;
  padding-bottom: 0.2rem;
}
/* mobile */
@media only screen and (max-width: 1366px) {
  .ma-work-hover:before {
    opacity: 1 !important;
  }
  .ma-work-hover .widget-title,
  .ma-work-hover .ma-work-subhead {
    opacity: 1 !important;
    animation: none !important;
  }
}


/* THEME : SERVICES ----------------------------------------- */

/* add to each row: .ma-services-row */
/* add to each element with text content: .ma=service-hover */

/* default for elements *without* content */

.ma-services-row .panel-widget-style {
  position: relative;
}
.ma-services-row .panel-widget-style:before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: black;
  transition: all 500ms;
  opacity: 0;
}

@media only screen and (max-width: 779px) {
  .ma-services-row .ma-service-hover.panel-widget-style:before {
    opacity: var(--service-text-content-blurb);
  }
}
@media only screen and (min-width: 780px) {
  .ma-services-row .panel-widget-style:before {
    opacity: var(--service-img-only-overlay);
  }
  .ma-services-row .panel-widget-style:hover:before {
    opacity: var(--service-img-only-overlay-hovered);
  }
}

/* for items *with* content */

.ma-service-hover {
  padding: 60px 40px;
  position: relative;
}
@media only screen and (min-width: 1600px) {
  .ma-service-hover {
    aspect-ratio: 5/6;
    padding: 160px 80px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
  }
}

@media only screen and (max-width: 780px) {
  /* other items (without text) */
  .ma-services-row .panel-grid-cell > div > div:not(.ma-service-hover) {
    aspect-ratio: 3/2;
  }
  /* place service item first on mobile */
  .ma-services-row .panel-grid-cell:has(.ma-service-hover) {
    order: -1;
  }
}

.ma-service-hover > * {
  position: relative;
  text-wrap: pretty;
}

/* inner */
.ma-service-hover .widget-title {
  font-size: 2.7em;
  margin: 0 0 20px;
  position: relative;
}
.ma-service-hover .widget-title span {
  border-bottom: solid white 2px;
  padding-bottom: 0.2rem;
}
.ma-service-hover .textwidget * {
  line-height: 1.5;
}
.ma-service-link {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  text-indent: -9999px; 
}
/* anim larger only */
@media only screen and (min-width: 781px) {
  .ma-service-hover:before {
    opacity: var(--service-text-content-overlay) !important;
    transition: opacity 500ms;
  }
  .ma-service-hover:hover:before {
    opacity: var(--service-text-content-overlay-hovered) !important;
  }
  .ma-service-hover .widget-title {
    opacity: var(--service-text-content-heading);
    transition: opacity 1000ms;
  }
  .ma-service-hover:hover .widget-title {
    opacity: var(--service-text-content-heading-hovered);
  }
  .ma-service-hover .textwidget {
    animation: fadeServiceOut 1000ms;
    animation-fill-mode: both;
  }
  .ma-service-hover:hover .textwidget {
    animation: fadeServiceIn 1000ms;
    animation-fill-mode: both;
  }
}


/* previously here */
#rev_slider_5_1_wrapper {
  left: 0 !important;
}