@import url("gotham.css");

body {
  padding-top: 56px;
}

.left-aligned {
  margin-left: auto;
}

.bg-dark {
  background-color: #343a40 !important;
}

.bg-hero {
  background-color: #45b06cff;
}

/* FONTS */

h1,
h2,
h3,
h4,
h5,
h6,
p,
html {
  font-family: 'Gotham', sans-serif;
}

h1,
h2,
h3 {
  letter-spacing: -2px;
}

h1 {
  font-weight: bolder;
}

.huge {
  font-size: 4em;
}

@media only screen and (max-width: 768px) {
  .massive {
    font-size: 3em;
    color: #3d0561 !important;
  }
  .half-width-max
  {
    max-width: 100%;
  }
}

@media only screen and (min-width: 769px) {
  .massive {
    font-size: 6em;
  }
  .half-width-max {
    max-width: 50%;
  }
}



.p-left-2
{
  padding-left: 20px;
}

.big-logo-container {
  height: 200px;
}

/* COLOURS */
.bg-menugradient {
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(158,130,176,1) 100%); 
}

.bg-offwhite {
  background-color: #f4f3ee;
}

.bg-contentpurpledark {
  background-color: #3d0561;

}

.bg-contentpurple {
  background-color: #57058c;
}

.bg-contentpurplelight {
  background-color: #ab82c4;
}

.bg-contentpurplelighter {
  background-color: #ddc9ff;
}

.bg-contrastblue {
  background-color: #a0d2ea;
}

.bg-contrastbluelight {
  background-color: #a9d6ec;
}

/* UTILITY */
.hidden {
  visibility: collapse;
  opacity: 0;
  display: none;
  transition: visibility 0s .5s, opacity .5s linear;
}

.d-flex.hidden {
  display: none !important;
}

.pdf-container-inner {
  width: 100%;
  height: 600px;
}

.visible {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s;
  animation: fade-in .5s ease-in-out 0s forwards;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 75%;
}

.border-on-hover:hover {
  border: 1px solid #3d0561;
}

.zoom-on-hover:hover {
  transform: scale(1.1);
  transition: all 0.5s;
}

/* CALLOUT */
.bd-callout {
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid #e9ecef;
  border-left-width: .25rem;
  border-radius: .25rem
}

.bd-callout h4 {
  margin-bottom: .25rem
}

.bd-callout p:last-child {
  margin-bottom: 0
}

.bd-callout code {
  border-radius: .25rem
}

.bd-callout+.bd-callout {
  margin-top: -.25rem
}

.bd-callout-info {
  border-left-color: #5bc0de
}

.bd-callout-warning {
  border-left-color: #f0ad4e
}

.bd-callout-danger {
  border-left-color: #d9534f
}

a {
  color: inherit;
  text-decoration: inherit;
}

/* footer */
footer a {
  color: white;
  font-weight: bold;
  text-decoration: none;
}

footer a:hover {
  color: white;
  text-decoration: underline;
}

/* custom styling */
html {
  scroll-behavior: smooth;
}

.floating-container {
  position: fixed;
  left: 100px;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.floating-scroller {
  height: 600px;
}

/* COMIC */
.comic-text-container {
  margin: 4em;
}

#tourpanel {
  background-image: url("https://static.igem.wiki/teams/4812/wiki/bg-coll-2.png");
  background-size: cover;

}

.mix-gradient-white {
  background: rgb(255, 255, 255);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

.mix-gradient-white-inv {
  background: rgb(255, 255, 255);
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 30%);
}

.mix-gradient-white-inv-2 {
  background: rgb(255, 255, 255);
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 25%, rgba(0, 0, 0, 0) 100%);
}

.vh-50 {
  height: 50vh;
}

.vh-35 {
  height: 35vh;
}

.box {
  height: 200px;
  width: 35vh;
}

.selectable {
  cursor: pointer;
}

.selectable:hover {
  transform: scale(1.2);
  transition: all 0.5s;
}

.comic-collagenie-height {
  height: 40vh;
}

.small-item {
  height: 15vh;
}

.medium-item {
  height: 25vh;
}

.comic-text-panel-height {
  min-height: 30vh;
  height: 30vh;
}

.vh-10 {
  height: 15vh;
}

.floating-right {
  transform: translateX(100px);
  transition: transform .5s linear;
}

.floating-left {
  transform: translateX(-100px);
  transition: transform s linear;
}

.floating-right-lot {
  transform: translateX(200px);
  transition: transform s linear;
}

.floating-left-lot {
  transform: translateX(-200px);
  transition: transform  s linear;
}

.floating-right-lot-more {
  transform: translateX(300px);
  transition: transform  s linear;
}

.floating-left-lot-more {
  transform: translateX(-300px);
  transition: transform s linear;
}

.slide-left-out {
  transform: translateX(-2000px);
  transition: transform s linear;
}

.slide-right-out {
  transform: translateX(2000px);
  transition: transform s linear;
}

.floating {
  position: absolute;
  transition: transform s linear;
}

.zoomed {
  transform: scale(1.5);
}

button, a, body {
  font-family: 'Gotham', sans-serif;
}


/* GRADIENTS */

.btt-gradient {
  background: rgb(255,255,255);
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(158,130,176,1) 58%, rgba(61,5,97,1) 100%); 
}

.ttb-gradient {
  background: rgb(255,255,255);
  background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(158,130,176,1) 58%, rgba(61,5,97,1) 100%); 
}

.rtl-gradient {
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(158,130,176,1) 58%, rgba(61,5,97,1) 100%); 
}

.ltr-gradient {
  background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(158,130,176,1) 58%, rgba(61,5,97,1) 100%); 
}

/* TEAM */

.profile-box {
  width: 300px;
  height: max-content;
  background-color: #fffff8;
  box-shadow: 5px 10px 10px grey;
}

.profile-box.big {
  width: 80%;
  background-color: #fffff8;
  box-shadow: 5px 10px 10px grey;
}


.profile-box.prof {
  background-color: #ab82c4 !important;
}

.profile-box.horizontal {
  width: max-content;
}

.photo-box.non-square {
  height: min-content;
}

.photo-box {
  height: 250px;
  width: 100%;
  margin: auto;
  border: 1px solid #3d0561;
}

.big > .photo-box {
  height: 400px;
  width: 100%;
}

.photo-box > img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.profile-box:nth-of-type(4n+1) {
  transform: rotate(5deg);
  transition: all 0.35s;
}
.profile-box:nth-of-type(4n+2) {
  transform: rotate(-5deg);
  transition: all 0.35s;
}
.profile-box:nth-of-type(4n+3) {
  transform: rotate(3deg);
  transition: all 0.35s;
}
.profile-box:nth-of-type(4n+4) {
  transform: rotate(-2deg);
  transition: all 0.35s;
}

.profile-box:hover {
  transform: scale(1.3);
}

/* COMMON */

.title-header {
  background-image: url('https://static.igem.wiki/teams/4812/wiki/bg-coll-2.png');
}

.title-text {
  color: white;
}

.title-text:hover {
  color: #3d0561;
}

.container-fluid {
  padding: 0;
}

/* Text tools */


.cute-left-border {
  border-left: 5px solid #3d0561;
  padding-left: 0.5em;
}



/* Collapsibles */
.coll-header {
  color: white;
  cursor: pointer;
  border-bottom: 1px white;
  
}

.ltr-gradient:hover, .rtl-gradient:hover, .ttb-gradient:hover, .btt-gradient:hover   {
  background: white;
  color: #3d0561;
  cursor: pointer;
  border: 2px solid #3d0561;
}


.arrow {
  color: #3d0561;
}

/* expandable content boxes */
.expandable-content-box:nth-of-type(3n+1) {
  background-color: #ddc9ff;
}
.expandable-content-box:nth-of-type(3n+2) {
  background-color: #e9ecef;
}
.expandable-content-box:nth-of-type(3n+3) {
  background-color: #ab82c4;
}

.expandable-content-box:hover, .expandable-content-box.expanded {
  transform: scale(1.6) !important  ;
}

.pdf-container {
  height: max-content;
  padding: 1em;
  background-color: #ab82c4;
}