@import "text-animation.css";

*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

/* scrolltrigger text reveal*/
*,
*:before,
*:after {
  box-sizing: content-box;
  position: relative;
  letter-spacing: 0.04em;

}
body {
  font-family: "Epilogue", sans-serif;
  font-weight: 300;
}
.section {
  height: 100vh;
  width: 100%;
  position: relative;
  padding: 0;
  text-align: center;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -200px;
}/*
.bg1 {
  background-color: #da9ae7;
}
.bg2 {
  background-color: rgb(187, 111, 208);
}
.bg3 {
  background-color: rgb(187, 111, 208);
}
.bg4 {
  background-color: rgb(187, 111, 208);
}*/
h1 {
  font-size: 40px;
  line-height: 1.2;
  margin: 0;
}
.revealUp {
  opacity: 0;
  visibility: hidden;
}
.spacer {
  height: 50vh;
}

/* Crossing on scroll effect */

body{
  width:100%;
  height:100%;
  padding:0;
  margin:0;
  overflow-x:hidden;
}
#text{
  text-align:center;
  position:relative;
  top:50px;
  font-size:7em;
  
}
.text0,.text2{
    color: black;
  -webkit-text-fill-color:#000 ; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}
.text1,.text3{
    color: black;
  -webkit-text-fill-color: #000; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}
#dummy{
  position:relative;
  height:100vh;
  width:100%;
}
#back{
  position:relative;
 padding-top:50%;
  text-align:center;
 font-size:1.5em;
  cursor:pointer;
}


@media only screen and (max-width: 600px) {
  #back{
    cursor:none;
    font-size:0.8em;
  }
  #text{
        top:70px;
    font-size:2.25em;
  }

}


.section-logo-home
{
  padding-left: 90px;
  margin-top: -1%;
  
}

.section2
{
	height: 100%; 
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
  margin-top:80px;
  
}

.hover
body {
 
  text-align: right;
  overflow: visible;
  font-family: "Ranika";
 

}

/* A quick explaination of how this effect works. A span elemnt won't have a width of it's own. So we convert it to an inline-block using the display property. Then we turn down the max-width of the element to 0. The reason we use max-width is due to a side-effect which is harder to explain in words so just try to replace that with width ;). You'll see that even when we changed the element's width to 0, it's still showing the text. For this we re gonna use overflow property and set it to hidden. To keep the text in one line and aligned properly, we are gonna use the white-space and vertical-align property as set below. The final thing we'll do is to give transition to the max-width property. */
#hide {
  display: inline-block;
  max-width: 0%;
  vertical-align: bottom;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 1s ease-in-out;
  color: #fff;

}

h5{
  text-decoration-color: #ac16d8;
}

h3{
  
  display: inline-block;
  font-size: 5vw;
  vertical-align: bottom;
  overflow: visible;
  transition: max-width 1s ease-in-out;
  color: #ac16d8;

}

h2 {
  
  color: #fff;
  cursor: default;
}

/* On hover of the h2 tag, we are gonna max out the max-width. */
h2:hover #hide {
  max-width: 100%;
}

h1{
  margin-left: 13%;
  margin-top: -5%;
}


.footer-extra
{
	position: relative;
	bottom: 0;
	width: 100%;
	height: 100%;
	text-align: center;
}

.nav-link
{
  color: #6a0674;
}

.nav-link:hover
{
	color:#7d3379  !important;
  display: absolute;
	border-radius: 40px !important;
  background-color: #DFBAF2 !important;	
}



/* STYLE FOR NAVBAR*/
.navbar-extra
{
    position: fixed;
    top: 0;
    width: 100%;
    height: 100px;
    z-index: 100000;
}
/* STYLE FOR NAVBAR LOGO*/
.navbar-brand 
{
    display: flex;
    position: absolute;
    width: 100%;
}

/* STYLE FOR NAVBAR ITEMS*/
.navbar-items-extra
{
  margin-left: 15px;
  font-size: 23px;
  font-weight: bold;
}

.dropdown-menu-extra
{
  
  margin-bottom: 100px;
  font-weight: 100px;
  background-color: #DFBAF2 ;
  border-radius: 20px !important;


}
.dropdown:hover .dropdown-menu-extra
{
 display: block;
}

 
.dropdown-item:hover
{
  color:#b30ec2  !important;
  display: inline-block;
	border-radius: 40px !important;
  width: fit-content;
  background-color: #DFBAF2  ;

}

/* STYLE FOR HEADERS*/
.section-headers
{
    text-align: center;
    padding-top: 80px;
    padding-bottom: 10px;
    font-weight: bold;
    font-family: Cambria;
}

/* SECTION WITH BIG IMAGE BEHIND*/
  .bg-img1
  {
    background-size: 100%;
    background-image: url("/static/images/bg4.jpg");
    font-size: 0;

    
  }
  .bg-img2
  {
    background-size: 100%;
    font-size: 0;
  }

  .section-global
  {
    margin-top: 80px;
    margin-bottom: 70px;
  }
  
  .paragraph-cancer
  {
    text-align: left;
    margin-left: -10%;
    margin-top: 1%;
    margin-bottom: 30%;
    font-family: 'Open Sans Condensed', 'sans-serif';
    font-size: 23px;
    color: #ffffff;
  }
  .paragraph-cancer2
  {
    text-align: center;
    margin-left: -20%;
    margin-top: 5%;
    font-family: 'Open Sans Condensed', 'sans-serif';
    font-size: 23px;
    margin-top: 10%;
    margin-bottom: 10%;
    color: #ffffff;

  }

  .paragraph-cancer3
  {
    text-align: center;
    margin-left: -20%;
    margin-top: 5%;
    font-family: 'Open Sans Condensed', 'sans-serif';
    font-size: 23px;
    margin-top: -10%;
    color: #ffffff;
  }


  /* fade in effect*/

  .fade-in-text {
    font-family: 'Tangerine', serif;
    font-size: 20px;
    animation: fadeIn 5s;
    -webkit-animation: fadeIn 5s;
    -moz-animation: fadeIn 5s;
    -o-animation: fadeIn 5s;
    -ms-animation: fadeIn 5s;
    width: 100%;
    background-size: cover;
  }
  
  @keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @-moz-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @-webkit-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @-o-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @-ms-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

  
   
  

  .header
  {
    margin-bottom: 60px;
    text-decoration: underline;
  }

  .header_img
  {
    position: relative;
    
  }
  .header-mythology
  {
    color: #cf74fa;
    background-color: transparent;
    margin-left: -50%;
    margin-top: 30%;
    font-size: 50px;
    font-weight:bolder;
    font-family: 'Dela Gothic One', 'sans-serif';
  }
  .header-cancer
  {
    color: #cf74fa;
    font-family: 'Dela Gothic One', 'sans-serif';
    font-weight:bolder;
    font-size: 50px;
    margin-left: 30%;
    margin-top: 25%;
  }

  .header-emperor
  {
    color: #cf74fa;
    font-family: 'Dela Gothic One', 'sans-serif';
    font-weight:bolder;
    font-size: 50px;
    margin-left: -50%;
    margin-top: 50%;
  }
  .header-iris
{
  color: #cf74fa;
    font-family: 'Dela Gothic One', 'sans-serif';
    font-weight:bolder;
    font-size: 50px;
    margin-left: 30%;
    margin-top: 70%;
}



  .cite-style
  {
    margin-left: 110px;
    margin-right: 110px;
    text-align: justify;
  }

  .team-img
  {
    border-radius: 0%;
    z-index: 999;
  }

  .row-next
  {
    margin-top: 70px;
  }

  .header-team
  {
    margin-top: 20px;
    margin-bottom: 20px;
  }
.gif
{
  width: 100%;
  background-size: cover;
}
.sidenav {
  width: 300px;
  position:fixed;
  z-index: 1;
  top: 20px;
  left: 15px;
  background: transparent;
  overflow-x: hidden;
  padding: 8px 0;
  margin-top: 200px;
  border-radius: 9%;
  
  
}
.par-style
{
  margin-bottom: 20px;
  margin-top: 30px;
}
.header-style
{
  /*color: #cf74fa;*/
  background-color: transparent;
  color:#ca1fca;
  height: 3rem;
  margin-left: -7px;
  margin-top: 10%;
  padding-bottom: 5%;
  font-size: 53px;
  font-weight:bolder;
  font-family: 'Open Sans Condensed', 'sans-serif';
  /*Dela Gothic One*/
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 1.5vw;
  color: #DFBAF2;
  display: block;
  font-family: 'Open Sans Condensed', 'sans-serif';
}

.sidenav a:hover {
  text-decoration: underline;
}

.main {
  margin-left: 250px;
  padding: 0px 150px;
  margin-top: 160px;
  font-family: 'Open Sans Condensed', 'sans-serif';
  font-size: 28px;
  margin-bottom: 350px;
  color: #ffffff;
}

.team-main {
  margin-left: 250px;
  padding: 0px 150px;
  margin-top: 160px;
  font-family: 'Open Sans Condensed', 'sans-serif';
  font-size: 25px;
  margin-bottom: 350px;
  color: #ffffff;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
.leftmenuimg
{
 padding-right: 20px;
 width: 50px;
 height: 50px;
}
.leftmenuimg:hover
{
  background-color: transparent;
}
.h-shadow
{
  background-color: transparent;
  color: transparent;
  box-shadow: 20px 50px 120px #e3a7ff;
}
.dot {
  height: 25px;
  width: 25px;
  background-color: black;
  border:1px solid #cf74fa;
  border-radius: 50%;
  display: inline-block;
  margin-right: 15px;
}

.w-dot
{
  height: 15px;
  width: 15px;
  /*background-color: rgb(255, 255, 255);*/
  border-radius: 50%;
  display: inline-block;
  margin-right: 15px;
  background-color: #cf74fa;
}
.zoom {
  transition: transform .2s;
}

.zoom:hover .dot{
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.1);
  background-color: #cf74fa;
  
}
.dropdown-arrow
{
  margin-left: 20px;
}
.dropdown-arrow-p
{
  padding-top: 20px;
  padding-bottom:20px;
  padding-left: 50px;
}
.par-inside
{
  padding-top: 20px;
  padding-bottom:20px;
  padding-left: 50px;
}
.par-inside-lvl2
{
  padding-top: 20px;
  padding-bottom:20px;
  padding-left: 7%;
  display: inline-block;
}

.par-inside-lvl3
{
  padding-top: 20px;
  padding-bottom:20px;
  padding-left: 12%;
  display: inline-block;
}

.custom-list
{
  padding-left: 10px;
}
.name-behind
{
  position: absolute;
  z-index: 1;
}

.frame
{
  background-color: transparent;
  border-color: #ac16d8;
  border:1px solid #ac16d8;
}

.item 
{
  width: 30%;
  display: inline-block;
  margin-top: 2rem;
  filter: grayscale(100%);
}
.polaroid {
  background: #fff;
  padding: 1rem;
  box-shadow: 0 0.2rem 1.2rem rgba(0,0,0,0.2);
  
}
.polaroid > img{
  max-width: 100%;
  height: auto;
}

.caption1 {
  font-size: 1.3vw;
  text-align: center;
  line-height: 2em;
  color: #000;
  position: relative;
  width: 50%;
}

.item .polaroid:before {
  content: '';
  position: absolute;
  z-index: -1;
  transition: all 0.35s;
}
.item:nth-of-type(4n+1) {
  transform: scale(0.8, 0.8) rotate(5deg);
  transition: all 0.35s;
}
.item:nth-of-type(4n+1) .polaroid:before {
  transform: rotate(6deg);
  height: 20%;
  width: 47%;
  bottom: 30px;
  right: 12px;
  box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.4);
}
.item:nth-of-type(4n+2) {
  transform: scale(0.8, 0.8) rotate(-5deg);
  transition: all 0.35s;
}
.item:nth-of-type(4n+2) .polaroid:before {
  transform: rotate(-6deg);
  height: 20%;
  width: 47%;
  bottom: 30px;
  left: 12px;
  box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.4);
}
.item:nth-of-type(4n+4) {
  transform: scale(0.8, 0.8) rotate(3deg);
  transition: all 0.35s;
}
.item:nth-of-type(4n+4) .polaroid:before {
  transform: rotate(4deg);
  height: 20%;
  width: 47%;
  bottom: 30px;
  right: 12px;
  box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.3);
}
.item:nth-of-type(4n+3) {
  transform: scale(0.8, 0.8) rotate(-3deg);
  transition: all 0.35s;
}
.item:nth-of-type(4n+3) .polaroid:before {
  transform: rotate(-4deg);
  height: 20%;
  width: 47%;
  bottom: 30px;
  left: 12px;
  box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.3);
}
.item:hover {
  filter: none;
  transform: scale(1, 1) rotate(0deg) !important;
  transition: all 0.35s;
}
.item:hover .polaroid:before {
  content: '';
  position: absolute;
  z-index: -1;
  transform: rotate(0deg);
  height: 90%;
  width: 90%;
  bottom: 0%;
  right: 5%;
  box-shadow: 0 1rem 3rem rgba(0,0,0,0.2);
  transition: all 0.35s;
}
.wrapper {
  width: 100%;
  padding: 0 2rem;
  text-align: center;
}
.sub-headers
{
  font-size: 40px;
  color: rgb(193, 71, 233);
  font-weight: bold;
}

.sub-sub-headers
{
  font-size: 33px;
  color: rgb(193, 71, 233);
  font-weight: bold;
}

/* TEAM IMAGES */
.team-container {
  position: relative;
  width: 100%;
  border-radius: 50px;
  box-shadow: 5px 10px 50px #ca1fca;
}

.team-image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50px;
}

.overlay{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(193, 71, 233,0.8);
  border-radius: 50px;
  
}
.anim {
  display: inline-block;
  position: relative;
  margin: 30px;
  font-size: 30px;
  font-family: sans-serif;
  color: blue;
  cursor: pointer;
}

.anim-btn {
  width: 4em;
}

.anim-text {
  display: inline-block;
  position: absolute;
  left: -2px;
  top:  -2px;
  width: 0;
  height: 1.3em;
  background: white;
  white-space: nowrap;
  overflow: hidden;
}

.anim-btn:hover {
  color: white;
}

.anim:hover .anim-text {
  width: 4.8em;
  border-right: 2px solid black;
  animation: type 1s steps(8,end),
             blink 1.1s linear 1s infinite;
  animation-fill-mode: forwards;
}

@keyframes type {
  from { width: 0; } 
} 

@keyframes blink { 
  45% { border-right: 2px solid white; } 
  100% { border-right: 2px solid white; } 
} 

.team-container:hover .overlay{
  opacity: 1;
}

.team-text {
  color: rgb(65, 0, 81);
  font-size: 28px;
  font-family: 'Open Sans Condensed', 'sans-serif';
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.member
{
  padding-top: 8%;
  font-size: 1.1vw;
  word-wrap: break-word; 
  word-break: break-word;
}

.home-style-left
{
  text-align: left;
  font-family: 'Open Sans Condensed', 'sans-serif';
  font-size: 28px;
  color: #ffffff;
  padding-bottom: 5%;
}
.home-style-right
{
  text-align: right;
  font-family: 'Open Sans Condensed', 'sans-serif';
  font-size: 28px;
  color: #ffffff;
  padding-bottom: 5%;
}

.nice-cols
{
  column-count: 2;
  column-gap: 40px;
}
.cover1
{
  position:relative;
  display: inline-block;
  margin: 50px;
  max-width: 40%;
  max-height: 40%;
  background-size: cover;
  text-align: center;
}
.cover1 .img-top {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}
.cover1:hover .img-top {
  display: inline;
}

.cover {
  position:relative;
  display: inline-block;
  margin: 50px;
  max-width: 100%;
  max-height: 100%;
  background-size: cover;
  text-align: center;
}
.cover .img-top {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}
.cover:hover .img-top {
  display: inline;
}

.center-fit {
  max-width: 100%;
  max-height: 100vh;
  margin: auto;
}

.foto-nav
{
  width: 300px;
  position: fixed;
  z-index: 1;
  top: 20px;
  left: 15px;
  background: transparent;
  overflow-x: hidden;
  padding: 8px 0;
  margin-top: 10%;
  border-radius: 9%;
}
.video-container-settings
{
  padding-top: 3%;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  width: 100%;
  background-color: transparent;
}

.video-container-settings iframe
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
.description-image
{
  padding-top: 5%;
  padding-bottom: 5%;
}
.caption 
{
  width: 100%;
  text-align: center;
  font-size: 1.4vw;
  word-wrap: break-word;
  padding-bottom: 3%;
  display: block;
  color:#ca1fca; 
}
.contained-imgs
{
  height:auto;
  width: 100%;
}

.footer-item-title
{
  font-size: 25px;
  font-weight: bold;
  color: rgb(193, 71, 233);
  text-decoration: none;
  text-align: left;
}

.footer-items
{
  font-size: 20px;
  color: #ffffff;
  text-align: center;
}

.social-media-icons
{
  text-align: left;
}

.image-text-description
{
  color:#ca1fca; 
  text-decoration:underline;
  word-wrap: normal;
}

.custom-progress-bar {
  position: fixed;
  top: 0;
  width: 0%;
  height: 10px;
  background: linear-gradient(90deg, rgba(45,3,59,1) 0%, rgba(65,0,81,1) 33%, rgba(129,12,168,1) 63%, rgba(193,41,227,1) 95%);
  z-index: 10;

}


.pdf
{
  width: 55%;
  height: 50em;
  padding-bottom: 5%;
}

.pdf-container
{
  width: 80%;
  height: 100%;
  text-align: center;
}
.white-container
{
  background-color: #ffffff;
  width: 100%;
}

th
{
  text-align: center;
  font-size: 1.8vw;
}
td 
{
  background-color:rgb(193, 41, 227);
  text-align: center;
  font-size: 1vw;
}
tr:nth-child(even) > td 
{
  background-color:rgb(129, 12, 168);
  text-align: center;
}


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

.abs-center
{
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  text-align: center;
}

.des-container
{
  border-top: 4px solid #ca1fca;
  border-bottom: 4px solid #ca1fca;
  width: 80%;
  position: relative;
}
.des-container1
{
  border-top: 4px solid #ca1fca;
  border-bottom: 4px solid #ca1fca;
  width: 80%;
  position: relative;
}


.flipcard {
  position: relative;
  width: 100%;
  height: auto;
  transition: all 0.6s ease;
  transform-style: preserve-3d;
  cursor: pointer;
  padding-bottom: 12%;;
}
.flipcard_front, .flipcard_back {
  position: absolute;
  background: #fff;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  border-radius: 20px;
  border: solid;
  border-color: #fff;
  padding: 20px;
  color: #000;
  backface-visibility: hidden;
}
.flipcard_front {
  display: flex;
  background-color: white;
}
.flipcard_back {
  display: flex;
}
.card_container:hover .flipcard {
  transform: rotateY(180deg);
}
.flipcard_back {
  transform: rotateY(180deg);
}
.img-fade {
  animation-name: fade;
  animation-duration: 2.5s;
}

@keyframes fade {
  from {opacity: .2} 
  to {opacity: 1}
}

.iris-container
{
  background-color: #000;
  width: 100%;
  height: auto;
}