@charset "UTF-8;

:root,
[data-bs-theme=light] {
	--bs-font-sans-serif: "Manrope";
	--bs-link-color: #000;
	--bs-link-color-rgb: 0, 0, 0;
}

.permanent-marker-regular {
  font-family: "Permanent Marker", cursive;
  font-weight: 400;
  font-style: normal;
  color:#f6f6f6;
}

.chevron-right-to-down::before {
	content: "\f285";
}

@media (max-width: 768px) {
	.chevron-right-to-down::before {
		content: "\f282";
	}
}

.fit-page {
	height:70vh;
}

@media (max-width: 768px) {
	.fit-page {
		height:auto;
	}
}

.red {
color: #e2001a;
}
.bg-grey {
background-color: #f6f6f6;
}
.bg-grey-2 {
background-color: #ccc;
}
.bg-red {
background-color: #e2001a;
}
.bg-white {
background-color: #fff;
}
.mh-320 {
	max-height: 320px;
	object-fit: contain;
}

.vignette {
height: 240px;
object-fit: contain;
}
.img-zoom{
	scale:1;
	transition-duration: 1s;
}

.img-zoom:hover{
	scale:1.2;
	transition-duration: 1s;
}

.shadow-sm-top{
	box-shadow: 0 -0.005rem 0.125rem 0.125rem rgba(0, 0, 0, 0.075); !important;
}
.rounded-start-bottom {
	border-bottom-left-radius: var(--bs-border-radius) !important;
}
.nav-link{
	font-weight: 500;
}

.blackboard {
		position: relative;
		/* width: 640px; */
		 /* margin: 1rem; */
		margin-top:1rem;
		margin-bottom:1rem;
		border: tan solid 12px;
		border-top: #bda27e solid 12px;
		border-left: #b19876 solid 12px;
		border-bottom: #c9ad86 solid 12px;
		box-shadow: 0px 0px 6px 5px rgba(58, 18, 13, 0), 0px 0px 0px 2px #c2a782, 0px 0px 0px 4px #a58e6f, 3px 4px 8px 5px rgba(0, 0, 0, 0.5);
		background-image: radial-gradient( circle at left 30%, rgba(34, 34, 34, 0.3), rgba(34, 34, 34, 0.3) 80px, rgba(34, 34, 34, 0.5) 100px, rgba(51, 51, 51, 0.5) 160px, rgba(51, 51, 51, 0.5)), linear-gradient( 215deg, transparent, transparent 100px, #222 260px, #222 320px, transparent), radial-gradient( circle at right, #111, rgba(51, 51, 51, 1));
		background-color: #333;
}

.blackboard:before {
		box-sizing: border-box;
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		background-image: linear-gradient( 175deg, transparent, transparent 40px, rgba(120, 120, 120, 0.1) 100px, rgba(120, 120, 120, 0.1) 110px, transparent 220px, transparent), linear-gradient( 200deg, transparent 80%, rgba(50, 50, 50, 0.3)), radial-gradient( ellipse at right bottom, transparent, transparent 200px, rgba(80, 80, 80, 0.1) 260px, rgba(80, 80, 80, 0.1) 320px, transparent 400px, transparent);
		border: #2c2c2c solid 2px;
		font-family: 'Permanent Marker', cursive;
		font-size: 2.2em;
		color: rgba(238, 238, 238, 0.7);
		text-align: center;
		padding-top: 20px;
}


.slideanim {visibility:hidden;}
.slide {
    animation-name: slide;
    -webkit-animation-name: slide;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    visibility: visible;
  }
  @keyframes slide {
    0% {
      opacity: 0;
      transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
  }
  @-webkit-keyframes slide {
    0% {
      opacity: 0;
      -webkit-transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      -webkit-transform: translateY(0%);
    }
  }
  
.trans1 {
  position: relative;
  animation-name: trans;
  animation-duration: 0.2s;
  animation-fill-mode: backwards;
  animation-timing-function: ease-out;
}

.trans2 {
  position: relative;
  animation-name: trans;
  animation-duration: 0.2s;
  animation-delay: 0.1s;
  animation-fill-mode: backwards;
  animation-timing-function: ease-out;
}
.trans3 {
  position: relative;
  animation-name: trans;
  animation-duration: 0.2s;
  animation-delay: 0.2s;
  animation-fill-mode: backwards;
  animation-timing-function: ease-out;
}
.trans4 {
  position: relative;
  animation-name: trans;
  animation-duration: 0.2s;
  animation-delay: 0.3s;
  animation-fill-mode: backwards;
  animation-timing-function: ease-out;
}

@keyframes trans {
  0%   {left:100vw;}
  100% {left:0vw;}
}
.emph {
	position: relative;
	animation-name: emph;
	animation-duration: 0.2s;
}
@keyframes emph {
  0% {transform: scale(1);}
  50% {transform: scale(1.05);}
  100% {transform: scale(1);}
}

.entre1 {
	position: relative;
	animation-name: entreStart;
	animation-duration: 0.2s;
	animation-fill-mode: backwards;
	animation-timing-function: ease-out;
}

.entre2 {
	position: relative;
	animation-name: entreEnd;
	animation-duration: 0.2s;
	animation-delay: 0.1s;
	animation-fill-mode: backwards;
	animation-timing-function: ease-out;
}

.entre3 {
	position: relative;
	animation-name: entreBottom;
	animation-duration: 0.2s;
	animation-delay: 0.2s;
	animation-fill-mode: backwards;
	animation-timing-function: ease-out;
}
.entre4 {
	position: relative;
	animation-name: entreBottom;
	animation-duration: 0.2s;
	animation-delay: 0.3s;
	animation-fill-mode: backwards;
	animation-timing-function: ease-out;
}
.entre5 {
	position: relative;
	animation-name: entreEnd;
	animation-duration: 0.2s;
	animation-delay: 0.4s;
	animation-fill-mode: backwards;
	animation-timing-function: ease-out;
}
@media (max-width: 768px) {
	.entre1 .entre2 .entre3 .entre4 .entre5 {} 
}

@keyframes entreStart {
0% {
      opacity: 0;
      transform: translateX(-70%);
    } 
    100% {
      opacity: 1;
      transform: translateX(0%);
    }
}
@keyframes entreEnd {
0% {
      opacity: 0;
      transform: translateX(70%);
    } 
    100% {
      opacity: 1;
      transform: translateX(0%);
    }
}
@keyframes entreBottom {
0% {
      opacity: 0;
      transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
}