/**
 * This page and wiki was built with the help of igem-wikibrick, a tool created by Virginia iGEM 2018
 * @version v0.8.0
 * @link https://github.com/Virginia-iGEM/igem-wikibrick
 * @license MIT
 */
html {
  height: 100%;
  min-height:100%;
  margin:0;
  text-align: center;
}
body {
  height: 100%;
  min-height:100%;
  margin:0;
  text-align: center;
  background-color: #110034;
  /*font-size: 0;*/
}
.out {
  font-size: 1em;
  height: 100%;
  min-height:100%;
  margin:0;
  text-align: center;
  background-color: #110034;
}

/* Navbar container */
.navbar {
  position: fixed;
  top: 18px;
  left:0;
  overflow: auto;
  background-color: #110034; /*deep blue*/
  font-family: Arial;
  width: 100%;
  height: 80px;
  z-index: 10;
  font-size: 1em;
}
#rightbullet {
  position: relative;
  float: right;
  padding-left:3%;
  height: 180px;
  width: 180px;
}
#leftbullet {
  position: relative;
  float: left;
  padding-right:3%;
  height: 240px;
  width: 200px;
}
/* Links inside the navbar */
/*.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  /*padding: 14px 16px;*/
  /*display: block;
  text-decoration: none;
}*/
.logo {
  float: left;
  overflow: hidden;
  font-size: 16px;

  color: red;
  text-align: center;
  text-decoration: none;
  width: 33.33%;
  height: 100%;
}
.logo img {
  width: 70%; /* THIS CHANGES WITH THE LOGO */
  height: 75%;
  -webkit-transform: translateY(15%);
          transform: translateY(15%);
}
/* The dropdown container */
.dropdown-team, .dropdown-project,.dropdown-results, .dropdown-parts, .dropdown-human, .dropdown-awards {
  float: left;
  overflow: auto;
  width: 11.11%;
  font-family: 'Trebuchet MS';
}

/* Dropdown button */
.dropdown-project .dropbtn, .dropdown-team .dropbtn, .dropdown-results .dropbtn, .dropdown-parts .dropbtn, .dropdown-human .dropbtn, .dropdown-awards .dropbtn {
  font-size: 16px; 
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
  height: 80px;
  width: 100%;
}
.dropbtn img {
  width: 17%;
  height: 50%;
}
.dropbtn span {
  display: block;
}

/* Add a red background color to navbar links on hover */
.dropdown-project:hover .dropbtn, .dropdown-team:hover .dropbtn, .dropdown-results:hover .dropbtn, .dropdown-parts:hover .dropbtn, .dropdown-human:hover .dropbtn, .dropdown-awards:hover .dropbtn {
  background-color: #a6a6ff; /*light perrywinckle*/
  color:#fff2bb; /*midnight purple*/
}
/* Show the dropdown menu on hover */
.dropdown-project:hover .dropdown-content, .dropdown-team:hover .dropdown-content,.dropdown-results:hover .dropdown-content, .dropdown-parts:hover .dropdown-content, .dropdown-human:hover .dropdown-content, .dropdown-awards:hover .dropdown-content {
  display: block;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: fixed;
  background-color: #cdd9ff; /*lighter perrywinckle*/
  min-width: 10px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  /*z-index: 1;*/
  width: 11.11%;
}

/* Links inside the dropdown */
.dropdown-content a {
  font-family: 'Trebuchet MS';
  float: none;
  color: #42427c; /*blueberry*/
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}
.dropdown-content a:hover {
  background-color: #717ad3; /*deep perrywinckle*/
  color: #eef0ff; /*ghost lilac*/
}
/* END OF NAVBAR STYLING*/

/* STYLE PICTURE AT THE TOP */

.top-picture {
  z-index: -2;
  /* Full height */
  height: 100%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#background {
  width: 100vw;
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* END OF STYLE PICTURE AT THE TOP */

/* STYLE OF HORIZONTAL SCROLL INDICATOR PROGRESS BAR */
progress {
  /* Positioning */
  position: fixed;
  left: 0;
  top: 98px;

  /* Dimensions */
  width: 100%;
  height: 10px;

  /* Reset the appearance */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  /* Get rid of the default border in Firefox/Opera. */
  border: none;

  /* Progress bar container for Firefox/IE10+ */
  background-color: transparent;

  /* Progress bar value for IE10+ */
  color: red;
  z-index: 6;
}
progress::-webkit-progress-bar {
  background-color: transparent; /*transparent*/
}
progress::-webkit-progress-value {
  background-color: #ff5d5f; /*coral*/
}

/* END OF STYLE OF HORIZONTAL SCROLL INDICATOR PROGRESS BAR */


/* FILL SCREEEN STYLE */
#contentbutnotcontentcuzigem {
  padding-left: 30%;
  padding-right: 8%;
  padding-top: 50px;
  padding-bottom: 50px;
  background-color:white;
  text-align: left;
}

.fixed-index {
  position:absolute;
  /*top: 500px;*/ 

  padding-left: 6%;
  display: block;
}
/* END FILL SCREEEN STYLE */

#contentbutnotcontentcuzigem h2 {
  /*padding-top: 90px;*/
  overflow: auto;
  font-size: 3em;
  text-align: center;
}
#contentbutnotcontentcuzigem h3 {
  font-size: 2em;
}
#contentbutnotcontentcuzigem h4 {
  font-size: 2em;
}
.title {
  position: absolute;
  top: 200px;
  left: 33%;
  font-size: 50px;
  font-weight: bold;
  z-index: 5;

}
p {
  text-align: left;
  font-size: 1.25em;
  padding-left: 5%;
  font-family: 'Trebuchet MS';
}
#contentbutnotcontentcuzigem ul{
  text-align: left;
  font-size: 1.25em;
  padding-left: 21%;
  font-family: 'Trebuchet MS';
}
#unordered-index {
  list-style: none;
}
#unordered-index {
  border: 10px solid #FF9290;
  background-color: #FF9290;
  border-radius: 20px;
}
.dna-link {
  font-family: 'Arial Rounded MT Bold';
  float: left;
  color: white;
  text-decoration: none;
  padding-right: 500px;

  -webkit-transform: translateX(-0.5%);

          transform: translateX(-0.5%);
  display: block;
  text-align: left;
}
.assembly-link {
  font-family: 'Arial Rounded MT Bold';
  float: left;
  color: white;
  padding-left: 0px;

  -webkit-transform: translate(4%,-10%);

          transform: translate(4%,-10%);
  text-decoration: none;
  display: block;
  text-align: left;
}
#fullimg {
  width: 800px;
  height: 500px;
}
.phb-link {
  font-family: 'Arial Rounded MT Bold';
  float: left;
  color: white;
  padding-left: 20px;
  padding-right: 0px;
  -webkit-transform: translate(-6%, -20%);
          transform: translate(-6%, -20%);
  text-decoration: none;
  display: block;
  text-align: left;
}
.dna-link:hover, .assembly-link:hover, .phb-link:hover {
  color: #110034 !important;
}


/* BOTTOM FACING ARROW TO BRING YOU TO THE FIRST SECTION */
.bot-arrow {
  position: absolute;
  top: 600px;
  left: 47.1%; /*THIS IS FOR THE ARROW TO BE CENTERED*/
  z-index:5;
}
.bot-arrow a:hover .bottom {
  border: 0.5em solid #FC664B;
  /*position:absolute;*/

}
.bot-arrow a:hover .bottom:after {
  border-top: 0.5em solid #FC664B;
  border-right: 0.5em solid #FC664B;
}

.bot-arrow .bottom { /* circle arround arrow */
  display: inline-block;
  width: 4em;
  height: 4em;
  border: 0.5em solid white;
  border-radius: 50%;
  margin-left: 0.75em;
}

.bot-arrow .bottom:after { /* arrow*/
  content: '';
  display: inline-block;
  margin-top: 0.6em;
  width: 1.4em;
  height: 1.4em;
  border-top: 0.5em solid white;
  border-right: 0.5em solid white;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

/* PROGRESS RINGS */
.progress-ring__circle {
  /*stroke-dasharray: 10 20; /* 10px dashes separated by 20px; */
  transition: stroke-dashoffset 0s;
  /* axis compensation */
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

#point a{
  color: red;
}
p a {
  text-decoration: underline;
  color: black;
}
.svgplustext {
  display: inline-flex;
  align-self:left;
}
.svgplustexttwolines {
  display: inline-flex;
  align-self:left;
}
.svgplustext svg{
  display: inline-flex;
  stroke: white; /* border of number?*/
  -webkit-transform: translateY(35%);
          transform: translateY(35%); /* get number to line up with text*/
  align-self: left;
}
.svgplustexttwolines svg{
  display: inline-flex;
  stroke: white; /* border of number?*/
  -webkit-transform: translateY(58%);
          transform: translateY(58%); /* get number to line up with text*/
  align-self: left;
}

#footer {
  position:absolute;
  bottom:0;
  background-color: #00054a;
  width:100%;
  height:300px;
}
#outer {
  position: relative;
  min-height: 100vh; /*CHANGE BASED ON HOW LONG REFERENCES ARE*/
  background-color:white;
}
#references-list {
  float:left;
  text-align: left;
  padding-left: 10%;
  padding-right: 10%;
  font-family: 'Arial';
  background-color: white;
}
#references-list li {
  padding-top: 30px;
}
#footer img {
  width: 100%;
  height:100%;
}
h3 {
  padding-left: 5%;
}


h4 {
  font-size: 2em;
  padding-left: 5%;
  padding-top: 20px;

}
#quote {
  font-family: "Tahoma";
  font-size: 1.5em;
  color: #152082;
}
#bulleta {
  position: relative;
  padding-right: 8%;
  width: 390px;
  height: 350px;
}
#bulletb {
  position: relative;
  padding-right: 0%;
  width: 390px;
  height: 350px;
}
#bullet1 {
  align-self: center;
  padding-left: 30%;
  width: 300px;
  height: 300px;
}
#bullet2 {
  float:left;
  padding-right: 3%;
  width: 100px;
  height: 150px;
}
#bullet3 {
  float:left;
  padding-right: 3%;
  width: 100px;
  height: 150px;
}
#bullet4 {
  float:left;
  padding-right: 3%;
  width: 100px;
  height: 100px;
}
#bullet5 {
  float:left;
  padding-right: 3%;
  width: 100px;
  height: 170px;
}
#bullet6 {
  float:left;
  padding-right: 3%;
  width: 100px;
  height: 230px;
}
#bullet7 {
  float:left;
  padding-right: 3%;
  width: 100px;
  height: 100px;
}
#bullet8 {
  float:left;
  padding-right: 3%;
  width: 100px;
  height: 210px;
}
#bullet9 {
  float:left;
  padding-right: 3%;
  width: 100px;
  height: 230px;
}
#bullet10 {
  float:left;
  padding-right: 3%;
  width: 100px;
  height: 100px;
}
#bullet11 {
  float:left;
  padding-right: 3%;
  width: 100px;
  height: 280px;
}
#bullet12 {
  float:left;
  padding-right: 3%;
  width: 100px;
  height: 180px;
}
#bullet13 {
  float:left;
  padding-right: 3%;
  width: 100px;
  height: 100px;
}
#bullet14 {
  float:left;
  padding-right: 3%;
  width: 100px;
  height: 100px;
}
#bullet15 {
  float:left;
  padding-right: 3%;
  width: 100px;
  height: 100px;
}
#tables {
  padding-right: 3%;
  width: 800px;
  height: 500px;
}
#pic1 {
  padding-right: 3%;
  width: 800px;
  height: 545.1px;
}
#pic2 {
  padding-right: 3%;
  width: 800px;
  height: 280px;
}
#pic3 {
  padding-right: 3%;
  width: 800px;
  height: 300px;
}

.image-container {
  width: 800px;
  height: 352px;
  position: relative;
  padding-left: 3%;
}
.slider-image {
  width: 800px;
}


#caption {
  text-align: left;
  font-size: 1em;
}
#ref {
  float: left;
  text-align:left;
  padding-left: 20%;
  background-color: white;
}

.references {
  padding-bottom: 300px;
  /*height: 100%;*/
  color:black;
  background-color: white;
}