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

Revision as of 01:45, 28 October 2020 (view source) Kvainiute (Talk | contribs) ← Older edit		Revision as of 02:15, 28 October 2020 (view source) Kvainiute (Talk | contribs) Newer edit →
Line 1:		Line 1:
−	body, html {	+	.contentBlock .content .downloadButton, .contentBlock .content .sectionButtons div, .contentBlock .content .prevButton,
−	margin: 0;	+	.contentBlock .content .nextButton, .calendarbutton {
−	padding: 0;	+	-moz-user-select: none;
−	color: #222222;	+	-webkit-user-select: none;
−	font-family: "lato-regular";	+	-ms-user-select: none;
		+	user-select: none;
	}		}
−	.introContainer {	+	.contentBlock .content .downloadButton, .contentBlock .content .sectionButtons div, .contentBlock .content .prevButton,
−	height: 100vh;	+	.contentBlock .content .nextButton {
−	width: 100%;	+
−	background-color: #121212;	+
−	position: fixed;	+
−	z-index: 2;	+
−	}	+
−	.introContainer .intro-section {	+
−	display: flex;	+
−	justify-content: center;	+
−	align-items: center;	+
−	}	+
−	.introContainer #engineering-cycle {	+
−	height: 100%;	+
−	}	+
−	.introContainer #engineering-cycle svg {	+
−	height: 70vh;	+
−	width: auto;	+
−	max-width: 80vw;	+
−	will-change: transform;	+
−	}	+
−	.introContainer #dtp-cycle svg {	+
−	height: 80vh;	+
−	width: auto;	+
−	will-change: transform;	+
−	}	+
−	.introContainer #dtp-cycle svg ellipse {	+
	cursor: pointer;		cursor: pointer;
		+	transition: transform 0.3s;
	}		}
−	.introContainer #dtp-cycle svg tspan {	+	.contentBlock .content .downloadButton:hover, .contentBlock .content .sectionButtons div:hover, .contentBlock .content .prevButton:hover,
−	pointer-events: none;	+	.contentBlock .content .nextButton:hover {
		+	transform: translateY(-2px);
	}		}
−	.introContainer svg .A {	+	.contentBlock .content .downloadButton:active, .contentBlock .content .sectionButtons div:active, .contentBlock .content .prevButton:active,
−	stroke: #6281ef;	+	.contentBlock .content .nextButton:active {
		+	transform: translateY(2px);
	}		}
−	.introContainer svg .B {	+
−	fill: #121212;	+	body, html {
−	}	+	margin: 0;
−	.introContainer svg .C {	+	padding: 0;
−	font-family: "montserrat-light", sans-serif;	+	color: #222222;
−	}	+	font-family: "lato-regular";
−	.introContainer svg .D {	+
−	font-family: "montserrat-bold", sans-serif;	+
−	}	+
−	.introContainer svg .E {	+
−	fill: #fafafc;	+
−	}	+
−	.introContainer svg .F {	+
−	stroke-width: 5;	+
−	}	+
−	.introContainer svg .G {	+
−	font-size: 31px;	+
−	}	+
−	.introContainer svg .H {	+
−	font-weight: 300;	+
−	}	+
−	.introContainer svg .I {	+
−	stroke-linejoin: round;	+
−	}	+
−	.introContainer svg .J {	+
−	stroke-width: 9;	+
−	}	+
−	.introContainer svg .K {	+
−	fill: none;	+
−	}	+
−	.introContainer svg .L {	+
−	stroke: #fafafc;	+
−	}	+
−	.introContainer svg .M {	+
−	stroke-width: 3;	+
−	}	+
−	.introContainer svg .N {	+
−	font-size: 38px;	+
	}		}
−	.spacer {	+	.contentBlock {
−	height: 100vh;	+	width: 54vw;
−	background-color: #121212;	+
−	position: absolute;	+
−	top: 100vh;	+
−	width: 100%;	+
−	z-index: 1;	+
	}		}
−		+	@media (max-width: 900px) {
−	main {	+	.contentBlock {
−	height: fit-content;	+	margin-right: 0;
−	background-color: #fafafc;	+	width: unset;
−	position: absolute;	+	}
−	top: 200vh;	+
−	width: 100%;	+
−	z-index: 3;	+
−	font-family: "lato-light", sans-serif !important;	+
	}		}
−	main section {	+	.contentBlock .content {
	display: flex;		display: flex;
−	justify-content: center;
	flex-direction: column;		flex-direction: column;
−	align-items: center;	+	align-items: stretch;
−	width: calc(100% - 280px);	+	min-height: 700px;
−	margin: 0 90px 0 190px;	+
	}		}
−	@media screen and (max-width: 767px) {	+	@media (max-width: 900px) {
−	main section {	+	.contentBlock .content {
−	width: 100vw;	+	margin: unset;
−	margin: 0 auto;	+	box-shadow: unset;
		+	padding: 30px;
	}		}
	}		}
−	main section h1 {	+	.contentBlock .content .heading {
−	font-family: "montserrat-light", sans-serif;	+	font-size: 1.5rem;
		+	font-family: "montserrat-bold";
	text-transform: uppercase;		text-transform: uppercase;
−	font-size: 2.5em;	+	text-align: center;
	}		}
−	main section .section-title h1 {	+	.contentBlock .content .heading:first-child {
−	margin-block-end: 0em;	+	margin-top: 28px;
−	font-size: 3.5em;	+
	}		}
−	@media screen and (max-width: 767px) {	+	.contentBlock .content .downloadButton {
−	main section .section-title h1 {	+	display: flex;
−	font-size: 2em;	+	align-items: center;
−	}	+	justify-content: center;
		+	align-self: center;
		+	color: #FAFAFC;
		+	background-color: #6281EF;
		+	font-family: "lato-heavy";
		+	font-size: 1.3rem;
		+	text-transform: uppercase;
		+	padding: 8px 52px;
		+	border-radius: 10px;
		+	margin: 16px 0 64px;
		+	box-shadow: 0 16px 32px -12px #6584ef;
		+	transition: box-shadow 0.3s, transform 0.3s;
		+	overflow: hidden;
	}		}
−	main section .section-title svg {	+	.contentBlock .content .downloadButton:hover {
−	width: 100px;	+	box-shadow: 0 18px 40px -14px #6584ef;
	}		}
−	main section .section-title .right {	+	.contentBlock .content .downloadButton::after {
−	display: block !important;	+	content: "PDF";
−	padding: 100px 0 0 !important;	+	color: transparent;
		+	display: block;
		+	background-color: rgba(0, 0, 0, 0.1);
		+	padding: inherit;
		+	position: absolute;
		+	opacity: 0;
		+	transition: opacity 0.3s;
		+	pointer-events: none;
	}		}
−	main section .iteration-title {	+	.contentBlock .content .downloadButton:active::after {
−	font-family: "montserrat-black", sans-serif !important;	+	opacity: 1;
−	display: grid;	+
−	margin-block-start: 0em;	+
−	margin-block-end: 0em;	+
−	font-size: 2.3em;	+
−	}	+
−	@media screen and (max-width: 767px) {	+
−	main section .iteration-title {	+
−	font-size: 1.9em;	+
−	padding-top: 30px;	+
−	}	+
	}		}
−	main section .row {	+	.contentBlock .content .sectionButtons {
−	display: flex;	+
−	width: 100%;	+
−	}	+
−	main section .row .left,	+
−	main section .row .right {	+
	display: flex;		display: flex;
		+	justify-content: stretch;
	align-items: center;		align-items: center;
−	padding: 20px 0px;	+	margin: 20px -40px;
	}		}
−	main section .row .line-divider {	+	@media (max-width: 900px) {
−	display: flex;	+	.contentBlock .content .sectionButtons {
−	width: 20%;	+	margin: 20px -30px;
−	justify-content: center;	+
−	align-items: center;	+
−	}	+
−	@media screen and (max-width: 767px) {	+
−	main section .row .line-divider {	+
−	width: 15%;	+
−	justify-content: initial;	+
	}		}
	}		}
−	main section .row .line-divider.nonCenter {	+	.contentBlock .content .sectionButtons div {
−	align-items: initial;	+	padding: 16px 2px;
−	z-index: 2;	+	font-size: 1.4rem;
		+	box-shadow: 0 4px 32px -12px #d5d5d5;
		+	flex-grow: 1;
		+	text-align: center;
		+	font-family: "montserrat-bold";
		+	background-color: #FAFAFC;
		+	transition: color 0.5s, background-color 0.5s, box-shadow 0.3s, transform 0.3s;
	}		}
−	main section .row .line-divider .line {	+	.contentBlock .content .sectionButtons div:hover {
−	width: 7px;	+	box-shadow: 0 6px 40px -14px #d5d5d5;
−	background-color: #6281ef;	+
−	height: 100%;	+
	}		}
−	@media screen and (max-width: 767px) {	+	@media (max-width: 1024px) {
−	main section .row .line-divider .line.mobile-curve {	+	.contentBlock .content .sectionButtons div {
−	width: 0;	+	font-size: 1.1rem;
	}		}
	}		}
−	main section .row .line-divider .circle {	+	@media (max-width: 900px) {
−	width: 35px;	+	.contentBlock .content .sectionButtons div {
−	height: 35px;	+	font-size: 0.9rem;
−	border-radius: 40px;	+	}
−	background-color: #FFD762;	+
−	position: absolute;	+
−	display: flex;	+
−	align-items: center;	+
−	justify-content: center;	+
−	font-family: "montserrat-black", sans-serif !important;	+
−	opacity: 0;	+
	}		}
−	main section .row .line-divider .circle.top {	+	.contentBlock .content .sectionButtons div.active {
−	margin-top: -15px;	+	color: #FAFAFC;
−	width: 20px;	+	background-color: #6281EF;
−	height: 20px;	+	box-shadow: 0 4px 32px -12px #6584ef;
−	opacity: 1;	+
	}		}
−	@media screen and (max-width: 767px) {	+	.contentBlock .content .sectionButtons div.active:hover {
−	main section .row .line-divider .circle.top {	+	box-shadow: 0 6px 40px -14px #6584ef;
−	visibility: hidden;	+
−	}	+
	}		}
−	@media screen and (max-width: 767px) {	+	.contentBlock .content .weekName {
−	main section .row .line-divider .circle {	+	font-family: "montserrat-bold";
−	width: 8vw;	+	font-size: 1.4rem;
−	height: 8vw;	+	margin: 10px 0;
−	transform: translateX(55%);	+
−	font-family: "montserrat-light", sans-serif !important;	+
−	}	+
	}		}
−	main section .row .left {	+	.contentBlock .content .weekName::after {
−	width: 20%;	+	content: "";
−	justify-content: flex-end;	+	display: block;
−	text-transform: uppercase;	+	margin: 12px 0;
		+	height: 3px;
		+	width: 160px;
		+	background-color: #6281EF;
	}		}
−	@media screen and (max-width: 767px) {	+	.contentBlock .content .weekContent {
−	main section .row .left {	+	font-size: 1.2rem;
−	background-color: #121212;	+	line-height: 1.4;
−	color: #FAFAFC;	+
−	width: 15%;	+
−	justify-content: center;	+
−	z-index: 2;	+
−	}	+
	}		}
−	main section .row .left h1 {	+	.contentBlock .content .weekContent .subscript {
−	cursor: pointer;	+	font-size: 0.3em;
		+	vertical-align: bottom;
	}		}
−	@media screen and (max-width: 767px) {	+	.contentBlock .content .weekButtons {
−	main section .row .left h1 {	+	display: flex;
−	text-orientation: sideways;	+	flex-direction: row;
−	}	+	justify-content: space-between;
		+	flex-grow: 1;
		+	align-items: flex-end;
	}		}
−	main section .row .left .iteration-nr {	+	.contentBlock .content .prevButton,
−	margin-block-end: 0em;	+	.contentBlock .content .nextButton {
−	margin-block-start: 0em;	+	margin-top: 32px;
−	font-size: 2.1vw;	+	cursor: pointer;
−	text-align: right;	+	display: flex;
		+	flex-direction: row;
		+	align-items: center;
		+	font-family: "montserrat-bold";
	}		}
−	@media screen and (max-width: 767px) {	+	@media (max-width: 480px) {
−	main section .row .left .iteration-nr {	+	.contentBlock .content .prevButton span,
		+	.contentBlock .content .nextButton span {
	display: none;		display: none;
	}		}
	}		}
−	main section .row .left svg {	+	.contentBlock .content .prevButton::before,
−	position: absolute;	+	.contentBlock .content .nextButton::after {
−	opacity: 0;	+	content: "";
		+	display: block;
		+	background-image: url(https://static.igem.org/mediawiki/2020/7/7a/T--Vilnius-Lithuania--arrowNext2.svg);
		+	background-repeat: no-repeat;
		+	background-position: center;
		+	background-size: 91%;
		+	width: 64px;
		+	height: 40px;
		+	margin-top: 1px;
	}		}
−	main section .row .left svg#click-info-desktop {	+	.contentBlock .content .nextButton span {
−	width: 100px;	+	text-align: end;
−	transform: translate(-170px, -44px);	+
−	text-transform: initial;	+
	}		}
−	main section .row .left svg.visible {	+	.contentBlock .content .prevButton::before {
−	opacity: 1;	+	transform: scaleX(-1);
		+	margin-right: 8px;
	}		}
−	@media screen and (max-width: 767px) {	+	.contentBlock .content .nextButton::after {
−	main section .row .left.mobile-curve {	+	margin-left: 8px;
−	border-top: solid 7px #6281ef;	+
−	}	+
	}		}
−	main section .row .right {	+	.contentBlock .content a.button-wrapper {
−	width: 60%;	+	align-self: center;
−	display: block;	+
	}		}
−	@media screen and (max-width: 767px) {	+	.contentBlock::after {
−	main section .row .right {	+
−	width: 70%;	+
−	padding: 0;	+
−	}	+
−	}	+
−	main section .row .right .iteration-nr {	+
	display: none;		display: none;
		+	content: unset;
	}		}
−	main section .row .right .iteration-nr.mobile {	+
−	cursor: pointer;	+	@media (max-width: 900px) {
−	}	+	main {
−	@media screen and (max-width: 767px) {	+	padding-bottom: 300px;
−	main section .row .right .iteration-nr.mobile {	+	justify-content: center;
−	font-size: 1.3em;	+
−	display: block;	+
−	margin-top: 0.83em;	+
−	margin-bottom: 0.83em !important;	+
	}		}
	}		}
−	main section .row .right svg#click-info-mobile {	+
−	width: 70px;	+	.sideBlockOverlay {
−	transform: translate(140px, -50px);	+	position: fixed;
−	position: absolute;	+	top: 0;
		+	left: 0;
		+	right: 0;
		+	bottom: 0;
		+	pointer-events: none;
	opacity: 0;		opacity: 0;
		+	z-index: 19;
		+	background-color: rgba(0, 0, 0, 0.5);
		+	transition: opacity 0.5s;
	}		}
−	main section .row .right svg.visible {	+	@media (max-width: 900px) {
−	opacity: 1 !important;	+	.sideBlockOverlay.open {
−	}	+	opacity: 1;
−	main section .row .right img {	+	pointer-events: unset;
−	width: 100%;	+
−	box-shadow: 1px 1px 10px #00000029;	+
−	}	+
−	main section .row .iteration-part {	+
−	text-align: right;	+
−	}	+
−	@media screen and (max-width: 767px) {	+
−	main section .row .iteration-part {	+
−	transform: rotate(-90deg);	+
−	margin-block-end: 0em;	+
−	margin-block-start: 0em;	+
−	z-index: 9;	+
−	margin-left: 80%;	+
−	color: #fafafc;	+
	}		}
	}		}
−	main section .row .iteration-desc b {	+
−	font-family: "lato-regular", sans-serif !important;	+	.sideBlock {
		+	background-color: #222222;
		+	color: #FAFAFC;
		+	padding: 44px 34px 24px;
		+	box-sizing: border-box;
		+	margin: 200px 60px 0 50px;
		+	text-transform: unset;
		+	display: flex;
		+	flex-direction: column;
		+	align-items: stretch;
		+	min-width: 321px;
	}		}
−	@media screen and (max-width: 767px) {	+	@media (max-width: 1024px) {
−	main section .row .iteration-desc {	+	.sideBlock {
−	padding: 10px 20px 10px 0;	+	margin: 374px 40px 0 50px;
	}		}
	}		}
−	@media screen and (max-width: 767px) {	+	@media (max-width: 900px) {
−	main section .row .box-mobile {	+	.sideBlock {
−	width: calc(7.5vw - 3.5px);	+	position: fixed;
−	position: relative;	+	bottom: 0;
−	display: flex;	+	padding: 24px 24px 60px;
−	background-color: #121212;	+	border-radius: 0;
−	width: 50%;	+	float: unset;
−	height: 100%;	+	margin: 0;
		+	z-index: 20;
		+	width: 100%;
		+	text-align: center;
		+	transition: transform 0.5s;
		+	top: unset;
		+	transform: translateY(100%);
		+	max-width: unset;
	}		}
−	}	+	.sideBlock.open {
−	@media screen and (max-width: 767px) {	+	transform: translateY(0);
−	main section .row .box-mobile.mobile-curve {	+
−	border-top: solid 7px #6281ef;	+
−	border-top-right-radius: 37px;	+
−	border-right: solid 7px #6281ef;	+
	}		}
	}		}
−	main section .section-iteration .left {	+	.sideBlock .title {
−	padding: 10px 0;	+	font-family: "montserrat-bold";
		+	font-size: 1.3rem;
	}		}
−	main section .section-iteration .right {	+	.sideBlock .title::after {
		+	content: "";
	display: block;		display: block;
		+	margin: 6px 0;
		+	height: 2px;
		+	width: 100px;
		+	background-color: #6281EF;
	}		}
−	main section .accordion {	+	@media (max-width: 900px) {
−	overflow: hidden;	+	.sideBlock .title {
−	max-height: 0;	+	display: flex;
−	transition: max-height 0.2s ease-out;	+	flex-direction: column;
		+	align-items: center;
		+	}
		+	.sideBlock .title::after {
		+	margin: 6px 0 16px;
		+	width: 100px;
		+	}
	}		}
−	main section .accordion.visible {	+	.sideBlock .months {
−	max-height: initial;	+	font-family: "lato-heavy";
		+	display: grid;
		+	grid-template-columns: repeat(5, 1fr);
		+	margin-bottom: 20px;
		+	justify-items: center;
	}		}
−	main section .accordion.visible .circle {	+	.sideBlock .months span {
−	opacity: 1;	+	width: 39px;
		+	padding: 4px;
		+	box-sizing: border-box;
		+	text-align: center;
		+	cursor: pointer;
	}		}
−	main section #separator {	+	.sideBlock .months span::after {
−	transition-duration: 0.2s;	+	content: "";
−	transition-timing-function: ease-out;	+	display: block;
−	height: fit-content;	+	height: 2px;
		+	width: 28px;
		+	margin: 2px auto 0;
		+	background-color: transparent;
		+	transition: background-color 0.5s;
	}		}
−		+	.sideBlock .months span.active::after, .sideBlock .months span:hover::after {
−	section .section-part {	+	background-color: #6281EF;
−	width: 100%;	+
	}		}
−	section .section-part .full-iteration {	+	.sideBlock .days {
−	width: 100%;	+	justify-items: stretch;
		+	align-items: stretch;
		+	display: grid;
		+	grid-template-columns: repeat(7, 1fr);
		+	grid-template-rows: repeat(6, 1fr);
	}		}
−	section .section-part .full-iteration:first-child .left,	+	.sideBlock .days span {
−	section .section-part .full-iteration:first-child .right {	+	cursor: pointer;
−	padding-top: 30px;	+	text-align: center;
		+	height: 22px;
	}		}
−	section .section-part .full-iteration:last-child .left,	+	.sideBlock .days span.dark {
−	section .section-part .full-iteration:last-child .right {	+	color: #BBBBBB;
−	padding-bottom: 30px;	+
	}		}
−	section#overview {	+	.sideBlock .days span.darker {
−	width: calc(100% - 330px);	+	color: #666;
−	margin: 0px auto 60px auto;	+	cursor: default;
	}		}
−	section#overview .overview-wrapper {	+	.sideBlock .days .hover {
−	padding: 20px 40px;	+	pointer-events: none;
−	box-shadow: 0 0 5px #00000029;	+	margin-top: calc(-3px + 22px * 0);
−	box-sizing: border-box;	+	margin-left: -11px;
		+	padding: 2px;
		+	width: calc(100% - 48px);
		+	height: 22px;
		+	background-color: #6281EF;
		+	mix-blend-mode: lighten;
		+	border-radius: 20px;
		+	position: absolute;
		+	transition: margin-top 0.3s, visibility 0.3s, opacity 0.3s;
	}		}
−	section#overview .overview-wrapper h2 {	+	.sideBlock .days .hover.invisible {
−	text-transform: uppercase;	+	visibility: hidden;
−	font-family: "montserrat-bold", sans-serif;	+	opacity: 0;
	}		}
−	@media screen and (max-width: 767px) {	+	@media (max-width: 900px) {
−	section#overview .overview-wrapper {	+	.sideBlock .days .hover {
−	padding: 15px 30px;	+	margin-left: -3px;
−	box-shadow: none;	+
	}		}
	}		}
−	@media screen and (max-width: 767px) {	+
−	section#overview {	+	.calendarbutton {
−	width: 80vw;	+	font-family: "montserrat-bold";
−	}	+	display: none;
−	}	+	position: fixed;
−	section#overview button {	+	bottom: -60px;
−	padding: 40px;	+	height: 60px;
−	font-size: 3vh;	+	color: #FAFAFC;
−	font-family: "montserrat-bold", sans-serif;	+
	text-transform: uppercase;		text-transform: uppercase;
−	background-color: #6281ef;
−	border-radius: 80px;
−	border: none;
−	color: #fafafc;
−	margin: 20px;
−	cursor: pointer;
−	box-shadow: 0 16px 32px -12px #3658cf;
−	transition: 0.3s ease-out;
−	position: relative;
−	top: 0;
−	}
−	section#overview button:hover {
−	top: -5px;
−	box-shadow: 0 16px 32px -16px #3658cf;
−	}
−
−	.milkWave svg {
−	margin-top: -60px;
−	}
−	.milkWave svg path {
−	fill: #fafafc;
−	}
−
−	a.citation {
−	color: #2e64ec;
−	text-decoration: none;
	text-align: center;		text-align: center;
		+	font-size: 1.3rem;
		+	width: 100%;
		+	box-sizing: border-box;
		+	padding: 16px;
	cursor: pointer;		cursor: pointer;
−	font-size: 0.6em;	+	background-color: #222222;
−	vertical-align: super;	+	transition: 0.5s;
	}		}
−		+	.calendarbutton.notshow {
−	.iteration-nr {	+	bottom: -60px;
−	box-shadow: inset 0 0em 0 -1px #fcbd1b;	+
−	transition: 0.3s ease-out;	+
	}		}
−	.iteration-nr:hover {	+	.calendarbutton.open {
−	box-shadow: inset 0 -0.5em 0 -1px #fcbd1b;	+	bottom: 0px;
	}		}
−		+	@media (max-width: 900px) {
−	.references {	+	.calendarbutton {
−	font-size: 1.9rem;	+	display: block;
−	}	+	z-index: 21;
−	.references svg {	+	bottom: 0px;
−	max-width: 100px;	+	transition: bottom 0.3s;
−	}	+	}
−	.references h3 {	+
−	margin-block-start: 0em;	+
−	font-size: 0.8em;	+
−	font-family: "montserrat-bold", sans-serif;	+
−	}	+
−	.references ol {	+
−	margin: initial;	+
−	padding-inline-start: 10px;	+
−	}	+
−	.references ol li {	+
−	font-size: 0.4em;	+
−	font-family: "lato-light", sans-serif;	+
−	}	+
−	.references ol li::marker {	+
−	color: initial;	+
−	font-family: "lato-light", sans-serif;	+
−	font-size: 1em;	+
	}		}

---

Revision as of 02:15, 28 October 2020

.contentBlock .content .downloadButton, .contentBlock .content .sectionButtons div, .contentBlock .content .prevButton, .contentBlock .content .nextButton, .calendarbutton {

 -moz-user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
 user-select: none;

}

.contentBlock .content .downloadButton, .contentBlock .content .sectionButtons div, .contentBlock .content .prevButton, .contentBlock .content .nextButton {

 cursor: pointer;
 transition: transform 0.3s;

} .contentBlock .content .downloadButton:hover, .contentBlock .content .sectionButtons div:hover, .contentBlock .content .prevButton:hover, .contentBlock .content .nextButton:hover {

 transform: translateY(-2px);

} .contentBlock .content .downloadButton:active, .contentBlock .content .sectionButtons div:active, .contentBlock .content .prevButton:active, .contentBlock .content .nextButton:active {

 transform: translateY(2px);

}

body, html {

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

}

.contentBlock {

 width: 54vw;

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

 .contentBlock {
   margin-right: 0;
   width: unset;
 }

} .contentBlock .content {

 display: flex;
 flex-direction: column;
 align-items: stretch;
 min-height: 700px;

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

 .contentBlock .content {
   margin: unset;
   box-shadow: unset;
   padding: 30px;
 }

} .contentBlock .content .heading {

 font-size: 1.5rem;
 font-family: "montserrat-bold";
 text-transform: uppercase;
 text-align: center;

} .contentBlock .content .heading:first-child {

 margin-top: 28px;

} .contentBlock .content .downloadButton {

 display: flex;
 align-items: center;
 justify-content: center;
 align-self: center;
 color: #FAFAFC;
 background-color: #6281EF;
 font-family: "lato-heavy";
 font-size: 1.3rem;
 text-transform: uppercase;
 padding: 8px 52px;
 border-radius: 10px;
 margin: 16px 0 64px;
 box-shadow: 0 16px 32px -12px #6584ef;
 transition: box-shadow 0.3s, transform 0.3s;
 overflow: hidden;

} .contentBlock .content .downloadButton:hover {

 box-shadow: 0 18px 40px -14px #6584ef;

} .contentBlock .content .downloadButton::after {

 content: "PDF";
 color: transparent;
 display: block;
 background-color: rgba(0, 0, 0, 0.1);
 padding: inherit;
 position: absolute;
 opacity: 0;
 transition: opacity 0.3s;
 pointer-events: none;

} .contentBlock .content .downloadButton:active::after {

 opacity: 1;

} .contentBlock .content .sectionButtons {

 display: flex;
 justify-content: stretch;
 align-items: center;
 margin: 20px -40px;

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

 .contentBlock .content .sectionButtons {
   margin: 20px -30px;
 }

} .contentBlock .content .sectionButtons div {

 padding: 16px 2px;
 font-size: 1.4rem;
 box-shadow: 0 4px 32px -12px #d5d5d5;
 flex-grow: 1;
 text-align: center;
 font-family: "montserrat-bold";
 background-color: #FAFAFC;
 transition: color 0.5s, background-color 0.5s, box-shadow 0.3s, transform 0.3s;

} .contentBlock .content .sectionButtons div:hover {

 box-shadow: 0 6px 40px -14px #d5d5d5;

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

 .contentBlock .content .sectionButtons div {
   font-size: 1.1rem;
 }

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

 .contentBlock .content .sectionButtons div {
   font-size: 0.9rem;
 }

} .contentBlock .content .sectionButtons div.active {

 color: #FAFAFC;
 background-color: #6281EF;
 box-shadow: 0 4px 32px -12px #6584ef;

} .contentBlock .content .sectionButtons div.active:hover {

 box-shadow: 0 6px 40px -14px #6584ef;

} .contentBlock .content .weekName {

 font-family: "montserrat-bold";
 font-size: 1.4rem;
 margin: 10px 0;

} .contentBlock .content .weekName::after {

 content: "";
 display: block;
 margin: 12px 0;
 height: 3px;
 width: 160px;
 background-color: #6281EF;

} .contentBlock .content .weekContent {

 font-size: 1.2rem;
 line-height: 1.4;

} .contentBlock .content .weekContent .subscript {

 font-size: 0.3em;
 vertical-align: bottom;

} .contentBlock .content .weekButtons {

 display: flex;
 flex-direction: row;
 justify-content: space-between;
 flex-grow: 1;
 align-items: flex-end;

} .contentBlock .content .prevButton, .contentBlock .content .nextButton {

 margin-top: 32px;
 cursor: pointer;
 display: flex;
 flex-direction: row;
 align-items: center;
 font-family: "montserrat-bold";

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

 .contentBlock .content .prevButton span,

.contentBlock .content .nextButton span {

   display: none;
 }

} .contentBlock .content .prevButton::before, .contentBlock .content .nextButton::after {

 content: "";
 display: block;
 background-image: url(https://static.igem.org/mediawiki/2020/7/7a/T--Vilnius-Lithuania--arrowNext2.svg);
 background-repeat: no-repeat;
 background-position: center;
 background-size: 91%;
 width: 64px;
 height: 40px;
 margin-top: 1px;

} .contentBlock .content .nextButton span {

 text-align: end;

} .contentBlock .content .prevButton::before {

 transform: scaleX(-1);
 margin-right: 8px;

} .contentBlock .content .nextButton::after {

 margin-left: 8px;

} .contentBlock .content a.button-wrapper {

 align-self: center;

} .contentBlock::after {

 display: none;
 content: unset;

}

@media (max-width: 900px) {

 main {
   padding-bottom: 300px;
   justify-content: center;
 }

}

.sideBlockOverlay {

 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 pointer-events: none;
 opacity: 0;
 z-index: 19;
 background-color: rgba(0, 0, 0, 0.5);
 transition: opacity 0.5s;

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

 .sideBlockOverlay.open {
   opacity: 1;
   pointer-events: unset;
 }

}

.sideBlock {

 background-color: #222222;
 color: #FAFAFC;
 padding: 44px 34px 24px;
 box-sizing: border-box;
 margin: 200px 60px 0 50px;
 text-transform: unset;
 display: flex;
 flex-direction: column;
 align-items: stretch;
 min-width: 321px;

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

 .sideBlock {
   margin: 374px 40px 0 50px;
 }

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

 .sideBlock {
   position: fixed;
   bottom: 0;
   padding: 24px 24px 60px;
   border-radius: 0;
   float: unset;
   margin: 0;
   z-index: 20;
   width: 100%;
   text-align: center;
   transition: transform 0.5s;
   top: unset;
   transform: translateY(100%);
   max-width: unset;
 }
 .sideBlock.open {
   transform: translateY(0);
 }

} .sideBlock .title {

 font-family: "montserrat-bold";
 font-size: 1.3rem;

} .sideBlock .title::after {

 content: "";
 display: block;
 margin: 6px 0;
 height: 2px;
 width: 100px;
 background-color: #6281EF;

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

 .sideBlock .title {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 .sideBlock .title::after {
   margin: 6px 0 16px;
   width: 100px;
 }

} .sideBlock .months {

 font-family: "lato-heavy";
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 margin-bottom: 20px;
 justify-items: center;

} .sideBlock .months span {

 width: 39px;
 padding: 4px;
 box-sizing: border-box;
 text-align: center;
 cursor: pointer;

} .sideBlock .months span::after {

 content: "";
 display: block;
 height: 2px;
 width: 28px;
 margin: 2px auto 0;
 background-color: transparent;
 transition: background-color 0.5s;

} .sideBlock .months span.active::after, .sideBlock .months span:hover::after {

 background-color: #6281EF;

} .sideBlock .days {

 justify-items: stretch;
 align-items: stretch;
 display: grid;
 grid-template-columns: repeat(7, 1fr);
 grid-template-rows: repeat(6, 1fr);

} .sideBlock .days span {

 cursor: pointer;
 text-align: center;
 height: 22px;

} .sideBlock .days span.dark {

 color: #BBBBBB;

} .sideBlock .days span.darker {

 color: #666;
 cursor: default;

} .sideBlock .days .hover {

 pointer-events: none;
 margin-top: calc(-3px + 22px * 0);
 margin-left: -11px;
 padding: 2px;
 width: calc(100% - 48px);
 height: 22px;
 background-color: #6281EF;
 mix-blend-mode: lighten;
 border-radius: 20px;
 position: absolute;
 transition: margin-top 0.3s, visibility 0.3s, opacity 0.3s;

} .sideBlock .days .hover.invisible {

 visibility: hidden;
 opacity: 0;

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

 .sideBlock .days .hover {
   margin-left: -3px;
 }

}

.calendarbutton {

 font-family: "montserrat-bold";
 display: none;
 position: fixed;
 bottom: -60px;
 height: 60px;
 color: #FAFAFC;
 text-transform: uppercase;
 text-align: center;
 font-size: 1.3rem;
 width: 100%;
 box-sizing: border-box;
 padding: 16px;
 cursor: pointer;
 background-color: #222222;
 transition: 0.5s;

} .calendarbutton.notshow {

 bottom: -60px;

} .calendarbutton.open {

 bottom: 0px;

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

 .calendarbutton {
   display: block;
   z-index: 21;
   bottom: 0px;
   transition: bottom 0.3s;
 }

}