:root {
  --red: #7B141E;
  --darkred: #6C121B;
  --black: #212121;
  --cyan: #00A9A5;
  --purple: #431B5D;
  --snow: #FBF5F3;
  --darksnow: #e6e2e1;
  --almond: #E7D7C1;
  --topbutton: #212D40;
  --dark: #212D40;
  --forest: #0A7C59;
  --darkgreen: #004830;
  --desc: #138c8c;
  --ice: #5ABEB6;
  --sea: #138c8c;
  --darksea: #146969;
  --brightforest: #0FA577;
  --navheight: 48px;
}

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
h1{
	font-size: 7.0rem;
	font-family: 'Courgette', cursive;
	color: var(--black);
	font-weight: 600;
	letter-spacing: 2px;
}
h2{
	font-size: 5.0rem;
	font-family: 'Courgette', cursive;
	color: #FBF5F3;
	font-weight: 500;
}
h3{
	font-size: 2.0rem;
	font-family: 'Montserrat', serif;
	color: #FBF5F3;
	font-weight: 600;
}
h4{
	font-size: 1.7rem;
	font-family: 'Montserrat', serif;
	color: #FBF5F3;
	font-weight: 500;
}
p{
	font-size: 1.34rem;
	font-family: 'Montserrat', serif;
	color: #FBF5F3;
	font-weight: 500;
}
a{
	font-size: 1.34rem;
	font-family: 'Montserrat', serif;
	color: #FBF5F3;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.5s;
}
body{
	background-color: #1d1e1f;
	z-index: 0;
}
a:hover{
	color: var(--white);
	text-decoration: underline;
}
.nosel {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.v-align{
	top: 50%;
	-ms-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
    position: absolute;
}
.v-center {
   margin: 0;
   position: absolute;
   top: 50%;
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
}
.btn:focus,.btn:active {
   box-shadow: none;
}
.nav {
	height: var(--navheight);
	background-color: var(--red);
	width: 100%;
	padding: 0rem 1rem;
	position: fixed;
	top: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;ss
    z-index: 5; !important
    opacity: 1; !important
}
.nav .btn{
	color: #FBF5F3;
	font-size: 1.35rem;
	transition: all 0.6s;
}
.nav .btn:hover {
	background-color: var(--darkred);
}
.nav > img{
	height: 80%;
	margin-top: auto;
	margin-bottom: auto;
	position: absolute;
	left: 20px;
}
.nav .container{
	height: 100%;
}
.nav .btn-group{
	height: 100%;
}
.main-nav-panel > button{
	padding-left: 1.3rem	;
	padding-right: 1.3rem;
}
.bannerblock{
	position: relative;
	width: 100%;
	height: 100vh;
	background-position: 50% 100%;
	overflow: hidden;
	z-index: -2;
}
.welcomebox{
	width: 40%;
	background-color: var(--snow);
	height: 16%;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	outline: 10px black;
	outline-style: ridge;
}
.bannerblock h1{
	z-index: 0;
	position: relative;
	color: var(--black);
}
.bannerblock .carousel-inner > .carousel-item {
	width: 100%;
	height: 100vh;
	background-position: 100% 100%;
	background-size: 100%;
	background-repeat: no-repeat;
	transition: background-position 2s;
	animation: bg-move 45s infinite linear;
}
.bannerblock .carousel-inner > .carousel-item:nth-of-type(1) {
	background-image: url('images/banner-1.png');
}
.bannerblock .carousel-inner > .carousel-item:nth-of-type(2) {
	background-image: url('images/mozart-banner.png');
}
.bannerblock .carousel-inner > .carousel-item:nth-of-type(3) {
	background-image: url('images/banner-3.png');
}
.bannerblock .carousel-inner > .carousel-item:nth-of-type(4) {
	background-image: url('images/banner-4.png');
}
.bannerblock .carousel-inner > .carousel-item:nth-of-type(5) {
	background-image: url('images/banner-5.png');
}


@keyframes bg-move {
	from {
		background-position: 100% 100%;
		background-size: 100%;
	}
	50%{
		background-position: 0% 0%;
		background-size: 140%;
	}
	to {
		background-position: 100% 100%;
		background-size: 100%;
	}
}

#ban-text-1{
	position: absolute;
	color: white;
	left: 50%;
	transform: translate(-50%, -50%);
	top: 50%;
	font-size: 4.5rem;
	text-align: center;
}

.carousel.carousel-fade .carousel-item {
    display: block;
    opacity: 0;
    transition: opacity ease-out .7s;
}

.carousel.carousel-fade .carousel-item.active {
    opacity: 1 !important;
}

#banner-piano{
	#background-color: var(--dark);
	height: 11rem;
	width: 11rem;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -125%);
}
#pshadow{
	border-radius: 50%;
	background-color: var(--darkred);
	position: absolute;
	left: 0%;
	bottom: 5%;
	width: 100%;
	height: 3rem;
}
#banner-piano #piano{
	position: absolute;
	left: 0%;
	top: 0%;
	width: 100%;
	transition: scale 0.5s;
}
@keyframes hovereffect {
	from {
		rotate: 0deg;
	}

	25% {
		rotate: 3deg;
	}

	50% {
		rotate: 0deg;
	}

	75% {
		rotate: -3deg;
	}

	to {
		rotate: 0deg;
	}
}
#banner-piano #piano:hover{
	scale: 1.1;
	animation: hovereffect 3s linear infinite;
}
#blur {
	width: 100%;
	height: 95vh;
	position: absolute;
	left: 0%;
	z-index: -1;
	backdrop-filter: blur(0px);
}
.articlesblock{
	/*background-color: #201010;*/
	background-image: url('images/wood-texture.png');
	background-position: center center;
	background-size: 100%;
	box-shadow: 0px 100px 15px 15px #000000;
}
.articlesblock .col{
	height: 80%;
	background-color: black;
	z-index: 0;
	box-sizing: border-box;
	margin-left: 1rem;
	margin-right: 1rem;
	width: 33.33%;
	box-shadow: 7px 7px 20px 0px #000000;
	transition:all 0.5s;
	transition-delay: 0.05s;
}
.articlesblock .col:hover{
	transform: translate(-5px, -10px);
}
.articlesblock .container{
	height: 100%;
}
.articlesblock .row{
	height: 100%;
	
}
.articlesblock .col{
	height: 500px;
}
.articlesblock .col:nth-of-type(1) > .border-1 {
	background-image: url("images/glownote.png");
	background-size: cover;
	background-position: 50% 50%;
}
.articlesblock .col:nth-of-type(2) > .border-1 {
	background-image: url("images/composers.png");
	background-size: cover;
	background-position: 50% 50%;
}
.articlesblock .col:nth-of-type(3) > .border-1 {
	background-image: url("images/piano-strings.png");
	background-size: cover;
	background-position: 50% 90%;	
}
.articlesblock .col .description{
	background-color: var(--desc);
}
.articlesblock .col .descbox h4{
	color: var(--white);
}
.articlesblock .col .descbox p,a{
	color: #6fe2e2;
}
.articlesblock .col .descbox a:hover{
	color: var(--white);
}
.articlesblock .row .border-1{
	border: var(--desc);
	border-style: solid;
	border-width: 0.6rem;
}
.descbox{
	width: 90%;
	height: 90%;
	margin: auto;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}
.topBtn{
	position: fixed;
	z-index: 3;
	top: 10%;
	right: 5%;
	border-radius: 100%;
	width: 4rem;
	height: 4rem;
	border: none;
	box-shadow: 5px 5px 40px 5px #000000;
	background-color: var(--topbutton);
	transition: opacity 0.5s, background-color 0.4s;
	opacity: 0;
}
.topBtn:hover{
	background-color: var(--snow);
}
.topBtn:hover i{
	color: var(--topbutton);
}
.topBtn i{
	font-size: 3rem;
	color: var(--snow);
}
.musicblock{
	width: 100%;
	background-position: 50% 50%;
  	background-repeat: no-repeat;
  	background-size: 100%;
	background-image: url("images/bg-2.png");
	background-attachment: fixed;
}
.musicblock h2{
	padding-top: 10rem;
	padding-bottom: 0.5rem;
	color: var(--snow);
}
.musicblock h3{
	color: var(--snow);
	line-height: 3.5rem;
	font-weight: 400;
}
.musicblock button{
	margin-bottom: 10rem;
	margin-top: 1rem;
}
.mscBtn{
	border-radius: 2rem;
	border: none;
	width: 10rem;
	height: 4rem;
	/*box-shadow: 5px 5px 40px  #000000;*/
	background-color: var(--desc);
	transition: opacity 0.5s, background-color 0.4s, border 0.1s, transform 0.5s;
	box-sizing: border-box;
}
.mscBtn p{
	font-size: 1.7rem;
	color: var(--snow);
	margin: auto;
}
.mscBtn:hover{
	transform: scale(1.05)
}
.hist-intro{
	#background-color: var(--dark);
	background-image: url("images/wood-texture.png");
	background-size: 50%;
	padding: 0.1rem;
}
.hist-intro h2{
	color: var(--snow);
	font-size: 4.5rem;
}
#timeline-b{
	height: 100vh;
	width: 100%;
	background-image: url("images/timeline-banner.png");
	background-size: 100%;
}
#timeline{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	height: 20%;
}
#timeline > h4:nth-of-type(1) {
	position: absolute;
	left: -4%;
	top: 50%;
	transform: translate(0%, -50%);
	text-align: center;
}
.t-mark{
	width: 2px;
	height: 70%;
	position: absolute;
	top: 100%;
	background: -moz-linear-gradient(top, rgba(128, 128, 128,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(128, 128, 128,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(128, 128, 128,1) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#808080', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */

	transform: translateY(-70%);
}
.era-b{
	height: 50px;
	position: absolute;
	top: 102%;
	text-align: center;
}
.era-b > h4{
	font-size: 1.3rem;
	color: #bdbdbd;
}
#yrorb{
	width: 1.3vh;
	height: 1.3vh;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	left: 12%;
	z-index: 1;
}
#orb{
	width: 1.3vh;
	height: 1.3vh;
	border-radius: 100%;
	background-color: white;
	position: absolute;
	top: 50%;
	transform: translateX(-50%);
	transform: translateY(-50%);
	left: 12%;
	z-index: 1;
	scale: 1.0;
	transition: background-color 2s, scale 2s, transform 2s;
}
#yr{
	position: absolute;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
	scale: 1.0;
	text-align: center;
	color: white;
	font-weight: 500;
}

#era-blocks > .era-b:nth-of-type(1) {
	left: 12%;
	width: calc(44.5714% - 12%);
}
#era-blocks > .era-b:nth-of-type(2) {
	left: 44.5714%;
	width: calc(59.7714% - 44.5714%);
}
#era-blocks > .era-b:nth-of-type(3) {
	left: 59.7714%;
	width: calc(77.15% - 59.7714%);
}
#era-blocks > .era-b:nth-of-type(4) {
	left: 77.15%;
	width: calc(88% - 77.15%);
}
#era-blocks > .era-b:nth-of-type(5) {
	left: -2%;
	width: calc(10%);
}
#era-blocks > .era-b:nth-of-type(6) {
	left: 90%;
	width: calc(10%);
}
#era-marks > .t-mark:nth-of-type(1) {
	left: 12%;
}
#era-marks > .t-mark:nth-of-type(2) {
	right: 12%;
}
#era-marks > .t-mark:nth-of-type(3) {
	left: 44.5714%;
}
#era-marks > .t-mark:nth-of-type(4) {
	left: 59.7714%;
}
#era-marks > .t-mark:nth-of-type(5) {
	left: 77.15%;
}
#timeline > h4:nth-of-type(2) {
	position: absolute;
	right: -6%;
	top: 50%;
	transform: translate(0%, -50%);
	text-align: center;
}
#t-line{
	height: 2px;
	background-color: white;
	width: 76%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#rightend{
	height: 2px;
	background-color: white;
	width: 12%;
	position: absolute;
	top: 50%;
	left: 0%;
	transform: translate(0%, -50%);
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,ffffff+100&0+0,1+100 */
	background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}
#leftend{
	height: 2px;
	background-color: white;
	width: 12%;
	position: absolute;
	top: 50%;
	left: 88%;
	transform: translate(0%, -50%);
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,000000+100&1+0,0+100 */
	background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
}
.cBubble {
   width: 4.0rem;
   position: absolute;
   top: 30%;
   transform: translate(-50%, -50%);
   transition: top 0.3s, opacity 0.1s;
   border-radius: 100%;
}
.cBubble > div{
   width: 4.0rem;
   aspect-ratio: 1;

   #border-radius: 100%;

   clip-path: polygon(100.00% 50.00%,75.00% 93.30%,25.00% 93.30%,0.00% 50.00%,25.00% 6.70%,75.00% 6.70%);

   #clip-path: polygon(79.39% 90.45%,20.61% 90.45%,2.45% 34.55%,50.00% 0.00%,97.55% 34.55%);

   background-color: none;
 }
 .cBubble p{
 	position: absolute;
 	text-align: center;
 	left: 50%;
 	transform: translateX(-50%);
 	top: 20%;
 	color: #7affe9;
 	text-shadow: -1px 1px 3px rgba(0,0,0,1);
 }
 #timeline .cBubble p{
 	position: absolute;
 	text-align: center;
 	left: 50%;
 	transform: translateX(-50%);
 	top: -20%;
 	font-size: 0.8rem;
 	color: #7affe9;
 	text-shadow: -1px 1px 3px rgba(0,0,0,1);
 	transition: color 0.3s, top 0.3s;
 }
 .cBubble:hover p{
 	color: white !important;
 }
.cUp:hover{
 	top: 80% !important;
 }
 .cBubble:hover{
 	top: 20%;
 	cursor: pointer;
 }
.cUp{
	top: 70%;
}
.cUp p{
	top: 90% !important;
}
.cBubble img{
	width: 80%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.composerlist{
	grid-auto-rows: 1fr;
}
.composerlist .col-1,.col-4{
	padding: 0 !important;
}
.composerlist h3{
	font-size: 3.0rem;
	margin-bottom: 2rem;
}
.composerlist > div{
	padding-top: 3rem;
	padding-bottom: 3rem;
	border-top: solid var(--snow) 3px;
	background-attachment: fixed;
}
.composerlist .comp-img-block{
	position: relative;
	margin: auto;
}
.comp-img{
	width: 100%;
	cursor: pointer;
	transition: all 0.4s;
}
.comp-img:hover {
	scale: 1.03;
}
.hist-intro .container >*:first-child{
	margin-top: 7.5rem;
}
.hist-intro .container >*:last-child{
	margin-bottom: 7.5rem;
}
.composerlist > div:nth-child(6) {
	background-image: url("images/tchaikovsky-banner.png");
	background-position: 50% 25%;
	background-size: 100%;
}
.composerlist > div:nth-child(1) {
	/*background-color: #E06C9F;*/
	#background-color: var(--sea);
	background-image: url("images/bach-banner.png");
	background-position: 50% 40%;
	background-size: 100%;
}

.composerlist > div:nth-child(2) {
	/*background-color: #E06C9F;*/
	#background-color: var(--sea);
	background-image: url("images/mozart-banner.png");
	background-position: 50% 40%;
	background-size: 100%;
}
.composerlist > div:nth-child(3) {
	/*background-color: #E06C9F;*/
	#background-color: var(--sea);
	background-image: url("images/beethoven-banner.png");
	background-position: 50% 30%;
	background-size: 100%;
}
.composerlist > div:nth-child(4) {
	/*background-color: #E06C9F;*/
	#background-color: var(--sea);
	background-image: url("images/chopin-banner.png");
	background-position: 50% 50%;
	background-size: 100%;
}
.composerlist > div:nth-child(5) {
	/*background-color: #E06C9F;*/
	#background-color: var(--sea);
	background-image: url("images/liszt-banner.png");
	background-position: 50% 50%;
	background-size: 150%;
}
.composerlist > div:nth-child(8) {
	/*background-color: #E06C9F;*/
	#background-color: var(--sea);
	background-image: url("images/rachmaninoff-banner.png");
	background-position: 50% 50%;
	background-size: 100%;
}
.composerlist > div:nth-child(7) {
	/*background-color: #E06C9F;*/
	#background-color: var(--sea);
	background-image: url("images/debussy-banner.png");
	background-position: 50% 50%;
	background-size: 100%;
}
.comingsoon{
	color: darkgray;
}
.cl{
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0%;
	left: 0%;
	z-index: 99;
	background-color: rgba(0, 0, 0, 0.4);
	opacity: 1;
	transition: all 0.3s;
	display: none;
}
.cl .w-100{
	position: relative;
}
.cl-holder{
	position: absolute;
	top: 0%;
	left: 50%;
	transform: translate(-50%, 10vh);
	background-color: var(--snow);
	width: 50vw;
	height: 500px;
	border-radius: 25px;
}
.cl h3{
	color: var(--black);
}
.cl-bar{
	background-color: var(--darksnow);
	border-top-right-radius: 25px;
	border-top-left-radius: 25px;
	position: relative;
	height: 4rem;
}
.cl-cross{
	font-size: 1.5rem;
	padding-bottom: 0.5rem;
	padding-top: 0.5rem;
	padding-left: 0.7rem;
	padding-right: 0.7rem;
	background-color: transparent;
	border-radius: 100%;
	border: none;
	transition: all 0.5s;
	cursor: pointer;
}
.cl-cross:hover{
	background-color: rgba(0, 0, 0, 0.15);
}
.cl-cross-holder{
	width: 2.9rem;
	position: absolute;
	top: 0.4rem;
	right: 0.4rem;
	display: inline-block;
}
.cl-l-arrow{
	right: -1rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 2.2rem;
	transition: all 0.5s;
	padding: 1rem;
	cursor: pointer;
}
.cl-l-arrow:hover {
	right: -0.8rem;
}
.cl-r-arrow{
	left: -1rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 2.2rem;
	transition: all 0.5s;
	padding: 1rem;
	cursor: pointer;
}
.cl-r-arrow:hover {
	left: -0.8rem;
}
#cl-info{
	height: 8rem;
}
#cl-info p{
	color: var(--black);
}
#cl-img{
	height: 100%;
	border-radius: 100%;
}
.scibody{
	background-image: url("images/sheet-1.png");
	background-size: cover;
}
#science{
	position: relative;
	background-color: white;
	min-width: 50rem;
	width: 50%;
	position: absolute;
	top: 10rem;
	left: 50%;
	transform: translateX(-50%);
	border: black double 10px;
	z-index: -1;
}
#scienceblock{
	margin: 2rem;
}
#scienceblock h2{
	color: black;
	font-size: 3rem;
	text-align: center;
	position: relative;
	margin-bottom: 6rem;
}
.centergif{
	margin: auto;
   text-align: center;
   position: relative;
   left: 50%;
   transform: translateX(-50%);
   max-width: 50%;
}
#topbrace{
	transform: rotate(-90deg) translate(5%, -50%);
	width: 25%;
	position: absolute;
	top: 0;
	left: 50%;
}
#noteimg{
	width: 30%;
}
#wavegif{
	width: 50%;
}
.scitext{
	color: black;
	font-size: 1.4rem;
}

.playpitches{
	width: 80%;
	height: 30%;
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0%);
	display: flex;
	justify-content: center;
}
#o-a{
	height: 100%;
}
.w-90{
	width: 90%;
}
.indexslide{
	margin-top: 2.0rem;
}
.scienceholder{
	height: 100%;
}
.scienceholder h3{
	font-size: 2.5rem;
}
.slidebtn{
	width: 5.0rem;
	height: 5.0rem;
	border-radius: 100%;
	position: absolute;
	transition: all 0.4s;
	font-size: 3.0rem;
	cursor: pointer;
	top: 50%;
	transform: translateY(-50%);
}
.r-arr{
	right: 2.0rem;
}
.l-arr{
	left: 2.0rem;
}
.slideno{
	position: absolute;
	bottom: 0%;
	left: 50%;
	transform: translate(-100%, 0%);
}
.slideno p{
	font-size: 2.5rem;
	color: var(--black);
}
.slidebtn:hover{
	background-color: #dddddd;
}

.model{
	padding-top: var(--navheight);
	height: 100vh;
	position: relative;
	width: 100%;
	overflow: hidden;
}

.model-content{
	width: 100%;
	height: 100vh;
	position: absolute;
	top: 0%;
	left: 0%;
}

.model h3{
	color: var(--snow);
	position: absolute;
	top: 18%;
	left: 0%;
	font-size: 4.5rem;
	font-weight: 400;
}

.model .container{
	position: relative;
	height: 100%;
}

.bubbles{
/*	background-color: #0c192c;*/
	position: absolute;
	top: 0%;
	display: flex;
	height: 100vh;
	width: 100%;

	background-size: 100% px;
	background-repeat: repeat-y;
	background: repeating-linear-gradient(
	  #252525,
	  #000000 3px,
	  transparent 10px,
	  transparent 20px
	);
}

.bubbles span{
	position: relative;
	width: 5vw;
	height: 5vw;
	background: var(--purple);
	box-shadow: 0px 0px 33px 20px rgba(67,27,93,1);
	margin: 0 4px;
	transform: rotate(deg);
	animation: bubbleanim 15s linear infinite;
	animation-duration: calc(125s / var(--i));
	border-radius: 50%;
}

.bubbles span:nth-child(even){
	background: var(--sea);
	box-shadow: 0px 0px 23px 14px rgba(19,140,140,1), 0px 0px 40px 20px rgba(19,140,140,1);
}

.model-info-btn{
	border-radius: 4rem;
	border: solid var(--white) 0.3rem;
	width: 20rem;
	height: 8rem;
	/*box-shadow: 5px 5px 40px  #000000;*/
	background-color: var(--dark);
	transition: opacity 0.5s, background-color 0.4s, border 0.2s, transform 0.5s;
	box-sizing: border-box;
	position: absolute;
	right: 10%;
	bottom: 25%;
}

.model-info-btn:hover{
	border: solid var(--brightforest) 0.3rem;
}

.model-info-btn:hover p{
	color: var(--brightforest);
}

.model-info-btn p{
	font-size: 2.5rem;
	color: var(--snow);
	margin: auto;
	transition: color 0.2s;
}

.model-info-btn:hover{
	transform: scale(1.05)
}

@keyframes bubbleanim{
	0%{
		transform: translateY(-10vh) scale(0);
	}
	100%{
		transform: translateY(100vh) scale(1);
		opacity: 0.1;
	}
}

@media screen and (max-width: 768px) {
	.comp-content{
		display: block !important;
	}
	.composerlist .col-lg-8{
		width: 100%;
		max-width: 100%;
	}
	.comp-content .comp-img-block{
		width: 60%;
	}
}
	
	@media screen and (min-width: 1200px) {
}