Difference between revisions of "Template:Vilnius-Lithuania/CSS/Team"

Revision as of 17:26, 20 September 2020 (view source) Paulius (Talk | contribs) m ← Older edit		Revision as of 19:59, 21 September 2020 (view source) Paulius (Talk | contribs) m Newer edit →
Line 16:		Line 16:
	.introContainer {		.introContainer {
	flex-direction: column-reverse;		flex-direction: column-reverse;
−	justify-content: flex-start;	+	justify-content: center;
−	align-items: flex-start;	+	align-items: center;
	position: fixed;		position: fixed;
	height: stretch;		height: stretch;
Line 34:		Line 34:
	.introContainer .heading {		.introContainer .heading {
	position: absolute;		position: absolute;
−	font-size: 5vh;	+	font-size: 12vh;
−	top: 6vh;	+	top: 6vw;
		+	left: calc(24vw - 5vh);
	pointer-events: none;		pointer-events: none;
	font-family: "montserrat-black";		font-family: "montserrat-black";
		+	color: #6281EF;
	text-align: center;		text-align: center;
	line-height: 1;		line-height: 1;
		+	transition: left 0.3s cubic-bezier(0.5, 1, 0.89, 1), font-size 0.3s cubic-bezier(0.5, 1, 0.89, 1), top 0.3s cubic-bezier(0.5, 1, 0.89, 1);
	}		}
	.introContainer .heading div {		.introContainer .heading div {
	display: inline;		display: inline;
	}		}
−	.introContainer .heading br {	+	.introContainer .heading.novideo {
−	display: none;	+	font-size: 10vh;
		+	left: 4vw;
	}		}
	.introContainer .heading.other {		.introContainer .heading.other {
−	top: 8vh;	+	top: 7vw;
		+	left: calc(22vw - 5vh);
		+	color: transparent;
		+	-webkit-text-stroke-width: 1px;
		+	-webkit-text-stroke-color: #6281EF;
		+	}
		+	.introContainer .heading.other.novideo {
		+	left: 2vw;
	}		}
	.introContainer .heading.other .invisible {		.introContainer .heading.other .invisible {
Line 55:		Line 66:
	-webkit-text-stroke-color: transparent;		-webkit-text-stroke-color: transparent;
	}		}
−	@media (min-aspect-ratio: 1/1) {	+	@media (max-aspect-ratio: 1/1) {
	.introContainer .heading {		.introContainer .heading {
−	font-size: 7vw;	+	font-size: 10vw;
		+	top: calc(43vh - 40vw);
		+	left: 10vw;
	}		}
	.introContainer .heading br {		.introContainer .heading br {
−	display: initial;	+	display: none;
		+	}
		+	.introContainer .heading.novideo {
		+	font-size: 8vw;
		+	left: 18vw;
		+	top: 4vh;
		+	}
		+	.introContainer .heading.other {
		+	font-size: 10vw;
		+	top: calc(43vh - 39vw);
		+	left: 8vw;
		+	}
		+	.introContainer .heading.other.novideo {
		+	font-size: 8vw;
		+	left: 16vw;
		+	top: 5vh;
	}		}
	}		}
Line 68:		Line 96:
	background-image: unset;		background-image: unset;
	}		}
−	.introContainer span {	+	.introContainer > span {
	position: absolute;		position: absolute;
−	color: #FAFAFC;	+	margin-bottom: 14vh;
−	top: 7vw;	+	left: calc(32vw - 5vh);
−	width: 70vw;	+	width: calc(10vh + 36vw);
−	height: 70vw;	+	height: calc(10vh + 36vw);
	background-attachment: unset;		background-attachment: unset;
	background-position: center;		background-position: center;
Line 80:		Line 108:
	align-self: center;		align-self: center;
	font-weight: bold;		font-weight: bold;
		+	transition: left 0.3s, top 0.3s, width 0.3s, height 0.3s, transform 0.3s;
	}		}
−	@media (min-aspect-ratio: 1/1) {	+	.introContainer > span video {
−	.introContainer span {	+
−	top: 7vh;	+
−	width: 70vh;	+
−	height: 70vh;	+
−	}	+
−	}	+
−	.introContainer span video {	+
	width: 100%;		width: 100%;
	height: 100%;		height: 100%;
Line 95:		Line 117:
	border-radius: 1000px;		border-radius: 1000px;
	}		}
−	.introContainer span.novideo video {	+	.introContainer > span.novideo {
		+	left: 15vw;
		+	width: calc(10vh + 30vw);
		+	height: calc(10vh + 30vw);
		+	}
		+	.introContainer > span.novideo video {
	opacity: 0;		opacity: 0;
	}		}
−	.introContainer span > div {	+	@media (max-aspect-ratio: 1/1) {
		+	.introContainer > span {
		+	top: 45vh;
		+	transform: translateY(-50%);
		+	left: 12vw;
		+	width: 76vw;
		+	height: 76vw;
		+	}
		+	.introContainer > span.novideo {
		+	left: calc(35vw - 10vh);
		+	top: 8vw;
		+	padding-bottom: unset;
		+	width: calc(20vh + 30vw);
		+	height: calc(20vh + 30vw);
		+	transform: translateY(0%);
		+	}
		+	}
		+	.introContainer > span > div {
	width: 100%;		width: 100%;
	height: 100%;		height: 100%;
Line 109:		Line 153:
	border-radius: 1000px;		border-radius: 1000px;
	}		}
−	.introContainer span > div.transition {	+	.introContainer > span > div.transition {
	opacity: 1;		opacity: 1;
	}		}
Line 115:		Line 159:
	display: block;		display: block;
	position: absolute;		position: absolute;
−	top: 55vw;	+	margin-bottom: 14vh;
−	left: 15vw;	+	top: calc(35vh + 10vw);
−	width: 64px;	+	left: 14vw;
−	height: 64px;	+	width: 5vw;
		+	height: 5vw;
	border: unset;		border: unset;
	opacity: 0;		opacity: 0;
	pointer-events: none;		pointer-events: none;
	background-image: url("https://static.igem.org/mediawiki/2020/8/89/T--Vilnius-Lithuania--play.svg");		background-image: url("https://static.igem.org/mediawiki/2020/8/89/T--Vilnius-Lithuania--play.svg");
−	background-size: 50% 50%;	+	background-size: 40% 40%;
	background-repeat: no-repeat;		background-repeat: no-repeat;
−	background-position: 58% 50%;	+	background-position: 56% 50%;
	cursor: pointer;		cursor: pointer;
	padding: 0;		padding: 0;
Line 132:		Line 177:
	transition: transform 0.3s, opacity 300ms;		transition: transform 0.3s, opacity 300ms;
	}		}
−	@media (min-aspect-ratio: 1/1) {	+	@media (max-aspect-ratio: 1/1) {
	.introContainer button.introVideoPlay {		.introContainer button.introVideoPlay {
−	top: 55vh;	+	top: 40vw;
−	left: calc(50vw - 35vh);	+	left: calc(33vw - 10vh);
		+	width: 5vh;
		+	height: 5vh;
	}		}
	}		}
Line 147:		Line 194:
	.introContainer .memberDiv {		.introContainer .memberDiv {
	position: absolute;		position: absolute;
−	right: 0;	+	left: calc(50vw + 10vh);
−	width: 28vw;	+	width: calc(40vw - 10vh);
−	top: 32vh;	+	margin-bottom: 14vh;
	color: #FAFAFC;		color: #FAFAFC;
−	padding-right: 16px;
	transition: unset;		transition: unset;
		+	font-family: "montserrat-light";
	}		}
	.introContainer .memberDiv.transition {		.introContainer .memberDiv.transition {
Line 164:		Line 211:
	.introContainer .memberDiv.alternative.transition {		.introContainer .memberDiv.alternative.transition {
	opacity: 1;		opacity: 1;
−	}
−	.introContainer .memberDiv div {
−	margin: 4px 0;
	}		}
	.introContainer .memberDiv .memberName {		.introContainer .memberDiv .memberName {
	font-family: "montserrat-bold";		font-family: "montserrat-bold";
−	font-size: 3.25vh;	+	font-size: calc(2.2vw + 1vh);
	text-transform: uppercase;		text-transform: uppercase;
		+	display: flex;
		+	align-items: flex-end;
		+	flex-wrap: wrap;
		+	}
		+	.introContainer .memberDiv .memberName span {
		+	margin-right: calc((2.2vw + 1vh) * 0.5);
		+	}
		+	.introContainer .memberDiv .memberName > a {
		+	display: inline-block;
		+	width: calc((2.2vw + 1vh) * 0.8);
		+	height: calc((2.2vw + 1vh) * 0.8);
		+	background-image: url(https://static.igem.org/mediawiki/2020/a/a8/T--Vilnius-Lithuania--iconLinkedIn.png);
		+	background-size: 100%;
		+	background-repeat: no-repeat;
		+	background-position: center;
		+	margin-bottom: calc((2.2vw + 1vh) * 0.2);
	}		}
	.introContainer .memberDiv .memberRole {		.introContainer .memberDiv .memberRole {
−	font-family: "lato-light";	+	font-size: calc(1.2vw + 1vh);
−	font-size: 2.7vh;	+
	text-transform: uppercase;		text-transform: uppercase;
		+	margin: 8px 0 20px;
		+	}
		+	.introContainer .memberDiv .memberQuestion {
		+	font-family: "montserrat-bold";
		+	font-size: calc(1.2vw + 1vh);
		+	margin-bottom: 8px;
	}		}
	.introContainer .memberDiv .memberFunFact {		.introContainer .memberDiv .memberFunFact {
−	font-size: 2.2vh;	+	font-size: calc(0.5vw + 1.5vh);
−	font-weight: normal;	+
	}		}
−	@media (max-aspect-ratio: 14/16) {	+	@media (max-aspect-ratio: 1/1) {
	.introContainer .memberDiv {		.introContainer .memberDiv {
	padding: 0 32px;		padding: 0 32px;
	left: 0;		left: 0;
−	top: 78vw;	+	top: 50vw;
		+	display: flex;
		+	flex-direction: column;
		+	justify-content: center;
		+	height: calc(100vh - 60vw);
	width: unset;		width: unset;
		+	}
		+	.introContainer .memberDiv .memberName {
		+	font-size: 3.3vh;
		+	}
		+	.introContainer .memberDiv .memberName > a {
		+	width: 2.6vh;
		+	height: 2.6vh;
		+	margin-bottom: 0.6vh;
		+	}
		+	.introContainer .memberDiv .memberRole {
		+	font-size: 2.7vh;
		+	}
		+	.introContainer .memberDiv .memberQuestion, .introContainer .memberDiv .memberFunFact {
		+	font-size: 2.2vh;
	}		}
	}		}
	.introContainer .bubbleList {		.introContainer .bubbleList {
−	margin-bottom: 24px;	+	position: absolute;
		+	bottom: 0;
	width: 100%;		width: 100%;
	display: flex;		display: flex;
	flex-direction: row;		flex-direction: row;
	align-items: center;		align-items: center;
−	justify-content: start;	+	justify-content: center;
−	flex-wrap: nowrap;	+	flex-wrap: wrap;
	box-sizing: border-box;		box-sizing: border-box;
−	overflow-x: auto;	+	overflow-x: hidden;
	overflow-y: hidden;		overflow-y: hidden;
		+	padding: 16px;
	}		}
	.introContainer .bubbleList::after {		.introContainer .bubbleList::after {
−	content: ".";	+	content: unset;
	color: transparent;		color: transparent;
	}		}
−	@media (min-aspect-ratio: 1/1) {	+	@media (max-aspect-ratio: 121/66) {
	.introContainer .bubbleList {		.introContainer .bubbleList {
−	padding: 16px;	+	max-width: calc(69vh + 120px);
−	flex-wrap: wrap;	+	}
−	overflow-x: hidden;	+	}
−	justify-content: center;	+	@media (max-aspect-ratio: 1/1) {
		+	.introContainer .bubbleList {
		+	max-width: unset;
		+	flex-wrap: nowrap;
		+	padding: unset;
		+	overflow-x: auto;
		+	justify-content: start;
	}		}
	.introContainer .bubbleList::after {		.introContainer .bubbleList::after {
−	content: unset;	+	content: ".";
	}		}
	}		}
Line 223:		Line 313:
	justify-content: center;		justify-content: center;
	background-position: center;		background-position: center;
		+	background-size: cover;
	background-color: #6281EF;		background-color: #6281EF;
−	border-radius: 10vw;	+	border-radius: 1000px;
−	position: static;	+
−	max-width: 10vh;	+
−	max-height: 10vh;	+
	min-width: 10vh;		min-width: 10vh;
	min-height: 10vh;		min-height: 10vh;
		+	max-width: 10vh;
		+	max-height: 10vh;
	margin: 10px;		margin: 10px;
	transform: scale(1);		transform: scale(1);
Line 251:		Line 341:
	}		}
	.introContainer .suggestClick {		.introContainer .suggestClick {
		+	position: absolute;
	z-index: 1;		z-index: 1;
	display: flex;		display: flex;
Line 256:		Line 347:
	justify-content: center;		justify-content: center;
	margin-left: 6vw;		margin-left: 6vw;
		+	left: 0;
	transition: opacity 0.5s, visibility 0.5s;		transition: opacity 0.5s, visibility 0.5s;
	}		}
Line 263:		Line 355:
	}		}
	.introContainer .suggestClick span {		.introContainer .suggestClick span {
		+	color: #FAFAFC;
		+	margin-bottom: unset;
	border-radius: unset;		border-radius: unset;
	font-weight: unset;		font-weight: unset;
Line 269:		Line 363:
	width: unset;		width: unset;
	height: unset;		height: unset;
−	font-family: "lato-light";	+	font-family: "montserrat-light";
−	font-size: 16px;	+	font-size: 2.5vh;
	align-self: start;		align-self: start;
	}		}
Line 280:		Line 374:
	background-position: center;		background-position: center;
	background-size: 91%;		background-size: 91%;
−	width: 64px;	+	width: 8vh;
−	height: 64px;	+	height: 8vh;
	margin-right: 8px;		margin-right: 8px;
	}		}
Line 346:		Line 440:
	height: 16vw;		height: 16vw;
	border-radius: 1000px;		border-radius: 1000px;
−	border: 2px solid #6281EF;	+	box-shadow: 4px 2px 20px 0px rgba(0, 0, 0, 0.4);
	grid-column-start: 1;		grid-column-start: 1;
	grid-column-end: 2;		grid-column-end: 2;
Line 365:		Line 459:
	width: 16vw;		width: 16vw;
	height: 16vw;		height: 16vw;
−	border: 2px solid #6281EF;
	border-radius: 1000px;		border-radius: 1000px;
	background-color: #6281EF;		background-color: #6281EF;
Line 460:		Line 553:
	font-family: "montserrat-bold";		font-family: "montserrat-bold";
	font-size: 3vw;		font-size: 3vw;
−	margin-left: 2vw;	+	margin-left: 0vw;
	}		}
	@media (max-width: 800px) {		@media (max-width: 800px) {

---

Revision as of 19:59, 21 September 2020

main .instructorList .arrowMore {

 cursor: pointer;
 transition: transform 0.3s;

} main .instructorList .arrowMore:hover {

 transform: translateY(-2px);

}

body, html {

 margin: 0;
 padding: 0;
 color: #222222;
 font-family: "lato-regular";

}

.introContainer {

 flex-direction: column-reverse;
 justify-content: center;
 align-items: center;
 position: fixed;
 height: stretch;
 min-height: -moz-available;
 max-height: -moz-available;
 height: -webkit-fill-available;

} @media (max-aspect-ratio: 1/1) {

 @-moz-document url-prefix() {
   .introContainer {
     min-height: 90vh;
     max-height: 90vh;
   }
 }

} .introContainer .heading {

 position: absolute;
 font-size: 12vh;
 top: 6vw;
 left: calc(24vw - 5vh);
 pointer-events: none;
 font-family: "montserrat-black";
 color: #6281EF;
 text-align: center;
 line-height: 1;
 transition: left 0.3s cubic-bezier(0.5, 1, 0.89, 1), font-size 0.3s cubic-bezier(0.5, 1, 0.89, 1), top 0.3s cubic-bezier(0.5, 1, 0.89, 1);

} .introContainer .heading div {

 display: inline;

} .introContainer .heading.novideo {

 font-size: 10vh;
 left: 4vw;

} .introContainer .heading.other {

 top: 7vw;
 left: calc(22vw - 5vh);
 color: transparent;
 -webkit-text-stroke-width: 1px;
 -webkit-text-stroke-color: #6281EF;

} .introContainer .heading.other.novideo {

 left: 2vw;

} .introContainer .heading.other .invisible {

 color: transparent;
 -webkit-text-stroke-width: 0;
 -webkit-text-stroke-color: transparent;

} @media (max-aspect-ratio: 1/1) {

 .introContainer .heading {
   font-size: 10vw;
   top: calc(43vh - 40vw);
   left: 10vw;
 }
 .introContainer .heading br {
   display: none;
 }
 .introContainer .heading.novideo {
   font-size: 8vw;
   left: 18vw;
   top: 4vh;
 }
 .introContainer .heading.other {
   font-size: 10vw;
   top: calc(43vh - 39vw);
   left: 8vw;
 }
 .introContainer .heading.other.novideo {
   font-size: 8vw;
   left: 16vw;
   top: 5vh;
 }

} .introContainer::before {

 content: unset;
 display: none;
 background-image: unset;

} .introContainer > span {

 position: absolute;
 margin-bottom: 14vh;
 left: calc(32vw - 5vh);
 width: calc(10vh + 36vw);
 height: calc(10vh + 36vw);
 background-attachment: unset;
 background-position: center;
 background-size: cover;
 overflow: hidden;
 align-self: center;
 font-weight: bold;
 transition: left 0.3s, top 0.3s, width 0.3s, height 0.3s, transform 0.3s;

} .introContainer > span video {

 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: opacity 400ms;
 border-radius: 1000px;

} .introContainer > span.novideo {

 left: 15vw;
 width: calc(10vh + 30vw);
 height: calc(10vh + 30vw);

} .introContainer > span.novideo video {

 opacity: 0;

} @media (max-aspect-ratio: 1/1) {

 .introContainer > span {
   top: 45vh;
   transform: translateY(-50%);
   left: 12vw;
   width: 76vw;
   height: 76vw;
 }
 .introContainer > span.novideo {
   left: calc(35vw - 10vh);
   top: 8vw;
   padding-bottom: unset;
   width: calc(20vh + 30vw);
   height: calc(20vh + 30vw);
   transform: translateY(0%);
 }

} .introContainer > span > div {

 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 background-size: cover;
 background-position: center;
 opacity: 0;
 transition: opacity 400ms;
 border-radius: 1000px;

} .introContainer > span > div.transition {

 opacity: 1;

} .introContainer button.introVideoPlay {

 display: block;
 position: absolute;
 margin-bottom: 14vh;
 top: calc(35vh + 10vw);
 left: 14vw;
 width: 5vw;
 height: 5vw;
 border: unset;
 opacity: 0;
 pointer-events: none;
 background-image: url("https://static.igem.org/mediawiki/2020/8/89/T--Vilnius-Lithuania--play.svg");
 background-size: 40% 40%;
 background-repeat: no-repeat;
 background-position: 56% 50%;
 cursor: pointer;
 padding: 0;
 border-radius: 1000px;
 background-color: #6281EF;
 transition: transform 0.3s, opacity 300ms;

} @media (max-aspect-ratio: 1/1) {

 .introContainer button.introVideoPlay {
   top: 40vw;
   left: calc(33vw - 10vh);
   width: 5vh;
   height: 5vh;
 }

} .introContainer button.introVideoPlay.novideo {

 pointer-events: unset;
 opacity: 1;

} .introContainer button.introVideoPlay:hover {

 transform: scale(1.1);

} .introContainer .memberDiv {

 position: absolute;
 left: calc(50vw + 10vh);
 width: calc(40vw - 10vh);
 margin-bottom: 14vh;
 color: #FAFAFC;
 transition: unset;
 font-family: "montserrat-light";

} .introContainer .memberDiv.transition {

 opacity: 0;
 transition: opacity 400ms;

} .introContainer .memberDiv.alternative {

 transition: opacity 400ms;
 opacity: 0;

} .introContainer .memberDiv.alternative.transition {

 opacity: 1;

} .introContainer .memberDiv .memberName {

 font-family: "montserrat-bold";
 font-size: calc(2.2vw + 1vh);
 text-transform: uppercase;
 display: flex;
 align-items: flex-end;
 flex-wrap: wrap;

} .introContainer .memberDiv .memberName span {

 margin-right: calc((2.2vw + 1vh) * 0.5);

} .introContainer .memberDiv .memberName > a {

 display: inline-block;
 width: calc((2.2vw + 1vh) * 0.8);
 height: calc((2.2vw + 1vh) * 0.8);
 background-image: url();
 background-size: 100%;
 background-repeat: no-repeat;
 background-position: center;
 margin-bottom: calc((2.2vw + 1vh) * 0.2);

} .introContainer .memberDiv .memberRole {

 font-size: calc(1.2vw + 1vh);
 text-transform: uppercase;
 margin: 8px 0 20px;

} .introContainer .memberDiv .memberQuestion {

 font-family: "montserrat-bold";
 font-size: calc(1.2vw + 1vh);
 margin-bottom: 8px;

} .introContainer .memberDiv .memberFunFact {

 font-size: calc(0.5vw + 1.5vh);

} @media (max-aspect-ratio: 1/1) {

 .introContainer .memberDiv {
   padding: 0 32px;
   left: 0;
   top: 50vw;
   display: flex;
   flex-direction: column;
   justify-content: center;
   height: calc(100vh - 60vw);
   width: unset;
 }
 .introContainer .memberDiv .memberName {
   font-size: 3.3vh;
 }
 .introContainer .memberDiv .memberName > a {
   width: 2.6vh;
   height: 2.6vh;
   margin-bottom: 0.6vh;
 }
 .introContainer .memberDiv .memberRole {
   font-size: 2.7vh;
 }
 .introContainer .memberDiv .memberQuestion, .introContainer .memberDiv .memberFunFact {
   font-size: 2.2vh;
 }

} .introContainer .bubbleList {

 position: absolute;
 bottom: 0;
 width: 100%;
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: center;
 flex-wrap: wrap;
 box-sizing: border-box;
 overflow-x: hidden;
 overflow-y: hidden;
 padding: 16px;

} .introContainer .bubbleList::after {

 content: unset;
 color: transparent;

} @media (max-aspect-ratio: 121/66) {

 .introContainer .bubbleList {
   max-width: calc(69vh + 120px);
 }

} @media (max-aspect-ratio: 1/1) {

 .introContainer .bubbleList {
   max-width: unset;
   flex-wrap: nowrap;
   padding: unset;
   overflow-x: auto;
   justify-content: start;
 }
 .introContainer .bubbleList::after {
   content: ".";
 }

} .introContainer .bubbleList span {

 cursor: pointer;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background-position: center;
 background-size: cover;
 background-color: #6281EF;
 border-radius: 1000px;
 min-width: 10vh;
 min-height: 10vh;
 max-width: 10vh;
 max-height: 10vh;
 margin: 10px;
 transform: scale(1);
 transition: transform 0.3s;

} .introContainer .bubbleList span:hover {

 transform: scale(1.2);

} .introContainer .bubbleList::-webkit-scrollbar {

 background-color: transparent;
 border-radius: 10px;
 height: 8px;
 width: 8px;

} .introContainer .bubbleList::-webkit-scrollbar-thumb {

 background-color: #444444;
 border-radius: 10px;

} .introContainer .bubbleList::-webkit-scrollbar-corner {

 background: transparent;

} .introContainer .suggestClick {

 position: absolute;
 z-index: 1;
 display: flex;
 align-items: flex-start;
 justify-content: center;
 margin-left: 6vw;
 left: 0;
 transition: opacity 0.5s, visibility 0.5s;

} .introContainer .suggestClick.hidden {

 opacity: 0;
 pointer-events: none;

} .introContainer .suggestClick span {

 color: #FAFAFC;
 margin-bottom: unset;
 border-radius: unset;
 font-weight: unset;
 position: static;
 top: unset;
 width: unset;
 height: unset;
 font-family: "montserrat-light";
 font-size: 2.5vh;
 align-self: start;

} .introContainer .suggestClick::before {

 content: "";
 display: block;
 background-image: url(https://static.igem.org/mediawiki/2020/6/69/T--Vilnius-Lithuania--arrowBlueLeftDown.svg);
 background-repeat: no-repeat;
 background-position: center;
 background-size: 91%;
 width: 8vh;
 height: 8vh;
 margin-right: 8px;

}

.milkWave {

 z-index: 2;
 width: 100%;
 height: calc(100vh + 4vw);
 position: relative;
 content: "";
 pointer-events: none;
 background-position: bottom;
 background-origin: border-box;
 background-size: 100%;
 background-repeat: no-repeat;
 background-image: url(https://static.igem.org/mediawiki/2020/e/e7/T--Vilnius-Lithuania--milkTeam.svg);

}

main {

 padding: 50px 10vw 96px;
 box-sizing: border-box;
 flex-direction: column;

} main .heading2 {

 font-family: "montserrat-black";
 font-size: 4vw;
 font-size: max(4vw, 18px);
 line-height: 1;
 text-transform: uppercase;
 display: block;
 width: 100%;
 text-align: end;
 color: #222222;

} main .heading2.other {

 color: transparent;
 -webkit-text-stroke-width: 1px;
 -webkit-text-stroke-color: #222222;

} main .instructorList {

 display: flex;
 flex-flow: row wrap;
 justify-content: space-between;

} main .instructorList .instructor {

 margin-top: 50px;
 display: grid;
 grid-template-columns: auto;
 grid-template-rows: 16vw 5vw auto;
 column-gap: 28px;
 row-gap: 4px;
 width: 20%;
 justify-items: center;

} @media (max-width: 800px) {

 main .instructorList .instructor {
   grid-template-columns: 32vw auto;
   grid-template-rows: 10vw auto;
   width: 100%;
 }

} main .instructorList .instructor img {

 width: 16vw;
 height: 16vw;
 border-radius: 1000px;
 box-shadow: 4px 2px 20px 0px rgba(0, 0, 0, 0.4);
 grid-column-start: 1;
 grid-column-end: 2;
 grid-row-start: 1;
 grid-row-end: 2;

} @media (max-width: 800px) {

 main .instructorList .instructor img {
   width: 32vw;
   height: 32vw;
   grid-column-start: 1;
   grid-column-end: 2;
   grid-row-start: 1;
   grid-row-end: 3;
 }

} main .instructorList .instructor .filter {

 width: 16vw;
 height: 16vw;
 border-radius: 1000px;
 background-color: #6281EF;
 mix-blend-mode: hue;
 grid-column-start: 1;
 grid-column-end: 2;
 grid-row-start: 1;
 grid-row-end: 2;

} @media (max-width: 800px) {

 main .instructorList .instructor .filter {
   width: 32vw;
   height: 32vw;
   grid-column-start: 1;
   grid-column-end: 2;
   grid-row-start: 1;
   grid-row-end: 3;
 }

} main .instructorList .instructor .instructorName {

 display: flex;
 align-items: flex-end;
 font-size: 1.4vw;
 font-family: "montserrat-bold";
 text-transform: uppercase;
 color: #6281EF;
 text-align: start;
 width: 100%;
 white-space: nowrap;
 /* risky */
 grid-column-start: 1;
 grid-column-end: 2;
 grid-row-start: 2;
 grid-row-end: 3;

} @media (max-width: 800px) {

 main .instructorList .instructor .instructorName {
   font-size: 4vw;
   grid-column-start: 2;
   grid-column-end: 3;
   grid-row-start: 1;
   grid-row-end: 2;
 }

} main .instructorList .instructor .instructorAbout {

 font-size: 1.6vw;
 font-family: "lato-light";
 grid-column-start: 1;
 grid-column-end: 2;
 grid-row-start: 3;
 grid-row-end: 4;

} @media (max-width: 800px) {

 main .instructorList .instructor .instructorAbout {
   font-size: 3.6vw;
   grid-column-start: 2;
   grid-column-end: 3;
   grid-row-start: 2;
   grid-row-end: 3;
 }

} main .instructorList .arrowMore {

 margin-top: 3em;
 width: 50%;
 height: 16vw;
 text-decoration: none;
 display: flex;
 align-items: center;

} @media (max-width: 800px) {

 main .instructorList .arrowMore {
   width: 100%;
   height: 32vw;
 }

} main .instructorList .arrowMore::before {

 content: "";
 display: block;
 background-image: url(https://static.igem.org/mediawiki/2020/e/ea/T--Vilnius-Lithuania--arrowMore.svg);
 background-repeat: no-repeat;
 background-position: 5vw center;
 width: 16vw;
 height: 16vw;

} @media (max-width: 800px) {

 main .instructorList .arrowMore::before {
   width: 32vw;
   height: 32vw;
   background-position: 10vw center;
 }

} main .instructorList .arrowMore span {

 color: #222222;
 font-family: "montserrat-bold";
 font-size: 3vw;
 margin-left: 0vw;

} @media (max-width: 800px) {

 main .instructorList .arrowMore span {
   margin-left: 4vw;
   font-size: 5vw;
 }

}