@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
html, body {scroll-behavior: smooth;font-family: "Roboto", sans-serif; font-optical-sizing: auto; font-weight: 400;}

/* ensure content sits above the bg */
body {min-height: 100vh;background-size: cover;background-position: center center;background-repeat: no-repeat;transition: background-image 1s ease-in-out; /* smooth transition */position: relative;padding-top:50px;background-attachment: fixed;}

h1 {font-size: 72px;color: #fff;font-weight: 400;margin: 0 0 20px 0; line-height: 110%;}
h3{color: #fff !important; font-size: 28px;}
h3 span{font-size: 14px; font-style: italic; color: #eaeaea}
.error-page{height: 100vh;align-items: center;background-size: cover;height: 100vh;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;}
p{font-weight: 400; font-size: 15px; color: #fff; margin-bottom: 15px; line-height: 130%;/*text-shadow: #000 1px 0 10px;*/}
a{color: #fff!important; font-size: 15px; text-decoration: none;text-shadow: #000 1px 0 10px;}
a:hover{color: #888!important; text-decoration: none;}
.content{height: 94vh;display: flex;justify-content: end;align-items: end;}

/* small styling so accordion is readable on top of images */
.page-wrapper {position: relative;z-index: 1;padding: 0;/*background: rgba(0,0,0,0.7);*/background: transparent;border-radius: 8px;width: 100%;margin: 3rem auto;}
.accordion{padding: 0; background: transparent;}
.accordion-header, .accordion-collaps, .accordion-body{background: transparent;}
.accordion-body{padding: 0 10px 10px 10px;}
.accordion-header{display: inline-flex;}
h2.accordion-header button {font-size: 75px;color: #fff;font-weight: 700;margin: 0;line-height: 100%;background-color: transparent;padding: 0px 10px;}
.accordion-header {border: 0 !important;}
.accordion-item {background-color: transparent !important;border: 0 !important;}
.accordion-button:not(.collapsed) {box-shadow: none !important;}

.pipeline{border-radius: 20px; height: 100%;}
.profile{height: 100%; }
.movie-poster{-webkit-border-top-left-radius: 15px;-webkit-border-top-right-radius: 15px;-moz-border-radius-topleft: 15px;-moz-border-radius-topright: 15px;border-top-left-radius: 15px;border-top-right-radius: 15px;overflow: hidden; margin-bottom: 10px;}
.movie-poster img{width: 100%;}
.profile-block{display: flex; align-items: center; text-align: left; margin-bottom: 20px;}
.profile-block h3{margin-bottom: 0;}
.profile-img{border-radius: 50%; overflow: hidden; width: calc(80px - 4px); height: calc(80px - 4px); display: flex; margin-right: 20px;border: 2px #333 solid;}
.profile-img img{width: 100%;filter: grayscale(1);}


ul.social-links {list-style-type: none; margin: 0; padding: 0; line-height: 16px;}
ul.social-links li {margin: 10px 5px 0 0;padding: 0;display: inline-block; font-size: 30px;}
ul.social-links li a {display: block; color: #fff;}
ul.social-links li a:hover {display: block;}
ul.social-links li i {font-size: 30px;}

.content-block{background:rgba(0, 0, 0, .7);padding: 20px; border-radius: 20px;}
.taglines-block{display: flex; align-items: baseline; margin-bottom: 20px; height: 100%;}
.taglines-block p{margin: 0;}
.taglines-icon{margin-right: 20px; display: grid; margin-bottom: -15px;}
.taglines-block i{color: #fff; font-size: 20px; margin-bottom: -15px;}

.accordion-button:focus {box-shadow: none !important;}
.accordion-button:not(.collapsed) {background: transparent !important; color: #fff !important;}
.accordion-button::after {filter: invert(50%)!important; margin-left: 20px;width: 1.5rem;height: 1.5rem;}

.video-btn {font-size: 16px;padding: 0;margin: 0;border: 0;background: transparent;color: #fff;display: inline-flex;justify-content: center;align-items: center;}
.video-btn i {font-size: 26px;margin-right: 10px;}


nav{background: transparent;}
nav img{height: 40px;}
.scrolled{box-shadow: 0px 3px 15px 3px rgb(0 0 0 / 11%); background: #000;}

.bg-layer {position: fixed;inset: 0;background-size: cover;background-position: center;background-repeat: no-repeat;transition: opacity 600ms ease;pointer-events: none;z-index: -1;}
.bg-layer::after {content: " ";background: rgba(0,0,0,0.3);height: 100%;width: 100%;display: block;}

/* Optional: preload images (hidden) */
.preload {display: none;}

.btn-close {position: absolute;right: 0px;top: -30px;}
.btn-close:focus {box-shadow: none;}

.accordion-button{opacity: .8;}
.accordion-header{transition: all 0.2s ease-in-out;}
.accordion-header:hover{opacity: .8;}
.accordion-button.collapsed{opacity: 1;transition: opacity 600ms ease;}

@media (max-width: 600px) {
  h2.accordion-header button {
    font-size: 40px;
    color: rgb(255, 255, 255);
    font-weight: 600;
    line-height: 110%;
    background-color: transparent;
    margin: 0px;
  }
  .content {position: relative; height: 100%;display: block;justify-content: center;align-items: center;}
  body{padding-top: 90px;}
  nav img {height: 35px;}
}