/*
 *		All Pages
 */

body {
	font-size: 1.15rem;
}

nav#sidebar-wrapper {
    /* background-image: linear-gradient(45deg, black, transparent); */
    background-image: url(../assets/img/starry-bg-min.gif);
    background-size: cover;
}

.ml-5 {
	margin-left: 3rem;
}

.ml-4 {
	margin-left: 2.5rem;
}

.ml-3 {
	margin-left: 2rem;
}

.ml-2 {
	margin-left: 1.5rem;
}

.ml-1 {
	margin-left: 1rem;
}


.mr-5 {
	margin-right: 3rem;
}

.mr-4 {
	margin-right: 2.5rem;
}

.mr-3 {
	margin-right: 2rem;
}

.mr-2 {
	margin-right: 1.5rem;
}

.mr-1 {
	margin-right: 1rem;
}

.lead {
	font-weight: 400;
}

hr.divider {
    height: 0.2rem;
    max-width: 3.25rem;
    margin: 1.5rem auto;
    background-color: deeppink;
    opacity: 1;
}

.btn-xl {
    padding: 1.25rem 2.25rem;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    border-radius: 1.25rem;
}

footer {
   /*  background-image: linear-gradient(-80deg, #f7ff00cc, #db36a4cc), url(assets/img/cartoon.gif); */
   background: linear-gradient(45deg, black, transparent);
}


/*
 *		Landing Page
 */

@media (min-width: 992px) {
	.portfolio-item:hover .caption {
	    background-color: rgba(0, 0, 0, 0.8);
	    -webkit-clip-path: inset(2rem);
	    clip-path: inset(2rem);
	}
}

.callout {
	padding: 12.5rem 0;
}

.btn-ultra {
	background-image: url(../assets/img/ultrasound.gif);
	background-position: center;
}

.bg-gradient {
    background: linear-gradient(-80deg, #f7ff00, #db36a4) !important;
}

.bg-black-transparent-1 {
    background: rgba(0,0,0,.8);
}

.text-pink {
    color: deeppink;
}

.callout {
    background: linear-gradient(-80deg, #f7ff0000, #db36a4), url(../assets/img/bg-callout.jpg);
    /* background: url(../assets/img/bg-callout.jpg); */
    background-position: center;
    background-size: cover;
}

/* video grid on homepage*/

.gVpr {
    padding-top: 56px;
    margin-top: -5px;
}

.css-ufo {
    animation-duration: 1000ms;
    animation-timing-function: ease;
    animation-delay: 0ms;
    animation-name: animation-1ftup42;
    animation-direction: normal;
    animation-fill-mode: both;
    animation-iteration-count: 1;
}

.jFVG {
    border-radius: 11px;
}

.lbLM {
    margin-right: -1px;
    display: flex;
    flex-wrap: wrap;
    border-radius: 11px;
}

.jFVG .UserGalleryItem-sc-1n6tdcn-3 {
    width: calc(25%);
    padding: 18% 0px 0px;
}


.kVzO:first-child {
    border-top-left-radius: 11px;
}

.kVzO:nth-child(4) {
    border-top-right-radius: 11px;
}

.kVzO:nth-child(25) {
    border-bottom-left-radius: 11px;
}

.kVzO:nth-child(28) {
    border-bottom-right-radius: 11px;
}

.kVzO {
    z-index: 10;
    position: relative;
    /* outline: rgb(0, 0, 0) solid 2px; */
    outline: black solid 2px;
    overflow: hidden;
    color: rgb(0, 0, 0);
    margin-bottom: 2px;
}

.kVzO:hover .UserGalleryItemAbout-sc-1n6tdcn-0 {
    opacity: 1;
}

.kVzO .MemberVacancystyled__MemberVacancy-sc-1ko28fy-0, .kVzO .UserGalleryImage-sc-1n6tdcn-2 {
    position: absolute;
    inset: 0px;
    border: none;
}

.gnGH {
    overflow: hidden;
    position: relative;
}

.gnGH video, .gnGH img {
    width: 101%;
    display: block;
}

a.UserGalleryItem-sc-1n6tdcn-3.kVzO {
    pointer-events: none;
}



/*
 *		Topics Page
 */


#list {
	margin-bottom: 5rem;
}

#list .row .col-lg-4 {
	/*display: inline-grid;*/
}

#list .row .col-lg-4 a {
	text-decoration: none;
	font-size: 1.3rem;
	/*line-height: 1rem;*/
	margin-bottom: 2rem;
}

#list h2 {
	margin-top: 3rem;
	margin-bottom: 1.5rem;
}

.reference p {
	font-size: 1.15rem;
}

.video-container{
    width: 100vw;
    height: 100vh;
}
    
iframe {
    /*position: absolute;*/
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    transform: translate(-50%, -50%);
}

@media (min-aspect-ratio: 16/9) {
  .video-container iframe {
    /* height = 100 * (9 / 16) = 56.25 */
    height: 56.25vw;
  }
}
    
@media (max-aspect-ratio: 16/9) {
  .video-container iframe {
    /* width = 100 / (9 / 16) = 177.777777 */
    width: 177.78vh;
  }
}

#text{
    position: absolute;
    width: 100%;
    color: #FFFFFF;
    left: 0;
    top: 0;
    background: rgba(0,0,0,.65);
    /* transform: translate(-50%, -50%); */
}

#header {
    left: 0;
}

#list h4 {
    color: #ecb807 !important;
}

#list section#header {
    padding-top: 30px;
}

#list a {
    color: white;
}