@font-face {
  font-family:'BarlowSemiCondensed';
  src: url('fonts/barlow-semi-condensed-v14-latin-600.eot');
  src: url('fonts/barlow-semi-condensed-v14-latin-600.eot') format('embedded-opentype'),
       url('fonts/barlow-semi-condensed-v14-latin-600.woff') format('woff'),
       url('fonts/barlow-semi-condensed-v14-latin-600.ttf') format('truetype'),
       url('fonts/barlow-semi-condensed-v14-latin-600.svg') format('svg');
  }
/* vietnamese */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 400;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 400;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 400;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'BarlowSemiCondensedExtraBold';
  src: url('fonts/BarlowSemiCondensed-ExtraBold.ttf');
  src: url('fonts/BarlowSemiCondensed-ExtraBold.ttf') format('truetype');
  }
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body { padding-top: 56px; }
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #9c0830 !important; }
.bg-hero { 
    background-image:url("https://static.igem.wiki/teams/4458/wiki/website-banner-copy.png");
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    background-size: cover;
    }

h1
   {
     color: #ffffff;
     font-family: 'Barlow Semi Condensed';
     font-weight: bold;
     font-size: 64px;
   }
h2
   {
     color: #374b52;
     font-family: 'Barlow Semi Condensed';
     font-weight: normal;
     font-size: 48px;
   }
h3
   {
     color: #4d6a73;
     font-family: 'Barlow Semi Condensed';
     font-weight: normal;
     font-size: 32px;
     font-style: italic;
   }
body
   {
     color: #4d6a73;
     font-family: nunito, arial;
     font-weight: light;
     font-size: 19px;
     background-image: url(https://static.igem.wiki/teams/4458/wiki/background-image-1500-2600-px.png);
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
   }
a
   {
     color: #cb335c;
     font-family: nunito, arial;
     font-weight: light;
     font-size: 19px;
     text-decoration: underline;
   }
#content-page
   {
  overflow-wrap: break-word;
  background-color: #ffffff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
  border-radius: 3px;
  padding: 45px;
  margin: 0 128px 2em 80px; }
  @media only screen and (max-width: 1500px) and (min-width: 1000px) {
    .content-page {
      margin: 0 15% 2em 15%; } }
  @media only screen and (max-width: 1000px) {
    .content-page {
      margin: 0 30px 2em 30px;
      padding: 20px; } }
.content-page h1,
.content-page h2 {
  font-family: 'BarlowSemiCondensedExtraBold';
    font-size: 48px;
    font-weight: normal;
}
.content-page h3 {
  font-family: nunito, arial;
     font-size: 19px;
     font-weight: light;
    }

/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom:.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }

/* FLOAT LOGOS */
 /* Three image containers (use 25% for four, and 50% for two, etc) */
.logo-column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
} 

/* FLOAT TEAM PHOTOS */
 /* Three image containers (use 25% for four, and 50% for two, etc) */
.team-column {
  float: left;
  width: 50%;
  padding: 5px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
} 

/* FLOAT ATTRIBUTIONS PHOTOS */
 /* Three image containers (use 25% for four, and 50% for two, etc) */
.attrib-column {
  float: left;
  width: 50%;
  padding: 5px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
} 


/* footer */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }

/* Team bio template from https://snippets.wrappixel.com/bootstrap-team-section/ */

@import url(//fonts.googleapis.com/css?family=Montserrat:300,500);
.team4 {
  font-family: "Montserrat", sans-serif;
	color: #8d97ad;
  font-weight: 300;
}

.team4 h1, .team4 h2, .team4 h3, .team4 h4, .team4 h5, .team4 h6 {
  color: #3e4555;
}

.team4 .font-weight-medium {
	font-weight: 500;
}

.team4 h5 {
    line-height: 22px;
    font-size: 18px;
}

.team4 .subtitle {
    color: #8d97ad;
    line-height: 24px;
		font-size: 13px;
}

.team4 ul li a {
  color: #8d97ad;
  padding-right: 15px;
  -webkit-transition: 0.1s ease-in;
  -o-transition: 0.1s ease-in;
  transition: 0.1s ease-in;
}

.team4 ul li a:hover {
  -webkit-transform: translate3d(0px, -5px, 0px);
  transform: translate3d(0px, -5px, 0px);
	color: #316ce8;
}

figcaption {
  font-style: italic;
  padding: 2px;
  text-align: center;
}