Difference between revisions of "Template:Vilnius-Lithuania/index.css"

Revision as of 18:56, 8 October 2020 (view source) Kvainiute (Talk | contribs) ← Older edit		Revision as of 13:20, 10 October 2020 (view source) Kvainiute (Talk | contribs) Newer edit →
Line 1:		Line 1:
	body,		body,
	html {		html {
−	margin: 0;	+	margin: 0;
−	padding: 0;	+	padding: 0;
−	color: #121212;	+	color: #121212;
−	font-family: 'lato-regular';	+	font-family: 'lato-regular';
	}		}
	.container {		.container {
−	width: 100%;	+	width: 100%;
−	height: calc(100vh - 14px)	+	height: calc(100vh - 14px)
	}		}
	#waves {		#waves {
−	transform: rotate(180deg);	+	transform: rotate(180deg);
−	background-color: #fafafc	+	background-color: #fafafc
	}		}
	#intro-page {		#intro-page {
−	background-color: #121212;	+	background-color: #121212;
	}		}
	#intro-header {		#intro-header {
−	height: 100vh	+	height: 100vh
	}		}
	#intro-header svg {		#intro-header svg {
−	height: 90%;	+	height: 90%;
	}		}
	#intro-page #intro-header {		#intro-page #intro-header {
−	width: 100%;	+	width: 100%;
−	margin: 0 auto;	+	margin: 0 auto;
−	position: absolute;	+	position: absolute;
−	z-index: 4;	+	z-index: 4;
−	pointer-events: none	+	pointer-events: none
	}		}
	#intro-page #intro {		#intro-page #intro {
−	z-index: 4;	+	z-index: 4;
−	height: calc(100vh - 14px);	+	height: calc(100vh - 14px);
−	width: 100%;	+	width: 100%;
−	top: 0;	+	top: 0;
−	position: absolute;	+	position: absolute;
−	pointer-events: none	+	pointer-events: none
	}		}
	#text-wrapper {		#text-wrapper {
−	position: absolute;	+	position: absolute;
−	top: 50%;	+	top: 50%;
−	left: 50%;	+	left: 50%;
−	transform: translate(-50%, 20%);	+	transform: translate(-50%, 20%);
−	width: 100%;	+	width: 100%;
−	z-index: 4;	+	z-index: 4;
−	pointer-events: none	+	pointer-events: none
	}		}
	#desc-wrapper {		#desc-wrapper {
−	padding-top: 30px;	+	padding-top: 30px;
−	display: block;	+	display: block;
−	width: fit-content;	+	width: fit-content;
−	margin: 0 auto;	+	margin: 0 auto;
	}		}
	#center-desc {		#center-desc {
−	display: flex;	+	display: flex;
−	justify-content: center;	+	justify-content: center;
−	width: -webkit-fit-content;	+	width: -webkit-fit-content;
	}		}
	#desc-wrapper span {		#desc-wrapper span {
−	color: white;	+	color: white;
−	font-family: "lato-regular";	+	font-family: "lato-regular";
−	font-size: 3em;	+	font-size: 3em;
−	text-align: right;	+	text-align: right;
	}		}
	.container h1 {		.container h1 {
−	text-transform: uppercase;	+	text-transform: uppercase;
−	font-size: 70px;	+	font-size: 70px;
−	font-family: "lato-heavy";	+	font-family: "lato-heavy";
−	text-align: center;	+	text-align: center;
−	margin: 0;	+	margin: 0;
	}		}
	#intro-page #intro h1 {		#intro-page #intro h1 {
−	color: #FAFAFC;	+	color: #FAFAFC;
−	font-size: 12em;	+	font-size: 12em;
−	font-family: 'raleway';	+	font-family: 'raleway';
−	text-transform: lowercase;	+	text-transform: lowercase;
−	font-weight: 600;	+	font-weight: 600;
	}		}
		+
	#intro-page #intro h1 em {		#intro-page #intro h1 em {
	font-style: initial;		font-style: initial;
	font-weight: 300;		font-weight: 300;
	}		}
−
	#bubbles-container {		#bubbles-container {
−	height: 100vh;	+	height: 100vh;
−	position: absolute;	+	position: absolute;
−	width: 100%;	+	width: 100%;
−	box-sizing: border-box;	+	box-sizing: border-box;
	}		}
	#problem-page,		#problem-page,
	#links-page {		#links-page {
−	background-color: #FAFAFC;	+	background-color: #FAFAFC;
	}		}
	#problem-page #problem-header h1,		#problem-page #problem-header h1,
	#links-page #links-header h1 {		#links-page #links-header h1 {
−	color: #6281EF	+	color: #6281EF
	}		}
	#solution-page {		#solution-page {
−	background-color: #121212;	+	background-color: #121212;
	}		}
	#solution-page #solution-header h1 {		#solution-page #solution-header h1 {
−	color: #FFC43B	+	color: #FFC43B
	}		}
	.big-section {		.big-section {
−	line-height: 1.7	+	line-height: 1.7
	}		}
	.black-bg {		.black-bg {
−	background-color: #121212;	+	background-color: #121212;
−		+
	}		}
	.white-bg {		.white-bg {
−	background-color: #fafafc;	+	background-color: #fafafc;
−	display: flex;	+	display: flex;
−	justify-content: center;	+	justify-content: center;
−	align-items: center;	+	align-items: center;
−	flex-direction: column;	+	flex-direction: column;
	}		}
		+
	.smallWaves {		.smallWaves {
	position: relative;		position: relative;
Line 144:		Line 144:
	.lightblue-bg {		.lightblue-bg {
−	background-color: #6281ef;	+	background-color: #6281ef;
−	display: flex;	+	display: flex;
−	justify-content: center;	+	justify-content: center;
−	align-items: center;	+	align-items: center;
−	flex-direction: column;	+	flex-direction: column;
	}		}
	.brightblue-bg {		.brightblue-bg {
−	background-color: #3356ce;	+	background-color: #3356ce;
−	display: flex;	+	display: flex;
−	justify-content: center;	+	justify-content: center;
−	align-items: center;	+	align-items: center;
−	flex-direction: column;	+	flex-direction: column;
	}		}
	.darkblue-bg {		.darkblue-bg {
−	background-color: #11348f;	+	background-color: #11348f;
−	display: flex;	+	display: flex;
−	justify-content: center;	+	justify-content: center;
−	align-items: center;	+	align-items: center;
−	flex-direction: column;	+	flex-direction: column;
	}		}
	#storytelling .section {		#storytelling .section {
−	display: flex;	+	display: flex;
−	padding: 20px;	+	padding: 20px;
−	max-width: calc(100% - 330px);	+	max-width: calc(100% - 330px);
−	margin: 0 auto;	+	margin: 0 auto;
−		+
	}		}
	#storytelling .black-bg:first-of-type .section {		#storytelling .black-bg:first-of-type .section {
−	padding-bottom: 50px;	+	padding-bottom: 50px;
−	padding-top: 100px;	+	padding-top: 100px;
	}		}
	#storytelling p br {		#storytelling p br {
−	display: initial;	+	display: initial;
	}		}
	.half {		.half {
−	width: 50%;	+	width: 50%;
−	padding: 20px;	+	padding: 20px;
−	box-sizing: border-box;	+	box-sizing: border-box;
	}		}
	#storytelling p.center {		#storytelling p.center {
−	text-align: center !important;	+	text-align: center !important;
	}		}
	#storytelling .centered {		#storytelling .centered {
−	display: flex;	+	display: flex;
−	justify-content: center;	+	justify-content: center;
−	align-items: center;	+	align-items: center;
	}		}
−	#storytelling #fish-icon {	+	#storytelling #fish-icon svg {
−	border-radius: 50px;	+	height: 300px !important;
−	text-align: center !important;	+
	}		}
	#storytelling p {		#storytelling p {
−	font-family: 'montserrat-light';	+	font-family: 'montserrat-light';
−	font-size: 1.3em;	+	font-size: 1.3em;
−	text-align: initial;	+	text-align: initial;
	}		}
Line 214:		Line 212:
	#storytelling h2,		#storytelling h2,
	#storytelling h1 {		#storytelling h1 {
−	font-family: 'montserrat-bold';	+	font-family: 'montserrat-bold';
	}		}
	#storytelling h2,		#storytelling h2,
	#storytelling h1 {		#storytelling h1 {
−	text-align: center;	+	text-align: center;
	}		}
	.black {		.black {
−	color: #121212;	+	color: #121212;
−		+
	}		}
	.white {		.white {
−	color: #fafafc;	+	color: #fafafc;
	}		}
−
	#storytelling #secondpart {		#storytelling #secondpart {
−	height: fit-content;	+	height: fit-content;
−	display: flex;	+	display: flex;
−	flex-direction: column;	+	flex-direction: column;
−	text-align: center !important;	+	text-align: center !important;
	}		}
	#secondpart .icon {		#secondpart .icon {
−	max-width: 500px;	+	max-width: 500px;
−	width: 60%	+	width: 60%
	}		}
	.wdt-60 {		.wdt-60 {
−	max-width: 400px;	+	max-width: 400px;
−	width: 60%;	+	width: 60%;
	}		}
	.wd-60 {		.wd-60 {
−	max-width: 700px;	+	max-width: 700px;
−	width: 60%;	+	width: 60%;
	}		}
	.wd-50 {		.wd-50 {
−	max-width: 500px;	+	max-width: 500px;
−	width: 50%;	+	width: 50%;
	}		}
	.wdt-80 {		.wdt-80 {
−	width: 80%;	+	width: 80%;
−	margin: 0 auto;	+	margin: 0 auto;
	}		}
	.icon {		.icon {
−	padding: 20px;	+	padding: 20px;
−	box-sizing: border-box;	+	box-sizing: border-box;
−	height: 300px;	+	height: 300px;
−	width: 300px;	+	width: 300px;
−	border-radius: 50px;	+	border-radius: 50px;
−	margin: 0 auto;	+	margin: 0 auto;
−	max-width: 100%;	+	max-width: 100%;
	}		}
	.icon.white {		.icon.white {
−	background-color: #fafafc;	+	background-color: #fafafc;
−	color: #121212;	+	color: #121212;
	}		}
	.icon.dark {		.icon.dark {
−	background-color: rgba(255, 255, 255, 0.1);	+	background-color: rgba(255, 255, 255, 0.1);
−	color: #fafafc;	+	color: #fafafc;
	}		}
		+
	#fishIcon {		#fishIcon {
	position: sticky;		position: sticky;
Line 289:		Line 286:
	h1 {		h1 {
−	color: #fafafc;	+	color: #fafafc;
		+	}
		+
		+	#storytelling #firstpart {
		+	display: block;
		+	}
		+
		+	#storytelling #firstpart .centered {
		+	margin: 0 auto;
		+	}
		+
		+	#storytelling #statistics {
		+	padding: 20px;
		+	}
		+
		+	#storytelling #statistics p {
		+	text-align: center;
		+	margin: 0 auto;
		+	}
		+
		+	#storytelling #statistics h1 {
		+	color: #6281ef;
		+	font-size: 5em;
		+	font-family: 'montserrat-black', sans-serif;
		+	margin-block-end: 0em;
		+	margin-block-start: 0em;
		+	line-height: 1.1;
		+	opacity: 81%;
	}		}
Line 295:		Line 319:
	#fourthpart,		#fourthpart,
	#seventhpart {		#seventhpart {
−	width: 80%;	+	width: 80%;
−	margin: 0 auto;	+	margin: 0 auto;
	}		}
	#storytelling #fifthpart {		#storytelling #fifthpart {
−	text-align: center !important;	+	text-align: center !important;
	}		}
	#fifthpart .list {		#fifthpart .list {
−	width: 80%;	+	width: 80%;
−	margin: 0 auto	+	margin: 0 auto
	}		}
	#fifthpart .list .list-item {		#fifthpart .list .list-item {
−	height: 60px;	+	height: 60px;
−	padding: 10px;	+	padding: 10px;
−	display: flex;	+	display: flex;
−	align-items: center;	+	align-items: center;
	}		}
	#fifthpart .list .list-item div {		#fifthpart .list .list-item div {
−	width: 60px;	+	width: 60px;
−	height: 60px;	+	}
−	background-color: rgba(255, 255, 255, 0.1);	+
−	border-radius: 40px;	+	#fifthpart .list .list-item div img {
		+	width: 50px;
		+	height: 50px;
		+	padding: 5px;
	}		}
	#fifthpart .list .list-item p {		#fifthpart .list .list-item p {
−	width: calc(100% - 60px);	+	width: calc(100% - 60px);
−	float: right;	+	float: right;
−	margin: 0;	+	margin: 0;
−	padding: 5px;	+	padding: 5px;
−	color: #fafafc;	+	color: #fafafc;
	}		}
	#sixthpart {		#sixthpart {
−	flex-direction: column;	+	flex-direction: column;
	}		}
	.milkWave {		.milkWave {
−	z-index: 2;	+	z-index: 2;
−	width: 100%;	+	width: 100%;
−	top: 0px;	+	top: 0px;
−	position: relative;	+	position: relative;
−	content: "";	+	content: "";
−	pointer-events: none;	+	pointer-events: none;
−	background-position: bottom;	+	background-position: bottom;
−	background-origin: border-box;	+	background-origin: border-box;
−	background-size: 100%;	+	background-size: 100%;
−	background-repeat: no-repeat;	+	background-repeat: no-repeat;
−	background-image: url(https://static.igem.org/mediawiki/2020/e/e7/T--Vilnius-Lithuania--milkTeam.svg);	+	background-image: url(https://static.igem.org/mediawiki/2020/e/e7/T--Vilnius-Lithuania--milkTeam.svg);
−	height: 150px	+	height: 150px
	}		}
	.milkWave.rotate-wave {		.milkWave.rotate-wave {
−	transform: rotate(180deg)	+	transform: rotate(180deg)
	}		}
	.milkWave svg {		.milkWave svg {
−	height: 150px;	+	height: 150px;
	}		}
		+
	.milkWave.small {		.milkWave.small {
	position: absolute;		position: absolute;
Line 361:		Line 389:
	.yellow {		.yellow {
−	color: #fcbd1b;	+	color: #fcbd1b;
	}		}
	#storytelling #bact {		#storytelling #bact {
−	flex-direction: column;	+	flex-direction: column;
−	text-align: center !important;	+	text-align: center !important;
	}		}
	#storytelling #bact .half {		#storytelling #bact .half {
−	display: flex;	+	display: flex;
−	flex-direction: column;	+	flex-direction: column;
−	align-items: center;	+	align-items: center;
	}		}
−
	#bact .row {		#bact .row {
−	display: inherit;	+	display: inherit;
−		+
	}		}
	.white-bg .wdt-60 {		.white-bg .wdt-60 {
−	text-align: center;	+	text-align: center;
	}		}
	#storytelling #fish-symptoms {		#storytelling #fish-symptoms {
−	align-items: inherit !important;	+	align-items: inherit !important;
	}		}
	#fish-symptoms .icon {		#fish-symptoms .icon {
−	margin: 0 auto	+	margin: 0 auto
	}		}
	#fish-symptoms p {		#fish-symptoms p {
−	margin-top: 50px	+	margin-top: 50px
	}		}
	#fish-symptoms p:first-child {		#fish-symptoms p:first-child {
−	margin-top: 0px	+	margin-top: 0px
	}		}
	.title {		.title {
−	text-transform: uppercase	+	text-transform: uppercase
	}		}
	#links .nf {		#links .nf {
−	display: inherit	+	display: inherit
	}		}
	#links .title {		#links .title {
−	font-size: 2.5em;	+	font-size: 2.5em;
	}		}
	#links .row {		#links .row {
−	display: flex;	+	display: flex;
−	justify-content: center;	+	justify-content: center;
	}		}
	#links .row .icon {		#links .row .icon {
−	width: 200px;	+	width: 200px;
−	height: 200px;	+	height: 200px;
−	margin: 20px	+	margin: 20px
	}		}
	.half p {		.half p {
−	width: 70%	+	width: 70%
	}		}
	@media (max-width:768px) {		@media (max-width:768px) {
−	#intro-page #intro h1 {	+	#intro-page #intro h1 {
−	font-size: 4.5em;	+	font-size: 4.5em;
−	}	+	}
−		+	#intro-page #intro #title::after {
−	#intro-page #intro #title::after {	+	font-size: 4em;
−	font-size: 4em;	+	transform: translate(-53%, -130%);
−	transform: translate(-53%, -130%);	+	}
−	}	+	.content-header {
−		+	padding-top: 50px
−	.content-header {	+	}
−	padding-top: 50px	+	.content-index h1 {
−	}	+	font-size: 3.3em;
−		+	}
−	.content-index h1 {	+	.half {
−	font-size: 3.3em;	+	width: 100%;
−	}	+	}
−		+	.half p {
−	.half {	+	width: initial
−	width: 100%;	+	}
−	}	+	.two-parts {
−		+	flex-direction: column;
−	.half p {	+	}
−	width: initial	+	#fifthpart .list {
−	}	+	width: 80%
−		+	}
−	.two-parts {	+	#links .row .icon {
−	flex-direction: column;	+	width: 100px;
−	}	+	height: 100px;
−		+	margin: 5px;
−	#fifthpart .list {	+	padding: 10px;
−	width: 80%	+	}
−	}	+	#storytelling p,
−		+	#storytelling h1,
−	#links .row .icon {	+	#storytelling h2,
−	width: 100px;	+	#storytelling h3 {
−	height: 100px;	+	text-align: center !important;
−	margin: 5px;	+	}
−	padding: 10px;	+	#storytelling p {
−	}	+	font-size: 0.8em
−		+	}
−	#storytelling p,	+	.wd-50,
−	#storytelling h1,	+	.wdt-60 {
−	#storytelling h2,	+	width: 80%
−	#storytelling h3 {	+	}
−	text-align: center !important;	+	#storytelling .section {
−	}	+	max-width: calc(100% - 50px);
−		+	}
−	#storytelling p {	+
−	font-size: 0.8em	+
−	}	+
−		+
−	.wd-50,	+
−	.wdt-60 {	+
−	width: 80%	+
−	}	+
−		+
−	#storytelling .section {	+
−	max-width: calc(100% - 50px);	+
−	}	+
	#fishIcon {		#fishIcon {
	position: initial;		position: initial;
Line 493:		Line 507:
	}		}
	}		}
−	#fixedOverlay nav #header #logo[visible=true]{	+
−	opacity: 0;	+	#fixedOverlay nav #header #logo[visible=true] {
		+	opacity: 0;
	}		}

---

Revision as of 13:20, 10 October 2020

body, html {

   margin: 0;
   padding: 0;
   color: #121212;
   font-family: 'lato-regular';

}

.container {

   width: 100%;
   height: calc(100vh - 14px)

}

1. waves {

   transform: rotate(180deg);
   background-color: #fafafc

}

1. intro-page {

   background-color: #121212;

}

1. intro-header {

   height: 100vh

}

1. intro-header svg {

   height: 90%;

}

1. intro-page #intro-header {

   width: 100%;
   margin: 0 auto;
   position: absolute;
   z-index: 4;
   pointer-events: none

}

1. intro-page #intro {

   z-index: 4;
   height: calc(100vh - 14px);
   width: 100%;
   top: 0;
   position: absolute;
   pointer-events: none

}

1. text-wrapper {

   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, 20%);
   width: 100%;
   z-index: 4;
   pointer-events: none

}

1. desc-wrapper {

   padding-top: 30px;
   display: block;
   width: fit-content;
   margin: 0 auto;

}

1. center-desc {

   display: flex;
   justify-content: center;
   width: -webkit-fit-content;

}

1. desc-wrapper span {

   color: white;
   font-family: "lato-regular";
   font-size: 3em;
   text-align: right;

}

.container h1 {

   text-transform: uppercase;
   font-size: 70px;
   font-family: "lato-heavy";
   text-align: center;
   margin: 0;

}

1. intro-page #intro h1 {

   color: #FAFAFC;
   font-size: 12em;
   font-family: 'raleway';
   text-transform: lowercase;
   font-weight: 600;

}

1. intro-page #intro h1 em {

   font-style: initial;
   font-weight: 300;

}

1. bubbles-container {

   height: 100vh;
   position: absolute;
   width: 100%;
   box-sizing: border-box;

}

1. problem-page,
2. links-page {

   background-color: #FAFAFC;

}

1. problem-page #problem-header h1,
2. links-page #links-header h1 {

   color: #6281EF

}

1. solution-page {

   background-color: #121212;

}

1. solution-page #solution-header h1 {

   color: #FFC43B

}

.big-section {

   line-height: 1.7

}

.black-bg {

   background-color: #121212;

}

.white-bg {

   background-color: #fafafc;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;

}

.smallWaves {

   position: relative;
   height: 200px;

}

.lightblue-bg {

   background-color: #6281ef;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;

}

.brightblue-bg {

   background-color: #3356ce;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;

}

.darkblue-bg {

   background-color: #11348f;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;

}

1. storytelling .section {

   display: flex;
   padding: 20px;
   max-width: calc(100% - 330px);
   margin: 0 auto;

}

1. storytelling .black-bg:first-of-type .section {

   padding-bottom: 50px;
   padding-top: 100px;

}

1. storytelling p br {

   display: initial;

}

.half {

   width: 50%;
   padding: 20px;
   box-sizing: border-box;

}

1. storytelling p.center {

   text-align: center !important;

}

1. storytelling .centered {

   display: flex;
   justify-content: center;
   align-items: center;

}

1. storytelling #fish-icon svg {

   height: 300px !important;

}

1. storytelling p {

   font-family: 'montserrat-light';
   font-size: 1.3em;
   text-align: initial;

}

1. storytelling p b,
2. storytelling h2,
3. storytelling h1 {

   font-family: 'montserrat-bold';

}

1. storytelling h2,
2. storytelling h1 {

   text-align: center;

}

.black {

   color: #121212;

}

.white {

   color: #fafafc;

}

1. storytelling #secondpart {

   height: fit-content;
   display: flex;
   flex-direction: column;
   text-align: center !important;

}

1. secondpart .icon {

   max-width: 500px;
   width: 60%

}

.wdt-60 {

   max-width: 400px;
   width: 60%;

}

.wd-60 {

   max-width: 700px;
   width: 60%;

}

.wd-50 {

   max-width: 500px;
   width: 50%;

}

.wdt-80 {

   width: 80%;
   margin: 0 auto;

}

.icon {

   padding: 20px;
   box-sizing: border-box;
   height: 300px;
   width: 300px;
   border-radius: 50px;
   margin: 0 auto;
   max-width: 100%;

}

.icon.white {

   background-color: #fafafc;
   color: #121212;

}

.icon.dark {

   background-color: rgba(255, 255, 255, 0.1);
   color: #fafafc;

}

1. fishIcon {

   position: sticky;
   top: 20px;

}

h1 {

   color: #fafafc;

}

1. storytelling #firstpart {

   display: block;

}

1. storytelling #firstpart .centered {

   margin: 0 auto;

}

1. storytelling #statistics {

   padding: 20px;

}

1. storytelling #statistics p {

   text-align: center;
   margin: 0 auto;

}

1. storytelling #statistics h1 {

   color: #6281ef;
   font-size: 5em;
   font-family: 'montserrat-black', sans-serif;
   margin-block-end: 0em;
   margin-block-start: 0em;
   line-height: 1.1;
   opacity: 81%;

}

1. thirdpart,
2. fourthpart,
3. seventhpart {

   width: 80%;
   margin: 0 auto;

}

1. storytelling #fifthpart {

   text-align: center !important;

}

1. fifthpart .list {

   width: 80%;
   margin: 0 auto

}

1. fifthpart .list .list-item {

   height: 60px;
   padding: 10px;
   display: flex;
   align-items: center;

}

1. fifthpart .list .list-item div {

   width: 60px;

}

1. fifthpart .list .list-item div img {

   width: 50px;
   height: 50px;
   padding: 5px;

}

1. fifthpart .list .list-item p {

   width: calc(100% - 60px);
   float: right;
   margin: 0;
   padding: 5px;
   color: #fafafc;

}

1. sixthpart {

   flex-direction: column;

}

.milkWave {

   z-index: 2;
   width: 100%;
   top: 0px;
   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);
   height: 150px

}

.milkWave.rotate-wave {

   transform: rotate(180deg)

}

.milkWave svg {

   height: 150px;

}

.milkWave.small {

   position: absolute;

}

.yellow {

   color: #fcbd1b;

}

1. storytelling #bact {

   flex-direction: column;
   text-align: center !important;

}

1. storytelling #bact .half {

   display: flex;
   flex-direction: column;
   align-items: center;

}

1. bact .row {

   display: inherit;

}

.white-bg .wdt-60 {

   text-align: center;

}

1. storytelling #fish-symptoms {

   align-items: inherit !important;

}

1. fish-symptoms .icon {

   margin: 0 auto

}

1. fish-symptoms p {

   margin-top: 50px

}

1. fish-symptoms p:first-child {

   margin-top: 0px

}

.title {

   text-transform: uppercase

}

1. links .nf {

   display: inherit

}

1. links .title {

   font-size: 2.5em;

}

1. links .row {

   display: flex;
   justify-content: center;

}

1. links .row .icon {

   width: 200px;
   height: 200px;
   margin: 20px

}

.half p {

   width: 70%

}

@media (max-width:768px) {

   #intro-page #intro h1 {
       font-size: 4.5em;
   }
   #intro-page #intro #title::after {
       font-size: 4em;
       transform: translate(-53%, -130%);
   }
   .content-header {
       padding-top: 50px
   }
   .content-index h1 {
       font-size: 3.3em;
   }
   .half {
       width: 100%;
   }
   .half p {
       width: initial
   }
   .two-parts {
       flex-direction: column;
   }
   #fifthpart .list {
       width: 80%
   }
   #links .row .icon {
       width: 100px;
       height: 100px;
       margin: 5px;
       padding: 10px;
   }
   #storytelling p,
   #storytelling h1,
   #storytelling h2,
   #storytelling h3 {
       text-align: center !important;
   }
   #storytelling p {
       font-size: 0.8em
   }
   .wd-50,
   .wdt-60 {
       width: 80%
   }
   #storytelling .section {
       max-width: calc(100% - 50px);
   }
   #fishIcon {
       position: initial;
       top: initial;
   }

}

1. fixedOverlay nav #header #logo[visible=true] {

   opacity: 0;

}