@charset "utf-8";

html{
	padding:0;
	margin:0;
	box-sizing: border-box;
	font-family: ubuntu;
}

body{	
	margin-left: auto;
	margin-right: auto;
	line-height:2rem;
}

#intro{
	width:100%;
	height:100%;
}

.loader{
	position:absolute;
	width:300px;
	height:250px;
	left:50%;
	top:50%;
	margin-left:-150px;
	margin-top:-125px;
}

.cent{
	margin:auto;
}

.centext{
	margin: 0 0 0 25px;
}

.skip_intro{
	color:black;
	margin:auto;
}
.vid_art {
    padding: 1rem;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

a:link { 
	text-decoration: none; 
	}

.loader_wrapper{
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	background-color:#FFFFFF;
	justify-content:center;
	align-items:center;	
	display:block;
	z-index:50;
	overflow:hidden;
}

.lab{
    font-family: ruge-boogie;
    font-style:cursive;
    font-weight: 400;
	font-size:140px;
}

.fullscreen{
	height:100%;
}

.header {
	height:auto;
	justify-content: center;
}

#header2{
	max-width:800px;
	margin:auto;
	display:block;
}

#navbar {
  position:sticky;
  top:0px;
  padding:12px 2px;
  z-index:5;
  height:2.5rem;
}

#navbarFix {
  position:relative;
  top:0px;
  padding:10px;
  z-index:5;
}

#navbarFix a{
  color:black;
  text-decoration:none;
  font-size:20px;
  font-weight: 600;
}

#navbarFix a:hover {
	color:#10D5C4;
}


#navbar a {
  float:left;
  display:block;
  color:black;
  text-align:center;
  padding: 5px;
  text-decoration:none;
  font-size:20px;
  font-weight: 600;
}

#navbar a:hover {
	color:#10D5C4;
}

#navbar button {
  display:block;
  color:black;
  text-align:center;
  padding:6px;
  text-decoration:none;
  font-size:20px;
  font-weight: 600;
  border: none; 
  outline: none;
  background-color: transparent;
  float:right;
  cursor: pointer;
}

#myBtn:hover {
  color: #CD05B3;
}

#submit:hover {
  color: #CD05B3;
  background-color:#10D5C4;
}

.smalltext a:hover{
	color:#CD05B3;
	font-weight:500;
}

.concept {
	color:black;
	font-size: 18px;
	line-height:22px;
	font-weight:400;
	margin: -10px 12px 0 12px;
}

.language {
	height:2rem;
}

.Eng{
	opacity:1;
	position:absolute;
	top:0;
}

.Fr{
	opacity:0;
	position:relative;
	top:0;
}


.bold{
	font-weight: bolder;
	font-size:1.2rem;
	color:#7C14AA;
}

#Layer_1 {
	height:10vw;
	display:block;
	position:absolute;
	top:50%;
	margin-top:-5vw;
	left:25%;
}

.cat1{
  max-height: 100vh;
  transform-origin: 320px 82px;
  animation: steam-animation 2s infinite;
}

@keyframes steam-animation {
  50%   { transform: scale(0.5,0.5); opacity: 1;}
  100% { transform: scale(1,1); opacity: 1;}
}

.clr {animation: col 3s linear infinite;}
.clr1 {animation: col 3s linear infinite; 
	 animation-delay: 0.75s;}
.clr2 {animation: col 3s linear infinite; 
	 animation-delay: 1.5s;}

@keyframes col {
0%,16% {fill:#FFFFFF}
34%,50%{fill:#10D5C4}
66%,74% {fill:#CD05B3}
100% {fill:#FFFFFF}
}


#Zammabunda:hover{
  -webkit-transform:rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}



footer{
	padding: 0.5rem 0 0;
	text-align: center;
	color:#5500BF;
	position:relative;
	clear:both;
	bottom:0;
	height:200px;
}

.icon{
	width:80%;
	max-width:6vw;
	height:auto;
}

.side-footer{
	font-size:1rem;
	letter-spacing:0.05rem;
	font-weight:700;
	width:15%;
	max-width:80px;
	position:absolute;
}

.left{
	left:0;
	bottom:0;
}

.right{
	right:0;
	bottom:0;
}

.middle-footer{
	font-size:0.6rem;
	font-weight:300;
	width:60%;
	bottom:0;
	position:absolute;
	left:50%;
	margin-left:-30%
}

.middle-footer a {
	font-weight: bold;
}

#science:hover {
	color:#10D5C4;
}

#art:hover {
  color: #CD05B3;
}

.col5{
	width:230px;
	height:1000px;
	position:relative;
}

#dare{
	top:20px;
	left:0px;
	position:absolute;
}

#sensu{
	bottom:790px;
	left:0px;
	position:absolute;
}

#sensu:hover {
 bottom:280px;
}

.soon{
	margin-top:0.5rem;
	margin-bottom:0.5rem;
	font-size:1rem;
	letter-spacing: 0.1rem;
	font-weight:700;
	color:#5500BF;
	float:left;
}

.title{
	font-size:1rem;
	letter-spacing: 0.1rem;
	font-weight:700;
	color:#5500BF;
	font:italic;
	justify-content:center;
}

.fullscreenvideo{
	position:absolute;
	top:20%;
}



.col1{
	display: block;
	position:relative;
	
}

.lefty{
	margin: 5 0 0 5;
	font-size:1rem;
	letter-spacing: 0.1rem;
	font-weight:700;
	color:#5500BF;
	display:block;
	position:relative;
}

#D001{
	width:100%;
	position:relative;
}
#C001{opacity: 1;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#C002{opacity: 0;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#D001:hover #C001{animation:skull02 2s linear infinite;
	transform:scale(1.5);
	z-index: 100;}
#D001:hover #C002{animation:skull01 2s linear infinite;
	transform:scale(1.5);
	z-index: 100;}

#D003{
	width:100%;
	position:relative;}
#C003{opacity: 1;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#C004{opacity: 0;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#C005{opacity: 0;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#D003:hover #C003{animation:D003 3s linear infinite;
	transform:scale(1.5);
	z-index: 100;}
#D003:hover #C004{animation:D003 3s linear infinite;
	animation-delay: 1s;
	transform:scale(1.5);
	z-index: 100;}
#D003:hover #C005{animation:D003 3s linear infinite;
	animation-delay: 2s;
	transform:scale(1.5);
	z-index: 100;}

@keyframes D003{
	0% {opacity: 1}
	33% {opacity: 1}
	34%,99% {opacity: 0}
	100% {opacity: 1}
}

#D011{
	width:100%;
	position:relative;
}
#C011{opacity: 1;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#C012{opacity: 0;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#D011:hover #C011{animation:skull02 2s linear infinite;
	transform:scale(1.5);
	z-index: 100;}
#D011:hover #C012{animation:skull01 2s linear infinite;
	transform:scale(1.5);
	z-index: 100;}

#D013{
	width:100%;
	position:relative;
}
#C013{opacity: 1;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#C014{opacity: 0;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#D013:hover #C013{animation:skull02 2s linear infinite;
	transform:scale(1.5);
	z-index: 100;}
#D013:hover #C014{animation:skull01 2s linear infinite;
	transform:scale(1.5);
	z-index: 100;}

#D015{
	width:100%;
	position:relative;
}
#C015{opacity: 1;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#C016{opacity: 0;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#C017{opacity: 0;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#C018{opacity: 0;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#D015:hover #C015{animation:D015 4s linear infinite;
	transform:scale(1.5);
	z-index: 100;}
#D015:hover #C016{animation:D015 4s linear infinite;
	animation-delay: 1s;
	transform:scale(1.5);
	z-index: 100;}
#D015:hover #C017{animation:D015 4s linear infinite;
	animation-delay: 2s;
	transform:scale(1.5);
	z-index: 100;}
#D015:hover #C018{animation:D015 4s linear infinite;
	animation-delay: 3s;
	transform:scale(1.5);
	z-index: 100;}

@keyframes D015{
	0% {opacity: 1}
	25% {opacity: 1}
	26%,99% {opacity: 0}
	100% {opacity: 1}
}

#D019{
	width:100%;
	position:relative;
}
#C019{opacity: 1;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#C020{opacity: 0;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#C021{opacity: 0;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#C022{opacity: 0;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#C023{opacity: 0;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#D019:hover #C019{animation:D019 5s linear infinite;
	transform:scale(1.5);
	z-index: 100;}
#D019:hover #C020{animation:D019 5s linear infinite;
	animation-delay: 1s;
	transform:scale(1.5);
	z-index: 100;}
#D019:hover #C021{animation:D019 5s linear infinite;
	animation-delay: 2s;
	transform:scale(1.5);
	z-index: 100;}
#D019:hover #C022{animation:D019 5s linear infinite;
	animation-delay: 3s;
	transform:scale(1.5);
	z-index: 100;}
#D019:hover #C023{animation:D019 5s linear infinite;
	animation-delay: 4s;
	transform:scale(1.5);
	z-index: 100;}

@keyframes D019{
	0% {opacity: 1}
	20% {opacity: 1}
	21%,99% {opacity: 0}
	100% {opacity: 1}
}

#D024{
	width:100%;
	position:relative;}
#C024{opacity: 1;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#C025{opacity: 0;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#C026{opacity: 0;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#D024:hover #C024{animation:D003 3s linear infinite;
	transform:scale(1.5);
	z-index: 100;}
#D024:hover #C025{animation:D003 3s linear infinite;
	animation-delay: 1s;
	transform:scale(1.5);
	z-index: 100;}
#D024:hover #C026{animation:D003 3s linear infinite;
	animation-delay: 2s;
	transform:scale(1.5);
	z-index: 100;}

#D028{
	width:100%;
	position:relative;
}
#C028{opacity: 1;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#C029{opacity: 0;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#D028:hover #C028{animation:skull02 2s linear infinite;
	transform:scale(1.5);
	z-index: 100;}
#D028:hover #C029{animation:skull01 2s linear infinite;
	transform:scale(1.5);
	z-index: 100;}

#D030{
	width:100%;
	position:relative;
}
#C030{opacity: 1;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#C031{opacity: 0;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#D030:hover #C030{animation:skull02 2s linear infinite;
	transform:scale(1.5);
	z-index: 100;}
#D030:hover #C031{animation:skull01 2s linear infinite;
	transform:scale(1.5);
	z-index: 100;}

#D032{
	width:100%;
	position:relative;
}
#C032{opacity: 1;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#C033{opacity: 0;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#D032:hover #C032{animation:skull02 2s linear infinite;
	transform:scale(1.5);
	z-index: 100;}
#D032:hover #C033{animation:skull01 2s linear infinite;
	transform:scale(1.5);
	z-index: 100;}

#D035{
	width:100%;
	position:relative;
}
#C035{opacity: 1;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#C036{opacity: 0;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#D035:hover #C035{animation:skull02 2s linear infinite;
	transform:scale(1.5);
	z-index: 100;}
#D035:hover #C036{animation:skull01 2s linear infinite;
	transform:scale(1.5);
	z-index: 100;}

#D037{
	width:100%;
	position:relative;
}
#C037{opacity: 1;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#C038{opacity: 0;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#D037:hover #C037{animation:skull02 2s linear infinite;
	transform:scale(1.5);
	z-index: 100;}
#D037:hover #C038{animation:skull01 2s linear infinite;
	transform:scale(1.5);
	z-index: 100;}

#D042{
	width:100%;
	position:relative;}
#C042{opacity: 1;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#C043{opacity: 0;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#C044{opacity: 0;
		position:absolute;
		top:2.5rem;
		left:2.5rem;}
#D042:hover #C042{animation:D003 3s linear infinite;
	transform:scale(1.5);
	z-index: 100;}
#D042:hover #C043{animation:D003 3s linear infinite;
	animation-delay: 1s;
	transform:scale(1.5);
	z-index: 100;}
#D042:hover #C044{animation:D003 3s linear infinite;
	animation-delay: 2s;
	transform:scale(1.5);
	z-index: 100;}


.textMuli{
	display:flex;
}
#English{
	position:relative;
	animation: op 10s linear infinite; 
}

#French{position:absolute;
	animation: op 10s linear infinite; 
	animation-delay: 2.5s;
	opacity:0;
}

#German{position:absolute;
	animation: op 10s linear infinite; 
	animation-delay: 5s;
	opacity:0;
}

#Japonese{position:absolute;
	animation: op 10s linear infinite; 
	animation-delay: 7.5s;
	opacity:0;
}


@keyframes op{
	0%{opacity:0;}
	10%,23%{opacity:1;}
	33%{opacity:0;}
	34%,100%{opacity:0;}
	
}

.smalltext{
	font-size: 0.8rem;
	font:normal;
	font-weight:200;
	display:inline;
}

.inline {
	display:inline;
}

form{
	padding-left:10px;
	box-sizing:border-box;
}

input, select, textarea {
  font-family: inherit;
  font-size: 100%;
  color:darkgray;
  width:150px;
  box-sizing: border-box;
  position:relative;
}

button{
  border-radius:2rem;
  background-color:#5500BF;
  font-family: inherit;
  font-size: 80%;
  font-weight:400;
  color:#FFFFFF;
  width:6rem;
  height:2.5rem;
}

.language button{
	background-color:white;
	background-repeat:no-repeat;
	background-size: cover;
	color:white;
	font-weight:bold;
	font-size:0.7rem;
	width:3rem;
    height:1.5rem;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	z-index:5;
	cursor: pointer;
}

.language button:hover{
	color:#CD05B3;
}

#FrL{
	background-image:url("Images/Frflag.svg");
}

#EngL{
	background-image:url("Images/UKflag.svg");
}
.checkbox{
    white-space: nowrap;
	display:inline;
}

.checkbox input {
	width:15px;
}


img{
	max-width:100%;
	max-height:100%;
	display:block;
}

.main{
	position:relative;
}



.bounceball {
  animation: bounce2 800ms linear infinite;
}

@keyframes bounce2{
	0% {transform: translate(30px, -10px) scaleX(0.7) scaleY(1.4);}
	30% {transform: translate(0px, 80px) scaleX(1) scaleY(1);}
    50% {transform: translate(-200px, 180px) scaleX(3) scaleY(0.33);}
	70%,80% {transform: translate(0px, 0px) scaleX(1) scaleY(1);}
	100% {transform: translate(30px, -10px) scaleX(0.7) scaleY(1.4);}
}

.loadingskip {
	max-width:300px;
	width:300px;
	position:absolute;
	bottom:0;
	left:50%;
	margin-left:-150px;
	text-align: center;
}

.murasaki{
	background-color:#5500BF;
	background-image: linear-gradient(to right, white,#5500BF,white );
	color:white;
	padding-left:10px;
	clear:both;
	width:100%;
	font-weight: 600;
	height:4rem;
	display:flex;
	justify-content: center;
	align-items: center;
}

.pink{
	background-color:#CD05B3;
	background-image: linear-gradient(to right, white,#CD05B3,white );
	color:black;
	padding-left:10px;
	clear:both;
	width:100%;
	font-weight: 600;
	display:flex;
	justify-content: center;
	align-items: center;
	height:4rem;
}

.cyan{
	background-color:#10D5C4;
	background-image: linear-gradient(to right, white,#10D5C4,white );
	color:black;
	padding-left:10px;
	clear:both;
	width:100%;
	font-weight: 600;
	display:flex;
	justify-content: center;
	align-items: center;
	height:4rem;
}

.white{
	color:black;
	padding-left:10px;
	clear:both;
	width:100%;
	font-weight: 600;
	font-size: 2rem;
	display:flex;
	justify-content: flex-start;
	align-items:flex-start;
	height:4rem;
}

.fat{
		height:8rem;
	  text-align: center;
}
.transp{
	padding-left:10px;
	clear:both;
	width:100%;
	height:4rem;
	display:flex;
	justify-content: center;
	align-items: center;
}


.murasaki a{
	color:#10D5C4;
}

.pink a{
	color:#10D5C4;
}

.cyan a{
	color:#CD05B3;
}

.centered{
	margin:auto;
}

.centered{
	transition: transform .2s;
}


.centered:hover{
	transform:scale(1.5);
	z-index:100;
}



.whoarewe img{
	flex: 1 0 auto;
}
.col{
	height:300px;
	display:flex;
	justify-content: center;
	background-color:transparent;
	flex-wrap: wrap;
	margin-bottom:50px;
}

.colmod{
	height:450px;
}

.colmod a{
	color:black;
}

.colmodin{
	border: 5px solid;
	border-radius: 16px;
	margin: 10px;
	height:410px;
	width:auto;
	min-width:280px;
	display: flex;
    flex-direction: column;
	padding:5px;
}

.coltype01{
		background:rgba(23,217,190,1.00);
}
.coltype01:hover{
	background:#A41DFF;
}

.coltype02{
		background:#FF51C2;
}
.coltype02:hover{
	background:#FF701C;
}

.imagemod{
	height:240px;
	margin:auto;
	position:relative;
}
.textmod{
	height:190px;
	margin:auto;
	position:relative;
}
.overflowhid{
	overflow: hidden;
}

#shodo1{display:flex;}
#shodo2{display:none;}
#shodo:hover #shodo1{display:none;}
#shodo:hover #shodo2{display:flex;}


.colshodo img{
	border:10px solid #000000;
}


.colshodo2{
 background-image:radial-gradient(black 60%,white 70%,white)
}

.shodoimg{
	margin-left:12px;
	margin-right:auto;
	margin-top:auto;
	margin-bottom:auto;
}
.shodotxt{
	width:140px;
	height:190px;
	text-overflow: clip;
	margin-right:12px;
	margin-left:auto;
		margin-top:auto;
	margin-bottom:auto;
		border:10px solid #000000;
	  -ms-word-break: break-all;
      word-break: break-all;
      word-break: break-word;
  -webkit-hyphens: auto;
     -moz-hyphens: auto;
          hyphens: auto;
		padding:5px;
}

.catg{
	float: left;
	width:inherit;
	max-width: inherit;
	height:auto;
	overflow: hidden;
}

.catg img{
	margin-right: 10px;
	float:left;
}
.Mau{
	background-image:url("Images/Mau.jpg");
	background-size: cover;
}

.Mau a{
	color:black;
	font-weight:600;
	font-size:1.5rem;
	padding-top:200px;
}

.Mayaa {
	background-image:url("Images/maayawakasugi.jpg");
	background-size: cover;
}

.Mayaa a{
	color:black;
	font-weight:600;
	font-size:1.5rem;
	padding-top:170px;
	padding-right:40%;
}

.Agne {
	background-image:url("Images/Agne.png");
	background-size: cover;
}

.Agne a{
	color:white;
	font-weight:600;
	font-size:1.5rem;
	padding-top:10px;
	padding-right:35%;
}

.Takashi {
	background-image:url("Images/Takashi.svg");
	background-size: cover;
}

.Takashi a{
	color:white;
	font-weight:600;
	font-size:1.5rem;
	padding-top:10px;
	padding-left:50%;
}


.Tomo {
	background-image:url("Images/Tomo.svg");
	background-size: cover;
	background-origin: content-box;
	background-repeat: no-repeat;
}

.Tomo a{
	color:white;
	font-weight:600;
	font-size:1.5rem;
	padding-top:150px;
	padding-left:60%;
}



.Akira{
	background-color:#CD05B3;
	background-image: linear-gradient(to bottom, white,#CD05B3,white );
	color:black;
}

.Akira h1{
	padding:5px;
}

.Akira text{
	padding: 10px;
	padding-left: 20px;
	font-size: 1.2rem;
	font-weight:500;
	font-family:"ubuntu-condensed";
}

.Aure{
	background-color:#10D5C4;
	background-image: linear-gradient(to bottom, white,#10D5C4,white );
	color:black;
}

.Aure h1{
	padding:10px;
}

.Aure text{
	padding:10px;
	font-size: 1.2rem;
	font-weight:500;
	font-family:"ubuntu-condensed";
}

.arttext {
	background-image:url("Images/ArtBk.png");
	background-size:cover;
	color:antiquewhite;
	padding:5px;
}

.mask .top {
	height:300px;
	width:300px;
	display:block;
	margin:auto;
	background-image: url("Images/Selfie_02mask.jpg");
	background-size: contain;
	background-repeat:no-repeat;
}

.mask:hover .top{
	background-image: url("Images/Selfie_02.jpg");
}
.murasaki2{
	background-color:#A663C8;
	background-image: linear-gradient(to bottom, white,#A663C8,white );
	color:black;
	padding-left:10px;
	clear:both;
	width:100%;
	font-weight: 600;
}

.murasaki2 text{
	padding:10px;
	font-size: 1.2rem;
	font-weight:500;
	font-family:"ubuntu-condensed";
}

#We {
	padding-top:15px;
	padding-bottom:15px;
}

.hd{
	animation:head 30s ease-in infinite;
}

.hd2{
	animation:head2 30s ease-in infinite;
}

@keyframes head {
	0%,11%{transform:translate(0px, 0px) rotate(0);
		transform-origin: 345px 195px;}
	
	12%{transform:translate(0px, -5px) rotate(-50deg);
	transform-origin: 345px 195px;}
	
	13%{transform:translate(0px, 0px) rotate(0);
		transform-origin: 345px 195px;}
	
	13%,23%{transform:translate(0px, 0px) rotate(0deg);
	transform-origin: 345px 195px;}
	
	24%{transform:translate(0px, 15px) rotate(50deg);
		transform-origin: 345px 195px;}
	
	25%{transform:translate(0px, 0px) rotate(0);
		transform-origin: 345px 195px;}
	
	75%{transform:translate(0px, 0px) rotate(0);
		transform-origin: 345px 195px;}
	76%{transform:translate(-20px, 0px) rotate(0);
		transform-origin: 345px 195px;}
	77%{transform:translate(0px, 0px) rotate(0);
		transform-origin: 345px 195px;}
	78%{transform:translate(20px, 0px) rotate(0);
		transform-origin: 345px 195px;}
	79%{transform:translate(0px, 0px) rotate(0);
		transform-origin: 345px 195px;}
	80%{transform:translate(-20px, 0px) rotate(0);
		transform-origin: 345px 195px;}
	81%{transform:translate(0px, 0px) rotate(0);
		transform-origin: 345px 195px;}
	82%{transform:translate(20px, 0px) rotate(0);
		transform-origin: 345px 195px;}
	83%{transform:translate(0px, 0px) rotate(0);
		transform-origin: 345px 195px;}
	
	100%{transform:translate(0px, 0px) rotate(0);
	transform-origin: 345px 195px;}
}

@keyframes head2 {
		0%,9%{transform:translate(0px, 0px) rotate(0);
		transform-origin: 585px 195px;}
	
	10%{transform:translate(0px, -5px) rotate(50deg);
	transform-origin: 585px 195px;}
	
	11%{transform:translate(0px, 0px) rotate(0);
		transform-origin: 585px 195px;}
	
	11%,30%{transform:translate(0px, 0px) rotate(0deg);
	transform-origin: 585px 195px;}
	
	31%{transform:translate(0px, -5px) rotate(-50deg);
		transform-origin: 585px 195px;}
	
	32%,75%{transform:translate(0px, 0px) rotate(0deg);
	transform-origin: 585px 195px;}
	
	76%{transform:translate(-20px, 0px) rotate(0);
		transform-origin: 585px 195px;}
	77%{transform:translate(0px, 0px) rotate(0);
		transform-origin: 585px 195px;}
	78%{transform:translate(20px, 0px) rotate(0);
		transform-origin: 585px 195px;}
	79%{transform:translate(0px, 0px) rotate(0);
		transform-origin: 585px 195px;}
	80%{transform:translate(-20px, 0px) rotate(0);
		transform-origin: 585px 195px;}
	81%{transform:translate(0px, 0px) rotate(0);
		transform-origin: 585px 195px;}
	82%{transform:translate(20px, 0px) rotate(0);
		transform-origin: 585px 195px;}
	83%{transform:translate(0px, 0px) rotate(0);
		transform-origin: 585px 195px;}
	
	100%{transform:translate(0px, 0px) rotate(0);
	transform-origin: 585px 195px;}
}


.purpose {
	color:black;
	font-size: 0.9rem;
	line-height:1rem;
	font-weight:400;
	font-family:"ubuntu-condensed";
	background-repeat: no-repeat;
	background-size: contain;
	width:100%;
	justify-content: center;
	display:none;
	overflow: hidden;
}


.clickpurpose{
height:200px;
cursor: pointer;
overflow-y: visible;
}

#bottom{
	overflow:hidden;
}

#top{
	z-index:2;
}

.kappamiddle{
	z-index:-6;
	position:absolute;
	bottom:0;
	left:0;
}

.st20{
 animation:t20 5s linear infinite;

}

.st21{
 animation:t20 5s linear infinite;
	animation-delay: 2s;
}

@keyframes t20{
	0% {fill:white;}
	20% {fill:#10D5C4;}
	80% {fill:#CD05B3;}
	100% {fill:white;}
}

#modelling div{maring:auto;}
#mod1{display: flex;}
#mod2{display:none;}
#modelling:hover #mod1{display:none;}
#modelling:hover #mod2{display:flex;}

#art0 img{margin: auto;}
#art_b{display: flex;}
#art_a{display: none;}
#art0:hover #art_b{display:none;}
#art0:hover #art_a{display:flex;}

@keyframes eye01{
	0% {transform:rotate(0deg);
	    transform-origin: 105px 155px;}
	50% {transform:rotate(180deg);
	transform-origin: 105px 155px;}
	100% {transform:rotate(360deg);
	transform-origin: 105px 155px;}
}

@keyframes eye02{
	0% {transform:rotate(0deg);
	    transform-origin: 75px 105px;}
	50% {transform:rotate(180deg);
	transform-origin: 75px 105px;}
	100% {transform:rotate(360deg);
	transform-origin: 75px 105px;}
}

@keyframes ear00{
	0% {transform:translate(0px, 0px)}
	50% {transform:translate(40px, -70px)}
	100% {transform:translate(0px, 0px)}
}

#Skull00{opacity: 1;
		position:absolute;
		top:0;
		left:0;
}

#Skull01{opacity: 0;
		position:absolute;
		top:0;
		left:0;
}
#Skull02{opacity: 0;
		position:absolute;
		top:0;
		left:0;
}

#design img{margin:auto;}
#design:hover #Skull00{opacity: 0}
#design:hover #Skull01{animation:skull01 1s linear infinite}
#design:hover #Skull02{animation:skull02 1s linear infinite}

#AIpf div{margin:auto;}
#Gecko01{opacity:1;
position:absolute;
top:0;
left:0;
transition:opacity 1s;}
#Gecko02{opacity:0;
position:absolute;
top:0;
left:0;}
#Gecko03{opacity:0;
position:absolute;
top:0;
left:0;}
#AIpf:hover #Gecko01{opacity:0;}
#AIpf:hover #Gecko02{animation:gk 2s linear infinite;}
#AIpf:hover #Gecko03{animation:gk 2s linear infinite;
animation-delay: 1s;}

@keyframes gk{
	0% {opacity: 1}
	50% {opacity: 1}
	51%,98% {opacity: 0}
	99%,100% {opacity: 1}
}

#d_p div{margin:auto;}
#d_p_b {opacity:1;
position:absolute;
top:0;
left:0;}
#d_p_a1 {opacity:0;
position:absolute;
top:0;
left:0;
}
#d_p_a2 {opacity:0;
position:absolute;
top:0;
left:0;}
#d_p_a3 {opacity:0;
position:absolute;
top:0;
left:0;}
#d_p:hover #d_p_b {animation:d_p 1s linear infinite;}
#d_p:hover #d_p_a1 {animation:d_p2 1s linear infinite;
animation-delay: 0s;}
#d_p:hover #d_p_a2 {animation:d_p2 1s linear infinite;
animation-delay: 0.1s;}
#d_p:hover #d_p_a3 {animation:d_p2 1s linear infinite;
animation-delay: 0.2s;}

@keyframes d_p{
	0% {opacity: 1}
	70% {opacity: 1}
	71%,99% {opacity: 0}
	100% {opacity: 1}
}

@keyframes d_p2{
	0%, 70% {opacity: 0}
	71%,80% {opacity: 1}
	81%,100% {opacity: 0}
}

#tat1{opacity:1;
position:absolute;
top:0;
left:0;}
#tat2{opacity:0;
top:0;
left:0;
position:absolute;}
#tattoo:hover #tat1{animation:skull01 1s linear infinite;}
#tattoo:hover #tat2{animation:skull02 1s linear infinite;}

@keyframes skull01{
	0% {opacity: 1}
	50% {opacity: 1}
	51%,99% {opacity: 0}
	100% {opacity: 1}
}

@keyframes skull02{
	0%,50% {opacity: 0}
	51%,99% {opacity: 1}
	100% {opacity: 0}
}



#first {
	margin-left:auto;
	margin-right:auto;
	margin-top:20%;
}

#unicorn{
	position:absolute;
	left:0;
	top:0px;
}

#lgbtqPlus{
	position:absolute;
	left:0;
	top:20px;
}

.stop01{
	stop-color:black;
}
.stop02{
	stop-color:black;
}
.stop03{
	stop-color:black;
}
.stop04{
	stop-color:black;
}
.stop05{
	stop-color:black;
}
.stop06{
	stop-color:black;
}
.stop07{
	stop-color:black;
}

#lgbtqplusunicorn:hover .stop01{animation:unicorn 25s linear infinite}
#lgbtqplusunicorn:hover .stop02{animation:unicorn 25s linear infinite;
animation-delay: 0.5s}
#lgbtqplusunicorn:hover .stop03{animation:unicorn 25s linear infinite;
animation-delay: 1s}
#lgbtqplusunicorn:hover .stop04{animation:unicorn 25s linear infinite;
animation-delay: 1.5s}
#lgbtqplusunicorn:hover .stop05{animation:unicorn 25s linear infinite;
animation-delay: 2s}
#lgbtqplusunicorn:hover .stop06{animation:unicorn 25s linear infinite;
animation-delay: 2.5s}
#lgbtqplusunicorn:hover .stop07{animation:unicorn 25s linear infinite;
animation-delay: 3s}

#lgbtqplusunicorn2:hover {transform:scale(1.6);
z-index:10;}


@keyframes unicorn{
	0%  {stop-color:black;}
	3%  {stop-color:#E30613;}
	6% {stop-color:#EA5B0C;}
	9% {stop-color:#FFDE00;}
	12% {stop-color:#00983A;}
	15% {stop-color:#1D71B8;}
	18% {stop-color:#951B81;}
	21%,50% {stop-color:#FF67C5;}
	53%  {stop-color:#1CF9EC;}
	56% {stop-color:#15A4F3;}
	59% {stop-color:#0021FF;}
	62% {stop-color:#FF67C5;}
	65% {stop-color:#D8CB74;}
	68% {stop-color:#7DC973;}
	71%,100% {stop-color:black;}
}

.avocado{
	position:absolute;
	bottom:50px;
}

.pumpkin{
	position:absolute;
	bottom:50px;
	left:70px;
}

.imo{
	position:absolute;
	bottom:50px;
	right:0px;
	
}

#newsetc:hover .avocado{
	animation:jump 1.5s linear infinite;
}

#newsetc:hover .pumpkin{
	animation:jump 1.7s linear infinite;
	animation-delay: 1s;
}

#newsetc:hover .imo{
	animation:jump2 1.8s linear infinite;
	animation-delay: 5s;
}

@keyframes jump{
	0%,30% {transform:translate(0px, 0px)}
	38% {transform:translate(0px, -100px)}
	46%,55% {transform:translate(0px, 0px)}
	63% {transform:translate(0px, -100px)}
	71%,100% {transform:translate(0px, 0px)}
}

@keyframes jump2{
	0%,30% {transform:translate(0px, 0px)}
	35% {transform:translate(0px, -30px)}
	40%,100% {transform:translate(0px, 0px)}
}



.sub text{
	color:aqua;
	font-weight:600;
	font-size:0.8rem;
	padding-top:2px;
	position:absolute;
	animation:blink 2s linear infinite;
}

@keyframes blink{
	0%,10% {opacity:1}
	50% {opacity:0}
	90% {opacity:1}
}



.col7:hover #scienceEmbryo{animation: emb 3s linear infinite;}

@keyframes emb{
	0%,10% {transform:rotate(0deg)}
	15% {transform:rotate(-30deg)}
	18% {transform:rotate(10deg)}
	20%,100% {transform:rotate(0deg)}
}

.col2{
	max-width:380px;
	width:75%;
	display: block;
	position:relative;
	background-image:url("Images/bubble.png");
	background-repeat: no-repeat;
	background-size: contain;
}

.contain2{
	display:flex;
	width:100%;
	justify-content: center;
}

.col3{
	max-width: 380px;
	display: block;
	position:relative;
}

.col8{
	max-width: 380px;
	display: block;
	position:relative;
}

.textcolumn {
	max-width: 260px;
	margin-left: 110px;
	margin-top:50px;
	display:block;
	overflow:hidden;
	position:relative;
	color:white;
}
.verysmall {
	font:0.4rem;
	color:darkgrey;
}

.col6 {
	width:100%;
	max-width:280px;
	height:100%;
	max-height:280px;
	position:relative;
}

#mimizuku0{
	opacity:1;
	position:absolute;
	top:0;
	left:0;
}

#mimizuku1{
	opacity:0;
	position:absolute;
	top:0;
	left:0;
}

#mimizuku2{
	opacity:0;
	position:absolute;
	top:0;
	left:0;
}

.col6:hover #mimizuku0{opacity:0;}
.col6:hover #mimizuku1{animation: mimizukunimation 0.2s linear infinite;}
.col6:hover #mimizuku2{animation: mimizukunimation2 0.2s linear infinite;}

@keyframes mimizukunimation{
	0%,45% {opacity:1}
	50%,90% {opacity:0}
	95%,100% {opacity:1}
}

@keyframes mimizukunimation2{
	0%,40% {opacity:0}
	45%, 95% {opacity:1}
	100% {opacity:0}
}


.col4 {
	display:flex;
	width:100%;
	justify-content: center;
	margin: 10px;
}



.bottom {	
	clear:both;
	width:100%;
	height:300px;
	background-image:url("Images/bottombck.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	display:flex;
}

.arrowleft{
	margin-bottom: 0px;
	margin-left:80px;
	margin-top:auto;
	animation: shake 0.5s;
    animation-iteration-count: infinite;
}

.arrowright{
	margin-bottom: 0px;
	margin-right:80px;
	margin-top:auto;
	margin-left:auto;
	animation: shake 0.5s;
    animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}











@media (max-width: 479px){
	
	.fontAdjust {
	font-size:14.4px;
}
	.screenAdjust{
		max-width:360px;
		width:100%;
	}


.vid_sizing {
	background-image: url("Images/Aa256.gif");
	background-size:180px;
	height:360px;
}

.col{
	max-width:360px;
	width:100%;
}

.col1{
	max-width:360px;
	width:100%;
	}

.col2{
	max-width:360px;
	width:100%;}

.col3{
	width: 100%;
}

.col8{
	width:0%;
	display:none;
}

.textcolumn {
	width: 40%;
}
.pad{ background-position: 0 5px;}

.container {
	position:relative;
	clear:both;
}


}




@media (min-width: 480px) and (max-width: 767px){

		.fontAdjust {
	font-size:16.8px;
}
	
.screenAdjust{
	 max-width:600px;
	 width:100%;
	}

.vid_sizing {
	background-image: url("Images/Aa256.gif");
	background-size:300px;
	height:450px;
}
	
	
.col{
	max-width:300px;
	width:50%;
	float:left;
}

.pad{ background-position:5px;}

.col1{
	max-width:300px;
	width:50%;
	float:right;
}

	.col3{
	width: 100%;
}

.col8{
	width:0%;
	display:none;
}

.textcolumn {
	width: 40%;
}

}

@media (min-width: 768px) and (max-width: 1279px){

.fontAdjust {
	font-size:16.8px;
}
.screenAdjust{
	max-width:840px;
	 width:100%;
	}

.vid_sizing {
	background-image: url("Images/Aa320.gif");
	background-size:420px;
	height:500px;
}

.col{
	max-width:420px;
		width:50%;
		float:left;
}

.pad{ background-position:5px;}

.col1{
	max-width:420px;
	width:50%;
	float:right;
}

	.col3{
	width: 80%;
}

.col8{
	width: 10%;
}
	
.textcolumn {
	width: 40%;
}
	
}

@media (min-width: 1280px) and (max-width: 1599px){

		.fontAdjust {
	font-size:15.2px;
}
	
.screenAdjust{
		max-width:1140px;
	width:100%;
	}


.vid_sizing {
	background-image: url("Images/Aa640.gif");
	background-size:570px;
	height:500px;
}
		
.col{
	max-width:380px;
	width:33%;
	float:left;
}

.pad{ background-position:5px;}
	
.col1{
	max-width:570px;
	width:50%;
	float:right;
}

	.col3{
	width: 50%;
}

.col8{
	width: 20%;
}
	
.textcolumn {
	width: 40%;
}
	
}


@media (min-width: 1600px) {
	
	.fontAdjust {
	font-size:15px;
}

.screenAdjust{
	max-width:1500px;
	width:100%;
	}


.vid_sizing {
	background-image: url("Images/Aa640.gif");
	background-size:750px;
	height:600px;
}
	
.col{
	max-width:380px;
	width:25%;
	height:300px;
	float:left;
}

.pad{ background-position:5px;}

.col1{
	max-width:750px;
	width:50%;
	float:right;
	}

	.col3{
	width: 50%;
}

.col8{
	width: 20%;
}
	
.textcolumn {
	width: 40%;
}

}