@font-face {
font-family: ArialRoundedBold; src: url(https://static.igem.org/mediawiki/2017/3/3a/Arial-rounded-bold.ttf);
}
@import url('https://fonts.googleapis.com/css?family=Lato');
- {
font-family: 'Lato', sans-serif;
}
- height {
height: 550px; width: 60%; object-fit: contain; /*margin-top: 120px !important;*/
}
- illustration-hero-image {
height: 490px; width: 70%; object-fit: contain; /*margin-top: 120px !important;*/
}
- hero-image {
margin-left: 0; height: 100%; width: 100%; object-fit: cover; align-content: left;
margin-bottom: -7px;
padding: 0 !important;
}
.section-block {
max-width: 1000px; margin: 0px auto 50px auto; padding: 0px 0px;
}
.section-header {
padding-top: 1.5em; text-align: center; margin: 10px; display: inline-block; font-size: 1.8rem !important; font-weight: bold !important; color: #f9ab53;
}
h2:after {
background: none repeat scroll 0 0 #fccf9c; bottom: -10px; content: ""; display: block; height: 8px; position: relative; width: 100px;
margin: auto;
}
.subheading {
padding-top: 1.5em; text-align: center; margin: 10px; display: inline-block; font-size: 1.4rem !important; font-weight: bold !important; color: #fab76b;
}
.section-image {
max-width: 20%;
padding-bottom: 10px;
display: block; margin: auto;
}
.section-image-larger {
max-width: 45%;
padding-bottom: 10px;
display: block; margin: auto;
} .section-image-right {
max-width: 100%;
padding-bottom: 10px; float: right;
display: block; margin: auto;
} .section-image-full {
max-width: 100%; max-height: 100%;
padding-bottom: 10px;
display: block; margin: auto;
}
.section-content {
text-align: justify !important; margin-left: 15px; margin-right: 15px;
}
.section-content.centered {
text-align: center !important;
}
.section-dropdown-header {
text-align: justify !important; font-size: 1.3rem !important; font-family: sans-serif !important; font-weight: bold; margin: 10px 0px; padding: 10px; line-height: 38px; overflow: auto; background-color: #F4F4F4; border-radius: 4px;
}
.dropdown-button {
float: right; background-color: #00B6BB; border-color: #00B6BB #00B6BB;
}
.dropdown-button:hover {
background-color: #00adb3; border-color: #00B6BB #00B6BB;
}
.dropdown-content {
text-align: justify !important; font-size: 1.0rem !important; font-family: sans-serif !important; margin: 0px;
}
.card-body {
padding: 0px 15px;
}
/* NAVBAR STYLES */
.navbar {
background-color: #FFF; font-size: 1rem;
}
.navbar-brand>img {
width: 120px; height: 33px; position: relative;
}
.navbar a:visited {
color: #000;
}
/* FOOTER STYLES */
.footer {
background-color: #F4F4F4;
}
.footer>.container-fluid {
padding: 30px 15px;
}
.footer>.container-fluid>.row {
display: flex;
}
.footer-section {
text-align: center !important; padding: 0px 25px; display: flex; flex-direction: row; align-items: center; align-content: center; justify-content: center;
}
.footer-text {
text-align: center !important;
}
.footer-logo {
width: 35%;
padding-right: 10px;
display: inline-block;
} .footer-logo2 {
width: 15%;
padding-right: 10px;
display: inline-block;
}
/*Carousel CSS*/
.carousel {
width: 100%;
}
.carousel-control-prev, .carousel-control-next {
color: #000; opacity: 1;
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
.carousel-control-prev-icon, .carousel-control-next-icon {
background-size: cover; width: 30px; height: 30px;
}
/*Card CSS*/
.flip_card {
position: relative; /*float: left;*/ margin: 20px auto !important; padding-bottom: 50%; width: 75%; text-align: center;
}
.flip_card__front, .flip_card__back {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.flip_card__front, .flip_card__back {
-webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s;
}
.flip_card__front {
background-color: #ff5078;
}
.flip_card__back {
background-color: #1e1e1e; -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg);
}
.flip_card.effect__hover:hover .flip_card__front {
-webkit-transform: rotateY(-180deg); transform: rotateY(-180deg);
}
.flip_card.effect__hover:hover .flip_card__back {
-webkit-transform: rotateY(0); transform: rotateY(0);
}
- unl-block {
display: flex; flex-direction: row; align-items: center;
}
- unl-block>.section-content {
flex-grow: 1;
}
.media, .media-white {
padding: 20px; background-color: #fef3e7; border-radius: 8px; align-items: center; margin-bottom: 30px;
}
.media {
background-color: #fef3e7; text-align: left;
} .media-white {
background-color: #FFF; font-size: 1.0rem !important; text-align: justify;
}
.media.reversed {
flex-direction: row-reverse;
}
.media-body.reversed {
margin-left: 1rem;
}
img.align-self-center.mr-3 {
margin-right: 2rem !important; max-width: 40%; object-fit: cover;
}
img.align-self-center.mr-3-lukas {
margin-right: 2rem !important; max-width: 20%; object-fit: cover;
} img.align-self-center.mr-3-jonah {
margin-right: 2rem !important; max-width: 35%; object-fit: cover;
}
img.align-self-center.mr-3.reversed {
margin-left: 2rem !important; margin-right: 0rem !important;
}
h5.mt-0 {
font-size: 2rem; font-weight: bold;
}
- pdf {
width: 950px; height: 900px; margin: 2em auto;
}
- pdf object {
display: block; border: solid 1px #666;
}
.shadow-bottom p {
margin: 1em;
}
p {
line-height: 1.7em !important;
}
article h3 {
padding-bottom: 10px; font-size: 1.1rem; text-align: left; font-weight: bold;
}
article {
padding-bottom: 20px;
}
/* Style the tab */
div.tab {
overflow: hidden;
}
/* Style the buttons inside the tab */
div.tab button {
float: center; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 20px; background-color: #FABF7B;
}
/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #f9ab53;
}
/* Create an active/current tablink class */
div.tab button.active {
background-color: #f9ab53;
}
/* Style the tab content */
.tabcontent {
display: none; padding: 6px 12px; border-bottom: 1px solid #FABF7B;
}
video {
padding-top: 10px; padding-bottom: 10px;
}
.image-left, .image-right {
display: block; width: 25%; position: relative; top: 3px;
}
.image-left {
float: left; margin: 0 15px 0 0;
}
.image-right {
float: right; margin: 0 0 0 15px;
} .image-medal {
display: block; max-width: 40%; position: relative; top: 3px; float: left; margin: 0 15px 0 0;
}