Template:AshesiGhana/ResetCSS

@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;

}

  1. height {
   height: 550px;
   width: 60%;
   object-fit: contain;
   /*margin-top: 120px !important;*/

}

  1. illustration-hero-image {
   height: 490px;
   width: 70%;
   object-fit: contain;
   /*margin-top: 120px !important;*/

}

  1. 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);

}

  1. unl-block {
   display: flex;
   flex-direction: row;
   align-items: center;

}

  1. 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;

}

  1. pdf {
   width: 950px;
   height: 900px;
   margin: 2em auto;

}

  1. 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;

}